@watermarkinsights/ripple 5.20.0-alpha.0 → 5.20.0-alpha.10

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

@@ -937,10 +937,10 @@ const TagInput = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'a605a67a736cfced28788202c713c9a471829815', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '2b6e16b5779bfe055260370775e3517378917636', class: "label-wrapper" }, index.h("label", { key: 'b47147159b09e53988dba0f360665853ef522167', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label), this.requiredField && (index.h("div", { key: '06afe2cbaf6a32989ee70fd50725adb875d9a8b3', class: "required", "aria-hidden": "true" }, "*"))), index.h("div", { key: 'ba9a1ed7545a2f0b3b72ebdf23231de7df9abf20', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, index.h("div", { key: '03b6ba86a93df334ba0af0e5759cb0834f5e002e', class: "upper-row" }, index.h("div", { key: '5a4b29d9cdcc228426a29524d51e47be84728da8', class: "svg-icon svg-search" }), index.h("div", { key: 'ddd1831f74b7a5204b9ee0077bfe475e5782369c', class: `tags-and-input-wrapper` }, index.h("ul", { key: '0f561a33d4fd7dc683d04bc6c47f0e0f6c096f0a', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagAreaInstructions}`, tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
+        return (index.h("div", { key: '4fe42ced37f66d1da1f80d351d2058f2fa04caed', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: 'feac40a76d0300a640d353789188567b6bce88bd', class: "label-wrapper" }, index.h("label", { key: '8daeb0009a81b3372686cdcaf7823ca66574ea4c', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label), this.requiredField && (index.h("div", { key: 'a09c606545f86da661d38d30bc2207ee138c903d', class: "required", "aria-hidden": "true" }, "*"))), index.h("div", { key: '9bb84f04fdb72fd60348a7c47f45a7c6d0eb1e1c', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, index.h("div", { key: 'e67ffb9ecd84146e6feec21602eaa00f76b262b8', class: "upper-row" }, index.h("div", { key: 'f91652753a955980cd5079030b161abc19df0581', class: "svg-icon svg-search" }), index.h("div", { key: '6845759499b0f5165c145730c416a6036afb7ed3', class: `tags-and-input-wrapper` }, index.h("ul", { key: '4f785e55658d3f900b05a2de2a69f162339b46bf', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagAreaInstructions}`, tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
                 this.focusedTagIndex = undefined;
                 this.handleBlur(ev);
-            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (index.h("div", { key: 'cd62e6627ab5932fb436f333cfb4a33ba3404adc', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (index.h("div", { key: '7cc8c9ba718417cbea5b26b15f7f671b5ad2ee06', id: "info", class: "info-text" }, this.info)), index.h("div", { key: 'a8be5ef2c7f945226f9136c0009a9ce3bcc33686', id: "error" }, this.errorMessage), index.h("div", { key: '3159070da0e032545bf5e3b2ae1e7d8eb6917e69', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
+            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (index.h("div", { key: 'f6c8abfeba27ff6c8a3e769c90ef8a005ff9a661', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (index.h("div", { key: 'f8633a6fe6a65ac8a3b17f4a9fb8ba1fabe1d827', id: "info", class: "info-text" }, this.info)), index.h("div", { key: '09279e977b383947404bb3c47dd41a6461e9e259', id: "error" }, this.errorMessage), index.h("div", { key: 'c9622856c1e7f6fcc9f162563245e561f962252f', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

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

@@ -81,7 +81,7 @@ const Textarea = class {
         this.announcement = message;
     }
     render() {
-        return (index.h("div", { key: 'c2bdf3a833b32103d85e4d19572985dde836aeb8', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '61f16420145b5289639728f06f7a7e9c90ecb220', class: "label-wrapper" }, index.h("label", { key: 'cf3a1d2dbe614498ce76f7d10252ddabe591ffc7', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label, this.characterLimit && (index.h("span", { key: 'ed53aebd7ba2338ba9a34db8ed84f86266fb01a0', class: "sr-only" }, " ", intl.globalMessages.getCharacterLimit(this.characterLimit)))), this.requiredField && (index.h("span", { key: 'c91d58aa6d531d19ca62227f1f9ae6776dc2e6eb', class: "required", "aria-hidden": "true" }, "*"))), index.h("div", { key: 'abbd117e4231de2ee3d696216d869a3ac3078240', class: "inner-wrapper" }, index.h("div", { key: 'e94b2f9f8bbf6d5e374e68555ac266789283b280', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, index.h("textarea", { key: '908e5bb512ed6253d5f1c9cb593f74cf5766ef8c', id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (index.h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (index.h("div", { key: '51239b18371da181395d159315d280e1993383cd', id: "info", class: "info" }, this.info)), index.h("div", { key: 'dd678537871b6ac6efeec23995a1c8bb5a9c3fbb', id: "error", class: "error-message" }, this.errorMessage), index.h("div", { key: '54e35dfe321a05965fc555814cdd3235457a0871', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (index.h("div", { key: '7f63d4224b5570bac29bf622adbd24c12a987fce', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '4b0b469d325eec11069f363f5e7bd44d67a10a46', class: "label-wrapper" }, index.h("label", { key: '9f7494233096cd6bd246a0994d3e9e04f4ded813', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label, this.characterLimit && (index.h("span", { key: '558c487419c9906646191d3f57e3826f0e0474ec', class: "sr-only" }, " ", intl.globalMessages.getCharacterLimit(this.characterLimit)))), this.requiredField && (index.h("span", { key: '5efa5cc6d810b34ecb81da1ac013827961b9400f', class: "required", "aria-hidden": "true" }, "*"))), index.h("div", { key: 'caa5d6620b159c6cf24b763afd546c5ab958d625', class: "inner-wrapper" }, index.h("div", { key: '160d74581d77259428c48c0ade43038280820e10', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, index.h("textarea", { key: '00698ddec17a31ed6cd4ffc27e126bfeaa6aa185', id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (index.h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (index.h("div", { key: 'bf3461f07b38d3ef97143cf3cf1b6d1f2351e079', id: "info", class: "info" }, this.info)), index.h("div", { key: '39a86570c355661e0136b1bd4855d68fec298514', id: "error", class: "error-message" }, this.errorMessage), index.h("div", { key: '274ebbb587acc31f4d9ffda5d1ba01f279a9053c', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -292,13 +292,13 @@ const Timepicker = class {
         return this.times.map((time, index$1) => (index.h("li", { id: `option${index$1 + 1}`, "data-time": time, role: "option", onClick: () => this.handleOptionClick(time) }, this.reformatTimeInternal("12", time))));
     }
     render() {
-        return (index.h(index.Host, { key: 'e05ceac51a9193466dff7a488803f09ae91c837a', onBlur: () => this.close(false) }, index.h("div", { key: '4bdd4087ff1b8c4956623571dc168d761646ce4e', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, index.h("div", { key: 'c64a7486a1c3b74f61c94ce0b3f59c45e96b639e', class: "label-wrapper" }, this.labelPosition !== "none" && (index.h("label", { key: 'cce428cf638a5932b1c157794e646f0b8026e1db', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (index.h("div", { key: '655e1585ffdb70eed624eeec16aa270f3f6584b6', "aria-hidden": "true", class: "required" }, "*"))), index.h("div", { key: '85bf657eff58d0774a25d20c0eba53d7deadd98d' }, index.h("div", { key: '0152b10359dcb69a47275ee88e0a5c0b8cacf051', class: "inner-wrapper" }, index.h("input", { key: '32a55fbfebecafa786cafafc540016f52fcbf38a', id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), index.h("button", { key: '4c77218b291d0d3858c456c816a608b6d2e6d8c6', id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
+        return (index.h(index.Host, { key: '85faaac7eaff466eef31897a1d02e29d7ec7b223', onBlur: () => this.close(false) }, index.h("div", { key: '82f88250e7090d6517e7ecd25a4423ff0b7638d7', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, index.h("div", { key: '114df6b8a382f59b8b6ea238c29051c1ddf568a0', class: "label-wrapper" }, this.labelPosition !== "none" && (index.h("label", { key: 'd26dcc57be0e23f599d64df50520056cf88c9bf9', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (index.h("div", { key: '2b47dbd56c50265a5128a1c77e312b5745db6e2e', "aria-hidden": "true", class: "required" }, "*"))), index.h("div", { key: '46df6ba5efc5d779fb301b2e799f19e6acd6a48f' }, index.h("div", { key: '13c58fb83da101c3ffba9f7647ad3202898db08a', class: "inner-wrapper" }, index.h("input", { key: 'dc442e2553f0c070355744ad614b2543eac29c62', id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), index.h("button", { key: '298e10e7a3edb327d37d7450e3780aeb483934c6', id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
             // This addresses an issue in Safari, where clicking buttons does not focus them
             // if the button does not receive focus when clicked, Timepicker incorrectly emits a blur event
             onMouseDown: (ev) => {
                 ev.preventDefault();
                 this.buttonEl.focus();
-            } }, index.h("span", { key: '0211abd0a1e89e3fd48278022f45572a8696a8de', class: "svg-icon svg-time" })), index.h("ul", { key: 'e7db5d8e3853b0c64099996064c17e361f3f0119', class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), index.h("div", { key: 'bb587cbf052b2b54ff5cd54cd1ee26e1015adf86', id: "error", class: "error" }, this.errorMessage)), index.h("div", { key: 'bf8d0736ecbd1c987b0d5c15a87537be665812d7', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
+            } }, index.h("span", { key: 'f5269ee6b6266dd404f11b5c6cc943082dd539f7', class: "svg-icon svg-time" })), index.h("ul", { key: '219ad64e4a20f478927adff1af541ecc0b8ca688', class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), index.h("div", { key: '709e44a44ed4f99a7cbdbc4dacd461f73615324c', id: "error", class: "error" }, this.errorMessage)), index.h("div", { key: '0b9919a2c9701b6b76b76b780fd35a240eb2adf6', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

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

@@ -238,11 +238,11 @@ const Toggletip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'f8a626c9e0311a0a05d58d12787c0e9a3be5ca8a', class: `size-${this.targetSize}` }, index.h("button", { key: 'c2e2dbc45ce9900a8025973f0fd7a3870eca0afa', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
+        return (index.h(index.Host, { key: '19824ec52b7d5a97250fdf7099041c47a9c10667', class: `size-${this.targetSize}` }, index.h("button", { key: '8442fd803719d93d0354dec15c8f17085f22d955', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
             // In order to position the tooltip identically to the toggletip, its presence is determined by these four events
-            onMouseEnter: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), index.h("div", { key: '3a786c92826bc07b6ec0bb3119f1adfeacc25656', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
+            onMouseEnter: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), index.h("div", { key: 'dfd429b739ef31459a4957a8cfd36c0279e83e24', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
             // @ts-ignore - despite what Typescript says, this is a valid event for popover elements
-            onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), index.h("div", { key: '7ed3b737df01ff9b2bbf3182e8cf3b3188d24b83', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
+            onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), index.h("div", { key: 'af70f189b7f510fc3ae813edfd958050b11e636c', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

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

@@ -323,9 +323,9 @@ const Uploader = class {
         return (index.h("div", { class: `drop-area -${this.dropArea}`, ref: (el) => (this.dropAreaEl = el), onDragEnter: (ev) => this.handleDragEnter(ev), onDragOver: (ev) => this.handleDragOver(ev), onDragLeave: (ev) => this.handleDragLeave(ev), onDrop: (ev) => this.handleDrop(ev) }, this.dropArea == "page" && (index.h("div", { ref: (el) => (this.dropOverlayEl = el), class: "drop-overlay", popover: "manual" }, index.h("span", { class: "upload-arrow" }), index.h("span", null, "Drop to Upload")))));
     }
     render() {
-        return (index.h(index.Host, { key: '480a7275b0ebb68564f92433c8c522769ce60bc3', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), index.h("div", { key: 'b2cec25d91186e5c8a8b7b851fe116bdfdd8c174', ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
+        return (index.h(index.Host, { key: 'f6796cb24519a9cce643c24c69abeb9d33c8632f', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), index.h("div", { key: 'ffe55bea4476877b4df8f3c2df3edcb7ac9ab673', ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
             ,
-            "aria-atomic": "true" }), index.h("div", { key: 'eeb50c37630ba08df7e6be89ec30a55cefeafd9a', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
+            "aria-atomic": "true" }), index.h("div", { key: 'b38debdfda642c215bbb570082dfdeef24da8a8f', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

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

@@ -349,9 +349,7 @@ export class PrivOptionList {
             : selectMessages.optgroupSingleSelectionCount())))));
     }
     renderSearchField() {
-        return (h("div", { class: "search" }, h("div", { class: "searchfield-wrapper", ref: (el) => (this.searchFieldWrapperEl = el) }, h("div", { class: "svg-icon svg-search" }), h("input", { ref: (el) => (this.searchFieldEl = el), class: "searchfield", role: "combobox", "aria-controls": "list",
-            // aria-expanded={this.isExpanded ? "true" : "false"}
-            onKeyDown: (ev) => this.handleKeyDown(ev), onFocus: () => this.searchFieldWrapperEl.classList.add("focus"), onBlur: (ev) => this.handleSearchFieldBlur(ev), onInput: () => this.debouncedSearch(), placeholder: this.searchPlaceholder }))));
+        return (h("div", { class: "search" }, h("div", { class: "searchfield-wrapper", ref: (el) => (this.searchFieldWrapperEl = el) }, h("div", { class: "svg-icon svg-search" }), h("input", { ref: (el) => (this.searchFieldEl = el), class: "searchfield", role: "combobox", "aria-controls": "list", onKeyDown: (ev) => this.handleKeyDown(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" }, selectMessages.noSearchResults);
@@ -369,7 +367,7 @@ export class PrivOptionList {
         return (h("div", { class: "non-options-wrapper" }, this.isInNestedSelect && this.renderReturnBtn(), this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton()));
     }
     render() {
-        return (h("div", { key: '1b5a638b1ce9746eba27e3b106f910b6c08d59ed', class: "list-wrapper" }, (this.isInNestedSelect || this.search || this.visibleSelectAllButton) && this.renderNonOptions(), h("div", { key: '314e0a7234cdb65a636ea96bb9a5bc3ea94cf9aa', 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", { key: '4399f882be1d24b5ee799126b1c8b7396f4985d7' })), h("div", { key: '4132af7d3529fdfa3ec301baa9aaf7ad460f9f5e', id: "optionlist-announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+        return (h("div", { key: '9f19650526738eefcf2e2de58b812d9d0d3a21af', class: "list-wrapper" }, (this.isInNestedSelect || this.search || this.visibleSelectAllButton) && this.renderNonOptions(), h("div", { key: '381b60f8cb2dc58f7c268e75e6d0e78879393f0d', 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", { key: '6a99161cdb2d3c4b6b1bfbe9b4af333daa4704de' })), h("div", { key: '8cee667df6aa79c7db5511858a73f68e911cc566', 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() {

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

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