q2-tecton-elements 1.71.4 → 1.73.0

package/dist/esm/q2-chart-area.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-Cqkz7Bnm.js';
-import { o as overrideFocus, l as loc } from './index-Cps4jSQM.js';
+import { o as overrideFocus, i as isEventFromElement, l as loc } from './index-CP8pXJ-l.js';
+import { _ as __extends, ad as createSymbol, ae as enterEmphasis, af as leaveEmphasis, A as updateProps, M as saveOldStyle, y as initProps, W as getLabelStatesModels, ag as normalizeSymbolOffset, ah as ZRImage, V as extend, X as setLabelStyle, Z as toggleHoverEmphasis, h as getECData, ai as removeElement, aj as normalizeSymbolSize, O as Group, L as traverseElements, ak as isObject, H as SeriesModel, F as map, al as isDimensionStacked, K as isNumber, am as createFloat32Array, e as PathProxy, an as cubicRootAt, ao as cubicAt, c as Path, ap as bind, aq as convertToColorString, d as defaults, $ as setStatesStylesFromModel, ar as queryDataIndex, Q as ChartView, as as setStatesFlag, g as isFunction, at as ZRText, au as interpolateRawValues, x as labelInner, v as each, av as LinearGradient, S as SPECIAL_STATES, aw as lerp, ax as createRenderPlanner, ay as cubicSubdivide, az as fromPoints, aA as clonePath, aB as Polygon, R as Sector, U as Rect, B as BoundingRect, P as Point, T as Transformable, l as lerp$1, aC as getAnimationConfig, E as isArray, m as makeInner, aD as normalizeToArray, aE as SERIES_UNIVERSAL_TRANSITION_PROP, aF as createHashMap, aG as DataDiffer, o as filter, aH as Displayable, aI as getOldStyle, a4 as use, a7 as createChartKeyboardNavigation, a8 as init, a9 as chartPointDescription, aa as formatValue, ab as getCSSProperty, ac as isValidColor, a5 as install$1, a6 as install$2 } from './charting-DFXJklqs.js';
 import { m as mirrorEmit } from './mirror-emit-DUjY_ucm.js';
-import { _ as __extends, ab as createSymbol, ac as enterEmphasis, ad as leaveEmphasis, A as updateProps, M as saveOldStyle, y as initProps, W as getLabelStatesModels, ae as normalizeSymbolOffset, af as ZRImage, V as extend, X as setLabelStyle, Z as toggleHoverEmphasis, h as getECData, ag as removeElement, ah as normalizeSymbolSize, O as Group, L as traverseElements, ai as isObject, H as SeriesModel, F as map, aj as isDimensionStacked, K as isNumber, ak as createFloat32Array, e as PathProxy, al as cubicRootAt, am as cubicAt, c as Path, an as bind, ao as convertToColorString, d as defaults, $ as setStatesStylesFromModel, ap as queryDataIndex, Q as ChartView, aq as setStatesFlag, g as isFunction, ar as ZRText, as as interpolateRawValues, x as labelInner, v as each, at as LinearGradient, S as SPECIAL_STATES, au as lerp, av as createRenderPlanner, aw as cubicSubdivide, ax as fromPoints, ay as clonePath, az as Polygon, R as Sector, U as Rect, B as BoundingRect, P as Point, T as Transformable, l as lerp$1, aA as getAnimationConfig, E as isArray, m as makeInner, aB as normalizeToArray, aC as SERIES_UNIVERSAL_TRANSITION_PROP, aD as createHashMap, aE as DataDiffer, o as filter, aF as Displayable, aG as getOldStyle, a4 as use, a7 as init, a8 as getCSSProperty, a9 as isValidColor, aa as formatValue, a5 as install$1, a6 as install$2 } from './charting-DOZct-UB.js';
-import { g as getDefaultLabel, c as createSeriesData, b as getDefaultInterpolatedLabel, i as isCoordinateSystemType, h as createGridClipPath, j as createPolarClipPath, d as dataSample, e as install$3, f as install$4 } from './dataSample-Dm1zpQNi.js';
+import { g as getDefaultLabel, c as createSeriesData, b as getDefaultInterpolatedLabel, i as isCoordinateSystemType, h as createGridClipPath, j as createPolarClipPath, d as dataSample, e as install$3, f as install$4 } from './dataSample-CP_VKNqt.js';
 
 var Symbol = /** @class */function (_super) {
   __extends(Symbol, _super);
@@ -3982,7 +3982,7 @@ function installUniversalTransition(registers) {
   });
 }
 
-const q2ChartAreaCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{width:var(--tct-area-chart-width, 100%);height:var(--tct-area-chart-height, 100%);display:block}.container{width:100%;height:100%}.chart-container{width:100%;height:100%}`;
+const q2ChartAreaCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{width:var(--tct-area-chart-width, 100%);height:var(--tct-area-chart-height, 100%);display:block}.container{position:relative;width:100%;height:100%}.chart-keyboard-value{position:absolute;top:0;right:0;padding:var(--app-scale-1x);background:var(--t-base);color:var(--t-text);pointer-events:none}.chart-container{width:100%;height:100%}`;
 
 use([install$1, install, install$2, installUniversalTransition, install$3, install$4]);
 const Q2ChartArea = class {
@@ -3990,6 +3990,18 @@ const Q2ChartArea = class {
         registerInstance(this, hostRef);
         this.change = createEvent(this, "change", 7);
         this.tctChange = createEvent(this, "tctChange", 7);
+        this.keyboard = createChartKeyboardNavigation({
+            getChart: () => this.chart,
+            getData: () => this.data,
+            onChange: index => {
+                this.keyboardIndex = index;
+                if (index !== null)
+                    mirrorEmit(this, ['change', 'tctChange'], { index, data: this.data[index] });
+            },
+        });
+        // #endregion
+        // #region State Properties
+        this.keyboardIndex = null;
         /** An array of objects that contain the data to be displayed. */
         this.data = [];
         /** Controls visibility of labels on the name axis. */
@@ -4019,6 +4031,7 @@ const Q2ChartArea = class {
     // #endregion
     // #region Component Lifecycle Events
     disconnectedCallback() {
+        this.keyboard.onBlur();
         // CRITICAL: Dispose eCharts instance to prevent memory leaks
         // eCharts holds references to canvas, event listeners, and animation frames
         if (this.chart) {
@@ -4045,6 +4058,13 @@ const Q2ChartArea = class {
         overrideFocus(this.hostElement);
     }
     // #endregion
+    // #region Listeners
+    delegateFocus(event) {
+        var _a;
+        if (isEventFromElement(event, this.hostElement) && this.data.length)
+            (_a = this.chartContainer) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    // #endregion
     // #region Public Methods API
     /**
      * A method to fire change event on hover on a point.
@@ -4063,9 +4083,18 @@ const Q2ChartArea = class {
         if (!this.chart)
             return;
         this.updateChart(this.chart);
+        this.keyboard.refresh();
     }
     // #endregion
     // #region Local Methods
+    get keyboardDescription() {
+        var _a;
+        const datum = this.data[this.keyboardIndex];
+        if (this.keyboardIndex === null || !datum)
+            return '';
+        const decimals = ((_a = this.formatModifier) === null || _a === void 0 ? void 0 : _a.includes('dec')) ? this.formatModifier.replace('dec', '') : 0;
+        return chartPointDescription(datum.name, formatValue(datum.value || 0, { type: this.format, decimals }), this.keyboardIndex, this.data.length);
+    }
     cacheComputedStyles() {
         this.chartContainerStyles = getComputedStyle(this.chartContainer);
         this.hostElementStyles = getComputedStyle(this.hostElement);
@@ -4115,7 +4144,7 @@ const Q2ChartArea = class {
         });
     }
     updateChart(chart) {
-        var _a;
+        var _a, _b;
         const decimals = ((_a = this.formatModifier) === null || _a === void 0 ? void 0 : _a.includes('dec')) ? this.formatModifier.replace('dec', '') : 0;
         const valueAxis = {
             type: 'value',
@@ -4178,7 +4207,7 @@ const Q2ChartArea = class {
             min: this.xMin,
             max: this.xMax,
         };
-        return chart.setOption({
+        chart.setOption({
             aria: {
                 enabled: true,
             },
@@ -4223,11 +4252,13 @@ const Q2ChartArea = class {
                 },
             ],
         });
+        // ECharts ARIA sets role="img" when options change; retain the keyboard interaction role.
+        (_b = this.chartContainer) === null || _b === void 0 ? void 0 : _b.setAttribute('role', 'application');
     }
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '247b79eca7719feab470918648f223675483daf8', class: "container" }, h("div", { key: '349272c0ece24581f05dcadb81d7a19dd71eaa2d', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
+        return (h("div", { key: 'de38ac1c05ff6c85091069a691c5e2d51ba360ed', class: "container" }, h("div", { key: 'e45310470e9429714bd15100d01692b102963545', ref: el => (this.chartContainer = el), class: "chart-container", role: "application", tabIndex: this.data.length ? 0 : -1, "aria-describedby": "chart-keyboard-instructions", onFocus: this.keyboard.onFocus, onBlur: this.keyboard.onBlur, onKeyDown: this.keyboard.onKeyDown, "test-id": "areaChartContainer" }), h("div", { key: '45493b2498b17ab331fdff4487bd05874732c75e', id: "chart-keyboard-instructions", class: "sr" }, loc('tecton.element.chart.keyboardInstructions')), h("div", { key: '9d0a71f228271efde15c7ff4e0bae2a1144a8c9c', class: this.keyboardIndex === null ? 'sr' : 'chart-keyboard-value', role: "status", "aria-atomic": "true" }, this.keyboardDescription)));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-chart-bar.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, h, g as getElement } from './index-Cqkz7Bnm.js';
-import { o as overrideFocus, l as loc } from './index-Cps4jSQM.js';
-import { _ as __extends, v as each, H as SeriesModel, I as inheritDefaultOption, c as Path, J as calculateTextPosition, K as isNumber, E as isArray, L as traverseElements, y as initProps, A as updateProps, M as saveOldStyle, x as labelInner, N as removeElementWithFadeOut, O as Group, F as map, h as getECData, Q as ChartView, R as Sector, U as Rect, V as extend, W as getLabelStatesModels, X as setLabelStyle, Y as setLabelValueAnimation, Z as toggleHoverEmphasis, $ as setStatesStylesFromModel, a0 as throttle, a1 as curry, a2 as layout, a3 as createProgressiveLayout, a4 as use, a5 as install$1, a6 as install$2, a7 as init, a8 as getCSSProperty, a9 as isValidColor, aa as formatValue } from './charting-DOZct-UB.js';
-import { c as createSeriesData, a as createClipPath, i as isCoordinateSystemType, g as getDefaultLabel, b as getDefaultInterpolatedLabel, d as dataSample, e as install$3, f as install$4 } from './dataSample-Dm1zpQNi.js';
-import { g as getSectorCornerRadius, i as installLabelLayout } from './sectorHelper--RMGWGAy.js';
+import { o as overrideFocus, i as isEventFromElement, l as loc } from './index-CP8pXJ-l.js';
+import { _ as __extends, v as each, H as SeriesModel, I as inheritDefaultOption, c as Path, J as calculateTextPosition, K as isNumber, E as isArray, L as traverseElements, y as initProps, A as updateProps, M as saveOldStyle, x as labelInner, N as removeElementWithFadeOut, O as Group, F as map, h as getECData, Q as ChartView, R as Sector, U as Rect, V as extend, W as getLabelStatesModels, X as setLabelStyle, Y as setLabelValueAnimation, Z as toggleHoverEmphasis, $ as setStatesStylesFromModel, a0 as throttle, a1 as curry, a2 as layout, a3 as createProgressiveLayout, a4 as use, a5 as install$1, a6 as install$2, a7 as createChartKeyboardNavigation, a8 as init, a9 as chartPointDescription, aa as formatValue, ab as getCSSProperty, ac as isValidColor } from './charting-DFXJklqs.js';
+import { c as createSeriesData, a as createClipPath, i as isCoordinateSystemType, g as getDefaultLabel, b as getDefaultInterpolatedLabel, d as dataSample, e as install$3, f as install$4 } from './dataSample-CP_VKNqt.js';
+import { g as getSectorCornerRadius, i as installLabelLayout } from './sectorHelper-DBtkWtpl.js';
 
 var BaseBarSeriesModel = /** @class */function (_super) {
   __extends(BaseBarSeriesModel, _super);
@@ -1253,12 +1253,24 @@ function install(registers) {
   });
 }
 
-const q2ChartBarCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{width:var(--tct-bar-chart-width, 100%);height:var(--tct-bar-chart-height, 100%);display:block}.container{width:100%;height:100%}.chart-container{width:100%;height:100%}`;
+const q2ChartBarCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{width:var(--tct-bar-chart-width, 100%);height:var(--tct-bar-chart-height, 100%);display:block}.container{position:relative;width:100%;height:100%}.chart-keyboard-value{position:absolute;top:0;right:0;padding:var(--app-scale-1x);background:var(--t-base);color:var(--t-text);pointer-events:none}.chart-container{width:100%;height:100%}`;
 
 use([install$1, install, install$2, installLabelLayout, install$3, install$4]);
 const Q2ChartBar = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.keyboard = createChartKeyboardNavigation({
+            getChart: () => this.chart,
+            getData: () => this.data,
+            onChange: index => (this.keyboardIndex = index),
+            getOrder: () => {
+                const indices = this.data.map((_, index) => index);
+                return this.sort ? indices.sort((a, b) => this.data[b].value - this.data[a].value) : indices;
+            },
+        });
+        // #endregion
+        // #region State Properties
+        this.keyboardIndex = null;
         /** An array of objects that contain the data to be displayed. */
         this.data = [];
         /** Controls visibility of labels on the name axis. */
@@ -1286,6 +1298,7 @@ const Q2ChartBar = class {
     // #endregion
     // #region Component Lifecycle Events
     disconnectedCallback() {
+        this.keyboard.onBlur();
         // Remove event listeners
         window.removeEventListener('resize', this.resizeEventListener);
         // Clean up chart instance
@@ -1315,14 +1328,30 @@ const Q2ChartBar = class {
         overrideFocus(this.hostElement);
     }
     // #endregion
+    // #region Listeners
+    delegateFocus(event) {
+        var _a;
+        if (isEventFromElement(event, this.hostElement) && this.data.length)
+            (_a = this.chartContainer) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    // #endregion
     // #region Watchers
     propsUpdates() {
         if (!this.chart)
             return;
         this.updateChart(this.chart);
+        this.keyboard.refresh();
     }
     // #endregion
     // #region Local Methods
+    get keyboardDescription() {
+        var _a;
+        const datum = this.data[this.keyboardIndex];
+        if (this.keyboardIndex === null || !datum)
+            return '';
+        const decimals = ((_a = this.formatModifier) === null || _a === void 0 ? void 0 : _a.includes('dec')) ? this.formatModifier.replace('dec', '') : 0;
+        return chartPointDescription(datum.name, formatValue(datum.value || 0, { type: this.format, decimals }), this.sort ? [...this.data].sort((a, b) => b.value - a.value).indexOf(datum) : this.keyboardIndex, this.data.length);
+    }
     cacheComputedStyles() {
         this.chartContainerStyles = getComputedStyle(this.chartContainer);
         this.hostElementStyles = getComputedStyle(this.hostElement);
@@ -1365,7 +1394,7 @@ const Q2ChartBar = class {
         chart.on('finished', this.chartFinishedListener);
     }
     updateChart(chart) {
-        var _a;
+        var _a, _b;
         const decimals = ((_a = this.formatModifier) === null || _a === void 0 ? void 0 : _a.includes('dec')) ? this.formatModifier.replace('dec', '') : 0;
         const valueAxis = {
             type: 'value',
@@ -1394,7 +1423,7 @@ const Q2ChartBar = class {
                 alignWithLabel: this.offsetDataNames,
             },
         };
-        return chart.setOption({
+        chart.setOption({
             aria: {
                 enabled: true,
             },
@@ -1430,11 +1459,13 @@ const Q2ChartBar = class {
                 },
             ],
         });
+        // ECharts ARIA sets role="img" when options change; retain the keyboard interaction role.
+        (_b = this.chartContainer) === null || _b === void 0 ? void 0 : _b.setAttribute('role', 'application');
     }
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '36a77a29d5e06363f2cd2267c298429cd2ef9864', class: "container" }, h("div", { key: 'e7382ecf3ed8323ffbf1c57a78c870d7d7c4b718', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "barChartContainer" })));
+        return (h("div", { key: '2764d138c5aee7d65df3361a7d4720e00ba13368', class: "container" }, h("div", { key: '864b3f1d5987a101ab008e37e99c874cc411c143', ref: el => (this.chartContainer = el), class: "chart-container", role: "application", tabIndex: this.data.length ? 0 : -1, "aria-describedby": "chart-keyboard-instructions", onFocus: this.keyboard.onFocus, onBlur: this.keyboard.onBlur, onKeyDown: this.keyboard.onKeyDown, "test-id": "barChartContainer" }), h("div", { key: '3b6aa42b27e86f75cd4d1fc3d2efe823b950864c', id: "chart-keyboard-instructions", class: "sr" }, loc('tecton.element.chart.keyboardInstructions')), h("div", { key: '5d216b8ccce18ea77f136fd43ab81db335b38d89', class: this.keyboardIndex === null ? 'sr' : 'chart-keyboard-value', role: "status", "aria-atomic": "true" }, this.keyboardDescription)));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-chart-donut.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-Cqkz7Bnm.js';
-import { o as overrideFocus, i as isEventFromElement, l as loc, g as isMobile } from './index-Cps4jSQM.js';
+import { l as loc, o as overrideFocus, i as isEventFromElement, g as isMobile } from './index-CP8pXJ-l.js';
 import { m as mirrorEmit } from './mirror-emit-DUjY_ucm.js';
-import { br as normalizeCssArray, U as Rect, _ as __extends, aX as ComponentModel, bs as toCamelCase, bt as env, bq as isString, bu as isDom, g as isFunction, bv as normalizeEvent, bw as transformLocalCoord, ao as convertToColorString, E as isArray, v as each$1, an as bind, bx as getPaddingFromTooltipModel, z as indexOf, r as retrieve2, ai as isObject, by as throwError, ar as ZRText, bz as getTooltipRenderMode, bA as createOrUpdate, bB as clear, bC as register, h as getECData, bD as findPointFromSeries, bE as findEventDispatcher, bF as createTooltipMarkup, bG as getValueLabel, bH as trim, bI as getAxisRawValue, bJ as TooltipMarkupStyleCreator, bK as normalizeTooltipFormatResult, bL as buildTooltipMarkup, bM as clone, bN as encodeHTML, bO as format, bP as formatTpl, p as parsePercent, b6 as getLayoutRect, bQ as unregister, bl as ComponentView, bR as preParseFinder, bS as queryReferringComponents, bT as Model, V as extend, a4 as use, bm as install$5, bU as noop, aZ as merge, bV as isNameSpecified, aD as createHashMap, F as map, K as isNumber, o as filter, O as Group$2, d as defaults, a1 as curry$1, bW as parse, bX as stringify, X as setLabelStyle, bY as enableHoverEmphasis, bn as createTextStyle, bZ as setTooltipConfig, b_ as box, b$ as createOrUpdatePatternFromDecal, ab as createSymbol, c0 as hasOwn, a_ as getLayoutParams, I as inheritDefaultOption, a$ as mergeLayoutParam, c1 as createIcon, A as updateProps, c2 as normalizeArcAngles, m as makeInner, aV as linearMap, P as Point, t as shiftLayoutOnY, R as Sector, N as removeElementWithFadeOut, Q as ChartView, y as initProps, M as saveOldStyle, $ as setStatesStylesFromModel, Z as toggleHoverEmphasis, W as getLabelStatesModels, a as Polyline, c3 as retrieve3, aJ as prepareSeriesDataSchema, aL as SeriesData, c4 as makeSeriesEncodeForNameBased, c5 as getPercentSeats, c6 as defaultEmphasis, H as SeriesModel, c7 as createLegacyDataSelectAction, a6 as install$6, a5 as install$7, a7 as init, a8 as getCSSProperty } from './charting-DOZct-UB.js';
-import { l as limitTurnAngle, a as limitSurfaceAngle, g as getSectorCornerRadius, s as setLabelLineStyle, b as getLabelLineStatesModels, i as installLabelLayout } from './sectorHelper--RMGWGAy.js';
+import { bt as normalizeCssArray, U as Rect, _ as __extends, aZ as ComponentModel, bu as toCamelCase, bv as env, bs as isString, bw as isDom, g as isFunction, bx as normalizeEvent, by as transformLocalCoord, aq as convertToColorString, E as isArray, v as each$1, ap as bind, bz as getPaddingFromTooltipModel, z as indexOf, r as retrieve2, ak as isObject, bA as throwError, at as ZRText, bB as getTooltipRenderMode, bC as createOrUpdate, bD as clear, bE as register, h as getECData, bF as findPointFromSeries, bG as findEventDispatcher, bH as createTooltipMarkup, bI as getValueLabel, bJ as trim, bK as getAxisRawValue, bL as TooltipMarkupStyleCreator, bM as normalizeTooltipFormatResult, bN as buildTooltipMarkup, bO as clone, bP as encodeHTML, bQ as format, bR as formatTpl, p as parsePercent, b8 as getLayoutRect, bS as unregister, bn as ComponentView, bT as preParseFinder, bU as queryReferringComponents, bV as Model, V as extend, a4 as use, bo as install$5, bW as noop, a$ as merge, bX as isNameSpecified, aF as createHashMap, F as map, K as isNumber, o as filter, O as Group$2, d as defaults, a1 as curry$1, bY as parse, bZ as stringify, X as setLabelStyle, b_ as enableHoverEmphasis, bp as createTextStyle, b$ as setTooltipConfig, c0 as box, c1 as createOrUpdatePatternFromDecal, ad as createSymbol, c2 as hasOwn, b0 as getLayoutParams, I as inheritDefaultOption, b1 as mergeLayoutParam, c3 as createIcon, A as updateProps, c4 as normalizeArcAngles, m as makeInner, aX as linearMap, P as Point, t as shiftLayoutOnY, R as Sector, N as removeElementWithFadeOut, Q as ChartView, y as initProps, M as saveOldStyle, $ as setStatesStylesFromModel, Z as toggleHoverEmphasis, W as getLabelStatesModels, a as Polyline, c5 as retrieve3, aL as prepareSeriesDataSchema, aN as SeriesData, c6 as makeSeriesEncodeForNameBased, c7 as getPercentSeats, c8 as defaultEmphasis, H as SeriesModel, c9 as createLegacyDataSelectAction, a6 as install$6, a5 as install$7, a9 as chartPointDescription, a8 as init, ab as getCSSProperty } from './charting-DFXJklqs.js';
+import { l as limitTurnAngle, a as limitSurfaceAngle, g as getSectorCornerRadius, s as setLabelLineStyle, b as getLabelLineStatesModels, i as installLabelLayout } from './sectorHelper-DBtkWtpl.js';
 
 function makeBackground(rect, componentModel) {
   var padding = normalizeCssArray(componentModel.get('padding'));
@@ -4046,6 +4046,7 @@ const Q2ChartDonut = class {
         this.tctChange = createEvent(this, "tctChange", 7);
         this.tctClick = createEvent(this, "tctClick", 7);
         this.defaultRecord = { id: null, value: null, name: null };
+        this.keyboardAnnouncement = '';
         /** An array of objects that contain the data to be displayed. */
         this.data = [];
         /** The amount which the slice will scale when hovered. */
@@ -4085,6 +4086,8 @@ const Q2ChartDonut = class {
         };
         this.onButtonKeyDown = (event) => {
             const { selectedId, data } = this;
+            if (!data.length || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+                return;
             let selectedIndex = this.getIndexById(selectedId) || 0;
             switch (event.key) {
                 case 'ArrowUp':
@@ -4114,14 +4117,23 @@ const Q2ChartDonut = class {
                     });
                     break;
                 case 'Escape':
+                    event.preventDefault();
                     this.clearSelection();
-                    break;
-                case ' ':
+                    this.keyboardAnnouncement = loc(this.summaryName || 'tecton.element.chartDonut.button.summaryName');
+                    return;
+                case 'Home':
+                case 'End':
                     event.preventDefault();
+                    selectedIndex = event.key === 'Home' ? 0 : data.length - 1;
+                    this.chart.dispatchAction({ type: 'select', seriesId: 'pie', dataIndex: selectedIndex });
                     break;
                 default:
                     return;
             }
+            if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
+                const datum = data[selectedIndex];
+                this.keyboardAnnouncement = chartPointDescription(datum.name, this.displayValue(datum.value), selectedIndex, data.length);
+            }
         };
         this.onClickElsewhere = (event) => {
             event.stopPropagation();
@@ -4221,12 +4233,13 @@ const Q2ChartDonut = class {
     // #endregion
     // #region Listeners
     delegateFocus(event) {
-        var _a;
+        var _a, _b;
         if (!isEventFromElement(event, this.hostElement))
             return;
-        if (!this.isClickable)
-            return;
-        (_a = this.centerButtonElement) === null || _a === void 0 ? void 0 : _a.focus();
+        if (this.isClickable)
+            (_a = this.centerButtonElement) === null || _a === void 0 ? void 0 : _a.focus();
+        else if (this.data.length)
+            (_b = this.chartContainer) === null || _b === void 0 ? void 0 : _b.focus();
     }
     // #endregion
     // #region Public Methods API
@@ -4297,6 +4310,7 @@ const Q2ChartDonut = class {
         this.updateChart(this.chart);
     }
     dataUpdated() {
+        this.keyboardAnnouncement = '';
         if (!this.chart)
             return;
         this.colors = this.getColors();
@@ -4472,8 +4486,9 @@ const Q2ChartDonut = class {
         });
     }
     updateChart(chart) {
+        var _a;
         this.validateColor();
-        return chart.setOption({
+        chart.setOption({
             tooltip: {
                 show: false,
             },
@@ -4515,6 +4530,8 @@ const Q2ChartDonut = class {
                 },
             ],
         });
+        // The clickable variant handles keyboard interaction on its native center button.
+        (_a = this.chartContainer) === null || _a === void 0 ? void 0 : _a.setAttribute('role', this.isClickable ? 'img' : 'application');
     }
     validateColor() {
         // check if there is name duplicated, then custom style using `itemStyle` object will be used.
@@ -4538,20 +4555,21 @@ const Q2ChartDonut = class {
         const props = isClickable
             ? {
                 onKeyDown: this.onButtonKeyDown,
+                onBlur: () => (this.keyboardAnnouncement = ''),
                 onClick: this.onButtonClick,
                 ref: el => (this.centerButtonElement = el),
-                'aria-describedby': 'center-card-description',
+                'aria-describedby': 'center-card-description chart-keyboard-instructions',
                 'aria-roledescription': loc('tecton.element.chartDonut.button.roleDescription'),
             }
             : null;
-        return (h("div", { class: "center-card-container", style: { width: `calc(${this.innerRadius})`, height: `calc(${this.innerRadius})` } }, h("div", { id: "center-card-description", class: "sr" }, loc('tecton.element.chartDonut.button.description')), h(TagName, { class: "center-card", "test-id": "centerCard", ...props }, !!icon && (h("q2-icon", { type: icon, style: color && {
+        return (h("div", { class: "center-card-container", style: { width: `calc(${this.innerRadius})`, height: `calc(${this.innerRadius})` } }, h("div", { id: "center-card-description", class: "sr" }, loc('tecton.element.chartDonut.button.description')), h("div", { id: "chart-keyboard-instructions", class: "sr" }, loc('tecton.element.chart.keyboardInstructions')), h(TagName, { class: "center-card", "test-id": "centerCard", ...props }, !!icon && (h("q2-icon", { type: icon, style: color && {
                 '--tct-icon-stroke-primary': color,
                 '--tct-icon-stroke-secondary': color,
                 color,
             } })), !!name && h("div", { class: "name" }, name), !isNaN(value) && h("div", { class: "value" }, displayValue))));
     }
     render() {
-        return (h("click-elsewhere", { key: '27c21f281ef0746c9bd9d7235fa1833df7711e4d', onChange: this.onClickElsewhere }, h("figure", { key: '8356a94846a4319b682e3bc3171e6a71afb228f8' }, h("div", { key: 'a6b016aaa11371fdff673eb8cd7508bb5f3ce852', class: "container" }, h("div", { key: '862baeb8b1c1e096c92d260bc7340666875f9763', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description' : undefined, class: "chart-container", role: "img", "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined }), this.renderCenterBlock()), this.showLegend && (h("figcaption", { key: '24f16b0d7afd3a6433c58cd8eb6806785fc938e5' }, h("q2-legend", { key: '6bd27b69926b77181ab16726bb4e79c91e4dcc37', class: "legend", data: this.legendData, format: this.format, currencyRound: this.currencyRound, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
+        return (h("click-elsewhere", { key: '54e5d16621ac527fec69834b2c1cc1e7d2c6540b', onChange: this.onClickElsewhere }, h("figure", { key: '61e0c1e30fed4e89816d228c1c190b5bd38991a3' }, h("div", { key: '0685b804780ebdf17d7bfe5956306a027c3c9dba', class: "container" }, h("div", { key: '458dfa5c6ad8d704de66d4d51461e2d7b28ba13c', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description chart-keyboard-instructions' : undefined, class: "chart-container", role: this.isClickable ? 'img' : 'application', "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable && this.data.length ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined, onBlur: () => (this.keyboardAnnouncement = '') }), this.renderCenterBlock(), h("div", { key: '105396c05b8aa162b1c0515cb4b96dadafcca911', class: "sr", role: "status", "aria-atomic": "true" }, this.keyboardAnnouncement)), this.showLegend && (h("figcaption", { key: 'c6462ae033852ff7fa09d752e4fc8860608448c6' }, h("q2-legend", { key: 'd8f1ceb9b46392264b306d316d1fb6066b2f5b4d', class: "legend", data: this.legendData, format: this.format, currencyRound: this.currencyRound, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-checkbox-group.entry.js

@@ -1,9 +1,9 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-Cqkz7Bnm.js';
-import { c as createGuid, r as renderLabel } from './index-Cps4jSQM.js';
+import { c as createGuid, r as renderLabel } from './index-CP8pXJ-l.js';
 import { m as mirrorEmit } from './mirror-emit-DUjY_ucm.js';
 import { h as hasValidChildren } from './component-DaQM9u3s.js';
 
-const q2CheckboxGroupCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{--comp-default-checkbox-group-margin:var(--tct-checkbox-group-margin-top, var(--t-checkbox-group-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-checkbox-group-margin-bottom, var(--t-checkbox-group-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-checkbox-group-margin, var(--comp-default-checkbox-group-margin))}fieldset{padding:var(--tct-checkbox-group-fieldset-padding, 0);margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:"label icon";column-gap:var(--tct-checkbox-group-label-column-gap, var(--app-scale-2x, 10px));color:var(--tct-checkbox-group-label-font-color, inherit);font-size:var(--tct-checkbox-group-label-font-size, inherit);font-weight:var(--tct-checkbox-group-label-font-weight, 600);text-transform:var(--tct-checkbox-group-label-text-transform, none);letter-spacing:var(--tct-checkbox-group-label-letter-spacing, inherit)}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.slot-container{--comp-default-container-margin:var(--app-scale-1x, 5px) 0;margin:var(--tct-checkbox-group-container-margin, var(--comp-default-container-margin));padding:var(--tct-checkbox-group-container-padding, var(--app-scale-1x, 5px));border-width:var(--tct-checkbox-group-border-width, 1px);border-color:transparent;border-style:solid;border-radius:var(--tct-checkbox-group-border-radius, var(--app-border-radius-1, 4px))}:host([has-error]) .slot-container{border-color:var(--tct-checkbox-group-error-border-color, var(--const-stoplight-alert, #d20a0a))}:host([has-error=false]) .slot-container{border-color:transparent}.optional-tag{margin-left:var(--tct-checkbox-group-label-optional-margin-left, var(--app-scale-1x, 5px));color:var(--tct-checkbox-group-label-optional-color, var(--t-checkbox-group-label-optional-color, var(--tct-a11y-color, var(--t-a11y-color, var(--tct-a11y-gray-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--t-gray-d1, var(--app-gray-d1, rgba(77, 77, 77, 0.77))))))))))));font-size:var(--tct-checkbox-group-label-optional-font-size, var(--const-px-12, 12px));font-weight:var(--tct-checkbox-group-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}`;
+const q2CheckboxGroupCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{--comp-default-checkbox-group-margin:var(--tct-checkbox-group-margin-top, var(--t-checkbox-group-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-checkbox-group-margin-bottom, var(--t-checkbox-group-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-checkbox-group-margin, var(--comp-default-checkbox-group-margin))}fieldset{padding:var(--tct-checkbox-group-fieldset-padding, 0);margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:"label icon";column-gap:var(--tct-checkbox-group-label-column-gap, var(--app-scale-2x, 10px));color:var(--tct-checkbox-group-label-font-color, inherit);font-size:var(--tct-checkbox-group-label-font-size, inherit);font-weight:var(--tct-checkbox-group-label-font-weight, 600);text-transform:var(--tct-checkbox-group-label-text-transform, none);letter-spacing:var(--tct-checkbox-group-label-letter-spacing, inherit);line-height:var(--tct-checkbox-group-label-line-height, inherit)}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.slot-container{--comp-default-container-margin:var(--app-scale-1x, 5px) 0;margin:var(--tct-checkbox-group-container-margin, var(--comp-default-container-margin));padding:var(--tct-checkbox-group-container-padding, var(--app-scale-1x, 5px));border-width:var(--tct-checkbox-group-border-width, 1px);border-color:transparent;border-style:solid;border-radius:var(--tct-checkbox-group-border-radius, var(--app-border-radius-1, 4px))}:host([has-error]) .slot-container{border-color:var(--tct-checkbox-group-error-border-color, var(--const-stoplight-alert, #d20a0a))}:host([has-error=false]) .slot-container{border-color:transparent}.optional-tag{margin-left:var(--tct-checkbox-group-label-optional-margin-left, var(--app-scale-1x, 5px));color:var(--tct-checkbox-group-label-optional-color, var(--t-checkbox-group-label-optional-color, var(--tct-a11y-color, var(--t-a11y-color, var(--tct-a11y-gray-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--t-gray-d1, var(--app-gray-d1, rgba(77, 77, 77, 0.77))))))))))));font-size:var(--tct-checkbox-group-label-optional-font-size, var(--const-px-12, 12px));font-weight:var(--tct-checkbox-group-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}`;
 
 const Q2CheckboxGroup = class {
     constructor(hostRef) {
@@ -120,7 +120,7 @@ const Q2CheckboxGroup = class {
     render() {
         const showLabel = this.label || this.optional || this.readonly;
         const showLabelRow = (showLabel && !this.hideLabel) || this.hasError;
-        return (h(Fragment, { key: '4e9159cc489b8c2ed9adf3c8263355994364780e' }, showLabelRow && (h("div", { key: '85c21ddc03d2abaf4e78b1922dcf3705ec673fc9', class: "label-row" }, showLabel && !this.hideLabel && h("div", { key: '071eb3359b048a5e7f89f7c525362e065707a8fe', class: "group-legend" }, renderLabel(this)), this.hasError && (h("q2-icon", { key: '76a591fb52671d43351322faa488608128320183', type: "error", "test-id": "iconError" })))), h("fieldset", { key: '0bcc9a5419df7ab0bf2abfc6189983e6cf5bd779', onChange: this.onInnerCheckboxChange, "aria-invalid": this.hasError ? `${this.hasError}` : undefined }, showLabel && h("legend", { key: 'c6a5f3ec8289091b6d113a36d2fed9b83a5c7088', class: "sr-only" }, renderLabel(this)), this.inputDom())));
+        return (h(Fragment, { key: 'ed664b9829dbea3e8e6fe3809dd2528a2a37b011' }, showLabelRow && (h("div", { key: '101b950b7aacfbc6dab450ad2c13a7a86af40936', class: "label-row" }, showLabel && !this.hideLabel && h("div", { key: '70330c12aefedf7f7b7f7cbe4e0a745cca667181', class: "group-legend" }, renderLabel(this)), this.hasError && (h("q2-icon", { key: '31eb9fac43cbf80696276c7d96945a3f267610d3', type: "error", "test-id": "iconError" })))), h("fieldset", { key: '200264b3fb882445dc5610155e28b137e2334ad2', onChange: this.onInnerCheckboxChange, "aria-invalid": this.hasError ? `${this.hasError}` : undefined }, showLabel && h("legend", { key: 'ef85eb7ca6ef53496a5fc7d0198f03d3a8fb129e', class: "sr-only" }, renderLabel(this)), this.inputDom())));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {