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

package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.css

@@ -869,25 +869,71 @@
   --wmcolor-tab-background-dark: var(--wmcolor-background-dark);
   --wmcolor-tab-text-ondark: var(--wmcolor-interactive-ondark);
   --wmcolor-tab-text: var(--wmcolor-interactive);
-  position: relative;
-  white-space: nowrap;
-  height: fit-content;
+  background: var(--wmcolor-tab-background);
   display: block;
+  position: relative;
+  width: 100%;
+}
+:host .component-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border-block-end: 1px solid var(--wmcolor-border);
+}
+:host .component-wrapper:has(.dark) {
+  background: var(--wmcolor-tab-background-dark);
+  border-block-end: 2px solid var(--wmcolor-tab-background-dark);
 }
 :host .tabcontainer {
-  background: var(--wmcolor-tab-background);
   margin: 0;
-  width: 100%;
-  height: 4.0625rem;
+  width: fit-content;
+  max-width: 100%;
+  min-height: 2.75rem;
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 0;
+  overflow-x: hidden;
+  --fade-distance: 0.875rem;
 }
 :host .tabcontainer.dark {
-  background: var(--wmcolor-tab-background-dark);
   margin: 0;
+  padding-inline: 0.125rem;
+}
+:host .tabcontainer.fade-left.fade-right {
+  mask-image: linear-gradient(90deg, transparent 0, black var(--fade-distance), black calc(100% - var(--fade-distance)), transparent 100%);
+}
+:host .tabcontainer.fade-left:not(.fade-right) {
+  mask-image: linear-gradient(90deg, transparent 0, black var(--fade-distance), black 100%);
+}
+:host .tabcontainer.fade-right:not(.fade-left) {
+  mask-image: linear-gradient(90deg, black 0, black calc(100% - var(--fade-distance)), transparent 100%);
+}
+:host wm-button.left-arrow,
+:host wm-button.right-arrow {
+  --icon-size: 1.25rem;
+  display: none;
+  flex-shrink: 0;
+}
+:host wm-button.left-arrow.visible,
+:host wm-button.right-arrow.visible {
+  display: block;
+}
+:host wm-button.left-arrow {
+  margin-inline: 0.125rem 0.5rem;
+}
+:host wm-button.right-arrow {
+  margin-inline: 0.5rem 0.125rem;
 }
-:host wm-select {
-  padding: 0.375rem 0;
+:host .sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  clip-path: inset(50%) !important;
+  white-space: nowrap !important;
+  margin: -1px !important;
 }

package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.js

@@ -1,32 +1,17 @@
-import { forceUpdate, h, Host } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { debounce, intl } from "../../../global/functions";
 export class TabList {
     constructor() {
-        this.selectLabel = intl.formatMessage({
-            id: "tab.selectLabel",
-            defaultMessage: "Choose a tab",
-            description: "Tab refers to a tab UI element",
-        });
-        this.debouncedSetLayout = debounce(() => {
-            if (!this.listWidth) {
-                this.setListWidth();
-            }
-            forceUpdate(this.el);
-        }, 10);
+        this.debouncedUpdateContainerState = debounce(() => {
+            this.updateContainerFade();
+            this.updateArrowVisibility();
+        }, 16);
         this.customBackground = undefined;
-        this.customPadding = undefined;
         this.selectedTab = undefined;
-    }
-    /**
-     * Set to true when the tab list exceeds the parent width. Component will render the menu layout.
-     */
-    get menuLayout() {
-        if (this.listWidth) {
-            return this.el.offsetWidth < this.listWidth - 24; // to take into account the negative margin on the ul
-        }
-        else {
-            return false; // in case listWidth couldn't get computed, we render regular tabs
-        }
+        this.announcement = "";
+        this.containerFadeLeft = false;
+        this.containerFadeRight = false;
+        this.scrollArrowsVisible = false;
     }
     get tabItems() {
         return Array.from(this.el.querySelectorAll("wm-tab-item"));
@@ -45,10 +30,6 @@ export class TabList {
     getPanel(tabId) {
         return this.panels.find((p) => p.tabId === tabId);
     }
-    setListWidth() {
-        let newCalc = this.tabItems.reduce((sum, tab) => sum + tab.offsetWidth, 0);
-        this.listWidth = newCalc && newCalc > 0 ? newCalc : this.listWidth; // the function may return 0. In this case keep the previous value
-    }
     setSelected(id) {
         this.tabItems.map((tab) => (tab.selected = tab.tabId === id));
         const singlePanel = this.panels.length === 1 && this.tabItems.length > 1;
@@ -62,28 +43,29 @@ export class TabList {
         else {
             this.panels.map((panel) => (panel.active = panel.tabId === id));
         }
-    }
-    showItems() {
-        this.tabItems.map((t) => (t.show = true));
-    }
-    hideItems() {
-        this.tabItems.map((t) => (t.show = false));
+        this.handleTabFocused(this.selectedTabItem);
     }
     componentWillLoad() {
         this.el.focus = () => {
             // in addition to delegatesFocus, we need to highjack the focus method to send focus to the selected tab-item
-            this.selectedTabItem && this.selectedTabItem.focus();
+            this.selectedTabItem && this.selectedTabItem.focus({ preventScroll: true });
         };
-        const resizeObserver = new ResizeObserver(() => this.debouncedSetLayout());
-        resizeObserver.observe(this.el);
     }
     componentDidLoad() {
         const selectedTab = this.selectedTab || this.tabItems[0].tabId;
         this.setSelected(selectedTab);
+        this.handleTabFocused(this.selectedTabItem);
+        this.updateArrowVisibility();
+        this.tabContainerEl.addEventListener("scroll", this.debouncedUpdateContainerState);
+        const resizeObserver = new ResizeObserver(() => this.debouncedUpdateContainerState());
+        resizeObserver.observe(this.el);
     }
     tabItemLoaded(ev) {
         this.setAriaOnPanelAndTab(ev.target);
     }
+    wmTabFocused(ev) {
+        this.handleTabFocused(ev.detail.tabItem);
+    }
     setAriaOnPanelAndTab(tab) {
         const panel = this.getPanel(tab.tabId);
         // If there's no panel, check for case where content is conditionally rendered in one panel, in which case attributes on all tabs should point to this single panel.
@@ -135,32 +117,152 @@ export class TabList {
             index = 0;
         }
         const tabToFocus = this.tabItems[index];
-        this.getLinkEl(tabToFocus).focus();
+        this.getLinkEl(tabToFocus).focus({ preventScroll: true });
+    }
+    handleTabFocused(tabItem, alignment = "auto") {
+        // Calculate and apply scroll position
+        const targetScrollLeft = this.calculateScrollPositionForTab(tabItem, alignment);
+        this.tabContainerEl.scrollTo({ left: targetScrollLeft, behavior: "smooth" });
     }
-    renderMenuOrTabs() {
-        if (this.menuLayout) {
-            this.hideItems();
-            return (h("wm-select", { label: this.selectLabel, "label-position": "none" }, this.renderOptions()));
+    calculateScrollPositionForTab(tabItem, alignment = "auto") {
+        const containerRect = this.tabContainerEl.getBoundingClientRect();
+        const containerScrollLeft = this.tabContainerEl.scrollLeft;
+        const tabRect = tabItem.getBoundingClientRect();
+        const tabLeft = containerScrollLeft + (tabRect.left - containerRect.left);
+        const tabRight = tabLeft + tabRect.width;
+        // Explicit alignment
+        if (alignment === "left") {
+            return tabLeft; // Snap to left edge
         }
-        else {
-            this.showItems();
-            let margins = {};
-            if (this.customPadding) {
-                margins = {
-                    "margin-left": "-" + this.customPadding,
-                };
+        if (alignment === "right") {
+            return Math.max(0, tabRight - containerRect.width); // Snap to right edge
+        }
+        // Auto alignment
+        const firstTab = this.tabItems[0];
+        const lastTab = this.tabItems[this.tabItems.length - 1];
+        if (tabItem === firstTab) {
+            return 0;
+        }
+        if (tabItem === lastTab) {
+            return Math.max(0, this.tabContainerEl.scrollWidth - containerRect.width);
+        }
+        if (tabLeft < containerScrollLeft) {
+            return tabLeft; // Left edge cut off, align left
+        }
+        if (tabRight > containerScrollLeft + containerRect.width) {
+            return tabRight - containerRect.width; // Right edge cut off, align right
+        }
+        return containerScrollLeft; // Fully visible, no scroll needed
+    }
+    updateContainerFade() {
+        const tolerance = 1; // 1px tolerance for floating-point precision
+        // Check if there's content scrolled out of view on each side
+        let shouldFadeLeft = this.tabContainerEl.scrollLeft > tolerance;
+        let shouldFadeRight = this.tabContainerEl.scrollLeft + this.tabContainerEl.clientWidth < this.tabContainerEl.scrollWidth - tolerance;
+        const focusedTab = this.tabItems.find((tab) => tab.matches(":focus-within"));
+        if (focusedTab) {
+            const containerRect = this.tabContainerEl.getBoundingClientRect();
+            const tabRect = focusedTab.getBoundingClientRect();
+            const isAtOrOverlappingLeft = tabRect.left <= containerRect.left + tolerance;
+            const isAtOrOverlappingRight = tabRect.right >= containerRect.right - tolerance;
+            if (isAtOrOverlappingLeft) {
+                shouldFadeLeft = false; // Don't fade left if focused tab is at/beyond left edge
+            }
+            if (isAtOrOverlappingRight) {
+                shouldFadeRight = false; // Don't fade right if focused tab is at/beyond right edge
+            }
+        }
+        this.containerFadeLeft = shouldFadeLeft;
+        this.containerFadeRight = shouldFadeRight;
+    }
+    updateArrowVisibility() {
+        const leftArrowEl = this.el.shadowRoot.querySelector(".left-arrow");
+        const rightArrowEl = this.el.shadowRoot.querySelector(".right-arrow");
+        const isScrollable = this.tabContainerEl.scrollWidth > this.el.getBoundingClientRect().width;
+        this.scrollArrowsVisible = isScrollable;
+        requestAnimationFrame(() => {
+            // Let arrows render before checking if they should be disabled
+            if (this.scrollArrowsVisible) {
+                const tolerance = 1; // 1px tolerance for floating-point precision
+                const canScrollLeft = this.tabContainerEl.scrollLeft > tolerance;
+                const canScrollRight = this.tabContainerEl.scrollLeft + this.tabContainerEl.clientWidth <
+                    this.tabContainerEl.scrollWidth - tolerance;
+                leftArrowEl.classList.toggle("disabled", !canScrollLeft);
+                rightArrowEl.classList.toggle("disabled", !canScrollRight);
+            }
+        });
+    }
+    handleLeftArrowClick(ev) {
+        const buttonEl = ev.target;
+        if (buttonEl.classList.contains("disabled")) {
+            // If the arrow is disabled, take no action and announce reason
+            this.announce(intl.formatMessage({
+                id: "tabs.cannotScrollLeft",
+                defaultMessage: "No more tabs to the left",
+                description: "Announcement for button scrolling tab group.",
+            }));
+            return;
+        }
+        // Find the first tab that's partially or completely obscured on the left
+        const containerRect = this.tabContainerEl.getBoundingClientRect();
+        const containerLeft = containerRect.left;
+        let tabToFocus = null;
+        const reversedTabItems = this.tabItems.reverse();
+        reversedTabItems.forEach((tab) => {
+            if (!tabToFocus) {
+                const tabRect = tab.getBoundingClientRect();
+                if (tabRect.left < containerLeft - 1) {
+                    tabToFocus = tab;
+                }
+            }
+        });
+        if (tabToFocus) {
+            this.handleTabFocused(tabToFocus, "right"); // Snap to right edge for page-scroll behavior
+        }
+    }
+    handleRightArrowClick(ev) {
+        const buttonEl = ev.target;
+        if (buttonEl.classList.contains("disabled")) {
+            this.announce(intl.formatMessage({
+                id: "tabs.cannotScrollRight",
+                defaultMessage: "No more tabs to the right",
+                description: "Announcement for button scrolling tab group.",
+            }));
+            return;
+        }
+        // Find the first tab that's partially or completely obscured on the right
+        const containerRect = this.tabContainerEl.getBoundingClientRect();
+        const containerRight = containerRect.right;
+        let tabToFocus = null;
+        this.tabItems.forEach((tab) => {
+            if (!tabToFocus) {
+                const tabRect = tab.getBoundingClientRect();
+                if (tabRect.right > containerRight + 1) {
+                    tabToFocus = tab;
+                }
             }
-            return (h("ul", { class: `tabcontainer ${this.customBackground || ""}`, style: margins, role: "tablist" }, h("slot", null)));
+        });
+        if (tabToFocus) {
+            this.handleTabFocused(tabToFocus, "left"); // Snap to left edge for page-scroll behavior
         }
     }
-    renderOptions() {
-        return this.tabItems.map((t) => (h("wm-option", { id: `tab-link-${t.tabId}`, selected: t.tabId === this.selectedTab, onClick: (ev) => {
-                ev.preventDefault();
-                this.wmTabSelected.emit({ tabId: t.tabId });
-            } }, t.textContent)));
+    announce(message) {
+        // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
+        if (this.liveRegionEl.textContent === message) {
+            message += "\u00A0";
+        }
+        this.announcement = message;
     }
     render() {
-        return h(Host, { key: 'd4a1e7380e109d5707d2215418d980a9fe319f40', class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
+        return (h(Host, { key: 'e555fa0280ec84bb47b526bf7d475cb3a78497e5' }, h("div", { key: '14ae10e3627884c0d7c46b70065f24c7c7f737e7', class: "component-wrapper" }, h("wm-button", { key: 'ef4bcbd93b6a2f53e81dc44032fe90111c5cb037', class: `left-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#previous", tooltip: intl.formatMessage({
+                id: "tabs.showPreviousTabs",
+                defaultMessage: "Show previous tabs",
+                description: "Tooltip for button scrolling tab group.",
+            }), onClick: (ev) => this.handleLeftArrowClick(ev) }), h("ul", { key: '71fc27a6c6d8c6eed9b21a315a9f986bc73ed892', id: "tablist", ref: (el) => (this.tabContainerEl = el), class: `tabcontainer ${this.customBackground || ""} ${this.containerFadeLeft ? "fade-left" : ""} ${this.containerFadeRight ? "fade-right" : ""}`, role: "tablist", tabIndex: -1 }, h("slot", { key: 'e79555a99f5700f9dd3830fc3d3ba33c0214bf9c' })), h("wm-button", { key: 'b8d70cfe5460c8455476dd33ccd46c4ad959933f', class: `right-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#next", tooltip: intl.formatMessage({
+                id: "tabs.showNextTabs",
+                defaultMessage: "Show next tabs",
+                description: "Tooltip for button scrolling tab group.",
+            }), onClick: (ev) => this.handleRightArrowClick(ev) }), h("span", { key: 'eb56710b313de2e0dcec69ae2b0cf934ff064c5e', "aria-live": "assertive", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-tab-list"; }
     static get encapsulation() { return "shadow"; }
@@ -194,23 +296,6 @@ export class TabList {
                 "attribute": "custom-background",
                 "reflect": false
             },
-            "customPadding": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "custom-padding",
-                "reflect": false
-            },
             "selectedTab": {
                 "type": "string",
                 "mutable": false,
@@ -230,23 +315,13 @@ export class TabList {
             }
         };
     }
-    static get events() {
-        return [{
-                "method": "wmTabSelected",
-                "name": "wmTabSelected",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted by wm-select options when tabs have the menu format"
-                },
-                "complexType": {
-                    "original": "{ tabId: string }",
-                    "resolved": "{ tabId: string; }",
-                    "references": {}
-                }
-            }];
+    static get states() {
+        return {
+            "announcement": {},
+            "containerFadeLeft": {},
+            "containerFadeRight": {},
+            "scrollArrowsVisible": {}
+        };
     }
     static get elementRef() { return "el"; }
     static get watchers() {
@@ -262,6 +337,12 @@ export class TabList {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "wmIntTabFocused",
+                "method": "wmTabFocused",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "keydownOnTabItem",
                 "method": "handleKeydown",

package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.js

@@ -12,7 +12,7 @@ export class TabPanel {
         this.tabPanelLoaded.emit({ tabId: this.tabId });
     }
     render() {
-        return h(Host, { key: '760cc80a7e445fa0edae74157392fb49afb10fb0', role: "tabpanel", class: { "tab-hidden": !this.active } });
+        return h(Host, { key: 'de7b52323f4628b61114793939ad10a3d96a8465', role: "tabpanel", class: { "tab-hidden": !this.active } });
     }
     static get is() { return "wm-tab-panel"; }
     static get originalStyleUrls() {

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

@@ -927,10 +927,10 @@ export class TagInput {
         }
     }
     render() {
-        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) => {
+        return (h("div", { key: '4fe42ced37f66d1da1f80d351d2058f2fa04caed', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'feac40a76d0300a640d353789188567b6bce88bd', class: "label-wrapper" }, h("label", { key: '8daeb0009a81b3372686cdcaf7823ca66574ea4c', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.requiredField && (h("div", { key: 'a09c606545f86da661d38d30bc2207ee138c903d', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '9bb84f04fdb72fd60348a7c47f45a7c6d0eb1e1c', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: 'e67ffb9ecd84146e6feec21602eaa00f76b262b8', class: "upper-row" }, h("div", { key: 'f91652753a955980cd5079030b161abc19df0581', class: "svg-icon svg-search" }), h("div", { key: '6845759499b0f5165c145730c416a6036afb7ed3', class: `tags-and-input-wrapper` }, 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 && (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()));
+            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (h("div", { key: 'f6c8abfeba27ff6c8a3e769c90ef8a005ff9a661', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'f8633a6fe6a65ac8a3b17f4a9fb8ba1fabe1d827', id: "info", class: "info-text" }, this.info)), h("div", { key: '09279e977b383947404bb3c47dd41a6461e9e259', id: "error" }, this.errorMessage), 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 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: '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))));
+        return (h("div", { key: '7f63d4224b5570bac29bf622adbd24c12a987fce', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '4b0b469d325eec11069f363f5e7bd44d67a10a46', class: "label-wrapper" }, h("label", { key: '9f7494233096cd6bd246a0994d3e9e04f4ded813', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '558c487419c9906646191d3f57e3826f0e0474ec', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.requiredField && (h("span", { key: '5efa5cc6d810b34ecb81da1ac013827961b9400f', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'caa5d6620b159c6cf24b763afd546c5ab958d625', class: "inner-wrapper" }, h("div", { key: '160d74581d77259428c48c0ade43038280820e10', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, 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" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { key: 'bf3461f07b38d3ef97143cf3cf1b6d1f2351e079', id: "info", class: "info" }, this.info)), h("div", { key: '39a86570c355661e0136b1bd4855d68fec298514', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '274ebbb587acc31f4d9ffda5d1ba01f279a9053c', 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: '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()),
+        return (h(Host, { key: '85faaac7eaff466eef31897a1d02e29d7ec7b223', onBlur: () => this.close(false) }, h("div", { key: '82f88250e7090d6517e7ecd25a4423ff0b7638d7', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: '114df6b8a382f59b8b6ea238c29051c1ddf568a0', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: 'd26dcc57be0e23f599d64df50520056cf88c9bf9', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '2b47dbd56c50265a5128a1c77e312b5745db6e2e', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: '46df6ba5efc5d779fb301b2e799f19e6acd6a48f' }, h("div", { key: '13c58fb83da101c3ffba9f7647ad3202898db08a', class: "inner-wrapper" }, 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") }), 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();
-            } }, 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) }))));
+            } }, h("span", { key: 'f5269ee6b6266dd404f11b5c6cc943082dd539f7', class: "svg-icon svg-time" })), 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())), h("div", { key: '709e44a44ed4f99a7cbdbc4dacd461f73615324c', id: "error", class: "error" }, this.errorMessage)), h("div", { key: '0b9919a2c9701b6b76b76b780fd35a240eb2adf6', 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: 'f8a626c9e0311a0a05d58d12787c0e9a3be5ca8a', class: `size-${this.targetSize}` }, 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 (h(Host, { key: '19824ec52b7d5a97250fdf7099041c47a9c10667', class: `size-${this.targetSize}` }, 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 && 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: '3a786c92826bc07b6ec0bb3119f1adfeacc25656', 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: '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), 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), h("div", { key: 'af70f189b7f510fc3ae813edfd958050b11e636c', 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: '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
+        return (h(Host, { key: 'f6796cb24519a9cce643c24c69abeb9d33c8632f', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), 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" }), h("div", { key: 'eeb50c37630ba08df7e6be89ec30a55cefeafd9a', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
+            "aria-atomic": "true" }), h("div", { key: 'b38debdfda642c215bbb570082dfdeef24da8a8f', 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-0290058e.js → app-globals-ed8cd888.js}

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

package/dist/esm/{chartFunctions-3a54f8ac.js → chartFunctions-613e9c87.js}

@@ -1,5 +1,5 @@
 import { h } from './index-130e07bb.js';
-import { i as intl, c as checkForActiveElInShadow, e as safeMultiplyFloat, f as getPosition } from './functions-669184a6.js';
+import { i as intl, c as checkForActiveElInShadow, e as safeMultiplyFloat, f as getPosition } from './functions-38e392cb.js';
 
 const colors = {
     salmon: "#ff5f4e",

package/dist/esm/{functions-669184a6.js → functions-38e392cb.js}

@@ -10585,4 +10585,4 @@ const weekdays = [
     intl.formatMessage({ id: "date.saturday", defaultMessage: "Saturday" }),
 ];
 
-export { findPrev as A, getTextDir as B, isElOrChild as C, throttle as D, getContextMeasurements as E, dateFind as F, calendar_months as G, findParentWithHiddenOverflow as H, transposeMatrix as I, wrapAround as J, getSmallestSkipInterval as K, calcPercentageInRange as L, makeISO as M, getMonthLength as N, weekdays as O, handleDisabledAttribute as a, triggerFormSubmit as b, checkForActiveElInShadow as c, debounce as d, safeMultiplyFloat as e, getPosition as f, generateId as g, hideTooltip as h, intl as i, findAllScrollableParents as j, dateToISO as k, shouldOpenUp as l, hasRoomRight as m, truncateText as n, getLastFocusableDescendant as o, csvToArray as p, snakeCaseToCamelCase as q, getNewIndexToFocus as r, showTooltip as s, toBool as t, getCumulativeScrollOffset as u, shouldOpenDown as v, shouldShiftRight as w, shouldShiftLeft as x, measureText as y, findNext as z };
+export { findPrev as A, getTextDir as B, throttle as C, getContextMeasurements as D, dateFind as E, calendar_months as F, findParentWithHiddenOverflow as G, transposeMatrix as H, wrapAround as I, getSmallestSkipInterval as J, calcPercentageInRange as K, isElOrChild as L, makeISO as M, getMonthLength as N, weekdays as O, handleDisabledAttribute as a, triggerFormSubmit as b, checkForActiveElInShadow as c, debounce as d, safeMultiplyFloat as e, getPosition as f, generateId as g, hideTooltip as h, intl as i, findAllScrollableParents as j, dateToISO as k, shouldOpenUp as l, hasRoomRight as m, truncateText as n, getLastFocusableDescendant as o, csvToArray as p, snakeCaseToCamelCase as q, getNewIndexToFocus as r, showTooltip as s, toBool as t, getCumulativeScrollOffset as u, shouldOpenDown as v, shouldShiftRight as w, shouldShiftLeft as x, measureText as y, findNext as z };

package/dist/esm/{intl-7906e2d7.js → intl-0b8f342e.js}

@@ -1,4 +1,4 @@
-import { i as intl } from './functions-669184a6.js';
+import { i as intl } from './functions-38e392cb.js';
 
 const globalMessages = {
     characterLimitReached: intl.formatMessage({