@kiva/kv-components 9.1.1 → 9.2.0

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}

package/dist/vue/KvTooltip.js

@@ -1,52 +1,52 @@
 import f from "./KvTooltip2.js";
-import { resolveComponent as l, openBlock as p, createBlock as v, withCtx as n, createVNode as c, createElementVNode as i, normalizeStyle as w, createElementBlock as _, renderSlot as d, createCommentVNode as u } from "vue";
+import { resolveComponent as c, openBlock as l, createBlock as v, normalizeClass as w, withCtx as u, createElementVNode as i, normalizeStyle as n, createElementBlock as p, renderSlot as s, createCommentVNode as a } from "vue";
 import "./KvTooltip.css";
 import k from "../_virtual/_plugin-vue_export-helper.js";
 const y = {
   key: 0,
-  class: "tw-text-primary tw-font-medium tw-mb-1.5"
-}, h = { class: "tw-text-primary" };
-function b(o, e, r, t, x, V) {
-  const s = l("kv-popper"), a = l("kv-theme-provider");
-  return p(), v(a, {
-    theme: t.themeStyle,
-    class: "kv-tailwind"
+  class: "tw-font-medium tw-mb-1.5"
+};
+function b(e, t, r, o, C, h) {
+  const d = c("kv-popper");
+  return l(), v(d, {
+    ref: "popperRef",
+    controller: r.controller,
+    "popper-modifiers": o.popperModifiers,
+    "popper-placement": r.placement,
+    persistent: !!e.$slots.action,
+    "transition-type": "kvfastfade",
+    class: w(["tooltip-pane tw-absolute tw-rounded tw-z-popover", o.paneClass]),
+    onHide: t[0] || (t[0] = (m) => o.handleKvPopperVisibility(!1)),
+    onShow: t[1] || (t[1] = (m) => o.handleKvPopperVisibility(!0))
   }, {
-    default: n(() => [
-      c(s, {
-        ref: "popperRef",
-        controller: r.controller,
-        "popper-modifiers": t.popperModifiers,
-        "popper-placement": r.placement,
-        "transition-type": "kvfastfade",
-        class: "tooltip-pane tw-absolute tw-bg-primary tw-rounded tw-z-popover",
-        onHide: e[0] || (e[0] = (m) => t.handleKvPopperVisibility(!1)),
-        onShow: e[1] || (e[1] = (m) => t.handleKvPopperVisibility(!0))
-      }, {
-        default: n(() => [
-          i("div", {
-            class: "tw-p-2.5",
-            style: w({ maxWidth: r.maxWidth })
-          }, [
-            o.$slots.title ? (p(), _("div", y, [
-              d(o.$slots, "title", {}, void 0, !0)
-            ])) : u("", !0),
-            i("div", h, [
-              d(o.$slots, "default", {}, void 0, !0)
-            ])
-          ], 4),
-          e[2] || (e[2] = i("div", {
-            class: "tooltip-arrow tw-absolute tw-w-0 tw-h-0 tw-border-solid",
-            "x-arrow": ""
-          }, null, -1))
+    default: u(() => [
+      i("div", {
+        class: "tw-p-2.5",
+        style: n({ maxWidth: r.maxWidth })
+      }, [
+        e.$slots.title ? (l(), p("div", y, [
+          s(e.$slots, "title", {}, void 0, !0)
+        ])) : a("", !0),
+        i("div", null, [
+          s(e.$slots, "default", {}, void 0, !0)
         ]),
-        _: 3
-      }, 8, ["controller", "popper-modifiers", "popper-placement"])
+        e.$slots.action ? (l(), p("div", {
+          key: 1,
+          class: "tooltip-action tw-mt-1.5",
+          style: n(o.defaultTheme)
+        }, [
+          s(e.$slots, "action", { close: o.dismiss }, void 0, !0)
+        ], 4)) : a("", !0)
+      ], 4),
+      t[2] || (t[2] = i("div", {
+        class: "tooltip-arrow tw-absolute tw-w-0 tw-h-0 tw-border-solid",
+        "x-arrow": ""
+      }, null, -1))
     ]),
     _: 3
-  }, 8, ["theme"]);
+  }, 8, ["controller", "popper-modifiers", "popper-placement", "persistent", "class"]);
 }
-const N = /* @__PURE__ */ k(f, [["render", b], ["__scopeId", "data-v-d5f691f8"]]);
+const K = /* @__PURE__ */ k(f, [["render", b], ["__scopeId", "data-v-eed4fc1b"]]);
 export {
-  N as default
+  K as default
 };

package/dist/vue/KvTooltip2.js

@@ -1,12 +1,16 @@
-import { toRefs as L, computed as i, ref as w, watch as b } from "vue";
-import { stoneLightTheme as l, marigoldLightTheme as p, greenDarkTheme as a, greenLightTheme as f, defaultTheme as m } from "@kiva/kv-tokens";
-import M from "./KvPopper.js";
-import S from "./KvThemeProvider.js";
-const K = {
+import { toRefs as y, computed as n, ref as b, watch as E } from "vue";
+import { defaultTheme as T } from "@kiva/kv-tokens";
+import S from "./KvPopper.js";
+const x = ["light", "dark"], p = {
+  default: "light",
+  ecoGreenLight: "light",
+  ecoGreenDark: "dark",
+  ecoLightMarigold: "light",
+  ecoStoneLight: "light"
+}, L = {
   name: "KvTooltip",
   components: {
-    KvPopper: M,
-    KvThemeProvider: S
+    KvPopper: S
   },
   props: {
     controller: {
@@ -32,63 +36,69 @@ const K = {
       type: Boolean,
       default: !1
     },
+    /**
+     * Fixed neutral color of the tooltip. Defaults to `light`.
+     * Use `dark` over light surfaces and `light` over dark surfaces.
+     */
+    variant: {
+      type: String,
+      default: void 0,
+      validator(e) {
+        return e === void 0 || x.indexOf(e) !== -1;
+      }
+    },
+    /**
+     * @deprecated Use `variant` instead. Themed tooltips are being removed:
+     * `ecoGreenDark` maps to `dark`, every other value maps to `light`.
+     */
     theme: {
       type: String,
-      default: "default",
+      default: void 0,
       validator(e) {
-        return [
-          "default",
-          "ecoGreenLight",
-          "ecoGreenDark",
-          "ecoLightMarigold",
-          "ecoStoneLight"
-        ].indexOf(e) !== -1;
+        return Object.keys(p).indexOf(e) !== -1;
       }
     }
   },
-  emits: ["tool-tip-visible"],
-  setup(e, { emit: u }) {
+  emits: ["tool-tip-visible", "dismiss"],
+  setup(e, { emit: l }) {
     const {
-      modifiers: r,
-      showTooltip: s,
-      theme: c
-    } = L(e), d = i(() => ({
-      ...r.value,
+      modifiers: s,
+      showTooltip: f,
+      theme: a,
+      variant: d
+    } = y(e), c = n(() => ({
+      ...s.value,
       preventOverflow: {
-        ...r.value.preventOverflow,
+        ...s.value.preventOverflow,
         padding: 10
       }
-    })), h = w(null), g = () => typeof e.controller == "string" ? document.getElementById(e.controller) : e.controller, v = (t) => {
-      u("tool-tip-visible", t);
-    }, o = (t = !0) => {
-      const n = g();
-      if (n) {
-        const T = t ? "mouseover" : "mouseout";
-        n.dispatchEvent(new MouseEvent(T, { bubbles: !0 }));
+    })), r = b(null), v = () => typeof e.controller == "string" ? document.getElementById(e.controller) : e.controller, m = (t) => {
+      l("tool-tip-visible", t);
+    }, g = (t = !0) => {
+      const o = v();
+      if (o) {
+        const i = t ? "mouseover" : "mouseout";
+        o.dispatchEvent(new MouseEvent(i, { bubbles: !0 }));
       }
-    }, y = i(() => ({
-      default: m,
-      ecoGreenLight: f,
-      ecoGreenDark: a,
-      ecoLightMarigold: p,
-      ecoStoneLight: l
-    })[c.value]);
-    return b(s, (t) => {
-      o(!!t);
+    }, h = () => {
+      var t;
+      (t = r.value) == null || t.dismiss(), l("dismiss");
+    }, u = n(() => d.value ? d.value : a.value ? p[a.value] : "light"), w = n(() => u.value === "dark" ? "tooltip-pane--dark tw-bg-gray-800 tw-text-white" : "tooltip-pane--light tw-bg-white tw-text-gray-800");
+    return E(f, (t) => {
+      var o, i;
+      t ? (o = r.value) == null || o.open() : (i = r.value) == null || i.dismiss();
     }), {
-      defaultTheme: m,
-      greenLightTheme: f,
-      greenDarkTheme: a,
-      marigoldLightTheme: p,
-      stoneLightTheme: l,
-      handleKvPopperVisibility: v,
-      popperModifiers: d,
-      popperRef: h,
-      themeStyle: y,
-      triggerHover: o
+      defaultTheme: T,
+      dismiss: h,
+      handleKvPopperVisibility: m,
+      paneClass: w,
+      popperModifiers: c,
+      popperRef: r,
+      resolvedVariant: u,
+      triggerHover: g
     };
   }
 };
 export {
-  K as default
+  L as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "9.1.1",
+  "version": "9.2.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -112,5 +112,5 @@
   "dependencies": {
     "fuse.js": "^7.1.0"
   },
-  "gitHead": "b8e2d2c7bb4a12f0151226fea982f696ab77856b"
+  "gitHead": "2404a1d7fe3ab1021c8080cafb05a7952b40a3c5"
 }