@kiva/kv-components 8.26.1 → 8.28.0

package/dist/vue/KvPieChartV2.css

@@ -1 +1 @@
-.segment-circle[data-v-73c9f5f9]{transition:stroke-dashoffset .5s ease-in-out}.skeleton-ring[data-v-73c9f5f9]{opacity:1;transition:opacity .5s ease-in-out}.skeleton-ring--loading[data-v-73c9f5f9]{animation:skeleton-ring-pulse-73c9f5f9 1.4s ease-in-out infinite;transform-origin:center}.legend-dot[data-v-73c9f5f9]{transition:background-color .5s ease-in-out}@keyframes skeleton-ring-pulse-73c9f5f9{0%,to{opacity:.45}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.skeleton-ring--loading[data-v-73c9f5f9]{animation:none}}
+.segment-circle[data-v-9afd557d]{transition:stroke-dashoffset var(--segment-grow-duration, .5s) ease-in-out}.skeleton-ring[data-v-9afd557d]{opacity:1;transition:opacity .5s ease-in-out}.skeleton-ring--loading[data-v-9afd557d]{animation:skeleton-ring-pulse-9afd557d 1.4s ease-in-out infinite;transform-origin:center}.legend-dot[data-v-9afd557d]{transition:background-color .5s ease-in-out}@keyframes skeleton-ring-pulse-9afd557d{0%,to{opacity:.45}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.skeleton-ring--loading[data-v-9afd557d]{animation:none}}

package/dist/vue/KvPieChartV2.js

@@ -1,29 +1,30 @@
 import y from "./KvPieChartV22.js";
-import { resolveComponent as x, openBlock as l, createElementBlock as o, createElementVNode as r, normalizeClass as k, createCommentVNode as n, Fragment as d, renderList as c, normalizeStyle as s, toDisplayString as w, createBlock as _, withCtx as b } from "vue";
+import { resolveComponent as x, openBlock as l, createElementBlock as o, normalizeStyle as s, createElementVNode as r, normalizeClass as k, createCommentVNode as n, Fragment as d, renderList as c, toDisplayString as w, createBlock as _, withCtx as b } from "vue";
 import "./KvPieChartV2.css";
 import u from "../_virtual/_plugin-vue_export-helper.js";
-const v = {
-  class: "kv-pie-chart-v2 tw-flex tw-flex-col tw-items-center tw-gap-1",
-  "aria-label": "Pie chart"
-}, C = { class: "tw-px-2" }, D = {
+const v = { class: "tw-px-2" }, C = {
   viewBox: "0 0 262 262",
   fill: "none",
   class: "tw-w-full",
   role: "img",
   "aria-hidden": "true"
-}, S = ["cx", "cy", "r", "stroke", "stroke-width"], L = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "transform"], O = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "transform"], V = {
+}, D = ["cx", "cy", "r", "stroke", "stroke-width"], S = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "transform"], L = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "transform"], O = {
   key: 0,
   class: "tw-flex tw-flex-wrap tw-justify-center tw-gap-0.5 tw-w-full tw-pt-0.5"
-}, W = { class: "tw-flex tw-gap-0.5 tw-items-center tw-min-w-0 tw-overflow-hidden" }, B = { class: "tw-font-medium tw-text-small tw-text-primary tw-whitespace-nowrap tw-truncate" }, p = { class: "tw-flex tw-gap-0.5 tw-items-center tw-shrink-0" }, E = { class: "tw-grid tw-grid-cols-2 tw-grid-flow-row tw-gap-0.5" }, I = { class: "tw-flex tw-gap-0.5 tw-items-center tw-shrink-0 tw-overflow-hidden" }, X = { class: "tw-font-medium tw-text-small tw-text-primary tw-whitespace-nowrap tw-truncate" }, Y = {
+}, V = { class: "tw-flex tw-gap-0.5 tw-items-center tw-min-w-0 tw-overflow-hidden" }, W = { class: "tw-font-medium tw-text-small tw-text-primary tw-whitespace-nowrap tw-truncate" }, B = { class: "tw-flex tw-gap-0.5 tw-items-center tw-shrink-0" }, E = { class: "tw-grid tw-grid-cols-2 tw-grid-flow-row tw-gap-0.5" }, I = { class: "tw-flex tw-gap-0.5 tw-items-center tw-shrink-0 tw-overflow-hidden" }, X = { class: "tw-font-medium tw-text-small tw-text-primary tw-whitespace-nowrap tw-truncate" }, Y = {
   class: "tw-font-light tw-text-small tw-text-primary tw-text-right tw-shrink-0 tw-tabular-nums",
   style: { "min-width": "2.8ch" }
 };
-function G(N, i, a, t, M, R) {
+function G(N, i, a, t, p, M) {
   var h, m;
-  const f = x("kv-lightbox");
-  return l(), o("figure", v, [
-    r("div", C, [
-      (l(), o("svg", D, [
+  const g = x("kv-lightbox");
+  return l(), o("figure", {
+    class: "kv-pie-chart-v2 tw-flex tw-flex-col tw-items-center tw-gap-1",
+    style: s({ "--segment-grow-duration": `${a.growDuration}ms` }),
+    "aria-label": "Pie chart"
+  }, [
+    r("div", v, [
+      (l(), o("svg", C, [
         a.loading || !t.hasData ? (l(), o("circle", {
           key: 0,
           cx: t.CX,
@@ -33,7 +34,7 @@ function G(N, i, a, t, M, R) {
           "stroke-width": a.strokeWidth,
           fill: "none",
           class: k(["skeleton-ring", { "skeleton-ring--loading": a.loading }])
-        }, null, 10, S)) : n("", !0),
+        }, null, 10, D)) : n("", !0),
         (l(!0), o(d, null, c(t.visibleSegments, (e) => (l(), o("circle", {
           key: e.label,
           cx: t.CX,
@@ -49,7 +50,7 @@ function G(N, i, a, t, M, R) {
             strokeDashoffset: e.isVisible ? 0 : e.dashLength,
             transitionDelay: `${e.delay}ms`
           })
-        }, null, 12, L))), 128)),
+        }, null, 12, S))), 128)),
         t.otherSegment ? (l(), o("circle", {
           key: 1,
           cx: t.CX,
@@ -65,15 +66,15 @@ function G(N, i, a, t, M, R) {
             strokeDashoffset: t.otherSegment.isVisible ? 0 : t.otherSegment.dashLength,
             transitionDelay: `${t.otherSegment.delay}ms`
           })
-        }, null, 12, O)) : n("", !0)
+        }, null, 12, L)) : n("", !0)
       ]))
     ]),
-    t.hasData && !a.loading ? (l(), o("div", V, [
-      (l(!0), o(d, null, c(t.visibleSegments, (e, g) => (l(), o("div", {
+    t.hasData && !a.loading ? (l(), o("div", O, [
+      (l(!0), o(d, null, c(t.visibleSegments, (e, f) => (l(), o("div", {
         key: e.label,
         class: "tw-bg-gray-100 tw-flex tw-gap-0.5 tw-items-center tw-px-1 tw-py-0.5 tw-rounded-xs"
       }, [
-        r("div", W, [
+        r("div", V, [
           r("span", {
             class: "tw-shrink-0 tw-w-1 tw-h-1 tw-rounded-full legend-dot",
             style: s({
@@ -81,12 +82,12 @@ function G(N, i, a, t, M, R) {
               transitionDelay: `${e.delay}ms`
             })
           }, null, 4),
-          r("span", B, w(e.label), 1)
+          r("span", W, w(e.label), 1)
         ]),
         r("span", {
           class: "tw-font-light tw-text-small tw-text-primary tw-text-right tw-shrink-0 tw-tabular-nums",
           style: s({ minWidth: t.valueMinWidth })
-        }, w(t.formatDisplayValue(g)), 5)
+        }, w(t.formatDisplayValue(f)), 5)
       ]))), 128)),
       t.otherItems.length > 0 ? (l(), o("button", {
         key: 0,
@@ -94,7 +95,7 @@ function G(N, i, a, t, M, R) {
         type: "button",
         onClick: i[0] || (i[0] = (e) => t.showOtherLightbox = !0)
       }, [
-        r("div", p, [
+        r("div", B, [
           r("span", {
             class: "tw-shrink-0 tw-w-1 tw-h-1 tw-rounded-full legend-dot",
             style: s({
@@ -110,7 +111,7 @@ function G(N, i, a, t, M, R) {
         }, w(t.formatOtherDisplayValue()), 5)
       ])) : n("", !0)
     ])) : n("", !0),
-    t.hasData && !a.loading ? (l(), _(f, {
+    t.hasData && !a.loading ? (l(), _(g, {
       key: 1,
       visible: t.showOtherLightbox,
       title: "Other",
@@ -135,9 +136,9 @@ function G(N, i, a, t, M, R) {
       ]),
       _: 1
     }, 8, ["visible"])) : n("", !0)
-  ]);
+  ], 4);
 }
-const A = /* @__PURE__ */ u(y, [["render", G], ["__scopeId", "data-v-73c9f5f9"]]);
+const T = /* @__PURE__ */ u(y, [["render", G], ["__scopeId", "data-v-9afd557d"]]);
 export {
-  A as default
+  T as default
 };

package/dist/vue/KvPieChartV2.vue.d.ts

@@ -45,6 +45,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: NumberConstructor;
         default: number;
     };
+    growDuration: {
+        type: NumberConstructor;
+        default: number;
+    };
     animateOut: {
         type: BooleanConstructor;
         default: boolean;
@@ -108,6 +112,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: NumberConstructor;
         default: number;
     };
+    growDuration: {
+        type: NumberConstructor;
+        default: number;
+    };
     animateOut: {
         type: BooleanConstructor;
         default: boolean;
@@ -120,6 +128,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     unit: PieChartUnit;
     shownSegments: number;
     segmentGap: number;
+    growDuration: number;
     animateOut: boolean;
 }, {}, {
     KvLightbox: import('vue').DefineComponent<import('vue').ExtractPropTypes<{

package/dist/vue/KvPieChartV22.js

@@ -1,8 +1,8 @@
 import { toRefs as z, ref as I, computed as u, onMounted as J, watch as U, onUnmounted as Q } from "vue";
-import { getPieChartColor as $, OTHER_SEGMENT_BG_COLOR as Z, LOADING_BG_COLOR as ee } from "../utils/pieChartColors.js";
+import { getPieChartColor as D, OTHER_SEGMENT_BG_COLOR as Z, LOADING_BG_COLOR as ee } from "../utils/pieChartColors.js";
 import { easeInOutCubic as te } from "../utils/useCountUp.js";
 import ae from "./KvLightbox.js";
-const E = 262, le = E / 2, ne = E / 2, W = 500, ue = 500, ve = {
+const E = 262, le = E / 2, ne = E / 2, ce = {
   name: "KvPieChartV2",
   components: {
     KvLightbox: ae
@@ -62,6 +62,15 @@ const E = 262, le = E / 2, ne = E / 2, W = 500, ue = 500, ve = {
       type: Number,
       default: 1e3
     },
+    /**
+     * Duration in milliseconds of each segment's grow animation. The stagger between
+     * segments and the count-up pacing use this same value, so lowering it speeds up
+     * the whole ring — draw and numbers — in sync. Default keeps the original timing.
+     */
+    growDuration: {
+      type: Number,
+      default: 500
+    },
     /**
      * When changed from false to true, plays the reverse sweep-out animation.
      */
@@ -72,61 +81,62 @@ const E = 262, le = E / 2, ne = E / 2, W = 500, ue = 500, ve = {
   },
   setup(g) {
     const {
-      values: A,
+      values: M,
       unit: m,
-      loading: M,
+      loading: w,
       shownSegments: d,
-      strokeWidth: B,
-      segmentGap: T,
-      initialDelay: D,
-      animateOut: y
-    } = z(g), k = I(!1), c = I(!1), G = u(() => Math.max((E - B.value) / 2, 1)), b = u(() => 2 * Math.PI * G.value), h = u(() => [...A.value].sort((e, t) => t.value - e.value)), o = u(() => h.value.reduce((e, t) => e + t.value, 0)), O = u(() => A.value.length > 0), S = u(() => h.value.slice(0, d.value)), C = u(() => h.value.slice(d.value).map((t, n) => ({
+      strokeWidth: W,
+      segmentGap: A,
+      initialDelay: T,
+      growDuration: y,
+      animateOut: b
+    } = z(g), k = I(!1), c = I(!1), V = u(() => Math.max((E - W.value) / 2, 1)), C = u(() => 2 * Math.PI * V.value), h = u(() => [...M.value].sort((e, t) => t.value - e.value)), o = u(() => h.value.reduce((e, t) => e + t.value, 0)), L = u(() => M.value.length > 0), S = u(() => h.value.slice(0, d.value)), O = u(() => h.value.slice(d.value).map((t, n) => ({
       ...t,
-      color: $(d.value + n, t.color)
+      color: D(d.value + n, t.color)
     }))), q = u(() => h.value.map((e, t) => ({
       ...e,
-      color: $(t, e.color)
-    }))), w = u(() => C.value.reduce((e, t) => e + t.value, 0)), R = u(() => o.value > 0 ? w.value / o.value : 0), f = u(() => {
+      color: D(t, e.color)
+    }))), x = u(() => O.value.reduce((e, t) => e + t.value, 0)), N = u(() => o.value > 0 ? x.value / o.value : 0), f = u(() => {
       let e = 0;
       return S.value.map((t, n) => {
-        const a = o.value > 0 ? t.value / o.value : 0, l = Math.max(a * b.value - T.value, 0), s = e * 360 - 90;
+        const a = o.value > 0 ? t.value / o.value : 0, l = Math.max(a * C.value - A.value, 0), s = e * 360 - 90;
         return e += a, {
           label: t.label,
           value: t.value,
           percent: a,
-          color: $(n, t.color),
+          color: D(n, t.color),
           dashLength: l,
           startDeg: s,
-          delay: D.value + n * W,
-          isVisible: c.value && !y.value
+          delay: T.value + n * y.value,
+          isVisible: c.value && !b.value
         };
       });
     }), v = u(() => {
-      if (C.value.length === 0) return null;
+      if (O.value.length === 0) return null;
       let e = 0;
       S.value.forEach((l) => {
         e += o.value > 0 ? l.value / o.value : 0;
       });
-      const t = Math.max(R.value * b.value - T.value, 0), n = e * 360 - 90, a = S.value.length;
+      const t = Math.max(N.value * C.value - A.value, 0), n = e * 360 - 90, a = S.value.length;
       return {
         label: "Other",
-        value: w.value,
-        percent: R.value,
+        value: x.value,
+        percent: N.value,
         color: "#C4C4C4",
         dashLength: t,
         startDeg: n,
-        delay: D.value + a * W,
-        isVisible: c.value && !y.value
+        delay: T.value + a * y.value,
+        isVisible: c.value && !b.value
       };
-    }), r = I([]), p = [], i = [], V = (e) => m.value === "percent" ? Math.round(e.percent * 100) : e.value, _ = (e, t, n) => {
+    }), r = I([]), p = [], i = [], _ = (e) => m.value === "percent" ? Math.round(e.percent * 100) : e.value, F = (e, t, n) => {
       let a = null;
       function l(s) {
         a === null && (a = s);
-        const L = s - a, P = Math.min(L / ue, 1), Y = te(P), j = Math.round(t + (n - t) * Y);
-        r.value[e] = j, P < 1 && (i[e] = requestAnimationFrame(l));
+        const $ = s - a, R = Math.min($ / y.value, 1), Y = te(R), j = Math.round(t + (n - t) * Y);
+        r.value[e] = j, R < 1 && (i[e] = requestAnimationFrame(l));
       }
       i[e] = requestAnimationFrame(l);
-    }, x = (e = !1) => {
+    }, G = (e = !1) => {
       p.forEach(clearTimeout), p.length = 0, i.forEach(cancelAnimationFrame), i.length = 0;
       const t = [
         ...f.value,
@@ -135,12 +145,12 @@ const E = 262, le = E / 2, ne = E / 2, W = 500, ue = 500, ve = {
       for (; r.value.length < t.length; )
         r.value.push(0);
       t.forEach((n, a) => {
-        const l = V(n), { delay: s } = n, L = setTimeout(() => {
-          e ? _(a, r.value[a], 0) : _(a, 0, l);
+        const l = _(n), { delay: s } = n, $ = setTimeout(() => {
+          e ? F(a, r.value[a], 0) : F(a, 0, l);
         }, s);
-        p.push(L);
+        p.push($);
       });
-    }, N = (e) => {
+    }, P = (e) => {
       const t = r.value[e] ?? 0;
       switch (m.value) {
         case "percent":
@@ -164,7 +174,7 @@ const E = 262, le = E / 2, ne = E / 2, W = 500, ue = 500, ve = {
       }
     }, X = () => {
       const e = f.value.length;
-      return N(e);
+      return P(e);
     }, H = u(() => {
       const e = [
         ...f.value,
@@ -172,7 +182,7 @@ const E = 262, le = E / 2, ne = E / 2, W = 500, ue = 500, ve = {
       ];
       let t = 0;
       return e.forEach((n) => {
-        const a = V(n);
+        const a = _(n);
         let l;
         switch (m.value) {
           case "percent":
@@ -186,27 +196,27 @@ const E = 262, le = E / 2, ne = E / 2, W = 500, ue = 500, ve = {
         }
         l.length > t && (t = l.length);
       }), `${t}ch`;
-    }), F = () => {
+    }), B = () => {
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          c.value = !0, x(!1);
+          c.value = !0, G(!1);
         });
       });
     };
     return J(() => {
-      !M.value && O.value && F();
-    }), U(M, (e) => {
-      !e && O.value && F();
-    }), U(y, (e) => {
-      e && (c.value = !1, x(!0));
+      !w.value && L.value && B();
+    }), U(w, (e) => {
+      !e && L.value && B();
+    }), U(b, (e) => {
+      e && (c.value = !1, G(!0));
     }), Q(() => {
       p.forEach(clearTimeout), i.forEach(cancelAnimationFrame);
     }), {
       // Constants
       CX: le,
       CY: ne,
-      radius: G,
-      circumference: b,
+      radius: V,
+      circumference: C,
       LOADING_BG_COLOR: ee,
       OTHER_SEGMENT_BG_COLOR: Z,
       // State
@@ -214,19 +224,19 @@ const E = 262, le = E / 2, ne = E / 2, W = 500, ue = 500, ve = {
       animatedIn: c,
       displayValues: r,
       // Computed
-      hasData: O,
+      hasData: L,
       visibleSegments: f,
       otherSegment: v,
-      otherItems: C,
+      otherItems: O,
       allItemsWithColors: q,
       valueMinWidth: H,
       // Methods
-      formatDisplayValue: N,
+      formatDisplayValue: P,
       formatItemValue: K,
       formatOtherDisplayValue: X
     };
   }
 };
 export {
-  ve as default
+  ce as default
 };

package/dist/vue/KvWwwHeaderBasic/KvWwwHeaderBasic.css

@@ -1 +1 @@
-.header-fade-enter-active[data-v-0d2a85d2]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.header-fade-leave-active[data-v-0d2a85d2]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.header-fade-enter[data-v-0d2a85d2],.header-fade-leave-to[data-v-0d2a85d2]{opacity:0}.header-fade-leave[data-v-0d2a85d2],.header-fade-enter-to[data-v-0d2a85d2]{opacity:1}.bg-opacity-50[data-v-0d2a85d2]{background-color:rgba(var(--bg-action-highlight),.5)}
+.header-fade-enter-active[data-v-5fc51700]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.header-fade-leave-active[data-v-5fc51700]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.header-fade-enter[data-v-5fc51700],.header-fade-leave-to[data-v-5fc51700]{opacity:0}.header-fade-leave[data-v-5fc51700],.header-fade-enter-to[data-v-5fc51700]{opacity:1}.bg-opacity-50[data-v-5fc51700]{background-color:rgba(var(--bg-action-highlight),.5)}

package/dist/vue/KvWwwHeaderBasic/KvWwwHeaderBasic.js

@@ -1,10 +1,10 @@
-import h from "./KvWwwHeaderBasic2.js";
-import { resolveComponent as l, openBlock as m, createBlock as u, withCtx as r, createElementVNode as s, normalizeStyle as d, createVNode as a, Transition as g, withDirectives as b, vShow as v, normalizeClass as k, resolveDynamicComponent as y, withModifiers as M } from "vue";
+import k from "./KvWwwHeaderBasic2.js";
+import { resolveComponent as a, openBlock as m, createBlock as u, withCtx as r, createElementVNode as s, normalizeStyle as d, createVNode as l, Transition as g, withDirectives as b, vShow as v, normalizeClass as h, resolveDynamicComponent as y, withModifiers as M } from "vue";
 import "./KvWwwHeaderBasic.css";
 import I from "../../_virtual/_plugin-vue_export-helper.js";
 function L(t, o, n, e, C, D) {
-  const w = l("link-bar"), c = l("kv-page-container"), f = l("kv-theme-provider");
-  return m(), u(f, {
+  const w = a("link-bar"), f = a("kv-page-container"), c = a("kv-theme-provider");
+  return m(), u(c, {
     tag: "div",
     class: "tw-bg-primary"
   }, {
@@ -14,11 +14,11 @@ function L(t, o, n, e, C, D) {
         class: "tw-font-medium tw-relative",
         style: d({ minHeight: e.MIN_HEADER_HEIGHT })
       }, [
-        a(c, null, {
+        l(f, null, {
           default: r(() => [
-            a(g, { name: "header-fade" }, {
+            l(g, { name: "header-fade" }, {
               default: r(() => [
-                b(a(w, {
+                b(l(w, {
                   "logged-in": n.loggedIn,
                   "basket-count": n.basketCount,
                   balance: n.balance,
@@ -39,7 +39,8 @@ function L(t, o, n, e, C, D) {
                   "open-menu-item": e.menuComponent,
                   onItemHover: e.onItemHover,
                   onLoadSearchData: o[0] || (o[0] = (i) => t.$emit("load-search-data")),
-                  onSearchSubmit: o[1] || (o[1] = (i) => t.$emit("search-submit", i))
+                  onSearchSubmit: o[1] || (o[1] = (i) => t.$emit("search-submit", i)),
+                  onLoginClick: o[2] || (o[2] = (i) => t.$emit("login-click", i))
                 }, null, 8, ["logged-in", "basket-count", "balance", "user-id", "is-borrower", "is-trustee", "lender-name", "lender-image-url", "is-user-data-loading", "is-basket-data-loading", "show-m-g-upsell-link", "login-url", "my-dashboard-url", "countries-not-lent-to-url", "app-origin", "search-suggestions", "is-mobile", "open-menu-item", "onItemHover"]), [
                   [v, e.linksVisible]
                 ])
@@ -50,22 +51,22 @@ function L(t, o, n, e, C, D) {
           _: 1
         })
       ], 4),
-      a(g, { name: "header-fade" }, {
+      l(g, { name: "header-fade" }, {
         default: r(() => [
           b(s("div", {
             class: "tw-absolute tw-z-modal tw-h-full tw-inset-x-0 tw-bg-eco-green-4 bg-opacity-50 tw-min-h-screen",
             style: d({ top: e.navHeight }),
-            onTouchstart: o[8] || (o[8] = (...i) => e.handleOverlayClick && e.handleOverlayClick(...i))
+            onTouchstart: o[9] || (o[9] = (...i) => e.handleOverlayClick && e.handleOverlayClick(...i))
           }, [
             s("div", {
               ref: "menuPanelRef",
-              class: k(["tw-bg-primary tw-overflow-y-auto", e.menuPanelClass]),
+              class: h(["tw-bg-primary tw-overflow-y-auto", e.menuPanelClass]),
               style: d({
                 ...e.menuPosition,
                 maxHeight: e.isMobileMenuActive ? "auto" : `calc(100dvh - ${e.navHeight})`
               }),
-              onMouseenter: o[6] || (o[6] = (i) => e.setMenu(e.menuItem, e.menuComponent)),
-              onMouseleave: o[7] || (o[7] = (i) => e.setMenu())
+              onMouseenter: o[7] || (o[7] = (i) => e.setMenu(e.menuItem, e.menuComponent)),
+              onMouseleave: o[8] || (o[8] = (i) => e.setMenu())
             }, [
               (m(), u(y(e.menuComponent), {
                 ref: "menuComponentInstance",
@@ -84,10 +85,10 @@ function L(t, o, n, e, C, D) {
                 "app-origin": e.resolvedAppOrigin,
                 "search-suggestions": e.effectiveSuggestions,
                 onLoadLendMenuData: e.emitLendMenuEvent,
-                onLoadSearchData: o[2] || (o[2] = (i) => t.$emit("load-search-data")),
-                onSearchSubmit: o[3] || (o[3] = (i) => t.$emit("search-submit", i)),
-                onClosingMenu: o[4] || (o[4] = (i) => e.setMenu()),
-                onTouchstart: o[5] || (o[5] = M(() => {
+                onLoadSearchData: o[3] || (o[3] = (i) => t.$emit("load-search-data")),
+                onSearchSubmit: o[4] || (o[4] = (i) => t.$emit("search-submit", i)),
+                onClosingMenu: o[5] || (o[5] = (i) => e.setMenu()),
+                onTouchstart: o[6] || (o[6] = M(() => {
                 }, ["stop"]))
               }, null, 40, ["logged-in", "login-url", "user-id", "is-borrower", "is-trustee", "trustee-id", "most-recent-borrowed-loan-id", "my-dashboard-url", "show-m-g-upsell-link", "is-mobile", "countries-not-lent-to-url", "app-origin", "search-suggestions", "onLoadLendMenuData"]))
             ], 38)
@@ -101,7 +102,7 @@ function L(t, o, n, e, C, D) {
     _: 1
   });
 }
-const B = /* @__PURE__ */ I(h, [["render", L], ["__scopeId", "data-v-0d2a85d2"]]);
+const B = /* @__PURE__ */ I(k, [["render", L], ["__scopeId", "data-v-5fc51700"]]);
 export {
   B as default
 };

package/dist/vue/KvWwwHeaderBasic/KvWwwHeaderBasic2.js

@@ -42,10 +42,10 @@ const S = "4rem", Y = G`
     trusteeId: { type: Number, default: null },
     mostRecentBorrowedLoanId: { type: Number, default: null }
   },
-  emits: ["load-lend-menu-data", "load-search-data", "search-submit"],
+  emits: ["load-lend-menu-data", "load-search-data", "search-submit", "login-click"],
   setup(d, { emit: M }) {
-    const { isMobile: B, checkIsMobile: I } = Q(), {
-      menuOpen: k,
+    const { isMobile: B, checkIsMobile: k } = Q(), {
+      menuOpen: I,
       menuComponent: A,
       menuItem: N,
       menuPosition: v,
@@ -102,7 +102,7 @@ const S = "4rem", Y = G`
       g.value || f();
     }
     return K(() => {
-      !d.appOrigin && typeof window < "u" && (b.value = window.location.origin), I(), O(), r.value && typeof ResizeObserver < "u" && (u = new ResizeObserver(() => {
+      !d.appOrigin && typeof window < "u" && (b.value = window.location.origin), k(), O(), r.value && typeof ResizeObserver < "u" && (u = new ResizeObserver(() => {
         r.value && (y.value = `${r.value.offsetHeight}px`);
       }), u.observe(r.value));
     }), $(() => {
@@ -115,7 +115,7 @@ const S = "4rem", Y = G`
       resolvedAppOrigin: b,
       effectiveSuggestions: U,
       isMobile: B,
-      menuOpen: k,
+      menuOpen: I,
       menuComponent: A,
       menuItem: N,
       menuPosition: v,

package/dist/vue/KvWwwHeaderBasic/LinkBar.css

@@ -1 +1 @@
-.link-bar[data-v-d90acda7]{display:flex;align-items:center;gap:.5rem}.link-bar__logo[data-v-d90acda7]{position:absolute;top:50%;left:50%;--tw-translate-x: -50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}@media(min-width:45.875rem){.link-bar[data-v-d90acda7]{display:grid;-moz-column-gap:1rem;column-gap:1rem;grid-template-areas:"logo lend right" "search search search";grid-template-columns:1fr auto auto;grid-template-rows:4rem auto;row-gap:.5rem}.link-bar__logo[data-v-d90acda7]{position:static;--tw-translate-x: 0;--tw-translate-y: 0;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));grid-area:logo;justify-self:start}.link-bar__lend[data-v-d90acda7]{grid-area:lend}.link-bar__search[data-v-d90acda7]{grid-area:search;margin-bottom:.5rem}.link-bar__right[data-v-d90acda7]{grid-area:right}}@media(min-width:64rem){.link-bar[data-v-d90acda7]{-moz-column-gap:1.25rem;column-gap:1.25rem;grid-template-areas:"logo lend search right";grid-template-columns:auto auto 1fr auto;grid-template-rows:4rem}.link-bar__search[data-v-d90acda7]{margin-bottom:0}}.header-link[data-v-d90acda7]{cursor:pointer;padding-top:1rem;padding-bottom:1rem;--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1));text-decoration-line:none}.header-link[data-v-d90acda7]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:none}
+.link-bar[data-v-2fd75227]{display:flex;align-items:center;gap:.5rem}.link-bar__logo[data-v-2fd75227]{position:absolute;top:50%;left:50%;--tw-translate-x: -50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}@media(min-width:45.875rem){.link-bar[data-v-2fd75227]{display:grid;-moz-column-gap:1rem;column-gap:1rem;grid-template-areas:"logo lend right" "search search search";grid-template-columns:1fr auto auto;grid-template-rows:4rem auto;row-gap:.5rem}.link-bar__logo[data-v-2fd75227]{position:static;--tw-translate-x: 0;--tw-translate-y: 0;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));grid-area:logo;justify-self:start}.link-bar__lend[data-v-2fd75227]{grid-area:lend}.link-bar__search[data-v-2fd75227]{grid-area:search;margin-bottom:.5rem}.link-bar__right[data-v-2fd75227]{grid-area:right}}@media(min-width:64rem){.link-bar[data-v-2fd75227]{-moz-column-gap:1.25rem;column-gap:1.25rem;grid-template-areas:"logo lend search right";grid-template-columns:auto auto 1fr auto;grid-template-rows:4rem}.link-bar__search[data-v-2fd75227]{margin-bottom:0}}.header-link[data-v-2fd75227]{cursor:pointer;padding-top:1rem;padding-bottom:1rem;--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1));text-decoration-line:none}.header-link[data-v-2fd75227]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:none}

package/dist/vue/KvWwwHeaderBasic/LinkBar.js

@@ -155,7 +155,7 @@ function V(k, n, o, e, j, X) {
     ])
   ], 32);
 }
-const Q = /* @__PURE__ */ O(M, [["render", V], ["__scopeId", "data-v-d90acda7"]]);
+const Q = /* @__PURE__ */ O(M, [["render", V], ["__scopeId", "data-v-2fd75227"]]);
 export {
   Q as default
 };

package/dist/vue/KvWwwHeaderBasic/LinkBar.vue.d.ts

@@ -257,11 +257,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     handleTouchStart: (item: string, menu: unknown, position?: unknown, triggerCenterX?: number | null) => void;
     handleEmptySpaceClick: (event: Event) => void;
     onPrimaryClick: (link: NavLink) => void;
-    onLoginClick: () => void;
+    onLoginClick: (event: MouseEvent) => void;
     onBasketClick: () => void;
     onSupportKivaClick: () => void;
     onLogoClick: () => void;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("load-search-data" | "search-submit" | "item-hover")[], "load-search-data" | "search-submit" | "item-hover", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("load-search-data" | "search-submit" | "item-hover" | "login-click")[], "load-search-data" | "search-submit" | "item-hover" | "login-click", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     loggedIn: {
         type: BooleanConstructor;
         default: boolean;
@@ -338,6 +338,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     "onLoad-search-data"?: (...args: any[]) => any;
     "onSearch-submit"?: (...args: any[]) => any;
     "onItem-hover"?: (...args: any[]) => any;
+    "onLogin-click"?: (...args: any[]) => any;
 }>, {
     lenderName: string;
     lenderImageUrl: string;

package/dist/vue/KvWwwHeaderBasic/LinkBar2.js

@@ -9,7 +9,7 @@ import F from "../KvWwwHeader/KvHeaderLogo.js";
 import G from "../KvWwwHeader/KvHeaderDropdownLink.js";
 import { PRIMARY_LINKS as W } from "../../utils/headerNavLinks.js";
 import X from "./SearchBar.js";
-const v = r(() => import("../KvWwwHeader/LendMenu/KvLendMenu.js")), p = r(() => import("./AboutMenu.js")), Y = r(() => import("./MyKivaMenu.js")), q = r(() => import("./MobileMenu.js")), ie = {
+const v = r(() => import("../KvWwwHeader/LendMenu/KvLendMenu.js")), g = r(() => import("./AboutMenu.js")), Y = r(() => import("./MyKivaMenu.js")), q = r(() => import("./MobileMenu.js")), ie = {
   name: "LinkBar",
   components: {
     KvMaterialIcon: E,
@@ -40,11 +40,11 @@ const v = r(() => import("../KvWwwHeader/LendMenu/KvLendMenu.js")), p = r(() =>
     isMobile: { type: Boolean, default: !1 },
     openMenuItem: { type: [Object, Function], default: null }
   },
-  emits: ["item-hover", "load-search-data", "search-submit"],
+  emits: ["item-hover", "load-search-data", "search-submit", "login-click"],
   setup(t, { emit: l }) {
     const o = P("$kvTrackEvent", () => {
     }), a = d(null), u = d(null);
-    function g() {
+    function p() {
       const e = u.value, n = e == null ? void 0 : e.getBoundingClientRect();
       return n ? t.isMobile ? { right: "0" } : { right: `${window.innerWidth - n.right}px` } : null;
     }
@@ -53,7 +53,7 @@ const v = r(() => import("../KvWwwHeader/LendMenu/KvLendMenu.js")), p = r(() =>
       const e = u.value, n = e == null ? void 0 : e.getBoundingClientRect();
       return n ? n.left + n.width / 2 : null;
     }
-    const h = i(() => W.filter((e) => e.visibility === "visitor" ? !t.loggedIn : e.visibility === "loggedIn" ? t.loggedIn : !0)), k = i(() => t.isMobile ? void 0 : "/lend-by-category"), y = i(() => $(Math.floor(t.balance)).format("$0")), M = i(() => t.openMenuItem === v ? t.openMenuItem : null), B = i(() => t.openMenuItem === p ? t.openMenuItem : null), L = {
+    const k = i(() => W.filter((e) => e.visibility === "visitor" ? !t.loggedIn : e.visibility === "loggedIn" ? t.loggedIn : !0)), h = i(() => t.isMobile ? void 0 : "/lend-by-category"), y = i(() => $(Math.floor(t.balance)).format("$0")), M = i(() => t.openMenuItem === v ? t.openMenuItem : null), B = i(() => t.openMenuItem === g ? t.openMenuItem : null), L = {
       menuButton: { action: "hover-Mobile-menu", label: "Mobile" },
       lendButton: { action: "hover-Lend-menu", label: "Lend" },
       aboutLink: { action: "hover-About-menu", label: "About" },
@@ -84,8 +84,8 @@ const v = r(() => import("../KvWwwHeader/LendMenu/KvLendMenu.js")), p = r(() =>
     function K(e) {
       o(e.track[0], e.track[1]);
     }
-    function U() {
-      o("TopNav", "click-Log-in");
+    function U(e) {
+      o("TopNav", "click-Log-in"), l("login-click", e);
     }
     function A() {
       o("TopNav", "click-Basket");
@@ -101,14 +101,14 @@ const v = r(() => import("../KvWwwHeader/LendMenu/KvLendMenu.js")), p = r(() =>
       mdiChevronDown: x,
       mdiBriefcase: D,
       KvLendMenu: v,
-      AboutMenu: p,
+      AboutMenu: g,
       MyKivaMenu: Y,
       MobileMenu: q,
       avatarMenu: u,
-      getAvatarMenuPosition: g,
+      getAvatarMenuPosition: p,
       getAvatarTriggerCenterX: b,
-      visiblePrimaryLinks: h,
-      lendUrl: k,
+      visiblePrimaryLinks: k,
+      lendUrl: h,
       formattedBalance: y,
       lendOpenItem: M,
       aboutOpenItem: B,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "8.26.1",
+  "version": "8.28.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -113,5 +113,5 @@
   "dependencies": {
     "fuse.js": "^7.1.0"
   },
-  "gitHead": "98e6214303eb569e180a1c2da6e21a23c06d0948"
+  "gitHead": "88c9f72fd0eacc5c167b9697bda2527c073d7356"
 }