@watermarkinsights/ripple 5.19.1 → 5.20.0-alpha.1

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

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

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

@@ -81,7 +81,7 @@ const Textarea = class {
         this.announcement = message;
     }
     render() {
-        return (index.h("div", { key: 'c2bdf3a833b32103d85e4d19572985dde836aeb8', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '61f16420145b5289639728f06f7a7e9c90ecb220', class: "label-wrapper" }, index.h("label", { key: 'cf3a1d2dbe614498ce76f7d10252ddabe591ffc7', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label, this.characterLimit && (index.h("span", { key: 'ed53aebd7ba2338ba9a34db8ed84f86266fb01a0', class: "sr-only" }, " ", intl.globalMessages.getCharacterLimit(this.characterLimit)))), this.requiredField && (index.h("span", { key: 'c91d58aa6d531d19ca62227f1f9ae6776dc2e6eb', class: "required", "aria-hidden": "true" }, "*"))), index.h("div", { key: 'abbd117e4231de2ee3d696216d869a3ac3078240', class: "inner-wrapper" }, index.h("div", { key: 'e94b2f9f8bbf6d5e374e68555ac266789283b280', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, index.h("textarea", { key: '908e5bb512ed6253d5f1c9cb593f74cf5766ef8c', id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (index.h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (index.h("div", { key: '51239b18371da181395d159315d280e1993383cd', id: "info", class: "info" }, this.info)), index.h("div", { key: 'dd678537871b6ac6efeec23995a1c8bb5a9c3fbb', id: "error", class: "error-message" }, this.errorMessage), index.h("div", { key: '54e35dfe321a05965fc555814cdd3235457a0871', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (index.h("div", { key: '53bf016c0ab72f8726008c4233527f364c635f41', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '691995e62aae4051a54125247947358f2677a5e2', class: "label-wrapper" }, index.h("label", { key: 'fab8e9b942bd1affaeea4f180c3b4c9e27b1ddd9', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label, this.characterLimit && (index.h("span", { key: '0d35cd920126b13a614faffd20276c9a4bc59acd', class: "sr-only" }, " ", intl.globalMessages.getCharacterLimit(this.characterLimit)))), this.requiredField && (index.h("span", { key: '0e33d69604dc3db5993cbcf2e2ec6f2800067cfb', class: "required", "aria-hidden": "true" }, "*"))), index.h("div", { key: 'a18c90a4c7f9712b9cf6b6405ad111fa3611b660', class: "inner-wrapper" }, index.h("div", { key: '20cf3663c3f6493942d0200affc106ca07f28bd8', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, index.h("textarea", { key: '43275a292a56669c4e92d323489f90b8daa13f8d', id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (index.h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (index.h("div", { key: '2f5e7884dc10b4d324beac35e3f94809aafc1b14', id: "info", class: "info" }, this.info)), index.h("div", { key: '5e21a007c7b9c6603b92b35931518f45f6838666', id: "error", class: "error-message" }, this.errorMessage), index.h("div", { key: '8977e8b27c76b086aeac3ad8b325d65e3a0c61fd', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -292,13 +292,13 @@ const Timepicker = class {
         return this.times.map((time, index$1) => (index.h("li", { id: `option${index$1 + 1}`, "data-time": time, role: "option", onClick: () => this.handleOptionClick(time) }, this.reformatTimeInternal("12", time))));
     }
     render() {
-        return (index.h(index.Host, { key: 'e05ceac51a9193466dff7a488803f09ae91c837a', onBlur: () => this.close(false) }, index.h("div", { key: '4bdd4087ff1b8c4956623571dc168d761646ce4e', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, index.h("div", { key: 'c64a7486a1c3b74f61c94ce0b3f59c45e96b639e', class: "label-wrapper" }, this.labelPosition !== "none" && (index.h("label", { key: 'cce428cf638a5932b1c157794e646f0b8026e1db', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (index.h("div", { key: '655e1585ffdb70eed624eeec16aa270f3f6584b6', "aria-hidden": "true", class: "required" }, "*"))), index.h("div", { key: '85bf657eff58d0774a25d20c0eba53d7deadd98d' }, index.h("div", { key: '0152b10359dcb69a47275ee88e0a5c0b8cacf051', class: "inner-wrapper" }, index.h("input", { key: '32a55fbfebecafa786cafafc540016f52fcbf38a', id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), index.h("button", { key: '4c77218b291d0d3858c456c816a608b6d2e6d8c6', id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
+        return (index.h(index.Host, { key: '1bc0e3c55453f573f958f434f08d6c0928ca315c', onBlur: () => this.close(false) }, index.h("div", { key: '56b51917022bb7ca450007c624d93bd6de4dd16c', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, index.h("div", { key: 'fac1dae254a4a9a3c03a2edb6dbbccc810cf77d3', class: "label-wrapper" }, this.labelPosition !== "none" && (index.h("label", { key: '48519de32da0a22f89e1c260061c21dddd4152b7', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (index.h("div", { key: '0233b207923d7197b278a57aacfbe8791d1af0ea', "aria-hidden": "true", class: "required" }, "*"))), index.h("div", { key: 'dd4d6ad315f27742ce8993c9f5345be4f9744bfa' }, index.h("div", { key: '75b5a580fc22d5665321c9b7452d1e5c4423fe59', class: "inner-wrapper" }, index.h("input", { key: '3779ff4140aa2814becebd5ca7592517ac4bd52e', id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), index.h("button", { key: '160a3d7a30e79788320035d2bb0c7c49500ee3af', id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
             // This addresses an issue in Safari, where clicking buttons does not focus them
             // if the button does not receive focus when clicked, Timepicker incorrectly emits a blur event
             onMouseDown: (ev) => {
                 ev.preventDefault();
                 this.buttonEl.focus();
-            } }, index.h("span", { key: '0211abd0a1e89e3fd48278022f45572a8696a8de', class: "svg-icon svg-time" })), index.h("ul", { key: 'e7db5d8e3853b0c64099996064c17e361f3f0119', class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), index.h("div", { key: 'bb587cbf052b2b54ff5cd54cd1ee26e1015adf86', id: "error", class: "error" }, this.errorMessage)), index.h("div", { key: 'bf8d0736ecbd1c987b0d5c15a87537be665812d7', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
+            } }, index.h("span", { key: '15601dcb4eaf6a2481983c9bea235f322c1ceaa2', class: "svg-icon svg-time" })), index.h("ul", { key: '92cee000b94cd36a160ca75afc9cdb6ec4ecf7ea', class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), index.h("div", { key: '74d38c280568661ed4caaee63a804d9c535f7ce4', id: "error", class: "error" }, this.errorMessage)), index.h("div", { key: '65b86599f1b7afb766bb8f3367b8f5039202220d', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

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

@@ -37,7 +37,7 @@ const Toggletip = class {
         this.isHidden = true;
     }
     get isOpen() {
-        return this.toggletipEl.matches(":popover-open");
+        return this.toggletipEl && this.toggletipEl.matches(":popover-open");
     }
     get tooltipMessage() {
         switch (this.toggletipType) {
@@ -238,11 +238,11 @@ const Toggletip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '2127bc9c0e5bebbf58fce82b7ea772a3b6fe2ada', class: `size-${this.targetSize}` }, index.h("button", { key: '55335d84975af0a4e6928b71d08745050454d4e4', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
+        return (index.h(index.Host, { key: 'e67e9c6a38b5e0514a5e23e67e52462e0a418f5f', class: `size-${this.targetSize}` }, index.h("button", { key: '38c604092c47bb70b8cd751c81a19550bf971c38', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
             // In order to position the tooltip identically to the toggletip, its presence is determined by these four events
-            onMouseEnter: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), index.h("div", { key: 'de52ea584962f47a035c900af10e31951ec49ef6', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
+            onMouseEnter: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), index.h("div", { key: '9e0e76a3309eacad13cf2ed9374f9e51edf0d7ac', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
             // @ts-ignore - despite what Typescript says, this is a valid event for popover elements
-            onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), index.h("div", { key: '88e8da7742e5aa390fd17be1efd6067d25f71209', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
+            onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), index.h("div", { key: '11e378047dcef3677934b6303997fabb97d6177b', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

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

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

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

@@ -868,15 +868,23 @@
   display: flex;
   font-family: inherit;
   align-self: stretch;
-}
-:host.hide {
-  display: none;
+  max-width: 80%;
+  flex: 0 0 auto;
 }
 
 .tab-item {
+  padding-block: 0.75rem;
   display: flex;
   align-self: stretch;
   list-style-type: none;
+  width: 100%;
+}
+.tab-item:hover {
+  background-color: var(--wmcolor-interactive-background-hover);
+  color: var(--wmcolor-interactive-hover);
+}
+.tab-item:hover.dark {
+  background-color: var(--wmcolor-interactive-background-hover-ondark);
 }
 .tab-item .tab {
   -webkit-border-radius: 0;
@@ -885,37 +893,37 @@
   border-radius: 0;
   color: var(--wmcolor-tab-text);
   text-decoration: none;
-  letter-spacing: 0.7px;
   font-size: 0.875rem;
-  font-weight: 500;
+  font-weight: 600;
   opacity: 1;
   position: relative;
-  text-transform: uppercase;
   display: flex;
   align-items: center;
   padding-inline: 1.5rem;
+  white-space: normal;
+  word-break: break-word;
+  width: 100%;
 }
 .tab-item .tab[aria-selected=true] {
   font-weight: 700;
-  opacity: 1;
-  text-decoration: underline;
-  text-decoration-thickness: 3px;
-  text-underline-offset: 16px;
-}
-.tab-item .tab[aria-selected=true].dark {
-  color: var(--wmcolor-tab-text-ondark);
 }
-.tab-item .tab, .tab-item .tab:hover, .tab-item .tab:active {
+.tab-item .tab:hover, .tab-item .tab:active, .tab-item .tab:focus {
   outline: none;
 }
-.tab-item .tab:focus {
-  outline: none;
-}
-.tab-item .tab.dark:not([aria-selected=true]) {
+.tab-item.dark .tab {
   opacity: 0.8;
   color: var(--wmcolor-tab-text-ondark);
 }
-.tab-item .tab:focus-visible {
+.tab-item.dark .tab[aria-selected=true] {
+  opacity: 1;
+}
+.tab-item:has(.tab[aria-selected=true]) {
+  box-shadow: inset 0 -4px 0 0 var(--wmcolor-interactive);
+}
+.tab-item:has(.tab[aria-selected=true]).dark {
+  box-shadow: inset 0 -4px 0 0 var(--wmcolor-interactive-ondark);
+}
+.tab-item:has(:focus-visible) {
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: -3px;
 }

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

@@ -17,7 +17,6 @@ export class TabItem {
             }
         };
         this.selected = false;
-        this.show = true;
         this.tabId = "";
     }
     get parentTabList() {
@@ -27,8 +26,7 @@ export class TabItem {
         this.tabItemLoaded.emit();
     }
     render() {
-        let classes = this.show ? "" : "hide ";
-        classes += this.parentTabList && this.parentTabList.customBackground == "dark" ? "dark" : "";
+        const isDark = this.parentTabList && this.parentTabList.customBackground == "dark";
         let styles = {};
         const padding = this.parentTabList && this.parentTabList.customPadding;
         if (padding) {
@@ -40,7 +38,9 @@ export class TabItem {
                 "background-size": `calc(100% - ${bkgSize}${units}) 3px`,
             };
         }
-        return (h(Host, { key: 'bcfcc1fcb3cd91456ea38458f7eb26200f27dabb', role: "presentation" }, h("li", { key: '9ece015d01a832e52af9b520695cc303a674a22e', class: "tab-item", role: "presentation" }, h("a", { key: '8b43cebd1ff8a19aa81b23db7ce0265525f79a8a', class: `tab ${classes}`, 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 }, h("slot", { key: 'b04fa980a8eaffd3ffb64258941e943e14343cfc' })))));
+        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: () => {
+                this.wmIntTabFocused.emit({ tabItem: this.el });
+            } }, h("slot", { key: '0ec5fa05c84e7b1e6eb51a3f6e6da39568c44a5c' })))));
     }
     static get is() { return "wm-tab-item"; }
     static get encapsulation() { return "shadow"; }
@@ -75,24 +75,6 @@ export class TabItem {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "show": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "show",
-                "reflect": false,
-                "defaultValue": "true"
-            },
             "tabId": {
                 "type": "string",
                 "mutable": false,
@@ -129,6 +111,26 @@ export class TabItem {
                     "resolved": "{ tabId: string; }",
                     "references": {}
                 }
+            }, {
+                "method": "wmIntTabFocused",
+                "name": "wmIntTabFocused",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ tabItem: HTMLWmTabItemElement }",
+                    "resolved": "{ tabItem: HTMLWmTabItemElement; }",
+                    "references": {
+                        "HTMLWmTabItemElement": {
+                            "location": "global",
+                            "id": "global::HTMLWmTabItemElement"
+                        }
+                    }
+                }
             }, {
                 "method": "keydownOnTabItem",
                 "name": "keydownOnTabItem",

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

@@ -869,25 +869,59 @@
   --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: fit-content;
+  max-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-start: 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 {
+  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-start: 0.5rem;
 }
-:host wm-select {
-  padding: 0.375rem 0;
+:host wm-button.right-arrow {
+  margin-inline-end: 0.5rem;
 }