vue-data-ui 3.15.12 → 3.16.1

package/dist/{vue-ui-tiremarks-UBDpAIVr.js → vue-ui-tiremarks-BZ-osQqY.js}

@@ -1,22 +1,23 @@
-import { defineAsyncComponent as Y, computed as d, ref as i, toRefs as De, watch as ge, onMounted as Ge, openBlock as r, createElementBlock as c, unref as n, normalizeStyle as K, normalizeClass as W, createBlock as B, withCtx as f, renderSlot as u, normalizeProps as m, guardReactiveProps as k, createCommentVNode as w, createSlots as je, createVNode as He, Fragment as pe, renderList as ye, toDisplayString as Ve, nextTick as Xe } from "vue";
-import { j as qe, t as me, K as Ye, o as Ke, q as We, v as ke, X as Je, k as Qe, l as Ze } from "./lib-GwPnJSrY.js";
-import { t as et, u as tt } from "./useResponsive-DfdjqQps.js";
-import { u as at } from "./useConfig-CIgyKZ6R.js";
-import { u as ot, B as lt } from "./BaseScanner-BhhkKVoj.js";
-import { u as nt } from "./usePrinter-DiK5R6k-.js";
-import { u as st } from "./useSvgExport-ByUukOZt.js";
-import { u as J } from "./useNestedProp-BBT0mbHh.js";
-import { u as rt } from "./useThemeCheck-D1ZYXUwG.js";
-import { u as ut } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as it } from "./useChartAccessibility-9icAAmYg.js";
-import ct from "./vue_ui_tiremarks-DBotWfi8.js";
-import vt from "./Title-BfyrP-jp.js";
-import ht from "./img-BYYzY_QU.js";
-import { _ as dt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const ft = ["id"], gt = ["xmlns", "viewBox"], pt = ["width", "height"], yt = { key: 1 }, mt = ["d", "stroke-width", "stroke"], kt = { key: 2 }, bt = ["x1", "y1", "x2", "y2", "stroke-width", "stroke"], Ct = { key: 3 }, wt = ["x", "y", "height"], $t = ["x", "y", "font-size", "fill", "font-weight", "text-anchor"], At = {
+import { defineAsyncComponent as J, computed as r, ref as c, toRefs as Ke, watch as be, onMounted as We, openBlock as i, createElementBlock as v, unref as n, normalizeStyle as Q, normalizeClass as Z, createBlock as G, withCtx as f, renderSlot as u, normalizeProps as m, guardReactiveProps as k, createCommentVNode as w, createSlots as Je, createElementVNode as Ce, toDisplayString as ee, createVNode as Qe, Fragment as we, renderList as $e, nextTick as Ze } from "vue";
+import { j as et, t as Ae, K as tt, o as at, q as ot, v as Pe, k as lt, l as nt, X as st } from "./lib-DBptbyyI.js";
+import { t as rt, u as it } from "./useResponsive-DfdjqQps.js";
+import { u as ut } from "./useConfig-DO94Aj5s.js";
+import { u as ct, B as vt } from "./BaseScanner-BhhkKVoj.js";
+import { u as dt } from "./usePrinter-CEpYU3r5.js";
+import { u as ht } from "./useSvgExport-ByUukOZt.js";
+import { u as te } from "./useNestedProp-Bf5XFbs8.js";
+import { u as ft } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as gt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as pt } from "./useChartAccessibility-9icAAmYg.js";
+import { u as yt } from "./usePrefersMotion-CUKm8_t8.js";
+import mt from "./vue_ui_tiremarks-DBotWfi8.js";
+import kt from "./Title-BeMKE1cj.js";
+import bt from "./img-LXxMLmCg.js";
+import { _ as Ct } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const wt = ["id"], $t = ["xmlns", "viewBox", "aria-labelledby", "aria-describedby"], At = ["id"], Pt = ["id"], _t = ["width", "height"], Ot = { key: 1 }, St = ["d", "stroke-width", "stroke"], xt = { key: 2 }, It = ["x1", "y1", "x2", "y2", "stroke-width", "stroke"], Tt = ["aria-label"], zt = ["x", "y", "height"], Ft = ["x", "y", "font-size", "fill", "font-weight", "text-anchor"], Nt = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, Pt = {
+}, Rt = {
   __name: "vue-ui-tiremarks",
   props: {
     config: {
@@ -33,8 +34,8 @@ const ft = ["id"], gt = ["xmlns", "viewBox"], pt = ["width", "height"], yt = { k
     }
   },
   emits: ["copyAlt"],
-  setup(be, { expose: Ce, emit: we }) {
-    const $e = Y(() => import("./PenAndPaper-DWV1FMIi.js")), Ae = Y(() => import("./UserOptions-CrLqEimB.js")), Pe = Y(() => import("./PackageVersion-DN9d0ME5.js")), { vue_ui_tiremarks: Oe } = at(), { isThemeValid: Se, warnInvalidTheme: _e } = rt(), b = be, xe = we, Ie = d(() => !!b.dataset && Object.keys(b.dataset).length), D = i(qe()), O = i(null), ze = i(null), Q = i(null), Z = i(null), ee = i(0), te = i(0), S = i(null), z = i(null), T = i(!1), F = i(!1), e = i(H()), ae = d(() => e.value.userOptions.useCursorPointer), Te = d(() => me({
+  setup(_e, { expose: Oe, emit: Se }) {
+    const xe = J(() => import("./PenAndPaper-Ct3qJ4lA.js")), Ie = J(() => import("./UserOptions-rW2fRf3V.js")), Te = J(() => import("./PackageVersion-DPO-OOVI.js")), { vue_ui_tiremarks: ze } = ut(), { isThemeValid: Fe, warnInvalidTheme: Ne } = ft(), j = yt(), b = _e, Re = Se, Me = r(() => !!b.dataset && Object.keys(b.dataset).length), O = c(et()), _ = c(null), Ee = c(null), ae = c(null), oe = c(null), le = c(0), ne = c(0), S = c(null), z = c(null), F = c(!1), N = c(!1), e = c(X()), se = r(() => e.value.userOptions.useCursorPointer), De = r(() => Ae({
       defaultConfig: {
         userOptions: { show: !1 },
         style: {
@@ -52,83 +53,83 @@ const ft = ["id"], gt = ["xmlns", "viewBox"], pt = ["width", "height"], yt = { k
         }
       },
       userConfig: e.value.skeletonConfig ?? {}
-    })), { loading: oe, FINAL_DATASET: _ } = ot({
-      ...De(b),
+    })), { loading: R, FINAL_DATASET: x } = ct({
+      ...Ke(b),
       FINAL_CONFIG: e,
-      prepareConfig: H,
+      prepareConfig: X,
       skeletonDataset: b.config?.skeletonDataset ?? { percentage: 50 },
-      skeletonConfig: me({
+      skeletonConfig: Ae({
         defaultConfig: e.value,
-        userConfig: Te.value
+        userConfig: De.value
       })
-    }), { userOptionsVisible: G, setUserOptionsVisibility: le, keepUserOptionState: ne } = ut({ config: e.value }), { svgRef: j } = it({ config: e.value.style.chart.title });
-    function H() {
-      const t = J({
+    }), { userOptionsVisible: H, setUserOptionsVisibility: re, keepUserOptionState: ie } = gt({ config: e.value }), { svgRef: V } = pt({ config: e.value.style.chart.title });
+    function X() {
+      const t = te({
         userConfig: b.config,
-        defaultConfig: Oe
+        defaultConfig: ze
       }), o = t.theme;
       if (!o) return t;
-      if (!Se.value(t))
-        return _e(t), t;
-      const a = J({
-        userConfig: ct[o] || b.config,
+      if (!Fe.value(t))
+        return Ne(t), t;
+      const a = te({
+        userConfig: mt[o] || b.config,
         defaultConfig: t
       });
-      return J({
+      return te({
         userConfig: b.config,
         defaultConfig: a
       });
     }
-    ge(() => b.config, (t) => {
-      e.value = H(), G.value = !e.value.userOptions.showOnChartHover, E.value = e.value.style.chart.width, M.value = e.value.style.chart.height, ie(), te.value += 1;
+    be(() => b.config, (t) => {
+      e.value = X(), H.value = !e.value.userOptions.showOnChartHover, D.value = e.value.style.chart.width, L.value = e.value.style.chart.height, de(), ne.value += 1;
     }, { deep: !0 });
-    const { isPrinting: V, isImaging: X, generatePdf: se, generateImage: re } = nt({
-      elementId: D.value,
+    const { isPrinting: q, isImaging: Y, generatePdf: ue, generateImage: ce } = dt({
+      elementId: O.value,
       fileName: e.value.style.chart.title.text || "vue-ui-tiremarks",
       options: e.value.userOptions.print
-    }), Fe = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), v = i(e.value.style.chart.animation.use ? 0 : Ye(_.value.percentage));
-    ge(() => _.value, (t) => {
-      e.value.style.chart.animation.use ? ue(t.percentage) : v.value = t.percentage || 0;
-    }, { deep: !0 }), Ge(() => {
-      ie();
+    }), Le = r(() => e.value.userOptions.show && !e.value.style.chart.title.text), d = c(e.value.style.chart.animation.use && !j.value ? 0 : tt(x.value.percentage));
+    be(() => x.value, (t) => {
+      e.value.style.chart.animation.use && !j.value ? ve(t.percentage) : d.value = t.percentage || 0;
+    }, { deep: !0 }), We(() => {
+      de();
     });
-    function ue(t) {
+    function ve(t) {
       let o = e.value.style.chart.animation.speed;
-      const a = Math.abs(t - v.value) / (o * 120);
+      const a = Math.abs(t - d.value) / (o * 120);
       function l() {
-        v.value < t ? v.value = Math.min(v.value + a, t) : v.value > t && (v.value = Math.max(v.value - a, t)), v.value !== t && requestAnimationFrame(l);
+        d.value < t ? d.value = Math.min(d.value + a, t) : d.value > t && (d.value = Math.max(d.value - a, t)), d.value !== t && requestAnimationFrame(l);
       }
       l();
     }
-    const Ne = d(() => !!e.value.debug);
-    function ie() {
-      if (Ke(b.dataset) && We({
+    const Ue = r(() => !!e.value.debug);
+    function de() {
+      if (at(b.dataset) && ot({
         componentName: "VueUiTiremarks",
         type: "dataset",
-        debug: Ne.value
+        debug: Ue.value
       }), e.value.responsive) {
-        const t = et(() => {
-          const { width: o, height: a } = tt({
-            chart: O.value,
-            title: e.value.style.chart.title.text ? Q.value : null,
-            source: Z.value
+        const t = rt(() => {
+          const { width: o, height: a } = it({
+            chart: _.value,
+            title: e.value.style.chart.title.text ? ae.value : null,
+            source: oe.value
           });
           requestAnimationFrame(() => {
-            E.value = Math.max(0.1, o), M.value = Math.max(0.1, a - 12);
+            D.value = Math.max(0.1, o), L.value = Math.max(0.1, a - 12);
           });
         });
-        S.value && (z.value && S.value.unobserve(z.value), S.value.disconnect()), S.value = new ResizeObserver(t), z.value = O.value.parentNode, S.value.observe(z.value);
+        S.value && (z.value && S.value.unobserve(z.value), S.value.disconnect()), S.value = new ResizeObserver(t), z.value = _.value.parentNode, S.value.observe(z.value);
       }
-      ue(_.value.percentage || 0);
+      ve(x.value.percentage || 0);
     }
-    const N = d(() => e.value.style.chart.layout.display === "vertical"), h = d(() => {
+    const M = r(() => e.value.style.chart.layout.display === "vertical"), h = r(() => {
       const t = e.value.style.chart.percentage.show, o = {
         top: t ? 48 : 12,
         left: t ? 64 : 16,
         right: t ? 64 : 16,
         bottom: t ? 48 : 12
       };
-      return N.value ? {
+      return M.value ? {
         top: e.value.style.chart.percentage.verticalPosition === "top" ? o.top : 3,
         left: 3,
         right: 3,
@@ -139,10 +140,10 @@ const ft = ["id"], gt = ["xmlns", "viewBox"], pt = ["width", "height"], yt = { k
         left: e.value.style.chart.percentage.horizontalPosition === "left" ? o.left : 16,
         right: e.value.style.chart.percentage.horizontalPosition === "right" ? o.right : 10
       };
-    }), R = d(() => Object.values(h.value).reduce((t, o) => t + o, 0)), E = i(e.value.style.chart.width), M = i(e.value.style.chart.height), s = d(() => ({
-      height: M.value,
-      width: E.value
-    })), ce = d(() => ({
+    }), E = r(() => Object.values(h.value).reduce((t, o) => t + o, 0)), D = c(e.value.style.chart.width), L = c(e.value.style.chart.height), s = r(() => ({
+      height: L.value,
+      width: D.value
+    })), he = r(() => ({
       horizontal: {
         x: y.value.x + (e.value.style.chart.percentage.horizontalPosition === "left" ? 6 : 3),
         y: s.value.height / 2 - y.value.fontSize / 2
@@ -151,43 +152,43 @@ const ft = ["id"], gt = ["xmlns", "viewBox"], pt = ["width", "height"], yt = { k
         x: s.value.width / 2 - 20,
         y: y.value.y - y.value.fontSize / 2
       }
-    })[e.value.style.chart.layout.display]), g = d(() => N.value ? {
-      mark: (s.value.height - R.value) / 100 * 0.5,
-      space: (s.value.height - R.value) / 100 * 0.5
+    })[e.value.style.chart.layout.display]), g = r(() => M.value ? {
+      mark: (s.value.height - E.value) / 100 * 0.5,
+      space: (s.value.height - E.value) / 100 * 0.5
     } : {
-      mark: (s.value.width - R.value) / 100 * 0.5,
-      space: (s.value.width - R.value) / 100 * 0.5
-    }), ve = d(() => {
+      mark: (s.value.width - E.value) / 100 * 0.5,
+      space: (s.value.width - E.value) / 100 * 0.5
+    }), fe = r(() => {
       const t = [];
       for (let a = 0; a < 100; a += 1) {
-        const l = e.value.style.chart.layout.ticks.gradient.show ? ke(e.value.style.chart.layout.activeColor, a / 100 * (e.value.style.chart.layout.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.layout.activeColor;
-        if (N.value) {
-          const C = e.value.style.chart.layout.crescendo ? (100 - a) * (s.value.width - h.value.left - h.value.right) / 100 / 3 : 0, p = h.value.left + 4 + C, $ = s.value.width - h.value.right - 4 - C, A = s.value.height - h.value.bottom - a * g.value.mark - a * g.value.space - g.value.mark, P = s.value.height - h.value.bottom - a * g.value.mark - a * g.value.space - g.value.mark, x = ($ - p) / e.value.style.chart.layout.curveAngleX, I = e.value.style.chart.layout.curveAngleY * ((1 + a) / 100);
+        const l = e.value.style.chart.layout.ticks.gradient.show ? Pe(e.value.style.chart.layout.activeColor, a / 100 * (e.value.style.chart.layout.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.layout.activeColor;
+        if (M.value) {
+          const C = e.value.style.chart.layout.crescendo ? (100 - a) * (s.value.width - h.value.left - h.value.right) / 100 / 3 : 0, p = h.value.left + 4 + C, $ = s.value.width - h.value.right - 4 - C, A = s.value.height - h.value.bottom - a * g.value.mark - a * g.value.space - g.value.mark, P = s.value.height - h.value.bottom - a * g.value.mark - a * g.value.space - g.value.mark, I = ($ - p) / e.value.style.chart.layout.curveAngleX, T = e.value.style.chart.layout.curveAngleY * ((1 + a) / 100);
           t.push({
             x1: p,
             x2: $,
             y1: A,
             y2: P,
-            curve: `M ${p} ${A} C ${p + x} ${A - I}, ${$ - x} ${P - I}, ${$} ${P}`,
+            curve: `M ${p} ${A} C ${p + I} ${A - T}, ${$ - I} ${P - T}, ${$} ${P}`,
             color: l
           });
         } else {
-          const C = e.value.style.chart.layout.crescendo ? (100 - a) * (s.value.height - h.value.top - h.value.bottom) / 100 / 3 : 0, p = h.value.left + a * g.value.mark + a * g.value.space - g.value.mark, $ = p, A = h.value.top + 4 + C, P = s.value.height - h.value.bottom - 4 - C, x = e.value.style.chart.layout.curveAngleY * ((1 + a) / 100), I = (P - A) / e.value.style.chart.layout.curveAngleX;
+          const C = e.value.style.chart.layout.crescendo ? (100 - a) * (s.value.height - h.value.top - h.value.bottom) / 100 / 3 : 0, p = h.value.left + a * g.value.mark + a * g.value.space - g.value.mark, $ = p, A = h.value.top + 4 + C, P = s.value.height - h.value.bottom - 4 - C, I = e.value.style.chart.layout.curveAngleY * ((1 + a) / 100), T = (P - A) / e.value.style.chart.layout.curveAngleX;
           t.push({
             x1: p,
             x2: $,
             y1: A,
             y2: P,
-            curve: `M ${p} ${A} C ${p + x} ${A + I}, ${$ + x} ${P - I}, ${$} ${P}`,
+            curve: `M ${p} ${A} C ${p + I} ${A + T}, ${$ + I} ${P - T}, ${$} ${P}`,
             color: l
           });
         }
       }
       return t;
-    }), y = d(() => {
+    }), y = r(() => {
       let t, o, a;
       const l = e.value.style.chart.percentage.fontSize / 3;
-      return N.value ? e.value.style.chart.percentage.verticalPosition === "top" ? (t = s.value.width / 2, o = h.value.top / 2, a = "middle") : e.value.style.chart.percentage.verticalPosition === "bottom" && (t = s.value.width / 2, o = s.value.height - h.value.bottom / 2 + l, a = "middle") : e.value.style.chart.percentage.horizontalPosition === "left" ? (t = 4, o = s.value.height / 2 + l, a = "start") : e.value.style.chart.percentage.horizontalPosition === "right" && (t = s.value.width - h.value.right + 8, o = s.value.height / 2 + l, a = "start"), {
+      return M.value ? e.value.style.chart.percentage.verticalPosition === "top" ? (t = s.value.width / 2, o = h.value.top / 2, a = "middle") : e.value.style.chart.percentage.verticalPosition === "bottom" && (t = s.value.width / 2, o = s.value.height - h.value.bottom / 2 + l, a = "middle") : e.value.style.chart.percentage.horizontalPosition === "left" ? (t = 4, o = s.value.height / 2 + l, a = "start") : e.value.style.chart.percentage.horizontalPosition === "right" && (t = s.value.width - h.value.right + 8, o = s.value.height / 2 + l, a = "start"), {
         x: t,
         y: o,
         textAnchor: a,
@@ -195,17 +196,17 @@ const ft = ["id"], gt = ["xmlns", "viewBox"], pt = ["width", "height"], yt = { k
         fontSize: e.value.style.chart.percentage.fontSize,
         fill: e.value.style.chart.percentage.color
       };
-    }), U = i(!1);
-    function he(t) {
-      U.value = t, ee.value += 1;
+    }), U = c(!1);
+    function ge(t) {
+      U.value = t, le.value += 1;
     }
-    const L = i(!1);
-    function q() {
-      L.value = !L.value;
+    const B = c(!1);
+    function K() {
+      B.value = !B.value;
     }
-    async function Re({ scale: t = 2 } = {}) {
-      if (!O.value) return;
-      const { width: o, height: a } = O.value.getBoundingClientRect(), l = o / a, { imageUri: C, base64: p } = await ht({ domElement: O.value, base64: !0, img: !0, scale: t });
+    async function Be({ scale: t = 2 } = {}) {
+      if (!_.value) return;
+      const { width: o, height: a } = _.value.getBoundingClientRect(), l = o / a, { imageUri: C, base64: p } = await bt({ domElement: _.value, base64: !0, img: !0, scale: t });
       return {
         imageUri: C,
         base64: p,
@@ -215,72 +216,81 @@ const ft = ["id"], gt = ["xmlns", "viewBox"], pt = ["width", "height"], yt = { k
         aspectRatio: l
       };
     }
-    const Ee = d(() => e.value.style.chart.backgroundColor), Me = d(() => e.value.style.chart.title), { exportSvg: Ue, getSvg: Le } = st({
-      svg: j,
-      title: Me,
-      backgroundColor: Ee
+    const Ge = r(() => e.value.style.chart.backgroundColor), je = r(() => e.value.style.chart.title), { exportSvg: He, getSvg: Ve } = ht({
+      svg: V,
+      title: je,
+      backgroundColor: Ge
     });
-    async function de({ isCb: t }) {
-      F.value = !0, await Xe();
+    async function pe({ isCb: t }) {
+      N.value = !0, await Ze();
       try {
         if (t) {
-          const { blob: o, url: a, text: l, dataUrl: C } = await Le();
+          const { blob: o, url: a, text: l, dataUrl: C } = await Ve();
           await Promise.resolve(e.value.userOptions.callbacks.svg({ blob: o, url: a, text: l, dataUrl: C }));
         } else
-          await Promise.resolve(Ue());
+          await Promise.resolve(He());
       } finally {
-        F.value = !1;
+        N.value = !1;
       }
     }
-    function Be(t) {
+    function Xe(t) {
       if (t?.stage === "start") {
-        T.value = !0;
+        F.value = !0;
         return;
       }
       if (t?.stage === "end") {
-        T.value = !1;
+        F.value = !1;
         return;
       }
-      re();
+      ce();
     }
-    async function fe() {
-      if (xe("copyAlt", {
+    async function ye() {
+      if (Re("copyAlt", {
         config: e.value,
-        dataset: _.value
+        dataset: x.value
       }), !e.value.userOptions.callbacks.altCopy) {
         console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
         return;
       }
       await Promise.resolve(e.value.userOptions.callbacks.altCopy({
         config: e.value,
-        dataset: _.value
+        dataset: x.value
       }));
     }
-    return Ce({
-      getImage: Re,
-      generatePdf: se,
-      generateImage: re,
-      generateSvg: de,
-      toggleAnnotator: q,
-      toggleFullscreen: he,
-      copyAlt: fe
-    }), (t, o) => (r(), c("div", {
+    const me = r(() => `${O.value}-title`), ke = r(() => `${O.value}-desc`), W = r(() => lt(
+      e.value.style.chart.percentage.formatter,
+      d.value,
+      nt({
+        v: d.value,
+        s: "%",
+        r: e.value.style.chart.percentage.rounding
+      })
+    )), qe = r(() => e.value.style.chart.title.text || ""), Ye = r(() => R.value ? "Loading data" : `Value: ${W.value}`);
+    return Oe({
+      getImage: Be,
+      generatePdf: ue,
+      generateImage: ce,
+      generateSvg: pe,
+      toggleAnnotator: K,
+      toggleFullscreen: ge,
+      copyAlt: ye
+    }), (t, o) => (i(), v("div", {
       ref_key: "tiremarksChart",
-      ref: O,
-      class: W(`vue-data-ui-component vue-ui-tiremarks ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
-      style: K(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
-      id: D.value,
-      onMouseenter: o[0] || (o[0] = () => n(le)(!0)),
-      onMouseleave: o[1] || (o[1] = () => n(le)(!1))
+      ref: _,
+      class: Z(`vue-data-ui-component vue-ui-tiremarks ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      style: Q(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      id: O.value,
+      onMouseenter: o[0] || (o[0] = () => n(re)(!0)),
+      onMouseleave: o[1] || (o[1] = () => n(re)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (r(), B(n($e), {
+      e.value.userOptions.buttons.annotator ? (i(), G(n(xe), {
         key: 0,
-        svgRef: n(j),
+        svgRef: n(V),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        active: L.value,
-        isCursorPointer: ae.value,
-        onClose: q
+        active: B.value,
+        isCursorPointer: se.value,
+        onClose: K
       }, {
         "annotator-action-close": f(() => [
           u(t.$slots, "annotator-action-close", {}, void 0, !0)
@@ -302,21 +312,21 @@ const ft = ["id"], gt = ["xmlns", "viewBox"], pt = ["width", "height"], yt = { k
         ]),
         _: 3
       }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : w("", !0),
-      Fe.value ? (r(), c("div", {
+      Le.value ? (i(), v("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: ze,
+        ref: Ee,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : w("", !0),
-      e.value.style.chart.title.text ? (r(), c("div", {
+      e.value.style.chart.title.text ? (i(), v("div", {
         key: 2,
         ref_key: "chartTitle",
-        ref: Q,
+        ref: ae,
         style: "width:100%;background:transparent;padding-bottom:12px"
       }, [
-        (r(), B(vt, {
-          key: `title_${te.value}`,
+        (i(), G(kt, {
+          key: `title_${ne.value}`,
           config: {
             title: {
               cy: "wheel-title",
@@ -329,14 +339,14 @@ const ft = ["id"], gt = ["xmlns", "viewBox"], pt = ["width", "height"], yt = { k
           }
         }, null, 8, ["config"]))
       ], 512)) : w("", !0),
-      e.value.userOptions.show && Ie.value && (n(ne) || n(G)) ? (r(), B(n(Ae), {
+      e.value.userOptions.show && Me.value && (n(ie) || n(H)) ? (i(), G(n(Ie), {
         ref: "details",
-        key: `user_options_${ee.value}`,
+        key: `user_options_${le.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: n(V),
-        isImaging: n(X),
-        uid: D.value,
+        isPrinting: n(q),
+        isImaging: n(Y),
+        uid: O.value,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasImg: e.value.userOptions.buttons.img,
         hasSvg: e.value.userOptions.buttons.svg,
@@ -345,23 +355,23 @@ const ft = ["id"], gt = ["xmlns", "viewBox"], pt = ["width", "height"], yt = { k
         hasXls: !1,
         isFullscreen: U.value,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: O.value,
+        chartElement: _.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: L.value,
+        isAnnotation: B.value,
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
-        isCursorPointer: ae.value,
-        onToggleFullscreen: he,
-        onGeneratePdf: n(se),
-        onGenerateImage: Be,
-        onGenerateSvg: de,
-        onToggleAnnotator: q,
-        onCopyAlt: fe,
-        style: K({
-          visibility: n(ne) ? n(G) ? "visible" : "hidden" : "visible"
+        isCursorPointer: se.value,
+        onToggleFullscreen: ge,
+        onGeneratePdf: n(ue),
+        onGenerateImage: Xe,
+        onGenerateSvg: pe,
+        onToggleAnnotator: K,
+        onCopyAlt: ye,
+        style: Q({
+          visibility: n(ie) ? n(H) ? "visible" : "hidden" : "visible"
         })
-      }, je({ _: 2 }, [
+      }, Je({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
           fn: f(({ isOpen: a, color: l }) => [
@@ -412,16 +422,21 @@ const ft = ["id"], gt = ["xmlns", "viewBox"], pt = ["width", "height"], yt = { k
           key: "6"
         } : void 0
       ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasSvg", "hasFullscreen", "hasAltCopy", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "isCursorPointer", "onGeneratePdf", "style"])) : w("", !0),
-      (r(), c("svg", {
+      (i(), v("svg", {
         ref_key: "svgRef",
-        ref: j,
-        xmlns: n(Je),
-        class: W({ "vue-data-ui-fullscreen--on": U.value, "vue-data-ui-fulscreen--off": !U.value }),
-        viewBox: `0 0 ${E.value} ${M.value}`,
-        style: K(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
+        ref: V,
+        xmlns: n(st),
+        class: Z({ "vue-data-ui-fullscreen--on": U.value, "vue-data-ui-fulscreen--off": !U.value }),
+        viewBox: `0 0 ${D.value} ${L.value}`,
+        style: Q(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`),
+        role: "img",
+        "aria-labelledby": me.value,
+        "aria-describedby": ke.value
       }, [
-        He(n(Pe)),
-        t.$slots["chart-background"] ? (r(), c("foreignObject", {
+        Ce("title", { id: me.value }, ee(qe.value), 9, At),
+        Ce("desc", { id: ke.value }, ee(Ye.value), 9, Pt),
+        Qe(n(Te)),
+        t.$slots["chart-background"] ? (i(), v("foreignObject", {
           key: 0,
           x: 0,
           y: 0,
@@ -432,79 +447,77 @@ const ft = ["id"], gt = ["xmlns", "viewBox"], pt = ["width", "height"], yt = { k
           }
         }, [
           u(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, pt)) : w("", !0),
-        e.value.style.chart.layout.curved ? (r(), c("g", yt, [
-          (r(!0), c(pe, null, ye(ve.value, (a, l) => (r(), c("path", {
+        ], 8, _t)) : w("", !0),
+        e.value.style.chart.layout.curved ? (i(), v("g", Ot, [
+          (i(!0), v(we, null, $e(fe.value, (a, l) => (i(), v("path", {
             d: a.curve,
             "stroke-width": g.value.mark,
-            stroke: v.value >= l ? a.color : e.value.style.chart.layout.inactiveColor,
+            stroke: d.value >= l ? a.color : e.value.style.chart.layout.inactiveColor,
             "stroke-linecap": "round",
             fill: "none",
-            class: W({ "vue-ui-tick-animated": e.value.style.chart.animation.use && l <= v.value })
-          }, null, 10, mt))), 256))
-        ])) : (r(), c("g", kt, [
-          (r(!0), c(pe, null, ye(ve.value, (a, l) => (r(), c("line", {
+            class: Z({ "vue-ui-tick-animated": e.value.style.chart.animation.use && !n(j) && l <= d.value })
+          }, null, 10, St))), 256))
+        ])) : (i(), v("g", xt, [
+          (i(!0), v(we, null, $e(fe.value, (a, l) => (i(), v("line", {
             x1: a.x1,
             y1: a.y1,
             x2: a.x2,
             y2: a.y2,
             "stroke-width": g.value.mark,
-            stroke: v.value >= l ? a.color : e.value.style.chart.layout.inactiveColor,
+            stroke: d.value >= l ? a.color : e.value.style.chart.layout.inactiveColor,
             "stroke-linecap": "round"
-          }, null, 8, bt))), 256))
+          }, null, 8, It))), 256))
         ])),
-        e.value.style.chart.percentage.show ? (r(), c("g", Ct, [
-          n(oe) ? (r(), c("rect", {
+        e.value.style.chart.percentage.show ? (i(), v("g", {
+          key: 3,
+          role: "status",
+          "aria-live": "polite",
+          "aria-label": n(R) ? "..." : `${W.value}`
+        }, [
+          n(R) ? (i(), v("rect", {
             key: 0,
-            x: ce.value.x,
-            y: ce.value.y,
+            x: he.value.x,
+            y: he.value.y,
             width: 40,
             height: y.value.fontSize,
             fill: "#6A6A6A80",
             rx: 3
-          }, null, 8, wt)) : (r(), c("text", {
+          }, null, 8, zt)) : (i(), v("text", {
             key: 1,
+            "aria-hidden": "true",
             x: y.value.x,
             y: y.value.y,
             "font-size": y.value.fontSize,
-            fill: e.value.style.chart.layout.ticks.gradient.show && e.value.style.chart.percentage.useGradientColor ? n(ke)(e.value.style.chart.layout.activeColor, v.value / 100 * (e.value.style.chart.layout.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.percentage.color,
+            fill: e.value.style.chart.layout.ticks.gradient.show && e.value.style.chart.percentage.useGradientColor ? n(Pe)(e.value.style.chart.layout.activeColor, d.value / 100 * (e.value.style.chart.layout.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.percentage.color,
             "font-weight": y.value.bold ? "bold" : "normal",
             "text-anchor": y.value.textAnchor
-          }, Ve(n(Qe)(
-            e.value.style.chart.percentage.formatter,
-            v.value,
-            n(Ze)({
-              v: v.value,
-              s: "%",
-              r: e.value.style.chart.percentage.rounding
-            })
-          )), 9, $t))
-        ])) : w("", !0),
+          }, ee(W.value), 9, Ft))
+        ], 8, Tt)) : w("", !0),
         u(t.$slots, "svg", {
           svg: {
             ...s.value,
-            isPrintingImg: n(V) | n(X) | T.value,
-            isPrintingSvg: F.value
+            isPrintingImg: n(q) | n(Y) | F.value,
+            isPrintingSvg: N.value
           }
         }, void 0, !0)
-      ], 14, gt)),
-      t.$slots.watermark ? (r(), c("div", At, [
-        u(t.$slots, "watermark", m(k({ isPrinting: n(V) || n(X) || T.value || F.value })), void 0, !0)
+      ], 14, $t)),
+      t.$slots.watermark ? (i(), v("div", Nt, [
+        u(t.$slots, "watermark", m(k({ isPrinting: n(q) || n(Y) || F.value || N.value })), void 0, !0)
       ])) : w("", !0),
-      t.$slots.source ? (r(), c("div", {
+      t.$slots.source ? (i(), v("div", {
         key: 5,
         ref_key: "source",
-        ref: Z,
+        ref: oe,
         dir: "auto"
       }, [
         u(t.$slots, "source", {}, void 0, !0)
       ], 512)) : w("", !0),
       u(t.$slots, "skeleton", {}, () => [
-        n(oe) ? (r(), B(lt, { key: 0 })) : w("", !0)
+        n(R) ? (i(), G(vt, { key: 0 })) : w("", !0)
       ], !0)
-    ], 46, ft));
+    ], 46, wt));
   }
-}, Dt = /* @__PURE__ */ dt(Pt, [["__scopeId", "data-v-f381cb10"]]);
+}, Qt = /* @__PURE__ */ Ct(Rt, [["__scopeId", "data-v-ed01b8e6"]]);
 export {
-  Dt as default
+  Qt as default
 };