@watermarkinsights/ripple 5.23.0-alpha.0 → 5.23.0-alpha.10

package/dist/collection/components/charts/chartFunctions.js

@@ -708,3 +708,20 @@ export function findLargestNiceInterval(maxIntervals, total) {
     }
     return { numIntervals: 1, interval: total };
 }
+export function findNiceRoundNumber(value) {
+    // Given a value, find the next "nice" round number >= that value.
+    // Examples: 982 → 1000, 45 → 50, 1234 → 1500, 7 → 10
+    if (value <= 0)
+        return 0;
+    const niceValues = [1, 1.5, 2, 2.5, 3, 5, 10];
+    const magnitude = Math.pow(10, Math.floor(Math.log10(value)));
+    const normalized = value / magnitude;
+    // Find the smallest nice value that is >= the normalized value
+    for (const nice of niceValues) {
+        if (nice >= normalized) {
+            return nice * magnitude;
+        }
+    }
+    // Fallback: next order of magnitude
+    return 10 * magnitude;
+}

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: 'ccf8d6d35d85b8c902d1350aa74d75b479c43b3c', class: this.isKeying ? "user-is-keying" : "" }, h("div", { key: '1340158d01632a92f6ef8c0a5637bc28e5ce7ea5', ref: (el) => (this.popoverEl = el), popover: "manual", "aria-hidden": "true", class: "popover" }, h("h1", { key: 'afb65849a7b7ff30b78f8e78f74bc57824f6acd5', class: `title ${titleAffordance}` }, this.header), h("p", { key: '2f523aae12190a62184136fec74b50fed7436f4a', 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: '15568d7b0bb0dbc6884bf9baaea4b9ae715d33cf', 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() {
@@ -128,7 +128,7 @@ export class ChartPopover {
                 "mutable": false,
                 "complexType": {
                     "original": "ChartData",
-                    "resolved": "undefined | { [key: string]: any; label: string; amount: number; color?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; }",
+                    "resolved": "undefined | { [key: string]: any; barLegend: string; amount: number; color?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; }",
                     "references": {
                         "ChartData": {
                             "location": "import",
@@ -253,7 +253,7 @@ export class ChartPopover {
                 },
                 "complexType": {
                     "original": "ChartData",
-                    "resolved": "{ [key: string]: any; label: string; amount: number; color?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; }",
+                    "resolved": "{ [key: string]: any; barLegend: string; amount: number; color?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; }",
                     "references": {
                         "ChartData": {
                             "location": "import",
@@ -263,8 +263,8 @@ export class ChartPopover {
                     }
                 }
             }, {
-                "method": "intChartPopoverOpenChanged",
-                "name": "intChartPopoverOpenChanged",
+                "method": "intChartPopoverToggled",
+                "name": "intChartPopoverToggled",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -317,18 +317,6 @@ export class ChartPopover {
                 "target": "window",
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "wmUserIsTabbing",
-                "method": "toggleTabbingOn",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmUserIsNotKeying",
-                "method": "toggleTabbingOff",
-                "target": "window",
-                "capture": false,
-                "passive": false
             }, {
                 "name": "wmUserIsNotTabbing",
                 "method": "toggleTabbingOff",

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

@@ -861,17 +861,13 @@
 }
 
 priv-chart-popover-old {
-  --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-chart-popover-background);
+  background-color: var(--wmcolor-background);
   font-size: 0.875rem;
   text-align: left;
 }
@@ -927,7 +923,7 @@ priv-chart-popover-old.user-is-tabbing .button-text {
   padding-right: 0;
   height: auto;
   border: none;
-  background: var(--wmcolor-chart-popover-link-background);
+  background: var(--wmcolor-background-transparent);
   cursor: pointer;
   text-decoration: none;
   letter-spacing: 0;
@@ -935,7 +931,7 @@ priv-chart-popover-old.user-is-tabbing .button-text {
   text-align: initial;
   font-size: 0.875rem;
   font-weight: 700;
-  color: var(--wmcolor-chart-popover-link-text);
+  color: var(--wmcolor-link-text);
   line-height: normal;
 }
 .popover .popover-button .button-text {
@@ -946,6 +942,11 @@ priv-chart-popover-old.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;
 }
@@ -957,5 +958,6 @@ priv-chart-popover-old.user-is-tabbing .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/wm-chart-bar/wm-chart-bar.css

@@ -872,20 +872,11 @@
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: 3px;
 }
-.component-wrapper :has(.bar:focus-visible) priv-chart-popover:host {
-  --outline: 3px solid var(--wmcolor-interactive-focus);
-}
-.component-wrapper :has(.bar:focus-visible) priv-chart-popover:host .popover {
-  background-color: red !important;
-}
-.component-wrapper :has(.bar:focus-visible) priv-chart-popover:host button {
-  outline: 3px solid var(--wmcolor-interactive-focus);
-  outline-offset: 2px;
-}
 
 .chart-wrapper {
   display: flex;
   container: chart-measure/inline-size;
+  gap: 0.75rem;
 }
 
 .legend.--top {
@@ -902,6 +893,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
+  margin-bottom: 1.5rem;
 }
 .label .label-text {
   display: block;
@@ -916,12 +908,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;
@@ -935,19 +921,22 @@
   grid-template-columns: minmax(0, max-content) auto 1fr;
   grid-template-rows: 1fr;
   margin-right: 3rem;
+  row-gap: 0.75rem;
 }
 
 .chart-right-side {
   grid-column: 4;
   grid-row: 1/-1;
 }
+.chart-right-side:empty {
+  display: none;
+}
 
 .category-axis-label {
   max-width: 9.375rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-inline-end: 0.75rem;
 }
 @container chart-measure (max-width: 414px) {
   .category-axis-label {
@@ -976,7 +965,6 @@
   grid-column: 2/-1;
   row-gap: 0.75rem;
   align-items: center;
-  margin-block-end: 0.75rem;
   grid-template-rows: repeat(var(--row-count), minmax(1.5rem, 1fr)) 0;
 }
 
@@ -997,7 +985,7 @@
   grid-template-rows: subgrid;
   align-items: center;
 }
-.bar-area.user-is-keying .bar:focus {
+.bar-area.user-is-keying:not(.hide-focus-ring) .bar:focus {
   outline: none;
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: 3px;
@@ -1041,11 +1029,7 @@
   display: flex;
   align-items: center;
   cursor: pointer;
-}
-.bar:focus-visible {
   outline: none;
-  outline: 3px solid var(--wmcolor-interactive-focus);
-  outline-offset: 3px;
 }
 
 .value {
@@ -1062,7 +1046,6 @@
   display: flex;
   justify-content: space-between;
   font-size: 0.75rem;
-  margin-block-end: 0.75rem;
 }
 @container chart-measure (max-width: 414px) {
   .x-axis .tick:not(:first-of-type):not(:last-of-type) {

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
@@ -54,6 +58,9 @@ export class ChartBar {
             }
         });
         resizeObserver.observe(this.barAreaEl);
+        if (this.config && this.data) {
+            this.processData();
+        }
     }
     // #endregion component lifecycle
     ////////////////////////////////////////////////////////////
@@ -63,10 +70,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 +93,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";
@@ -88,7 +104,7 @@ export class ChartBar {
             var _a;
             const barColor = item.color || (isUniformConfigColor ? this.colorPalette[0] : (_a = this.colorPalette[index]) !== null && _a !== void 0 ? _a : defaultColor);
             return {
-                label: item.label,
+                barLegend: item.barLegend,
                 amount: item.amount,
                 gridPercent: (item.amount / this.gridMax) * 100,
                 displayValue: formatDisplayValue(item.amount, itemTotal, valueFormat),
@@ -102,7 +118,7 @@ export class ChartBar {
     }
     propogateExternalLegendData() {
         document.querySelectorAll("wm-chart-legend").forEach((legend) => {
-            if (legend.chartIds.includes(this.el.id)) {
+            if (legend.chartIds.split(" ").includes(this.el.id)) {
                 legend.processedData = this.processedData;
             }
         });
@@ -130,7 +146,9 @@ export class ChartBar {
         switch (ev.key) {
             case "ArrowDown":
                 ev.preventDefault();
-                this.focusBar(0);
+                if (this.el.shadowRoot.activeElement === this.componentWrapperEl) {
+                    this.focusBar(0);
+                }
                 break;
             case "Tab":
                 this.clearFocus();
@@ -148,12 +166,10 @@ export class ChartBar {
         switch (ev.key) {
             case "ArrowUp":
                 ev.preventDefault();
-                ev.stopPropagation();
                 this.focusBar(barIdx - 1);
                 break;
             case "ArrowDown":
                 ev.preventDefault();
-                ev.stopPropagation();
                 this.focusBar(barIdx + 1);
                 break;
             case "Enter":
@@ -170,21 +186,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,11 +229,11 @@ 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) {
-                this.highlightBar(this.processedData.findIndex((item) => { var _a; return item.label === ((_a = this.popoverEl.chartData) === null || _a === void 0 ? void 0 : _a.label); }));
+                this.highlightBar(this.processedData.findIndex((item) => { var _a; return item.barLegend === ((_a = this.popoverEl.chartData) === null || _a === void 0 ? void 0 : _a.barLegend); }));
             }
             else {
                 this.clearHighlights();
@@ -231,12 +241,17 @@ export class ChartBar {
         }, 30);
     }
     openPopover(clickedProcessedData, coords) {
-        let matchingChartData = this.data.find((item) => item.label === clickedProcessedData.label);
+        if (!this.data || !this.config) {
+            return;
+        }
+        let matchingChartData = this.data.find((item) => item.barLegend === clickedProcessedData.barLegend);
         if (matchingChartData) {
+            const popoverButtonText = matchingChartData.popoverButtonText || this.config.popoverButtonText || "";
+            this.barAreaEl.classList.toggle("hide-focus-ring", !!popoverButtonText);
             this.popoverEl.chartData = matchingChartData;
             this.popoverEl.header = matchingChartData.popoverTitle || this.config.popoverTitle || "";
             this.popoverEl.text = matchingChartData.popoverText || this.config.popoverText || "";
-            this.popoverEl.buttonText = matchingChartData.popoverButtonText || this.config.popoverButtonText || "";
+            this.popoverEl.buttonText = popoverButtonText;
             this.popoverEl.coords = coords;
             window.setTimeout(() => {
                 this.popoverEl.open = true;
@@ -262,7 +277,6 @@ export class ChartBar {
     clearFocus() {
         if (this.popoverEl.open) {
             this.popoverEl.open = false;
-            console.log("popover closed from clearFocus: ", this.popoverEl.open);
         }
         this.clearHighlights();
     }
@@ -271,14 +285,17 @@ export class ChartBar {
     // #region Rendering
     ////////////////////////////////////////////////////////////
     renderBarLegends() {
-        return this.processedData.map((item) => (h("div", { key: `legend-${item.label}`, class: "bar-legend" }, item.label)));
+        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) => {
             const barPercent = effectiveGridMax > 0 ? (item.amount / effectiveGridMax) * 100 : 0;
-            return (h("div", { key: `bar-${item.label}`, class: "bar-wrapper" }, h("div", { class: "bar", style: { width: `${barPercent}%`, backgroundColor: `var(--${item.color})` }, onClick: (ev) => this.handleBarClick(ev, idx), onKeyDown: (ev) => this.handleBarKeyDown(ev, idx), tabindex: "-1", "aria-label": `${item.label} ${item.displayValue}` }), h("span", { class: "value", style: { insetInlineStart: `${barPercent}%` } }, item.displayValue)));
+            return (h("div", { key: `bar-${item.barLegend}`, class: "bar-wrapper" }, h("div", { class: "bar", style: { width: `${barPercent}%`, backgroundColor: `var(--${item.color})` }, onClick: (ev) => this.handleBarClick(ev, idx), onKeyDown: (ev) => this.handleBarKeyDown(ev, idx), tabindex: "-1", "aria-label": `${item.barLegend} ${item.displayValue}` }), h("span", { class: "value", style: { insetInlineStart: `${barPercent}%` } }, item.displayValue)));
         });
     }
     renderXAxis() {
@@ -287,17 +304,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: 'af9ee18a445a32072133a4818a17543a9b642653' }, h("div", { key: '1ebd9b80b2546978f0819918abc7be5d71058315', 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: 'fe01168cac52e5dba3f05b7fc51c8ef581c1422c', class: "popover-wrapper" }, h("priv-chart-popover", { key: '84dc52e1c81f3a978e2b4369cb675ef3969038cf', ref: (el) => (this.popoverEl = el), onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) })), h("label", { key: '0190875870d6e90915038a49c26343ee85f57a20', id: "label", class: `label --${(_b = this.config) === null || _b === void 0 ? void 0 : _b.labelPosition}` }, h("span", { key: '1d6900d5a62cecea8afab6f3348f9ed7305bed9f', 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: '1c22408dd8d89d988202eaa31279026641325f03', class: "chart-wrapper" }, h("div", { key: '11e1c3558f052f2f77f8b8e3f29503ca69a5f93d', class: "chart-left-side" }, this.showLegend === "left" && this.renderLegend("vertical"), h("div", { key: '96852f416f193b403dd2a1d55f8ef0d9181779ab', class: "category-axis-label" }, h("span", { key: '4c25a14518ea40222b2b965a319624ea35f87a84', class: "axis-label-text" }, (_d = this.config) === null || _d === void 0 ? void 0 : _d.categoryAxisLabel))), h("div", { key: '7dcd802835da086e4860ee3f09e256bcb925b7ad', class: "chart-center" }, h("div", { key: 'bc8e2bfc65afea16e352b61f77bd9483271af04b', class: "chart-area", style: { "--row-count": rowCount.toString() } }, this.processedData && this.renderBarLegends(), h("div", { key: '5bcfb85a9d3f13843edd8a4242473e29ff8373e7', 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: '8d7ea9e756430f0fc18db7a2114adca5dd0b13a0', class: "value-axis-label" }, h("span", { key: '5c6d15a4dc479179de31ab267dcbacf50bd6a918', 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: '3cf6cf7f5574af218c366b00c3abfde6ad8d9204', class: "chart-right-side" }, this.showLegend === "right" && this.renderLegend("vertical"))), this.showLegend === "bottom" && this.renderLegend("horizontal"), renderInstructionsText())));
+        return (h(Host, { key: 'ad0daf61aaea04e629067a42e7902af1fa7793e1' }, h("div", { key: 'fd3bc76698192a61e72e9917cfcd359e3f602a73', ref: (el) => (this.componentWrapperEl = el), 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: 'eeb46c231b1d6d12617fd5e83791cec5bb79df50', class: "popover-wrapper" }, h("priv-chart-popover", { key: '77cceb950026b5b380d124bcc13a0c3afd14d4c0', 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: '7dce85fa4c245428136a69f22e4414327a4c57be', id: "label", class: "label" }, h("span", { key: 'f597b928ec6ed8bb79ec97639f4dcfd50f4eb0ee', 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: 'adcbae45a652a10a1c503f9e0f4206db8e21ecec', class: "chart-wrapper" }, h("div", { key: '621189bd233e10bd525c1ea1fd313f1086fbe075', class: "chart-left-side" }, this.showLegend === "left" && this.renderLegend("vertical"), h("div", { key: 'cc695fe64ea268e8dd7c534f27c21c4bfae0652e', class: "category-axis-label" }, h("span", { key: 'c43829bef211aa9b22d0ba572fbacb858e13153e', class: "axis-label-text" }, (_e = this.config) === null || _e === void 0 ? void 0 : _e.categoryAxisLabel))), h("div", { key: 'e2d015e2c849ff4adad1b77b6a2ffe2af0ec2a13', class: "chart-center" }, h("div", { key: 'c69b6ee334a3804af619514beb75ba70d660f59e', class: "chart-area", style: { "--row-count": rowCount.toString() } }, this.processedData && this.renderBarLegends(), h("div", { key: '32bbe7336101b67c563b8467d4adc435d01a4081', 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: 'f9ea11600bacd3de8745740a0e2344e141da677d', class: "value-axis-label" }, h("span", { key: '0b3d471ec3058861b85f710effcd4381bb872f77', class: "axis-label-text" }, (_g = this.config) === null || _g === void 0 ? void 0 : _g.valueAxisLabel)), this.gridVisible && this.renderXAxis()), h("div", { key: '5112a121dcc755eafa13e0ac5628a7562a4a6f9b', 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 +337,7 @@ export class ChartBar {
                 "mutable": false,
                 "complexType": {
                     "original": "ChartConfig",
-                    "resolved": "undefined | { label: string; labelPosition: \"top\" | \"none\"; labelWidth: string; 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; valueFormat?: \"amount\" | \"percentage\" | \"none\" | undefined; colors?: string | undefined; popoverTitle?: string | undefined; popoverText?: string | undefined; popoverButtonText?: string | undefined; }",
                     "references": {
                         "ChartConfig": {
                             "location": "import",
@@ -432,7 +451,7 @@ export class ChartBar {
     static get listeners() {
         return [{
                 "name": "wmLegendItemClick",
-                "method": "handleExternalLegendItemClick",
+                "method": "handleLegendItemClick",
                 "target": "document",
                 "capture": false,
                 "passive": false
@@ -448,18 +467,6 @@ 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",

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

@@ -7,7 +7,7 @@ export class ChartLegend {
         this.printMode = false;
     }
     handleChartBarHighlighted(ev) {
-        if (this.chartIds.includes(ev.target.id)) {
+        if (this.chartIds.split(" ").includes(ev.target.id)) {
             this.highlightLegendItem(ev.detail.idx);
         }
     }
@@ -26,10 +26,10 @@ export class ChartLegend {
         this.wmLegendItemClick.emit({ idx: idx });
     }
     renderLegendItems() {
-        return this.processedData.map((item, idx) => (h("div", { class: "legend-item", key: item.label, onClick: () => this.handleLegendItemClick(idx) }, h("div", { class: "color", style: { "--color": `var(--${item.color})` } }), h("div", { class: "label" }, item.label), h("span", { class: `print-value ${this.printMode ? "force-visible" : ""}` }, "(", item.printValue, ")"))));
+        return this.processedData.map((item, idx) => (h("div", { class: "legend-item", key: item.barLegend, onClick: () => this.handleLegendItemClick(idx) }, h("div", { class: "color", style: { "--color": `var(--${item.color})` } }), h("div", { class: "label" }, item.barLegend), h("span", { class: `print-value ${this.printMode ? "force-visible" : ""}` }, "(", item.printValue, ")"))));
     }
     render() {
-        return (h(Host, { key: 'c6cff1273bae9bd36f74c056bc7863a538e83e28' }, h("div", { key: '8538f637a18d8b7e9877f8a95ff6a31e8e7ee317', class: `legend-container --${this.orientation}` }, this.renderLegendItems())));
+        return (h(Host, { key: 'f8c8c56e0a679b0f8ba7cb3af815276cb766b2fc' }, h("div", { key: '29ab0bebb0e7489a822da43959f08ba5848344e4', class: `legend-container --${this.orientation}`, "aria-hidden": "true" }, this.renderLegendItems())));
     }
     static get is() { return "wm-chart-legend"; }
     static get encapsulation() { return "shadow"; }