@db-ux/v-core-components 1.1.0 → 1.1.1

package/dist/db-ux.es.js

@@ -1,7 +1,7 @@
-var be = Object.defineProperty;
-var ge = (t, n, d) => n in t ? be(t, n, { enumerable: !0, configurable: !0, writable: !0, value: d }) : t[n] = d;
-var j = (t, n, d) => ge(t, typeof n != "symbol" ? n + "" : n, d);
-import { defineComponent as E, ref as o, createElementBlock as g, openBlock as m, unref as v, normalizeClass as N, renderSlot as I, Fragment as C, createTextVNode as L, toDisplayString as w, createCommentVNode as D, createElementVNode as _, createBlock as X, withCtx as z, onMounted as R, watch as M, createVNode as O, renderList as te, onUnmounted as ye } from "vue";
+var ge = Object.defineProperty;
+var ye = (t, n, d) => n in t ? ge(t, n, { enumerable: !0, configurable: !0, writable: !0, value: d }) : t[n] = d;
+var j = (t, n, d) => ye(t, typeof n != "symbol" ? n + "" : n, d);
+import { defineComponent as E, ref as u, createElementBlock as g, openBlock as m, unref as v, normalizeClass as N, renderSlot as w, Fragment as C, createTextVNode as L, toDisplayString as k, createCommentVNode as M, createElementVNode as I, createBlock as X, withCtx as R, onMounted as U, watch as z, createVNode as O, renderList as te, onUnmounted as Be } from "vue";
 const G = () => {
   var t, n;
   if (typeof window < "u") {
@@ -42,20 +42,20 @@ const G = () => {
     innerHeight: e
   } = window;
   return n >= 0 && d <= e;
-}, Be = (t) => {
-  var U;
+}, ke = (t) => {
+  var _;
   const {
     top: n,
     bottom: d,
     left: e,
     right: a
   } = t.getBoundingClientRect(), {
-    innerHeight: r,
+    innerHeight: c,
     innerWidth: l
   } = window;
-  let p = n < 0, i = d > r, h = e < 0, s = a > l;
-  const B = t.hasAttribute("data-outside-vy"), y = t.hasAttribute("data-outside-vx"), $ = (U = t == null ? void 0 : t.parentElement) == null ? void 0 : U.getBoundingClientRect();
-  return $ && (B && (t.getAttribute("data-outside-vy") === "top" ? p = $.top - (d - $.bottom) < 0 : i = $.bottom + ($.top - n) > r), y && (t.getAttribute("data-outside-vx") === "left" ? h = $.left - (a - $.right) < 0 : s = $.right + ($.left - e) > l)), {
+  let p = n < 0, i = d > c, h = e < 0, s = a > l;
+  const B = t.hasAttribute("data-outside-vy"), $ = t.hasAttribute("data-outside-vx"), D = (_ = t == null ? void 0 : t.parentElement) == null ? void 0 : _.getBoundingClientRect();
+  return D && (B && (t.getAttribute("data-outside-vy") === "top" ? p = D.top - (d - D.bottom) < 0 : i = D.bottom + (D.top - n) > c), $ && (t.getAttribute("data-outside-vx") === "left" ? h = D.left - (a - D.right) < 0 : s = D.right + (D.left - e) > l)), {
     outTop: p,
     outBottom: i,
     outLeft: h,
@@ -67,18 +67,18 @@ const G = () => {
     outBottom: d,
     outLeft: e,
     outRight: a
-  } = Be(t);
-  let r = {};
-  return n || d ? (r = {
+  } = ke(t);
+  let c = {};
+  return n || d ? (c = {
     vy: n ? "top" : "bottom"
-  }, t.setAttribute("data-outside-vy", r.vy)) : t.removeAttribute("data-outside-vy"), e || a ? (r = {
-    ...r,
+  }, t.setAttribute("data-outside-vy", c.vy)) : t.removeAttribute("data-outside-vy"), e || a ? (c = {
+    ...c,
     vx: a ? "right" : "left"
-  }, t.setAttribute("data-outside-vx", r.vx)) : t.removeAttribute("data-outside-vx"), r;
-}, ke = (t) => Array.isArray(t) && t.every((n) => typeof n == "string"), we = ["Mac", "iPhone", "iPad", "iPod"], Y = () => typeof window < "u" && we.some((t) => window.navigator.userAgent.includes(t)), H = (t, n) => new Promise(() => setTimeout(t, n)), V = (t) => t && String(t), P = (t) => {
+  }, t.setAttribute("data-outside-vx", c.vx)) : t.removeAttribute("data-outside-vx"), c;
+}, we = (t) => Array.isArray(t) && t.every((n) => typeof n == "string"), Ie = ["Mac", "iPhone", "iPad", "iPod"], Y = () => typeof window < "u" && Ie.some((t) => window.navigator.userAgent.includes(t)), H = (t, n) => new Promise(() => setTimeout(t, n)), V = (t) => t && String(t), P = (t) => {
   if (t != null)
     return V(!t);
-}, q = (t, n) => n === void 0 ? !!t : n && t, Ie = ["id", "type", "disabled", "aria-label", "data-icon", "data-hide-icon", "data-size", "data-state", "data-width", "data-variant", "data-no-text", "name", "value", "aria-describedby", "aria-expanded", "aria-pressed"], de = /* @__PURE__ */ E({
+}, q = (t, n) => n === void 0 ? !!t : n && t, _e = ["id", "type", "disabled", "aria-label", "data-icon", "data-hide-icon", "data-size", "data-state", "data-width", "data-variant", "data-no-text", "name", "value", "aria-describedby", "aria-expanded", "aria-pressed"], de = /* @__PURE__ */ E({
   __name: "button",
   props: {
     ariaexpanded: { type: Boolean, default: void 0 },
@@ -105,11 +105,11 @@ const G = () => {
     text: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(null);
+    const n = t, d = u(null);
     function e(a) {
       n.onClick && n.onClick(a);
     }
-    return (a, r) => (m(), g("button", {
+    return (a, c) => (m(), g("button", {
       ref_key: "_ref",
       ref: d,
       id: a.id,
@@ -129,36 +129,36 @@ const G = () => {
       "aria-describedby": a.describedbyid,
       "aria-expanded": a.ariaexpanded,
       "aria-pressed": a.ariapressed,
-      onClick: r[0] || (r[0] = async (l) => e(l))
+      onClick: c[0] || (c[0] = async (l) => e(l))
     }, [
       a.text ? (m(), g(C, { key: 0 }, [
-        L(w(a.text), 1)
-      ], 64)) : I(a.$slots, "default", { key: 1 })
-    ], 10, Ie));
+        L(k(a.text), 1)
+      ], 64)) : w(a.$slots, "default", { key: 1 })
+    ], 10, _e));
   }
-}), ee = "OVERWRITE_DEFAULT_ID", le = "LABEL SHOULD BE SET", fe = " ", K = "-message", J = "-valid-message", Q = "-invalid-message", oe = "-placeholder", ue = "-datalist", Z = "TODO: Add a validMessage", x = "TODO: Add an invalidMessage", _e = "Back", $e = "BurgerMenu", Le = "brand", Ee = 4, ce = "Close Button", vn = "density", pn = "color";
+}), ee = "OVERWRITE_DEFAULT_ID", le = "LABEL SHOULD BE SET", fe = " ", K = "-message", J = "-valid-message", Q = "-invalid-message", oe = "-placeholder", ue = "-datalist", Z = "TODO: Add a validMessage", x = "TODO: Add an invalidMessage", $e = "Back", Le = "BurgerMenu", Ee = "brand", Ne = 4, ce = "Close Button", vn = "density", pn = "color";
 var ve = /* @__PURE__ */ ((t) => (t.FUNCTIONAL = "functional", t.REGULAR = "regular", t.EXPRESSIVE = "expressive", t))(ve || {});
 const hn = Object.entries(ve).map(([, t]) => t);
 var pe = /* @__PURE__ */ ((t) => (t.PRIMARY = "primary", t))(pe || {}), he = /* @__PURE__ */ ((t) => (t.NEUTRAL_BG_LEVEL_1 = "neutral-bg-basic-level-1", t.NEUTRAL_BG_LEVEL_2 = "neutral-bg-basic-level-2", t.NEUTRAL_BG_LEVEL_3 = "neutral-bg-basic-level-3", t.NEUTRAL_BG_TRANSPARENT_SEMI = "neutral-bg-basic-transparent-semi", t.NEUTRAL_BG_TRANSPARENT_FULL = "neutral-bg-basic-transparent-full", t.BRAND_BG_LEVEL_1 = "brand-bg-basic-level-1", t.BRAND_BG_LEVEL_2 = "brand-bg-basic-level-2", t.BRAND_BG_LEVEL_3 = "brand-bg-basic-level-3", t.BRAND_BG_TRANSPARENT_SEMI = "brand-bg-basic-transparent-semi", t.BRAND_BG_TRANSPARENT_FULL = "brand-bg-basic-transparent-full", t.SUCCESSFUL_BG_LEVEL_1 = "successful-bg-basic-level-1", t.SUCCESSFUL_BG_LEVEL_2 = "successful-bg-basic-level-2", t.SUCCESSFUL_BG_LEVEL_3 = "successful-bg-basic-level-3", t.SUCCESSFUL_BG_TRANSPARENT_SEMI = "successful-bg-basic-transparent-semi", t.SUCCESSFUL_BG_TRANSPARENT_FULL = "successful-bg-basic-transparent-full", t.CRITICAL_BG_LEVEL_1 = "critical-bg-basic-level-1", t.CRITICAL_BG_LEVEL_2 = "critical-bg-basic-level-2", t.CRITICAL_BG_LEVEL_3 = "critical-bg-basic-level-3", t.CRITICAL_BG_TRANSPARENT_SEMI = "critical-bg-basic-transparent-semi", t.CRITICAL_BG_TRANSPARENT_Full = "critical-bg-basic-transparent-full", t.WARNING_BG_LEVEL_1 = "warning-bg-basic-level-1", t.WARNING_BG_LEVEL_2 = "warning-bg-basic-level-2", t.WARNING_BG_LEVEL_3 = "warning-bg-basic-level-3", t.WARNING_BG_TRANSPARENT_SEMI = "warning-bg-basic-transparent-semi", t.WARNING_BG_TRANSPARENT_FULL = "warning-bg-basic-transparent-full", t.INFORMATIONAL_BG_LEVEL_1 = "informational-bg-basic-level-1", t.INFORMATIONAL_BG_LEVEL_2 = "informational-bg-basic-level-2", t.INFORMATIONAL_BG_LEVEL_3 = "informational-bg-basic-level-3", t.INFORMATIONAL_BG_TRANSPARENT_SEMI = "informational-bg-basic-transparent-semi", t.INFORMATIONAL_BG_TRANSPARENT_FULL = "informational-bg-basic-transparent-full", t))(he || {});
 const mn = Object.entries(he).map(([, t]) => t), bn = Object.entries(pe).map(([, t]) => t);
 var me = /* @__PURE__ */ ((t) => (t.CRITICAL = "critical", t.INFORMATIONAL = "informational", t.WARNING = "warning", t.SUCCESSFUL = "successful", t))(me || {});
-const gn = Object.entries(me).map(([, t]) => t), Ne = {
+const gn = Object.entries(me).map(([, t]) => t), Ae = {
   width: 390,
   height: 884
-}, Ae = {
+}, Fe = {
   width: 1920,
   height: 1280
 }, yn = [{
   name: "desktop",
-  ...Ae
+  ...Fe
 }, {
   name: "tablet",
   width: 768,
   height: 1024
 }, {
   name: "mobile",
-  ...Ne
-}], Fe = ["id", "aria-live", "data-semantic", "data-variant", "data-icon", "data-hide-icon", "data-link-variant"], Te = { key: 0 }, Se = { key: 1 }, Bn = /* @__PURE__ */ E({
+  ...Ae
+}], Te = ["id", "aria-live", "data-semantic", "data-variant", "data-icon", "data-hide-icon", "data-link-variant"], Se = { key: 0 }, Ce = { key: 1 }, Bn = /* @__PURE__ */ E({
   __name: "notification",
   props: {
     ariaLive: { default: void 0 },
@@ -189,11 +189,11 @@ const gn = Object.entries(me).map(([, t]) => t), Ne = {
     text: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(null);
+    const n = t, d = u(null);
     function e(a) {
       n.onClose && n.onClose();
     }
-    return (a, r) => (m(), g("article", {
+    return (a, c) => (m(), g("article", {
       ref_key: "_ref",
       ref: d,
       id: a.id,
@@ -205,15 +205,15 @@ const gn = Object.entries(me).map(([, t]) => t), Ne = {
       "data-hide-icon": v(P)(a.showIcon),
       "data-link-variant": a.linkVariant
     }, [
-      I(a.$slots, "image"),
-      v(q)(a.headline, a.showHeadline) ? (m(), g("header", Te, w(a.headline), 1)) : D("", !0),
-      _("p", null, [
+      w(a.$slots, "image"),
+      v(q)(a.headline, a.showHeadline) ? (m(), g("header", Se, k(a.headline), 1)) : M("", !0),
+      I("p", null, [
         a.text ? (m(), g(C, { key: 0 }, [
-          L(w(a.text), 1)
-        ], 64)) : I(a.$slots, "default", { key: 1 })
+          L(k(a.text), 1)
+        ], 64)) : w(a.$slots, "default", { key: 1 })
       ]),
-      v(q)(a.timestamp, a.showTimestamp) ? (m(), g("span", Se, w(a.timestamp), 1)) : D("", !0),
-      I(a.$slots, "link"),
+      v(q)(a.timestamp, a.showTimestamp) ? (m(), g("span", Ce, k(a.timestamp), 1)) : M("", !0),
+      w(a.$slots, "link"),
       a.closeable ? (m(), X(de, {
         key: 2,
         icon: "cross",
@@ -223,14 +223,14 @@ const gn = Object.entries(me).map(([, t]) => t), Ne = {
         noText: !0,
         onClick: (l) => e()
       }, {
-        default: z(() => [
-          L(w(a.closeButtonText ?? v(ce)), 1)
+        default: R(() => [
+          L(k(a.closeButtonText ?? v(ce)), 1)
         ]),
         _: 1
-      }, 8, ["id", "onClick"])) : D("", !0)
-    ], 10, Fe));
+      }, 8, ["id", "onClick"])) : M("", !0)
+    ], 10, Te));
   }
-}), Ce = ["id", "data-semantic", "data-size", "data-emphasis", "data-placement", "data-label"], kn = /* @__PURE__ */ E({
+}), De = ["id", "data-semantic", "data-size", "data-emphasis", "data-placement", "data-label"], kn = /* @__PURE__ */ E({
   __name: "badge",
   props: {
     placement: { default: void 0 },
@@ -247,23 +247,23 @@ const gn = Object.entries(me).map(([, t]) => t), Ne = {
     text: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(!1), e = o(null);
-    return R(() => {
+    const n = t, d = u(!1), e = u(null);
+    return U(() => {
       d.value = !0;
-    }), M(
+    }), z(
       () => [e.value, d.value],
       () => {
         var a;
         if (e.value && d.value && (a = n.placement) != null && a.startsWith("corner")) {
-          let r = e.value.parentElement;
-          r && r.localName.includes("badge") && (r = r.parentElement), r && r.setAttribute("data-has-badge", "true");
+          let c = e.value.parentElement;
+          c && c.localName.includes("badge") && (c = c.parentElement), c && c.setAttribute("data-has-badge", "true");
         }
       },
       {
         immediate: !0,
         flush: "post"
       }
-    ), (a, r) => {
+    ), (a, c) => {
       var l;
       return m(), g("span", {
         ref_key: "_ref",
@@ -277,12 +277,12 @@ const gn = Object.entries(me).map(([, t]) => t), Ne = {
         "data-label": ((l = a.placement) == null ? void 0 : l.startsWith("corner")) && (a.label ?? v(le))
       }, [
         a.text ? (m(), g(C, { key: 0 }, [
-          L(w(a.text), 1)
-        ], 64)) : I(a.$slots, "default", { key: 1 })
-      ], 10, Ce);
+          L(k(a.text), 1)
+        ], 64)) : w(a.$slots, "default", { key: 1 })
+      ], 10, De);
     };
   }
-}), De = ["data-icon", "data-hide-icon", "id"], wn = /* @__PURE__ */ E({
+}), Me = ["data-icon", "data-hide-icon", "id"], wn = /* @__PURE__ */ E({
   __name: "brand",
   props: {
     hideLogo: { type: Boolean, default: void 0 },
@@ -297,21 +297,21 @@ const gn = Object.entries(me).map(([, t]) => t), Ne = {
     text: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(null);
+    const n = t, d = u(null);
     return (e, a) => (m(), g("div", {
       ref_key: "_ref",
       ref: d,
-      "data-icon": e.hideLogo ? "none" : e.icon ?? v(Le),
+      "data-icon": e.hideLogo ? "none" : e.icon ?? v(Ee),
       "data-hide-icon": v(P)(e.showIcon),
       id: e.id,
       class: N(v(A)("db-brand", n.class))
     }, [
       e.text ? (m(), g(C, { key: 0 }, [
-        L(w(e.text), 1)
-      ], 64)) : I(e.$slots, "default", { key: 1 })
-    ], 10, De));
+        L(k(e.text), 1)
+      ], 64)) : w(e.$slots, "default", { key: 1 })
+    ], 10, Me));
   }
-}), Me = ["id", "data-behavior", "data-elevation-level", "data-spacing", "role", "tabIndex"], In = /* @__PURE__ */ E({
+}), ze = ["id", "data-behavior", "data-elevation-level", "data-spacing", "role", "tabIndex"], In = /* @__PURE__ */ E({
   __name: "card",
   props: {
     behavior: { default: void 0 },
@@ -326,11 +326,11 @@ const gn = Object.entries(me).map(([, t]) => t), Ne = {
     spacing: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(null);
+    const n = t, d = u(null);
     function e(a) {
       n.onClick && n.onClick(a);
     }
-    return (a, r) => (m(), g("div", {
+    return (a, c) => (m(), g("div", {
       ref_key: "_ref",
       ref: d,
       id: a.id,
@@ -340,14 +340,14 @@ const gn = Object.entries(me).map(([, t]) => t), Ne = {
       "data-spacing": a.spacing,
       role: a.behavior === "interactive" ? "button" : void 0,
       tabIndex: a.behavior === "interactive" ? 0 : void 0,
-      onClick: r[0] || (r[0] = async (l) => e(l))
+      onClick: c[0] || (c[0] = async (l) => e(l))
     }, [
-      I(a.$slots, "default")
-    ], 10, Me));
+      w(a.$slots, "default")
+    ], 10, ze));
   }
 }), ae = (t, n, d = "value") => {
   t(`update:${d}`, n.target[d]);
-}, ze = ["id", "data-icon", "data-semantic", "data-size", "data-hide-icon-before"], W = /* @__PURE__ */ E({
+}, Re = ["id", "data-icon", "data-semantic", "data-size", "data-hide-icon-before"], W = /* @__PURE__ */ E({
   __name: "infotext",
   props: {
     children: { default: void 0 },
@@ -363,7 +363,7 @@ const gn = Object.entries(me).map(([, t]) => t), Ne = {
     text: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(null);
+    const n = t, d = u(null);
     return (e, a) => (m(), g("span", {
       ref_key: "_ref",
       ref: d,
@@ -375,11 +375,11 @@ const gn = Object.entries(me).map(([, t]) => t), Ne = {
       "data-hide-icon-before": v(P)(e.showIcon ?? !0)
     }, [
       e.text ? (m(), g(C, { key: 0 }, [
-        L(w(e.text), 1)
-      ], 64)) : I(e.$slots, "default", { key: 1 })
-    ], 10, ze));
+        L(k(e.text), 1)
+      ], 64)) : w(e.$slots, "default", { key: 1 })
+    ], 10, Re));
   }
-}), Re = ["data-size", "data-hide-label"], Ue = ["for"], Pe = ["aria-invalid", "data-custom-validity", "id", "name", "checked", "disabled", "value", "required", "aria-describedby"], Ve = {
+}), Ue = ["data-size", "data-hide-label"], Pe = ["for"], Ve = ["aria-invalid", "data-custom-validity", "id", "name", "checked", "disabled", "value", "required", "aria-describedby"], Ge = {
   "data-visually-hidden": "true",
   role: "status"
 }, _n = /* @__PURE__ */ E({
@@ -419,24 +419,24 @@ const gn = Object.entries(me).map(([, t]) => t), Ne = {
   },
   emits: ["update:checked"],
   setup(t, { emit: n }) {
-    const d = n, e = t, a = o(!1), r = o(void 0), l = o(void 0), p = o(void 0), i = o(void 0), h = o(""), s = o(""), B = o(null);
-    R(() => {
+    const d = n, e = t, a = u(!1), c = u(void 0), l = u(void 0), p = u(void 0), i = u(void 0), h = u(""), s = u(""), B = u(null);
+    U(() => {
       a.value = !0;
       const f = e.id ?? `checkbox-${G()}`;
-      r.value = f, l.value = f + K, p.value = f + J, i.value = f + Q;
-    }), M(
-      () => [r.value],
+      c.value = f, l.value = f + K, p.value = f + J, i.value = f + Q;
+    }), z(
+      () => [c.value],
       () => {
-        if (r.value) {
-          const f = r.value + K;
-          l.value = f, p.value = r.value + J, i.value = r.value + Q, q(e.message, e.showMessage) && (h.value = f);
+        if (c.value) {
+          const f = c.value + K;
+          l.value = f, p.value = c.value + J, i.value = c.value + Q, q(e.message, e.showMessage) && (h.value = f);
         }
       },
       {
         immediate: !0,
         flush: "post"
       }
-    ), M(
+    ), z(
       () => [a.value, B.value, e.indeterminate],
       () => {
         B.value && e.indeterminate !== void 0 && (B.value.indeterminate = e.indeterminate);
@@ -445,7 +445,7 @@ const gn = Object.entries(me).map(([, t]) => t), Ne = {
         immediate: !0,
         flush: "post"
       }
-    ), M(
+    ), z(
       () => [a.value, B.value, e.checked],
       () => {
         a.value && B.value && (e.checked != null && (B.value.checked = e.checked), a.value = !1);
@@ -455,61 +455,61 @@ const gn = Object.entries(me).map(([, t]) => t), Ne = {
         flush: "post"
       }
     );
-    function y(f) {
-      var c, k, u;
-      e.onChange && e.onChange(f), e.change && e.change(f), ae(d, f, "checked"), !((c = B.value) != null && c.validity.valid) || e.validation === "invalid" ? (h.value = i.value, Y() && (s.value = e.invalidMessage ?? ((k = B.value) == null ? void 0 : k.validationMessage) ?? x, H(() => s.value = "", 1e3))) : e.validation === "valid" || (u = B.value) != null && u.validity.valid && e.required ? (h.value = p.value, Y() && (s.value = e.validMessage ?? Z, H(() => s.value = "", 1e3))) : q(e.message, e.showMessage) ? h.value = l.value : h.value = "";
-    }
     function $(f) {
+      var o, y, r;
+      e.onChange && e.onChange(f), e.change && e.change(f), ae(d, f, "checked"), !((o = B.value) != null && o.validity.valid) || e.validation === "invalid" ? (h.value = i.value, Y() && (s.value = e.invalidMessage ?? ((y = B.value) == null ? void 0 : y.validationMessage) ?? x, H(() => s.value = "", 1e3))) : e.validation === "valid" || (r = B.value) != null && r.validity.valid && e.required ? (h.value = p.value, Y() && (s.value = e.validMessage ?? Z, H(() => s.value = "", 1e3))) : q(e.message, e.showMessage) ? h.value = l.value : h.value = "";
+    }
+    function D(f) {
       e.onBlur && e.onBlur(f), e.blur && e.blur(f);
     }
-    function U(f) {
+    function _(f) {
       e.onFocus && e.onFocus(f), e.focus && e.focus(f);
     }
-    return (f, c) => (m(), g("div", {
+    return (f, o) => (m(), g("div", {
       class: N(v(A)("db-checkbox", e.class)),
       "data-size": f.size,
       "data-hide-label": v(P)(f.showLabel)
     }, [
-      _("label", { for: r.value }, [
-        _("input", {
+      I("label", { for: c.value }, [
+        I("input", {
           type: "checkbox",
           "aria-invalid": f.validation === "invalid",
           "data-custom-validity": f.validation,
           ref_key: "_ref",
           ref: B,
-          id: r.value,
+          id: c.value,
           name: f.name,
           checked: f.checked,
           disabled: f.disabled,
           value: f.value,
           required: f.required,
-          onChange: c[0] || (c[0] = async (k) => y(k)),
-          onBlur: c[1] || (c[1] = async (k) => $(k)),
-          onFocus: c[2] || (c[2] = async (k) => U(k)),
+          onChange: o[0] || (o[0] = async (y) => $(y)),
+          onBlur: o[1] || (o[1] = async (y) => D(y)),
+          onFocus: o[2] || (o[2] = async (y) => _(y)),
           "aria-describedby": h.value
-        }, null, 40, Pe),
+        }, null, 40, Ve),
         f.label ? (m(), g(C, { key: 0 }, [
-          L(w(f.label), 1)
-        ], 64)) : I(f.$slots, "default", { key: 1 })
-      ], 8, Ue),
+          L(k(f.label), 1)
+        ], 64)) : w(f.$slots, "default", { key: 1 })
+      ], 8, Pe),
       v(q)(f.message, f.showMessage) ? (m(), X(W, {
         key: 0,
         size: "small",
         icon: f.messageIcon,
         id: l.value
       }, {
-        default: z(() => [
-          L(w(f.message), 1)
+        default: R(() => [
+          L(k(f.message), 1)
         ]),
         _: 1
-      }, 8, ["icon", "id"])) : D("", !0),
+      }, 8, ["icon", "id"])) : M("", !0),
       O(W, {
         size: "small",
         semantic: "successful",
         id: p.value
       }, {
-        default: z(() => [
-          L(w(f.validMessage ?? v(Z)), 1)
+        default: R(() => [
+          L(k(f.validMessage ?? v(Z)), 1)
         ]),
         _: 1
       }, 8, ["id"]),
@@ -518,18 +518,18 @@ const gn = Object.entries(me).map(([, t]) => t), Ne = {
         semantic: "critical",
         id: i.value
       }, {
-        default: z(() => {
-          var k;
+        default: R(() => {
+          var y;
           return [
-            L(w(f.invalidMessage ?? ((k = B.value) == null ? void 0 : k.validationMessage) ?? v(x)), 1)
+            L(k(f.invalidMessage ?? ((y = B.value) == null ? void 0 : y.validationMessage) ?? v(x)), 1)
           ];
         }),
         _: 1
       }, 8, ["id"]),
-      _("span", Ve, w(s.value), 1)
-    ], 10, Re));
+      I("span", Ge, k(s.value), 1)
+    ], 10, Ue));
   }
-}), Ge = ["id", "data-margin", "data-variant", "data-emphasis", "data-width"], $n = /* @__PURE__ */ E({
+}), qe = ["id", "data-margin", "data-variant", "data-emphasis", "data-width"], $n = /* @__PURE__ */ E({
   __name: "divider",
   props: {
     margin: { default: void 0 },
@@ -544,7 +544,7 @@ const gn = Object.entries(me).map(([, t]) => t), Ne = {
     width: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(null);
+    const n = t, d = u(null);
     return (e, a) => (m(), g("div", {
       ref_key: "_ref",
       ref: d,
@@ -554,9 +554,9 @@ const gn = Object.entries(me).map(([, t]) => t), Ne = {
       "data-emphasis": e.emphasis,
       "data-width": e.width,
       class: N(v(A)("db-divider", n.class))
-    }, null, 10, Ge));
+    }, null, 10, qe));
   }
-}), qe = ["id", "data-backdrop", "data-variant"], Oe = ["data-spacing", "data-width", "data-direction", "data-rounded"], We = { class: "db-drawer-header" }, Xe = { class: "db-drawer-header-text" }, He = { class: "db-drawer-content" }, je = /* @__PURE__ */ E({
+}), Oe = ["id", "data-backdrop", "data-variant"], We = ["data-spacing", "data-width", "data-direction", "data-rounded"], Xe = { class: "db-drawer-header" }, He = { class: "db-drawer-header-text" }, je = { class: "db-drawer-content" }, Ye = /* @__PURE__ */ E({
   __name: "drawer",
   props: {
     backdrop: { default: void 0 },
@@ -578,13 +578,13 @@ const gn = Object.entries(me).map(([, t]) => t), Ne = {
     spacing: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(null), e = o(null);
-    R(() => {
-      r();
-    }), M(
+    const n = t, d = u(null), e = u(null);
+    U(() => {
+      c();
+    }), z(
       () => [n.open],
       () => {
-        r();
+        c();
       },
       {
         immediate: !0,
@@ -594,7 +594,7 @@ const gn = Object.entries(me).map(([, t]) => t), Ne = {
     function a(l) {
       l.key === "Escape" && l.preventDefault(), (l === "close" || l.key === "Escape" || l.target.nodeName === "DIALOG" && l.type === "click" && n.backdrop !== "none") && n.onClose && n.onClose(l);
     }
-    function r() {
+    function c() {
       d.value && (n.open && !d.value.open && (e.value && (e.value.hidden = !1), n.backdrop === "none" || n.variant === "inside" ? d.value.show() : d.value.showModal()), !n.open && d.value.open && (e.value && (e.value.hidden = !0), H(() => {
         var l;
         e.value && (e.value.hidden = !1), (l = d.value) == null || l.close();
@@ -612,7 +612,7 @@ const gn = Object.entries(me).map(([, t]) => t), Ne = {
       "data-backdrop": l.backdrop,
       "data-variant": l.variant
     }, [
-      _("article", {
+      I("article", {
         ref_key: "dialogContainerRef",
         ref: e,
         class: N(v(A)("db-drawer-container", n.class)),
@@ -621,9 +621,9 @@ const gn = Object.entries(me).map(([, t]) => t), Ne = {
         "data-direction": l.direction,
         "data-rounded": l.rounded
       }, [
-        _("header", We, [
-          _("div", Xe, [
-            I(l.$slots, "drawer-header")
+        I("header", Xe, [
+          I("div", He, [
+            w(l.$slots, "drawer-header")
           ]),
           O(de, {
             class: "button-close-drawer",
@@ -633,19 +633,19 @@ const gn = Object.entries(me).map(([, t]) => t), Ne = {
             noText: !0,
             onClick: (i) => a("close")
           }, {
-            default: z(() => [
-              L(w(l.closeButtonText ?? v(ce)), 1)
+            default: R(() => [
+              L(k(l.closeButtonText ?? v(ce)), 1)
             ]),
             _: 1
           }, 8, ["id", "onClick"])
         ]),
-        _("div", He, [
-          I(l.$slots, "default")
+        I("div", je, [
+          w(l.$slots, "default")
         ])
-      ], 10, Oe)
-    ], 40, qe));
+      ], 10, We)
+    ], 40, Oe));
   }
-}), Ye = (t) => {
+}), be = (t) => {
   var d, e;
   const {
     target: n
@@ -712,10 +712,10 @@ class Ke {
         rb: `100% ${l}`
       };
     }
-    const d = this.getTriangleTipX(), e = this.getTriangleTipY(), a = `${d}px ${e}px`, r = `${d}px ${e}px`;
+    const d = this.getTriangleTipX(), e = this.getTriangleTipY(), a = `${d}px ${e}px`, c = `${d}px ${e}px`;
     return {
       lb: a,
-      lt: r,
+      lt: c,
       rt: "100% 0",
       rb: "100% 100%"
     };
@@ -748,10 +748,10 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     width: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(ee), e = o(!1), a = o(!1), r = o(null);
-    R(() => {
+    const n = t, d = u(ee), e = u(!1), a = u(!1), c = u(null);
+    U(() => {
       e.value = !0, d.value = n.id || "header-" + G();
-    }), M(
+    }), z(
       () => [e.value],
       () => {
         if (e.value && document && d.value && n.forceMobile) {
@@ -771,58 +771,58 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
       n.onToggle && n.onToggle(!n.drawerOpen);
     }
     function p(i) {
-      Ye(i) && l();
+      be(i) && l();
     }
     return (i, h) => (m(), g("header", {
       ref_key: "_ref",
-      ref: r,
+      ref: c,
       class: N(v(A)("db-header", n.class)),
       id: d.value,
       "data-width": i.width,
       "data-on-forcing-mobile": i.forceMobile && !a.value
     }, [
-      O(je, {
+      O(Ye, {
         class: "db-header-drawer",
         spacing: "small",
         rounded: !0,
         open: i.drawerOpen,
         onClose: () => l()
       }, {
-        default: z(() => [
-          _("div", Qe, [
-            _("div", {
+        default: R(() => [
+          I("div", Qe, [
+            I("div", {
               class: "db-header-navigation",
               onClick: h[0] || (h[0] = async (s) => p(s))
             }, [
-              I(i.$slots, "default")
+              w(i.$slots, "default")
             ]),
-            _("div", Ze, [
-              I(i.$slots, "meta-navigation")
+            I("div", Ze, [
+              w(i.$slots, "meta-navigation")
             ])
           ]),
-          _("div", xe, [
-            I(i.$slots, "secondary-action")
+          I("div", xe, [
+            w(i.$slots, "secondary-action")
           ])
         ]),
         _: 3
       }, 8, ["open", "onClose"]),
-      _("div", ea, [
-        I(i.$slots, "meta-navigation")
+      I("div", ea, [
+        w(i.$slots, "meta-navigation")
       ]),
-      _("div", aa, [
-        _("div", na, [
-          I(i.$slots, "brand")
+      I("div", aa, [
+        I("div", na, [
+          w(i.$slots, "brand")
         ]),
-        _("div", ta, [
-          _("div", da, [
-            I(i.$slots, "default")
+        I("div", ta, [
+          I("div", da, [
+            w(i.$slots, "default")
           ]),
-          _("div", ia, [
-            I(i.$slots, "primary-action")
+          I("div", ia, [
+            w(i.$slots, "primary-action")
           ])
         ]),
-        _("div", la, [
-          _("div", sa, [
+        I("div", la, [
+          I("div", sa, [
             O(de, {
               icon: "menu",
               variant: "ghost",
@@ -830,14 +830,14 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
               noText: !0,
               onClick: () => l()
             }, {
-              default: z(() => [
-                L(w(i.burgerMenuLabel ?? v($e)), 1)
+              default: R(() => [
+                L(k(i.burgerMenuLabel ?? v(Le)), 1)
               ]),
               _: 1
             }, 8, ["id", "onClick"])
           ]),
-          _("div", oa, [
-            I(i.$slots, "secondary-action")
+          I("div", oa, [
+            w(i.$slots, "secondary-action")
           ])
         ])
       ])
@@ -858,7 +858,7 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     text: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(null);
+    const n = t, d = u(null);
     return (e, a) => (m(), g("span", {
       "aria-hidden": "true",
       ref_key: "_ref",
@@ -870,8 +870,8 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
       "data-icon-variant": e.variant
     }, [
       e.text ? (m(), g(C, { key: 0 }, [
-        L(w(e.text), 1)
-      ], 64)) : I(e.$slots, "default", { key: 1 })
+        L(k(e.text), 1)
+      ], 64)) : w(e.$slots, "default", { key: 1 })
     ], 10, ua));
   }
 }), ra = ["data-variant", "data-hide-label", "data-hide-icon", "data-icon", "data-icon-after", "data-hide-icon-after"], fa = ["for"], ca = ["aria-invalid", "data-custom-validity", "id", "name", "type", "placeholder", "disabled", "required", "step", "value", "maxLength", "minLength", "max", "min", "readOnly", "form", "pattern", "size", "autoComplete", "autoFocus", "list", "aria-describedby"], va = ["id"], pa = ["value"], ha = {
@@ -927,23 +927,23 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
   },
   emits: ["update:value"],
   setup(t, { emit: n }) {
-    const d = n, e = t, a = o(void 0), r = o(void 0), l = o(void 0), p = o(void 0), i = o(void 0), h = o(""), s = o(""), B = o(""), y = o(null);
-    R(() => {
-      const u = e.id ?? `input-${G()}`;
-      a.value = u, r.value = u + K, l.value = u + J, p.value = u + Q, i.value = u + ue;
-    }), M(
+    const d = n, e = t, a = u(void 0), c = u(void 0), l = u(void 0), p = u(void 0), i = u(void 0), h = u(""), s = u(""), B = u(""), $ = u(null);
+    U(() => {
+      const r = e.id ?? `input-${G()}`;
+      a.value = r, c.value = r + K, l.value = r + J, p.value = r + Q, i.value = r + ue;
+    }), z(
       () => [a.value],
       () => {
         if (a.value) {
-          const u = a.value + K;
-          r.value = u, l.value = a.value + J, p.value = a.value + Q, i.value = e.dataListId ?? a.value + ue, q(e.message, e.showMessage) && (h.value = u);
+          const r = a.value + K;
+          c.value = r, l.value = a.value + J, p.value = a.value + Q, i.value = e.dataListId ?? a.value + ue, q(e.message, e.showMessage) && (h.value = r);
         }
       },
       {
         immediate: !0,
         flush: "post"
       }
-    ), M(
+    ), z(
       () => [e.value],
       () => {
         s.value = e.value;
@@ -953,95 +953,95 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         flush: "post"
       }
     );
-    function $(u) {
-      s.value = u.target.value, e.onInput && e.onInput(u), e.input && e.input(u);
+    function D(r) {
+      s.value = r.target.value, e.onInput && e.onInput(r), e.input && e.input(r);
     }
-    function U(u) {
+    function _(r) {
       var T, b, S;
-      e.onChange && e.onChange(u), e.change && e.change(u), ae(d, u), !((T = y.value) != null && T.validity.valid) || e.validation === "invalid" ? (h.value = p.value, Y() && (B.value = e.invalidMessage ?? ((b = y.value) == null ? void 0 : b.validationMessage) ?? x, H(() => B.value = "", 1e3))) : e.validation === "valid" || (S = y.value) != null && S.validity.valid && (e.required || e.minLength || e.maxLength || e.pattern) ? (h.value = l.value, Y() && (B.value = e.validMessage ?? Z, H(() => B.value = "", 1e3))) : q(e.message, e.showMessage) ? h.value = r.value : h.value = "";
+      e.onChange && e.onChange(r), e.change && e.change(r), ae(d, r), !((T = $.value) != null && T.validity.valid) || e.validation === "invalid" ? (h.value = p.value, Y() && (B.value = e.invalidMessage ?? ((b = $.value) == null ? void 0 : b.validationMessage) ?? x, H(() => B.value = "", 1e3))) : e.validation === "valid" || (S = $.value) != null && S.validity.valid && (e.required || e.minLength || e.maxLength || e.pattern) ? (h.value = l.value, Y() && (B.value = e.validMessage ?? Z, H(() => B.value = "", 1e3))) : q(e.message, e.showMessage) ? h.value = c.value : h.value = "";
     }
-    function f(u) {
-      e.onBlur && e.onBlur(u), e.blur && e.blur(u);
+    function f(r) {
+      e.onBlur && e.onBlur(r), e.blur && e.blur(r);
     }
-    function c(u) {
-      e.onFocus && e.onFocus(u), e.focus && e.focus(u);
+    function o(r) {
+      e.onFocus && e.onFocus(r), e.focus && e.focus(r);
     }
-    function k(u) {
+    function y(r) {
       return Array.from(
-        (ke(u) ? u.map((T) => ({
+        (we(r) ? r.map((T) => ({
           value: T,
           label: void 0
-        })) : u) || []
+        })) : r) || []
       );
     }
-    return (u, T) => (m(), g("div", {
+    return (r, T) => (m(), g("div", {
       class: N(v(A)("db-input", e.class)),
-      "data-variant": u.variant,
-      "data-hide-label": v(P)(u.showLabel),
-      "data-hide-icon": v(P)(u.showIcon),
-      "data-icon": u.icon,
-      "data-icon-after": u.iconAfter,
-      "data-hide-icon-after": v(P)(u.showIcon)
+      "data-variant": r.variant,
+      "data-hide-label": v(P)(r.showLabel),
+      "data-hide-icon": v(P)(r.showIcon),
+      "data-icon": r.icon,
+      "data-icon-after": r.iconAfter,
+      "data-hide-icon-after": v(P)(r.showIcon)
     }, [
-      _("label", { for: a.value }, w(u.label ?? v(le)), 9, fa),
-      _("input", {
-        "aria-invalid": u.validation === "invalid",
-        "data-custom-validity": u.validation,
+      I("label", { for: a.value }, k(r.label ?? v(le)), 9, fa),
+      I("input", {
+        "aria-invalid": r.validation === "invalid",
+        "data-custom-validity": r.validation,
         ref_key: "_ref",
-        ref: y,
+        ref: $,
         id: a.value,
-        name: u.name,
-        type: u.type || "text",
-        placeholder: u.placeholder ?? v(fe),
-        disabled: u.disabled,
-        required: u.required,
-        step: u.step,
-        value: u.value ?? s.value,
-        maxLength: u.maxLength,
-        minLength: u.minLength,
-        max: u.max,
-        min: u.min,
-        readOnly: u.readOnly,
-        form: u.form,
-        pattern: u.pattern,
-        size: u.size,
-        autoComplete: u.autocomplete,
-        autoFocus: u.autofocus,
-        onInput: T[0] || (T[0] = async (b) => $(b)),
-        onChange: T[1] || (T[1] = async (b) => U(b)),
+        name: r.name,
+        type: r.type || "text",
+        placeholder: r.placeholder ?? v(fe),
+        disabled: r.disabled,
+        required: r.required,
+        step: r.step,
+        value: r.value ?? s.value,
+        maxLength: r.maxLength,
+        minLength: r.minLength,
+        max: r.max,
+        min: r.min,
+        readOnly: r.readOnly,
+        form: r.form,
+        pattern: r.pattern,
+        size: r.size,
+        autoComplete: r.autocomplete,
+        autoFocus: r.autofocus,
+        onInput: T[0] || (T[0] = async (b) => D(b)),
+        onChange: T[1] || (T[1] = async (b) => _(b)),
         onBlur: T[2] || (T[2] = async (b) => f(b)),
-        onFocus: T[3] || (T[3] = async (b) => c(b)),
-        list: u.dataList && i.value,
+        onFocus: T[3] || (T[3] = async (b) => o(b)),
+        list: r.dataList && i.value,
         "aria-describedby": h.value
       }, null, 40, ca),
-      u.dataList ? (m(), g("datalist", {
+      r.dataList ? (m(), g("datalist", {
         key: 0,
         id: i.value
       }, [
-        (m(!0), g(C, null, te(k(u.dataList), (b) => (m(), g("option", {
+        (m(!0), g(C, null, te(y(r.dataList), (b) => (m(), g("option", {
           key: i.value + "-option-" + b.value,
           value: b.value
-        }, w(b.label), 9, pa))), 128))
-      ], 8, va)) : D("", !0),
-      I(u.$slots, "default"),
-      v(q)(u.message, u.showMessage) ? (m(), X(W, {
+        }, k(b.label), 9, pa))), 128))
+      ], 8, va)) : M("", !0),
+      w(r.$slots, "default"),
+      v(q)(r.message, r.showMessage) ? (m(), X(W, {
         key: 1,
         size: "small",
-        icon: u.messageIcon,
-        id: r.value
+        icon: r.messageIcon,
+        id: c.value
       }, {
-        default: z(() => [
-          L(w(u.message), 1)
+        default: R(() => [
+          L(k(r.message), 1)
         ]),
         _: 1
-      }, 8, ["icon", "id"])) : D("", !0),
+      }, 8, ["icon", "id"])) : M("", !0),
       O(W, {
         size: "small",
         semantic: "successful",
         id: l.value
       }, {
-        default: z(() => [
-          L(w(u.validMessage ?? v(Z)), 1)
+        default: R(() => [
+          L(k(r.validMessage ?? v(Z)), 1)
         ]),
         _: 1
       }, 8, ["id"]),
@@ -1050,15 +1050,15 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         semantic: "critical",
         id: p.value
       }, {
-        default: z(() => {
+        default: R(() => {
           var b;
           return [
-            L(w(u.invalidMessage ?? ((b = y.value) == null ? void 0 : b.validationMessage) ?? v(x)), 1)
+            L(k(r.invalidMessage ?? ((b = $.value) == null ? void 0 : b.validationMessage) ?? v(x)), 1)
           ];
         }),
         _: 1
       }, 8, ["id"]),
-      _("span", ha, w(B.value), 1)
+      I("span", ha, k(B.value), 1)
     ], 10, ra));
   }
 }), ma = ["id", "href", "target", "rel", "role", "hrefLang", "aria-disabled", "tabIndex", "aria-selected", "aria-label", "aria-current", "data-size", "data-hide-icon-after", "data-variant", "data-content"], An = /* @__PURE__ */ E({
@@ -1088,11 +1088,11 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     text: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(null);
+    const n = t, d = u(null);
     function e(a) {
       n.onClick && n.onClick(a);
     }
-    return (a, r) => (m(), g("a", {
+    return (a, c) => (m(), g("a", {
       ref_key: "_ref",
       ref: d,
       id: a.id,
@@ -1111,11 +1111,11 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
       "data-hide-icon-after": v(P)(a.showIcon ?? !0),
       "data-variant": a.variant,
       "data-content": a.content || "internal",
-      onClick: r[0] || (r[0] = async (l) => e(l))
+      onClick: c[0] || (c[0] = async (l) => e(l))
     }, [
       a.text ? (m(), g(C, { key: 0 }, [
-        L(w(a.text), 1)
-      ], 64)) : I(a.$slots, "default", { key: 1 })
+        L(k(a.text), 1)
+      ], 64)) : w(a.$slots, "default", { key: 1 })
     ], 10, ma));
   }
 }), ba = ["id", "data-variant", "data-fade-in", "data-fonts-loaded"], ga = { class: "db-main" }, Fn = /* @__PURE__ */ E({
@@ -1134,14 +1134,14 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     autofocus: { type: Boolean }
   },
   setup(t) {
-    const n = t, d = o(!1), e = o(null);
-    return typeof window < "u" && document && (n.documentOverflow === "hidden" || n.variant === "fixed" && n.documentOverflow !== "auto") && document.documentElement.classList.add("db-page-document"), R(() => {
+    const n = t, d = u(!1), e = u(null);
+    return typeof window < "u" && document && (n.documentOverflow === "hidden" || n.variant === "fixed" && n.documentOverflow !== "auto") && document.documentElement.classList.add("db-page-document"), U(() => {
       d.value = !n.fadeIn, document && n.fadeIn ? document.fonts.ready.then(() => {
         d.value = !0;
       }) : d.value = !0;
-    }), ye(() => {
+    }), Be(() => {
       typeof window < "u" && document.documentElement.classList.contains("db-page-document") && document.documentElement.classList.remove("db-page-document");
-    }), (a, r) => (m(), g("div", {
+    }), (a, c) => (m(), g("div", {
       ref_key: "_ref",
       ref: e,
       id: a.id,
@@ -1150,11 +1150,11 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
       "data-fade-in": a.fadeIn,
       "data-fonts-loaded": v(V)(d.value)
     }, [
-      I(a.$slots, "header"),
-      _("main", ga, [
-        I(a.$slots, "default")
+      w(a.$slots, "header"),
+      I("main", ga, [
+        w(a.$slots, "default")
       ]),
-      I(a.$slots, "footer")
+      w(a.$slots, "footer")
     ], 10, ba));
   }
 }), ya = ["data-size", "data-hide-label", "for"], Ba = ["aria-invalid", "data-custom-validity", "id", "name", "checked", "disabled", "aria-describedby", "value", "required"], Tn = /* @__PURE__ */ E({
@@ -1183,12 +1183,12 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     checked: { type: Boolean, default: void 0 },
     size: { default: void 0 }
   },
-  emits: ["update:checked"],
+  emits: ["update:value"],
   setup(t, { emit: n }) {
-    const d = n, e = t, a = o(!1), r = o(void 0), l = o(null);
-    R(() => {
-      a.value = !0, r.value = e.id ?? `radio-${G()}`;
-    }), M(
+    const d = n, e = t, a = u(!1), c = u(void 0), l = u(null);
+    U(() => {
+      a.value = !0, c.value = e.id ?? `radio-${G()}`;
+    }), z(
       () => [a.value, l.value, e.checked],
       () => {
         e.checked && a.value && l.value && (l.value.checked = !0);
@@ -1199,7 +1199,7 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
       }
     );
     function p(s) {
-      e.onChange && e.onChange(s), e.change && e.change(s), ae(d, s, "checked");
+      e.onChange && e.onChange(s), e.change && e.change(s), ae(d, s);
     }
     function i(s) {
       e.onBlur && e.onBlur(s), e.blur && e.blur(s);
@@ -1211,28 +1211,28 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
       "data-size": s.size,
       "data-hide-label": v(P)(s.showLabel),
       class: N(v(A)("db-radio", e.class)),
-      for: r.value
+      for: c.value
     }, [
-      _("input", {
+      I("input", {
         type: "radio",
         "aria-invalid": s.validation === "invalid",
         "data-custom-validity": s.validation,
         ref_key: "_ref",
         ref: l,
-        id: r.value,
+        id: c.value,
         name: s.name,
         checked: s.checked,
         disabled: s.disabled,
         "aria-describedby": s.describedbyid,
         value: s.value,
         required: s.required,
-        onChange: B[0] || (B[0] = async (y) => p(y)),
-        onBlur: B[1] || (B[1] = async (y) => i(y)),
-        onFocus: B[2] || (B[2] = async (y) => h(y))
+        onChange: B[0] || (B[0] = async ($) => p($)),
+        onBlur: B[1] || (B[1] = async ($) => i($)),
+        onFocus: B[2] || (B[2] = async ($) => h($))
       }, null, 40, Ba),
       s.label ? (m(), g(C, { key: 0 }, [
-        L(w(s.label), 1)
-      ], 64)) : I(s.$slots, "default", { key: 1 })
+        L(k(s.label), 1)
+      ], 64)) : w(s.$slots, "default", { key: 1 })
     ], 10, ya));
   }
 }), ka = ["id", "data-spacing", "data-width"], Sn = /* @__PURE__ */ E({
@@ -1248,10 +1248,10 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     width: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(ee), e = o(null);
-    return R(() => {
+    const n = t, d = u(ee), e = u(null);
+    return U(() => {
       d.value = n.id || "section-" + G();
-    }), (a, r) => (m(), g("section", {
+    }), (a, c) => (m(), g("section", {
       ref_key: "_ref",
       ref: e,
       id: d.value,
@@ -1259,7 +1259,7 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
       "data-spacing": a.spacing || "medium",
       "data-width": a.width
     }, [
-      I(a.$slots, "default")
+      w(a.$slots, "default")
     ], 10, ka));
   }
 }), wa = ["data-variant", "data-hide-label", "data-icon", "data-hide-icon"], Ia = ["for"], _a = ["aria-invalid", "data-custom-validity", "required", "disabled", "id", "name", "size", "value", "autocomplete", "aria-describedby"], $a = ["label"], La = ["value", "selected", "disabled"], Ea = ["value", "disabled", "selected"], Na = ["id"], Aa = {
@@ -1307,24 +1307,24 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
   },
   emits: ["update:value"],
   setup(t, { emit: n }) {
-    const d = n, e = t, a = o(void 0), r = o(void 0), l = o(void 0), p = o(void 0), i = o(""), h = o(""), s = o(""), B = o(!1), y = o(""), $ = o(null);
-    R(() => {
+    const d = n, e = t, a = u(void 0), c = u(void 0), l = u(void 0), p = u(void 0), i = u(""), h = u(""), s = u(""), B = u(!1), $ = u(""), D = u(null);
+    U(() => {
       B.value = !0;
       const b = e.id ?? `select-${G()}`;
-      a.value = b, r.value = b + K, l.value = b + J, p.value = b + Q, i.value = b + oe;
-    }), M(
+      a.value = b, c.value = b + K, l.value = b + J, p.value = b + Q, i.value = b + oe;
+    }), z(
       () => [a.value, B.value],
       () => {
         if (a.value && B.value) {
           const b = a.value + K, S = a.value + oe;
-          r.value = b, l.value = a.value + J, p.value = a.value + Q, i.value = S, q(e.message, e.showMessage) ? h.value = b : h.value = S, B.value = !1;
+          c.value = b, l.value = a.value + J, p.value = a.value + Q, i.value = S, q(e.message, e.showMessage) ? h.value = b : h.value = S, B.value = !1;
         }
       },
       {
         immediate: !0,
         flush: "post"
       }
-    ), M(
+    ), z(
       () => [e.value],
       () => {
         s.value = e.value;
@@ -1334,20 +1334,20 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         flush: "post"
       }
     );
-    function U(b) {
+    function _(b) {
       e.onClick && e.onClick(b);
     }
     function f(b) {
       s.value = b.target.value, e.onInput && e.onInput(b), e.input && e.input(b);
     }
-    function c(b) {
+    function o(b) {
       var S, F, ne;
-      e.onChange && e.onChange(b), e.change && e.change(b), ae(d, b), !((S = $.value) != null && S.validity.valid) || e.validation === "invalid" ? (h.value = p.value, Y() && (y.value = e.invalidMessage ?? ((F = $.value) == null ? void 0 : F.validationMessage) ?? x, H(() => y.value = "", 1e3))) : e.validation === "valid" || (ne = $.value) != null && ne.validity.valid && e.required ? (h.value = l.value, Y() && (y.value = e.validMessage ?? Z, H(() => y.value = "", 1e3))) : q(e.message, e.showMessage) ? h.value = r.value : h.value = i.value;
+      e.onChange && e.onChange(b), e.change && e.change(b), ae(d, b), !((S = D.value) != null && S.validity.valid) || e.validation === "invalid" ? (h.value = p.value, Y() && ($.value = e.invalidMessage ?? ((F = D.value) == null ? void 0 : F.validationMessage) ?? x, H(() => $.value = "", 1e3))) : e.validation === "valid" || (ne = D.value) != null && ne.validity.valid && e.required ? (h.value = l.value, Y() && ($.value = e.validMessage ?? Z, H(() => $.value = "", 1e3))) : q(e.message, e.showMessage) ? h.value = c.value : h.value = i.value;
     }
-    function k(b) {
+    function y(b) {
       e.onBlur && e.onBlur(b), e.blur && e.blur(b);
     }
-    function u(b) {
+    function r(b) {
       e.onFocus && e.onFocus(b), e.focus && e.focus(b);
     }
     function T(b) {
@@ -1360,12 +1360,12 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
       "data-icon": b.icon,
       "data-hide-icon": v(P)(b.showIcon)
     }, [
-      _("label", { for: a.value }, w(b.label ?? v(le)), 9, Ia),
-      _("select", {
+      I("label", { for: a.value }, k(b.label ?? v(le)), 9, Ia),
+      I("select", {
         "aria-invalid": b.validation === "invalid",
         "data-custom-validity": b.validation,
         ref_key: "_ref",
-        ref: $,
+        ref: D,
         required: b.required,
         disabled: b.disabled,
         id: a.value,
@@ -1374,13 +1374,13 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         value: b.value ?? s.value,
         autocomplete: b.autocomplete,
         onInput: S[0] || (S[0] = async (F) => f(F)),
-        onClick: S[1] || (S[1] = async (F) => U(F)),
-        onChange: S[2] || (S[2] = async (F) => c(F)),
-        onBlur: S[3] || (S[3] = async (F) => k(F)),
-        onFocus: S[4] || (S[4] = async (F) => u(F)),
+        onClick: S[1] || (S[1] = async (F) => _(F)),
+        onChange: S[2] || (S[2] = async (F) => o(F)),
+        onBlur: S[3] || (S[3] = async (F) => y(F)),
+        onFocus: S[4] || (S[4] = async (F) => r(F)),
         "aria-describedby": h.value
       }, [
-        S[5] || (S[5] = _("option", { hidden: !0 }, null, -1)),
+        S[5] || (S[5] = I("option", { hidden: !0 }, null, -1)),
         b.options ? (m(!0), g(C, { key: 0 }, te(b.options, (F, ne) => (m(), g(C, { key: ne }, [
           F.options ? (m(), g("optgroup", {
             key: 0,
@@ -1391,36 +1391,36 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
               value: ie.value,
               selected: ie.selected,
               disabled: ie.disabled
-            }, w(T(ie)), 9, La))), 128))
-          ], 8, $a)) : D("", !0),
-          F.options ? D("", !0) : (m(), g("option", {
+            }, k(T(ie)), 9, La))), 128))
+          ], 8, $a)) : M("", !0),
+          F.options ? M("", !0) : (m(), g("option", {
             key: 1,
             value: F.value,
             disabled: F.disabled,
             selected: F.selected
-          }, w(T(F)), 9, Ea))
-        ], 64))), 128)) : D("", !0),
-        I(b.$slots, "default")
+          }, k(T(F)), 9, Ea))
+        ], 64))), 128)) : M("", !0),
+        w(b.$slots, "default")
       ], 40, _a),
-      _("span", { id: i.value }, w(b.placeholder ?? b.label), 9, Na),
+      I("span", { id: i.value }, k(b.placeholder ?? b.label), 9, Na),
       v(q)(b.message, b.showMessage) ? (m(), X(W, {
         key: 0,
         size: "small",
         icon: b.messageIcon,
-        id: r.value
+        id: c.value
       }, {
-        default: z(() => [
-          L(w(b.message), 1)
+        default: R(() => [
+          L(k(b.message), 1)
         ]),
         _: 1
-      }, 8, ["icon", "id"])) : D("", !0),
+      }, 8, ["icon", "id"])) : M("", !0),
       O(W, {
         size: "small",
         semantic: "successful",
         id: l.value
       }, {
-        default: z(() => [
-          L(w(b.validMessage ?? v(Z)), 1)
+        default: R(() => [
+          L(k(b.validMessage ?? v(Z)), 1)
         ]),
         _: 1
       }, 8, ["id"]),
@@ -1429,15 +1429,15 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         semantic: "critical",
         id: p.value
       }, {
-        default: z(() => {
+        default: R(() => {
           var F;
           return [
-            L(w(b.invalidMessage ?? ((F = $.value) == null ? void 0 : F.validationMessage) ?? v(x)), 1)
+            L(k(b.invalidMessage ?? ((F = D.value) == null ? void 0 : F.validationMessage) ?? v(x)), 1)
           ];
         }),
         _: 1
       }, 8, ["id"]),
-      _("span", Aa, w(y.value), 1)
+      I("span", Aa, k($.value), 1)
     ], 10, wa));
   }
 }), Fa = ["data-visual-aid", "data-size", "data-hide-label", "data-emphasis", "for"], Ta = ["id", "aria-checked", "checked", "value", "disabled", "aria-describedby", "aria-invalid", "data-custom-validity", "name", "required", "data-aid-icon", "data-aid-icon-after"], Dn = /* @__PURE__ */ E({
@@ -1472,13 +1472,13 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
   },
   emits: ["update:checked"],
   setup(t, { emit: n }) {
-    const d = n, e = t, a = o(void 0), r = o(!1), l = o(null);
-    R(() => {
+    const d = n, e = t, a = u(void 0), c = u(!1), l = u(null);
+    U(() => {
       a.value = e.id ?? `switch-${G()}`;
-    }), M(
+    }), z(
       () => [e.checked],
       () => {
-        e.checked !== void 0 && e.checked !== null && (r.value = !!e.checked);
+        e.checked !== void 0 && e.checked !== null && (c.value = !!e.checked);
       },
       {
         immediate: !0,
@@ -1487,7 +1487,7 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     );
     function p(s) {
       var B;
-      e.onChange && e.onChange(s), e.change && e.change(s), r.value = (B = s.target) == null ? void 0 : B.checked, ae(d, s, "checked");
+      e.onChange && e.onChange(s), e.change && e.change(s), c.value = (B = s.target) == null ? void 0 : B.checked, ae(d, s, "checked");
     }
     function i(s) {
       e.onBlur && e.onBlur(s), e.blur && e.blur(s);
@@ -1503,11 +1503,11 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
       for: a.value,
       class: N(v(A)("db-switch", e.class))
     }, [
-      _("input", {
+      I("input", {
         type: "checkbox",
         role: "switch",
         id: a.value,
-        "aria-checked": v(V)(r.value),
+        "aria-checked": v(V)(c.value),
         ref_key: "_ref",
         ref: l,
         checked: s.checked,
@@ -1520,13 +1520,13 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         required: s.required,
         "data-aid-icon": s.icon,
         "data-aid-icon-after": s.iconAfter,
-        onChange: B[0] || (B[0] = async (y) => p(y)),
-        onBlur: B[1] || (B[1] = async (y) => i(y)),
-        onFocus: B[2] || (B[2] = async (y) => h(y))
+        onChange: B[0] || (B[0] = async ($) => p($)),
+        onBlur: B[1] || (B[1] = async ($) => i($)),
+        onFocus: B[2] || (B[2] = async ($) => h($))
       }, null, 40, Ta),
       s.label ? (m(), g(C, { key: 0 }, [
-        L(w(s.label), 1)
-      ], 64)) : I(s.$slots, "default", { key: 1 })
+        L(k(s.label), 1)
+      ], 64)) : w(s.$slots, "default", { key: 1 })
     ], 10, Fa));
   }
 }), Sa = ["for", "data-icon", "data-icon-after", "data-hide-icon", "data-hide-icon-after", "data-no-text"], Ca = ["disabled", "aria-selected", "aria-controls", "checked", "id"], Da = /* @__PURE__ */ E({
@@ -1552,10 +1552,10 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
   },
   emits: ["update:checked"],
   setup(t, { emit: n }) {
-    const d = n, e = t, a = o(!1), r = o(!1), l = o(null);
-    R(() => {
+    const d = n, e = t, a = u(!1), c = u(!1), l = u(null);
+    U(() => {
       a.value = !0;
-    }), M(
+    }), z(
       () => [l.value, a.value],
       () => {
         e.active && a.value && l.value && (l.value.click(), a.value = !1);
@@ -1567,13 +1567,13 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     );
     function p(i) {
       var h;
-      e.onChange && e.onChange(i), e.change && e.change(i), r.value = (h = i.target) == null ? void 0 : h.checked, ae(d, i, "checked");
+      e.onChange && e.onChange(i), e.change && e.change(i), c.value = (h = i.target) == null ? void 0 : h.checked, ae(d, i, "checked");
     }
     return (i, h) => (m(), g("li", {
       role: "none",
       class: N(v(A)("db-tab-item", e.class))
     }, [
-      _("label", {
+      I("label", {
         for: i.id,
         "data-icon": i.icon,
         "data-icon-after": i.iconAfter,
@@ -1581,11 +1581,11 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         "data-hide-icon-after": v(P)(i.showIcon),
         "data-no-text": i.noText
       }, [
-        _("input", {
+        I("input", {
           type: "radio",
           role: "tab",
           disabled: i.disabled,
-          "aria-selected": r.value,
+          "aria-selected": c.value,
           "aria-controls": i.controls,
           checked: i.checked,
           ref_key: "_ref",
@@ -1594,9 +1594,9 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
           onInput: h[0] || (h[0] = async (s) => p(s))
         }, null, 40, Ca),
         i.label ? (m(), g(C, { key: 0 }, [
-          L(w(i.label), 1)
-        ], 64)) : D("", !0),
-        I(i.$slots, "default")
+          L(k(i.label), 1)
+        ], 64)) : M("", !0),
+        w(i.$slots, "default")
       ], 8, Sa)
     ], 2));
   }
@@ -1625,8 +1625,8 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     content: {}
   },
   setup(t) {
-    const n = t, d = o(!1), e = o(null);
-    d.value = !0, M(
+    const n = t, d = u(!1), e = u(null);
+    d.value = !0, z(
       () => [d.value, n.disabled, e.value],
       () => {
         var l, p;
@@ -1646,7 +1646,7 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     function a() {
       n.onRemove && n.onRemove();
     }
-    function r() {
+    function c() {
       return n.removeButton ? n.removeButton : "Remove tag";
     }
     return (l, p) => (m(), g("div", {
@@ -1663,11 +1663,11 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
       "data-no-text": v(V)(l.noText),
       "data-overflow": v(V)(l.overflow)
     }, [
-      I(l.$slots, "content"),
-      I(l.$slots, "default"),
+      w(l.$slots, "content"),
+      w(l.$slots, "default"),
       l.text ? (m(), g(C, { key: 0 }, [
-        L(w(l.text), 1)
-      ], 64)) : D("", !0),
+        L(k(l.text), 1)
+      ], 64)) : M("", !0),
       l.behavior === "removable" ? (m(), g("button", {
         key: 1,
         class: "db-button db-tab-remove-button",
@@ -1676,8 +1676,8 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         "data-no-text": "true",
         "data-variant": "ghost",
         onClick: p[0] || (p[0] = async (i) => a()),
-        title: r()
-      }, w(r()), 9, za)) : D("", !0)
+        title: c()
+      }, k(c()), 9, za)) : M("", !0)
     ], 10, Ma));
   }
 }), Ra = ["data-variant", "data-hide-label"], Ua = ["for"], Pa = ["aria-invalid", "data-custom-validity", "id", "data-resize", "disabled", "required", "readOnly", "form", "maxLength", "minLength", "name", "wrap", "spellcheck", "autocomplete", "value", "aria-describedby", "placeholder", "rows", "cols"], Va = {
@@ -1727,23 +1727,23 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
   },
   emits: ["update:value"],
   setup(t, { emit: n }) {
-    const d = n, e = t, a = o(void 0), r = o(void 0), l = o(void 0), p = o(void 0), i = o(""), h = o(""), s = o(""), B = o(null);
-    R(() => {
-      const c = e.id ?? `textarea-${G()}`;
-      a.value = c, r.value = c + K, l.value = c + J, p.value = c + Q;
-    }), M(
+    const d = n, e = t, a = u(void 0), c = u(void 0), l = u(void 0), p = u(void 0), i = u(""), h = u(""), s = u(""), B = u(null);
+    U(() => {
+      const o = e.id ?? `textarea-${G()}`;
+      a.value = o, c.value = o + K, l.value = o + J, p.value = o + Q;
+    }), z(
       () => [a.value],
       () => {
         if (a.value) {
-          const c = a.value + K;
-          r.value = c, l.value = a.value + J, p.value = a.value + Q, q(e.message, e.showMessage) && (i.value = c);
+          const o = a.value + K;
+          c.value = o, l.value = a.value + J, p.value = a.value + Q, q(e.message, e.showMessage) && (i.value = o);
         }
       },
       {
         immediate: !0,
         flush: "post"
       }
-    ), M(
+    ), z(
       () => [e.value],
       () => {
         h.value = e.value;
@@ -1753,70 +1753,70 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         flush: "post"
       }
     );
-    function y(c) {
-      h.value = c.target.value, e.onInput && e.onInput(c), e.input && e.input(c);
+    function $(o) {
+      h.value = o.target.value, e.onInput && e.onInput(o), e.input && e.input(o);
     }
-    function $(c) {
-      var k, u, T;
-      e.onChange && e.onChange(c), e.change && e.change(c), ae(d, c), !((k = B.value) != null && k.validity.valid) || e.validation === "invalid" ? (i.value = p.value, Y() && (s.value = e.invalidMessage ?? ((u = B.value) == null ? void 0 : u.validationMessage) ?? x, H(() => s.value = "", 1e3))) : e.validation === "valid" || (T = B.value) != null && T.validity.valid && (e.required || e.minLength || e.maxLength) ? (i.value = l.value, Y() && (s.value = e.validMessage ?? Z, H(() => s.value = "", 1e3))) : q(e.message, e.showMessage) ? i.value = r.value : i.value = "";
+    function D(o) {
+      var y, r, T;
+      e.onChange && e.onChange(o), e.change && e.change(o), ae(d, o), !((y = B.value) != null && y.validity.valid) || e.validation === "invalid" ? (i.value = p.value, Y() && (s.value = e.invalidMessage ?? ((r = B.value) == null ? void 0 : r.validationMessage) ?? x, H(() => s.value = "", 1e3))) : e.validation === "valid" || (T = B.value) != null && T.validity.valid && (e.required || e.minLength || e.maxLength) ? (i.value = l.value, Y() && (s.value = e.validMessage ?? Z, H(() => s.value = "", 1e3))) : q(e.message, e.showMessage) ? i.value = c.value : i.value = "";
     }
-    function U(c) {
-      e.onBlur && e.onBlur(c), e.blur && e.blur(c);
+    function _(o) {
+      e.onBlur && e.onBlur(o), e.blur && e.blur(o);
     }
-    function f(c) {
-      e.onFocus && e.onFocus(c), e.focus && e.focus(c);
+    function f(o) {
+      e.onFocus && e.onFocus(o), e.focus && e.focus(o);
     }
-    return (c, k) => (m(), g("div", {
+    return (o, y) => (m(), g("div", {
       class: N(v(A)("db-textarea", e.class)),
-      "data-variant": c.variant,
-      "data-hide-label": v(P)(c.showLabel)
+      "data-variant": o.variant,
+      "data-hide-label": v(P)(o.showLabel)
     }, [
-      _("label", { for: a.value }, w(c.label ?? v(le)), 9, Ua),
-      _("textarea", {
-        "aria-invalid": c.validation === "invalid",
-        "data-custom-validity": c.validation,
+      I("label", { for: a.value }, k(o.label ?? v(le)), 9, Ua),
+      I("textarea", {
+        "aria-invalid": o.validation === "invalid",
+        "data-custom-validity": o.validation,
         ref_key: "_ref",
         ref: B,
         id: a.value,
-        "data-resize": c.resize,
-        disabled: c.disabled,
-        required: c.required,
-        readOnly: c.readOnly,
-        form: c.form,
-        maxLength: c.maxLength,
-        minLength: c.minLength,
-        name: c.name,
-        wrap: c.wrap,
-        spellcheck: c.spellCheck,
-        autocomplete: c.autocomplete,
-        onInput: k[0] || (k[0] = async (u) => y(u)),
-        onChange: k[1] || (k[1] = async (u) => $(u)),
-        onBlur: k[2] || (k[2] = async (u) => U(u)),
-        onFocus: k[3] || (k[3] = async (u) => f(u)),
-        value: c.value ?? h.value,
+        "data-resize": o.resize,
+        disabled: o.disabled,
+        required: o.required,
+        readOnly: o.readOnly,
+        form: o.form,
+        maxLength: o.maxLength,
+        minLength: o.minLength,
+        name: o.name,
+        wrap: o.wrap,
+        spellcheck: o.spellCheck,
+        autocomplete: o.autocomplete,
+        onInput: y[0] || (y[0] = async (r) => $(r)),
+        onChange: y[1] || (y[1] = async (r) => D(r)),
+        onBlur: y[2] || (y[2] = async (r) => _(r)),
+        onFocus: y[3] || (y[3] = async (r) => f(r)),
+        value: o.value ?? h.value,
         "aria-describedby": i.value,
-        placeholder: c.placeholder ?? v(fe),
-        rows: c.rows ?? v(Ee),
-        cols: c.cols
+        placeholder: o.placeholder ?? v(fe),
+        rows: o.rows ?? v(Ne),
+        cols: o.cols
       }, null, 40, Pa),
-      v(q)(c.message, c.showMessage) ? (m(), X(W, {
+      v(q)(o.message, o.showMessage) ? (m(), X(W, {
         key: 0,
         size: "small",
-        icon: c.messageIcon,
-        id: r.value
+        icon: o.messageIcon,
+        id: c.value
       }, {
-        default: z(() => [
-          L(w(c.message), 1)
+        default: R(() => [
+          L(k(o.message), 1)
         ]),
         _: 1
-      }, 8, ["icon", "id"])) : D("", !0),
+      }, 8, ["icon", "id"])) : M("", !0),
       O(W, {
         size: "small",
         semantic: "successful",
         id: l.value
       }, {
-        default: z(() => [
-          L(w(c.validMessage ?? v(Z)), 1)
+        default: R(() => [
+          L(k(o.validMessage ?? v(Z)), 1)
         ]),
         _: 1
       }, 8, ["id"]),
@@ -1825,18 +1825,18 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         semantic: "critical",
         id: p.value
       }, {
-        default: z(() => {
-          var u;
+        default: R(() => {
+          var r;
           return [
-            L(w(c.invalidMessage ?? ((u = B.value) == null ? void 0 : u.validationMessage) ?? v(x)), 1)
+            L(k(o.invalidMessage ?? ((r = B.value) == null ? void 0 : r.validationMessage) ?? v(x)), 1)
           ];
         }),
         _: 1
       }, 8, ["id"]),
-      _("span", Va, w(s.value), 1)
+      I("span", Va, k(s.value), 1)
     ], 10, Ra));
   }
-}), Ga = ["id", "data-width", "data-icon", "data-hide-icon", "data-active", "aria-disabled"], qa = ["aria-haspopup", "aria-expanded", "disabled"], Oa = ["id"], Wa = {
+}), Ga = ["id", "data-width", "data-icon", "data-hide-icon", "data-active", "aria-disabled"], qa = ["aria-haspopup", "aria-expanded", "disabled"], Oa = ["data-auto-close", "id"], Wa = {
   key: 0,
   class: "db-mobile-navigation-back"
 }, Rn = /* @__PURE__ */ E({
@@ -1861,108 +1861,115 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     text: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(!1), e = o(!1), a = o(!0), r = o(!1), l = o(
+    const n = t, d = u(!1), e = u(!1), a = u(!0), c = u(!1), l = u(!1), p = u(
       "sub-navigation-" + G()
-    ), p = o(void 0), i = o(null);
-    R(() => {
+    ), i = u(void 0), h = u(null);
+    U(() => {
       d.value = !0;
-    }), M(
+    }), z(
       () => [n.subNavigationExpanded],
       () => {
-        n.subNavigationExpanded !== void 0 && (r.value = !!n.subNavigationExpanded);
+        n.subNavigationExpanded !== void 0 && (c.value = !!n.subNavigationExpanded);
       },
       {
         immediate: !0,
         flush: "post"
       }
-    ), M(
+    ), z(
       () => [d.value],
       () => {
-        B();
+        D();
       },
       {
         immediate: !0,
         flush: "post"
       }
     );
-    function h(y) {
-      n.onClick && n.onClick(y), e.value && (r.value = !0);
+    function s(_) {
+      be(_) && (l.value = !0, H(() => {
+        l.value = !1;
+      }, 300));
     }
-    function s(y) {
-      y.stopPropagation(), r.value = !1;
+    function B(_) {
+      n.onClick && n.onClick(_), e.value && (c.value = !0);
     }
-    function B() {
-      var y;
-      if (d.value && document && l.value) {
-        const $ = document == null ? void 0 : document.getElementById(
-          l.value
+    function $(_) {
+      _.stopPropagation(), c.value = !1;
+    }
+    function D() {
+      var _;
+      if (d.value && document && p.value) {
+        const f = document == null ? void 0 : document.getElementById(
+          p.value
         );
-        $ && (((y = $.children) == null ? void 0 : y.length) > 0 ? (e.value = !0, p.value || (p.value = new Ke(
-          i.value,
-          $
+        f && (((_ = f.children) == null ? void 0 : _.length) > 0 ? (e.value = !0, i.value || (i.value = new Ke(
+          h.value,
+          f
         ))) : a.value = !1);
       }
     }
-    return (y, $) => (m(), g("li", {
+    return (_, f) => (m(), g("li", {
       ref_key: "_ref",
-      ref: i,
-      id: y.id,
-      onMouseover: $[1] || ($[1] = async (U) => {
-        var f;
-        return (f = p.value) == null ? void 0 : f.enableFollow();
+      ref: h,
+      id: _.id,
+      onMouseover: f[2] || (f[2] = async (o) => {
+        var y;
+        return (y = i.value) == null ? void 0 : y.enableFollow();
       }),
-      onMouseleave: $[2] || ($[2] = async (U) => {
-        var f;
-        return (f = p.value) == null ? void 0 : f.disableFollow();
+      onMouseleave: f[3] || (f[3] = async (o) => {
+        var y;
+        return (y = i.value) == null ? void 0 : y.disableFollow();
       }),
-      onMousemove: $[3] || ($[3] = async (U) => {
-        var f;
-        return (f = p.value) == null ? void 0 : f.followByMouseEvent(U);
+      onMousemove: f[4] || (f[4] = async (o) => {
+        var y;
+        return (y = i.value) == null ? void 0 : y.followByMouseEvent(o);
       }),
       class: N(v(A)("db-navigation-item", n.class)),
-      "data-width": y.width,
-      "data-icon": y.icon,
-      "data-hide-icon": v(P)(y.showIcon),
-      "data-active": y.active,
-      "aria-disabled": v(V)(y.disabled)
+      "data-width": _.width,
+      "data-icon": _.icon,
+      "data-hide-icon": v(P)(_.showIcon),
+      "data-active": _.active,
+      "aria-disabled": v(V)(_.disabled)
     }, [
-      a.value ? D("", !0) : (m(), g(C, { key: 0 }, [
-        y.text ? (m(), g(C, { key: 0 }, [
-          L(w(y.text), 1)
-        ], 64)) : I(y.$slots, "default", { key: 1 })
+      a.value ? M("", !0) : (m(), g(C, { key: 0 }, [
+        _.text ? (m(), g(C, { key: 0 }, [
+          L(k(_.text), 1)
+        ], 64)) : w(_.$slots, "default", { key: 1 })
       ], 64)),
       a.value ? (m(), g(C, { key: 1 }, [
-        _("button", {
+        I("button", {
           class: "db-navigation-item-expand-button",
           "aria-haspopup": e.value,
-          "aria-expanded": r.value,
-          disabled: y.disabled,
-          onClick: $[0] || ($[0] = async (U) => h(U))
+          "aria-expanded": c.value,
+          disabled: _.disabled,
+          onClick: f[0] || (f[0] = async (o) => B(o))
         }, [
-          y.text ? (m(), g(C, { key: 0 }, [
-            L(w(y.text), 1)
-          ], 64)) : I(y.$slots, "default", { key: 1 })
+          _.text ? (m(), g(C, { key: 0 }, [
+            L(k(_.text), 1)
+          ], 64)) : w(_.$slots, "default", { key: 1 })
         ], 8, qa),
-        _("menu", {
+        I("menu", {
           class: "db-sub-navigation",
-          id: l.value
+          "data-auto-close": l.value,
+          id: p.value,
+          onClick: f[1] || (f[1] = async (o) => s(o))
         }, [
           e.value ? (m(), g("div", Wa, [
             O(de, {
               icon: "arrow_left",
               variant: "ghost",
-              id: y.backButtonId,
-              onClick: (U) => s(U)
+              id: _.backButtonId,
+              onClick: (o) => $(o)
             }, {
-              default: z(() => [
-                L(w(y.backButtonText ?? v(_e)), 1)
+              default: R(() => [
+                L(k(_.backButtonText ?? v($e)), 1)
               ]),
               _: 1
             }, 8, ["id", "onClick"])
-          ])) : D("", !0),
-          I(y.$slots, "sub-navigation")
+          ])) : M("", !0),
+          w(_.$slots, "sub-navigation")
         ], 8, Oa)
-      ], 64)) : D("", !0)
+      ], 64)) : M("", !0)
     ], 42, Ga));
   }
 }), Xa = ["id"], Ha = ["aria-disabled", "open"], ja = /* @__PURE__ */ E({
@@ -1982,11 +1989,11 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     onToggle: { type: Function, default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(ee), e = o(!1), a = o(null);
-    R(() => {
+    const n = t, d = u(ee), e = u(!1), a = u(null);
+    U(() => {
       d.value = n.id || "accordion-item-" + G(), n.defaultOpen && (e.value = n.defaultOpen);
     });
-    function r(l) {
+    function c(l) {
       l == null || l.preventDefault();
       const p = !e.value;
       n.onToggle && n.onToggle(p), e.value = p;
@@ -1995,24 +2002,24 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
       id: d.value,
       class: N(v(A)("db-accordion-item", n.class))
     }, [
-      _("details", {
+      I("details", {
         "aria-disabled": v(V)(l.disabled),
         ref_key: "_ref",
         ref: a,
         open: e.value
       }, [
-        _("summary", {
-          onClick: p[0] || (p[0] = async (i) => r(i))
+        I("summary", {
+          onClick: p[0] || (p[0] = async (i) => c(i))
         }, [
           l.headlinePlain ? (m(), g(C, { key: 0 }, [
-            L(w(l.headlinePlain), 1)
-          ], 64)) : D("", !0),
-          l.headlinePlain ? D("", !0) : I(l.$slots, "headline", { key: 1 })
+            L(k(l.headlinePlain), 1)
+          ], 64)) : M("", !0),
+          l.headlinePlain ? M("", !0) : w(l.$slots, "headline", { key: 1 })
         ]),
-        _("div", null, [
+        I("div", null, [
           l.text ? (m(), g(C, { key: 0 }, [
-            L(w(l.text), 1)
-          ], 64)) : I(l.$slots, "default", { key: 1 })
+            L(k(l.text), 1)
+          ], 64)) : w(l.$slots, "default", { key: 1 })
         ])
       ], 8, Ha)
     ], 10, Xa));
@@ -2034,10 +2041,10 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     autofocus: { type: Boolean }
   },
   setup(t) {
-    const n = t, d = o(ee), e = o(""), a = o(!1), r = o(!1), l = o(null);
-    R(() => {
-      d.value = n.id || "accordion-" + G(), a.value = !0, r.value = !0;
-    }), M(
+    const n = t, d = u(ee), e = u(""), a = u(!1), c = u(!1), l = u(null);
+    U(() => {
+      d.value = n.id || "accordion-" + G(), a.value = !0, c.value = !0;
+    }), z(
       () => [a.value, n.name, n.behavior, d.value],
       () => {
         a.value && (n.behavior === "single" ? n.name ? e.value !== n.name && (e.value = n.name) : e.value !== d.value && d.value && (e.value = d.value) : e.value = "");
@@ -2046,7 +2053,7 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         immediate: !0,
         flush: "post"
       }
-    ), M(
+    ), z(
       () => [l.value, e.value],
       () => {
         if (l.value) {
@@ -2060,23 +2067,23 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         immediate: !0,
         flush: "post"
       }
-    ), M(
-      () => [l.value, r.value, n.initOpenIndex],
+    ), z(
+      () => [l.value, c.value, n.initOpenIndex],
       () => {
         var i;
-        if (l.value && r.value) {
+        if (l.value && c.value) {
           if (n.initOpenIndex && ((i = n.initOpenIndex) == null ? void 0 : i.length) > 0) {
             const h = l.value.getElementsByTagName("details");
             if (h) {
               const s = n.behavior === "single" && n.initOpenIndex.length > 1 ? [n.initOpenIndex[0]] : n.initOpenIndex;
               Array.from(h).forEach(
-                (B, y) => {
-                  s.includes(y) && (B.open = !0);
+                (B, $) => {
+                  s.includes($) && (B.open = !0);
                 }
               );
             }
           }
-          r.value = !1;
+          c.value = !1;
         }
       },
       {
@@ -2099,13 +2106,13 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
       class: N(v(A)("db-accordion", n.class)),
       "data-variant": i.variant
     }, [
-      i.items ? D("", !0) : I(i.$slots, "default", { key: 0 }),
+      i.items ? M("", !0) : w(i.$slots, "default", { key: 0 }),
       i.items ? (m(!0), g(C, { key: 1 }, te(p(i.items), (s, B) => (m(), X(ja, {
         key: `accordion-item-${B}`,
         headlinePlain: s.headlinePlain,
         disabled: s.disabled,
         text: s.text
-      }, null, 8, ["headlinePlain", "disabled", "text"]))), 128)) : D("", !0)
+      }, null, 8, ["headlinePlain", "disabled", "text"]))), 128)) : M("", !0)
     ], 10, Ya));
   }
 }), Ka = ["id", "aria-labelledby"], Pn = /* @__PURE__ */ E({
@@ -2120,18 +2127,18 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     labelledBy: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(ee), e = o(null);
-    return R(() => {
+    const n = t, d = u(ee), e = u(null);
+    return U(() => {
       d.value = n.id || "navigation-" + G();
-    }), (a, r) => (m(), g("nav", {
+    }), (a, c) => (m(), g("nav", {
       ref_key: "_ref",
       ref: e,
       id: d.value,
       "aria-labelledby": a.labelledBy,
       class: N(v(A)("db-navigation", n.class))
     }, [
-      _("menu", null, [
-        I(a.$slots, "default")
+      I("menu", null, [
+        w(a.$slots, "default")
       ])
     ], 10, Ka));
   }
@@ -2154,10 +2161,10 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     width: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(!1), e = o(!1), a = o(null);
-    R(() => {
+    const n = t, d = u(!1), e = u(!1), a = u(null);
+    U(() => {
       d.value = !0;
-    }), M(
+    }), z(
       () => [a.value, d.value],
       () => {
         if (a.value && d.value) {
@@ -2169,7 +2176,7 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         immediate: !0,
         flush: "post"
       }
-    ), M(
+    ), z(
       () => [a.value, e.value],
       () => {
         if (a.value) {
@@ -2182,7 +2189,7 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         flush: "post"
       }
     );
-    function r() {
+    function c() {
       if (e.value = !0, !a.value) return;
       const i = a.value.querySelector("article");
       i && se(i);
@@ -2207,13 +2214,13 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
       ref: a,
       id: i.id,
       class: N(v(A)("db-popover", n.class)),
-      onFocus: h[0] || (h[0] = async (s) => r()),
+      onFocus: h[0] || (h[0] = async (s) => c()),
       onBlur: h[1] || (h[1] = async (s) => l(s)),
-      onMouseenter: h[2] || (h[2] = async (s) => r()),
+      onMouseenter: h[2] || (h[2] = async (s) => c()),
       onMouseleave: h[3] || (h[3] = async (s) => l(s))
     }, [
-      I(i.$slots, "trigger"),
-      _("article", {
+      w(i.$slots, "trigger"),
+      I("article", {
         class: "db-popover-content",
         "data-spacing": i.spacing,
         "data-gap": v(V)(i.gap),
@@ -2223,7 +2230,7 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         "data-width": i.width,
         "data-placement": i.placement
       }, [
-        I(i.$slots, "default")
+        w(i.$slots, "default")
       ], 8, Qa)
     ], 42, Ja));
   }
@@ -2244,10 +2251,10 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     width: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(ee), e = o(!1), a = o(null);
-    R(() => {
+    const n = t, d = u(ee), e = u(!1), a = u(null);
+    U(() => {
       d.value = n.id || "tooltip-" + G(), e.value = !0;
-    }), M(
+    }), z(
       () => [a.value, e.value],
       () => {
         if (a.value && e.value && d.value) {
@@ -2262,7 +2269,7 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         flush: "post"
       }
     );
-    function r(p) {
+    function c(p) {
       p.stopPropagation();
     }
     function l() {
@@ -2282,9 +2289,9 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
       "data-width": p.width,
       "data-show-arrow": v(V)(p.showArrow ?? !0),
       "data-placement": p.placement,
-      onClick: i[0] || (i[0] = async (h) => r(h))
+      onClick: i[0] || (i[0] = async (h) => c(h))
     }, [
-      I(p.$slots, "default")
+      w(p.$slots, "default")
     ], 10, Za));
   }
 }), xa = ["id"], en = { role: "tablist" }, an = /* @__PURE__ */ E({
@@ -2298,17 +2305,17 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     autofocus: { type: Boolean }
   },
   setup(t) {
-    const n = t, d = o(ee), e = o(null);
-    return R(() => {
+    const n = t, d = u(ee), e = u(null);
+    return U(() => {
       d.value = n.id || "tab-list-" + G();
-    }), (a, r) => (m(), g("div", {
+    }), (a, c) => (m(), g("div", {
       ref_key: "_ref",
       ref: e,
       id: d.value,
       class: N(v(A)("db-tab-list", n.class))
     }, [
-      _("ul", en, [
-        I(a.$slots, "default")
+      I("ul", en, [
+        w(a.$slots, "default")
       ])
     ], 10, xa));
   }
@@ -2325,8 +2332,8 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     labelledBy: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(null);
-    return R(() => {
+    const n = t, d = u(null);
+    return U(() => {
     }), (e, a) => (m(), g("section", {
       role: "tabpanel",
       ref_key: "_ref",
@@ -2336,9 +2343,9 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
       "aria-labelledby": e.labelledBy
     }, [
       e.content ? (m(), g(C, { key: 0 }, [
-        L(w(e.content), 1)
-      ], 64)) : D("", !0),
-      I(e.$slots, "default")
+        L(k(e.content), 1)
+      ], 64)) : M("", !0),
+      w(e.$slots, "default")
     ], 10, nn));
   }
 }), dn = ["id", "data-orientation", "data-scroll-behavior", "data-alignment", "data-width"], qn = /* @__PURE__ */ E({
@@ -2363,18 +2370,18 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     alignment: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o("tabs-" + G()), e = o(""), a = o(!1), r = o(!1), l = o(!1), p = o(null), i = o(null);
-    R(() => {
+    const n = t, d = u("tabs-" + G()), e = u(""), a = u(!1), c = u(!1), l = u(!1), p = u(null), i = u(null);
+    U(() => {
       d.value = n.id || d.value, e.value = `tabs-${n.name || G()}`, a.value = !0;
-    }), M(
+    }), z(
       () => [i.value, a.value],
       () => {
         if (i.value && a.value) {
-          y(), $(!0);
+          $(), D(!0);
           const f = i.value.querySelector(".db-tab-list");
-          f && new MutationObserver((k) => {
-            k.forEach((u) => {
-              (u.removedNodes.length || u.addedNodes.length) && (y(), $());
+          f && new MutationObserver((y) => {
+            y.forEach((r) => {
+              (r.removedNodes.length || r.addedNodes.length) && ($(), D());
             });
           }).observe(f, {
             childList: !0,
@@ -2390,45 +2397,45 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     function h(f) {
       try {
         return typeof f == "string" ? JSON.parse(f) : f;
-      } catch (c) {
-        console.error(c);
+      } catch (o) {
+        console.error(o);
       }
       return [];
     }
     function s(f) {
-      const c = f.scrollWidth > f.clientWidth;
-      r.value = c && f.scrollLeft > 1, l.value = c && f.scrollLeft < f.scrollWidth - f.clientWidth;
+      const o = f.scrollWidth > f.clientWidth;
+      c.value = o && f.scrollLeft > 1, l.value = o && f.scrollLeft < f.scrollWidth - f.clientWidth;
     }
     function B(f) {
-      var k;
-      let c = n.arrowScrollDistance || 100;
-      f && (c *= -1), (k = p.value) == null || k.scrollBy({
+      var y;
+      let o = n.arrowScrollDistance || 100;
+      f && (o *= -1), (y = p.value) == null || y.scrollBy({
         top: 0,
-        left: c,
+        left: o,
         behavior: "smooth"
       });
     }
-    function y() {
+    function $() {
       if (i.value) {
         const f = i.value.querySelector(".db-tab-list");
         if (f) {
-          const c = f.querySelector('[role="tablist"]');
-          c && (c.setAttribute(
+          const o = f.querySelector('[role="tablist"]');
+          o && (o.setAttribute(
             "aria-orientation",
             n.orientation || "horizontal"
-          ), n.behavior === "arrows" && (p.value = c, s(c), c.addEventListener("scroll", () => {
-            s(c);
+          ), n.behavior === "arrows" && (p.value = o, s(o), o.addEventListener("scroll", () => {
+            s(o);
           })));
         }
       }
     }
-    function $(f) {
+    function D(f) {
       if (i.value) {
-        const c = Array.from(
+        const o = Array.from(
           i.value.getElementsByClassName("db-tab-item")
         );
-        for (const u of c) {
-          const T = c.indexOf(u), b = u.querySelector("label"), S = u.querySelector("input");
+        for (const r of o) {
+          const T = o.indexOf(r), b = r.querySelector("label"), S = r.querySelector("input");
           if (S && b) {
             if (!S.id) {
               const F = `${e.value}-tab-${T}`;
@@ -2443,29 +2450,29 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
             }
           }
         }
-        const k = Array.from(
+        const y = Array.from(
           i.value.querySelectorAll(
             ":is(:scope > .db-tab-panel, :scope > db-tab-panel > .db-tab-panel)"
           )
         );
-        for (const u of k) {
-          if (u.id) continue;
-          const T = k.indexOf(u);
-          u.id = `${e.value}-tab-panel-${T}`, u.setAttribute("aria-labelledby", `${e.value}-tab-${T}`);
+        for (const r of y) {
+          if (r.id) continue;
+          const T = y.indexOf(r);
+          r.id = `${e.value}-tab-panel-${T}`, r.setAttribute("aria-labelledby", `${e.value}-tab-${T}`);
         }
       }
     }
-    function U(f) {
+    function _(f) {
       if (n.onIndexChange && f.target) {
-        const c = f.target.closest("ul"), k = (
+        const o = f.target.closest("ul"), y = (
           // db-tab-item for angular and stencil wrapping elements
           f.target.closest("db-tab-item") ?? f.target.closest("li")
         );
-        c !== null && k !== null && n.onIndexChange(Array.from(c.childNodes).indexOf(k));
+        o !== null && y !== null && n.onIndexChange(Array.from(o.childNodes).indexOf(y));
       }
       n.onTabSelect && n.onTabSelect(f);
     }
-    return (f, c) => (m(), g("div", {
+    return (f, o) => (m(), g("div", {
       ref_key: "_ref",
       ref: i,
       id: d.value,
@@ -2474,46 +2481,46 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
       "data-scroll-behavior": f.behavior,
       "data-alignment": f.alignment ?? "start",
       "data-width": f.width ?? "auto",
-      onInput: c[0] || (c[0] = async (k) => U(k))
+      onInput: o[0] || (o[0] = async (y) => _(y))
     }, [
-      r.value ? (m(), X(de, {
+      c.value ? (m(), X(de, {
         key: 0,
         class: "tabs-scroll-left",
         variant: "ghost",
         icon: "chevron_left",
         type: "button",
         noText: !0,
-        onClick: (k) => B(!0)
+        onClick: (y) => B(!0)
       }, {
-        default: z(() => c[1] || (c[1] = [
+        default: R(() => o[1] || (o[1] = [
           L(" Scroll left ")
         ])),
         _: 1
-      }, 8, ["onClick"])) : D("", !0),
+      }, 8, ["onClick"])) : M("", !0),
       f.tabs ? (m(), g(C, { key: 1 }, [
         O(an, null, {
-          default: z(() => [
-            (m(!0), g(C, null, te(h(f.tabs), (k, u) => (m(), X(Da, {
-              key: f.name + "tab-item" + u,
-              active: k.active,
-              label: k.label,
-              iconAfter: k.iconAfter,
-              icon: k.icon,
-              noText: k.noText
+          default: R(() => [
+            (m(!0), g(C, null, te(h(f.tabs), (y, r) => (m(), X(Da, {
+              key: f.name + "tab-item" + r,
+              active: y.active,
+              label: y.label,
+              iconAfter: y.iconAfter,
+              icon: y.icon,
+              noText: y.noText
             }, null, 8, ["active", "label", "iconAfter", "icon", "noText"]))), 128))
           ]),
           _: 1
         }),
-        (m(!0), g(C, null, te(h(f.tabs), (k, u) => (m(), X(tn, {
-          key: f.name + "tab-panel" + u,
-          content: k.content
+        (m(!0), g(C, null, te(h(f.tabs), (y, r) => (m(), X(tn, {
+          key: f.name + "tab-panel" + r,
+          content: y.content
         }, {
-          default: z(() => [
-            L(w(k.children), 1)
+          default: R(() => [
+            L(k(y.children), 1)
           ]),
           _: 2
         }, 1032, ["content"]))), 128))
-      ], 64)) : D("", !0),
+      ], 64)) : M("", !0),
       l.value ? (m(), X(de, {
         key: 2,
         class: "tabs-scroll-right",
@@ -2521,14 +2528,14 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         icon: "chevron_right",
         type: "button",
         noText: !0,
-        onClick: (k) => B()
+        onClick: (y) => B()
       }, {
-        default: z(() => c[2] || (c[2] = [
+        default: R(() => o[2] || (o[2] = [
           L(" Scroll right ")
         ])),
         _: 1
-      }, 8, ["onClick"])) : D("", !0),
-      I(f.$slots, "default")
+      }, 8, ["onClick"])) : M("", !0),
+      w(f.$slots, "default")
     ], 42, dn));
   }
 }), On = ["adaptive", "neutral", "critical", "informational", "warning", "successful"], Wn = ["medium", "small", "large", "none"], Xn = ["medium", "small", "large", "none"], Hn = ["left", "right", "top", "bottom", "left-start", "left-end", "right-start", "right-end", "top-start", "top-end", "bottom-start", "bottom-end"], jn = ["none", "3x-large", "2x-large", "x-large", "large", "medium", "small", "x-small", "2x-small", "3x-small"], Yn = ["horizontal", "vertical"], Kn = ["full", "auto"], Jn = ["full", "medium", "large", "small"], Qn = ["none", "slow", "fast"], Zn = ["auto", "fixed"], xn = ["small", "medium"], ln = ["weak", "strong"], et = [...ln, "origin"], at = ["invalid", "valid", "no-validation"], nt = ["above", "floating"], tt = ["off", "on", "name", "honorific-prefix", "given-name", "additional-name", "family-name", "honorific-suffix", "nickname", "email", "username", "new-password", "current-password", "one-time-code", "organization-title", "organization", "street-address", "shipping", "billing", "address-line1", "address-line2", "address-line3", "address-level4", "address-level3", "address-level2", "address-level1", "country", "country-name", "postal-code", "cc-name", "cc-given-name", "cc-additional-name", "cc-family-name", "cc-number", "cc-exp", "cc-exp-month", "cc-exp-year", "cc-csc", "cc-type", "transaction-currency", "transaction-amount", "language", "bday", "bday-day", "bday-month", "bday-year", "sex", "tel", "tel-country-code", "tel-national", "tel-area-code", "tel-local", "tel-extension", "impp", "url", "photo", "webauthn"], dt = ["time", "true", "false", "date", "page", "step", "location"], it = ["_self", "_blank", "_parent", "_top"], lt = ["no-referrer", "no-referrer-when-downgrade", "origin", "origin-when-cross-origin", "same-origin", "strict-origin", "strict-origin-when-cross-origin", "unsafe-url"], st = ["start", "center"], sn = ["id", "data-gap", "data-variant", "data-direction", "data-alignment", "data-justify-content", "data-wrap"], ot = /* @__PURE__ */ E({
@@ -2548,7 +2555,7 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     gap: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(null);
+    const n = t, d = u(null);
     return (e, a) => (m(), g("div", {
       ref_key: "_ref",
       ref: d,
@@ -2561,7 +2568,7 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
       "data-justify-content": e.justifyContent,
       "data-wrap": v(V)(e.wrap)
     }, [
-      I(e.$slots, "default")
+      w(e.$slots, "default")
     ], 10, sn));
   }
 });
@@ -2581,7 +2588,7 @@ export {
   In as DBCard,
   _n as DBCheckbox,
   $n as DBDivider,
-  je as DBDrawer,
+  Ye as DBDrawer,
   Ln as DBHeader,
   En as DBIcon,
   W as DBInfotext,
@@ -2604,11 +2611,11 @@ export {
   Mn as DBTag,
   zn as DBTextarea,
   Gn as DBTooltip,
-  _e as DEFAULT_BACK,
-  $e as DEFAULT_BURGER_MENU,
+  $e as DEFAULT_BACK,
+  Le as DEFAULT_BURGER_MENU,
   ce as DEFAULT_CLOSE_BUTTON,
   ue as DEFAULT_DATALIST_ID_SUFFIX,
-  Le as DEFAULT_ICON,
+  Ee as DEFAULT_ICON,
   ee as DEFAULT_ID,
   x as DEFAULT_INVALID_MESSAGE,
   Q as DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
@@ -2616,14 +2623,14 @@ export {
   K as DEFAULT_MESSAGE_ID_SUFFIX,
   fe as DEFAULT_PLACEHOLDER,
   oe as DEFAULT_PLACEHOLDER_ID_SUFFIX,
-  Ee as DEFAULT_ROWS,
+  Ne as DEFAULT_ROWS,
   Z as DEFAULT_VALID_MESSAGE,
   J as DEFAULT_VALID_MESSAGE_ID_SUFFIX,
-  Ne as DEFAULT_VIEWPORT,
+  Ae as DEFAULT_VIEWPORT,
   hn as DENSITIES,
   ve as DENSITY,
   vn as DENSITY_CONST,
-  Ae as DESKTOP_VIEWPORT,
+  Fe as DESKTOP_VIEWPORT,
   ln as EmphasisList,
   jn as GapSpacingList,
   nt as LabelVariantList,
@@ -2653,9 +2660,9 @@ export {
   P as getHideProp,
   se as handleDataOutside,
   Y as hasVoiceOver,
-  ke as isArrayOfStrings,
-  Ye as isEventTargetNavigationItem,
-  Be as isInView,
+  we as isArrayOfStrings,
+  be as isEventTargetNavigationItem,
+  ke as isInView,
   q as stringPropVisible,
   G as uuid,
   fn as visibleInVX,