@dialpad/dialtone-vue 2.109.1 → 2.110.0

package/dist/{stack-klSxDym-.js → stack-spMDaIoR.js}

@@ -1,12 +1,12 @@
-import { n as a, g as _, a as $, u as k, b as L, B as x, c as D, i as R, d as N, e as F } from "./tooltip-PDBwUvGD.js";
-import { t as V, w as p, I as H, L as B, x as q, y as I } from "./emoji-k30EufQP.js";
+import { n as a, g as _, a as k, u as L, b as x, B as D, c as R, i as N, d as F, e as V, f as g } from "./tooltip-UOWkfPpb.js";
+import { t as H, w as p, I as B, L as q, x as M, y as I } from "./emoji-5ohx0_fO.js";
 import u from "vue";
 const r = {
   BUSY: "busy",
   AWAY: "away",
   OFFLINE: "offline",
   ACTIVE: "active"
-}, M = [
+}, j = [
   r.BUSY,
   r.AWAY,
   r.OFFLINE,
@@ -22,7 +22,7 @@ const r = {
     presence: {
       type: String,
       default: r.ACTIVE,
-      validator: (t) => M.includes(t)
+      validator: (t) => j.includes(t)
     },
     /**
      * Since Presence is a visual element, we need SRs to read out any state changes
@@ -35,7 +35,7 @@ const r = {
     }
   }
 };
-var j = function() {
+var K = function() {
   var e = this, s = e._self._c;
   return s("div", { staticClass: "d-presence", attrs: { "data-qa": "dt-presence", role: "status", "aria-live": e.$attrs.ariaLive || "off" } }, [e.srText ? s("span", { staticClass: "sr-only", attrs: { "data-qa": "dt-presence-sr-text" } }, [e._v(e._s(e.srText) + " ")]) : e._e(), s("div", { staticClass: "d-presence__inner", class: {
     "d-presence__inner--active": e.presence === "active",
@@ -43,42 +43,42 @@ var j = function() {
     "d-presence__inner--busy": e.presence === "busy",
     "d-presence__inner--offline": e.presence === "offline"
   } })]);
-}, K = [], W = /* @__PURE__ */ a(
+}, W = [], G = /* @__PURE__ */ a(
   z,
-  j,
   K,
+  W,
   !1,
   null,
   null,
   null,
   null
 );
-const G = W.exports, f = {
+const U = G.exports, f = {
   xs: "d-avatar--xs",
   sm: "d-avatar--sm",
   md: "d-avatar--md",
   lg: "d-avatar--lg",
   xl: "d-avatar--xl"
-}, U = {
+}, Y = {
   default: "",
   icon: "d-avatar__icon",
   initials: "d-avatar__initials"
-}, Y = {
+}, Z = {
   md: "d-avatar__presence--md",
   lg: "d-avatar__presence--lg"
-}, g = {
+}, S = {
   NONE: "",
   BUSY: "busy",
   AWAY: "away",
   OFFLINE: "offline",
   ACTIVE: "active"
-}, Z = {
+}, X = {
   xs: "100",
   sm: "200",
   md: "300",
   lg: "500",
   xl: "600"
-}, X = [
+}, J = [
   "100",
   "200",
   "300",
@@ -97,18 +97,18 @@ const G = W.exports, f = {
   "1600",
   "1700",
   "1800"
-], S = (t) => t > 1;
-function J() {
-  return [void 0, ...V];
+], E = (t) => t > 1;
+function Q() {
+  return [void 0, ...H];
 }
-const Q = (t) => {
+const ee = (t) => {
   if (typeof t != "string" || !t.trim())
     return "";
   const e = t.trim().split(/\s+/g);
   return e.length === 1 ? e.join("").substring(0, 2) : e.filter((s, n) => n === 0 || n === e.length - 1).map((s) => s.slice(0, 1).toUpperCase()).join("");
-}, ee = J(), te = {
+}, te = Q(), se = {
   name: "DtAvatar",
-  components: { DtPresence: G, DtIcon: p },
+  components: { DtPresence: U, DtIcon: p },
   inheritAttrs: !1,
   props: {
     /**
@@ -174,8 +174,8 @@ const Q = (t) => {
      */
     presence: {
       type: String,
-      default: g.NONE,
-      validator: (t) => Object.values(g).includes(t)
+      default: S.NONE,
+      validator: (t) => Object.values(S).includes(t)
     },
     /**
      * A set of props to be passed into the presence component.
@@ -192,7 +192,7 @@ const Q = (t) => {
     group: {
       type: Number,
       default: void 0,
-      validator: (t) => S(t)
+      validator: (t) => E(t)
     },
     /**
      * The icon that overlays the avatar
@@ -236,7 +236,7 @@ const Q = (t) => {
     iconName: {
       type: String,
       default: void 0,
-      validator: (t) => ee.includes(t)
+      validator: (t) => te.includes(t)
     },
     /**
      * Icon size to be displayed on the avatar
@@ -245,7 +245,7 @@ const Q = (t) => {
     iconSize: {
       type: String,
       default: "",
-      validator: (t) => !t || Object.keys(H).includes(t)
+      validator: (t) => !t || Object.keys(B).includes(t)
     },
     /**
      * Full name used to extract initials and set alt attribute.
@@ -275,9 +275,9 @@ const Q = (t) => {
   data() {
     return {
       AVATAR_SIZE_MODIFIERS: f,
-      AVATAR_KIND_MODIFIERS: U,
-      AVATAR_PRESENCE_SIZE_MODIFIERS: Y,
-      AVATAR_ICON_SIZES: Z,
+      AVATAR_KIND_MODIFIERS: Y,
+      AVATAR_PRESENCE_SIZE_MODIFIERS: Z,
+      AVATAR_ICON_SIZES: X,
       imageLoadedSuccessfully: null,
       formattedInitials: "",
       initializing: !1
@@ -306,7 +306,7 @@ const Q = (t) => {
       ];
     },
     showGroup() {
-      return S(this.group);
+      return E(this.group);
     },
     formattedGroup() {
       return this.group > 99 ? "99+" : this.group;
@@ -355,11 +355,11 @@ const Q = (t) => {
       t && (t.addEventListener("load", () => this._loadedImageEventHandler(t), { once: !0 }), t.addEventListener("error", () => this._erroredImageEventHandler(t), { once: !0 }));
     },
     formatInitials() {
-      const t = Q(this.fullName);
+      const t = ee(this.fullName);
       this.validatedSize === "xs" ? this.formattedInitials = "" : this.validatedSize === "sm" ? this.formattedInitials = t[0] : this.formattedInitials = t;
     },
     getColor() {
-      return this.color ?? $(X, this.seed);
+      return this.color ?? k(J, this.seed);
     },
     _loadedImageEventHandler(t) {
       this.imageLoadedSuccessfully = !0, t.classList.remove("d-d-none");
@@ -376,7 +376,7 @@ const Q = (t) => {
     }
   }
 };
-var se = function() {
+var ne = function() {
   var e = this, s = e._self._c;
   return s(e.clickable ? "button" : "div", { tag: "component", class: e.avatarClasses, attrs: { id: e.id, "data-qa": "dt-avatar", "aria-label": e.buttonAriaLabel }, on: { click: e.handleClick } }, [s("div", { ref: "canvas", class: [
     e.canvasClass,
@@ -386,17 +386,17 @@ var se = function() {
     "d-avatar__presence",
     e.AVATAR_PRESENCE_SIZE_MODIFIERS[e.size]
   ], attrs: { presence: e.presence, "data-qa": "dt-presence" } }, "dt-presence", e.presenceProps, !1)) : e._e()], 1);
-}, ne = [], ae = /* @__PURE__ */ a(
-  te,
+}, ae = [], ie = /* @__PURE__ */ a(
   se,
   ne,
+  ae,
   !1,
   null,
   null,
   null,
   null
 );
-const at = ae.exports, oe = {
+const it = ie.exports, oe = {
   name: "DtLink",
   props: {
     /**
@@ -407,7 +407,7 @@ const at = ae.exports, oe = {
       type: String,
       default: "",
       validator(t) {
-        return B.includes(t);
+        return q.includes(t);
       }
     }
   },
@@ -436,27 +436,27 @@ const at = ae.exports, oe = {
   ],
   data() {
     return {
-      LINK_KIND_MODIFIERS: q
+      LINK_KIND_MODIFIERS: M
     };
   }
 };
-var ie = function() {
+var re = function() {
   var e = this, s = e._self._c;
   return s("a", e._g({ class: [
     "d-link",
     e.LINK_KIND_MODIFIERS[e.kind]
   ], attrs: { "data-qa": "dt-link", href: "href" in e.$attrs ? e.$attrs.href : "javascript:void(0)" } }, e.$listeners), [e._t("default")], 2);
-}, re = [], le = /* @__PURE__ */ a(
+}, le = [], de = /* @__PURE__ */ a(
   oe,
-  ie,
   re,
+  le,
   !1,
   null,
   null,
   null,
   null
 );
-const ot = le.exports, de = {
+const ot = de.exports, ce = {
   props: {
     /**
      * If true, a hidden close button is included for screen readers
@@ -495,7 +495,7 @@ const ot = le.exports, de = {
            a visually hidden close button and you must set the visuallyHiddenCloseLabel prop.`);
     }
   }
-}, ce = {
+}, ue = {
   name: "SrOnlyCloseButton",
   components: {
     DtIcon: p,
@@ -518,22 +518,22 @@ const ot = le.exports, de = {
     }
   }
 };
-var ue = function() {
+var pe = function() {
   var e = this, s = e._self._c;
   return s("dt-button", { staticClass: "d-vi-visible-sr", attrs: { id: "sr-only-close-button", "data-qa": "dt-sr-only-close-button", "aria-label": e.visuallyHiddenCloseLabel }, on: { click: e.close, keydown: function(n) {
     return !n.type.indexOf("key") && e._k(n.keyCode, "space", 32, n.key, [" ", "Spacebar"]) ? null : (n.preventDefault(), n.stopPropagation(), e.close.apply(null, arguments));
   } } }, [s("dt-icon", { attrs: { name: "close" } })], 1);
-}, pe = [], fe = /* @__PURE__ */ a(
-  ce,
+}, fe = [], he = /* @__PURE__ */ a(
   ue,
   pe,
+  fe,
   !1,
   null,
   null,
   null,
   null
 );
-const he = fe.exports, T = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])', me = `${T}:not([tabindex="-1"])`, _e = "button,[href],input,select,textarea,details,[tabindex]", ye = {
+const me = he.exports, A = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])', _e = `${A}:not([tabindex="-1"])`, ve = "button,[href],input,select,textarea,details,[tabindex]", ye = {
   methods: {
     /**
      * get the first focusable element in your component, includes tabindex="-1".
@@ -587,9 +587,9 @@ const he = fe.exports, T = ':not(:disabled):not([aria-disabled="true"]):not([rol
      * @param {bool} includeNegativeTabIndex - will include tabindex="-1" in the list of focusable elements.
      */
     _getFocusableElements(t = this.$el, e = !1) {
-      return t ? [...t.querySelectorAll(_e)].filter((n) => {
-        const o = window.getComputedStyle(n);
-        return o.getPropertyValue("display") !== "none" && o.getPropertyValue("visibility") !== "hidden" && n.matches(e ? T : me);
+      return t ? [...t.querySelectorAll(ve)].filter((n) => {
+        const i = window.getComputedStyle(n);
+        return i.getPropertyValue("display") !== "none" && i.getPropertyValue("visibility") !== "hidden" && n.matches(e ? A : _e);
       }) : [];
     },
     /**
@@ -606,8 +606,8 @@ const he = fe.exports, T = ':not(:disabled):not([aria-disabled="true"]):not([rol
         t.preventDefault();
         return;
       }
-      const o = this._getFirstFocusElement(n), v = n[n.length - 1];
-      t.shiftKey ? document.activeElement === o && (v.focus(), t.preventDefault()) : document.activeElement === v && (o.focus(), t.preventDefault());
+      const i = this._getFirstFocusElement(n), y = n[n.length - 1];
+      t.shiftKey ? document.activeElement === i && (y.focus(), t.preventDefault()) : document.activeElement === y && (i.focus(), t.preventDefault());
     }
   }
 }, h = {
@@ -617,7 +617,7 @@ const he = fe.exports, T = ':not(:disabled):not([aria-disabled="true"]):not([rol
   ARROW_KEYS: "arrow-keys",
   TAB: "tab",
   NONE: "none"
-}, ve = {
+}, ge = {
   name: "DtItemLayout",
   props: {
     /**
@@ -629,23 +629,23 @@ const he = fe.exports, T = ':not(:disabled):not([aria-disabled="true"]):not([rol
     }
   }
 };
-var ge = function() {
+var Se = function() {
   var e = this, s = e._self._c;
   return s(e.as, { tag: "component", staticClass: "dt-item-layout" }, [e.$slots.left ? s("section", { staticClass: "dt-item-layout--left", attrs: { "data-qa": "dt-item-layout-left-wrapper" } }, [e._t("left")], 2) : e._e(), s("section", { staticClass: "dt-item-layout--content", attrs: { "data-qa": "dt-item-layout-content-wrapper" } }, [e.$slots.default ? s("div", { staticClass: "dt-item-layout--title", attrs: { "data-qa": "dt-item-layout-title-wrapper" } }, [e._t("default")], 2) : e._e(), e.$slots.subtitle ? s("div", { class: ["dt-item-layout--subtitle", { "dt-item-layout--subtitle--with-title": e.$slots.default }], attrs: { "data-qa": "dt-item-layout-subtitle-wrapper" } }, [e._t("subtitle")], 2) : e._e(), e.$slots.bottom ? s("div", { staticClass: "dt-item-layout--bottom", attrs: { "data-qa": "dt-item-layout-bottom-wrapper" } }, [e._t("bottom")], 2) : e._e()]), e.$slots.right ? s("section", { staticClass: "dt-item-layout--right", attrs: { "data-qa": "dt-item-layout-right-wrapper" } }, [e._t("right")], 2) : e._e(), e.$slots.selected ? s("section", { staticClass: "dt-item-layout--selected", attrs: { "data-qa": "dt-item-layout-selected-wrapper" } }, [e._t("selected")], 2) : e._e()]);
-}, Se = [], Ee = /* @__PURE__ */ a(
-  ve,
+}, Ee = [], be = /* @__PURE__ */ a(
   ge,
   Se,
+  Ee,
   !1,
   null,
   "411cb81e",
   null,
   null
 );
-const E = Ee.exports, be = {
+const b = be.exports, Ce = {
   name: "DtListItem",
   components: {
-    DtItemLayout: E,
+    DtItemLayout: b,
     DtIcon: p
   },
   /**
@@ -661,7 +661,7 @@ const E = Ee.exports, be = {
     id: {
       type: String,
       default() {
-        return k.getUniqueString();
+        return L.getUniqueString();
       }
     },
     /**
@@ -747,7 +747,7 @@ const E = Ee.exports, be = {
     listItemType() {
       switch (this.type) {
         case h.DEFAULT:
-          return E;
+          return b;
         default:
           return null;
       }
@@ -795,54 +795,54 @@ const E = Ee.exports, be = {
     }
   }
 };
-var Ce = function() {
+var Oe = function() {
   var e = this, s = e._self._c;
   return s(e.elementType, e._g({ tag: "component", class: ["dt-list-item", {
     "dt-list-item--focusable": e.isFocusable,
     "dt-list-item--highlighted": e.isHighlighted,
     "dt-list-item--static": !e.isHoverable
-  }], attrs: { id: e.id, tabindex: e.isFocusable ? 0 : -1, role: e.role, "aria-selected": e.isHighlighted } }, e.listItemListeners), [e.listItemType ? s(e.listItemType, { tag: "component", scopedSlots: e._u([e._l(e.$slots, function(n, o) {
-    return { key: o, fn: function() {
-      return [e._t(o)];
+  }], attrs: { id: e.id, tabindex: e.isFocusable ? 0 : -1, role: e.role, "aria-selected": e.isHighlighted } }, e.listItemListeners), [e.listItemType ? s(e.listItemType, { tag: "component", scopedSlots: e._u([e._l(e.$slots, function(n, i) {
+    return { key: i, fn: function() {
+      return [e._t(i)];
     }, proxy: !0 };
   }), e.selected ? { key: "selected", fn: function() {
     return [s("dt-icon", { staticClass: "dt-list-item--selected-icon", attrs: { name: "check", size: "400" } })];
   }, proxy: !0 } : null], null, !0) }) : e._t("default")], 2);
-}, Oe = [], Ie = /* @__PURE__ */ a(
-  be,
+}, Te = [], Ie = /* @__PURE__ */ a(
   Ce,
   Oe,
+  Te,
   !1,
   null,
   null,
   null,
   null
 );
-const it = Ie.exports, i = {
+const rt = Ie.exports, o = {
   default: "column",
   column: "column",
   row: "row",
   "row-reverse": "row-reverse",
   "column-reverse": "column-reverse"
-}, A = ["sm", "md", "lg", "xl"], y = ["0", "100", "200", "300", "400", "500", "600"], b = {
+}, w = ["sm", "md", "lg", "xl"], v = ["0", "100", "200", "300", "400", "500", "600"], C = {
   none: void 0,
   small: "d-p4",
   medium: "d-p8",
   large: "d-p16"
-}, Te = {
+}, Ae = {
   none: void 0,
   small: "d-pl4",
   medium: "d-pl8",
   large: "d-pl16"
-}, Ae = ["dialog", "menu", "listbox", "tree", "grid"], we = ["", "anchor"], Pe = ["none", "dialog", "first"], $e = ["parent", "body"], ke = [
-  ...L
-], rt = [
+}, we = ["dialog", "menu", "listbox", "tree", "grid"], $e = ["", "anchor"], Pe = ["none", "dialog", "first"], ke = ["parent", "body"], Le = [
   ...x
+], lt = [
+  ...D
 ];
-let Le = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", xe = (t = 21) => {
+let xe = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", De = (t = 21) => {
   let e = "", s = t;
   for (; s--; )
-    e += Le[Math.random() * 64 | 0];
+    e += xe[Math.random() * 64 | 0];
   return e;
 };
 function c(t) {
@@ -853,11 +853,11 @@ function c(t) {
     return e && typeof Symbol == "function" && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
   }, c(t);
 }
-var w = {
-  selector: "vue-portal-target-".concat(xe())
-}, De = function(e) {
-  return w.selector = e;
-}, m = typeof window < "u" && (typeof document > "u" ? "undefined" : c(document)) !== void 0, Re = u.extend({
+var $ = {
+  selector: "vue-portal-target-".concat(De())
+}, Re = function(e) {
+  return $.selector = e;
+}, m = typeof window < "u" && (typeof document > "u" ? "undefined" : c(document)) !== void 0, Ne = u.extend({
   // as an abstract component, it doesn't appear in
   // the $parent chain of components.
   // which means the next parent of any component rendered inside of this oen
@@ -891,7 +891,7 @@ var w = {
     selector: {
       type: String,
       default: function() {
-        return "#".concat(w.selector);
+        return "#".concat($.selector);
       }
     },
     tag: {
@@ -941,7 +941,7 @@ var w = {
     mount: function() {
       if (m) {
         var e = this.getTargetEl(), s = document.createElement("DIV");
-        this.prepend && e.firstChild ? e.insertBefore(s, e.firstChild) : e.appendChild(s), this.container = new Re({
+        this.prepend && e.firstChild ? e.insertBefore(s, e.firstChild) : e.appendChild(s), this.container = new Ne({
           el: s,
           parent: this,
           propsData: {
@@ -956,12 +956,12 @@ var w = {
     }
   }
 });
-function Ne(t) {
+function Fe(t) {
   var e = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-  t.component(e.name || "portal", P), e.defaultSelector && De(e.defaultSelector);
+  t.component(e.name || "portal", P), e.defaultSelector && Re(e.defaultSelector);
 }
-typeof window < "u" && window.Vue && window.Vue === u && u.use(Ne);
-const Fe = {
+typeof window < "u" && window.Vue && window.Vue === u && u.use(Fe);
+const Ve = {
   name: "PopoverHeaderFooter",
   components: {
     DtButton: I,
@@ -1017,7 +1017,7 @@ const Fe = {
     }
   }
 };
-var Ve = function() {
+var He = function() {
   var e = this, s = e._self._c;
   return s("div", { class: {
     "d-popover__header": e.type === "header",
@@ -1033,28 +1033,28 @@ var Ve = function() {
   } }, scopedSlots: e._u([{ key: "icon", fn: function() {
     return [s("dt-icon", { attrs: { name: "close", size: "300" } })];
   }, proxy: !0 }], null, !1, 2538694920) }, "dt-button", e.closeButtonProps, !1)) : e._e()], 1);
-}, He = [], Be = /* @__PURE__ */ a(
-  Fe,
+}, Be = [], qe = /* @__PURE__ */ a(
   Ve,
   He,
+  Be,
   !1,
   null,
   null,
   null,
   null
 );
-const qe = Be.exports, Me = {
+const Me = qe.exports, je = {
   name: "DtPopover",
   /********************
    * CHILD COMPONENTS *
    ********************/
   components: {
-    SrOnlyCloseButton: he,
-    DtLazyShow: D,
-    PopoverHeaderFooter: qe,
+    SrOnlyCloseButton: me,
+    DtLazyShow: R,
+    PopoverHeaderFooter: Me,
     Portal: P
   },
-  mixins: [ye, de],
+  mixins: [ye, ce],
   props: {
     /**
      * Controls whether the popover is shown. Leaving this null will have the popover trigger on click by default.
@@ -1097,7 +1097,7 @@ const qe = Be.exports, Me = {
     role: {
       type: String,
       default: "dialog",
-      validator: (t) => Ae.includes(t)
+      validator: (t) => we.includes(t)
     },
     /**
      * ID of the element that serves as the label for the popover content.
@@ -1133,7 +1133,7 @@ const qe = Be.exports, Me = {
     padding: {
       type: String,
       default: "large",
-      validator: (t) => Object.keys(b).some((e) => e === t)
+      validator: (t) => Object.keys(C).some((e) => e === t)
     },
     /**
      * Additional class name for the content wrapper element.
@@ -1150,7 +1150,7 @@ const qe = Be.exports, Me = {
     contentWidth: {
       type: String,
       default: "",
-      validator: (t) => we.includes(t)
+      validator: (t) => $e.includes(t)
     },
     /**
      * Tabindex value for the content. Passing null, no tabindex attribute will be set.
@@ -1277,7 +1277,7 @@ const qe = Be.exports, Me = {
     sticky: {
       type: [Boolean, String],
       default: !1,
-      validator: (t) => ke.includes(t)
+      validator: (t) => Le.includes(t)
     },
     /**
      * Determines maximum height for the popover before overflow.
@@ -1354,7 +1354,26 @@ const qe = Be.exports, Me = {
     appendTo: {
       type: [HTMLElement, String],
       default: "body",
-      validator: (t) => $e.includes(t) || t instanceof HTMLElement
+      validator: (t) => ke.includes(t) || t instanceof HTMLElement
+    },
+    /**
+     * Set this prop to true and popover component will support hovercard behaviour
+     * It will open on mouseenter and close on mouseleave with timer delay of 300ms
+     */
+    hovercard: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The timer is used only when the hovercard prop is true.
+     * It defines the delays when opening several hovercards.
+     * It must have the keys: enter, leave and current.
+     * If null, the default delay of 300ms will be used.
+     */
+    timer: {
+      type: [Object, null],
+      default: null,
+      validator: (t) => t === null || t.enter && t.leave && Object.keys(t).includes("current")
     }
   },
   emits: [
@@ -1375,13 +1394,15 @@ const qe = Be.exports, Me = {
   ],
   data() {
     return {
-      POPOVER_PADDING_CLASSES: b,
-      POPOVER_HEADER_FOOTER_PADDING_CLASSES: Te,
+      POPOVER_PADDING_CLASSES: C,
+      POPOVER_HEADER_FOOTER_PADDING_CLASSES: Ae,
       intersectionObserver: null,
       isOutsideViewport: !1,
       isOpen: !1,
       anchorEl: null,
-      popoverContentEl: null
+      popoverContentEl: null,
+      inTimer: null,
+      outTimer: null
     };
   },
   computed: {
@@ -1404,6 +1425,10 @@ const qe = Be.exports, Me = {
     },
     labelledBy() {
       return this.ariaLabelledby || !this.ariaLabel && _("DtPopover__anchor");
+    },
+    currentHovercard() {
+      var t;
+      return (t = this.timer) == null ? void 0 : t.current;
     }
   },
   watch: {
@@ -1458,6 +1483,9 @@ const qe = Be.exports, Me = {
     },
     isOpen(t, e) {
       t ? (this.initTippyInstance(), this.tip.show()) : !t && e !== t && (this.removeEventListeners(), this.tip.hide());
+    },
+    currentHovercard() {
+      this.hovercard && this.timer && (this.currentHovercard === this.id ? this.isOpen = !0 : this.isOpen = !1);
     }
   },
   mounted() {
@@ -1477,11 +1505,11 @@ const qe = Be.exports, Me = {
       const e = (n = t == null ? void 0 : t[0]) == null ? void 0 : n.target;
       if (!e)
         return;
-      const s = R(e);
+      const s = N(e);
       this.isOutsideViewport = s.bottom || s.top;
     },
     popperOptions() {
-      return N({
+      return F({
         fallbackPlacements: this.fallbackPlacements,
         tether: this.tether,
         hasHideModifierEnabled: !0
@@ -1498,7 +1526,7 @@ const qe = Be.exports, Me = {
     },
     defaultToggleOpen(t) {
       var e, s;
-      this.openOnContext || (this.open ?? ((e = this.anchorEl) != null && e.contains(t.target) && !((s = this.anchorEl) != null && s.disabled) && this.toggleOpen()));
+      this.hovercard || this.openOnContext || (this.open ?? ((e = this.anchorEl) != null && e.contains(t.target) && !((s = this.anchorEl) != null && s.disabled) && this.toggleOpen()));
     },
     async onContext(t) {
       this.openOnContext && (t.preventDefault(), this.isOpen = !0, await this.$nextTick(), this.tip.setProps({
@@ -1592,7 +1620,7 @@ const qe = Be.exports, Me = {
     },
     initTippyInstance() {
       var t, e;
-      this.tip = F(this.anchorEl, {
+      this.tip = V(this.anchorEl, {
         popperOptions: this.popperOptions(),
         contentElement: this.popoverContentEl,
         placement: this.placement,
@@ -1608,14 +1636,42 @@ const qe = Be.exports, Me = {
         onClickOutside: this.onClickOutside,
         onShow: this.onShow
       });
+    },
+    //  ============================================================================
+    //  $ HOVERCARD
+    //  ----------------------------------------------------------------------------
+    setInTimer() {
+      this.inTimer = setTimeout(() => {
+        this.isOpen = !0;
+      }, g);
+    },
+    setOutTimer() {
+      this.outTimer = setTimeout(() => {
+        this.isOpen = !1;
+      }, g);
+    },
+    onEnterAnchor() {
+      this.hovercard && (this.timer ? this.timer.enter(this.id) : (clearTimeout(this.outTimer), this.setInTimer()));
+    },
+    onLeaveAnchor() {
+      this.hovercard && (this.timer ? this.timer.leave() : (clearTimeout(this.inTimer), this.setOutTimer()));
+    },
+    onEnterContent() {
+      this.hovercard && (this.timer ? this.timer.enter(this.id) : clearTimeout(this.outTimer));
+    },
+    onLeaveContent() {
+      this.hovercard && (this.timer ? this.timer.leave() : this.setOutTimer());
     }
+    //  ============================================================================
+    //  $ HOVERCARD
+    //  ----------------------------------------------------------------------------
   }
 };
 var ze = function() {
   var e = this, s = e._self._c;
   return s("div", [e.modal && e.isOpen ? s("portal", [s("div", { staticClass: "d-modal--transparent", attrs: { "aria-hidden": e.modal && e.isOpen ? "false" : "true" }, on: { click: function(n) {
     n.preventDefault(), n.stopPropagation();
-  } } })]) : e._e(), s(e.elementType, e._g({ ref: "popover", tag: "component", class: ["d-popover", { "d-popover__anchor--opened": e.isOpen }], attrs: { "data-qa": "dt-popover-container" } }, e.$listeners), [s("div", { ref: "anchor", attrs: { id: !e.ariaLabelledby && e.labelledBy, "data-qa": "dt-popover-anchor", tabindex: e.openOnContext ? 0 : void 0 }, on: { "!click": function(n) {
+  } } })]) : e._e(), s(e.elementType, e._g({ ref: "popover", tag: "component", class: ["d-popover", { "d-popover__anchor--opened": e.isOpen }], attrs: { "data-qa": "dt-popover-container" } }, e.$listeners), [s("div", { ref: "anchor", attrs: { id: !e.ariaLabelledby && e.labelledBy, "data-qa": e.$attrs["data-qa"] ? `${e.$attrs["data-qa"]}-anchor` : "dt-popover-anchor", tabindex: e.openOnContext ? 0 : void 0 }, on: { "!click": function(n) {
     return e.defaultToggleOpen.apply(null, arguments);
   }, contextmenu: e.onContext, keydown: [function(n) {
     return !n.type.indexOf("key") && e._k(n.keyCode, "up", 38, n.key, ["Up", "ArrowUp"]) ? null : (n.preventDefault(), e.onArrowKeyPress.apply(null, arguments));
@@ -1623,72 +1679,72 @@ var ze = function() {
     return !n.type.indexOf("key") && e._k(n.keyCode, "down", 40, n.key, ["Down", "ArrowDown"]) ? null : (n.preventDefault(), e.onArrowKeyPress.apply(null, arguments));
   }], "!keydown": function(n) {
     return !n.type.indexOf("key") && e._k(n.keyCode, "escape", void 0, n.key, void 0) ? null : e.closePopover.apply(null, arguments);
-  } } }, [e._t("anchor", null, { attrs: {
+  }, mouseenter: e.onEnterAnchor, mouseleave: e.onLeaveAnchor } }, [e._t("anchor", null, { attrs: {
     "aria-expanded": e.isOpen.toString(),
     "aria-controls": e.id,
     "aria-haspopup": e.role
   } })], 2), s("dt-lazy-show", e._g({ ref: "content", class: ["d-popover__dialog", { "d-popover__dialog--modal": e.modal }, e.dialogClass], style: {
     "max-height": e.calculatedMaxHeight,
     "max-width": e.maxWidth
-  }, attrs: { id: e.id, role: e.role, "data-qa": "dt-popover", "aria-hidden": `${!e.isOpen}`, "aria-labelledby": e.labelledBy, "aria-label": e.ariaLabel, "aria-modal": `${!e.modal}`, transition: e.transition, show: e.isOpen, tabindex: e.contentTabindex, appear: "" } }, e.popoverListeners), [e.$slots.headerContent || e.showCloseButton ? s("popover-header-footer", { ref: "popover__header", class: e.POPOVER_HEADER_FOOTER_PADDING_CLASSES[e.padding], attrs: { "content-class": e.headerClass, type: "header", "show-close-button": e.showCloseButton, "close-button-props": e.closeButtonProps }, on: { close: e.closePopover }, scopedSlots: e._u([{ key: "content", fn: function() {
+  }, attrs: { id: e.id, role: e.role, "data-qa": e.$attrs["data-qa"] ? `${e.$attrs["data-qa"]}__dialog` : "dt-popover", "aria-hidden": `${!e.isOpen}`, "aria-labelledby": e.labelledBy, "aria-label": e.ariaLabel, "aria-modal": `${!e.modal}`, transition: e.transition, show: e.isOpen, tabindex: e.contentTabindex, appear: "" }, on: { mouseenter: e.onEnterContent, mouseleave: e.onLeaveContent } }, e.popoverListeners), [e.$slots.headerContent || e.showCloseButton ? s("popover-header-footer", { ref: "popover__header", class: e.POPOVER_HEADER_FOOTER_PADDING_CLASSES[e.padding], attrs: { "content-class": e.headerClass, type: "header", "show-close-button": e.showCloseButton, "close-button-props": e.closeButtonProps }, on: { close: e.closePopover }, scopedSlots: e._u([{ key: "content", fn: function() {
     return [e._t("headerContent", null, { close: e.closePopover })];
   }, proxy: !0 }], null, !0) }) : e._e(), s("div", { ref: "popover__content", class: [
     "d-popover__content",
     e.POPOVER_PADDING_CLASSES[e.padding],
     e.contentClass
-  ], attrs: { "data-qa": "dt-popover-content" } }, [e._t("content", null, { close: e.closePopover })], 2), e.$slots.footerContent ? s("popover-header-footer", { ref: "popover__footer", class: e.POPOVER_HEADER_FOOTER_PADDING_CLASSES[e.padding], attrs: { type: "footer", "content-class": e.footerClass }, scopedSlots: e._u([{ key: "content", fn: function() {
+  ], attrs: { "data-qa": e.$attrs["data-qa"] ? `${e.$attrs["data-qa"]}-content` : "dt-popover-content" } }, [e._t("content", null, { close: e.closePopover })], 2), e.$slots.footerContent ? s("popover-header-footer", { ref: "popover__footer", class: e.POPOVER_HEADER_FOOTER_PADDING_CLASSES[e.padding], attrs: { type: "footer", "content-class": e.footerClass }, scopedSlots: e._u([{ key: "content", fn: function() {
     return [e._t("footerContent", null, { close: e.closePopover })];
   }, proxy: !0 }], null, !0) }) : e._e(), e.showVisuallyHiddenClose ? s("sr-only-close-button", { attrs: { "visually-hidden-close-label": e.visuallyHiddenCloseLabel }, on: { close: e.closePopover } }) : e._e()], 1)], 1)], 1);
-}, je = [], Ke = /* @__PURE__ */ a(
-  Me,
-  ze,
+}, Ke = [], We = /* @__PURE__ */ a(
   je,
+  ze,
+  Ke,
   !1,
   null,
   null,
   null,
   null
 );
-const lt = Ke.exports;
-function C(t) {
-  return t === i.default;
-}
+const dt = We.exports;
 function O(t) {
+  return t === o.default;
+}
+function T(t) {
   if (l(t) === "string")
-    return C(t) ? null : i[t];
+    return O(t) ? null : o[t];
   if (l(t) === "object") {
     const { default: e } = t;
-    return C(e) ? null : i[e];
+    return O(e) ? null : o[e];
   } else
     return null;
 }
 function l(t) {
   return typeof t;
 }
-function We(t) {
-  return O(t) ? `d-stack--${i[O(t)]}` : null;
-}
 function Ge(t) {
-  return l(t) === "object" ? [
-    ...A.map((e) => t[e] ? `d-stack--${e}--${t[e]}` : null)
-  ] : null;
+  return T(t) ? `d-stack--${o[T(t)]}` : null;
 }
 function Ue(t) {
-  return y.includes(t) ? `d-stack--gap-${t}` : null;
+  return l(t) === "object" ? [
+    ...w.map((e) => t[e] ? `d-stack--${e}--${t[e]}` : null)
+  ] : null;
 }
 function Ye(t) {
+  return v.includes(t) ? `d-stack--gap-${t}` : null;
+}
+function Ze(t) {
   if (l(t) === "string")
-    return Object.keys(i).includes(t);
+    return Object.keys(o).includes(t);
   if (l(t) === "object") {
     const { default: e } = t;
-    return Object.keys(i).includes(e);
+    return Object.keys(o).includes(e);
   } else
     return null;
 }
-function Ze(t) {
-  return y.includes(t);
+function Xe(t) {
+  return v.includes(t);
 }
-const Xe = {
+const Je = {
   name: "DtStack",
   props: {
     /**
@@ -1702,7 +1758,7 @@ const Xe = {
     direction: {
       type: [String, Object],
       default: "column",
-      validator: (t) => Ye(t)
+      validator: (t) => Ze(t)
     },
     /**
      * Set this prop to render stack as a specific HTML element.
@@ -1718,29 +1774,29 @@ const Xe = {
     gap: {
       type: String,
       default: "0",
-      validator: (t) => Ze(t)
+      validator: (t) => Xe(t)
     }
   },
   data() {
     return {
-      DT_STACK_DIRECTION: i,
-      DT_STACK_GAP: y,
-      DT_STACK_RESPONSIVE_BREAKPOINTS: A
+      DT_STACK_DIRECTION: o,
+      DT_STACK_GAP: v,
+      DT_STACK_RESPONSIVE_BREAKPOINTS: w
     };
   },
   computed: {
     stackGap() {
-      return Ue(this.gap);
+      return Ye(this.gap);
     },
     defaultDirection() {
-      return We(this.direction);
+      return Ge(this.direction);
     },
     stackResponsive() {
-      return Ge(this.direction);
+      return Ue(this.direction);
     }
   }
 };
-var Je = function() {
+var Qe = function() {
   var e = this, s = e._self._c;
   return s(e.as, { tag: "component", class: [
     "d-stack",
@@ -1748,49 +1804,49 @@ var Je = function() {
     e.stackResponsive,
     e.stackGap
   ] }, [e._t("default")], 2);
-}, Qe = [], et = /* @__PURE__ */ a(
-  Xe,
+}, et = [], tt = /* @__PURE__ */ a(
   Je,
   Qe,
+  et,
   !1,
   null,
   null,
   null,
   null
 );
-const dt = et.exports;
+const ct = tt.exports;
 export {
   f as A,
-  A as B,
-  it as D,
+  w as B,
+  rt as D,
   d as L,
   ye as M,
-  $e as P,
-  he as S,
-  dt as a,
+  ke as P,
+  me as S,
+  ct as a,
   ot as b,
-  at as c,
-  lt as d,
-  de as e,
-  y as f,
-  P as g,
-  we as h,
-  E as i,
-  U as j,
+  it as c,
+  dt as d,
+  ce as e,
+  v as f,
+  C as g,
+  P as h,
+  $e as i,
+  b as j,
   Y as k,
-  g as l,
-  Z as m,
+  Z as l,
+  S as m,
   X as n,
-  S as o,
-  h as p,
-  b as q,
-  Te as r,
-  Ae as s,
+  J as o,
+  E as p,
+  h as q,
+  Ae as r,
+  we as s,
   Pe as t,
-  ke as u,
-  rt as v,
-  G as w,
+  Le as u,
+  lt as v,
+  U as w,
   r as x,
-  M as y,
-  i as z
+  j as y,
+  o as z
 };