@db-ux/v-core-components 4.2.2 → 4.2.3

package/dist/db-ux.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as W, ref as o, onMounted as Y, watch as C, createElementBlock as y, openBlock as v, normalizeClass as U, unref as n, createElementVNode as E, createCommentVNode as z, renderSlot as F, Fragment as H, createTextVNode as D, toDisplayString as B, renderList as ge, createBlock as J, onUnmounted as he, createVNode as te, withCtx as G } from "vue";
-const Ie = "OVERWRITE_DEFAULT_ID", ye = "LABEL SHOULD BE SET", ea = " ", Ia = "MESSAGE SHOULD BE SET", Ye = "-label", Je = "-select", ce = "-message", re = "-valid-message", ve = "-invalid-message", De = "-placeholder", Qe = "-datalist", se = "TODO: Add a validMessage", ee = "TODO: Add an invalidMessage", aa = "Remove", xa = "Back", $a = "Selected", Ta = "BurgerMenu", Ca = "brand", Ea = 4, qe = "Close", Ki = "density", Yi = "color";
+import { defineComponent as W, ref as o, onMounted as J, watch as C, createElementBlock as y, openBlock as v, normalizeClass as U, unref as n, createElementVNode as E, createCommentVNode as z, renderSlot as F, Fragment as H, createTextVNode as D, toDisplayString as B, renderList as ge, createBlock as Y, onUnmounted as he, createVNode as te, withCtx as G } from "vue";
+const Te = "OVERWRITE_DEFAULT_ID", ye = "LABEL SHOULD BE SET", ea = " ", Ia = "MESSAGE SHOULD BE SET", Ye = "-label", Je = "-select", ce = "-message", re = "-valid-message", ve = "-invalid-message", De = "-placeholder", Qe = "-datalist", se = "TODO: Add a validMessage", ee = "TODO: Add an invalidMessage", aa = "Remove", xa = "Back", $a = "Selected", Ta = "BurgerMenu", Ca = "brand", Ea = 4, qe = "Close", Ki = "density", Yi = "color";
 var ta = /* @__PURE__ */ ((e) => (e.FUNCTIONAL = "functional", e.REGULAR = "regular", e.EXPRESSIVE = "expressive", e))(ta || {});
 const Ji = Object.entries(ta).map(([, e]) => e);
 var ia = /* @__PURE__ */ ((e) => (e.PRIMARY = "primary", e))(ia || {}), la = /* @__PURE__ */ ((e) => (e.NEUTRAL_BG_LEVEL_1 = "neutral-bg-basic-level-1", e.NEUTRAL_BG_LEVEL_2 = "neutral-bg-basic-level-2", e.NEUTRAL_BG_LEVEL_3 = "neutral-bg-basic-level-3", e.NEUTRAL_BG_TRANSPARENT_SEMI = "neutral-bg-basic-transparent-semi", e.NEUTRAL_BG_TRANSPARENT_FULL = "neutral-bg-basic-transparent-full", e.BRAND_BG_LEVEL_1 = "brand-bg-basic-level-1", e.BRAND_BG_LEVEL_2 = "brand-bg-basic-level-2", e.BRAND_BG_LEVEL_3 = "brand-bg-basic-level-3", e.BRAND_BG_TRANSPARENT_SEMI = "brand-bg-basic-transparent-semi", e.BRAND_BG_TRANSPARENT_FULL = "brand-bg-basic-transparent-full", e.SUCCESSFUL_BG_LEVEL_1 = "successful-bg-basic-level-1", e.SUCCESSFUL_BG_LEVEL_2 = "successful-bg-basic-level-2", e.SUCCESSFUL_BG_LEVEL_3 = "successful-bg-basic-level-3", e.SUCCESSFUL_BG_TRANSPARENT_SEMI = "successful-bg-basic-transparent-semi", e.SUCCESSFUL_BG_TRANSPARENT_FULL = "successful-bg-basic-transparent-full", e.CRITICAL_BG_LEVEL_1 = "critical-bg-basic-level-1", e.CRITICAL_BG_LEVEL_2 = "critical-bg-basic-level-2", e.CRITICAL_BG_LEVEL_3 = "critical-bg-basic-level-3", e.CRITICAL_BG_TRANSPARENT_SEMI = "critical-bg-basic-transparent-semi", e.CRITICAL_BG_TRANSPARENT_Full = "critical-bg-basic-transparent-full", e.WARNING_BG_LEVEL_1 = "warning-bg-basic-level-1", e.WARNING_BG_LEVEL_2 = "warning-bg-basic-level-2", e.WARNING_BG_LEVEL_3 = "warning-bg-basic-level-3", e.WARNING_BG_TRANSPARENT_SEMI = "warning-bg-basic-transparent-semi", e.WARNING_BG_TRANSPARENT_FULL = "warning-bg-basic-transparent-full", e.INFORMATIONAL_BG_LEVEL_1 = "informational-bg-basic-level-1", e.INFORMATIONAL_BG_LEVEL_2 = "informational-bg-basic-level-2", e.INFORMATIONAL_BG_LEVEL_3 = "informational-bg-basic-level-3", e.INFORMATIONAL_BG_TRANSPARENT_SEMI = "informational-bg-basic-transparent-semi", e.INFORMATIONAL_BG_TRANSPARENT_FULL = "informational-bg-basic-transparent-full", e))(la || {});
@@ -21,7 +21,7 @@ const _i = Object.entries(na).map(([, e]) => e), Aa = {
 }, {
   name: "mobile",
   ...Aa
-}], Q = () => {
+}], _ = () => {
   if (typeof window < "u") {
     if (window.crypto?.randomUUID)
       return window.crypto.randomUUID();
@@ -60,8 +60,8 @@ const _i = Object.entries(na).map(([, e]) => e), Aa = {
 }, Ze = (e, t) => t && ["number", "range"].includes(t) ? ke(e) : e, ne = (e) => {
   if (e != null)
     return V(!e);
-}, _ = (e, t) => (t === void 0 || !!t) && !!e, _e = (e) => e.querySelector('input[type="search"]'), al = (e, t) => {
-  const l = e.id ?? e.value ?? Q();
+}, Z = (e, t) => (t === void 0 || !!t) && !!e, _e = (e) => e.querySelector('input[type="search"]'), al = (e, t) => {
+  const l = e.id ?? e.value ?? _();
   return `${t}${l}`;
 }, Ra = (e) => e.key !== void 0, za = ["id"], Va = ["aria-disabled", "name", "open"], Pa = /* @__PURE__ */ W({
   __name: "accordion-item",
@@ -81,13 +81,13 @@ const _i = Object.entries(na).map(([, e]) => e), Aa = {
     name: { default: void 0 }
   },
   setup(e) {
-    const t = e, l = o(Ie), a = o(!1), i = o(void 0), u = o(!1), c = o(null);
-    Y(() => {
-      l.value = t.id || "accordion-item-" + Q(), t.defaultOpen && (a.value = t.defaultOpen), u.value = !0;
+    const t = e, l = o(Te), a = o(!1), i = o(void 0), c = o(!1), u = o(null);
+    J(() => {
+      l.value = t.id || "accordion-item-" + _(), t.defaultOpen && (a.value = t.defaultOpen), c.value = !0;
     }), C(
-      () => [c.value, u.value],
+      () => [u.value, c.value],
       () => {
-        c.value && u.value;
+        u.value && c.value;
       },
       {
         immediate: !0,
@@ -115,7 +115,7 @@ const _i = Object.entries(na).map(([, e]) => e), Aa = {
       E("details", {
         "aria-disabled": n(V)(e.disabled),
         ref_key: "_ref",
-        ref: c,
+        ref: u,
         name: i.value,
         open: a.value
       }, [
@@ -151,9 +151,9 @@ const _i = Object.entries(na).map(([, e]) => e), Aa = {
     autofocus: { type: [Boolean, String] }
   },
   setup(e) {
-    const t = e, l = o(Ie), a = o(""), i = o(!1), u = o(!1), c = o(null);
-    Y(() => {
-      l.value = t.id || "accordion-" + Q(), i.value = !0, u.value = !0;
+    const t = e, l = o(Te), a = o(""), i = o(!1), c = o(!1), u = o(null);
+    J(() => {
+      l.value = t.id || "accordion-" + _(), i.value = !0, c.value = !0;
     }), C(
       () => [i.value, t.name, t.behavior, l.value],
       () => {
@@ -164,10 +164,10 @@ const _i = Object.entries(na).map(([, e]) => e), Aa = {
         flush: "post"
       }
     ), C(
-      () => [c.value, a.value],
+      () => [u.value, a.value],
       () => {
-        if (c.value) {
-          const g = c.value.getElementsByTagName("details");
+        if (u.value) {
+          const g = u.value.getElementsByTagName("details");
           if (g)
             for (const h of Array.from(g))
               a.value === "" ? h.removeAttribute("name") : h.name = a.value ?? "";
@@ -178,11 +178,11 @@ const _i = Object.entries(na).map(([, e]) => e), Aa = {
         flush: "post"
       }
     ), C(
-      () => [c.value, u.value, t.initOpenIndex],
+      () => [u.value, c.value, t.initOpenIndex],
       () => {
-        if (c.value && u.value) {
+        if (u.value && c.value) {
           if (t.initOpenIndex && t.initOpenIndex.length > 0) {
-            const g = c.value.getElementsByTagName("details");
+            const g = u.value.getElementsByTagName("details");
             if (g) {
               const h = t.behavior === "single" && t.initOpenIndex.length > 1 ? [t.initOpenIndex[0]] : t.initOpenIndex;
               Array.from(g).forEach(
@@ -192,7 +192,7 @@ const _i = Object.entries(na).map(([, e]) => e), Aa = {
               );
             }
           }
-          u.value = !1;
+          c.value = !1;
         }
       },
       {
@@ -210,13 +210,13 @@ const _i = Object.entries(na).map(([, e]) => e), Aa = {
     }
     return (g, h) => (v(), y("ul", {
       ref_key: "_ref",
-      ref: c,
+      ref: u,
       id: l.value,
       class: U(n(O)("db-accordion", t.class)),
       "data-variant": e.variant
     }, [
       e.items ? z("", !0) : F(g.$slots, "default", { key: 0 }),
-      e.items ? (v(!0), y(H, { key: 1 }, ge(f(), (k, $) => (v(), J(Pa, {
+      e.items ? (v(!0), y(H, { key: 1 }, ge(f(), (k, $) => (v(), Y(Pa, {
         key: `accordion-item-${$}`,
         headlinePlain: k.headlinePlain,
         disabled: k.disabled,
@@ -241,7 +241,7 @@ const _i = Object.entries(na).map(([, e]) => e), Aa = {
   },
   setup(e) {
     const t = e, l = o(!1), a = o(null);
-    return Y(() => {
+    return J(() => {
       l.value = !0;
     }), C(
       () => [a.value, l.value],
@@ -255,7 +255,7 @@ const _i = Object.entries(na).map(([, e]) => e), Aa = {
         immediate: !0,
         flush: "post"
       }
-    ), (i, u) => (v(), y("span", {
+    ), (i, c) => (v(), y("span", {
       ref_key: "_ref",
       ref: a,
       id: e.id,
@@ -330,10 +330,10 @@ const _i = Object.entries(na).map(([, e]) => e), Aa = {
     function a() {
       return t.type ? t.type : t.onClick ? "button" : "submit";
     }
-    function i(u) {
-      t.onClick && t.onClick(u);
+    function i(c) {
+      t.onClick && t.onClick(c);
     }
-    return (u, c) => (v(), y("button", {
+    return (c, u) => (v(), y("button", {
       ref_key: "_ref",
       ref: l,
       id: e.id,
@@ -351,11 +351,11 @@ const _i = Object.entries(na).map(([, e]) => e), Aa = {
       name: e.name,
       form: e.form,
       value: e.value,
-      onClick: c[0] || (c[0] = async (f) => i(f))
+      onClick: u[0] || (u[0] = async (f) => i(f))
     }, [
       e.text ? (v(), y(H, { key: 0 }, [
         D(B(e.text), 1)
-      ], 64)) : F(u.$slots, "default", { key: 1 })
+      ], 64)) : F(c.$slots, "default", { key: 1 })
     ], 10, Ga));
   }
 }), sl = ["outlined", "brand", "filled", "ghost"], ul = ["button", "reset", "submit"], Wa = ["id", "data-behavior", "data-elevation-level", "data-spacing"], cl = /* @__PURE__ */ W({
@@ -376,7 +376,7 @@ const _i = Object.entries(na).map(([, e]) => e), Aa = {
     function a(i) {
       t.onClick && t.onClick(i);
     }
-    return (i, u) => (v(), y("div", {
+    return (i, c) => (v(), y("div", {
       ref_key: "_ref",
       ref: l,
       id: e.id,
@@ -384,7 +384,7 @@ const _i = Object.entries(na).map(([, e]) => e), Aa = {
       "data-behavior": e.behavior,
       "data-elevation-level": e.elevationLevel,
       "data-spacing": e.spacing,
-      onClick: u[0] || (u[0] = async (c) => a(c))
+      onClick: c[0] || (c[0] = async (u) => a(u))
     }, [
       F(i.$slots, "default")
     ], 10, Wa));
@@ -400,30 +400,30 @@ const _i = Object.entries(na).map(([, e]) => e), Aa = {
 }, da = (e, t, l, a) => {
   Me(e, (i) => {
     K(() => {
-      const u = t.checked ? t.checked : t.defaultChecked ? t.defaultChecked : e.checked, c = {
+      const c = t.checked ? t.checked : t.defaultChecked ? t.defaultChecked : e.checked, u = {
         ...i,
         target: {
           ...i.target,
-          checked: u
+          checked: c
         }
       };
-      l(c);
+      l(u);
     }, 1);
   }, a);
 }, Ue = (e, t, l, a) => {
   Me(e, (i) => {
     K(() => {
-      const u = t.value ? t.value : t.defaultValue ? t.defaultValue : e.value, c = {
+      const c = t.value ? t.value : t.defaultValue ? t.defaultValue : e.value, u = {
         ...i,
         target: {
           ...i.target,
-          value: u
+          value: c
         }
       };
-      l(c);
+      l(u);
     }, 1);
   }, a);
-}, Ha = ["id", "data-icon", "data-semantic", "data-size", "data-show-icon-leading"], Z = /* @__PURE__ */ W({
+}, Ha = ["id", "data-icon", "data-semantic", "data-size", "data-show-icon-leading"], Q = /* @__PURE__ */ W({
   __name: "infotext",
   props: {
     children: { default: void 0 },
@@ -495,11 +495,11 @@ const _i = Object.entries(na).map(([, e]) => e), Aa = {
   },
   emits: ["update:checked"],
   setup(e, { emit: t }) {
-    const l = t, a = e, i = o(!1), u = o(void 0), c = o(void 0), f = o(void 0), g = o(void 0), h = o(void 0), k = o(void 0), $ = o(""), m = o(void 0), s = o(null);
-    Y(() => {
+    const l = t, a = e, i = o(!1), c = o(void 0), u = o(void 0), f = o(void 0), g = o(void 0), h = o(void 0), k = o(void 0), $ = o(""), m = o(void 0), s = o(null);
+    J(() => {
       i.value = !0;
-      const L = a.id ?? `checkbox-${Q()}`;
-      u.value = L, c.value = L + ce, f.value = L + re, g.value = L + ve, h.value = a.invalidMessage || ee;
+      const L = a.id ?? `checkbox-${_()}`;
+      c.value = L, u.value = L + ce, f.value = L + re, g.value = L + ve, h.value = a.invalidMessage || ee;
     }), he(() => {
       m.value?.abort();
     }), C(
@@ -512,11 +512,11 @@ const _i = Object.entries(na).map(([, e]) => e), Aa = {
         flush: "post"
       }
     ), C(
-      () => [u.value],
+      () => [c.value],
       () => {
-        if (u.value) {
-          const L = u.value + ce;
-          c.value = L, f.value = u.value + re, g.value = u.value + ve, _(a.message, a.showMessage) && (k.value = L), b();
+        if (c.value) {
+          const L = c.value + ce;
+          u.value = L, f.value = c.value + re, g.value = c.value + ve, Z(a.message, a.showMessage) && (k.value = L), b();
         }
       },
       {
@@ -568,7 +568,7 @@ const _i = Object.entries(na).map(([, e]) => e), Aa = {
       return !!(a.validMessage ?? a.validation === "valid");
     }
     function b() {
-      !s.value?.validity.valid || a.validation === "invalid" ? (k.value = g.value, h.value = a.invalidMessage || s.value?.validationMessage || ee, ue() && ($.value = h.value, K(() => $.value = "", 1e3))) : d() && s.value?.validity.valid && a.required ? (k.value = f.value, ue() && ($.value = a.validMessage ?? se, K(() => $.value = "", 1e3))) : _(a.message, a.showMessage) ? k.value = c.value : k.value = void 0;
+      !s.value?.validity.valid || a.validation === "invalid" ? (k.value = g.value, h.value = a.invalidMessage || s.value?.validationMessage || ee, ue() && ($.value = h.value, K(() => $.value = "", 1e3))) : d() && s.value?.validity.valid && a.required ? (k.value = f.value, ue() && ($.value = a.validMessage ?? se, K(() => $.value = "", 1e3))) : Z(a.message, a.showMessage) ? k.value = u.value : k.value = void 0;
     }
     function I(L, S) {
       a.onChange && a.onChange(L), de(l, L, "checked"), b();
@@ -585,14 +585,14 @@ const _i = Object.entries(na).map(([, e]) => e), Aa = {
       "data-hide-asterisk": n(ne)(e.showRequiredAsterisk),
       "data-hide-label": n(ne)(e.showLabel)
     }, [
-      E("label", { for: u.value }, [
+      E("label", { for: c.value }, [
         E("input", {
           type: "checkbox",
           "aria-invalid": e.validation === "invalid",
           "data-custom-validity": e.validation,
           ref_key: "_ref",
           ref: s,
-          id: u.value,
+          id: c.value,
           name: e.name,
           checked: n(q)(e.checked, "checked"),
           disabled: n(q)(e.disabled, "disabled"),
@@ -607,18 +607,18 @@ const _i = Object.entries(na).map(([, e]) => e), Aa = {
           D(B(e.label), 1)
         ], 64)) : F(L.$slots, "default", { key: 1 })
       ], 8, ja),
-      n(_)(e.message, e.showMessage) ? (v(), J(Z, {
+      n(Z)(e.message, e.showMessage) ? (v(), Y(Q, {
         key: 0,
         size: "small",
         icon: e.messageIcon,
-        id: c.value
+        id: u.value
       }, {
         default: G(() => [
           D(B(e.message), 1)
         ]),
         _: 1
       }, 8, ["icon", "id"])) : z("", !0),
-      d() ? (v(), J(Z, {
+      d() ? (v(), Y(Q, {
         key: 1,
         size: "small",
         semantic: "successful",
@@ -629,7 +629,7 @@ const _i = Object.entries(na).map(([, e]) => e), Aa = {
         ]),
         _: 1
       }, 8, ["id"])) : z("", !0),
-      te(Z, {
+      te(Q, {
         size: "small",
         semantic: "critical",
         id: g.value
@@ -656,7 +656,7 @@ class fe {
     fe._instance = this, self.document && self.document.addEventListener("click", (t) => fe.runCallbacks(t));
   }
   addCallback(t) {
-    const l = Q();
+    const l = _();
     return fe.callbacks[l] = t, l;
   }
   removeCallback(t) {
@@ -681,7 +681,7 @@ class oe {
     }, !0);
   }
   addCallback(t) {
-    const l = Q();
+    const l = _();
     return oe.callbacks[l] = t, l;
   }
   removeCallback(t) {
@@ -695,12 +695,12 @@ const Ja = (e) => {
     left: a,
     right: i
   } = e.getBoundingClientRect(), {
-    innerHeight: u,
-    innerWidth: c
+    innerHeight: c,
+    innerWidth: u
   } = window;
-  let f = t < 0, g = l > u, h = a < 0, k = i > c;
+  let f = t < 0, g = l > c, h = a < 0, k = i > u;
   const $ = e.dataset.outsideVy, m = e.dataset.outsideVx, s = e?.parentElement?.getBoundingClientRect();
-  return s && ($ && (e.dataset.outsideVy === "top" ? f = s.top - (l - s.bottom) < 0 : g = s.bottom + (s.top - t) > u), m && (e.dataset.outsideVx === "left" ? h = s.left - (i - s.right) < 0 : k = s.right + (s.left - a) > c)), {
+  return s && ($ && (e.dataset.outsideVy === "top" ? f = s.top - (l - s.bottom) < 0 : g = s.bottom + (s.top - t) > c), m && (e.dataset.outsideVx === "left" ? h = s.left - (i - s.right) < 0 : k = s.right + (s.left - a) > u)), {
     outTop: f,
     outBottom: g,
     outLeft: h,
@@ -713,26 +713,26 @@ const Ja = (e) => {
     outLeft: a,
     outRight: i
   } = Ja(e);
-  let u = {};
-  return t || l ? (u = {
+  let c = {};
+  return t || l ? (c = {
     vy: t ? "top" : "bottom"
-  }, e.dataset.outsideVy = u.vy) : delete e.dataset.outsideVy, a || i ? (u = {
-    ...u,
+  }, e.dataset.outsideVy = c.vy) : delete e.dataset.outsideVy, a || i ? (c = {
+    ...c,
     vx: i ? "right" : "left"
-  }, e.dataset.outsideVx = u.vx) : delete e.dataset.outsideVx, u;
+  }, e.dataset.outsideVx = c.vx) : delete e.dataset.outsideVx, c;
 }, Za = (e, t, l) => {
   if (getComputedStyle(e).zIndex === "9999") return;
   const {
     top: a,
     bottom: i,
-    childHeight: u,
-    childWidth: c,
+    childHeight: c,
+    childWidth: u,
     width: f,
     right: g,
     left: h,
     correctedPlacement: k
   } = sa(e, t, l);
-  e.dataset.width === "full" && (e.style.inlineSize = `${f}px`), k === "top" || k === "bottom" || k === "top-start" || k === "bottom-start" ? e.style.insetInlineStart = `${h}px` : (k === "top-end" || k === "bottom-end") && (e.style.insetInlineStart = `${g - c}px`), k?.startsWith("top") ? e.style.insetBlockStart = `${a - u}px` : k?.startsWith("bottom") && (e.style.insetBlockStart = `${i}px`), e.style.position = "fixed";
+  e.dataset.width === "full" && (e.style.inlineSize = `${f}px`), k === "top" || k === "bottom" || k === "top-start" || k === "bottom-start" ? e.style.insetInlineStart = `${h}px` : (k === "top-end" || k === "bottom-end") && (e.style.insetInlineStart = `${g - u}px`), k?.startsWith("top") ? e.style.insetBlockStart = `${a - c}px` : k?.startsWith("bottom") && (e.style.insetBlockStart = `${i}px`), e.style.position = "fixed";
 }, sa = (e, t, l) => {
   if (!e || !t)
     return {
@@ -750,8 +750,8 @@ const Ja = (e) => {
     };
   const a = e.getBoundingClientRect(), {
     top: i,
-    height: u,
-    bottom: c,
+    height: c,
+    bottom: u,
     right: f,
     left: g,
     width: h
@@ -761,13 +761,13 @@ const Ja = (e) => {
   } = window;
   let m = a.height, s = a.width;
   (l === "bottom" || l === "top") && (s = s / 2), (l === "left" || l === "right") && (m = m / 2);
-  const d = c + m > k, b = i - m < 0, I = g - s < 0, T = f + s > $;
+  const d = u + m > k, b = i - m < 0, I = g - s < 0, T = f + s > $;
   let w = l;
   return l.startsWith("bottom") ? d ? (w = l?.replace("bottom", "top"), I && T ? w = "top" : I ? w = "top-start" : T && (w = "top-end")) : I && T ? w = "bottom" : I ? w = "bottom-start" : T && (w = "bottom-end") : l.startsWith("top") ? b ? (w = l?.replace("top", "bottom"), I && T ? w = "bottom" : I ? w = "bottom-start" : T && (w = "bottom-end")) : I && T ? w = "top" : I ? w = "top-start" : T && (w = "top-end") : l.startsWith("left") ? I ? (w = l?.replace("left", "right"), d && b ? w = "right" : d ? w = "right-end" : b && (w = "right-start")) : d && b ? w = "left" : d ? w = "left-end" : b && (w = "left-start") : w.startsWith("right") && (T ? (w = l?.replace("right", "left"), d && b ? w = "left" : d ? w = "left-end" : b && (w = "left-start")) : d && b ? w = "right" : d ? w = "right-end" : b && (w = "right-start")), {
     top: i,
-    bottom: c,
+    bottom: u,
     right: f,
-    height: u,
+    height: c,
     width: h,
     left: g,
     childHeight: a.height,
@@ -779,8 +779,8 @@ const Ja = (e) => {
 }, ua = (e, t, l) => {
   const a = getComputedStyle(e).getPropertyValue("--db-popover-distance") ?? "0px", {
     top: i,
-    height: u,
-    width: c,
+    height: c,
+    width: u,
     childHeight: f,
     childWidth: g,
     right: h,
@@ -790,16 +790,16 @@ const Ja = (e) => {
     innerWidth: s,
     innerHeight: d
   } = sa(e, t, l);
-  if (g > c && (m.startsWith("bottom") || m.startsWith("top"))) {
-    const b = c / 2 / g * 100;
+  if (g > u && (m.startsWith("bottom") || m.startsWith("top"))) {
+    const b = u / 2 / g * 100;
     m.endsWith("start") ? e.style.setProperty("--db-tooltip-arrow-inline-start", `${b}%`) : m.endsWith("end") && e.style.setProperty("--db-tooltip-arrow-inline-start", `${100 - b}%`);
   }
-  if (f > u && (m.startsWith("left") || m.startsWith("bottom"))) {
-    const b = u / 2 / f * 100;
+  if (f > c && (m.startsWith("left") || m.startsWith("bottom"))) {
+    const b = c / 2 / f * 100;
     m.endsWith("start") ? e.style.setProperty("--db-tooltip-arrow-block-start", `${b}%`) : m.endsWith("end") && e.style.setProperty("--db-tooltip-arrow-block-start", `${100 - b}%`);
   }
   if (m === "right" || m === "left")
-    e.style.insetBlockStart = `${i + u / 2}px`;
+    e.style.insetBlockStart = `${i + c / 2}px`;
   else if (m === "right-start" || m === "left-start") {
     const b = i + f;
     e.style.insetBlockStart = `${i}px`, e.style.insetBlockEnd = `${b > d ? d : b}px`;
@@ -807,7 +807,7 @@ const Ja = (e) => {
     const b = $ - f;
     e.style.insetBlockStart = `${b < 0 ? 0 : b}px`, e.style.insetBlockEnd = `${$}px`;
   } else if (m === "top" || m === "bottom")
-    e.style.insetInlineStart = `${k + c / 2}px`;
+    e.style.insetInlineStart = `${k + u / 2}px`;
   else if (m === "top-start" || m === "bottom-start") {
     const b = k + g;
     e.style.insetInlineStart = `${k}px`, e.style.insetInlineEnd = `${b > s ? s : b}px`;
@@ -876,13 +876,13 @@ const Ja = (e) => {
   },
   emits: ["update:checked"],
   setup(e, { emit: t }) {
-    const l = t, a = e, i = o(void 0), u = o(!1), c = o(null);
-    Y(() => {
-      i.value = a.id ?? `custom-select-list-item-${Q()}`;
+    const l = t, a = e, i = o(void 0), c = o(!1), u = o(null);
+    J(() => {
+      i.value = a.id ?? `custom-select-list-item-${_()}`;
     }), C(
       () => [a.isGroupTitle, a.showDivider],
       () => {
-        u.value = !!(a.isGroupTitle || a.showDivider);
+        c.value = !!(a.isGroupTitle || a.showDivider);
       },
       {
         immediate: !0,
@@ -898,7 +898,7 @@ const Ja = (e) => {
     }
     return (h, k) => (v(), y("li", {
       ref_key: "_ref",
-      ref: c,
+      ref: u,
       id: i.value,
       class: U(
         n(O)("db-custom-select-list-item", a.class, {
@@ -906,7 +906,7 @@ const Ja = (e) => {
           "db-radio": e.type !== "checkbox" && !e.isGroupTitle
         })
       ),
-      "data-divider": n(V)(u.value)
+      "data-divider": n(V)(c.value)
     }, [
       e.isGroupTitle ? (v(), y("span", lt, B(e.groupTitle), 1)) : (v(), y("label", {
         key: 0,
@@ -1024,10 +1024,10 @@ const Ja = (e) => {
   },
   emits: ["update:value"],
   setup(e, { emit: t }) {
-    const l = t, a = e, i = o(void 0), u = o(void 0), c = o(void 0), f = o(void 0), g = o(void 0), h = o(void 0), k = o(void 0), $ = o(void 0), m = o(""), s = o(void 0), d = o(null);
-    Y(() => {
-      const N = a.id ?? `input-${Q()}`;
-      i.value = N, u.value = N + ce, c.value = N + re, f.value = N + ve, h.value = N + Qe, g.value = a.invalidMessage || ee;
+    const l = t, a = e, i = o(void 0), c = o(void 0), u = o(void 0), f = o(void 0), g = o(void 0), h = o(void 0), k = o(void 0), $ = o(void 0), m = o(""), s = o(void 0), d = o(null);
+    J(() => {
+      const N = a.id ?? `input-${_()}`;
+      i.value = N, c.value = N + ce, u.value = N + re, f.value = N + ve, h.value = N + Qe, g.value = a.invalidMessage || ee;
     }), he(() => {
       s.value?.abort();
     }), C(
@@ -1044,7 +1044,7 @@ const Ja = (e) => {
       () => {
         if (i.value) {
           const N = i.value + ce;
-          u.value = N, c.value = i.value + re, f.value = i.value + ve, h.value = a.dataListId ?? i.value + Qe, _(a.message, a.showMessage) && (k.value = N), I();
+          c.value = N, u.value = i.value + re, f.value = i.value + ve, h.value = a.dataListId ?? i.value + Qe, Z(a.message, a.showMessage) && (k.value = N), I();
         }
       },
       {
@@ -1087,7 +1087,7 @@ const Ja = (e) => {
       return !!(a.validMessage ?? a.validation === "valid");
     }
     function I() {
-      !d.value?.validity.valid || a.validation === "invalid" ? (k.value = f.value, g.value = a.invalidMessage || d.value?.validationMessage || ee, ue() && (m.value = g.value, K(() => m.value = "", 1e3))) : b() && d.value?.validity.valid && (a.required || a.minLength || a.maxLength || a.pattern) ? (k.value = c.value, ue() && (m.value = a.validMessage ?? se, K(() => m.value = "", 1e3))) : _(a.message, a.showMessage) ? k.value = u.value : k.value = void 0;
+      !d.value?.validity.valid || a.validation === "invalid" ? (k.value = f.value, g.value = a.invalidMessage || d.value?.validationMessage || ee, ue() && (m.value = g.value, K(() => m.value = "", 1e3))) : b() && d.value?.validity.valid && (a.required || a.minLength || a.maxLength || a.pattern) ? (k.value = u.value, ue() && (m.value = a.validMessage ?? se, K(() => m.value = "", 1e3))) : Z(a.message, a.showMessage) ? k.value = c.value : k.value = void 0;
     }
     function T(N, X) {
       a.input && a.input(N), $.value = N.target.value, a.onInput && a.onInput(N), de(l, N), I();
@@ -1168,21 +1168,21 @@ const Ja = (e) => {
         }, B(A.label), 9, vt))), 128))
       ], 8, rt)) : z("", !0),
       F(N.$slots, "default"),
-      n(_)(e.message, e.showMessage) ? (v(), J(Z, {
+      n(Z)(e.message, e.showMessage) ? (v(), Y(Q, {
         key: 1,
         size: e.messageSize || "small",
         icon: e.messageIcon,
-        id: u.value
+        id: c.value
       }, {
         default: G(() => [
           D(B(e.message), 1)
         ]),
         _: 1
       }, 8, ["size", "icon", "id"])) : z("", !0),
-      b() ? (v(), J(Z, {
+      b() ? (v(), Y(Q, {
         key: 2,
         semantic: "successful",
-        id: c.value,
+        id: u.value,
         size: e.validMessageSize || "small"
       }, {
         default: G(() => [
@@ -1190,7 +1190,7 @@ const Ja = (e) => {
         ]),
         _: 1
       }, 8, ["id", "size"])) : z("", !0),
-      te(Z, {
+      te(Q, {
         semantic: "critical",
         id: f.value,
         size: e.invalidMessageSize || "small"
@@ -1220,19 +1220,19 @@ const Ja = (e) => {
     width: { default: void 0 }
   },
   setup(e) {
-    const t = e, l = o(Ie), a = o(!1), i = o(void 0), u = o(void 0), c = o(null);
-    Y(() => {
-      l.value = t.id || "tooltip-" + Q(), a.value = !0;
+    const t = e, l = o(Te), a = o(!1), i = o(void 0), c = o(void 0), u = o(null);
+    J(() => {
+      l.value = t.id || "tooltip-" + _(), a.value = !0;
     }), C(
-      () => [c.value, a.value],
+      () => [u.value, a.value],
       () => {
-        if (c.value && a.value && l.value) {
+        if (u.value && a.value && l.value) {
           const d = h();
           d && (["mouseenter", "focusin"].forEach((b) => {
             d.addEventListener(b, () => s(d));
           }), d.addEventListener("keydown", (b) => g(b)), ["mouseleave", "focusout"].forEach((b) => {
             d.addEventListener(b, () => m());
-          }), d.dataset.hasTooltip = "true", t.variant === "label" ? d.setAttribute("aria-labelledby", l.value) : d.setAttribute("aria-describedby", l.value)), typeof window < "u" && "IntersectionObserver" in window && (u.value = new IntersectionObserver((b) => {
+          }), d.dataset.hasTooltip = "true", t.variant === "label" ? d.setAttribute("aria-labelledby", l.value) : d.setAttribute("aria-describedby", l.value)), typeof window < "u" && "IntersectionObserver" in window && (c.value = new IntersectionObserver((b) => {
             const I = b.find(({ target: T }) => T === h());
             I && !I.isIntersecting && g(!1);
           })), a.value = !1;
@@ -1247,40 +1247,40 @@ const Ja = (e) => {
       d.stopPropagation();
     }
     function g(d) {
-      (!d || d.key === "Escape") && c.value && getComputedStyle(c.value).visibility === "visible" && h().blur();
+      (!d || d.key === "Escape") && u.value && getComputedStyle(u.value).visibility === "visible" && h().blur();
     }
     function h() {
-      let d = c.value.parentElement;
+      let d = u.value.parentElement;
       return d && d.localName.includes("tooltip") && (d = d.parentElement), d;
     }
     function k(d) {
-      d && c.value && K(() => {
-        c.value && ua(
-          c.value,
+      d && u.value && K(() => {
+        u.value && ua(
+          u.value,
           d,
           t.placement ?? "bottom"
         );
       }, 1);
     }
     function $(d, b) {
-      d?.target?.contains && d?.target?.contains(c.value) && k(b);
+      d?.target?.contains && d?.target?.contains(u.value) && k(b);
     }
     function m() {
       i.value && new oe().removeCallback(
         i.value
-      ), u.value?.unobserve(h());
+      ), c.value?.unobserve(h());
     }
     function s(d) {
       i.value = new oe().addCallback(
         (b) => $(b, d)
-      ), k(d), u.value?.observe(h());
+      ), k(d), c.value?.observe(h());
     }
     return (d, b) => (v(), y("i", {
       role: "tooltip",
       "aria-hidden": "true",
       "data-gap": "true",
       ref_key: "_ref",
-      ref: c,
+      ref: u,
       class: U(n(O)("db-tooltip", t.class)),
       id: l.value,
       "data-emphasis": e.emphasis,
@@ -1319,13 +1319,13 @@ const Ja = (e) => {
   },
   setup(e) {
     const t = e, l = o(null);
-    function a(u) {
-      u && (u.stopPropagation(), t.onRemove && t.onRemove(u));
+    function a(c) {
+      c && (c.stopPropagation(), t.onRemove && t.onRemove(c));
     }
     function i() {
       return t.removeButton ? t.removeButton : aa;
     }
-    return (u, c) => (v(), y("div", {
+    return (c, u) => (v(), y("div", {
       ref_key: "_ref",
       ref: l,
       id: e.id,
@@ -1338,8 +1338,8 @@ const Ja = (e) => {
       "data-no-text": n(V)(e.noText),
       "data-overflow": n(V)(e.overflow)
     }, [
-      F(u.$slots, "content"),
-      F(u.$slots, "default"),
+      F(c.$slots, "content"),
+      F(c.$slots, "default"),
       e.text ? (v(), y(H, { key: 0 }, [
         D(B(e.text), 1)
       ], 64)) : z("", !0),
@@ -1351,7 +1351,7 @@ const Ja = (e) => {
         "data-no-text": "true",
         "data-variant": "ghost",
         type: "button",
-        onClick: c[0] || (c[0] = async (f) => a(f))
+        onClick: u[0] || (u[0] = async (f) => a(f))
       }, [
         te(ca, { variant: "label" }, {
           default: G(() => [
@@ -1434,10 +1434,10 @@ const Ja = (e) => {
   },
   emits: ["update:values"],
   setup(e, { emit: t }) {
-    const l = t, a = e, i = o(void 0), u = o(void 0), c = o(void 0), f = o(void 0), g = o(void 0), h = o(void 0), k = o(void 0), $ = o(void 0), m = o(void 0), s = o(void 0), d = o("no-validation"), b = o(!1), I = o(void 0), T = o(void 0), w = o(""), L = o(void 0), S = o(""), M = o([]), N = o(!1), X = o(!1), A = o(0), R = o([]), j = o([]), pe = o(!1), me = o(void 0), Ce = o(0), Fe = o(void 0), Ne = o(void 0), Re = o(void 0), ze = o(!1), xe = o(!1), ra = o(null), P = o(null), le = o(null), Ee = o(null), Ve = o(null);
-    Y(() => {
-      const r = a.id ?? `custom-select-${Q()}`;
-      i.value = r, u.value = r + ce, c.value = r + re, f.value = r + ve, h.value = r + Je, k.value = r + Ye, $.value = r + "-summary", m.value = r + De, L.value = r + "-selected-labels", s.value = r + "-info", g.value = a.invalidMessage || ee, typeof window < "u" && "IntersectionObserver" in window && (Ne.value = new IntersectionObserver((p) => {
+    const l = t, a = e, i = o(void 0), c = o(void 0), u = o(void 0), f = o(void 0), g = o(void 0), h = o(void 0), k = o(void 0), $ = o(void 0), m = o(void 0), s = o(void 0), d = o("no-validation"), b = o(!1), I = o(void 0), T = o(void 0), w = o(""), L = o(void 0), S = o(""), M = o([]), N = o(!1), X = o(!1), A = o(0), R = o([]), j = o([]), pe = o(!1), me = o(void 0), Ce = o(0), Fe = o(void 0), Ne = o(void 0), Re = o(void 0), ze = o(!1), Ie = o(!1), ra = o(null), P = o(null), le = o(null), Ee = o(null), Ve = o(null);
+    J(() => {
+      const r = a.id ?? `custom-select-${_()}`;
+      i.value = r, c.value = r + ce, u.value = r + re, f.value = r + ve, h.value = r + Je, k.value = r + Ye, $.value = r + "-summary", m.value = r + De, L.value = r + "-selected-labels", s.value = r + "-info", g.value = a.invalidMessage || ee, typeof window < "u" && "IntersectionObserver" in window && (Ne.value = new IntersectionObserver((p) => {
         if (P.value) {
           const x = p.find(({ target: ae }) => ae === P.value);
           x && !x.isIntersecting && P.value.open && (P.value.open = !1);
@@ -1450,7 +1450,7 @@ const Ja = (e) => {
       () => {
         P.value && P.value.addEventListener(
           "focusout",
-          (r) => $e(r)
+          (r) => xe(r)
         );
       },
       {
@@ -1462,7 +1462,7 @@ const Ja = (e) => {
       () => {
         if (i.value) {
           const r = i.value + ce;
-          k.value = i.value + Ye, h.value = i.value + Je, c.value = i.value + re, f.value = i.value + ve, m.value = i.value + De, _(a.message, a.showMessage) ? Le(r) : Le();
+          k.value = i.value + Ye, h.value = i.value + Je, u.value = i.value + re, f.value = i.value + ve, m.value = i.value + De, Z(a.message, a.showMessage) ? Le(r) : Le();
         }
       },
       {
@@ -1563,7 +1563,7 @@ const Ja = (e) => {
     ), C(
       () => [R.value, A.value],
       () => {
-        R.value?.length === 0 ? (ze.value = !1, xe.value = !1) : R.value?.length === A.value ? (xe.value = !1, ze.value = !0) : R.value && (xe.value = !0);
+        R.value?.length === 0 ? (ze.value = !1, Ie.value = !1) : R.value?.length === A.value ? (Ie.value = !1, ze.value = !0) : R.value && (Ie.value = !0);
       },
       {
         immediate: !0,
@@ -1638,9 +1638,9 @@ const Ja = (e) => {
         flush: "post"
       }
     ), C(
-      () => [xe.value, Ee.value],
+      () => [Ie.value, Ee.value],
       () => {
-        Ee.value && (Ee.value.indeterminate = !!xe.value);
+        Ee.value && (Ee.value.indeterminate = !!Ie.value);
       },
       {
         immediate: !0,
@@ -1663,7 +1663,7 @@ const Ja = (e) => {
       return !!(a.validMessage ?? a.validation === "valid");
     }
     function Ge() {
-      le.value && (le.value.value = ha()), !le.value?.validity.valid || a.validation === "invalid" ? (Le(f.value), g.value = a.invalidMessage || le.value?.validationMessage || ee, ue() && (S.value = g.value, K(() => S.value = "", 1e3)), b.value && (d.value = a.validation ?? "invalid")) : Oe() && le.value?.validity.valid && a.required ? (Le(c.value), ue() && (S.value = a.validMessage ?? se, K(() => S.value = "", 1e3)), d.value = a.validation ?? "valid") : _(a.message, a.showMessage) ? (Le(u.value), d.value = a.validation ?? "no-validation") : (Le(m.value), d.value = a.validation ?? "no-validation");
+      le.value && (le.value.value = ha()), !le.value?.validity.valid || a.validation === "invalid" ? (Le(f.value), g.value = a.invalidMessage || le.value?.validationMessage || ee, ue() && (S.value = g.value, K(() => S.value = "", 1e3)), b.value && (d.value = a.validation ?? "invalid")) : Oe() && le.value?.validity.valid && a.required ? (Le(u.value), ue() && (S.value = a.validMessage ?? se, K(() => S.value = "", 1e3)), d.value = a.validation ?? "valid") : Z(a.message, a.showMessage) ? (Le(c.value), d.value = a.validation ?? "no-validation") : (Le(m.value), d.value = a.validation ?? "no-validation");
     }
     function fa(r) {
       a.onDropdownToggle && (r.stopPropagation(), a.onDropdownToggle(r)), r.target instanceof HTMLDetailsElement && r.target.open ? (me.value = new fe().addCallback(
@@ -1702,7 +1702,7 @@ const Ja = (e) => {
       return `${aa} ${Se(r)}`;
     }
     function ya(r, p) {
-      p && p.stopPropagation(), We(r.value), Te();
+      p && p.stopPropagation(), We(r.value), $e();
     }
     function Pe() {
       if (P.value) {
@@ -1768,14 +1768,14 @@ const Ja = (e) => {
                 }
               }
             } else
-              p.getAttribute("type") === "search" && (r.key === "ArrowUp" || r.key === "ArrowLeft") ? ($e(void 0, !0), Te()) : Ae(p);
+              p.getAttribute("type") === "search" && (r.key === "ArrowUp" || r.key === "ArrowLeft") ? (xe(void 0, !0), $e()) : Ae(p);
         }
       } else (r.key === "ArrowDown" || r.key === "ArrowRight") && (Pe(), P.value && (P.value.open = !0), He());
       r.stopPropagation(), r.preventDefault();
     }
     function wa(r) {
       if (r.stopPropagation(), r.key === "Escape" && P.value?.open)
-        $e(void 0, !0), Te();
+        xe(void 0, !0), $e();
       else if (r.key === "Enter" && P.value?.open) {
         if (self.document) {
           const p = self.document.activeElement;
@@ -1783,10 +1783,10 @@ const Ja = (e) => {
         }
       } else (r.key === "ArrowDown" || r.key === "ArrowUp" || r.key === "ArrowLeft" || r.key === "ArrowRight") && ka(r);
     }
-    function $e(r, p) {
+    function xe(r, p) {
       if (P.value) {
         if (p)
-          P.value.open = !1, Te();
+          P.value.open = !1, $e();
         else if (P.value.open && r && r.relatedTarget) {
           const x = r.relatedTarget;
           P.value.contains(x) || K(() => P.value.open = !1, 1);
@@ -1811,7 +1811,7 @@ const Ja = (e) => {
       ), Ce.value = (/* @__PURE__ */ new Date()).getTime());
     }
     function We(r) {
-      r && (a.multiple ? R.value?.includes(r) ? Be(R.value.filter((p) => p !== r)) : Be([...R.value || [], r]) : (Be([r]), $e(void 0, !0)));
+      r && (a.multiple ? R.value?.includes(r) ? Be(R.value.filter((p) => p !== r)) : Be([...R.value || [], r]) : (Be([r]), xe(void 0, !0)));
     }
     function Ba(r) {
       if (r.stopPropagation(), R.value?.length === A.value)
@@ -1865,9 +1865,9 @@ const Ja = (e) => {
       );
     }
     function pa(r) {
-      r.stopPropagation(), Be([]), Te();
+      r.stopPropagation(), Be([]), $e();
     }
-    function Te() {
+    function $e() {
       P.value && P.value.querySelector("summary")?.focus();
     }
     function La(r) {
@@ -1937,7 +1937,7 @@ const Ja = (e) => {
               D(" " + B(w.value), 1)
             ], 8, Lt)) : z("", !0),
             e.selectedType === "tag" ? (v(), y("div", xt, [
-              (v(!0), y(H, null, ge(M.value, (x, ae) => (v(), J(bt, {
+              (v(!0), y(H, null, ge(M.value, (x, ae) => (v(), Y(bt, {
                 key: ae,
                 emphasis: "strong",
                 behavior: "removable",
@@ -1968,7 +1968,7 @@ const Ja = (e) => {
                   onInput: (x) => Xe(x)
                 }, null, 8, ["name", "form", "value", "label", "placeholder", "ariaDescribedBy", "onInput"])
               ])) : z("", !0),
-              pe.value || e.showLoading ? (v(), J(Z, {
+              pe.value || e.showLoading ? (v(), Y(Q, {
                 key: 1,
                 id: s.value,
                 icon: e.showLoading ? "circular_arrows" : void 0,
@@ -2000,7 +2000,7 @@ const Ja = (e) => {
                   label: e.listLabel ?? e.label ?? n(ye)
                 }, {
                   default: G(() => [
-                    (v(!0), y(H, null, ge(j.value, (x, ae) => (v(), J(nt, {
+                    (v(!0), y(H, null, ge(j.value, (x, ae) => (v(), Y(nt, {
                       key: ae,
                       type: e.multiple ? "checkbox" : "radio",
                       showDivider: x.showDivider,
@@ -2032,7 +2032,7 @@ const Ja = (e) => {
                   size: "small",
                   name: i.value,
                   form: i.value,
-                  onClick: (x) => $e(void 0, !0)
+                  onClick: (x) => xe(void 0, !0)
                 }, {
                   default: G(() => [
                     D(B(e.mobileCloseButtonText ?? n(qe)), 1)
@@ -2045,7 +2045,7 @@ const Ja = (e) => {
           }, 8, ["width"])
         ], 64)) : z("", !0)
       ], 40, Bt),
-      (e.showClearSelection ?? !0) && R.value?.length ? (v(), J(we, {
+      (e.showClearSelection ?? !0) && R.value?.length ? (v(), Y(we, {
         key: 0,
         icon: "cross",
         variant: "ghost",
@@ -2071,29 +2071,29 @@ const Ja = (e) => {
         "aria-hidden": n(V)(!0),
         id: m.value
       }, B(e.placeholder ?? e.label), 9, At),
-      n(_)(e.message, e.showMessage) ? (v(), J(Z, {
+      n(Z)(e.message, e.showMessage) ? (v(), Y(Q, {
         key: 1,
         size: "small",
         icon: e.messageIcon,
-        id: u.value
+        id: c.value
       }, {
         default: G(() => [
           D(B(e.message), 1)
         ]),
         _: 1
       }, 8, ["icon", "id"])) : z("", !0),
-      Oe() ? (v(), J(Z, {
+      Oe() ? (v(), Y(Q, {
         key: 2,
         size: "small",
         semantic: "successful",
-        id: c.value
+        id: u.value
       }, {
         default: G(() => [
           D(B(e.validMessage || n(se)), 1)
         ]),
         _: 1
       }, 8, ["id"])) : z("", !0),
-      te(Z, {
+      te(Q, {
         size: "small",
         semantic: "critical",
         id: f.value
@@ -2176,12 +2176,12 @@ const Ja = (e) => {
   },
   setup(e) {
     const t = e, l = o(!1), a = o(null), i = o(null);
-    Y(() => {
-      c(), l.value = !0;
+    J(() => {
+      u(), l.value = !0;
     }), C(
       () => [t.open],
       () => {
-        c();
+        u();
       },
       {
         immediate: !0,
@@ -2200,10 +2200,10 @@ const Ja = (e) => {
         flush: "post"
       }
     );
-    function u(f, g) {
+    function c(f, g) {
       f && (Ra(f) ? f.key === "Escape" && (f.preventDefault(), t.onClose && t.onClose(f)) : (g && (f.stopPropagation(), t.onClose && t.onClose(f)), f.target?.nodeName === "DIALOG" && f.type === "click" && t.backdrop !== "none" && t.onClose && t.onClose(f)));
     }
-    function c() {
+    function u() {
       if (a.value) {
         const f = !!t.open;
         f && !a.value.open && (i.value && (i.value.hidden = !1), t.position === "absolute" || t.backdrop === "none" || t.variant === "inside" ? a.value.show() : a.value.showModal()), !f && a.value.open && (i.value && (i.value.hidden = !0), K(() => {
@@ -2216,8 +2216,8 @@ const Ja = (e) => {
       id: e.id,
       ref_key: "_ref",
       ref: a,
-      onClick: g[0] || (g[0] = async (h) => u(h)),
-      onKeydown: g[1] || (g[1] = async (h) => u(h)),
+      onClick: g[0] || (g[0] = async (h) => c(h)),
+      onKeydown: g[1] || (g[1] = async (h) => c(h)),
       "data-position": e.position,
       "data-backdrop": e.backdrop,
       "data-direction": e.direction,
@@ -2242,7 +2242,7 @@ const Ja = (e) => {
             variant: "ghost",
             id: e.closeButtonId,
             noText: !0,
-            onClick: (h) => u(h, !0)
+            onClick: (h) => c(h, !0)
           }, {
             default: G(() => [
               D(B(e.closeButtonText ?? n(qe)), 1)
@@ -2311,18 +2311,18 @@ class Ot {
     if (!this.triangleData)
       return;
     if (t === "fill-gap") {
-      const c = `${this.triangleData.itemRect.height + 2 * this.triangleData.padding}px`, f = `${this.triangleData.parentElementWidth - this.triangleData.padding}px`;
+      const u = `${this.triangleData.itemRect.height + 2 * this.triangleData.padding}px`, f = `${this.triangleData.parentElementWidth - this.triangleData.padding}px`;
       return {
-        lb: `${f} ${c}`,
+        lb: `${f} ${u}`,
         lt: `${f} 0`,
         rt: "100% 0",
-        rb: `100% ${c}`
+        rb: `100% ${u}`
       };
     }
-    const l = this.getTriangleTipX(), a = this.getTriangleTipY(), i = `${l}px ${a}px`, u = `${l}px ${a}px`;
+    const l = this.getTriangleTipX(), a = this.getTriangleTipY(), i = `${l}px ${a}px`, c = `${l}px ${a}px`;
     return {
       lb: i,
-      lt: u,
+      lt: c,
       rt: "100% 0",
       rb: "100% 100%"
     };
@@ -2358,7 +2358,7 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
   },
   setup(e) {
     const t = e, l = o(!1), a = o(!1), i = o(null);
-    Y(() => {
+    J(() => {
       l.value = !0;
     }), C(
       () => [l.value, i.value],
@@ -2373,12 +2373,12 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
         flush: "post"
       }
     );
-    function u(f) {
+    function c(f) {
       const g = !q(t.drawerOpen, "drawerOpen");
       t.onToggle && t.onToggle(g);
     }
-    function c(f) {
-      Ut(f) && u();
+    function u(f) {
+      Ut(f) && c();
     }
     return (f, g) => (v(), y("header", {
       ref_key: "_ref",
@@ -2395,13 +2395,13 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
         closeButtonId: e.closeButtonId,
         closeButtonText: e.closeButtonText,
         open: n(q)(e.drawerOpen),
-        onClose: (h) => u()
+        onClose: (h) => c()
       }, {
         default: G(() => [
           E("div", Wt, [
             E("div", {
               class: "db-header-navigation",
-              onClick: g[0] || (g[0] = async (h) => c(h))
+              onClick: g[0] || (g[0] = async (h) => u(h))
             }, [
               F(f.$slots, "default")
             ]),
@@ -2436,7 +2436,7 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
               icon: "menu",
               variant: "ghost",
               noText: !0,
-              onClick: (h) => u()
+              onClick: (h) => c()
             }, {
               default: G(() => [
                 D(B(e.burgerMenuLabel ?? n(Ta)), 1)
@@ -2528,7 +2528,7 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
     function a(i) {
       t.onClick && t.onClick(i);
     }
-    return (i, u) => (v(), y("a", {
+    return (i, c) => (v(), y("a", {
       ref_key: "_ref",
       ref: l,
       id: e.id,
@@ -2545,7 +2545,7 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
       "data-variant": e.variant,
       "data-content": e.content || "internal",
       "data-wrap": n(V)(e.wrap),
-      onClick: u[0] || (u[0] = async (c) => a(c))
+      onClick: c[0] || (c[0] = async (u) => a(u))
     }, [
       e.text ? (v(), y(H, { key: 0 }, [
         D(B(e.text), 1)
@@ -2562,10 +2562,10 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
     autofocus: { type: [Boolean, String] }
   },
   setup(e) {
-    const t = e, l = o(Ie), a = o(null);
-    return Y(() => {
-      l.value = t.id || "navigation-" + Q();
-    }), (i, u) => (v(), y("nav", {
+    const t = e, l = o(Te), a = o(null);
+    return J(() => {
+      l.value = t.id || "navigation-" + _();
+    }), (i, c) => (v(), y("nav", {
       ref_key: "_ref",
       ref: a,
       id: l.value,
@@ -2601,15 +2601,15 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
     text: { default: void 0 }
   },
   setup(e) {
-    const t = e, l = o(!1), a = o(!1), i = o(!0), u = o(!1), c = o(!1), f = o(
-      "sub-navigation-" + Q()
+    const t = e, l = o(!1), a = o(!1), i = o(!0), c = o(!1), u = o(!1), f = o(
+      "sub-navigation-" + _()
     ), g = o(void 0), h = o(null);
-    Y(() => {
+    J(() => {
       l.value = !0;
     }), C(
       () => [t.subNavigationExpanded],
       () => {
-        t.subNavigationExpanded !== void 0 && (u.value = !!q(
+        t.subNavigationExpanded !== void 0 && (c.value = !!q(
           t.subNavigationExpanded,
           "subNavigationExpanded"
         ));
@@ -2635,15 +2635,15 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
       }
     );
     function k(s) {
-      s?.target?.nodeName === "A" && (c.value = !0, K(() => {
-        c.value = !1;
+      s?.target?.nodeName === "A" && (u.value = !0, K(() => {
+        u.value = !1;
       }, 1e3));
     }
     function $(s) {
-      t.onClick && (s.stopPropagation(), t.onClick(s)), a.value && (u.value = !0);
+      t.onClick && (s.stopPropagation(), t.onClick(s)), a.value && (c.value = !0);
     }
     function m(s) {
-      s.stopPropagation(), u.value = !1;
+      s.stopPropagation(), c.value = !1;
     }
     return (s, d) => (v(), y("li", {
       ref_key: "_ref",
@@ -2669,7 +2669,7 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
         E("button", {
           class: "db-navigation-item-expand-button",
           "aria-haspopup": a.value,
-          "aria-expanded": u.value,
+          "aria-expanded": c.value,
           disabled: n(q)(e.disabled, "disabled"),
           onClick: d[0] || (d[0] = async (b) => $(b))
         }, [
@@ -2679,7 +2679,7 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
         ], 8, oi),
         E("menu", {
           class: "db-sub-navigation",
-          "data-force-close": c.value,
+          "data-force-close": u.value,
           id: f.value,
           onClick: d[1] || (d[1] = async (b) => k(b))
         }, [
@@ -2736,7 +2736,7 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
     function a(i) {
       i && (i.stopPropagation(), t.onClose && t.onClose(i));
     }
-    return (i, u) => (v(), y("article", {
+    return (i, c) => (v(), y("article", {
       ref_key: "_ref",
       ref: l,
       id: e.id,
@@ -2749,22 +2749,22 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
       "data-link-variant": e.linkVariant
     }, [
       F(i.$slots, "image"),
-      n(_)(e.headline, e.showHeadline) ? (v(), y("header", ci, B(e.headline), 1)) : z("", !0),
+      n(Z)(e.headline, e.showHeadline) ? (v(), y("header", ci, B(e.headline), 1)) : z("", !0),
       E("p", null, [
         e.text ? (v(), y(H, { key: 0 }, [
           D(B(e.text), 1)
         ], 64)) : F(i.$slots, "default", { key: 1 })
       ]),
-      n(_)(e.timestamp, e.showTimestamp) ? (v(), y("span", ri, B(e.timestamp), 1)) : z("", !0),
+      n(Z)(e.timestamp, e.showTimestamp) ? (v(), y("span", ri, B(e.timestamp), 1)) : z("", !0),
       F(i.$slots, "link"),
-      n(q)(e.closeable, "closeable") ? (v(), J(we, {
+      n(q)(e.closeable, "closeable") ? (v(), Y(we, {
         key: 2,
         icon: "cross",
         variant: "ghost",
         size: "small",
         id: e.closeButtonId,
         noText: !0,
-        onClick: (c) => a(c)
+        onClick: (u) => a(u)
       }, {
         default: G(() => [
           D(B(e.closeButtonText ?? n(qe)), 1)
@@ -2790,13 +2790,13 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
   },
   setup(e) {
     const t = e, l = o(!1), a = o(null);
-    return typeof window < "u" && document && (t.documentOverflow === "hidden" || t.variant === "fixed" && t.documentOverflow !== "auto") && document.documentElement.classList.add("db-page-document"), Y(() => {
+    return typeof window < "u" && document && (t.documentOverflow === "hidden" || t.variant === "fixed" && t.documentOverflow !== "auto") && document.documentElement.classList.add("db-page-document"), J(() => {
       l.value = !t.fadeIn, document && t.fadeIn ? document.fonts.ready.then(() => {
         l.value = !0;
       }) : l.value = !0;
     }), he(() => {
       typeof window < "u" && document.documentElement.classList.contains("db-page-document") && document.documentElement.classList.remove("db-page-document");
-    }), (i, u) => (v(), y("div", {
+    }), (i, c) => (v(), y("div", {
       ref_key: "_ref",
       ref: a,
       id: e.id,
@@ -2832,23 +2832,23 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
     width: { default: void 0 }
   },
   setup(e) {
-    const t = e, l = o(!1), a = o(!1), i = o(void 0), u = o(void 0), c = o(null);
-    Y(() => {
+    const t = e, l = o(!1), a = o(!1), i = o(void 0), c = o(void 0), u = o(null);
+    J(() => {
       l.value = !0;
     }), C(
-      () => [c.value, l.value],
+      () => [u.value, l.value],
       () => {
-        if (c.value && l.value) {
+        if (u.value && l.value) {
           l.value = !1;
           const s = m();
-          s && (s.ariaHasPopup = "true"), g(), c.value.addEventListener(
+          s && (s.ariaHasPopup = "true"), g(), u.value.addEventListener(
             "keydown",
             (d) => f(d)
           ), ["mouseenter", "focusin"].forEach((d) => {
-            c.value.addEventListener(d, () => k());
+            u.value.addEventListener(d, () => k());
           }), ["mouseleave", "focusout"].forEach((d) => {
-            c.value.addEventListener(d, () => $());
-          }), typeof window < "u" && "IntersectionObserver" in window && (u.value = new IntersectionObserver((d) => {
+            u.value.addEventListener(d, () => $());
+          }), typeof window < "u" && "IntersectionObserver" in window && (c.value = new IntersectionObserver((d) => {
             const b = d.find(({ target: I }) => I === m());
             b && !b.isIntersecting && f(!1);
           }));
@@ -2859,9 +2859,9 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
         flush: "post"
       }
     ), C(
-      () => [c.value, a.value],
+      () => [u.value, a.value],
       () => {
-        if (c.value) {
+        if (u.value) {
           const s = m();
           s && (s.ariaExpanded = (!!a.value).toString());
         }
@@ -2873,29 +2873,29 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
     );
     function f(s) {
       if (!s || s.key === "Escape")
-        for (const d of Array.from(c.value.children))
+        for (const d of Array.from(u.value.children))
           d.blur();
     }
     function g() {
-      if (!c.value) return;
-      const s = c.value.querySelector("article");
+      if (!u.value) return;
+      const s = u.value.querySelector("article");
       s && K(() => {
         ua(
           s,
-          c.value,
+          u.value,
           t.placement ?? "bottom"
         );
       }, 1);
     }
     function h(s) {
-      s?.target?.contains && s?.target?.contains(c.value) && g();
+      s?.target?.contains && s?.target?.contains(u.value) && g();
     }
     function k() {
       a.value = !0, i.value = new oe().addCallback(
         (d) => h(d)
       ), g();
       const s = m();
-      s && u.value?.observe(s);
+      s && c.value?.observe(s);
     }
     function $(s) {
       {
@@ -2903,12 +2903,12 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
           i.value
         );
         const d = m();
-        d && u.value?.unobserve(d);
+        d && c.value?.unobserve(d);
       }
     }
     function m() {
-      if (c.value) {
-        const s = Array.from(c.value.children);
+      if (u.value) {
+        const s = Array.from(u.value.children);
         if (s.length >= 2) {
           const d = s[0];
           return d.tagName.includes("-") ? d.children?.length > 0 ? d.children[0] : null : d;
@@ -2918,7 +2918,7 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
     }
     return (s, d) => (v(), y("div", {
       ref_key: "_ref",
-      ref: c,
+      ref: u,
       id: e.id,
       class: U(n(O)("db-popover", t.class))
     }, [
@@ -2968,11 +2968,11 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
   },
   emits: ["update:value"],
   setup(e, { emit: t }) {
-    const l = t, a = e, i = o(!1), u = o(void 0), c = o(void 0), f = o(null);
-    Y(() => {
-      i.value = !0, u.value = a.id ?? `radio-${Q()}`;
+    const l = t, a = e, i = o(!1), c = o(void 0), u = o(void 0), f = o(null);
+    J(() => {
+      i.value = !0, c.value = a.id ?? `radio-${_()}`;
     }), he(() => {
-      c.value?.abort();
+      u.value?.abort();
     }), C(
       () => [i.value, f.value, a.checked],
       () => {
@@ -2986,8 +2986,8 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
       () => [f.value],
       () => {
         if (f.value) {
-          let m = c.value;
-          m || (m = new AbortController(), c.value = m), Me(
+          let m = u.value;
+          m || (m = new AbortController(), u.value = m), Me(
             f.value,
             (s) => {
               K(() => {
@@ -3028,7 +3028,7 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
       "data-hide-label": n(ne)(e.showLabel),
       "data-hide-asterisk": n(ne)(e.showRequiredAsterisk),
       class: U(n(O)("db-radio", a.class)),
-      for: u.value
+      for: c.value
     }, [
       E("input", {
         type: "radio",
@@ -3036,7 +3036,7 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
         "data-custom-validity": e.validation,
         ref_key: "_ref",
         ref: f,
-        id: u.value,
+        id: c.value,
         name: e.name,
         checked: n(q)(e.checked, "checked"),
         disabled: n(q)(e.disabled, "disabled"),
@@ -3064,18 +3064,16 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
     width: { default: void 0 }
   },
   setup(e) {
-    const t = e, l = o(Ie), a = o(null);
-    return Y(() => {
-      l.value = t.id || "section-" + Q();
-    }), (i, u) => (v(), y("section", {
+    const t = e, l = o(null);
+    return (a, i) => (v(), y("section", {
       ref_key: "_ref",
-      ref: a,
-      id: l.value,
+      ref: l,
+      id: e.id,
       class: U(n(O)("db-section", t.class)),
       "data-spacing": e.spacing || "medium",
       "data-width": e.width
     }, [
-      F(i.$slots, "default")
+      F(a.$slots, "default")
     ], 10, bi));
   }
 }), yi = ["data-variant", "data-hide-label", "data-hide-asterisk", "data-icon", "data-show-icon"], ki = ["for"], wi = ["aria-invalid", "data-custom-validity", "required", "disabled", "id", "name", "size", "value", "autocomplete", "multiple", "aria-describedby"], Si = {
@@ -3128,11 +3126,11 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
   },
   emits: ["update:value"],
   setup(e, { emit: t }) {
-    const l = t, a = e, i = o(void 0), u = o(void 0), c = o(void 0), f = o(void 0), g = o(void 0), h = o(""), k = o(void 0), $ = o(""), m = o(!1), s = o(""), d = o(void 0), b = o(null);
-    Y(() => {
+    const l = t, a = e, i = o(void 0), c = o(void 0), u = o(void 0), f = o(void 0), g = o(void 0), h = o(""), k = o(void 0), $ = o(""), m = o(!1), s = o(""), d = o(void 0), b = o(null);
+    J(() => {
       m.value = !0;
-      const A = a.id ?? `select-${Q()}`;
-      i.value = A, u.value = A + ce, c.value = A + re, f.value = A + ve, h.value = A + De, g.value = a.invalidMessage || ee;
+      const A = a.id ?? `select-${_()}`;
+      i.value = A, c.value = A + ce, u.value = A + re, f.value = A + ve, h.value = A + De, g.value = a.invalidMessage || ee;
     }), he(() => {
       d.value?.abort();
     }), C(
@@ -3149,7 +3147,7 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
       () => {
         if (i.value && m.value) {
           const A = i.value + ce, R = i.value + De;
-          u.value = A, c.value = i.value + re, f.value = i.value + ve, h.value = R, _(a.message, a.showMessage) ? k.value = A : a.placeholder ? k.value = R : k.value = void 0, T(), m.value = !1;
+          c.value = A, u.value = i.value + re, f.value = i.value + ve, h.value = R, Z(a.message, a.showMessage) ? k.value = A : a.placeholder ? k.value = R : k.value = void 0, T(), m.value = !1;
         }
       },
       {
@@ -3192,7 +3190,7 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
       return !!(a.validMessage ?? a.validation === "valid");
     }
     function T() {
-      !b.value?.validity.valid || a.validation === "invalid" ? (k.value = f.value, g.value = a.invalidMessage || b.value?.validationMessage || ee, ue() && (s.value = g.value, K(() => s.value = "", 1e3))) : I() && b.value?.validity.valid && a.required ? (k.value = c.value, ue() && (s.value = a.validMessage ?? se, K(() => s.value = "", 1e3))) : _(a.message, a.showMessage) ? k.value = u.value : a.placeholder ? k.value = h.value : k.value = void 0;
+      !b.value?.validity.valid || a.validation === "invalid" ? (k.value = f.value, g.value = a.invalidMessage || b.value?.validationMessage || ee, ue() && (s.value = g.value, K(() => s.value = "", 1e3))) : I() && b.value?.validity.valid && a.required ? (k.value = u.value, ue() && (s.value = a.validMessage ?? se, K(() => s.value = "", 1e3))) : Z(a.message, a.showMessage) ? k.value = c.value : a.placeholder ? k.value = h.value : k.value = void 0;
     }
     function w(A) {
       a.onClick && a.onClick(A);
@@ -3266,29 +3264,29 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
         class: "db-select-placeholder",
         id: h.value
       }, B(e.placeholder), 9, Ii)) : z("", !0),
-      n(_)(e.message, e.showMessage) ? (v(), J(Z, {
+      n(Z)(e.message, e.showMessage) ? (v(), Y(Q, {
         key: 1,
         size: "small",
         icon: e.messageIcon,
-        id: u.value
+        id: c.value
       }, {
         default: G(() => [
           D(B(e.message), 1)
         ]),
         _: 1
       }, 8, ["icon", "id"])) : z("", !0),
-      I() ? (v(), J(Z, {
+      I() ? (v(), Y(Q, {
         key: 2,
         size: "small",
         semantic: "successful",
-        id: c.value
+        id: u.value
       }, {
         default: G(() => [
           D(B(e.validMessage || n(se)), 1)
         ]),
         _: 1
       }, 8, ["id"])) : z("", !0),
-      te(Z, {
+      te(Q, {
         size: "small",
         semantic: "critical",
         id: f.value
@@ -3377,9 +3375,9 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
   },
   emits: ["update:checked"],
   setup(e, { emit: t }) {
-    const l = t, a = e, i = o(void 0), u = o(void 0), c = o(void 0), f = o(void 0), g = o(void 0), h = o(void 0), k = o(""), $ = o(void 0), m = o(null);
-    Y(() => {
-      i.value = a.id ?? `switch-${Q()}`, u.value = `${i.value}${ce}`, c.value = `${i.value}${re}`, f.value = `${i.value}${ve}`, d();
+    const l = t, a = e, i = o(void 0), c = o(void 0), u = o(void 0), f = o(void 0), g = o(void 0), h = o(void 0), k = o(""), $ = o(void 0), m = o(null);
+    J(() => {
+      i.value = a.id ?? `switch-${_()}`, c.value = `${i.value}${ce}`, u.value = `${i.value}${re}`, f.value = `${i.value}${ve}`, d();
     }), he(() => {
       $.value?.abort();
     }), C(
@@ -3433,13 +3431,13 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
         return;
       }
       if (s() && m.value?.validity?.valid && a.required) {
-        h.value = c.value, ue() && (k.value = a.validMessage ?? se, K(() => {
+        h.value = u.value, ue() && (k.value = a.validMessage ?? se, K(() => {
           k.value = "";
         }, 1e3));
         return;
       }
-      if (_(a.message, a.showMessage)) {
-        h.value = u.value;
+      if (Z(a.message, a.showMessage)) {
+        h.value = c.value;
         return;
       }
       h.value = void 0;
@@ -3490,11 +3488,11 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
           D(B(e.label), 1)
         ], 64)) : F(L.$slots, "default", { key: 1 })
       ], 8, Ci),
-      n(_)(e.message, e.showMessage) ? (v(), J(Z, {
+      n(Z)(e.message, e.showMessage) ? (v(), Y(Q, {
         key: 0,
         size: "small",
         semantic: "adaptive",
-        id: u.value,
+        id: c.value,
         icon: e.messageIcon
       }, {
         default: G(() => [
@@ -3502,18 +3500,18 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
         ]),
         _: 1
       }, 8, ["id", "icon"])) : z("", !0),
-      s() ? (v(), J(Z, {
+      s() ? (v(), Y(Q, {
         key: 1,
         size: "small",
         semantic: "successful",
-        id: c.value
+        id: u.value
       }, {
         default: G(() => [
           D(B(e.validMessage ?? n(se)), 1)
         ]),
         _: 1
       }, 8, ["id"])) : z("", !0),
-      te(Z, {
+      te(Q, {
         size: "small",
         semantic: "critical",
         id: f.value
@@ -3551,15 +3549,15 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
   },
   emits: ["update:checked"],
   setup(e, { emit: t }) {
-    const l = t, a = e, i = o(!1), u = o(void 0), c = o(!1), f = o(!1), g = o(void 0), h = o(null);
-    Y(() => {
-      g.value = k, c.value = !0;
+    const l = t, a = e, i = o(!1), c = o(void 0), u = o(!1), f = o(!1), g = o(void 0), h = o(null);
+    J(() => {
+      g.value = k, u.value = !0;
     }), he(() => {
       f.value && h.value && g.value && (h.value.closest("[role=tablist]")?.removeEventListener("change", g.value), f.value = !1);
     }), C(
-      () => [h.value, c.value, g.value],
+      () => [h.value, u.value, g.value],
       () => {
-        h.value && c.value && g.value && (c.value = !1, f.value || (h.value.closest("[role=tablist]")?.addEventListener("change", g.value), f.value = !0), (a.active || h.value.checked) && (i.value = !0, h.value.click()));
+        h.value && u.value && g.value && (u.value = !1, f.value || (h.value.closest("[role=tablist]")?.addEventListener("change", g.value), f.value = !0), (a.active || h.value.checked) && (i.value = !0, h.value.click()));
       },
       {
         immediate: !0,
@@ -3568,7 +3566,7 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
     ), C(
       () => [a.name],
       () => {
-        a.name && (u.value = a.name);
+        a.name && (c.value = a.name);
       },
       {
         immediate: !0,
@@ -3601,7 +3599,7 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
           checked: n(q)(e.checked, "checked"),
           ref_key: "_ref",
           ref: h,
-          name: u.value,
+          name: c.value,
           id: e.id,
           onInput: s[0] || (s[0] = async (d) => $(d))
         }, null, 40, Mi),
@@ -3622,10 +3620,10 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
     autofocus: { type: [Boolean, String] }
   },
   setup(e) {
-    const t = e, l = o(Ie), a = o(null);
-    return Y(() => {
-      l.value = t.id || "tab-list-" + Q();
-    }), (i, u) => (v(), y("div", {
+    const t = e, l = o(Te), a = o(null);
+    return J(() => {
+      l.value = t.id || "tab-list-" + _();
+    }), (i, c) => (v(), y("div", {
       ref_key: "_ref",
       ref: a,
       id: l.value,
@@ -3648,7 +3646,7 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
   },
   setup(e) {
     const t = e, l = o(null);
-    return Y(() => {
+    return J(() => {
     }), (a, i) => (v(), y("section", {
       role: "tabpanel",
       ref_key: "_ref",
@@ -3685,9 +3683,9 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
     tabSelect: {}
   },
   setup(e) {
-    const t = e, l = o("tabs-" + Q()), a = o(""), i = o(!1), u = o(!1), c = o(!1), f = o(null), g = o(void 0), h = o(null);
-    Y(() => {
-      l.value = t.id || l.value, a.value = `tabs-${t.name || Q()}`, i.value = !0;
+    const t = e, l = o("tabs-" + _()), a = o(""), i = o(!1), c = o(!1), u = o(!1), f = o(null), g = o(void 0), h = o(null);
+    J(() => {
+      l.value = t.id || l.value, a.value = `tabs-${t.name || _()}`, i.value = !0;
     }), he(() => {
       g.value?.disconnect(), g.value = void 0;
     }), C(
@@ -3721,7 +3719,7 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
     }
     function $(I) {
       const T = I.scrollWidth > I.clientWidth;
-      u.value = T && I.scrollLeft > 1, c.value = T && I.scrollLeft < I.scrollWidth - I.clientWidth;
+      c.value = T && I.scrollLeft > 1, u.value = T && I.scrollLeft < I.scrollWidth - I.clientWidth;
     }
     function m(I) {
       let T = Number(t.arrowScrollDistance) || 100;
@@ -3809,7 +3807,7 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
       onInput: T[0] || (T[0] = async (w) => b(w)),
       onChange: T[1] || (T[1] = async (w) => b(w))
     }, [
-      u.value ? (v(), J(we, {
+      c.value ? (v(), Y(we, {
         key: 0,
         class: "tabs-scroll-left",
         variant: "ghost",
@@ -3826,7 +3824,7 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
       e.tabs ? (v(), y(H, { key: 1 }, [
         te(zi, null, {
           default: G(() => [
-            (v(!0), y(H, null, ge(k(), (w, L) => (v(), J(Fi, {
+            (v(!0), y(H, null, ge(k(), (w, L) => (v(), Y(Fi, {
               key: e.name + "tab-item" + L,
               active: w.active,
               label: w.label,
@@ -3837,7 +3835,7 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
           ]),
           _: 1
         }),
-        (v(!0), y(H, null, ge(k(), (w, L) => (v(), J(Pi, {
+        (v(!0), y(H, null, ge(k(), (w, L) => (v(), Y(Pi, {
           key: e.name + "tab-panel" + L,
           content: w.content
         }, {
@@ -3847,7 +3845,7 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
           _: 2
         }, 1032, ["content"]))), 128))
       ], 64)) : z("", !0),
-      c.value ? (v(), J(we, {
+      u.value ? (v(), Y(we, {
         key: 2,
         class: "tabs-scroll-right",
         variant: "ghost",
@@ -3917,10 +3915,10 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
   },
   emits: ["update:value"],
   setup(e, { emit: t }) {
-    const l = t, a = e, i = o(void 0), u = o(void 0), c = o(void 0), f = o(void 0), g = o(void 0), h = o(void 0), k = o(""), $ = o(""), m = o(void 0), s = o(null);
-    Y(() => {
-      const S = a.id ?? `textarea-${Q()}`;
-      i.value = S, u.value = S + ce, c.value = S + re, f.value = S + ve, g.value = a.invalidMessage || ee;
+    const l = t, a = e, i = o(void 0), c = o(void 0), u = o(void 0), f = o(void 0), g = o(void 0), h = o(void 0), k = o(""), $ = o(""), m = o(void 0), s = o(null);
+    J(() => {
+      const S = a.id ?? `textarea-${_()}`;
+      i.value = S, c.value = S + ce, u.value = S + re, f.value = S + ve, g.value = a.invalidMessage || ee;
     }), he(() => {
       m.value?.abort();
     }), C(
@@ -3937,7 +3935,7 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
       () => {
         if (i.value) {
           const S = i.value + ce;
-          u.value = S, c.value = i.value + re, f.value = i.value + ve, _(a.message, a.showMessage) && (h.value = S), b();
+          c.value = S, u.value = i.value + re, f.value = i.value + ve, Z(a.message, a.showMessage) && (h.value = S), b();
         }
       },
       {
@@ -3980,7 +3978,7 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
       return !!(a.validMessage ?? a.validation === "valid");
     }
     function b() {
-      !s.value?.validity.valid || a.validation === "invalid" ? (h.value = f.value, g.value = a.invalidMessage || s.value?.validationMessage || ee, ue() && ($.value = g.value, K(() => $.value = "", 1e3))) : d() && s.value?.validity.valid && (a.required || a.minLength || a.maxLength) ? (h.value = c.value, ue() && ($.value = a.validMessage ?? se, K(() => $.value = "", 1e3))) : _(a.message, a.showMessage) ? h.value = u.value : h.value = void 0;
+      !s.value?.validity.valid || a.validation === "invalid" ? (h.value = f.value, g.value = a.invalidMessage || s.value?.validationMessage || ee, ue() && ($.value = g.value, K(() => $.value = "", 1e3))) : d() && s.value?.validity.valid && (a.required || a.minLength || a.maxLength) ? (h.value = u.value, ue() && ($.value = a.validMessage ?? se, K(() => $.value = "", 1e3))) : Z(a.message, a.showMessage) ? h.value = c.value : h.value = void 0;
     }
     function I(S, M) {
       a.input && a.input(S), k.value = S.target.value, a.onInput && a.onInput(S), de(l, S), b();
@@ -4030,29 +4028,29 @@ const Gt = ["id", "data-width", "data-on-forcing-mobile"], Wt = { class: "db-hea
         rows: n(ke)(e.rows, n(Ea)),
         cols: n(ke)(e.cols)
       }, B(e.value), 41, Gi),
-      n(_)(e.message, e.showMessage) ? (v(), J(Z, {
+      n(Z)(e.message, e.showMessage) ? (v(), Y(Q, {
         key: 0,
         size: "small",
         icon: e.messageIcon,
-        id: u.value
+        id: c.value
       }, {
         default: G(() => [
           D(B(e.message), 1)
         ]),
         _: 1
       }, 8, ["icon", "id"])) : z("", !0),
-      d() ? (v(), J(Z, {
+      d() ? (v(), Y(Q, {
         key: 1,
         size: "small",
         semantic: "successful",
-        id: c.value
+        id: u.value
       }, {
         default: G(() => [
           D(B(e.validMessage || n(se)), 1)
         ]),
         _: 1
       }, 8, ["id"])) : z("", !0),
-      te(Z, {
+      te(Q, {
         size: "small",
         semantic: "critical",
         id: f.value
@@ -4099,7 +4097,7 @@ export {
   qt as DBDrawer,
   xl as DBHeader,
   $l as DBIcon,
-  Z as DBInfotext,
+  Q as DBInfotext,
   ht as DBInput,
   El as DBLink,
   Fl as DBNavigation,
@@ -4124,7 +4122,7 @@ export {
   qe as DEFAULT_CLOSE_BUTTON,
   Qe as DEFAULT_DATALIST_ID_SUFFIX,
   Ca as DEFAULT_ICON,
-  Ie as DEFAULT_ID,
+  Te as DEFAULT_ID,
   ee as DEFAULT_INVALID_MESSAGE,
   ve as DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
   ye as DEFAULT_LABEL,
@@ -4216,6 +4214,6 @@ export {
   Ut as isEventTargetNavigationItem,
   Na as isIOSSafari,
   Ra as isKeyboardEvent,
-  _ as stringPropVisible,
-  Q as uuid
+  Z as stringPropVisible,
+  _ as uuid
 };