@dialpad/dialtone-vue 3.102.1 → 3.103.0

package/dist/{stack-J7X4gRRv.js → stack-5arAdMmw.js}

@@ -1,6 +1,6 @@
-import { _ as y, g as N, a as U, u as Y, b as $, B as Z, h as j, c as X, i as J, d as Q, e as ee, f as F } from "./tooltip-Cr_G7ib3.js";
-import { openBlock as o, createElementBlock as r, toDisplayString as T, createCommentVNode as d, createElementVNode as E, normalizeClass as u, resolveComponent as m, createBlock as h, resolveDynamicComponent as b, withCtx as f, mergeProps as w, renderSlot as c, withKeys as g, withModifiers as A, createVNode as P, toHandlers as K, createSlots as te, renderList as se, Teleport as ne } from "vue";
-import { A as ae, w as k, I as oe, L as ie, B as le, C as z } from "./emoji-qCvCxNzD.js";
+import { _ as y, g as N, a as G, u as U, b as Y, B as Z, h as j, c as X, i as J, d as Q, e as ee, f as F } from "./tooltip-Cr_G7ib3.js";
+import { openBlock as i, createElementBlock as r, toDisplayString as T, createCommentVNode as d, createElementVNode as E, normalizeClass as u, resolveComponent as m, createBlock as h, resolveDynamicComponent as b, withCtx as f, mergeProps as w, renderSlot as c, withKeys as g, withModifiers as A, createVNode as P, toHandlers as K, createSlots as te, renderList as se, Teleport as ne } from "vue";
+import { A as ae, w as k, I as ie, L as oe, B as le, C as z } from "./emoji-qCvCxNzD.js";
 const C = {
   BUSY: "busy",
   AWAY: "away",
@@ -39,14 +39,14 @@ const C = {
   "data-qa": "dt-presence-sr-text",
   class: "sr-only"
 };
-function he(e, t, s, i, a, n) {
-  return o(), r("div", {
+function he(e, t, s, o, a, n) {
+  return i(), r("div", {
     class: "d-presence",
     "data-qa": "dt-presence",
     role: "status",
     "aria-live": e.$attrs.ariaLive || "off"
   }, [
-    s.srText ? (o(), r("span", ue, T(s.srText), 1)) : d("", !0),
+    s.srText ? (i(), r("span", ue, T(s.srText), 1)) : d("", !0),
     E("div", {
       class: u(["d-presence__inner", {
         "d-presence__inner--active": s.presence === "active",
@@ -70,7 +70,7 @@ const fe = /* @__PURE__ */ y(de, [["render", he]]), L = {
 }, me = {
   md: "d-avatar__presence--md",
   lg: "d-avatar__presence--lg"
-}, V = {
+}, H = {
   NONE: "",
   BUSY: "busy",
   AWAY: "away",
@@ -101,7 +101,7 @@ const fe = /* @__PURE__ */ y(de, [["render", he]]), L = {
   "1600",
   "1700",
   "1800"
-], H = (e) => e > 1;
+], V = (e) => e > 1;
 function _e() {
   return [void 0, ...ae];
 }
@@ -109,7 +109,7 @@ const ge = (e) => {
   if (typeof e != "string" || !e.trim())
     return "";
   const t = e.trim().split(/\s+/g);
-  return t.length === 1 ? t.join("").substring(0, 2) : t.filter((s, i) => i === 0 || i === t.length - 1).map((s) => s.slice(0, 1).toUpperCase()).join("");
+  return t.length === 1 ? t.join("").substring(0, 2) : t.filter((s, o) => o === 0 || o === t.length - 1).map((s) => s.slice(0, 1).toUpperCase()).join("");
 }, Ee = _e(), be = {
   name: "DtAvatar",
   components: { DtPresence: fe, DtIcon: k },
@@ -178,8 +178,8 @@ const ge = (e) => {
      */
     presence: {
       type: String,
-      default: V.NONE,
-      validator: (e) => Object.values(V).includes(e)
+      default: H.NONE,
+      validator: (e) => Object.values(H).includes(e)
     },
     /**
      * A set of props to be passed into the presence component.
@@ -196,7 +196,7 @@ const ge = (e) => {
     group: {
       type: Number,
       default: void 0,
-      validator: (e) => H(e)
+      validator: (e) => V(e)
     },
     /**
      * The icon that overlays the avatar
@@ -249,7 +249,7 @@ const ge = (e) => {
     iconSize: {
       type: String,
       default: "",
-      validator: (e) => !e || Object.keys(oe).includes(e)
+      validator: (e) => !e || Object.keys(ie).includes(e)
     },
     /**
      * Full name used to extract initials and set alt attribute.
@@ -310,7 +310,7 @@ const ge = (e) => {
       ];
     },
     showGroup() {
-      return H(this.group);
+      return V(this.group);
     },
     formattedGroup() {
       return this.group > 99 ? "99+" : this.group;
@@ -351,7 +351,7 @@ const ge = (e) => {
       this.validatedSize === "xs" ? this.formattedInitials = "" : this.validatedSize === "sm" ? this.formattedInitials = t[0] : this.formattedInitials = t;
     },
     getColor() {
-      return this.color ?? U(ve, this.seed);
+      return this.color ?? G(ve, this.seed);
     },
     _loadedImageEventHandler(e) {
       this.imageLoadedSuccessfully = !0, e.classList.remove("d-d-none");
@@ -375,9 +375,9 @@ const ge = (e) => {
   class: "d-avatar__count",
   "data-qa": "dt-avatar-count"
 };
-function Ie(e, t, s, i, a, n) {
+function Ie(e, t, s, o, a, n) {
   const p = m("dt-icon"), v = m("dt-presence");
-  return o(), h(b(s.clickable ? "button" : "div"), {
+  return i(), h(b(s.clickable ? "button" : "div"), {
     id: s.id,
     class: u(n.avatarClasses),
     "data-qa": "dt-avatar",
@@ -393,36 +393,36 @@ function Ie(e, t, s, i, a, n) {
           { "d-avatar--image-loaded": a.imageLoadedSuccessfully }
         ])
       }, [
-        n.showImage ? (o(), r("img", {
+        n.showImage ? (i(), r("img", {
           key: 0,
           ref: "avatarImage",
           class: "d-avatar__image",
           "data-qa": "dt-avatar-image",
           src: s.imageSrc,
           alt: s.imageAlt || s.fullName
-        }, null, 8, Se)) : s.iconName ? (o(), h(p, {
+        }, null, 8, Se)) : s.iconName ? (i(), h(p, {
           key: 1,
           name: s.iconName,
           size: s.iconSize || a.AVATAR_ICON_SIZES[s.size],
           class: u([s.iconClass, a.AVATAR_KIND_MODIFIERS.icon]),
           "data-qa": "dt-avatar-icon"
-        }, null, 8, ["name", "size", "class"])) : (o(), r("span", {
+        }, null, 8, ["name", "size", "class"])) : (i(), r("span", {
           key: 2,
           class: u([a.AVATAR_KIND_MODIFIERS.initials])
         }, T(a.formattedInitials), 3))
       ], 2),
-      s.overlayIcon || s.overlayText ? (o(), r("div", {
+      s.overlayIcon || s.overlayText ? (i(), r("div", {
         key: 0,
         class: u(n.overlayClasses)
       }, [
-        s.overlayIcon ? (o(), h(p, {
+        s.overlayIcon ? (i(), h(p, {
           key: 0,
           class: "d-avatar__overlay-icon",
           name: s.overlayIcon
-        }, null, 8, ["name"])) : s.overlayText ? (o(), r("p", Ce, T(s.overlayText), 1)) : d("", !0)
+        }, null, 8, ["name"])) : s.overlayText ? (i(), r("p", Ce, T(s.overlayText), 1)) : d("", !0)
       ], 2)) : d("", !0),
-      n.showGroup ? (o(), r("span", Oe, T(n.formattedGroup), 1)) : d("", !0),
-      s.presence && !n.showGroup ? (o(), h(v, w({
+      n.showGroup ? (i(), r("span", Oe, T(n.formattedGroup), 1)) : d("", !0),
+      s.presence && !n.showGroup ? (i(), h(v, w({
         key: 2,
         presence: s.presence,
         class: [
@@ -434,7 +434,7 @@ function Ie(e, t, s, i, a, n) {
     _: 1
   }, 8, ["id", "class", "aria-label", "onClick"]);
 }
-const mt = /* @__PURE__ */ y(be, [["render", Ie]]), Te = {
+const yt = /* @__PURE__ */ y(be, [["render", Ie]]), Te = {
   name: "DtLink",
   props: {
     /**
@@ -445,7 +445,7 @@ const mt = /* @__PURE__ */ y(be, [["render", Ie]]), Te = {
       type: String,
       default: "",
       validator(e) {
-        return ie.includes(e);
+        return oe.includes(e);
       }
     }
   },
@@ -455,8 +455,8 @@ const mt = /* @__PURE__ */ y(be, [["render", Ie]]), Te = {
     };
   }
 }, Ae = ["href"];
-function we(e, t, s, i, a, n) {
-  return o(), r("a", {
+function we(e, t, s, o, a, n) {
+  return i(), r("a", {
     class: u([
       "d-link",
       a.LINK_KIND_MODIFIERS[s.kind]
@@ -467,7 +467,7 @@ function we(e, t, s, i, a, n) {
     c(e.$slots, "default")
   ], 10, Ae);
 }
-const yt = /* @__PURE__ */ y(Te, [["render", we]]), Pe = {
+const vt = /* @__PURE__ */ y(Te, [["render", we]]), Pe = {
   props: {
     /**
      * If true, a hidden close button is included for screen readers
@@ -529,9 +529,9 @@ const yt = /* @__PURE__ */ y(Te, [["render", we]]), Pe = {
     }
   }
 };
-function Le(e, t, s, i, a, n) {
+function Le(e, t, s, o, a, n) {
   const p = m("dt-icon"), v = m("dt-button");
-  return o(), h(v, {
+  return i(), h(v, {
     id: "sr-only-close-button",
     "data-qa": "dt-sr-only-close-button",
     class: "d-vi-visible-sr",
@@ -545,7 +545,7 @@ function Le(e, t, s, i, a, n) {
     _: 1
   }, 8, ["aria-label", "onClick", "onKeydown"]);
 }
-const De = /* @__PURE__ */ y(ke, [["render", Le]]), W = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])', Ne = `${W}:not([tabindex="-1"])`, Re = "button,[href],input,select,textarea,details,[tabindex]", Fe = {
+const De = /* @__PURE__ */ y(ke, [["render", Le]]), $ = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])', Ne = `${$}:not([tabindex="-1"])`, Re = "button,[href],input,select,textarea,details,[tabindex]", Fe = {
   methods: {
     /**
      * get the first focusable element in your component, includes tabindex="-1".
@@ -589,9 +589,9 @@ const De = /* @__PURE__ */ y(ke, [["render", Le]]), W = ':not(:disabled):not([ar
      * @param {bool} includeNegativeTabIndex - will include tabindex="-1" in the list of focusable elements.
      */
     _getFocusableElements(e = this.$el, t = !1) {
-      return e ? [...e.querySelectorAll(Re)].filter((i) => {
-        const a = window.getComputedStyle(i);
-        return a.getPropertyValue("display") !== "none" && a.getPropertyValue("visibility") !== "hidden" && i.matches(t ? W : Ne);
+      return e ? [...e.querySelectorAll(Re)].filter((o) => {
+        const a = window.getComputedStyle(o);
+        return a.getPropertyValue("display") !== "none" && a.getPropertyValue("visibility") !== "hidden" && o.matches(t ? $ : Ne);
       }) : [];
     },
     /**
@@ -603,12 +603,12 @@ const De = /* @__PURE__ */ y(ke, [["render", Le]]), W = ':not(:disabled):not([ar
     focusTrappedTabPress(e, t) {
       if (!(e.key === "Tab"))
         return;
-      const i = this._getFocusableElements(t);
-      if (!i.length) {
+      const o = this._getFocusableElements(t);
+      if (!o.length) {
         e.preventDefault();
         return;
       }
-      const a = this._getFirstFocusElement(i), n = i[i.length - 1];
+      const a = this._getFirstFocusElement(o), n = o[o.length - 1];
       e.shiftKey ? document.activeElement === a && (n.focus(), e.preventDefault()) : document.activeElement === n && (a.focus(), e.preventDefault());
     }
   }
@@ -619,7 +619,7 @@ const De = /* @__PURE__ */ y(ke, [["render", Le]]), W = ':not(:disabled):not([ar
   ARROW_KEYS: "arrow-keys",
   TAB: "tab",
   NONE: "none"
-}, Ve = {
+}, He = {
   name: "DtItemLayout",
   props: {
     /**
@@ -630,22 +630,22 @@ const De = /* @__PURE__ */ y(ke, [["render", Le]]), W = ':not(:disabled):not([ar
       default: "div"
     }
   }
-}, He = {
+}, Ve = {
   key: 0,
   "data-qa": "dt-item-layout-left-wrapper",
   class: "dt-item-layout--left"
 }, Be = {
   "data-qa": "dt-item-layout-content-wrapper",
   class: "dt-item-layout--content"
-}, xe = {
+}, qe = {
   key: 0,
   "data-qa": "dt-item-layout-title-wrapper",
   class: "dt-item-layout--title"
-}, Me = {
+}, xe = {
   key: 2,
   "data-qa": "dt-item-layout-bottom-wrapper",
   class: "dt-item-layout--bottom"
-}, qe = {
+}, Me = {
   key: 1,
   "data-qa": "dt-item-layout-right-wrapper",
   class: "dt-item-layout--right"
@@ -654,38 +654,38 @@ const De = /* @__PURE__ */ y(ke, [["render", Le]]), W = ':not(:disabled):not([ar
   "data-qa": "dt-item-layout-selected-wrapper",
   class: "dt-item-layout--selected"
 };
-function Ke(e, t, s, i, a, n) {
-  return o(), h(b(s.as), { class: "dt-item-layout" }, {
+function Ke(e, t, s, o, a, n) {
+  return i(), h(b(s.as), { class: "dt-item-layout" }, {
     default: f(() => [
-      e.$slots.left ? (o(), r("section", He, [
+      e.$slots.left ? (i(), r("section", Ve, [
         c(e.$slots, "left", {}, void 0, !0)
       ])) : d("", !0),
       E("section", Be, [
-        e.$slots.default ? (o(), r("div", xe, [
+        e.$slots.default ? (i(), r("div", qe, [
           c(e.$slots, "default", {}, void 0, !0)
         ])) : d("", !0),
-        e.$slots.subtitle ? (o(), r("div", {
+        e.$slots.subtitle ? (i(), r("div", {
           key: 1,
           "data-qa": "dt-item-layout-subtitle-wrapper",
           class: u(["dt-item-layout--subtitle", { "dt-item-layout--subtitle--with-title": e.$slots.default }])
         }, [
           c(e.$slots, "subtitle", {}, void 0, !0)
         ], 2)) : d("", !0),
-        e.$slots.bottom ? (o(), r("div", Me, [
+        e.$slots.bottom ? (i(), r("div", xe, [
           c(e.$slots, "bottom", {}, void 0, !0)
         ])) : d("", !0)
       ]),
-      e.$slots.right ? (o(), r("section", qe, [
+      e.$slots.right ? (i(), r("section", Me, [
         c(e.$slots, "right", {}, void 0, !0)
       ])) : d("", !0),
-      e.$slots.selected ? (o(), r("section", je, [
+      e.$slots.selected ? (i(), r("section", je, [
         c(e.$slots, "selected", {}, void 0, !0)
       ])) : d("", !0)
     ]),
     _: 3
   });
 }
-const B = /* @__PURE__ */ y(Ve, [["render", Ke], ["__scopeId", "data-v-411cb81e"]]), ze = {
+const B = /* @__PURE__ */ y(He, [["render", Ke], ["__scopeId", "data-v-411cb81e"]]), ze = {
   name: "DtListItem",
   components: {
     DtItemLayout: B,
@@ -704,7 +704,7 @@ const B = /* @__PURE__ */ y(Ve, [["render", Ke], ["__scopeId", "data-v-411cb81e"
     id: {
       type: String,
       default() {
-        return Y.getUniqueString();
+        return U.getUniqueString();
       }
     },
     /**
@@ -836,9 +836,9 @@ const B = /* @__PURE__ */ y(Ve, [["render", Ke], ["__scopeId", "data-v-411cb81e"
     }
   }
 };
-function We(e, t, s, i, a, n) {
+function $e(e, t, s, o, a, n) {
   const p = m("dt-icon");
-  return o(), h(b(s.elementType), w({
+  return i(), h(b(s.elementType), w({
     id: s.id,
     class: ["dt-list-item", {
       "dt-list-item--focusable": n.isFocusable,
@@ -850,7 +850,7 @@ function We(e, t, s, i, a, n) {
     "aria-selected": n.isHighlighted
   }, K(n.listItemListeners)), {
     default: f(() => [
-      n.listItemType ? (o(), h(b(n.listItemType), { key: 0 }, te({ _: 2 }, [
+      n.listItemType ? (i(), h(b(n.listItemType), { key: 0 }, te({ _: 2 }, [
         se(e.$slots, (v, S) => ({
           name: S,
           fn: f(() => [
@@ -873,25 +873,25 @@ function We(e, t, s, i, a, n) {
     _: 3
   }, 16, ["id", "class", "tabindex", "role", "aria-selected"]);
 }
-const vt = /* @__PURE__ */ y(ze, [["render", We]]), _ = {
+const _t = /* @__PURE__ */ y(ze, [["render", $e]]), _ = {
   default: "column",
   column: "column",
   row: "row",
   "row-reverse": "row-reverse",
   "column-reverse": "column-reverse"
-}, G = ["sm", "md", "lg", "xl"], R = ["0", "100", "200", "300", "400", "500", "600"], x = {
+}, W = ["sm", "md", "lg", "xl"], R = ["0", "100", "200", "300", "400", "500", "600"], q = {
   none: void 0,
   small: "d-p4",
   medium: "d-p8",
   large: "d-p16"
-}, Ge = {
+}, We = {
   none: void 0,
   small: "d-pl4",
   medium: "d-pl8",
   large: "d-pl16"
-}, Ue = ["dialog", "menu", "listbox", "tree", "grid"], Ye = ["", "anchor"], $e = ["none", "dialog", "first"], Ze = ["parent", "body"], Xe = [
-  ...$
-], _t = [
+}, Ge = ["dialog", "menu", "listbox", "tree", "grid"], Ue = ["", "anchor"], Ye = ["none", "dialog", "first"], Ze = ["parent", "body"], Xe = [
+  ...Y
+], gt = [
   ...Z
 ], Je = {
   name: "PopoverHeaderFooter",
@@ -954,16 +954,16 @@ const vt = /* @__PURE__ */ y(ze, [["render", We]]), _ = {
     }
   }
 };
-function Qe(e, t, s, i, a, n) {
+function Qe(e, t, s, o, a, n) {
   const p = m("dt-icon"), v = m("dt-button");
-  return o(), r("div", {
+  return i(), r("div", {
     "data-qa": "dt-popover-header-footer",
     class: u({
       "d-popover__header": s.type === "header",
       "d-popover__footer": s.type === "footer"
     })
   }, [
-    a.hasSlotContent(e.$slots.content) ? (o(), r("div", {
+    a.hasSlotContent(e.$slots.content) ? (i(), r("div", {
       key: 0,
       "data-qa": "dt-popover-header-footer-content",
       class: u([{
@@ -973,7 +973,7 @@ function Qe(e, t, s, i, a, n) {
     }, [
       c(e.$slots, "content")
     ], 2)) : d("", !0),
-    s.showCloseButton ? (o(), h(v, w({
+    s.showCloseButton ? (i(), h(v, w({
       key: 1,
       ref: "popover__close-button",
       "data-qa": "dt-popover-close",
@@ -1050,7 +1050,7 @@ const et = /* @__PURE__ */ y(Je, [["render", Qe]]), tt = {
     role: {
       type: String,
       default: "dialog",
-      validator: (e) => Ue.includes(e)
+      validator: (e) => Ge.includes(e)
     },
     /**
      * ID of the element that serves as the label for the popover content.
@@ -1086,7 +1086,7 @@ const et = /* @__PURE__ */ y(Je, [["render", Qe]]), tt = {
     padding: {
       type: String,
       default: "large",
-      validator: (e) => Object.keys(x).some((t) => t === e)
+      validator: (e) => Object.keys(q).some((t) => t === e)
     },
     /**
      * Additional class name for the content wrapper element.
@@ -1103,7 +1103,7 @@ const et = /* @__PURE__ */ y(Je, [["render", Qe]]), tt = {
     contentWidth: {
       type: String,
       default: "",
-      validator: (e) => Ye.includes(e)
+      validator: (e) => Ue.includes(e)
     },
     /**
      * Whether to apply transition on initial render in the content lazy show component.
@@ -1295,7 +1295,7 @@ const et = /* @__PURE__ */ y(Je, [["render", Qe]]), tt = {
     initialFocusElement: {
       type: [String, HTMLElement],
       default: "first",
-      validator: (e) => $e.includes(e) || e instanceof HTMLElement || e.startsWith("#")
+      validator: (e) => Ye.includes(e) || e instanceof HTMLElement || e.startsWith("#")
     },
     /**
      * If the popover should open pressing up or down arrow key on the anchor element.
@@ -1323,6 +1323,17 @@ const et = /* @__PURE__ */ y(Je, [["render", Qe]]), tt = {
     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: (e) => e === null || e.enter && e.leave && Object.keys(e).includes("current")
     }
   },
   emits: [
@@ -1348,8 +1359,8 @@ const et = /* @__PURE__ */ y(Je, [["render", Qe]]), tt = {
   ],
   data() {
     return {
-      POPOVER_PADDING_CLASSES: x,
-      POPOVER_HEADER_FOOTER_PADDING_CLASSES: Ge,
+      POPOVER_PADDING_CLASSES: q,
+      POPOVER_HEADER_FOOTER_PADDING_CLASSES: We,
       intersectionObserver: null,
       isOutsideViewport: !1,
       isOpen: !1,
@@ -1380,6 +1391,10 @@ const et = /* @__PURE__ */ y(Je, [["render", Qe]]), tt = {
     },
     labelledBy() {
       return this.ariaLabelledby || !this.ariaLabel && N("DtPopover__anchor");
+    },
+    currentHovercard() {
+      var e;
+      return (e = this.timer) == null ? void 0 : e.current;
     }
   },
   watch: {
@@ -1439,6 +1454,9 @@ const et = /* @__PURE__ */ y(Je, [["render", Qe]]), tt = {
     },
     isOpen(e, t) {
       e ? (this.initTippyInstance(), this.tip.show()) : !e && t !== e && (this.removeEventListeners(), this.tip.hide());
+    },
+    currentHovercard() {
+      this.hovercard && this.timer && (this.currentHovercard === this.id ? this.isOpen = !0 : this.isOpen = !1);
     }
   },
   mounted() {
@@ -1454,8 +1472,8 @@ const et = /* @__PURE__ */ y(Je, [["render", Qe]]), tt = {
    ******************/
   methods: {
     hasIntersectedViewport(e) {
-      var i;
-      const t = (i = e == null ? void 0 : e[0]) == null ? void 0 : i.target;
+      var o;
+      const t = (o = e == null ? void 0 : e[0]) == null ? void 0 : o.target;
       if (!t)
         return;
       const s = J(t);
@@ -1478,9 +1496,9 @@ const et = /* @__PURE__ */ y(Je, [["render", Qe]]), tt = {
       (e = this.anchorEl) != null && e.closest(".d-zi-drawer") ? 650 : 300;
     },
     defaultToggleOpen(e) {
-      var t, s, i;
+      var t, s, o;
       if (!this.hovercard && !this.openOnContext && (this.open === null || this.open === void 0)) {
-        if (!((t = this.anchorEl) != null && t.contains(e.target)) && !((s = this.anchorEl) != null && s.isEqualNode(e.target)) || (i = this.anchorEl) != null && i.disabled)
+        if (!((t = this.anchorEl) != null && t.contains(e.target)) && !((s = this.anchorEl) != null && s.isEqualNode(e.target)) || (o = this.anchorEl) != null && o.disabled)
           return;
         this.toggleOpen();
       }
@@ -1552,9 +1570,9 @@ const et = /* @__PURE__ */ y(Je, [["render", Qe]]), tt = {
       this.initialFocusElement === "dialog" && this.$refs.content.$el.focus(), this.initialFocusElement.startsWith("#") && this.focusInitialElementById(), this.initialFocusElement === "first" && this.focusFirstElementIfNeeded(this.$refs.popover__content), this.initialFocusElement instanceof HTMLElement && this.initialFocusElement.focus();
     },
     focusInitialElementById() {
-      var t, s, i;
+      var t, s, o;
       const e = (s = (t = this.$refs.content) == null ? void 0 : t.$el) == null ? void 0 : s.querySelector(this.initialFocusElement);
-      e ? e.focus() : console.warn('Could not find the element specified in dt-popover prop "initialFocusElement". Defaulting to focusing the dialog.'), e ? e.focus() : (i = this.$refs.content) == null || i.$el.focus();
+      e ? e.focus() : console.warn('Could not find the element specified in dt-popover prop "initialFocusElement". Defaulting to focusing the dialog.'), e ? e.focus() : (o = this.$refs.content) == null || o.$el.focus();
     },
     onResize() {
       this.closePopover();
@@ -1572,8 +1590,8 @@ const et = /* @__PURE__ */ y(Je, [["render", Qe]]), tt = {
       await this.$nextTick(), this.popoverContentEl.style.width = `${(e = this.anchorEl) == null ? void 0 : e.clientWidth}px`;
     },
     focusFirstElementIfNeeded(e) {
-      var s, i;
-      this._getFocusableElements(e, !0).length !== 0 ? this.focusFirstElement(e) : this.showCloseButton ? (s = this.$refs.popover__header) == null || s.focusCloseButton() : (i = this.$refs.content) == null || i.$el.focus();
+      var s, o;
+      this._getFocusableElements(e, !0).length !== 0 ? this.focusFirstElement(e) : this.showCloseButton ? (s = this.$refs.popover__header) == null || s.focusCloseButton() : (o = this.$refs.content) == null || o.$el.focus();
     },
     initTippyInstance() {
       var e, t;
@@ -1607,27 +1625,27 @@ const et = /* @__PURE__ */ y(Je, [["render", Qe]]), tt = {
         this.isOpen = !1;
       }, F);
     },
-    onEnterAnchor(e) {
-      this.hovercard && (clearTimeout(this.outTimer), this.setInTimer(e));
+    onEnterAnchor() {
+      this.hovercard && (this.timer ? this.timer.enter(this.id) : (clearTimeout(this.outTimer), this.setInTimer()));
     },
-    onLeaveAnchor(e) {
-      this.hovercard && (clearTimeout(this.inTimer), this.setOutTimer(e));
+    onLeaveAnchor() {
+      this.hovercard && (this.timer ? this.timer.leave() : (clearTimeout(this.inTimer), this.setOutTimer()));
     },
     onEnterContent() {
-      this.hovercard && clearTimeout(this.outTimer);
+      this.hovercard && (this.timer ? this.timer.enter(this.id) : clearTimeout(this.outTimer));
     },
-    onLeaveContent(e) {
-      this.hovercard && this.setOutTimer(e);
+    onLeaveContent() {
+      this.hovercard && (this.timer ? this.timer.leave() : this.setOutTimer());
     }
     //  ============================================================================
     //  $ HOVERCARD
     //  ----------------------------------------------------------------------------
   }
-}, st = ["aria-hidden"], nt = ["id", "tabindex"];
-function at(e, t, s, i, a, n) {
+}, st = ["aria-hidden"], nt = ["id", "data-qa", "tabindex"], at = ["data-qa"];
+function it(e, t, s, o, a, n) {
   const p = m("popover-header-footer"), v = m("sr-only-close-button"), S = m("dt-lazy-show");
-  return o(), r("div", null, [
-    s.modal && a.isOpen ? (o(), h(ne, {
+  return i(), r("div", null, [
+    s.modal && a.isOpen ? (i(), h(ne, {
       key: 0,
       to: "body"
     }, [
@@ -1638,7 +1656,7 @@ function at(e, t, s, i, a, n) {
         }, ["prevent", "stop"]))
       }, null, 8, st)
     ])) : d("", !0),
-    (o(), h(b(s.elementType), {
+    (i(), h(b(s.elementType), {
       ref: "popover",
       class: u(["d-popover", { "d-popover__anchor--opened": a.isOpen }]),
       "data-qa": "dt-popover-container"
@@ -1647,7 +1665,7 @@ function at(e, t, s, i, a, n) {
         E("div", {
           id: !s.ariaLabelledby && n.labelledBy,
           ref: "anchor",
-          "data-qa": "dt-popover-anchor",
+          "data-qa": e.$attrs["data-qa"] ? `${e.$attrs["data-qa"]}-anchor` : "dt-popover-anchor",
           tabindex: s.openOnContext ? 0 : void 0,
           onClickCapture: t[1] || (t[1] = (...l) => n.defaultToggleOpen && n.defaultToggleOpen(...l)),
           onContextmenu: t[2] || (t[2] = (...l) => n.onContext && n.onContext(...l)),
@@ -1673,7 +1691,7 @@ function at(e, t, s, i, a, n) {
           id: s.id,
           ref: "content",
           role: s.role,
-          "data-qa": "dt-popover",
+          "data-qa": e.$attrs["data-qa"] ? `${e.$attrs["data-qa"]}__dialog` : "dt-popover",
           "aria-hidden": `${!a.isOpen}`,
           "aria-labelledby": n.labelledBy,
           "aria-label": s.ariaLabel,
@@ -1693,7 +1711,7 @@ function at(e, t, s, i, a, n) {
           onMouseleave: n.onLeaveContent
         }), {
           default: f(() => [
-            a.hasSlotContent(e.$slots.headerContent) || s.showCloseButton ? (o(), h(p, {
+            a.hasSlotContent(e.$slots.headerContent) || s.showCloseButton ? (i(), h(p, {
               key: 0,
               ref: "popover__header",
               class: u(a.POPOVER_HEADER_FOOTER_PADDING_CLASSES[s.padding]),
@@ -1710,7 +1728,7 @@ function at(e, t, s, i, a, n) {
             }, 8, ["class", "content-class", "show-close-button", "close-button-props", "onClose"])) : d("", !0),
             E("div", {
               ref: "popover__content",
-              "data-qa": "dt-popover-content",
+              "data-qa": e.$attrs["data-qa"] ? `${e.$attrs["data-qa"]}-content` : "dt-popover-content",
               class: u([
                 "d-popover__content",
                 a.POPOVER_PADDING_CLASSES[s.padding],
@@ -1718,8 +1736,8 @@ function at(e, t, s, i, a, n) {
               ])
             }, [
               c(e.$slots, "content", { close: n.closePopover })
-            ], 2),
-            a.hasSlotContent(e.$slots.footerContent) ? (o(), h(p, {
+            ], 10, at),
+            a.hasSlotContent(e.$slots.footerContent) ? (i(), h(p, {
               key: 1,
               ref: "popover__footer",
               type: "footer",
@@ -1731,29 +1749,29 @@ function at(e, t, s, i, a, n) {
               ]),
               _: 3
             }, 8, ["class", "content-class"])) : d("", !0),
-            e.showVisuallyHiddenClose ? (o(), h(v, {
+            e.showVisuallyHiddenClose ? (i(), h(v, {
               key: 2,
               "visually-hidden-close-label": e.visuallyHiddenCloseLabel,
               onClose: n.closePopover
             }, null, 8, ["visually-hidden-close-label", "onClose"])) : d("", !0)
           ]),
           _: 3
-        }, 16, ["id", "role", "aria-hidden", "aria-labelledby", "aria-label", "aria-modal", "transition", "show", "appear", "class", "style", "css", "tabindex", "onMouseenter", "onMouseleave"])
+        }, 16, ["id", "role", "data-qa", "aria-hidden", "aria-labelledby", "aria-label", "aria-modal", "transition", "show", "appear", "class", "style", "css", "tabindex", "onMouseenter", "onMouseleave"])
       ]),
       _: 3
     }, 8, ["class"]))
   ]);
 }
-const gt = /* @__PURE__ */ y(tt, [["render", at]]);
-function M(e) {
+const Et = /* @__PURE__ */ y(tt, [["render", it]]);
+function x(e) {
   return e === _.default;
 }
-function q(e) {
+function M(e) {
   if (O(e) === "string")
-    return M(e) ? null : _[e];
+    return x(e) ? null : _[e];
   if (O(e) === "object") {
     const { default: t } = e;
-    return M(t) ? null : _[t];
+    return x(t) ? null : _[t];
   } else
     return null;
 }
@@ -1761,17 +1779,17 @@ function O(e) {
   return typeof e;
 }
 function ot(e) {
-  return q(e) ? `d-stack--${_[q(e)]}` : null;
+  return M(e) ? `d-stack--${_[M(e)]}` : null;
 }
-function it(e) {
+function lt(e) {
   return O(e) === "object" ? [
-    ...G.map((t) => e[t] ? `d-stack--${t}--${e[t]}` : null)
+    ...W.map((t) => e[t] ? `d-stack--${t}--${e[t]}` : null)
   ] : null;
 }
-function lt(e) {
+function rt(e) {
   return R.includes(e) ? `d-stack--gap-${e}` : null;
 }
-function rt(e) {
+function dt(e) {
   if (O(e) === "string")
     return Object.keys(_).includes(e);
   if (O(e) === "object") {
@@ -1780,10 +1798,10 @@ function rt(e) {
   } else
     return null;
 }
-function dt(e) {
+function ct(e) {
   return R.includes(e);
 }
-const ct = {
+const ut = {
   name: "DtStack",
   props: {
     /**
@@ -1797,7 +1815,7 @@ const ct = {
     direction: {
       type: [String, Object],
       default: "column",
-      validator: (e) => rt(e)
+      validator: (e) => dt(e)
     },
     /**
      * Set this prop to render stack as a specific HTML element.
@@ -1813,30 +1831,30 @@ const ct = {
     gap: {
       type: String,
       default: "0",
-      validator: (e) => dt(e)
+      validator: (e) => ct(e)
     }
   },
   data() {
     return {
       DT_STACK_DIRECTION: _,
       DT_STACK_GAP: R,
-      DT_STACK_RESPONSIVE_BREAKPOINTS: G
+      DT_STACK_RESPONSIVE_BREAKPOINTS: W
     };
   },
   computed: {
     stackGap() {
-      return lt(this.gap);
+      return rt(this.gap);
     },
     defaultDirection() {
       return ot(this.direction);
     },
     stackResponsive() {
-      return it(this.direction);
+      return lt(this.direction);
     }
   }
 };
-function ut(e, t, s, i, a, n) {
-  return o(), h(b(s.as), {
+function ht(e, t, s, o, a, n) {
+  return i(), h(b(s.as), {
     class: u([
       "d-stack",
       n.defaultDirection,
@@ -1850,38 +1868,38 @@ function ut(e, t, s, i, a, n) {
     _: 3
   }, 8, ["class"]);
 }
-const Et = /* @__PURE__ */ y(ct, [["render", ut]]);
+const bt = /* @__PURE__ */ y(ut, [["render", ht]]);
 export {
   L as A,
-  vt as D,
+  _t as D,
   I as L,
   Fe as M,
   Ze as P,
   De as S,
-  Et as a,
-  yt as b,
-  mt as c,
-  gt as d,
+  bt as a,
+  vt as b,
+  yt as c,
+  Et as d,
   Pe as e,
   R as f,
-  Ye as g,
-  B as h,
-  pe as i,
-  me as j,
-  V as k,
-  ye as l,
-  ve as m,
-  H as n,
-  D as o,
-  x as p,
-  Ge as q,
-  Ue as r,
-  $e as s,
+  q as g,
+  Ue as h,
+  B as i,
+  pe as j,
+  me as k,
+  H as l,
+  ye as m,
+  ve as n,
+  V as o,
+  D as p,
+  We as q,
+  Ge as r,
+  Ye as s,
   Xe as t,
-  _t as u,
+  gt as u,
   fe as v,
   C as w,
   re as x,
   _ as y,
-  G as z
+  W as z
 };