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

package/dist/db-ux.es.js

@@ -1,8 +1,8 @@
-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 A, ref as o, createElementBlock as g, openBlock as m, unref as r, normalizeClass as N, renderSlot as I, Fragment as T, createTextVNode as E, toDisplayString as w, createCommentVNode as D, createElementVNode as _, createBlock as X, withCtx as z, onMounted as U, watch as R, createVNode as W, renderList as ne, onUnmounted as ye } from "vue";
-const V = () => {
+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") {
     if ((t = window.crypto) != null && t.randomUUID)
@@ -16,7 +16,7 @@ const V = () => {
   Object.values(d).forEach((e) => {
     e.setAttribute(n.key, n.value), e.children.length > 0 && re(e, n);
   });
-}, F = (...t) => {
+}, A = (...t) => {
   let n = "";
   for (const d of t)
     if (d)
@@ -26,13 +26,7 @@ const V = () => {
         for (const e in d)
           d[e] && (n += `${e} `);
   return n.trim();
-}, Be = ["suppressHydrationWarning", "suppressContentEditableWarning", "translate", "title", "tabIndex", "style", "spellCheck", "nonce", "lang", "hidden", "draggable", "dir", "contextMenu", "contentEditable", "autoFocus", "accessKey", "is", "inputMode", "unselectable", "security", "results", "vocab", "typeof", "rev", "resource", "rel", "property", "inlist", "datatype", "content", "about", "role", "radioGroup", "color"], cn = (t, n) => Object.keys(t).filter((d) => (d.startsWith("data-") || d.startsWith("aria-") || d.startsWith("default") || d.startsWith("auto") || d.startsWith("item") || d.startsWith("on") || Be.includes(d)) && !n.includes(d)).reduce((d, e) => ({
-  ...d,
-  [e]: t[e]
-}), {}), vn = (t, n) => Object.keys(t).filter((d) => n.includes(d)).reduce((d, e) => ({
-  ...d,
-  [e]: t[e]
-}), {}), pn = (t) => {
+}, fn = (t) => {
   const {
     left: n,
     right: d
@@ -40,7 +34,7 @@ const V = () => {
     innerWidth: e
   } = window;
   return n >= 0 && d <= e;
-}, hn = (t) => {
+}, cn = (t) => {
   const {
     top: n,
     bottom: d
@@ -49,20 +43,20 @@ const V = () => {
   } = window;
   return n >= 0 && d <= e;
 }, ke = (t) => {
-  var k;
+  var _;
   const {
     top: n,
     bottom: d,
     left: e,
     right: a
   } = t.getBoundingClientRect(), {
-    innerHeight: u,
+    innerHeight: c,
     innerWidth: l
   } = window;
-  let c = n < 0, i = d > u, h = e < 0, s = a > l;
-  const B = t.hasAttribute("data-outside-vy"), y = t.hasAttribute("data-outside-vx"), L = (k = t == null ? void 0 : t.parentElement) == null ? void 0 : k.getBoundingClientRect();
-  return L && (B && (t.getAttribute("data-outside-vy") === "top" ? c = L.top - (d - L.bottom) < 0 : i = L.bottom + (L.top - n) > u), y && (t.getAttribute("data-outside-vx") === "left" ? h = L.left - (a - L.right) < 0 : s = L.right + (L.left - e) > l)), {
-    outTop: c,
+  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,
     outRight: s
@@ -74,17 +68,17 @@ const V = () => {
     outLeft: e,
     outRight: a
   } = ke(t);
-  let u = {};
-  return n || d ? (u = {
+  let c = {};
+  return n || d ? (c = {
     vy: n ? "top" : "bottom"
-  }, t.setAttribute("data-outside-vy", u.vy)) : t.removeAttribute("data-outside-vy"), e || a ? (u = {
-    ...u,
+  }, 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", u.vx)) : t.removeAttribute("data-outside-vx"), u;
-}, 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)), G = (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 G(!t);
-}, 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"], te = /* @__PURE__ */ A({
+    return V(!t);
+}, 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 },
@@ -111,50 +105,50 @@ const V = () => {
     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, u) => (m(), g("button", {
+    return (a, c) => (m(), g("button", {
       ref_key: "_ref",
       ref: d,
       id: a.id,
-      class: N(r(F)("db-button", n.class)),
+      class: N(v(A)("db-button", n.class)),
       type: a.type || "button",
       disabled: a.disabled,
       "aria-label": a.label,
       "data-icon": a.icon,
-      "data-hide-icon": r(P)(a.showIcon),
+      "data-hide-icon": v(P)(a.showIcon),
       "data-size": a.size,
       "data-state": a.state,
       "data-width": a.width,
       "data-variant": a.variant,
-      "data-no-text": r(G)(a.noText),
+      "data-no-text": v(V)(a.noText),
       name: a.name,
       value: a.value,
       "aria-describedby": a.describedbyid,
       "aria-expanded": a.ariaexpanded,
       "aria-pressed": a.ariapressed,
-      onClick: u[0] || (u[0] = async (l) => e(l))
+      onClick: c[0] || (c[0] = async (l) => e(l))
     }, [
-      a.text ? (m(), g(T, { key: 0 }, [
-        E(w(a.text), 1)
-      ], 64)) : I(a.$slots, "default", { key: 1 })
+      a.text ? (m(), g(C, { key: 0 }, [
+        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", Le = "BurgerMenu", Ee = "brand", Ae = 4, ce = "Close Button", mn = "density", bn = "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 gn = Object.entries(ve).map(([, t]) => t);
+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 yn = Object.entries(he).map(([, t]) => t), Bn = Object.entries(pe).map(([, t]) => t);
+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 kn = Object.entries(me).map(([, t]) => t), Ne = {
+const gn = Object.entries(me).map(([, t]) => t), Ae = {
   width: 390,
   height: 884
 }, Fe = {
   width: 1920,
   height: 1280
-}, wn = [{
+}, yn = [{
   name: "desktop",
   ...Fe
 }, {
@@ -163,8 +157,8 @@ const kn = Object.entries(me).map(([, t]) => t), Ne = {
   height: 1024
 }, {
   name: "mobile",
-  ...Ne
-}], Te = ["id", "aria-live", "data-semantic", "data-variant", "data-icon", "data-hide-icon", "data-link-variant"], Se = { key: 0 }, Ce = { key: 1 }, In = /* @__PURE__ */ A({
+  ...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 },
@@ -195,32 +189,32 @@ const kn = 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, u) => (m(), g("article", {
+    return (a, c) => (m(), g("article", {
       ref_key: "_ref",
       ref: d,
       id: a.id,
-      class: N(r(F)("db-notification", n.class)),
+      class: N(v(A)("db-notification", n.class)),
       "aria-live": a.ariaLive,
       "data-semantic": a.semantic,
       "data-variant": a.variant,
       "data-icon": a.icon,
-      "data-hide-icon": r(P)(a.showIcon),
+      "data-hide-icon": v(P)(a.showIcon),
       "data-link-variant": a.linkVariant
     }, [
-      I(a.$slots, "image"),
-      r(q)(a.headline, a.showHeadline) ? (m(), g("header", Se, w(a.headline), 1)) : D("", !0),
-      _("p", null, [
-        a.text ? (m(), g(T, { key: 0 }, [
-          E(w(a.text), 1)
-        ], 64)) : I(a.$slots, "default", { key: 1 })
+      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(k(a.text), 1)
+        ], 64)) : w(a.$slots, "default", { key: 1 })
       ]),
-      r(q)(a.timestamp, a.showTimestamp) ? (m(), g("span", Ce, w(a.timestamp), 1)) : D("", !0),
-      I(a.$slots, "link"),
-      a.closeable ? (m(), X(te, {
+      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",
         variant: "ghost",
@@ -229,14 +223,14 @@ const kn = Object.entries(me).map(([, t]) => t), Ne = {
         noText: !0,
         onClick: (l) => e()
       }, {
-        default: z(() => [
-          E(w(a.closeButtonText ?? r(ce)), 1)
+        default: R(() => [
+          L(k(a.closeButtonText ?? v(ce)), 1)
         ]),
         _: 1
-      }, 8, ["id", "onClick"])) : D("", !0)
+      }, 8, ["id", "onClick"])) : M("", !0)
     ], 10, Te));
   }
-}), De = ["id", "data-semantic", "data-size", "data-emphasis", "data-placement", "data-label"], _n = /* @__PURE__ */ A({
+}), De = ["id", "data-semantic", "data-size", "data-emphasis", "data-placement", "data-label"], kn = /* @__PURE__ */ E({
   __name: "badge",
   props: {
     placement: { default: void 0 },
@@ -253,42 +247,42 @@ const kn = Object.entries(me).map(([, t]) => t), Ne = {
     text: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(!1), e = o(null);
+    const n = t, d = u(!1), e = u(null);
     return U(() => {
       d.value = !0;
-    }), R(
+    }), z(
       () => [e.value, d.value],
       () => {
         var a;
         if (e.value && d.value && (a = n.placement) != null && a.startsWith("corner")) {
-          let u = e.value.parentElement;
-          u && u.localName.includes("badge") && (u = u.parentElement), u && u.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, u) => {
+    ), (a, c) => {
       var l;
       return m(), g("span", {
         ref_key: "_ref",
         ref: e,
         id: a.id,
-        class: N(r(F)("db-badge", n.class)),
+        class: N(v(A)("db-badge", n.class)),
         "data-semantic": a.semantic,
         "data-size": a.size,
         "data-emphasis": a.emphasis,
         "data-placement": a.placement,
-        "data-label": ((l = a.placement) == null ? void 0 : l.startsWith("corner")) && (a.label ?? r(le))
+        "data-label": ((l = a.placement) == null ? void 0 : l.startsWith("corner")) && (a.label ?? v(le))
       }, [
-        a.text ? (m(), g(T, { key: 0 }, [
-          E(w(a.text), 1)
-        ], 64)) : I(a.$slots, "default", { key: 1 })
+        a.text ? (m(), g(C, { key: 0 }, [
+          L(k(a.text), 1)
+        ], 64)) : w(a.$slots, "default", { key: 1 })
       ], 10, De);
     };
   }
-}), Me = ["data-icon", "data-hide-icon", "id"], $n = /* @__PURE__ */ A({
+}), Me = ["data-icon", "data-hide-icon", "id"], wn = /* @__PURE__ */ E({
   __name: "brand",
   props: {
     hideLogo: { type: Boolean, default: void 0 },
@@ -303,21 +297,21 @@ const kn = 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 ?? r(Ee),
-      "data-hide-icon": r(P)(e.showIcon),
+      "data-icon": e.hideLogo ? "none" : e.icon ?? v(Ee),
+      "data-hide-icon": v(P)(e.showIcon),
       id: e.id,
-      class: N(r(F)("db-brand", n.class))
+      class: N(v(A)("db-brand", n.class))
     }, [
-      e.text ? (m(), g(T, { key: 0 }, [
-        E(w(e.text), 1)
-      ], 64)) : I(e.$slots, "default", { key: 1 })
+      e.text ? (m(), g(C, { key: 0 }, [
+        L(k(e.text), 1)
+      ], 64)) : w(e.$slots, "default", { key: 1 })
     ], 10, Me));
   }
-}), Re = ["id", "data-behavior", "data-elevation-level", "data-spacing", "role", "tabIndex"], Ln = /* @__PURE__ */ A({
+}), ze = ["id", "data-behavior", "data-elevation-level", "data-spacing", "role", "tabIndex"], In = /* @__PURE__ */ E({
   __name: "card",
   props: {
     behavior: { default: void 0 },
@@ -332,28 +326,28 @@ const kn = 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, u) => (m(), g("div", {
+    return (a, c) => (m(), g("div", {
       ref_key: "_ref",
       ref: d,
       id: a.id,
-      class: N(r(F)("db-card", n.class)),
+      class: N(v(A)("db-card", n.class)),
       "data-behavior": a.behavior,
       "data-elevation-level": a.elevationLevel,
       "data-spacing": a.spacing,
       role: a.behavior === "interactive" ? "button" : void 0,
       tabIndex: a.behavior === "interactive" ? 0 : void 0,
-      onClick: u[0] || (u[0] = async (l) => e(l))
+      onClick: c[0] || (c[0] = async (l) => e(l))
     }, [
-      I(a.$slots, "default")
-    ], 10, Re));
+      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"], O = /* @__PURE__ */ A({
+}, Re = ["id", "data-icon", "data-semantic", "data-size", "data-hide-icon-before"], W = /* @__PURE__ */ E({
   __name: "infotext",
   props: {
     children: { default: void 0 },
@@ -369,26 +363,26 @@ const kn = 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,
       id: e.id,
-      class: N(r(F)("db-infotext", n.class)),
+      class: N(v(A)("db-infotext", n.class)),
       "data-icon": e.icon,
       "data-semantic": e.semantic,
       "data-size": e.size,
-      "data-hide-icon-before": r(P)(e.showIcon ?? !0)
+      "data-hide-icon-before": v(P)(e.showIcon ?? !0)
     }, [
-      e.text ? (m(), g(T, { key: 0 }, [
-        E(w(e.text), 1)
-      ], 64)) : I(e.$slots, "default", { key: 1 })
-    ], 10, ze));
+      e.text ? (m(), g(C, { key: 0 }, [
+        L(k(e.text), 1)
+      ], 64)) : w(e.$slots, "default", { key: 1 })
+    ], 10, Re));
   }
-}), Ue = ["data-size", "data-hide-label"], Pe = ["for"], Ge = ["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"
-}, En = /* @__PURE__ */ A({
+}, _n = /* @__PURE__ */ E({
   __name: "checkbox",
   props: {
     indeterminate: { type: Boolean, default: void 0 },
@@ -425,113 +419,117 @@ const kn = Object.entries(me).map(([, t]) => t), Ne = {
   },
   emits: ["update:checked"],
   setup(t, { emit: n }) {
-    const d = n, e = t, a = o(!1), u = o(void 0), l = o(void 0), c = o(void 0), i = o(void 0), h = o(""), s = o(""), B = o(null);
+    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 v = e.id ?? `checkbox-${V()}`;
-      u.value = v, l.value = v + K, c.value = v + J, i.value = v + Q;
-    }), R(
-      () => [u.value],
+      const f = e.id ?? `checkbox-${G()}`;
+      c.value = f, l.value = f + K, p.value = f + J, i.value = f + Q;
+    }), z(
+      () => [c.value],
       () => {
-        if (u.value) {
-          const v = u.value + K;
-          l.value = v, c.value = u.value + J, i.value = u.value + Q, q(e.message, e.showMessage) && (h.value = v);
+        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"
       }
-    ), R(
-      () => [a.value, e.indeterminate, e.checked],
+    ), z(
+      () => [a.value, B.value, e.indeterminate],
       () => {
-        if (a.value && document && u.value) {
-          const v = document == null ? void 0 : document.getElementById(
-            u.value
-          );
-          v && (e.checked != null && (v.checked = e.checked), e.indeterminate !== void 0 && (v.indeterminate = e.indeterminate), a.value = !1);
-        }
+        B.value && e.indeterminate !== void 0 && (B.value.indeterminate = e.indeterminate);
+      },
+      {
+        immediate: !0,
+        flush: "post"
+      }
+    ), z(
+      () => [a.value, B.value, e.checked],
+      () => {
+        a.value && B.value && (e.checked != null && (B.value.checked = e.checked), a.value = !1);
       },
       {
         immediate: !0,
         flush: "post"
       }
     );
-    function y(v) {
-      var p, $, f;
-      e.onChange && e.onChange(v), e.change && e.change(v), ae(d, v, "checked"), !((p = B.value) != null && p.validity.valid) || e.validation === "invalid" ? (h.value = i.value, Y() && (s.value = e.invalidMessage ?? (($ = B.value) == null ? void 0 : $.validationMessage) ?? x, H(() => s.value = "", 1e3))) : e.validation === "valid" || (f = B.value) != null && f.validity.valid && e.required ? (h.value = c.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 L(v) {
-      e.onBlur && e.onBlur(v), e.blur && e.blur(v);
+    function D(f) {
+      e.onBlur && e.onBlur(f), e.blur && e.blur(f);
     }
-    function k(v) {
-      e.onFocus && e.onFocus(v), e.focus && e.focus(v);
+    function _(f) {
+      e.onFocus && e.onFocus(f), e.focus && e.focus(f);
     }
-    return (v, p) => (m(), g("div", {
-      class: N(r(F)("db-checkbox", e.class)),
-      "data-size": v.size,
-      "data-hide-label": r(P)(v.showLabel)
+    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: u.value }, [
-        _("input", {
+      I("label", { for: c.value }, [
+        I("input", {
           type: "checkbox",
-          "aria-invalid": v.validation === "invalid",
-          "data-custom-validity": v.validation,
+          "aria-invalid": f.validation === "invalid",
+          "data-custom-validity": f.validation,
           ref_key: "_ref",
           ref: B,
-          id: u.value,
-          name: v.name,
-          checked: v.checked,
-          disabled: v.disabled,
-          value: v.value,
-          required: v.required,
-          onChange: p[0] || (p[0] = async ($) => y($)),
-          onBlur: p[1] || (p[1] = async ($) => L($)),
-          onFocus: p[2] || (p[2] = async ($) => k($)),
+          id: c.value,
+          name: f.name,
+          checked: f.checked,
+          disabled: f.disabled,
+          value: f.value,
+          required: f.required,
+          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, Ge),
-        v.label ? (m(), g(T, { key: 0 }, [
-          E(w(v.label), 1)
-        ], 64)) : I(v.$slots, "default", { key: 1 })
+        }, null, 40, Ve),
+        f.label ? (m(), g(C, { key: 0 }, [
+          L(k(f.label), 1)
+        ], 64)) : w(f.$slots, "default", { key: 1 })
       ], 8, Pe),
-      r(q)(v.message, v.showMessage) ? (m(), X(O, {
+      v(q)(f.message, f.showMessage) ? (m(), X(W, {
         key: 0,
         size: "small",
-        icon: v.messageIcon,
+        icon: f.messageIcon,
         id: l.value
       }, {
-        default: z(() => [
-          E(w(v.message), 1)
+        default: R(() => [
+          L(k(f.message), 1)
         ]),
         _: 1
-      }, 8, ["icon", "id"])) : D("", !0),
-      W(O, {
+      }, 8, ["icon", "id"])) : M("", !0),
+      O(W, {
         size: "small",
         semantic: "successful",
-        id: c.value
+        id: p.value
       }, {
-        default: z(() => [
-          E(w(v.validMessage ?? r(Z)), 1)
+        default: R(() => [
+          L(k(f.validMessage ?? v(Z)), 1)
         ]),
         _: 1
       }, 8, ["id"]),
-      W(O, {
+      O(W, {
         size: "small",
         semantic: "critical",
         id: i.value
       }, {
-        default: z(() => {
-          var $;
+        default: R(() => {
+          var y;
           return [
-            E(w(v.invalidMessage ?? (($ = B.value) == null ? void 0 : $.validationMessage) ?? r(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)
+      I("span", Ge, k(s.value), 1)
     ], 10, Ue));
   }
-}), qe = ["id", "data-margin", "data-variant", "data-emphasis", "data-width"], An = /* @__PURE__ */ A({
+}), qe = ["id", "data-margin", "data-variant", "data-emphasis", "data-width"], $n = /* @__PURE__ */ E({
   __name: "divider",
   props: {
     margin: { default: void 0 },
@@ -546,7 +544,7 @@ const kn = 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,
@@ -555,10 +553,10 @@ const kn = Object.entries(me).map(([, t]) => t), Ne = {
       "data-variant": e.variant,
       "data-emphasis": e.emphasis,
       "data-width": e.width,
-      class: N(r(F)("db-divider", n.class))
+      class: N(v(A)("db-divider", n.class))
     }, null, 10, qe));
   }
-}), We = ["id", "data-backdrop", "data-variant"], Oe = ["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__ */ A({
+}), 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 },
@@ -580,13 +578,13 @@ const kn = Object.entries(me).map(([, t]) => t), Ne = {
     spacing: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(null), e = o(null);
+    const n = t, d = u(null), e = u(null);
     U(() => {
-      u();
-    }), R(
+      c();
+    }), z(
       () => [n.open],
       () => {
-        u();
+        c();
       },
       {
         immediate: !0,
@@ -596,38 +594,38 @@ const kn = 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 u() {
+    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();
       }, 401)));
     }
-    return (l, c) => (m(), g("dialog", {
+    return (l, p) => (m(), g("dialog", {
       class: "db-drawer",
       id: l.id,
       ref_key: "_ref",
       ref: d,
-      onClick: c[0] || (c[0] = async (i) => {
+      onClick: p[0] || (p[0] = async (i) => {
         a(i);
       }),
-      onKeydown: c[1] || (c[1] = async (i) => a(i)),
+      onKeydown: p[1] || (p[1] = async (i) => a(i)),
       "data-backdrop": l.backdrop,
       "data-variant": l.variant
     }, [
-      _("article", {
+      I("article", {
         ref_key: "dialogContainerRef",
         ref: e,
-        class: N(r(F)("db-drawer-container", n.class)),
+        class: N(v(A)("db-drawer-container", n.class)),
         "data-spacing": l.spacing,
         "data-width": l.width,
         "data-direction": l.direction,
         "data-rounded": l.rounded
       }, [
-        _("header", Xe, [
-          _("div", He, [
-            I(l.$slots, "drawer-header")
+        I("header", Xe, [
+          I("div", He, [
+            w(l.$slots, "drawer-header")
           ]),
-          W(te, {
+          O(de, {
             class: "button-close-drawer",
             icon: "cross",
             variant: "ghost",
@@ -635,26 +633,26 @@ const kn = Object.entries(me).map(([, t]) => t), Ne = {
             noText: !0,
             onClick: (i) => a("close")
           }, {
-            default: z(() => [
-              E(w(l.closeButtonText ?? r(ce)), 1)
+            default: R(() => [
+              L(k(l.closeButtonText ?? v(ce)), 1)
             ]),
             _: 1
           }, 8, ["id", "onClick"])
         ]),
-        _("div", je, [
-          I(l.$slots, "default")
+        I("div", je, [
+          w(l.$slots, "default")
         ])
-      ], 10, Oe)
-    ], 40, We));
+      ], 10, We)
+    ], 40, Oe));
   }
-}), Ke = (t) => {
+}), be = (t) => {
   var d, e;
   const {
     target: n
   } = t;
   return !!(!((d = n == null ? void 0 : n.classList) != null && d.contains("db-navigation-item-expand-button")) && ((e = n == null ? void 0 : n.parentElement) != null && e.classList.contains("db-navigation-item")));
 };
-class Je {
+class Ke {
   constructor(n, d) {
     j(this, "element");
     j(this, "subNavigation");
@@ -706,18 +704,18 @@ class Je {
     if (!this.triangleData)
       return;
     if (n === "fill-gap") {
-      const l = `${this.triangleData.itemRect.height + 2 * this.triangleData.padding}px`, c = `${this.triangleData.parentElementWidth - this.triangleData.padding}px`;
+      const l = `${this.triangleData.itemRect.height + 2 * this.triangleData.padding}px`, p = `${this.triangleData.parentElementWidth - this.triangleData.padding}px`;
       return {
-        lb: `${c} ${l}`,
-        lt: `${c} 0`,
+        lb: `${p} ${l}`,
+        lt: `${p} 0`,
         rt: "100% 0",
         rb: `100% ${l}`
       };
     }
-    const d = this.getTriangleTipX(), e = this.getTriangleTipY(), a = `${d}px ${e}px`, u = `${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: u,
+      lt: c,
       rt: "100% 0",
       rb: "100% 100%"
     };
@@ -730,7 +728,7 @@ class Je {
     e && (this.element.style.setProperty("--db-navigation-item-clip-path", `polygon(${e.lb}, ${e.lt}, ${e.rt}, ${e.rb})`), d && (this.triangleData = void 0));
   }
 }
-const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-header-drawer-navigation" }, xe = { class: "db-header-meta-navigation" }, ea = { class: "db-header-secondary-action" }, aa = { class: "db-header-meta-navigation" }, na = { class: "db-header-navigation-bar" }, ta = { class: "db-header-brand-container" }, da = { class: "db-header-navigation-container" }, ia = { class: "db-header-navigation" }, la = { class: "db-header-primary-action" }, sa = { class: "db-header-action-container" }, oa = { class: "db-header-burger-menu-container" }, ua = { class: "db-header-secondary-action" }, Nn = /* @__PURE__ */ A({
+const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-header-drawer-navigation" }, Ze = { class: "db-header-meta-navigation" }, xe = { class: "db-header-secondary-action" }, ea = { class: "db-header-meta-navigation" }, aa = { class: "db-header-navigation-bar" }, na = { class: "db-header-brand-container" }, ta = { class: "db-header-navigation-container" }, da = { class: "db-header-navigation" }, ia = { class: "db-header-primary-action" }, la = { class: "db-header-action-container" }, sa = { class: "db-header-burger-menu-container" }, oa = { class: "db-header-secondary-action" }, Ln = /* @__PURE__ */ E({
   __name: "header",
   props: {
     brand: {},
@@ -750,10 +748,10 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
     width: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(ee), e = o(!1), a = o(!1), u = o(null);
+    const n = t, d = u(ee), e = u(!1), a = u(!1), c = u(null);
     U(() => {
-      e.value = !0, d.value = n.id || "header-" + V();
-    }), R(
+      e.value = !0, d.value = n.id || "header-" + G();
+    }), z(
       () => [e.value],
       () => {
         if (e.value && document && d.value && n.forceMobile) {
@@ -772,80 +770,80 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
     function l() {
       n.onToggle && n.onToggle(!n.drawerOpen);
     }
-    function c(i) {
-      Ke(i) && l();
+    function p(i) {
+      be(i) && l();
     }
     return (i, h) => (m(), g("header", {
       ref_key: "_ref",
-      ref: u,
-      class: N(r(F)("db-header", n.class)),
+      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
     }, [
-      W(Ye, {
+      O(Ye, {
         class: "db-header-drawer",
         spacing: "small",
         rounded: !0,
         open: i.drawerOpen,
         onClose: () => l()
       }, {
-        default: z(() => [
-          _("div", Ze, [
-            _("div", {
+        default: R(() => [
+          I("div", Qe, [
+            I("div", {
               class: "db-header-navigation",
-              onClick: h[0] || (h[0] = async (s) => c(s))
+              onClick: h[0] || (h[0] = async (s) => p(s))
             }, [
-              I(i.$slots, "default")
+              w(i.$slots, "default")
             ]),
-            _("div", xe, [
-              I(i.$slots, "meta-navigation")
+            I("div", Ze, [
+              w(i.$slots, "meta-navigation")
             ])
           ]),
-          _("div", ea, [
-            I(i.$slots, "secondary-action")
+          I("div", xe, [
+            w(i.$slots, "secondary-action")
           ])
         ]),
         _: 3
       }, 8, ["open", "onClose"]),
-      _("div", aa, [
-        I(i.$slots, "meta-navigation")
+      I("div", ea, [
+        w(i.$slots, "meta-navigation")
       ]),
-      _("div", na, [
-        _("div", ta, [
-          I(i.$slots, "brand")
+      I("div", aa, [
+        I("div", na, [
+          w(i.$slots, "brand")
         ]),
-        _("div", da, [
-          _("div", ia, [
-            I(i.$slots, "default")
+        I("div", ta, [
+          I("div", da, [
+            w(i.$slots, "default")
           ]),
-          _("div", la, [
-            I(i.$slots, "primary-action")
+          I("div", ia, [
+            w(i.$slots, "primary-action")
           ])
         ]),
-        _("div", sa, [
-          _("div", oa, [
-            W(te, {
+        I("div", la, [
+          I("div", sa, [
+            O(de, {
               icon: "menu",
               variant: "ghost",
               id: d.value + "-burger-menu",
               noText: !0,
               onClick: () => l()
             }, {
-              default: z(() => [
-                E(w(i.burgerMenuLabel ?? r(Le)), 1)
+              default: R(() => [
+                L(k(i.burgerMenuLabel ?? v(Le)), 1)
               ]),
               _: 1
             }, 8, ["id", "onClick"])
           ]),
-          _("div", ua, [
-            I(i.$slots, "secondary-action")
+          I("div", oa, [
+            w(i.$slots, "secondary-action")
           ])
         ])
       ])
-    ], 10, Qe));
+    ], 10, Je));
   }
-}), ra = ["id", "data-icon", "data-icon-weight", "data-icon-variant"], Fn = /* @__PURE__ */ A({
+}), ua = ["id", "data-icon", "data-icon-weight", "data-icon-variant"], En = /* @__PURE__ */ E({
   __name: "icon",
   props: {
     variant: { default: void 0 },
@@ -860,26 +858,26 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { 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",
       ref: d,
       id: e.id,
-      class: N(r(F)("db-icon", n.class)),
+      class: N(v(A)("db-icon", n.class)),
       "data-icon": e.icon,
       "data-icon-weight": e.weight,
       "data-icon-variant": e.variant
     }, [
-      e.text ? (m(), g(T, { key: 0 }, [
-        E(w(e.text), 1)
-      ], 64)) : I(e.$slots, "default", { key: 1 })
-    ], 10, ra));
+      e.text ? (m(), g(C, { key: 0 }, [
+        L(k(e.text), 1)
+      ], 64)) : w(e.$slots, "default", { key: 1 })
+    ], 10, ua));
   }
-}), fa = ["data-variant", "data-hide-label", "data-hide-icon", "data-icon", "data-icon-after", "data-hide-icon-after"], ca = ["for"], va = ["aria-invalid", "data-custom-validity", "id", "name", "type", "placeholder", "disabled", "required", "step", "value", "maxLength", "minLength", "max", "min", "readOnly", "form", "pattern", "autoComplete", "autoFocus", "list", "aria-describedby"], pa = ["id"], ha = ["value"], ma = {
+}), 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 = {
   "data-visually-hidden": "true",
   role: "status"
-}, Tn = /* @__PURE__ */ A({
+}, Nn = /* @__PURE__ */ E({
   __name: "input",
   props: {
     dataList: { default: void 0 },
@@ -924,27 +922,28 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
     messageIcon: { default: void 0 },
     autocomplete: { default: void 0 },
     showMessage: { type: Boolean, default: void 0 },
-    showIcon: { type: Boolean, default: void 0 }
+    showIcon: { type: Boolean, default: void 0 },
+    size: { default: void 0 }
   },
   emits: ["update:value"],
   setup(t, { emit: n }) {
-    const d = n, e = t, a = o(void 0), u = o(void 0), l = o(void 0), c = o(void 0), i = o(void 0), h = o(""), s = o(""), B = o(""), y = o(null);
+    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 f = e.id ?? `input-${V()}`;
-      a.value = f, u.value = f + K, l.value = f + J, c.value = f + Q, i.value = f + ue;
-    }), R(
+      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 f = a.value + K;
-          u.value = f, l.value = a.value + J, c.value = a.value + Q, i.value = e.dataListId ?? a.value + ue, q(e.message, e.showMessage) && (h.value = f);
+          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"
       }
-    ), R(
+    ), z(
       () => [e.value],
       () => {
         s.value = e.value;
@@ -954,114 +953,115 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
         flush: "post"
       }
     );
-    function L(f) {
-      s.value = f.target.value, e.onInput && e.onInput(f), e.input && e.input(f);
+    function D(r) {
+      s.value = r.target.value, e.onInput && e.onInput(r), e.input && e.input(r);
     }
-    function k(f) {
-      var M, b, S;
-      e.onChange && e.onChange(f), e.change && e.change(f), ae(d, f), !((M = y.value) != null && M.validity.valid) || e.validation === "invalid" ? (h.value = c.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 = u.value : h.value = "";
+    function _(r) {
+      var T, b, S;
+      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 v(f) {
-      e.onBlur && e.onBlur(f), e.blur && e.blur(f);
+    function f(r) {
+      e.onBlur && e.onBlur(r), e.blur && e.blur(r);
     }
-    function p(f) {
-      e.onFocus && e.onFocus(f), e.focus && e.focus(f);
+    function o(r) {
+      e.onFocus && e.onFocus(r), e.focus && e.focus(r);
     }
-    function $(f) {
+    function y(r) {
       return Array.from(
-        (we(f) ? f.map((M) => ({
-          value: M,
+        (we(r) ? r.map((T) => ({
+          value: T,
           label: void 0
-        })) : f) || []
+        })) : r) || []
       );
     }
-    return (f, M) => (m(), g("div", {
-      class: N(r(F)("db-input", e.class)),
-      "data-variant": f.variant,
-      "data-hide-label": r(P)(f.showLabel),
-      "data-hide-icon": r(P)(f.showIcon),
-      "data-icon": f.icon,
-      "data-icon-after": f.iconAfter,
-      "data-hide-icon-after": r(P)(f.showIcon)
+    return (r, T) => (m(), g("div", {
+      class: N(v(A)("db-input", e.class)),
+      "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(f.label ?? r(le)), 9, ca),
-      _("input", {
-        "aria-invalid": f.validation === "invalid",
-        "data-custom-validity": f.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: f.name,
-        type: f.type || "text",
-        placeholder: f.placeholder ?? r(fe),
-        disabled: f.disabled,
-        required: f.required,
-        step: f.step,
-        value: f.value ?? s.value,
-        maxLength: f.maxLength,
-        minLength: f.minLength,
-        max: f.max,
-        min: f.min,
-        readOnly: f.readOnly,
-        form: f.form,
-        pattern: f.pattern,
-        autoComplete: f.autocomplete,
-        autoFocus: f.autofocus,
-        onInput: M[0] || (M[0] = async (b) => L(b)),
-        onChange: M[1] || (M[1] = async (b) => k(b)),
-        onBlur: M[2] || (M[2] = async (b) => v(b)),
-        onFocus: M[3] || (M[3] = async (b) => p(b)),
-        list: f.dataList && i.value,
+        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) => o(b)),
+        list: r.dataList && i.value,
         "aria-describedby": h.value
-      }, null, 40, va),
-      f.dataList ? (m(), g("datalist", {
+      }, null, 40, ca),
+      r.dataList ? (m(), g("datalist", {
         key: 0,
         id: i.value
       }, [
-        (m(!0), g(T, null, ne($(f.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, ha))), 128))
-      ], 8, pa)) : D("", !0),
-      I(f.$slots, "default"),
-      r(q)(f.message, f.showMessage) ? (m(), X(O, {
+        }, 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: f.messageIcon,
-        id: u.value
+        icon: r.messageIcon,
+        id: c.value
       }, {
-        default: z(() => [
-          E(w(f.message), 1)
+        default: R(() => [
+          L(k(r.message), 1)
         ]),
         _: 1
-      }, 8, ["icon", "id"])) : D("", !0),
-      W(O, {
+      }, 8, ["icon", "id"])) : M("", !0),
+      O(W, {
         size: "small",
         semantic: "successful",
         id: l.value
       }, {
-        default: z(() => [
-          E(w(f.validMessage ?? r(Z)), 1)
+        default: R(() => [
+          L(k(r.validMessage ?? v(Z)), 1)
         ]),
         _: 1
       }, 8, ["id"]),
-      W(O, {
+      O(W, {
         size: "small",
         semantic: "critical",
-        id: c.value
+        id: p.value
       }, {
-        default: z(() => {
+        default: R(() => {
           var b;
           return [
-            E(w(f.invalidMessage ?? ((b = y.value) == null ? void 0 : b.validationMessage) ?? r(x)), 1)
+            L(k(r.invalidMessage ?? ((b = $.value) == null ? void 0 : b.validationMessage) ?? v(x)), 1)
           ];
         }),
         _: 1
       }, 8, ["id"]),
-      _("span", ma, w(B.value), 1)
-    ], 10, fa));
+      I("span", ha, k(B.value), 1)
+    ], 10, ra));
   }
-}), ba = ["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"], Sn = /* @__PURE__ */ A({
+}), 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({
   __name: "link",
   props: {
     content: { default: void 0 },
@@ -1088,37 +1088,37 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { 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, u) => (m(), g("a", {
+    return (a, c) => (m(), g("a", {
       ref_key: "_ref",
       ref: d,
       id: a.id,
-      class: N(r(F)("db-link", n.class)),
+      class: N(v(A)("db-link", n.class)),
       href: a.href,
       target: a.target,
       rel: a.rel,
       role: a.role,
       hrefLang: a.hreflang,
-      "aria-disabled": r(G)(a.disabled),
+      "aria-disabled": v(V)(a.disabled),
       tabIndex: a.disabled ? -1 : 0,
       "aria-selected": a.selected,
       "aria-label": a.label,
       "aria-current": a.current,
       "data-size": a.size,
-      "data-hide-icon-after": r(P)(a.showIcon ?? !0),
+      "data-hide-icon-after": v(P)(a.showIcon ?? !0),
       "data-variant": a.variant,
       "data-content": a.content || "internal",
-      onClick: u[0] || (u[0] = async (l) => e(l))
+      onClick: c[0] || (c[0] = async (l) => e(l))
     }, [
-      a.text ? (m(), g(T, { key: 0 }, [
-        E(w(a.text), 1)
-      ], 64)) : I(a.$slots, "default", { key: 1 })
-    ], 10, ba));
+      a.text ? (m(), g(C, { key: 0 }, [
+        L(k(a.text), 1)
+      ], 64)) : w(a.$slots, "default", { key: 1 })
+    ], 10, ma));
   }
-}), ga = ["id", "data-variant", "data-fade-in", "data-fonts-loaded"], ya = { class: "db-main" }, Cn = /* @__PURE__ */ A({
+}), ba = ["id", "data-variant", "data-fade-in", "data-fonts-loaded"], ga = { class: "db-main" }, Fn = /* @__PURE__ */ E({
   __name: "page",
   props: {
     documentOverflow: { default: void 0 },
@@ -1134,30 +1134,30 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
     autofocus: { type: Boolean }
   },
   setup(t) {
-    const n = t, d = o(!1), e = o(null);
+    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, u) => (m(), g("div", {
+    }), (a, c) => (m(), g("div", {
       ref_key: "_ref",
       ref: e,
       id: a.id,
-      class: N(r(F)("db-page", n.class)),
+      class: N(v(A)("db-page", n.class)),
       "data-variant": a.variant,
       "data-fade-in": a.fadeIn,
-      "data-fonts-loaded": r(G)(d.value)
+      "data-fonts-loaded": v(V)(d.value)
     }, [
-      I(a.$slots, "header"),
-      _("main", ya, [
-        I(a.$slots, "default")
+      w(a.$slots, "header"),
+      I("main", ga, [
+        w(a.$slots, "default")
       ]),
-      I(a.$slots, "footer")
-    ], 10, ga));
+      w(a.$slots, "footer")
+    ], 10, ba));
   }
-}), Ba = ["data-size", "data-hide-label", "for"], ka = ["aria-invalid", "data-custom-validity", "id", "name", "checked", "disabled", "aria-describedby", "value", "required"], Dn = /* @__PURE__ */ A({
+}), ya = ["data-size", "data-hide-label", "for"], Ba = ["aria-invalid", "data-custom-validity", "id", "name", "checked", "disabled", "aria-describedby", "value", "required"], Tn = /* @__PURE__ */ E({
   __name: "radio",
   props: {
     describedbyid: { default: void 0 },
@@ -1183,28 +1183,23 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { 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), u = o(void 0), l = o(null);
+    const d = n, e = t, a = u(!1), c = u(void 0), l = u(null);
     U(() => {
-      a.value = !0, u.value = e.id ?? `radio-${V()}`;
-    }), R(
-      () => [a.value, e.checked],
+      a.value = !0, c.value = e.id ?? `radio-${G()}`;
+    }), z(
+      () => [a.value, l.value, e.checked],
       () => {
-        if (e.checked && a.value && document && u.value) {
-          const s = document == null ? void 0 : document.getElementById(
-            u.value
-          );
-          s && e.checked != null && (s.checked = !0);
-        }
+        e.checked && a.value && l.value && (l.value.checked = !0);
       },
       {
         immediate: !0,
         flush: "post"
       }
     );
-    function c(s) {
-      e.onChange && e.onChange(s), e.change && e.change(s), ae(d, s, "checked");
+    function p(s) {
+      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);
@@ -1214,33 +1209,33 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
     }
     return (s, B) => (m(), g("label", {
       "data-size": s.size,
-      "data-hide-label": r(P)(s.showLabel),
-      class: N(r(F)("db-radio", e.class)),
-      for: u.value
+      "data-hide-label": v(P)(s.showLabel),
+      class: N(v(A)("db-radio", e.class)),
+      for: c.value
     }, [
-      _("input", {
+      I("input", {
         type: "radio",
         "aria-invalid": s.validation === "invalid",
         "data-custom-validity": s.validation,
         ref_key: "_ref",
         ref: l,
-        id: u.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) => c(y)),
-        onBlur: B[1] || (B[1] = async (y) => i(y)),
-        onFocus: B[2] || (B[2] = async (y) => h(y))
-      }, null, 40, ka),
-      s.label ? (m(), g(T, { key: 0 }, [
-        E(w(s.label), 1)
-      ], 64)) : I(s.$slots, "default", { key: 1 })
-    ], 10, Ba));
+        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(k(s.label), 1)
+      ], 64)) : w(s.$slots, "default", { key: 1 })
+    ], 10, ya));
   }
-}), wa = ["id", "data-spacing", "data-width"], Mn = /* @__PURE__ */ A({
+}), ka = ["id", "data-spacing", "data-width"], Sn = /* @__PURE__ */ E({
   __name: "section",
   props: {
     children: { default: void 0 },
@@ -1253,24 +1248,24 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
     width: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(ee), e = o(null);
+    const n = t, d = u(ee), e = u(null);
     return U(() => {
-      d.value = n.id || "section-" + V();
-    }), (a, u) => (m(), g("section", {
+      d.value = n.id || "section-" + G();
+    }), (a, c) => (m(), g("section", {
       ref_key: "_ref",
       ref: e,
       id: d.value,
-      class: N(r(F)("db-section", n.class)),
+      class: N(v(A)("db-section", n.class)),
       "data-spacing": a.spacing || "medium",
       "data-width": a.width
     }, [
-      I(a.$slots, "default")
-    ], 10, wa));
+      w(a.$slots, "default")
+    ], 10, ka));
   }
-}), Ia = ["data-variant", "data-hide-label", "data-icon", "data-hide-icon"], _a = ["for"], $a = ["aria-invalid", "data-custom-validity", "required", "disabled", "id", "name", "value", "autocomplete", "aria-describedby"], La = ["label"], Ea = ["value", "selected", "disabled"], Aa = ["value", "disabled", "selected"], Na = ["id"], Fa = {
+}), 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 = {
   "data-visually-hidden": "true",
   role: "status"
-}, Rn = /* @__PURE__ */ A({
+}, Cn = /* @__PURE__ */ E({
   __name: "select",
   props: {
     description: {},
@@ -1307,28 +1302,29 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
     messageIcon: { default: void 0 },
     autocomplete: { default: void 0 },
     showMessage: { type: Boolean, default: void 0 },
-    showIcon: { type: Boolean, default: void 0 }
+    showIcon: { type: Boolean, default: void 0 },
+    size: { default: void 0 }
   },
   emits: ["update:value"],
   setup(t, { emit: n }) {
-    const d = n, e = t, a = o(void 0), u = o(void 0), l = o(void 0), c = o(void 0), i = o(""), h = o(""), s = o(""), B = o(!1), y = o(""), L = o(null);
+    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-${V()}`;
-      a.value = b, u.value = b + K, l.value = b + J, c.value = b + Q, i.value = b + oe;
-    }), R(
+      const b = e.id ?? `select-${G()}`;
+      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;
-          u.value = b, l.value = a.value + J, c.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"
       }
-    ), R(
+    ), z(
       () => [e.value],
       () => {
         s.value = e.value;
@@ -1338,112 +1334,113 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
         flush: "post"
       }
     );
-    function k(b) {
+    function _(b) {
       e.onClick && e.onClick(b);
     }
-    function v(b) {
+    function f(b) {
       s.value = b.target.value, e.onInput && e.onInput(b), e.input && e.input(b);
     }
-    function p(b) {
-      var S, C, ie;
-      e.onChange && e.onChange(b), e.change && e.change(b), ae(d, b), !((S = L.value) != null && S.validity.valid) || e.validation === "invalid" ? (h.value = c.value, Y() && (y.value = e.invalidMessage ?? ((C = L.value) == null ? void 0 : C.validationMessage) ?? x, H(() => y.value = "", 1e3))) : e.validation === "valid" || (ie = L.value) != null && ie.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 = u.value : h.value = i.value;
+    function o(b) {
+      var S, F, ne;
+      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 $(b) {
+    function y(b) {
       e.onBlur && e.onBlur(b), e.blur && e.blur(b);
     }
-    function f(b) {
+    function r(b) {
       e.onFocus && e.onFocus(b), e.focus && e.focus(b);
     }
-    function M(b) {
+    function T(b) {
       return b.label ?? b.value.toString();
     }
     return (b, S) => (m(), g("div", {
-      class: N(r(F)("db-select", e.class)),
+      class: N(v(A)("db-select", e.class)),
       "data-variant": b.variant,
-      "data-hide-label": r(P)(b.showLabel),
+      "data-hide-label": v(P)(b.showLabel),
       "data-icon": b.icon,
-      "data-hide-icon": r(P)(b.showIcon)
+      "data-hide-icon": v(P)(b.showIcon)
     }, [
-      _("label", { for: a.value }, w(b.label ?? r(le)), 9, _a),
-      _("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: L,
+        ref: D,
         required: b.required,
         disabled: b.disabled,
         id: a.value,
         name: b.name,
+        size: b.size,
         value: b.value ?? s.value,
         autocomplete: b.autocomplete,
-        onInput: S[0] || (S[0] = async (C) => v(C)),
-        onClick: S[1] || (S[1] = async (C) => k(C)),
-        onChange: S[2] || (S[2] = async (C) => p(C)),
-        onBlur: S[3] || (S[3] = async (C) => $(C)),
-        onFocus: S[4] || (S[4] = async (C) => f(C)),
+        onInput: S[0] || (S[0] = async (F) => f(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)),
-        b.options ? (m(!0), g(T, { key: 0 }, ne(b.options, (C, ie) => (m(), g(T, { key: ie }, [
-          C.options ? (m(), g("optgroup", {
+        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,
-            label: M(C)
+            label: T(F)
           }, [
-            (m(!0), g(T, null, ne(C.options, (de, un) => (m(), g("option", {
-              key: de.value.toString(),
-              value: de.value,
-              selected: de.selected,
-              disabled: de.disabled
-            }, w(M(de)), 9, Ea))), 128))
-          ], 8, La)) : D("", !0),
-          C.options ? D("", !0) : (m(), g("option", {
+            (m(!0), g(C, null, te(F.options, (ie, on) => (m(), g("option", {
+              key: ie.value.toString(),
+              value: ie.value,
+              selected: ie.selected,
+              disabled: ie.disabled
+            }, k(T(ie)), 9, La))), 128))
+          ], 8, $a)) : M("", !0),
+          F.options ? M("", !0) : (m(), g("option", {
             key: 1,
-            value: C.value,
-            disabled: C.disabled,
-            selected: C.selected
-          }, w(M(C)), 9, Aa))
-        ], 64))), 128)) : D("", !0),
-        I(b.$slots, "default")
-      ], 40, $a),
-      _("span", { id: i.value }, w(b.placeholder ?? b.label), 9, Na),
-      r(q)(b.message, b.showMessage) ? (m(), X(O, {
+            value: F.value,
+            disabled: F.disabled,
+            selected: F.selected
+          }, k(T(F)), 9, Ea))
+        ], 64))), 128)) : M("", !0),
+        w(b.$slots, "default")
+      ], 40, _a),
+      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: u.value
+        id: c.value
       }, {
-        default: z(() => [
-          E(w(b.message), 1)
+        default: R(() => [
+          L(k(b.message), 1)
         ]),
         _: 1
-      }, 8, ["icon", "id"])) : D("", !0),
-      W(O, {
+      }, 8, ["icon", "id"])) : M("", !0),
+      O(W, {
         size: "small",
         semantic: "successful",
         id: l.value
       }, {
-        default: z(() => [
-          E(w(b.validMessage ?? r(Z)), 1)
+        default: R(() => [
+          L(k(b.validMessage ?? v(Z)), 1)
         ]),
         _: 1
       }, 8, ["id"]),
-      W(O, {
+      O(W, {
         size: "small",
         semantic: "critical",
-        id: c.value
+        id: p.value
       }, {
-        default: z(() => {
-          var C;
+        default: R(() => {
+          var F;
           return [
-            E(w(b.invalidMessage ?? ((C = L.value) == null ? void 0 : C.validationMessage) ?? r(x)), 1)
+            L(k(b.invalidMessage ?? ((F = D.value) == null ? void 0 : F.validationMessage) ?? v(x)), 1)
           ];
         }),
         _: 1
       }, 8, ["id"]),
-      _("span", Fa, w(y.value), 1)
-    ], 10, Ia));
+      I("span", Aa, k($.value), 1)
+    ], 10, wa));
   }
-}), Ta = ["data-visual-aid", "data-size", "data-hide-label", "data-emphasis", "for"], Sa = ["id", "aria-checked", "checked", "disabled", "aria-describedby", "aria-invalid", "data-custom-validity", "name", "required", "data-aid-icon", "data-aid-icon-after"], zn = /* @__PURE__ */ A({
+}), 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({
   __name: "switch",
   props: {
     visualAid: { type: Boolean, default: void 0 },
@@ -1466,7 +1463,7 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
     name: { default: void 0 },
     required: { type: Boolean, default: void 0 },
     showLabel: { type: Boolean, default: void 0 },
-    value: {},
+    value: { default: void 0 },
     checked: { type: Boolean, default: void 0 },
     emphasis: { default: void 0 },
     size: { default: void 0 },
@@ -1475,15 +1472,22 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
   },
   emits: ["update:checked"],
   setup(t, { emit: n }) {
-    const d = n, e = t, a = o(void 0), u = o(!1);
-    o(!1);
-    const l = o(null);
+    const d = n, e = t, a = u(void 0), c = u(!1), l = u(null);
     U(() => {
-      a.value = e.id ?? `switch-${V()}`;
-    });
-    function c(s) {
+      a.value = e.id ?? `switch-${G()}`;
+    }), z(
+      () => [e.checked],
+      () => {
+        e.checked !== void 0 && e.checked !== null && (c.value = !!e.checked);
+      },
+      {
+        immediate: !0,
+        flush: "post"
+      }
+    );
+    function p(s) {
       var B;
-      e.onChange && e.onChange(s), e.change && e.change(s), u.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);
@@ -1492,21 +1496,22 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
       e.onFocus && e.onFocus(s), e.focus && e.focus(s);
     }
     return (s, B) => (m(), g("label", {
-      "data-visual-aid": r(G)(s.visualAid),
+      "data-visual-aid": v(V)(s.visualAid),
       "data-size": s.size,
-      "data-hide-label": r(P)(s.showLabel),
+      "data-hide-label": v(P)(s.showLabel),
       "data-emphasis": s.emphasis,
       for: a.value,
-      class: N(r(F)("db-switch", e.class))
+      class: N(v(A)("db-switch", e.class))
     }, [
-      _("input", {
+      I("input", {
         type: "checkbox",
         role: "switch",
         id: a.value,
-        "aria-checked": u.value,
+        "aria-checked": v(V)(c.value),
         ref_key: "_ref",
         ref: l,
         checked: s.checked,
+        value: s.value,
         disabled: s.disabled,
         "aria-describedby": s.describedbyid,
         "aria-invalid": s.validation === "invalid",
@@ -1515,16 +1520,16 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
         required: s.required,
         "data-aid-icon": s.icon,
         "data-aid-icon-after": s.iconAfter,
-        onChange: B[0] || (B[0] = async (y) => c(y)),
-        onBlur: B[1] || (B[1] = async (y) => i(y)),
-        onFocus: B[2] || (B[2] = async (y) => h(y))
-      }, null, 40, Sa),
-      s.label ? (m(), g(T, { key: 0 }, [
-        E(w(s.label), 1)
-      ], 64)) : I(s.$slots, "default", { key: 1 })
-    ], 10, Ta));
+        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(k(s.label), 1)
+      ], 64)) : w(s.$slots, "default", { key: 1 })
+    ], 10, Fa));
   }
-}), Ca = ["for", "data-icon", "data-icon-after", "data-hide-icon", "data-hide-icon-after", "data-no-text"], Da = ["disabled", "aria-selected", "aria-controls", "checked", "id"], Ma = /* @__PURE__ */ A({
+}), 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({
   __name: "tab-item",
   props: {
     children: { default: void 0 },
@@ -1547,10 +1552,10 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
   },
   emits: ["update:checked"],
   setup(t, { emit: n }) {
-    const d = n, e = t, a = o(!1), u = o(!1), l = o(null);
+    const d = n, e = t, a = u(!1), c = u(!1), l = u(null);
     U(() => {
       a.value = !0;
-    }), R(
+    }), z(
       () => [l.value, a.value],
       () => {
         e.active && a.value && l.value && (l.value.click(), a.value = !1);
@@ -1560,42 +1565,42 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
         flush: "post"
       }
     );
-    function c(i) {
+    function p(i) {
       var h;
-      e.onChange && e.onChange(i), e.change && e.change(i), u.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(r(F)("db-tab-item", e.class))
+      class: N(v(A)("db-tab-item", e.class))
     }, [
-      _("label", {
+      I("label", {
         for: i.id,
         "data-icon": i.icon,
         "data-icon-after": i.iconAfter,
-        "data-hide-icon": r(P)(i.showIcon),
-        "data-hide-icon-after": r(P)(i.showIcon),
+        "data-hide-icon": v(P)(i.showIcon),
+        "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": u.value,
+          "aria-selected": c.value,
           "aria-controls": i.controls,
           checked: i.checked,
           ref_key: "_ref",
           ref: l,
           id: i.id,
-          onChange: h[0] || (h[0] = async (s) => c(s))
-        }, null, 40, Da),
-        i.label ? (m(), g(T, { key: 0 }, [
-          E(w(i.label), 1)
-        ], 64)) : D("", !0),
-        I(i.$slots, "default")
-      ], 8, Ca)
+          onInput: h[0] || (h[0] = async (s) => p(s))
+        }, null, 40, Ca),
+        i.label ? (m(), g(C, { key: 0 }, [
+          L(k(i.label), 1)
+        ], 64)) : M("", !0),
+        w(i.$slots, "default")
+      ], 8, Sa)
     ], 2));
   }
-}), Ra = ["id", "data-disabled", "data-semantic", "data-emphasis", "data-icon", "data-show-check-state", "data-hide-icon", "data-no-text", "data-overflow"], za = ["title"], Un = /* @__PURE__ */ A({
+}), Ma = ["id", "data-disabled", "data-semantic", "data-emphasis", "data-icon", "data-show-check-state", "data-hide-icon", "data-no-text", "data-overflow"], za = ["title"], Mn = /* @__PURE__ */ E({
   __name: "tag",
   props: {
     behavior: { default: void 0 },
@@ -1620,15 +1625,15 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
     content: {}
   },
   setup(t) {
-    const n = t, d = o(!1), e = o(null);
-    d.value = !0, R(
+    const n = t, d = u(!1), e = u(null);
+    d.value = !0, z(
       () => [d.value, n.disabled, e.value],
       () => {
-        var l, c;
+        var l, p;
         if (d.value && e.value && n.disabled !== void 0) {
           const i = (l = e.value) == null ? void 0 : l.querySelector(
             "button:not(.db-tab-remove-button)"
-          ), h = (c = e.value) == null ? void 0 : c.querySelector("input");
+          ), h = (p = e.value) == null ? void 0 : p.querySelector("input");
           for (const s of [i, h])
             s && (s.disabled = n.disabled);
         }
@@ -1641,28 +1646,28 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
     function a() {
       n.onRemove && n.onRemove();
     }
-    function u() {
+    function c() {
       return n.removeButton ? n.removeButton : "Remove tag";
     }
-    return (l, c) => (m(), g("div", {
+    return (l, p) => (m(), g("div", {
       ref_key: "_ref",
       ref: e,
       id: l.id,
-      class: N(r(F)("db-tag", n.class)),
-      "data-disabled": r(G)(l.disabled),
+      class: N(v(A)("db-tag", n.class)),
+      "data-disabled": v(V)(l.disabled),
       "data-semantic": l.semantic,
       "data-emphasis": l.emphasis,
       "data-icon": l.icon,
-      "data-show-check-state": r(G)(l.showCheckState ?? !0),
-      "data-hide-icon": r(P)(l.showIcon),
-      "data-no-text": r(G)(l.noText),
-      "data-overflow": r(G)(l.overflow)
+      "data-show-check-state": v(V)(l.showCheckState ?? !0),
+      "data-hide-icon": v(P)(l.showIcon),
+      "data-no-text": v(V)(l.noText),
+      "data-overflow": v(V)(l.overflow)
     }, [
-      I(l.$slots, "content"),
-      I(l.$slots, "default"),
-      l.text ? (m(), g(T, { key: 0 }, [
-        E(w(l.text), 1)
-      ], 64)) : D("", !0),
+      w(l.$slots, "content"),
+      w(l.$slots, "default"),
+      l.text ? (m(), g(C, { key: 0 }, [
+        L(k(l.text), 1)
+      ], 64)) : M("", !0),
       l.behavior === "removable" ? (m(), g("button", {
         key: 1,
         class: "db-button db-tab-remove-button",
@@ -1670,15 +1675,15 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
         "data-size": "small",
         "data-no-text": "true",
         "data-variant": "ghost",
-        onClick: c[0] || (c[0] = async (i) => a()),
-        title: u()
-      }, w(u()), 9, za)) : D("", !0)
-    ], 10, Ra));
+        onClick: p[0] || (p[0] = async (i) => a()),
+        title: c()
+      }, k(c()), 9, za)) : M("", !0)
+    ], 10, Ma));
   }
-}), Ua = ["data-variant", "data-hide-label"], Pa = ["for"], Ga = ["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 = {
+}), 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 = {
   "data-visually-hidden": "true",
   role: "status"
-}, Pn = /* @__PURE__ */ A({
+}, zn = /* @__PURE__ */ E({
   __name: "textarea",
   props: {
     cols: { default: void 0 },
@@ -1722,23 +1727,23 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
   },
   emits: ["update:value"],
   setup(t, { emit: n }) {
-    const d = n, e = t, a = o(void 0), u = o(void 0), l = o(void 0), c = o(void 0), i = o(""), h = o(""), s = o(""), B = o(null);
+    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 p = e.id ?? `textarea-${V()}`;
-      a.value = p, u.value = p + K, l.value = p + J, c.value = p + Q;
-    }), R(
+      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 p = a.value + K;
-          u.value = p, l.value = a.value + J, c.value = a.value + Q, q(e.message, e.showMessage) && (i.value = p);
+          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"
       }
-    ), R(
+    ), z(
       () => [e.value],
       () => {
         h.value = e.value;
@@ -1748,93 +1753,93 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
         flush: "post"
       }
     );
-    function y(p) {
-      h.value = p.target.value, e.onInput && e.onInput(p), e.input && e.input(p);
+    function $(o) {
+      h.value = o.target.value, e.onInput && e.onInput(o), e.input && e.input(o);
     }
-    function L(p) {
-      var $, f, M;
-      e.onChange && e.onChange(p), e.change && e.change(p), ae(d, p), !(($ = B.value) != null && $.validity.valid) || e.validation === "invalid" ? (i.value = c.value, Y() && (s.value = e.invalidMessage ?? ((f = B.value) == null ? void 0 : f.validationMessage) ?? x, H(() => s.value = "", 1e3))) : e.validation === "valid" || (M = B.value) != null && M.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 = u.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 k(p) {
-      e.onBlur && e.onBlur(p), e.blur && e.blur(p);
+    function _(o) {
+      e.onBlur && e.onBlur(o), e.blur && e.blur(o);
     }
-    function v(p) {
-      e.onFocus && e.onFocus(p), e.focus && e.focus(p);
+    function f(o) {
+      e.onFocus && e.onFocus(o), e.focus && e.focus(o);
     }
-    return (p, $) => (m(), g("div", {
-      class: N(r(F)("db-textarea", e.class)),
-      "data-variant": p.variant,
-      "data-hide-label": r(P)(p.showLabel)
+    return (o, y) => (m(), g("div", {
+      class: N(v(A)("db-textarea", e.class)),
+      "data-variant": o.variant,
+      "data-hide-label": v(P)(o.showLabel)
     }, [
-      _("label", { for: a.value }, w(p.label ?? r(le)), 9, Pa),
-      _("textarea", {
-        "aria-invalid": p.validation === "invalid",
-        "data-custom-validity": p.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": p.resize,
-        disabled: p.disabled,
-        required: p.required,
-        readOnly: p.readOnly,
-        form: p.form,
-        maxLength: p.maxLength,
-        minLength: p.minLength,
-        name: p.name,
-        wrap: p.wrap,
-        spellcheck: p.spellCheck,
-        autocomplete: p.autocomplete,
-        onInput: $[0] || ($[0] = async (f) => y(f)),
-        onChange: $[1] || ($[1] = async (f) => L(f)),
-        onBlur: $[2] || ($[2] = async (f) => k(f)),
-        onFocus: $[3] || ($[3] = async (f) => v(f)),
-        value: p.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: p.placeholder ?? r(fe),
-        rows: p.rows ?? r(Ae),
-        cols: p.cols
-      }, null, 40, Ga),
-      r(q)(p.message, p.showMessage) ? (m(), X(O, {
+        placeholder: o.placeholder ?? v(fe),
+        rows: o.rows ?? v(Ne),
+        cols: o.cols
+      }, null, 40, Pa),
+      v(q)(o.message, o.showMessage) ? (m(), X(W, {
         key: 0,
         size: "small",
-        icon: p.messageIcon,
-        id: u.value
+        icon: o.messageIcon,
+        id: c.value
       }, {
-        default: z(() => [
-          E(w(p.message), 1)
+        default: R(() => [
+          L(k(o.message), 1)
         ]),
         _: 1
-      }, 8, ["icon", "id"])) : D("", !0),
-      W(O, {
+      }, 8, ["icon", "id"])) : M("", !0),
+      O(W, {
         size: "small",
         semantic: "successful",
         id: l.value
       }, {
-        default: z(() => [
-          E(w(p.validMessage ?? r(Z)), 1)
+        default: R(() => [
+          L(k(o.validMessage ?? v(Z)), 1)
         ]),
         _: 1
       }, 8, ["id"]),
-      W(O, {
+      O(W, {
         size: "small",
         semantic: "critical",
-        id: c.value
+        id: p.value
       }, {
-        default: z(() => {
-          var f;
+        default: R(() => {
+          var r;
           return [
-            E(w(p.invalidMessage ?? ((f = B.value) == null ? void 0 : f.validationMessage) ?? r(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)
-    ], 10, Ua));
+      I("span", Va, k(s.value), 1)
+    ], 10, Ra));
   }
-}), qa = ["id", "data-width", "data-icon", "data-hide-icon", "data-active", "aria-disabled"], Wa = ["aria-haspopup", "aria-expanded", "disabled"], Oa = ["id"], Xa = {
+}), 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"
-}, Gn = /* @__PURE__ */ A({
+}, Rn = /* @__PURE__ */ E({
   __name: "navigation-item",
   props: {
     active: { type: Boolean, default: void 0 },
@@ -1856,111 +1861,118 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
     text: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(!1), e = o(!1), a = o(!0), u = o(!1), l = o(
-      "sub-navigation-" + V()
-    ), c = o(void 0), i = o(null);
+    const n = t, d = u(!1), e = u(!1), a = u(!0), c = u(!1), l = u(!1), p = u(
+      "sub-navigation-" + G()
+    ), i = u(void 0), h = u(null);
     U(() => {
       d.value = !0;
-    }), R(
+    }), z(
       () => [n.subNavigationExpanded],
       () => {
-        n.subNavigationExpanded !== void 0 && (u.value = !!n.subNavigationExpanded);
+        n.subNavigationExpanded !== void 0 && (c.value = !!n.subNavigationExpanded);
       },
       {
         immediate: !0,
         flush: "post"
       }
-    ), R(
+    ), z(
       () => [d.value],
       () => {
-        B();
+        D();
       },
       {
         immediate: !0,
         flush: "post"
       }
     );
-    function h(y) {
-      n.onClick && n.onClick(y), e.value && (u.value = !0);
+    function s(_) {
+      be(_) && (l.value = !0, H(() => {
+        l.value = !1;
+      }, 300));
     }
-    function s(y) {
-      y.stopPropagation(), u.value = !1;
+    function B(_) {
+      n.onClick && n.onClick(_), e.value && (c.value = !0);
     }
-    function B() {
-      var y;
-      if (d.value && document && l.value) {
-        const L = 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
         );
-        L && (((y = L.children) == null ? void 0 : y.length) > 0 ? (e.value = !0, c.value || (c.value = new Je(
-          i.value,
-          L
+        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, L) => (m(), g("li", {
+    return (_, f) => (m(), g("li", {
       ref_key: "_ref",
-      ref: i,
-      id: y.id,
-      onMouseover: L[1] || (L[1] = async (k) => {
-        var v;
-        return (v = c.value) == null ? void 0 : v.enableFollow();
+      ref: h,
+      id: _.id,
+      onMouseover: f[2] || (f[2] = async (o) => {
+        var y;
+        return (y = i.value) == null ? void 0 : y.enableFollow();
       }),
-      onMouseleave: L[2] || (L[2] = async (k) => {
-        var v;
-        return (v = c.value) == null ? void 0 : v.disableFollow();
+      onMouseleave: f[3] || (f[3] = async (o) => {
+        var y;
+        return (y = i.value) == null ? void 0 : y.disableFollow();
       }),
-      onMousemove: L[3] || (L[3] = async (k) => {
-        var v;
-        return (v = c.value) == null ? void 0 : v.followByMouseEvent(k);
+      onMousemove: f[4] || (f[4] = async (o) => {
+        var y;
+        return (y = i.value) == null ? void 0 : y.followByMouseEvent(o);
       }),
-      class: N(r(F)("db-navigation-item", n.class)),
-      "data-width": y.width,
-      "data-icon": y.icon,
-      "data-hide-icon": r(P)(y.showIcon),
-      "data-active": y.active,
-      "aria-disabled": r(G)(y.disabled)
+      class: N(v(A)("db-navigation-item", n.class)),
+      "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(T, { key: 0 }, [
-        y.text ? (m(), g(T, { key: 0 }, [
-          E(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(T, { key: 1 }, [
-        _("button", {
+      a.value ? (m(), g(C, { key: 1 }, [
+        I("button", {
           class: "db-navigation-item-expand-button",
           "aria-haspopup": e.value,
-          "aria-expanded": u.value,
-          disabled: y.disabled,
-          onClick: L[0] || (L[0] = async (k) => h(k))
+          "aria-expanded": c.value,
+          disabled: _.disabled,
+          onClick: f[0] || (f[0] = async (o) => B(o))
         }, [
-          y.text ? (m(), g(T, { key: 0 }, [
-            E(w(y.text), 1)
-          ], 64)) : I(y.$slots, "default", { key: 1 })
-        ], 8, Wa),
-        _("menu", {
+          _.text ? (m(), g(C, { key: 0 }, [
+            L(k(_.text), 1)
+          ], 64)) : w(_.$slots, "default", { key: 1 })
+        ], 8, qa),
+        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", Xa, [
-            W(te, {
+          e.value ? (m(), g("div", Wa, [
+            O(de, {
               icon: "arrow_left",
               variant: "ghost",
-              id: y.backButtonId,
-              onClick: (k) => s(k)
+              id: _.backButtonId,
+              onClick: (o) => $(o)
             }, {
-              default: z(() => [
-                E(w(y.backButtonText ?? r($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)
-    ], 42, qa));
+      ], 64)) : M("", !0)
+    ], 42, Ga));
   }
-}), Ha = ["id"], ja = ["aria-disabled", "open"], Ya = /* @__PURE__ */ A({
+}), Xa = ["id"], Ha = ["aria-disabled", "open"], ja = /* @__PURE__ */ E({
   __name: "accordion-item",
   props: {
     defaultOpen: { type: Boolean, default: void 0 },
@@ -1977,42 +1989,42 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
     onToggle: { type: Function, default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(ee), e = o(!1), a = o(null);
+    const n = t, d = u(ee), e = u(!1), a = u(null);
     U(() => {
-      d.value = n.id || "accordion-item-" + V(), n.defaultOpen && (e.value = n.defaultOpen);
+      d.value = n.id || "accordion-item-" + G(), n.defaultOpen && (e.value = n.defaultOpen);
     });
-    function u(l) {
+    function c(l) {
       l == null || l.preventDefault();
-      const c = !e.value;
-      n.onToggle && n.onToggle(c), e.value = c;
+      const p = !e.value;
+      n.onToggle && n.onToggle(p), e.value = p;
     }
-    return (l, c) => (m(), g("li", {
+    return (l, p) => (m(), g("li", {
       id: d.value,
-      class: N(r(F)("db-accordion-item", n.class))
+      class: N(v(A)("db-accordion-item", n.class))
     }, [
-      _("details", {
-        "aria-disabled": r(G)(l.disabled),
+      I("details", {
+        "aria-disabled": v(V)(l.disabled),
         ref_key: "_ref",
         ref: a,
         open: e.value
       }, [
-        _("summary", {
-          onClick: c[0] || (c[0] = async (i) => u(i))
+        I("summary", {
+          onClick: p[0] || (p[0] = async (i) => c(i))
         }, [
-          l.headlinePlain ? (m(), g(T, { key: 0 }, [
-            E(w(l.headlinePlain), 1)
-          ], 64)) : D("", !0),
-          l.headlinePlain ? D("", !0) : I(l.$slots, "headline", { key: 1 })
+          l.headlinePlain ? (m(), g(C, { key: 0 }, [
+            L(k(l.headlinePlain), 1)
+          ], 64)) : M("", !0),
+          l.headlinePlain ? M("", !0) : w(l.$slots, "headline", { key: 1 })
         ]),
-        _("div", null, [
-          l.text ? (m(), g(T, { key: 0 }, [
-            E(w(l.text), 1)
-          ], 64)) : I(l.$slots, "default", { key: 1 })
+        I("div", null, [
+          l.text ? (m(), g(C, { key: 0 }, [
+            L(k(l.text), 1)
+          ], 64)) : w(l.$slots, "default", { key: 1 })
         ])
-      ], 8, ja)
-    ], 10, Ha));
+      ], 8, Ha)
+    ], 10, Xa));
   }
-}), Ka = ["id", "data-variant"], Vn = /* @__PURE__ */ A({
+}), Ya = ["id", "data-variant"], Un = /* @__PURE__ */ E({
   __name: "accordion",
   props: {
     behavior: { default: void 0 },
@@ -2029,10 +2041,10 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
     autofocus: { type: Boolean }
   },
   setup(t) {
-    const n = t, d = o(ee), e = o(""), a = o(!1), u = o(!1), l = o(null);
+    const n = t, d = u(ee), e = u(""), a = u(!1), c = u(!1), l = u(null);
     U(() => {
-      d.value = n.id || "accordion-" + V(), a.value = !0, u.value = !0;
-    }), R(
+      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 = "");
@@ -2041,7 +2053,7 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
         immediate: !0,
         flush: "post"
       }
-    ), R(
+    ), z(
       () => [l.value, e.value],
       () => {
         if (l.value) {
@@ -2055,23 +2067,23 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
         immediate: !0,
         flush: "post"
       }
-    ), R(
-      () => [l.value, u.value, n.initOpenIndex],
+    ), z(
+      () => [l.value, c.value, n.initOpenIndex],
       () => {
         var i;
-        if (l.value && u.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);
                 }
               );
             }
           }
-          u.value = !1;
+          c.value = !1;
         }
       },
       {
@@ -2079,7 +2091,7 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
         flush: "post"
       }
     );
-    function c(i) {
+    function p(i) {
       try {
         return typeof i == "string" ? JSON.parse(i) : i;
       } catch (h) {
@@ -2091,19 +2103,19 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
       ref_key: "_ref",
       ref: l,
       id: d.value,
-      class: N(r(F)("db-accordion", n.class)),
+      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), g(T, { key: 1 }, ne(c(i.items), (s, B) => (m(), X(Ya, {
+      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)
-    ], 10, Ka));
+      }, null, 8, ["headlinePlain", "disabled", "text"]))), 128)) : M("", !0)
+    ], 10, Ya));
   }
-}), Ja = ["id", "aria-labelledby"], qn = /* @__PURE__ */ A({
+}), Ka = ["id", "aria-labelledby"], Pn = /* @__PURE__ */ E({
   __name: "navigation",
   props: {
     children: { default: void 0 },
@@ -2115,22 +2127,22 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
     labelledBy: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(ee), e = o(null);
+    const n = t, d = u(ee), e = u(null);
     return U(() => {
-      d.value = n.id || "navigation-" + V();
-    }), (a, u) => (m(), g("nav", {
+      d.value = n.id || "navigation-" + G();
+    }), (a, c) => (m(), g("nav", {
       ref_key: "_ref",
       ref: e,
       id: d.value,
       "aria-labelledby": a.labelledBy,
-      class: N(r(F)("db-navigation", n.class))
+      class: N(v(A)("db-navigation", n.class))
     }, [
-      _("menu", null, [
-        I(a.$slots, "default")
+      I("menu", null, [
+        w(a.$slots, "default")
       ])
-    ], 10, Ja));
+    ], 10, Ka));
   }
-}), Qa = ["id"], Za = ["data-spacing", "data-gap", "data-animation", "data-open", "data-delay", "data-width", "data-placement"], Wn = /* @__PURE__ */ A({
+}), Ja = ["id"], Qa = ["data-spacing", "data-gap", "data-animation", "data-open", "data-delay", "data-width", "data-placement"], Vn = /* @__PURE__ */ E({
   __name: "popover",
   props: {
     open: { type: Boolean, default: void 0 },
@@ -2149,14 +2161,14 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
     width: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(!1), e = o(!1), a = o(null);
+    const n = t, d = u(!1), e = u(!1), a = u(null);
     U(() => {
       d.value = !0;
-    }), R(
+    }), z(
       () => [a.value, d.value],
       () => {
         if (a.value && d.value) {
-          const i = c();
+          const i = p();
           i && (i.ariaHasPopup = "true"), d.value = !1;
         }
       },
@@ -2164,11 +2176,11 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
         immediate: !0,
         flush: "post"
       }
-    ), R(
+    ), z(
       () => [a.value, e.value],
       () => {
         if (a.value) {
-          const i = c();
+          const i = p();
           i && (i.ariaExpanded = (!!e.value).toString());
         }
       },
@@ -2177,7 +2189,7 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
         flush: "post"
       }
     );
-    function u() {
+    function c() {
       if (e.value = !0, !a.value) return;
       const i = a.value.querySelector("article");
       i && se(i);
@@ -2186,7 +2198,7 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
       const h = i.target;
       (!h.parentNode || h.parentNode.querySelector(":focus") !== h && h.parentNode.querySelector(":focus-within") !== h && h.parentNode.querySelector(":hover") !== h) && (e.value = !1);
     }
-    function c() {
+    function p() {
       var i;
       if (a.value) {
         const h = Array.from(a.value.children);
@@ -2201,28 +2213,28 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
       ref_key: "_ref",
       ref: a,
       id: i.id,
-      class: N(r(F)("db-popover", n.class)),
-      onFocus: h[0] || (h[0] = async (s) => u()),
+      class: N(v(A)("db-popover", n.class)),
+      onFocus: h[0] || (h[0] = async (s) => c()),
       onBlur: h[1] || (h[1] = async (s) => l(s)),
-      onMouseenter: h[2] || (h[2] = async (s) => u()),
+      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": r(G)(i.gap),
-        "data-animation": r(G)(i.animation ?? !0),
+        "data-gap": v(V)(i.gap),
+        "data-animation": v(V)(i.animation ?? !0),
         "data-open": i.open,
         "data-delay": i.delay,
         "data-width": i.width,
         "data-placement": i.placement
       }, [
-        I(i.$slots, "default")
-      ], 8, Za)
-    ], 42, Qa));
+        w(i.$slots, "default")
+      ], 8, Qa)
+    ], 42, Ja));
   }
-}), xa = ["id", "data-emphasis", "data-animation", "data-delay", "data-width", "data-show-arrow", "data-placement"], On = /* @__PURE__ */ A({
+}), Za = ["id", "data-emphasis", "data-animation", "data-delay", "data-width", "data-show-arrow", "data-placement"], Gn = /* @__PURE__ */ E({
   __name: "tooltip",
   props: {
     showArrow: { type: Boolean, default: void 0 },
@@ -2239,17 +2251,17 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
     width: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(ee), e = o(!1), a = o(null);
+    const n = t, d = u(ee), e = u(!1), a = u(null);
     U(() => {
-      d.value = n.id || "tooltip-" + V(), e.value = !0;
-    }), R(
+      d.value = n.id || "tooltip-" + G(), e.value = !0;
+    }), z(
       () => [a.value, e.value],
       () => {
         if (a.value && e.value && d.value) {
-          let c = a.value.parentElement;
-          c && c.localName.includes("tooltip") && (c = c.parentElement), c && (["mouseenter", "focus"].forEach((i) => {
-            c.addEventListener(i, () => l());
-          }), c.setAttribute("data-has-tooltip", "true"), c.setAttribute("aria-describedby", d.value)), e.value = !1;
+          let p = a.value.parentElement;
+          p && p.localName.includes("tooltip") && (p = p.parentElement), p && (["mouseenter", "focus"].forEach((i) => {
+            p.addEventListener(i, () => l());
+          }), p.setAttribute("data-has-tooltip", "true"), p.setAttribute("aria-describedby", d.value)), e.value = !1;
         }
       },
       {
@@ -2257,32 +2269,32 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
         flush: "post"
       }
     );
-    function u(c) {
-      c.stopPropagation();
+    function c(p) {
+      p.stopPropagation();
     }
     function l() {
       a.value && se(a.value);
     }
-    return (c, i) => (m(), g("i", {
+    return (p, i) => (m(), g("i", {
       role: "tooltip",
       "aria-hidden": "true",
       "data-gap": "true",
       ref_key: "_ref",
       ref: a,
-      class: N(r(F)("db-tooltip", n.class)),
+      class: N(v(A)("db-tooltip", n.class)),
       id: d.value,
-      "data-emphasis": c.emphasis,
-      "data-animation": r(G)(c.animation ?? !0),
-      "data-delay": c.delay,
-      "data-width": c.width,
-      "data-show-arrow": r(G)(c.showArrow ?? !0),
-      "data-placement": c.placement,
-      onClick: i[0] || (i[0] = async (h) => u(h))
+      "data-emphasis": p.emphasis,
+      "data-animation": v(V)(p.animation ?? !0),
+      "data-delay": p.delay,
+      "data-width": p.width,
+      "data-show-arrow": v(V)(p.showArrow ?? !0),
+      "data-placement": p.placement,
+      onClick: i[0] || (i[0] = async (h) => c(h))
     }, [
-      I(c.$slots, "default")
-    ], 10, xa));
+      w(p.$slots, "default")
+    ], 10, Za));
   }
-}), en = ["id"], an = { role: "tablist" }, nn = /* @__PURE__ */ A({
+}), xa = ["id"], en = { role: "tablist" }, an = /* @__PURE__ */ E({
   __name: "tab-list",
   props: {
     children: { default: void 0 },
@@ -2293,21 +2305,21 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
     autofocus: { type: Boolean }
   },
   setup(t) {
-    const n = t, d = o(ee), e = o(null);
+    const n = t, d = u(ee), e = u(null);
     return U(() => {
-      d.value = n.id || "tab-list-" + V();
-    }), (a, u) => (m(), g("div", {
+      d.value = n.id || "tab-list-" + G();
+    }), (a, c) => (m(), g("div", {
       ref_key: "_ref",
       ref: e,
       id: d.value,
-      class: N(r(F)("db-tab-list", n.class))
+      class: N(v(A)("db-tab-list", n.class))
     }, [
-      _("ul", an, [
-        I(a.$slots, "default")
+      I("ul", en, [
+        w(a.$slots, "default")
       ])
-    ], 10, en));
+    ], 10, xa));
   }
-}), tn = ["id", "aria-labelledby"], dn = /* @__PURE__ */ A({
+}), nn = ["id", "aria-labelledby"], tn = /* @__PURE__ */ E({
   __name: "tab-panel",
   props: {
     content: { default: void 0 },
@@ -2320,23 +2332,23 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
     labelledBy: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o(null);
+    const n = t, d = u(null);
     return U(() => {
     }), (e, a) => (m(), g("section", {
       role: "tabpanel",
       ref_key: "_ref",
       ref: d,
-      class: N(r(F)("db-tab-panel", n.class)),
+      class: N(v(A)("db-tab-panel", n.class)),
       id: e.id,
       "aria-labelledby": e.labelledBy
     }, [
-      e.content ? (m(), g(T, { key: 0 }, [
-        E(w(e.content), 1)
-      ], 64)) : D("", !0),
-      I(e.$slots, "default")
-    ], 10, tn));
+      e.content ? (m(), g(C, { key: 0 }, [
+        L(k(e.content), 1)
+      ], 64)) : M("", !0),
+      w(e.$slots, "default")
+    ], 10, nn));
   }
-}), ln = ["id", "data-orientation", "data-scroll-behavior", "data-alignment", "data-width"], Xn = /* @__PURE__ */ A({
+}), dn = ["id", "data-orientation", "data-scroll-behavior", "data-alignment", "data-width"], qn = /* @__PURE__ */ E({
   __name: "tabs",
   props: {
     arrowScrollDistance: { default: void 0 },
@@ -2344,6 +2356,8 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
     initialSelectedIndex: { default: void 0 },
     initialSelectedMode: { default: void 0 },
     name: { default: void 0 },
+    onIndexChange: { type: Function, default: void 0 },
+    onTabSelect: { type: Function, default: void 0 },
     tabs: { default: void 0 },
     children: { default: void 0 },
     className: { default: void 0 },
@@ -2356,20 +2370,20 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
     alignment: { default: void 0 }
   },
   setup(t) {
-    const n = t, d = o("tabs-" + V()), e = o(""), a = o(!1), u = o(!1), l = o(!1), c = o(null), i = o(null);
+    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 || V()}`, a.value = !0;
-    }), R(
+      d.value = n.id || d.value, e.value = `tabs-${n.name || G()}`, a.value = !0;
+    }), z(
       () => [i.value, a.value],
       () => {
         if (i.value && a.value) {
-          y(), L(!0);
-          const k = i.value.querySelector(".db-tab-list");
-          k && new MutationObserver((p) => {
-            p.forEach(($) => {
-              ($.removedNodes.length || $.addedNodes.length) && (y(), L());
+          $(), D(!0);
+          const f = i.value.querySelector(".db-tab-list");
+          f && new MutationObserver((y) => {
+            y.forEach((r) => {
+              (r.removedNodes.length || r.addedNodes.length) && ($(), D());
             });
-          }).observe(k, {
+          }).observe(f, {
             childList: !0,
             subtree: !0
           }), a.value = !1;
@@ -2380,138 +2394,151 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { class: "db-hea
         flush: "post"
       }
     );
-    function h(k) {
+    function h(f) {
       try {
-        return typeof k == "string" ? JSON.parse(k) : k;
-      } catch (v) {
-        console.error(v);
+        return typeof f == "string" ? JSON.parse(f) : f;
+      } catch (o) {
+        console.error(o);
       }
       return [];
     }
-    function s(k) {
-      const v = k.scrollWidth > k.clientWidth;
-      u.value = v && k.scrollLeft > 1, l.value = v && k.scrollLeft < k.scrollWidth - k.clientWidth;
+    function s(f) {
+      const o = f.scrollWidth > f.clientWidth;
+      c.value = o && f.scrollLeft > 1, l.value = o && f.scrollLeft < f.scrollWidth - f.clientWidth;
     }
-    function B(k) {
-      var p;
-      let v = n.arrowScrollDistance || 100;
-      k && (v *= -1), (p = c.value) == null || p.scrollBy({
+    function B(f) {
+      var y;
+      let o = n.arrowScrollDistance || 100;
+      f && (o *= -1), (y = p.value) == null || y.scrollBy({
         top: 0,
-        left: v,
+        left: o,
         behavior: "smooth"
       });
     }
-    function y() {
+    function $() {
       if (i.value) {
-        const k = i.value.querySelector(".db-tab-list");
-        if (k) {
-          const v = k.querySelector('[role="tablist"]');
-          v && (v.setAttribute(
+        const f = i.value.querySelector(".db-tab-list");
+        if (f) {
+          const o = f.querySelector('[role="tablist"]');
+          o && (o.setAttribute(
             "aria-orientation",
             n.orientation || "horizontal"
-          ), n.behavior === "arrows" && (c.value = v, s(v), v.addEventListener("scroll", () => {
-            s(v);
+          ), n.behavior === "arrows" && (p.value = o, s(o), o.addEventListener("scroll", () => {
+            s(o);
           })));
         }
       }
     }
-    function L(k) {
+    function D(f) {
       if (i.value) {
-        const v = Array.from(
+        const o = Array.from(
           i.value.getElementsByClassName("db-tab-item")
         );
-        for (const $ of v) {
-          const f = v.indexOf($), M = $.querySelector("label"), b = $.querySelector("input");
-          if (b && M) {
-            if (!b.id) {
-              const S = `${e.value}-tab-${f}`;
-              M.setAttribute("for", S), b.setAttribute(
+        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}`;
+              b.setAttribute("for", F), S.setAttribute(
                 "aria-controls",
-                `${e.value}-tab-panel-${f}`
-              ), b.id = S, b.setAttribute("name", e.value);
+                `${e.value}-tab-panel-${T}`
+              ), S.id = F, S.setAttribute("name", e.value);
             }
-            if (k) {
-              const S = !n.initialSelectedMode || n.initialSelectedMode === "auto", C = n.initialSelectedIndex == null && f === 0 || n.initialSelectedIndex === f;
-              S && C && b.click();
+            if (f) {
+              const F = !n.initialSelectedMode || n.initialSelectedMode === "auto", ne = n.initialSelectedIndex == null && T === 0 || n.initialSelectedIndex === T;
+              F && ne && S.click();
             }
           }
         }
-        const p = Array.from(
+        const y = Array.from(
           i.value.querySelectorAll(
             ":is(:scope > .db-tab-panel, :scope > db-tab-panel > .db-tab-panel)"
           )
         );
-        for (const $ of p) {
-          if ($.id) continue;
-          const f = p.indexOf($);
-          $.id = `${e.value}-tab-panel-${f}`, $.setAttribute("aria-labelledby", `${e.value}-tab-${f}`);
+        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}`);
         }
       }
     }
-    return (k, v) => (m(), g("div", {
+    function _(f) {
+      if (n.onIndexChange && f.target) {
+        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")
+        );
+        o !== null && y !== null && n.onIndexChange(Array.from(o.childNodes).indexOf(y));
+      }
+      n.onTabSelect && n.onTabSelect(f);
+    }
+    return (f, o) => (m(), g("div", {
       ref_key: "_ref",
       ref: i,
       id: d.value,
-      class: N(r(F)("db-tabs", n.class)),
-      "data-orientation": k.orientation,
-      "data-scroll-behavior": k.behavior,
-      "data-alignment": k.alignment ?? "start",
-      "data-width": k.width ?? "auto"
+      class: N(v(A)("db-tabs", n.class)),
+      "data-orientation": f.orientation,
+      "data-scroll-behavior": f.behavior,
+      "data-alignment": f.alignment ?? "start",
+      "data-width": f.width ?? "auto",
+      onInput: o[0] || (o[0] = async (y) => _(y))
     }, [
-      u.value ? (m(), X(te, {
+      c.value ? (m(), X(de, {
         key: 0,
         class: "tabs-scroll-left",
         variant: "ghost",
         icon: "chevron_left",
+        type: "button",
         noText: !0,
-        onClick: (p) => B(!0)
+        onClick: (y) => B(!0)
       }, {
-        default: z(() => v[0] || (v[0] = [
-          E(" Scroll left ")
+        default: R(() => o[1] || (o[1] = [
+          L(" Scroll left ")
         ])),
         _: 1
-      }, 8, ["onClick"])) : D("", !0),
-      k.tabs ? (m(), g(T, { key: 1 }, [
-        W(nn, null, {
-          default: z(() => [
-            (m(!0), g(T, null, ne(h(k.tabs), (p, $) => (m(), X(Ma, {
-              key: k.name + "tab-item" + $,
-              active: p.active,
-              label: p.label,
-              iconAfter: p.iconAfter,
-              icon: p.icon,
-              noText: p.noText
+      }, 8, ["onClick"])) : M("", !0),
+      f.tabs ? (m(), g(C, { key: 1 }, [
+        O(an, null, {
+          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(T, null, ne(h(k.tabs), (p, $) => (m(), X(dn, {
-          key: k.name + "tab-panel" + $,
-          content: p.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(() => [
-            E(w(p.children), 1)
+          default: R(() => [
+            L(k(y.children), 1)
           ]),
           _: 2
         }, 1032, ["content"]))), 128))
-      ], 64)) : D("", !0),
-      l.value ? (m(), X(te, {
+      ], 64)) : M("", !0),
+      l.value ? (m(), X(de, {
         key: 2,
         class: "tabs-scroll-right",
         variant: "ghost",
         icon: "chevron_right",
+        type: "button",
         noText: !0,
-        onClick: (p) => B()
+        onClick: (y) => B()
       }, {
-        default: z(() => v[1] || (v[1] = [
-          E(" Scroll right ")
+        default: R(() => o[2] || (o[2] = [
+          L(" Scroll right ")
         ])),
         _: 1
-      }, 8, ["onClick"])) : D("", !0),
-      I(k.$slots, "default")
-    ], 10, ln));
+      }, 8, ["onClick"])) : M("", !0),
+      w(f.$slots, "default")
+    ], 42, dn));
   }
-}), Hn = ["adaptive", "neutral", "critical", "informational", "warning", "successful"], jn = ["medium", "small", "large", "none"], Yn = ["medium", "small", "large", "none"], Kn = ["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"], Qn = ["horizontal", "vertical"], Zn = ["full", "auto"], xn = ["full", "medium", "large", "small"], et = ["none", "slow", "fast"], at = ["auto", "fixed"], nt = ["small", "medium"], sn = ["weak", "strong"], tt = [...sn, "origin"], dt = ["invalid", "valid", "no-validation"], it = ["above", "floating"], lt = ["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"], st = ["time", "true", "false", "date", "page", "step", "location"], ot = ["_self", "_blank", "_parent", "_top"], ut = ["no-referrer", "no-referrer-when-downgrade", "origin", "origin-when-cross-origin", "same-origin", "strict-origin", "strict-origin-when-cross-origin", "unsafe-url"], rt = ["start", "center"], on = ["id", "data-gap", "data-variant", "data-direction", "data-alignment", "data-justify-content", "data-wrap"], ft = /* @__PURE__ */ A({
+}), 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({
   __name: "stack",
   props: {
     variant: { default: void 0 },
@@ -2528,62 +2555,62 @@ const Qe = ["id", "data-width", "data-on-forcing-mobile"], Ze = { 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,
       id: e.id,
-      class: N(r(F)("db-stack", n.class)),
+      class: N(v(A)("db-stack", n.class)),
       "data-gap": e.gap,
       "data-variant": e.variant,
       "data-direction": e.direction,
       "data-alignment": e.alignment,
       "data-justify-content": e.justifyContent,
-      "data-wrap": r(G)(e.wrap)
+      "data-wrap": v(V)(e.wrap)
     }, [
-      I(e.$slots, "default")
-    ], 10, on));
+      w(e.$slots, "default")
+    ], 10, sn));
   }
 });
 export {
-  rt as AlignmentList,
-  lt as AutoCompleteList,
+  st as AlignmentList,
+  tt as AutoCompleteList,
   he as COLOR,
-  yn as COLORS,
-  Bn as COLORS_SIMPLE,
-  bn as COLOR_CONST,
+  mn as COLORS,
+  bn as COLORS_SIMPLE,
+  pn as COLOR_CONST,
   pe as COLOR_SIMPLE,
-  Vn as DBAccordion,
-  Ya as DBAccordionItem,
-  _n as DBBadge,
-  $n as DBBrand,
-  te as DBButton,
-  Ln as DBCard,
-  En as DBCheckbox,
-  An as DBDivider,
+  Un as DBAccordion,
+  ja as DBAccordionItem,
+  kn as DBBadge,
+  wn as DBBrand,
+  de as DBButton,
+  In as DBCard,
+  _n as DBCheckbox,
+  $n as DBDivider,
   Ye as DBDrawer,
-  Nn as DBHeader,
-  Fn as DBIcon,
-  O as DBInfotext,
-  Tn as DBInput,
-  Sn as DBLink,
-  qn as DBNavigation,
-  Gn as DBNavigationItem,
-  In as DBNotification,
-  Cn as DBPage,
-  Wn as DBPopover,
-  Dn as DBRadio,
-  Mn as DBSection,
-  Rn as DBSelect,
-  ft as DBStack,
-  zn as DBSwitch,
-  Ma as DBTabItem,
-  nn as DBTabList,
-  dn as DBTabPanel,
-  Xn as DBTabs,
-  Un as DBTag,
-  Pn as DBTextarea,
-  On as DBTooltip,
+  Ln as DBHeader,
+  En as DBIcon,
+  W as DBInfotext,
+  Nn as DBInput,
+  An as DBLink,
+  Pn as DBNavigation,
+  Rn as DBNavigationItem,
+  Bn as DBNotification,
+  Fn as DBPage,
+  Vn as DBPopover,
+  Tn as DBRadio,
+  Sn as DBSection,
+  Cn as DBSelect,
+  ot as DBStack,
+  Dn as DBSwitch,
+  Da as DBTabItem,
+  an as DBTabList,
+  tn as DBTabPanel,
+  qn as DBTabs,
+  Mn as DBTag,
+  zn as DBTextarea,
+  Gn as DBTooltip,
   $e as DEFAULT_BACK,
   Le as DEFAULT_BURGER_MENU,
   ce as DEFAULT_CLOSE_BUTTON,
@@ -2596,50 +2623,48 @@ export {
   K as DEFAULT_MESSAGE_ID_SUFFIX,
   fe as DEFAULT_PLACEHOLDER,
   oe as DEFAULT_PLACEHOLDER_ID_SUFFIX,
-  Ae as DEFAULT_ROWS,
+  Ne as DEFAULT_ROWS,
   Z as DEFAULT_VALID_MESSAGE,
   J as DEFAULT_VALID_MESSAGE_ID_SUFFIX,
-  Ne as DEFAULT_VIEWPORT,
-  gn as DENSITIES,
+  Ae as DEFAULT_VIEWPORT,
+  hn as DENSITIES,
   ve as DENSITY,
-  mn as DENSITY_CONST,
+  vn as DENSITY_CONST,
   Fe as DESKTOP_VIEWPORT,
-  sn as EmphasisList,
-  Jn as GapSpacingList,
-  it as LabelVariantList,
-  st as LinkCurrentList,
-  ut as LinkReferrerPolicyList,
-  ot as LinkTargetList,
-  Yn as MarginList,
-  xn as MaxWidthList,
-  Je as NavigationItemSafeTriangle,
-  Qn as OrientationList,
-  Kn as PlacementList,
-  et as PopoverDelayList,
-  at as PopoverWidthList,
+  ln as EmphasisList,
+  jn as GapSpacingList,
+  nt as LabelVariantList,
+  dt as LinkCurrentList,
+  lt as LinkReferrerPolicyList,
+  it as LinkTargetList,
+  Xn as MarginList,
+  Jn as MaxWidthList,
+  Ke as NavigationItemSafeTriangle,
+  Yn as OrientationList,
+  Hn as PlacementList,
+  Qn as PopoverDelayList,
+  Zn as PopoverWidthList,
   me as SEMANTIC,
-  kn as SEMANTICS,
-  Hn as SemanticList,
-  nt as SizeList,
-  jn as SpacingList,
-  wn as TESTING_VIEWPORTS,
-  tt as TagEmphasisList,
-  dt as ValidationList,
-  Zn as WidthList,
+  gn as SEMANTICS,
+  On as SemanticList,
+  xn as SizeList,
+  Wn as SpacingList,
+  yn as TESTING_VIEWPORTS,
+  et as TagEmphasisList,
+  at as ValidationList,
+  Kn as WidthList,
   re as addAttributeToChildren,
-  F as cls,
+  A as cls,
   H as delay,
-  cn as filterPassingProps,
-  G as getBooleanAsString,
+  V as getBooleanAsString,
   P as getHideProp,
-  vn as getRootProps,
   se as handleDataOutside,
   Y as hasVoiceOver,
   we as isArrayOfStrings,
-  Ke as isEventTargetNavigationItem,
+  be as isEventTargetNavigationItem,
   ke as isInView,
   q as stringPropVisible,
-  V as uuid,
-  pn as visibleInVX,
-  hn as visibleInVY
+  G as uuid,
+  fn as visibleInVX,
+  cn as visibleInVY
 };