q2-tecton-elements 1.72.0 → 1.73.0

package/dist/components/q2-chart-bar.js

@@ -1,20 +1,20 @@
 import { proxyCustomElement as t, HTMLElement as e, h as a, transformTag as r } from "@stencil/core/internal/client";
 
-import { o as i, l as s } from "./index2.js";
+import { o as i, i as s, l as n } from "./index2.js";
 
-import { _ as n, J as o, S as h, ah as d, w as l, ai as c, o as u, a1 as p, h as f, i as v, u as m, s as g, I as b, aj as w, G as y, m as B, d as A, C as S, U as M, V as x, a as k, g as N, b as V, ak as U, t as C, A as P, al as L, am as D, an as z, ao as j, aa as E, af as O, ag as T, ab as I, ac as R, ad as W, ae as X } from "./charting.js";
+import { _ as o, J as h, S as d, aj as l, w as c, ak as u, o as p, a1 as f, h as v, i as m, u as g, s as b, I as w, al as y, G as B, m as A, d as S, C as M, U as x, V as k, a as N, g as V, b as U, am as C, t as P, A as D, an as L, ao as z, ap as j, aq as I, aa as O, ah as E, ai as T, ab as R, ac as W, ad as X, ae as Y, af as _, ag as q } from "./charting.js";
 
-import { c as Y, j as _, i as q, g as H, a as F, e as G, f as J, h as K } from "./dataSample.js";
+import { c as F, j as H, i as G, g as J, a as K, e as Q, f as Z, h as $ } from "./dataSample.js";
 
-import { g as Q, i as Z } from "./sectorHelper.js";
+import { g as tt, i as et } from "./sectorHelper.js";
 
-var $ = /** @class */ function(t) {
+var at = /** @class */ function(t) {
   function BaseBarSeriesModel() {
     var e = null !== t && t.apply(this, arguments) || this;
     return e.type = BaseBarSeriesModel.type, e;
   }
-  return n(BaseBarSeriesModel, t), BaseBarSeriesModel.prototype.getInitialData = function(t, e) {
-    return Y(null, this, {
+  return o(BaseBarSeriesModel, t), BaseBarSeriesModel.prototype.getInitialData = function(t, e) {
+    return F(null, this, {
       useEncodeDefaulter: !0
     });
   }, BaseBarSeriesModel.prototype.getMarkerPosition = function(t, e, a) {
@@ -22,7 +22,7 @@ var $ = /** @class */ function(t) {
     if (r && r.clampData) {
       // PENDING if clamp ?
       var i = r.clampData(t), s = r.dataToPoint(i);
-      if (a) o(r.getAxes(), (function(t, a) {
+      if (a) h(r.getAxes(), (function(t, a) {
         // If axis type is category, use tick coords instead
         if ("category" === t.type && null != e) {
           var r = t.getTicksCoords(), n = t.getTickModel().get("alignWithLabel"), o = i[a], h = "x1" === e[a] || "y1" === e[a];
@@ -61,8 +61,8 @@ var $ = /** @class */ function(t) {
           l = r[0].coord), s[a] = t.toGlobalCoord(l);
         }
       })); else {
-        var n = this.getData(), h = n.getLayout("offset"), d = n.getLayout("size"), l = r.getBaseAxis().isHorizontal() ? 0 : 1;
-        s[l] += h + d / 2;
+        var n = this.getData(), o = n.getLayout("offset"), d = n.getLayout("size"), l = r.getBaseAxis().isHorizontal() ? 0 : 1;
+        s[l] += o + d / 2;
       }
       return s;
     }
@@ -84,17 +84,17 @@ var $ = /** @class */ function(t) {
     progressive: 3e3,
     progressiveChunkMode: "mod"
   }, BaseBarSeriesModel;
-}(h);
+}(d);
 
-h.registerClass($);
+d.registerClass(at);
 
-var tt = /** @class */ function(t) {
+var rt = /** @class */ function(t) {
   function BarSeriesModel() {
     var e = null !== t && t.apply(this, arguments) || this;
     return e.type = BarSeriesModel.type, e;
   }
-  return n(BarSeriesModel, t), BarSeriesModel.prototype.getInitialData = function() {
-    return Y(null, this, {
+  return o(BarSeriesModel, t), BarSeriesModel.prototype.getInitialData = function() {
+    return F(null, this, {
       useEncodeDefaulter: !0,
       createInvertedIndices: !!this.get("realtimeSort", !0) || null
     });
@@ -116,7 +116,7 @@ var tt = /** @class */ function(t) {
   }, BarSeriesModel.prototype.brushSelector = function(t, e, a) {
     return a.rect(e.getItemLayout(t));
   }, BarSeriesModel.type = "series.bar", BarSeriesModel.dependencies = [ "grid", "polar" ], 
-  BarSeriesModel.defaultOption = d($.defaultOption, {
+  BarSeriesModel.defaultOption = l(at.defaultOption, {
     // If clipped
     // Only available on cartesian2d
     clip: !0,
@@ -141,15 +141,15 @@ var tt = /** @class */ function(t) {
     },
     realtimeSort: !1
   }), BarSeriesModel;
-}($), SausageShape = function() {
+}(at), SausageShape = function() {
   this.cx = 0, this.cy = 0, this.r0 = 0, this.r = 0, this.startAngle = 0, this.endAngle = 2 * Math.PI, 
   this.clockwise = !0;
-}, et = /** @class */ function(t) {
+}, it = /** @class */ function(t) {
   function SausagePath(e) {
     var a = t.call(this, e) || this;
     return a.type = "sausage", a;
   }
-  return n(SausagePath, t), SausagePath.prototype.getDefaultShape = function() {
+  return o(SausagePath, t), SausagePath.prototype.getDefaultShape = function() {
     return new SausageShape;
   }, SausagePath.prototype.buildPath = function(t, e) {
     var a = e.cx, r = e.cy, i = Math.max(e.r0 || 0, 0), s = Math.max(e.r, 0), n = .5 * (s - i), o = i + n, h = e.startAngle, d = e.endAngle, l = e.clockwise, c = 2 * Math.PI, u = l ? d - h < c : h - d < c;
@@ -161,7 +161,7 @@ var tt = /** @class */ function(t) {
     t.arc(a, r, s, h, d, !l), t.arc(v * o + a, m * o + r, n, d - 2 * Math.PI, d - Math.PI, !l), 
     0 !== i && t.arc(a, r, i, d, h, l);
   }, SausagePath;
-}(l);
+}(c);
 
 /**
  * Sausage: similar to sector, but have half circle on both sides
@@ -173,14 +173,14 @@ function adjustAngleDistanceY(t, e, a) {
   return e * Math.cos(t) * (a ? 1 : -1);
 }
 
-var at = Math.max, rt = Math.min;
+var st = Math.max, nt = Math.min;
 
-var it = /** @class */ function(t) {
+var ot = /** @class */ function(t) {
   function BarView() {
     var e = t.call(this) || this;
     return e.type = BarView.type, e._isFirstFrame = !0, e;
   }
-  return n(BarView, t), BarView.prototype.render = function(t, e, a, r) {
+  return o(BarView, t), BarView.prototype.render = function(t, e, a, r) {
     this._model = t, this._removeOnRenderedListener(a), this._updateDrawMode(t);
     var i = t.get("coordinateSystem");
     "cartesian2d" !== i && "polar" !== i || (
@@ -197,7 +197,7 @@ var it = /** @class */ function(t) {
     // Do not support progressive in normal mode.
     this._incrementalRenderLarge(t, e);
   }, BarView.prototype.eachRendered = function(t) {
-    f(this._progressiveEls || this.group, t);
+    v(this._progressiveEls || this.group, t);
   }, BarView.prototype._updateDrawMode = function(t) {
     var e = t.pipelineContext.large;
     null != this._isLargeDraw && e === this._isLargeDraw || (this._isLargeDraw = e, 
@@ -215,7 +215,7 @@ var it = /** @class */ function(t) {
     c && this._enableRealtimeSort(c, n, a);
     var u = t.get("clip", !0) || c, p = function(t, e) {
       var a = t.getArea && t.getArea();
-      if (q(t, "cartesian2d")) {
+      if (G(t, "cartesian2d")) {
         var r = t.getBaseAxis();
         // When boundaryGap is false or using time axis. bar may exceed the grid.
         // We should not clip this part.
@@ -231,10 +231,10 @@ var it = /** @class */ function(t) {
     s.removeClipPath();
     // We don't use clipPath in normal mode because we needs a perfect animation
     // And don't want the label are clipped.
-    var f = t.get("roundCap", !0), B = t.get("showBackground", !0), A = t.getModel("backgroundStyle"), S = A.get("borderRadius") || 0, k = [], N = this._backgroundEls, V = r && r.isInitSort, U = r && "changeAxisOrder" === r.type;
+    var f = t.get("roundCap", !0), v = t.get("showBackground", !0), A = t.getModel("backgroundStyle"), S = A.get("borderRadius") || 0, M = [], N = this._backgroundEls, V = r && r.isInitSort, U = r && "changeAxisOrder" === r.type;
     function createBackground(t) {
-      var e = lt[h.type](n, t), a = function(t, e, a) {
-        var r = "polar" === t.type ? M : x;
+      var e = pt[h.type](n, t), a = function(t, e, a) {
+        var r = "polar" === t.type ? x : k;
         return new r({
           shape: createBackgroundShape(e, a, t),
           silent: !0,
@@ -243,19 +243,19 @@ var it = /** @class */ function(t) {
       }(h, i, e);
       return a.useStyle(A.getItemStyle()), 
       // Only cartesian2d support borderRadius.
-      "cartesian2d" === h.type ? a.setShape("r", S) : a.setShape("cornerRadius", S), k[t] = a, 
+      "cartesian2d" === h.type ? a.setShape("r", S) : a.setShape("cornerRadius", S), M[t] = a, 
       a;
     }
     n.diff(o).add((function(e) {
-      var a = n.getItemModel(e), r = lt[h.type](n, e, a);
+      var a = n.getItemModel(e), r = pt[h.type](n, e, a);
       // If dataZoom in filteMode: 'empty', the baseValue can be set as NaN in "axisProxy".
-      if (B && createBackground(e), n.hasValue(e) && dt[h.type](r)) {
+      if (v && createBackground(e), n.hasValue(e) && ut[h.type](r)) {
         var o = !1;
         u && (
         // Clip will modify the layout params.
         // And return a boolean to determine if the shape are fully clipped.
-        o = st[h.type](p, r));
-        var m = nt[h.type](t, n, e, r, i, l, d.model, !1, f);
+        o = ht[h.type](p, r));
+        var g = dt[h.type](t, n, e, r, i, l, d.model, !1, f);
         c && (
         /**
          * Force label animation because even if the element is
@@ -265,67 +265,67 @@ var it = /** @class */ function(t) {
          * the label will be the final value and doesn't have label
          * animation.
          */
-        m.forceLabelAnimation = !0), updateStyle(m, n, e, a, r, t, i, "polar" === h.type), 
-        V ? m.attr({
+        g.forceLabelAnimation = !0), updateStyle(g, n, e, a, r, t, i, "polar" === h.type), 
+        V ? g.attr({
           shape: r
-        }) : c ? updateRealtimeAnimation(c, l, m, r, e, i, !1, !1) : v(m, {
+        }) : c ? updateRealtimeAnimation(c, l, g, r, e, i, !1, !1) : m(g, {
           shape: r
-        }, t, e), n.setItemGraphicEl(e, m), s.add(m), m.ignore = o;
+        }, t, e), n.setItemGraphicEl(e, g), s.add(g), g.ignore = o;
       }
     })).update((function(e, a) {
-      var r = n.getItemModel(e), v = lt[h.type](n, e, r);
-      if (B) {
-        var w = void 0;
-        0 === N.length ? w = createBackground(a) : ((w = N[a]).useStyle(A.getItemStyle()), 
+      var r = n.getItemModel(e), m = pt[h.type](n, e, r);
+      if (v) {
+        var y = void 0;
+        0 === N.length ? y = createBackground(a) : ((y = N[a]).useStyle(A.getItemStyle()), 
         // Only cartesian2d support borderRadius.
-        "cartesian2d" === h.type ? w.setShape("r", S) : w.setShape("cornerRadius", S), k[e] = w);
-        var y = lt[h.type](n, e), M = createBackgroundShape(i, y, h);
-        m(w, {
-          shape: M
+        "cartesian2d" === h.type ? y.setShape("r", S) : y.setShape("cornerRadius", S), M[e] = y);
+        var B = pt[h.type](n, e), x = createBackgroundShape(i, B, h);
+        g(y, {
+          shape: x
         }, l, e);
       }
-      var x = o.getItemGraphicEl(a);
-      if (n.hasValue(e) && dt[h.type](v)) {
+      var k = o.getItemGraphicEl(a);
+      if (n.hasValue(e) && ut[h.type](m)) {
         var C = !1;
-        if (u && (C = st[h.type](p, v)) && s.remove(x), x ? g(x) : x = nt[h.type](t, n, e, v, i, l, d.model, !!x, f), 
-        c && (x.forceLabelAnimation = !0), U) {
-          var P = x.getTextContent();
+        if (u && (C = ht[h.type](p, m)) && s.remove(k), k ? b(k) : k = dt[h.type](t, n, e, m, i, l, d.model, !!k, f), 
+        c && (k.forceLabelAnimation = !0), U) {
+          var P = k.getTextContent();
           if (P) {
-            var L = b(P);
-            null != L.prevValue && (
+            var D = w(P);
+            null != D.prevValue && (
             /**
              * Set preValue to be value so that no new label
              * should be started, otherwise, it will take a full
              * `animationDurationUpdate` time to finish the
              * animation, which is not expected.
              */
-            L.prevValue = L.value);
+            D.prevValue = D.value);
           }
         }
         // Not change anything if only order changed.
         // Especially not change label.
-         else updateStyle(x, n, e, r, v, t, i, "polar" === h.type);
-        V ? x.attr({
-          shape: v
-        }) : c ? updateRealtimeAnimation(c, l, x, v, e, i, !0, U) : m(x, {
-          shape: v
-        }, t, e, null), n.setItemGraphicEl(e, x), x.ignore = C, s.add(x);
-      } else s.remove(x);
+         else updateStyle(k, n, e, r, m, t, i, "polar" === h.type);
+        V ? k.attr({
+          shape: m
+        }) : c ? updateRealtimeAnimation(c, l, k, m, e, i, !0, U) : g(k, {
+          shape: m
+        }, t, e, null), n.setItemGraphicEl(e, k), k.ignore = C, s.add(k);
+      } else s.remove(k);
     })).remove((function(e) {
       var a = o.getItemGraphicEl(e);
-      a && w(a, t, e);
+      a && y(a, t, e);
     })).execute();
-    var C = this._backgroundGroup || (this._backgroundGroup = new y);
+    var C = this._backgroundGroup || (this._backgroundGroup = new B);
     C.removeAll();
-    for (var P = 0; P < k.length; ++P) C.add(k[P]);
-    s.add(C), this._backgroundEls = k, this._data = n;
+    for (var P = 0; P < M.length; ++P) C.add(M[P]);
+    s.add(C), this._backgroundEls = M, this._data = n;
   }, BarView.prototype._renderLarge = function(t, e, a) {
     this._clear(), createLarge(t, this.group), this._updateLargeClip(t);
   }, BarView.prototype._incrementalRenderLarge = function(t, e) {
     this._removeBackground(), createLarge(e, this.group, this._progressiveEls, !0);
   }, BarView.prototype._updateLargeClip = function(t) {
     // Use clipPath in large mode.
-    var e = t.get("clip", !0) && _(t.coordinateSystem, !1, t), a = this.group;
+    var e = t.get("clip", !0) && H(t.coordinateSystem, !1, t), a = this.group;
     e ? a.setClipPath(e) : a.removeClipPath();
   }, BarView.prototype._enableRealtimeSort = function(t, e, a) {
     var r = this;
@@ -358,7 +358,7 @@ var it = /** @class */ function(t) {
       // If NaN, it will be treated as min val.
       return e.mappedValue - t.mappedValue;
     })), {
-      ordinalNumbers: B(r, (function(t) {
+      ordinalNumbers: A(r, (function(t) {
         return t.ordinalNumber;
       }))
     };
@@ -408,17 +408,17 @@ var it = /** @class */ function(t) {
     var e = this.group, a = this._data;
     t && t.isAnimationEnabled() && a && !this._isLargeDraw ? (this._removeBackground(), 
     this._backgroundEls = [], a.eachItemGraphicEl((function(e) {
-      w(e, t, A(e).dataIndex);
+      y(e, t, S(e).dataIndex);
     }))) : e.removeAll(), this._data = null, this._isFirstFrame = !0;
   }, BarView.prototype._removeBackground = function() {
     this.group.remove(this._backgroundGroup), this._backgroundGroup = null;
   }, BarView.type = "bar", BarView;
-}(S), st = {
+}(M), ht = {
   cartesian2d: function(t, e) {
     var a = e.width < 0 ? -1 : 1, r = e.height < 0 ? -1 : 1;
     // Needs positive width and height
     a < 0 && (e.x += e.width, e.width = -e.width), r < 0 && (e.y += e.height, e.height = -e.height);
-    var i = t.x + t.width, s = t.y + t.height, n = at(e.x, t.x), o = rt(e.x + e.width, i), h = at(e.y, t.y), d = rt(e.y + e.height, s), l = o < n, c = d < h;
+    var i = t.x + t.width, s = t.y + t.height, n = st(e.x, t.x), o = nt(e.x + e.width, i), h = st(e.y, t.y), d = nt(e.y + e.height, s), l = o < n, c = d < h;
     // When xClipped or yClipped, the element will be marked as `ignore`.
     // But we should also place the element at the edge of the coord sys bounding rect.
     // Because if data changed and the bar shows again, its transition animation
@@ -436,7 +436,7 @@ var it = /** @class */ function(t) {
       var r = e.r;
       e.r = e.r0, e.r0 = r;
     }
-    var i = rt(e.r, t.r), s = at(e.r0, t.r0);
+    var i = nt(e.r, t.r), s = st(e.r0, t.r0);
     e.r = i, e.r0 = s;
     var n = i - s < 0;
     // Reverse back
@@ -446,29 +446,29 @@ var it = /** @class */ function(t) {
     }
     return n;
   }
-}, nt = {
+}, dt = {
   cartesian2d: function(t, e, a, r, i, s, n, o, h) {
-    var d = new x({
-      shape: k({}, r),
+    var d = new k({
+      shape: N({}, r),
       z2: 1
     });
     (d.__dataIndex = a, d.name = "item", s) && (d.shape[i ? "height" : "width"] = 0);
     return d;
   },
   polar: function(t, e, a, r, i, s, n, o, h) {
-    var d = !i && h ? et : M, l = new d({
+    var d = !i && h ? it : x, l = new d({
       shape: r,
       z2: 1
     });
     l.name = "item";
-    var u = createPolarPositionMapping(i);
+    var c = createPolarPositionMapping(i);
     // Animation
     if (l.calculateTextPosition = function(t, e) {
       var a = (e = e || {}).isRoundCap;
       return function(e, r, i) {
         var s = r.position;
-        if (!s || s instanceof Array) return c(e, r, i);
-        var n = t(s), o = null != r.distance ? r.distance : 5, h = this.shape, d = h.cx, l = h.cy, u = h.r, p = h.r0, f = (u + p) / 2, v = h.startAngle, m = h.endAngle, g = (v + m) / 2, b = a ? Math.abs(u - p) / 2 : 0, w = Math.cos, y = Math.sin, B = d + u * w(v), A = l + u * y(v), S = "left", M = "top";
+        if (!s || s instanceof Array) return u(e, r, i);
+        var n = t(s), o = null != r.distance ? r.distance : 5, h = this.shape, d = h.cx, l = h.cy, c = h.r, p = h.r0, f = (c + p) / 2, v = h.startAngle, m = h.endAngle, g = (v + m) / 2, b = a ? Math.abs(c - p) / 2 : 0, w = Math.cos, y = Math.sin, B = d + c * w(v), A = l + c * y(v), S = "left", M = "top";
         switch (n) {
          case "startArc":
           B = d + (p - o) * w(g), A = l + (p - o) * y(g), S = "center", M = "top";
@@ -493,11 +493,11 @@ var it = /** @class */ function(t) {
           break;
 
          case "endArc":
-          B = d + (u + o) * w(g), A = l + (u + o) * y(g), S = "center", M = "bottom";
+          B = d + (c + o) * w(g), A = l + (c + o) * y(g), S = "center", M = "bottom";
           break;
 
          case "insideEndArc":
-          B = d + (u - o) * w(g), A = l + (u - o) * y(g), S = "center", M = "top";
+          B = d + (c - o) * w(g), A = l + (c - o) * y(g), S = "center", M = "top";
           break;
 
          case "endAngle":
@@ -511,15 +511,15 @@ var it = /** @class */ function(t) {
           break;
 
          default:
-          return c(e, r, i);
+          return u(e, r, i);
         }
         return (e = e || {}).x = B, e.y = A, e.align = S, e.verticalAlign = M, e;
       };
-    }(u, {
-      isRoundCap: d === et
+    }(c, {
+      isRoundCap: d === it
     }), s) {
       var p = i ? "r" : "endAngle", f = {};
-      l.shape[p] = i ? r.r0 : r.startAngle, f[p] = r[p], (o ? m : v)(l, {
+      l.shape[p] = i ? r.r0 : r.startAngle, f[p] = r[p], (o ? g : m)(l, {
         shape: f
       }, s);
     }
@@ -544,11 +544,11 @@ function updateRealtimeAnimation(t, e, a, r, i, s, n, o) {
   }), o || 
   // Keep the original growth animation if only axis order changed.
   // Not start a new animation.
-  (n ? m : v)(a, {
+  (n ? g : m)(a, {
     shape: h
   }, e, i, null);
   var l = e ? t.baseAxis.model : null;
-  (n ? m : v)(a, {
+  (n ? g : m)(a, {
     shape: d
   }, l, i);
 }
@@ -558,14 +558,14 @@ function checkPropertiesNotValid(t, e) {
   return !1;
 }
 
-var ot = [ "x", "y", "width", "height" ], ht = [ "cx", "cy", "r", "startAngle", "endAngle" ], dt = {
+var lt = [ "x", "y", "width", "height" ], ct = [ "cx", "cy", "r", "startAngle", "endAngle" ], ut = {
   cartesian2d: function(t) {
-    return !checkPropertiesNotValid(t, ot);
+    return !checkPropertiesNotValid(t, lt);
   },
   polar: function(t) {
-    return !checkPropertiesNotValid(t, ht);
+    return !checkPropertiesNotValid(t, ct);
   }
-}, lt = {
+}, pt = {
   // itemModel is only used to get borderWidth, which is not needed
   // when calculating bar background layout.
   cartesian2d: function(t, e, a) {
@@ -618,38 +618,38 @@ function createPolarPositionMapping(t) {
   }(t);
 }
 
-function updateStyle(t, e, a, r, i, s, n, h) {
+function updateStyle(t, e, a, r, i, s, n, o) {
   var d = e.getItemVisual(a, "style");
-  if (h) {
+  if (o) {
     if (!s.get("roundCap")) {
-      var l = t.shape, c = Q(r.getModel("itemStyle"), l, !0);
-      k(l, c), t.setShape(l);
+      var l = t.shape, c = tt(r.getModel("itemStyle"), l, !0);
+      N(l, c), t.setShape(l);
     }
   } else {
-    var f = r.get([ "itemStyle", "borderRadius" ]) || 0;
-    t.setShape("r", f);
+    var u = r.get([ "itemStyle", "borderRadius" ]) || 0;
+    t.setShape("r", u);
   }
   t.useStyle(d);
   var v = r.getShallow("cursor");
   v && t.attr("cursor", v);
-  var m = h ? n ? i.r >= i.r0 ? "endArc" : "startArc" : i.endAngle >= i.startAngle ? "endAngle" : "startAngle" : n ? i.height >= 0 ? "bottom" : "top" : i.width >= 0 ? "right" : "left", g = N(r);
-  V(t, g, {
+  var m = o ? n ? i.r >= i.r0 ? "endArc" : "startArc" : i.endAngle >= i.startAngle ? "endAngle" : "startAngle" : n ? i.height >= 0 ? "bottom" : "top" : i.width >= 0 ? "right" : "left", g = V(r);
+  U(t, g, {
     labelFetcher: s,
     labelDataIndex: a,
-    defaultText: H(s.getData(), a),
+    defaultText: J(s.getData(), a),
     inheritColor: d.fill,
     defaultOpacity: d.opacity,
     defaultOutsidePosition: m
   });
   var b = t.getTextContent();
-  if (h && b) {
+  if (o && b) {
     var w = r.get([ "label", "position" ]);
     t.textConfig.inside = "middle" === w || null, function(t, e, a, r) {
-      if (u(r)) 
+      if (p(r)) 
       // user-set rotation
       t.setTextConfig({
         rotation: r
-      }); else if (p(e)) 
+      }); else if (f(e)) 
       // user-set position, use 0 as auto rotation
       t.setTextConfig({
         rotation: 0
@@ -692,23 +692,23 @@ function updateStyle(t, e, a, r, i, s, n, h) {
       }
     }(t, "outside" === w ? m : w, createPolarPositionMapping(n), r.get([ "label", "rotate" ]));
   }
-  U(b, g, s.getRawValue(a), (function(t) {
-    return F(e, t);
+  C(b, g, s.getRawValue(a), (function(t) {
+    return K(e, t);
   }));
   var y = r.getModel([ "emphasis" ]);
-  C(t, y.get("focus"), y.get("blurScope"), y.get("disabled")), P(t, r), function(t) {
+  P(t, y.get("focus"), y.get("blurScope"), y.get("disabled")), D(t, r), function(t) {
     return null != t.startAngle && null != t.endAngle && t.startAngle === t.endAngle;
-  }(i) && (t.style.fill = "none", t.style.stroke = "none", o(t.states, (function(t) {
+  }(i) && (t.style.fill = "none", t.style.stroke = "none", h(t.states, (function(t) {
     t.style && (t.style.fill = t.style.stroke = "none");
   })));
 }
 
-var LagePathShape = function() {}, ct = /** @class */ function(t) {
+var LagePathShape = function() {}, ft = /** @class */ function(t) {
   function LargePath(e) {
     var a = t.call(this, e) || this;
     return a.type = "largeBar", a;
   }
-  return n(LargePath, t), LargePath.prototype.getDefaultShape = function() {
+  return o(LargePath, t), LargePath.prototype.getDefaultShape = function() {
     return new LagePathShape;
   }, LargePath.prototype.buildPath = function(t, e) {
     for (
@@ -717,13 +717,13 @@ var LagePathShape = function() {}, ct = /** @class */ function(t) {
     var a = e.points, r = this.baseDimIdx, i = 1 - this.baseDimIdx, s = [], n = [], o = this.barWidth, h = 0; h < a.length; h += 3) n[r] = o, 
     n[i] = a[h + 2], s[r] = a[h + r], s[i] = a[h + i], t.rect(s[0], s[1], n[0], n[1]);
   }, LargePath;
-}(l);
+}(c);
 
 function createLarge(t, e, a, r) {
   // TODO support polar
   var i = t.getData(), s = i.getLayout("valueAxisHorizontal") ? 1 : 0, n = i.getLayout("largeDataIndices"), o = i.getLayout("size"), h = t.getModel("backgroundStyle"), d = i.getLayout("largeBackgroundPoints");
   if (d) {
-    var l = new ct({
+    var l = new ft({
       shape: {
         points: d
       },
@@ -734,7 +734,7 @@ function createLarge(t, e, a, r) {
     l.baseDimIdx = s, l.largeDataIndices = n, l.barWidth = o, l.useStyle(h.getItemStyle()), 
     e.add(l), a && a.push(l);
   }
-  var c = new ct({
+  var c = new ft({
     shape: {
       points: i.getLayout("largePoints")
     },
@@ -746,12 +746,12 @@ function createLarge(t, e, a, r) {
   // Stroke is rendered first to avoid overlapping with fill
   c.style.stroke = null, 
   // Enable tooltip and user mouse/touch event handlers.
-  A(c).seriesIndex = t.seriesIndex, t.get("silent") || (c.on("mousedown", ut), c.on("mousemove", ut)), 
+  S(c).seriesIndex = t.seriesIndex, t.get("silent") || (c.on("mousedown", vt), c.on("mousemove", vt)), 
   a && a.push(c);
 }
 
 // Use throttle to avoid frequently traverse to find dataIndex.
-var ut = L((function(t) {
+var vt = L((function(t) {
   var e = function(t, e, a) {
     for (var r = t.baseDimIdx, i = 1 - r, s = t.shape.points, n = t.largeDataIndices, o = [], h = [], d = t.barWidth, l = 0, c = s.length / 3; l < c; l++) {
       var u = 3 * l;
@@ -760,11 +760,11 @@ var ut = L((function(t) {
     }
     return -1;
   }(this, t.offsetX, t.offsetY);
-  A(this).dataIndex = e >= 0 ? e : null;
+  S(this).dataIndex = e >= 0 ? e : null;
 }), 30, !1);
 
 function createBackgroundShape(t, e, a) {
-  if (q(a, "cartesian2d")) {
+  if (G(a, "cartesian2d")) {
     var r = e, i = a.getArea();
     return {
       x: t ? r.x : i.x,
@@ -784,12 +784,12 @@ function createBackgroundShape(t, e, a) {
   };
 }
 
-E([ O, function(t) {
-  t.registerChartView(it), t.registerSeriesModel(tt), t.registerLayout(t.PRIORITY.VISUAL.LAYOUT, D(z, "bar")), 
+O([ E, function(t) {
+  t.registerChartView(ot), t.registerSeriesModel(rt), t.registerLayout(t.PRIORITY.VISUAL.LAYOUT, z(j, "bar")), 
   // Do layout after other overall layout, which can prepare some information.
-  t.registerLayout(t.PRIORITY.VISUAL.PROGRESSIVE_LAYOUT, j("bar")), 
+  t.registerLayout(t.PRIORITY.VISUAL.PROGRESSIVE_LAYOUT, I("bar")), 
   // Down sample after filter
-  t.registerProcessor(t.PRIORITY.PROCESSOR.STATISTIC, G("bar")), 
+  t.registerProcessor(t.PRIORITY.PROCESSOR.STATISTIC, Q("bar")), 
   /**
    * @payload
    * @property {string} [componentType=series]
@@ -812,11 +812,22 @@ E([ O, function(t) {
       t.sortInfo && e.axis.setCategorySortInfo(t.sortInfo);
     }));
   }));
-}, T, Z, J, K ]);
+}, T, et, Z, $ ]);
 
-const pt =  t(class extends e {
+const mt =  t(class extends e {
   constructor(t) {
-    super(), !1 !== t && this.__registerHost(), this.__attachShadow(), 
+    super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.keyboard = R({
+      getChart: () => this.chart,
+      getData: () => this.data,
+      onChange: t => this.keyboardIndex = t,
+      getOrder: () => {
+        const t = this.data.map(((t, e) => e));
+        return this.sort ? t.sort(((t, e) => this.data[e].value - this.data[t].value)) : t;
+      }
+    }), 
+    // #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. */
@@ -844,6 +855,7 @@ const pt =  t(class extends e {
   // #endregion
   // #region Component Lifecycle Events
   disconnectedCallback() {
+    this.keyboard.onBlur(), 
     // Remove event listeners
     window.removeEventListener("resize", this.resizeEventListener), 
     // Clean up chart instance
@@ -855,23 +867,39 @@ const pt =  t(class extends e {
     this.chartContainer = null, this.resizeEventListener = null, this.chartFinishedListener = null;
   }
   componentDidLoad() {
-    const t = I(this.chartContainer);
+    const t = W(this.chartContainer);
     this.chart = t, this.resizeEventListener = () => this.resizeChart(), window.addEventListener("resize", this.resizeEventListener), 
     this.cacheComputedStyles(), this.updateChart(t), this.setupChartEvents(t), i(this.hostElement);
   }
   // #endregion
+  // #region Listeners
+  delegateFocus(t) {
+    var e;
+    s(t, this.hostElement) && this.data.length && (null === (e = this.chartContainer) || void 0 === e || e.focus());
+  }
+  // #endregion
   // #region Watchers
   propsUpdates() {
-    this.chart && this.updateChart(this.chart);
+    this.chart && (this.updateChart(this.chart), this.keyboard.refresh());
   }
   // #endregion
   // #region Local Methods
+  get keyboardDescription() {
+    var t;
+    const e = this.data[this.keyboardIndex];
+    if (null === this.keyboardIndex || !e) return "";
+    const a = (null === (t = this.formatModifier) || void 0 === t ? void 0 : t.includes("dec")) ? this.formatModifier.replace("dec", "") : 0;
+    return X(e.name, Y(e.value || 0, {
+      type: this.format,
+      decimals: a
+    }), this.sort ? [ ...this.data ].sort(((t, e) => e.value - t.value)).indexOf(e) : this.keyboardIndex, this.data.length);
+  }
   cacheComputedStyles() {
     this.chartContainerStyles = getComputedStyle(this.chartContainer), this.hostElementStyles = getComputedStyle(this.hostElement);
   }
   getColor(t) {
-    const e = R("var(--t-primary)", this.chartContainerStyles, this.hostElementStyles), a = R(this.color, this.chartContainerStyles, this.hostElementStyles), r = R(t, this.chartContainerStyles, this.hostElementStyles);
-    return r || (W(t) ? t : a || (W(this.color) ? this.color : e));
+    const e = _("var(--t-primary)", this.chartContainerStyles, this.hostElementStyles), a = _(this.color, this.chartContainerStyles, this.hostElementStyles), r = _(t, this.chartContainerStyles, this.hostElementStyles);
+    return r || (q(t) ? t : a || (q(this.color) ? this.color : e));
   }
   processData(t) {
     return t.map((t => ({
@@ -892,21 +920,21 @@ const pt =  t(class extends e {
     }, t.on("finished", this.chartFinishedListener);
   }
   updateChart(t) {
-    var e;
-    const a = (null === (e = this.formatModifier) || void 0 === e ? void 0 : e.includes("dec")) ? this.formatModifier.replace("dec", "") : 0, r = {
+    var e, a;
+    const r = (null === (e = this.formatModifier) || void 0 === e ? void 0 : e.includes("dec")) ? this.formatModifier.replace("dec", "") : 0, i = {
       type: "value",
       axisLabel: {
-        formatter: t => X(t, {
+        formatter: t => Y(t, {
           type: this.format,
-          decimals: a
+          decimals: r
         }),
         rotate: this.offsetDataValues ? 45 : 0,
         margin: this.offsetDataValues ? 15 : 8,
         show: !this.hideValueAxisLabels
       }
-    }, i = {
+    }, s = {
       type: "category",
-      data: this.data.map((t => s(t.name) || "")),
+      data: this.data.map((t => n(t.name) || "")),
       axisLabel: {
         rotate: this.offsetDataNames ? 45 : 0,
         margin: this.offsetDataNames ? 15 : 8,
@@ -919,12 +947,12 @@ const pt =  t(class extends e {
         alignWithLabel: this.offsetDataNames
       }
     };
-    return t.setOption({
+    t.setOption({
       aria: {
         enabled: !0
       },
       title: {
-        text: s(this.chartName),
+        text: n(this.chartName),
         show: this.showChartName,
         left: this.alignChartName,
         subtext: this.chartSubTitle
@@ -933,8 +961,8 @@ const pt =  t(class extends e {
         containLabel: !0,
         ...this.gridPadding
       },
-      xAxis: "horizontal" === this.orientation ? r : i,
-      yAxis: "horizontal" === this.orientation ? i : r,
+      xAxis: "horizontal" === this.orientation ? i : s,
+      yAxis: "horizontal" === this.orientation ? s : i,
       series: [ {
         data: this.processData(this.data),
         id: "bar",
@@ -943,28 +971,44 @@ const pt =  t(class extends e {
           show: !this.hideBarLabels,
           position: "top",
           fontWeight: "bold",
-          formatter: t => X(t.value, {
+          formatter: t => Y(t.value, {
             type: this.format,
-            decimals: a
+            decimals: r
           })
         },
         realtimeSort: this.sort
       } ]
-    });
+    }), 
+    // ECharts ARIA sets role="img" when options change; retain the keyboard interaction role.
+    null === (a = this.chartContainer) || void 0 === a || a.setAttribute("role", "application");
   }
   // #endregion
   // #region Render Methods
   render() {
     return a("div", {
-      key: "36a77a29d5e06363f2cd2267c298429cd2ef9864",
+      key: "2764d138c5aee7d65df3361a7d4720e00ba13368",
       class: "container"
     }, a("div", {
-      key: "e7382ecf3ed8323ffbf1c57a78c870d7d7c4b718",
+      key: "864b3f1d5987a101ab008e37e99c874cc411c143",
       ref: t => this.chartContainer = t,
       class: "chart-container",
-      role: "img",
+      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"
-    }));
+    }), a("div", {
+      key: "3b6aa42b27e86f75cd4d1fc3d2efe823b950864c",
+      id: "chart-keyboard-instructions",
+      class: "sr"
+    }, n("tecton.element.chart.keyboardInstructions")), a("div", {
+      key: "5d216b8ccce18ea77f136fd43ab81db335b38d89",
+      class: null === this.keyboardIndex ? "sr" : "chart-keyboard-value",
+      role: "status",
+      "aria-atomic": "true"
+    }, this.keyboardDescription));
   }
   get hostElement() {
     return this;
@@ -1019,7 +1063,7 @@ const pt =  t(class extends e {
     };
   }
   static get style() {
-    return '*{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%}';
+    return '*{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%}';
   }
 }, [ 1, "q2-chart-bar", {
   alignChartName: [ 513, "align-chart-name" ],
@@ -1038,8 +1082,9 @@ const pt =  t(class extends e {
   offsetDataValues: [ 516, "offset-data-values" ],
   orientation: [ 513 ],
   showChartName: [ 516, "show-chart-name" ],
-  sort: [ 516 ]
-}, void 0, {
+  sort: [ 516 ],
+  keyboardIndex: [ 32 ]
+}, [ [ 0, "focus", "delegateFocus" ] ], {
   chartName: [ {
     propsUpdates: 0
   } ],
@@ -1087,11 +1132,11 @@ const pt =  t(class extends e {
   } ]
 } ]);
 
-const ft = pt, defineCustomElement = function() {
+const gt = mt, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
   [ "q2-chart-bar" ].forEach((t => {
-    if ("q2-chart-bar" === t) customElements.get(r(t)) || customElements.define(r(t), pt);
+    if ("q2-chart-bar" === t) customElements.get(r(t)) || customElements.define(r(t), mt);
   }));
 };
 
-export { ft as Q2ChartBar, defineCustomElement }
+export { gt as Q2ChartBar, defineCustomElement }