@db-ux/v-core-components 3.0.2 → 3.0.4-playwright-visual-regression2-5008387

package/dist/db-ux.es.js

@@ -487,7 +487,7 @@ const ao = Object.entries(sa).map(([, t]) => t), Ra = {
       () => {
         if (u.value) {
           const b = u.value + fe;
-          f.value = b, p.value = u.value + pe, v.value = u.value + he, x(e.message, e.showMessage) && (g.value = b), r();
+          f.value = b, p.value = u.value + pe, v.value = u.value + he, x(e.message, e.showMessage) && (g.value = b), c();
         }
       },
       {
@@ -516,12 +516,12 @@ const ao = Object.entries(sa).map(([, t]) => t), Ra = {
     function h() {
       return !!(e.validMessage ?? e.validation === "valid");
     }
-    function r() {
+    function c() {
       var b, k, F;
       !((b = w.value) != null && b.validity.valid) || e.validation === "invalid" ? (g.value = v.value, s.value = e.invalidMessage || ((k = w.value) == null ? void 0 : k.validationMessage) || te, me() && (T.value = s.value, Z(() => T.value = "", 1e3))) : h() && ((F = w.value) != null && F.validity.valid) && e.required ? (g.value = p.value, me() && (T.value = e.validMessage ?? ge, Z(() => T.value = "", 1e3))) : x(e.message, e.showMessage) ? g.value = f.value : g.value = void 0;
     }
-    function c(b) {
-      e.onChange && e.onChange(b), de(o, b, "checked"), r();
+    function r(b) {
+      e.onChange && e.onChange(b), de(o, b, "checked"), c();
     }
     function L(b) {
       e.onBlur && e.onBlur(b);
@@ -548,7 +548,7 @@ const ao = Object.entries(sa).map(([, t]) => t), Ra = {
           disabled: n(V)(b.disabled, "disabled"),
           value: b.value,
           required: n(V)(b.required, "required"),
-          onChange: k[0] || (k[0] = async (F) => c(F)),
+          onChange: k[0] || (k[0] = async (F) => r(F)),
           onBlur: k[1] || (k[1] = async (F) => L(F)),
           onFocus: k[2] || (k[2] = async (F) => C(F)),
           "aria-describedby": b.ariaDescribedBy ?? g.value
@@ -638,7 +638,7 @@ const ce = class ce {
 ne(ce, "callbacks", {}), ne(ce, "_instance", null);
 let Be = ce;
 const et = (t) => {
-  var r;
+  var c;
   const {
     top: a,
     bottom: o,
@@ -649,7 +649,7 @@ const et = (t) => {
     innerWidth: f
   } = window;
   let p = a < 0, v = o > u, s = e < 0, g = i > f;
-  const T = t.dataset.outsideVy, w = t.dataset.outsideVx, h = (r = t == null ? void 0 : t.parentElement) == null ? void 0 : r.getBoundingClientRect();
+  const T = t.dataset.outsideVy, w = t.dataset.outsideVx, h = (c = t == null ? void 0 : t.parentElement) == null ? void 0 : c.getBoundingClientRect();
   return h && (T && (t.dataset.outsideVy === "top" ? p = h.top - (o - h.bottom) < 0 : v = h.bottom + (h.top - a) > u), w && (t.dataset.outsideVx === "left" ? s = h.left - (i - h.right) < 0 : g = h.right + (h.left - e) > f)), {
     outTop: p,
     outBottom: v,
@@ -711,9 +711,9 @@ const et = (t) => {
   } = window;
   let w = e.height, h = e.width;
   (o === "bottom" || o === "top") && (h = h / 2), (o === "left" || o === "right") && (w = w / 2);
-  const r = f + w > g, c = i - w < 0, L = v - h < 0, C = p + h > T;
+  const c = f + w > g, r = i - w < 0, L = v - h < 0, C = p + h > T;
   let b = o;
-  return o.startsWith("bottom") ? r ? (b = o == null ? void 0 : o.replace("bottom", "top"), L && C ? b = "top" : L ? b = "top-start" : C && (b = "top-end")) : L && C ? b = "bottom" : L ? b = "bottom-start" : C && (b = "bottom-end") : o.startsWith("top") ? c ? (b = o == null ? void 0 : o.replace("top", "bottom"), L && C ? b = "bottom" : L ? b = "bottom-start" : C && (b = "bottom-end")) : L && C ? b = "top" : L ? b = "top-start" : C && (b = "top-end") : o.startsWith("left") ? L ? (b = o == null ? void 0 : o.replace("left", "right"), r && c ? b = "right" : r ? b = "right-end" : c && (b = "right-start")) : r && c ? b = "left" : r ? b = "left-end" : c && (b = "left-start") : b.startsWith("right") && (C ? (b = o == null ? void 0 : o.replace("right", "left"), r && c ? b = "left" : r ? b = "left-end" : c && (b = "left-start")) : r && c ? b = "right" : r ? b = "right-end" : c && (b = "right-start")), {
+  return o.startsWith("bottom") ? c ? (b = o == null ? void 0 : o.replace("bottom", "top"), L && C ? b = "top" : L ? b = "top-start" : C && (b = "top-end")) : L && C ? b = "bottom" : L ? b = "bottom-start" : C && (b = "bottom-end") : o.startsWith("top") ? r ? (b = o == null ? void 0 : o.replace("top", "bottom"), L && C ? b = "bottom" : L ? b = "bottom-start" : C && (b = "bottom-end")) : L && C ? b = "top" : L ? b = "top-start" : C && (b = "top-end") : o.startsWith("left") ? L ? (b = o == null ? void 0 : o.replace("left", "right"), c && r ? b = "right" : c ? b = "right-end" : r && (b = "right-start")) : c && r ? b = "left" : c ? b = "left-end" : r && (b = "left-start") : b.startsWith("right") && (C ? (b = o == null ? void 0 : o.replace("right", "left"), c && r ? b = "left" : c ? b = "left-end" : r && (b = "left-start")) : c && r ? b = "right" : c ? b = "right-end" : r && (b = "right-start")), {
     top: i,
     bottom: f,
     right: p,
@@ -738,45 +738,45 @@ const et = (t) => {
     bottom: T,
     correctedPlacement: w,
     innerWidth: h,
-    innerHeight: r
+    innerHeight: c
   } = ua(t, a, o);
   if (v > f && (w.startsWith("bottom") || w.startsWith("top"))) {
-    const c = f / 2 / v * 100;
-    w.endsWith("start") ? t.style.setProperty("--db-tooltip-arrow-inline-start", `${c}%`) : w.endsWith("end") && t.style.setProperty("--db-tooltip-arrow-inline-start", `${100 - c}%`);
+    const r = f / 2 / v * 100;
+    w.endsWith("start") ? t.style.setProperty("--db-tooltip-arrow-inline-start", `${r}%`) : w.endsWith("end") && t.style.setProperty("--db-tooltip-arrow-inline-start", `${100 - r}%`);
   }
   if (p > u && (w.startsWith("left") || w.startsWith("bottom"))) {
-    const c = u / 2 / p * 100;
-    w.endsWith("start") ? t.style.setProperty("--db-tooltip-arrow-block-start", `${c}%`) : w.endsWith("end") && t.style.setProperty("--db-tooltip-arrow-block-start", `${100 - c}%`);
+    const r = u / 2 / p * 100;
+    w.endsWith("start") ? t.style.setProperty("--db-tooltip-arrow-block-start", `${r}%`) : w.endsWith("end") && t.style.setProperty("--db-tooltip-arrow-block-start", `${100 - r}%`);
   }
   if (w === "right" || w === "left")
     t.style.insetBlockStart = `${i + u / 2}px`;
   else if (w === "right-start" || w === "left-start") {
-    const c = i + p;
-    t.style.insetBlockStart = `${i}px`, t.style.insetBlockEnd = `${c > r ? r : c}px`;
+    const r = i + p;
+    t.style.insetBlockStart = `${i}px`, t.style.insetBlockEnd = `${r > c ? c : r}px`;
   } else if (w === "right-end" || w === "left-end") {
-    const c = T - p;
-    t.style.insetBlockStart = `${c < 0 ? 0 : c}px`, t.style.insetBlockEnd = `${T}px`;
+    const r = T - p;
+    t.style.insetBlockStart = `${r < 0 ? 0 : r}px`, t.style.insetBlockEnd = `${T}px`;
   } else if (w === "top" || w === "bottom")
     t.style.insetInlineStart = `${g + f / 2}px`;
   else if (w === "top-start" || w === "bottom-start") {
-    const c = g + v;
-    t.style.insetInlineStart = `${g}px`, t.style.insetInlineEnd = `${c > h ? h : c}px`;
+    const r = g + v;
+    t.style.insetInlineStart = `${g}px`, t.style.insetInlineEnd = `${r > h ? h : r}px`;
   } else if (w === "top-end" || w === "bottom-end") {
-    const c = g - v;
-    t.style.insetInlineStart = `${s - v}px`, t.style.insetInlineEnd = `${c < 0 ? 0 : c}px`;
+    const r = g - v;
+    t.style.insetInlineStart = `${s - v}px`, t.style.insetInlineEnd = `${r < 0 ? 0 : r}px`;
   }
   if (w != null && w.startsWith("right")) {
-    const c = s + v;
-    t.style.insetInlineStart = `calc(${s}px + ${e})`, t.style.insetInlineEnd = `calc(${c > h ? h : c}px + ${e})`;
+    const r = s + v;
+    t.style.insetInlineStart = `calc(${s}px + ${e})`, t.style.insetInlineEnd = `calc(${r > h ? h : r}px + ${e})`;
   } else if (w != null && w.startsWith("left")) {
-    const c = g - v;
-    t.style.insetInlineStart = `calc(${c < 0 ? 0 : c}px - ${e})`, t.style.insetInlineEnd = `calc(${s}px - ${e})`;
+    const r = g - v;
+    t.style.insetInlineStart = `calc(${r < 0 ? 0 : r}px - ${e})`, t.style.insetInlineEnd = `calc(${s}px - ${e})`;
   } else if (w != null && w.startsWith("top")) {
-    const c = i - p;
-    t.style.insetBlockStart = `calc(${c < 0 ? 0 : c}px - ${e})`, t.style.insetBlockEnd = `calc(${T}px - ${e})`;
+    const r = i - p;
+    t.style.insetBlockStart = `calc(${r < 0 ? 0 : r}px - ${e})`, t.style.insetBlockEnd = `calc(${T}px - ${e})`;
   } else if (w != null && w.startsWith("bottom")) {
-    const c = T + p;
-    t.style.insetBlockStart = `calc(${T}px + ${e})`, t.style.insetBlockEnd = `calc(${c > r ? r : c}px + ${e})`;
+    const r = T + p;
+    t.style.insetBlockStart = `calc(${T}px + ${e})`, t.style.insetBlockEnd = `calc(${r > c ? c : r}px + ${e})`;
   }
   t.style.position = "fixed", t.dataset.correctedPlacement = w;
 }, it = ["id", "data-width"], ot = /* @__PURE__ */ G({
@@ -988,7 +988,7 @@ const et = (t) => {
       () => {
         if (i.value) {
           const y = i.value + fe;
-          u.value = y, f.value = i.value + pe, p.value = i.value + he, s.value = e.dataListId ?? i.value + xe, x(e.message, e.showMessage) && (g.value = y), c();
+          u.value = y, f.value = i.value + pe, p.value = i.value + he, s.value = e.dataListId ?? i.value + xe, x(e.message, e.showMessage) && (g.value = y), r();
         }
       },
       {
@@ -1005,18 +1005,18 @@ const et = (t) => {
         flush: "post"
       }
     );
-    function r() {
+    function c() {
       return !!(e.validMessage ?? e.validation === "valid");
     }
-    function c() {
+    function r() {
       var y, X, B;
-      !((y = h.value) != null && y.validity.valid) || e.validation === "invalid" ? (g.value = p.value, v.value = e.invalidMessage || ((X = h.value) == null ? void 0 : X.validationMessage) || te, me() && (w.value = v.value, Z(() => w.value = "", 1e3))) : r() && ((B = h.value) != null && B.validity.valid) && (e.required || e.minLength || e.maxLength || e.pattern) ? (g.value = f.value, me() && (w.value = e.validMessage ?? ge, Z(() => w.value = "", 1e3))) : x(e.message, e.showMessage) ? g.value = u.value : g.value = void 0;
+      !((y = h.value) != null && y.validity.valid) || e.validation === "invalid" ? (g.value = p.value, v.value = e.invalidMessage || ((X = h.value) == null ? void 0 : X.validationMessage) || te, me() && (w.value = v.value, Z(() => w.value = "", 1e3))) : c() && ((B = h.value) != null && B.validity.valid) && (e.required || e.minLength || e.maxLength || e.pattern) ? (g.value = f.value, me() && (w.value = e.validMessage ?? ge, Z(() => w.value = "", 1e3))) : x(e.message, e.showMessage) ? g.value = u.value : g.value = void 0;
     }
     function L(y) {
-      e.input && e.input(y), T.value = y.target.value, e.onInput && e.onInput(y), de(o, y), c();
+      e.input && e.input(y), T.value = y.target.value, e.onInput && e.onInput(y), de(o, y), r();
     }
     function C(y) {
-      e.onChange && e.onChange(y), de(o, y), c();
+      e.onChange && e.onChange(y), de(o, y), r();
     }
     function b(y) {
       e.onBlur && e.onBlur(y);
@@ -1097,7 +1097,7 @@ const et = (t) => {
         ]),
         _: 1
       }, 8, ["icon", "id"])) : U("", !0),
-      r() ? (m(), J(ae, {
+      c() ? (m(), J(ae, {
         key: 2,
         size: "small",
         semantic: "successful",
@@ -1145,13 +1145,13 @@ const et = (t) => {
       () => [f.value, e.value],
       () => {
         if (f.value && e.value && o.value) {
-          const r = s();
-          r && (["mouseenter", "focusin"].forEach((c) => {
-            r.addEventListener(c, () => h(r));
-          }), r.addEventListener("keydown", (c) => v(c)), ["mouseleave", "focusout"].forEach((c) => {
-            r.addEventListener(c, () => w());
-          }), r.dataset.hasTooltip = "true", a.variant === "label" ? r.setAttribute("aria-labelledby", o.value) : r.setAttribute("aria-describedby", o.value)), typeof window < "u" && "IntersectionObserver" in window && (u.value = new IntersectionObserver((c) => {
-            const L = c.find(({ target: C }) => C === s());
+          const c = s();
+          c && (["mouseenter", "focusin"].forEach((r) => {
+            c.addEventListener(r, () => h(c));
+          }), c.addEventListener("keydown", (r) => v(r)), ["mouseleave", "focusout"].forEach((r) => {
+            c.addEventListener(r, () => w());
+          }), c.dataset.hasTooltip = "true", a.variant === "label" ? c.setAttribute("aria-labelledby", o.value) : c.setAttribute("aria-describedby", o.value)), typeof window < "u" && "IntersectionObserver" in window && (u.value = new IntersectionObserver((r) => {
+            const L = r.find(({ target: C }) => C === s());
             L && !L.isIntersecting && v(!1);
           })), e.value = !1;
         }
@@ -1161,42 +1161,43 @@ const et = (t) => {
         flush: "post"
       }
     );
-    function p(r) {
-      r.stopPropagation();
+    function p(c) {
+      c.stopPropagation();
     }
-    function v(r) {
-      (!r || r.key === "Escape") && f.value && getComputedStyle(f.value).visibility === "visible" && s().blur();
+    function v(c) {
+      (!c || c.key === "Escape") && f.value && getComputedStyle(f.value).visibility === "visible" && s().blur();
     }
     function s() {
-      let r = f.value.parentElement;
-      return r && r.localName.includes("tooltip") && (r = r.parentElement), r;
+      let c = f.value.parentElement;
+      return c && c.localName.includes("tooltip") && (c = c.parentElement), c;
     }
-    function g(r) {
-      r && f.value && Z(() => {
+    function g(c) {
+      if (!c || !f.value) return;
+      typeof window < "u" && CSS.supports("anchor-name", "--anchor") && CSS.supports("position-anchor", "--anchor") || Z(() => {
         ra(
           f.value,
-          r,
+          c,
           a.placement ?? "bottom"
         );
       }, 1);
     }
-    function T(r, c) {
+    function T(c, r) {
       var L, C;
-      (L = r == null ? void 0 : r.target) != null && L.contains && ((C = r == null ? void 0 : r.target) != null && C.contains(f.value)) && g(c);
+      (L = c == null ? void 0 : c.target) != null && L.contains && ((C = c == null ? void 0 : c.target) != null && C.contains(f.value)) && g(r);
     }
     function w() {
-      var r;
+      var c;
       i.value && new Be().removeCallback(
         i.value
-      ), (r = u.value) == null || r.unobserve(s());
+      ), (c = u.value) == null || c.unobserve(s());
     }
-    function h(r) {
-      var c;
+    function h(c) {
+      var r;
       i.value = new Be().addCallback(
-        (L) => T(L, r)
-      ), g(r), (c = u.value) == null || c.observe(s());
+        (L) => T(L, c)
+      ), g(c), (r = u.value) == null || r.observe(s());
     }
-    return (r, c) => (m(), S("i", {
+    return (c, r) => (m(), S("i", {
       role: "tooltip",
       "aria-hidden": "true",
       "data-gap": "true",
@@ -1204,15 +1205,15 @@ const et = (t) => {
       ref: f,
       class: P(n(q)("db-tooltip", a.class)),
       id: o.value,
-      "data-emphasis": r.emphasis,
-      "data-animation": n(R)(r.animation ?? !0),
-      "data-delay": r.delay,
-      "data-width": r.width,
-      "data-show-arrow": n(R)(r.showArrow ?? !0),
-      "data-placement": r.placement,
-      onClick: c[0] || (c[0] = async (L) => p(L))
+      "data-emphasis": c.emphasis,
+      "data-animation": n(R)(c.animation ?? !0),
+      "data-delay": c.delay,
+      "data-width": c.width,
+      "data-show-arrow": n(R)(c.showArrow ?? !0),
+      "data-placement": c.placement,
+      onClick: r[0] || (r[0] = async (L) => p(L))
     }, [
-      A(r.$slots, "default")
+      A(c.$slots, "default")
     ], 10, yt));
   }
 }), wt = ["id", "data-semantic", "data-emphasis", "data-icon", "data-show-check-state", "data-show-icon", "data-no-text", "data-overflow"], kt = /* @__PURE__ */ G({
@@ -1351,7 +1352,7 @@ const et = (t) => {
   },
   emits: ["update:values"],
   setup(t, { emit: a }) {
-    const o = a, e = t, i = d(void 0), u = d(void 0), f = d(void 0), p = d(void 0), v = d(void 0), s = d(void 0), g = d(void 0), T = d(void 0), w = d(void 0), h = d(void 0), r = d("no-validation"), c = d(!1), L = d(void 0), C = d(""), b = d(void 0), k = d(""), F = d([]), y = d(!1), X = d(!1), B = d(0), M = d([]), oe = d([]), K = d(!1), _e = d(void 0), Le = d(0), Ce = d(void 0), Ve = d(void 0), Pe = d(void 0), qe = d(!1), Ee = d(!1), va = d(null), z = d(null), ve = d(null), Fe = d(null), Ue = d(null);
+    const o = a, e = t, i = d(void 0), u = d(void 0), f = d(void 0), p = d(void 0), v = d(void 0), s = d(void 0), g = d(void 0), T = d(void 0), w = d(void 0), h = d(void 0), c = d("no-validation"), r = d(!1), L = d(void 0), C = d(""), b = d(void 0), k = d(""), F = d([]), y = d(!1), X = d(!1), B = d(0), M = d([]), oe = d([]), K = d(!1), _e = d(void 0), Le = d(0), Ce = d(void 0), Ve = d(void 0), Pe = d(void 0), qe = d(!1), Ee = d(!1), va = d(null), z = d(null), ve = d(null), Fe = d(null), Ue = d(null);
     Y(() => {
       const l = e.id ?? `custom-select-${Q()}`;
       i.value = l, u.value = l + fe, f.value = l + pe, p.value = l + he, s.value = l + Ze, g.value = l + Qe, T.value = l + "-summary", w.value = l + Re, b.value = l + "-selected-labels", h.value = l + "-info", v.value = e.invalidMessage || te, typeof window < "u" && "IntersectionObserver" in window && (Ve.value = new IntersectionObserver((I) => {
@@ -1447,7 +1448,7 @@ const et = (t) => {
     ), D(
       () => [e.validation],
       () => {
-        r.value = e.validation;
+        c.value = e.validation;
       },
       {
         immediate: !0,
@@ -1567,7 +1568,7 @@ const et = (t) => {
     }
     function pa() {
       var l, I, E;
-      ve.value && (ve.value.value = ga()), !((l = ve.value) != null && l.validity.valid) || e.validation === "invalid" ? (L.value = p.value, v.value = e.invalidMessage || ((I = ve.value) == null ? void 0 : I.validationMessage) || te, me() && (k.value = v.value, Z(() => k.value = "", 1e3)), c.value && (r.value = e.validation ?? "invalid")) : Oe() && ((E = ve.value) != null && E.validity.valid) && e.required ? (L.value = f.value, me() && (k.value = e.validMessage ?? ge, Z(() => k.value = "", 1e3)), r.value = e.validation ?? "valid") : x(e.message, e.showMessage) ? (L.value = u.value, r.value = e.validation ?? "no-validation") : (L.value = w.value, r.value = e.validation ?? "no-validation");
+      ve.value && (ve.value.value = ga()), !((l = ve.value) != null && l.validity.valid) || e.validation === "invalid" ? (L.value = p.value, v.value = e.invalidMessage || ((I = ve.value) == null ? void 0 : I.validationMessage) || te, me() && (k.value = v.value, Z(() => k.value = "", 1e3)), r.value && (c.value = e.validation ?? "invalid")) : Oe() && ((E = ve.value) != null && E.validity.valid) && e.required ? (L.value = f.value, me() && (k.value = e.validMessage ?? ge, Z(() => k.value = "", 1e3)), c.value = e.validation ?? "valid") : x(e.message, e.showMessage) ? (L.value = u.value, c.value = e.validation ?? "no-validation") : (L.value = w.value, c.value = e.validation ?? "no-validation");
     }
     function ha(l) {
       var I, E;
@@ -1676,7 +1677,7 @@ const et = (t) => {
       }
     }
     function $e(l) {
-      (/* @__PURE__ */ new Date()).getTime() - Le.value < 200 || (M.value = l, c.value = !0, e.onOptionSelected && e.onOptionSelected(l ?? []), de(
+      (/* @__PURE__ */ new Date()).getTime() - Le.value < 200 || (M.value = l, r.value = !0, e.onOptionSelected && e.onOptionSelected(l ?? []), de(
         o,
         {
           target: {
@@ -1762,8 +1763,8 @@ const et = (t) => {
         ref_key: "_ref",
         ref: va,
         class: P(n(q)("db-custom-select", e.class)),
-        "aria-invalid": r.value === "invalid",
-        "data-custom-validity": r.value,
+        "aria-invalid": c.value === "invalid",
+        "data-custom-validity": c.value,
         "data-width": l.formFieldWidth,
         "data-variant": l.variant === "floating" && l.selectedType === "tag" && l.multiple ? "above" : l.variant,
         "data-required": n(R)(l.required),
@@ -2506,10 +2507,10 @@ const Xt = ["id", "data-width", "data-on-forcing-mobile"], jt = { class: "db-hea
       () => {
         var h;
         if (o.value && s.value) {
-          const r = s.value.querySelector("menu");
-          r && (((h = r.children) == null ? void 0 : h.length) > 0 ? (e.value = !0, v.value || (v.value = new Ht(
+          const c = s.value.querySelector("menu");
+          c && (((h = c.children) == null ? void 0 : h.length) > 0 ? (e.value = !0, v.value || (v.value = new Ht(
             s.value,
-            r
+            c
           ))) : i.value = !1);
         }
       },
@@ -2519,8 +2520,8 @@ const Xt = ["id", "data-width", "data-on-forcing-mobile"], jt = { class: "db-hea
       }
     );
     function g(h) {
-      var r;
-      ((r = h == null ? void 0 : h.target) == null ? void 0 : r.nodeName) === "A" && (f.value = !0, Z(() => {
+      var c;
+      ((c = h == null ? void 0 : h.target) == null ? void 0 : c.nodeName) === "A" && (f.value = !0, Z(() => {
         f.value = !1;
       }, 1e3));
     }
@@ -2530,21 +2531,21 @@ const Xt = ["id", "data-width", "data-on-forcing-mobile"], jt = { class: "db-hea
     function w(h) {
       h.stopPropagation(), u.value = !1;
     }
-    return (h, r) => (m(), S("li", {
+    return (h, c) => (m(), S("li", {
       ref_key: "_ref",
       ref: s,
       id: h.id,
-      onMouseover: r[2] || (r[2] = async (c) => {
+      onMouseover: c[2] || (c[2] = async (r) => {
         var L;
         return (L = v.value) == null ? void 0 : L.enableFollow();
       }),
-      onMouseleave: r[3] || (r[3] = async (c) => {
+      onMouseleave: c[3] || (c[3] = async (r) => {
         var L;
         return (L = v.value) == null ? void 0 : L.disableFollow();
       }),
-      onMousemove: r[4] || (r[4] = async (c) => {
+      onMousemove: c[4] || (c[4] = async (r) => {
         var L;
-        return (L = v.value) == null ? void 0 : L.followByMouseEvent(c);
+        return (L = v.value) == null ? void 0 : L.followByMouseEvent(r);
       }),
       class: P(n(q)("db-navigation-item", a.class)),
       "data-width": h.width,
@@ -2565,7 +2566,7 @@ const Xt = ["id", "data-width", "data-on-forcing-mobile"], jt = { class: "db-hea
           "aria-haspopup": e.value,
           "aria-expanded": u.value,
           disabled: n(V)(h.disabled, "disabled"),
-          onClick: r[0] || (r[0] = async (c) => T(c))
+          onClick: c[0] || (c[0] = async (r) => T(r))
         }, [
           h.text ? (m(), S(W, { key: 0 }, [
             N($(h.text), 1)
@@ -2575,14 +2576,14 @@ const Xt = ["id", "data-width", "data-on-forcing-mobile"], jt = { class: "db-hea
           class: "db-sub-navigation",
           "data-force-close": f.value,
           id: p.value,
-          onClick: r[1] || (r[1] = async (c) => g(c))
+          onClick: c[1] || (c[1] = async (r) => g(r))
         }, [
           e.value ? (m(), S("div", ci, [
             ee(Se, {
               icon: "arrow_left",
               variant: "ghost",
               id: h.backButtonId,
-              onClick: (c) => w(c)
+              onClick: (r) => w(r)
             }, {
               default: H(() => [
                 N($(h.backButtonText ?? n(Aa)), 1)
@@ -2737,14 +2738,14 @@ const Xt = ["id", "data-width", "data-on-forcing-mobile"], jt = { class: "db-hea
           const h = w();
           h && (h.ariaHasPopup = "true"), v(), f.value.addEventListener(
             "keydown",
-            (r) => p(r)
-          ), ["mouseenter", "focusin"].forEach((r) => {
-            f.value.addEventListener(r, () => g());
-          }), ["mouseleave", "focusout"].forEach((r) => {
-            f.value.addEventListener(r, () => T());
-          }), typeof window < "u" && "IntersectionObserver" in window && (u.value = new IntersectionObserver((r) => {
-            const c = r.find(({ target: L }) => L === w());
-            c && !c.isIntersecting && p(!1);
+            (c) => p(c)
+          ), ["mouseenter", "focusin"].forEach((c) => {
+            f.value.addEventListener(c, () => g());
+          }), ["mouseleave", "focusout"].forEach((c) => {
+            f.value.addEventListener(c, () => T());
+          }), typeof window < "u" && "IntersectionObserver" in window && (u.value = new IntersectionObserver((c) => {
+            const r = c.find(({ target: L }) => L === w());
+            r && !r.isIntersecting && p(!1);
           }));
         }
       },
@@ -2767,8 +2768,8 @@ const Xt = ["id", "data-width", "data-on-forcing-mobile"], jt = { class: "db-hea
     );
     function p(h) {
       if (!h || h.key === "Escape")
-        for (const r of Array.from(f.value.children))
-          r.blur();
+        for (const c of Array.from(f.value.children))
+          c.blur();
     }
     function v() {
       if (!f.value) return;
@@ -2782,39 +2783,39 @@ const Xt = ["id", "data-width", "data-on-forcing-mobile"], jt = { class: "db-hea
       }, 1);
     }
     function s(h) {
-      var r, c;
-      (r = h == null ? void 0 : h.target) != null && r.contains && ((c = h == null ? void 0 : h.target) != null && c.contains(f.value)) && v();
+      var c, r;
+      (c = h == null ? void 0 : h.target) != null && c.contains && ((r = h == null ? void 0 : h.target) != null && r.contains(f.value)) && v();
     }
     function g() {
-      var r;
+      var c;
       e.value = !0, i.value = new Be().addCallback(
-        (c) => s(c)
+        (r) => s(r)
       ), v();
       const h = w();
-      h && ((r = u.value) == null || r.observe(h));
+      h && ((c = u.value) == null || c.observe(h));
     }
     function T(h) {
-      var r;
+      var c;
       {
         e.value = !1, i.value && new Be().removeCallback(
           i.value
         );
-        const c = w();
-        c && ((r = u.value) == null || r.unobserve(c));
+        const r = w();
+        r && ((c = u.value) == null || c.unobserve(r));
       }
     }
     function w() {
       var h;
       if (f.value) {
-        const r = Array.from(f.value.children);
-        if (r.length >= 2) {
-          const c = r[0];
-          return c.tagName.includes("-") ? ((h = c.children) == null ? void 0 : h.length) > 0 ? c.children[0] : null : c;
+        const c = Array.from(f.value.children);
+        if (c.length >= 2) {
+          const r = c[0];
+          return r.tagName.includes("-") ? ((h = r.children) == null ? void 0 : h.length) > 0 ? r.children[0] : null : r;
         }
       }
       return null;
     }
-    return (h, r) => (m(), S("div", {
+    return (h, c) => (m(), S("div", {
       ref_key: "_ref",
       ref: f,
       id: h.id,
@@ -2986,16 +2987,16 @@ const Xt = ["id", "data-width", "data-on-forcing-mobile"], jt = { class: "db-hea
   },
   emits: ["update:value"],
   setup(t, { emit: a }) {
-    const o = a, e = t, i = d(void 0), u = d(void 0), f = d(void 0), p = d(void 0), v = d(void 0), s = d(""), g = d(void 0), T = d(""), w = d(!1), h = d(""), r = d(null);
+    const o = a, e = t, i = d(void 0), u = d(void 0), f = d(void 0), p = d(void 0), v = d(void 0), s = d(""), g = d(void 0), T = d(""), w = d(!1), h = d(""), c = d(null);
     Y(() => {
       w.value = !0;
       const B = e.id ?? `select-${Q()}`;
       i.value = B, u.value = B + fe, f.value = B + pe, p.value = B + he, s.value = B + Re, v.value = e.invalidMessage || te;
     }), D(
-      () => [r.value, e.invalidMessage],
+      () => [c.value, e.invalidMessage],
       () => {
         var B;
-        v.value = e.invalidMessage || ((B = r.value) == null ? void 0 : B.validationMessage) || te;
+        v.value = e.invalidMessage || ((B = c.value) == null ? void 0 : B.validationMessage) || te;
       },
       {
         immediate: !0,
@@ -3023,12 +3024,12 @@ const Xt = ["id", "data-width", "data-on-forcing-mobile"], jt = { class: "db-hea
         flush: "post"
       }
     );
-    function c() {
+    function r() {
       return !!(e.validMessage ?? e.validation === "valid");
     }
     function L() {
       var B, M, oe;
-      !((B = r.value) != null && B.validity.valid) || e.validation === "invalid" ? (g.value = p.value, v.value = e.invalidMessage || ((M = r.value) == null ? void 0 : M.validationMessage) || te, me() && (h.value = v.value, Z(() => h.value = "", 1e3))) : c() && ((oe = r.value) != null && oe.validity.valid) && e.required ? (g.value = f.value, me() && (h.value = e.validMessage ?? ge, Z(() => h.value = "", 1e3))) : x(e.message, e.showMessage) ? g.value = u.value : g.value = s.value;
+      !((B = c.value) != null && B.validity.valid) || e.validation === "invalid" ? (g.value = p.value, v.value = e.invalidMessage || ((M = c.value) == null ? void 0 : M.validationMessage) || te, me() && (h.value = v.value, Z(() => h.value = "", 1e3))) : r() && ((oe = c.value) != null && oe.validity.valid) && e.required ? (g.value = f.value, me() && (h.value = e.validMessage ?? ge, Z(() => h.value = "", 1e3))) : x(e.message, e.showMessage) ? g.value = u.value : g.value = s.value;
     }
     function C(B) {
       e.onClick && e.onClick(B);
@@ -3064,7 +3065,7 @@ const Xt = ["id", "data-width", "data-on-forcing-mobile"], jt = { class: "db-hea
           "aria-invalid": B.validation === "invalid",
           "data-custom-validity": B.validation,
           ref_key: "_ref",
-          ref: r,
+          ref: c,
           required: n(V)(B.required, "required"),
           disabled: n(V)(B.disabled, "disabled"),
           id: i.value,
@@ -3112,7 +3113,7 @@ const Xt = ["id", "data-width", "data-on-forcing-mobile"], jt = { class: "db-hea
           ]),
           _: 1
         }, 8, ["icon", "id"])) : U("", !0),
-        c() ? (m(), J(ae, {
+        r() ? (m(), J(ae, {
           key: 1,
           size: "small",
           semantic: "successful",
@@ -3412,12 +3413,12 @@ const Xt = ["id", "data-width", "data-on-forcing-mobile"], jt = { class: "db-hea
       () => {
         if (v.value && i.value) {
           w(), h(!0);
-          const c = v.value.querySelector(".db-tab-list");
-          c && new MutationObserver((C) => {
+          const r = v.value.querySelector(".db-tab-list");
+          r && new MutationObserver((C) => {
             C.forEach((b) => {
               (b.removedNodes.length || b.addedNodes.length) && (w(), h());
             });
-          }).observe(c, {
+          }).observe(r, {
             childList: !0,
             subtree: !0
           }), i.value = !1;
@@ -3431,19 +3432,19 @@ const Xt = ["id", "data-width", "data-on-forcing-mobile"], jt = { class: "db-hea
     function s() {
       try {
         return typeof a.tabs == "string" ? JSON.parse(a.tabs) : a.tabs;
-      } catch (c) {
-        console.error(c);
+      } catch (r) {
+        console.error(r);
       }
       return [];
     }
-    function g(c) {
-      const L = c.scrollWidth > c.clientWidth;
-      u.value = L && c.scrollLeft > 1, f.value = L && c.scrollLeft < c.scrollWidth - c.clientWidth;
+    function g(r) {
+      const L = r.scrollWidth > r.clientWidth;
+      u.value = L && r.scrollLeft > 1, f.value = L && r.scrollLeft < r.scrollWidth - r.clientWidth;
     }
-    function T(c) {
+    function T(r) {
       var C;
       let L = Number(a.arrowScrollDistance) || 100;
-      c && (L *= -1), (C = p.value) == null || C.scrollBy({
+      r && (L *= -1), (C = p.value) == null || C.scrollBy({
         top: 0,
         left: L,
         behavior: "smooth"
@@ -3451,9 +3452,9 @@ const Xt = ["id", "data-width", "data-on-forcing-mobile"], jt = { class: "db-hea
     }
     function w() {
       if (v.value) {
-        const c = v.value.querySelector(".db-tab-list");
-        if (c) {
-          const L = c.querySelector('[role="tablist"]');
+        const r = v.value.querySelector(".db-tab-list");
+        if (r) {
+          const L = r.querySelector('[role="tablist"]');
           L && (L.setAttribute(
             "aria-orientation",
             a.orientation || "horizontal"
@@ -3463,7 +3464,7 @@ const Xt = ["id", "data-width", "data-on-forcing-mobile"], jt = { class: "db-hea
         }
       }
     }
-    function h(c) {
+    function h(r) {
       if (v.value) {
         const L = Array.from(
           v.value.getElementsByClassName("db-tab-item")
@@ -3482,7 +3483,7 @@ const Xt = ["id", "data-width", "data-on-forcing-mobile"], jt = { class: "db-hea
                 `${e.value}-tab-panel-${k}`
               );
             }
-            if (c) {
+            if (r) {
               const X = !a.initialSelectedMode || a.initialSelectedMode === "auto", B = a.initialSelectedIndex == null && k === 0 || Number(a.initialSelectedIndex) === k;
               X && B && y.click();
             }
@@ -3495,33 +3496,33 @@ const Xt = ["id", "data-width", "data-on-forcing-mobile"], jt = { class: "db-hea
         }
       }
     }
-    function r(c) {
+    function c(r) {
       var L;
-      if (c.stopPropagation(), c.target) {
-        const b = c.target.parentElement;
+      if (r.stopPropagation(), r.target) {
+        const b = r.target.parentElement;
         if (b && b.parentElement && ((L = b.parentElement) == null ? void 0 : L.nodeName) === "LI") {
           const k = b.parentElement;
           if (k) {
             const F = k.parentElement;
             if (F) {
               const y = Array.from(F.childNodes).indexOf(k);
-              a.onIndexChange && a.onIndexChange(y), a.onTabSelect && a.onTabSelect(c);
+              a.onIndexChange && a.onIndexChange(y), a.onTabSelect && a.onTabSelect(r);
             }
           }
         }
       }
     }
-    return (c, L) => (m(), S("div", {
+    return (r, L) => (m(), S("div", {
       ref_key: "_ref",
       ref: v,
       id: o.value,
       class: P(n(q)("db-tabs", a.class)),
-      "data-orientation": c.orientation,
-      "data-scroll-behavior": c.behavior,
-      "data-alignment": c.alignment ?? "start",
-      "data-width": c.width ?? "auto",
-      onInput: L[0] || (L[0] = async (C) => r(C)),
-      onChange: L[1] || (L[1] = async (C) => r(C))
+      "data-orientation": r.orientation,
+      "data-scroll-behavior": r.behavior,
+      "data-alignment": r.alignment ?? "start",
+      "data-width": r.width ?? "auto",
+      onInput: L[0] || (L[0] = async (C) => c(C)),
+      onChange: L[1] || (L[1] = async (C) => c(C))
     }, [
       u.value ? (m(), J(Se, {
         key: 0,
@@ -3538,11 +3539,11 @@ const Xt = ["id", "data-width", "data-on-forcing-mobile"], jt = { class: "db-hea
         _: 1,
         __: [2]
       }, 8, ["onClick"])) : U("", !0),
-      c.tabs ? (m(), S(W, { key: 1 }, [
+      r.tabs ? (m(), S(W, { key: 1 }, [
         ee(zi, null, {
           default: H(() => [
             (m(!0), S(W, null, ye(s(), (C, b) => (m(), J(Fi, {
-              key: c.name + "tab-item" + b,
+              key: r.name + "tab-item" + b,
               active: C.active,
               label: C.label,
               iconTrailing: C.iconTrailing,
@@ -3553,7 +3554,7 @@ const Xt = ["id", "data-width", "data-on-forcing-mobile"], jt = { class: "db-hea
           _: 1
         }),
         (m(!0), S(W, null, ye(s(), (C, b) => (m(), J(Pi, {
-          key: c.name + "tab-panel" + b,
+          key: r.name + "tab-panel" + b,
           content: C.content
         }, {
           default: H(() => [
@@ -3577,7 +3578,7 @@ const Xt = ["id", "data-width", "data-on-forcing-mobile"], jt = { class: "db-hea
         _: 1,
         __: [3]
       }, 8, ["onClick"])) : U("", !0),
-      A(c.$slots, "default")
+      A(r.$slots, "default")
     ], 42, qi));
   }
 }), il = ["scrollbar", "arrows"], ol = ["auto", "manually"], ll = ["static", "removable"], Ui = ["data-variant", "data-hide-asterisk", "data-hide-label"], Gi = ["for"], Wi = ["aria-invalid", "data-custom-validity", "data-field-sizing", "id", "data-resize", "data-hide-resizer", "disabled", "required", "readOnly", "form", "maxLength", "minLength", "name", "wrap", "spellcheck", "autocomplete", "value", "aria-describedby", "placeholder", "rows", "cols"], Oi = {
@@ -3652,7 +3653,7 @@ const Xt = ["id", "data-width", "data-on-forcing-mobile"], jt = { class: "db-hea
       () => {
         if (i.value) {
           const k = i.value + fe;
-          u.value = k, f.value = i.value + pe, p.value = i.value + he, x(e.message, e.showMessage) && (s.value = k), r();
+          u.value = k, f.value = i.value + pe, p.value = i.value + he, x(e.message, e.showMessage) && (s.value = k), c();
         }
       },
       {
@@ -3672,15 +3673,15 @@ const Xt = ["id", "data-width", "data-on-forcing-mobile"], jt = { class: "db-hea
     function h() {
       return !!(e.validMessage ?? e.validation === "valid");
     }
-    function r() {
+    function c() {
       var k, F, y;
       !((k = w.value) != null && k.validity.valid) || e.validation === "invalid" ? (s.value = p.value, v.value = e.invalidMessage || ((F = w.value) == null ? void 0 : F.validationMessage) || te, me() && (T.value = v.value, Z(() => T.value = "", 1e3))) : h() && ((y = w.value) != null && y.validity.valid) && (e.required || e.minLength || e.maxLength) ? (s.value = f.value, me() && (T.value = e.validMessage ?? ge, Z(() => T.value = "", 1e3))) : x(e.message, e.showMessage) ? s.value = u.value : s.value = void 0;
     }
-    function c(k) {
-      e.input && e.input(k), g.value = k.target.value, e.onInput && e.onInput(k), de(o, k), r();
+    function r(k) {
+      e.input && e.input(k), g.value = k.target.value, e.onInput && e.onInput(k), de(o, k), c();
     }
     function L(k) {
-      e.onChange && e.onChange(k), de(o, k), r();
+      e.onChange && e.onChange(k), de(o, k), c();
     }
     function C(k) {
       e.onBlur && e.onBlur(k);
@@ -3714,7 +3715,7 @@ const Xt = ["id", "data-width", "data-on-forcing-mobile"], jt = { class: "db-hea
         wrap: k.wrap,
         spellcheck: k.spellCheck,
         autocomplete: k.autocomplete,
-        onInput: F[0] || (F[0] = async (y) => c(y)),
+        onInput: F[0] || (F[0] = async (y) => r(y)),
         onChange: F[1] || (F[1] = async (y) => L(y)),
         onBlur: F[2] || (F[2] = async (y) => C(y)),
         onFocus: F[3] || (F[3] = async (y) => b(y)),