@kiva/kv-components 8.21.1 → 8.22.0

package/dist/index.js

@@ -4,7 +4,7 @@ import { default as l } from "./vue/KvBorrowerImage.js";
 import { default as p } from "./vue/KvButton.js";
 import { default as d } from "./vue/KvCardFrame.js";
 import { default as x } from "./vue/KvCarousel.js";
-import { default as K } from "./vue/KvCartModal.js";
+import { default as n } from "./vue/KvCartModal.js";
 import { default as A } from "./vue/KvCartPill.js";
 import { default as C } from "./vue/KvCheckbox.js";
 import { default as c } from "./vue/KvCheckoutReceipt.js";
@@ -14,10 +14,10 @@ import { default as M } from "./vue/KvCompactLoanCard.js";
 import { default as O } from "./vue/KvCommentsAdd.js";
 import { default as g } from "./vue/KvCommentsContainer.js";
 import { default as G } from "./vue/KvCommentsHeartButton.js";
-import { default as D } from "./vue/KvCommentsList.js";
-import { default as V } from "./vue/KvCommentsListItem.js";
+import { default as h } from "./vue/KvCommentsList.js";
+import { default as B } from "./vue/KvCommentsListItem.js";
 import { default as U } from "./vue/KvCommentsReplyButton.js";
-import { default as b } from "./vue/KvContentfulImg.js";
+import { default as k } from "./vue/KvContentfulImg.js";
 import { default as w } from "./vue/KvCountdownTimer.js";
 import { default as H } from "./vue/KvDatePicker.js";
 import { default as j } from "./vue/KvExpandable.js";
@@ -31,7 +31,7 @@ import { default as le } from "./vue/KvImpactVerticalSelector.js";
 import { default as pe } from "./vue/KvInlineActivityCard.js";
 import { default as de } from "./vue/KvInlineActivityFeed.js";
 import { default as xe } from "./vue/KvIntroductionLoanCard.js";
-import { default as Ke } from "./vue/KvLendAmountButton.js";
+import { default as ne } from "./vue/KvLendAmountButton.js";
 import { default as Ae } from "./vue/KvLendCta.js";
 import { default as Ce } from "./vue/KvLightbox.js";
 import { default as ce } from "./vue/KvLineGraph.js";
@@ -41,10 +41,10 @@ import { default as Me } from "./vue/KvLoanCallouts.js";
 import { KV_LOAN_INFO_CARD_FRAGMENT as Oe, default as Se } from "./vue/KvLoanInfoCard.js";
 import { default as Pe } from "./vue/KvLoanProgressGroup.js";
 import { default as Fe } from "./vue/KvLoanTag.js";
-import { default as he } from "./vue/KvLoanTeamPick.js";
-import { default as Be } from "./vue/KvLoanUse.js";
+import { default as De } from "./vue/KvLoanTeamPick.js";
+import { default as Ve } from "./vue/KvLoanUse.js";
 import { default as ye } from "./vue/KvLoadingPlaceholder.js";
-import { default as ke } from "./vue/KvLoadingSpinner.js";
+import { default as be } from "./vue/KvLoadingSpinner.js";
 import { default as We } from "./vue/KvMap.js";
 import { default as ze } from "./vue/KvMaterialIcon.js";
 import { default as Qe } from "./vue/KvSimpleMap.js";
@@ -57,87 +57,88 @@ import { default as fo } from "./vue/KvPopper.js";
 import { default as mo } from "./vue/KvProgressBar.js";
 import { default as so } from "./vue/KvProgressCircle.js";
 import { default as xo } from "./vue/KvPulsingDot.js";
-import { default as Ko } from "./vue/KvRadio.js";
+import { default as no } from "./vue/KvRadio.js";
 import { default as Ao } from "./vue/KvSelect.js";
 import { default as Co } from "./vue/KvSideSheet.js";
-import { default as co } from "./vue/KvSwitch.js";
-import { default as Lo } from "./vue/KvTab.js";
-import { default as Eo } from "./vue/KvTabPanel.js";
-import { default as Mo } from "./vue/KvTabs.js";
-import { default as Oo } from "./vue/KvTextInput.js";
-import { default as go } from "./vue/KvTextLink.js";
-import { default as Go } from "./vue/KvThemeProvider.js";
-import { default as Do } from "./vue/KvToast.js";
-import { default as Vo } from "./vue/KvTooltip.js";
-import { default as Uo } from "./vue/KvTreeMapChart.js";
-import { default as bo } from "./vue/KvUserAvatar.js";
-import { default as wo } from "./vue/KvUtilityMenu.js";
-import { default as Ho } from "./vue/KvVerticalCarousel.js";
-import { default as jo } from "./vue/KvVotingCard.js";
-import { default as Yo } from "./vue/KvVotingCardV2.js";
-import { default as qo } from "./vue/KvWideLoanCard.js";
-import { default as Xo } from "./vue/KvAtbModal.js";
-import { default as er } from "./vue/KvSecondaryNav.js";
-import { default as rr } from "./vue/KvWwwHeader.js";
-import { default as ar } from "./vue/KvWwwHeaderBasic/KvWwwHeaderBasic.js";
-import { default as lr, Mash as mr } from "./utils/Alea.js";
-import { groupBy as sr, sortBy as dr } from "./utils/arrayUtils.js";
-import { useAttrs as xr } from "./utils/attrs.js";
-import { carouselUtil as Kr } from "./utils/carousels.js";
-import { abc as Ar, indexIn as ir, startsWith as Cr } from "./utils/comparators.js";
-import { debounce as cr } from "./utils/debounce.js";
-import { useEventListener as Lr } from "./utils/event.js";
-import { collapse as Er, expand as Rr } from "./utils/expander.js";
-import { DEFAULT_ACCEPTED_IMAGE_TYPES as Ir, cropResizeImageToDataUrl as Or, getKivaImageUrl as Sr, isLegacyPlaceholderAvatar as gr, randomizedUserAvatarClass as Pr, validateImageFile as Gr } from "./utils/imageUtils.js";
-import { LOAN_CALLOUTS_FRAGMENT as Dr, LOAN_GEOCODE_FRAGMENT as hr, LOAN_PROGRESS_FRAGMENT as Vr, loanCardComputedProperties as Br, loanCardMethods as Ur } from "./utils/loanCard.js";
-import { BALANCE_CAMPAIGN as br, BASE_CAMPAIGN as kr, ERL_COOKIE_NAME as wr, NO_BALANCE_CAMPAIGN as Wr, TOP_UP_CAMPAIGN as Hr, getDropdownPriceArray as zr, getLendCtaSelectedOption as jr, isBetween25And50 as Qr, isLessThan25 as Yr, truncateStringByWords as Zr } from "./utils/loanUtils.js";
-import { animationCoordinator as Jr, computeMapCenter as Xr, computeMapZoom as $r, generateMapMarkers as et, getCoordinatesBetween as ot, getCountryColor as rt, getLoansIntervals as tt } from "./utils/mapUtils.js";
-import { lockPrintSingleEl as ft, unlockPrintSingleEl as lt } from "./utils/printing.js";
-import { lockScroll as pt, lockScrollSmallOnly as st, unlockScroll as dt, unlockScrollSmallOnly as ut } from "./utils/scrollLock.js";
-import { buildTailwindClassName as nt, headerNumberCase as Kt, kebabCase as vt, removeObjectProperty as At } from "./utils/themeUtils.js";
-import { throttle as Ct } from "./utils/throttle.js";
-import { isTargetElement as ct, offBodyTouchstart as Tt, onBodyTouchstart as Lt } from "./utils/touchEvents.js";
-import { getTreemap as Et } from "./utils/treemap.js";
-import { KvBlueskyIcon as Mt } from "./assets/icons/bluesky.js";
-import { KV_CLASSIC_LOAN_CARD_FRAGMENT as Ot, KV_CLASSIC_LOAN_CARD_USER_FRAGMET as St } from "./vue/KvClassicLoanCard2.js";
-import { KV_COMPACT_LOAN_CARD_FRAGMENT as Pt, KV_COMPACT_LOAN_CARD_USER_FRAGMENT as Gt } from "./vue/KvCompactLoanCard2.js";
-import { KV_INTRODUCTION_LOAN_CARD_FRAGMENT as Dt, KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT as ht } from "./vue/KvIntroductionLoanCard2.js";
-import { KV_LEND_CTA_FRAGMENT as Bt, KV_LEND_CTA_USER_FRAGMENT as Ut } from "./vue/KvLendCta2.js";
-import { KV_LOAN_ACTIVITIES_FRAGMENT as bt } from "./vue/KvLoanActivities2.js";
-import { KV_LOAN_BOOKMARK_FRAGMENT as wt } from "./vue/KvLoanBookmark2.js";
-import { KV_LOAN_TAG_FRAGMENT as Ht } from "./vue/KvLoanTag2.js";
-import { KV_LOAN_USE_FRAGMENT as jt } from "./vue/KvLoanUse2.js";
-import { KV_WIDE_LOAN_CARD_FRAGMENT as Yt, KV_WIDE_LOAN_CARD_USER_FRAGMENT as Zt } from "./vue/KvWideLoanCard2.js";
+import { default as co } from "./vue/KvStackedBarGraph.js";
+import { default as Lo } from "./vue/KvSwitch.js";
+import { default as Eo } from "./vue/KvTab.js";
+import { default as Mo } from "./vue/KvTabPanel.js";
+import { default as Oo } from "./vue/KvTabs.js";
+import { default as go } from "./vue/KvTextInput.js";
+import { default as Go } from "./vue/KvTextLink.js";
+import { default as ho } from "./vue/KvThemeProvider.js";
+import { default as Bo } from "./vue/KvToast.js";
+import { default as Uo } from "./vue/KvTooltip.js";
+import { default as ko } from "./vue/KvTreeMapChart.js";
+import { default as wo } from "./vue/KvUserAvatar.js";
+import { default as Ho } from "./vue/KvUtilityMenu.js";
+import { default as jo } from "./vue/KvVerticalCarousel.js";
+import { default as Yo } from "./vue/KvVotingCard.js";
+import { default as qo } from "./vue/KvVotingCardV2.js";
+import { default as Xo } from "./vue/KvWideLoanCard.js";
+import { default as er } from "./vue/KvAtbModal.js";
+import { default as rr } from "./vue/KvSecondaryNav.js";
+import { default as ar } from "./vue/KvWwwHeader.js";
+import { default as lr } from "./vue/KvWwwHeaderBasic/KvWwwHeaderBasic.js";
+import { default as pr, Mash as sr } from "./utils/Alea.js";
+import { groupBy as ur, sortBy as xr } from "./utils/arrayUtils.js";
+import { useAttrs as nr } from "./utils/attrs.js";
+import { carouselUtil as Ar } from "./utils/carousels.js";
+import { abc as Cr, indexIn as _r, startsWith as cr } from "./utils/comparators.js";
+import { debounce as Lr } from "./utils/debounce.js";
+import { useEventListener as Er } from "./utils/event.js";
+import { collapse as Mr, expand as Ir } from "./utils/expander.js";
+import { DEFAULT_ACCEPTED_IMAGE_TYPES as Sr, cropResizeImageToDataUrl as gr, getKivaImageUrl as Pr, isLegacyPlaceholderAvatar as Gr, randomizedUserAvatarClass as Fr, validateImageFile as hr } from "./utils/imageUtils.js";
+import { LOAN_CALLOUTS_FRAGMENT as Br, LOAN_GEOCODE_FRAGMENT as Vr, LOAN_PROGRESS_FRAGMENT as Ur, loanCardComputedProperties as yr, loanCardMethods as kr } from "./utils/loanCard.js";
+import { BALANCE_CAMPAIGN as wr, BASE_CAMPAIGN as Wr, ERL_COOKIE_NAME as Hr, NO_BALANCE_CAMPAIGN as zr, TOP_UP_CAMPAIGN as jr, getDropdownPriceArray as Qr, getLendCtaSelectedOption as Yr, isBetween25And50 as Zr, isLessThan25 as qr, truncateStringByWords as Jr } from "./utils/loanUtils.js";
+import { animationCoordinator as $r, computeMapCenter as et, computeMapZoom as ot, generateMapMarkers as rt, getCoordinatesBetween as tt, getCountryColor as at, getLoansIntervals as ft } from "./utils/mapUtils.js";
+import { lockPrintSingleEl as mt, unlockPrintSingleEl as pt } from "./utils/printing.js";
+import { lockScroll as dt, lockScrollSmallOnly as ut, unlockScroll as xt, unlockScrollSmallOnly as Kt } from "./utils/scrollLock.js";
+import { buildTailwindClassName as vt, headerNumberCase as At, kebabCase as it, removeObjectProperty as Ct } from "./utils/themeUtils.js";
+import { throttle as ct } from "./utils/throttle.js";
+import { isTargetElement as Lt, offBodyTouchstart as Nt, onBodyTouchstart as Et } from "./utils/touchEvents.js";
+import { getTreemap as Mt } from "./utils/treemap.js";
+import { KvBlueskyIcon as Ot } from "./assets/icons/bluesky.js";
+import { KV_CLASSIC_LOAN_CARD_FRAGMENT as gt, KV_CLASSIC_LOAN_CARD_USER_FRAGMET as Pt } from "./vue/KvClassicLoanCard2.js";
+import { KV_COMPACT_LOAN_CARD_FRAGMENT as Ft, KV_COMPACT_LOAN_CARD_USER_FRAGMENT as ht } from "./vue/KvCompactLoanCard2.js";
+import { KV_INTRODUCTION_LOAN_CARD_FRAGMENT as Bt, KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT as Vt } from "./vue/KvIntroductionLoanCard2.js";
+import { KV_LEND_CTA_FRAGMENT as yt, KV_LEND_CTA_USER_FRAGMENT as kt } from "./vue/KvLendCta2.js";
+import { KV_LOAN_ACTIVITIES_FRAGMENT as wt } from "./vue/KvLoanActivities2.js";
+import { KV_LOAN_BOOKMARK_FRAGMENT as Ht } from "./vue/KvLoanBookmark2.js";
+import { KV_LOAN_TAG_FRAGMENT as jt } from "./vue/KvLoanTag2.js";
+import { KV_LOAN_USE_FRAGMENT as Yt } from "./vue/KvLoanUse2.js";
+import { KV_WIDE_LOAN_CARD_FRAGMENT as qt, KV_WIDE_LOAN_CARD_USER_FRAGMENT as Jt } from "./vue/KvWideLoanCard2.js";
 export {
-  lr as Alea,
-  br as BALANCE_CAMPAIGN,
-  kr as BASE_CAMPAIGN,
-  Ir as DEFAULT_ACCEPTED_IMAGE_TYPES,
-  wr as ERL_COOKIE_NAME,
-  Ot as KV_CLASSIC_LOAN_CARD_FRAGMENT,
-  St as KV_CLASSIC_LOAN_CARD_USER_FRAGMET,
-  Pt as KV_COMPACT_LOAN_CARD_FRAGMENT,
-  Gt as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
-  Dt as KV_INTRODUCTION_LOAN_CARD_FRAGMENT,
-  ht as KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT,
-  Bt as KV_LEND_CTA_FRAGMENT,
-  Ut as KV_LEND_CTA_USER_FRAGMENT,
-  bt as KV_LOAN_ACTIVITIES_FRAGMENT,
-  wt as KV_LOAN_BOOKMARK_FRAGMENT,
+  pr as Alea,
+  wr as BALANCE_CAMPAIGN,
+  Wr as BASE_CAMPAIGN,
+  Sr as DEFAULT_ACCEPTED_IMAGE_TYPES,
+  Hr as ERL_COOKIE_NAME,
+  gt as KV_CLASSIC_LOAN_CARD_FRAGMENT,
+  Pt as KV_CLASSIC_LOAN_CARD_USER_FRAGMET,
+  Ft as KV_COMPACT_LOAN_CARD_FRAGMENT,
+  ht as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
+  Bt as KV_INTRODUCTION_LOAN_CARD_FRAGMENT,
+  Vt as KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT,
+  yt as KV_LEND_CTA_FRAGMENT,
+  kt as KV_LEND_CTA_USER_FRAGMENT,
+  wt as KV_LOAN_ACTIVITIES_FRAGMENT,
+  Ht as KV_LOAN_BOOKMARK_FRAGMENT,
   Oe as KV_LOAN_INFO_CARD_FRAGMENT,
-  Ht as KV_LOAN_TAG_FRAGMENT,
-  jt as KV_LOAN_USE_FRAGMENT,
-  Yt as KV_WIDE_LOAN_CARD_FRAGMENT,
-  Zt as KV_WIDE_LOAN_CARD_USER_FRAGMENT,
+  jt as KV_LOAN_TAG_FRAGMENT,
+  Yt as KV_LOAN_USE_FRAGMENT,
+  qt as KV_WIDE_LOAN_CARD_FRAGMENT,
+  Jt as KV_WIDE_LOAN_CARD_USER_FRAGMENT,
   r as KvAccordionItem,
   a as KvActivityRow,
-  Xo as KvAtbModal,
-  Mt as KvBlueskyIcon,
+  er as KvAtbModal,
+  Ot as KvBlueskyIcon,
   l as KvBorrowerImage,
   p as KvButton,
   d as KvCardFrame,
   x as KvCarousel,
-  K as KvCartModal,
+  n as KvCartModal,
   A as KvCartPill,
   C as KvCheckbox,
   c as KvCheckoutReceipt,
@@ -146,11 +147,11 @@ export {
   O as KvCommentsAdd,
   g as KvCommentsContainer,
   G as KvCommentsHeartButton,
-  D as KvCommentsList,
-  V as KvCommentsListItem,
+  h as KvCommentsList,
+  B as KvCommentsListItem,
   U as KvCommentsReplyButton,
   M as KvCompactLoanCard,
-  b as KvContentfulImg,
+  k as KvContentfulImg,
   w as KvCountdownTimer,
   H as KvDatePicker,
   j as KvExpandable,
@@ -164,20 +165,20 @@ export {
   pe as KvInlineActivityCard,
   de as KvInlineActivityFeed,
   xe as KvIntroductionLoanCard,
-  Ke as KvLendAmountButton,
+  ne as KvLendAmountButton,
   Ae as KvLendCta,
   Ce as KvLightbox,
   ce as KvLineGraph,
   ye as KvLoadingPlaceholder,
-  ke as KvLoadingSpinner,
+  be as KvLoadingSpinner,
   Le as KvLoanActivities,
   Ee as KvLoanBookmark,
   Me as KvLoanCallouts,
   Se as KvLoanInfoCard,
   Pe as KvLoanProgressGroup,
   Fe as KvLoanTag,
-  he as KvLoanTeamPick,
-  Be as KvLoanUse,
+  De as KvLoanTeamPick,
+  Ve as KvLoanUse,
   We as KvMap,
   ze as KvMaterialIcon,
   Ze as KvPageContainer,
@@ -189,78 +190,79 @@ export {
   mo as KvProgressBar,
   so as KvProgressCircle,
   xo as KvPulsingDot,
-  Ko as KvRadio,
-  er as KvSecondaryNav,
+  no as KvRadio,
+  rr as KvSecondaryNav,
   Ao as KvSelect,
   Co as KvSideSheet,
   Qe as KvSimpleMap,
-  co as KvSwitch,
-  Lo as KvTab,
-  Eo as KvTabPanel,
-  Mo as KvTabs,
-  Oo as KvTextInput,
-  go as KvTextLink,
-  Go as KvThemeProvider,
-  Do as KvToast,
-  Vo as KvTooltip,
-  Uo as KvTreeMapChart,
-  bo as KvUserAvatar,
-  wo as KvUtilityMenu,
-  Ho as KvVerticalCarousel,
-  jo as KvVotingCard,
-  Yo as KvVotingCardV2,
-  qo as KvWideLoanCard,
-  rr as KvWwwHeader,
-  ar as KvWwwHeaderBasic,
-  Dr as LOAN_CALLOUTS_FRAGMENT,
-  hr as LOAN_GEOCODE_FRAGMENT,
-  Vr as LOAN_PROGRESS_FRAGMENT,
-  mr as Mash,
-  Wr as NO_BALANCE_CAMPAIGN,
-  Hr as TOP_UP_CAMPAIGN,
-  Ar as abc,
-  Jr as animationCoordinator,
-  nt as buildTailwindClassName,
-  Kr as carouselUtil,
-  Er as collapse,
-  Xr as computeMapCenter,
-  $r as computeMapZoom,
-  Or as cropResizeImageToDataUrl,
-  cr as debounce,
-  Rr as expand,
-  et as generateMapMarkers,
-  ot as getCoordinatesBetween,
-  rt as getCountryColor,
-  zr as getDropdownPriceArray,
-  Sr as getKivaImageUrl,
-  jr as getLendCtaSelectedOption,
-  tt as getLoansIntervals,
-  Et as getTreemap,
-  sr as groupBy,
-  Kt as headerNumberCase,
-  ir as indexIn,
-  Qr as isBetween25And50,
-  gr as isLegacyPlaceholderAvatar,
-  Yr as isLessThan25,
-  ct as isTargetElement,
-  vt as kebabCase,
-  Br as loanCardComputedProperties,
-  Ur as loanCardMethods,
-  ft as lockPrintSingleEl,
-  pt as lockScroll,
-  st as lockScrollSmallOnly,
-  Tt as offBodyTouchstart,
-  Lt as onBodyTouchstart,
-  Pr as randomizedUserAvatarClass,
-  At as removeObjectProperty,
-  dr as sortBy,
-  Cr as startsWith,
-  Ct as throttle,
-  Zr as truncateStringByWords,
-  lt as unlockPrintSingleEl,
-  dt as unlockScroll,
-  ut as unlockScrollSmallOnly,
-  xr as useAttrs,
-  Lr as useEventListener,
-  Gr as validateImageFile
+  co as KvStackedBarGraph,
+  Lo as KvSwitch,
+  Eo as KvTab,
+  Mo as KvTabPanel,
+  Oo as KvTabs,
+  go as KvTextInput,
+  Go as KvTextLink,
+  ho as KvThemeProvider,
+  Bo as KvToast,
+  Uo as KvTooltip,
+  ko as KvTreeMapChart,
+  wo as KvUserAvatar,
+  Ho as KvUtilityMenu,
+  jo as KvVerticalCarousel,
+  Yo as KvVotingCard,
+  qo as KvVotingCardV2,
+  Xo as KvWideLoanCard,
+  ar as KvWwwHeader,
+  lr as KvWwwHeaderBasic,
+  Br as LOAN_CALLOUTS_FRAGMENT,
+  Vr as LOAN_GEOCODE_FRAGMENT,
+  Ur as LOAN_PROGRESS_FRAGMENT,
+  sr as Mash,
+  zr as NO_BALANCE_CAMPAIGN,
+  jr as TOP_UP_CAMPAIGN,
+  Cr as abc,
+  $r as animationCoordinator,
+  vt as buildTailwindClassName,
+  Ar as carouselUtil,
+  Mr as collapse,
+  et as computeMapCenter,
+  ot as computeMapZoom,
+  gr as cropResizeImageToDataUrl,
+  Lr as debounce,
+  Ir as expand,
+  rt as generateMapMarkers,
+  tt as getCoordinatesBetween,
+  at as getCountryColor,
+  Qr as getDropdownPriceArray,
+  Pr as getKivaImageUrl,
+  Yr as getLendCtaSelectedOption,
+  ft as getLoansIntervals,
+  Mt as getTreemap,
+  ur as groupBy,
+  At as headerNumberCase,
+  _r as indexIn,
+  Zr as isBetween25And50,
+  Gr as isLegacyPlaceholderAvatar,
+  qr as isLessThan25,
+  Lt as isTargetElement,
+  it as kebabCase,
+  yr as loanCardComputedProperties,
+  kr as loanCardMethods,
+  mt as lockPrintSingleEl,
+  dt as lockScroll,
+  ut as lockScrollSmallOnly,
+  Nt as offBodyTouchstart,
+  Et as onBodyTouchstart,
+  Fr as randomizedUserAvatarClass,
+  Ct as removeObjectProperty,
+  xr as sortBy,
+  cr as startsWith,
+  ct as throttle,
+  Jr as truncateStringByWords,
+  pt as unlockPrintSingleEl,
+  xt as unlockScroll,
+  Kt as unlockScrollSmallOnly,
+  nr as useAttrs,
+  Er as useEventListener,
+  hr as validateImageFile
 };

package/dist/utils/chartColors.d.ts

@@ -0,0 +1,2 @@
+export declare const CHART_COLORS: string[];
+export declare function getChartColor(index: number, customColor?: string): string;

package/dist/utils/chartColors.js

@@ -0,0 +1,40 @@
+import n from "@kiva/kv-tokens";
+const { colors: e } = n, o = [
+  // Tier 1 — Bold primaries
+  e["eco-green"][3],
+  // #276A43
+  e.marigold.DEFAULT,
+  // #F4B539
+  e["desert-rose"].DEFAULT,
+  // #C45F4F
+  "#2E3BAD",
+  // Custom blue for contrast
+  "#874FFF",
+  // Custom purple for contrast
+  e.stone[3],
+  // #635544
+  e.brand[500],
+  // #4AB67E
+  e.marigold[3],
+  // #996210
+  // Tier 2 — Lighter variants
+  e["eco-green"][2],
+  // #78C79F
+  e.marigold[2],
+  // #F8CD69
+  e["desert-rose"][2],
+  // #E0988D
+  e.stone[2],
+  // #AA9E8D
+  e.brand[300],
+  // #95D4B3
+  e["desert-rose"][3]
+  // #A24536
+];
+function i(t, r) {
+  return r || o[t % o.length];
+}
+export {
+  o as CHART_COLORS,
+  i as getChartColor
+};

package/dist/utils/pieChartColors.d.ts

@@ -1,4 +1,4 @@
 export declare const LOADING_BG_COLOR: string;
 export declare const OTHER_SEGMENT_BG_COLOR: string;
 export declare const PIE_CHART_COLORS: string[];
-export declare function getPieChartColor(index: number, customColor?: string): string;
+export declare const getPieChartColor: (index: number, customColor?: string) => string;

package/dist/utils/pieChartColors.js

@@ -1,42 +1,8 @@
-import n from "@kiva/kv-tokens";
-const { colors: e } = n, i = e.gray[200], g = e.gray[300], o = [
-  // Tier 1 — Bold primaries
-  e["eco-green"][3],
-  // #276A43
-  e.marigold.DEFAULT,
-  // #F4B539
-  e["desert-rose"].DEFAULT,
-  // #C45F4F
-  "#2E3BAD",
-  // Custom blue for contrast
-  "#874FFF",
-  // Custom purple for contrast
-  e.stone[3],
-  // #635544
-  e.brand[500],
-  // #4AB67E
-  e.marigold[3],
-  // #996210
-  // Tier 2 — Lighter variants
-  e["eco-green"][2],
-  // #78C79F
-  e.marigold[2],
-  // #F8CD69
-  e["desert-rose"][2],
-  // #E0988D
-  e.stone[2],
-  // #AA9E8D
-  e.brand[300],
-  // #95D4B3
-  e["desert-rose"][3]
-  // #A24536
-];
-function a(t, r) {
-  return r || o[t % o.length];
-}
+import r from "@kiva/kv-tokens";
+import { getChartColor as t } from "./chartColors.js";
+const { colors: o } = r, i = o.gray[200], C = o.gray[300], O = t;
 export {
   i as LOADING_BG_COLOR,
-  g as OTHER_SEGMENT_BG_COLOR,
-  o as PIE_CHART_COLORS,
-  a as getPieChartColor
+  C as OTHER_SEGMENT_BG_COLOR,
+  O as getPieChartColor
 };

package/dist/vue/KvStackedBarGraph.css

@@ -0,0 +1 @@
+.kv-stacked-bar-graph__svg[data-v-198c22df]{height:auto;max-width:100%}.kv-stacked-bar-graph__swatch[data-v-198c22df]{width:12px;height:12px}.kv-stacked-bar-graph__segment[data-v-198c22df]{pointer-events:none;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.kv-stacked-bar-graph__bar:hover .kv-stacked-bar-graph__segment[data-v-198c22df],.kv-stacked-bar-graph__bar:focus-within .kv-stacked-bar-graph__segment[data-v-198c22df]{opacity:.85}.kv-stacked-bar-graph__hit[data-v-198c22df]{cursor:pointer;fill:transparent}.kv-stacked-bar-graph__hit[data-v-198c22df]:focus{outline:2px solid transparent;outline-offset:2px}.kv-stacked-bar-graph__hit[data-v-198c22df]:focus-visible{stroke:rgb(var(--text-primary));stroke-width:2}.kv-stacked-bar-graph__gridline[data-v-198c22df]{stroke:rgb(var(--text-tertiary));stroke-width:1;opacity:.25}.kv-stacked-bar-graph__axis-label[data-v-198c22df]{fill:currentColor;--tw-text-opacity: 1;color:rgba(var(--text-tertiary),var(--tw-text-opacity, 1));font-size:11px}.kv-stacked-bar-graph__total-label[data-v-198c22df]{fill:currentColor;--tw-text-opacity: 1;color:rgba(var(--text-secondary),var(--tw-text-opacity, 1));font-size:11px;font-weight:600}

package/dist/vue/KvStackedBarGraph.js

@@ -0,0 +1,112 @@
+import g from "./KvStackedBarGraph2.js";
+import { openBlock as a, createElementBlock as r, createElementVNode as l, toDisplayString as s, Fragment as o, renderList as n, normalizeStyle as y, createTextVNode as w, createCommentVNode as _, withKeys as x, withModifiers as k } from "vue";
+import "./KvStackedBarGraph.css";
+import m from "../_virtual/_plugin-vue_export-helper.js";
+const v = { class: "kv-stacked-bar-graph tw-m-0" }, f = { class: "tw-sr-only" }, b = {
+  key: 0,
+  class: "kv-stacked-bar-graph__legend tw-flex tw-flex-wrap tw-gap-x-3 tw-gap-y-1 tw-mb-2 tw-p-0",
+  "aria-hidden": "false"
+}, u = { class: "kv-stacked-bar-graph__scroll tw-overflow-x-auto" }, p = ["viewBox", "width", "height"], B = {
+  class: "kv-stacked-bar-graph__grid",
+  "aria-hidden": "true"
+}, H = ["x1", "x2", "y1", "y2"], L = ["x", "y"], T = ["x", "y", "width", "height", "fill"], W = ["x", "y", "width", "height", "aria-label", "onClick", "onKeydown"], A = ["x", "y"], D = ["x", "y"], R = {
+  key: 1,
+  class: "tw-text-center tw-text-small tw-text-tertiary tw-mt-1"
+};
+function K(d, S, c, t, V, C) {
+  return a(), r("figure", v, [
+    l("figcaption", f, s(t.ariaSummary), 1),
+    c.series.length ? (a(), r("ul", b, [
+      (a(!0), r(o, null, n(t.resolvedSeries, (e) => (a(), r("li", {
+        key: e.key,
+        class: "tw-flex tw-items-center tw-text-small tw-text-secondary"
+      }, [
+        l("span", {
+          class: "kv-stacked-bar-graph__swatch tw-inline-block tw-mr-0.5 tw-rounded-sm",
+          style: y({ backgroundColor: e.color })
+        }, null, 4),
+        w(" " + s(e.label), 1)
+      ]))), 128))
+    ])) : _("", !0),
+    l("div", u, [
+      (a(), r("svg", {
+        viewBox: `0 0 ${t.chartWidth} ${t.chartHeight}`,
+        width: t.chartWidth,
+        height: t.chartHeight,
+        class: "kv-stacked-bar-graph__svg",
+        preserveAspectRatio: "xMinYMin meet"
+      }, [
+        l("g", B, [
+          (a(!0), r(o, null, n(t.yTicks, (e) => (a(), r(o, {
+            key: `grid-${e.value}`
+          }, [
+            l("line", {
+              x1: t.padLeft,
+              x2: t.chartWidth - t.PAD_RIGHT,
+              y1: e.y,
+              y2: e.y,
+              class: "kv-stacked-bar-graph__gridline"
+            }, null, 8, H),
+            l("text", {
+              x: t.padLeft - 6,
+              y: e.y + 3,
+              "text-anchor": "end",
+              class: "kv-stacked-bar-graph__axis-label"
+            }, s(c.formatValue(e.value)), 9, L)
+          ], 64))), 128))
+        ]),
+        (a(!0), r(o, null, n(t.bars, (e, h) => (a(), r("g", {
+          key: `bar-${e.label}`,
+          class: "kv-stacked-bar-graph__bar"
+        }, [
+          (a(!0), r(o, null, n(e.segments, (i) => (a(), r("rect", {
+            key: `${e.label}-${i.seriesKey}`,
+            x: e.x,
+            y: i.y,
+            width: t.BAR_WIDTH,
+            height: i.height,
+            fill: i.color,
+            class: "kv-stacked-bar-graph__segment",
+            "aria-hidden": "true"
+          }, null, 8, T))), 128)),
+          l("rect", {
+            class: "kv-stacked-bar-graph__hit",
+            x: e.x,
+            y: e.totalY,
+            width: t.BAR_WIDTH,
+            height: e.height,
+            role: "button",
+            tabindex: "0",
+            "aria-label": e.ariaLabel,
+            onClick: (i) => d.$emit("bar-click", h),
+            onKeydown: [
+              x(k((i) => d.$emit("bar-click", h), ["prevent"]), ["enter"]),
+              x(k((i) => d.$emit("bar-click", h), ["prevent"]), ["space"])
+            ]
+          }, [
+            l("title", null, s(e.ariaLabel), 1)
+          ], 40, W),
+          l("text", {
+            x: e.x + t.BAR_WIDTH / 2,
+            y: t.chartHeight - 8,
+            "text-anchor": "middle",
+            class: "kv-stacked-bar-graph__axis-label",
+            "aria-hidden": "true"
+          }, s(e.label), 9, A),
+          l("text", {
+            x: e.x + t.BAR_WIDTH / 2,
+            y: e.totalY - 6,
+            "text-anchor": "middle",
+            class: "kv-stacked-bar-graph__total-label",
+            "aria-hidden": "true"
+          }, s(c.formatValue(e.total)), 9, D)
+        ]))), 128))
+      ], 8, p))
+    ]),
+    c.axisLabel ? (a(), r("p", R, s(c.axisLabel), 1)) : _("", !0)
+  ]);
+}
+const E = /* @__PURE__ */ m(g, [["render", K], ["__scopeId", "data-v-198c22df"]]);
+export {
+  E as default
+};

package/dist/vue/KvStackedBarGraph.vue.d.ts

@@ -0,0 +1,105 @@
+import { PropType } from 'vue';
+export interface KvStackedBarSegment {
+    seriesKey: string;
+    value: number;
+}
+export interface KvStackedBarPoint {
+    label: string;
+    segments: KvStackedBarSegment[];
+}
+export interface KvStackedBarSeries {
+    key: string;
+    label: string;
+    color?: string;
+}
+interface RenderSegment {
+    seriesKey: string;
+    color: string;
+    y: number;
+    height: number;
+}
+interface RenderBar {
+    label: string;
+    x: number;
+    total: number;
+    totalY: number;
+    height: number;
+    segments: RenderSegment[];
+    ariaLabel: string;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    points: {
+        type: PropType<KvStackedBarPoint[]>;
+        required: true;
+    };
+    series: {
+        type: PropType<KvStackedBarSeries[]>;
+        required: true;
+    };
+    formatValue: {
+        type: PropType<(value: number) => string>;
+        default: (value: number) => string;
+    };
+    axisLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    barActionLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {
+    PAD_RIGHT: number;
+    BAR_WIDTH: number;
+    resolvedSeries: import('vue').ComputedRef<{
+        color: string;
+        key: string;
+        label: string;
+    }[]>;
+    padLeft: import('vue').ComputedRef<number>;
+    chartHeight: import('vue').ComputedRef<number>;
+    chartWidth: import('vue').ComputedRef<number>;
+    yTicks: import('vue').ComputedRef<{
+        value: number;
+        y: number;
+    }[]>;
+    bars: import('vue').ComputedRef<RenderBar[]>;
+    ariaSummary: import('vue').ComputedRef<string>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "bar-click"[], "bar-click", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    points: {
+        type: PropType<KvStackedBarPoint[]>;
+        required: true;
+    };
+    series: {
+        type: PropType<KvStackedBarSeries[]>;
+        required: true;
+    };
+    formatValue: {
+        type: PropType<(value: number) => string>;
+        default: (value: number) => string;
+    };
+    axisLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    barActionLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    "onBar-click"?: (...args: any[]) => any;
+}>, {
+    title: string;
+    axisLabel: string;
+    formatValue: (value: number) => string;
+    barActionLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/vue/KvStackedBarGraph2.js

@@ -0,0 +1,127 @@
+import { toRefs as D, computed as t } from "vue";
+import { getChartColor as j } from "../utils/chartColors.js";
+const g = 220, $ = 16, Y = 26, G = 8, S = 30, x = 26, q = 2, F = 5;
+function V(c) {
+  const l = 10 ** Math.floor(Math.log10(c)), o = c / l;
+  let n;
+  return o < 1.5 ? n = 1 : o < 3 ? n = 2 : o < 7 ? n = 5 : n = 10, n * l;
+}
+const z = {
+  name: "KvStackedBarGraph",
+  props: {
+    /**
+     * Bars to plot, in display order. Each point stacks its segments bottom-up.
+     * [{ label: 'Jul 2026', segments: [{ seriesKey: 'user', value: 340 }, …] }]
+     */
+    points: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Series definitions in fixed order (never cycled). Each supplies a stable
+     * key, a legend label, and an optional `color` override.
+     * [{ key: 'user', label: 'Repaid to your account', color: '#26985D' }]
+     */
+    series: {
+      type: Array,
+      required: !0
+    },
+    /** Formatter for values shown in axis labels, direct labels, and aria text. */
+    formatValue: {
+      type: Function,
+      default: (c) => String(c)
+    },
+    /** Optional caption shown below the plot. */
+    axisLabel: {
+      type: String,
+      default: ""
+    },
+    /** Accessible title summarising what the chart shows. */
+    title: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Optional call-to-action sentence appended to each bar's aria-label,
+     * e.g. "Select to view repayments for this month." Empty ⇒ no suffix.
+     */
+    barActionLabel: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["bar-click"],
+  setup(c) {
+    const {
+      points: l,
+      series: o,
+      formatValue: n,
+      title: A,
+      barActionLabel: T
+    } = D(c), _ = t(() => o.value.map((e, s) => ({
+      ...e,
+      color: j(s, e.color)
+    }))), L = t(
+      () => Object.fromEntries(_.value.map((e) => [e.key, e.color]))
+    ), P = t(
+      () => Object.fromEntries(o.value.map((e) => [e.key, e.label]))
+    ), B = t(() => new Set(o.value.map((e) => e.key))), k = t(() => l.value.map(
+      (e) => (e.segments || []).reduce(
+        (s, r) => B.value.has(r.seriesKey) && Number(r.value) > 0 ? s + Number(r.value) : s,
+        0
+      )
+    )), p = t(() => {
+      const e = Math.max(...k.value, 0);
+      if (e <= 0)
+        return { max: 1, ticks: [0] };
+      const s = V(e / F), r = Math.ceil(e / s) * s, u = Math.round(r / s), v = Array.from({ length: u + 1 }, (b, h) => h * s);
+      return { max: r, ticks: v };
+    }), f = t(() => g / p.value.max), m = t(() => $ + g), y = t(() => {
+      const e = n.value(p.value.max);
+      return Math.max(40, 14 + e.length * 7);
+    }), E = t(() => $ + g + Y), H = t(() => {
+      const e = Math.max(l.value.length, 1);
+      return y.value + e * (S + x) + G;
+    }), N = t(() => p.value.ticks.map((e) => ({
+      value: e,
+      y: m.value - e * f.value
+    }))), O = t(() => l.value.map((e, s) => {
+      const r = k.value[s], u = o.value.map((a) => (e.segments || []).find((i) => i.seriesKey === a.key)).filter((a) => !!a && Number(a.value) > 0);
+      let v = m.value;
+      const b = [];
+      for (let a = u.length - 1; a >= 0; a -= 1) {
+        const i = u[a], d = Number(i.value) * f.value, w = a === u.length - 1, K = v - d, C = w ? d : Math.max(d - q, 1);
+        v = K, b.push({
+          seriesKey: i.seriesKey,
+          color: L.value[i.seriesKey],
+          y: K,
+          height: C
+        });
+      }
+      const h = m.value - r * f.value, M = u.map((a) => `${P.value[a.seriesKey] || a.seriesKey}: ${n.value(Number(a.value))}`).join(", "), R = T.value ? `. ${T.value}` : "";
+      return {
+        label: e.label,
+        x: y.value + s * (S + x) + x / 2,
+        total: r,
+        totalY: h,
+        height: m.value - h,
+        segments: b,
+        ariaLabel: `${e.label} — total ${n.value(r)}${M ? `; ${M}` : ""}${R}`
+      };
+    })), I = t(() => A.value ? A.value : `Stacked bar graph of ${l.value.length} periods across ${o.value.length} series.`);
+    return {
+      PAD_RIGHT: G,
+      BAR_WIDTH: S,
+      resolvedSeries: _,
+      padLeft: y,
+      chartHeight: E,
+      chartWidth: H,
+      yTicks: N,
+      bars: O,
+      ariaSummary: I
+    };
+  }
+};
+export {
+  z as default
+};

package/dist/vue/index.d.ts

@@ -70,6 +70,7 @@ export { default as KvPulsingDot } from './KvPulsingDot.vue';
 export { default as KvRadio } from './KvRadio.vue';
 export { default as KvSelect } from './KvSelect.vue';
 export { default as KvSideSheet } from './KvSideSheet.vue';
+export { default as KvStackedBarGraph } from './KvStackedBarGraph.vue';
 export { default as KvSwitch } from './KvSwitch.vue';
 export { default as KvTab } from './KvTab.vue';
 export { default as KvTabPanel } from './KvTabPanel.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "8.21.1",
+  "version": "8.22.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -113,5 +113,5 @@
   "dependencies": {
     "fuse.js": "^7.1.0"
   },
-  "gitHead": "4a6cdd82691d5045a4a728788200bc1980898558"
+  "gitHead": "cf0d2b3894bff0585eb9ce54bd95dd2554792b86"
 }