@watermarkinsights/ripple 5.22.2-alpha.0 → 5.22.2-alpha.1

package/dist/collection/components/charts/priv-chart-popover/priv-chart-popover.css

@@ -861,13 +861,17 @@
 }
 
 priv-chart-popover {
+  --wmcolor-chart-popover-link-background: var(--wmcolor-background-transparent);
+  --wmcolor-chart-popover-link-text-focus: var(--wmcolor-interactive-focus);
+  --wmcolor-chart-popover-link-text: var(--wmcolor-interactive);
+  --wmcolor-chart-popover-background: var(--wmcolor-background);
   position: fixed;
   z-index: 10;
   border-radius: 0.1875rem;
   -webkit-box-shadow: 0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12);
   -moz-box-shadow: 0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12);
   box-shadow: 0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12);
-  background-color: var(--wmcolor-background);
+  background-color: var(--wmcolor-chart-popover-background);
   font-size: 0.875rem;
   text-align: left;
 }
@@ -923,7 +927,7 @@ priv-chart-popover.user-is-tabbing .button-text {
   padding-right: 0;
   height: auto;
   border: none;
-  background: var(--wmcolor-background-transparent);
+  background: var(--wmcolor-chart-popover-link-background);
   cursor: pointer;
   text-decoration: none;
   letter-spacing: 0;
@@ -931,7 +935,7 @@ priv-chart-popover.user-is-tabbing .button-text {
   text-align: initial;
   font-size: 0.875rem;
   font-weight: 700;
-  color: var(--wmcolor-link-text);
+  color: var(--wmcolor-chart-popover-link-text);
   line-height: normal;
 }
 .popover .popover-button .button-text {
@@ -942,11 +946,6 @@ priv-chart-popover.user-is-tabbing .button-text {
   top: 0.1875rem;
   left: -1rem;
 }
-.popover .popover-button span {
-  text-decoration: underline;
-  text-decoration-thickness: 0.0714285714em;
-  text-underline-offset: 0.1428571429em;
-}
 .popover .popover-button:focus {
   outline: none;
 }
@@ -958,6 +957,5 @@ priv-chart-popover.user-is-tabbing .button-text {
   text-decoration: none;
 }
 .popover .popover-button:hover span {
-  color: var(--wmcolor-link-text-hover);
-  text-decoration-thickness: 0.1428571429em;
+  text-decoration: underline;
 }

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

@@ -7,11 +7,8 @@ export class Select {
         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.oldDisplayText = "";
         this.debouncedReposition = debounce(() => {
             this.dropdownPosition();
         }, 100);
@@ -39,6 +36,9 @@ export class Select {
         // string "false" needs to be treated as bool False because react wrappers convert bool to string.
         return toBool(this.disabled);
     }
+    get displayText() {
+        return this.displayedOptions.map((x) => x.textContent).join(", ");
+    }
     get selectedOptions() {
         return Array.from(this.el.querySelectorAll("wm-option")).filter((x) => x.selected);
     }
@@ -274,22 +274,27 @@ export class Select {
         this.announcement = message;
     }
     handleOverflow() {
-        // handle overflow + counter for multiselect
-        // 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;
+        if (!this.buttonEl) {
+            forceUpdate(this.el);
+        }
+        else {
+            // handle overflow + counter for multiselect
+            // 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.displayText;
+            let optionsTotalWidth = this.measurementAreaEl.clientWidth;
+            while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
+                this.overflowCount++;
+                this.displayedOptions.pop();
+                this.measurementAreaEl.textContent = this.displayText;
+                optionsTotalWidth = this.measurementAreaEl.clientWidth;
+            }
         }
     }
     setButtonText() {
@@ -299,28 +304,34 @@ export class Select {
         }
         else {
             this.displayedOptions = this.childOptions.filter((x) => x.selected);
-            const hasChanged = this.displayedOptions !== this.previousDisplayedOptions;
+            const hasChanged = this.displayText !== this.oldDisplayText;
             const noDisplayedOptions = this.displayedOptions.length < 1;
             if (noDisplayedOptions) {
+                this.overflowCount = 0;
                 return this.placeholder;
             }
-            else if (!this.buttonEl) {
-                forceUpdate(this.el);
-                return "";
-            }
             else if (hasChanged) {
                 this.handleOverflow();
-                // we need to calc overflowcount as we only want to display allSelected message if there is an overflow...
-                if (this.overflowCount > 0 && this.allSelected) {
-                    // ...but it should be reset so it isn't displayed in that case
-                    this.overflowCount = 0;
+                if (this.allSelected) {
+                    // we want all selected message only if there's an overflow.
+                    if (!this.overflowCount) {
+                        // but on first render we don't know: handleOverflow can't calculate measurements
+                        // in that case, display all selected message even if there's a chance options could have been shown
+                        this.buttonText = this.allSelectedMessage;
+                    }
+                    else if (this.overflowCount > 0)
+                        // if calc could be made and there is an overflow, reset it as it shouldn't be shown
+                        this.overflowCount = 0;
+                    // then display all selected message
                     this.buttonText = this.allSelectedMessage;
                 }
                 else {
-                    this.buttonText = this.displayedOptions.map((x) => x.textContent).join(", ");
+                    // otherwise, if handleOverflow was able to calculate, it set the count and the display text
+                    // if it wasn't able to calculate, the text of all the selected options will be displayed and may truncate (acceptable as fallback)
+                    this.buttonText = this.displayText;
                 }
             }
-            this.previousDisplayedOptions = this.displayedOptions;
+            this.oldDisplayText = this.displayText;
             // the reason for setting a global variable and returning it
             // is that we need the stored value when displayedOptions haven't changed.
             return this.buttonText; // multiselect value
@@ -333,14 +344,14 @@ export class Select {
     }
     render() {
         const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
-        return (h(Host, { key: 'a9b76bd87b0e9a3264695746cf8f5c8e91d331c8', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'f4f46f5db1feb4c8e154c89c5d6f6d94ecc00e88', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '460e0a75845de26c016d8e7f4eb975c726f9aa3b', class: "label-wrapper" }, h("label", { key: 'ffbcd7301f69a8696f0135e2c742d71a0ab03492', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
+        return (h(Host, { key: 'c79e7d62c63f5609264fe2f5abbbcb7f5bee40cf', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '3c7f3b82cf3c7b81226d376e15b0ad5dd5a0a3f9', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '3a0f1bbcbc40a66979dfaf91e0c8d73547d3d387', class: "label-wrapper" }, h("label", { key: '6c540fb5f76d12047b52fecb40cda9b921466107', 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: '45c1248438954a9b1c078e2bae2aeb20717742ba', class: "required" }, h("span", { key: '6a20b3925737ab51fe4ec04d781fce957c09778e', class: "sr-only" }, globalMessages.requiredField), h("span", { key: 'f03585760652f5a1e0a06680d1d31ef5cc4d4d99', "aria-hidden": "true" }, "*")))), h("div", { key: 'd99cb285408dd1192e8655ab8ffb6d57361acc04', class: "button-wrapper" }, h("button", { key: '5368e2962e9ff2686145a2bd93f6bc349af91ea0', 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: 'd3b5766d8e2476e3753bcf5c9b87280d45cb90bf', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'd6896018577a376a6a33280c3f082c462e0a59a1', class: "button-text" }, this.setButtonText()), showSubinfo && h("span", { key: '08864b9a36c5bcbd2fd09159cfff486475354e9e', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '8f689d493982521150f322ab4f02f12523191143', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '7efb458a3d5bf364e19a62741189f59639300e50', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'ef62108b2ca9b10157b39d9e31db14fbde24ec80',
+        this.requiredField && (h("span", { key: '10cc3db35973cce6dae99075f28cadf2641ad0e9', class: "required" }, h("span", { key: '35695584a1e99e803e4567c0fc86b8b41c0ea2f6', class: "sr-only" }, globalMessages.requiredField), h("span", { key: 'b33b35b401f7ee745e10b98c79e46beabeea2aa1', "aria-hidden": "true" }, "*")))), h("div", { key: '58ab503b8b998103345197b559c7fb94ebc9c8b3', class: "button-wrapper" }, h("button", { key: 'ad0144669cf6569d2edd9e64a3847a8072cb1992', 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: '9b5473e206d14b7be2549df81b0a76d908f35ae3', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '262679aec8e736332fc0426d24e392fb9c492652', class: "button-text" }, this.setButtonText()), showSubinfo && h("span", { key: 'f974e802692149bbf20214224883aa1f1abe4b74', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '711281e38df46a26363354effb9cfd6bf78008ae', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '23f428d49ea0616bef93af1b53654c1ca8b05e4c', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'e1f1e61655445d0a899699e246eb48971a50ce09',
             // 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: '6aa561516558f5913e82cc8ded2b648a8d0ef46e', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
+            onToggle: (ev) => this.handleToggle(ev) }, h("priv-option-list", { key: '20f87f661c84f9f3930a9de5f8fcf754c5a8154d', 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;
@@ -348,7 +359,7 @@ export class Select {
             }, onOptionListAllDeselected: () => {
                 this.returnFocus = true;
                 this.wmSelectAllDeselected.emit();
-            } }, h("slot", { key: '21bcbe1b9aec665219abe6147d8124349066cbeb' }))), h("div", { key: 'f3bbe02b3b4960120d8165cf03eac32bcc1c57b0', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '2c49de8a7a55216dc7c29dcffdb0af1fa0ca51be', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+            } }, h("slot", { key: 'b354ca4112920d8b8b576282632fa86b32873adb' }))), h("div", { key: '04ba1a31fcf01e718a3476759b9d3f6a61b561d4', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'f5751cc60a9f124044a0fb4795ab53969813775b', 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"; }

package/dist/collection/components/wm-button/wm-button.css

@@ -161,7 +161,7 @@
 :host .wm-button.nowrap {
   display: inline-block;
   width: 100%;
-  overflow-x: hidden;
+  overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
@@ -233,10 +233,7 @@
   border-color: transparent;
 }
 :host .wm-button.-textonly {
-  color: var(--wmcolor-link-text);
-  text-decoration: underline;
-  text-decoration-thickness: 0.0714285714em;
-  text-underline-offset: 0.1428571429em;
+  color: var(--wmcolor-button-text-textonly);
   box-shadow: none;
   display: inline-block;
   letter-spacing: 0;
@@ -248,27 +245,31 @@
   padding: 0;
   height: auto;
   min-height: unset;
+  line-height: 1;
   overflow-wrap: anywhere;
   border-radius: 2px;
 }
 :host .wm-button.-textonly.small {
   font-size: 0.625rem;
 }
-:host .wm-button.-textonly:hover:not(:disabled):not(.disabled) {
-  text-decoration-thickness: 0.1428571429em;
-}
-:host .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete):not(.ai) {
-  color: var(--wmcolor-link-text-hover);
+:host .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete) {
+  text-decoration: underline;
 }
-:host .wm-button.-textonly.dark:not(:disabled):not(.disabled):not(.-permanentlydelete):not(.ai) {
-  color: var(--wmcolor-link-text-ondark);
+:host .wm-button.-textonly.dark {
+  color: var(--wmcolor-button-text-textonly-ondark);
 }
-:host .wm-button.-textonly.dark:not(:disabled):not(.disabled):not(.-permanentlydelete):not(.ai):hover {
-  color: var(--wmcolor-link-text-hover-ondark);
+:host .wm-button.-textonly.dark:hover:not(:disabled):not(.disabled) {
+  text-decoration: underline;
 }
 :host .wm-button.-textonly.-permanentlydelete {
   color: var(--wmcolor-button-background-delete);
 }
+:host .wm-button.-textonly.-permanentlydelete:hover:not(:disabled):not(.disabled):not(.dark) {
+  text-decoration: underline;
+}
+:host .wm-button.-textonly.-permanentlydelete.dark:not(:disabled):not(.disabled) {
+  color: var(--wmcolor-button-text-textonly-ondark);
+}
 :host .wm-button.-icononly, :host .wm-button.-navigational {
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;

package/dist/collection/components/wm-pagination/wm-pagination.css

@@ -862,6 +862,15 @@
 
 :host,
 wm-pagination {
+  --wmcolor-pagination-arrow-disabled: var(--wmcolor-interactive-disabled);
+  --wmcolor-pagination-arrow: var(--wmcolor-interactive);
+  --wmcolor-pagination-arrow: var(--wmcolor-interactive);
+  --wmcolor-pagination-button-text-disabled: var(--wmcolor-interactive-disabled);
+  --wmcolor-pagination-button-text: var(--wmcolor-interactive);
+  --wmcolor-pagination-current-background-hover: var(--wmcolor-interactive-hover);
+  --wmcolor-pagination-current-background: var(--wmcolor-interactive);
+  --wmcolor-pagination-current-text: var(--wmcolor-interactive-text);
+  --wmcolor-pagination-focus: var(--wmcolor-interactive-focus);
   display: block;
 }
 
@@ -894,10 +903,7 @@ nav .smallscreen .paginationbtn {
   -moz-transition: none;
   transition: none;
   border: none;
-  color: var(--wmcolor-link-text);
-  text-decoration: underline;
-  text-decoration-thickness: 0.0714285714em;
-  text-underline-offset: 0.1428571429em;
+  color: var(--wmcolor-pagination-button-text);
   background-color: transparent;
   margin: 0;
   padding: 0;
@@ -913,12 +919,11 @@ nav .smallscreen .paginationbtn {
 }
 nav .largescreen .paginationbtn svg *,
 nav .smallscreen .paginationbtn svg * {
-  fill: var(--wmcolor-interactive);
+  fill: var(--wmcolor-pagination-arrow);
 }
 nav .largescreen .paginationbtn:hover:not([aria-current=page]):not([disabled]),
 nav .smallscreen .paginationbtn:hover:not([aria-current=page]):not([disabled]) {
-  color: var(--wmcolor-link-text-hover);
-  text-decoration-thickness: 0.1428571429em;
+  text-decoration: underline;
 }
 nav .largescreen .paginationbtn:focus,
 nav .smallscreen .paginationbtn:focus {
@@ -931,12 +936,12 @@ nav .smallscreen .paginationbtn::-moz-focus-inner {
 }
 nav .largescreen .paginationbtn[disabled],
 nav .smallscreen .paginationbtn[disabled] {
-  color: var(--wmcolor-interactive-disabled);
+  color: var(--wmcolor-pagination-button-text-disabled);
   pointer-events: none;
 }
 nav .largescreen .paginationbtn[disabled] svg *,
 nav .smallscreen .paginationbtn[disabled] svg * {
-  fill: var(--wmcolor-interactive-disabled);
+  fill: var(--wmcolor-pagination-arrow-disabled);
 }
 nav .largescreen .previousbtn,
 nav .smallscreen .previousbtn {
@@ -996,11 +1001,11 @@ nav .largescreen .paginationbtn[aria-current=page] {
   -ms-border-radius: 50%;
   border-radius: 50%;
   box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
-  background: var(--wmcolor-interactive);
-  color: var(--wmcolor-interactive-text);
+  background: var(--wmcolor-pagination-current-background);
+  color: var(--wmcolor-pagination-current-text);
 }
 nav .largescreen .paginationbtn[aria-current=page]:hover {
-  background: var(--wmcolor-interactive-hover);
+  background: var(--wmcolor-pagination-current-background-hover);
 }
 
 .sr-only {

package/dist/collection/components/wm-search/wm-search.css

@@ -865,13 +865,17 @@
 }
 
 :host {
+  --wmcolor-search-background: var(--wmcolor-background);
+  --wmcolor-search-border: var(--wmcolor-border-dark);
+  --wmcolor-search-jump-text-focus: var(--wmcolor-interactive-focus);
+  --wmcolor-search-jump-text: var(--wmcolor-interactive);
   width: 100%;
   font-size: 0.875rem;
 }
 :host .wm-search-wrapper {
   border-radius: 3px;
   position: relative;
-  border: 1px solid var(--wmcolor-border-dark);
+  border: 1px solid var(--wmcolor-search-border);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -885,7 +889,7 @@
   border: none;
   height: 40px;
   padding: 0 1.75rem;
-  background: var(--wmcolor-background);
+  background: var(--wmcolor-search-background);
   overflow: visible;
   width: 100%;
   flex: 1;
@@ -931,18 +935,14 @@
 }
 :host .jump-results {
   all: unset;
-  color: var(--wmcolor-link-text);
-  text-decoration: underline;
-  text-decoration-thickness: 0.0714285714em;
-  text-underline-offset: 0.1428571429em;
+  color: var(--wmcolor-search-jump-text);
+  text-decoration: none;
   font-weight: 500;
   font-size: 0.875rem;
   display: inline-block;
   margin: 8px 0;
 }
 :host .jump-results:focus-visible {
-  color: var(--wmcolor-link-text-hover);
-  text-decoration-thickness: 0.1428571429em;
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: 2px;
 }

package/dist/collection/components/wm-snackbar/wm-snackbar.css

@@ -866,6 +866,12 @@
 }
 
 :host {
+  --wmcolor-snackbar-background: var(--wmcolor-background-dark);
+  --wmcolor-snackbar-close-background-hover: var(--wmcolor-interactive-ondark);
+  --wmcolor-snackbar-close-background: var(--wmcolor-background-transparent);
+  --wmcolor-snackbar-close-icon-hover: var(--wmcolor-interactive);
+  --wmcolor-snackbar-close-icon: var(--wmcolor-interactive-ondark);
+  --wmcolor-snackbar-text: var(--wmcolor-text-ondark);
   position: fixed;
   bottom: 0;
   z-index: 2001;
@@ -909,10 +915,10 @@
   -moz-transition: all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);
   transition: all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);
   font-size: 0.875rem;
-  color: var(--wmcolor-text-ondark);
+  color: var(--wmcolor-snackbar-text);
   padding: 1rem;
   min-block-size: 3.75rem;
-  background: var(--wmcolor-background-dark);
+  background: var(--wmcolor-snackbar-background);
   opacity: 0;
   left: 0;
   position: relative;
@@ -961,15 +967,12 @@
   text-decoration: none;
   font-weight: 600;
   cursor: pointer;
-  text-decoration: underline;
-  text-decoration-thickness: 0.0714285714em;
-  text-underline-offset: 0.1428571429em;
 }
 :host .wm-snack-wrapper .wm-snackbar .link .svg-open-in-new {
   margin-inline-start: 0.25rem;
 }
 :host .wm-snack-wrapper .wm-snackbar .link:hover {
-  text-decoration-thickness: 0.1428571429em;
+  text-decoration: underline;
 }
 :host .wm-snack-wrapper .wm-snackbar .link:focus {
   outline: none;
@@ -1030,8 +1033,8 @@
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   border-radius: 50%;
-  background-color: var(--wmcolor-background-transparent);
-  color: var(--wmcolor-interactive-ondark);
+  background-color: var(--wmcolor-snackbar-close-background);
+  color: var(--wmcolor-snackbar-close-icon);
   cursor: pointer;
   border: none;
   font-size: 1rem;
@@ -1047,8 +1050,8 @@
   --icon-size: 1.125rem;
 }
 :host .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack:hover {
-  background-color: var(--wmcolor-interactive-ondark);
-  color: var(--wmcolor-interactive);
+  background-color: var(--wmcolor-snackbar-close-background-hover);
+  color: var(--wmcolor-snackbar-close-icon-hover);
 }
 :host .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack:focus {
   outline: none;

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

@@ -891,7 +891,7 @@
   -moz-border-radius: 0;
   -ms-border-radius: 0;
   border-radius: 0;
-  color: var(--wmcolor-link-text);
+  color: var(--wmcolor-tab-text);
   text-decoration: none;
   font-size: 0.875rem;
   font-weight: 600;
@@ -909,7 +909,6 @@
   font-weight: 700;
 }
 .tab-item .tab:hover, .tab-item .tab:active, .tab-item .tab:focus {
-  color: var(--wmcolor-link-text-hover);
   outline: none;
 }
 .tab-item.dark .tab {
@@ -920,7 +919,7 @@
   opacity: 1;
 }
 .tab-item:has(.tab[aria-selected=true]) {
-  box-shadow: inset 0 -4px 0 0 var(--wmcolor-link-text);
+  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);

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

@@ -161,7 +161,7 @@
 :host .wm-button.nowrap {
   display: inline-block;
   width: 100%;
-  overflow-x: hidden;
+  overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
@@ -233,10 +233,7 @@
   border-color: transparent;
 }
 :host .wm-button.-textonly {
-  color: var(--wmcolor-link-text);
-  text-decoration: underline;
-  text-decoration-thickness: 0.0714285714em;
-  text-underline-offset: 0.1428571429em;
+  color: var(--wmcolor-button-text-textonly);
   box-shadow: none;
   display: inline-block;
   letter-spacing: 0;
@@ -248,27 +245,31 @@
   padding: 0;
   height: auto;
   min-height: unset;
+  line-height: 1;
   overflow-wrap: anywhere;
   border-radius: 2px;
 }
 :host .wm-button.-textonly.small {
   font-size: 0.625rem;
 }
-:host .wm-button.-textonly:hover:not(:disabled):not(.disabled) {
-  text-decoration-thickness: 0.1428571429em;
-}
-:host .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete):not(.ai) {
-  color: var(--wmcolor-link-text-hover);
+:host .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete) {
+  text-decoration: underline;
 }
-:host .wm-button.-textonly.dark:not(:disabled):not(.disabled):not(.-permanentlydelete):not(.ai) {
-  color: var(--wmcolor-link-text-ondark);
+:host .wm-button.-textonly.dark {
+  color: var(--wmcolor-button-text-textonly-ondark);
 }
-:host .wm-button.-textonly.dark:not(:disabled):not(.disabled):not(.-permanentlydelete):not(.ai):hover {
-  color: var(--wmcolor-link-text-hover-ondark);
+:host .wm-button.-textonly.dark:hover:not(:disabled):not(.disabled) {
+  text-decoration: underline;
 }
 :host .wm-button.-textonly.-permanentlydelete {
   color: var(--wmcolor-button-background-delete);
 }
+:host .wm-button.-textonly.-permanentlydelete:hover:not(:disabled):not(.disabled):not(.dark) {
+  text-decoration: underline;
+}
+:host .wm-button.-textonly.-permanentlydelete.dark:not(:disabled):not(.disabled) {
+  color: var(--wmcolor-button-text-textonly-ondark);
+}
 :host .wm-button.-icononly, :host .wm-button.-navigational {
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
@@ -1831,17 +1832,9 @@
 .requirements summary {
   list-style-type: none;
   font-weight: 700;
+  color: var(--wmcolor-interactive);
   padding-inline-end: 0.5rem;
   width: fit-content;
-  color: var(--wmcolor-link-text);
-  cursor: default;
-  text-decoration: underline;
-  text-decoration-thickness: 0.0714285714em;
-  text-underline-offset: 0.1428571429em;
-}
-.requirements summary:hover {
-  color: var(--wmcolor-link-text-hover);
-  text-decoration-thickness: 0.1428571429em;
 }
 .requirements summary .title-text {
   margin-inline-start: 1.5rem;

package/dist/esm/{app-globals-b74a6cc1.js → app-globals-bb7ed51c.js}

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

package/dist/esm/loader.js

@@ -1,6 +1,6 @@
 import { b as bootstrapLazy } from './index-130e07bb.js';
 export { s as setNonce } from './index-130e07bb.js';
-import { g as globalScripts } from './app-globals-b74a6cc1.js';
+import { g as globalScripts } from './app-globals-bb7ed51c.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;