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

package/dist/cjs/{app-globals-c5dc38bb.js → app-globals-090d85be.js}

@@ -2,7 +2,7 @@
 
 require('./index-bb947bd5.js');
 
-const version = "5.31.0-alpha.4";
+const version = "5.31.0-alpha.6";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length

package/dist/cjs/loader.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-bb947bd5.js');
-const appGlobals = require('./app-globals-c5dc38bb.js');
+const appGlobals = require('./app-globals-090d85be.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/cjs/ripple.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-bb947bd5.js');
-const appGlobals = require('./app-globals-c5dc38bb.js');
+const appGlobals = require('./app-globals-090d85be.js');
 
 /*
  Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com

package/dist/cjs/wm-action-menu_2.cjs.entry.js

@@ -475,7 +475,7 @@ const Menuitem = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'bba02970ceda1fe78026e8653bee4549b05698df', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, index.h("div", { key: '28b699ff8e174ce427ef1f31cab36ad1eed50ac7', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, index.h("div", { key: '8d93236530ede11b7fbdfecd75f98ba7b467240f', class: "main-text" }, this.icon && this.renderIcon(), this.el.textContent), this.description ? index.h("div", { class: "description" }, this.description) : "")));
+        return (index.h(index.Host, { key: '403704be13ca1f9c938e18a76f8442cbbaa4aab9', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, index.h("div", { key: 'c5818b2f8bd133a846abcd493f70c581b9d7113b', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, index.h("div", { key: '05f047e1ffad3376e1aaeffd060ed52a6a3e80bf', class: "main-text" }, this.icon && this.renderIcon(), this.el.textContent), this.description ? index.h("div", { class: "description" }, this.description) : "")));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/wm-chart-stack.cjs.entry.js

@@ -65,6 +65,9 @@ const ChartStack = class {
     get flattenedData() {
         return [...this.processedStacks.values()].flat();
     }
+    get segmentWrappers() {
+        return this.el.shadowRoot.querySelectorAll(".segment-wrapper");
+    }
     getPatternClass(item) {
         var _a;
         return this.isPatternMode ? ((_a = interfaces.patternKey[item.color]) !== null && _a !== void 0 ? _a : "") : "";
@@ -101,6 +104,14 @@ const ChartStack = class {
             this.propagateExternalLegendData();
             this.measurePending = true; // re-measure label fit after this change renders
         }
+        else {
+            // config or data was unset — clear derived state so the chart renders empty
+            this.processedStacks = new Map();
+            this.stackTotals = new Map();
+            this.legendData = [];
+            this.propagateExternalLegendData();
+            this.hasHiddenValues = false;
+        }
     }
     buildProcessedStacks() {
         if (!this.data) {
@@ -162,7 +173,6 @@ const ChartStack = class {
         return result;
     }
     countStackTotals(processedStacks) {
-        this.stackTotals = new Map();
         const stackTotals = new Map();
         processedStacks.forEach((segments, stackName) => {
             const stackTotal = segments.reduce((acc, s) => acc + s.amount, 0);
@@ -338,22 +348,20 @@ const ChartStack = class {
     highlightSegment(item) {
         var _a;
         const idx = this.flattenedData.indexOf(item);
-        const segmentWrappers = this.el.shadowRoot.querySelectorAll(".segment-wrapper");
+        const segmentWrappers = this.segmentWrappers;
         segmentWrappers.forEach((segmentWrapper) => segmentWrapper.classList.add("faded"));
         (_a = segmentWrappers[idx]) === null || _a === void 0 ? void 0 : _a.classList.remove("faded");
         const legendIdx = this.legendData.findIndex((legendItem) => legendItem.barLegend === item.barLegend);
         this.wmChartStackHighlighted.emit({ idx: legendIdx });
     }
     highlightSegmentsByLegend(legend) {
-        const segmentWrappers = this.el.shadowRoot.querySelectorAll(".segment-wrapper");
-        segmentWrappers.forEach((segmentWrapper, idx) => {
+        this.segmentWrappers.forEach((segmentWrapper, idx) => {
             var _a;
             segmentWrapper.classList.toggle("faded", ((_a = this.flattenedData[idx]) === null || _a === void 0 ? void 0 : _a.barLegend) !== legend);
         });
     }
     clearHighlights() {
-        const wrappers = this.el.shadowRoot.querySelectorAll(".segment-wrapper");
-        wrappers.forEach((wrapper) => wrapper.classList.remove("faded"));
+        this.segmentWrappers.forEach((segmentWrapper) => segmentWrapper.classList.remove("faded"));
         this.wmChartStackHighlighted.emit({ idx: -1 });
     }
     clearFocus() {
@@ -367,9 +375,8 @@ const ChartStack = class {
     // #region Responsiveness
     ////////////////////////////////////////////////////////////
     updateHiddenValues() {
-        const segmentWrappers = this.el.shadowRoot.querySelectorAll(".segment-wrapper");
         let anyHidden = false;
-        segmentWrappers.forEach((segmentWrapper) => {
+        this.segmentWrappers.forEach((segmentWrapper) => {
             const value = segmentWrapper.querySelector(".value");
             if (!value) {
                 return;
@@ -393,7 +400,7 @@ const ChartStack = class {
     }
     renderSegment(item, stackIdx, segmentIdx) {
         var _a, _b;
-        return (index.h("div", { class: "segment-wrapper", style: { "--segment-width": `${item.gridPercent}%` }, key: `${stackIdx}-${segmentIdx}` }, (this.isPrintMode || this.valueFormat === "percentage") && this.renderValue(item), index.h("div", { class: `segment ${this.getPatternClass(item)}`, style: { "--segment-color": `var(--${item.color})` }, tabindex: "-1", role: "img", "aria-label": `${item.groupName}, ${item.displayValue}. ${item.amount}/${(_b = this.stackTotals.get((_a = item.groupName) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : 0} ${item.barLegend}`, "data-stack-index": stackIdx, "data-segment-index": segmentIdx, onClick: (ev) => this.handleSegmentClick(ev, item), onKeyDown: (ev) => this.handleSegmentKeyDown(ev, stackIdx, segmentIdx) })));
+        return (index.h("div", { class: "segment-wrapper", style: { "--segment-width": `${item.gridPercent}%` }, key: `${stackIdx}-${segmentIdx}` }, (this.isPrintMode || this.valueFormat === "percentage") && this.renderValue(item), index.h("div", { class: `segment horizontal ${this.getPatternClass(item)}`, style: { "--segment-color": `var(--${item.color})` }, tabindex: "-1", role: "img", "aria-label": `${item.groupName}, ${item.displayValue}. ${item.amount}/${(_b = this.stackTotals.get((_a = item.groupName) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : 0} ${item.barLegend}`, "data-stack-index": stackIdx, "data-segment-index": segmentIdx, onClick: (ev) => this.handleSegmentClick(ev, item), onKeyDown: (ev) => this.handleSegmentKeyDown(ev, stackIdx, segmentIdx) })));
     }
     renderStacks() {
         const stackNames = [...this.processedStacks.keys()];
@@ -414,7 +421,7 @@ const ChartStack = class {
         const total = (_a = this.stackTotals.get(stackName)) !== null && _a !== void 0 ? _a : 0;
         return (index.h("div", { class: "print-table", "aria-hidden": "true" }, segments.map((item) => {
             var _a, _b, _c;
-            return (index.h("div", { class: "print-row", key: `row-${stackName}-${item.barLegend}` }, index.h("div", { class: "print-legend" }, index.h("div", { class: `swatch ${this.getPatternClass(item)}`, style: { "--segment-color": `var(--${item.color})` } }), index.h("span", { class: "print-legend-name" }, item.barLegend)), index.h("span", { class: "print-percent" }, item.displayValue), index.h("span", { class: "print-fraction" }, item.amount, "/", total), index.h("span", { class: "print-text" }, (_c = (_a = item.popoverText) !== null && _a !== void 0 ? _a : (_b = this.config) === null || _b === void 0 ? void 0 : _b.popoverText) !== null && _c !== void 0 ? _c : "")));
+            return (index.h("div", { class: "print-row", key: `row-${stackName}-${item.barLegend}` }, index.h("div", { class: "print-legend" }, index.h("div", { class: `swatch horizontal ${this.getPatternClass(item)}`, style: { "--segment-color": `var(--${item.color})` } }), index.h("span", { class: "print-legend-name" }, item.barLegend)), index.h("span", { class: "print-percent" }, item.displayValue), index.h("span", { class: "print-fraction" }, item.amount, "/", total), index.h("span", { class: "print-text" }, (_c = (_a = item.popoverText) !== null && _a !== void 0 ? _a : (_b = this.config) === null || _b === void 0 ? void 0 : _b.popoverText) !== null && _c !== void 0 ? _c : "")));
         })));
     }
     renderLegend(orientation) {
@@ -426,7 +433,7 @@ const ChartStack = class {
     render() {
         var _a, _b, _c, _d;
         const gridLineRow = this.processedStacks.size * (this.isPrintMode ? 2 : 1) + 1;
-        return (index.h(index.Host, { key: '08a9286be7f0a7998f9c3123fe3a912861dceefb' }, index.h("div", { key: 'e3334b5a9f9068f18f3abc83cd9b794bdec54fad', class: "popover-wrapper" }, index.h("priv-chart-popover", { key: '600b4f64af2d9c5dd255de169734ef2bb28ae92c', ref: (el) => (this.popoverEl = el), onIntChartPopoverToggled: (ev) => this.handlePopoverToggled(ev) })), index.h("div", { key: '89f0d279285152028135d1fe549dc0a97efca2ac', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.isPrintMode ? "print-mode" : ""} ${this.isPatternMode ? "pattern-mode" : ""}`, tabindex: "0", role: "application", onKeyDown: (ev) => this.handleChartKeyDown(ev), onBlur: (ev) => this.handleComponentBlur(ev), "aria-roledescription": intl.chartMessages.interactiveChart, "aria-describedby": "chart-instructions", "aria-label": (_a = this.config) === null || _a === void 0 ? void 0 : _a.label }, ((_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.showLabel) !== null && _c !== void 0 ? _c : true) && (index.h("label", { key: 'a4916662c19423b550826466d274cf45ab756999', id: "label", class: "label" }, index.h("span", { key: 'e0fc771b28dbe8939a2e646da2efd61944b5c568', class: "label-text" }, (_d = this.config) === null || _d === void 0 ? void 0 : _d.label), this.subinfoText && index.h("span", { key: 'a86d83bd510e93f218172cc12656c40e6504f92d', class: "subinfo" }, this.subinfoText))), this.showLegend === "top" && this.renderLegend("horizontal"), index.h("div", { key: '1f763b406dcf30b8ab609ef2572d3ad594df1cd0', class: "chart-body" }, this.showLegend === "left" && this.renderLegend("vertical"), index.h("div", { key: 'a698d4cee5d253c756430243c80c720cb2d024b0', class: `stacks ${this.isKeying ? "user-is-keying" : ""} ${this.showGrid ? "show-grid" : ""} ${this.isSingleStack ? "single-stack" : ""}`, ref: (el) => (this.stacksEl = el), style: { "--grid-line-row": `${gridLineRow}` } }, this.showGrid && index.h("div", { key: 'a400672fe5a456b05630b9901fcae8be446bb787', class: "vertical-grid-line" }), this.renderStacks(), this.showGrid && (index.h("div", { key: '595f7c469fc14c48042835ed8449c0ffc963b36b', class: "x-axis" }, index.h("div", { key: 'fe22b1d101b1bc1eacd0780ed36af0f01fcdf66a', class: "x-axis-line" }), index.h("div", { key: '7798302e6f75cda9ae298dce265fa75888dd7d74', class: "x-axis-ticks" }, index.h("span", { key: '3da23e60bb716592c585626f2aaa2ebbb90c0108', class: "tick zero" }, "0%"), index.h("span", { key: 'bc691c467c51cb11ff8548f3f984bfdc1fb18a33', class: "tick end" }, "100%"))))), this.showLegend === "right" && this.renderLegend("vertical")), this.showLegend === "bottom" && this.renderLegend("horizontal"), !this.isPrintMode && (index.h("div", { key: '90d3793c69f6d080bd6ced9713ae052c1ebaa58c', class: `hidden-values-warning ${this.hasHiddenValues ? "" : "hidden"}` }, intl.stackChartMessages.hiddenValues)), chartFunctions.renderInstructionsText())));
+        return (index.h(index.Host, { key: 'a02be9b6a7e8a570d12fc471ab0899c1d6bff609' }, index.h("div", { key: '27a456aca42c248c767a3d44d4fca43e27342113', class: "popover-wrapper" }, index.h("priv-chart-popover", { key: '710e6b9ed574358949d86736991a94ff23033e1b', ref: (el) => (this.popoverEl = el), onIntChartPopoverToggled: (ev) => this.handlePopoverToggled(ev) })), index.h("div", { key: 'c696620647c3a4bf69b8cbfdfd88fe0d56c0e9e4', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.isPrintMode ? "print-mode" : ""} ${this.isPatternMode ? "pattern-mode" : ""}`, tabindex: "0", role: "application", onKeyDown: (ev) => this.handleChartKeyDown(ev), onBlur: (ev) => this.handleComponentBlur(ev), "aria-roledescription": intl.chartMessages.interactiveChart, "aria-describedby": "chart-instructions", "aria-label": (_a = this.config) === null || _a === void 0 ? void 0 : _a.label }, ((_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.showLabel) !== null && _c !== void 0 ? _c : true) && (index.h("label", { key: '7bcc1cdcf20e17af7078d5ddec312accafb0ee2a', id: "label", class: "label" }, index.h("span", { key: '4b1e5090ccbaf485a5efd543575056f77ecc3af8', class: "label-text" }, (_d = this.config) === null || _d === void 0 ? void 0 : _d.label), this.subinfoText && index.h("span", { key: '4eba44204c943e58e16a0edd2787315d44ae2f23', class: "subinfo" }, this.subinfoText))), this.showLegend === "top" && this.renderLegend("horizontal"), index.h("div", { key: 'c11932585eb98bc5b12ead052e6965d954d28b0f', class: "chart-body" }, this.showLegend === "left" && this.renderLegend("vertical"), index.h("div", { key: '772c6c62d2ff5ef996ca6e72bd18f174a5357dc3', class: `stacks ${this.isKeying ? "user-is-keying" : ""} ${this.showGrid ? "show-grid" : ""} ${this.isSingleStack ? "single-stack" : ""}`, ref: (el) => (this.stacksEl = el), style: { "--grid-line-row": `${gridLineRow}` } }, this.showGrid && index.h("div", { key: '85170b43d60832f82fca6588c39e0ccbcc00cede', class: "vertical-grid-line" }), this.renderStacks(), this.showGrid && (index.h("div", { key: 'ac782af53cf46f6797bb1a564fdbbc221fd8ea43', class: "x-axis" }, index.h("div", { key: 'f6175cb9012164eda83c920edc9746c25753bc1e', class: "x-axis-line" }), index.h("div", { key: 'd218b9ce3d734dd6e218f16d944e93199ac52580', class: "x-axis-ticks" }, index.h("span", { key: 'eff3d60abf1a6ca2cbaf0247996d891d3cbfadad', class: "tick zero" }, "0%"), index.h("span", { key: '8767b56809d269272bdc1ef9ccd4d194e6c79070', class: "tick end" }, "100%"))))), this.showLegend === "right" && this.renderLegend("vertical")), this.showLegend === "bottom" && this.renderLegend("horizontal"), !this.isPrintMode && (index.h("div", { key: '1d9a5524f1669987d19daa5d5fff5dcde93fe4ba', class: `hidden-values-warning ${this.hasHiddenValues ? "" : "hidden"}` }, intl.stackChartMessages.hiddenValues)), chartFunctions.renderInstructionsText())));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

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

@@ -9,6 +9,9 @@ import { isElOrChild } from "../../../global/functions";
  * Data and configuration are set via JavaScript properties (`chart.config` and `chart.data`) — not
  * HTML attributes.
  *
+ * @displayName Stack Chart
+ * @category Data Visualization
+ *
  * @keyboardInteraction
  * - **Tab**: Enters the chart wrapper.
  * - **Arrow Down / Right**: Focuses the first segment.
@@ -48,6 +51,10 @@ import { isElOrChild } from "../../../global/functions";
  *   ];
  * </script>
  *
+ * @example {react} Single stack
+ * <WmChartStack ref={chartRef} />
+ * // In useEffect: chartRef.current.config = {...}; chartRef.current.data = [...];
+ *
  * @example {html} Grouped (multiple stacks)
  * <wm-chart-stack id="status-by-requirement"></wm-chart-stack>
  * <script>
@@ -61,7 +68,7 @@ import { isElOrChild } from "../../../global/functions";
  *   ];
  * </script>
  *
- * @example {react} Stacked bar chart
+ * @example {react} Grouped (multiple stacks)
  * <WmChartStack ref={chartRef} />
  * // In useEffect: chartRef.current.config = {...}; chartRef.current.data = [...];
  */
@@ -117,6 +124,9 @@ export class ChartStack {
     get flattenedData() {
         return [...this.processedStacks.values()].flat();
     }
+    get segmentWrappers() {
+        return this.el.shadowRoot.querySelectorAll(".segment-wrapper");
+    }
     getPatternClass(item) {
         var _a;
         return this.isPatternMode ? ((_a = patternKey[item.color]) !== null && _a !== void 0 ? _a : "") : "";
@@ -153,6 +163,14 @@ export class ChartStack {
             this.propagateExternalLegendData();
             this.measurePending = true; // re-measure label fit after this change renders
         }
+        else {
+            // config or data was unset — clear derived state so the chart renders empty
+            this.processedStacks = new Map();
+            this.stackTotals = new Map();
+            this.legendData = [];
+            this.propagateExternalLegendData();
+            this.hasHiddenValues = false;
+        }
     }
     buildProcessedStacks() {
         if (!this.data) {
@@ -214,7 +232,6 @@ export class ChartStack {
         return result;
     }
     countStackTotals(processedStacks) {
-        this.stackTotals = new Map();
         const stackTotals = new Map();
         processedStacks.forEach((segments, stackName) => {
             const stackTotal = segments.reduce((acc, s) => acc + s.amount, 0);
@@ -390,22 +407,20 @@ export class ChartStack {
     highlightSegment(item) {
         var _a;
         const idx = this.flattenedData.indexOf(item);
-        const segmentWrappers = this.el.shadowRoot.querySelectorAll(".segment-wrapper");
+        const segmentWrappers = this.segmentWrappers;
         segmentWrappers.forEach((segmentWrapper) => segmentWrapper.classList.add("faded"));
         (_a = segmentWrappers[idx]) === null || _a === void 0 ? void 0 : _a.classList.remove("faded");
         const legendIdx = this.legendData.findIndex((legendItem) => legendItem.barLegend === item.barLegend);
         this.wmChartStackHighlighted.emit({ idx: legendIdx });
     }
     highlightSegmentsByLegend(legend) {
-        const segmentWrappers = this.el.shadowRoot.querySelectorAll(".segment-wrapper");
-        segmentWrappers.forEach((segmentWrapper, idx) => {
+        this.segmentWrappers.forEach((segmentWrapper, idx) => {
             var _a;
             segmentWrapper.classList.toggle("faded", ((_a = this.flattenedData[idx]) === null || _a === void 0 ? void 0 : _a.barLegend) !== legend);
         });
     }
     clearHighlights() {
-        const wrappers = this.el.shadowRoot.querySelectorAll(".segment-wrapper");
-        wrappers.forEach((wrapper) => wrapper.classList.remove("faded"));
+        this.segmentWrappers.forEach((segmentWrapper) => segmentWrapper.classList.remove("faded"));
         this.wmChartStackHighlighted.emit({ idx: -1 });
     }
     clearFocus() {
@@ -419,9 +434,8 @@ export class ChartStack {
     // #region Responsiveness
     ////////////////////////////////////////////////////////////
     updateHiddenValues() {
-        const segmentWrappers = this.el.shadowRoot.querySelectorAll(".segment-wrapper");
         let anyHidden = false;
-        segmentWrappers.forEach((segmentWrapper) => {
+        this.segmentWrappers.forEach((segmentWrapper) => {
             const value = segmentWrapper.querySelector(".value");
             if (!value) {
                 return;
@@ -445,7 +459,7 @@ export class ChartStack {
     }
     renderSegment(item, stackIdx, segmentIdx) {
         var _a, _b;
-        return (h("div", { class: "segment-wrapper", style: { "--segment-width": `${item.gridPercent}%` }, key: `${stackIdx}-${segmentIdx}` }, (this.isPrintMode || this.valueFormat === "percentage") && this.renderValue(item), h("div", { class: `segment ${this.getPatternClass(item)}`, style: { "--segment-color": `var(--${item.color})` }, tabindex: "-1", role: "img", "aria-label": `${item.groupName}, ${item.displayValue}. ${item.amount}/${(_b = this.stackTotals.get((_a = item.groupName) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : 0} ${item.barLegend}`, "data-stack-index": stackIdx, "data-segment-index": segmentIdx, onClick: (ev) => this.handleSegmentClick(ev, item), onKeyDown: (ev) => this.handleSegmentKeyDown(ev, stackIdx, segmentIdx) })));
+        return (h("div", { class: "segment-wrapper", style: { "--segment-width": `${item.gridPercent}%` }, key: `${stackIdx}-${segmentIdx}` }, (this.isPrintMode || this.valueFormat === "percentage") && this.renderValue(item), h("div", { class: `segment horizontal ${this.getPatternClass(item)}`, style: { "--segment-color": `var(--${item.color})` }, tabindex: "-1", role: "img", "aria-label": `${item.groupName}, ${item.displayValue}. ${item.amount}/${(_b = this.stackTotals.get((_a = item.groupName) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : 0} ${item.barLegend}`, "data-stack-index": stackIdx, "data-segment-index": segmentIdx, onClick: (ev) => this.handleSegmentClick(ev, item), onKeyDown: (ev) => this.handleSegmentKeyDown(ev, stackIdx, segmentIdx) })));
     }
     renderStacks() {
         const stackNames = [...this.processedStacks.keys()];
@@ -466,7 +480,7 @@ export class ChartStack {
         const total = (_a = this.stackTotals.get(stackName)) !== null && _a !== void 0 ? _a : 0;
         return (h("div", { class: "print-table", "aria-hidden": "true" }, segments.map((item) => {
             var _a, _b, _c;
-            return (h("div", { class: "print-row", key: `row-${stackName}-${item.barLegend}` }, h("div", { class: "print-legend" }, h("div", { class: `swatch ${this.getPatternClass(item)}`, style: { "--segment-color": `var(--${item.color})` } }), h("span", { class: "print-legend-name" }, item.barLegend)), h("span", { class: "print-percent" }, item.displayValue), h("span", { class: "print-fraction" }, item.amount, "/", total), h("span", { class: "print-text" }, (_c = (_a = item.popoverText) !== null && _a !== void 0 ? _a : (_b = this.config) === null || _b === void 0 ? void 0 : _b.popoverText) !== null && _c !== void 0 ? _c : "")));
+            return (h("div", { class: "print-row", key: `row-${stackName}-${item.barLegend}` }, h("div", { class: "print-legend" }, h("div", { class: `swatch horizontal ${this.getPatternClass(item)}`, style: { "--segment-color": `var(--${item.color})` } }), h("span", { class: "print-legend-name" }, item.barLegend)), h("span", { class: "print-percent" }, item.displayValue), h("span", { class: "print-fraction" }, item.amount, "/", total), h("span", { class: "print-text" }, (_c = (_a = item.popoverText) !== null && _a !== void 0 ? _a : (_b = this.config) === null || _b === void 0 ? void 0 : _b.popoverText) !== null && _c !== void 0 ? _c : "")));
         })));
     }
     renderLegend(orientation) {
@@ -478,7 +492,7 @@ export class ChartStack {
     render() {
         var _a, _b, _c, _d;
         const gridLineRow = this.processedStacks.size * (this.isPrintMode ? 2 : 1) + 1;
-        return (h(Host, { key: '08a9286be7f0a7998f9c3123fe3a912861dceefb' }, h("div", { key: 'e3334b5a9f9068f18f3abc83cd9b794bdec54fad', class: "popover-wrapper" }, h("priv-chart-popover", { key: '600b4f64af2d9c5dd255de169734ef2bb28ae92c', ref: (el) => (this.popoverEl = el), onIntChartPopoverToggled: (ev) => this.handlePopoverToggled(ev) })), h("div", { key: '89f0d279285152028135d1fe549dc0a97efca2ac', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.isPrintMode ? "print-mode" : ""} ${this.isPatternMode ? "pattern-mode" : ""}`, 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 }, ((_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.showLabel) !== null && _c !== void 0 ? _c : true) && (h("label", { key: 'a4916662c19423b550826466d274cf45ab756999', id: "label", class: "label" }, h("span", { key: 'e0fc771b28dbe8939a2e646da2efd61944b5c568', class: "label-text" }, (_d = this.config) === null || _d === void 0 ? void 0 : _d.label), this.subinfoText && h("span", { key: 'a86d83bd510e93f218172cc12656c40e6504f92d', class: "subinfo" }, this.subinfoText))), this.showLegend === "top" && this.renderLegend("horizontal"), h("div", { key: '1f763b406dcf30b8ab609ef2572d3ad594df1cd0', class: "chart-body" }, this.showLegend === "left" && this.renderLegend("vertical"), h("div", { key: 'a698d4cee5d253c756430243c80c720cb2d024b0', class: `stacks ${this.isKeying ? "user-is-keying" : ""} ${this.showGrid ? "show-grid" : ""} ${this.isSingleStack ? "single-stack" : ""}`, ref: (el) => (this.stacksEl = el), style: { "--grid-line-row": `${gridLineRow}` } }, this.showGrid && h("div", { key: 'a400672fe5a456b05630b9901fcae8be446bb787', class: "vertical-grid-line" }), this.renderStacks(), this.showGrid && (h("div", { key: '595f7c469fc14c48042835ed8449c0ffc963b36b', class: "x-axis" }, h("div", { key: 'fe22b1d101b1bc1eacd0780ed36af0f01fcdf66a', class: "x-axis-line" }), h("div", { key: '7798302e6f75cda9ae298dce265fa75888dd7d74', class: "x-axis-ticks" }, h("span", { key: '3da23e60bb716592c585626f2aaa2ebbb90c0108', class: "tick zero" }, "0%"), h("span", { key: 'bc691c467c51cb11ff8548f3f984bfdc1fb18a33', class: "tick end" }, "100%"))))), this.showLegend === "right" && this.renderLegend("vertical")), this.showLegend === "bottom" && this.renderLegend("horizontal"), !this.isPrintMode && (h("div", { key: '90d3793c69f6d080bd6ced9713ae052c1ebaa58c', class: `hidden-values-warning ${this.hasHiddenValues ? "" : "hidden"}` }, stackChartMessages.hiddenValues)), renderInstructionsText())));
+        return (h(Host, { key: 'a02be9b6a7e8a570d12fc471ab0899c1d6bff609' }, h("div", { key: '27a456aca42c248c767a3d44d4fca43e27342113', class: "popover-wrapper" }, h("priv-chart-popover", { key: '710e6b9ed574358949d86736991a94ff23033e1b', ref: (el) => (this.popoverEl = el), onIntChartPopoverToggled: (ev) => this.handlePopoverToggled(ev) })), h("div", { key: 'c696620647c3a4bf69b8cbfdfd88fe0d56c0e9e4', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.isPrintMode ? "print-mode" : ""} ${this.isPatternMode ? "pattern-mode" : ""}`, 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 }, ((_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.showLabel) !== null && _c !== void 0 ? _c : true) && (h("label", { key: '7bcc1cdcf20e17af7078d5ddec312accafb0ee2a', id: "label", class: "label" }, h("span", { key: '4b1e5090ccbaf485a5efd543575056f77ecc3af8', class: "label-text" }, (_d = this.config) === null || _d === void 0 ? void 0 : _d.label), this.subinfoText && h("span", { key: '4eba44204c943e58e16a0edd2787315d44ae2f23', class: "subinfo" }, this.subinfoText))), this.showLegend === "top" && this.renderLegend("horizontal"), h("div", { key: 'c11932585eb98bc5b12ead052e6965d954d28b0f', class: "chart-body" }, this.showLegend === "left" && this.renderLegend("vertical"), h("div", { key: '772c6c62d2ff5ef996ca6e72bd18f174a5357dc3', class: `stacks ${this.isKeying ? "user-is-keying" : ""} ${this.showGrid ? "show-grid" : ""} ${this.isSingleStack ? "single-stack" : ""}`, ref: (el) => (this.stacksEl = el), style: { "--grid-line-row": `${gridLineRow}` } }, this.showGrid && h("div", { key: '85170b43d60832f82fca6588c39e0ccbcc00cede', class: "vertical-grid-line" }), this.renderStacks(), this.showGrid && (h("div", { key: 'ac782af53cf46f6797bb1a564fdbbc221fd8ea43', class: "x-axis" }, h("div", { key: 'f6175cb9012164eda83c920edc9746c25753bc1e', class: "x-axis-line" }), h("div", { key: 'd218b9ce3d734dd6e218f16d944e93199ac52580', class: "x-axis-ticks" }, h("span", { key: 'eff3d60abf1a6ca2cbaf0247996d891d3cbfadad', class: "tick zero" }, "0%"), h("span", { key: '8767b56809d269272bdc1ef9ccd4d194e6c79070', class: "tick end" }, "100%"))))), this.showLegend === "right" && this.renderLegend("vertical")), this.showLegend === "bottom" && this.renderLegend("horizontal"), !this.isPrintMode && (h("div", { key: '1d9a5524f1669987d19daa5d5fff5dcde93fe4ba', class: `hidden-values-warning ${this.hasHiddenValues ? "" : "hidden"}` }, stackChartMessages.hiddenValues)), renderInstructionsText())));
     }
     static get is() { return "wm-chart-stack"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-menuitem/wm-menuitem.js

@@ -8,9 +8,6 @@ import { getIconCodeFromName } from "../../global/interfaces";
  *
  * @accessibility
  * - Rendered with `role="menuitem"` and `aria-disabled` when disabled.
- * - Keyboard events (Arrow keys, Home, End, Tab, Escape, character keys) are captured and
- *   re-emitted as custom events consumed by the parent wm-action-menu to manage focus and
- *   menu state — do not listen to these events directly in application code.
  *
  * @usageNotes
  * - `description` is limited to 100 characters and is incompatible with `icon`.
@@ -137,7 +134,7 @@ export class Menuitem {
         }
     }
     render() {
-        return (h(Host, { key: 'bba02970ceda1fe78026e8653bee4549b05698df', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '28b699ff8e174ce427ef1f31cab36ad1eed50ac7', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '8d93236530ede11b7fbdfecd75f98ba7b467240f', class: "main-text" }, this.icon && this.renderIcon(), this.el.textContent), this.description ? h("div", { class: "description" }, this.description) : "")));
+        return (h(Host, { key: '403704be13ca1f9c938e18a76f8442cbbaa4aab9', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: 'c5818b2f8bd133a846abcd493f70c581b9d7113b', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '05f047e1ffad3376e1aaeffd060ed52a6a3e80bf', class: "main-text" }, this.icon && this.renderIcon(), this.el.textContent), this.description ? h("div", { class: "description" }, this.description) : "")));
     }
     static get is() { return "wm-menuitem"; }
     static get encapsulation() { return "shadow"; }
@@ -252,7 +249,10 @@ export class Menuitem {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -272,7 +272,10 @@ export class Menuitem {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -292,7 +295,10 @@ export class Menuitem {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -312,7 +318,10 @@ export class Menuitem {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -332,7 +341,10 @@ export class Menuitem {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -352,7 +364,10 @@ export class Menuitem {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -372,7 +387,10 @@ export class Menuitem {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -392,7 +410,10 @@ export class Menuitem {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -412,7 +433,10 @@ export class Menuitem {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -427,7 +451,10 @@ export class Menuitem {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
                     "text": ""
                 },
                 "complexType": {

package/dist/collection/dev/chart-stack.js

@@ -106,6 +106,16 @@ document.getElementById("pattern-mode-checkbox").addEventListener("change", (ev)
 const dataJsonInput = document.getElementById("data-json-input");
 
 function setChartData(data) {
+  // Restore a config if it was cleared (e.g. via the Unset preset) so the chart re-renders.
+  if (!stackChart1.config) {
+    stackChart1.config = {
+      label: "Year 1 Cohort Submission Status by Requirement",
+      subinfo: "Progress of completion of licensure requirements",
+      colors: "semantic",
+      showLegend: "top",
+      valueFormat: "percentage",
+    };
+  }
   stackChart1.data = data;
   if (dataJsonInput) {
     dataJsonInput.value = JSON.stringify(data, null, 2);
@@ -178,6 +188,15 @@ document.getElementById("preset-popover").addEventListener("click", () => {
   ]);
 });
 
+// Preset: Unset config and data (test the data -> no data transition)
+document.getElementById("preset-unset").addEventListener("click", () => {
+  stackChart1.config = undefined;
+  stackChart1.data = undefined;
+  if (dataJsonInput) {
+    dataJsonInput.value = "";
+  }
+});
+
 // Initialize JSON textarea with current data after chart loads
 setTimeout(() => {
   if (stackChart1 && stackChart1.data && dataJsonInput) {