@watermarkinsights/ripple 5.31.0-alpha.5 → 5.31.0-alpha.7

package/dist/cjs/{app-globals-77259a15.js → app-globals-f7da32e6.js}

@@ -2,7 +2,7 @@
 
 require('./index-bb947bd5.js');
 
-const version = "5.31.0-alpha.5";
+const version = "5.31.0-alpha.7";
 
 // 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-77259a15.js');
+const appGlobals = require('./app-globals-f7da32e6.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-77259a15.js');
+const appGlobals = require('./app-globals-f7da32e6.js');
 
 /*
  Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com

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/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) {

package/dist/docs/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-07-01T17:02:26",
+  "timestamp": "2026-07-01T21:46:53",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.21.0",
@@ -2894,6 +2894,14 @@
       "tag": "wm-chart-stack",
       "docs": "Renders a horizontal stacked bar chart: each stack's segments are sized as a percentage of\nthat stack's total. Supports any number of stacks and segments, each occupying their own row.\nData and configuration are set via JavaScript properties (`chart.config` and `chart.data`) — not\nHTML attributes.",
       "docsTags": [
+        {
+          "name": "displayName",
+          "text": "Stack Chart"
+        },
+        {
+          "name": "category",
+          "text": "Data Visualization"
+        },
         {
           "name": "keyboardInteraction",
           "text": "- **Tab**: Enters the chart wrapper.\n- **Arrow Down / Right**: Focuses the first segment.\n- **Arrow Left / Right**: Moves to the previous / next segment within the stack, wrapping at the ends.\n- **Arrow Up / Down**: Moves to the previous / next stack (focusing its first segment), wrapping at the ends.\n- **Enter**: Activates the popover button when the popover is open.\n- **Escape**: Closes the open popover.\n- **Tab** (from within): Exits the chart and clears focus."
@@ -2910,13 +2918,17 @@
           "name": "example",
           "text": "{html} Single stack\n<wm-chart-stack id=\"submission-status\"></wm-chart-stack>\n<script>\nconst chart = document.querySelector('#submission-status');\nchart.config = { label: 'Submission status', colors: 'semantic', showLegend: 'top' };\nchart.data = [\n{ stackName: 'Status', legend: 'Not Submitted', amount: 2 },\n{ stackName: 'Status', legend: 'Awaiting Review', amount: 4 },\n{ stackName: 'Status', legend: 'Met', amount: 10 },\n{ stackName: 'Status', legend: 'Not Met', amount: 4 },\n];\n</script>"
         },
+        {
+          "name": "example",
+          "text": "{react} Single stack\n<WmChartStack ref={chartRef} />\n// In useEffect: chartRef.current.config = {...}; chartRef.current.data = [...];"
+        },
         {
           "name": "example",
           "text": "{html} Grouped (multiple stacks)\n<wm-chart-stack id=\"status-by-requirement\"></wm-chart-stack>\n<script>\nconst chart = document.querySelector('#status-by-requirement');\nchart.config = { label: 'Status by requirement', colors: 'semantic', showLegend: 'top' };\nchart.data = [\n{ stackName: 'Requirement 01', legend: 'Met', amount: 12 },\n{ stackName: 'Requirement 01', legend: 'Not Met', amount: 12 },\n{ stackName: 'Requirement 02', legend: 'Met', amount: 33 },\n{ stackName: 'Requirement 02', legend: 'Not Met', amount: 67 },\n];\n</script>"
         },
         {
           "name": "example",
-          "text": "{react} Stacked bar chart\n<WmChartStack ref={chartRef} />\n// In useEffect: chartRef.current.config = {...}; chartRef.current.data = [...];"
+          "text": "{react} Grouped (multiple stacks)\n<WmChartStack ref={chartRef} />\n// In useEffect: chartRef.current.config = {...}; chartRef.current.data = [...];"
         }
       ],
       "usage": {},

package/dist/docs/skill/index.md

@@ -16,6 +16,7 @@
 | **Column Chart** | `wm-chart-column` | `wm-chart-column.md` | Data Visualization |
 | **Line Chart** | `wm-line-chart` | `wm-line-chart.md` | Data Visualization |
 | **Progress Monitor** | `wm-progress-monitor` | `wm-progress-monitor.md` | Data Visualization |
+| **Stack Chart** | `wm-chart-stack` | `wm-chart-stack.md` | Data Visualization |
 | **Date Range** | `wm-date-range` | `wm-date-range.md` | Form Inputs |
 | **Datepicker** | `wm-datepicker` | `wm-datepicker.md` | Form Inputs |
 | **File List** | `wm-file-list` | `wm-file-list.md` | Form Inputs |

package/dist/docs/skill/wm-action-menu.md

@@ -46,8 +46,8 @@ one or more wm-menuitem children.
 - _(default)_ -- One or more wm-menuitem elements.
 
 **Events:**
-- `menuLoaded` _(deprecated: Use wmActionMenuLoaded instead.)_
-- `wmActionMenuLoaded`
+- `menuLoaded` -- Fires when the component finishes loading. _(deprecated: Use wmActionMenuLoaded instead.)_
+- `wmActionMenuLoaded` -- Fires when the component finishes loading and child wm-menuitem elements are ready.
 
 **Accessibility:**
 

package/dist/docs/skill/wm-chart-legend.md

@@ -27,9 +27,11 @@ charts automatically. _(default: `""`)_
 legend -- suitable for printed output. _(default: `false`)_
 
 **Events:**
-- `wmLegendItemClick` Detail: `{{ idx: number }} idx -- zero-based index of the clicked legend item, or
+- `wmLegendItemClick` -- Fires when the user clicks a legend item. The associated chart highlights
+the corresponding bar(s) and fades all others. Detail: `{{ idx: number }} idx -- zero-based index of the clicked legend item, or
 `-1` to clear all highlights.`
-- `wmLegendItemHover` Detail: `{{ idx: number }} idx -- zero-based index of the hovered legend item, or
+- `wmLegendItemHover` -- Fires when the user hovers over a legend item. The associated chart
+highlights the corresponding bar(s) and fades all others. Detail: `{{ idx: number }} idx -- zero-based index of the hovered legend item, or
 `-1` to clear all highlights.`
 
 **Code example:**

package/dist/docs/skill/wm-chart-stack.md

@@ -90,7 +90,7 @@ chart.data = [
 </script>
 ```
 
-_Stacked bar chart_
+_Single stack_
 
 ```react
 <WmChartStack ref={chartRef} />
@@ -111,4 +111,11 @@ chart.data = [
 { stackName: 'Requirement 02', legend: 'Not Met', amount: 67 },
 ];
 </script>
+```
+
+_Grouped (multiple stacks)_
+
+```react
+<WmChartStack ref={chartRef} />
+// In useEffect: chartRef.current.config = {...}; chartRef.current.data = [...];
 ```

package/dist/docs/skill/wm-date-range.md

@@ -53,12 +53,12 @@ Updated as the user types or picks from the calendar. _(default: `""`)_
 Updated as the user types or picks from the calendar. _(default: `""`)_
 
 **Events:**
-- `wmEndInputBlur`
-- `wmRangeSelection` Detail: `{{ startDate: { iso: string, us: string, int: string }, endDate: { iso: string, us: string, int: string } }}
+- `wmEndInputBlur` -- Fires when the end date input loses focus.
+- `wmRangeSelection` -- Fires when the user completes a range selection from the calendar popup. Detail: `{{ startDate: { iso: string, us: string, int: string }, endDate: { iso: string, us: string, int: string } }}
 startDate and endDate -- each formatted in ISO (YYYY-MM-DD), US (mm/dd/yyyy), and INT
 (dd/mm/yyyy). The dates are always returned in chronological order regardless of the order
 they were clicked.`
-- `wmStartInputBlur`
+- `wmStartInputBlur` -- Fires when the start date input loses focus.
 
 **Methods:**
 - `isValidISO(input?: string) => Promise<boolean>`

package/dist/docs/skill/wm-datepicker.md

@@ -37,8 +37,8 @@ _None documented_
 - `value` -- The date displayed in the input field, in the format specified by `date-format`. Updated as the user types. Can also be set programmatically by the application. _(default: `""`)_
 
 **Events:**
-- `wmDatepickerDateSelected` Detail: `{{ date: string }} date -- the selected date in ISO format (YYYY-MM-DD).`
-- `wmDatepickerInputBlurred`
+- `wmDatepickerDateSelected` -- Fires when the user selects a date from the calendar popup. Detail: `{{ date: string }} date -- the selected date in ISO format (YYYY-MM-DD).`
+- `wmDatepickerInputBlurred` -- Fires when the text input loses focus.
 
 **Methods:**
 - `isValidIso(input?: string) => Promise<boolean>`

package/dist/docs/skill/wm-file.md

@@ -31,10 +31,10 @@ from the parent wm-file-list or wm-uploader when set there. _(type: `"all" | "la
 (e.g. `"Uploaded by Smith, John"`).
 
 **Events:**
-- `wmFileDelete`
-- `wmFileDownload`
-- `wmFileErrorCleared`
-- `wmFilePreview`
+- `wmFileDelete` -- Fires when the delete button is clicked.
+- `wmFileDownload` -- Fires when the download button is clicked.
+- `wmFileErrorCleared` -- Fires when the user clears a file error by clicking the Clear button.
+- `wmFilePreview` -- Fires when the preview button is clicked.
 
 **Accessibility:**
 

package/dist/docs/skill/wm-flyout.md

@@ -65,10 +65,11 @@ in the footer. Fires `wmFlyoutSecondaryTriggered` when clicked.
 - _(default)_ -- Main content of the flyout body.
 
 **Events:**
-- `wmFlyoutBreadcrumbClicked` Detail: `{{ breadcrumb: string, index: number }} breadcrumb -- the label of the clicked breadcrumb; index -- its zero-based position in the original CSV list.`
-- `wmFlyoutCloseTriggered`
-- `wmFlyoutPrimaryTriggered`
-- `wmFlyoutSecondaryTriggered`
+- `wmFlyoutBreadcrumbClicked` -- Fires when a breadcrumb button (any non-last breadcrumb) is clicked. Detail: `{{ breadcrumb: string, index: number }} breadcrumb -- the label of the clicked breadcrumb; index -- its zero-based position in the original CSV list.`
+- `wmFlyoutCloseTriggered` -- Fires when the close button is clicked, Escape is pressed, or the native
+dialog close event fires. The host application must set `open` to false in response.
+- `wmFlyoutPrimaryTriggered` -- Fires when the primary footer button is clicked.
+- `wmFlyoutSecondaryTriggered` -- Fires when the secondary footer button is clicked.
 
 **Methods:**
 - `focusHeading() => Promise<void>`

package/dist/docs/skill/wm-input.md

@@ -52,7 +52,8 @@ symbol prefixes/suffixes, and inline info/error messaging. Use instead of a nati
 - `value` -- The initial value of the input field, or its current value when reading from the component. _(default: `""`)_
 
 **Events:**
-- `wmInputValueChanged` Detail: `{{ value: string }} value -- the current value of the input at the time of blur.`
+- `wmInputValueChanged` -- Fires on blur when the input value has changed since the last blur. Use the
+native `input` event if you need to react to every keystroke. Detail: `{{ value: string }} value -- the current value of the input at the time of blur.`
 
 **Accessibility:**
 

package/dist/docs/skill/wm-menuitem.md

@@ -23,7 +23,8 @@ or an MDI character code (deprecated). Incompatible with `description`.
 - _(default)_ -- The visible label text for the menu item.
 
 **Events:**
-- `wmMenuitemClicked`
+- `wmMenuitemClicked` -- Fires when the menu item is clicked or Enter is pressed while focused.
+Consumed by the parent wm-action-menu to close the dropdown.
 
 **Accessibility:**
 

package/dist/docs/skill/wm-modal.md

@@ -54,9 +54,11 @@ generated if absent -- do not set this prop manually. _(required)_
 - _(default)_ -- Modal content: wm-modal-header, body content, and wm-modal-footer.
 
 **Events:**
-- `wmModalCloseTriggered`
-- `wmModalPrimaryTriggered`
-- `wmModalSecondaryTriggered`
+- `wmModalCloseTriggered` -- Fires when the close button is clicked or Escape is pressed. Does not bubble,
+preventing nested modals from closing simultaneously. The host application must set `open`
+to false in response.
+- `wmModalPrimaryTriggered` -- Fires when the wm-modal-footer primary button is clicked.
+- `wmModalSecondaryTriggered` -- Fires when the wm-modal-footer secondary button is clicked.
 
 **Methods:**
 - `emitCloseEvent() => Promise<void>`

package/dist/docs/skill/wm-navigation-hamburger.md

@@ -29,7 +29,8 @@ _None documented_
 linking and for keeping `aria-expanded` in sync with the navigation's open state.
 
 **Events:**
-- `wmNavigationHamburgerClicked`
+- `wmNavigationHamburgerClicked` -- Fires when the button is clicked. Consumed by the associated wm-navigation
+to toggle its `open` state -- not intended for direct application use.
 
 **Accessibility:**
 

package/dist/docs/skill/wm-navigation-item.md

@@ -33,7 +33,8 @@ _None documented_
 - _(default)_ -- Optional icon element displayed before the link text.
 
 **Events:**
-- `wmNavigationItemClicked`
+- `wmNavigationItemClicked` -- Fires when the link is clicked. Consumed by the parent wm-navigation to
+close the collapsible menu on narrow viewports.
 
 **Accessibility:**
 

package/dist/docs/skill/wm-navigation.md

@@ -34,7 +34,8 @@ on viewports wider than 1024px where the navigation is always visible. _(default
 - _(default)_ -- One or more wm-navigation-item elements.
 
 **Events:**
-- `wmNavigationStateChanged`
+- `wmNavigationStateChanged` -- Fires when the collapsible navigation opens or closes. Consumed by
+wm-navigation-hamburger to keep its `aria-expanded` state in sync.
 
 **Accessibility:**
 

package/dist/docs/skill/wm-navigator.md

@@ -48,7 +48,9 @@ Each object must include `id`, `name`, `icon_url`, and either `link_url` (auth-t
 - `user-name` -- The display name of the logged-in user, shown in the menu header.
 
 **Events:**
-- `wmNavigatorLogout`
+- `wmNavigatorLogout` -- Fires when the user clicks the logout option. Always handle this event to
+run app-specific cleanup (e.g. clearing local storage or session state) before any logout
+redirect. If `logout-url` is set, the component will navigate there after this event fires.
 
 **Accessibility:**
 

package/dist/docs/skill/wm-nested-select.md

@@ -57,7 +57,8 @@ group. _(default: `false`)_
 `multiple` to be set. _(default: `false`)_
 
 **Events:**
-- `wmNestedSelectBlurred`
+- `wmNestedSelectBlurred` -- Fires when focus leaves the component entirely (not when moving between
+internal elements such as options or group buttons).
 
 **Accessibility:**
 

package/dist/docs/skill/wm-optgroup.md

@@ -20,8 +20,8 @@ of its options. _(default: `false`)_
 dropdown menu. _(required)_
 
 **Events:**
-- `wmOptgroupAllDeselected`
-- `wmOptgroupAllSelected`
+- `wmOptgroupAllDeselected` -- Fires when the "Deselect All" button inside this group is activated.
+- `wmOptgroupAllSelected` -- Fires when the "Select All" button inside this group is activated.
 
 **Methods:**
 - `emitDeselection() => Promise<void>`

package/dist/docs/skill/wm-option.md

@@ -24,8 +24,8 @@ or modifies this value -- it is purely a pass-through for application code to at
 or key. _(type: `null | string`)_
 
 **Events:**
-- `wmOptionDeselected` Detail: ``HTMLWmOptionElement` -- the option element that was deselected.`
-- `wmOptionSelected` Detail: ``HTMLWmOptionElement` -- the option element that was selected.`
+- `wmOptionDeselected` -- Fires when this option is deselected by the user (multiselect mode only). Detail: ``HTMLWmOptionElement` -- the option element that was deselected.`
+- `wmOptionSelected` -- Fires when this option is selected by the user. Detail: ``HTMLWmOptionElement` -- the option element that was selected.`
 
 **Code example:**
 

package/dist/docs/skill/wm-pagination.md

@@ -45,7 +45,9 @@ calculate the total page count.
 `event.target.value` in the `wmPaginationPageClicked` handler to get the selected page. _(default: `1`)_
 
 **Events:**
-- `wmPaginationPageClicked`
+- `wmPaginationPageClicked` -- Fires when the user clicks a page number, previous, or next button.
+Read `event.target.value` to get the selected page number, then update `current-page`
+and re-render your data.
 
 **Accessibility:**
 

package/dist/docs/skill/wm-progress-monitor.md

@@ -33,7 +33,8 @@ and collapses to bars when it cannot. _(type: `number | string`)_
 in bar layout mode (e.g. `"Completed,Not Completed"`). Keys cannot contain commas.
 
 **Events:**
-- `wmProgressMonitorModeChange` Detail: ``"doughnut" | "bar"` -- the new layout mode.`
+- `wmProgressMonitorModeChange` -- Fires once on load and again whenever the layout switches between `"doughnut"`
+and `"bar"` modes. Use this to synchronize external UI that depends on the current layout. Detail: ``"doughnut" | "bar"` -- the new layout mode.`
 
 **Code example:**