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

package/dist/db-ux.es.js

@@ -1,84 +1,84 @@
 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";
+var ye = (i, t, o) => t in i ? ge(i, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : i[t] = o;
+var j = (i, t, o) => ye(i, typeof t != "symbol" ? t + "" : t, o);
+import { defineComponent as A, ref as u, createElementBlock as g, openBlock as m, unref as f, normalizeClass as E, renderSlot as w, Fragment as S, 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 ie, onUnmounted as Be } from "vue";
 const G = () => {
-  var t, n;
+  var i, t;
   if (typeof window < "u") {
-    if ((t = window.crypto) != null && t.randomUUID)
+    if ((i = window.crypto) != null && i.randomUUID)
       return window.crypto.randomUUID();
-    if ((n = window.crypto) != null && n.getRandomValues)
+    if ((t = window.crypto) != null && t.getRandomValues)
       return window.crypto.getRandomValues(new Uint32Array(3)).join("-");
   }
   return Math.random().toString().substring(2);
-}, re = (t, n) => {
-  const d = t.children;
-  Object.values(d).forEach((e) => {
-    e.setAttribute(n.key, n.value), e.children.length > 0 && re(e, n);
+}, re = (i, t) => {
+  const o = i.children;
+  Object.values(o).forEach((e) => {
+    e.setAttribute(t.key, t.value), e.children.length > 0 && re(e, t);
   });
-}, A = (...t) => {
-  let n = "";
-  for (const d of t)
-    if (d)
-      if (typeof d == "string")
-        n += `${d} `;
+}, N = (...i) => {
+  let t = "";
+  for (const o of i)
+    if (o)
+      if (typeof o == "string")
+        t += `${o} `;
       else
-        for (const e in d)
-          d[e] && (n += `${e} `);
-  return n.trim();
-}, fn = (t) => {
+        for (const e in o)
+          o[e] && (t += `${e} `);
+  return t.trim();
+}, ut = (i) => {
   const {
-    left: n,
-    right: d
-  } = t.getBoundingClientRect(), {
+    left: t,
+    right: o
+  } = i.getBoundingClientRect(), {
     innerWidth: e
   } = window;
-  return n >= 0 && d <= e;
-}, cn = (t) => {
+  return t >= 0 && o <= e;
+}, rt = (i) => {
   const {
-    top: n,
-    bottom: d
-  } = t.getBoundingClientRect(), {
+    top: t,
+    bottom: o
+  } = i.getBoundingClientRect(), {
     innerHeight: e
   } = window;
-  return n >= 0 && d <= e;
-}, ke = (t) => {
+  return t >= 0 && o <= e;
+}, ke = (i) => {
   var _;
   const {
-    top: n,
-    bottom: d,
+    top: t,
+    bottom: o,
     left: e,
     right: a
-  } = t.getBoundingClientRect(), {
-    innerHeight: c,
+  } = i.getBoundingClientRect(), {
+    innerHeight: v,
     innerWidth: l
   } = window;
-  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)), {
+  let p = t < 0, d = o > v, h = e < 0, n = a > l;
+  const B = i.hasAttribute("data-outside-vy"), $ = i.hasAttribute("data-outside-vx"), D = (_ = i == null ? void 0 : i.parentElement) == null ? void 0 : _.getBoundingClientRect();
+  return D && (B && (i.getAttribute("data-outside-vy") === "top" ? p = D.top - (o - D.bottom) < 0 : d = D.bottom + (D.top - t) > v), $ && (i.getAttribute("data-outside-vx") === "left" ? h = D.left - (a - D.right) < 0 : n = D.right + (D.left - e) > l)), {
     outTop: p,
-    outBottom: i,
+    outBottom: d,
     outLeft: h,
-    outRight: s
+    outRight: n
   };
-}, se = (t) => {
+}, ne = (i) => {
   const {
-    outTop: n,
-    outBottom: d,
+    outTop: t,
+    outBottom: o,
     outLeft: e,
     outRight: a
-  } = ke(t);
-  let c = {};
-  return n || d ? (c = {
-    vy: n ? "top" : "bottom"
-  }, t.setAttribute("data-outside-vy", c.vy)) : t.removeAttribute("data-outside-vy"), e || a ? (c = {
-    ...c,
+  } = ke(i);
+  let v = {};
+  return t || o ? (v = {
+    vy: t ? "top" : "bottom"
+  }, i.setAttribute("data-outside-vy", v.vy)) : i.removeAttribute("data-outside-vy"), e || a ? (v = {
+    ...v,
     vx: a ? "right" : "left"
-  }, t.setAttribute("data-outside-vx", c.vx)) : t.removeAttribute("data-outside-vx"), c;
-}, we = (t) => Array.isArray(t) && t.every((n) => typeof n == "string"), Ie = ["Mac", "iPhone", "iPad", "iPod"], Y = () => typeof window < "u" && Ie.some((t) => window.navigator.userAgent.includes(t)), H = (t, n) => new Promise(() => setTimeout(t, n)), V = (t) => t && String(t), P = (t) => {
-  if (t != null)
-    return V(!t);
-}, q = (t, n) => n === void 0 ? !!t : n && t, _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({
+  }, i.setAttribute("data-outside-vx", v.vx)) : i.removeAttribute("data-outside-vx"), v;
+}, we = (i) => Array.isArray(i) && i.every((t) => typeof t == "string"), Ie = ["Mac", "iPhone", "iPad", "iPod"], Y = () => typeof window < "u" && Ie.some((i) => window.navigator.userAgent.includes(i)), H = (i, t) => new Promise(() => setTimeout(i, t)), V = (i) => i && String(i), P = (i) => {
+  if (i != null)
+    return V(!i);
+}, q = (i, t) => t === void 0 ? !!i : t && i, _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"], oe = /* @__PURE__ */ A({
   __name: "button",
   props: {
     ariaexpanded: { type: Boolean, default: void 0 },
@@ -104,51 +104,51 @@ const G = () => {
     showIcon: { type: Boolean, default: void 0 },
     text: { default: void 0 }
   },
-  setup(t) {
-    const n = t, d = u(null);
+  setup(i) {
+    const t = i, o = u(null);
     function e(a) {
-      n.onClick && n.onClick(a);
+      t.onClick && t.onClick(a);
     }
-    return (a, c) => (m(), g("button", {
+    return (a, v) => (m(), g("button", {
       ref_key: "_ref",
-      ref: d,
+      ref: o,
       id: a.id,
-      class: N(v(A)("db-button", n.class)),
+      class: E(f(N)("db-button", t.class)),
       type: a.type || "button",
       disabled: a.disabled,
       "aria-label": a.label,
       "data-icon": a.icon,
-      "data-hide-icon": v(P)(a.showIcon),
+      "data-hide-icon": f(P)(a.showIcon),
       "data-size": a.size,
       "data-state": a.state,
       "data-width": a.width,
       "data-variant": a.variant,
-      "data-no-text": v(V)(a.noText),
+      "data-no-text": f(V)(a.noText),
       name: a.name,
       value: a.value,
       "aria-describedby": a.describedbyid,
       "aria-expanded": a.ariaexpanded,
       "aria-pressed": a.ariapressed,
-      onClick: c[0] || (c[0] = async (l) => e(l))
+      onClick: v[0] || (v[0] = async (l) => e(l))
     }, [
-      a.text ? (m(), g(C, { key: 0 }, [
+      a.text ? (m(), g(S, { 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", Ne = 4, ce = "Close Button", vn = "density", pn = "color";
-var ve = /* @__PURE__ */ ((t) => (t.FUNCTIONAL = "functional", t.REGULAR = "regular", t.EXPRESSIVE = "expressive", t))(ve || {});
-const hn = Object.entries(ve).map(([, t]) => t);
-var pe = /* @__PURE__ */ ((t) => (t.PRIMARY = "primary", t))(pe || {}), he = /* @__PURE__ */ ((t) => (t.NEUTRAL_BG_LEVEL_1 = "neutral-bg-basic-level-1", t.NEUTRAL_BG_LEVEL_2 = "neutral-bg-basic-level-2", t.NEUTRAL_BG_LEVEL_3 = "neutral-bg-basic-level-3", t.NEUTRAL_BG_TRANSPARENT_SEMI = "neutral-bg-basic-transparent-semi", t.NEUTRAL_BG_TRANSPARENT_FULL = "neutral-bg-basic-transparent-full", t.BRAND_BG_LEVEL_1 = "brand-bg-basic-level-1", t.BRAND_BG_LEVEL_2 = "brand-bg-basic-level-2", t.BRAND_BG_LEVEL_3 = "brand-bg-basic-level-3", t.BRAND_BG_TRANSPARENT_SEMI = "brand-bg-basic-transparent-semi", t.BRAND_BG_TRANSPARENT_FULL = "brand-bg-basic-transparent-full", t.SUCCESSFUL_BG_LEVEL_1 = "successful-bg-basic-level-1", t.SUCCESSFUL_BG_LEVEL_2 = "successful-bg-basic-level-2", t.SUCCESSFUL_BG_LEVEL_3 = "successful-bg-basic-level-3", t.SUCCESSFUL_BG_TRANSPARENT_SEMI = "successful-bg-basic-transparent-semi", t.SUCCESSFUL_BG_TRANSPARENT_FULL = "successful-bg-basic-transparent-full", t.CRITICAL_BG_LEVEL_1 = "critical-bg-basic-level-1", t.CRITICAL_BG_LEVEL_2 = "critical-bg-basic-level-2", t.CRITICAL_BG_LEVEL_3 = "critical-bg-basic-level-3", t.CRITICAL_BG_TRANSPARENT_SEMI = "critical-bg-basic-transparent-semi", t.CRITICAL_BG_TRANSPARENT_Full = "critical-bg-basic-transparent-full", t.WARNING_BG_LEVEL_1 = "warning-bg-basic-level-1", t.WARNING_BG_LEVEL_2 = "warning-bg-basic-level-2", t.WARNING_BG_LEVEL_3 = "warning-bg-basic-level-3", t.WARNING_BG_TRANSPARENT_SEMI = "warning-bg-basic-transparent-semi", t.WARNING_BG_TRANSPARENT_FULL = "warning-bg-basic-transparent-full", t.INFORMATIONAL_BG_LEVEL_1 = "informational-bg-basic-level-1", t.INFORMATIONAL_BG_LEVEL_2 = "informational-bg-basic-level-2", t.INFORMATIONAL_BG_LEVEL_3 = "informational-bg-basic-level-3", t.INFORMATIONAL_BG_TRANSPARENT_SEMI = "informational-bg-basic-transparent-semi", t.INFORMATIONAL_BG_TRANSPARENT_FULL = "informational-bg-basic-transparent-full", t))(he || {});
-const mn = Object.entries(he).map(([, t]) => t), bn = Object.entries(pe).map(([, t]) => t);
-var me = /* @__PURE__ */ ((t) => (t.CRITICAL = "critical", t.INFORMATIONAL = "informational", t.WARNING = "warning", t.SUCCESSFUL = "successful", t))(me || {});
-const gn = Object.entries(me).map(([, t]) => t), Ae = {
+}), ee = "OVERWRITE_DEFAULT_ID", le = "LABEL SHOULD BE SET", ce = " ", K = "-message", J = "-valid-message", Q = "-invalid-message", se = "-placeholder", ue = "-datalist", Z = "TODO: Add a validMessage", x = "TODO: Add an invalidMessage", $e = "Back", Le = "BurgerMenu", Ee = "brand", Ne = 4, ve = "Close Button", ct = "density", vt = "color";
+var fe = /* @__PURE__ */ ((i) => (i.FUNCTIONAL = "functional", i.REGULAR = "regular", i.EXPRESSIVE = "expressive", i))(fe || {});
+const ft = Object.entries(fe).map(([, i]) => i);
+var pe = /* @__PURE__ */ ((i) => (i.PRIMARY = "primary", i))(pe || {}), he = /* @__PURE__ */ ((i) => (i.NEUTRAL_BG_LEVEL_1 = "neutral-bg-basic-level-1", i.NEUTRAL_BG_LEVEL_2 = "neutral-bg-basic-level-2", i.NEUTRAL_BG_LEVEL_3 = "neutral-bg-basic-level-3", i.NEUTRAL_BG_TRANSPARENT_SEMI = "neutral-bg-basic-transparent-semi", i.NEUTRAL_BG_TRANSPARENT_FULL = "neutral-bg-basic-transparent-full", i.BRAND_BG_LEVEL_1 = "brand-bg-basic-level-1", i.BRAND_BG_LEVEL_2 = "brand-bg-basic-level-2", i.BRAND_BG_LEVEL_3 = "brand-bg-basic-level-3", i.BRAND_BG_TRANSPARENT_SEMI = "brand-bg-basic-transparent-semi", i.BRAND_BG_TRANSPARENT_FULL = "brand-bg-basic-transparent-full", i.SUCCESSFUL_BG_LEVEL_1 = "successful-bg-basic-level-1", i.SUCCESSFUL_BG_LEVEL_2 = "successful-bg-basic-level-2", i.SUCCESSFUL_BG_LEVEL_3 = "successful-bg-basic-level-3", i.SUCCESSFUL_BG_TRANSPARENT_SEMI = "successful-bg-basic-transparent-semi", i.SUCCESSFUL_BG_TRANSPARENT_FULL = "successful-bg-basic-transparent-full", i.CRITICAL_BG_LEVEL_1 = "critical-bg-basic-level-1", i.CRITICAL_BG_LEVEL_2 = "critical-bg-basic-level-2", i.CRITICAL_BG_LEVEL_3 = "critical-bg-basic-level-3", i.CRITICAL_BG_TRANSPARENT_SEMI = "critical-bg-basic-transparent-semi", i.CRITICAL_BG_TRANSPARENT_Full = "critical-bg-basic-transparent-full", i.WARNING_BG_LEVEL_1 = "warning-bg-basic-level-1", i.WARNING_BG_LEVEL_2 = "warning-bg-basic-level-2", i.WARNING_BG_LEVEL_3 = "warning-bg-basic-level-3", i.WARNING_BG_TRANSPARENT_SEMI = "warning-bg-basic-transparent-semi", i.WARNING_BG_TRANSPARENT_FULL = "warning-bg-basic-transparent-full", i.INFORMATIONAL_BG_LEVEL_1 = "informational-bg-basic-level-1", i.INFORMATIONAL_BG_LEVEL_2 = "informational-bg-basic-level-2", i.INFORMATIONAL_BG_LEVEL_3 = "informational-bg-basic-level-3", i.INFORMATIONAL_BG_TRANSPARENT_SEMI = "informational-bg-basic-transparent-semi", i.INFORMATIONAL_BG_TRANSPARENT_FULL = "informational-bg-basic-transparent-full", i))(he || {});
+const pt = Object.entries(he).map(([, i]) => i), ht = Object.entries(pe).map(([, i]) => i);
+var me = /* @__PURE__ */ ((i) => (i.CRITICAL = "critical", i.INFORMATIONAL = "informational", i.WARNING = "warning", i.SUCCESSFUL = "successful", i))(me || {});
+const mt = Object.entries(me).map(([, i]) => i), Ae = {
   width: 390,
   height: 884
 }, Fe = {
   width: 1920,
   height: 1280
-}, yn = [{
+}, bt = [{
   name: "desktop",
   ...Fe
 }, {
@@ -158,7 +158,7 @@ const gn = Object.entries(me).map(([, t]) => t), Ae = {
 }, {
   name: "mobile",
   ...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({
+}], Te = ["id", "aria-live", "data-semantic", "data-variant", "data-icon", "data-hide-icon", "data-link-variant"], Ce = { key: 0 }, Se = { key: 1 }, gt = /* @__PURE__ */ A({
   __name: "notification",
   props: {
     ariaLive: { default: void 0 },
@@ -188,33 +188,33 @@ const gn = Object.entries(me).map(([, t]) => t), Ae = {
     showIcon: { type: Boolean, default: void 0 },
     text: { default: void 0 }
   },
-  setup(t) {
-    const n = t, d = u(null);
+  setup(i) {
+    const t = i, o = u(null);
     function e(a) {
-      n.onClose && n.onClose();
+      t.onClose && t.onClose();
     }
-    return (a, c) => (m(), g("article", {
+    return (a, v) => (m(), g("article", {
       ref_key: "_ref",
-      ref: d,
+      ref: o,
       id: a.id,
-      class: N(v(A)("db-notification", n.class)),
+      class: E(f(N)("db-notification", t.class)),
       "aria-live": a.ariaLive,
       "data-semantic": a.semantic,
       "data-variant": a.variant,
       "data-icon": a.icon,
-      "data-hide-icon": v(P)(a.showIcon),
+      "data-hide-icon": f(P)(a.showIcon),
       "data-link-variant": a.linkVariant
     }, [
       w(a.$slots, "image"),
-      v(q)(a.headline, a.showHeadline) ? (m(), g("header", Se, k(a.headline), 1)) : M("", !0),
+      f(q)(a.headline, a.showHeadline) ? (m(), g("header", Ce, k(a.headline), 1)) : M("", !0),
       I("p", null, [
-        a.text ? (m(), g(C, { key: 0 }, [
+        a.text ? (m(), g(S, { key: 0 }, [
           L(k(a.text), 1)
         ], 64)) : w(a.$slots, "default", { key: 1 })
       ]),
-      v(q)(a.timestamp, a.showTimestamp) ? (m(), g("span", Ce, k(a.timestamp), 1)) : M("", !0),
+      f(q)(a.timestamp, a.showTimestamp) ? (m(), g("span", Se, k(a.timestamp), 1)) : M("", !0),
       w(a.$slots, "link"),
-      a.closeable ? (m(), X(de, {
+      a.closeable ? (m(), X(oe, {
         key: 2,
         icon: "cross",
         variant: "ghost",
@@ -224,13 +224,13 @@ const gn = Object.entries(me).map(([, t]) => t), Ae = {
         onClick: (l) => e()
       }, {
         default: R(() => [
-          L(k(a.closeButtonText ?? v(ce)), 1)
+          L(k(a.closeButtonText ?? f(ve)), 1)
         ]),
         _: 1
       }, 8, ["id", "onClick"])) : M("", !0)
     ], 10, Te));
   }
-}), De = ["id", "data-semantic", "data-size", "data-emphasis", "data-placement", "data-label"], kn = /* @__PURE__ */ E({
+}), De = ["id", "data-semantic", "data-size", "data-emphasis", "data-placement", "data-label"], yt = /* @__PURE__ */ A({
   __name: "badge",
   props: {
     placement: { default: void 0 },
@@ -246,43 +246,43 @@ const gn = Object.entries(me).map(([, t]) => t), Ae = {
     emphasis: { default: void 0 },
     text: { default: void 0 }
   },
-  setup(t) {
-    const n = t, d = u(!1), e = u(null);
+  setup(i) {
+    const t = i, o = u(!1), e = u(null);
     return U(() => {
-      d.value = !0;
+      o.value = !0;
     }), z(
-      () => [e.value, d.value],
+      () => [e.value, o.value],
       () => {
         var a;
-        if (e.value && d.value && (a = n.placement) != null && a.startsWith("corner")) {
-          let c = e.value.parentElement;
-          c && c.localName.includes("badge") && (c = c.parentElement), c && c.setAttribute("data-has-badge", "true");
+        if (e.value && o.value && (a = t.placement) != null && a.startsWith("corner")) {
+          let v = e.value.parentElement;
+          v && v.localName.includes("badge") && (v = v.parentElement), v && v.setAttribute("data-has-badge", "true");
         }
       },
       {
         immediate: !0,
         flush: "post"
       }
-    ), (a, c) => {
+    ), (a, v) => {
       var l;
       return m(), g("span", {
         ref_key: "_ref",
         ref: e,
         id: a.id,
-        class: N(v(A)("db-badge", n.class)),
+        class: E(f(N)("db-badge", t.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 ?? v(le))
+        "data-label": ((l = a.placement) == null ? void 0 : l.startsWith("corner")) && (a.label ?? f(le))
       }, [
-        a.text ? (m(), g(C, { key: 0 }, [
+        a.text ? (m(), g(S, { key: 0 }, [
           L(k(a.text), 1)
         ], 64)) : w(a.$slots, "default", { key: 1 })
       ], 10, De);
     };
   }
-}), Me = ["data-icon", "data-hide-icon", "id"], wn = /* @__PURE__ */ E({
+}), Me = ["data-icon", "data-hide-icon", "id"], Bt = /* @__PURE__ */ A({
   __name: "brand",
   props: {
     hideLogo: { type: Boolean, default: void 0 },
@@ -296,22 +296,22 @@ const gn = Object.entries(me).map(([, t]) => t), Ae = {
     showIcon: { type: Boolean, default: void 0 },
     text: { default: void 0 }
   },
-  setup(t) {
-    const n = t, d = u(null);
+  setup(i) {
+    const t = i, o = u(null);
     return (e, a) => (m(), g("div", {
       ref_key: "_ref",
-      ref: d,
-      "data-icon": e.hideLogo ? "none" : e.icon ?? v(Ee),
-      "data-hide-icon": v(P)(e.showIcon),
+      ref: o,
+      "data-icon": e.hideLogo ? "none" : e.icon ?? f(Ee),
+      "data-hide-icon": f(P)(e.showIcon),
       id: e.id,
-      class: N(v(A)("db-brand", n.class))
+      class: E(f(N)("db-brand", t.class))
     }, [
-      e.text ? (m(), g(C, { key: 0 }, [
+      e.text ? (m(), g(S, { key: 0 }, [
         L(k(e.text), 1)
       ], 64)) : w(e.$slots, "default", { key: 1 })
     ], 10, Me));
   }
-}), ze = ["id", "data-behavior", "data-elevation-level", "data-spacing", "role", "tabIndex"], In = /* @__PURE__ */ E({
+}), ze = ["id", "data-behavior", "data-elevation-level", "data-spacing", "role", "tabIndex"], kt = /* @__PURE__ */ A({
   __name: "card",
   props: {
     behavior: { default: void 0 },
@@ -325,29 +325,29 @@ const gn = Object.entries(me).map(([, t]) => t), Ae = {
     onClick: { type: Function, default: void 0 },
     spacing: { default: void 0 }
   },
-  setup(t) {
-    const n = t, d = u(null);
+  setup(i) {
+    const t = i, o = u(null);
     function e(a) {
-      n.onClick && n.onClick(a);
+      t.onClick && t.onClick(a);
     }
-    return (a, c) => (m(), g("div", {
+    return (a, v) => (m(), g("div", {
       ref_key: "_ref",
-      ref: d,
+      ref: o,
       id: a.id,
-      class: N(v(A)("db-card", n.class)),
+      class: E(f(N)("db-card", t.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: c[0] || (c[0] = async (l) => e(l))
+      onClick: v[0] || (v[0] = async (l) => e(l))
     }, [
       w(a.$slots, "default")
     ], 10, ze));
   }
-}), ae = (t, n, d = "value") => {
-  t(`update:${d}`, n.target[d]);
-}, Re = ["id", "data-icon", "data-semantic", "data-size", "data-hide-icon-before"], W = /* @__PURE__ */ E({
+}), ae = (i, t, o = "value") => {
+  i(`update:${o}`, t.target[o]);
+}, Re = ["id", "data-icon", "data-semantic", "data-size", "data-hide-icon-before"], W = /* @__PURE__ */ A({
   __name: "infotext",
   props: {
     children: { default: void 0 },
@@ -362,19 +362,19 @@ const gn = Object.entries(me).map(([, t]) => t), Ae = {
     showIcon: { type: Boolean, default: void 0 },
     text: { default: void 0 }
   },
-  setup(t) {
-    const n = t, d = u(null);
+  setup(i) {
+    const t = i, o = u(null);
     return (e, a) => (m(), g("span", {
       ref_key: "_ref",
-      ref: d,
+      ref: o,
       id: e.id,
-      class: N(v(A)("db-infotext", n.class)),
+      class: E(f(N)("db-infotext", t.class)),
       "data-icon": e.icon,
       "data-semantic": e.semantic,
       "data-size": e.size,
-      "data-hide-icon-before": v(P)(e.showIcon ?? !0)
+      "data-hide-icon-before": f(P)(e.showIcon ?? !0)
     }, [
-      e.text ? (m(), g(C, { key: 0 }, [
+      e.text ? (m(), g(S, { key: 0 }, [
         L(k(e.text), 1)
       ], 64)) : w(e.$slots, "default", { key: 1 })
     ], 10, Re));
@@ -382,7 +382,7 @@ const gn = Object.entries(me).map(([, t]) => t), Ae = {
 }), Ue = ["data-size", "data-hide-label"], Pe = ["for"], Ve = ["aria-invalid", "data-custom-validity", "id", "name", "checked", "disabled", "value", "required", "aria-describedby"], Ge = {
   "data-visually-hidden": "true",
   role: "status"
-}, _n = /* @__PURE__ */ E({
+}, wt = /* @__PURE__ */ A({
   __name: "checkbox",
   props: {
     indeterminate: { type: Boolean, default: void 0 },
@@ -418,18 +418,18 @@ const gn = Object.entries(me).map(([, t]) => t), Ae = {
     size: { default: void 0 }
   },
   emits: ["update:checked"],
-  setup(t, { emit: n }) {
-    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);
+  setup(i, { emit: t }) {
+    const o = t, e = i, a = u(!1), v = u(void 0), l = u(void 0), p = u(void 0), d = u(void 0), h = u(""), n = u(""), B = u(null);
     U(() => {
       a.value = !0;
-      const f = e.id ?? `checkbox-${G()}`;
-      c.value = f, l.value = f + K, p.value = f + J, i.value = f + Q;
+      const c = e.id ?? `checkbox-${G()}`;
+      v.value = c, l.value = c + K, p.value = c + J, d.value = c + Q;
     }), z(
-      () => [c.value],
+      () => [v.value],
       () => {
-        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);
+        if (v.value) {
+          const c = v.value + K;
+          l.value = c, p.value = v.value + J, d.value = v.value + Q, q(e.message, e.showMessage) && (h.value = c);
         }
       },
       {
@@ -455,51 +455,51 @@ const gn = Object.entries(me).map(([, t]) => t), Ae = {
         flush: "post"
       }
     );
-    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 $(c) {
+      var s, y, r;
+      e.onChange && e.onChange(c), e.change && e.change(c), ae(o, c, "checked"), !((s = B.value) != null && s.validity.valid) || e.validation === "invalid" ? (h.value = d.value, Y() && (n.value = e.invalidMessage ?? ((y = B.value) == null ? void 0 : y.validationMessage) ?? x, H(() => n.value = "", 1e3))) : e.validation === "valid" || (r = B.value) != null && r.validity.valid && e.required ? (h.value = p.value, Y() && (n.value = e.validMessage ?? Z, H(() => n.value = "", 1e3))) : q(e.message, e.showMessage) ? h.value = l.value : h.value = "";
     }
-    function D(f) {
-      e.onBlur && e.onBlur(f), e.blur && e.blur(f);
+    function D(c) {
+      e.onBlur && e.onBlur(c), e.blur && e.blur(c);
     }
-    function _(f) {
-      e.onFocus && e.onFocus(f), e.focus && e.focus(f);
+    function _(c) {
+      e.onFocus && e.onFocus(c), e.focus && e.focus(c);
     }
-    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)
+    return (c, s) => (m(), g("div", {
+      class: E(f(N)("db-checkbox", e.class)),
+      "data-size": c.size,
+      "data-hide-label": f(P)(c.showLabel)
     }, [
-      I("label", { for: c.value }, [
+      I("label", { for: v.value }, [
         I("input", {
           type: "checkbox",
-          "aria-invalid": f.validation === "invalid",
-          "data-custom-validity": f.validation,
+          "aria-invalid": c.validation === "invalid",
+          "data-custom-validity": c.validation,
           ref_key: "_ref",
           ref: B,
-          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)),
+          id: v.value,
+          name: c.name,
+          checked: c.checked,
+          disabled: c.disabled,
+          value: c.value,
+          required: c.required,
+          onChange: s[0] || (s[0] = async (y) => $(y)),
+          onBlur: s[1] || (s[1] = async (y) => D(y)),
+          onFocus: s[2] || (s[2] = async (y) => _(y)),
           "aria-describedby": h.value
         }, null, 40, Ve),
-        f.label ? (m(), g(C, { key: 0 }, [
-          L(k(f.label), 1)
-        ], 64)) : w(f.$slots, "default", { key: 1 })
+        c.label ? (m(), g(S, { key: 0 }, [
+          L(k(c.label), 1)
+        ], 64)) : w(c.$slots, "default", { key: 1 })
       ], 8, Pe),
-      v(q)(f.message, f.showMessage) ? (m(), X(W, {
+      f(q)(c.message, c.showMessage) ? (m(), X(W, {
         key: 0,
         size: "small",
-        icon: f.messageIcon,
+        icon: c.messageIcon,
         id: l.value
       }, {
         default: R(() => [
-          L(k(f.message), 1)
+          L(k(c.message), 1)
         ]),
         _: 1
       }, 8, ["icon", "id"])) : M("", !0),
@@ -509,27 +509,27 @@ const gn = Object.entries(me).map(([, t]) => t), Ae = {
         id: p.value
       }, {
         default: R(() => [
-          L(k(f.validMessage ?? v(Z)), 1)
+          L(k(c.validMessage ?? f(Z)), 1)
         ]),
         _: 1
       }, 8, ["id"]),
       O(W, {
         size: "small",
         semantic: "critical",
-        id: i.value
+        id: d.value
       }, {
         default: R(() => {
           var y;
           return [
-            L(k(f.invalidMessage ?? ((y = B.value) == null ? void 0 : y.validationMessage) ?? v(x)), 1)
+            L(k(c.invalidMessage ?? ((y = B.value) == null ? void 0 : y.validationMessage) ?? f(x)), 1)
           ];
         }),
         _: 1
       }, 8, ["id"]),
-      I("span", Ge, k(s.value), 1)
+      I("span", Ge, k(n.value), 1)
     ], 10, Ue));
   }
-}), qe = ["id", "data-margin", "data-variant", "data-emphasis", "data-width"], $n = /* @__PURE__ */ E({
+}), qe = ["id", "data-margin", "data-variant", "data-emphasis", "data-width"], It = /* @__PURE__ */ A({
   __name: "divider",
   props: {
     margin: { default: void 0 },
@@ -543,20 +543,20 @@ const gn = Object.entries(me).map(([, t]) => t), Ae = {
     emphasis: { default: void 0 },
     width: { default: void 0 }
   },
-  setup(t) {
-    const n = t, d = u(null);
+  setup(i) {
+    const t = i, o = u(null);
     return (e, a) => (m(), g("div", {
       ref_key: "_ref",
-      ref: d,
+      ref: o,
       id: e.id,
       "data-margin": e.margin,
       "data-variant": e.variant,
       "data-emphasis": e.emphasis,
       "data-width": e.width,
-      class: N(v(A)("db-divider", n.class))
+      class: E(f(N)("db-divider", t.class))
     }, null, 10, qe));
   }
-}), 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({
+}), 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__ */ A({
   __name: "drawer",
   props: {
     backdrop: { default: void 0 },
@@ -577,14 +577,14 @@ const gn = Object.entries(me).map(([, t]) => t), Ae = {
     width: { default: void 0 },
     spacing: { default: void 0 }
   },
-  setup(t) {
-    const n = t, d = u(null), e = u(null);
+  setup(i) {
+    const t = i, o = u(null), e = u(null);
     U(() => {
-      c();
+      v();
     }), z(
-      () => [n.open],
+      () => [t.open],
       () => {
-        c();
+        v();
       },
       {
         immediate: !0,
@@ -592,30 +592,30 @@ const gn = Object.entries(me).map(([, t]) => t), Ae = {
       }
     );
     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);
+      l.key === "Escape" && l.preventDefault(), (l === "close" || l.key === "Escape" || l.target.nodeName === "DIALOG" && l.type === "click" && t.backdrop !== "none") && t.onClose && t.onClose(l);
     }
-    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(() => {
+    function v() {
+      o.value && (t.open && !o.value.open && (e.value && (e.value.hidden = !1), t.backdrop === "none" || t.variant === "inside" ? o.value.show() : o.value.showModal()), !t.open && o.value.open && (e.value && (e.value.hidden = !0), H(() => {
         var l;
-        e.value && (e.value.hidden = !1), (l = d.value) == null || l.close();
+        e.value && (e.value.hidden = !1), (l = o.value) == null || l.close();
       }, 401)));
     }
     return (l, p) => (m(), g("dialog", {
       class: "db-drawer",
       id: l.id,
       ref_key: "_ref",
-      ref: d,
-      onClick: p[0] || (p[0] = async (i) => {
-        a(i);
+      ref: o,
+      onClick: p[0] || (p[0] = async (d) => {
+        a(d);
       }),
-      onKeydown: p[1] || (p[1] = async (i) => a(i)),
+      onKeydown: p[1] || (p[1] = async (d) => a(d)),
       "data-backdrop": l.backdrop,
       "data-variant": l.variant
     }, [
       I("article", {
         ref_key: "dialogContainerRef",
         ref: e,
-        class: N(v(A)("db-drawer-container", n.class)),
+        class: E(f(N)("db-drawer-container", t.class)),
         "data-spacing": l.spacing,
         "data-width": l.width,
         "data-direction": l.direction,
@@ -625,16 +625,16 @@ const gn = Object.entries(me).map(([, t]) => t), Ae = {
           I("div", He, [
             w(l.$slots, "drawer-header")
           ]),
-          O(de, {
+          O(oe, {
             class: "button-close-drawer",
             icon: "cross",
             variant: "ghost",
             id: l.closeButtonId,
             noText: !0,
-            onClick: (i) => a("close")
+            onClick: (d) => a("close")
           }, {
             default: R(() => [
-              L(k(l.closeButtonText ?? v(ce)), 1)
+              L(k(l.closeButtonText ?? f(ve)), 1)
             ]),
             _: 1
           }, 8, ["id", "onClick"])
@@ -645,15 +645,15 @@ const gn = Object.entries(me).map(([, t]) => t), Ae = {
       ], 10, We)
     ], 40, Oe));
   }
-}), be = (t) => {
-  var d, e;
+}), be = (i) => {
+  var o, 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")));
+    target: t
+  } = i;
+  return !!(!((o = t == null ? void 0 : t.classList) != null && o.contains("db-navigation-item-expand-button")) && ((e = t == null ? void 0 : t.parentElement) != null && e.classList.contains("db-navigation-item")));
 };
 class Ke {
-  constructor(n, d) {
+  constructor(t, o) {
     j(this, "element");
     j(this, "subNavigation");
     j(this, "parentSubNavigation", null);
@@ -662,25 +662,25 @@ class Ke {
     j(this, "mouseX", 0);
     j(this, "mouseY", 0);
     var e;
-    this.element = n, this.subNavigation = d, !(!this.element || !this.subNavigation) && (this.parentSubNavigation = (e = this.element) == null ? void 0 : e.closest(".db-sub-navigation"), this.parentSubNavigation && !this.element.closest(".db-drawer") && this.init());
+    this.element = t, this.subNavigation = o, !(!this.element || !this.subNavigation) && (this.parentSubNavigation = (e = this.element) == null ? void 0 : e.closest(".db-sub-navigation"), this.parentSubNavigation && !this.element.closest(".db-drawer") && this.init());
   }
   init() {
-    var d, e;
-    const n = ((d = this.parentSubNavigation) == null ? void 0 : d.getBoundingClientRect().width) ?? 0;
-    (e = this.element) == null || e.style.setProperty("--db-navigation-item-inline-size", `${n}px`), this.initialized = !0;
+    var o, e;
+    const t = ((o = this.parentSubNavigation) == null ? void 0 : o.getBoundingClientRect().width) ?? 0;
+    (e = this.element) == null || e.style.setProperty("--db-navigation-item-inline-size", `${t}px`), this.initialized = !0;
   }
   enableFollow() {
     var a;
     if (!this.initialized || this.triangleData || !this.element || !this.subNavigation)
       return;
-    const n = se(this.subNavigation), d = this.element.getBoundingClientRect(), e = ((a = this.parentSubNavigation) == null ? void 0 : a.getBoundingClientRect().width) ?? 0;
+    const t = ne(this.subNavigation), o = this.element.getBoundingClientRect(), e = ((a = this.parentSubNavigation) == null ? void 0 : a.getBoundingClientRect().width) ?? 0;
     this.triangleData = {
-      itemRect: d,
+      itemRect: o,
       parentElementWidth: e,
       subNavigationHeight: this.subNavigation.getBoundingClientRect().height,
-      padding: (e - d.width) / 2,
-      outsideVX: n.vx,
-      outsideVY: n.vy
+      padding: (e - o.width) / 2,
+      outsideVX: t.vx,
+      outsideVY: t.vy
     };
   }
   disableFollow() {
@@ -691,19 +691,19 @@ class Ke {
   }
   getTriangleTipY() {
     if (!this.triangleData) return 0;
-    const n = Math.max(Math.min(this.mouseY, this.triangleData.itemRect.height), 0) + this.triangleData.padding;
-    return this.triangleData.outsideVY === "bottom" ? n + (this.triangleData.subNavigationHeight - this.triangleData.padding * 2 - this.triangleData.itemRect.height) : n;
+    const t = Math.max(Math.min(this.mouseY, this.triangleData.itemRect.height), 0) + this.triangleData.padding;
+    return this.triangleData.outsideVY === "bottom" ? t + (this.triangleData.subNavigationHeight - this.triangleData.padding * 2 - this.triangleData.itemRect.height) : t;
   }
   hasMouseEnteredSubNavigation() {
     if (!this.triangleData)
       return !1;
-    const n = this.triangleData.outsideVX === "right";
-    return !!(n && this.mouseX < -1 * this.triangleData.padding || !n && this.mouseX > this.triangleData.parentElementWidth - this.triangleData.padding);
+    const t = this.triangleData.outsideVX === "right";
+    return !!(t && this.mouseX < -1 * this.triangleData.padding || !t && this.mouseX > this.triangleData.parentElementWidth - this.triangleData.padding);
   }
-  getTriangleCoordinates(n) {
+  getTriangleCoordinates(t) {
     if (!this.triangleData)
       return;
-    if (n === "fill-gap") {
+    if (t === "fill-gap") {
       const l = `${this.triangleData.itemRect.height + 2 * this.triangleData.padding}px`, p = `${this.triangleData.parentElementWidth - this.triangleData.padding}px`;
       return {
         lb: `${p} ${l}`,
@@ -712,23 +712,23 @@ class Ke {
         rb: `100% ${l}`
       };
     }
-    const d = this.getTriangleTipX(), e = this.getTriangleTipY(), a = `${d}px ${e}px`, c = `${d}px ${e}px`;
+    const o = this.getTriangleTipX(), e = this.getTriangleTipY(), a = `${o}px ${e}px`, v = `${o}px ${e}px`;
     return {
       lb: a,
-      lt: c,
+      lt: v,
       rt: "100% 0",
       rb: "100% 100%"
     };
   }
-  followByMouseEvent(n) {
+  followByMouseEvent(t) {
     if (!this.initialized || !this.triangleData || !this.element || !this.subNavigation)
       return;
-    this.mouseX = n.clientX - this.triangleData.itemRect.left, this.mouseY = n.clientY - this.triangleData.itemRect.top;
-    const d = this.hasMouseEnteredSubNavigation(), e = this.getTriangleCoordinates(d ? "fill-gap" : "safe-triangle");
-    e && (this.element.style.setProperty("--db-navigation-item-clip-path", `polygon(${e.lb}, ${e.lt}, ${e.rt}, ${e.rb})`), d && (this.triangleData = void 0));
+    this.mouseX = t.clientX - this.triangleData.itemRect.left, this.mouseY = t.clientY - this.triangleData.itemRect.top;
+    const o = this.hasMouseEnteredSubNavigation(), e = this.getTriangleCoordinates(o ? "fill-gap" : "safe-triangle");
+    e && (this.element.style.setProperty("--db-navigation-item-clip-path", `polygon(${e.lb}, ${e.lt}, ${e.rt}, ${e.rb})`), o && (this.triangleData = void 0));
   }
 }
-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({
+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" }, ta = { class: "db-header-brand-container" }, ia = { class: "db-header-navigation-container" }, oa = { class: "db-header-navigation" }, da = { class: "db-header-primary-action" }, la = { class: "db-header-action-container" }, na = { class: "db-header-burger-menu-container" }, sa = { class: "db-header-secondary-action" }, _t = /* @__PURE__ */ A({
   __name: "header",
   props: {
     brand: {},
@@ -747,16 +747,16 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     onToggle: { type: Function, default: void 0 },
     width: { default: void 0 }
   },
-  setup(t) {
-    const n = t, d = u(ee), e = u(!1), a = u(!1), c = u(null);
+  setup(i) {
+    const t = i, o = u(ee), e = u(!1), a = u(!1), v = u(null);
     U(() => {
-      e.value = !0, d.value = n.id || "header-" + G();
+      e.value = !0, o.value = t.id || "header-" + G();
     }), z(
       () => [e.value],
       () => {
-        if (e.value && document && d.value && n.forceMobile) {
-          const i = document.getElementById(d.value);
-          i && re(i, {
+        if (e.value && document && o.value && t.forceMobile) {
+          const d = document.getElementById(o.value);
+          d && re(d, {
             key: "data-force-mobile",
             value: "true"
           }), a.value = !0;
@@ -768,82 +768,82 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
       }
     );
     function l() {
-      n.onToggle && n.onToggle(!n.drawerOpen);
+      t.onToggle && t.onToggle(!t.drawerOpen);
     }
-    function p(i) {
-      be(i) && l();
+    function p(d) {
+      be(d) && l();
     }
-    return (i, h) => (m(), g("header", {
+    return (d, h) => (m(), g("header", {
       ref_key: "_ref",
-      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
+      ref: v,
+      class: E(f(N)("db-header", t.class)),
+      id: o.value,
+      "data-width": d.width,
+      "data-on-forcing-mobile": d.forceMobile && !a.value
     }, [
       O(Ye, {
         class: "db-header-drawer",
         spacing: "small",
         rounded: !0,
-        open: i.drawerOpen,
+        open: d.drawerOpen,
         onClose: () => l()
       }, {
         default: R(() => [
           I("div", Qe, [
             I("div", {
               class: "db-header-navigation",
-              onClick: h[0] || (h[0] = async (s) => p(s))
+              onClick: h[0] || (h[0] = async (n) => p(n))
             }, [
-              w(i.$slots, "default")
+              w(d.$slots, "default")
             ]),
             I("div", Ze, [
-              w(i.$slots, "meta-navigation")
+              w(d.$slots, "meta-navigation")
             ])
           ]),
           I("div", xe, [
-            w(i.$slots, "secondary-action")
+            w(d.$slots, "secondary-action")
           ])
         ]),
         _: 3
       }, 8, ["open", "onClose"]),
       I("div", ea, [
-        w(i.$slots, "meta-navigation")
+        w(d.$slots, "meta-navigation")
       ]),
       I("div", aa, [
-        I("div", na, [
-          w(i.$slots, "brand")
-        ]),
         I("div", ta, [
-          I("div", da, [
-            w(i.$slots, "default")
+          w(d.$slots, "brand")
+        ]),
+        I("div", ia, [
+          I("div", oa, [
+            w(d.$slots, "default")
           ]),
-          I("div", ia, [
-            w(i.$slots, "primary-action")
+          I("div", da, [
+            w(d.$slots, "primary-action")
           ])
         ]),
         I("div", la, [
-          I("div", sa, [
-            O(de, {
+          I("div", na, [
+            O(oe, {
               icon: "menu",
               variant: "ghost",
-              id: d.value + "-burger-menu",
+              id: o.value + "-burger-menu",
               noText: !0,
               onClick: () => l()
             }, {
               default: R(() => [
-                L(k(i.burgerMenuLabel ?? v(Le)), 1)
+                L(k(d.burgerMenuLabel ?? f(Le)), 1)
               ]),
               _: 1
             }, 8, ["id", "onClick"])
           ]),
-          I("div", oa, [
-            w(i.$slots, "secondary-action")
+          I("div", sa, [
+            w(d.$slots, "secondary-action")
           ])
         ])
       ])
     ], 10, Je));
   }
-}), ua = ["id", "data-icon", "data-icon-weight", "data-icon-variant"], En = /* @__PURE__ */ E({
+}), ua = ["id", "data-icon", "data-icon-weight", "data-icon-variant"], $t = /* @__PURE__ */ A({
   __name: "icon",
   props: {
     variant: { default: void 0 },
@@ -857,27 +857,27 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     icon: { default: void 0 },
     text: { default: void 0 }
   },
-  setup(t) {
-    const n = t, d = u(null);
+  setup(i) {
+    const t = i, o = u(null);
     return (e, a) => (m(), g("span", {
       "aria-hidden": "true",
       ref_key: "_ref",
-      ref: d,
+      ref: o,
       id: e.id,
-      class: N(v(A)("db-icon", n.class)),
+      class: E(f(N)("db-icon", t.class)),
       "data-icon": e.icon,
       "data-icon-weight": e.weight,
       "data-icon-variant": e.variant
     }, [
-      e.text ? (m(), g(C, { key: 0 }, [
+      e.text ? (m(), g(S, { key: 0 }, [
         L(k(e.text), 1)
       ], 64)) : w(e.$slots, "default", { key: 1 })
     ], 10, ua));
   }
-}), ra = ["data-variant", "data-hide-label", "data-hide-icon", "data-icon", "data-icon-after", "data-hide-icon-after"], fa = ["for"], ca = ["aria-invalid", "data-custom-validity", "id", "name", "type", "placeholder", "disabled", "required", "step", "value", "maxLength", "minLength", "max", "min", "readOnly", "form", "pattern", "size", "autoComplete", "autoFocus", "list", "aria-describedby"], va = ["id"], pa = ["value"], ha = {
+}), ra = ["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", "size", "autoComplete", "autoFocus", "list", "aria-describedby"], fa = ["id"], pa = ["value"], ha = {
   "data-visually-hidden": "true",
   role: "status"
-}, Nn = /* @__PURE__ */ E({
+}, Lt = /* @__PURE__ */ A({
   __name: "input",
   props: {
     dataList: { default: void 0 },
@@ -926,17 +926,17 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     size: { default: void 0 }
   },
   emits: ["update:value"],
-  setup(t, { emit: n }) {
-    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);
+  setup(i, { emit: t }) {
+    const o = t, e = i, a = u(void 0), v = u(void 0), l = u(void 0), p = u(void 0), d = u(void 0), h = u(""), n = u(""), B = u(""), $ = u(null);
     U(() => {
       const r = e.id ?? `input-${G()}`;
-      a.value = r, c.value = r + K, l.value = r + J, p.value = r + Q, i.value = r + ue;
+      a.value = r, v.value = r + K, l.value = r + J, p.value = r + Q, d.value = r + ue;
     }), z(
       () => [a.value],
       () => {
         if (a.value) {
           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);
+          v.value = r, l.value = a.value + J, p.value = a.value + Q, d.value = e.dataListId ?? a.value + ue, q(e.message, e.showMessage) && (h.value = r);
         }
       },
       {
@@ -946,7 +946,7 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     ), z(
       () => [e.value],
       () => {
-        s.value = e.value;
+        n.value = e.value;
       },
       {
         immediate: !0,
@@ -954,16 +954,16 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
       }
     );
     function D(r) {
-      s.value = r.target.value, e.onInput && e.onInput(r), e.input && e.input(r);
+      n.value = r.target.value, e.onInput && e.onInput(r), e.input && e.input(r);
     }
     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 = "";
+      var T, b, C;
+      e.onChange && e.onChange(r), e.change && e.change(r), ae(o, 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" || (C = $.value) != null && C.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 = v.value : h.value = "";
     }
-    function f(r) {
+    function c(r) {
       e.onBlur && e.onBlur(r), e.blur && e.blur(r);
     }
-    function o(r) {
+    function s(r) {
       e.onFocus && e.onFocus(r), e.focus && e.focus(r);
     }
     function y(r) {
@@ -975,15 +975,15 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
       );
     }
     return (r, T) => (m(), g("div", {
-      class: N(v(A)("db-input", e.class)),
+      class: E(f(N)("db-input", e.class)),
       "data-variant": r.variant,
-      "data-hide-label": v(P)(r.showLabel),
-      "data-hide-icon": v(P)(r.showIcon),
+      "data-hide-label": f(P)(r.showLabel),
+      "data-hide-icon": f(P)(r.showIcon),
       "data-icon": r.icon,
       "data-icon-after": r.iconAfter,
-      "data-hide-icon-after": v(P)(r.showIcon)
+      "data-hide-icon-after": f(P)(r.showIcon)
     }, [
-      I("label", { for: a.value }, k(r.label ?? v(le)), 9, fa),
+      I("label", { for: a.value }, k(r.label ?? f(le)), 9, ca),
       I("input", {
         "aria-invalid": r.validation === "invalid",
         "data-custom-validity": r.validation,
@@ -992,11 +992,11 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         id: a.value,
         name: r.name,
         type: r.type || "text",
-        placeholder: r.placeholder ?? v(fe),
+        placeholder: r.placeholder ?? f(ce),
         disabled: r.disabled,
         required: r.required,
         step: r.step,
-        value: r.value ?? s.value,
+        value: r.value ?? n.value,
         maxLength: r.maxLength,
         minLength: r.minLength,
         max: r.max,
@@ -1009,26 +1009,26 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         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,
+        onBlur: T[2] || (T[2] = async (b) => c(b)),
+        onFocus: T[3] || (T[3] = async (b) => s(b)),
+        list: r.dataList && d.value,
         "aria-describedby": h.value
-      }, null, 40, ca),
+      }, null, 40, va),
       r.dataList ? (m(), g("datalist", {
         key: 0,
-        id: i.value
+        id: d.value
       }, [
-        (m(!0), g(C, null, te(y(r.dataList), (b) => (m(), g("option", {
-          key: i.value + "-option-" + b.value,
+        (m(!0), g(S, null, ie(y(r.dataList), (b) => (m(), g("option", {
+          key: d.value + "-option-" + b.value,
           value: b.value
         }, k(b.label), 9, pa))), 128))
-      ], 8, va)) : M("", !0),
+      ], 8, fa)) : M("", !0),
       w(r.$slots, "default"),
-      v(q)(r.message, r.showMessage) ? (m(), X(W, {
+      f(q)(r.message, r.showMessage) ? (m(), X(W, {
         key: 1,
         size: "small",
         icon: r.messageIcon,
-        id: c.value
+        id: v.value
       }, {
         default: R(() => [
           L(k(r.message), 1)
@@ -1041,7 +1041,7 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         id: l.value
       }, {
         default: R(() => [
-          L(k(r.validMessage ?? v(Z)), 1)
+          L(k(r.validMessage ?? f(Z)), 1)
         ]),
         _: 1
       }, 8, ["id"]),
@@ -1053,7 +1053,7 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         default: R(() => {
           var b;
           return [
-            L(k(r.invalidMessage ?? ((b = $.value) == null ? void 0 : b.validationMessage) ?? v(x)), 1)
+            L(k(r.invalidMessage ?? ((b = $.value) == null ? void 0 : b.validationMessage) ?? f(x)), 1)
           ];
         }),
         _: 1
@@ -1061,7 +1061,7 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
       I("span", ha, k(B.value), 1)
     ], 10, ra));
   }
-}), ma = ["id", "href", "target", "rel", "role", "hrefLang", "aria-disabled", "tabIndex", "aria-selected", "aria-label", "aria-current", "data-size", "data-hide-icon-after", "data-variant", "data-content"], An = /* @__PURE__ */ E({
+}), 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"], Et = /* @__PURE__ */ A({
   __name: "link",
   props: {
     content: { default: void 0 },
@@ -1087,44 +1087,45 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     showIcon: { type: Boolean, default: void 0 },
     text: { default: void 0 }
   },
-  setup(t) {
-    const n = t, d = u(null);
+  setup(i) {
+    const t = i, o = u(null);
     function e(a) {
-      n.onClick && n.onClick(a);
+      t.onClick && t.onClick(a);
     }
-    return (a, c) => (m(), g("a", {
+    return (a, v) => (m(), g("a", {
       ref_key: "_ref",
-      ref: d,
+      ref: o,
       id: a.id,
-      class: N(v(A)("db-link", n.class)),
+      class: E(f(N)("db-link", t.class)),
       href: a.href,
       target: a.target,
       rel: a.rel,
       role: a.role,
       hrefLang: a.hreflang,
-      "aria-disabled": v(V)(a.disabled),
+      "aria-disabled": f(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": v(P)(a.showIcon ?? !0),
+      "data-hide-icon-after": f(P)(a.showIcon ?? !0),
       "data-variant": a.variant,
       "data-content": a.content || "internal",
-      onClick: c[0] || (c[0] = async (l) => e(l))
+      onClick: v[0] || (v[0] = async (l) => e(l))
     }, [
-      a.text ? (m(), g(C, { key: 0 }, [
+      a.text ? (m(), g(S, { key: 0 }, [
         L(k(a.text), 1)
       ], 64)) : w(a.$slots, "default", { key: 1 })
     ], 10, ma));
   }
-}), ba = ["id", "data-variant", "data-fade-in", "data-fonts-loaded"], ga = { class: "db-main" }, Fn = /* @__PURE__ */ E({
+}), ba = ["id", "data-variant", "data-fade-in", "data-fonts-loaded"], Nt = /* @__PURE__ */ A({
   __name: "page",
   props: {
     documentOverflow: { default: void 0 },
     fadeIn: { type: Boolean, default: void 0 },
     footer: {},
     header: {},
+    mainClass: { default: void 0 },
     variant: { default: void 0 },
     children: { default: void 0 },
     className: { default: void 0 },
@@ -1133,31 +1134,33 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     id: { default: void 0 },
     autofocus: { type: Boolean }
   },
-  setup(t) {
-    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;
+  setup(i) {
+    const t = i, o = u(!1), e = u(null);
+    return typeof window < "u" && document && (t.documentOverflow === "hidden" || t.variant === "fixed" && t.documentOverflow !== "auto") && document.documentElement.classList.add("db-page-document"), U(() => {
+      o.value = !t.fadeIn, document && t.fadeIn ? document.fonts.ready.then(() => {
+        o.value = !0;
+      }) : o.value = !0;
     }), Be(() => {
       typeof window < "u" && document.documentElement.classList.contains("db-page-document") && document.documentElement.classList.remove("db-page-document");
-    }), (a, c) => (m(), g("div", {
+    }), (a, v) => (m(), g("div", {
       ref_key: "_ref",
       ref: e,
       id: a.id,
-      class: N(v(A)("db-page", n.class)),
+      class: E(f(N)("db-page", t.class)),
       "data-variant": a.variant,
       "data-fade-in": a.fadeIn,
-      "data-fonts-loaded": v(V)(d.value)
+      "data-fonts-loaded": f(V)(o.value)
     }, [
       w(a.$slots, "header"),
-      I("main", ga, [
+      I("main", {
+        class: E(f(N)("db-main", a.mainClass))
+      }, [
         w(a.$slots, "default")
-      ]),
+      ], 2),
       w(a.$slots, "footer")
     ], 10, ba));
   }
-}), ya = ["data-size", "data-hide-label", "for"], Ba = ["aria-invalid", "data-custom-validity", "id", "name", "checked", "disabled", "aria-describedby", "value", "required"], Tn = /* @__PURE__ */ E({
+}), ga = ["data-size", "data-hide-label", "for"], ya = ["aria-invalid", "data-custom-validity", "id", "name", "checked", "disabled", "aria-describedby", "value", "required"], At = /* @__PURE__ */ A({
   __name: "radio",
   props: {
     describedbyid: { default: void 0 },
@@ -1184,10 +1187,10 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     size: { default: void 0 }
   },
   emits: ["update:value"],
-  setup(t, { emit: n }) {
-    const d = n, e = t, a = u(!1), c = u(void 0), l = u(null);
+  setup(i, { emit: t }) {
+    const o = t, e = i, a = u(!1), v = u(void 0), l = u(null);
     U(() => {
-      a.value = !0, c.value = e.id ?? `radio-${G()}`;
+      a.value = !0, v.value = e.id ?? `radio-${G()}`;
     }), z(
       () => [a.value, l.value, e.checked],
       () => {
@@ -1198,44 +1201,44 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         flush: "post"
       }
     );
-    function p(s) {
-      e.onChange && e.onChange(s), e.change && e.change(s), ae(d, s);
+    function p(n) {
+      e.onChange && e.onChange(n), e.change && e.change(n), ae(o, n);
     }
-    function i(s) {
-      e.onBlur && e.onBlur(s), e.blur && e.blur(s);
+    function d(n) {
+      e.onBlur && e.onBlur(n), e.blur && e.blur(n);
     }
-    function h(s) {
-      e.onFocus && e.onFocus(s), e.focus && e.focus(s);
+    function h(n) {
+      e.onFocus && e.onFocus(n), e.focus && e.focus(n);
     }
-    return (s, B) => (m(), g("label", {
-      "data-size": s.size,
-      "data-hide-label": v(P)(s.showLabel),
-      class: N(v(A)("db-radio", e.class)),
-      for: c.value
+    return (n, B) => (m(), g("label", {
+      "data-size": n.size,
+      "data-hide-label": f(P)(n.showLabel),
+      class: E(f(N)("db-radio", e.class)),
+      for: v.value
     }, [
       I("input", {
         type: "radio",
-        "aria-invalid": s.validation === "invalid",
-        "data-custom-validity": s.validation,
+        "aria-invalid": n.validation === "invalid",
+        "data-custom-validity": n.validation,
         ref_key: "_ref",
         ref: l,
-        id: c.value,
-        name: s.name,
-        checked: s.checked,
-        disabled: s.disabled,
-        "aria-describedby": s.describedbyid,
-        value: s.value,
-        required: s.required,
+        id: v.value,
+        name: n.name,
+        checked: n.checked,
+        disabled: n.disabled,
+        "aria-describedby": n.describedbyid,
+        value: n.value,
+        required: n.required,
         onChange: B[0] || (B[0] = async ($) => p($)),
-        onBlur: B[1] || (B[1] = async ($) => i($)),
+        onBlur: B[1] || (B[1] = async ($) => d($)),
         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));
+      }, null, 40, ya),
+      n.label ? (m(), g(S, { key: 0 }, [
+        L(k(n.label), 1)
+      ], 64)) : w(n.$slots, "default", { key: 1 })
+    ], 10, ga));
   }
-}), ka = ["id", "data-spacing", "data-width"], Sn = /* @__PURE__ */ E({
+}), Ba = ["id", "data-spacing", "data-width"], Ft = /* @__PURE__ */ A({
   __name: "section",
   props: {
     children: { default: void 0 },
@@ -1247,25 +1250,25 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     spacing: { default: void 0 },
     width: { default: void 0 }
   },
-  setup(t) {
-    const n = t, d = u(ee), e = u(null);
+  setup(i) {
+    const t = i, o = u(ee), e = u(null);
     return U(() => {
-      d.value = n.id || "section-" + G();
-    }), (a, c) => (m(), g("section", {
+      o.value = t.id || "section-" + G();
+    }), (a, v) => (m(), g("section", {
       ref_key: "_ref",
       ref: e,
-      id: d.value,
-      class: N(v(A)("db-section", n.class)),
+      id: o.value,
+      class: E(f(N)("db-section", t.class)),
       "data-spacing": a.spacing || "medium",
       "data-width": a.width
     }, [
       w(a.$slots, "default")
-    ], 10, ka));
+    ], 10, Ba));
   }
-}), 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 = {
+}), ka = ["data-variant", "data-hide-label", "data-icon", "data-hide-icon"], wa = ["for"], Ia = ["aria-invalid", "data-custom-validity", "required", "disabled", "id", "name", "size", "value", "autocomplete", "aria-describedby"], _a = ["label"], $a = ["value", "selected", "disabled"], La = ["value", "disabled", "selected"], Ea = ["id"], Na = {
   "data-visually-hidden": "true",
   role: "status"
-}, Cn = /* @__PURE__ */ E({
+}, Tt = /* @__PURE__ */ A({
   __name: "select",
   props: {
     description: {},
@@ -1306,18 +1309,18 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     size: { default: void 0 }
   },
   emits: ["update:value"],
-  setup(t, { emit: n }) {
-    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);
+  setup(i, { emit: t }) {
+    const o = t, e = i, a = u(void 0), v = u(void 0), l = u(void 0), p = u(void 0), d = u(""), h = u(""), n = u(""), B = u(!1), $ = u(""), D = u(null);
     U(() => {
       B.value = !0;
       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;
+      a.value = b, v.value = b + K, l.value = b + J, p.value = b + Q, d.value = b + se;
     }), z(
       () => [a.value, B.value],
       () => {
         if (a.value && B.value) {
-          const b = a.value + K, S = a.value + oe;
-          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;
+          const b = a.value + K, C = a.value + se;
+          v.value = b, l.value = a.value + J, p.value = a.value + Q, d.value = C, q(e.message, e.showMessage) ? h.value = b : h.value = C, B.value = !1;
         }
       },
       {
@@ -1327,7 +1330,7 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     ), z(
       () => [e.value],
       () => {
-        s.value = e.value;
+        n.value = e.value;
       },
       {
         immediate: !0,
@@ -1337,12 +1340,12 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     function _(b) {
       e.onClick && e.onClick(b);
     }
-    function f(b) {
-      s.value = b.target.value, e.onInput && e.onInput(b), e.input && e.input(b);
+    function c(b) {
+      n.value = b.target.value, e.onInput && e.onInput(b), e.input && e.input(b);
     }
-    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 s(b) {
+      var C, F, te;
+      e.onChange && e.onChange(b), e.change && e.change(b), ae(o, b), !((C = D.value) != null && C.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" || (te = D.value) != null && te.validity.valid && e.required ? (h.value = l.value, Y() && ($.value = e.validMessage ?? Z, H(() => $.value = "", 1e3))) : q(e.message, e.showMessage) ? h.value = v.value : h.value = d.value;
     }
     function y(b) {
       e.onBlur && e.onBlur(b), e.blur && e.blur(b);
@@ -1353,14 +1356,14 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     function T(b) {
       return b.label ?? b.value.toString();
     }
-    return (b, S) => (m(), g("div", {
-      class: N(v(A)("db-select", e.class)),
+    return (b, C) => (m(), g("div", {
+      class: E(f(N)("db-select", e.class)),
       "data-variant": b.variant,
-      "data-hide-label": v(P)(b.showLabel),
+      "data-hide-label": f(P)(b.showLabel),
       "data-icon": b.icon,
-      "data-hide-icon": v(P)(b.showIcon)
+      "data-hide-icon": f(P)(b.showIcon)
     }, [
-      I("label", { for: a.value }, k(b.label ?? v(le)), 9, Ia),
+      I("label", { for: a.value }, k(b.label ?? f(le)), 9, wa),
       I("select", {
         "aria-invalid": b.validation === "invalid",
         "data-custom-validity": b.validation,
@@ -1371,43 +1374,43 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         id: a.value,
         name: b.name,
         size: b.size,
-        value: b.value ?? s.value,
+        value: b.value ?? n.value,
         autocomplete: b.autocomplete,
-        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)),
+        onInput: C[0] || (C[0] = async (F) => c(F)),
+        onClick: C[1] || (C[1] = async (F) => _(F)),
+        onChange: C[2] || (C[2] = async (F) => s(F)),
+        onBlur: C[3] || (C[3] = async (F) => y(F)),
+        onFocus: C[4] || (C[4] = async (F) => r(F)),
         "aria-describedby": h.value
       }, [
-        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 }, [
+        C[5] || (C[5] = I("option", { hidden: !0 }, null, -1)),
+        b.options ? (m(!0), g(S, { key: 0 }, ie(b.options, (F, te) => (m(), g(S, { key: te }, [
           F.options ? (m(), g("optgroup", {
             key: 0,
             label: T(F)
           }, [
-            (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),
+            (m(!0), g(S, null, ie(F.options, (de, lt) => (m(), g("option", {
+              key: de.value.toString(),
+              value: de.value,
+              selected: de.selected,
+              disabled: de.disabled
+            }, k(T(de)), 9, $a))), 128))
+          ], 8, _a)) : M("", !0),
           F.options ? M("", !0) : (m(), g("option", {
             key: 1,
             value: F.value,
             disabled: F.disabled,
             selected: F.selected
-          }, k(T(F)), 9, Ea))
+          }, k(T(F)), 9, La))
         ], 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, {
+      ], 40, Ia),
+      I("span", { id: d.value }, k(b.placeholder ?? b.label), 9, Ea),
+      f(q)(b.message, b.showMessage) ? (m(), X(W, {
         key: 0,
         size: "small",
         icon: b.messageIcon,
-        id: c.value
+        id: v.value
       }, {
         default: R(() => [
           L(k(b.message), 1)
@@ -1420,7 +1423,7 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         id: l.value
       }, {
         default: R(() => [
-          L(k(b.validMessage ?? v(Z)), 1)
+          L(k(b.validMessage ?? f(Z)), 1)
         ]),
         _: 1
       }, 8, ["id"]),
@@ -1432,15 +1435,15 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         default: R(() => {
           var F;
           return [
-            L(k(b.invalidMessage ?? ((F = D.value) == null ? void 0 : F.validationMessage) ?? v(x)), 1)
+            L(k(b.invalidMessage ?? ((F = D.value) == null ? void 0 : F.validationMessage) ?? f(x)), 1)
           ];
         }),
         _: 1
       }, 8, ["id"]),
-      I("span", Aa, k($.value), 1)
-    ], 10, wa));
+      I("span", Na, k($.value), 1)
+    ], 10, ka));
   }
-}), 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({
+}), Aa = ["data-visual-aid", "data-size", "data-hide-label", "data-emphasis", "for"], Fa = ["id", "aria-checked", "checked", "value", "disabled", "aria-describedby", "aria-invalid", "data-custom-validity", "name", "required", "data-aid-icon", "data-aid-icon-after"], Ct = /* @__PURE__ */ A({
   __name: "switch",
   props: {
     visualAid: { type: Boolean, default: void 0 },
@@ -1471,65 +1474,65 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     iconAfter: { default: void 0 }
   },
   emits: ["update:checked"],
-  setup(t, { emit: n }) {
-    const d = n, e = t, a = u(void 0), c = u(!1), l = u(null);
+  setup(i, { emit: t }) {
+    const o = t, e = i, a = u(void 0), v = u(!1), l = u(null);
     U(() => {
       a.value = e.id ?? `switch-${G()}`;
     }), z(
       () => [e.checked],
       () => {
-        e.checked !== void 0 && e.checked !== null && (c.value = !!e.checked);
+        e.checked !== void 0 && e.checked !== null && (v.value = !!e.checked);
       },
       {
         immediate: !0,
         flush: "post"
       }
     );
-    function p(s) {
+    function p(n) {
       var B;
-      e.onChange && e.onChange(s), e.change && e.change(s), c.value = (B = s.target) == null ? void 0 : B.checked, ae(d, s, "checked");
+      e.onChange && e.onChange(n), e.change && e.change(n), v.value = (B = n.target) == null ? void 0 : B.checked, ae(o, n, "checked");
     }
-    function i(s) {
-      e.onBlur && e.onBlur(s), e.blur && e.blur(s);
+    function d(n) {
+      e.onBlur && e.onBlur(n), e.blur && e.blur(n);
     }
-    function h(s) {
-      e.onFocus && e.onFocus(s), e.focus && e.focus(s);
+    function h(n) {
+      e.onFocus && e.onFocus(n), e.focus && e.focus(n);
     }
-    return (s, B) => (m(), g("label", {
-      "data-visual-aid": v(V)(s.visualAid),
-      "data-size": s.size,
-      "data-hide-label": v(P)(s.showLabel),
-      "data-emphasis": s.emphasis,
+    return (n, B) => (m(), g("label", {
+      "data-visual-aid": f(V)(n.visualAid),
+      "data-size": n.size,
+      "data-hide-label": f(P)(n.showLabel),
+      "data-emphasis": n.emphasis,
       for: a.value,
-      class: N(v(A)("db-switch", e.class))
+      class: E(f(N)("db-switch", e.class))
     }, [
       I("input", {
         type: "checkbox",
         role: "switch",
         id: a.value,
-        "aria-checked": v(V)(c.value),
+        "aria-checked": f(V)(v.value),
         ref_key: "_ref",
         ref: l,
-        checked: s.checked,
-        value: s.value,
-        disabled: s.disabled,
-        "aria-describedby": s.describedbyid,
-        "aria-invalid": s.validation === "invalid",
-        "data-custom-validity": s.validation,
-        name: s.name,
-        required: s.required,
-        "data-aid-icon": s.icon,
-        "data-aid-icon-after": s.iconAfter,
+        checked: n.checked,
+        value: n.value,
+        disabled: n.disabled,
+        "aria-describedby": n.describedbyid,
+        "aria-invalid": n.validation === "invalid",
+        "data-custom-validity": n.validation,
+        name: n.name,
+        required: n.required,
+        "data-aid-icon": n.icon,
+        "data-aid-icon-after": n.iconAfter,
         onChange: B[0] || (B[0] = async ($) => p($)),
-        onBlur: B[1] || (B[1] = async ($) => i($)),
+        onBlur: B[1] || (B[1] = async ($) => d($)),
         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));
+      }, null, 40, Fa),
+      n.label ? (m(), g(S, { key: 0 }, [
+        L(k(n.label), 1)
+      ], 64)) : w(n.$slots, "default", { key: 1 })
+    ], 10, Aa));
   }
-}), 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({
+}), Ta = ["for", "data-icon", "data-icon-after", "data-hide-icon", "data-hide-icon-after", "data-no-text"], Ca = ["disabled", "aria-selected", "aria-controls", "checked", "id"], Sa = /* @__PURE__ */ A({
   __name: "tab-item",
   props: {
     children: { default: void 0 },
@@ -1551,8 +1554,8 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     showIcon: { type: Boolean, default: void 0 }
   },
   emits: ["update:checked"],
-  setup(t, { emit: n }) {
-    const d = n, e = t, a = u(!1), c = u(!1), l = u(null);
+  setup(i, { emit: t }) {
+    const o = t, e = i, a = u(!1), v = u(!1), l = u(null);
     U(() => {
       a.value = !0;
     }), z(
@@ -1565,42 +1568,42 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         flush: "post"
       }
     );
-    function p(i) {
+    function p(d) {
       var h;
-      e.onChange && e.onChange(i), e.change && e.change(i), c.value = (h = i.target) == null ? void 0 : h.checked, ae(d, i, "checked");
+      e.onChange && e.onChange(d), e.change && e.change(d), v.value = (h = d.target) == null ? void 0 : h.checked, ae(o, d, "checked");
     }
-    return (i, h) => (m(), g("li", {
+    return (d, h) => (m(), g("li", {
       role: "none",
-      class: N(v(A)("db-tab-item", e.class))
+      class: E(f(N)("db-tab-item", e.class))
     }, [
       I("label", {
-        for: i.id,
-        "data-icon": i.icon,
-        "data-icon-after": i.iconAfter,
-        "data-hide-icon": v(P)(i.showIcon),
-        "data-hide-icon-after": v(P)(i.showIcon),
-        "data-no-text": i.noText
+        for: d.id,
+        "data-icon": d.icon,
+        "data-icon-after": d.iconAfter,
+        "data-hide-icon": f(P)(d.showIcon),
+        "data-hide-icon-after": f(P)(d.showIcon),
+        "data-no-text": d.noText
       }, [
         I("input", {
           type: "radio",
           role: "tab",
-          disabled: i.disabled,
-          "aria-selected": c.value,
-          "aria-controls": i.controls,
-          checked: i.checked,
+          disabled: d.disabled,
+          "aria-selected": v.value,
+          "aria-controls": d.controls,
+          checked: d.checked,
           ref_key: "_ref",
           ref: l,
-          id: i.id,
-          onInput: h[0] || (h[0] = async (s) => p(s))
+          id: d.id,
+          onInput: h[0] || (h[0] = async (n) => p(n))
         }, null, 40, Ca),
-        i.label ? (m(), g(C, { key: 0 }, [
-          L(k(i.label), 1)
+        d.label ? (m(), g(S, { key: 0 }, [
+          L(k(d.label), 1)
         ], 64)) : M("", !0),
-        w(i.$slots, "default")
-      ], 8, Sa)
+        w(d.$slots, "default")
+      ], 8, Ta)
     ], 2));
   }
-}), 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({
+}), Da = ["id", "data-disabled", "data-semantic", "data-emphasis", "data-icon", "data-show-check-state", "data-hide-icon", "data-no-text", "data-overflow"], Ma = ["title"], St = /* @__PURE__ */ A({
   __name: "tag",
   props: {
     behavior: { default: void 0 },
@@ -1624,18 +1627,18 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     showIcon: { type: Boolean, default: void 0 },
     content: {}
   },
-  setup(t) {
-    const n = t, d = u(!1), e = u(null);
-    d.value = !0, z(
-      () => [d.value, n.disabled, e.value],
+  setup(i) {
+    const t = i, o = u(!1), e = u(null);
+    o.value = !0, z(
+      () => [o.value, t.disabled, e.value],
       () => {
         var l, p;
-        if (d.value && e.value && n.disabled !== void 0) {
-          const i = (l = e.value) == null ? void 0 : l.querySelector(
+        if (o.value && e.value && t.disabled !== void 0) {
+          const d = (l = e.value) == null ? void 0 : l.querySelector(
             "button:not(.db-tab-remove-button)"
           ), h = (p = e.value) == null ? void 0 : p.querySelector("input");
-          for (const s of [i, h])
-            s && (s.disabled = n.disabled);
+          for (const n of [d, h])
+            n && (n.disabled = t.disabled);
         }
       },
       {
@@ -1644,28 +1647,28 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
       }
     );
     function a() {
-      n.onRemove && n.onRemove();
+      t.onRemove && t.onRemove();
     }
-    function c() {
-      return n.removeButton ? n.removeButton : "Remove tag";
+    function v() {
+      return t.removeButton ? t.removeButton : "Remove tag";
     }
     return (l, p) => (m(), g("div", {
       ref_key: "_ref",
       ref: e,
       id: l.id,
-      class: N(v(A)("db-tag", n.class)),
-      "data-disabled": v(V)(l.disabled),
+      class: E(f(N)("db-tag", t.class)),
+      "data-disabled": f(V)(l.disabled),
       "data-semantic": l.semantic,
       "data-emphasis": l.emphasis,
       "data-icon": l.icon,
-      "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)
+      "data-show-check-state": f(V)(l.showCheckState ?? !0),
+      "data-hide-icon": f(P)(l.showIcon),
+      "data-no-text": f(V)(l.noText),
+      "data-overflow": f(V)(l.overflow)
     }, [
       w(l.$slots, "content"),
       w(l.$slots, "default"),
-      l.text ? (m(), g(C, { key: 0 }, [
+      l.text ? (m(), g(S, { key: 0 }, [
         L(k(l.text), 1)
       ], 64)) : M("", !0),
       l.behavior === "removable" ? (m(), g("button", {
@@ -1675,15 +1678,15 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         "data-size": "small",
         "data-no-text": "true",
         "data-variant": "ghost",
-        onClick: p[0] || (p[0] = async (i) => a()),
-        title: c()
-      }, k(c()), 9, za)) : M("", !0)
-    ], 10, Ma));
+        onClick: p[0] || (p[0] = async (d) => a()),
+        title: v()
+      }, k(v()), 9, Ma)) : M("", !0)
+    ], 10, Da));
   }
-}), 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 = {
+}), za = ["data-variant", "data-hide-label"], Ra = ["for"], Ua = ["aria-invalid", "data-custom-validity", "id", "data-resize", "disabled", "required", "readOnly", "form", "maxLength", "minLength", "name", "wrap", "spellcheck", "autocomplete", "value", "aria-describedby", "placeholder", "rows", "cols"], Pa = {
   "data-visually-hidden": "true",
   role: "status"
-}, zn = /* @__PURE__ */ E({
+}, Dt = /* @__PURE__ */ A({
   __name: "textarea",
   props: {
     cols: { default: void 0 },
@@ -1726,17 +1729,17 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     showMessage: { type: Boolean, default: void 0 }
   },
   emits: ["update:value"],
-  setup(t, { emit: n }) {
-    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);
+  setup(i, { emit: t }) {
+    const o = t, e = i, a = u(void 0), v = u(void 0), l = u(void 0), p = u(void 0), d = u(""), h = u(""), n = u(""), B = u(null);
     U(() => {
-      const o = e.id ?? `textarea-${G()}`;
-      a.value = o, c.value = o + K, l.value = o + J, p.value = o + Q;
+      const s = e.id ?? `textarea-${G()}`;
+      a.value = s, v.value = s + K, l.value = s + J, p.value = s + Q;
     }), z(
       () => [a.value],
       () => {
         if (a.value) {
-          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);
+          const s = a.value + K;
+          v.value = s, l.value = a.value + J, p.value = a.value + Q, q(e.message, e.showMessage) && (d.value = s);
         }
       },
       {
@@ -1753,60 +1756,60 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         flush: "post"
       }
     );
-    function $(o) {
-      h.value = o.target.value, e.onInput && e.onInput(o), e.input && e.input(o);
+    function $(s) {
+      h.value = s.target.value, e.onInput && e.onInput(s), e.input && e.input(s);
     }
-    function D(o) {
+    function D(s) {
       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 = "";
+      e.onChange && e.onChange(s), e.change && e.change(s), ae(o, s), !((y = B.value) != null && y.validity.valid) || e.validation === "invalid" ? (d.value = p.value, Y() && (n.value = e.invalidMessage ?? ((r = B.value) == null ? void 0 : r.validationMessage) ?? x, H(() => n.value = "", 1e3))) : e.validation === "valid" || (T = B.value) != null && T.validity.valid && (e.required || e.minLength || e.maxLength) ? (d.value = l.value, Y() && (n.value = e.validMessage ?? Z, H(() => n.value = "", 1e3))) : q(e.message, e.showMessage) ? d.value = v.value : d.value = "";
     }
-    function _(o) {
-      e.onBlur && e.onBlur(o), e.blur && e.blur(o);
+    function _(s) {
+      e.onBlur && e.onBlur(s), e.blur && e.blur(s);
     }
-    function f(o) {
-      e.onFocus && e.onFocus(o), e.focus && e.focus(o);
+    function c(s) {
+      e.onFocus && e.onFocus(s), e.focus && e.focus(s);
     }
-    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)
+    return (s, y) => (m(), g("div", {
+      class: E(f(N)("db-textarea", e.class)),
+      "data-variant": s.variant,
+      "data-hide-label": f(P)(s.showLabel)
     }, [
-      I("label", { for: a.value }, k(o.label ?? v(le)), 9, Ua),
+      I("label", { for: a.value }, k(s.label ?? f(le)), 9, Ra),
       I("textarea", {
-        "aria-invalid": o.validation === "invalid",
-        "data-custom-validity": o.validation,
+        "aria-invalid": s.validation === "invalid",
+        "data-custom-validity": s.validation,
         ref_key: "_ref",
         ref: B,
         id: a.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,
+        "data-resize": s.resize,
+        disabled: s.disabled,
+        required: s.required,
+        readOnly: s.readOnly,
+        form: s.form,
+        maxLength: s.maxLength,
+        minLength: s.minLength,
+        name: s.name,
+        wrap: s.wrap,
+        spellcheck: s.spellCheck,
+        autocomplete: s.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: o.placeholder ?? v(fe),
-        rows: o.rows ?? v(Ne),
-        cols: o.cols
-      }, null, 40, Pa),
-      v(q)(o.message, o.showMessage) ? (m(), X(W, {
+        onFocus: y[3] || (y[3] = async (r) => c(r)),
+        value: s.value ?? h.value,
+        "aria-describedby": d.value,
+        placeholder: s.placeholder ?? f(ce),
+        rows: s.rows ?? f(Ne),
+        cols: s.cols
+      }, null, 40, Ua),
+      f(q)(s.message, s.showMessage) ? (m(), X(W, {
         key: 0,
         size: "small",
-        icon: o.messageIcon,
-        id: c.value
+        icon: s.messageIcon,
+        id: v.value
       }, {
         default: R(() => [
-          L(k(o.message), 1)
+          L(k(s.message), 1)
         ]),
         _: 1
       }, 8, ["icon", "id"])) : M("", !0),
@@ -1816,7 +1819,7 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         id: l.value
       }, {
         default: R(() => [
-          L(k(o.validMessage ?? v(Z)), 1)
+          L(k(s.validMessage ?? f(Z)), 1)
         ]),
         _: 1
       }, 8, ["id"]),
@@ -1828,18 +1831,18 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         default: R(() => {
           var r;
           return [
-            L(k(o.invalidMessage ?? ((r = B.value) == null ? void 0 : r.validationMessage) ?? v(x)), 1)
+            L(k(s.invalidMessage ?? ((r = B.value) == null ? void 0 : r.validationMessage) ?? f(x)), 1)
           ];
         }),
         _: 1
       }, 8, ["id"]),
-      I("span", Va, k(s.value), 1)
-    ], 10, Ra));
+      I("span", Pa, k(n.value), 1)
+    ], 10, za));
   }
-}), 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 = {
+}), Va = ["id", "data-width", "data-icon", "data-hide-icon", "data-active", "aria-disabled"], Ga = ["aria-haspopup", "aria-expanded", "disabled"], qa = ["data-auto-close", "id"], Oa = {
   key: 0,
   class: "db-mobile-navigation-back"
-}, Rn = /* @__PURE__ */ E({
+}, Mt = /* @__PURE__ */ A({
   __name: "navigation-item",
   props: {
     active: { type: Boolean, default: void 0 },
@@ -1860,23 +1863,23 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     showIcon: { type: Boolean, default: void 0 },
     text: { default: void 0 }
   },
-  setup(t) {
-    const n = t, d = u(!1), e = u(!1), a = u(!0), c = u(!1), l = u(!1), p = u(
+  setup(i) {
+    const t = i, o = u(!1), e = u(!1), a = u(!0), v = u(!1), l = u(!1), p = u(
       "sub-navigation-" + G()
-    ), i = u(void 0), h = u(null);
+    ), d = u(void 0), h = u(null);
     U(() => {
-      d.value = !0;
+      o.value = !0;
     }), z(
-      () => [n.subNavigationExpanded],
+      () => [t.subNavigationExpanded],
       () => {
-        n.subNavigationExpanded !== void 0 && (c.value = !!n.subNavigationExpanded);
+        t.subNavigationExpanded !== void 0 && (v.value = !!t.subNavigationExpanded);
       },
       {
         immediate: !0,
         flush: "post"
       }
     ), z(
-      () => [d.value],
+      () => [o.value],
       () => {
         D();
       },
@@ -1885,94 +1888,94 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         flush: "post"
       }
     );
-    function s(_) {
+    function n(_) {
       be(_) && (l.value = !0, H(() => {
         l.value = !1;
       }, 300));
     }
     function B(_) {
-      n.onClick && n.onClick(_), e.value && (c.value = !0);
+      t.onClick && t.onClick(_), e.value && (v.value = !0);
     }
     function $(_) {
-      _.stopPropagation(), c.value = !1;
+      _.stopPropagation(), v.value = !1;
     }
     function D() {
       var _;
-      if (d.value && document && p.value) {
-        const f = document == null ? void 0 : document.getElementById(
+      if (o.value && document && p.value) {
+        const c = document == null ? void 0 : document.getElementById(
           p.value
         );
-        f && (((_ = f.children) == null ? void 0 : _.length) > 0 ? (e.value = !0, i.value || (i.value = new Ke(
+        c && (((_ = c.children) == null ? void 0 : _.length) > 0 ? (e.value = !0, d.value || (d.value = new Ke(
           h.value,
-          f
+          c
         ))) : a.value = !1);
       }
     }
-    return (_, f) => (m(), g("li", {
+    return (_, c) => (m(), g("li", {
       ref_key: "_ref",
       ref: h,
       id: _.id,
-      onMouseover: f[2] || (f[2] = async (o) => {
+      onMouseover: c[2] || (c[2] = async (s) => {
         var y;
-        return (y = i.value) == null ? void 0 : y.enableFollow();
+        return (y = d.value) == null ? void 0 : y.enableFollow();
       }),
-      onMouseleave: f[3] || (f[3] = async (o) => {
+      onMouseleave: c[3] || (c[3] = async (s) => {
         var y;
-        return (y = i.value) == null ? void 0 : y.disableFollow();
+        return (y = d.value) == null ? void 0 : y.disableFollow();
       }),
-      onMousemove: f[4] || (f[4] = async (o) => {
+      onMousemove: c[4] || (c[4] = async (s) => {
         var y;
-        return (y = i.value) == null ? void 0 : y.followByMouseEvent(o);
+        return (y = d.value) == null ? void 0 : y.followByMouseEvent(s);
       }),
-      class: N(v(A)("db-navigation-item", n.class)),
+      class: E(f(N)("db-navigation-item", t.class)),
       "data-width": _.width,
       "data-icon": _.icon,
-      "data-hide-icon": v(P)(_.showIcon),
+      "data-hide-icon": f(P)(_.showIcon),
       "data-active": _.active,
-      "aria-disabled": v(V)(_.disabled)
+      "aria-disabled": f(V)(_.disabled)
     }, [
-      a.value ? M("", !0) : (m(), g(C, { key: 0 }, [
-        _.text ? (m(), g(C, { key: 0 }, [
+      a.value ? M("", !0) : (m(), g(S, { key: 0 }, [
+        _.text ? (m(), g(S, { key: 0 }, [
           L(k(_.text), 1)
         ], 64)) : w(_.$slots, "default", { key: 1 })
       ], 64)),
-      a.value ? (m(), g(C, { key: 1 }, [
+      a.value ? (m(), g(S, { key: 1 }, [
         I("button", {
           class: "db-navigation-item-expand-button",
           "aria-haspopup": e.value,
-          "aria-expanded": c.value,
+          "aria-expanded": v.value,
           disabled: _.disabled,
-          onClick: f[0] || (f[0] = async (o) => B(o))
+          onClick: c[0] || (c[0] = async (s) => B(s))
         }, [
-          _.text ? (m(), g(C, { key: 0 }, [
+          _.text ? (m(), g(S, { key: 0 }, [
             L(k(_.text), 1)
           ], 64)) : w(_.$slots, "default", { key: 1 })
-        ], 8, qa),
+        ], 8, Ga),
         I("menu", {
           class: "db-sub-navigation",
           "data-auto-close": l.value,
           id: p.value,
-          onClick: f[1] || (f[1] = async (o) => s(o))
+          onClick: c[1] || (c[1] = async (s) => n(s))
         }, [
-          e.value ? (m(), g("div", Wa, [
-            O(de, {
+          e.value ? (m(), g("div", Oa, [
+            O(oe, {
               icon: "arrow_left",
               variant: "ghost",
               id: _.backButtonId,
-              onClick: (o) => $(o)
+              onClick: (s) => $(s)
             }, {
               default: R(() => [
-                L(k(_.backButtonText ?? v($e)), 1)
+                L(k(_.backButtonText ?? f($e)), 1)
               ]),
               _: 1
             }, 8, ["id", "onClick"])
           ])) : M("", !0),
           w(_.$slots, "sub-navigation")
-        ], 8, Oa)
+        ], 8, qa)
       ], 64)) : M("", !0)
-    ], 42, Ga));
+    ], 42, Va));
   }
-}), Xa = ["id"], Ha = ["aria-disabled", "open"], ja = /* @__PURE__ */ E({
+}), Wa = ["id"], Xa = ["aria-disabled", "open"], Ha = /* @__PURE__ */ A({
   __name: "accordion-item",
   props: {
     defaultOpen: { type: Boolean, default: void 0 },
@@ -1988,43 +1991,43 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     autofocus: { type: Boolean },
     onToggle: { type: Function, default: void 0 }
   },
-  setup(t) {
-    const n = t, d = u(ee), e = u(!1), a = u(null);
+  setup(i) {
+    const t = i, o = u(ee), e = u(!1), a = u(null);
     U(() => {
-      d.value = n.id || "accordion-item-" + G(), n.defaultOpen && (e.value = n.defaultOpen);
+      o.value = t.id || "accordion-item-" + G(), t.defaultOpen && (e.value = t.defaultOpen);
     });
-    function c(l) {
+    function v(l) {
       l == null || l.preventDefault();
       const p = !e.value;
-      n.onToggle && n.onToggle(p), e.value = p;
+      t.onToggle && t.onToggle(p), e.value = p;
     }
     return (l, p) => (m(), g("li", {
-      id: d.value,
-      class: N(v(A)("db-accordion-item", n.class))
+      id: o.value,
+      class: E(f(N)("db-accordion-item", t.class))
     }, [
       I("details", {
-        "aria-disabled": v(V)(l.disabled),
+        "aria-disabled": f(V)(l.disabled),
         ref_key: "_ref",
         ref: a,
         open: e.value
       }, [
         I("summary", {
-          onClick: p[0] || (p[0] = async (i) => c(i))
+          onClick: p[0] || (p[0] = async (d) => v(d))
         }, [
-          l.headlinePlain ? (m(), g(C, { key: 0 }, [
+          l.headlinePlain ? (m(), g(S, { key: 0 }, [
             L(k(l.headlinePlain), 1)
           ], 64)) : M("", !0),
           l.headlinePlain ? M("", !0) : w(l.$slots, "headline", { key: 1 })
         ]),
         I("div", null, [
-          l.text ? (m(), g(C, { key: 0 }, [
+          l.text ? (m(), g(S, { key: 0 }, [
             L(k(l.text), 1)
           ], 64)) : w(l.$slots, "default", { key: 1 })
         ])
-      ], 8, Ha)
-    ], 10, Xa));
+      ], 8, Xa)
+    ], 10, Wa));
   }
-}), Ya = ["id", "data-variant"], Un = /* @__PURE__ */ E({
+}), ja = ["id", "data-variant"], zt = /* @__PURE__ */ A({
   __name: "accordion",
   props: {
     behavior: { default: void 0 },
@@ -2040,14 +2043,14 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     id: { default: void 0 },
     autofocus: { type: Boolean }
   },
-  setup(t) {
-    const n = t, d = u(ee), e = u(""), a = u(!1), c = u(!1), l = u(null);
+  setup(i) {
+    const t = i, o = u(ee), e = u(""), a = u(!1), v = u(!1), l = u(null);
     U(() => {
-      d.value = n.id || "accordion-" + G(), a.value = !0, c.value = !0;
+      o.value = t.id || "accordion-" + G(), a.value = !0, v.value = !0;
     }), z(
-      () => [a.value, n.name, n.behavior, d.value],
+      () => [a.value, t.name, t.behavior, o.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 = "");
+        a.value && (t.behavior === "single" ? t.name ? e.value !== t.name && (e.value = t.name) : e.value !== o.value && o.value && (e.value = o.value) : e.value = "");
       },
       {
         immediate: !0,
@@ -2057,9 +2060,9 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
       () => [l.value, e.value],
       () => {
         if (l.value) {
-          const i = l.value.getElementsByTagName("details");
-          if (i)
-            for (const h of Array.from(i))
+          const d = l.value.getElementsByTagName("details");
+          if (d)
+            for (const h of Array.from(d))
               e.value === "" ? h.removeAttribute("name") : h.name = e.value;
         }
       },
@@ -2068,22 +2071,22 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         flush: "post"
       }
     ), z(
-      () => [l.value, c.value, n.initOpenIndex],
+      () => [l.value, v.value, t.initOpenIndex],
       () => {
-        var i;
-        if (l.value && c.value) {
-          if (n.initOpenIndex && ((i = n.initOpenIndex) == null ? void 0 : i.length) > 0) {
+        var d;
+        if (l.value && v.value) {
+          if (t.initOpenIndex && ((d = t.initOpenIndex) == null ? void 0 : d.length) > 0) {
             const h = l.value.getElementsByTagName("details");
             if (h) {
-              const s = n.behavior === "single" && n.initOpenIndex.length > 1 ? [n.initOpenIndex[0]] : n.initOpenIndex;
+              const n = t.behavior === "single" && t.initOpenIndex.length > 1 ? [t.initOpenIndex[0]] : t.initOpenIndex;
               Array.from(h).forEach(
                 (B, $) => {
-                  s.includes($) && (B.open = !0);
+                  n.includes($) && (B.open = !0);
                 }
               );
             }
           }
-          c.value = !1;
+          v.value = !1;
         }
       },
       {
@@ -2091,31 +2094,31 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         flush: "post"
       }
     );
-    function p(i) {
+    function p(d) {
       try {
-        return typeof i == "string" ? JSON.parse(i) : i;
+        return typeof d == "string" ? JSON.parse(d) : d;
       } catch (h) {
         console.error(h);
       }
       return [];
     }
-    return (i, h) => (m(), g("ul", {
+    return (d, h) => (m(), g("ul", {
       ref_key: "_ref",
       ref: l,
-      id: d.value,
-      class: N(v(A)("db-accordion", n.class)),
-      "data-variant": i.variant
+      id: o.value,
+      class: E(f(N)("db-accordion", t.class)),
+      "data-variant": d.variant
     }, [
-      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, {
+      d.items ? M("", !0) : w(d.$slots, "default", { key: 0 }),
+      d.items ? (m(!0), g(S, { key: 1 }, ie(p(d.items), (n, B) => (m(), X(Ha, {
         key: `accordion-item-${B}`,
-        headlinePlain: s.headlinePlain,
-        disabled: s.disabled,
-        text: s.text
+        headlinePlain: n.headlinePlain,
+        disabled: n.disabled,
+        text: n.text
       }, null, 8, ["headlinePlain", "disabled", "text"]))), 128)) : M("", !0)
-    ], 10, Ya));
+    ], 10, ja));
   }
-}), Ka = ["id", "aria-labelledby"], Pn = /* @__PURE__ */ E({
+}), Ya = ["id", "aria-labelledby"], Rt = /* @__PURE__ */ A({
   __name: "navigation",
   props: {
     children: { default: void 0 },
@@ -2126,23 +2129,23 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     autofocus: { type: Boolean },
     labelledBy: { default: void 0 }
   },
-  setup(t) {
-    const n = t, d = u(ee), e = u(null);
+  setup(i) {
+    const t = i, o = u(ee), e = u(null);
     return U(() => {
-      d.value = n.id || "navigation-" + G();
-    }), (a, c) => (m(), g("nav", {
+      o.value = t.id || "navigation-" + G();
+    }), (a, v) => (m(), g("nav", {
       ref_key: "_ref",
       ref: e,
-      id: d.value,
+      id: o.value,
       "aria-labelledby": a.labelledBy,
-      class: N(v(A)("db-navigation", n.class))
+      class: E(f(N)("db-navigation", t.class))
     }, [
       I("menu", null, [
         w(a.$slots, "default")
       ])
-    ], 10, Ka));
+    ], 10, Ya));
   }
-}), Ja = ["id"], Qa = ["data-spacing", "data-gap", "data-animation", "data-open", "data-delay", "data-width", "data-placement"], Vn = /* @__PURE__ */ E({
+}), Ka = ["id"], Ja = ["data-spacing", "data-gap", "data-animation", "data-open", "data-delay", "data-width", "data-placement"], Ut = /* @__PURE__ */ A({
   __name: "popover",
   props: {
     open: { type: Boolean, default: void 0 },
@@ -2160,16 +2163,16 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     animation: { type: Boolean, default: void 0 },
     width: { default: void 0 }
   },
-  setup(t) {
-    const n = t, d = u(!1), e = u(!1), a = u(null);
+  setup(i) {
+    const t = i, o = u(!1), e = u(!1), a = u(null);
     U(() => {
-      d.value = !0;
+      o.value = !0;
     }), z(
-      () => [a.value, d.value],
+      () => [a.value, o.value],
       () => {
-        if (a.value && d.value) {
-          const i = p();
-          i && (i.ariaHasPopup = "true"), d.value = !1;
+        if (a.value && o.value) {
+          const d = p();
+          d && (d.ariaHasPopup = "true"), o.value = !1;
         }
       },
       {
@@ -2180,8 +2183,8 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
       () => [a.value, e.value],
       () => {
         if (a.value) {
-          const i = p();
-          i && (i.ariaExpanded = (!!e.value).toString());
+          const d = p();
+          d && (d.ariaExpanded = (!!e.value).toString());
         }
       },
       {
@@ -2189,52 +2192,52 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         flush: "post"
       }
     );
-    function c() {
+    function v() {
       if (e.value = !0, !a.value) return;
-      const i = a.value.querySelector("article");
-      i && se(i);
+      const d = a.value.querySelector("article");
+      d && ne(d);
     }
-    function l(i) {
-      const h = i.target;
+    function l(d) {
+      const h = d.target;
       (!h.parentNode || h.parentNode.querySelector(":focus") !== h && h.parentNode.querySelector(":focus-within") !== h && h.parentNode.querySelector(":hover") !== h) && (e.value = !1);
     }
     function p() {
-      var i;
+      var d;
       if (a.value) {
         const h = Array.from(a.value.children);
         if (h.length >= 2) {
-          const s = h[0];
-          return s.tagName.includes("-") ? ((i = s.children) == null ? void 0 : i.length) > 0 ? s.children[0] : null : s;
+          const n = h[0];
+          return n.tagName.includes("-") ? ((d = n.children) == null ? void 0 : d.length) > 0 ? n.children[0] : null : n;
         }
       }
       return null;
     }
-    return (i, h) => (m(), g("div", {
+    return (d, h) => (m(), g("div", {
       ref_key: "_ref",
       ref: a,
-      id: i.id,
-      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) => c()),
-      onMouseleave: h[3] || (h[3] = async (s) => l(s))
+      id: d.id,
+      class: E(f(N)("db-popover", t.class)),
+      onFocus: h[0] || (h[0] = async (n) => v()),
+      onBlur: h[1] || (h[1] = async (n) => l(n)),
+      onMouseenter: h[2] || (h[2] = async (n) => v()),
+      onMouseleave: h[3] || (h[3] = async (n) => l(n))
     }, [
-      w(i.$slots, "trigger"),
+      w(d.$slots, "trigger"),
       I("article", {
         class: "db-popover-content",
-        "data-spacing": i.spacing,
-        "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
+        "data-spacing": d.spacing,
+        "data-gap": f(V)(d.gap),
+        "data-animation": f(V)(d.animation ?? !0),
+        "data-open": d.open,
+        "data-delay": d.delay,
+        "data-width": d.width,
+        "data-placement": d.placement
       }, [
-        w(i.$slots, "default")
-      ], 8, Qa)
-    ], 42, Ja));
+        w(d.$slots, "default")
+      ], 8, Ja)
+    ], 42, Ka));
   }
-}), Za = ["id", "data-emphasis", "data-animation", "data-delay", "data-width", "data-show-arrow", "data-placement"], Gn = /* @__PURE__ */ E({
+}), Qa = ["id", "data-emphasis", "data-animation", "data-delay", "data-width", "data-show-arrow", "data-placement"], Pt = /* @__PURE__ */ A({
   __name: "tooltip",
   props: {
     showArrow: { type: Boolean, default: void 0 },
@@ -2250,18 +2253,18 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     animation: { type: Boolean, default: void 0 },
     width: { default: void 0 }
   },
-  setup(t) {
-    const n = t, d = u(ee), e = u(!1), a = u(null);
+  setup(i) {
+    const t = i, o = u(ee), e = u(!1), a = u(null);
     U(() => {
-      d.value = n.id || "tooltip-" + G(), e.value = !0;
+      o.value = t.id || "tooltip-" + G(), e.value = !0;
     }), z(
       () => [a.value, e.value],
       () => {
-        if (a.value && e.value && d.value) {
+        if (a.value && e.value && o.value) {
           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;
+          p && p.localName.includes("tooltip") && (p = p.parentElement), p && (["mouseenter", "focus"].forEach((d) => {
+            p.addEventListener(d, () => l());
+          }), p.setAttribute("data-has-tooltip", "true"), p.setAttribute("aria-describedby", o.value)), e.value = !1;
         }
       },
       {
@@ -2269,32 +2272,32 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         flush: "post"
       }
     );
-    function c(p) {
+    function v(p) {
       p.stopPropagation();
     }
     function l() {
-      a.value && se(a.value);
+      a.value && ne(a.value);
     }
-    return (p, i) => (m(), g("i", {
+    return (p, d) => (m(), g("i", {
       role: "tooltip",
       "aria-hidden": "true",
       "data-gap": "true",
       ref_key: "_ref",
       ref: a,
-      class: N(v(A)("db-tooltip", n.class)),
-      id: d.value,
+      class: E(f(N)("db-tooltip", t.class)),
+      id: o.value,
       "data-emphasis": p.emphasis,
-      "data-animation": v(V)(p.animation ?? !0),
+      "data-animation": f(V)(p.animation ?? !0),
       "data-delay": p.delay,
       "data-width": p.width,
-      "data-show-arrow": v(V)(p.showArrow ?? !0),
+      "data-show-arrow": f(V)(p.showArrow ?? !0),
       "data-placement": p.placement,
-      onClick: i[0] || (i[0] = async (h) => c(h))
+      onClick: d[0] || (d[0] = async (h) => v(h))
     }, [
       w(p.$slots, "default")
-    ], 10, Za));
+    ], 10, Qa));
   }
-}), xa = ["id"], en = { role: "tablist" }, an = /* @__PURE__ */ E({
+}), Za = ["id"], xa = { role: "tablist" }, et = /* @__PURE__ */ A({
   __name: "tab-list",
   props: {
     children: { default: void 0 },
@@ -2304,22 +2307,22 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     id: { default: void 0 },
     autofocus: { type: Boolean }
   },
-  setup(t) {
-    const n = t, d = u(ee), e = u(null);
+  setup(i) {
+    const t = i, o = u(ee), e = u(null);
     return U(() => {
-      d.value = n.id || "tab-list-" + G();
-    }), (a, c) => (m(), g("div", {
+      o.value = t.id || "tab-list-" + G();
+    }), (a, v) => (m(), g("div", {
       ref_key: "_ref",
       ref: e,
-      id: d.value,
-      class: N(v(A)("db-tab-list", n.class))
+      id: o.value,
+      class: E(f(N)("db-tab-list", t.class))
     }, [
-      I("ul", en, [
+      I("ul", xa, [
         w(a.$slots, "default")
       ])
-    ], 10, xa));
+    ], 10, Za));
   }
-}), nn = ["id", "aria-labelledby"], tn = /* @__PURE__ */ E({
+}), at = ["id", "aria-labelledby"], tt = /* @__PURE__ */ A({
   __name: "tab-panel",
   props: {
     content: { default: void 0 },
@@ -2331,24 +2334,24 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     autofocus: { type: Boolean },
     labelledBy: { default: void 0 }
   },
-  setup(t) {
-    const n = t, d = u(null);
+  setup(i) {
+    const t = i, o = u(null);
     return U(() => {
     }), (e, a) => (m(), g("section", {
       role: "tabpanel",
       ref_key: "_ref",
-      ref: d,
-      class: N(v(A)("db-tab-panel", n.class)),
+      ref: o,
+      class: E(f(N)("db-tab-panel", t.class)),
       id: e.id,
       "aria-labelledby": e.labelledBy
     }, [
-      e.content ? (m(), g(C, { key: 0 }, [
+      e.content ? (m(), g(S, { key: 0 }, [
         L(k(e.content), 1)
       ], 64)) : M("", !0),
       w(e.$slots, "default")
-    ], 10, nn));
+    ], 10, at));
   }
-}), dn = ["id", "data-orientation", "data-scroll-behavior", "data-alignment", "data-width"], qn = /* @__PURE__ */ E({
+}), it = ["id", "data-orientation", "data-scroll-behavior", "data-alignment", "data-width"], Vt = /* @__PURE__ */ A({
   __name: "tabs",
   props: {
     arrowScrollDistance: { default: void 0 },
@@ -2369,21 +2372,21 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     width: { default: void 0 },
     alignment: { default: void 0 }
   },
-  setup(t) {
-    const n = t, d = u("tabs-" + G()), e = u(""), a = u(!1), c = u(!1), l = u(!1), p = u(null), i = u(null);
+  setup(i) {
+    const t = i, o = u("tabs-" + G()), e = u(""), a = u(!1), v = u(!1), l = u(!1), p = u(null), d = u(null);
     U(() => {
-      d.value = n.id || d.value, e.value = `tabs-${n.name || G()}`, a.value = !0;
+      o.value = t.id || o.value, e.value = `tabs-${t.name || G()}`, a.value = !0;
     }), z(
-      () => [i.value, a.value],
+      () => [d.value, a.value],
       () => {
-        if (i.value && a.value) {
+        if (d.value && a.value) {
           $(), D(!0);
-          const f = i.value.querySelector(".db-tab-list");
-          f && new MutationObserver((y) => {
+          const c = d.value.querySelector(".db-tab-list");
+          c && new MutationObserver((y) => {
             y.forEach((r) => {
               (r.removedNodes.length || r.addedNodes.length) && ($(), D());
             });
-          }).observe(f, {
+          }).observe(c, {
             childList: !0,
             subtree: !0
           }), a.value = !1;
@@ -2394,64 +2397,64 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         flush: "post"
       }
     );
-    function h(f) {
+    function h(c) {
       try {
-        return typeof f == "string" ? JSON.parse(f) : f;
-      } catch (o) {
-        console.error(o);
+        return typeof c == "string" ? JSON.parse(c) : c;
+      } catch (s) {
+        console.error(s);
       }
       return [];
     }
-    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 n(c) {
+      const s = c.scrollWidth > c.clientWidth;
+      v.value = s && c.scrollLeft > 1, l.value = s && c.scrollLeft < c.scrollWidth - c.clientWidth;
     }
-    function B(f) {
+    function B(c) {
       var y;
-      let o = n.arrowScrollDistance || 100;
-      f && (o *= -1), (y = p.value) == null || y.scrollBy({
+      let s = t.arrowScrollDistance || 100;
+      c && (s *= -1), (y = p.value) == null || y.scrollBy({
         top: 0,
-        left: o,
+        left: s,
         behavior: "smooth"
       });
     }
     function $() {
-      if (i.value) {
-        const f = i.value.querySelector(".db-tab-list");
-        if (f) {
-          const o = f.querySelector('[role="tablist"]');
-          o && (o.setAttribute(
+      if (d.value) {
+        const c = d.value.querySelector(".db-tab-list");
+        if (c) {
+          const s = c.querySelector('[role="tablist"]');
+          s && (s.setAttribute(
             "aria-orientation",
-            n.orientation || "horizontal"
-          ), n.behavior === "arrows" && (p.value = o, s(o), o.addEventListener("scroll", () => {
-            s(o);
+            t.orientation || "horizontal"
+          ), t.behavior === "arrows" && (p.value = s, n(s), s.addEventListener("scroll", () => {
+            n(s);
           })));
         }
       }
     }
-    function D(f) {
-      if (i.value) {
-        const o = Array.from(
-          i.value.getElementsByClassName("db-tab-item")
+    function D(c) {
+      if (d.value) {
+        const s = Array.from(
+          d.value.getElementsByClassName("db-tab-item")
         );
-        for (const r of o) {
-          const T = o.indexOf(r), b = r.querySelector("label"), S = r.querySelector("input");
-          if (S && b) {
-            if (!S.id) {
+        for (const r of s) {
+          const T = s.indexOf(r), b = r.querySelector("label"), C = r.querySelector("input");
+          if (C && b) {
+            if (!C.id) {
               const F = `${e.value}-tab-${T}`;
-              b.setAttribute("for", F), S.setAttribute(
+              b.setAttribute("for", F), C.setAttribute(
                 "aria-controls",
                 `${e.value}-tab-panel-${T}`
-              ), S.id = F, S.setAttribute("name", e.value);
+              ), C.id = F, C.setAttribute("name", e.value);
             }
-            if (f) {
-              const F = !n.initialSelectedMode || n.initialSelectedMode === "auto", ne = n.initialSelectedIndex == null && T === 0 || n.initialSelectedIndex === T;
-              F && ne && S.click();
+            if (c) {
+              const F = !t.initialSelectedMode || t.initialSelectedMode === "auto", te = t.initialSelectedIndex == null && T === 0 || t.initialSelectedIndex === T;
+              F && te && C.click();
             }
           }
         }
         const y = Array.from(
-          i.value.querySelectorAll(
+          d.value.querySelectorAll(
             ":is(:scope > .db-tab-panel, :scope > db-tab-panel > .db-tab-panel)"
           )
         );
@@ -2462,28 +2465,28 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         }
       }
     }
-    function _(f) {
-      if (n.onIndexChange && f.target) {
-        const o = f.target.closest("ul"), y = (
+    function _(c) {
+      if (t.onIndexChange && c.target) {
+        const s = c.target.closest("ul"), y = (
           // db-tab-item for angular and stencil wrapping elements
-          f.target.closest("db-tab-item") ?? f.target.closest("li")
+          c.target.closest("db-tab-item") ?? c.target.closest("li")
         );
-        o !== null && y !== null && n.onIndexChange(Array.from(o.childNodes).indexOf(y));
+        s !== null && y !== null && t.onIndexChange(Array.from(s.childNodes).indexOf(y));
       }
-      n.onTabSelect && n.onTabSelect(f);
+      t.onTabSelect && t.onTabSelect(c);
     }
-    return (f, o) => (m(), g("div", {
+    return (c, s) => (m(), g("div", {
       ref_key: "_ref",
-      ref: i,
-      id: d.value,
-      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))
+      ref: d,
+      id: o.value,
+      class: E(f(N)("db-tabs", t.class)),
+      "data-orientation": c.orientation,
+      "data-scroll-behavior": c.behavior,
+      "data-alignment": c.alignment ?? "start",
+      "data-width": c.width ?? "auto",
+      onInput: s[0] || (s[0] = async (y) => _(y))
     }, [
-      c.value ? (m(), X(de, {
+      v.value ? (m(), X(oe, {
         key: 0,
         class: "tabs-scroll-left",
         variant: "ghost",
@@ -2492,16 +2495,16 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         noText: !0,
         onClick: (y) => B(!0)
       }, {
-        default: R(() => o[1] || (o[1] = [
+        default: R(() => s[1] || (s[1] = [
           L(" Scroll left ")
         ])),
         _: 1
       }, 8, ["onClick"])) : M("", !0),
-      f.tabs ? (m(), g(C, { key: 1 }, [
-        O(an, null, {
+      c.tabs ? (m(), g(S, { key: 1 }, [
+        O(et, null, {
           default: R(() => [
-            (m(!0), g(C, null, te(h(f.tabs), (y, r) => (m(), X(Da, {
-              key: f.name + "tab-item" + r,
+            (m(!0), g(S, null, ie(h(c.tabs), (y, r) => (m(), X(Sa, {
+              key: c.name + "tab-item" + r,
               active: y.active,
               label: y.label,
               iconAfter: y.iconAfter,
@@ -2511,8 +2514,8 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
           ]),
           _: 1
         }),
-        (m(!0), g(C, null, te(h(f.tabs), (y, r) => (m(), X(tn, {
-          key: f.name + "tab-panel" + r,
+        (m(!0), g(S, null, ie(h(c.tabs), (y, r) => (m(), X(tt, {
+          key: c.name + "tab-panel" + r,
           content: y.content
         }, {
           default: R(() => [
@@ -2521,7 +2524,7 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
           _: 2
         }, 1032, ["content"]))), 128))
       ], 64)) : M("", !0),
-      l.value ? (m(), X(de, {
+      l.value ? (m(), X(oe, {
         key: 2,
         class: "tabs-scroll-right",
         variant: "ghost",
@@ -2530,15 +2533,15 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         noText: !0,
         onClick: (y) => B()
       }, {
-        default: R(() => o[2] || (o[2] = [
+        default: R(() => s[2] || (s[2] = [
           L(" Scroll right ")
         ])),
         _: 1
       }, 8, ["onClick"])) : M("", !0),
-      w(f.$slots, "default")
-    ], 42, dn));
+      w(c.$slots, "default")
+    ], 42, it));
   }
-}), 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({
+}), Gt = ["adaptive", "neutral", "critical", "informational", "warning", "successful"], qt = ["medium", "small", "large", "none"], Ot = ["medium", "small", "large", "none"], Wt = ["left", "right", "top", "bottom", "left-start", "left-end", "right-start", "right-end", "top-start", "top-end", "bottom-start", "bottom-end"], Xt = ["none", "3x-large", "2x-large", "x-large", "large", "medium", "small", "x-small", "2x-small", "3x-small"], Ht = ["horizontal", "vertical"], jt = ["full", "auto"], Yt = ["full", "medium", "large", "small"], Kt = ["none", "slow", "fast"], Jt = ["auto", "fixed"], Qt = ["small", "medium"], ot = ["weak", "strong"], Zt = [...ot, "origin"], xt = ["invalid", "valid", "no-validation"], ei = ["above", "floating"], ai = ["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"], ti = ["time", "true", "false", "date", "page", "step", "location"], ii = ["_self", "_blank", "_parent", "_top"], oi = ["no-referrer", "no-referrer-when-downgrade", "origin", "origin-when-cross-origin", "same-origin", "strict-origin", "strict-origin-when-cross-origin", "unsafe-url"], di = ["start", "center"], dt = ["id", "data-gap", "data-variant", "data-direction", "data-alignment", "data-justify-content", "data-wrap"], li = /* @__PURE__ */ A({
   __name: "stack",
   props: {
     variant: { default: void 0 },
@@ -2554,66 +2557,66 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     autofocus: { type: Boolean },
     gap: { default: void 0 }
   },
-  setup(t) {
-    const n = t, d = u(null);
+  setup(i) {
+    const t = i, o = u(null);
     return (e, a) => (m(), g("div", {
       ref_key: "_ref",
-      ref: d,
+      ref: o,
       id: e.id,
-      class: N(v(A)("db-stack", n.class)),
+      class: E(f(N)("db-stack", t.class)),
       "data-gap": e.gap,
       "data-variant": e.variant,
       "data-direction": e.direction,
       "data-alignment": e.alignment,
       "data-justify-content": e.justifyContent,
-      "data-wrap": v(V)(e.wrap)
+      "data-wrap": f(V)(e.wrap)
     }, [
       w(e.$slots, "default")
-    ], 10, sn));
+    ], 10, dt));
   }
 });
 export {
-  st as AlignmentList,
-  tt as AutoCompleteList,
+  di as AlignmentList,
+  ai as AutoCompleteList,
   he as COLOR,
-  mn as COLORS,
-  bn as COLORS_SIMPLE,
-  pn as COLOR_CONST,
+  pt as COLORS,
+  ht as COLORS_SIMPLE,
+  vt as COLOR_CONST,
   pe as COLOR_SIMPLE,
-  Un as DBAccordion,
-  ja as DBAccordionItem,
-  kn as DBBadge,
-  wn as DBBrand,
-  de as DBButton,
-  In as DBCard,
-  _n as DBCheckbox,
-  $n as DBDivider,
+  zt as DBAccordion,
+  Ha as DBAccordionItem,
+  yt as DBBadge,
+  Bt as DBBrand,
+  oe as DBButton,
+  kt as DBCard,
+  wt as DBCheckbox,
+  It as DBDivider,
   Ye as DBDrawer,
-  Ln as DBHeader,
-  En as DBIcon,
+  _t as DBHeader,
+  $t 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,
+  Lt as DBInput,
+  Et as DBLink,
+  Rt as DBNavigation,
+  Mt as DBNavigationItem,
+  gt as DBNotification,
+  Nt as DBPage,
+  Ut as DBPopover,
+  At as DBRadio,
+  Ft as DBSection,
+  Tt as DBSelect,
+  li as DBStack,
+  Ct as DBSwitch,
+  Sa as DBTabItem,
+  et as DBTabList,
+  tt as DBTabPanel,
+  Vt as DBTabs,
+  St as DBTag,
+  Dt as DBTextarea,
+  Pt as DBTooltip,
   $e as DEFAULT_BACK,
   Le as DEFAULT_BURGER_MENU,
-  ce as DEFAULT_CLOSE_BUTTON,
+  ve as DEFAULT_CLOSE_BUTTON,
   ue as DEFAULT_DATALIST_ID_SUFFIX,
   Ee as DEFAULT_ICON,
   ee as DEFAULT_ID,
@@ -2621,50 +2624,50 @@ export {
   Q as DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
   le as DEFAULT_LABEL,
   K as DEFAULT_MESSAGE_ID_SUFFIX,
-  fe as DEFAULT_PLACEHOLDER,
-  oe as DEFAULT_PLACEHOLDER_ID_SUFFIX,
+  ce as DEFAULT_PLACEHOLDER,
+  se as DEFAULT_PLACEHOLDER_ID_SUFFIX,
   Ne as DEFAULT_ROWS,
   Z as DEFAULT_VALID_MESSAGE,
   J as DEFAULT_VALID_MESSAGE_ID_SUFFIX,
   Ae as DEFAULT_VIEWPORT,
-  hn as DENSITIES,
-  ve as DENSITY,
-  vn as DENSITY_CONST,
+  ft as DENSITIES,
+  fe as DENSITY,
+  ct as DENSITY_CONST,
   Fe as DESKTOP_VIEWPORT,
-  ln as EmphasisList,
-  jn as GapSpacingList,
-  nt as LabelVariantList,
-  dt as LinkCurrentList,
-  lt as LinkReferrerPolicyList,
-  it as LinkTargetList,
-  Xn as MarginList,
-  Jn as MaxWidthList,
+  ot as EmphasisList,
+  Xt as GapSpacingList,
+  ei as LabelVariantList,
+  ti as LinkCurrentList,
+  oi as LinkReferrerPolicyList,
+  ii as LinkTargetList,
+  Ot as MarginList,
+  Yt as MaxWidthList,
   Ke as NavigationItemSafeTriangle,
-  Yn as OrientationList,
-  Hn as PlacementList,
-  Qn as PopoverDelayList,
-  Zn as PopoverWidthList,
+  Ht as OrientationList,
+  Wt as PlacementList,
+  Kt as PopoverDelayList,
+  Jt as PopoverWidthList,
   me as SEMANTIC,
-  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,
+  mt as SEMANTICS,
+  Gt as SemanticList,
+  Qt as SizeList,
+  qt as SpacingList,
+  bt as TESTING_VIEWPORTS,
+  Zt as TagEmphasisList,
+  xt as ValidationList,
+  jt as WidthList,
   re as addAttributeToChildren,
-  A as cls,
+  N as cls,
   H as delay,
   V as getBooleanAsString,
   P as getHideProp,
-  se as handleDataOutside,
+  ne as handleDataOutside,
   Y as hasVoiceOver,
   we as isArrayOfStrings,
   be as isEventTargetNavigationItem,
   ke as isInView,
   q as stringPropVisible,
   G as uuid,
-  fn as visibleInVX,
-  cn as visibleInVY
+  ut as visibleInVX,
+  rt as visibleInVY
 };