@watermarkinsights/ripple 5.23.0-alpha.4 → 5.23.0-alpha.6

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

@@ -860,12 +860,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-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);
-}
 priv-chart-popover.user-is-keying .button-text {
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: 2px;
@@ -893,10 +887,10 @@ priv-chart-popover.user-is-keying .button-text {
   -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-chart-popover-background);
+  background-color: var(--wmcolor-background);
   font-size: 0.875rem;
-  text-align: left;
-  width: 10.5rem;
+  text-align: start;
+  inline-size: 10.5rem;
   padding: 0.625rem 0.9375rem;
   box-sizing: border-box;
 }
@@ -904,9 +898,9 @@ priv-chart-popover.user-is-keying .button-text {
   font-size: 1em;
   font-weight: 500;
   margin: 0;
-  padding-top: 0;
-  padding-left: 0;
-  padding-bottom: 0.25rem;
+  padding-block-start: 0;
+  padding-inline-start: 0;
+  padding-block-end: 0.25rem;
 }
 .popover .title.positive {
   color: var(--wmcolor-chart-label-text-positive);
@@ -916,7 +910,7 @@ priv-chart-popover.user-is-keying .button-text {
 }
 .popover .text {
   margin: 0;
-  margin-bottom: 0.5rem;
+  margin-block-end: 0.5rem;
 }
 .popover .popover-button {
   -webkit-box-shadow: none;
@@ -924,12 +918,12 @@ priv-chart-popover.user-is-keying .button-text {
   box-shadow: none;
   position: relative;
   display: inline-block;
-  margin-left: 1rem;
-  padding-left: 0;
-  padding-right: 0;
-  height: auto;
+  margin-inline-start: 1rem;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  block-size: auto;
   border: none;
-  background: var(--wmcolor-chart-popover-link-background);
+  background: var(--wmcolor-background-transparent);
   cursor: pointer;
   text-decoration: none;
   letter-spacing: 0;
@@ -937,7 +931,7 @@ priv-chart-popover.user-is-keying .button-text {
   text-align: initial;
   font-size: 0.875rem;
   font-weight: 700;
-  color: var(--wmcolor-chart-popover-link-text);
+  color: var(--wmcolor-interactive);
   line-height: normal;
 }
 .popover .popover-button .button-text {
@@ -945,8 +939,13 @@ priv-chart-popover.user-is-keying .button-text {
 }
 .popover .popover-button .btn-icon {
   position: absolute;
-  top: 0.1875rem;
-  left: -1rem;
+  inset-block-start: 0.1875rem;
+  inset-inline-start: -1rem;
+}
+.popover .popover-button span {
+  text-decoration: underline;
+  text-decoration-thickness: 0.0714285714em;
+  text-underline-offset: 0.1428571429em;
 }
 .popover .popover-button:focus {
   outline: none;
@@ -959,5 +958,6 @@ priv-chart-popover.user-is-keying .button-text {
   text-decoration: none;
 }
 .popover .popover-button:hover span {
-  text-decoration: underline;
+  color: var(--wmcolor-link-text-hover);
+  text-decoration-thickness: 0.1428571429em;
 }

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

@@ -57,7 +57,7 @@ export class ChartPopover {
         });
     }
     handleOpenChange() {
-        this.intChartPopoverOpenChanged.emit(this.open);
+        this.intChartPopoverToggled.emit(this.open);
         if (this.open) {
             this.popoverEl.showPopover();
         }
@@ -106,9 +106,9 @@ export class ChartPopover {
     }
     render() {
         const titleAffordance = this.header && (this.header[0] === "-" ? "negative" : this.header[0] === "+" ? "positive" : "");
-        return (h(Host, { key: '5c7a3675940a53de167b000c9744a0f57c67388e', class: this.isKeying ? "user-is-keying" : "" }, h("div", { key: '5d3e225f174530a1b5f7d99f572efd37606d5c83', ref: (el) => (this.popoverEl = el), popover: "manual", "aria-hidden": "true", class: "popover" }, h("h1", { key: '858f7faa282336836ab4bcee639b2c3de2f9bdd0', class: `title ${titleAffordance}` }, this.header), h("p", { key: '2b1615179e45c14d2a661c4f9329134e744c16dc', class: "text" }, this.text), this.buttonText ? (h("button", { tabindex: "-1",
+        return (h(Host, { key: '264fac65cf26beb4e5f0d1e498b8c27446f34e06', class: this.isKeying ? "user-is-keying" : "" }, h("div", { key: '622125c6ec386e2830b46df0b24438e741813e47', ref: (el) => (this.popoverEl = el), popover: "manual", "aria-hidden": "true", class: "popover" }, h("h1", { key: '246546c176f65f4039e8d339473aa766381084d4', class: `title ${titleAffordance}` }, this.header), h("p", { key: '15ed78fcc033bbfb0d82a8579fa080c61b9430ce', class: "text" }, this.text), this.buttonText ? (h("button", { tabindex: "-1",
             // @ts-ignore
-            focusable: "false", class: "popover-button", onClick: () => this.handleButtonClick() }, h("svg", { class: "btn-icon", height: "9", width: "9" }, h("path", { fill: "#575195", d: "M0 3.38v2.25h9V3.38H0zM0 0v2.25h4.5V0H0zm6.19 6.75H0V9h6.19V6.75z" })), h("span", { class: "button-text" }, this.buttonText))) : ("")), h("div", { key: '2238bbe6a805627f34ae04e8e62cef6d94546cf3', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.announcement)));
+            focusable: "false", class: "popover-button", onClick: () => this.handleButtonClick() }, h("svg", { class: "btn-icon", height: "9", width: "9" }, h("path", { fill: "#575195", d: "M0 3.38v2.25h9V3.38H0zM0 0v2.25h4.5V0H0zm6.19 6.75H0V9h6.19V6.75z" })), h("span", { class: "button-text" }, this.buttonText))) : ("")), h("div", { key: 'dfaceb8543ecaa9d90697c4b1c34991cc0d3d2c9', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.announcement)));
     }
     static get is() { return "priv-chart-popover"; }
     static get originalStyleUrls() {
@@ -263,8 +263,8 @@ export class ChartPopover {
                     }
                 }
             }, {
-                "method": "intChartPopoverOpenChanged",
-                "name": "intChartPopoverOpenChanged",
+                "method": "intChartPopoverToggled",
+                "name": "intChartPopoverToggled",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/charts/wm-chart-bar/wm-chart-bar.css

@@ -903,6 +903,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
+  margin-bottom: 1.5rem;
 }
 .label .label-text {
   display: block;
@@ -917,12 +918,6 @@
   width: 100%;
   color: var(--wmcolor-chart-subinfo-text);
 }
-.label.--top {
-  margin-bottom: 1.5rem;
-}
-.label.--none {
-  display: none;
-}
 
 .chart-left-side {
   grid-column: 1;

package/dist/collection/components/charts/wm-chart-bar/wm-chart-bar.js

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
-import { chartPaletteDiscrete, chartPaletteSemantic, } from "../../../global/interfaces";
-import { formatDisplayValue, suffixNumber, renderInstructionsText, findLargestNiceInterval, getMaxTicks, } from "../chartFunctions";
+import { chartPalettes, } from "../../../global/interfaces";
+import { formatDisplayValue, suffixNumber, renderInstructionsText, findLargestNiceInterval, getMaxTicks, findNiceRoundNumber, } from "../chartFunctions";
 import { chartMessages } from "../../../global/intl";
 import { isElOrChild } from "../../../global/functions";
 export class ChartBar {
@@ -21,10 +21,10 @@ export class ChartBar {
         var _a, _b, _c, _d;
         let palette = ["wmcolor-dataviz-discrete-01"]; // default to single color
         if (((_a = this.config) === null || _a === void 0 ? void 0 : _a.colors) === "semantic") {
-            palette = chartPaletteSemantic;
+            palette = chartPalettes.semantic;
         }
         else if (((_b = this.config) === null || _b === void 0 ? void 0 : _b.colors) == "discrete") {
-            palette = chartPaletteDiscrete;
+            palette = chartPalettes.discrete;
         }
         else if ((_d = (_c = this.config) === null || _c === void 0 ? void 0 : _c.colors) === null || _d === void 0 ? void 0 : _d.startsWith("wmcolor-")) {
             palette = [this.config.colors];
@@ -43,6 +43,10 @@ export class ChartBar {
         var _a;
         return this.subinfo || ((_a = this.config) === null || _a === void 0 ? void 0 : _a.subinfo) || "";
     }
+    get gridVisible() {
+        var _a, _b, _c;
+        return !!this.gridInfo && ((_a = this.config) === null || _a === void 0 ? void 0 : _a.gridMax) != undefined && ((_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.showGrid) !== null && _c !== void 0 ? _c : true);
+    }
     // #endregion getters
     ////////////////////////////////////////////////////////////
     // #region Component lifecycle
@@ -63,10 +67,16 @@ export class ChartBar {
         if (this.config && this.data) {
             const itemTotal = this.data.reduce((acc, item) => acc + item.amount, 0);
             const largest = Math.max(...this.data.map((item) => item.amount));
-            // Use config.gridMax if specified, otherwise calculate from data
-            // Even when the grid is not displayed (undefined), we need a gridMax to calculate the bar widths
-            this.gridMax =
-                this.config.gridMax === "auto" || this.config.gridMax === undefined ? largest : this.config.gridMax;
+            if (this.config.gridMax == "auto") {
+                this.gridMax = findNiceRoundNumber(largest);
+            }
+            else if (!!this.config.gridMax) {
+                this.gridMax = this.config.gridMax;
+            }
+            else {
+                // fallback to 1 and chart should not render
+                this.gridMax = 1;
+            }
             const processedItems = this.processItems(itemTotal);
             if (this.sort === "ascending") {
                 processedItems.sort((a, b) => a.amount - b.amount);
@@ -80,6 +90,9 @@ export class ChartBar {
     }
     processItems(itemTotal) {
         var _a, _b;
+        if (!this.data) {
+            return [];
+        }
         const valueFormat = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.valueFormat) || "amount"; // default to amount
         const printModeFormat = ((_b = this.config) === null || _b === void 0 ? void 0 : _b.printModeFormat) || "amount"; // default to amount
         const defaultColor = "wmcolor-dataviz-discrete-01";
@@ -170,21 +183,15 @@ export class ChartBar {
             this.highlightBar(idx);
         }
     }
-    handleExternalLegendItemClick(ev) {
+    handleLegendItemClick(ev) {
         if (ev.target.nodeName === "WM-CHART-LEGEND") {
-            // Only considers external legends, event target of internal legends is the chart
+            // If event from an internal legend bubbles up to the chart, ignore it
             const legendEl = ev.target;
             if (legendEl.chartIds.includes(this.el.id)) {
                 this.highlightBar(ev.detail.idx);
             }
         }
     }
-    handleInternalLegendItemClick(ev) {
-        const legendEl = ev.target;
-        if (legendEl.chartIds.includes(this.el.id)) {
-            this.highlightBar(ev.detail.idx);
-        }
-    }
     handleDocumentClick(_ev) {
         // Clear highlights when highlight is set from an external legend (not opening a popover)
         if (!this.popoverEl.open) {
@@ -219,7 +226,7 @@ export class ChartBar {
             y: barToFocus.getBoundingClientRect().top + cornerOffset,
         });
     }
-    handlePopoverOpenChanged(_ev) {
+    handlePopoverToggled(_ev) {
         setTimeout(() => {
             // allow time for the popover to reopen if the click that closed it was on a bar, to prevent flash
             if (this.popoverEl.open) {
@@ -231,6 +238,9 @@ export class ChartBar {
         }, 30);
     }
     openPopover(clickedProcessedData, coords) {
+        if (!this.data || !this.config) {
+            return;
+        }
         let matchingChartData = this.data.find((item) => item.barLegend === clickedProcessedData.barLegend);
         if (matchingChartData) {
             this.popoverEl.chartData = matchingChartData;
@@ -262,7 +272,6 @@ export class ChartBar {
     clearFocus() {
         if (this.popoverEl.open) {
             this.popoverEl.open = false;
-            console.log("popover closed from clearFocus: ", this.popoverEl.open);
         }
         this.clearHighlights();
     }
@@ -274,6 +283,9 @@ export class ChartBar {
         return this.processedData.map((item) => (h("div", { key: `legend-${item.barLegend}`, class: "bar-legend" }, item.barLegend)));
     }
     renderBars() {
+        if (!this.gridInfo || !this.processedData) {
+            return;
+        }
         // Use effective grid max (numTicks * interval) for accurate bar sizing
         const effectiveGridMax = this.gridInfo.numTicks * this.gridInfo.interval;
         return this.processedData.map((item, idx) => {
@@ -287,17 +299,19 @@ export class ChartBar {
             _a.tickLabels.map((label) => (h("div", { class: "tick", key: label }, h("span", null, label))))));
     }
     renderGrid() {
-        return h("div", { class: "grid-lines", style: { "--background-size": this.gridInfo.backgroundSize } });
+        var _a;
+        const backgroundSize = (_a = this.gridInfo) === null || _a === void 0 ? void 0 : _a.backgroundSize;
+        return h("div", { class: "grid-lines", style: { "--background-size": backgroundSize } });
     }
     renderLegend(orientation) {
         var _a, _b, _c;
-        return (h("div", { class: `legend --${orientation} --${this.showLegend}` }, h("wm-chart-legend", { orientation: orientation, chartIds: this.el.id, processedData: this.processedData, printMode: (_c = (_a = this.printMode) !== null && _a !== void 0 ? _a : (_b = this.config) === null || _b === void 0 ? void 0 : _b.printMode) !== null && _c !== void 0 ? _c : false, onWmLegendItemClick: (ev) => this.handleInternalLegendItemClick(ev) })));
+        return (h("div", { class: `legend --${orientation} --${this.showLegend}` }, h("wm-chart-legend", { orientation: orientation, chartIds: this.el.id, processedData: this.processedData, printMode: (_c = (_a = this.printMode) !== null && _a !== void 0 ? _a : (_b = this.config) === null || _b === void 0 ? void 0 : _b.printMode) !== null && _c !== void 0 ? _c : false, onWmLegendItemClick: (ev) => this.handleLegendItemClick(ev) })));
     }
     // #endregion rendering
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
         const rowCount = this.processedData.length || 1;
-        return (h(Host, { key: '2fe75003c819b49d5de618eea92bbd2fcfc10723' }, h("div", { key: '48f496b705d9571f9386dfddaaaddbd414836252', class: "component-wrapper", tabindex: "0", role: "application", onKeyDown: (ev) => this.handleChartKeyDown(ev), onBlur: (ev) => this.handleComponentBlur(ev), "aria-roledescription": chartMessages.interactiveChart, "aria-describedby": "chart-instructions", "aria-label": (_a = this.config) === null || _a === void 0 ? void 0 : _a.label }, h("div", { key: '9f78d67d37c8048554127adbd40ee94409dcc575', class: "popover-wrapper" }, h("priv-chart-popover", { key: '9d1f5bf3bb3d1af0a36b2c0e7d53a7e56f23ce9d', ref: (el) => (this.popoverEl = el), onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) })), h("label", { key: 'c111aecf07f21b19422804a21ffeba9632258309', id: "label", class: `label --${(_b = this.config) === null || _b === void 0 ? void 0 : _b.labelPosition}` }, h("span", { key: 'bb866688ed8f54ded76bfdff8ca54437322dc73d', class: "label-text" }, (_c = this.config) === null || _c === void 0 ? void 0 : _c.label), this.subinfoText ? h("span", { class: "subinfo" }, this.subinfoText) : ""), this.showLegend === "top" && this.renderLegend("horizontal"), h("div", { key: '58a8f0c8932fa214311ef73fac64925d2eb1cb74', class: "chart-wrapper" }, h("div", { key: '1ad4c29e26a7d5fb3e23b54d25ce639adbceedd9', class: "chart-left-side" }, this.showLegend === "left" && this.renderLegend("vertical"), h("div", { key: '5f7aeb14ab9101f1fd38c811d9ac17660c5055d5', class: "category-axis-label" }, h("span", { key: 'bc99815352064b5b62efc9634d0f623b29e56c19', class: "axis-label-text" }, (_d = this.config) === null || _d === void 0 ? void 0 : _d.categoryAxisLabel))), h("div", { key: '1b968d3f687215a65ddd3bc6e39bc96dd908c68c', class: "chart-center" }, h("div", { key: '6da38ae08882fed85387427d8c36984160ac805a', class: "chart-area", style: { "--row-count": rowCount.toString() } }, this.processedData && this.renderBarLegends(), h("div", { key: '1413e4f4a62e10cf7236d87b38b96932f3bd713a', class: `bar-area ${this.isKeying ? "user-is-keying" : ""}`, ref: (el) => (this.barAreaEl = el) }, this.gridInfo && ((_e = this.config) === null || _e === void 0 ? void 0 : _e.gridMax) != undefined && this.renderGrid(), this.gridInfo && this.processedData && this.renderBars())), h("div", { key: '5021bad3a65b05b5280a63320dacfab6b560ab88', class: "value-axis-label" }, h("span", { key: 'c2b06b622ef28a16423eaa277c31e7c298ed431d', class: "axis-label-text" }, (_f = this.config) === null || _f === void 0 ? void 0 : _f.valueAxisLabel)), this.gridInfo && ((_g = this.config) === null || _g === void 0 ? void 0 : _g.gridMax) != undefined && this.renderXAxis()), h("div", { key: '49ae3d55b3172a5d98cb26b6bbdd59c277b38b57', class: "chart-right-side" }, this.showLegend === "right" && this.renderLegend("vertical"))), this.showLegend === "bottom" && this.renderLegend("horizontal"), renderInstructionsText())));
+        return (h(Host, { key: '778b8642fd4cef3d90949740fce75151aaf44654' }, h("div", { key: 'dbcf9dfb3a3923e4e8fed64cb7f65d09d04192f1', class: "component-wrapper", tabindex: "0", role: "application", onKeyDown: (ev) => this.handleChartKeyDown(ev), onBlur: (ev) => this.handleComponentBlur(ev), "aria-roledescription": chartMessages.interactiveChart, "aria-describedby": "chart-instructions", "aria-label": (_a = this.config) === null || _a === void 0 ? void 0 : _a.label }, h("div", { key: '011f7671bbf2346282582cbcafb5b6e2fc1b2c68', class: "popover-wrapper" }, h("priv-chart-popover", { key: '37073f1f5b48dd11563d614ccd4a39fd0d875926', ref: (el) => (this.popoverEl = el), onIntChartPopoverToggled: (ev) => this.handlePopoverToggled(ev) })), ((_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.showLabel) !== null && _c !== void 0 ? _c : true) && (h("label", { key: '59ce163b9551a0889a1ab69e00a8ae66f7d153de', id: "label", class: "label" }, h("span", { key: 'f9d24cee45469b072953e6e237ccbe2c740678c4', class: "label-text" }, (_d = this.config) === null || _d === void 0 ? void 0 : _d.label), this.subinfoText ? h("span", { class: "subinfo" }, this.subinfoText) : "")), this.showLegend === "top" && this.renderLegend("horizontal"), h("div", { key: '3f20081198b084e9336cfcca7ca206292446c2d2', class: "chart-wrapper" }, h("div", { key: '71c59296c0af14515241d781e44ff512bfa89cc2', class: "chart-left-side" }, this.showLegend === "left" && this.renderLegend("vertical"), h("div", { key: '11f895eda739c0af71f2f889595dfc35ea96e771', class: "category-axis-label" }, h("span", { key: '79043541f3efbc80ae165ad739af82ed89c51790', class: "axis-label-text" }, (_e = this.config) === null || _e === void 0 ? void 0 : _e.categoryAxisLabel))), h("div", { key: '0e88bfb0103df986f53dd3974adcf8932145a8d8', class: "chart-center" }, h("div", { key: 'eab8dfc1ae2fabb1caa95f4e91e8d901396a44dd', class: "chart-area", style: { "--row-count": rowCount.toString() } }, this.processedData && this.renderBarLegends(), h("div", { key: 'ae7fa3dd860b987af14ee1ffd2a48bb521745ec0', class: `bar-area ${this.isKeying ? "user-is-keying" : ""}`, ref: (el) => (this.barAreaEl = el) }, this.gridVisible && this.renderGrid(), ((_f = this.config) === null || _f === void 0 ? void 0 : _f.gridMax) != undefined && this.renderBars())), h("div", { key: '1e20f60338bbde68234a6315cac9fdecbb36c8ef', class: "value-axis-label" }, h("span", { key: 'a96919a4a6e540bffd0f8f40e8b791888944605e', class: "axis-label-text" }, (_g = this.config) === null || _g === void 0 ? void 0 : _g.valueAxisLabel)), this.gridVisible && this.renderXAxis()), h("div", { key: 'e9f6910f160952676ddf30f90c824277752d20d9', class: "chart-right-side" }, this.showLegend === "right" && this.renderLegend("vertical"))), this.showLegend === "bottom" && this.renderLegend("horizontal"), renderInstructionsText())));
     }
     static get is() { return "wm-chart-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -318,7 +332,7 @@ export class ChartBar {
                 "mutable": false,
                 "complexType": {
                     "original": "ChartConfig",
-                    "resolved": "undefined | { label: string; labelPosition: \"top\" | \"none\"; valueAxisLabel: string; categoryAxisLabel: string; printMode: boolean; printModeFormat: \"amount\" | \"percentage\"; gridMax?: number | \"auto\" | undefined; sort?: \"none\" | \"ascending\" | \"descending\" | undefined; showLegend?: \"top\" | \"bottom\" | \"left\" | \"right\" | \"none\" | undefined; subinfo?: string | undefined; completionMessage?: string | undefined; valueFormat?: \"none\" | \"amount\" | \"percentage\" | undefined; colors?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; }",
+                    "resolved": "undefined | { label: string; showLabel: boolean; valueAxisLabel: string; categoryAxisLabel: string; printMode: boolean; printModeFormat: \"amount\" | \"percentage\"; gridMax: number | \"auto\"; sort?: \"ascending\" | \"descending\" | \"none\" | undefined; showLegend?: \"top\" | \"bottom\" | \"left\" | \"right\" | \"none\" | undefined; showGrid?: boolean | undefined; subinfo?: string | undefined; completionMessage?: string | undefined; valueFormat?: \"amount\" | \"percentage\" | \"none\" | undefined; colors?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; }",
                     "references": {
                         "ChartConfig": {
                             "location": "import",
@@ -432,7 +446,7 @@ export class ChartBar {
     static get listeners() {
         return [{
                 "name": "wmLegendItemClick",
-                "method": "handleExternalLegendItemClick",
+                "method": "handleLegendItemClick",
                 "target": "document",
                 "capture": false,
                 "passive": false
@@ -448,24 +462,12 @@ export class ChartBar {
                 "target": "window",
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "wmUserIsTabbing",
-                "method": "handleUserIsKeying",
-                "target": "window",
-                "capture": false,
-                "passive": false
             }, {
                 "name": "wmUserIsNotKeying",
                 "method": "handleUserIsNotKeying",
                 "target": "window",
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "wmUserIsNotTabbing",
-                "method": "handleUserIsNotKeying",
-                "target": "window",
-                "capture": false,
-                "passive": false
             }];
     }
 }

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: '32eda81294981e2d46b283c469f7373f9984dbdd', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'dc3e7f782326beda2517cf8878516d4d23576bf3', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '0ddf3269d861b1d252876b587346739e978117fe', class: "label-wrapper" }, h("label", { key: '78493121ecada1718c1f0de42cdc09289d000bc9', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
+        return (h(Host, { key: 'b9e427db71b61d4731a3c8c31826358efb2e71c9', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '6a8ad960dfcf56ba23736c5dc7306517a0f4cc61', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'a1829bc5949a9e75629bb645ab63331af4ae71f1', class: "label-wrapper" }, h("label", { key: '329944256ca0c0a76881b03192579849106fc0b8', 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: 'dfa3603962893e5fe6542924561fbe31828b694b', class: "required" }, h("span", { key: '478a6d2c7e9bb56dea7165a1e762bc3a136c7c1d', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '8f3115f4a09dc109ed4580be49e3a704bd643ca0', "aria-hidden": "true" }, "*")))), h("div", { key: 'cbe6cc0600f11352dfc81a5a991805e757256906', class: "button-wrapper" }, h("button", { key: 'e943b99068a8822a65d8cc8ae6ab61999ac8a511', 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: 'e914e5cc9eabfe311e4ed57ee92744b14e3828e4', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '095981a63cea28e0dbcdc269401eb511694739f6', class: "button-text" }, this.setButtonText()), showSubinfo && h("span", { key: 'd006aadc9c414abf0dfefc05d8fbff9c0fc1c370', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '77054ec91448bc021ce4a4bacfa5a1a8130e34d3', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '1719132ac678c1a8a530e3b7f2fc3c67cd7c73ae', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'dc968de113b89cdf848d7a231b097a4d2308b357',
+        this.requiredField && (h("span", { key: '5a7d128c99b2eb064c038aecca4097304775b94c', class: "required" }, h("span", { key: 'fea081b4029d61add6f8a1a6743e30eb64329f89', class: "sr-only" }, globalMessages.requiredField), h("span", { key: 'a8f8fd3695883555ccfdf1d63a56aa0b54472ac7', "aria-hidden": "true" }, "*")))), h("div", { key: 'd8c783d92db1f7599ad431ff14069d26f335efee', class: "button-wrapper" }, h("button", { key: '56a36ae5267f5323a595f411d9a4a7257e04ede1', 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: 'f026cf1c1f331ef84253a55df3308e518e8c38ed', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'c48385d25e0ac06b1faa8b5760949c4e3872a6c1', class: "button-text" }, this.setButtonText()), showSubinfo && h("span", { key: 'd47f6e6ccb3dfda11fdfd74c3880038a3582f593', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: 'ec2f38fce7005421341b176bbb9a07a2f4f930f2', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '76e51beef029574af384673324937b78631baac0', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '5ada44373bccb9ff83b8d33d5454f197fdbcece2',
             // 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: '64518e2aa66f3373417506a4126fcec27de552f5', 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: '85262c7c088219e1bb7e50953c4fd058d8750a12', 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: '138d16484638a094fd0664982e30149888cc3270' }))), h("div", { key: 'fc644fe425fc73337558af6dc809893e0574ba9a', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'a6f373b32a1dc83a788bfd17ee410e23a6d53001', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+            } }, h("slot", { key: '66b4a65b4477b82cb8e0073cc49842e4d2a9e724' }))), h("div", { key: 'a3e19f185805e5ce1818fbc101e8e41ebeda3b8d', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'e524c3fdfc16d96750e7ddfa84207fb92803b648', 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: hidden;
+  overflow-x: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
@@ -233,7 +233,10 @@
   border-color: transparent;
 }
 :host .wm-button.-textonly {
-  color: var(--wmcolor-button-text-textonly);
+  color: var(--wmcolor-link-text);
+  text-decoration: underline;
+  text-decoration-thickness: 0.0714285714em;
+  text-underline-offset: 0.1428571429em;
   box-shadow: none;
   display: inline-block;
   letter-spacing: 0;
@@ -245,31 +248,27 @@
   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):not(.-permanentlydelete) {
-  text-decoration: underline;
+:host .wm-button.-textonly:hover:not(:disabled):not(.disabled) {
+  text-decoration-thickness: 0.1428571429em;
 }
-:host .wm-button.-textonly.dark {
-  color: var(--wmcolor-button-text-textonly-ondark);
+:host .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete):not(.ai) {
+  color: var(--wmcolor-link-text-hover);
 }
-:host .wm-button.-textonly.dark:hover:not(:disabled):not(.disabled) {
-  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:not(:disabled):not(.disabled):not(.-permanentlydelete):not(.ai):hover {
+  color: var(--wmcolor-link-text-hover-ondark);
 }
 :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-modal/wm-modal.js

@@ -31,10 +31,8 @@ export class Modal {
         return customElementToFocus;
     }
     get hasBrowserPopoverSupport() {
-        // for browsers without popover support, render an additional tooltip in the top-layer so that it can be displayed above the dialog element
-        const tooltipEl = document.getElementById("wm-tooltip");
-        //@ts-ignore
-        return tooltipEl ? !!tooltipEl.showPopover : false;
+        // For browsers without popover support, render a fallback tooltip inside the dialog so it appears above it
+        return typeof HTMLElement.prototype.showPopover === 'function';
     }
     toggleModal() {
         this.open ? this.showModal() : this.hideModal();
@@ -116,11 +114,11 @@ export class Modal {
         }
     }
     render() {
-        return (h("dialog", { key: '7e79523b945c00909991a3dcfecfda79e92c882b', class: `${"wm-" + this.modalType}`, "aria-labelledby": `wm-modal-heading-text-${this.uid}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: 'c032006260d0c083a5b796e20705cb99f6fa44b9', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
+        return (h("dialog", { key: '633554a1b1e5df10d410e1c31e2f960642718e57', class: `${"wm-" + this.modalType}`, "aria-labelledby": `wm-modal-heading-text-${this.uid}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '3d6d3bbce8760bfb1e642771f534b1d603f6a74b', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
                 const focusedFromCloseButton = ev.relatedTarget && ev.relatedTarget == this.closeButtonEl;
                 // no related target means we're coming from outside the page (browser chrome), and first element should be focused instead
                 focusedFromCloseButton ? this.focusLastElement.emit() : this.focusFirstElement.emit();
-            } }), !this.hasBrowserPopoverSupport && h("div", { key: '384ed4e4fa347e50d1f9c78a3c1d84d6dab9f34a', class: "wm-tooltip" }), h("slot", { key: '6ec6ba8b0b90db721ff1e29db8f259d2f1cff6d0' }), h("div", { key: '3795b7025286e5d4f542cfccad9c6851d2f22a8d', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
+            } }), !this.hasBrowserPopoverSupport && h("div", { key: '7c660029e60f4b8df004dd3b830025f047710ccc', class: "wm-tooltip" }), h("slot", { key: '7779d237802e80dd2c7f84516bd1327438813ce2' }), h("div", { key: 'eb2fa33d5fdae1b8c41102380471c593b10e1826', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }