@kiva/kv-components 9.1.0 → 9.2.0

package/dist/utils/headerMenuTiming.d.ts

@@ -0,0 +1,6 @@
+export declare const MENU_OPEN_DELAY_MS = 100;
+export declare const MENU_CLOSE_FADE_MS = 100;
+export declare const MENU_TIMING_VARS: {
+    '--menu-open-delay': string;
+    '--menu-close-fade': string;
+};

package/dist/utils/headerMenuTiming.js

@@ -0,0 +1,9 @@
+const _ = 100, E = 100, M = {
+  "--menu-open-delay": "100ms",
+  "--menu-close-fade": "100ms"
+};
+export {
+  E as MENU_CLOSE_FADE_MS,
+  _ as MENU_OPEN_DELAY_MS,
+  M as MENU_TIMING_VARS
+};

package/dist/utils/useHeaderMenuGroup.d.ts

@@ -0,0 +1,27 @@
+import { Ref } from 'vue';
+import { HeaderMenuState } from '../../../../../../../../../src/utils/useHeaderMenuState';
+import { HeaderMenuPlacement } from '../../../../../../../../../src/utils/useHeaderMenuPlacement';
+export interface TriggerAttrs {
+    'aria-expanded': boolean;
+    'aria-controls': string;
+    onClick(event: Event): void;
+}
+export interface HeaderMenuGroupOptions {
+    panelId: Ref<string>;
+    rootRef: Ref<HTMLElement | null>;
+    menus: HeaderMenuState;
+    placement?: HeaderMenuPlacement | null;
+}
+export declare function useHeaderMenuGroup({ panelId, rootRef, menus, placement, }: HeaderMenuGroupOptions): {
+    approached: Ref<boolean, boolean>;
+    toggled: import('vue').ComputedRef<boolean>;
+    expanded: import('vue').ComputedRef<any>;
+    trigger: import('vue').ComputedRef<TriggerAttrs>;
+    toggle: (event?: Event) => void;
+    close: () => void;
+    onPointerEnter: (event: PointerEvent) => void;
+    onPointerLeave: () => void;
+    onFocusIn: () => void;
+    onFocusOut: (event: FocusEvent) => void;
+    onKeydown: (event: KeyboardEvent) => void;
+};

package/dist/utils/useHeaderMenuGroup.js

@@ -0,0 +1,68 @@
+import { ref as k, computed as s, onMounted as m, onBeforeUnmount as x } from "vue";
+import { MENU_OPEN_DELAY_MS as A } from "./headerMenuTiming.js";
+import { useHoverIntent as D } from "./useHoverIntent.js";
+import { useOutsidePointerDown as H } from "./useOutsidePointerDown.js";
+function w({
+  panelId: l,
+  rootRef: a,
+  menus: t,
+  placement: c
+}) {
+  const n = k(!1), f = D(A);
+  let i;
+  const o = s(() => t.toggledId.value === l.value), v = s(() => o.value || f.settled.value);
+  function d(e) {
+    if ((e == null ? void 0 : e.currentTarget) instanceof HTMLAnchorElement && e.currentTarget.hasAttribute("href")) {
+      if (t.pointerType.value !== "touch") return;
+      e.preventDefault();
+    }
+    n.value = !0, t.toggle(l.value);
+  }
+  function u() {
+    o.value && t.close();
+  }
+  H(a, o, u);
+  function p(e) {
+    n.value = !0, e.pointerType !== "touch" && (o.value || t.close(), f.enter());
+  }
+  function h() {
+    f.leave();
+  }
+  function E() {
+    n.value = !0;
+  }
+  function T(e) {
+    var r;
+    e.relatedTarget instanceof Element && ((r = a.value) != null && r.contains(e.relatedTarget) || u());
+  }
+  function y(e) {
+    var r, g;
+    e.key !== "Escape" || !o.value || (u(), (g = (r = a.value) == null ? void 0 : r.querySelector("[aria-expanded]")) == null || g.focus());
+  }
+  const M = s(() => ({
+    "aria-expanded": v.value,
+    "aria-controls": l.value,
+    onClick: d
+  }));
+  return m(() => {
+    const e = a.value;
+    e && (i = c == null ? void 0 : c.registerGroup(e), e.matches(":hover") && (n.value = !0));
+  }), x(() => {
+    i == null || i(), u();
+  }), {
+    approached: n,
+    toggled: o,
+    expanded: v,
+    trigger: M,
+    toggle: d,
+    close: u,
+    onPointerEnter: p,
+    onPointerLeave: h,
+    onFocusIn: E,
+    onFocusOut: T,
+    onKeydown: y
+  };
+}
+export {
+  w as useHeaderMenuGroup
+};

package/dist/utils/useHeaderMenuPlacement.d.ts

@@ -0,0 +1,6 @@
+import { InjectionKey, Ref } from 'vue';
+export interface HeaderMenuPlacement {
+    registerGroup(el: HTMLElement): () => void;
+}
+export declare const HEADER_MENU_PLACEMENT: InjectionKey<HeaderMenuPlacement>;
+export declare function useHeaderMenuPlacement(rootRef: Ref<HTMLElement | null>): HeaderMenuPlacement;

package/dist/utils/useHeaderMenuPlacement.js

@@ -0,0 +1,30 @@
+import { onMounted as g, onBeforeUnmount as d } from "vue";
+const p = Symbol("headerMenuPlacement");
+function y(c) {
+  const o = /* @__PURE__ */ new Set();
+  let e = null;
+  function a() {
+    const t = c.value, i = t == null ? void 0 : t.offsetParent;
+    if (!t || !(i instanceof HTMLElement)) return;
+    const n = i.getBoundingClientRect(), u = Array.from(o, (r) => [r, r.getBoundingClientRect()]);
+    t.style.setProperty("--nav-height", `${n.height}px`), u.forEach(([r, s]) => {
+      const f = s.left + s.width / 2;
+      r.style.setProperty("--trigger-gap-left", `${f - n.left}px`), r.style.setProperty("--trigger-gap-right", `${n.right - f}px`), r.style.setProperty("--trigger-width", `${s.width}px`);
+    });
+  }
+  function l(t) {
+    return o.add(t), e == null || e.observe(t), () => {
+      o.delete(t), e == null || e.unobserve(t);
+    };
+  }
+  return g(() => {
+    const t = c.value, i = t == null ? void 0 : t.offsetParent;
+    typeof ResizeObserver < "u" && t && i instanceof HTMLElement && (e = new ResizeObserver(a), e.observe(i), Array.from(t.children).forEach((n) => e == null ? void 0 : e.observe(n)), o.forEach((n) => e == null ? void 0 : e.observe(n))), a();
+  }), d(() => {
+    e == null || e.disconnect(), e = null;
+  }), { registerGroup: l };
+}
+export {
+  p as HEADER_MENU_PLACEMENT,
+  y as useHeaderMenuPlacement
+};

package/dist/utils/useHeaderMenuState.d.ts

@@ -0,0 +1,10 @@
+import { InjectionKey, Ref } from 'vue';
+import { PointerType } from '../../../../../../../../../src/utils/usePointerType';
+export interface HeaderMenuState {
+    toggledId: Readonly<Ref<string | null>>;
+    pointerType: Readonly<Ref<PointerType | null>>;
+    toggle(id: string): void;
+    close(): void;
+}
+export declare const HEADER_MENU_STATE: InjectionKey<HeaderMenuState>;
+export declare function useHeaderMenuState(pointerType: Readonly<Ref<PointerType | null>>): HeaderMenuState;

package/dist/utils/useHeaderMenuState.js

@@ -0,0 +1,21 @@
+import { ref as u, readonly as r } from "vue";
+const c = Symbol("headerMenuState");
+function d(n) {
+  const e = u(null);
+  function t(l) {
+    e.value = e.value === l ? null : l;
+  }
+  function o() {
+    e.value = null;
+  }
+  return {
+    toggledId: r(e),
+    pointerType: n,
+    toggle: t,
+    close: o
+  };
+}
+export {
+  c as HEADER_MENU_STATE,
+  d as useHeaderMenuState
+};

package/dist/utils/useHoverIntent.d.ts

@@ -0,0 +1,5 @@
+export declare function useHoverIntent(delayMs: number): {
+    settled: import('vue').Ref<boolean, boolean>;
+    enter: () => void;
+    leave: () => void;
+};

package/dist/utils/useHoverIntent.js

@@ -0,0 +1,17 @@
+import { ref as u, onBeforeUnmount as l } from "vue";
+function a(o) {
+  const t = u(!1);
+  let e;
+  function n() {
+    clearTimeout(e), e = setTimeout(() => {
+      t.value = !0;
+    }, o);
+  }
+  function r() {
+    clearTimeout(e), t.value = !1;
+  }
+  return l(() => clearTimeout(e)), { settled: t, enter: n, leave: r };
+}
+export {
+  a as useHoverIntent
+};

package/dist/utils/useOutsidePointerDown.d.ts

@@ -0,0 +1,2 @@
+import { Ref } from 'vue';
+export declare function useOutsidePointerDown(rootRef: Ref<HTMLElement | null>, active: Ref<boolean>, onOutside: () => void): void;

package/dist/utils/useOutsidePointerDown.js

@@ -0,0 +1,19 @@
+import { watch as f, onMounted as a, onBeforeUnmount as c } from "vue";
+function s(u, o, d) {
+  function e(n) {
+    var i;
+    n.target instanceof Node && ((i = u.value) != null && i.contains(n.target)) || d();
+  }
+  function t() {
+    document.addEventListener("pointerdown", e);
+  }
+  function r() {
+    document.removeEventListener("pointerdown", e);
+  }
+  f(o, (n) => n ? t() : r()), a(() => {
+    o.value && t();
+  }), c(r);
+}
+export {
+  s as useOutsidePointerDown
+};

package/dist/utils/usePointerType.d.ts

@@ -0,0 +1,5 @@
+import { Ref } from 'vue';
+export type PointerType = 'mouse' | 'pen' | 'touch';
+export declare function usePointerType(rootRef: Ref<HTMLElement | null>): {
+    pointerType: Ref<PointerType, PointerType>;
+};

package/dist/utils/usePointerType.js

@@ -0,0 +1,19 @@
+import { ref as i, onMounted as a, onBeforeUnmount as p } from "vue";
+function s(n) {
+  const o = i(null);
+  function r(t) {
+    const e = t.pointerType;
+    e && e !== o.value && (o.value = e);
+  }
+  return a(() => {
+    var e, u;
+    const t = typeof window.matchMedia == "function" && window.matchMedia("(hover: none)").matches;
+    o.value = t ? "touch" : "mouse", (e = n.value) == null || e.addEventListener("pointerdown", r, { capture: !0, passive: !0 }), (u = n.value) == null || u.addEventListener("pointermove", r, { capture: !0, passive: !0 });
+  }), p(() => {
+    var t, e;
+    (t = n.value) == null || t.removeEventListener("pointerdown", r, { capture: !0 }), (e = n.value) == null || e.removeEventListener("pointermove", r, { capture: !0 });
+  }), { pointerType: o };
+}
+export {
+  s as usePointerType
+};

package/dist/vue/KvCheckoutReceipt.css

@@ -1 +1 @@
-.section[data-v-1d721061]{border-bottom-width:.0625rem;border-top-width:0px;--tw-border-opacity: 1;border-color:rgba(var(--border-tertiary),var(--tw-border-opacity, 1));padding:.5rem;display:block;overflow:hidden}@media print{.section[data-v-1d721061]{page-break-inside:avoid}}.section--lender-info[data-v-1d721061]{padding-top:0}.section--print[data-v-1d721061]{border-bottom:0}.checkout-receipt__headline[data-v-1d721061]{text-align:center;margin-bottom:1.5rem}.checkout-receipt__item-list[data-v-1d721061]{list-style:none;margin:0;width:100%}.loan__name[data-v-1d721061]{margin-bottom:.5rem}.loan__name--inline[data-v-1d721061]{display:inline-block}.loan__amount[data-v-1d721061]{text-align:right}.total[data-v-1d721061]{display:flex;align-items:baseline}.total__header[data-v-1d721061],.total__amount[data-v-1d721061]{text-align:right;flex:1}.total__amount[data-v-1d721061]{flex-grow:.33}.payments[data-v-1d721061]{border-bottom:none}.payments__type[data-v-1d721061]{display:flex;text-align:right}.payments__type-title[data-v-1d721061],.payments__type-amount[data-v-1d721061]{flex:1}.print[data-v-1d721061]{margin:0 auto}
+.section[data-v-e06307e1]{border-bottom-width:.0625rem;border-top-width:0px;--tw-border-opacity: 1;border-color:rgba(var(--border-tertiary),var(--tw-border-opacity, 1));padding:.5rem;display:block;overflow:hidden}@media print{.section[data-v-e06307e1]{page-break-inside:avoid}}.section--lender-info[data-v-e06307e1]{padding-top:0}.section--print[data-v-e06307e1]{border-bottom:0}.checkout-receipt__headline[data-v-e06307e1]{text-align:center;margin-bottom:1.5rem}.checkout-receipt__item-list[data-v-e06307e1]{list-style:none;margin:0;width:100%}.loan__name[data-v-e06307e1]{margin-bottom:.5rem}.loan__name--inline[data-v-e06307e1]{display:inline-block}.loan__amount[data-v-e06307e1]{text-align:right}.total[data-v-e06307e1]{display:flex;align-items:baseline}.total__header[data-v-e06307e1],.total__amount[data-v-e06307e1]{text-align:right;flex:1}.total__amount[data-v-e06307e1]{flex-grow:.33}.payments[data-v-e06307e1]{border-bottom:none}.payments__type[data-v-e06307e1]{display:flex;text-align:right}.payments__type-title[data-v-e06307e1],.payments__type-amount[data-v-e06307e1]{flex:1}.print[data-v-e06307e1]{margin:0 auto}

package/dist/vue/KvCheckoutReceipt.js

@@ -1,5 +1,5 @@
-import C from "./KvCheckoutReceipt2.js";
-import { resolveComponent as _, resolveDirective as f, openBlock as s, createElementBlock as o, createElementVNode as e, toDisplayString as i, createCommentVNode as d, Fragment as c, renderList as k, createTextVNode as l, createVNode as p, withCtx as v, withDirectives as b } from "vue";
+import f from "./KvCheckoutReceipt2.js";
+import { resolveComponent as _, resolveDirective as h, openBlock as s, createElementBlock as o, createElementVNode as e, toDisplayString as i, createCommentVNode as d, Fragment as c, renderList as k, createTextVNode as l, createVNode as p, withCtx as v, withDirectives as b } from "vue";
 import "./KvCheckoutReceipt.css";
 import x from "../_virtual/_plugin-vue_export-helper.js";
 const g = { class: "checkout-receipt" }, T = { class: "checkout-receipt__wrapper tw-bg-primary tw-p-4 tw-rounded-xs tw-border tw-border-tertiary" }, j = {
@@ -33,24 +33,24 @@ const g = { class: "checkout-receipt" }, T = { class: "checkout-receipt__wrapper
 }, B = {
   "data-testid": "kcard",
   class: "loan kcard"
-}, L = {
+}, U = {
   class: "loan__details data-hj-suppress",
   "data-testid": "kcard-details"
-}, U = {
+}, q = {
   key: 0,
   "data-testid": "kcard-details",
   class: "loan__details data-hj-suppress"
-}, q = {
+}, z = {
   class: "loan__details data-hj-suppress",
   "data-testid": "kcard-details"
-}, z = {
+}, L = {
   class: "loan__amount tw-text-title",
   "data-testid": "kcard-amount"
-}, G = {
+}, S = {
   key: 0,
   "data-testid": "kcard-portfolio",
   class: "section tw-text-center print:!tw-hidden"
-}, S = { href: "/portfolio/kiva-cards" }, W = { class: "checkout-receipt__item-list" }, Y = { class: "section" }, H = {
+}, W = { href: "/portfolio/kiva-cards" }, Y = { class: "checkout-receipt__item-list" }, G = { class: "section" }, H = {
   class: "loan",
   "data-testid": "donation"
 }, J = {
@@ -103,7 +103,7 @@ const g = { class: "checkout-receipt" }, T = { class: "checkout-receipt__wrapper
   "data-testid": "amount-charged-payment-amount"
 }, ct = { class: "section section--print print:!tw-hidden" };
 function pt(_t, t, n, m, mt, r) {
-  const u = _("kv-material-icon"), y = _("kv-tooltip"), w = _("kv-button"), h = f("kv-track-event");
+  const u = _("kv-material-icon"), y = _("kv-tooltip"), w = _("kv-button"), C = h("kv-track-event");
   return s(), o("div", g, [
     t[25] || (t[25] = e("h2", { class: "checkout-receipt__headline" }, " Order Confirmation ", -1)),
     e("div", T, [
@@ -167,8 +167,7 @@ function pt(_t, t, n, m, mt, r) {
                   }, null, 8, ["id", "icon"]),
                   p(y, {
                     "data-testid": "kcard-tool-tip-text",
-                    controller: `print-card-${a.id}`,
-                    theme: "ecoGreenLight"
+                    controller: `print-card-${a.id}`
                   }, {
                     default: v(() => t[2] || (t[2] = [
                       l(" You can print this card now. We'll also send it to you in an email so you can print it later. ")
@@ -193,7 +192,7 @@ function pt(_t, t, n, m, mt, r) {
                   class: "loan__name tw-text-title",
                   "data-testid": "kcard-type-postal"
                 }, " Postal delivery Kiva Card ", -1)),
-                e("div", L, [
+                e("div", U, [
                   l(" For: " + i(a.kivaCardObject.mailingInfo.firstName) + " " + i(a.kivaCardObject.mailingInfo.lastName), 1),
                   t[6] || (t[6] = e("br", null, null, -1)),
                   l(" " + i(a.kivaCardObject.mailingInfo.address), 1),
@@ -209,13 +208,13 @@ function pt(_t, t, n, m, mt, r) {
                   class: "loan__name tw-text-title",
                   "data-testid": "kcard-type-lender"
                 }, " Kiva Card ", -1)),
-                a.kivaCardObject.recipient.name ? (s(), o("div", U, " For: " + i(a.kivaCardObject.recipient.name), 1)) : d("", !0)
+                a.kivaCardObject.recipient.name ? (s(), o("div", q, " For: " + i(a.kivaCardObject.recipient.name), 1)) : d("", !0)
               ], 64)) : a.kivaCardObject.deliveryType === "email" ? (s(), o(c, { key: 3 }, [
                 t[11] || (t[11] = e("h3", {
                   class: "loan__name tw-text-title",
                   "data-testid": "kcard-type-email"
                 }, " Email delivery Kiva Card ", -1)),
-                e("div", q, [
+                e("div", z, [
                   t[10] || (t[10] = l(" For: ")),
                   a.kivaCardObject.recipient.name ? (s(), o(c, { key: 0 }, [
                     l(i(a.kivaCardObject.recipient.name) + " – ", 1)
@@ -223,23 +222,23 @@ function pt(_t, t, n, m, mt, r) {
                   l(" " + i(a.kivaCardObject.recipient.email), 1)
                 ])
               ], 64)) : d("", !0),
-              e("div", z, " $" + i(a.price), 1)
+              e("div", L, " $" + i(a.price), 1)
             ])
           ]))), 128)),
-          r.kivaCards.length > 0 ? (s(), o("li", G, [
+          r.kivaCards.length > 0 ? (s(), o("li", S, [
             t[13] || (t[13] = l(" For more details about all your Kiva Card purchases, please visit your ")),
-            b((s(), o("a", S, t[12] || (t[12] = [
+            b((s(), o("a", W, t[12] || (t[12] = [
               l(" Kiva portfolio ")
             ]))), [
-              [h, ["Thanks", "click", "kiva-card-portfolio"]]
+              [C, ["Thanks", "click", "kiva-card-portfolio"]]
             ]),
             t[14] || (t[14] = l(". "))
           ])) : d("", !0)
         ])
       ]),
       e("section", null, [
-        e("ul", W, [
-          e("li", Y, [
+        e("ul", Y, [
+          e("li", G, [
             e("div", H, [
               t[15] || (t[15] = e("h3", { class: "loan__name tw-text-title" }, " Donation to Kiva ", -1)),
               n.receipt.totals.donationTotal > 0 ? (s(), o("a", {
@@ -307,7 +306,7 @@ function pt(_t, t, n, m, mt, r) {
     ])
   ]);
 }
-const wt = /* @__PURE__ */ x(C, [["render", pt], ["__scopeId", "data-v-1d721061"]]);
+const wt = /* @__PURE__ */ x(f, [["render", pt], ["__scopeId", "data-v-e06307e1"]]);
 export {
   wt as default
 };

package/dist/vue/KvLoanTag.js

@@ -1,6 +1,6 @@
 import h from "./KvLoanTag2.js";
 import { KV_LOAN_TAG_FRAGMENT as L } from "./KvLoanTag2.js";
-import { resolveComponent as d, openBlock as e, createElementBlock as r, normalizeStyle as _, normalizeClass as w, Fragment as l, createTextVNode as m, toDisplayString as a, createElementVNode as o, createVNode as p, withCtx as y, renderList as f, createBlock as k, createCommentVNode as s } from "vue";
+import { resolveComponent as d, openBlock as e, createElementBlock as r, normalizeStyle as _, normalizeClass as w, Fragment as o, createTextVNode as m, toDisplayString as a, createElementVNode as l, createVNode as p, withCtx as y, renderList as k, createBlock as f, createCommentVNode as s } from "vue";
 import x from "../_virtual/_plugin-vue_export-helper.js";
 const v = ["id"], M = { class: "tw-whitespace-nowrap tw-pb-0.5" };
 function N(b, i, c, C, T, t) {
@@ -10,30 +10,29 @@ function N(b, i, c, C, T, t) {
     class: w(["tw-text-small tw-font-medium tw-pt-0.5", { "tw-line-clamp-1": !t.isMultipleMatch }]),
     style: _({ color: t.tagColor })
   }, [
-    t.isMultipleMatch ? (e(), r(l, { key: 0 }, [
+    t.isMultipleMatch ? (e(), r(o, { key: 0 }, [
       m(a(t.totalMatchRatio) + "x match by ", 1),
-      o("span", {
+      l("span", {
         id: `matching-orgs-${c.loan.id}`,
         class: "tw-underline tw-decoration-dotted tw-cursor-pointer"
       }, a(t.multiMatchingOrgs.length) + " organizations", 9, v),
       p(u, {
         controller: `matching-orgs-${c.loan.id}`,
-        "max-width": "320px",
-        theme: "default"
+        "max-width": "320px"
       }, {
         default: y(() => [
-          o("p", M, " Your contribution is matched by " + a(t.multiMatchingOrgs.length) + " partners ", 1),
-          i[0] || (i[0] = o("hr", { class: "tw-border-caution-highlight tw-py-0.5" }, null, -1)),
-          (e(!0), r(l, null, f(t.multiMatchingOrgs, (n) => (e(), r("p", {
+          l("p", M, " Your contribution is matched by " + a(t.multiMatchingOrgs.length) + " partners ", 1),
+          i[0] || (i[0] = l("hr", { class: "tw-border-caution-highlight tw-py-0.5" }, null, -1)),
+          (e(!0), r(o, null, k(t.multiMatchingOrgs, (n) => (e(), r("p", {
             key: n.managedAccountId,
             class: "tw-m-0"
           }, a(n.ratio) + ":1 matching by " + a(t.orgDisplayName(n)), 1))), 128))
         ]),
         _: 1
       }, 8, ["controller"])
-    ], 64)) : (e(), r(l, { key: 1 }, [
+    ], 64)) : (e(), r(o, { key: 1 }, [
       m(a(t.tagText) + " ", 1),
-      t.variation === "ending-soon" ? (e(), k(g, {
+      t.variation === "ending-soon" ? (e(), f(g, {
         key: 0,
         deadline: t.deadline
       }, null, 8, ["deadline"])) : s("", !0)

package/dist/vue/KvPopper.vue.d.ts

@@ -23,17 +23,28 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: ObjectConstructor;
         default: () => void;
     };
+    persistent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {
     popper: any;
     popperPromise: any;
     styles: {};
     show: boolean;
     timeout: any;
+    suppressOpen: boolean;
 }, {
     reference(): any;
+    hitTargets(): any[];
 }, {
     open(): void;
     close(): void;
+    closeOnLeave(): void;
+    hide(): void;
+    outsideHandler(e: any): void;
+    dismiss(): void;
+    keyupHandler(e: any): void;
     toggle(): void;
     update(): void;
     initPopper(): any;
@@ -70,11 +81,16 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: ObjectConstructor;
         default: () => void;
     };
+    persistent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{}>, {
     openDelay: number;
     closeDelay: number;
     transitionType: string;
     popperPlacement: string;
     popperModifiers: Record<string, any>;
+    persistent: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/vue/KvPopper2.js

@@ -1,4 +1,4 @@
-import { offBodyTouchstart as r, onBodyTouchstart as o, isTargetElement as i } from "../utils/touchEvents.js";
+import { offBodyTouchstart as i, onBodyTouchstart as o, isTargetElement as r } from "../utils/touchEvents.js";
 const h = {
   name: "KvPopper",
   props: {
@@ -14,7 +14,13 @@ const h = {
     transitionType: { type: String, default: "" },
     popperPlacement: { type: String, default: "bottom-start" },
     popperModifiers: { type: Object, default: () => {
-    } }
+    } },
+    /**
+     * Stay open once shown, rather than closing when the pointer or focus leaves the
+     * controller. Escape and an outside click still close it. Use for poppers holding
+     * something interactive, which the user has to be able to reach and act on.
+     */
+    persistent: { type: Boolean, default: !1 }
   },
   data() {
     return {
@@ -22,12 +28,18 @@ const h = {
       popperPromise: null,
       styles: {},
       show: !1,
-      timeout: null
+      timeout: null,
+      suppressOpen: !1
     };
   },
   computed: {
     reference() {
       return typeof this.controller == "string" ? document.getElementById(this.controller) : this.controller;
+    },
+    // reference resolves by id on every read, so it is null once the controller leaves
+    // the DOM while this popper is still mounted.
+    hitTargets() {
+      return [this.reference, this.$el].filter(Boolean);
     }
   },
   watch: {
@@ -46,7 +58,7 @@ const h = {
   },
   methods: {
     open() {
-      this.initPopper().then(() => {
+      this.suppressOpen || this.initPopper().then(() => {
         this.setTimeout(() => {
           this.show = !0, this.popper.scheduleUpdate(), this.attachBodyEvents();
         }, this.openDelay);
@@ -57,6 +69,27 @@ const h = {
         this.show = !1, this.removeBodyEvents();
       }, this.closeDelay);
     },
+    // Persistent content has to stay reachable, so leaving the controller must not close
+    // it — by pointer or by tabbing in. Checked here so the prop can change after mount.
+    closeOnLeave() {
+      this.persistent || this.close();
+    },
+    // Close now, skipping closeDelay, for dismissals the user asked for directly.
+    hide() {
+      window.clearTimeout(this.timeout), this.show = !1, this.removeBodyEvents();
+    },
+    outsideHandler(e) {
+      r(e, this.hitTargets) || this.hide();
+    },
+    // Ends the current viewing. Returns focus only if it was inside, so it is not
+    // stranded on content that just went away.
+    dismiss() {
+      const e = this.$el.contains(document.activeElement);
+      this.hide(), e && this.reference && (this.suppressOpen = !0, this.reference.focus(), this.suppressOpen = !1);
+    },
+    keyupHandler(e) {
+      e.key === "Escape" && (e.stopPropagation(), this.dismiss());
+    },
     toggle() {
       this.show ? this.close() : this.open();
     },
@@ -80,22 +113,22 @@ const h = {
       }), this.popperPromise);
     },
     bodyTouchHandler(e) {
-      i(e, [this.reference, this.$el]) || (this.show = !1, this.removeBodyEvents());
+      r(e, this.hitTargets) || (this.show = !1, this.removeBodyEvents());
     },
     referenceTapHandler(e) {
       e.preventDefault(), this.toggle();
     },
     attachEvents() {
-      this.reference.addEventListener("mouseover", this.open), this.reference.addEventListener("focus", this.open), this.reference.addEventListener("mouseout", this.close), this.reference.addEventListener("blur", this.close), this.$el.addEventListener("mouseover", this.open), this.$el.addEventListener("mouseout", this.close), this.reference.addEventListener("touchstart", this.referenceTapHandler);
+      this.reference.addEventListener("mouseover", this.open), this.reference.addEventListener("focus", this.open), this.reference.addEventListener("touchstart", this.referenceTapHandler), this.reference.addEventListener("mouseout", this.closeOnLeave), this.reference.addEventListener("blur", this.closeOnLeave), this.$el.addEventListener("mouseover", this.open), this.$el.addEventListener("mouseout", this.closeOnLeave);
     },
     attachBodyEvents() {
-      o(this.bodyTouchHandler);
+      o(this.bodyTouchHandler), document.addEventListener("click", this.outsideHandler), document.addEventListener("keyup", this.keyupHandler, !0);
     },
     removeEvents() {
-      this.removeBodyEvents(), this.reference.removeEventListener("touchstart", this.referenceTapHandler), this.reference.removeEventListener("mouseover", this.open), this.reference.removeEventListener("mouseout", this.close), this.$el.removeEventListener("mouseover", this.open), this.$el.removeEventListener("mouseout", this.close);
+      this.removeBodyEvents(), this.reference.removeEventListener("touchstart", this.referenceTapHandler), this.reference.removeEventListener("mouseover", this.open), this.reference.removeEventListener("focus", this.open), this.reference.removeEventListener("mouseout", this.closeOnLeave), this.reference.removeEventListener("blur", this.closeOnLeave), this.$el.removeEventListener("mouseover", this.open), this.$el.removeEventListener("mouseout", this.closeOnLeave);
     },
     removeBodyEvents() {
-      r(this.bodyTouchHandler);
+      i(this.bodyTouchHandler), document.removeEventListener("click", this.outsideHandler), document.removeEventListener("keyup", this.keyupHandler, !0);
     },
     setAttributes(e) {
       Object.keys(e).forEach((t) => {

package/dist/vue/KvTooltip.css

@@ -1 +1 @@
-.tooltip-pane[data-v-d5f691f8],.tooltip-arrow[data-v-d5f691f8]{box-shadow:0 4px 12px #00000014}.tooltip-arrow[data-v-d5f691f8]{margin:.5rem;border-color:rgba(var(--bg-primary),var(--tw-bg-opacity, 1))}.tooltip-pane[x-placement^=top][data-v-d5f691f8]{margin-bottom:.5rem}.tooltip-pane[x-placement^=top] .tooltip-arrow[data-v-d5f691f8]{border-width:8px 8px 0 8px;border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent;left:calc(50% - 8px);bottom:-.5rem;margin-top:0;margin-bottom:0}.tooltip-pane[x-placement^=bottom][data-v-d5f691f8]{margin-top:.5rem}.tooltip-pane[x-placement^=bottom] .tooltip-arrow[data-v-d5f691f8]{border-width:0 8px 8px 8px;border-left-color:transparent;border-right-color:transparent;border-top-color:transparent;left:calc(50% - 8px);top:-.5rem;margin-bottom:0;margin-top:0}.tooltip-pane[x-placement^=right][data-v-d5f691f8]{margin-left:.5rem}.tooltip-pane[x-placement^=right] .tooltip-arrow[data-v-d5f691f8]{border-width:8px 8px 8px 0;border-left-color:transparent;border-top-color:transparent;border-bottom-color:transparent;top:calc(50% - 8px);left:-.5rem;margin-left:0;margin-right:0}.tooltip-pane[x-placement^=left][data-v-d5f691f8]{margin-right:.5rem}.tooltip-pane[x-placement^=left] .tooltip-arrow[data-v-d5f691f8]{border-width:8px 0 8px 8px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;top:calc(50% - 8px);right:-.5rem;margin-left:0;margin-right:0}
+.tooltip-pane[data-v-eed4fc1b],.tooltip-arrow[data-v-eed4fc1b]{box-shadow:0 4px 12px #00000014}.tooltip-arrow[data-v-eed4fc1b]{margin:.5rem}.tooltip-pane--light .tooltip-arrow[data-v-eed4fc1b]{border-color:#fff}.tooltip-pane--dark .tooltip-arrow[data-v-eed4fc1b]{border-color:#212121}.tooltip-pane--dark[data-v-eed4fc1b] .tw-text-link{color:#78c79f}.tooltip-pane--dark[data-v-eed4fc1b] .tw-text-link:hover,.tooltip-pane--dark[data-v-eed4fc1b] .tw-text-link:focus{color:#fff}.tooltip-pane[x-placement^=top][data-v-eed4fc1b]{margin-bottom:.5rem}.tooltip-pane[x-placement^=top] .tooltip-arrow[data-v-eed4fc1b]{border-width:8px 8px 0 8px;border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent;left:calc(50% - 8px);bottom:-.5rem;margin-top:0;margin-bottom:0}.tooltip-pane[x-placement^=bottom][data-v-eed4fc1b]{margin-top:.5rem}.tooltip-pane[x-placement^=bottom] .tooltip-arrow[data-v-eed4fc1b]{border-width:0 8px 8px 8px;border-left-color:transparent;border-right-color:transparent;border-top-color:transparent;left:calc(50% - 8px);top:-.5rem;margin-bottom:0;margin-top:0}.tooltip-pane[x-placement^=right][data-v-eed4fc1b]{margin-left:.5rem}.tooltip-pane[x-placement^=right] .tooltip-arrow[data-v-eed4fc1b]{border-width:8px 8px 8px 0;border-left-color:transparent;border-top-color:transparent;border-bottom-color:transparent;top:calc(50% - 8px);left:-.5rem;margin-left:0;margin-right:0}.tooltip-pane[x-placement^=left][data-v-eed4fc1b]{margin-right:.5rem}.tooltip-pane[x-placement^=left] .tooltip-arrow[data-v-eed4fc1b]{border-width:8px 0 8px 8px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;top:calc(50% - 8px);right:-.5rem;margin-left:0;margin-right:0}