@db-ux/v-core-components 1.1.1 → 2.0.0-0-custom-select-16b8cce

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";
-const G = () => {
-  var t, n;
+var sa = Object.defineProperty;
+var ua = (i, t, l) => t in i ? sa(i, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : i[t] = l;
+var pe = (i, t, l) => ua(i, typeof t != "symbol" ? t + "" : t, l);
+import { defineComponent as M, ref as n, createElementBlock as g, openBlock as m, unref as c, normalizeClass as F, renderSlot as L, Fragment as G, createTextVNode as $, toDisplayString as w, createCommentVNode as R, createElementVNode as I, createBlock as x, withCtx as V, onMounted as W, watch as A, createVNode as j, renderList as ce, onUnmounted as qe } from "vue";
+const Y = () => {
+  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);
+}, Ve = (i, t) => {
+  const l = i.children;
+  Object.values(l).forEach((e) => {
+    e.setAttribute(t.key, t.value), e.children.length > 0 && Ve(e, t);
   });
-}, A = (...t) => {
-  let n = "";
-  for (const d of t)
-    if (d)
-      if (typeof d == "string")
-        n += `${d} `;
+}, D = (...i) => {
+  let t = "";
+  for (const l of i)
+    if (l)
+      if (typeof l == "string")
+        t += `${l} `;
       else
-        for (const e in d)
-          d[e] && (n += `${e} `);
-  return n.trim();
-}, fn = (t) => {
+        for (const e in l)
+          l[e] && (t += `${e} `);
+  return t.trim();
+}, Si = (i) => {
   const {
-    left: n,
-    right: d
-  } = t.getBoundingClientRect(), {
+    left: t,
+    right: l
+  } = i.getBoundingClientRect(), {
     innerWidth: e
   } = window;
-  return n >= 0 && d <= e;
-}, cn = (t) => {
+  return t >= 0 && l <= e;
+}, Ei = (i) => {
   const {
-    top: n,
-    bottom: d
-  } = t.getBoundingClientRect(), {
+    top: t,
+    bottom: l
+  } = i.getBoundingClientRect(), {
     innerHeight: e
   } = window;
-  return n >= 0 && d <= e;
-}, ke = (t) => {
-  var _;
+  return t >= 0 && l <= e;
+}, ra = (i) => {
+  var T;
   const {
-    top: n,
-    bottom: d,
+    top: t,
+    bottom: l,
     left: e,
     right: a
-  } = t.getBoundingClientRect(), {
-    innerHeight: c,
-    innerWidth: l
+  } = i.getBoundingClientRect(), {
+    innerHeight: u,
+    innerWidth: s
   } = 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)), {
-    outTop: p,
-    outBottom: i,
-    outLeft: h,
-    outRight: s
+  let b = t < 0, d = l > u, v = e < 0, r = a > s;
+  const _ = i.hasAttribute("data-outside-vy"), S = i.hasAttribute("data-outside-vx"), O = (T = i == null ? void 0 : i.parentElement) == null ? void 0 : T.getBoundingClientRect();
+  return O && (_ && (i.getAttribute("data-outside-vy") === "top" ? b = O.top - (l - O.bottom) < 0 : d = O.bottom + (O.top - t) > u), S && (i.getAttribute("data-outside-vx") === "left" ? v = O.left - (a - O.right) < 0 : r = O.right + (O.left - e) > s)), {
+    outTop: b,
+    outBottom: d,
+    outLeft: v,
+    outRight: r
   };
-}, se = (t) => {
+}, Se = (i) => {
   const {
-    outTop: n,
-    outBottom: d,
+    outTop: t,
+    outBottom: l,
     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,
+  } = ra(i);
+  let u = {};
+  return t || l ? (u = {
+    vy: t ? "top" : "bottom"
+  }, i.setAttribute("data-outside-vy", u.vy)) : i.removeAttribute("data-outside-vy"), e || a ? (u = {
+    ...u,
     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", u.vx)) : i.removeAttribute("data-outside-vx"), u;
+}, ca = (i) => Array.isArray(i) && i.every((t) => typeof t == "string"), va = ["Mac", "iPhone", "iPad", "iPod"], le = () => typeof window < "u" && va.some((i) => window.navigator.userAgent.includes(i)), J = (i, t) => new Promise(() => setTimeout(i, t)), X = (i) => i && String(i), H = (i) => {
+  if (i != null)
+    return X(!i);
+}, ee = (i, t) => t === void 0 ? !!i : t && i, ze = (i) => i.querySelector('input[type="search"]'), fa = ["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"], he = /* @__PURE__ */ M({
   __name: "button",
   props: {
     ariaexpanded: { type: Boolean, default: void 0 },
@@ -104,61 +104,61 @@ 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, l = n(null);
     function e(a) {
-      n.onClick && n.onClick(a);
+      t.onClick && t.onClick(a);
     }
-    return (a, c) => (m(), g("button", {
+    return (a, u) => (m(), g("button", {
       ref_key: "_ref",
-      ref: d,
+      ref: l,
       id: a.id,
-      class: N(v(A)("db-button", n.class)),
+      class: F(c(D)("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": c(H)(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": c(X)(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: u[0] || (u[0] = async (s) => e(s))
     }, [
-      a.text ? (m(), g(C, { key: 0 }, [
-        L(k(a.text), 1)
-      ], 64)) : w(a.$slots, "default", { key: 1 })
-    ], 10, _e));
+      a.text ? (m(), g(G, { key: 0 }, [
+        $(w(a.text), 1)
+      ], 64)) : L(a.$slots, "default", { key: 1 })
+    ], 10, fa));
   }
-}), 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 = {
+}), ye = "OVERWRITE_DEFAULT_ID", ie = "LABEL SHOULD BE SET", Oe = " ", pa = "MESSAGE SHOULD BE SET", Ue = "-label", Ge = "-select", oe = "-message", de = "-valid-message", ne = "-invalid-message", Ae = "-placeholder", Pe = "-datalist", se = "TODO: Add a validMessage", ue = "TODO: Add an invalidMessage", We = "Remove", ha = "Back", ma = "Selected", ba = "BurgerMenu", ga = "brand", ya = 4, Ce = "Close", Ci = "density", Fi = "color";
+var Xe = /* @__PURE__ */ ((i) => (i.FUNCTIONAL = "functional", i.REGULAR = "regular", i.EXPRESSIVE = "expressive", i))(Xe || {});
+const Di = Object.entries(Xe).map(([, i]) => i);
+var He = /* @__PURE__ */ ((i) => (i.PRIMARY = "primary", i))(He || {}), je = /* @__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))(je || {});
+const Ni = Object.entries(je).map(([, i]) => i), Mi = Object.entries(He).map(([, i]) => i);
+var Ye = /* @__PURE__ */ ((i) => (i.CRITICAL = "critical", i.INFORMATIONAL = "informational", i.WARNING = "warning", i.SUCCESSFUL = "successful", i))(Ye || {});
+const Ri = Object.entries(Ye).map(([, i]) => i), ka = {
   width: 390,
   height: 884
-}, Fe = {
+}, Ba = {
   width: 1920,
   height: 1280
-}, yn = [{
+}, zi = [{
   name: "desktop",
-  ...Fe
+  ...Ba
 }, {
   name: "tablet",
   width: 768,
   height: 1024
 }, {
   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({
+  ...ka
+}], wa = ["id", "aria-live", "data-semantic", "data-variant", "data-icon", "data-hide-icon", "data-link-variant"], _a = { key: 0 }, Ia = { key: 1 }, Ui = /* @__PURE__ */ M({
   __name: "notification",
   props: {
     ariaLive: { default: void 0 },
@@ -188,49 +188,49 @@ 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, l = n(null);
     function e(a) {
-      n.onClose && n.onClose();
+      t.onClose && t.onClose();
     }
-    return (a, c) => (m(), g("article", {
+    return (a, u) => (m(), g("article", {
       ref_key: "_ref",
-      ref: d,
+      ref: l,
       id: a.id,
-      class: N(v(A)("db-notification", n.class)),
+      class: F(c(D)("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": c(H)(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),
+      L(a.$slots, "image"),
+      c(ee)(a.headline, a.showHeadline) ? (m(), g("header", _a, w(a.headline), 1)) : R("", !0),
       I("p", null, [
-        a.text ? (m(), g(C, { key: 0 }, [
-          L(k(a.text), 1)
-        ], 64)) : w(a.$slots, "default", { key: 1 })
+        a.text ? (m(), g(G, { key: 0 }, [
+          $(w(a.text), 1)
+        ], 64)) : L(a.$slots, "default", { key: 1 })
       ]),
-      v(q)(a.timestamp, a.showTimestamp) ? (m(), g("span", Ce, k(a.timestamp), 1)) : M("", !0),
-      w(a.$slots, "link"),
-      a.closeable ? (m(), X(de, {
+      c(ee)(a.timestamp, a.showTimestamp) ? (m(), g("span", Ia, w(a.timestamp), 1)) : R("", !0),
+      L(a.$slots, "link"),
+      a.closeable ? (m(), x(he, {
         key: 2,
         icon: "cross",
         variant: "ghost",
         size: "small",
         id: a.closeButtonId,
         noText: !0,
-        onClick: (l) => e()
+        onClick: (s) => e()
       }, {
-        default: R(() => [
-          L(k(a.closeButtonText ?? v(ce)), 1)
+        default: V(() => [
+          $(w(a.closeButtonText ?? c(Ce)), 1)
         ]),
         _: 1
-      }, 8, ["id", "onClick"])) : M("", !0)
-    ], 10, Te));
+      }, 8, ["id", "onClick"])) : R("", !0)
+    ], 10, wa));
   }
-}), De = ["id", "data-semantic", "data-size", "data-emphasis", "data-placement", "data-label"], kn = /* @__PURE__ */ E({
+}), La = ["id", "data-semantic", "data-size", "data-emphasis", "data-placement", "data-label"], Gi = /* @__PURE__ */ M({
   __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);
-    return U(() => {
-      d.value = !0;
-    }), z(
-      () => [e.value, d.value],
+  setup(i) {
+    const t = i, l = n(!1), e = n(null);
+    return W(() => {
+      l.value = !0;
+    }), A(
+      () => [e.value, l.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 && l.value && (a = t.placement) != null && a.startsWith("corner")) {
+          let u = e.value.parentElement;
+          u && u.localName.includes("badge") && (u = u.parentElement), u && u.setAttribute("data-has-badge", "true");
         }
       },
       {
         immediate: !0,
         flush: "post"
       }
-    ), (a, c) => {
-      var l;
+    ), (a, u) => {
+      var s;
       return m(), g("span", {
         ref_key: "_ref",
         ref: e,
         id: a.id,
-        class: N(v(A)("db-badge", n.class)),
+        class: F(c(D)("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": ((s = a.placement) == null ? void 0 : s.startsWith("corner")) && (a.label ?? c(ie))
       }, [
-        a.text ? (m(), g(C, { key: 0 }, [
-          L(k(a.text), 1)
-        ], 64)) : w(a.$slots, "default", { key: 1 })
-      ], 10, De);
+        a.text ? (m(), g(G, { key: 0 }, [
+          $(w(a.text), 1)
+        ], 64)) : L(a.$slots, "default", { key: 1 })
+      ], 10, La);
     };
   }
-}), Me = ["data-icon", "data-hide-icon", "id"], wn = /* @__PURE__ */ E({
+}), $a = ["data-icon", "data-hide-icon", "id"], Pi = /* @__PURE__ */ M({
   __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, l = n(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: l,
+      "data-icon": e.hideLogo ? "none" : e.icon ?? c(ga),
+      "data-hide-icon": c(H)(e.showIcon),
       id: e.id,
-      class: N(v(A)("db-brand", n.class))
+      class: F(c(D)("db-brand", t.class))
     }, [
-      e.text ? (m(), g(C, { key: 0 }, [
-        L(k(e.text), 1)
-      ], 64)) : w(e.$slots, "default", { key: 1 })
-    ], 10, Me));
+      e.text ? (m(), g(G, { key: 0 }, [
+        $(w(e.text), 1)
+      ], 64)) : L(e.$slots, "default", { key: 1 })
+    ], 10, $a));
   }
-}), ze = ["id", "data-behavior", "data-elevation-level", "data-spacing", "role", "tabIndex"], In = /* @__PURE__ */ E({
+}), Ta = ["id", "data-behavior", "data-elevation-level", "data-spacing", "role", "tabIndex"], qi = /* @__PURE__ */ M({
   __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, l = n(null);
     function e(a) {
-      n.onClick && n.onClick(a);
+      t.onClick && t.onClick(a);
     }
-    return (a, c) => (m(), g("div", {
+    return (a, u) => (m(), g("div", {
       ref_key: "_ref",
-      ref: d,
+      ref: l,
       id: a.id,
-      class: N(v(A)("db-card", n.class)),
+      class: F(c(D)("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: u[0] || (u[0] = async (s) => e(s))
     }, [
-      w(a.$slots, "default")
-    ], 10, ze));
+      L(a.$slots, "default")
+    ], 10, Ta));
   }
-}), 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({
+}), ve = (i, t, l = "value") => {
+  i(`update:${l}`, t.target[l]);
+}, Aa = ["id", "data-icon", "data-semantic", "data-size", "data-hide-icon-before"], Q = /* @__PURE__ */ M({
   __name: "infotext",
   props: {
     children: { default: void 0 },
@@ -362,27 +362,27 @@ 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, l = n(null);
     return (e, a) => (m(), g("span", {
       ref_key: "_ref",
-      ref: d,
+      ref: l,
       id: e.id,
-      class: N(v(A)("db-infotext", n.class)),
+      class: F(c(D)("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": c(H)(e.showIcon ?? !0)
     }, [
-      e.text ? (m(), g(C, { key: 0 }, [
-        L(k(e.text), 1)
-      ], 64)) : w(e.$slots, "default", { key: 1 })
-    ], 10, Re));
+      e.text ? (m(), g(G, { key: 0 }, [
+        $(w(e.text), 1)
+      ], 64)) : L(e.$slots, "default", { key: 1 })
+    ], 10, Aa));
   }
-}), Ue = ["data-size", "data-hide-label"], Pe = ["for"], Ve = ["aria-invalid", "data-custom-validity", "id", "name", "checked", "disabled", "value", "required", "aria-describedby"], Ge = {
+}), Sa = ["data-size", "data-hide-label"], Ea = ["for"], Ca = ["aria-invalid", "data-custom-validity", "id", "name", "checked", "disabled", "value", "required", "aria-describedby"], Fa = {
   "data-visually-hidden": "true",
   role: "status"
-}, _n = /* @__PURE__ */ E({
+}, Vi = /* @__PURE__ */ M({
   __name: "checkbox",
   props: {
     indeterminate: { type: Boolean, default: void 0 },
@@ -398,9 +398,10 @@ const gn = Object.entries(me).map(([, t]) => t), Ae = {
     onBlur: { type: Function, default: void 0 },
     focus: { type: Function, default: void 0 },
     onFocus: { type: Function, default: void 0 },
+    ariaDescribedBy: {},
+    form: {},
     validation: { default: void 0 },
     disabled: { type: Boolean, default: void 0 },
-    form: {},
     label: { default: void 0 },
     name: { default: void 0 },
     required: { type: Boolean, default: void 0 },
@@ -418,118 +419,118 @@ 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);
-    U(() => {
+  setup(i, { emit: t }) {
+    const l = t, e = i, a = n(!1), u = n(void 0), s = n(void 0), b = n(void 0), d = n(void 0), v = n(""), r = n(""), _ = n(null);
+    W(() => {
       a.value = !0;
-      const f = e.id ?? `checkbox-${G()}`;
-      c.value = f, l.value = f + K, p.value = f + J, i.value = f + Q;
-    }), z(
-      () => [c.value],
+      const h = e.id ?? `checkbox-${Y()}`;
+      u.value = h, s.value = h + oe, b.value = h + de, d.value = h + ne;
+    }), A(
+      () => [u.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 (u.value) {
+          const h = u.value + oe;
+          s.value = h, b.value = u.value + de, d.value = u.value + ne, ee(e.message, e.showMessage) && (v.value = h);
         }
       },
       {
         immediate: !0,
         flush: "post"
       }
-    ), z(
-      () => [a.value, B.value, e.indeterminate],
+    ), A(
+      () => [a.value, _.value, e.indeterminate],
       () => {
-        B.value && e.indeterminate !== void 0 && (B.value.indeterminate = e.indeterminate);
+        _.value && e.indeterminate !== void 0 && (_.value.indeterminate = e.indeterminate);
       },
       {
         immediate: !0,
         flush: "post"
       }
-    ), z(
-      () => [a.value, B.value, e.checked],
+    ), A(
+      () => [a.value, _.value, e.checked],
       () => {
-        a.value && B.value && (e.checked != null && (B.value.checked = e.checked), a.value = !1);
+        a.value && _.value && (e.checked != null && (_.value.checked = e.checked), a.value = !1);
       },
       {
         immediate: !0,
         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 S(h) {
+      var f, B, p;
+      e.onChange && e.onChange(h), e.change && e.change(h), ve(l, h, "checked"), !((f = _.value) != null && f.validity.valid) || e.validation === "invalid" ? (v.value = d.value, le() && (r.value = e.invalidMessage ?? ((B = _.value) == null ? void 0 : B.validationMessage) ?? ue, J(() => r.value = "", 1e3))) : e.validation === "valid" || (p = _.value) != null && p.validity.valid && e.required ? (v.value = b.value, le() && (r.value = e.validMessage ?? se, J(() => r.value = "", 1e3))) : ee(e.message, e.showMessage) ? v.value = s.value : v.value = "";
     }
-    function D(f) {
-      e.onBlur && e.onBlur(f), e.blur && e.blur(f);
+    function O(h) {
+      e.onBlur && e.onBlur(h), e.blur && e.blur(h);
     }
-    function _(f) {
-      e.onFocus && e.onFocus(f), e.focus && e.focus(f);
+    function T(h) {
+      e.onFocus && e.onFocus(h), e.focus && e.focus(h);
     }
-    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 (h, f) => (m(), g("div", {
+      class: F(c(D)("db-checkbox", e.class)),
+      "data-size": h.size,
+      "data-hide-label": c(H)(h.showLabel)
     }, [
-      I("label", { for: c.value }, [
+      I("label", { for: u.value }, [
         I("input", {
           type: "checkbox",
-          "aria-invalid": f.validation === "invalid",
-          "data-custom-validity": f.validation,
+          "aria-invalid": h.validation === "invalid",
+          "data-custom-validity": h.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)),
-          "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 })
-      ], 8, Pe),
-      v(q)(f.message, f.showMessage) ? (m(), X(W, {
+          ref: _,
+          id: u.value,
+          name: h.name,
+          checked: h.checked,
+          disabled: h.disabled,
+          value: h.value,
+          required: h.required,
+          onChange: f[0] || (f[0] = async (B) => S(B)),
+          onBlur: f[1] || (f[1] = async (B) => O(B)),
+          onFocus: f[2] || (f[2] = async (B) => T(B)),
+          "aria-describedby": v.value
+        }, null, 40, Ca),
+        h.label ? (m(), g(G, { key: 0 }, [
+          $(w(h.label), 1)
+        ], 64)) : L(h.$slots, "default", { key: 1 })
+      ], 8, Ea),
+      c(ee)(h.message, h.showMessage) ? (m(), x(Q, {
         key: 0,
         size: "small",
-        icon: f.messageIcon,
-        id: l.value
+        icon: h.messageIcon,
+        id: s.value
       }, {
-        default: R(() => [
-          L(k(f.message), 1)
+        default: V(() => [
+          $(w(h.message), 1)
         ]),
         _: 1
-      }, 8, ["icon", "id"])) : M("", !0),
-      O(W, {
+      }, 8, ["icon", "id"])) : R("", !0),
+      j(Q, {
         size: "small",
         semantic: "successful",
-        id: p.value
+        id: b.value
       }, {
-        default: R(() => [
-          L(k(f.validMessage ?? v(Z)), 1)
+        default: V(() => [
+          $(w(h.validMessage ?? c(se)), 1)
         ]),
         _: 1
       }, 8, ["id"]),
-      O(W, {
+      j(Q, {
         size: "small",
         semantic: "critical",
-        id: i.value
+        id: d.value
       }, {
-        default: R(() => {
-          var y;
+        default: V(() => {
+          var B;
           return [
-            L(k(f.invalidMessage ?? ((y = B.value) == null ? void 0 : y.validationMessage) ?? v(x)), 1)
+            $(w(h.invalidMessage ?? (((B = _.value) == null ? void 0 : B.validationMessage) || c(ue))), 1)
           ];
         }),
         _: 1
       }, 8, ["id"]),
-      I("span", Ge, k(s.value), 1)
-    ], 10, Ue));
+      I("span", Fa, w(r.value), 1)
+    ], 10, Sa));
   }
-}), qe = ["id", "data-margin", "data-variant", "data-emphasis", "data-width"], $n = /* @__PURE__ */ E({
+}), Da = ["id", "data-margin", "data-variant", "data-emphasis", "data-width"], Oi = /* @__PURE__ */ M({
   __name: "divider",
   props: {
     margin: { default: void 0 },
@@ -543,20 +544,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, l = n(null);
     return (e, a) => (m(), g("div", {
       ref_key: "_ref",
-      ref: d,
+      ref: l,
       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))
-    }, null, 10, qe));
+      class: F(c(D)("db-divider", t.class))
+    }, null, 10, Da));
   }
-}), 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({
+}), Na = ["id", "data-backdrop", "data-variant"], Ma = ["data-spacing", "data-width", "data-direction", "data-rounded"], Ra = { class: "db-drawer-header" }, za = { class: "db-drawer-header-text" }, Ua = { class: "db-drawer-content" }, Ga = /* @__PURE__ */ M({
   __name: "drawer",
   props: {
     backdrop: { default: void 0 },
@@ -577,110 +578,110 @@ 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);
-    U(() => {
-      c();
-    }), z(
-      () => [n.open],
+  setup(i) {
+    const t = i, l = n(null), e = n(null);
+    W(() => {
+      u();
+    }), A(
+      () => [t.open],
       () => {
-        c();
+        u();
       },
       {
         immediate: !0,
         flush: "post"
       }
     );
-    function a(l) {
-      l.key === "Escape" && l.preventDefault(), (l === "close" || l.key === "Escape" || l.target.nodeName === "DIALOG" && l.type === "click" && n.backdrop !== "none") && n.onClose && n.onClose(l);
+    function a(s) {
+      s.key === "Escape" && s.preventDefault(), (s === "close" || s.key === "Escape" || s.target.nodeName === "DIALOG" && s.type === "click" && t.backdrop !== "none") && t.onClose && t.onClose(s);
     }
-    function c() {
-      d.value && (n.open && !d.value.open && (e.value && (e.value.hidden = !1), n.backdrop === "none" || n.variant === "inside" ? d.value.show() : d.value.showModal()), !n.open && d.value.open && (e.value && (e.value.hidden = !0), H(() => {
-        var l;
-        e.value && (e.value.hidden = !1), (l = d.value) == null || l.close();
+    function u() {
+      l.value && (t.open && !l.value.open && (e.value && (e.value.hidden = !1), t.backdrop === "none" || t.variant === "inside" ? l.value.show() : l.value.showModal()), !t.open && l.value.open && (e.value && (e.value.hidden = !0), J(() => {
+        var s;
+        e.value && (e.value.hidden = !1), (s = l.value) == null || s.close();
       }, 401)));
     }
-    return (l, p) => (m(), g("dialog", {
+    return (s, b) => (m(), g("dialog", {
       class: "db-drawer",
-      id: l.id,
+      id: s.id,
       ref_key: "_ref",
-      ref: d,
-      onClick: p[0] || (p[0] = async (i) => {
-        a(i);
+      ref: l,
+      onClick: b[0] || (b[0] = async (d) => {
+        a(d);
       }),
-      onKeydown: p[1] || (p[1] = async (i) => a(i)),
-      "data-backdrop": l.backdrop,
-      "data-variant": l.variant
+      onKeydown: b[1] || (b[1] = async (d) => a(d)),
+      "data-backdrop": s.backdrop,
+      "data-variant": s.variant
     }, [
       I("article", {
         ref_key: "dialogContainerRef",
         ref: e,
-        class: N(v(A)("db-drawer-container", n.class)),
-        "data-spacing": l.spacing,
-        "data-width": l.width,
-        "data-direction": l.direction,
-        "data-rounded": l.rounded
+        class: F(c(D)("db-drawer-container", t.class)),
+        "data-spacing": s.spacing,
+        "data-width": s.width,
+        "data-direction": s.direction,
+        "data-rounded": s.rounded
       }, [
-        I("header", Xe, [
-          I("div", He, [
-            w(l.$slots, "drawer-header")
+        I("header", Ra, [
+          I("div", za, [
+            L(s.$slots, "drawer-header")
           ]),
-          O(de, {
+          j(he, {
             class: "button-close-drawer",
             icon: "cross",
             variant: "ghost",
-            id: l.closeButtonId,
+            id: s.closeButtonId,
             noText: !0,
-            onClick: (i) => a("close")
+            onClick: (d) => a("close")
           }, {
-            default: R(() => [
-              L(k(l.closeButtonText ?? v(ce)), 1)
+            default: V(() => [
+              $(w(s.closeButtonText ?? c(Ce)), 1)
             ]),
             _: 1
           }, 8, ["id", "onClick"])
         ]),
-        I("div", je, [
-          w(l.$slots, "default")
+        I("div", Ua, [
+          L(s.$slots, "default")
         ])
-      ], 10, We)
-    ], 40, Oe));
+      ], 10, Ma)
+    ], 40, Na));
   }
-}), be = (t) => {
-  var d, e;
+}), Ke = (i) => {
+  var l, 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 !!(!((l = t == null ? void 0 : t.classList) != null && l.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) {
-    j(this, "element");
-    j(this, "subNavigation");
-    j(this, "parentSubNavigation", null);
-    j(this, "triangleData");
-    j(this, "initialized", !1);
-    j(this, "mouseX", 0);
-    j(this, "mouseY", 0);
+class Pa {
+  constructor(t, l) {
+    pe(this, "element");
+    pe(this, "subNavigation");
+    pe(this, "parentSubNavigation", null);
+    pe(this, "triangleData");
+    pe(this, "initialized", !1);
+    pe(this, "mouseX", 0);
+    pe(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 = l, !(!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 l, e;
+    const t = ((l = this.parentSubNavigation) == null ? void 0 : l.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 = Se(this.subNavigation), l = this.element.getBoundingClientRect(), e = ((a = this.parentSubNavigation) == null ? void 0 : a.getBoundingClientRect().width) ?? 0;
     this.triangleData = {
-      itemRect: d,
+      itemRect: l,
       parentElementWidth: e,
       subNavigationHeight: this.subNavigation.getBoundingClientRect().height,
-      padding: (e - d.width) / 2,
-      outsideVX: n.vx,
-      outsideVY: n.vy
+      padding: (e - l.width) / 2,
+      outsideVX: t.vx,
+      outsideVY: t.vy
     };
   }
   disableFollow() {
@@ -691,44 +692,44 @@ 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") {
-      const l = `${this.triangleData.itemRect.height + 2 * this.triangleData.padding}px`, p = `${this.triangleData.parentElementWidth - this.triangleData.padding}px`;
+    if (t === "fill-gap") {
+      const s = `${this.triangleData.itemRect.height + 2 * this.triangleData.padding}px`, b = `${this.triangleData.parentElementWidth - this.triangleData.padding}px`;
       return {
-        lb: `${p} ${l}`,
-        lt: `${p} 0`,
+        lb: `${b} ${s}`,
+        lt: `${b} 0`,
         rt: "100% 0",
-        rb: `100% ${l}`
+        rb: `100% ${s}`
       };
     }
-    const d = this.getTriangleTipX(), e = this.getTriangleTipY(), a = `${d}px ${e}px`, c = `${d}px ${e}px`;
+    const l = this.getTriangleTipX(), e = this.getTriangleTipY(), a = `${l}px ${e}px`, u = `${l}px ${e}px`;
     return {
       lb: a,
-      lt: c,
+      lt: u,
       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 l = this.hasMouseEnteredSubNavigation(), e = this.getTriangleCoordinates(l ? "fill-gap" : "safe-triangle");
+    e && (this.element.style.setProperty("--db-navigation-item-clip-path", `polygon(${e.lb}, ${e.lt}, ${e.rt}, ${e.rb})`), l && (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 qa = ["id", "data-width", "data-on-forcing-mobile"], Va = { class: "db-header-drawer-navigation" }, Oa = { class: "db-header-meta-navigation" }, Wa = { class: "db-header-secondary-action" }, Xa = { class: "db-header-meta-navigation" }, Ha = { class: "db-header-navigation-bar" }, ja = { class: "db-header-brand-container" }, Ya = { class: "db-header-navigation-container" }, Ka = { class: "db-header-navigation" }, Ja = { class: "db-header-primary-action" }, Qa = { class: "db-header-action-container" }, Za = { class: "db-header-burger-menu-container" }, xa = { class: "db-header-secondary-action" }, Wi = /* @__PURE__ */ M({
   __name: "header",
   props: {
     brand: {},
@@ -747,16 +748,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);
-    U(() => {
-      e.value = !0, d.value = n.id || "header-" + G();
-    }), z(
+  setup(i) {
+    const t = i, l = n(ye), e = n(!1), a = n(!1), u = n(null);
+    W(() => {
+      e.value = !0, l.value = t.id || "header-" + Y();
+    }), A(
       () => [e.value],
       () => {
-        if (e.value && document && d.value && n.forceMobile) {
-          const i = document.getElementById(d.value);
-          i && re(i, {
+        if (e.value && document && l.value && t.forceMobile) {
+          const d = document.getElementById(l.value);
+          d && Ve(d, {
             key: "data-force-mobile",
             value: "true"
           }), a.value = !0;
@@ -767,83 +768,83 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         flush: "post"
       }
     );
-    function l() {
-      n.onToggle && n.onToggle(!n.drawerOpen);
+    function s() {
+      t.onToggle && t.onToggle(!t.drawerOpen);
     }
-    function p(i) {
-      be(i) && l();
+    function b(d) {
+      Ke(d) && s();
     }
-    return (i, h) => (m(), g("header", {
+    return (d, v) => (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: u,
+      class: F(c(D)("db-header", t.class)),
+      id: l.value,
+      "data-width": d.width,
+      "data-on-forcing-mobile": d.forceMobile && !a.value
     }, [
-      O(Ye, {
+      j(Ga, {
         class: "db-header-drawer",
         spacing: "small",
         rounded: !0,
-        open: i.drawerOpen,
-        onClose: () => l()
+        open: d.drawerOpen,
+        onClose: () => s()
       }, {
-        default: R(() => [
-          I("div", Qe, [
+        default: V(() => [
+          I("div", Va, [
             I("div", {
               class: "db-header-navigation",
-              onClick: h[0] || (h[0] = async (s) => p(s))
+              onClick: v[0] || (v[0] = async (r) => b(r))
             }, [
-              w(i.$slots, "default")
+              L(d.$slots, "default")
             ]),
-            I("div", Ze, [
-              w(i.$slots, "meta-navigation")
+            I("div", Oa, [
+              L(d.$slots, "meta-navigation")
             ])
           ]),
-          I("div", xe, [
-            w(i.$slots, "secondary-action")
+          I("div", Wa, [
+            L(d.$slots, "secondary-action")
           ])
         ]),
         _: 3
       }, 8, ["open", "onClose"]),
-      I("div", ea, [
-        w(i.$slots, "meta-navigation")
+      I("div", Xa, [
+        L(d.$slots, "meta-navigation")
       ]),
-      I("div", aa, [
-        I("div", na, [
-          w(i.$slots, "brand")
+      I("div", Ha, [
+        I("div", ja, [
+          L(d.$slots, "brand")
         ]),
-        I("div", ta, [
-          I("div", da, [
-            w(i.$slots, "default")
+        I("div", Ya, [
+          I("div", Ka, [
+            L(d.$slots, "default")
           ]),
-          I("div", ia, [
-            w(i.$slots, "primary-action")
+          I("div", Ja, [
+            L(d.$slots, "primary-action")
           ])
         ]),
-        I("div", la, [
-          I("div", sa, [
-            O(de, {
+        I("div", Qa, [
+          I("div", Za, [
+            j(he, {
               icon: "menu",
               variant: "ghost",
-              id: d.value + "-burger-menu",
+              id: l.value + "-burger-menu",
               noText: !0,
-              onClick: () => l()
+              onClick: () => s()
             }, {
-              default: R(() => [
-                L(k(i.burgerMenuLabel ?? v(Le)), 1)
+              default: V(() => [
+                $(w(d.burgerMenuLabel ?? c(ba)), 1)
               ]),
               _: 1
             }, 8, ["id", "onClick"])
           ]),
-          I("div", oa, [
-            w(i.$slots, "secondary-action")
+          I("div", xa, [
+            L(d.$slots, "secondary-action")
           ])
         ])
       ])
-    ], 10, Je));
+    ], 10, qa));
   }
-}), ua = ["id", "data-icon", "data-icon-weight", "data-icon-variant"], En = /* @__PURE__ */ E({
+}), et = ["id", "data-icon", "data-icon-weight", "data-icon-variant"], Xi = /* @__PURE__ */ M({
   __name: "icon",
   props: {
     variant: { default: void 0 },
@@ -857,27 +858,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, l = n(null);
     return (e, a) => (m(), g("span", {
       "aria-hidden": "true",
       ref_key: "_ref",
-      ref: d,
+      ref: l,
       id: e.id,
-      class: N(v(A)("db-icon", n.class)),
+      class: F(c(D)("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 }, [
-        L(k(e.text), 1)
-      ], 64)) : w(e.$slots, "default", { key: 1 })
-    ], 10, ua));
+      e.text ? (m(), g(G, { key: 0 }, [
+        $(w(e.text), 1)
+      ], 64)) : L(e.$slots, "default", { key: 1 })
+    ], 10, et));
   }
-}), 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 = {
+}), at = ["data-variant", "data-hide-label", "data-hide-icon", "data-icon", "data-icon-after", "data-hide-icon-after"], tt = ["for"], it = ["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"], lt = ["id"], ot = ["value"], dt = {
   "data-visually-hidden": "true",
   role: "status"
-}, Nn = /* @__PURE__ */ E({
+}, nt = /* @__PURE__ */ M({
   __name: "input",
   props: {
     dataList: { default: void 0 },
@@ -904,9 +905,10 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     onBlur: { type: Function, default: void 0 },
     focus: { type: Function, default: void 0 },
     onFocus: { type: Function, default: void 0 },
+    ariaDescribedBy: { default: void 0 },
+    form: { default: void 0 },
     validation: { default: void 0 },
     disabled: { type: Boolean, default: void 0 },
-    form: { default: void 0 },
     label: { default: void 0 },
     name: { default: void 0 },
     required: { type: Boolean, default: void 0 },
@@ -926,142 +928,142 @@ 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);
-    U(() => {
-      const r = e.id ?? `input-${G()}`;
-      a.value = r, c.value = r + K, l.value = r + J, p.value = r + Q, i.value = r + ue;
-    }), z(
+  setup(i, { emit: t }) {
+    const l = t, e = i, a = n(void 0), u = n(void 0), s = n(void 0), b = n(void 0), d = n(void 0), v = n(""), r = n(""), _ = n(""), S = n(null);
+    W(() => {
+      const p = e.id ?? `input-${Y()}`;
+      a.value = p, u.value = p + oe, s.value = p + de, b.value = p + ne, d.value = p + Pe;
+    }), A(
       () => [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);
+          const p = a.value + oe;
+          u.value = p, s.value = a.value + de, b.value = a.value + ne, d.value = e.dataListId ?? a.value + Pe, ee(e.message, e.showMessage) && (v.value = p);
         }
       },
       {
         immediate: !0,
         flush: "post"
       }
-    ), z(
+    ), A(
       () => [e.value],
       () => {
-        s.value = e.value;
+        r.value = e.value;
       },
       {
         immediate: !0,
         flush: "post"
       }
     );
-    function D(r) {
-      s.value = r.target.value, e.onInput && e.onInput(r), e.input && e.input(r);
+    function O(p) {
+      r.value = p.target.value, e.onInput && e.onInput(p), e.input && e.input(p);
     }
-    function _(r) {
-      var T, b, S;
-      e.onChange && e.onChange(r), e.change && e.change(r), ae(d, r), !((T = $.value) != null && T.validity.valid) || e.validation === "invalid" ? (h.value = p.value, Y() && (B.value = e.invalidMessage ?? ((b = $.value) == null ? void 0 : b.validationMessage) ?? x, H(() => B.value = "", 1e3))) : e.validation === "valid" || (S = $.value) != null && S.validity.valid && (e.required || e.minLength || e.maxLength || e.pattern) ? (h.value = l.value, Y() && (B.value = e.validMessage ?? Z, H(() => B.value = "", 1e3))) : q(e.message, e.showMessage) ? h.value = c.value : h.value = "";
+    function T(p) {
+      var E, y, z;
+      e.onChange && e.onChange(p), e.change && e.change(p), ve(l, p), !((E = S.value) != null && E.validity.valid) || e.validation === "invalid" ? (v.value = b.value, le() && (_.value = e.invalidMessage ?? ((y = S.value) == null ? void 0 : y.validationMessage) ?? ue, J(() => _.value = "", 1e3))) : e.validation === "valid" || (z = S.value) != null && z.validity.valid && (e.required || e.minLength || e.maxLength || e.pattern) ? (v.value = s.value, le() && (_.value = e.validMessage ?? se, J(() => _.value = "", 1e3))) : ee(e.message, e.showMessage) ? v.value = u.value : v.value = "";
     }
-    function f(r) {
-      e.onBlur && e.onBlur(r), e.blur && e.blur(r);
+    function h(p) {
+      e.onBlur && e.onBlur(p), e.blur && e.blur(p);
     }
-    function o(r) {
-      e.onFocus && e.onFocus(r), e.focus && e.focus(r);
+    function f(p) {
+      e.onFocus && e.onFocus(p), e.focus && e.focus(p);
     }
-    function y(r) {
+    function B(p) {
       return Array.from(
-        (we(r) ? r.map((T) => ({
-          value: T,
+        (ca(p) ? p.map((E) => ({
+          value: E,
           label: void 0
-        })) : r) || []
+        })) : p) || []
       );
     }
-    return (r, T) => (m(), g("div", {
-      class: N(v(A)("db-input", e.class)),
-      "data-variant": r.variant,
-      "data-hide-label": v(P)(r.showLabel),
-      "data-hide-icon": v(P)(r.showIcon),
-      "data-icon": r.icon,
-      "data-icon-after": r.iconAfter,
-      "data-hide-icon-after": v(P)(r.showIcon)
+    return (p, E) => (m(), g("div", {
+      class: F(c(D)("db-input", e.class)),
+      "data-variant": p.variant,
+      "data-hide-label": c(H)(p.showLabel),
+      "data-hide-icon": c(H)(p.showIcon),
+      "data-icon": p.icon,
+      "data-icon-after": p.iconAfter,
+      "data-hide-icon-after": c(H)(p.showIcon)
     }, [
-      I("label", { for: a.value }, k(r.label ?? v(le)), 9, fa),
+      I("label", { for: a.value }, w(p.label ?? c(ie)), 9, tt),
       I("input", {
-        "aria-invalid": r.validation === "invalid",
-        "data-custom-validity": r.validation,
+        "aria-invalid": p.validation === "invalid",
+        "data-custom-validity": p.validation,
         ref_key: "_ref",
-        ref: $,
+        ref: S,
         id: a.value,
-        name: r.name,
-        type: r.type || "text",
-        placeholder: r.placeholder ?? v(fe),
-        disabled: r.disabled,
-        required: r.required,
-        step: r.step,
-        value: r.value ?? s.value,
-        maxLength: r.maxLength,
-        minLength: r.minLength,
-        max: r.max,
-        min: r.min,
-        readOnly: r.readOnly,
-        form: r.form,
-        pattern: r.pattern,
-        size: r.size,
-        autoComplete: r.autocomplete,
-        autoFocus: r.autofocus,
-        onInput: T[0] || (T[0] = async (b) => D(b)),
-        onChange: T[1] || (T[1] = async (b) => _(b)),
-        onBlur: T[2] || (T[2] = async (b) => f(b)),
-        onFocus: T[3] || (T[3] = async (b) => o(b)),
-        list: r.dataList && i.value,
-        "aria-describedby": h.value
-      }, null, 40, ca),
-      r.dataList ? (m(), g("datalist", {
+        name: p.name,
+        type: p.type || "text",
+        placeholder: p.placeholder ?? c(Oe),
+        disabled: p.disabled,
+        required: p.required,
+        step: p.step,
+        value: p.value ?? r.value,
+        maxLength: p.maxLength,
+        minLength: p.minLength,
+        max: p.max,
+        min: p.min,
+        readOnly: p.readOnly,
+        form: p.form,
+        pattern: p.pattern,
+        size: p.size,
+        autoComplete: p.autocomplete,
+        autoFocus: p.autofocus,
+        onInput: E[0] || (E[0] = async (y) => O(y)),
+        onChange: E[1] || (E[1] = async (y) => T(y)),
+        onBlur: E[2] || (E[2] = async (y) => h(y)),
+        onFocus: E[3] || (E[3] = async (y) => f(y)),
+        list: p.dataList && d.value,
+        "aria-describedby": p.ariaDescribedBy ?? v.value
+      }, null, 40, it),
+      p.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,
-          value: b.value
-        }, k(b.label), 9, pa))), 128))
-      ], 8, va)) : M("", !0),
-      w(r.$slots, "default"),
-      v(q)(r.message, r.showMessage) ? (m(), X(W, {
+        (m(!0), g(G, null, ce(B(p.dataList), (y) => (m(), g("option", {
+          key: d.value + "-option-" + y.value,
+          value: y.value
+        }, w(y.label), 9, ot))), 128))
+      ], 8, lt)) : R("", !0),
+      L(p.$slots, "default"),
+      c(ee)(p.message, p.showMessage) ? (m(), x(Q, {
         key: 1,
         size: "small",
-        icon: r.messageIcon,
-        id: c.value
+        icon: p.messageIcon,
+        id: u.value
       }, {
-        default: R(() => [
-          L(k(r.message), 1)
+        default: V(() => [
+          $(w(p.message), 1)
         ]),
         _: 1
-      }, 8, ["icon", "id"])) : M("", !0),
-      O(W, {
+      }, 8, ["icon", "id"])) : R("", !0),
+      j(Q, {
         size: "small",
         semantic: "successful",
-        id: l.value
+        id: s.value
       }, {
-        default: R(() => [
-          L(k(r.validMessage ?? v(Z)), 1)
+        default: V(() => [
+          $(w(p.validMessage ?? c(se)), 1)
         ]),
         _: 1
       }, 8, ["id"]),
-      O(W, {
+      j(Q, {
         size: "small",
         semantic: "critical",
-        id: p.value
+        id: b.value
       }, {
-        default: R(() => {
-          var b;
+        default: V(() => {
+          var y;
           return [
-            L(k(r.invalidMessage ?? ((b = $.value) == null ? void 0 : b.validationMessage) ?? v(x)), 1)
+            $(w(p.invalidMessage ?? (((y = S.value) == null ? void 0 : y.validationMessage) || c(ue))), 1)
           ];
         }),
         _: 1
       }, 8, ["id"]),
-      I("span", ha, k(B.value), 1)
-    ], 10, ra));
+      I("span", dt, w(_.value), 1)
+    ], 10, at));
   }
-}), 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({
+}), st = ["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"], Hi = /* @__PURE__ */ M({
   __name: "link",
   props: {
     content: { default: void 0 },
@@ -1087,44 +1089,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, l = n(null);
     function e(a) {
-      n.onClick && n.onClick(a);
+      t.onClick && t.onClick(a);
     }
-    return (a, c) => (m(), g("a", {
+    return (a, u) => (m(), g("a", {
       ref_key: "_ref",
-      ref: d,
+      ref: l,
       id: a.id,
-      class: N(v(A)("db-link", n.class)),
+      class: F(c(D)("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": c(X)(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": c(H)(a.showIcon ?? !0),
       "data-variant": a.variant,
       "data-content": a.content || "internal",
-      onClick: c[0] || (c[0] = async (l) => e(l))
+      onClick: u[0] || (u[0] = async (s) => e(s))
     }, [
-      a.text ? (m(), g(C, { key: 0 }, [
-        L(k(a.text), 1)
-      ], 64)) : w(a.$slots, "default", { key: 1 })
-    ], 10, ma));
+      a.text ? (m(), g(G, { key: 0 }, [
+        $(w(a.text), 1)
+      ], 64)) : L(a.$slots, "default", { key: 1 })
+    ], 10, st));
   }
-}), ba = ["id", "data-variant", "data-fade-in", "data-fonts-loaded"], ga = { class: "db-main" }, Fn = /* @__PURE__ */ E({
+}), ut = ["id", "data-variant", "data-fade-in", "data-fonts-loaded"], ji = /* @__PURE__ */ M({
   __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 +1136,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;
-    }), Be(() => {
+  setup(i) {
+    const t = i, l = n(!1), e = n(null);
+    return typeof window < "u" && document && (t.documentOverflow === "hidden" || t.variant === "fixed" && t.documentOverflow !== "auto") && document.documentElement.classList.add("db-page-document"), W(() => {
+      l.value = !t.fadeIn, document && t.fadeIn ? document.fonts.ready.then(() => {
+        l.value = !0;
+      }) : l.value = !0;
+    }), qe(() => {
       typeof window < "u" && document.documentElement.classList.contains("db-page-document") && document.documentElement.classList.remove("db-page-document");
-    }), (a, c) => (m(), g("div", {
+    }), (a, u) => (m(), g("div", {
       ref_key: "_ref",
       ref: e,
       id: a.id,
-      class: N(v(A)("db-page", n.class)),
+      class: F(c(D)("db-page", t.class)),
       "data-variant": a.variant,
       "data-fade-in": a.fadeIn,
-      "data-fonts-loaded": v(V)(d.value)
+      "data-fonts-loaded": c(X)(l.value)
     }, [
-      w(a.$slots, "header"),
-      I("main", ga, [
-        w(a.$slots, "default")
-      ]),
-      w(a.$slots, "footer")
-    ], 10, ba));
+      L(a.$slots, "header"),
+      I("main", {
+        class: F(c(D)("db-main", a.mainClass))
+      }, [
+        L(a.$slots, "default")
+      ], 2),
+      L(a.$slots, "footer")
+    ], 10, ut));
   }
-}), ya = ["data-size", "data-hide-label", "for"], Ba = ["aria-invalid", "data-custom-validity", "id", "name", "checked", "disabled", "aria-describedby", "value", "required"], Tn = /* @__PURE__ */ E({
+}), rt = ["data-size", "data-hide-label", "for"], ct = ["aria-invalid", "data-custom-validity", "id", "name", "checked", "disabled", "aria-describedby", "value", "required"], Yi = /* @__PURE__ */ M({
   __name: "radio",
   props: {
     describedbyid: { default: void 0 },
@@ -1172,9 +1177,10 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     onBlur: { type: Function, default: void 0 },
     focus: { type: Function, default: void 0 },
     onFocus: { type: Function, default: void 0 },
+    ariaDescribedBy: {},
+    form: {},
     validation: { default: void 0 },
     disabled: { type: Boolean, default: void 0 },
-    form: {},
     label: { default: void 0 },
     name: { default: void 0 },
     required: { type: Boolean, default: void 0 },
@@ -1184,58 +1190,58 @@ 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);
-    U(() => {
-      a.value = !0, c.value = e.id ?? `radio-${G()}`;
-    }), z(
-      () => [a.value, l.value, e.checked],
+  setup(i, { emit: t }) {
+    const l = t, e = i, a = n(!1), u = n(void 0), s = n(null);
+    W(() => {
+      a.value = !0, u.value = e.id ?? `radio-${Y()}`;
+    }), A(
+      () => [a.value, s.value, e.checked],
       () => {
-        e.checked && a.value && l.value && (l.value.checked = !0);
+        e.checked && a.value && s.value && (s.value.checked = !0);
       },
       {
         immediate: !0,
         flush: "post"
       }
     );
-    function p(s) {
-      e.onChange && e.onChange(s), e.change && e.change(s), ae(d, s);
+    function b(r) {
+      e.onChange && e.onChange(r), e.change && e.change(r), ve(l, r);
     }
-    function i(s) {
-      e.onBlur && e.onBlur(s), e.blur && e.blur(s);
+    function d(r) {
+      e.onBlur && e.onBlur(r), e.blur && e.blur(r);
     }
-    function h(s) {
-      e.onFocus && e.onFocus(s), e.focus && e.focus(s);
+    function v(r) {
+      e.onFocus && e.onFocus(r), e.focus && e.focus(r);
     }
-    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 (r, _) => (m(), g("label", {
+      "data-size": r.size,
+      "data-hide-label": c(H)(r.showLabel),
+      class: F(c(D)("db-radio", e.class)),
+      for: u.value
     }, [
       I("input", {
         type: "radio",
-        "aria-invalid": s.validation === "invalid",
-        "data-custom-validity": s.validation,
+        "aria-invalid": r.validation === "invalid",
+        "data-custom-validity": r.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,
-        onChange: B[0] || (B[0] = async ($) => p($)),
-        onBlur: B[1] || (B[1] = async ($) => i($)),
-        onFocus: B[2] || (B[2] = async ($) => h($))
-      }, null, 40, Ba),
-      s.label ? (m(), g(C, { key: 0 }, [
-        L(k(s.label), 1)
-      ], 64)) : w(s.$slots, "default", { key: 1 })
-    ], 10, ya));
+        ref: s,
+        id: u.value,
+        name: r.name,
+        checked: r.checked,
+        disabled: r.disabled,
+        "aria-describedby": r.describedbyid,
+        value: r.value,
+        required: r.required,
+        onChange: _[0] || (_[0] = async (S) => b(S)),
+        onBlur: _[1] || (_[1] = async (S) => d(S)),
+        onFocus: _[2] || (_[2] = async (S) => v(S))
+      }, null, 40, ct),
+      r.label ? (m(), g(G, { key: 0 }, [
+        $(w(r.label), 1)
+      ], 64)) : L(r.$slots, "default", { key: 1 })
+    ], 10, rt));
   }
-}), ka = ["id", "data-spacing", "data-width"], Sn = /* @__PURE__ */ E({
+}), vt = ["id", "data-spacing", "data-width"], Ki = /* @__PURE__ */ M({
   __name: "section",
   props: {
     children: { default: void 0 },
@@ -1247,29 +1253,27 @@ 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);
-    return U(() => {
-      d.value = n.id || "section-" + G();
-    }), (a, c) => (m(), g("section", {
+  setup(i) {
+    const t = i, l = n(ye), e = n(null);
+    return W(() => {
+      l.value = t.id || "section-" + Y();
+    }), (a, u) => (m(), g("section", {
       ref_key: "_ref",
       ref: e,
-      id: d.value,
-      class: N(v(A)("db-section", n.class)),
+      id: l.value,
+      class: F(c(D)("db-section", t.class)),
       "data-spacing": a.spacing || "medium",
       "data-width": a.width
     }, [
-      w(a.$slots, "default")
-    ], 10, ka));
+      L(a.$slots, "default")
+    ], 10, vt));
   }
-}), 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 = {
+}), ft = ["data-variant", "data-hide-label", "data-icon", "data-hide-icon"], pt = ["for"], ht = ["aria-invalid", "data-custom-validity", "required", "disabled", "id", "name", "size", "value", "autocomplete", "multiple", "aria-describedby"], mt = ["label"], bt = ["value", "selected", "disabled"], gt = ["value", "disabled", "selected"], yt = ["id"], kt = {
   "data-visually-hidden": "true",
   role: "status"
-}, Cn = /* @__PURE__ */ E({
+}, Ji = /* @__PURE__ */ M({
   __name: "select",
   props: {
-    description: {},
-    options: { default: void 0 },
     children: { default: void 0 },
     className: { default: void 0 },
     class: {},
@@ -1285,9 +1289,10 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     onFocus: { type: Function, default: void 0 },
     input: { type: Function, default: void 0 },
     onInput: { type: Function, default: void 0 },
+    ariaDescribedBy: {},
+    form: {},
     validation: { default: void 0 },
     disabled: { type: Boolean, default: void 0 },
-    form: {},
     label: { default: void 0 },
     name: { default: void 0 },
     required: { type: Boolean, default: void 0 },
@@ -1302,145 +1307,149 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     messageIcon: { default: void 0 },
     autocomplete: { default: void 0 },
     showMessage: { type: Boolean, default: void 0 },
+    multiple: { type: Boolean, default: void 0 },
+    options: { default: void 0 },
     showIcon: { type: Boolean, default: void 0 },
     size: { default: void 0 }
   },
   emits: ["update:value"],
-  setup(t, { emit: n }) {
-    const d = n, e = t, a = u(void 0), c = u(void 0), l = u(void 0), p = u(void 0), i = u(""), h = u(""), s = u(""), B = u(!1), $ = u(""), D = u(null);
-    U(() => {
-      B.value = !0;
-      const b = e.id ?? `select-${G()}`;
-      a.value = b, c.value = b + K, l.value = b + J, p.value = b + Q, i.value = b + oe;
-    }), z(
-      () => [a.value, B.value],
+  setup(i, { emit: t }) {
+    const l = t, e = i, a = n(void 0), u = n(void 0), s = n(void 0), b = n(void 0), d = n(""), v = n(""), r = n(""), _ = n(!1), S = n(""), O = n(null);
+    W(() => {
+      _.value = !0;
+      const y = e.id ?? `select-${Y()}`;
+      a.value = y, u.value = y + oe, s.value = y + de, b.value = y + ne, d.value = y + Ae;
+    }), A(
+      () => [a.value, _.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;
+        if (a.value && _.value) {
+          const y = a.value + oe, z = a.value + Ae;
+          u.value = y, s.value = a.value + de, b.value = a.value + ne, d.value = z, ee(e.message, e.showMessage) ? v.value = y : v.value = z, _.value = !1;
         }
       },
       {
         immediate: !0,
         flush: "post"
       }
-    ), z(
+    ), A(
       () => [e.value],
       () => {
-        s.value = e.value;
+        r.value = e.value;
       },
       {
         immediate: !0,
         flush: "post"
       }
     );
-    function _(b) {
-      e.onClick && e.onClick(b);
+    function T(y) {
+      e.onClick && e.onClick(y);
     }
-    function f(b) {
-      s.value = b.target.value, e.onInput && e.onInput(b), e.input && e.input(b);
+    function h(y) {
+      r.value = y.target.value, e.onInput && e.onInput(y), e.input && e.input(y);
     }
-    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 f(y) {
+      var z, C, U;
+      e.onChange && e.onChange(y), e.change && e.change(y), ve(l, y), !((z = O.value) != null && z.validity.valid) || e.validation === "invalid" ? (v.value = b.value, le() && (S.value = e.invalidMessage ?? ((C = O.value) == null ? void 0 : C.validationMessage) ?? ue, J(() => S.value = "", 1e3))) : e.validation === "valid" || (U = O.value) != null && U.validity.valid && e.required ? (v.value = s.value, le() && (S.value = e.validMessage ?? se, J(() => S.value = "", 1e3))) : ee(e.message, e.showMessage) ? v.value = u.value : v.value = d.value;
     }
-    function y(b) {
-      e.onBlur && e.onBlur(b), e.blur && e.blur(b);
+    function B(y) {
+      e.onBlur && e.onBlur(y), e.blur && e.blur(y);
     }
-    function r(b) {
-      e.onFocus && e.onFocus(b), e.focus && e.focus(b);
+    function p(y) {
+      e.onFocus && e.onFocus(y), e.focus && e.focus(y);
     }
-    function T(b) {
-      return b.label ?? b.value.toString();
+    function E(y) {
+      var z;
+      return y.label ?? ((z = y.value) == null ? void 0 : z.toString());
     }
-    return (b, S) => (m(), g("div", {
-      class: N(v(A)("db-select", e.class)),
-      "data-variant": b.variant,
-      "data-hide-label": v(P)(b.showLabel),
-      "data-icon": b.icon,
-      "data-hide-icon": v(P)(b.showIcon)
+    return (y, z) => (m(), g("div", {
+      class: F(c(D)("db-select", e.class)),
+      "data-variant": y.variant,
+      "data-hide-label": c(H)(y.showLabel),
+      "data-icon": y.icon,
+      "data-hide-icon": c(H)(y.showIcon)
     }, [
-      I("label", { for: a.value }, k(b.label ?? v(le)), 9, Ia),
+      I("label", { for: a.value }, w(y.label ?? c(ie)), 9, pt),
       I("select", {
-        "aria-invalid": b.validation === "invalid",
-        "data-custom-validity": b.validation,
+        "aria-invalid": y.validation === "invalid",
+        "data-custom-validity": y.validation,
         ref_key: "_ref",
-        ref: D,
-        required: b.required,
-        disabled: b.disabled,
+        ref: O,
+        required: y.required,
+        disabled: y.disabled,
         id: a.value,
-        name: b.name,
-        size: b.size,
-        value: b.value ?? s.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)),
-        "aria-describedby": h.value
+        name: y.name,
+        size: y.size,
+        value: y.value ?? r.value,
+        autocomplete: y.autocomplete,
+        multiple: y.multiple,
+        onInput: z[0] || (z[0] = async (C) => h(C)),
+        onClick: z[1] || (z[1] = async (C) => T(C)),
+        onChange: z[2] || (z[2] = async (C) => f(C)),
+        onBlur: z[3] || (z[3] = async (C) => B(C)),
+        onFocus: z[4] || (z[4] = async (C) => p(C)),
+        "aria-describedby": v.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 }, [
-          F.options ? (m(), g("optgroup", {
+        z[5] || (z[5] = I("option", { hidden: !0 }, null, -1)),
+        y.options ? (m(!0), g(G, { key: 0 }, ce(y.options, (C, U) => (m(), g(G, { key: U }, [
+          C.options ? (m(), g("optgroup", {
             key: 0,
-            label: T(F)
+            label: E(C)
           }, [
-            (m(!0), g(C, null, te(F.options, (ie, on) => (m(), g("option", {
-              key: ie.value.toString(),
-              value: ie.value,
-              selected: ie.selected,
-              disabled: ie.disabled
-            }, k(T(ie)), 9, La))), 128))
-          ], 8, $a)) : M("", !0),
-          F.options ? M("", !0) : (m(), g("option", {
+            (m(!0), g(G, null, ce(C.options, (K, fe) => (m(), g("option", {
+              key: K.value.toString(),
+              value: K.value,
+              selected: K.selected,
+              disabled: K.disabled
+            }, w(E(K)), 9, bt))), 128))
+          ], 8, mt)) : R("", !0),
+          C.options ? R("", !0) : (m(), g("option", {
             key: 1,
-            value: F.value,
-            disabled: F.disabled,
-            selected: F.selected
-          }, k(T(F)), 9, Ea))
-        ], 64))), 128)) : M("", !0),
-        w(b.$slots, "default")
-      ], 40, _a),
-      I("span", { id: i.value }, k(b.placeholder ?? b.label), 9, Na),
-      v(q)(b.message, b.showMessage) ? (m(), X(W, {
+            value: C.value,
+            disabled: C.disabled,
+            selected: C.selected
+          }, w(E(C)), 9, gt))
+        ], 64))), 128)) : R("", !0),
+        L(y.$slots, "default")
+      ], 40, ht),
+      I("span", { id: d.value }, w(y.placeholder ?? y.label), 9, yt),
+      c(ee)(y.message, y.showMessage) ? (m(), x(Q, {
         key: 0,
         size: "small",
-        icon: b.messageIcon,
-        id: c.value
+        icon: y.messageIcon,
+        id: u.value
       }, {
-        default: R(() => [
-          L(k(b.message), 1)
+        default: V(() => [
+          $(w(y.message), 1)
         ]),
         _: 1
-      }, 8, ["icon", "id"])) : M("", !0),
-      O(W, {
+      }, 8, ["icon", "id"])) : R("", !0),
+      j(Q, {
         size: "small",
         semantic: "successful",
-        id: l.value
+        id: s.value
       }, {
-        default: R(() => [
-          L(k(b.validMessage ?? v(Z)), 1)
+        default: V(() => [
+          $(w(y.validMessage ?? c(se)), 1)
         ]),
         _: 1
       }, 8, ["id"]),
-      O(W, {
+      j(Q, {
         size: "small",
         semantic: "critical",
-        id: p.value
+        id: b.value
       }, {
-        default: R(() => {
-          var F;
+        default: V(() => {
+          var C;
           return [
-            L(k(b.invalidMessage ?? ((F = D.value) == null ? void 0 : F.validationMessage) ?? v(x)), 1)
+            $(w(y.invalidMessage ?? (((C = O.value) == null ? void 0 : C.validationMessage) || c(ue))), 1)
           ];
         }),
         _: 1
       }, 8, ["id"]),
-      I("span", Aa, k($.value), 1)
-    ], 10, wa));
+      I("span", kt, w(S.value), 1)
+    ], 10, ft));
   }
-}), 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({
+}), Bt = ["data-visual-aid", "data-size", "data-hide-label", "data-emphasis", "for"], wt = ["id", "aria-checked", "checked", "value", "disabled", "aria-describedby", "aria-invalid", "data-custom-validity", "name", "required", "data-aid-icon", "data-aid-icon-after"], Qi = /* @__PURE__ */ M({
   __name: "switch",
   props: {
     visualAid: { type: Boolean, default: void 0 },
@@ -1456,9 +1465,10 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     onBlur: { type: Function, default: void 0 },
     focus: { type: Function, default: void 0 },
     onFocus: { type: Function, default: void 0 },
+    ariaDescribedBy: {},
+    form: {},
     validation: { default: void 0 },
     disabled: { type: Boolean, default: void 0 },
-    form: {},
     label: { default: void 0 },
     name: { default: void 0 },
     required: { type: Boolean, default: void 0 },
@@ -1471,65 +1481,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);
-    U(() => {
-      a.value = e.id ?? `switch-${G()}`;
-    }), z(
+  setup(i, { emit: t }) {
+    const l = t, e = i, a = n(void 0), u = n(!1), s = n(null);
+    W(() => {
+      a.value = e.id ?? `switch-${Y()}`;
+    }), A(
       () => [e.checked],
       () => {
-        e.checked !== void 0 && e.checked !== null && (c.value = !!e.checked);
+        e.checked !== void 0 && e.checked !== null && (u.value = !!e.checked);
       },
       {
         immediate: !0,
         flush: "post"
       }
     );
-    function p(s) {
-      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");
+    function b(r) {
+      var _;
+      e.onChange && e.onChange(r), e.change && e.change(r), u.value = (_ = r.target) == null ? void 0 : _.checked, ve(l, r, "checked");
     }
-    function i(s) {
-      e.onBlur && e.onBlur(s), e.blur && e.blur(s);
+    function d(r) {
+      e.onBlur && e.onBlur(r), e.blur && e.blur(r);
     }
-    function h(s) {
-      e.onFocus && e.onFocus(s), e.focus && e.focus(s);
+    function v(r) {
+      e.onFocus && e.onFocus(r), e.focus && e.focus(r);
     }
-    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 (r, _) => (m(), g("label", {
+      "data-visual-aid": c(X)(r.visualAid),
+      "data-size": r.size,
+      "data-hide-label": c(H)(r.showLabel),
+      "data-emphasis": r.emphasis,
       for: a.value,
-      class: N(v(A)("db-switch", e.class))
+      class: F(c(D)("db-switch", e.class))
     }, [
       I("input", {
         type: "checkbox",
         role: "switch",
         id: a.value,
-        "aria-checked": v(V)(c.value),
+        "aria-checked": c(X)(u.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,
-        onChange: B[0] || (B[0] = async ($) => p($)),
-        onBlur: B[1] || (B[1] = async ($) => i($)),
-        onFocus: B[2] || (B[2] = async ($) => h($))
-      }, null, 40, Ta),
-      s.label ? (m(), g(C, { key: 0 }, [
-        L(k(s.label), 1)
-      ], 64)) : w(s.$slots, "default", { key: 1 })
-    ], 10, Fa));
+        ref: s,
+        checked: r.checked,
+        value: r.value,
+        disabled: r.disabled,
+        "aria-describedby": r.describedbyid,
+        "aria-invalid": r.validation === "invalid",
+        "data-custom-validity": r.validation,
+        name: r.name,
+        required: r.required,
+        "data-aid-icon": r.icon,
+        "data-aid-icon-after": r.iconAfter,
+        onChange: _[0] || (_[0] = async (S) => b(S)),
+        onBlur: _[1] || (_[1] = async (S) => d(S)),
+        onFocus: _[2] || (_[2] = async (S) => v(S))
+      }, null, 40, wt),
+      r.label ? (m(), g(G, { key: 0 }, [
+        $(w(r.label), 1)
+      ], 64)) : L(r.$slots, "default", { key: 1 })
+    ], 10, Bt));
   }
-}), 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({
+}), _t = ["for", "data-icon", "data-icon-after", "data-hide-icon", "data-hide-icon-after", "data-no-text"], It = ["disabled", "aria-selected", "aria-controls", "checked", "id"], Lt = /* @__PURE__ */ M({
   __name: "tab-item",
   props: {
     children: { default: void 0 },
@@ -1551,56 +1561,56 @@ 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);
-    U(() => {
+  setup(i, { emit: t }) {
+    const l = t, e = i, a = n(!1), u = n(!1), s = n(null);
+    W(() => {
       a.value = !0;
-    }), z(
-      () => [l.value, a.value],
+    }), A(
+      () => [s.value, a.value],
       () => {
-        e.active && a.value && l.value && (l.value.click(), a.value = !1);
+        e.active && a.value && s.value && (s.value.click(), a.value = !1);
       },
       {
         immediate: !0,
         flush: "post"
       }
     );
-    function p(i) {
-      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");
+    function b(d) {
+      var v;
+      e.onChange && e.onChange(d), e.change && e.change(d), u.value = (v = d.target) == null ? void 0 : v.checked, ve(l, d, "checked");
     }
-    return (i, h) => (m(), g("li", {
+    return (d, v) => (m(), g("li", {
       role: "none",
-      class: N(v(A)("db-tab-item", e.class))
+      class: F(c(D)("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": c(H)(d.showIcon),
+        "data-hide-icon-after": c(H)(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": u.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))
-        }, null, 40, Ca),
-        i.label ? (m(), g(C, { key: 0 }, [
-          L(k(i.label), 1)
-        ], 64)) : M("", !0),
-        w(i.$slots, "default")
-      ], 8, Sa)
+          ref: s,
+          id: d.id,
+          onInput: v[0] || (v[0] = async (r) => b(r))
+        }, null, 40, It),
+        d.label ? (m(), g(G, { key: 0 }, [
+          $(w(d.label), 1)
+        ], 64)) : R("", !0),
+        L(d.$slots, "default")
+      ], 8, _t)
     ], 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({
+}), $t = ["id", "data-disabled", "data-semantic", "data-emphasis", "data-icon", "data-show-check-state", "data-hide-icon", "data-no-text", "data-overflow"], Tt = ["title"], At = /* @__PURE__ */ M({
   __name: "tag",
   props: {
     behavior: { default: void 0 },
@@ -1624,18 +1634,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, l = n(!1), e = n(null);
+    l.value = !0, A(
+      () => [l.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(
+        var s, b;
+        if (l.value && e.value && t.disabled !== void 0) {
+          const d = (s = e.value) == null ? void 0 : s.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);
+          ), v = (b = e.value) == null ? void 0 : b.querySelector("input");
+          for (const r of [d, v])
+            r && (r.disabled = t.disabled);
         }
       },
       {
@@ -1643,47 +1653,47 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         flush: "post"
       }
     );
-    function a() {
-      n.onRemove && n.onRemove();
+    function a(s) {
+      t.onRemove && t.onRemove(s);
     }
-    function c() {
-      return n.removeButton ? n.removeButton : "Remove tag";
+    function u() {
+      return t.removeButton ? t.removeButton : We;
     }
-    return (l, p) => (m(), g("div", {
+    return (s, b) => (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),
-      "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)
+      id: s.id,
+      class: F(c(D)("db-tag", t.class)),
+      "data-disabled": c(X)(s.disabled),
+      "data-semantic": s.semantic,
+      "data-emphasis": s.emphasis,
+      "data-icon": s.icon,
+      "data-show-check-state": c(X)(s.showCheckState ?? !0),
+      "data-hide-icon": c(H)(s.showIcon),
+      "data-no-text": c(X)(s.noText),
+      "data-overflow": c(X)(s.overflow)
     }, [
-      w(l.$slots, "content"),
-      w(l.$slots, "default"),
-      l.text ? (m(), g(C, { key: 0 }, [
-        L(k(l.text), 1)
-      ], 64)) : M("", !0),
-      l.behavior === "removable" ? (m(), g("button", {
+      L(s.$slots, "content"),
+      L(s.$slots, "default"),
+      s.text ? (m(), g(G, { key: 0 }, [
+        $(w(s.text), 1)
+      ], 64)) : R("", !0),
+      s.behavior === "removable" ? (m(), g("button", {
         key: 1,
         class: "db-button db-tab-remove-button",
         "data-icon": "cross",
         "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: b[0] || (b[0] = async (d) => a(d)),
+        title: u()
+      }, w(u()), 9, Tt)) : R("", !0)
+    ], 10, $t));
   }
-}), 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 = {
+}), St = ["data-variant", "data-hide-label"], Et = ["for"], Ct = ["aria-invalid", "data-custom-validity", "id", "data-resize", "disabled", "required", "readOnly", "form", "maxLength", "minLength", "name", "wrap", "spellcheck", "autocomplete", "value", "aria-describedby", "placeholder", "rows", "cols"], Ft = {
   "data-visually-hidden": "true",
   role: "status"
-}, zn = /* @__PURE__ */ E({
+}, Zi = /* @__PURE__ */ M({
   __name: "textarea",
   props: {
     cols: { default: void 0 },
@@ -1699,9 +1709,10 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
     onBlur: { type: Function, default: void 0 },
     focus: { type: Function, default: void 0 },
     onFocus: { type: Function, default: void 0 },
+    ariaDescribedBy: {},
+    form: { default: void 0 },
     validation: { default: void 0 },
     disabled: { type: Boolean, default: void 0 },
-    form: { default: void 0 },
     label: { default: void 0 },
     name: { default: void 0 },
     required: { type: Boolean, default: void 0 },
@@ -1726,120 +1737,120 @@ 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);
-    U(() => {
-      const o = e.id ?? `textarea-${G()}`;
-      a.value = o, c.value = o + K, l.value = o + J, p.value = o + Q;
-    }), z(
+  setup(i, { emit: t }) {
+    const l = t, e = i, a = n(void 0), u = n(void 0), s = n(void 0), b = n(void 0), d = n(""), v = n(""), r = n(""), _ = n(null);
+    W(() => {
+      const f = e.id ?? `textarea-${Y()}`;
+      a.value = f, u.value = f + oe, s.value = f + de, b.value = f + ne;
+    }), A(
       () => [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 f = a.value + oe;
+          u.value = f, s.value = a.value + de, b.value = a.value + ne, ee(e.message, e.showMessage) && (d.value = f);
         }
       },
       {
         immediate: !0,
         flush: "post"
       }
-    ), z(
+    ), A(
       () => [e.value],
       () => {
-        h.value = e.value;
+        v.value = e.value;
       },
       {
         immediate: !0,
         flush: "post"
       }
     );
-    function $(o) {
-      h.value = o.target.value, e.onInput && e.onInput(o), e.input && e.input(o);
+    function S(f) {
+      v.value = f.target.value, e.onInput && e.onInput(f), e.input && e.input(f);
     }
-    function D(o) {
-      var y, r, T;
-      e.onChange && e.onChange(o), e.change && e.change(o), ae(d, o), !((y = B.value) != null && y.validity.valid) || e.validation === "invalid" ? (i.value = p.value, Y() && (s.value = e.invalidMessage ?? ((r = B.value) == null ? void 0 : r.validationMessage) ?? x, H(() => s.value = "", 1e3))) : e.validation === "valid" || (T = B.value) != null && T.validity.valid && (e.required || e.minLength || e.maxLength) ? (i.value = l.value, Y() && (s.value = e.validMessage ?? Z, H(() => s.value = "", 1e3))) : q(e.message, e.showMessage) ? i.value = c.value : i.value = "";
+    function O(f) {
+      var B, p, E;
+      e.onChange && e.onChange(f), e.change && e.change(f), ve(l, f), !((B = _.value) != null && B.validity.valid) || e.validation === "invalid" ? (d.value = b.value, le() && (r.value = e.invalidMessage ?? ((p = _.value) == null ? void 0 : p.validationMessage) ?? ue, J(() => r.value = "", 1e3))) : e.validation === "valid" || (E = _.value) != null && E.validity.valid && (e.required || e.minLength || e.maxLength) ? (d.value = s.value, le() && (r.value = e.validMessage ?? se, J(() => r.value = "", 1e3))) : ee(e.message, e.showMessage) ? d.value = u.value : d.value = "";
     }
-    function _(o) {
-      e.onBlur && e.onBlur(o), e.blur && e.blur(o);
+    function T(f) {
+      e.onBlur && e.onBlur(f), e.blur && e.blur(f);
     }
-    function f(o) {
-      e.onFocus && e.onFocus(o), e.focus && e.focus(o);
+    function h(f) {
+      e.onFocus && e.onFocus(f), e.focus && e.focus(f);
     }
-    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 (f, B) => (m(), g("div", {
+      class: F(c(D)("db-textarea", e.class)),
+      "data-variant": f.variant,
+      "data-hide-label": c(H)(f.showLabel)
     }, [
-      I("label", { for: a.value }, k(o.label ?? v(le)), 9, Ua),
+      I("label", { for: a.value }, w(f.label ?? c(ie)), 9, Et),
       I("textarea", {
-        "aria-invalid": o.validation === "invalid",
-        "data-custom-validity": o.validation,
+        "aria-invalid": f.validation === "invalid",
+        "data-custom-validity": f.validation,
         ref_key: "_ref",
-        ref: B,
+        ref: _,
         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,
-        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, {
+        "data-resize": f.resize,
+        disabled: f.disabled,
+        required: f.required,
+        readOnly: f.readOnly,
+        form: f.form,
+        maxLength: f.maxLength,
+        minLength: f.minLength,
+        name: f.name,
+        wrap: f.wrap,
+        spellcheck: f.spellCheck,
+        autocomplete: f.autocomplete,
+        onInput: B[0] || (B[0] = async (p) => S(p)),
+        onChange: B[1] || (B[1] = async (p) => O(p)),
+        onBlur: B[2] || (B[2] = async (p) => T(p)),
+        onFocus: B[3] || (B[3] = async (p) => h(p)),
+        value: f.value ?? v.value,
+        "aria-describedby": d.value,
+        placeholder: f.placeholder ?? c(Oe),
+        rows: f.rows ?? c(ya),
+        cols: f.cols
+      }, null, 40, Ct),
+      c(ee)(f.message, f.showMessage) ? (m(), x(Q, {
         key: 0,
         size: "small",
-        icon: o.messageIcon,
-        id: c.value
+        icon: f.messageIcon,
+        id: u.value
       }, {
-        default: R(() => [
-          L(k(o.message), 1)
+        default: V(() => [
+          $(w(f.message), 1)
         ]),
         _: 1
-      }, 8, ["icon", "id"])) : M("", !0),
-      O(W, {
+      }, 8, ["icon", "id"])) : R("", !0),
+      j(Q, {
         size: "small",
         semantic: "successful",
-        id: l.value
+        id: s.value
       }, {
-        default: R(() => [
-          L(k(o.validMessage ?? v(Z)), 1)
+        default: V(() => [
+          $(w(f.validMessage ?? c(se)), 1)
         ]),
         _: 1
       }, 8, ["id"]),
-      O(W, {
+      j(Q, {
         size: "small",
         semantic: "critical",
-        id: p.value
+        id: b.value
       }, {
-        default: R(() => {
-          var r;
+        default: V(() => {
+          var p;
           return [
-            L(k(o.invalidMessage ?? ((r = B.value) == null ? void 0 : r.validationMessage) ?? v(x)), 1)
+            $(w(f.invalidMessage ?? (((p = _.value) == null ? void 0 : p.validationMessage) || c(ue))), 1)
           ];
         }),
         _: 1
       }, 8, ["id"]),
-      I("span", Va, k(s.value), 1)
-    ], 10, Ra));
+      I("span", Ft, w(r.value), 1)
+    ], 10, St));
   }
-}), 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 = {
+}), Dt = ["id", "data-width", "data-icon", "data-hide-icon", "data-active", "aria-disabled"], Nt = ["aria-haspopup", "aria-expanded", "disabled"], Mt = ["data-auto-close", "id"], Rt = {
   key: 0,
   class: "db-mobile-navigation-back"
-}, Rn = /* @__PURE__ */ E({
+}, xi = /* @__PURE__ */ M({
   __name: "navigation-item",
   props: {
     active: { type: Boolean, default: void 0 },
@@ -1860,119 +1871,119 @@ 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(
-      "sub-navigation-" + G()
-    ), i = u(void 0), h = u(null);
-    U(() => {
-      d.value = !0;
-    }), z(
-      () => [n.subNavigationExpanded],
+  setup(i) {
+    const t = i, l = n(!1), e = n(!1), a = n(!0), u = n(!1), s = n(!1), b = n(
+      "sub-navigation-" + Y()
+    ), d = n(void 0), v = n(null);
+    W(() => {
+      l.value = !0;
+    }), A(
+      () => [t.subNavigationExpanded],
       () => {
-        n.subNavigationExpanded !== void 0 && (c.value = !!n.subNavigationExpanded);
+        t.subNavigationExpanded !== void 0 && (u.value = !!t.subNavigationExpanded);
       },
       {
         immediate: !0,
         flush: "post"
       }
-    ), z(
-      () => [d.value],
+    ), A(
+      () => [l.value],
       () => {
-        D();
+        O();
       },
       {
         immediate: !0,
         flush: "post"
       }
     );
-    function s(_) {
-      be(_) && (l.value = !0, H(() => {
-        l.value = !1;
+    function r(T) {
+      Ke(T) && (s.value = !0, J(() => {
+        s.value = !1;
       }, 300));
     }
-    function B(_) {
-      n.onClick && n.onClick(_), e.value && (c.value = !0);
+    function _(T) {
+      t.onClick && t.onClick(T), e.value && (u.value = !0);
     }
-    function $(_) {
-      _.stopPropagation(), c.value = !1;
+    function S(T) {
+      T.stopPropagation(), u.value = !1;
     }
-    function D() {
-      var _;
-      if (d.value && document && p.value) {
-        const f = document == null ? void 0 : document.getElementById(
-          p.value
+    function O() {
+      var T;
+      if (l.value && document && b.value) {
+        const h = document == null ? void 0 : document.getElementById(
+          b.value
         );
-        f && (((_ = f.children) == null ? void 0 : _.length) > 0 ? (e.value = !0, i.value || (i.value = new Ke(
-          h.value,
-          f
+        h && (((T = h.children) == null ? void 0 : T.length) > 0 ? (e.value = !0, d.value || (d.value = new Pa(
+          v.value,
+          h
         ))) : a.value = !1);
       }
     }
-    return (_, f) => (m(), g("li", {
+    return (T, h) => (m(), g("li", {
       ref_key: "_ref",
-      ref: h,
-      id: _.id,
-      onMouseover: f[2] || (f[2] = async (o) => {
-        var y;
-        return (y = i.value) == null ? void 0 : y.enableFollow();
+      ref: v,
+      id: T.id,
+      onMouseover: h[2] || (h[2] = async (f) => {
+        var B;
+        return (B = d.value) == null ? void 0 : B.enableFollow();
       }),
-      onMouseleave: f[3] || (f[3] = async (o) => {
-        var y;
-        return (y = i.value) == null ? void 0 : y.disableFollow();
+      onMouseleave: h[3] || (h[3] = async (f) => {
+        var B;
+        return (B = d.value) == null ? void 0 : B.disableFollow();
       }),
-      onMousemove: f[4] || (f[4] = async (o) => {
-        var y;
-        return (y = i.value) == null ? void 0 : y.followByMouseEvent(o);
+      onMousemove: h[4] || (h[4] = async (f) => {
+        var B;
+        return (B = d.value) == null ? void 0 : B.followByMouseEvent(f);
       }),
-      class: N(v(A)("db-navigation-item", n.class)),
-      "data-width": _.width,
-      "data-icon": _.icon,
-      "data-hide-icon": v(P)(_.showIcon),
-      "data-active": _.active,
-      "aria-disabled": v(V)(_.disabled)
+      class: F(c(D)("db-navigation-item", t.class)),
+      "data-width": T.width,
+      "data-icon": T.icon,
+      "data-hide-icon": c(H)(T.showIcon),
+      "data-active": T.active,
+      "aria-disabled": c(X)(T.disabled)
     }, [
-      a.value ? M("", !0) : (m(), g(C, { key: 0 }, [
-        _.text ? (m(), g(C, { key: 0 }, [
-          L(k(_.text), 1)
-        ], 64)) : w(_.$slots, "default", { key: 1 })
+      a.value ? R("", !0) : (m(), g(G, { key: 0 }, [
+        T.text ? (m(), g(G, { key: 0 }, [
+          $(w(T.text), 1)
+        ], 64)) : L(T.$slots, "default", { key: 1 })
       ], 64)),
-      a.value ? (m(), g(C, { key: 1 }, [
+      a.value ? (m(), g(G, { key: 1 }, [
         I("button", {
           class: "db-navigation-item-expand-button",
           "aria-haspopup": e.value,
-          "aria-expanded": c.value,
-          disabled: _.disabled,
-          onClick: f[0] || (f[0] = async (o) => B(o))
+          "aria-expanded": u.value,
+          disabled: T.disabled,
+          onClick: h[0] || (h[0] = async (f) => _(f))
         }, [
-          _.text ? (m(), g(C, { key: 0 }, [
-            L(k(_.text), 1)
-          ], 64)) : w(_.$slots, "default", { key: 1 })
-        ], 8, qa),
+          T.text ? (m(), g(G, { key: 0 }, [
+            $(w(T.text), 1)
+          ], 64)) : L(T.$slots, "default", { key: 1 })
+        ], 8, Nt),
         I("menu", {
           class: "db-sub-navigation",
-          "data-auto-close": l.value,
-          id: p.value,
-          onClick: f[1] || (f[1] = async (o) => s(o))
+          "data-auto-close": s.value,
+          id: b.value,
+          onClick: h[1] || (h[1] = async (f) => r(f))
         }, [
-          e.value ? (m(), g("div", Wa, [
-            O(de, {
+          e.value ? (m(), g("div", Rt, [
+            j(he, {
               icon: "arrow_left",
               variant: "ghost",
-              id: _.backButtonId,
-              onClick: (o) => $(o)
+              id: T.backButtonId,
+              onClick: (f) => S(f)
             }, {
-              default: R(() => [
-                L(k(_.backButtonText ?? v($e)), 1)
+              default: V(() => [
+                $(w(T.backButtonText ?? c(ha)), 1)
               ]),
               _: 1
             }, 8, ["id", "onClick"])
-          ])) : M("", !0),
-          w(_.$slots, "sub-navigation")
-        ], 8, Oa)
-      ], 64)) : M("", !0)
-    ], 42, Ga));
+          ])) : R("", !0),
+          L(T.$slots, "sub-navigation")
+        ], 8, Mt)
+      ], 64)) : R("", !0)
+    ], 42, Dt));
   }
-}), Xa = ["id"], Ha = ["aria-disabled", "open"], ja = /* @__PURE__ */ E({
+}), zt = ["id"], Ut = ["aria-disabled", "open"], Gt = /* @__PURE__ */ M({
   __name: "accordion-item",
   props: {
     defaultOpen: { type: Boolean, default: void 0 },
@@ -1988,43 +1999,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);
-    U(() => {
-      d.value = n.id || "accordion-item-" + G(), n.defaultOpen && (e.value = n.defaultOpen);
+  setup(i) {
+    const t = i, l = n(ye), e = n(!1), a = n(null);
+    W(() => {
+      l.value = t.id || "accordion-item-" + Y(), t.defaultOpen && (e.value = t.defaultOpen);
     });
-    function c(l) {
-      l == null || l.preventDefault();
-      const p = !e.value;
-      n.onToggle && n.onToggle(p), e.value = p;
-    }
-    return (l, p) => (m(), g("li", {
-      id: d.value,
-      class: N(v(A)("db-accordion-item", n.class))
+    function u(s) {
+      s == null || s.preventDefault();
+      const b = !e.value;
+      t.onToggle && t.onToggle(b), e.value = b;
+    }
+    return (s, b) => (m(), g("li", {
+      id: l.value,
+      class: F(c(D)("db-accordion-item", t.class))
     }, [
       I("details", {
-        "aria-disabled": v(V)(l.disabled),
+        "aria-disabled": c(X)(s.disabled),
         ref_key: "_ref",
         ref: a,
         open: e.value
       }, [
         I("summary", {
-          onClick: p[0] || (p[0] = async (i) => c(i))
+          onClick: b[0] || (b[0] = async (d) => u(d))
         }, [
-          l.headlinePlain ? (m(), g(C, { key: 0 }, [
-            L(k(l.headlinePlain), 1)
-          ], 64)) : M("", !0),
-          l.headlinePlain ? M("", !0) : w(l.$slots, "headline", { key: 1 })
+          s.headlinePlain ? (m(), g(G, { key: 0 }, [
+            $(w(s.headlinePlain), 1)
+          ], 64)) : R("", !0),
+          s.headlinePlain ? R("", !0) : L(s.$slots, "headline", { key: 1 })
         ]),
         I("div", null, [
-          l.text ? (m(), g(C, { key: 0 }, [
-            L(k(l.text), 1)
-          ], 64)) : w(l.$slots, "default", { key: 1 })
+          s.text ? (m(), g(G, { key: 0 }, [
+            $(w(s.text), 1)
+          ], 64)) : L(s.$slots, "default", { key: 1 })
         ])
-      ], 8, Ha)
-    ], 10, Xa));
+      ], 8, Ut)
+    ], 10, zt));
   }
-}), Ya = ["id", "data-variant"], Un = /* @__PURE__ */ E({
+}), Pt = ["id", "data-variant"], el = /* @__PURE__ */ M({
   __name: "accordion",
   props: {
     behavior: { default: void 0 },
@@ -2040,50 +2051,50 @@ 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);
-    U(() => {
-      d.value = n.id || "accordion-" + G(), a.value = !0, c.value = !0;
-    }), z(
-      () => [a.value, n.name, n.behavior, d.value],
+  setup(i) {
+    const t = i, l = n(ye), e = n(""), a = n(!1), u = n(!1), s = n(null);
+    W(() => {
+      l.value = t.id || "accordion-" + Y(), a.value = !0, u.value = !0;
+    }), A(
+      () => [a.value, t.name, t.behavior, l.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 !== l.value && l.value && (e.value = l.value) : e.value = "");
       },
       {
         immediate: !0,
         flush: "post"
       }
-    ), z(
-      () => [l.value, e.value],
+    ), A(
+      () => [s.value, e.value],
       () => {
-        if (l.value) {
-          const i = l.value.getElementsByTagName("details");
-          if (i)
-            for (const h of Array.from(i))
-              e.value === "" ? h.removeAttribute("name") : h.name = e.value;
+        if (s.value) {
+          const d = s.value.getElementsByTagName("details");
+          if (d)
+            for (const v of Array.from(d))
+              e.value === "" ? v.removeAttribute("name") : v.name = e.value;
         }
       },
       {
         immediate: !0,
         flush: "post"
       }
-    ), z(
-      () => [l.value, c.value, n.initOpenIndex],
+    ), A(
+      () => [s.value, u.value, t.initOpenIndex],
       () => {
-        var i;
-        if (l.value && c.value) {
-          if (n.initOpenIndex && ((i = n.initOpenIndex) == null ? void 0 : i.length) > 0) {
-            const h = l.value.getElementsByTagName("details");
-            if (h) {
-              const s = n.behavior === "single" && n.initOpenIndex.length > 1 ? [n.initOpenIndex[0]] : n.initOpenIndex;
-              Array.from(h).forEach(
-                (B, $) => {
-                  s.includes($) && (B.open = !0);
+        var d;
+        if (s.value && u.value) {
+          if (t.initOpenIndex && ((d = t.initOpenIndex) == null ? void 0 : d.length) > 0) {
+            const v = s.value.getElementsByTagName("details");
+            if (v) {
+              const r = t.behavior === "single" && t.initOpenIndex.length > 1 ? [t.initOpenIndex[0]] : t.initOpenIndex;
+              Array.from(v).forEach(
+                (_, S) => {
+                  r.includes(S) && (_.open = !0);
                 }
               );
             }
           }
-          c.value = !1;
+          u.value = !1;
         }
       },
       {
@@ -2091,31 +2102,31 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         flush: "post"
       }
     );
-    function p(i) {
+    function b(d) {
       try {
-        return typeof i == "string" ? JSON.parse(i) : i;
-      } catch (h) {
-        console.error(h);
+        return typeof d == "string" ? JSON.parse(d) : d;
+      } catch (v) {
+        console.error(v);
       }
       return [];
     }
-    return (i, h) => (m(), g("ul", {
+    return (d, v) => (m(), g("ul", {
       ref_key: "_ref",
-      ref: l,
-      id: d.value,
-      class: N(v(A)("db-accordion", n.class)),
-      "data-variant": i.variant
+      ref: s,
+      id: l.value,
+      class: F(c(D)("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, {
-        key: `accordion-item-${B}`,
-        headlinePlain: s.headlinePlain,
-        disabled: s.disabled,
-        text: s.text
-      }, null, 8, ["headlinePlain", "disabled", "text"]))), 128)) : M("", !0)
-    ], 10, Ya));
+      d.items ? R("", !0) : L(d.$slots, "default", { key: 0 }),
+      d.items ? (m(!0), g(G, { key: 1 }, ce(b(d.items), (r, _) => (m(), x(Gt, {
+        key: `accordion-item-${_}`,
+        headlinePlain: r.headlinePlain,
+        disabled: r.disabled,
+        text: r.text
+      }, null, 8, ["headlinePlain", "disabled", "text"]))), 128)) : R("", !0)
+    ], 10, Pt));
   }
-}), Ka = ["id", "aria-labelledby"], Pn = /* @__PURE__ */ E({
+}), qt = ["id", "aria-labelledby"], al = /* @__PURE__ */ M({
   __name: "navigation",
   props: {
     children: { default: void 0 },
@@ -2126,23 +2137,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);
-    return U(() => {
-      d.value = n.id || "navigation-" + G();
-    }), (a, c) => (m(), g("nav", {
+  setup(i) {
+    const t = i, l = n(ye), e = n(null);
+    return W(() => {
+      l.value = t.id || "navigation-" + Y();
+    }), (a, u) => (m(), g("nav", {
       ref_key: "_ref",
       ref: e,
-      id: d.value,
+      id: l.value,
       "aria-labelledby": a.labelledBy,
-      class: N(v(A)("db-navigation", n.class))
+      class: F(c(D)("db-navigation", t.class))
     }, [
       I("menu", null, [
-        w(a.$slots, "default")
+        L(a.$slots, "default")
       ])
-    ], 10, Ka));
+    ], 10, qt));
   }
-}), Ja = ["id"], Qa = ["data-spacing", "data-gap", "data-animation", "data-open", "data-delay", "data-width", "data-placement"], Vn = /* @__PURE__ */ E({
+}), Vt = ["id"], Ot = ["data-spacing", "data-gap", "data-animation", "data-open", "data-delay", "data-width", "data-placement"], tl = /* @__PURE__ */ M({
   __name: "popover",
   props: {
     open: { type: Boolean, default: void 0 },
@@ -2160,28 +2171,28 @@ 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);
-    U(() => {
-      d.value = !0;
-    }), z(
-      () => [a.value, d.value],
+  setup(i) {
+    const t = i, l = n(!1), e = n(!1), a = n(null);
+    W(() => {
+      l.value = !0;
+    }), A(
+      () => [a.value, l.value],
       () => {
-        if (a.value && d.value) {
-          const i = p();
-          i && (i.ariaHasPopup = "true"), d.value = !1;
+        if (a.value && l.value) {
+          const d = b();
+          d && (d.ariaHasPopup = "true"), l.value = !1;
         }
       },
       {
         immediate: !0,
         flush: "post"
       }
-    ), z(
+    ), A(
       () => [a.value, e.value],
       () => {
         if (a.value) {
-          const i = p();
-          i && (i.ariaExpanded = (!!e.value).toString());
+          const d = b();
+          d && (d.ariaExpanded = (!!e.value).toString());
         }
       },
       {
@@ -2189,52 +2200,52 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         flush: "post"
       }
     );
-    function c() {
+    function u() {
       if (e.value = !0, !a.value) return;
-      const i = a.value.querySelector("article");
-      i && se(i);
+      const d = a.value.querySelector("article");
+      d && Se(d);
     }
-    function l(i) {
-      const h = i.target;
-      (!h.parentNode || h.parentNode.querySelector(":focus") !== h && h.parentNode.querySelector(":focus-within") !== h && h.parentNode.querySelector(":hover") !== h) && (e.value = !1);
+    function s(d) {
+      const v = d.target;
+      (!v.parentNode || v.parentNode.querySelector(":focus") !== v && v.parentNode.querySelector(":focus-within") !== v && v.parentNode.querySelector(":hover") !== v) && (e.value = !1);
     }
-    function p() {
-      var i;
+    function b() {
+      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 v = Array.from(a.value.children);
+        if (v.length >= 2) {
+          const r = v[0];
+          return r.tagName.includes("-") ? ((d = r.children) == null ? void 0 : d.length) > 0 ? r.children[0] : null : r;
         }
       }
       return null;
     }
-    return (i, h) => (m(), g("div", {
+    return (d, v) => (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: F(c(D)("db-popover", t.class)),
+      onFocus: v[0] || (v[0] = async (r) => u()),
+      onBlur: v[1] || (v[1] = async (r) => s(r)),
+      onMouseenter: v[2] || (v[2] = async (r) => u()),
+      onMouseleave: v[3] || (v[3] = async (r) => s(r))
     }, [
-      w(i.$slots, "trigger"),
+      L(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": c(X)(d.gap),
+        "data-animation": c(X)(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));
+        L(d.$slots, "default")
+      ], 8, Ot)
+    ], 42, Vt));
   }
-}), Za = ["id", "data-emphasis", "data-animation", "data-delay", "data-width", "data-show-arrow", "data-placement"], Gn = /* @__PURE__ */ E({
+}), Wt = ["id", "data-emphasis", "data-animation", "data-delay", "data-width", "data-show-arrow", "data-placement"], Xt = /* @__PURE__ */ M({
   __name: "tooltip",
   props: {
     showArrow: { type: Boolean, default: void 0 },
@@ -2250,18 +2261,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);
-    U(() => {
-      d.value = n.id || "tooltip-" + G(), e.value = !0;
-    }), z(
+  setup(i) {
+    const t = i, l = n(ye), e = n(!1), a = n(null);
+    W(() => {
+      l.value = t.id || "tooltip-" + Y(), e.value = !0;
+    }), A(
       () => [a.value, e.value],
       () => {
-        if (a.value && e.value && d.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;
+        if (a.value && e.value && l.value) {
+          let b = a.value.parentElement;
+          b && b.localName.includes("tooltip") && (b = b.parentElement), b && (["mouseenter", "focus"].forEach((d) => {
+            b.addEventListener(d, () => s());
+          }), b.setAttribute("data-has-tooltip", "true"), b.setAttribute("aria-describedby", l.value)), e.value = !1;
         }
       },
       {
@@ -2269,32 +2280,32 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         flush: "post"
       }
     );
-    function c(p) {
-      p.stopPropagation();
+    function u(b) {
+      b.stopPropagation();
     }
-    function l() {
-      a.value && se(a.value);
+    function s() {
+      a.value && Se(a.value);
     }
-    return (p, i) => (m(), g("i", {
+    return (b, 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,
-      "data-emphasis": p.emphasis,
-      "data-animation": v(V)(p.animation ?? !0),
-      "data-delay": p.delay,
-      "data-width": p.width,
-      "data-show-arrow": v(V)(p.showArrow ?? !0),
-      "data-placement": p.placement,
-      onClick: i[0] || (i[0] = async (h) => c(h))
+      class: F(c(D)("db-tooltip", t.class)),
+      id: l.value,
+      "data-emphasis": b.emphasis,
+      "data-animation": c(X)(b.animation ?? !0),
+      "data-delay": b.delay,
+      "data-width": b.width,
+      "data-show-arrow": c(X)(b.showArrow ?? !0),
+      "data-placement": b.placement,
+      onClick: d[0] || (d[0] = async (v) => u(v))
     }, [
-      w(p.$slots, "default")
-    ], 10, Za));
+      L(b.$slots, "default")
+    ], 10, Wt));
   }
-}), xa = ["id"], en = { role: "tablist" }, an = /* @__PURE__ */ E({
+}), Ht = ["id"], jt = { role: "tablist" }, Yt = /* @__PURE__ */ M({
   __name: "tab-list",
   props: {
     children: { default: void 0 },
@@ -2304,22 +2315,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);
-    return U(() => {
-      d.value = n.id || "tab-list-" + G();
-    }), (a, c) => (m(), g("div", {
+  setup(i) {
+    const t = i, l = n(ye), e = n(null);
+    return W(() => {
+      l.value = t.id || "tab-list-" + Y();
+    }), (a, u) => (m(), g("div", {
       ref_key: "_ref",
       ref: e,
-      id: d.value,
-      class: N(v(A)("db-tab-list", n.class))
+      id: l.value,
+      class: F(c(D)("db-tab-list", t.class))
     }, [
-      I("ul", en, [
-        w(a.$slots, "default")
+      I("ul", jt, [
+        L(a.$slots, "default")
       ])
-    ], 10, xa));
+    ], 10, Ht));
   }
-}), nn = ["id", "aria-labelledby"], tn = /* @__PURE__ */ E({
+}), Kt = ["id", "aria-labelledby"], Jt = /* @__PURE__ */ M({
   __name: "tab-panel",
   props: {
     content: { default: void 0 },
@@ -2331,24 +2342,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);
-    return U(() => {
+  setup(i) {
+    const t = i, l = n(null);
+    return W(() => {
     }), (e, a) => (m(), g("section", {
       role: "tabpanel",
       ref_key: "_ref",
-      ref: d,
-      class: N(v(A)("db-tab-panel", n.class)),
+      ref: l,
+      class: F(c(D)("db-tab-panel", t.class)),
       id: e.id,
       "aria-labelledby": e.labelledBy
     }, [
-      e.content ? (m(), g(C, { key: 0 }, [
-        L(k(e.content), 1)
-      ], 64)) : M("", !0),
-      w(e.$slots, "default")
-    ], 10, nn));
+      e.content ? (m(), g(G, { key: 0 }, [
+        $(w(e.content), 1)
+      ], 64)) : R("", !0),
+      L(e.$slots, "default")
+    ], 10, Kt));
   }
-}), dn = ["id", "data-orientation", "data-scroll-behavior", "data-alignment", "data-width"], qn = /* @__PURE__ */ E({
+}), Qt = ["id", "data-orientation", "data-scroll-behavior", "data-alignment", "data-width"], il = /* @__PURE__ */ M({
   __name: "tabs",
   props: {
     arrowScrollDistance: { default: void 0 },
@@ -2369,21 +2380,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);
-    U(() => {
-      d.value = n.id || d.value, e.value = `tabs-${n.name || G()}`, a.value = !0;
-    }), z(
-      () => [i.value, a.value],
+  setup(i) {
+    const t = i, l = n("tabs-" + Y()), e = n(""), a = n(!1), u = n(!1), s = n(!1), b = n(null), d = n(null);
+    W(() => {
+      l.value = t.id || l.value, e.value = `tabs-${t.name || Y()}`, a.value = !0;
+    }), A(
+      () => [d.value, a.value],
       () => {
-        if (i.value && a.value) {
-          $(), D(!0);
-          const f = i.value.querySelector(".db-tab-list");
-          f && new MutationObserver((y) => {
-            y.forEach((r) => {
-              (r.removedNodes.length || r.addedNodes.length) && ($(), D());
+        if (d.value && a.value) {
+          S(), O(!0);
+          const h = d.value.querySelector(".db-tab-list");
+          h && new MutationObserver((B) => {
+            B.forEach((p) => {
+              (p.removedNodes.length || p.addedNodes.length) && (S(), O());
             });
-          }).observe(f, {
+          }).observe(h, {
             childList: !0,
             subtree: !0
           }), a.value = !1;
@@ -2394,151 +2405,151 @@ const Je = ["id", "data-width", "data-on-forcing-mobile"], Qe = { class: "db-hea
         flush: "post"
       }
     );
-    function h(f) {
+    function v(h) {
       try {
-        return typeof f == "string" ? JSON.parse(f) : f;
-      } catch (o) {
-        console.error(o);
+        return typeof h == "string" ? JSON.parse(h) : h;
+      } catch (f) {
+        console.error(f);
       }
       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 r(h) {
+      const f = h.scrollWidth > h.clientWidth;
+      u.value = f && h.scrollLeft > 1, s.value = f && h.scrollLeft < h.scrollWidth - h.clientWidth;
     }
-    function B(f) {
-      var y;
-      let o = n.arrowScrollDistance || 100;
-      f && (o *= -1), (y = p.value) == null || y.scrollBy({
+    function _(h) {
+      var B;
+      let f = t.arrowScrollDistance || 100;
+      h && (f *= -1), (B = b.value) == null || B.scrollBy({
         top: 0,
-        left: o,
+        left: f,
         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(
+    function S() {
+      if (d.value) {
+        const h = d.value.querySelector(".db-tab-list");
+        if (h) {
+          const f = h.querySelector('[role="tablist"]');
+          f && (f.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" && (b.value = f, r(f), f.addEventListener("scroll", () => {
+            r(f);
           })));
         }
       }
     }
-    function D(f) {
-      if (i.value) {
-        const o = Array.from(
-          i.value.getElementsByClassName("db-tab-item")
+    function O(h) {
+      if (d.value) {
+        const f = 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) {
-              const F = `${e.value}-tab-${T}`;
-              b.setAttribute("for", F), S.setAttribute(
+        for (const p of f) {
+          const E = f.indexOf(p), y = p.querySelector("label"), z = p.querySelector("input");
+          if (z && y) {
+            if (!z.id) {
+              const C = `${e.value}-tab-${E}`;
+              y.setAttribute("for", C), z.setAttribute(
                 "aria-controls",
-                `${e.value}-tab-panel-${T}`
-              ), S.id = F, S.setAttribute("name", e.value);
+                `${e.value}-tab-panel-${E}`
+              ), z.id = C, z.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 (h) {
+              const C = !t.initialSelectedMode || t.initialSelectedMode === "auto", U = t.initialSelectedIndex == null && E === 0 || t.initialSelectedIndex === E;
+              C && U && z.click();
             }
           }
         }
-        const y = Array.from(
-          i.value.querySelectorAll(
+        const B = Array.from(
+          d.value.querySelectorAll(
             ":is(:scope > .db-tab-panel, :scope > db-tab-panel > .db-tab-panel)"
           )
         );
-        for (const r of y) {
-          if (r.id) continue;
-          const T = y.indexOf(r);
-          r.id = `${e.value}-tab-panel-${T}`, r.setAttribute("aria-labelledby", `${e.value}-tab-${T}`);
+        for (const p of B) {
+          if (p.id) continue;
+          const E = B.indexOf(p);
+          p.id = `${e.value}-tab-panel-${E}`, p.setAttribute("aria-labelledby", `${e.value}-tab-${E}`);
         }
       }
     }
-    function _(f) {
-      if (n.onIndexChange && f.target) {
-        const o = f.target.closest("ul"), y = (
+    function T(h) {
+      if (t.onIndexChange && h.target) {
+        const f = h.target.closest("ul"), B = (
           // db-tab-item for angular and stencil wrapping elements
-          f.target.closest("db-tab-item") ?? f.target.closest("li")
+          h.target.closest("db-tab-item") ?? h.target.closest("li")
         );
-        o !== null && y !== null && n.onIndexChange(Array.from(o.childNodes).indexOf(y));
+        f !== null && B !== null && t.onIndexChange(Array.from(f.childNodes).indexOf(B));
       }
-      n.onTabSelect && n.onTabSelect(f);
+      t.onTabSelect && t.onTabSelect(h);
     }
-    return (f, o) => (m(), g("div", {
+    return (h, f) => (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: l.value,
+      class: F(c(D)("db-tabs", t.class)),
+      "data-orientation": h.orientation,
+      "data-scroll-behavior": h.behavior,
+      "data-alignment": h.alignment ?? "start",
+      "data-width": h.width ?? "auto",
+      onInput: f[0] || (f[0] = async (B) => T(B))
     }, [
-      c.value ? (m(), X(de, {
+      u.value ? (m(), x(he, {
         key: 0,
         class: "tabs-scroll-left",
         variant: "ghost",
         icon: "chevron_left",
         type: "button",
         noText: !0,
-        onClick: (y) => B(!0)
+        onClick: (B) => _(!0)
       }, {
-        default: R(() => o[1] || (o[1] = [
-          L(" Scroll left ")
+        default: V(() => f[1] || (f[1] = [
+          $(" Scroll left ")
         ])),
         _: 1
-      }, 8, ["onClick"])) : M("", !0),
-      f.tabs ? (m(), g(C, { key: 1 }, [
-        O(an, null, {
-          default: R(() => [
-            (m(!0), g(C, null, te(h(f.tabs), (y, r) => (m(), X(Da, {
-              key: f.name + "tab-item" + r,
-              active: y.active,
-              label: y.label,
-              iconAfter: y.iconAfter,
-              icon: y.icon,
-              noText: y.noText
+      }, 8, ["onClick"])) : R("", !0),
+      h.tabs ? (m(), g(G, { key: 1 }, [
+        j(Yt, null, {
+          default: V(() => [
+            (m(!0), g(G, null, ce(v(h.tabs), (B, p) => (m(), x(Lt, {
+              key: h.name + "tab-item" + p,
+              active: B.active,
+              label: B.label,
+              iconAfter: B.iconAfter,
+              icon: B.icon,
+              noText: B.noText
             }, null, 8, ["active", "label", "iconAfter", "icon", "noText"]))), 128))
           ]),
           _: 1
         }),
-        (m(!0), g(C, null, te(h(f.tabs), (y, r) => (m(), X(tn, {
-          key: f.name + "tab-panel" + r,
-          content: y.content
+        (m(!0), g(G, null, ce(v(h.tabs), (B, p) => (m(), x(Jt, {
+          key: h.name + "tab-panel" + p,
+          content: B.content
         }, {
-          default: R(() => [
-            L(k(y.children), 1)
+          default: V(() => [
+            $(w(B.children), 1)
           ]),
           _: 2
         }, 1032, ["content"]))), 128))
-      ], 64)) : M("", !0),
-      l.value ? (m(), X(de, {
+      ], 64)) : R("", !0),
+      s.value ? (m(), x(he, {
         key: 2,
         class: "tabs-scroll-right",
         variant: "ghost",
         icon: "chevron_right",
         type: "button",
         noText: !0,
-        onClick: (y) => B()
+        onClick: (B) => _()
       }, {
-        default: R(() => o[2] || (o[2] = [
-          L(" Scroll right ")
+        default: V(() => f[2] || (f[2] = [
+          $(" Scroll right ")
         ])),
         _: 1
-      }, 8, ["onClick"])) : M("", !0),
-      w(f.$slots, "default")
-    ], 42, dn));
+      }, 8, ["onClick"])) : R("", !0),
+      L(h.$slots, "default")
+    ], 42, Qt));
   }
-}), 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({
+}), ll = ["adaptive", "neutral", "critical", "informational", "warning", "successful"], ol = ["medium", "small", "large", "none"], dl = ["medium", "small", "large", "none"], Zt = ["left", "right", "left-start", "left-end", "right-start", "right-end"], xt = ["top", "bottom", "top-start", "top-end", "bottom-start", "bottom-end"], nl = [...Zt, ...xt], sl = ["none", "3x-large", "2x-large", "x-large", "large", "medium", "small", "x-small", "2x-small", "3x-small"], ul = ["horizontal", "vertical"], rl = ["full", "auto"], cl = ["full", "medium", "large", "small"], vl = ["none", "slow", "fast"], fl = ["auto", "fixed"], pl = ["small", "medium"], ei = ["weak", "strong"], hl = [...ei, "origin"], ml = ["invalid", "valid", "no-validation"], bl = ["above", "floating"], gl = ["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"], yl = ["time", "true", "false", "date", "page", "step", "location"], kl = ["_self", "_blank", "_parent", "_top"], Bl = ["no-referrer", "no-referrer-when-downgrade", "origin", "origin-when-cross-origin", "same-origin", "strict-origin", "strict-origin-when-cross-origin", "unsafe-url"], wl = ["start", "center"], ai = ["id", "data-gap", "data-variant", "data-direction", "data-alignment", "data-justify-content", "data-wrap"], _l = /* @__PURE__ */ M({
   __name: "stack",
   props: {
     variant: { default: void 0 },
@@ -2554,117 +2565,908 @@ 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, l = n(null);
     return (e, a) => (m(), g("div", {
       ref_key: "_ref",
-      ref: d,
+      ref: l,
       id: e.id,
-      class: N(v(A)("db-stack", n.class)),
+      class: F(c(D)("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": c(X)(e.wrap)
+    }, [
+      L(e.$slots, "default")
+    ], 10, ai));
+  }
+}), ti = ["role", "aria-label", "id"], ii = /* @__PURE__ */ M({
+  __name: "custom-select-list",
+  props: {
+    label: { default: void 0 },
+    multiple: { type: Boolean, default: void 0 },
+    children: { default: void 0 },
+    className: { default: void 0 },
+    class: {},
+    describedbyid: {},
+    id: { default: void 0 },
+    autofocus: { type: Boolean }
+  },
+  setup(i) {
+    const t = i, l = n(null);
+    return (e, a) => (m(), g("div", {
+      role: e.multiple ? "group" : "radiogroup",
+      "aria-label": e.label,
+      ref_key: "_ref",
+      ref: l,
+      id: e.id,
+      class: F(c(D)("db-custom-select-list", t.class))
+    }, [
+      I("ul", null, [
+        L(e.$slots, "default")
+      ])
+    ], 10, ti));
+  }
+}), li = ["id", "data-divider"], oi = ["data-icon", "data-hide-icon", "data-icon-after"], di = ["type", "name", "checked", "disabled", "value"], ni = { key: 1 }, si = /* @__PURE__ */ M({
+  __name: "custom-select-list-item",
+  props: {
+    groupTitle: { default: void 0 },
+    type: { default: void 0 },
+    children: { default: void 0 },
+    className: { default: void 0 },
+    class: {},
+    describedbyid: {},
+    id: { default: void 0 },
+    autofocus: { type: Boolean },
+    disabled: { type: Boolean, default: void 0 },
+    label: { default: void 0 },
+    name: { default: void 0 },
+    value: { default: void 0 },
+    checked: { type: Boolean, default: void 0 },
+    change: { type: Function, default: void 0 },
+    onChange: { type: Function, default: void 0 },
+    isGroupTitle: { type: Boolean, default: void 0 },
+    showDivider: { type: Boolean, default: void 0 },
+    icon: { default: void 0 },
+    showIcon: { type: Boolean, default: void 0 }
+  },
+  emits: ["update:checked"],
+  setup(i, { emit: t }) {
+    const l = t, e = i, a = n(void 0), u = n(!1), s = n(null);
+    W(() => {
+      a.value = e.id ?? `custom-select-list-item-${Y()}`;
+    }), A(
+      () => [e.isGroupTitle, e.showDivider],
+      () => {
+        u.value = !!(e.isGroupTitle || e.showDivider);
+      },
+      {
+        immediate: !0,
+        flush: "post"
+      }
+    );
+    function b(v) {
+      e.onChange && e.onChange(v), e.change && e.change(v), ve(l, v, "checked");
+    }
+    function d() {
+      if (!(e.isGroupTitle || e.type === "checkbox"))
+        return e.checked ? "check" : "x_placeholder";
+    }
+    return (v, r) => (m(), g("li", {
+      ref_key: "_ref",
+      ref: s,
+      id: a.value,
+      class: F(
+        c(D)("db-custom-select-list-item", e.class, {
+          "db-checkbox": v.type === "checkbox" && !v.isGroupTitle,
+          "db-radio": v.type !== "checkbox" && !v.isGroupTitle
+        })
+      ),
+      "data-divider": c(X)(u.value)
+    }, [
+      v.isGroupTitle ? (m(), g("span", ni, w(v.groupTitle), 1)) : (m(), g("label", {
+        key: 0,
+        "data-icon": v.type !== "checkbox" && v.icon ? v.icon : void 0,
+        "data-hide-icon": c(H)(v.showIcon),
+        "data-icon-after": d()
+      }, [
+        I("input", {
+          class: "db-custom-select-list-item-checkbox",
+          "data-disable-focus": "true",
+          type: v.type,
+          name: v.name,
+          checked: v.checked,
+          disabled: v.disabled,
+          value: v.value,
+          onChange: r[0] || (r[0] = async (_) => b(_))
+        }, null, 40, di),
+        v.label ? (m(), g(G, { key: 0 }, [
+          $(w(v.label), 1)
+        ], 64)) : R("", !0),
+        v.label ? R("", !0) : L(v.$slots, "default", { key: 1 })
+      ], 8, oi))
+    ], 10, li));
+  }
+}), ui = ["id", "data-width"], ri = /* @__PURE__ */ M({
+  __name: "custom-select-dropdown",
+  props: {
+    width: { default: "fixed" },
+    children: { default: void 0 },
+    className: { default: void 0 },
+    class: {},
+    describedbyid: {},
+    id: { default: void 0 },
+    autofocus: { type: Boolean }
+  },
+  setup(i) {
+    const t = i, l = n(null);
+    return (e, a) => (m(), g("article", {
+      "data-spacing": "none",
+      ref_key: "_ref",
+      ref: l,
+      id: e.id,
+      class: F(c(D)("db-custom-select-dropdown db-card", t.class)),
+      "data-width": e.width
+    }, [
+      L(e.$slots, "default")
+    ], 10, ui));
+  }
+}), ci = ["id", "aria-invalid", "data-custom-validity", "data-width", "data-variant", "data-required", "data-placement", "data-selected-type", "data-hide-label", "data-icon", "data-hide-icon"], vi = ["id"], fi = ["id", "form", "disabled", "multiple", "required"], pi = ["disabled", "value"], hi = ["open", "aria-disabled"], mi = ["id", "aria-labelledby"], bi = ["data-visually-hidden", "id"], gi = { key: 1 }, yi = { key: 0 }, ki = { key: 0 }, Bi = { class: "db-checkbox db-custom-select-list-item" }, wi = ["form", "checked"], _i = ["aria-hidden", "id"], Ii = {
+  "data-visually-hidden": "true",
+  role: "status"
+}, Il = /* @__PURE__ */ M({
+  __name: "custom-select",
+  props: {
+    children: { default: void 0 },
+    className: { default: void 0 },
+    class: {},
+    describedbyid: {},
+    id: { default: void 0 },
+    autofocus: { type: Boolean },
+    ariaDescribedBy: {},
+    form: { default: void 0 },
+    validation: { default: void 0 },
+    disabled: { type: Boolean, default: void 0 },
+    label: { default: void 0 },
+    name: { default: void 0 },
+    required: { type: Boolean, default: void 0 },
+    variant: { default: void 0 },
+    placeholder: { default: void 0 },
+    message: { default: void 0 },
+    validMessage: { default: void 0 },
+    invalidMessage: { default: void 0 },
+    messageIcon: { default: void 0 },
+    autocomplete: {},
+    showMessage: { type: Boolean, default: void 0 },
+    amountText: { default: void 0 },
+    clearSelectionLabel: { default: "Clear selection" },
+    deSelectAllLabel: { default: void 0 },
+    dropdownWidth: { default: void 0 },
+    loadingText: { default: void 0 },
+    mobileCloseButtonText: { default: void 0 },
+    multiple: { type: Boolean, default: void 0 },
+    noResultsText: { default: void 0 },
+    onAmountChange: { type: Function, default: void 0 },
+    onSelect: { type: Function, default: void 0 },
+    options: { default: void 0 },
+    placement: { default: void 0 },
+    removeTagsTexts: { default: void 0 },
+    searchLabel: { default: void 0 },
+    searchPlaceholder: { default: void 0 },
+    selectAllLabel: { default: void 0 },
+    selectedType: { default: void 0 },
+    showClearSelection: { type: Boolean, default: !0 },
+    showLoading: { type: Boolean, default: void 0 },
+    showNoResults: { type: Boolean, default: void 0 },
+    showSearch: { type: Boolean, default: void 0 },
+    showSelectAll: { type: Boolean, default: void 0 },
+    values: { default: void 0 },
+    open: { type: Boolean, default: void 0 },
+    onDropdownToggle: { type: Function, default: void 0 },
+    width: { default: void 0 },
+    icon: { default: void 0 },
+    showIcon: { type: Boolean, default: void 0 },
+    showLabel: { type: Boolean, default: void 0 }
+  },
+  emits: ["update:values"],
+  setup(i, { emit: t }) {
+    const l = t, e = i, a = n(void 0), u = n(void 0), s = n(void 0), b = n(void 0), d = n(void 0), v = n(void 0), r = n(void 0), _ = n(void 0), S = n(void 0), O = n(void 0), T = n("no-validation"), h = n(""), f = n(""), B = n(void 0), p = n(""), E = n([]), y = n(!1), z = n(!1), C = n(0), U = n([]), K = n([]), fe = n(!1), me = n(-1), ke = n(-1), $e = n(!1), _e = n(!1), Je = n(null), P = n(null), be = n(null), Be = n(null);
+    W(() => {
+      const o = e.id ?? `custom-select-${Y()}`;
+      u.value = o, s.value = o + oe, b.value = o + de, d.value = o + ne, v.value = o + Ge, r.value = o + Ue, _.value = o + "-summary", S.value = o + Ae, B.value = o + "-selected-labels", O.value = o + "-info", document && document.addEventListener("click", De);
+    }), qe(() => {
+      document && document.removeEventListener("click", De);
+    }), A(
+      () => [e.name, u.value],
+      () => {
+        a.value = e.name ?? u.value;
+      },
+      {
+        immediate: !0,
+        flush: "post"
+      }
+    ), A(
+      () => [u.value],
+      () => {
+        if (u.value) {
+          const o = u.value + oe;
+          r.value = u.value + Ue, v.value = u.value + Ge, b.value = u.value + de, d.value = u.value + ne, S.value = u.value + Ae, ee(e.message, e.showMessage) ? we(o) : we();
+        }
+      },
+      {
+        immediate: !0,
+        flush: "post"
+      }
+    ), A(
+      () => [P.value, h.value],
+      () => {
+        if (P.value) {
+          const o = P.value.querySelector("summary");
+          o && o.setAttribute("aria-describedby", h.value || "");
+        }
+      },
+      {
+        immediate: !0,
+        flush: "post"
+      }
+    ), A(
+      () => [P.value],
+      () => {
+        if (P.value) {
+          const o = P.value.querySelector("summary");
+          o && (o.addEventListener("click", () => {
+            Fe(), Ee(!0);
+          }), o.addEventListener("keydown", (k) => {
+            var q;
+            k.code === "Space" && !((q = P.value) != null && q.open) && Ee();
+          })), P.value.addEventListener(
+            "focusout",
+            (k) => Ie(k)
+          );
+        }
+      },
+      {
+        immediate: !0,
+        flush: "post"
+      }
+    ), A(
+      () => [e.showNoResults, K.value],
+      () => {
+        e.showNoResults !== void 0 ? fe.value = e.showNoResults : K.value && (fe.value = K.value.length === 0);
+      },
+      {
+        immediate: !0,
+        flush: "post"
+      }
+    ), A(
+      () => [e.showSelectAll, C.value, e.multiple],
+      () => {
+        y.value = !!(e.multiple && (e.showSelectAll || C.value > 5));
+      },
+      {
+        immediate: !0,
+        flush: "post"
+      }
+    ), A(
+      () => [e.showSearch, C.value],
+      () => {
+        z.value = e.showSearch || C.value > 9;
+      },
+      {
+        immediate: !0,
+        flush: "post"
+      }
+    ), A(
+      () => [
+        ke.value,
+        me.value,
+        e.onSelect
+      ],
+      () => {
+        if (e.onSelect && (ke.value || me.value)) {
+          const o = me.value && !ke.value, k = me.value && ke.value && me.value > ke.value;
+          if (o || k) {
+            e.onSelect(U.value ?? []);
+            const q = {
+              target: {
+                values: U.value
+              }
+            };
+            ve(l, q, "values");
+          }
+        }
+      },
+      {
+        immediate: !0,
+        flush: "post"
+      }
+    ), A(
+      () => [e.values],
+      () => {
+        e.values && Array.isArray(e.values) && (U.value = e.values ?? [], ke.value = (/* @__PURE__ */ new Date()).getTime());
+      },
+      {
+        immediate: !0,
+        flush: "post"
+      }
+    ), A(
+      () => [U.value],
+      () => {
+        var o, k, q;
+        be.value && (be.value.value = Ze()), !((o = be.value) != null && o.validity.valid) || e.validation === "invalid" ? (T.value = "invalid", we(d.value), le() && (p.value = e.invalidMessage ?? ((k = be.value) == null ? void 0 : k.validationMessage) ?? ue, J(() => p.value = "", 1e3))) : e.validation === "valid" || (q = be.value) != null && q.validity.valid && e.required ? (T.value = "valid", we(b.value), le() && (p.value = e.validMessage ?? se, J(() => p.value = "", 1e3))) : e.message ? (T.value = "no-validation", we(s.value)) : (T.value = "no-validation", we(S.value));
+      },
+      {
+        immediate: !0,
+        flush: "post"
+      }
+    ), A(
+      () => [e.validation],
+      () => {
+        T.value = e.validation;
+      },
+      {
+        immediate: !0,
+        flush: "post"
+      }
+    ), A(
+      () => [U.value, C.value],
+      () => {
+        var o, k;
+        ((o = U.value) == null ? void 0 : o.length) === 0 ? ($e.value = !1, _e.value = !1) : ((k = U.value) == null ? void 0 : k.length) === C.value ? (_e.value = !1, $e.value = !0) : U.value && (_e.value = !0);
+      },
+      {
+        immediate: !0,
+        flush: "post"
+      }
+    ), A(
+      () => [e.options],
+      () => {
+        var o;
+        K.value = e.options, C.value = ((o = e.options) == null ? void 0 : o.filter((k) => !k.isGroupTitle).length) ?? 0;
+      },
+      {
+        immediate: !0,
+        flush: "post"
+      }
+    ), A(
+      () => [K.value, U.value],
+      () => {
+        var o, k;
+        (o = K.value) != null && o.length && (E.value = (k = K.value) == null ? void 0 : k.filter(
+          (q) => {
+            var Z, N;
+            return !q.value || !((Z = U.value) != null && Z.includes) ? !1 : !q.isGroupTitle && ((N = U.value) == null ? void 0 : N.includes(q.value));
+          }
+        ));
+      },
+      {
+        immediate: !0,
+        flush: "post"
+      }
+    ), A(
+      () => [E.value, e.selectedType, e.amountText],
+      () => {
+        var o, k, q;
+        (o = E.value) != null && o.length ? e.selectedType === "amount" ? f.value = e.amountText ? e.amountText : `${(k = E.value) == null ? void 0 : k.length} ${ma}` : f.value = (q = E.value) == null ? void 0 : q.map((Z) => ge(Z)).join(", ") : f.value = "";
+      },
+      {
+        immediate: !0,
+        flush: "post"
+      }
+    ), A(
+      () => [E.value],
+      () => {
+        var o;
+        e.onAmountChange && e.onAmountChange(((o = E.value) == null ? void 0 : o.length) ?? 0);
+      },
+      {
+        immediate: !0,
+        flush: "post"
+      }
+    ), A(
+      () => [_e.value, Be.value],
+      () => {
+        Be.value && (Be.value.indeterminate = !!_e.value);
+      },
+      {
+        immediate: !0,
+        flush: "post"
+      }
+    );
+    function Qe(o) {
+      e.onDropdownToggle && e.onDropdownToggle(o);
+    }
+    function Ze() {
+      var o;
+      return (o = U.value) != null && o.length ? U.value.at(0) ?? "" : "";
+    }
+    function we(o) {
+      var q;
+      const k = [];
+      o && k.push(o), B.value && ((q = f.value) != null && q.length) && k.push(B.value), h.value = k.join(" ");
+    }
+    function xe() {
+      return !Be.value || Be.value.indeterminate || !$e.value ? e.selectAllLabel ?? ie : e.deSelectAllLabel ?? ie;
+    }
+    function ge(o) {
+      var k;
+      return o.label ?? ((k = o.value) == null ? void 0 : k.toString()) ?? "";
+    }
+    function ea(o) {
+      var k;
+      return o && U.value && U.value.includes ? (k = U.value) == null ? void 0 : k.includes(o) : !1;
+    }
+    function aa(o) {
+      return e.removeTagsTexts && e.removeTagsTexts.length > o ? e.removeTagsTexts.at(o) : `${We} ${E.value ? ge(E.value[o]) : ""}`;
+    }
+    function ta(o, k) {
+      k.stopPropagation(), Ne(o.value), Le();
+    }
+    function Fe() {
+      if (P.value) {
+        const o = P.value.querySelector("article");
+        o && J(() => {
+          Se(o);
+        }, 100);
+      }
+    }
+    function ia(o) {
+      var k, q, Z, N, re;
+      if ((k = P.value) != null && k.open) {
+        if (document) {
+          const ae = document.activeElement;
+          if (ae)
+            if (ae.getAttribute("type") === "checkbox" || ae.getAttribute("type") === "radio") {
+              const te = ae == null ? void 0 : ae.closest("li");
+              if (o.key === "ArrowDown" || o.key === "ArrowRight")
+                te != null && te.nextElementSibling ? (q = te == null ? void 0 : te.nextElementSibling.querySelector("input")) == null || q.focus() : Te(ae);
+              else if (te != null && te.previousElementSibling)
+                (Z = te == null ? void 0 : te.previousElementSibling.querySelector("input")) == null || Z.focus();
+              else if (P.value.querySelector('input[type="checkbox"]') !== ae)
+                Te(ae);
+              else {
+                const Me = ze(P.value);
+                if (Me)
+                  J(() => {
+                    Me.focus();
+                  }, 100);
+                else {
+                  const Re = Array.from(
+                    (N = P.value) == null ? void 0 : N.querySelectorAll(
+                      'input[type="checkbox"],input[type="radio"]'
+                    )
+                  );
+                  Re.length && ((re = Re.at(-1)) == null || re.focus());
+                }
+              }
+            } else
+              ae.getAttribute("type") === "search" && (o.key === "ArrowUp" || o.key === "ArrowLeft") ? (Ie("close"), Le()) : Te(ae);
+        }
+        o.stopPropagation(), o.preventDefault();
+      } else (o.key === "ArrowDown" || o.key === "ArrowRight") && (Fe(), P.value && (P.value.open = !0), Ee(), o.stopPropagation(), o.preventDefault());
+    }
+    function la(o) {
+      var k;
+      o.key === "Escape" && P.value && ((k = P.value) != null && k.open) ? (Ie("close"), Le()) : (o.key === "ArrowDown" || o.key === "ArrowUp" || o.key === "ArrowLeft" || o.key === "ArrowRight") && ia(o);
+    }
+    function Ie(o) {
+      if (P.value) {
+        if (o === "close")
+          P.value.open = !1, Le();
+        else if (P.value.open && (o != null && o.relatedTarget)) {
+          const k = o.relatedTarget;
+          P.value.contains(k) || (P.value.open = !1);
+        }
+      }
+    }
+    function De(o) {
+      var k;
+      (k = P.value) != null && k.open && !P.value.contains(o.target) && (P.value.open = !1);
+    }
+    function Ne(o) {
+      var k, q;
+      o && (e.multiple ? (k = U.value) != null && k.includes(o) ? U.value = (q = U.value) == null ? void 0 : q.filter((Z) => Z !== o) : U.value = [...U.value || [], o] : (U.value = [o], Ie("close")), me.value = (/* @__PURE__ */ new Date()).getTime());
+    }
+    function oa() {
+      var o;
+      ((o = U.value) == null ? void 0 : o.length) === C.value ? U.value = [] : U.value = e.options ? e.options.filter((k) => !k.isGroupTitle).map((k) => k.value ?? "") : [], me.value = (/* @__PURE__ */ new Date()).getTime();
+    }
+    function Te(o) {
+      if (P.value) {
+        const k = Array.from(
+          P.value.querySelectorAll(
+            'input[type="checkbox"],input[type="radio"]'
+          )
+        );
+        if (k.length) {
+          const q = k.at(0), Z = q === o && k.length > 1 ? k.at(1) : q;
+          Z && J(() => {
+            Z.focus();
+          }, 100);
+        }
+      }
+    }
+    function Ee(o) {
+      if (P.value) {
+        const k = ze(P.value);
+        k ? J(() => {
+          k.focus();
+        }, 100) : o || Te();
+      }
+    }
+    function da(o) {
+      const k = o.target.value;
+      K.value = !e.options || !k || k.length === 0 ? e.options : e.options.filter(
+        (q) => !q.isGroupTitle && ge(q).toLowerCase().includes(k.toLowerCase())
+      );
+    }
+    function na() {
+      U.value = [], Le();
+    }
+    function Le() {
+      var o, k;
+      (k = (o = P.value) == null ? void 0 : o.querySelector("summary")) == null || k.focus();
+    }
+    return (o, k) => {
+      var q, Z;
+      return m(), g("div", {
+        id: u.value,
+        ref_key: "_ref",
+        ref: Je,
+        class: F(c(D)("db-custom-select", e.class)),
+        "aria-invalid": T.value === "invalid",
+        "data-custom-validity": T.value,
+        "data-width": o.width,
+        "data-variant": o.variant,
+        "data-required": c(X)(o.required),
+        "data-placement": o.placement,
+        "data-selected-type": o.multiple ? o.selectedType : "text",
+        "data-hide-label": c(H)(o.showLabel),
+        "data-icon": o.icon,
+        "data-hide-icon": c(H)(o.showIcon)
+      }, [
+        I("label", { id: r.value }, [
+          $(w(o.label ?? c(ie)), 1),
+          I("select", {
+            role: "none",
+            hidden: !0,
+            id: v.value,
+            tabIndex: -1,
+            ref_key: "selectRef",
+            ref: be,
+            form: o.form,
+            disabled: o.disabled,
+            multiple: o.multiple,
+            required: o.required,
+            onChange: k[0] || (k[0] = async (N) => {
+            })
+          }, [
+            (m(!0), g(G, null, ce(K.value, (N, re) => (m(), g("option", {
+              key: re,
+              disabled: N.disabled,
+              value: N.value
+            }, w(ge(N)), 9, pi))), 128))
+          ], 40, fi)
+        ], 8, vi),
+        I("details", {
+          ref_key: "detailsRef",
+          ref: P,
+          open: o.open,
+          "aria-disabled": o.disabled,
+          onToggle: k[2] || (k[2] = async (N) => Qe(N)),
+          onKeydown: k[3] || (k[3] = async (N) => la(N))
+        }, [
+          L(o.$slots, "default"),
+          o.options ? (m(), g(G, { key: 0 }, [
+            I("summary", {
+              class: "db-custom-select-form-field",
+              id: _.value,
+              "aria-labelledby": r.value
+            }, [
+              (q = f.value) != null && q.length ? (m(), g("span", {
+                key: 0,
+                "data-visually-hidden": c(X)(o.selectedType === "tag"),
+                id: B.value
+              }, w(f.value), 9, bi)) : R("", !0),
+              o.selectedType === "tag" ? (m(), g("div", gi, [
+                (m(!0), g(G, null, ce(E.value, (N, re) => (m(), x(At, {
+                  key: re,
+                  emphasis: "strong",
+                  behavior: "removable",
+                  removeButton: aa(re),
+                  onRemove: (ae) => {
+                    ta(N, ae);
+                  }
+                }, {
+                  default: V(() => [
+                    $(w(ge(N)), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["removeButton", "onRemove"]))), 128))
+              ])) : R("", !0)
+            ], 8, mi),
+            j(ri, { width: o.dropdownWidth }, {
+              default: V(() => [
+                z.value ? (m(), g("div", yi, [
+                  j(nt, {
+                    type: "search",
+                    showLabel: !1,
+                    label: o.searchLabel ?? c(ie),
+                    placeholder: o.searchPlaceholder ?? o.searchLabel,
+                    ariaDescribedBy: fe.value || o.showLoading ? O.value : void 0,
+                    onInput: (N) => da(N)
+                  }, null, 8, ["label", "placeholder", "ariaDescribedBy", "onInput"])
+                ])) : R("", !0),
+                fe.value || o.showLoading ? (m(), x(Q, {
+                  key: 1,
+                  id: O.value,
+                  icon: fe.value ? void 0 : "circular_arrows",
+                  semantic: fe.value ? "warning" : "informational"
+                }, {
+                  default: V(() => [
+                    $(w((fe.value ? o.noResultsText : o.loadingText) ?? c(pa)), 1)
+                  ]),
+                  _: 1
+                }, 8, ["id", "icon", "semantic"])) : (m(), g(G, { key: 2 }, [
+                  y.value ? (m(), g("div", ki, [
+                    I("div", Bi, [
+                      I("label", null, [
+                        I("input", {
+                          type: "checkbox",
+                          value: "select-all",
+                          ref_key: "selectAllRef",
+                          ref: Be,
+                          form: u.value,
+                          checked: $e.value,
+                          onChange: k[1] || (k[1] = async (N) => oa())
+                        }, null, 40, wi),
+                        $(w(xe()), 1)
+                      ])
+                    ])
+                  ])) : R("", !0),
+                  j(ii, {
+                    multiple: o.multiple,
+                    label: o.label ?? c(ie)
+                  }, {
+                    default: V(() => [
+                      (m(!0), g(G, null, ce(K.value, (N, re) => (m(), x(si, {
+                        key: re,
+                        type: o.multiple ? "checkbox" : "radio",
+                        showDivider: N.showDivider,
+                        icon: N.icon,
+                        isGroupTitle: N.isGroupTitle,
+                        groupTitle: ge(N),
+                        name: a.value,
+                        checked: ea(N.value),
+                        disabled: N.disabled,
+                        value: N.value,
+                        onChange: (ae) => {
+                          Ne(N.value);
+                        }
+                      }, {
+                        default: V(() => [
+                          N.isGroupTitle ? R("", !0) : (m(), g(G, { key: 0 }, [
+                            $(w(ge(N)), 1)
+                          ], 64))
+                        ]),
+                        _: 2
+                      }, 1032, ["type", "showDivider", "icon", "isGroupTitle", "groupTitle", "name", "checked", "disabled", "value", "onChange"]))), 128))
+                    ]),
+                    _: 1
+                  }, 8, ["multiple", "label"])
+                ], 64)),
+                I("div", null, [
+                  j(he, {
+                    variant: "ghost",
+                    width: "full",
+                    icon: "cross",
+                    size: "small",
+                    onClick: (N) => {
+                      Ie("close");
+                    }
+                  }, {
+                    default: V(() => [
+                      $(w(o.mobileCloseButtonText ?? c(Ce)), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["onClick"])
+                ])
+              ]),
+              _: 1
+            }, 8, ["width"])
+          ], 64)) : R("", !0)
+        ], 40, hi),
+        (o.showClearSelection ?? !0) && ((Z = U.value) != null && Z.length) ? (m(), x(he, {
+          key: 0,
+          icon: "cross",
+          variant: "ghost",
+          size: "small",
+          noText: !0,
+          onClick: (N) => na()
+        }, {
+          default: V(() => [
+            $(w(o.clearSelectionLabel), 1),
+            j(Xt, { placement: "top" }, {
+              default: V(() => [
+                $(w(o.clearSelectionLabel), 1)
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["onClick"])) : R("", !0),
+        I("span", {
+          "aria-hidden": c(X)(!0),
+          id: S.value
+        }, w(o.placeholder ?? o.label), 9, _i),
+        o.message ? (m(), x(Q, {
+          key: 1,
+          size: "small",
+          icon: o.messageIcon,
+          id: s.value
+        }, {
+          default: V(() => [
+            $(w(o.message), 1)
+          ]),
+          _: 1
+        }, 8, ["icon", "id"])) : R("", !0),
+        j(Q, {
+          size: "small",
+          semantic: "successful",
+          id: b.value
+        }, {
+          default: V(() => [
+            $(w(o.validMessage ?? c(se)), 1)
+          ]),
+          _: 1
+        }, 8, ["id"]),
+        j(Q, {
+          size: "small",
+          semantic: "critical",
+          id: d.value
+        }, {
+          default: V(() => {
+            var N;
+            return [
+              $(w(o.invalidMessage ?? (((N = be.value) == null ? void 0 : N.validationMessage) || c(ue))), 1)
+            ];
+          }),
+          _: 1
+        }, 8, ["id"]),
+        I("span", Ii, w(p.value), 1)
+      ], 10, ci);
+    };
+  }
+}), Li = ["id"], Ll = /* @__PURE__ */ M({
+  __name: "custom-select-form-field",
+  props: {
+    children: { default: void 0 },
+    className: { default: void 0 },
+    class: {},
+    describedbyid: {},
+    id: { default: void 0 },
+    autofocus: { type: Boolean }
+  },
+  setup(i) {
+    const t = i, l = n(null);
+    return (e, a) => (m(), g("summary", {
+      ref_key: "_ref",
+      ref: l,
+      id: e.id,
+      class: F(c(D)("db-custom-select-form-field", t.class))
     }, [
-      w(e.$slots, "default")
-    ], 10, sn));
+      L(e.$slots, "default")
+    ], 10, Li));
   }
 });
 export {
-  st as AlignmentList,
-  tt as AutoCompleteList,
-  he as COLOR,
-  mn as COLORS,
-  bn as COLORS_SIMPLE,
-  pn 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,
-  Ye as DBDrawer,
-  Ln as DBHeader,
-  En as DBIcon,
-  W as DBInfotext,
-  Nn as DBInput,
-  An as DBLink,
-  Pn as DBNavigation,
-  Rn as DBNavigationItem,
-  Bn as DBNotification,
-  Fn as DBPage,
-  Vn as DBPopover,
-  Tn as DBRadio,
-  Sn as DBSection,
-  Cn as DBSelect,
-  ot as DBStack,
-  Dn as DBSwitch,
-  Da as DBTabItem,
-  an as DBTabList,
-  tn as DBTabPanel,
-  qn as DBTabs,
-  Mn as DBTag,
-  zn as DBTextarea,
-  Gn as DBTooltip,
-  $e as DEFAULT_BACK,
-  Le as DEFAULT_BURGER_MENU,
-  ce as DEFAULT_CLOSE_BUTTON,
-  ue as DEFAULT_DATALIST_ID_SUFFIX,
-  Ee as DEFAULT_ICON,
-  ee as DEFAULT_ID,
-  x as DEFAULT_INVALID_MESSAGE,
-  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,
-  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,
-  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,
-  Ke as NavigationItemSafeTriangle,
-  Yn as OrientationList,
-  Hn as PlacementList,
-  Qn as PopoverDelayList,
-  Zn 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,
-  re as addAttributeToChildren,
-  A as cls,
-  H as delay,
-  V as getBooleanAsString,
-  P as getHideProp,
-  se 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
+  wl as AlignmentList,
+  gl as AutoCompleteList,
+  je as COLOR,
+  Ni as COLORS,
+  Mi as COLORS_SIMPLE,
+  Fi as COLOR_CONST,
+  He as COLOR_SIMPLE,
+  el as DBAccordion,
+  Gt as DBAccordionItem,
+  Gi as DBBadge,
+  Pi as DBBrand,
+  he as DBButton,
+  qi as DBCard,
+  Vi as DBCheckbox,
+  Il as DBCustomSelect,
+  ri as DBCustomSelectDropdown,
+  Ll as DBCustomSelectFormField,
+  ii as DBCustomSelectList,
+  si as DBCustomSelectListItem,
+  Oi as DBDivider,
+  Ga as DBDrawer,
+  Wi as DBHeader,
+  Xi as DBIcon,
+  Q as DBInfotext,
+  nt as DBInput,
+  Hi as DBLink,
+  al as DBNavigation,
+  xi as DBNavigationItem,
+  Ui as DBNotification,
+  ji as DBPage,
+  tl as DBPopover,
+  Yi as DBRadio,
+  Ki as DBSection,
+  Ji as DBSelect,
+  _l as DBStack,
+  Qi as DBSwitch,
+  Lt as DBTabItem,
+  Yt as DBTabList,
+  Jt as DBTabPanel,
+  il as DBTabs,
+  At as DBTag,
+  Zi as DBTextarea,
+  Xt as DBTooltip,
+  ha as DEFAULT_BACK,
+  ba as DEFAULT_BURGER_MENU,
+  Ce as DEFAULT_CLOSE_BUTTON,
+  Pe as DEFAULT_DATALIST_ID_SUFFIX,
+  ga as DEFAULT_ICON,
+  ye as DEFAULT_ID,
+  ue as DEFAULT_INVALID_MESSAGE,
+  ne as DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
+  ie as DEFAULT_LABEL,
+  Ue as DEFAULT_LABEL_ID_SUFFIX,
+  pa as DEFAULT_MESSAGE,
+  oe as DEFAULT_MESSAGE_ID_SUFFIX,
+  Oe as DEFAULT_PLACEHOLDER,
+  Ae as DEFAULT_PLACEHOLDER_ID_SUFFIX,
+  We as DEFAULT_REMOVE,
+  ya as DEFAULT_ROWS,
+  ma as DEFAULT_SELECTED,
+  Ge as DEFAULT_SELECT_ID_SUFFIX,
+  se as DEFAULT_VALID_MESSAGE,
+  de as DEFAULT_VALID_MESSAGE_ID_SUFFIX,
+  ka as DEFAULT_VIEWPORT,
+  Di as DENSITIES,
+  Xe as DENSITY,
+  Ci as DENSITY_CONST,
+  Ba as DESKTOP_VIEWPORT,
+  ei as EmphasisList,
+  sl as GapSpacingList,
+  bl as LabelVariantList,
+  yl as LinkCurrentList,
+  Bl as LinkReferrerPolicyList,
+  kl as LinkTargetList,
+  dl as MarginList,
+  cl as MaxWidthList,
+  Pa as NavigationItemSafeTriangle,
+  ul as OrientationList,
+  Zt as PlacementHorizontalList,
+  nl as PlacementList,
+  xt as PlacementVerticalList,
+  vl as PopoverDelayList,
+  fl as PopoverWidthList,
+  Ye as SEMANTIC,
+  Ri as SEMANTICS,
+  ll as SemanticList,
+  pl as SizeList,
+  ol as SpacingList,
+  zi as TESTING_VIEWPORTS,
+  hl as TagEmphasisList,
+  ml as ValidationList,
+  rl as WidthList,
+  Ve as addAttributeToChildren,
+  D as cls,
+  J as delay,
+  X as getBooleanAsString,
+  H as getHideProp,
+  ze as getSearchInput,
+  Se as handleDataOutside,
+  le as hasVoiceOver,
+  ca as isArrayOfStrings,
+  Ke as isEventTargetNavigationItem,
+  ra as isInView,
+  ee as stringPropVisible,
+  Y as uuid,
+  Si as visibleInVX,
+  Ei as visibleInVY
 };