@dialpad/dialtone-vue 3.210.0 → 3.211.0-next.1

package/dist/lib/progress-circle/progress-circle-constants.js

@@ -0,0 +1,25 @@
+const r = {
+  100: "d-progress-circle--size-100",
+  200: "d-progress-circle--size-200",
+  300: "d-progress-circle--size-300",
+  400: "d-progress-circle--size-400",
+  500: "d-progress-circle--size-500",
+  600: "d-progress-circle--size-600",
+  700: "d-progress-circle--size-700",
+  800: "d-progress-circle--size-800"
+}, s = "500", e = {
+  default: "",
+  brand: "d-progress-circle--brand",
+  critical: "d-progress-circle--critical",
+  positive: "d-progress-circle--positive",
+  warning: "d-progress-circle--warning",
+  info: "d-progress-circle--info",
+  ai: "d-progress-circle--ai"
+}, c = "default";
+export {
+  e as PROGRESS_CIRCLE_KINDS,
+  c as PROGRESS_CIRCLE_KIND_DEFAULT,
+  r as PROGRESS_CIRCLE_SIZES,
+  s as PROGRESS_CIRCLE_SIZE_DEFAULT
+};
+//# sourceMappingURL=progress-circle-constants.js.map

package/dist/lib/progress-circle/progress-circle-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-circle-constants.js","sources":["../../../components/progress_circle/progress_circle_constants.js"],"sourcesContent":["/**\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n */\nexport const PROGRESS_CIRCLE_SIZES = {\n  100: 'd-progress-circle--size-100',\n  200: 'd-progress-circle--size-200',\n  300: 'd-progress-circle--size-300',\n  400: 'd-progress-circle--size-400',\n  500: 'd-progress-circle--size-500',\n  600: 'd-progress-circle--size-600',\n  700: 'd-progress-circle--size-700',\n  800: 'd-progress-circle--size-800',\n};\n\nexport const PROGRESS_CIRCLE_SIZE_DEFAULT = '500';\n\n/**\n * @values default, brand, critical, positive, warning, info, ai\n */\nexport const PROGRESS_CIRCLE_KINDS = {\n  default: '',\n  brand: 'd-progress-circle--brand',\n  critical: 'd-progress-circle--critical',\n  positive: 'd-progress-circle--positive',\n  warning: 'd-progress-circle--warning',\n  info: 'd-progress-circle--info',\n  ai: 'd-progress-circle--ai',\n};\n\nexport const PROGRESS_CIRCLE_KIND_DEFAULT = 'default';\n"],"names":["PROGRESS_CIRCLE_SIZES","PROGRESS_CIRCLE_SIZE_DEFAULT","PROGRESS_CIRCLE_KINDS","PROGRESS_CIRCLE_KIND_DEFAULT"],"mappings":"AAGY,MAACA,IAAwB;AAAA,EACnC,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AACP,GAEaC,IAA+B,OAK/BC,IAAwB;AAAA,EACnC,SAAS;AAAA,EACT,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,MAAM;AAAA,EACN,IAAI;AACN,GAEaC,IAA+B;"}

package/dist/lib/progress-circle/progress-circle.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("./progress-circle-constants.cjs"),t=require("vue"),d=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),p={compatConfig:{MODE:3},name:"DtProgressCircle",props:{ariaLabel:{type:String,required:!0},progress:{type:Number,default:0,validator:e=>e>=0&&e<=100},size:{type:String,default:"500",validator:e=>Object.keys(a.PROGRESS_CIRCLE_SIZES).includes(e)},kind:{type:String,default:"default",validator:e=>Object.keys(a.PROGRESS_CIRCLE_KINDS).includes(e)}},data(){return{strokeWidth:3.25,uid:Math.random().toString(36).substring(2,9)}},computed:{isAi(){return this.kind==="ai"},aiGradientId(){return`progress-circle-ai-gradient-${this.uid}`},fillStrokeStyle(){return this.isAi?{stroke:`url(#${this.aiGradientId})`}:{}},sizeClass(){return a.PROGRESS_CIRCLE_SIZES[this.size]},kindClass(){return a.PROGRESS_CIRCLE_KINDS[this.kind]},circleRadius(){return 12-this.strokeWidth/2},circleCircumference(){return 2*Math.PI*this.circleRadius},circlePath(){const e=this.circleRadius,r=12-e,o=12+e;return`M 12 ${r} A ${e} ${e} 0 0 1 12 ${o} A ${e} ${e} 0 0 1 12 ${r} Z`},cssVars(){const e=this.circleCircumference,r=5,o=this.progress>0&&this.progress<r?r:this.progress,c=e*o/100,i=this.strokeWidth,s=i/2,l=this.progress>0&&this.progress<100,n=l?i:0;return{"--stroke-dasharray":!l&&this.progress>=100?"none":e,"--fill-dashoffset":e-Math.max(0,c-n),"--fill-rotate":`${l?s/e*360:0}deg`,"--track-dasharray":!l&&this.progress<=0?"none":`${Math.max(0,e-c-n)} ${e}`,"--track-dashoffset":-(c+(l?s:0))}}}},h=["aria-label","aria-valuenow"],u={key:0},k=["id"],f=["d","stroke-width"],_=["d","stroke-width"];function g(e,r,o,c,i,s){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["d-progress-circle",[s.sizeClass,s.kindClass]]),role:"progressbar","aria-label":o.ariaLabel,tabindex:"-1","aria-valuenow":o.progress,"aria-valuemin":"0","aria-valuemax":"100","data-qa":"dt-progress-circle"},[(t.openBlock(),t.createElementBlock("svg",{class:"d-progress-circle__bar",style:t.normalizeStyle(s.cssVars),viewBox:"0 0 24 24"},[s.isAi?(t.openBlock(),t.createElementBlock("defs",u,[t.createElementVNode("linearGradient",{id:s.aiGradientId,x1:"0%",y1:"0%",x2:"100%",y2:"100%"},[...r[0]||(r[0]=[t.createStaticVNode('<stop offset="0%" stop-color="oklch(0.3328 0.079 261.93)"></stop><stop offset="3.08%" stop-color="oklch(0.3745 0.0869 263.76)"></stop><stop offset="14.48%" stop-color="oklch(0.4561 0.0924 291.07)"></stop><stop offset="23.67%" stop-color="oklch(0.4911 0.1003 307.79)"></stop><stop offset="35.5%" stop-color="oklch(0.5278 0.1347 342.65)"></stop><stop offset="48.3%" stop-color="oklch(0.587 0.1705 357.19)"></stop><stop offset="60.29%" stop-color="oklch(0.6192 0.1989 6.7)"></stop><stop offset="70.08%" stop-color="oklch(0.6541 0.2066 15.56)"></stop><stop offset="90.02%" stop-color="oklch(0.7086 0.1887 25.9)"></stop><stop offset="97.29%" stop-color="oklch(0.7524 0.1596 36.19)"></stop><stop offset="100%" stop-color="oklch(0.7524 0.1596 36.19)"></stop>',11)])],8,k)])):t.createCommentVNode("",!0),o.progress<=95?(t.openBlock(),t.createElementBlock("path",{key:1,d:s.circlePath,class:"d-progress-circle__shape d-progress-circle__shape--track",fill:"none","stroke-width":i.strokeWidth,"stroke-linecap":"round"},null,8,f)):t.createCommentVNode("",!0),o.progress>0?(t.openBlock(),t.createElementBlock("path",{key:2,d:s.circlePath,class:"d-progress-circle__shape d-progress-circle__shape--fill",fill:"none","stroke-width":i.strokeWidth,"stroke-linecap":"round",style:t.normalizeStyle(s.fillStrokeStyle)},null,12,_)):t.createCommentVNode("",!0)],4))],10,h)}const S=d._(p,[["render",g]]);exports.default=S;
+//# sourceMappingURL=progress-circle.cjs.map

package/dist/lib/progress-circle/progress-circle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-circle.cjs","sources":["../../../components/progress_circle/progress_circle.vue"],"sourcesContent":["<script>\n/**\n * Circular SVG progress indicator for determinate upload or processing progress.\n * @see https://dialtone.dialpad.com/components/progress-circle.html\n */\nimport { PROGRESS_CIRCLE_SIZES, PROGRESS_CIRCLE_KINDS } from './progress_circle_constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtProgressCircle',\n  props: {\n    /** Accessible label read by screen readers. */\n    ariaLabel: { type: String, required: true },\n    /** Current progress value (0–100). */\n    progress: {\n      type: Number,\n      default: 0,\n      validator: (v) => v >= 0 && v <= 100,\n    },\n\n    /**\n     * The size of the progress indicator, aligning to Dialtone icon sizes.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (s) => Object.keys(PROGRESS_CIRCLE_SIZES).includes(s),\n    },\n\n    /**\n     * The color variant of the progress indicator.\n     * @values default, brand, critical, positive, warning, info, ai\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(PROGRESS_CIRCLE_KINDS).includes(k),\n    },\n  },\n\n  data () {\n    return {\n      strokeWidth: 3.25,\n      uid: Math.random().toString(36).substring(2, 9),\n    };\n  },\n\n  computed: {\n    // SVG stroke doesn't support CSS gradients, so the \"ai\" kind uses an inline\n    // SVG <linearGradient> referenced via url(#id) instead of a CSS variable.\n    isAi () {\n      return this.kind === 'ai';\n    },\n\n    // Unique per-instance to avoid collisions when multiple progress circles coexist.\n    aiGradientId () {\n      return `progress-circle-ai-gradient-${this.uid}`;\n    },\n\n    fillStrokeStyle () {\n      return this.isAi ? { stroke: `url(#${this.aiGradientId})` } : {};\n    },\n\n    sizeClass () {\n      return PROGRESS_CIRCLE_SIZES[this.size];\n    },\n\n    kindClass () {\n      return PROGRESS_CIRCLE_KINDS[this.kind];\n    },\n\n    circleRadius () {\n      return 12 - (this.strokeWidth / 2);\n    },\n\n    circleCircumference () {\n      return 2 * Math.PI * this.circleRadius;\n    },\n\n    // Draws a full circle as two arcs so getTotalLength() returns the circumference.\n    circlePath () {\n      const r = this.circleRadius;\n      const top = 12 - r;\n      const bottom = 12 + r;\n      return `M 12 ${top} A ${r} ${r} 0 0 1 12 ${bottom} A ${r} ${r} 0 0 1 12 ${top} Z`;\n    },\n\n    // stroke-dasharray/offset control how much of the circle is visually \"filled\".\n    cssVars () {\n      const C = this.circleCircumference;\n      const MIN_VISUAL_PROGRESS = 5;\n      const visualProgress = (this.progress > 0 && this.progress < MIN_VISUAL_PROGRESS)\n        ? MIN_VISUAL_PROGRESS\n        : this.progress;\n      const fillLength = C * visualProgress / 100;\n      const sw = this.strokeWidth;\n      const capArc = sw / 2;\n\n      // When both arcs are visible, round linecaps extend capArc past each endpoint.\n      // Shorten each arc by capArc at both ends (total sw per arc) so the caps meet\n      // exactly at each junction without overlapping. Rotate the fill forward by\n      // capArc so its start cap lands at 12 o'clock.\n      const both = this.progress > 0 && this.progress < 100;\n      const adj = both ? sw : 0;\n\n      return {\n        // Full-circle arcs use 'none' to avoid round-cap overlap at the path seam.\n        '--stroke-dasharray': (!both && this.progress >= 100) ? 'none' : C,\n        '--fill-dashoffset': C - Math.max(0, fillLength - adj),\n        '--fill-rotate': `${both ? (capArc / C * 360) : 0}deg`,\n        '--track-dasharray': (!both && this.progress <= 0) ? 'none' : `${Math.max(0, C - fillLength - adj)} ${C}`,\n        '--track-dashoffset': -(fillLength + (both ? capArc : 0)),\n      };\n    },\n  },\n\n};\n</script>\n\n<template>\n  <div\n    class=\"d-progress-circle\"\n    :class=\"[sizeClass, kindClass]\"\n    role=\"progressbar\"\n    :aria-label=\"ariaLabel\"\n    tabindex=\"-1\"\n    :aria-valuenow=\"progress\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    data-qa=\"dt-progress-circle\"\n  >\n    <svg\n      class=\"d-progress-circle__bar\"\n      :style=\"cssVars\"\n      viewBox=\"0 0 24 24\"\n    >\n      <defs v-if=\"isAi\">\n        <linearGradient\n          :id=\"aiGradientId\"\n          x1=\"0%\"\n          y1=\"0%\"\n          x2=\"100%\"\n          y2=\"100%\"\n        >\n          <!-- This emulates the AI gradient, for which each color isn't directly mappable to a CSS variable -->\n          <stop\n            offset=\"0%\"\n            stop-color=\"oklch(0.3328 0.079 261.93)\"\n          />\n          <stop\n            offset=\"3.08%\"\n            stop-color=\"oklch(0.3745 0.0869 263.76)\"\n          />\n          <stop\n            offset=\"14.48%\"\n            stop-color=\"oklch(0.4561 0.0924 291.07)\"\n          />\n          <stop\n            offset=\"23.67%\"\n            stop-color=\"oklch(0.4911 0.1003 307.79)\"\n          />\n          <stop\n            offset=\"35.5%\"\n            stop-color=\"oklch(0.5278 0.1347 342.65)\"\n          />\n          <stop\n            offset=\"48.3%\"\n            stop-color=\"oklch(0.587 0.1705 357.19)\"\n          />\n          <stop\n            offset=\"60.29%\"\n            stop-color=\"oklch(0.6192 0.1989 6.7)\"\n          />\n          <stop\n            offset=\"70.08%\"\n            stop-color=\"oklch(0.6541 0.2066 15.56)\"\n          />\n          <stop\n            offset=\"90.02%\"\n            stop-color=\"oklch(0.7086 0.1887 25.9)\"\n          />\n          <stop\n            offset=\"97.29%\"\n            stop-color=\"oklch(0.7524 0.1596 36.19)\"\n          />\n          <stop\n            offset=\"100%\"\n            stop-color=\"oklch(0.7524 0.1596 36.19)\"\n          />\n        </linearGradient>\n      </defs>\n      <path\n        v-if=\"progress <= 95\"\n        :d=\"circlePath\"\n        class=\"d-progress-circle__shape d-progress-circle__shape--track\"\n        fill=\"none\"\n        :stroke-width=\"strokeWidth\"\n        stroke-linecap=\"round\"\n      />\n      <path\n        v-if=\"progress > 0\"\n        :d=\"circlePath\"\n        class=\"d-progress-circle__shape d-progress-circle__shape--fill\"\n        fill=\"none\"\n        :stroke-width=\"strokeWidth\"\n        stroke-linecap=\"round\"\n        :style=\"fillStrokeStyle\"\n      />\n    </svg>\n  </div>\n</template>\n"],"names":["_sfc_main","v","s","PROGRESS_CIRCLE_SIZES","k","PROGRESS_CIRCLE_KINDS","r","top","bottom","C","MIN_VISUAL_PROGRESS","visualProgress","fillLength","sw","capArc","both","adj","_createElementBlock","_normalizeClass","$options","$props","_hoisted_2","_createElementVNode","$data"],"mappings":"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"}

package/dist/lib/progress-circle/progress-circle.js

@@ -0,0 +1,136 @@
+import { PROGRESS_CIRCLE_KINDS as p, PROGRESS_CIRCLE_SIZES as h } from "./progress-circle-constants.js";
+import { openBlock as a, createElementBlock as c, normalizeClass as u, normalizeStyle as f, createElementVNode as k, createStaticVNode as g, createCommentVNode as d } from "vue";
+import { _ } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const m = {
+  compatConfig: { MODE: 3 },
+  name: "DtProgressCircle",
+  props: {
+    /** Accessible label read by screen readers. */
+    ariaLabel: { type: String, required: !0 },
+    /** Current progress value (0–100). */
+    progress: {
+      type: Number,
+      default: 0,
+      validator: (s) => s >= 0 && s <= 100
+    },
+    /**
+     * The size of the progress indicator, aligning to Dialtone icon sizes.
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
+     */
+    size: {
+      type: String,
+      default: "500",
+      validator: (s) => Object.keys(h).includes(s)
+    },
+    /**
+     * The color variant of the progress indicator.
+     * @values default, brand, critical, positive, warning, info, ai
+     */
+    kind: {
+      type: String,
+      default: "default",
+      validator: (s) => Object.keys(p).includes(s)
+    }
+  },
+  data() {
+    return {
+      strokeWidth: 3.25,
+      uid: Math.random().toString(36).substring(2, 9)
+    };
+  },
+  computed: {
+    // SVG stroke doesn't support CSS gradients, so the "ai" kind uses an inline
+    // SVG <linearGradient> referenced via url(#id) instead of a CSS variable.
+    isAi() {
+      return this.kind === "ai";
+    },
+    // Unique per-instance to avoid collisions when multiple progress circles coexist.
+    aiGradientId() {
+      return `progress-circle-ai-gradient-${this.uid}`;
+    },
+    fillStrokeStyle() {
+      return this.isAi ? { stroke: `url(#${this.aiGradientId})` } : {};
+    },
+    sizeClass() {
+      return h[this.size];
+    },
+    kindClass() {
+      return p[this.kind];
+    },
+    circleRadius() {
+      return 12 - this.strokeWidth / 2;
+    },
+    circleCircumference() {
+      return 2 * Math.PI * this.circleRadius;
+    },
+    // Draws a full circle as two arcs so getTotalLength() returns the circumference.
+    circlePath() {
+      const s = this.circleRadius, e = 12 - s, r = 12 + s;
+      return `M 12 ${e} A ${s} ${s} 0 0 1 12 ${r} A ${s} ${s} 0 0 1 12 ${e} Z`;
+    },
+    // stroke-dasharray/offset control how much of the circle is visually "filled".
+    cssVars() {
+      const s = this.circleCircumference, e = 5, r = this.progress > 0 && this.progress < e ? e : this.progress, l = s * r / 100, o = this.strokeWidth, t = o / 2, i = this.progress > 0 && this.progress < 100, n = i ? o : 0;
+      return {
+        // Full-circle arcs use 'none' to avoid round-cap overlap at the path seam.
+        "--stroke-dasharray": !i && this.progress >= 100 ? "none" : s,
+        "--fill-dashoffset": s - Math.max(0, l - n),
+        "--fill-rotate": `${i ? t / s * 360 : 0}deg`,
+        "--track-dasharray": !i && this.progress <= 0 ? "none" : `${Math.max(0, s - l - n)} ${s}`,
+        "--track-dashoffset": -(l + (i ? t : 0))
+      };
+    }
+  }
+}, S = ["aria-label", "aria-valuenow"], y = { key: 0 }, C = ["id"], b = ["d", "stroke-width"], R = ["d", "stroke-width"];
+function v(s, e, r, l, o, t) {
+  return a(), c("div", {
+    class: u(["d-progress-circle", [t.sizeClass, t.kindClass]]),
+    role: "progressbar",
+    "aria-label": r.ariaLabel,
+    tabindex: "-1",
+    "aria-valuenow": r.progress,
+    "aria-valuemin": "0",
+    "aria-valuemax": "100",
+    "data-qa": "dt-progress-circle"
+  }, [
+    (a(), c("svg", {
+      class: "d-progress-circle__bar",
+      style: f(t.cssVars),
+      viewBox: "0 0 24 24"
+    }, [
+      t.isAi ? (a(), c("defs", y, [
+        k("linearGradient", {
+          id: t.aiGradientId,
+          x1: "0%",
+          y1: "0%",
+          x2: "100%",
+          y2: "100%"
+        }, [...e[0] || (e[0] = [
+          g('<stop offset="0%" stop-color="oklch(0.3328 0.079 261.93)"></stop><stop offset="3.08%" stop-color="oklch(0.3745 0.0869 263.76)"></stop><stop offset="14.48%" stop-color="oklch(0.4561 0.0924 291.07)"></stop><stop offset="23.67%" stop-color="oklch(0.4911 0.1003 307.79)"></stop><stop offset="35.5%" stop-color="oklch(0.5278 0.1347 342.65)"></stop><stop offset="48.3%" stop-color="oklch(0.587 0.1705 357.19)"></stop><stop offset="60.29%" stop-color="oklch(0.6192 0.1989 6.7)"></stop><stop offset="70.08%" stop-color="oklch(0.6541 0.2066 15.56)"></stop><stop offset="90.02%" stop-color="oklch(0.7086 0.1887 25.9)"></stop><stop offset="97.29%" stop-color="oklch(0.7524 0.1596 36.19)"></stop><stop offset="100%" stop-color="oklch(0.7524 0.1596 36.19)"></stop>', 11)
+        ])], 8, C)
+      ])) : d("", !0),
+      r.progress <= 95 ? (a(), c("path", {
+        key: 1,
+        d: t.circlePath,
+        class: "d-progress-circle__shape d-progress-circle__shape--track",
+        fill: "none",
+        "stroke-width": o.strokeWidth,
+        "stroke-linecap": "round"
+      }, null, 8, b)) : d("", !0),
+      r.progress > 0 ? (a(), c("path", {
+        key: 2,
+        d: t.circlePath,
+        class: "d-progress-circle__shape d-progress-circle__shape--fill",
+        fill: "none",
+        "stroke-width": o.strokeWidth,
+        "stroke-linecap": "round",
+        style: f(t.fillStrokeStyle)
+      }, null, 12, R)) : d("", !0)
+    ], 4))
+  ], 10, S);
+}
+const E = /* @__PURE__ */ _(m, [["render", v]]);
+export {
+  E as default
+};
+//# sourceMappingURL=progress-circle.js.map

package/dist/lib/progress-circle/progress-circle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-circle.js","sources":["../../../components/progress_circle/progress_circle.vue"],"sourcesContent":["<script>\n/**\n * Circular SVG progress indicator for determinate upload or processing progress.\n * @see https://dialtone.dialpad.com/components/progress-circle.html\n */\nimport { PROGRESS_CIRCLE_SIZES, PROGRESS_CIRCLE_KINDS } from './progress_circle_constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtProgressCircle',\n  props: {\n    /** Accessible label read by screen readers. */\n    ariaLabel: { type: String, required: true },\n    /** Current progress value (0–100). */\n    progress: {\n      type: Number,\n      default: 0,\n      validator: (v) => v >= 0 && v <= 100,\n    },\n\n    /**\n     * The size of the progress indicator, aligning to Dialtone icon sizes.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (s) => Object.keys(PROGRESS_CIRCLE_SIZES).includes(s),\n    },\n\n    /**\n     * The color variant of the progress indicator.\n     * @values default, brand, critical, positive, warning, info, ai\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(PROGRESS_CIRCLE_KINDS).includes(k),\n    },\n  },\n\n  data () {\n    return {\n      strokeWidth: 3.25,\n      uid: Math.random().toString(36).substring(2, 9),\n    };\n  },\n\n  computed: {\n    // SVG stroke doesn't support CSS gradients, so the \"ai\" kind uses an inline\n    // SVG <linearGradient> referenced via url(#id) instead of a CSS variable.\n    isAi () {\n      return this.kind === 'ai';\n    },\n\n    // Unique per-instance to avoid collisions when multiple progress circles coexist.\n    aiGradientId () {\n      return `progress-circle-ai-gradient-${this.uid}`;\n    },\n\n    fillStrokeStyle () {\n      return this.isAi ? { stroke: `url(#${this.aiGradientId})` } : {};\n    },\n\n    sizeClass () {\n      return PROGRESS_CIRCLE_SIZES[this.size];\n    },\n\n    kindClass () {\n      return PROGRESS_CIRCLE_KINDS[this.kind];\n    },\n\n    circleRadius () {\n      return 12 - (this.strokeWidth / 2);\n    },\n\n    circleCircumference () {\n      return 2 * Math.PI * this.circleRadius;\n    },\n\n    // Draws a full circle as two arcs so getTotalLength() returns the circumference.\n    circlePath () {\n      const r = this.circleRadius;\n      const top = 12 - r;\n      const bottom = 12 + r;\n      return `M 12 ${top} A ${r} ${r} 0 0 1 12 ${bottom} A ${r} ${r} 0 0 1 12 ${top} Z`;\n    },\n\n    // stroke-dasharray/offset control how much of the circle is visually \"filled\".\n    cssVars () {\n      const C = this.circleCircumference;\n      const MIN_VISUAL_PROGRESS = 5;\n      const visualProgress = (this.progress > 0 && this.progress < MIN_VISUAL_PROGRESS)\n        ? MIN_VISUAL_PROGRESS\n        : this.progress;\n      const fillLength = C * visualProgress / 100;\n      const sw = this.strokeWidth;\n      const capArc = sw / 2;\n\n      // When both arcs are visible, round linecaps extend capArc past each endpoint.\n      // Shorten each arc by capArc at both ends (total sw per arc) so the caps meet\n      // exactly at each junction without overlapping. Rotate the fill forward by\n      // capArc so its start cap lands at 12 o'clock.\n      const both = this.progress > 0 && this.progress < 100;\n      const adj = both ? sw : 0;\n\n      return {\n        // Full-circle arcs use 'none' to avoid round-cap overlap at the path seam.\n        '--stroke-dasharray': (!both && this.progress >= 100) ? 'none' : C,\n        '--fill-dashoffset': C - Math.max(0, fillLength - adj),\n        '--fill-rotate': `${both ? (capArc / C * 360) : 0}deg`,\n        '--track-dasharray': (!both && this.progress <= 0) ? 'none' : `${Math.max(0, C - fillLength - adj)} ${C}`,\n        '--track-dashoffset': -(fillLength + (both ? capArc : 0)),\n      };\n    },\n  },\n\n};\n</script>\n\n<template>\n  <div\n    class=\"d-progress-circle\"\n    :class=\"[sizeClass, kindClass]\"\n    role=\"progressbar\"\n    :aria-label=\"ariaLabel\"\n    tabindex=\"-1\"\n    :aria-valuenow=\"progress\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    data-qa=\"dt-progress-circle\"\n  >\n    <svg\n      class=\"d-progress-circle__bar\"\n      :style=\"cssVars\"\n      viewBox=\"0 0 24 24\"\n    >\n      <defs v-if=\"isAi\">\n        <linearGradient\n          :id=\"aiGradientId\"\n          x1=\"0%\"\n          y1=\"0%\"\n          x2=\"100%\"\n          y2=\"100%\"\n        >\n          <!-- This emulates the AI gradient, for which each color isn't directly mappable to a CSS variable -->\n          <stop\n            offset=\"0%\"\n            stop-color=\"oklch(0.3328 0.079 261.93)\"\n          />\n          <stop\n            offset=\"3.08%\"\n            stop-color=\"oklch(0.3745 0.0869 263.76)\"\n          />\n          <stop\n            offset=\"14.48%\"\n            stop-color=\"oklch(0.4561 0.0924 291.07)\"\n          />\n          <stop\n            offset=\"23.67%\"\n            stop-color=\"oklch(0.4911 0.1003 307.79)\"\n          />\n          <stop\n            offset=\"35.5%\"\n            stop-color=\"oklch(0.5278 0.1347 342.65)\"\n          />\n          <stop\n            offset=\"48.3%\"\n            stop-color=\"oklch(0.587 0.1705 357.19)\"\n          />\n          <stop\n            offset=\"60.29%\"\n            stop-color=\"oklch(0.6192 0.1989 6.7)\"\n          />\n          <stop\n            offset=\"70.08%\"\n            stop-color=\"oklch(0.6541 0.2066 15.56)\"\n          />\n          <stop\n            offset=\"90.02%\"\n            stop-color=\"oklch(0.7086 0.1887 25.9)\"\n          />\n          <stop\n            offset=\"97.29%\"\n            stop-color=\"oklch(0.7524 0.1596 36.19)\"\n          />\n          <stop\n            offset=\"100%\"\n            stop-color=\"oklch(0.7524 0.1596 36.19)\"\n          />\n        </linearGradient>\n      </defs>\n      <path\n        v-if=\"progress <= 95\"\n        :d=\"circlePath\"\n        class=\"d-progress-circle__shape d-progress-circle__shape--track\"\n        fill=\"none\"\n        :stroke-width=\"strokeWidth\"\n        stroke-linecap=\"round\"\n      />\n      <path\n        v-if=\"progress > 0\"\n        :d=\"circlePath\"\n        class=\"d-progress-circle__shape d-progress-circle__shape--fill\"\n        fill=\"none\"\n        :stroke-width=\"strokeWidth\"\n        stroke-linecap=\"round\"\n        :style=\"fillStrokeStyle\"\n      />\n    </svg>\n  </div>\n</template>\n"],"names":["_sfc_main","v","PROGRESS_CIRCLE_SIZES","k","PROGRESS_CIRCLE_KINDS","r","top","bottom","C","MIN_VISUAL_PROGRESS","visualProgress","fillLength","sw","capArc","both","adj","_createElementBlock","_normalizeClass","$options","$props","_hoisted_2","_createElementVNode","$data"],"mappings":"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"}