@kiva/kv-components 8.5.0 → 8.5.2

package/dist/index.js

@@ -8,7 +8,7 @@ import { default as K } from "./vue/KvCartModal.js";
 import { default as A } from "./vue/KvCartPill.js";
 import { default as C } from "./vue/KvCheckbox.js";
 import { default as L } from "./vue/KvCheckoutReceipt.js";
-import { default as T } from "./vue/KvChip.js";
+import { default as c } from "./vue/KvChip.js";
 import { default as E } from "./vue/KvClassicLoanCard.js";
 import { default as O } from "./vue/KvCompactLoanCard.js";
 import { default as I } from "./vue/KvCommentsAdd.js";
@@ -35,7 +35,7 @@ import { default as vo } from "./vue/KvLendCta.js";
 import { default as io } from "./vue/KvLightbox.js";
 import { default as _o } from "./vue/KvLineGraph.js";
 import { default as No } from "./vue/KvLoanActivities.js";
-import { default as co } from "./vue/KvLoanBookmark.js";
+import { default as To } from "./vue/KvLoanBookmark.js";
 import { default as Ro } from "./vue/KvLoanCallouts.js";
 import { KV_LOAN_INFO_CARD_FRAGMENT as Mo, default as Io } from "./vue/KvLoanInfoCard.js";
 import { default as go } from "./vue/KvLoanProgressGroup.js";
@@ -52,81 +52,82 @@ import { default as Xo } from "./vue/KvPieChart.js";
 import { default as Zo } from "./vue/KvPill.js";
 import { default as oe } from "./vue/KvPopper.js";
 import { default as re } from "./vue/KvProgressBar.js";
-import { default as ae } from "./vue/KvPulsingDot.js";
-import { default as le } from "./vue/KvRadio.js";
-import { default as se } from "./vue/KvSelect.js";
-import { default as pe } from "./vue/KvSideSheet.js";
-import { default as ue } from "./vue/KvSwitch.js";
-import { default as Ke } from "./vue/KvTab.js";
-import { default as Ae } from "./vue/KvTabPanel.js";
-import { default as Ce } from "./vue/KvTabs.js";
-import { default as Le } from "./vue/KvTextInput.js";
-import { default as Te } from "./vue/KvTextLink.js";
-import { default as Ee } from "./vue/KvThemeProvider.js";
-import { default as Oe } from "./vue/KvToast.js";
-import { default as Ie } from "./vue/KvTooltip.js";
-import { default as ge } from "./vue/KvTreeMapChart.js";
-import { default as Ge } from "./vue/KvUserAvatar.js";
-import { default as he } from "./vue/KvUtilityMenu.js";
-import { default as Be } from "./vue/KvVerticalCarousel.js";
-import { default as ye } from "./vue/KvVotingCard.js";
-import { default as ke } from "./vue/KvVotingCardV2.js";
-import { default as we } from "./vue/KvWideLoanCard.js";
-import { default as He } from "./vue/KvAtbModal.js";
-import { default as ze } from "./vue/KvSecondaryNav.js";
-import { default as qe } from "./vue/KvWwwHeader.js";
-import { default as Xe, Mash as Ye } from "./utils/Alea.js";
-import { groupBy as $e, sortBy as or } from "./utils/arrayUtils.js";
-import { useAttrs as rr } from "./utils/attrs.js";
-import { carouselUtil as ar } from "./utils/carousels.js";
-import { abc as lr, indexIn as mr, startsWith as sr } from "./utils/comparators.js";
-import { debounce as pr } from "./utils/debounce.js";
-import { useEventListener as ur } from "./utils/event.js";
-import { collapse as Kr, expand as vr } from "./utils/expander.js";
-import { getKivaImageUrl as ir, isLegacyPlaceholderAvatar as Cr, randomizedUserAvatarClass as _r } from "./utils/imageUtils.js";
-import { LOAN_CALLOUTS_FRAGMENT as Nr, LOAN_GEOCODE_FRAGMENT as Tr, LOAN_PROGRESS_FRAGMENT as cr, loanCardComputedProperties as Er, loanCardMethods as Rr } from "./utils/loanCard.js";
-import { BALANCE_CAMPAIGN as Mr, BASE_CAMPAIGN as Ir, ERL_COOKIE_NAME as Sr, NO_BALANCE_CAMPAIGN as gr, TOP_UP_CAMPAIGN as Pr, getDropdownPriceArray as Gr, getLendCtaSelectedOption as Fr, isBetween25And50 as hr, isLessThan25 as Vr, truncateStringByWords as Br } from "./utils/loanUtils.js";
-import { animationCoordinator as yr, generateMapMarkers as br, getCoordinatesBetween as kr, getCountryColor as Ur, getLoansIntervals as wr } from "./utils/mapUtils.js";
-import { lockPrintSingleEl as Hr, unlockPrintSingleEl as jr } from "./utils/printing.js";
-import { lockScroll as Qr, lockScrollSmallOnly as qr, unlockScroll as Jr, unlockScrollSmallOnly as Xr } from "./utils/scrollLock.js";
-import { buildTailwindClassName as Zr, headerNumberCase as $r, kebabCase as ot, removeObjectProperty as et } from "./utils/themeUtils.js";
-import { throttle as tt } from "./utils/throttle.js";
-import { isTargetElement as ft, offBodyTouchstart as lt, onBodyTouchstart as mt } from "./utils/touchEvents.js";
-import { getTreemap as dt } from "./utils/treemap.js";
-import { KvBlueskyIcon as xt } from "./assets/icons/bluesky.js";
-import { KV_CLASSIC_LOAN_CARD_FRAGMENT as nt, KV_CLASSIC_LOAN_CARD_USER_FRAGMET as Kt } from "./vue/KvClassicLoanCard2.js";
-import { KV_COMPACT_LOAN_CARD_FRAGMENT as At, KV_COMPACT_LOAN_CARD_USER_FRAGMENT as it } from "./vue/KvCompactLoanCard2.js";
-import { KV_INTRODUCTION_LOAN_CARD_FRAGMENT as _t, KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT as Lt } from "./vue/KvIntroductionLoanCard2.js";
-import { KV_LEND_CTA_FRAGMENT as Tt, KV_LEND_CTA_USER_FRAGMENT as ct } from "./vue/KvLendCta2.js";
-import { KV_LOAN_ACTIVITIES_FRAGMENT as Rt } from "./vue/KvLoanActivities2.js";
-import { KV_LOAN_BOOKMARK_FRAGMENT as Mt } from "./vue/KvLoanBookmark2.js";
-import { KV_LOAN_TAG_FRAGMENT as St } from "./vue/KvLoanTag2.js";
-import { KV_LOAN_USE_FRAGMENT as Pt } from "./vue/KvLoanUse2.js";
-import { KV_WIDE_LOAN_CARD_FRAGMENT as Ft, KV_WIDE_LOAN_CARD_USER_FRAGMENT as ht } from "./vue/KvWideLoanCard2.js";
+import { default as ae } from "./vue/KvProgressCircle.js";
+import { default as le } from "./vue/KvPulsingDot.js";
+import { default as se } from "./vue/KvRadio.js";
+import { default as pe } from "./vue/KvSelect.js";
+import { default as ue } from "./vue/KvSideSheet.js";
+import { default as Ke } from "./vue/KvSwitch.js";
+import { default as Ae } from "./vue/KvTab.js";
+import { default as Ce } from "./vue/KvTabPanel.js";
+import { default as Le } from "./vue/KvTabs.js";
+import { default as ce } from "./vue/KvTextInput.js";
+import { default as Ee } from "./vue/KvTextLink.js";
+import { default as Oe } from "./vue/KvThemeProvider.js";
+import { default as Ie } from "./vue/KvToast.js";
+import { default as ge } from "./vue/KvTooltip.js";
+import { default as Ge } from "./vue/KvTreeMapChart.js";
+import { default as he } from "./vue/KvUserAvatar.js";
+import { default as Be } from "./vue/KvUtilityMenu.js";
+import { default as ye } from "./vue/KvVerticalCarousel.js";
+import { default as ke } from "./vue/KvVotingCard.js";
+import { default as we } from "./vue/KvVotingCardV2.js";
+import { default as He } from "./vue/KvWideLoanCard.js";
+import { default as ze } from "./vue/KvAtbModal.js";
+import { default as qe } from "./vue/KvSecondaryNav.js";
+import { default as Xe } from "./vue/KvWwwHeader.js";
+import { default as Ze, Mash as $e } from "./utils/Alea.js";
+import { groupBy as er, sortBy as rr } from "./utils/arrayUtils.js";
+import { useAttrs as ar } from "./utils/attrs.js";
+import { carouselUtil as lr } from "./utils/carousels.js";
+import { abc as sr, indexIn as dr, startsWith as pr } from "./utils/comparators.js";
+import { debounce as ur } from "./utils/debounce.js";
+import { useEventListener as Kr } from "./utils/event.js";
+import { collapse as Ar, expand as ir } from "./utils/expander.js";
+import { getKivaImageUrl as _r, isLegacyPlaceholderAvatar as Lr, randomizedUserAvatarClass as Nr } from "./utils/imageUtils.js";
+import { LOAN_CALLOUTS_FRAGMENT as Tr, LOAN_GEOCODE_FRAGMENT as Er, LOAN_PROGRESS_FRAGMENT as Rr, loanCardComputedProperties as Or, loanCardMethods as Mr } from "./utils/loanCard.js";
+import { BALANCE_CAMPAIGN as Sr, BASE_CAMPAIGN as gr, ERL_COOKIE_NAME as Pr, NO_BALANCE_CAMPAIGN as Gr, TOP_UP_CAMPAIGN as Fr, getDropdownPriceArray as hr, getLendCtaSelectedOption as Vr, isBetween25And50 as Br, isLessThan25 as Dr, truncateStringByWords as yr } from "./utils/loanUtils.js";
+import { animationCoordinator as kr, generateMapMarkers as Ur, getCoordinatesBetween as wr, getCountryColor as Wr, getLoansIntervals as Hr } from "./utils/mapUtils.js";
+import { lockPrintSingleEl as zr, unlockPrintSingleEl as Qr } from "./utils/printing.js";
+import { lockScroll as Jr, lockScrollSmallOnly as Xr, unlockScroll as Yr, unlockScrollSmallOnly as Zr } from "./utils/scrollLock.js";
+import { buildTailwindClassName as ot, headerNumberCase as et, kebabCase as rt, removeObjectProperty as tt } from "./utils/themeUtils.js";
+import { throttle as ft } from "./utils/throttle.js";
+import { isTargetElement as mt, offBodyTouchstart as st, onBodyTouchstart as dt } from "./utils/touchEvents.js";
+import { getTreemap as xt } from "./utils/treemap.js";
+import { KvBlueskyIcon as nt } from "./assets/icons/bluesky.js";
+import { KV_CLASSIC_LOAN_CARD_FRAGMENT as vt, KV_CLASSIC_LOAN_CARD_USER_FRAGMET as At } from "./vue/KvClassicLoanCard2.js";
+import { KV_COMPACT_LOAN_CARD_FRAGMENT as Ct, KV_COMPACT_LOAN_CARD_USER_FRAGMENT as _t } from "./vue/KvCompactLoanCard2.js";
+import { KV_INTRODUCTION_LOAN_CARD_FRAGMENT as Nt, KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT as ct } from "./vue/KvIntroductionLoanCard2.js";
+import { KV_LEND_CTA_FRAGMENT as Et, KV_LEND_CTA_USER_FRAGMENT as Rt } from "./vue/KvLendCta2.js";
+import { KV_LOAN_ACTIVITIES_FRAGMENT as Mt } from "./vue/KvLoanActivities2.js";
+import { KV_LOAN_BOOKMARK_FRAGMENT as St } from "./vue/KvLoanBookmark2.js";
+import { KV_LOAN_TAG_FRAGMENT as Pt } from "./vue/KvLoanTag2.js";
+import { KV_LOAN_USE_FRAGMENT as Ft } from "./vue/KvLoanUse2.js";
+import { KV_WIDE_LOAN_CARD_FRAGMENT as Vt, KV_WIDE_LOAN_CARD_USER_FRAGMENT as Bt } from "./vue/KvWideLoanCard2.js";
 export {
-  Xe as Alea,
-  Mr as BALANCE_CAMPAIGN,
-  Ir as BASE_CAMPAIGN,
-  Sr as ERL_COOKIE_NAME,
-  nt as KV_CLASSIC_LOAN_CARD_FRAGMENT,
-  Kt as KV_CLASSIC_LOAN_CARD_USER_FRAGMET,
-  At as KV_COMPACT_LOAN_CARD_FRAGMENT,
-  it as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
-  _t as KV_INTRODUCTION_LOAN_CARD_FRAGMENT,
-  Lt as KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT,
-  Tt as KV_LEND_CTA_FRAGMENT,
-  ct as KV_LEND_CTA_USER_FRAGMENT,
-  Rt as KV_LOAN_ACTIVITIES_FRAGMENT,
-  Mt as KV_LOAN_BOOKMARK_FRAGMENT,
+  Ze as Alea,
+  Sr as BALANCE_CAMPAIGN,
+  gr as BASE_CAMPAIGN,
+  Pr as ERL_COOKIE_NAME,
+  vt as KV_CLASSIC_LOAN_CARD_FRAGMENT,
+  At as KV_CLASSIC_LOAN_CARD_USER_FRAGMET,
+  Ct as KV_COMPACT_LOAN_CARD_FRAGMENT,
+  _t as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
+  Nt as KV_INTRODUCTION_LOAN_CARD_FRAGMENT,
+  ct as KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT,
+  Et as KV_LEND_CTA_FRAGMENT,
+  Rt as KV_LEND_CTA_USER_FRAGMENT,
+  Mt as KV_LOAN_ACTIVITIES_FRAGMENT,
+  St as KV_LOAN_BOOKMARK_FRAGMENT,
   Mo as KV_LOAN_INFO_CARD_FRAGMENT,
-  St as KV_LOAN_TAG_FRAGMENT,
-  Pt as KV_LOAN_USE_FRAGMENT,
-  Ft as KV_WIDE_LOAN_CARD_FRAGMENT,
-  ht as KV_WIDE_LOAN_CARD_USER_FRAGMENT,
+  Pt as KV_LOAN_TAG_FRAGMENT,
+  Ft as KV_LOAN_USE_FRAGMENT,
+  Vt as KV_WIDE_LOAN_CARD_FRAGMENT,
+  Bt as KV_WIDE_LOAN_CARD_USER_FRAGMENT,
   r as KvAccordionItem,
   a as KvActivityRow,
-  He as KvAtbModal,
-  xt as KvBlueskyIcon,
+  ze as KvAtbModal,
+  nt as KvBlueskyIcon,
   l as KvBorrowerImage,
   s as KvButton,
   p as KvCardFrame,
@@ -135,7 +136,7 @@ export {
   A as KvCartPill,
   C as KvCheckbox,
   L as KvCheckoutReceipt,
-  T as KvChip,
+  c as KvChip,
   E as KvClassicLoanCard,
   I as KvCommentsAdd,
   g as KvCommentsContainer,
@@ -164,7 +165,7 @@ export {
   yo as KvLoadingPlaceholder,
   ko as KvLoadingSpinner,
   No as KvLoanActivities,
-  co as KvLoanBookmark,
+  To as KvLoanBookmark,
   Ro as KvLoanCallouts,
   Io as KvLoanInfoCard,
   go as KvLoanProgressGroup,
@@ -179,73 +180,74 @@ export {
   Zo as KvPill,
   oe as KvPopper,
   re as KvProgressBar,
-  ae as KvPulsingDot,
-  le as KvRadio,
-  ze as KvSecondaryNav,
-  se as KvSelect,
-  pe as KvSideSheet,
-  ue as KvSwitch,
-  Ke as KvTab,
-  Ae as KvTabPanel,
-  Ce as KvTabs,
-  Le as KvTextInput,
-  Te as KvTextLink,
-  Ee as KvThemeProvider,
-  Oe as KvToast,
-  Ie as KvTooltip,
-  ge as KvTreeMapChart,
-  Ge as KvUserAvatar,
-  he as KvUtilityMenu,
-  Be as KvVerticalCarousel,
-  ye as KvVotingCard,
-  ke as KvVotingCardV2,
-  we as KvWideLoanCard,
-  qe as KvWwwHeader,
-  Nr as LOAN_CALLOUTS_FRAGMENT,
-  Tr as LOAN_GEOCODE_FRAGMENT,
-  cr as LOAN_PROGRESS_FRAGMENT,
-  Ye as Mash,
-  gr as NO_BALANCE_CAMPAIGN,
-  Pr as TOP_UP_CAMPAIGN,
-  lr as abc,
-  yr as animationCoordinator,
-  Zr as buildTailwindClassName,
-  ar as carouselUtil,
-  Kr as collapse,
-  pr as debounce,
-  vr as expand,
-  br as generateMapMarkers,
-  kr as getCoordinatesBetween,
-  Ur as getCountryColor,
-  Gr as getDropdownPriceArray,
-  ir as getKivaImageUrl,
-  Fr as getLendCtaSelectedOption,
-  wr as getLoansIntervals,
-  dt as getTreemap,
-  $e as groupBy,
-  $r as headerNumberCase,
-  mr as indexIn,
-  hr as isBetween25And50,
-  Cr as isLegacyPlaceholderAvatar,
-  Vr as isLessThan25,
-  ft as isTargetElement,
-  ot as kebabCase,
-  Er as loanCardComputedProperties,
-  Rr as loanCardMethods,
-  Hr as lockPrintSingleEl,
-  Qr as lockScroll,
-  qr as lockScrollSmallOnly,
-  lt as offBodyTouchstart,
-  mt as onBodyTouchstart,
-  _r as randomizedUserAvatarClass,
-  et as removeObjectProperty,
-  or as sortBy,
-  sr as startsWith,
-  tt as throttle,
-  Br as truncateStringByWords,
-  jr as unlockPrintSingleEl,
-  Jr as unlockScroll,
-  Xr as unlockScrollSmallOnly,
-  rr as useAttrs,
-  ur as useEventListener
+  ae as KvProgressCircle,
+  le as KvPulsingDot,
+  se as KvRadio,
+  qe as KvSecondaryNav,
+  pe as KvSelect,
+  ue as KvSideSheet,
+  Ke as KvSwitch,
+  Ae as KvTab,
+  Ce as KvTabPanel,
+  Le as KvTabs,
+  ce as KvTextInput,
+  Ee as KvTextLink,
+  Oe as KvThemeProvider,
+  Ie as KvToast,
+  ge as KvTooltip,
+  Ge as KvTreeMapChart,
+  he as KvUserAvatar,
+  Be as KvUtilityMenu,
+  ye as KvVerticalCarousel,
+  ke as KvVotingCard,
+  we as KvVotingCardV2,
+  He as KvWideLoanCard,
+  Xe as KvWwwHeader,
+  Tr as LOAN_CALLOUTS_FRAGMENT,
+  Er as LOAN_GEOCODE_FRAGMENT,
+  Rr as LOAN_PROGRESS_FRAGMENT,
+  $e as Mash,
+  Gr as NO_BALANCE_CAMPAIGN,
+  Fr as TOP_UP_CAMPAIGN,
+  sr as abc,
+  kr as animationCoordinator,
+  ot as buildTailwindClassName,
+  lr as carouselUtil,
+  Ar as collapse,
+  ur as debounce,
+  ir as expand,
+  Ur as generateMapMarkers,
+  wr as getCoordinatesBetween,
+  Wr as getCountryColor,
+  hr as getDropdownPriceArray,
+  _r as getKivaImageUrl,
+  Vr as getLendCtaSelectedOption,
+  Hr as getLoansIntervals,
+  xt as getTreemap,
+  er as groupBy,
+  et as headerNumberCase,
+  dr as indexIn,
+  Br as isBetween25And50,
+  Lr as isLegacyPlaceholderAvatar,
+  Dr as isLessThan25,
+  mt as isTargetElement,
+  rt as kebabCase,
+  Or as loanCardComputedProperties,
+  Mr as loanCardMethods,
+  zr as lockPrintSingleEl,
+  Jr as lockScroll,
+  Xr as lockScrollSmallOnly,
+  st as offBodyTouchstart,
+  dt as onBodyTouchstart,
+  Nr as randomizedUserAvatarClass,
+  tt as removeObjectProperty,
+  rr as sortBy,
+  pr as startsWith,
+  ft as throttle,
+  yr as truncateStringByWords,
+  Qr as unlockPrintSingleEl,
+  Yr as unlockScroll,
+  Zr as unlockScrollSmallOnly,
+  ar as useAttrs,
+  Kr as useEventListener
 };

package/dist/vue/KvProgressCircle.css

@@ -0,0 +1 @@
+@supports (-moz-appearance:none){.kv-progress-circle__ring-text[data-v-a03fc07d],.kv-progress-circle__ring-text-backdrop[data-v-a03fc07d]{display:none}}

package/dist/vue/KvProgressCircle.js

@@ -0,0 +1,102 @@
+import c from "./KvProgressCircle2.js";
+import { openBlock as o, createElementBlock as a, createElementVNode as t, normalizeStyle as i, normalizeClass as s, Fragment as l, toDisplayString as n, createCommentVNode as d } from "vue";
+import "./KvProgressCircle.css";
+import f from "../_virtual/_plugin-vue_export-helper.js";
+const x = ["value"], h = { class: "tw-w-full" }, _ = ["viewBox"], w = ["stroke-dasharray", "stroke-width", "r", "cx", "cy"], k = ["stroke-dasharray", "stroke-width", "r", "cx", "cy"], m = ["d"], y = ["d"], g = ["dy", "dx", "font-size"], u = ["xlink:href"], v = ["dy", "dx", "font-size"], z = ["xlink:href"];
+function D(b, T, e, r, C, S) {
+  return o(), a("div", null, [
+    t("progress", {
+      class: "tw-sr-only",
+      max: "100",
+      value: e.value
+    }, null, 8, x),
+    t("div", h, [
+      (o(), a("svg", {
+        class: "tw-block tw-overflow-visible",
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: `0 0 ${r.radius * 2} ${r.radius * 2}`
+      }, [
+        t("circle", {
+          class: "tw-origin-center tw-text-primary-inverse tw-stroke-current",
+          "stroke-dasharray": r.circumference + " " + r.circumference,
+          style: i([{ fill: "transparent", "stroke-linecap": "round", transition: "stroke-dashoffset 0.125s" }, {
+            strokeDashoffset: r.backgroundStrokeDashoffset,
+            transform: r.circleTransform
+          }]),
+          "stroke-width": e.strokeWidth,
+          r: r.normalizedRadius,
+          cx: r.radius,
+          cy: r.radius
+        }, null, 12, w),
+        t("circle", {
+          class: s(`tw-origin-center tw-text-${e.color} tw-stroke-current`),
+          "stroke-dasharray": r.circumference + " " + r.circumference,
+          style: i([{ fill: "transparent", "stroke-linecap": "round", transition: "stroke-dashoffset 0.125s" }, {
+            strokeDashoffset: r.strokeDashoffset,
+            transform: r.circleTransform
+          }]),
+          "stroke-width": e.strokeWidth,
+          r: r.normalizedRadius,
+          cx: r.radius,
+          cy: r.radius
+        }, null, 14, k),
+        e.showNumber ? (o(), a(l, { key: 0 }, [
+          t("defs", null, [
+            t("path", {
+              id: "text_circle",
+              d: `
+							M ${r.radius}, ${r.radius}
+							m -${r.radius}, 0
+							a ${r.radius},${r.radius} 0 1,1 ${r.radius * 2},0
+							a ${r.radius},${r.radius} 0 1,1 -${r.radius * 2},0
+						`,
+              class: "tw-text-transparent tw-fill-current tw-origin-center",
+              style: i({
+                transform: `${r.textCircleTransform}`
+              })
+            }, null, 12, m),
+            t("path", {
+              id: "text_circle_flipped",
+              d: `
+							M ${r.radius}, ${r.radius}
+							m -${r.radius}, 0
+							a ${r.radius},${r.radius} 0 1,0 ${r.radius * 2},0
+							a ${r.radius},${r.radius} 0 1,0 -${r.radius * 2},0
+						`,
+              class: "tw-text-transparent tw-fill-current tw-origin-center",
+              style: i({
+                transform: `${r.textCircleTransform}`
+              })
+            }, null, 12, y)
+          ]),
+          t("text", {
+            class: "kv-progress-circle__ring-text-backdrop tw-text-white tw-fill-current tw-stroke-current",
+            style: { "paint-order": "stroke", "stroke-width": "0.675em", "stroke-linecap": "butt", "stroke-linejoin": "round", "font-weight": "900", "text-anchor": "start", "letter-spacing": "0.1em" },
+            dy: r.textDy,
+            dx: r.textDx,
+            "font-size": r.fontSize
+          }, [
+            t("textPath", {
+              "xlink:href": `#text_circle${r.flipText ? "_flipped" : ""}`
+            }, n(e.value) + "% ", 9, u)
+          ], 8, g),
+          t("text", {
+            class: s(`kv-progress-circle__ring-text tw-text-${e.color} tw-fill-current tw-stroke-current`),
+            style: { "font-weight": "900", "text-anchor": "start", "letter-spacing": "0.1em" },
+            dy: r.textDy,
+            dx: r.textDx,
+            "font-size": r.fontSize
+          }, [
+            t("textPath", {
+              "xlink:href": `#text_circle${r.flipText ? "_flipped" : ""}`
+            }, n(e.value) + "% ", 9, z)
+          ], 10, v)
+        ], 64)) : d("", !0)
+      ], 8, _))
+    ])
+  ]);
+}
+const M = /* @__PURE__ */ f(c, [["render", D], ["__scopeId", "data-v-a03fc07d"]]);
+export {
+  M as default
+};

package/dist/vue/KvProgressCircle.vue.d.ts

@@ -0,0 +1,72 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    value: {
+        type: NumberConstructor;
+        required: true;
+        validator(val: number): boolean;
+    };
+    arcScale: {
+        type: NumberConstructor;
+        default: number;
+    };
+    rotate: {
+        type: NumberConstructor;
+        default: number;
+    };
+    strokeWidth: {
+        default: number;
+        type: NumberConstructor;
+    };
+    showNumber: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {
+    radius: import('vue').Ref<number, number>;
+    fontSize: import('vue').ComputedRef<number>;
+    normalizedRadius: import('vue').ComputedRef<number>;
+    circumference: import('vue').ComputedRef<number>;
+    strokeDashoffset: import('vue').ComputedRef<number>;
+    backgroundStrokeDashoffset: import('vue').ComputedRef<number>;
+    circleTransform: import('vue').ComputedRef<string>;
+    textCircleTransform: import('vue').ComputedRef<string>;
+    flipText: import('vue').ComputedRef<boolean>;
+    textDx: import('vue').ComputedRef<number>;
+    textDy: import('vue').ComputedRef<number>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    value: {
+        type: NumberConstructor;
+        required: true;
+        validator(val: number): boolean;
+    };
+    arcScale: {
+        type: NumberConstructor;
+        default: number;
+    };
+    rotate: {
+        type: NumberConstructor;
+        default: number;
+    };
+    strokeWidth: {
+        default: number;
+        type: NumberConstructor;
+    };
+    showNumber: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    color: string;
+    arcScale: number;
+    rotate: number;
+    strokeWidth: number;
+    showNumber: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/vue/KvProgressCircle2.js

@@ -0,0 +1,70 @@
+import { ref as m, computed as t } from "vue";
+const b = {
+  name: "KvProgressCircle",
+  props: {
+    /**
+           * Value of the progress circle, between 0 and 100.
+           * */
+    value: {
+      type: Number,
+      required: !0,
+      validator(e) {
+        return e >= 0 && e <= 100;
+      }
+    },
+    /**
+     * Create an arc instead of a full circle. A percent.
+     * */
+    arcScale: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Degrees to rotate the circle, used in tandem with arcScale.
+     * */
+    rotate: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Stroke width as a percent of the circle
+     * */
+    strokeWidth: {
+      default: 8,
+      type: Number
+    },
+    /**
+     * Whether to show the value as a number
+     * */
+    showNumber: {
+      default: !1,
+      type: Boolean
+    },
+    /**
+     * Color of the progress circle
+     * */
+    color: {
+      type: String,
+      default: "brand"
+    }
+  },
+  setup(e) {
+    const u = m(100), l = t(() => e.strokeWidth * 3), c = t(() => u.value - e.strokeWidth / 2), a = t(() => c.value * 2 * Math.PI), o = t(() => a.value - e.value / 100 * a.value * e.arcScale), n = t(() => a.value - 1 * a.value * e.arcScale), f = t(() => `rotate(${90 + e.rotate}deg)`), s = t(() => `rotate(${-90 + e.rotate}deg)`), r = t(() => e.value > 75 || e.value < 25), d = t(() => r.value ? a.value - e.value / 100 * a.value * e.arcScale : e.value / 100 * a.value * e.arcScale), i = t(() => r.value ? 0 : l.value * 0.625);
+    return {
+      radius: u,
+      fontSize: l,
+      normalizedRadius: c,
+      circumference: a,
+      strokeDashoffset: o,
+      backgroundStrokeDashoffset: n,
+      circleTransform: f,
+      textCircleTransform: s,
+      flipText: r,
+      textDx: d,
+      textDy: i
+    };
+  }
+};
+export {
+  b as default
+};

package/dist/vue/index.d.ts

@@ -61,6 +61,7 @@ export { default as KvPieChart } from './KvPieChart.vue';
 export { default as KvPill } from './KvPill.vue';
 export { default as KvPopper } from './KvPopper.vue';
 export { default as KvProgressBar } from './KvProgressBar.vue';
+export { default as KvProgressCircle } from './KvProgressCircle.vue';
 export { default as KvPulsingDot } from './KvPulsingDot.vue';
 export { default as KvRadio } from './KvRadio.vue';
 export { default as KvSelect } from './KvSelect.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "8.5.0",
+  "version": "8.5.2",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -34,7 +34,7 @@
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@kiva/kv-tokens": "^3.7.0",
+    "@kiva/kv-tokens": "^3.7.1",
     "@kiva/vite-plugin-vue-lib-css": "^2.0.0",
     "@laynezh/vite-plugin-lib-assets": "^0.6.1",
     "@mdi/js": "^7.4.47",
@@ -125,5 +125,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "bd94149eeb35605fb1df045f5804708dad7eb8b4"
+  "gitHead": "8ae76e2ab2c457b7dd52654cb154bbd2723904ef"
 }