@watermarkinsights/ripple 5.20.0-alpha.8 → 5.20.0

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

@@ -1,14 +1,20 @@
 import { h, Host } from "@stencil/core";
 import { forceUpdate } from "@stencil/core";
-import { getTextDir, shouldOpenUp, isElOrChild, toBool, handleDisabledAttribute, showTooltip, hideTooltip } 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.openUp = false;
+        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.debouncedReposition = debounce(() => {
+            this.dropdownPosition();
+        }, 100);
         this.disabled = false;
         this.maxHeight = "200px";
         this.label = undefined;
@@ -22,6 +28,8 @@ export class Select {
         this.searchPlaceholder = selectMessages.searchPlaceholder;
         this.allSelectedMessage = selectMessages.allSelected;
         this.isExpanded = false;
+        this.isHidden = false;
+        this.openUp = false;
         this.announcement = "";
     }
     get childOptions() {
@@ -40,58 +48,165 @@ export class Select {
     //////////////////////////////////////
     handleOptionSelection() {
         if (!this.multiple) {
-            this.close();
+            this.returnFocus = true;
+            this.dropdownEl.hidePopover();
         }
     }
     handleChildEnter() {
         // only occurs for multiselects. handle the click, then close
-        this.close();
-    }
-    closePopupOnEscape() {
-        this.close();
-    }
-    handleOptionBlur(ev) {
-        // if the Option is blurred to something other than the component emit a blur event with the appropriate relatedTarget
-        // keeps our component's blur events accurate, and closes when focusing browser address bar
-        if (!isElOrChild(this.el, ev.detail.relatedTarget)) {
-            const event = new CustomEvent("blur");
-            // @ts-ignore
-            event.relatedTarget = ev.detail.relatedTarget;
-            this.el.dispatchEvent(event);
+        this.returnFocus = true;
+        this.dropdownEl.hidePopover();
+    }
+    closeDropdownOnEscape() {
+        this.returnFocus = true;
+        this.dropdownEl.hidePopover();
+    }
+    handleBeforeToggle() {
+        if (!this.hasAnchor) {
+            // Start hidden to prevent flash during positioning calculation
+            this.isHidden = true;
         }
     }
-    handleClick(ev) {
-        if (!isElOrChild(this.el, ev.target)) {
-            this.close();
+    handleToggle(ev) {
+        ev.newState === "open" ? this.onOpen() : this.onClose();
+    }
+    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;
     }
-    handleButtonBlur(ev) {
-        if (isElOrChild(this.el, ev.relatedTarget)) {
-            // do not emit a blur event when opening the dropdown and focusing the Options
-            ev.stopPropagation();
+    onOpen() {
+        if (!this.isExpanded && !this.isDisabled) {
+            // polyfill for browsers without anchor() support (FF)
+            if (!this.hasAnchor) {
+                this.dropdownPosition();
+            }
+            requestAnimationFrame(() => {
+                const anchorRect = this.buttonEl.getBoundingClientRect();
+                const hasSpaceBelow = this.dropdownEl.offsetHeight <= document.documentElement.clientHeight - anchorRect.bottom;
+                const hasSpaceAbove = this.dropdownEl.offsetHeight <= anchorRect.top;
+                this.openUp = !hasSpaceBelow && hasSpaceAbove;
+                if (!hasSpaceBelow && !hasSpaceAbove) {
+                    // dropdown will open downwards but doesn't have enough space
+                    // it needs to be absolutely positioned + html has to have overflow-y auto
+                    // (the default, but could have been overriden)
+                    // in order to ensure the options can be scrolled to
+                    // (would already be possible if the page has content below. this is in case select was at bottom of page)
+                    this.initialHtmlOverflowY = document.documentElement.style.overflowY;
+                    document.documentElement.style.overflowY = "auto";
+                    this.dropdownEl.style.position = "absolute";
+                }
+                this.isExpanded = true;
+            });
+            setTimeout(() => {
+                // focusing doesn't work when within requestAnimationFrame
+                this.optionListEl.handleInitialFocus(this.elToFocus);
+                this.elToFocus = undefined;
+            }, 50);
+        }
+    }
+    onClose() {
+        if (this.isExpanded) {
+            this.optionListEl.unfocusAll();
+            // see onOpen
+            document.documentElement.style.overflowY = this.initialHtmlOverflowY || "";
+            this.dropdownEl.style.position = "fixed";
+            window.setTimeout(() => {
+                if (!this.hasAnchor) {
+                    this.isHidden = true;
+                }
+                if (this.optionListEl.multiple) {
+                    this.optionListEl.updateOptionVisibility();
+                }
+                // clear search field, reset filtered / bolded state of wm-options
+                if (this.search) {
+                    this.optionListEl.clearSearch();
+                }
+                this.isExpanded = false;
+            }, 150);
+            if (this.returnFocus) {
+                requestAnimationFrame(() => {
+                    this.buttonEl.focus();
+                    this.returnFocus = false;
+                });
+            }
         }
     }
     handleKey(ev) {
         switch (ev.key) {
             case "Tab":
                 // if tabbing backwards, close and return focus to button. Otherwise, close but do not redirect focus.
-                this.close(ev.shiftKey ? true : false);
+                if (this.isExpanded && ev.shiftKey) {
+                    this.returnFocus = true;
+                }
+                this.dropdownEl.hidePopover();
                 break;
             case "ArrowDown":
                 if (this.isExpanded === false) {
                     ev.preventDefault();
-                    this.open("next");
+                    this.elToFocus = "next";
+                    this.dropdownEl.showPopover();
                 }
                 break;
             case "ArrowUp":
                 if (this.isExpanded === false) {
                     ev.preventDefault();
-                    this.open("previous");
+                    this.elToFocus = "previous";
+                    this.dropdownEl.showPopover();
                 }
                 break;
         }
     }
+    handleResize() {
+        if (!this.hasAnchor && this.isExpanded) {
+            this.isHidden = true;
+            this.debouncedReposition();
+        }
+    }
+    handleScroll() {
+        if (this.isExpanded) {
+            this.isHidden = true;
+            this.debouncedReposition();
+        }
+    }
     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`).");
         }
@@ -108,8 +223,6 @@ export class Select {
         });
     }
     handleChildChange() {
-        // on update of children or children selected state, reset button text and rerender
-        this.setButtonText();
         forceUpdate(this.el);
         if (this.multiple) {
             // update state of clone options
@@ -118,43 +231,19 @@ export class Select {
     }
     componentDidLoad() {
         this.wmSelectDidLoad.emit();
-        this.dropdownEl.classList.add("hidden");
-        forceUpdate(this.el);
-        this.setButtonText();
-    }
-    open(optionToSelect) {
-        if (!this.isDisabled) {
-            this.openUp = shouldOpenUp(this.el, this.dropdownEl.clientHeight, this.labelEl.clientHeight);
-            this.isExpanded = true;
-            this.dropdownEl.classList.add("open");
-            this.dropdownEl.classList.remove("hidden");
-            window.requestAnimationFrame(() => {
-                this.optionListEl.handleInitialFocus(optionToSelect);
-            });
-        }
-    }
-    close(returnFocus = true) {
-        if (this.isExpanded) {
-            this.isExpanded = false;
-            this.optionListEl.unfocusAll();
-            this.dropdownEl.classList.remove("open");
-            window.setTimeout(() => {
-                this.dropdownEl.classList.add("hidden");
-                if (this.optionListEl.multiple) {
-                    this.optionListEl.updateOptionVisibility();
+        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());
                 }
-                // clear search field, reset filtered / bolded state of wm-options
-                if (this.search) {
-                    this.optionListEl.clearSearch();
-                }
-                // Returns focus to button after popup closes (no need if user is tabbing)
-                // Delay is necessary for screenreader to get new expanded state before focus
-                // window.requestAnimationFrame is probably enough, but since we are already using setTimeout it may as well be here
-                // also UX wise, it makes sense for the button to only be focused after the animation is complete
-                if (returnFocus) {
-                    this.buttonEl.focus();
+                else {
+                    // For regular elements, listen to their scroll event
+                    parent.addEventListener("scroll", () => this.handleScroll());
                 }
-            }, 150);
+            });
         }
     }
     announceError() {
@@ -168,7 +257,6 @@ export class Select {
     handleComponentBlur(ev) {
         // Do not close or emit custom blur event when blurring to an element inside (wm-option)
         if (!this.el.contains(ev.relatedTarget)) {
-            this.close(false);
             this.wmSelectBlurred.emit();
         }
     }
@@ -178,28 +266,6 @@ export class Select {
             showTooltip("right", ev.target, this.label);
         }
     }
-    setButtonText() {
-        this.displayedOptions = this.childOptions.filter((x) => x.selected);
-        // handle overflow + counter for multiselect
-        if (this.multiple) {
-            // this is a fixed measurement accounting for the max width of a 3 character overflow counter
-            const overflowCounterWidth = 38;
-            const computedStyle = window.getComputedStyle(this.buttonEl);
-            // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
-            const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
-            const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
-            const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
-            this.overflowCount = 0;
-            this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
-            let optionsTotalWidth = this.measurementAreaEl.clientWidth;
-            while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
-                this.overflowCount++;
-                this.displayedOptions.pop();
-                this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
-                optionsTotalWidth = this.measurementAreaEl.clientWidth;
-            }
-        }
-    }
     announce(message) {
         // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
         if (this.liveRegionEl.textContent === message) {
@@ -208,6 +274,7 @@ export class Select {
         this.announcement = message;
     }
     renderButtonText() {
+        this.displayedOptions = this.childOptions.filter((x) => x.selected);
         if (this.multiple && this.displayedOptions.length < 1) {
             return h("span", null, this.placeholder);
         }
@@ -215,6 +282,28 @@ export class Select {
             return this.allSelectedMessage;
         }
         else {
+            // handle overflow + counter for multiselect
+            // only bother if things have changed
+            const hasChanged = this.displayedOptions !== this.previousDisplayedOptions;
+            if (this.multiple && hasChanged) {
+                // this is a fixed measurement accounting for the max width of a 3 character overflow counter
+                const overflowCounterWidth = 38;
+                const computedStyle = window.getComputedStyle(this.buttonEl);
+                // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
+                const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
+                const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
+                const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
+                this.overflowCount = 0;
+                this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
+                let optionsTotalWidth = this.measurementAreaEl.clientWidth;
+                while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
+                    this.overflowCount++;
+                    this.displayedOptions.pop();
+                    this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
+                    optionsTotalWidth = this.measurementAreaEl.clientWidth;
+                }
+                this.previousDisplayedOptions = this.displayedOptions;
+            }
             return this.displayedOptions.map((x, idx) => (h("span", null, idx > 0 ? ", " : "", x.textContent)));
         }
     }
@@ -225,18 +314,22 @@ export class Select {
     }
     render() {
         const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
-        const buttonProps = {
-            id: "selectbtn",
-            ["disabled"]: this.isDisabled,
-            ["aria-controls"]: "list",
-            ["aria-labelledby"]: "label selectbtn",
-            ["aria-describedby"]: "error",
-            ["aria-expanded"]: this.isExpanded ? "true" : "false",
-            onClick: () => (this.isExpanded ? this.close() : this.open()),
-        };
-        return (h(Host, { key: '27f57d30b836eac8dc27ae98a425015d86a0948b', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '8f48d8e8d616244350e61d6e81f350640131bbf0', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '39d3bcec9b67d671a6bdbb6a3ee738832189ea51', ref: (el) => (this.labelEl = el), class: "label-wrapper" }, h("label", { key: 'b0bb90a215ac20de94afa8dba56e839bdc590dc1', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
+        return (h(Host, { key: '7e8a475bb0ec52e4944c6873e01c4606898f4c5f', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'ab7b7ac75c131204dfb9053522aca310def8f45c', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'd621ab97f8538a4888b57724ce19459216a909a2', class: "label-wrapper" }, h("label", { key: '6721709ccc53c4dcb34adde92400213edcecfcd1', 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: '4a5648503a023ff1eba34db936d49709e14da9f1', class: "required" }, h("span", { key: '3fe783c7174d3d827b20589cad412d32fa4cd978', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '85ac4ca35f1077ade1bdda403b8888cc206ff28e', "aria-hidden": "true" }, "*")))), h("div", { key: 'c2e70d87db2d533713ac9c5a877ddba98a9a9a2f', class: "button-wrapper" }, h("button", Object.assign({ key: '460c6ac5cde8637b0098201966ca4268301ac2b7' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '3af3357f45ceacc5689e90e2bdc6459cab591c2f', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'bd9869db1146e54cc47c2965ebe2776873e2a18e', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: 'b22d952625e93fab98ebb1b688101fd8891a4af7', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '1f6448ee167d1847eff8fb5bc7a30e0a964e6efe', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '0d550b97a3e08e9b708f2f4c3d91f9cac76ba5d8', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '59cc7fcfa25d9d3eab8e4d70cdcd365e36e160ad', class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("priv-option-list", { key: '9fb7d0396527bc18bb8f5d00d64c858470d0698d', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => this.close(), onOptionListAllSelected: () => this.wmSelectAllSelected.emit(), onOptionListAllDeselected: () => this.wmSelectAllDeselected.emit() }, h("slot", { key: '4c307bca5104ec962ca050b46adf882fb78bb74a' }))), h("div", { key: '06f11b61b475cc6cd78c2a8278b8455a79405e17', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '86cf865fbb7fd0e2c88290fe92e6062ada7d9ab6', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+        this.requiredField && (h("span", { key: 'aa206ab21ef45c4881508a7d89dbeb9c9e391bc5', class: "required" }, h("span", { key: '4831f113ee6326704bdd4c54062e3a68c6c17783', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '88d2090f8ad7a017a0d43d54e8344b8ee6fa858d', "aria-hidden": "true" }, "*")))), h("div", { key: '414f570b751a2c8a886b7b4b8c80b2c2f9150f2d', class: "button-wrapper" }, h("button", { key: '11bd141ae70438ac048bce9df4e8983e36b4abb0', 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: '1f337bb2196dfd0c2c22f32f05073eac31f978d2', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '978a03d535551ade50c872610b53af59bca79004', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: 'b97e2bccd8dc0ccc55df54a8220c80940ae21b15', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '687523e6ee6f23a22a55481dbbb4856580e71770', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: 'eb88eb23947a6c7c608fe80c752b604102db6a2d', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '0c8b8cd661caa7f55de6e0eb56d304e6ae299e45',
+            // is-open is for the CSS transition in modern browsers
+            // hidden is to wait for position calculations in Firefox
+            class: `dropdown ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.openUp ? "upward" : ""}`, id: "dropdown", popover: "auto", ref: (el) => (this.dropdownEl = el),
+            // @ts-ignore -- don't tell typescript but we're in the future
+            onToggle: (ev) => this.handleToggle(ev) }, h("priv-option-list", { key: 'c2f173700a255dfe637bb0bbd12d73ef1c4e15fd', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
+                this.dropdownEl.hidePopover();
+            }, onOptionListAllSelected: () => {
+                this.returnFocus = true;
+                this.wmSelectAllSelected.emit();
+            }, onOptionListAllDeselected: () => {
+                this.returnFocus = true;
+                this.wmSelectAllDeselected.emit();
+            } }, h("slot", { key: '7f7e2c3a4c3e174a108f028fb4fa0236f829b7b8' }))), h("div", { key: '4734b6b6f448c151a2f4373001285e0f2bbacff8', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'c8a8b6d9d4e67b71f86ee522386fbc9f5e47c3de', 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"; }
@@ -472,6 +565,8 @@ export class Select {
     static get states() {
         return {
             "isExpanded": {},
+            "isHidden": {},
+            "openUp": {},
             "announcement": {}
         };
     }
@@ -563,28 +658,22 @@ export class Select {
                 "passive": false
             }, {
                 "name": "wmEscKeyPressed",
-                "method": "closePopupOnEscape",
+                "method": "closeDropdownOnEscape",
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "wmOptionBlurred",
-                "method": "handleOptionBlur",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "click",
-                "method": "handleClick",
-                "target": "document",
-                "capture": true,
-                "passive": false
             }, {
                 "name": "keydown",
                 "method": "handleKey",
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "resize",
+                "method": "handleResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
             }];
     }
 }

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

@@ -926,5 +926,5 @@
 }
 .tab-item:has(:focus-visible) {
   outline: 3px solid var(--wmcolor-interactive-focus);
-  outline-offset: -3px;
+  outline-offset: -10px;
 }

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

@@ -27,20 +27,9 @@ export class TabItem {
     }
     render() {
         const isDark = this.parentTabList && this.parentTabList.customBackground == "dark";
-        let styles = {};
-        const padding = this.parentTabList && this.parentTabList.customPadding;
-        if (padding) {
-            const bkgSize = parseInt(padding, 10) * 2 || 0;
-            const units = padding.split(/([0-9]+)/).pop();
-            styles = {
-                "padding-left": this.parentTabList.customPadding,
-                "padding-right": this.parentTabList.customPadding,
-                "background-size": `calc(100% - ${bkgSize}${units}) 3px`,
-            };
-        }
-        return (h(Host, { key: '52900a0ba44bc12c82c17f3f578110fab5869333', role: "presentation" }, h("li", { key: '510269829fc3885c9c45c358446051cf64121882', class: `tab-item ${isDark ? "dark" : ""}`, role: "presentation" }, h("a", { key: '68dcdd7baf19d5a311e3eebe06a4b69627b31e95', class: `tab`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1, onClick: this.tabClicked, onFocus: () => {
+        return (h(Host, { key: 'd767cecfc366c666d0920361e1af1eeb2cb120f8', role: "presentation" }, h("li", { key: '05626b99685379b2c774a59eb10d4774f01dcd83', class: `tab-item ${isDark ? "dark" : ""}`, role: "presentation" }, h("a", { key: '3ae61be7ebb1bd1c45cd4a4badddebf990dc5c06', class: `tab`, role: "tab", ref: (el) => (this.linkEl = el), id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1, onClick: this.tabClicked, onFocus: () => {
                 this.wmIntTabFocused.emit({ tabItem: this.el });
-            } }, h("slot", { key: '0cd14642d2b2518ec587567110beb8b42cb01f77' })))));
+            } }, h("slot", { key: '128c129d643610993747736efe64018cdaf5ab31' })))));
     }
     static get is() { return "wm-tab-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -886,8 +886,8 @@
 }
 :host .tabcontainer {
   margin: 0;
-  width: fit-content;
-  max-width: 100%;
+  flex: 1;
+  min-width: 0;
   min-height: 2.75rem;
   display: flex;
   flex-direction: row;

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

@@ -7,7 +7,6 @@ export class TabList {
             this.updateArrowVisibility();
         }, 16);
         this.customBackground = undefined;
-        this.customPadding = undefined;
         this.selectedTab = undefined;
         this.announcement = "";
         this.containerFadeLeft = false;
@@ -55,11 +54,14 @@ export class TabList {
     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);
+        requestAnimationFrame(() => {
+            // Wait for layout to complete before measuring and scrolling initial tab into view
+            this.handleTabFocused(this.selectedTabItem);
+        });
     }
     tabItemLoaded(ev) {
         this.setAriaOnPanelAndTab(ev.target);
@@ -179,7 +181,7 @@ export class TabList {
     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;
+        const isScrollable = this.tabContainerEl.scrollWidth > this.tabContainerEl.clientWidth;
         this.scrollArrowsVisible = isScrollable;
         requestAnimationFrame(() => {
             // Let arrows render before checking if they should be disabled
@@ -255,21 +257,15 @@ export class TabList {
         this.announcement = message;
     }
     render() {
-        let margins = {};
-        if (this.customPadding) {
-            margins = {
-                "margin-inline": "-" + this.customPadding,
-            };
-        }
-        return (h(Host, { key: '951f6dcf457201034adca055366df0107df6a116' }, h("div", { key: '489cf5f1acf3c985c6208e9b5b6f507422251c6c', class: "component-wrapper", style: margins }, h("wm-button", { key: 'c83f686c864b91ef3ac2530a47196e3a767b8609', class: `left-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#previous", tooltip: intl.formatMessage({
+        return (h(Host, { key: '5818027d2cb7470679c21ac94fef8bae53395054' }, h("div", { key: '02a4a7678765a6cbf269c01d4e2f2f8afcde8cb1', class: "component-wrapper" }, h("wm-button", { key: '267436b0e7f4dae88da12517527ca0dbf324d0b0', 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: 'ed524296e4c43f0602c54dc7345cb9403f491e82', 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: '072e8fdff4e4831df0f89002475acd29ef2633d3' })), h("wm-button", { key: '4364a7c4d9ffde71307573bf08c48e8cbba06372', class: `right-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#next", tooltip: intl.formatMessage({
+            }), onClick: (ev) => this.handleLeftArrowClick(ev) }), h("ul", { key: '4983447234c47552d424d4572ae794503eb536fd', 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: '40d3c063e98bf2fbec8d9e92ecc8ada156cea2ea' })), h("wm-button", { key: 'bc45390e49d2246cd16b24a1159720308a3fe24f', 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: 'c347bc2cb5002812bc4c14ef442ae7d820138ac8', "aria-live": "assertive", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+            }), onClick: (ev) => this.handleRightArrowClick(ev) }), h("span", { key: 'c98334986ffe5ffc47d0b48d141c2d985772b3e5', "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"; }
@@ -303,23 +299,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,

package/dist/esm/{app-globals-cc0448d5.js → app-globals-8cefcc2e.js}

@@ -1,6 +1,6 @@
 import './index-130e07bb.js';
 
-const version = "5.20.0-alpha.8";
+const version = "5.20.0";
 
 // 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({