@watermarkinsights/ripple 5.19.0-alpha.14 → 5.19.0-alpha.16

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

@@ -238,11 +238,11 @@ const Toggletip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '07c2a62e81a2df15f667ca84d440c96dc21a89f7', class: `size-${this.targetSize}` }, index.h("button", { key: 'd0cb8080843aa0c61fbc2a8280b12e25707ba79a', 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: '2127bc9c0e5bebbf58fce82b7ea772a3b6fe2ada', class: `size-${this.targetSize}` }, index.h("button", { key: '55335d84975af0a4e6928b71d08745050454d4e4', 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: '1b082071110727cf565df491c69b8f2a7c58a3d4', 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: 'de52ea584962f47a035c900af10e31951ec49ef6', 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: '140540c39e67e60d63ed8c6e4435a7063a2bb16d', 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: '88e8da7742e5aa390fd17be1efd6067d25f71209', 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: '99be303c7fdecf7fed30bb597f312c792ab0dbd5', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), index.h("div", { key: 'd4fd6720967d4a5eed7b9d0231a5fe8203ed98b8', 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: '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
             ,
-            "aria-atomic": "true" }), index.h("div", { key: '06cfeee56f1cb84a616324cbc8d736e79bf1f258', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
+            "aria-atomic": "true" }), index.h("div", { key: 'eeb50c37630ba08df7e6be89ec30a55cefeafd9a', 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/wm-select/wm-select.css

@@ -1073,10 +1073,6 @@
   -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);
@@ -1168,10 +1164,26 @@
   -moz-transform-origin: center bottom;
   transform-origin: center bottom;
 }
+@supports (top: anchor(bottom)) {
+  .dropdown {
+    -ms-transition: transform 0.25s ease;
+    -webkit-transition: transform 0.25s ease;
+    -moz-transition: transform 0.25s ease;
+    transition: transform 0.25s ease;
+  }
+}
 @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,20 +1,23 @@
 import { h, Host } from "@stencil/core";
 import { forceUpdate } from "@stencil/core";
-import { getTextDir, toBool, handleDisabledAttribute, showTooltip, hideTooltip, debounce, } from "../../../global/functions";
+import { getTextDir, toBool, handleDisabledAttribute, showTooltip, hideTooltip, debounce, findAllScrollableParents, } 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
         //////////////////////////////////////
         // for multiselect button text
         this.overflowCount = 0;
         this.displayedOptions = [];
         this.previousDisplayedOptions = [];
+        this.debouncedReveal = debounce(() => {
+            this.dropdownPosition();
+        }, 100);
         this.debouncedResize = debounce(() => {
-            // Set the dropdown width to match the button width
-            const buttonWidth = this.buttonEl.getBoundingClientRect().width;
-            this.el.style.setProperty("--button-width", buttonWidth + "px");
-        }, 10);
+            this.dropdownPosition();
+        }, 100);
         this.disabled = false;
         this.maxHeight = "200px";
         this.label = undefined;
@@ -28,6 +31,7 @@ export class Select {
         this.searchPlaceholder = selectMessages.searchPlaceholder;
         this.allSelectedMessage = selectMessages.allSelected;
         this.isExpanded = false;
+        this.isHidden = false;
         this.announcement = "";
     }
     get childOptions() {
@@ -59,17 +63,59 @@ export class Select {
         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.isHidden = false;
+    }
     open() {
-        if (!this.isDisabled) {
+        if (!this.isExpanded && !this.isDisabled) {
             this.isExpanded = true;
             // polyfill for browsers without anchor() support (FF)
-            if (!CSS.supports("top", "anchor(bottom)")) {
-                // Set the dropdown width to match the button width
-                const buttonWidth = this.buttonEl.getBoundingClientRect().width;
-                this.el.style.setProperty("--button-width", buttonWidth + "px");
+            if (this.hasAnchor) {
+                this.dropdownPosition();
             }
             window.requestAnimationFrame(() => {
                 this.optionListEl.handleInitialFocus(this.elToFocus);
@@ -82,6 +128,9 @@ export class Select {
             this.isExpanded = false;
             this.optionListEl.unfocusAll();
             window.setTimeout(() => {
+                if (this.hasAnchor) {
+                    this.isHidden = true;
+                }
                 if (this.optionListEl.multiple) {
                     this.optionListEl.updateOptionVisibility();
                 }
@@ -124,11 +173,22 @@ export class Select {
         }
     }
     handleResize() {
-        if (!CSS.supports("top", "anchor(bottom)")) {
+        if (this.hasAnchor && this.isExpanded) {
+            this.isHidden = true;
             this.debouncedResize();
         }
     }
+    handleScroll() {
+        if (this.hasAnchor && this.isExpanded) {
+            this.isHidden = true;
+            this.debouncedReveal();
+        }
+    }
     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`).");
         }
@@ -153,6 +213,20 @@ 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());
+                }
+                else {
+                    // For regular elements, listen to their scroll event
+                    parent.addEventListener("scroll", () => this.handleScroll());
+                }
+            });
+        }
     }
     announceError() {
         if (this.errorMessage) {
@@ -222,11 +296,11 @@ export class Select {
     }
     render() {
         const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
-        return (h(Host, { key: '21d95492d43ab9d1069bf1742d93071df9985dfe', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'eb131f027fcc63a0d7196f647ad6f8952bbc13de', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '41ce7e3027abf28c20927a3f4ad0efa2f8d79ffb', class: "label-wrapper" }, h("label", { key: 'deabf9ba353e261bb1f3d7dbf87be2ddd5d805f2', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
+        return (h(Host, { key: '57a3ecaf243a3de5b8f69925fd186e4749fba4c6', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'f90cf32144264ea7eb10b099f3e25973c13fd814', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '03bba9898b08c834d5a156dfc1bc381b592d2ef3', class: "label-wrapper" }, h("label", { key: 'ad72061788928c98ce7f6141f7c1b38ccc949268', 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: '44ee2795454f9f3bee95ecc4f260b9d56527a108', class: "required" }, h("span", { key: 'defe21df63827aac177d52074e1242c32e98bcb3', class: "sr-only" }, globalMessages.requiredField), h("span", { key: 'a10f31be028d79e347d38b6226e64d11e67bcee4', "aria-hidden": "true" }, "*")))), h("div", { key: 'a7910f2d9180bb148b71ff30d91a4b32814720ab', class: "button-wrapper" }, h("button", { key: 'e346214e6aa3087126f48e831a1f4cf8ad47b374', 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: '6774b180ebc5831316af4364e82b09811a040681', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '70e0cc7710e6ca4eac93025dfc8c7c5241f5483d', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: '451817c953223b0443999e1414808d430a1cfd7a', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '86db46ffc2455ec67a5a70f9a4e7a88541487473', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '150324e049b4f37405c13b866edb6a09d13866b5', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'e0aeb5622be16c1bc89c03b10eb0c9bc71e6321c', class: "dropdown", id: "dropdown", popover: "auto", ref: (el) => (this.dropdownEl = el),
+        this.requiredField && (h("span", { key: '378e4911d89ca8427c619ced56a20ed43d73cf02', class: "required" }, h("span", { key: '2583faa1fe9ea27aac2dba84e1e8a82e02abc2a3', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '5bb67c3729c29b77c17dda4ec7afe1bde85d2ad3', "aria-hidden": "true" }, "*")))), h("div", { key: '5f42f0cca053a9207a13ff30bc58dbaf45483bd4', class: "button-wrapper" }, h("button", { key: '030f225bbfe336a5bb9629fe2942fadf749f48ef', 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: 'c924c25ccbdca793b1dfa553f261a355712623eb', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'd7efa5ab65e654af4fbb9d7e2bf24babe01c8858', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: 'c52cb532dcc5e9de3aa787cee35bc72925f58538', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: 'bde59ae85543ff0856e19b02c99344dd81e570eb', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '1ed8d13d706d6e511a1e5fbc942e9bc1455497ce', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'cebdda0ace7ffed445bee46f910433d31c16f325', class: `dropdown ${this.isHidden ? "hidden" : ""}`, 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: '79f20c45531d18790a8527694fda90f26f84c4e6', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
+            onToggle: (ev) => this.handleToggle(ev) }, h("priv-option-list", { key: '821b8f72804ceaf826ee46ce8649fcb2122f44aa', 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;
@@ -234,7 +308,7 @@ export class Select {
             }, onOptionListAllDeselected: () => {
                 this.returnFocus = true;
                 this.wmSelectAllDeselected.emit();
-            } }, h("slot", { key: '04942d335177161673a0cb0e62bd509f418390a8' }))), h("div", { key: '2304a7f6e9f40a62a7a7d9b0ebe408dbfbb0c81d', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '78bea4db879582d61cee9b5bf24bfa7b6286926e', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+            } }, h("slot", { key: 'd0b449e495d3e99827e5d748ed3b2cdfef447eab' }))), h("div", { key: '764f1b1072cfec66f44827c9833c5d923386dc0d', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'aeb4f58a70d7cb7819f2a345d5fb175515522315', 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"; }
@@ -470,6 +544,7 @@ export class Select {
     static get states() {
         return {
             "isExpanded": {},
+            "isHidden": {},
             "announcement": {}
         };
     }

package/dist/collection/components/wm-tag-input/wm-tag-input.css

@@ -882,13 +882,13 @@
   --wmcolor-taginput-option-text-selected: var(--wmcolor-option-text-disabled);
   --wmcolor-taginput-option-text: var(--wmcolor-interactive);
   --wmcolor-taginput-row-background-hover: var(--wmcolor-interactive-background-hover);
-  --wmcolor-taginput-row-background-focus: var(--wmcolor-interactive-background-focus);
+  --wmcolor-taginput-row-background-focus: var(--wmcolor-background-selected);
   --wmcolor-taginput-row-background-selected: var(--wmcolor-table-row-background-selected);
   --wmcolor-taginput-row-background-table: var(--wmcolor-table-row-background);
   --wmcolor-taginput-row-border-selected: var(--wmcolor-table-row-border-selected);
   --wmcolor-taginput-tag-background-highlight: var(--wmcolor-interactive-background-highlight);
   --wmcolor-taginput-tag-background-locked: var(--wmcolor-interactive-disabled);
-  --wmcolor-taginput-tag-background: var(--wmcolor-palelilacgray); /* EXCEPTION */
+  --wmcolor-taginput-tag-background: var(--wmcolor-lilacgray-30); /* EXCEPTION */
   --wmcolor-taginput-tag-text-locked: var(--wmcolor-text-ondark);
   --wmcolor-taginput-tag-text: var(--wmcolor-text);
   --wmcolor-taginput-tagbutton-background-hover: var(--wmcolor-interactive-hover);
@@ -1218,11 +1218,12 @@
   outline: none;
   background: var(--wmcolor-taginput-option-background-hover);
 }
-:host .dropdown-wrapper li.option.focused, :host .dropdown-wrapper li.add-new-btn.focused,
-:host .dropdown-wrapper div.option.focused,
-:host .dropdown-wrapper div.add-new-btn.focused {
+:host .dropdown-wrapper li.option.focused:not(:hover), :host .dropdown-wrapper li.add-new-btn.focused:not(:hover),
+:host .dropdown-wrapper div.option.focused:not(:hover),
+:host .dropdown-wrapper div.add-new-btn.focused:not(:hover) {
   outline: none;
   background: var(--wmcolor-taginput-option-background-focus);
+  color: var(--wmcolor-interactive-text);
 }
 :host .dropdown-wrapper li.help-text,
 :host .dropdown-wrapper div.help-text {
@@ -1245,9 +1246,6 @@
   overflow: auto;
   margin-block-start: 1.5rem;
 }
-:host .table-wrapper:focus {
-  outline: none;
-}
 :host .table-wrapper #table {
   width: 100%;
   border-spacing: 0px;
@@ -1266,6 +1264,9 @@
   text-transform: uppercase;
   padding: 0 1.5rem;
 }
+:host .table-wrapper #table:focus {
+  outline: none;
+}
 :host .table-wrapper tr:nth-child(even) {
   background-color: var(--wmcolor-taginput-altrow-background-table);
 }

package/dist/collection/components/wm-tag-input/wm-tag-input.js

@@ -634,7 +634,7 @@ export class TagInput {
             }
         }
     }
-    handleTableWrapperFocus() {
+    handleTableFocus() {
         // Forward focus to first focusable table row when container receives focus
         // First try filtered options, then fall back to all options
         let targetOptions = this.filteredOptionEls;
@@ -717,6 +717,14 @@ export class TagInput {
                     // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text
                     showTooltip("bottom", this._focusedOption, this._focusedOption.innerText);
                 }
+                const tableEl = this.el.shadowRoot.querySelector("#table");
+                if (!(this.el.shadowRoot.activeElement == tableEl)) {
+                    tableEl.focus();
+                }
+                if (this.filteredOptionEls.length > 0 && this.focusedOption == this.filteredOptionEls[0]) {
+                    // When the focused option is the first option, scroll to the top of the table so headers are visible
+                    this.el.shadowRoot.querySelector(".table-wrapper").scrollTop = 0;
+                }
             }
             optionToFocus.scrollIntoView({ block: "nearest" });
         }
@@ -815,6 +823,12 @@ export class TagInput {
     handleTagMouseEnter(ev) {
         this.showTooltipIfTruncated(ev.target);
     }
+    renderDropdownInput() {
+        return (h("input", { id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": "dropdown", "aria-describedby": `help-text ${this.errorMessage ? "error " : ""} max-tags`, "aria-label": `${this.label} ${globalMessages.getCharacterLimit(this.characterLimit)}`, "aria-expanded": this.isExpanded.toString(), "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.characterLimit, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => this.handleBlur(ev), onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) }));
+    }
+    renderTableInput() {
+        return (h("input", { id: "input", class: "input", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": "table", "aria-describedby": `help-text ${this.errorMessage ? "error " : ""} max-tags`, "aria-label": this.label, placeholder: this.placeholder, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => this.handleBlur(ev), onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) }));
+    }
     renderDropdown() {
         return (h("div", { class: `dropdown-wrapper ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { id: "help-text", class: "help-text" }, this.renderHelpText()), h("ul", { class: "dropdown", id: "dropdown", role: "listbox", "aria-multiselectable": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.label, tabindex: -1 }, this.inputEl && this.renderAddNewButton(), this.filteredOptionEls.map((o) => this.renderListItem(o)))));
     }
@@ -841,11 +855,8 @@ export class TagInput {
     renderTable() {
         return (h("div", { class: `table-wrapper ${this.isKeying ? "user-is-keying" : ""}`, onScroll: () => this.dismissTooltip(),
             // browsers will make this container tabbable if it scrolls
-            // this handler will forward focus to the appropriate element within the table...
-            onFocus: () => this.handleTableWrapperFocus(),
-            // ...and for consistency, the table, whether it scrolls or not, should be tabbable
-            // as long as it's not empty
-            tabindex: this.filteredOptionEls.length ? "0" : undefined, onKeyDown: (ev) => this.handleTableWrapperKeyDown(ev) }, h("table", { id: "table", role: "grid", class: `${this.colWidths ? "fixed-widths" : ""}`, "aria-label": this.label, "aria-multiselectable": "true" }, this.renderTableHeaders(), this.filteredOptionEls.length ? (this.filteredOptionEls.map((o) => this.renderTableRow(o))) : (h("div", { class: "no-results" }, this.noResultsMessage)))));
+            // we need to proactively set tabindex to -1 to avoid user focus. This is okay, because the table provides behavior that allows scrolling its content
+            tabindex: -1, onKeyDown: (ev) => this.handleTableWrapperKeyDown(ev) }, h("table", { id: "table", role: "grid", class: `${this.colWidths ? "fixed-widths" : ""}`, "aria-label": this.label, "aria-multiselectable": "true", onFocus: () => this.handleTableFocus(), "aria-activedescendant": this._focusedCell ? this._focusedCell.id : undefined, tabindex: this.filteredOptionEls.length ? "0" : undefined }, this.renderTableHeaders(), this.filteredOptionEls.length ? (this.filteredOptionEls.map((o) => this.renderTableRow(o))) : (h("div", { class: "no-results" }, this.noResultsMessage)))));
     }
     renderTableHeaders() {
         return (h("tr", { class: "headers", role: "row" }, csvToArray(this.colHeaders).map((header, idx) => (h("th", { class: "header-cell", role: "columnheader",
@@ -916,12 +927,10 @@ export class TagInput {
         }
     }
     render() {
-        return (h("div", { key: '3b80913e5cebf97f7da13646d3ba2ebca1ff7acb', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '3046fd2f7c843d6dd7049063164ba1ecbb791bed', class: "label-wrapper" }, h("label", { key: 'd33734b6cbe7dff0b512bf760bdf1ff26a756446', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.requiredField && (h("div", { key: '9c0e3c6662a75f33e9506d5051b01119afea6327', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'ebd9f767f4b4b715078845aed067e10471394bd7', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '62a1b95c2a0d7b3f2cf0f2386eb0cd9e1aeba303', class: "upper-row" }, h("div", { key: 'a6c0facb5651b3e6009e26f193c381b7a4ec002f', class: "svg-icon svg-search" }), h("div", { key: '9020b2b35aa161b72f073b9a0eb2a963680d3727', class: `tags-and-input-wrapper` }, h("ul", { key: 'e5136c64a45cf4f6f7a759721e126b55066b386b', 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 (h("div", { key: 'a605a67a736cfced28788202c713c9a471829815', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '2b6e16b5779bfe055260370775e3517378917636', class: "label-wrapper" }, h("label", { key: 'b47147159b09e53988dba0f360665853ef522167', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.requiredField && (h("div", { key: '06afe2cbaf6a32989ee70fd50725adb875d9a8b3', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'ba9a1ed7545a2f0b3b72ebdf23231de7df9abf20', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '03b6ba86a93df334ba0af0e5759cb0834f5e002e', class: "upper-row" }, h("div", { key: '5a4b29d9cdcc228426a29524d51e47be84728da8', class: "svg-icon svg-search" }), h("div", { key: 'ddd1831f74b7a5204b9ee0077bfe475e5782369c', class: `tags-and-input-wrapper` }, 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) => {
                 this.focusedTagIndex = undefined;
                 this.handleBlur(ev);
-            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { key: 'e6b95de440173ace0008faacd3b8bea77af0da8c', id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""} max-tags`, "aria-label": `${this.label} ${this.isDropdown ? globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.isDropdown ? this.isExpanded.toString() : null, "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.isDropdown ? this.characterLimit : undefined, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => {
-                this.handleBlur(ev);
-            }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { key: '418f93ca2ea86a1fa46a6d2f601c84e309c32a2f', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'a4a98937151304e2d9357f0522d445b6f841eb02', id: "info", class: "info-text" }, this.info)), h("div", { key: 'b6ac66b1e5a056503da95df5b1eec2bcba259b76', id: "error" }, this.errorMessage), h("div", { key: '5f7e12833cadb8961f850aa47a8e61262e6d3779', 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 && (h("div", { key: 'cd62e6627ab5932fb436f333cfb4a33ba3404adc', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: '7cc8c9ba718417cbea5b26b15f7f671b5ad2ee06', id: "info", class: "info-text" }, this.info)), h("div", { key: 'a8be5ef2c7f945226f9136c0009a9ce3bcc33686', id: "error" }, this.errorMessage), h("div", { key: '3159070da0e032545bf5e3b2ae1e7d8eb6917e69', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
     }
     static get is() { return "wm-tag-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-textarea/wm-textarea.js

@@ -71,7 +71,7 @@ export class Textarea {
         this.announcement = message;
     }
     render() {
-        return (h("div", { key: '5bd7daf935fa75bec3fccc000c4674b23da1c043', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '52f18f7ef95fb4505f19ec57b3328db9706af750', class: "label-wrapper" }, h("label", { key: '510bf29970364b1caacfd1eef164a2f766217df2', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '47024a21e0940c6c40dde2b131c337636fe1bbdf', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.requiredField && (h("span", { key: 'dff37fb5a589b44b4eb249b0b3a572e9944a15cb', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '8dda587667514bbf0db310491cf58d2b3ea00fea', class: "inner-wrapper" }, h("div", { key: '8782435cdc9150197ac29a09fd6b3d6b95413c59', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: '3d7a017570a79669f03914e00be725a633717c66', 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" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { key: '7cfb20e30f1413096a861089e932aabc46be0593', id: "info", class: "info" }, this.info)), h("div", { key: '2f450eb52e3bf5e805e125f19e59766c4d45a75c', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '024947b6fa1ef096bb09c1c9183984e647ed5432', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { key: 'c2bdf3a833b32103d85e4d19572985dde836aeb8', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '61f16420145b5289639728f06f7a7e9c90ecb220', class: "label-wrapper" }, h("label", { key: 'cf3a1d2dbe614498ce76f7d10252ddabe591ffc7', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: 'ed53aebd7ba2338ba9a34db8ed84f86266fb01a0', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.requiredField && (h("span", { key: 'c91d58aa6d531d19ca62227f1f9ae6776dc2e6eb', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'abbd117e4231de2ee3d696216d869a3ac3078240', class: "inner-wrapper" }, h("div", { key: 'e94b2f9f8bbf6d5e374e68555ac266789283b280', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, 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" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { key: '51239b18371da181395d159315d280e1993383cd', id: "info", class: "info" }, this.info)), h("div", { key: 'dd678537871b6ac6efeec23995a1c8bb5a9c3fbb', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '54e35dfe321a05965fc555814cdd3235457a0871', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-timepicker/wm-timepicker.js

@@ -281,13 +281,13 @@ export class Timepicker {
         return this.times.map((time, index) => (h("li", { id: `option${index + 1}`, "data-time": time, role: "option", onClick: () => this.handleOptionClick(time) }, this.reformatTimeInternal("12", time))));
     }
     render() {
-        return (h(Host, { key: 'fd0acc447628174ea8551c1ea7cafdc8b0b6ec74', onBlur: () => this.close(false) }, h("div", { key: 'a8c7c453558df7a33fc42d71eff78894a36306d6', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: '9f259605e513d12e32716f12b4d5dee9fb97d10a', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '1b1b596a992a66f6738cab61086c9d7298934e8c', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '4fc12427a1b3c62b9a6e7cd53c83cec311b46f1e', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: '6f299347f62dd5299f0223bbdee82fc55dafe06a' }, h("div", { key: 'd78e3b28b110714558d94ba03bedc4d63e8a41d7', class: "inner-wrapper" }, h("input", { key: '1af64c4c0ab7bd983d3e926ad1ea146bed0dadea', 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") }), h("button", { key: 'a99cd67d7bfa17c4ba512b73097b5987b8d5d4f8', 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 (h(Host, { key: 'e05ceac51a9193466dff7a488803f09ae91c837a', onBlur: () => this.close(false) }, h("div", { key: '4bdd4087ff1b8c4956623571dc168d761646ce4e', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: 'c64a7486a1c3b74f61c94ce0b3f59c45e96b639e', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: 'cce428cf638a5932b1c157794e646f0b8026e1db', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '655e1585ffdb70eed624eeec16aa270f3f6584b6', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: '85bf657eff58d0774a25d20c0eba53d7deadd98d' }, h("div", { key: '0152b10359dcb69a47275ee88e0a5c0b8cacf051', class: "inner-wrapper" }, 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") }), 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()),
             // 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();
-            } }, h("span", { key: 'd50582487d9860716e0bdc67b99ac75b346d62aa', class: "svg-icon svg-time" })), h("ul", { key: '63a9ed95dc1c238d12d84150c406e5ff877d71b3', 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())), h("div", { key: '25ea586bea9676a7d18c2fdeada1dcaf0a224471', id: "error", class: "error" }, this.errorMessage)), h("div", { key: '4985d6ee5df49f687eaeeb06a1b5a0c8b14b7119', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
+            } }, h("span", { key: '0211abd0a1e89e3fd48278022f45572a8696a8de', class: "svg-icon svg-time" })), 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())), h("div", { key: 'bb587cbf052b2b54ff5cd54cd1ee26e1015adf86', id: "error", class: "error" }, this.errorMessage)), h("div", { key: 'bf8d0736ecbd1c987b0d5c15a87537be665812d7', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
     }
     static get is() { return "wm-timepicker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-toggletip/wm-toggletip.js

@@ -229,11 +229,11 @@ export class Toggletip {
         }
     }
     render() {
-        return (h(Host, { key: '07c2a62e81a2df15f667ca84d440c96dc21a89f7', class: `size-${this.targetSize}` }, h("button", { key: 'd0cb8080843aa0c61fbc2a8280b12e25707ba79a', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
+        return (h(Host, { key: '2127bc9c0e5bebbf58fce82b7ea772a3b6fe2ada', class: `size-${this.targetSize}` }, h("button", { key: '55335d84975af0a4e6928b71d08745050454d4e4', 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 && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), h("div", { key: '1b082071110727cf565df491c69b8f2a7c58a3d4', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
+            onMouseEnter: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), h("div", { key: 'de52ea584962f47a035c900af10e31951ec49ef6', 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), h("div", { key: '140540c39e67e60d63ed8c6e4435a7063a2bb16d', 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), h("div", { key: '88e8da7742e5aa390fd17be1efd6067d25f71209', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-toggletip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-uploader/wm-uploader.js

@@ -313,9 +313,9 @@ export class Uploader {
         return (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" && (h("div", { ref: (el) => (this.dropOverlayEl = el), class: "drop-overlay", popover: "manual" }, h("span", { class: "upload-arrow" }), h("span", null, "Drop to Upload")))));
     }
     render() {
-        return (h(Host, { key: '99be303c7fdecf7fed30bb597f312c792ab0dbd5', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: 'd4fd6720967d4a5eed7b9d0231a5fe8203ed98b8', 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 (h(Host, { key: '480a7275b0ebb68564f92433c8c522769ce60bc3', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), 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
             ,
-            "aria-atomic": "true" }), h("div", { key: '06cfeee56f1cb84a616324cbc8d736e79bf1f258', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
+            "aria-atomic": "true" }), h("div", { key: 'eeb50c37630ba08df7e6be89ec30a55cefeafd9a', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-uploader"; }
     static get encapsulation() { return "shadow"; }

package/dist/esm/{app-globals-edff5d27.js → app-globals-8c95d5b7.js}

@@ -1,6 +1,6 @@
 import './index-130e07bb.js';
 
-const version = "5.19.0-alpha.14";
+const version = "5.19.0-alpha.16";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length