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

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,152 @@ 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.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;
     }
-    handleButtonBlur(ev) {
-        if (isElOrChild(this.el, ev.relatedTarget)) {
-            // do not emit a blur event when opening the dropdown and focusing the Options
-            ev.stopPropagation();
+    open() {
+        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;
+                this.isExpanded = true;
+            });
+            setTimeout(() => {
+                // focusing doesn't work when within requestAnimationFrame
+                this.optionListEl.handleInitialFocus(this.elToFocus);
+                this.elToFocus = undefined;
+            }, 50);
+        }
+    }
+    close() {
+        if (this.isExpanded) {
+            this.optionListEl.unfocusAll();
+            window.setTimeout(() => {
+                if (!this.hasAnchor) {
+                    this.isHidden = true;
+                }
+                if (this.optionListEl.multiple) {
+                    this.optionListEl.updateOptionVisibility();
+                }
+                // clear search field, reset filtered / bolded state of wm-options
+                if (this.search) {
+                    this.optionListEl.clearSearch();
+                }
+                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 +210,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 +218,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 +244,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 +253,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 +261,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 +269,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 +301,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: '4ec7d687b40ffcef80fbce21e6880680c72d03a7', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'c400196d862a763af6f4f5d4663a8f3e805a9ddd', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '1c7df9eee5ebc62a12bd36e97918e144c7e4dc72', class: "label-wrapper" }, h("label", { key: '752c9ce6491c959afda2105a5e2c6063ce4ee52e', 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: 'c0b4660ed16129c1a3aaf5252aa5e7c71eb42f20', class: "required" }, h("span", { key: '8c4a41df3473c88021f8d73f09fdfd33e3ad1c48', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '303e6f18bef3d30b32508c6192ac363bbc8fb80c', "aria-hidden": "true" }, "*")))), h("div", { key: '7acc269a0e60042549cbc3fc6879b3e471f1b016', class: "button-wrapper" }, h("button", { key: 'd1e7751c22951130f92ca6fdc2c9f253e4e63b5b', 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: '6236a027968e849c873e1d09bf89910ca627b760', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '3af139e809e636873cd53dfb53141c0c606e4963', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: '5894b37ef490101b0ba38547745f450c0521a8ea', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '6bce5cbddd6160c0d2eeb8de27ed7f0d46fffb38', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: 'a0d9da60b818f8a576f6fcaab422b9ec31d42fd4', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'dc70db1f203700702cf3586412eef64ab108b86f',
+            // 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: '09db81570f9990ec4cf87f16b52320ec82701a04', 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: '420515d805ad1039ed3b72bd2968a0a29c27a5fc' }))), h("div", { key: '3bda216f90f3d6b10b92034996d3bdc90a4ffd60', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '032fb47f7c64c04d518740dbcb31efcd761baed6', 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 +552,8 @@ export class Select {
     static get states() {
         return {
             "isExpanded": {},
+            "isHidden": {},
+            "openUp": {},
             "announcement": {}
         };
     }
@@ -563,28 +645,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

@@ -870,10 +870,10 @@
   align-self: stretch;
   max-width: 80%;
   flex: 0 0 auto;
+  min-width: min-content;
 }
 
 .tab-item {
-  padding-block: 0.75rem;
   display: flex;
   align-self: stretch;
   list-style-type: none;
@@ -899,10 +899,11 @@
   position: relative;
   display: flex;
   align-items: center;
-  padding-inline: 1.5rem;
+  padding: 0.75rem 1.5rem;
   white-space: normal;
   word-break: break-word;
   width: 100%;
+  text-align: center;
 }
 .tab-item .tab[aria-selected=true] {
   font-weight: 700;
@@ -925,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: 'c4233132fdeffae370245ddb4d62e05fc59ac68d', role: "presentation" }, h("li", { key: '43d23f45217e39a9c6e8d6d0f3f5401c1fa7f252', class: `tab-item ${isDark ? "dark" : ""}`, role: "presentation" }, h("a", { key: '4606d7b99a4ebe3e92bc71089458ce4356ef318a', class: `tab`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1, 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: '0ec5fa05c84e7b1e6eb51a3f6e6da39568c44a5c' })))));
+            } }, 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

@@ -872,8 +872,7 @@
   background: var(--wmcolor-tab-background);
   display: block;
   position: relative;
-  width: fit-content;
-  max-width: 100%;
+  width: 100%;
 }
 :host .component-wrapper {
   display: flex;
@@ -899,7 +898,7 @@
 }
 :host .tabcontainer.dark {
   margin: 0;
-  padding-inline-start: 0.125rem;
+  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%);
@@ -912,6 +911,7 @@
 }
 :host wm-button.left-arrow,
 :host wm-button.right-arrow {
+  --icon-size: 1.25rem;
   display: none;
   flex-shrink: 0;
 }
@@ -920,8 +920,20 @@
   display: block;
 }
 :host wm-button.left-arrow {
-  margin-inline-start: 0.5rem;
+  margin-inline: 0.125rem 0.5rem;
 }
 :host wm-button.right-arrow {
-  margin-inline-end: 0.5rem;
+  margin-inline: 0.5rem 0.125rem;
+}
+: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;
 }