@kiva/kv-components 8.27.0 → 8.29.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/LinkBar.css

@@ -1 +1 @@
-.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}
+.link-bar[data-v-9ca80a31]{display:flex;align-items:center;gap:.5rem}.link-bar__logo[data-v-9ca80a31]{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-9ca80a31]{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-9ca80a31]{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-9ca80a31]{grid-area:lend}.link-bar__search[data-v-9ca80a31]{grid-area:search;margin-bottom:.5rem}.link-bar__right[data-v-9ca80a31]{grid-area:right}}@media(min-width:64rem){.link-bar[data-v-9ca80a31]{-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-9ca80a31]{margin-bottom:0}}.header-link[data-v-9ca80a31]{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-9ca80a31]: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

@@ -1,42 +1,43 @@
-import M from "./LinkBar2.js";
-import { resolveComponent as d, openBlock as a, createElementBlock as i, createElementVNode as r, withModifiers as g, createVNode as l, withCtx as w, createTextVNode as s, Fragment as y, renderList as p, toDisplayString as m, createCommentVNode as v, withDirectives as x, vShow as L, createBlock as B } from "vue";
+import p from "./LinkBar2.js";
+import { resolveComponent as d, openBlock as o, createElementBlock as i, createElementVNode as r, withModifiers as b, createVNode as l, withCtx as c, createTextVNode as w, Fragment as x, renderList as L, toDisplayString as m, createCommentVNode as s, withDirectives as B, normalizeStyle as k, vShow as O, createBlock as f } from "vue";
 import "./LinkBar.css";
-import O from "../../_virtual/_plugin-vue_export-helper.js";
-const S = { class: "link-bar__right tw-flex tw-items-center tw-justify-end tw-ml-auto md:tw-ml-0 tw-gap-1 md:tw-gap-2 lg:tw-gap-2.5" }, T = ["href", "data-testid", "onClick"], D = ["href"], U = { class: "tw-hidden md:tw-flex tw-items-center" }, H = { class: "tw-bg-secondary tw-rounded-xs tw-py-0.5 tw-px-1 tw-mr-1 tw-leading-none" }, A = { class: "tw-relative tw-flex md:tw-hidden tw-items-center tw-text-eco-green-4" }, I = {
+import S from "../../_virtual/_plugin-vue_export-helper.js";
+const T = { class: "link-bar__right tw-flex tw-items-center tw-justify-end tw-ml-auto md:tw-ml-0 tw-gap-1 md:tw-gap-2 lg:tw-gap-2.5" }, D = ["href", "data-testid", "onClick"], U = ["href"], H = { class: "tw-hidden md:tw-flex tw-items-center" }, A = { class: "tw-bg-secondary tw-rounded-xs tw-py-0.5 tw-px-1 tw-mr-1 tw-leading-none" }, I = { class: "tw-relative tw-flex md:tw-hidden tw-items-center tw-text-eco-green-4" }, K = {
   key: 0,
   class: "tw-absolute tw-w-4 tw-h-4 tw-pt-0.5 tw-flex tw-items-center tw-justify-center tw-text-white tw-text-small tw-font-medium tw-pointer-events-none"
-}, K = { class: "tw-hidden md:tw-block" }, N = {
+}, N = { class: "tw-hidden md:tw-block" }, E = {
   key: 0,
   class: "tw-w-4 tw-h-3"
-}, E = {
+}, P = {
   key: 1,
   class: "tw-text-eco-green-4"
-}, P = {
-  key: 2,
-  class: "tw-w-3 tw-h-3 tw-rounded-full tw-overflow-hidden"
+}, V = {
+  key: 3,
+  class: "tw-w-3 tw-h-3 tw-rounded-full tw-overflow-hidden",
+  "data-testid": "header-avatar-skeleton"
 };
-function V(k, n, o, e, j, X) {
-  const c = d("kv-material-icon"), b = d("kv-header-logo"), u = d("kv-header-dropdown-link"), f = d("search-bar"), _ = d("kv-button"), h = d("kv-loading-placeholder"), C = d("kv-user-avatar");
-  return a(), i("div", {
+function j(h, t, a, e, X, z) {
+  const v = d("kv-material-icon"), y = d("kv-header-logo"), u = d("kv-header-dropdown-link"), _ = d("search-bar"), M = d("kv-button"), g = d("kv-loading-placeholder"), C = d("kv-user-avatar");
+  return o(), i("div", {
     class: "link-bar tw-min-h-[4rem] tw-font-medium tw-relative",
-    onTouchstart: n[12] || (n[12] = (...t) => e.handleEmptySpaceClick && e.handleEmptySpaceClick(...t))
+    onTouchstart: t[12] || (t[12] = (...n) => e.handleEmptySpaceClick && e.handleEmptySpaceClick(...n))
   }, [
     r("button", {
       type: "button",
       "aria-label": "Open menu",
       class: "header-link link-bar__hamburger tw-inline-flex md:tw-hidden",
-      onMouseover: n[0] || (n[0] = (t) => e.handleOnHover("menuButton", e.MobileMenu)),
-      onTouchstart: n[1] || (n[1] = g((t) => e.handleTouchStart("menuButton", e.MobileMenu), ["stop", "prevent"]))
+      onMouseover: t[0] || (t[0] = (n) => e.handleOnHover("menuButton", e.MobileMenu)),
+      onTouchstart: t[1] || (t[1] = b((n) => e.handleTouchStart("menuButton", e.MobileMenu), ["stop", "prevent"]))
     }, [
-      l(c, { icon: e.mdiMenu }, null, 8, ["icon"])
+      l(v, { icon: e.mdiMenu }, null, 8, ["icon"])
     ], 32),
     r("a", {
       href: "/",
       "aria-label": "Kiva home",
       class: "link-bar__logo tw-px-1 tw-py-2 tw-cursor-pointer",
-      onClick: n[2] || (n[2] = (...t) => e.onLogoClick && e.onLogoClick(...t))
+      onClick: t[2] || (t[2] = (...n) => e.onLogoClick && e.onLogoClick(...n))
     }, [
-      l(b)
+      l(y)
     ]),
     l(u, {
       class: "link-bar__lend",
@@ -47,30 +48,30 @@ function V(k, n, o, e, j, X) {
       "dropdown-icon": e.mdiChevronDown,
       "base-class": "tw-py-1",
       onOnHover: e.handleOnHover,
-      onMouseleave: n[3] || (n[3] = (t) => e.handleMouseOut("lendButton")),
+      onMouseleave: t[3] || (t[3] = (n) => e.handleMouseOut("lendButton")),
       onUserTap: e.handleTouchStart
     }, {
-      default: w(() => n[13] || (n[13] = [
-        s(" Lend ")
+      default: c(() => t[13] || (t[13] = [
+        w(" Lend ")
       ])),
       _: 1
     }, 8, ["href", "menu-component", "open-menu-item", "dropdown-icon", "onOnHover", "onUserTap"]),
-    l(f, {
+    l(_, {
       class: "link-bar__search tw-min-w-0 tw-hidden md:tw-block",
-      "search-suggestions": o.searchSuggestions,
-      "app-origin": o.appOrigin,
-      "is-mobile": o.isMobile,
-      onLoadSearchData: n[4] || (n[4] = (t) => k.$emit("load-search-data")),
-      onSearchSubmit: n[5] || (n[5] = (t) => k.$emit("search-submit", t))
+      "search-suggestions": a.searchSuggestions,
+      "app-origin": a.appOrigin,
+      "is-mobile": a.isMobile,
+      onLoadSearchData: t[4] || (t[4] = (n) => h.$emit("load-search-data")),
+      onSearchSubmit: t[5] || (t[5] = (n) => h.$emit("search-submit", n))
     }, null, 8, ["search-suggestions", "app-origin", "is-mobile"]),
-    r("div", S, [
-      (a(!0), i(y, null, p(e.visiblePrimaryLinks, (t) => (a(), i("a", {
-        key: t.id,
-        href: t.href,
+    r("div", T, [
+      (o(!0), i(x, null, L(e.visiblePrimaryLinks, (n) => (o(), i("a", {
+        key: n.id,
+        href: n.href,
         class: "header-link tw-hidden md:tw-block",
-        "data-testid": `header-link-${t.id}`,
-        onClick: (F) => e.onPrimaryClick(t)
-      }, m(t.label), 9, T))), 128)),
+        "data-testid": `header-link-${n.id}`,
+        onClick: (F) => e.onPrimaryClick(n)
+      }, m(n.label), 9, D))), 128)),
       l(u, {
         "ref-name": "aboutLink",
         class: "tw-hidden md:tw-block",
@@ -80,82 +81,95 @@ function V(k, n, o, e, j, X) {
         "base-class": "tw-py-1",
         "send-link-position": "",
         onOnHover: e.handleOnHover,
-        onMouseleave: n[6] || (n[6] = (t) => e.handleMouseOut("aboutLink")),
+        onMouseleave: t[6] || (t[6] = (n) => e.handleMouseOut("aboutLink")),
         onUserTap: e.handleTouchStart
       }, {
-        default: w(() => n[14] || (n[14] = [
-          s(" About ")
+        default: c(() => t[14] || (t[14] = [
+          w(" About ")
         ])),
         _: 1
       }, 8, ["menu-component", "open-menu-item", "dropdown-icon", "onOnHover", "onUserTap"]),
-      o.loggedIn ? v("", !0) : (a(), i("a", {
+      a.loggedIn ? s("", !0) : (o(), i("a", {
         key: 0,
-        href: o.loginUrl,
+        href: a.loginUrl,
         class: "header-link",
         "data-testid": "header-login",
-        onClick: n[7] || (n[7] = (...t) => e.onLoginClick && e.onLoginClick(...t))
-      }, "Log in", 8, D)),
-      x(r("a", {
+        onClick: t[7] || (t[7] = (...n) => e.onLoginClick && e.onLoginClick(...n))
+      }, "Log in", 8, U)),
+      B(r("a", {
+        style: k(a.isBasketDataLoading ? { display: "var(--basket-display, flex)" } : void 0),
         href: "/basket",
         class: "header-link tw-flex tw-items-center",
         "data-testid": "header-basket",
-        onClick: n[8] || (n[8] = (...t) => e.onBasketClick && e.onBasketClick(...t))
+        onClick: t[8] || (t[8] = (...n) => e.onBasketClick && e.onBasketClick(...n))
       }, [
-        r("span", U, [
-          r("span", H, m(o.basketCount), 1),
-          n[15] || (n[15] = s(" Basket "))
+        r("span", H, [
+          r("span", A, m(a.basketCount), 1),
+          t[15] || (t[15] = w(" Basket "))
         ]),
-        r("span", A, [
-          o.isBasketDataLoading ? v("", !0) : (a(), i("span", I, m(o.basketCount), 1)),
-          l(c, {
+        r("span", I, [
+          a.isBasketDataLoading ? s("", !0) : (o(), i("span", K, m(a.basketCount), 1)),
+          l(v, {
             icon: e.mdiBriefcase,
             class: "tw-w-4 tw-h-4 tw-pointer-events-none"
           }, null, 8, ["icon"]),
-          n[16] || (n[16] = r("span", { class: "tw-sr-only" }, "Basket", -1))
+          t[16] || (t[16] = r("span", { class: "tw-sr-only" }, "Basket", -1))
         ])
-      ], 512), [
-        [L, o.basketCount > 0 || o.isBasketDataLoading]
+      ], 4), [
+        [O, a.basketCount > 0 || a.isBasketDataLoading]
       ]),
-      r("div", K, [
-        l(_, {
+      r("div", N, [
+        l(M, {
           variant: "secondary",
           href: "/donate/supportus",
           class: "tw-whitespace-nowrap",
           "data-testid": "header-support-kiva",
           onClick: e.onSupportKivaClick
         }, {
-          default: w(() => n[17] || (n[17] = [
-            s(" Support Kiva ")
+          default: c(() => t[17] || (t[17] = [
+            w(" Support Kiva ")
           ])),
           _: 1
         }, 8, ["onClick"])
       ]),
-      o.loggedIn ? (a(), i("div", {
+      a.loggedIn ? (o(), i("div", {
         key: 1,
         ref: "avatarMenu",
         "data-testid": "header-avatar-menu",
         class: "tw-flex tw-items-center tw-gap-1 tw-cursor-pointer tw-py-1",
-        onMouseenter: n[9] || (n[9] = (t) => e.handleOnHover("avatarMenu", e.MyKivaMenu, e.getAvatarMenuPosition(), e.getAvatarTriggerCenterX())),
-        onMouseleave: n[10] || (n[10] = (t) => e.handleMouseOut("avatarMenu")),
-        onTouchstart: n[11] || (n[11] = g((t) => e.handleTouchStart("avatarMenu", e.MyKivaMenu, e.getAvatarMenuPosition(), e.getAvatarTriggerCenterX()), ["stop"]))
+        style: k(a.isUserDataLoading ? { display: "var(--user-loading-display, flex)" } : void 0),
+        onMouseenter: t[9] || (t[9] = (n) => e.handleOnHover("avatarMenu", e.MyKivaMenu, e.getAvatarMenuPosition(), e.getAvatarTriggerCenterX())),
+        onMouseleave: t[10] || (t[10] = (n) => e.handleMouseOut("avatarMenu")),
+        onTouchstart: t[11] || (t[11] = b((n) => e.handleTouchStart("avatarMenu", e.MyKivaMenu, e.getAvatarMenuPosition(), e.getAvatarTriggerCenterX()), ["stop"]))
       }, [
-        o.isUserDataLoading ? (a(), i("div", N, [
-          l(h)
-        ])) : (a(), i("span", E, m(e.formattedBalance), 1)),
-        o.isUserDataLoading ? (a(), i("div", P, [
-          l(h)
-        ])) : (a(), B(C, {
-          key: 3,
+        a.isUserDataLoading ? (o(), i("div", E, [
+          l(g)
+        ])) : (o(), i("span", P, m(e.formattedBalance), 1)),
+        e.avatarMode === "esi" ? (o(), f(v, {
+          key: 2,
+          icon: e.mdiAccountCircle,
+          class: "tw-w-3 tw-h-3",
+          "data-testid": "header-avatar-icon",
+          style: { display: "var(--user-avatar-legacy-display, inline-block)" }
+        }, null, 8, ["icon"])) : s("", !0),
+        e.avatarMode === "skeleton" ? (o(), i("div", V, [
+          l(g)
+        ])) : s("", !0),
+        e.avatarMode !== "skeleton" ? (o(), f(C, {
+          key: 4,
           class: "tw-w-3 tw-h-3",
-          "lender-name": o.lenderName,
-          "lender-image-url": o.lenderImageUrl,
+          "data-testid": e.avatarMode === "esi" ? "header-avatar-esi" : null,
+          style: k(e.avatarMode === "esi" ? { display: "var(--user-avatar-display, block)" } : void 0),
+          "lender-name": a.lenderName,
+          "lender-image-url": a.lenderImageUrl,
+          "show-css-placeholder": e.avatarMode === "esi",
           "is-small": ""
-        }, null, 8, ["lender-name", "lender-image-url"]))
-      ], 544)) : v("", !0)
+        }, null, 8, ["data-testid", "style", "lender-name", "lender-image-url", "show-css-placeholder"])) : s("", !0)
+      ], 36)) : s("", !0)
     ])
   ], 32);
 }
-const Q = /* @__PURE__ */ O(M, [["render", V], ["__scopeId", "data-v-2fd75227"]]);
+const R = /* @__PURE__ */ S(p, [["render", j], ["__scopeId", "data-v-9ca80a31"]]);
 export {
-  Q as default
+  R as default
 };

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

@@ -41,6 +41,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    useEsiAvatar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     showMGUpsellLink: {
         type: BooleanConstructor;
         default: boolean;
@@ -77,6 +81,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     mdiMenu: string;
     mdiChevronDown: string;
     mdiBriefcase: string;
+    mdiAccountCircle: string;
     KvLendMenu: any;
     AboutMenu: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
         isMobile: {
@@ -250,6 +255,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     visiblePrimaryLinks: import('vue').ComputedRef<any>;
     lendUrl: import('vue').ComputedRef<string>;
     formattedBalance: import('vue').ComputedRef<any>;
+    avatarMode: import('vue').ComputedRef<"loaded" | "esi" | "skeleton">;
     lendOpenItem: import('vue').ComputedRef<Function | Record<string, any>>;
     aboutOpenItem: import('vue').ComputedRef<Function | Record<string, any>>;
     handleOnHover: (item: string, menu: unknown, position?: unknown, triggerCenterX?: number | null) => void;
@@ -302,6 +308,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    useEsiAvatar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     showMGUpsellLink: {
         type: BooleanConstructor;
         default: boolean;
@@ -358,6 +368,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     appOrigin: string;
     isBasketDataLoading: boolean;
     isUserDataLoading: boolean;
+    useEsiAvatar: boolean;
 }, {}, {
     KvMaterialIcon: any;
     KvUserAvatar: any;

package/dist/vue/KvWwwHeaderBasic/LinkBar2.js

@@ -1,24 +1,24 @@
-import { defineAsyncComponent as r, inject as P, ref as d, computed as i } from "vue";
-import { mdiBriefcase as D, mdiChevronDown as x, mdiMenu as R } from "@mdi/js";
-import $ from "numeral";
-import E from "../KvMaterialIcon.js";
-import H from "../KvUserAvatar.js";
-import _ from "../KvLoadingPlaceholder.js";
-import j from "../KvButton.js";
-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")), g = r(() => import("./AboutMenu.js")), Y = r(() => import("./MyKivaMenu.js")), q = r(() => import("./MobileMenu.js")), ie = {
+import { defineAsyncComponent as r, inject as D, ref as m, computed as i } from "vue";
+import { mdiAccountCircle as E, mdiBriefcase as x, mdiChevronDown as R, mdiMenu as $ } from "@mdi/js";
+import H from "numeral";
+import _ from "../KvMaterialIcon.js";
+import j from "../KvUserAvatar.js";
+import F from "../KvLoadingPlaceholder.js";
+import G from "../KvButton.js";
+import W from "../KvWwwHeader/KvHeaderLogo.js";
+import X from "../KvWwwHeader/KvHeaderDropdownLink.js";
+import { PRIMARY_LINKS as Y } from "../../utils/headerNavLinks.js";
+import q from "./SearchBar.js";
+const v = r(() => import("../KvWwwHeader/LendMenu/KvLendMenu.js")), g = r(() => import("./AboutMenu.js")), z = r(() => import("./MyKivaMenu.js")), J = r(() => import("./MobileMenu.js")), ue = {
   name: "LinkBar",
   components: {
-    KvMaterialIcon: E,
-    KvUserAvatar: H,
-    KvLoadingPlaceholder: _,
-    KvButton: j,
-    KvHeaderLogo: F,
-    KvHeaderDropdownLink: G,
-    SearchBar: X
+    KvMaterialIcon: _,
+    KvUserAvatar: j,
+    KvLoadingPlaceholder: F,
+    KvButton: G,
+    KvHeaderLogo: W,
+    KvHeaderDropdownLink: X,
+    SearchBar: q
   },
   props: {
     loggedIn: { type: Boolean, default: !1 },
@@ -31,6 +31,7 @@ const v = r(() => import("../KvWwwHeader/LendMenu/KvLendMenu.js")), g = r(() =>
     lenderImageUrl: { type: String, default: "" },
     isUserDataLoading: { type: Boolean, default: !1 },
     isBasketDataLoading: { type: Boolean, default: !1 },
+    useEsiAvatar: { type: Boolean, default: !1 },
     showMGUpsellLink: { type: Boolean, default: !1 },
     loginUrl: { type: String, default: "/ui-login" },
     myDashboardUrl: { type: String, default: "/mykiva" },
@@ -42,8 +43,8 @@ const v = r(() => import("../KvWwwHeader/LendMenu/KvLendMenu.js")), g = r(() =>
   },
   emits: ["item-hover", "load-search-data", "search-submit", "login-click"],
   setup(t, { emit: l }) {
-    const o = P("$kvTrackEvent", () => {
-    }), a = d(null), u = d(null);
+    const o = D("$kvTrackEvent", () => {
+    }), a = m(null), u = m(null);
     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,30 +54,30 @@ const v = r(() => import("../KvWwwHeader/LendMenu/KvLendMenu.js")), g = r(() =>
       const e = u.value, n = e == null ? void 0 : e.getBoundingClientRect();
       return n ? n.left + n.width / 2 : null;
     }
-    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 = {
+    const k = i(() => Y.filter((e) => e.visibility === "visitor" ? !t.loggedIn : e.visibility === "loggedIn" ? t.loggedIn : !0)), h = i(() => t.isMobile ? void 0 : "/lend-by-category"), y = i(() => H(Math.floor(t.balance)).format("$0")), M = i(() => t.isUserDataLoading ? t.useEsiAvatar ? "esi" : "skeleton" : "loaded"), B = i(() => t.openMenuItem === v ? t.openMenuItem : null), L = i(() => t.openMenuItem === g ? t.openMenuItem : null), I = {
       menuButton: { action: "hover-Mobile-menu", label: "Mobile" },
       lendButton: { action: "hover-Lend-menu", label: "Lend" },
       aboutLink: { action: "hover-About-menu", label: "About" },
       avatarMenu: { action: "hover-User-menu", label: "User" }
-    }, I = {
+    }, T = {
       menuButton: { action: "close-Mobile-menu", label: "Mobile" }
     };
-    function s(e) {
-      const n = L[e];
+    function f(e) {
+      const n = I[e];
       n && o("TopNav", n.action, n.label);
     }
-    function m(e) {
-      const n = I[e];
+    function d(e) {
+      const n = T[e];
       n && o("TopNav", n.action, n.label);
     }
-    function T(e, n, c = null, f = null) {
-      navigator.maxTouchPoints || (a.value !== e && s(e), a.value = e, l("item-hover", e, n, c, f));
+    function C(e, n, c = null, s = null) {
+      navigator.maxTouchPoints || (a.value !== e && f(e), a.value = e, l("item-hover", e, n, c, s));
     }
-    function C(e) {
-      navigator.maxTouchPoints || a.value === e && (m(e), a.value = null, l("item-hover"));
+    function S(e) {
+      navigator.maxTouchPoints || a.value === e && (d(e), a.value = null, l("item-hover"));
     }
-    function S(e, n, c = null, f = null) {
-      a.value === e ? (m(e), a.value = null, l("item-hover")) : (s(e), a.value = e, l("item-hover", e, n, c, f));
+    function A(e, n, c = null, s = null) {
+      a.value === e ? (d(e), a.value = null, l("item-hover")) : (f(e), a.value = e, l("item-hover", e, n, c, s));
     }
     function N(e) {
       e.target === e.currentTarget && l("item-hover");
@@ -87,43 +88,45 @@ const v = r(() => import("../KvWwwHeader/LendMenu/KvLendMenu.js")), g = r(() =>
     function U(e) {
       o("TopNav", "click-Log-in"), l("login-click", e);
     }
-    function A() {
+    function O() {
       o("TopNav", "click-Basket");
     }
-    function O() {
+    function w() {
       o("TopNav", "click-Support-Kiva");
     }
-    function w() {
+    function P() {
       o("TopNav", "click-Logo");
     }
     return {
-      mdiMenu: R,
-      mdiChevronDown: x,
-      mdiBriefcase: D,
+      mdiMenu: $,
+      mdiChevronDown: R,
+      mdiBriefcase: x,
+      mdiAccountCircle: E,
       KvLendMenu: v,
       AboutMenu: g,
-      MyKivaMenu: Y,
-      MobileMenu: q,
+      MyKivaMenu: z,
+      MobileMenu: J,
       avatarMenu: u,
       getAvatarMenuPosition: p,
       getAvatarTriggerCenterX: b,
       visiblePrimaryLinks: k,
       lendUrl: h,
       formattedBalance: y,
-      lendOpenItem: M,
-      aboutOpenItem: B,
-      handleOnHover: T,
-      handleMouseOut: C,
-      handleTouchStart: S,
+      avatarMode: M,
+      lendOpenItem: B,
+      aboutOpenItem: L,
+      handleOnHover: C,
+      handleMouseOut: S,
+      handleTouchStart: A,
       handleEmptySpaceClick: N,
       onPrimaryClick: K,
       onLoginClick: U,
-      onBasketClick: A,
-      onSupportKivaClick: O,
-      onLogoClick: w
+      onBasketClick: O,
+      onSupportKivaClick: w,
+      onLogoClick: P
     };
   }
 };
 export {
-  ie as default
+  ue as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "8.27.0",
+  "version": "8.29.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -113,5 +113,5 @@
   "dependencies": {
     "fuse.js": "^7.1.0"
   },
-  "gitHead": "bb636116de28fdd44916765d3f498617f473ed22"
+  "gitHead": "8e8f125eb1e762ab829f88ddea8c34674eb9319e"
 }