@watermarkinsights/ripple 5.30.0 → 5.31.0-alpha.1

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

@@ -1,3 +1,31 @@
+/**
+ * Data slice for a wm-chart composition chart. Each slice represents one segment of the whole.
+ * Always used as a direct child of wm-chart.
+ *
+ * @usageNotes
+ * - A `legend` is required unless `amount` is `0` or omitted — the component throws if a
+ *   non-zero amount is provided without a legend.
+ * - Slices without an `amount` are not rendered but still occupy a color slot, preserving
+ *   consistent color assignment when some data points are conditionally absent.
+ * - Use `popover-title`, `popover-text`, and `popover-button-text` to surface additional
+ *   context when a segment is focused or clicked.
+ *
+ * @example {html} Basic slice
+ * <wm-chart-slice legend="Enrolled" amount="310"></wm-chart-slice>
+ *
+ * @example {react} Basic slice
+ * <WmChartSlice legend="Enrolled" amount="310" />
+ *
+ * @example {html} Slice with popover
+ * <wm-chart-slice legend="At risk" amount="45"
+ *   popover-title="45 students" popover-text="Flagged for early intervention"
+ *   popover-button-text="View students"></wm-chart-slice>
+ *
+ * @example {react} Slice with popover
+ * <WmChartSlice legend="At risk" amount="45"
+ *   popoverTitle="45 students" popoverText="Flagged for early intervention"
+ *   popoverButtonText="View students" />
+ */
 export class ChartSlice {
     constructor() {
         this.legend = undefined;
@@ -28,7 +56,13 @@ export class ChartSlice {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Label for this slice in the legend and popovers. Required when `amount` is\ngreater than zero."
+                        }, {
+                            "name": "required",
+                            "text": undefined
+                        }],
                     "text": ""
                 },
                 "attribute": "legend",
@@ -45,7 +79,10 @@ export class ChartSlice {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Numeric value for this slice as a string. Slices with no amount (or `0`) are\nnot rendered but still occupy a color slot."
+                        }],
                     "text": ""
                 },
                 "attribute": "amount",
@@ -62,7 +99,10 @@ export class ChartSlice {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Title text shown in the data popover when this segment is focused or clicked."
+                        }],
                     "text": ""
                 },
                 "attribute": "popover-title",
@@ -79,7 +119,10 @@ export class ChartSlice {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Body text shown in the data popover when this segment is focused or clicked."
+                        }],
                     "text": ""
                 },
                 "attribute": "popover-text",
@@ -96,7 +139,10 @@ export class ChartSlice {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Label for the action button in the data popover. When set, the popover\nrenders a button and fires `wmChartPopoverButtonTriggered` when clicked."
+                        }],
                     "text": ""
                 },
                 "attribute": "popover-button-text",
@@ -112,7 +158,13 @@ export class ChartSlice {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "description",
+                            "text": "Internal signal notifying the parent wm-chart to re-read slice data after a\nprop update \u2014 not for application use."
+                        }],
                     "text": ""
                 },
                 "complexType": {

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

@@ -3,6 +3,63 @@ import { forceUpdate } from "@stencil/core";
 import { debounce, generateId } from "../../../global/functions";
 import { amountToPercent, exitChart, getDetails, handleChartKeydown, renderStackedBar, renderSimpleBar, renderDoughnut, renderHiddenValuesMessage, renderInstructionsText, renderLegend, allChartsDetails, removeSegmentInfoHighlight, } from "../chartFunctions";
 import { chartMessages } from "../../../global/intl";
+/**
+ * Composition chart component rendering doughnut or stacked bar charts. Composed of a parent
+ * wm-chart element and wm-chart-slice children. Has 3 doughnut subtypes and 5 bar subtypes,
+ * each designed for a specific composition use case.
+ *
+ * **Important:** The bar subtypes (`bar2`–`bar7`) are COMPOSITION patterns — they show parts
+ * of a whole for specific qualitative use cases. They are NOT general-purpose bar charts. For
+ * general comparison or distribution bar charts, use wm-chart-bar or wm-chart-column instead.
+ *
+ * @keyboardInteraction
+ * - **Tab**: Enters the chart. Subsequent Tab exits the chart.
+ * - **Arrow keys**: Navigate between slices/segments.
+ * - **Enter / Space**: Opens the data popover for the focused segment.
+ * - **Escape**: Closes the popover and returns to the chart container.
+ *
+ * @accessibility
+ * - `label` is required for accessibility — the chart throws if omitted.
+ * - The chart renders with `role="application"` and an `aria-roledescription` of
+ *   "Interactive chart". Each segment is individually focusable with an `aria-label`.
+ * - `print-mode` removes keyboard interaction instructions for printed output.
+ *
+ * @usageNotes
+ * - Slices without an `amount` are not rendered but still occupy a color slot, allowing
+ *   consistent color assignment when some data points are missing.
+ * - The `show-legend` prop controls legend visibility but the legend is always read by screen
+ *   readers regardless of visibility.
+ * - For data-driven bar charts (comparison, distribution), prefer wm-chart-bar or
+ *   wm-chart-column.
+ *
+ * @example {html} Doughnut chart
+ * <wm-chart label="Enrollment by status">
+ *   <wm-chart-slice legend="Enrolled" amount="310"></wm-chart-slice>
+ *   <wm-chart-slice legend="Not enrolled" amount="90"></wm-chart-slice>
+ * </wm-chart>
+ *
+ * @example {react} Doughnut chart
+ * <WmChart label="Enrollment by status">
+ *   <WmChartSlice legend="Enrolled" amount="310" />
+ *   <WmChartSlice legend="Not enrolled" amount="90" />
+ * </WmChart>
+ *
+ * @example {html} Bar composition chart
+ * <wm-chart label="Completion by cohort" chart-type="bar5">
+ *   <wm-chart-slice legend="Completed" amount="200"></wm-chart-slice>
+ *   <wm-chart-slice legend="In progress" amount="75"></wm-chart-slice>
+ *   <wm-chart-slice legend="Not started" amount="25"></wm-chart-slice>
+ * </wm-chart>
+ *
+ * @example {react} Bar composition chart
+ * <WmChart label="Completion by cohort" chartType="bar5">
+ *   <WmChartSlice legend="Completed" amount="200" />
+ *   <WmChartSlice legend="In progress" amount="75" />
+ *   <WmChartSlice legend="Not started" amount="25" />
+ * </WmChart>
+ *
+ * @category Data Visualization
+ */
 export class Chart {
     constructor() {
         this.uid = generateId();
@@ -145,7 +202,7 @@ export class Chart {
         }
     }
     render() {
-        return (h(Host, { key: '64a6dc03c5a44de1cb06d0ddfa90cf88cf1c467c', onBlur: () => exitChart.call(this) }, h("div", { key: '31b4a39ce530c5e3552b1896feaa081f2e368d1b', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.currentChartType} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""} ${this.labelPosition === "left" && this.currentChartType === "bar4" ? "left-label" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: 0, "aria-roledescription": chartMessages.interactiveChart, "aria-describedby": "chart-instructions" }, h("label", { key: 'a62e78dd0eb3f50da81cc09137ea5bc7115b7cf4', id: `label-${this.uid}`, class: `label --${this.labelPosition}`, htmlFor: `graphic-${this.uid}` }, h("span", { key: '9a7219c06f7ef4a1a59f9b23a15574c65942e6c6', class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.isBar && renderLegend.call(this, this.currentChartType), this.renderChart(), this.isDoughnut && renderLegend.call(this, this.currentChartType), h("priv-chart-popover-old", { key: 'c561e46795723255b0919e321c4a60f5b58dc021', class: this.isTabbing ? "user-is-tabbing" : "", onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) }), this.isBar && !this.printMode && renderHiddenValuesMessage()), renderInstructionsText()));
+        return (h(Host, { key: 'e0a972bc5e47bead2080f995f6ac7622a9508f4e', onBlur: () => exitChart.call(this) }, h("div", { key: 'a9d2e2b8309229208e9432e7756432f8c4ed0585', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.currentChartType} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""} ${this.labelPosition === "left" && this.currentChartType === "bar4" ? "left-label" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: 0, "aria-roledescription": chartMessages.interactiveChart, "aria-describedby": "chart-instructions" }, h("label", { key: '5a2acae3749eed0ce29ce20a43eff4a1324790bb', id: `label-${this.uid}`, class: `label --${this.labelPosition}`, htmlFor: `graphic-${this.uid}` }, h("span", { key: '780eb58732f4ec691ca6623dc4e2e6fb05395faf', class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.isBar && renderLegend.call(this, this.currentChartType), this.renderChart(), this.isDoughnut && renderLegend.call(this, this.currentChartType), h("priv-chart-popover-old", { key: '266e79755e835272f69e3f6a9d057fe1dab46837', class: this.isTabbing ? "user-is-tabbing" : "", onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) }), this.isBar && !this.printMode && renderHiddenValuesMessage()), renderInstructionsText()));
     }
     static get is() { return "wm-chart"; }
     static get encapsulation() { return "shadow"; }
@@ -179,7 +236,13 @@ export class Chart {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Chart subtype. Doughnut subtypes (`doughnut1`\u2013`doughnut3`) and bar composition\nsubtypes (`bar2`\u2013`bar7`) \u2014 each tailored to a specific composition use case."
+                        }, {
+                            "name": "default",
+                            "text": "\"doughnut1\""
+                        }],
                     "text": ""
                 },
                 "attribute": "chart-type",
@@ -197,7 +260,13 @@ export class Chart {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Accessible label for the chart. Required \u2014 the component throws an error if\nomitted. Used as the `aria-label` on the chart container and as the visual chart label."
+                        }, {
+                            "name": "required",
+                            "text": undefined
+                        }],
                     "text": ""
                 },
                 "attribute": "label",
@@ -214,7 +283,13 @@ export class Chart {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Controls the bar label width. Only applies to `bar6` and `bar7` subtypes."
+                        }, {
+                            "name": "default",
+                            "text": "\"150px\""
+                        }],
                     "text": ""
                 },
                 "attribute": "label-width",
@@ -232,7 +307,10 @@ export class Chart {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Optional secondary text displayed beneath the chart label. Not shown when\n`label-position` is `\"none\"`."
+                        }],
                     "text": ""
                 },
                 "attribute": "subinfo",
@@ -249,7 +327,13 @@ export class Chart {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Controls how individual segment values are displayed on the chart."
+                        }, {
+                            "name": "default",
+                            "text": "\"none\""
+                        }],
                     "text": ""
                 },
                 "attribute": "value-format",
@@ -267,7 +351,13 @@ export class Chart {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Show or hide the value grid lines. Only applies to `bar6`."
+                        }, {
+                            "name": "default",
+                            "text": "true"
+                        }],
                     "text": ""
                 },
                 "attribute": "show-grid",
@@ -285,7 +375,13 @@ export class Chart {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Show or hide the legend below the chart. The legend is still read by screen\nreaders regardless of this setting."
+                        }, {
+                            "name": "default",
+                            "text": "true"
+                        }],
                     "text": ""
                 },
                 "attribute": "show-legend",
@@ -303,7 +399,13 @@ export class Chart {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Show or hide the y-axis bar legend. Only applies to `bar7`."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": ""
                 },
                 "attribute": "show-bar-legend",
@@ -321,7 +423,13 @@ export class Chart {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "When true, applies a gray color to the first slice to represent a\n\"not started\" state. Only applies to `bar5`."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": ""
                 },
                 "attribute": "not-started-color",
@@ -339,7 +447,13 @@ export class Chart {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "When true, slice values are included in the legend and keyboard interaction\ninstructions are removed from the DOM \u2014 suitable for printed output."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": ""
                 },
                 "attribute": "print-mode",
@@ -357,7 +471,13 @@ export class Chart {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Format for legend values when `print-mode` is enabled."
+                        }, {
+                            "name": "default",
+                            "text": "\"amount\""
+                        }],
                     "text": ""
                 },
                 "attribute": "print-mode-format",
@@ -375,7 +495,13 @@ export class Chart {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Position of the chart label relative to the chart. When `\"none\"`, no label is\nrendered \u2014 an external label matching `label` must be visually grouped with the chart."
+                        }, {
+                            "name": "default",
+                            "text": "\"top\""
+                        }],
                     "text": ""
                 },
                 "attribute": "label-position",

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

@@ -3,6 +3,106 @@ import { chartPalettes, patternKey, } from "../../../global/interfaces";
 import { formatDisplayValue, suffixNumber, renderInstructionsText, findLargestNiceInterval, getMaxTicks, findNiceRoundNumber, groupProcessedData, computeLegendData, sortGroupedData, inferDecimalPlacesForUnitValue, } from "../chartFunctions";
 import { chartMessages } from "../../../global/intl";
 import { isElOrChild } from "../../../global/functions";
+/**
+ * Renders a horizontal bar chart for comparing values across nominal categories. Data and
+ * configuration are set via JavaScript properties (`chart.config` and `chart.data`) — not
+ * HTML attributes. Supports single-color, discrete palette, semantic palette, and grouped bars.
+ *
+ * **Preferred** over wm-chart's bar subtypes for all comparison and distribution use cases.
+ * Use this component (or wm-chart-column) instead of `<wm-chart chart-type="bar*">`.
+ *
+ * @keyboardInteraction
+ * - **Tab**: Enters the chart wrapper.
+ * - **Arrow Down / Right**: Focuses the first bar; subsequent presses cycle to the next bar.
+ * - **Arrow Up / Left**: Cycles to the previous bar.
+ * - **Enter**: Activates the popover button when the popover is open.
+ * - **Escape**: Closes the open popover.
+ * - **Tab** (from within): Exits the chart and clears focus.
+ *
+ * @accessibility
+ * - `config.label` is required — used as the chart's `aria-label`.
+ * - Each bar receives an `aria-label` composed of the category axis label, group name (if
+ *   grouped), bar legend, and display value.
+ * - The chart renders with `role="application"` and `aria-roledescription="Interactive chart"`.
+ * - In `print-mode`, keyboard interaction instructions are removed from the DOM.
+ *
+ * @usageNotes
+ * - Set `id` on the element to use with an external `wm-chart-legend` via `chart-ids`.
+ * - For grouped charts, each `ChartData` item must include a `groupName` field.
+ * - `config.gridMax: "auto"` calculates a "nice" round upper bound from the data.
+ * - Bars exceeding the `gridMax` are clipped — set an appropriate `gridMax` to avoid this.
+ *
+ * @example {html} Single-color bar chart
+ * <wm-chart-bar id="enrollment-chart"></wm-chart-bar>
+ * <script>
+ *   const chart = document.querySelector('#enrollment-chart');
+ *   chart.config = { label: 'Enrollment by program', gridMax: 'auto', valueFormat: 'amount' };
+ *   chart.data = [{ barLegend: 'Biology', amount: 310 }, { barLegend: 'English', amount: 280 }];
+ * </script>
+ *
+ * @example {react} Single-color bar chart
+ * // config and data must be set via JavaScript properties in useEffect -- not as JSX props.
+ * const singleRef = useRef(null);
+ *
+ * useEffect(() => {
+ *   singleRef.current.config = {
+ *     label: 'Enrollment by program',
+ *     gridMax: 'auto',
+ *     valueFormat: 'amount',
+ *     popoverTitle: 'Details',
+ *   };
+ *   singleRef.current.data = [
+ *     { barLegend: 'Biology', amount: 310, popoverText: '310 students enrolled' },
+ *     { barLegend: 'English', amount: 280, popoverText: '280 students enrolled' },
+ *     { barLegend: 'History', amount: 195, popoverText: '195 students enrolled' },
+ *     { barLegend: 'Chemistry', amount: 240, popoverText: '240 students enrolled' },
+ *   ];
+ * }, []);
+ *
+ * <WmChartBar ref={singleRef} />
+ *
+ * @example {html} Grouped bar chart
+ * <wm-chart-bar id="grouped-chart"></wm-chart-bar>
+ * <script>
+ *   const chart = document.querySelector('#grouped-chart');
+ *   chart.config = { label: 'Retention by cohort and program', gridMax: 'auto',
+ *     categoryAxisLabel: 'Cohort', valueAxisLabel: 'Students', showLegend: 'bottom' };
+ *   chart.data = [
+ *     { barLegend: 'Biology', amount: 120, groupName: '2022', popoverTitle: 'Biology — 2022', popoverText: '120 students retained' },
+ *     { barLegend: 'English', amount: 95, groupName: '2022', popoverTitle: 'English — 2022', popoverText: '95 students retained' },
+ *     { barLegend: 'Biology', amount: 135, groupName: '2023', popoverTitle: 'Biology — 2023', popoverText: '135 students retained' },
+ *     { barLegend: 'English', amount: 110, groupName: '2023', popoverTitle: 'English — 2023', popoverText: '110 students retained' },
+ *   ];
+ * </script>
+ *
+ * @example {react} Grouped bar chart
+ * // config and data must be set via JavaScript properties in useEffect -- not as JSX props.
+ * const groupedRef = useRef(null);
+ *
+ * useEffect(() => {
+ *   groupedRef.current.config = {
+ *     label: 'Retention by cohort and program',
+ *     gridMax: 'auto',
+ *     valueFormat: 'amount',
+ *     categoryAxisLabel: 'Cohort',
+ *     valueAxisLabel: 'Students',
+ *     showLegend: 'bottom',
+ *   };
+ *   groupedRef.current.data = [
+ *     { barLegend: 'Biology', amount: 120, groupName: '2022', popoverTitle: 'Biology — 2022', popoverText: '120 students retained' },
+ *     { barLegend: 'English', amount: 95, groupName: '2022', popoverTitle: 'English — 2022', popoverText: '95 students retained' },
+ *     { barLegend: 'History', amount: 80, groupName: '2022', popoverTitle: 'History — 2022', popoverText: '80 students retained' },
+ *     { barLegend: 'Biology', amount: 135, groupName: '2023', popoverTitle: 'Biology — 2023', popoverText: '135 students retained' },
+ *     { barLegend: 'English', amount: 110, groupName: '2023', popoverTitle: 'English — 2023', popoverText: '110 students retained' },
+ *     { barLegend: 'History', amount: 72, groupName: '2023', popoverTitle: 'History — 2023', popoverText: '72 students retained' },
+ *   ];
+ * }, []);
+ *
+ * <WmChartBar ref={groupedRef} />
+ *
+ * @category Data Visualization
+ * @displayName Bar Chart
+ */
 export class ChartBar {
     constructor() {
         this.gridMax = 0;
@@ -425,7 +525,7 @@ export class ChartBar {
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         const rowCount = (this.isGrouped ? this.processedData.size : (_a = this.processedData.get(null)) === null || _a === void 0 ? void 0 : _a.length) || 1; // processedData keys are the group names, ungrouped data belongs under a key of null
-        return (h(Host, { key: '6c4e5d5a990eb6b719cf6414bcb08961b265d6f7' }, h("div", { key: '348d77ac265b2ad0abac5aadaf117286b4c8b408', class: "popover-wrapper" }, h("priv-chart-popover", { key: 'bf6ecf7270d6a5862a65c2820c057946171bf380', ref: (el) => (this.popoverEl = el), onIntChartPopoverToggled: (ev) => this.handlePopoverToggled(ev) })), h("div", { key: 'eb2120d0c22302d55ce91c0242cc021586005e41', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${((_b = this.printMode) !== null && _b !== void 0 ? _b : (_c = this.config) === null || _c === void 0 ? void 0 : _c.printMode) ? "print-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": (_d = this.config) === null || _d === void 0 ? void 0 : _d.label }, ((_f = (_e = this.config) === null || _e === void 0 ? void 0 : _e.showLabel) !== null && _f !== void 0 ? _f : true) && (h("label", { key: 'c3c5df95bbe6c59785e3812a3e4a41c1c2c30243', id: "label", class: "label" }, h("span", { key: '9c0cbdc44cf7e261b84a2cb466124b3b3f526bff', class: "label-text" }, (_g = this.config) === null || _g === void 0 ? void 0 : _g.label), this.subinfoText ? h("span", { class: "subinfo" }, this.subinfoText) : "")), this.showLegend === "top" && this.renderLegend("horizontal"), h("div", { key: '2054415ba5137a232b43acdc2776adeb038aa968', class: "chart-wrapper" }, h("div", { key: 'b0238719a9e7d271f1c04d1a22acb9784a9283e3', class: "chart-left-side" }, this.showLegend === "left" && this.renderLegend("vertical"), h("div", { key: 'fc31958261bd6901ec8a37b6d4327058fbc0cc08', class: "left-axis-label" }, h("span", { key: '9d1f9c6976084919bf9c3bc52e4fc05af9d70398', class: "axis-label-text" }, (_h = this.config) === null || _h === void 0 ? void 0 : _h.categoryAxisLabel))), h("div", { key: 'cd8f097b5350c41c0db3e0427cebf71b9f77da03', class: "chart-center" }, h("div", { key: 'cfb29fb64d81c566c97820a1da2a3988a4e3cea7', class: "chart-area", style: { "--row-count": rowCount.toString() } }, this.processedData && (this.isGrouped ? this.renderGroupLegends() : this.renderBarLegends()), h("div", { key: '073309f0b2b5218e0bc4e21c58a9272e40ac376f', class: `bar-area ${this.isKeying ? "user-is-keying" : ""} ${this.isGrouped ? "grouped" : ""}`, ref: (el) => (this.barAreaEl = el) }, this.gridVisible && this.renderGrid(), ((_j = this.config) === null || _j === void 0 ? void 0 : _j.gridMax) != undefined && (this.isGrouped ? this.renderGroupedBars() : this.renderBars()))), h("div", { key: '4e455f2332f393cb1ea2ccc75209434f90c3ef74', class: "bottom-axis-label" }, h("span", { key: 'db1ef4194c3d544c28270892a2c0b85524685e89', class: "axis-label-text" }, (_k = this.config) === null || _k === void 0 ? void 0 : _k.valueAxisLabel)), this.gridVisible && this.renderXAxis()), h("div", { key: '8451642ab2169b7255b82620b9751538c3ecbeda', class: "chart-right-side" }, this.showLegend === "right" && this.renderLegend("vertical"))), this.showLegend === "bottom" && this.renderLegend("horizontal"), renderInstructionsText())));
+        return (h(Host, { key: 'fee905a779328fdabd70ead14d0be757809a20b7' }, h("div", { key: '259b8520be79541071c4e9d322d52253b1f31905', class: "popover-wrapper" }, h("priv-chart-popover", { key: '4e67366a3e3328621228faf7b7006cc28ea5d6c6', ref: (el) => (this.popoverEl = el), onIntChartPopoverToggled: (ev) => this.handlePopoverToggled(ev) })), h("div", { key: '040f5c7d13fa72d062fa82069f9da9f11aefa01c', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${((_b = this.printMode) !== null && _b !== void 0 ? _b : (_c = this.config) === null || _c === void 0 ? void 0 : _c.printMode) ? "print-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": (_d = this.config) === null || _d === void 0 ? void 0 : _d.label }, ((_f = (_e = this.config) === null || _e === void 0 ? void 0 : _e.showLabel) !== null && _f !== void 0 ? _f : true) && (h("label", { key: '913ee009cdccb63eb97d7b089e47b3a95afbd033', id: "label", class: "label" }, h("span", { key: 'df61bc316cd501e9747b88705da29c4dff1e8409', class: "label-text" }, (_g = this.config) === null || _g === void 0 ? void 0 : _g.label), this.subinfoText ? h("span", { class: "subinfo" }, this.subinfoText) : "")), this.showLegend === "top" && this.renderLegend("horizontal"), h("div", { key: '7e62e9b642f8c9c82a85a0444718688b559df321', class: "chart-wrapper" }, h("div", { key: '253dec169ae191463f5bae1762927903e28865b9', class: "chart-left-side" }, this.showLegend === "left" && this.renderLegend("vertical"), h("div", { key: 'a334e424f2e6d84f2573958392d998918b108282', class: "left-axis-label" }, h("span", { key: '3e5ce3a0e0de6c6681e8128285f9cb68d380c455', class: "axis-label-text" }, (_h = this.config) === null || _h === void 0 ? void 0 : _h.categoryAxisLabel))), h("div", { key: '6a8569d3747e99acad477eeaa3d23a8e2cd9e86d', class: "chart-center" }, h("div", { key: '9fdd5de7923748a3ece1c878b67345c09ade7b16', class: "chart-area", style: { "--row-count": rowCount.toString() } }, this.processedData && (this.isGrouped ? this.renderGroupLegends() : this.renderBarLegends()), h("div", { key: '384233d4f76764d9e58d4512398b58c2e08da6fa', class: `bar-area ${this.isKeying ? "user-is-keying" : ""} ${this.isGrouped ? "grouped" : ""}`, ref: (el) => (this.barAreaEl = el) }, this.gridVisible && this.renderGrid(), ((_j = this.config) === null || _j === void 0 ? void 0 : _j.gridMax) != undefined && (this.isGrouped ? this.renderGroupedBars() : this.renderBars()))), h("div", { key: '029ce6b851112ba6f3a0bf02f52003fe33ce3236', class: "bottom-axis-label" }, h("span", { key: 'e8e23fbf1446d7e3c6639233ee1bdd95d39be38f', class: "axis-label-text" }, (_k = this.config) === null || _k === void 0 ? void 0 : _k.valueAxisLabel)), this.gridVisible && this.renderXAxis()), h("div", { key: '0019f06abd0b37f496960c499d10a12ca616a6bb', 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"; }
@@ -459,7 +559,10 @@ export class ChartBar {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Chart configuration object. Set via JavaScript property \u2014 not an HTML\nattribute. See the `ChartConfig` interface for the full list of options (label, gridMax,\nvalueFormat, colors, showLegend, etc.)."
+                        }],
                     "text": ""
                 }
             },
@@ -480,7 +583,10 @@ export class ChartBar {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Array of data items to render. Set via JavaScript property \u2014 not an HTML\nattribute. Each item must include at least `barLegend` and `amount`; grouped charts also\nrequire `groupName`. See the `ChartData` interface."
+                        }],
                     "text": ""
                 }
             },
@@ -495,7 +601,13 @@ export class ChartBar {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "When true, bar values are included in the legend and keyboard interaction\ninstructions are removed from the DOM \u2014 suitable for printed output. Takes precedence over\n`config.printMode`."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": ""
                 },
                 "attribute": "print-mode",
@@ -512,7 +624,13 @@ export class ChartBar {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "When true, applies a hatching pattern fill to bars in addition to color,\nimproving distinguishability for users with color vision deficiencies. Takes precedence\nover `config.patternMode`."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": ""
                 },
                 "attribute": "pattern-mode",
@@ -529,7 +647,10 @@ export class ChartBar {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Optional secondary text displayed beneath the chart label. Takes precedence\nover `config.subinfo`."
+                        }],
                     "text": ""
                 },
                 "attribute": "subinfo",
@@ -552,7 +673,13 @@ export class ChartBar {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "description",
+                            "text": "Internal signal used to synchronize bar highlight state with an external\nwm-chart-legend \u2014 not for application use."
+                        }],
                     "text": ""
                 },
                 "complexType": {