@db-ux/v-core-components 4.3.0 → 4.3.1

package/dist/db-ux.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as W, ref as o, onMounted as J, watch as C, createElementBlock as y, openBlock as v, normalizeClass as O, unref as n, createElementVNode as E, createCommentVNode as z, renderSlot as M, Fragment as H, createTextVNode as D, toDisplayString as S, renderList as me, createBlock as Y, onUnmounted as he, createVNode as te, withCtx as G } from "vue";
-const Te = "OVERWRITE_DEFAULT_ID", ye = "LABEL SHOULD BE SET", ea = " ", Ia = "MESSAGE SHOULD BE SET", Ye = "-label", Je = "-select", ce = "-message", re = "-valid-message", ve = "-invalid-message", De = "-placeholder", Qe = "-datalist", se = "TODO: Add a validMessage", ee = "TODO: Add an invalidMessage", aa = "Remove", xa = "Back", $a = "Selected", Ta = "BurgerMenu", Ca = "brand", Ea = 4, qe = "Close", Yi = "density", Ji = "color";
+import { defineComponent as W, ref as o, onMounted as J, watch as C, createElementBlock as y, openBlock as v, normalizeClass as O, unref as n, createElementVNode as E, createCommentVNode as z, renderSlot as M, Fragment as H, createTextVNode as D, toDisplayString as S, renderList as ge, createBlock as Y, onUnmounted as he, createVNode as te, withCtx as G } from "vue";
+const Te = "OVERWRITE_DEFAULT_ID", ke = "LABEL SHOULD BE SET", ea = " ", Ia = "MESSAGE SHOULD BE SET", Ye = "-label", Je = "-select", ce = "-message", re = "-valid-message", ve = "-invalid-message", De = "-placeholder", Qe = "-datalist", se = "TODO: Add a validMessage", ee = "TODO: Add an invalidMessage", aa = "Remove", xa = "Back", $a = "Selected", Ta = "BurgerMenu", Ca = "brand", Ea = 4, qe = "Close", Yi = "density", Ji = "color";
 var ta = /* @__PURE__ */ ((e) => (e.FUNCTIONAL = "functional", e.REGULAR = "regular", e.EXPRESSIVE = "expressive", e))(ta || {});
 const Qi = Object.entries(ta).map(([, e]) => e);
 var ia = /* @__PURE__ */ ((e) => (e.PRIMARY = "primary", e))(ia || {}), la = /* @__PURE__ */ ((e) => (e.NEUTRAL_BG_LEVEL_1 = "neutral-bg-basic-level-1", e.NEUTRAL_BG_LEVEL_2 = "neutral-bg-basic-level-2", e.NEUTRAL_BG_LEVEL_3 = "neutral-bg-basic-level-3", e.NEUTRAL_BG_TRANSPARENT_SEMI = "neutral-bg-basic-transparent-semi", e.NEUTRAL_BG_TRANSPARENT_FULL = "neutral-bg-basic-transparent-full", e.BRAND_BG_LEVEL_1 = "brand-bg-basic-level-1", e.BRAND_BG_LEVEL_2 = "brand-bg-basic-level-2", e.BRAND_BG_LEVEL_3 = "brand-bg-basic-level-3", e.BRAND_BG_TRANSPARENT_SEMI = "brand-bg-basic-transparent-semi", e.BRAND_BG_TRANSPARENT_FULL = "brand-bg-basic-transparent-full", e.SUCCESSFUL_BG_LEVEL_1 = "successful-bg-basic-level-1", e.SUCCESSFUL_BG_LEVEL_2 = "successful-bg-basic-level-2", e.SUCCESSFUL_BG_LEVEL_3 = "successful-bg-basic-level-3", e.SUCCESSFUL_BG_TRANSPARENT_SEMI = "successful-bg-basic-transparent-semi", e.SUCCESSFUL_BG_TRANSPARENT_FULL = "successful-bg-basic-transparent-full", e.CRITICAL_BG_LEVEL_1 = "critical-bg-basic-level-1", e.CRITICAL_BG_LEVEL_2 = "critical-bg-basic-level-2", e.CRITICAL_BG_LEVEL_3 = "critical-bg-basic-level-3", e.CRITICAL_BG_TRANSPARENT_SEMI = "critical-bg-basic-transparent-semi", e.CRITICAL_BG_TRANSPARENT_Full = "critical-bg-basic-transparent-full", e.WARNING_BG_LEVEL_1 = "warning-bg-basic-level-1", e.WARNING_BG_LEVEL_2 = "warning-bg-basic-level-2", e.WARNING_BG_LEVEL_3 = "warning-bg-basic-level-3", e.WARNING_BG_TRANSPARENT_SEMI = "warning-bg-basic-transparent-semi", e.WARNING_BG_TRANSPARENT_FULL = "warning-bg-basic-transparent-full", e.INFORMATIONAL_BG_LEVEL_1 = "informational-bg-basic-level-1", e.INFORMATIONAL_BG_LEVEL_2 = "informational-bg-basic-level-2", e.INFORMATIONAL_BG_LEVEL_3 = "informational-bg-basic-level-3", e.INFORMATIONAL_BG_TRANSPARENT_SEMI = "informational-bg-basic-transparent-semi", e.INFORMATIONAL_BG_TRANSPARENT_FULL = "informational-bg-basic-transparent-full", e))(la || {});
@@ -54,13 +54,13 @@ const el = Object.entries(na).map(([, e]) => e), Aa = {
 }, q = (e, t) => {
   if (e != null)
     return typeof e == "string" && t ? !!(t === e || e) : !!e;
-}, Se = (e, t) => {
+}, pe = (e, t) => {
   if (!(e == null && t == null))
     return Number(e ?? t);
 }, Ra = (e) => {
   if (e != null)
     return e === "any" ? "any" : Number(e);
-}, Ze = (e, t) => t && ["number", "range"].includes(t) ? Se(e) : e, ne = (e) => {
+}, Ze = (e, t) => t && ["number", "range"].includes(t) ? pe(e) : e, ne = (e) => {
   if (e != null)
     return P(!e);
 }, Z = (e, t) => (t === void 0 || !!t) && !!e, _e = (e) => e.querySelector('input[type="search"]'), ll = (e, t) => {
@@ -221,7 +221,7 @@ const el = Object.entries(na).map(([, e]) => e), Aa = {
       "data-variant": e.variant
     }, [
       e.items ? z("", !0) : M(m.$slots, "default", { key: 0 }),
-      e.items ? (v(!0), y(H, { key: 1 }, me(f(), (k, $) => (v(), Y(qa, {
+      e.items ? (v(!0), y(H, { key: 1 }, ge(f(), (k, $) => (v(), Y(qa, {
         key: `accordion-item-${$}`,
         headlinePlain: k.headlinePlain,
         disabled: k.disabled,
@@ -270,7 +270,7 @@ const el = Object.entries(na).map(([, e]) => e), Aa = {
       "data-size": e.size,
       "data-emphasis": e.emphasis,
       "data-placement": e.placement,
-      "data-label": e.placement?.startsWith("corner") && (e.label ?? n(ye))
+      "data-label": e.placement?.startsWith("corner") && (e.label ?? n(ke))
     }, [
       e.text ? (v(), y(H, { key: 0 }, [
         D(S(e.text), 1)
@@ -306,7 +306,7 @@ const el = Object.entries(na).map(([, e]) => e), Aa = {
       ], 64)) : M(a.$slots, "default", { key: 1 })
     ], 10, Ga));
   }
-}), Wa = ["id", "type", "disabled", "data-icon", "data-show-icon", "data-icon-trailing", "data-show-icon-trailing", "data-size", "data-width", "data-variant", "data-no-text", "name", "form", "value"], ke = /* @__PURE__ */ W({
+}), Wa = ["id", "type", "disabled", "data-icon", "data-show-icon", "data-icon-trailing", "data-show-icon-trailing", "data-size", "data-width", "data-variant", "data-no-text", "name", "form", "value"], we = /* @__PURE__ */ W({
   name: "DBButton",
   __name: "button",
   props: {
@@ -565,8 +565,8 @@ const el = Object.entries(na).map(([, e]) => e), Aa = {
               checked: a.checked,
               defaultChecked: void 0
             },
-            (F) => {
-              I(F);
+            (N) => {
+              I(N);
             },
             B.signal
           );
@@ -611,9 +611,9 @@ const el = Object.entries(na).map(([, e]) => e), Aa = {
           disabled: n(q)(e.disabled, "disabled"),
           value: e.value,
           required: n(q)(e.required, "required"),
-          onChange: B[0] || (B[0] = async (F) => I(F)),
-          onBlur: B[1] || (B[1] = async (F) => T(F)),
-          onFocus: B[2] || (B[2] = async (F) => w(F)),
+          onChange: B[0] || (B[0] = async (N) => I(N)),
+          onBlur: B[1] || (B[1] = async (N) => T(N)),
+          onFocus: B[2] || (B[2] = async (N) => w(N)),
           "aria-describedby": e.ariaDescribedBy ?? k.value
         }, null, 40, Ya),
         e.label ? (v(), y(H, { key: 0 }, [
@@ -1041,10 +1041,10 @@ const Qa = (e) => {
   },
   emits: ["update:value"],
   setup(e, { emit: t }) {
-    const l = t, a = e, i = o(void 0), c = o(void 0), u = o(void 0), f = o(void 0), m = o(void 0), h = o(void 0), k = o(void 0), $ = o(void 0), g = o(""), s = o(void 0), d = o(null);
+    const l = t, a = e, i = o(void 0), c = o(void 0), u = o(void 0), f = o(void 0), m = o(void 0), h = o(void 0), k = o(void 0), $ = o(""), g = o(""), s = o(void 0), d = o(null);
     J(() => {
-      const N = a.id ?? `input-${_()}`;
-      i.value = N, c.value = N + ce, u.value = N + re, f.value = N + ve, h.value = N + Qe, m.value = a.invalidMessage || ee;
+      const F = a.id ?? `input-${_()}`;
+      i.value = F, c.value = F + ce, u.value = F + re, f.value = F + ve, h.value = F + Qe, m.value = a.invalidMessage || ee;
     }), he(() => {
       s.value?.abort();
     }), C(
@@ -1060,8 +1060,8 @@ const Qa = (e) => {
       () => [i.value],
       () => {
         if (i.value) {
-          const N = i.value + ce;
-          c.value = N, u.value = i.value + re, f.value = i.value + ve, h.value = a.dataListId ?? i.value + Qe, Z(a.message, a.showMessage) && (k.value = N), I();
+          const F = i.value + ce;
+          c.value = F, u.value = i.value + re, f.value = i.value + ve, h.value = a.dataListId ?? i.value + Qe, Z(a.message, a.showMessage) && (k.value = F), I();
         }
       },
       {
@@ -1071,7 +1071,7 @@ const Qa = (e) => {
     ), C(
       () => [a.value],
       () => {
-        $.value = a.value;
+        a.value !== void 0 && ($.value = a.value);
       },
       {
         immediate: !0,
@@ -1081,17 +1081,17 @@ const Qa = (e) => {
       () => [d.value],
       () => {
         if (d.value) {
-          let X = s.value;
-          X || (X = new AbortController(), s.value = X), Oe(
+          let A = s.value;
+          A || (A = new AbortController(), s.value = A), Oe(
             d.value,
             {
               value: a.value,
               defaultValue: void 0
             },
-            (A) => {
-              w(A), T(A);
+            (R) => {
+              w(R), T(R);
             },
-            X.signal
+            A.signal
           );
         }
       },
@@ -1106,28 +1106,28 @@ const Qa = (e) => {
     function I() {
       !d.value?.validity.valid || a.validation === "invalid" ? (k.value = f.value, m.value = a.invalidMessage || d.value?.validationMessage || ee, ue() && (g.value = m.value, K(() => g.value = "", 1e3))) : b() && d.value?.validity.valid && (a.required || a.minLength || a.maxLength || a.pattern) ? (k.value = u.value, ue() && (g.value = a.validMessage ?? se, K(() => g.value = "", 1e3))) : Z(a.message, a.showMessage) ? k.value = c.value : k.value = void 0;
     }
-    function T(N, X) {
-      a.input && a.input(N), $.value = N.target.value, a.onInput && a.onInput(N), de(l, N), I();
+    function T(F, j) {
+      a.input && a.input(F), $.value = F.target.value, a.onInput && a.onInput(F), de(l, F), I();
     }
-    function w(N, X) {
-      a.onChange && a.onChange(N), de(l, N), I();
+    function w(F, j) {
+      a.onChange && a.onChange(F), de(l, F), I();
     }
-    function L(N) {
-      a.onBlur && a.onBlur(N);
+    function L(F) {
+      a.onBlur && a.onBlur(F);
     }
-    function B(N) {
-      a.onFocus && a.onFocus(N);
+    function B(F) {
+      a.onFocus && a.onFocus(F);
     }
-    function F() {
-      const N = a.dataList;
+    function N() {
+      const F = a.dataList;
       return Array.from(
-        (Fa(N) ? N?.map((X) => ({
-          value: X,
+        (Fa(F) ? F?.map((j) => ({
+          value: j,
           label: void 0
-        })) : N) || []
+        })) : F) || []
       );
     }
-    return (N, X) => (v(), y("div", {
+    return (F, j) => (v(), y("div", {
       class: O(n(U)("db-input", a.class)),
       "data-variant": e.variant,
       "data-hide-label": n(ne)(e.showLabel),
@@ -1137,7 +1137,7 @@ const Qa = (e) => {
       "data-hide-asterisk": n(ne)(e.showRequiredAsterisk),
       "data-show-icon-trailing": n(P)(e.showIconTrailing)
     }, [
-      E("label", { for: i.value }, S(e.label ?? n(ye)), 9, ct),
+      E("label", { for: i.value }, S(e.label ?? n(ke)), 9, ct),
       E("input", {
         "aria-invalid": e.validation === "invalid",
         "data-custom-validity": e.validation,
@@ -1153,8 +1153,8 @@ const Qa = (e) => {
         required: n(q)(e.required, "required"),
         step: n(Ra)(e.step),
         value: e.value ?? $.value,
-        maxLength: n(Se)(e.maxLength, e.maxlength),
-        minLength: n(Se)(e.minLength, e.minlength),
+        maxLength: n(pe)(e.maxLength, e.maxlength),
+        minLength: n(pe)(e.minLength, e.minlength),
         max: n(Ze)(e.max, e.type),
         min: n(Ze)(e.min, e.type),
         readOnly: n(q)(e.readOnly, "readOnly") || n(q)(e.readonly, "readonly"),
@@ -1165,10 +1165,10 @@ const Qa = (e) => {
         autoFocus: n(q)(e.autofocus, "autofocus"),
         enterKeyHint: e.enterkeyhint,
         inputMode: e.inputmode,
-        onInput: X[0] || (X[0] = async (A) => T(A)),
-        onChange: X[1] || (X[1] = async (A) => w(A)),
-        onBlur: X[2] || (X[2] = async (A) => L(A)),
-        onFocus: X[3] || (X[3] = async (A) => B(A)),
+        onInput: j[0] || (j[0] = async (A) => T(A)),
+        onChange: j[1] || (j[1] = async (A) => w(A)),
+        onBlur: j[2] || (j[2] = async (A) => L(A)),
+        onFocus: j[3] || (j[3] = async (A) => B(A)),
         list: e.dataList && h.value,
         "aria-describedby": e.ariaDescribedBy ?? k.value,
         role: ["datetime-local", "date", "time", "week", "month", "color"].includes(
@@ -1179,12 +1179,12 @@ const Qa = (e) => {
         key: 0,
         id: h.value
       }, [
-        (v(!0), y(H, null, me(F(), (A) => (v(), y("option", {
+        (v(!0), y(H, null, ge(N(), (A) => (v(), y("option", {
           key: h.value + "-option-" + A.value,
           value: A.value
         }, S(A.label), 9, ft))), 128))
       ], 8, vt)) : z("", !0),
-      M(N.$slots, "default"),
+      M(F.$slots, "default"),
       n(Z)(e.message, e.showMessage) ? (v(), Y(Q, {
         key: 1,
         size: e.messageSize || "small",
@@ -1454,7 +1454,7 @@ const Qa = (e) => {
   },
   emits: ["update:values"],
   setup(e, { emit: t }) {
-    const l = t, a = e, i = o(void 0), c = o(void 0), u = o(void 0), f = o(void 0), m = o(void 0), h = o(void 0), k = o(void 0), $ = o(void 0), g = o(void 0), s = o(void 0), d = o("no-validation"), b = o(!1), I = o(void 0), T = o(void 0), w = o(""), L = o(void 0), B = o(""), F = o([]), N = o(!1), X = o(!1), A = o(0), R = o([]), j = o([]), pe = o(!1), ge = o(void 0), Ce = o(0), Me = o(void 0), Ne = o(void 0), Re = o(void 0), ze = o(!1), Ie = o(!1), ra = o(null), V = o(null), le = o(null), Ee = o(null), Pe = o(null);
+    const l = t, a = e, i = o(void 0), c = o(void 0), u = o(void 0), f = o(void 0), m = o(void 0), h = o(void 0), k = o(void 0), $ = o(void 0), g = o(void 0), s = o(void 0), d = o("no-validation"), b = o(!1), I = o(void 0), T = o(void 0), w = o(""), L = o(void 0), B = o(""), N = o([]), F = o(!1), j = o(!1), A = o(0), R = o([]), X = o([]), me = o(!1), be = o(void 0), Ce = o(0), Me = o(void 0), Ne = o(void 0), Re = o(void 0), ze = o(!1), Ie = o(!1), ra = o(null), V = o(null), le = o(null), Ee = o(null), Pe = o(null);
     J(() => {
       const r = a.id ?? `custom-select-${_()}`;
       i.value = r, c.value = r + ce, u.value = r + re, f.value = r + ve, h.value = r + Je, k.value = r + Ye, $.value = r + "-summary", g.value = r + De, L.value = r + "-selected-labels", s.value = r + "-info", m.value = a.invalidMessage || ee, typeof window < "u" && "IntersectionObserver" in window && (Ne.value = new IntersectionObserver((p) => {
@@ -1505,9 +1505,9 @@ const Qa = (e) => {
         flush: "post"
       }
     ), C(
-      () => [a.showNoResults, a.showLoading, j.value],
+      () => [a.showNoResults, a.showLoading, X.value],
       () => {
-        a.showNoResults !== void 0 ? pe.value = a.showNoResults : j.value && (pe.value = j.value.length === 0);
+        a.showNoResults !== void 0 ? me.value = a.showNoResults : X.value && (me.value = X.value.length === 0);
       },
       {
         immediate: !0,
@@ -1516,7 +1516,7 @@ const Qa = (e) => {
     ), C(
       () => [a.showSelectAll, A.value, a.multiple],
       () => {
-        N.value = !!(a.multiple && (a.showSelectAll ?? A.value > 5));
+        F.value = !!(a.multiple && (a.showSelectAll ?? A.value > 5));
       },
       {
         immediate: !0,
@@ -1525,7 +1525,7 @@ const Qa = (e) => {
     ), C(
       () => [a.showSearch, A.value],
       () => {
-        X.value = a.showSearch ?? A.value > 9;
+        j.value = a.showSearch ?? A.value > 9;
       },
       {
         immediate: !0,
@@ -1561,7 +1561,7 @@ const Qa = (e) => {
             le.value,
             () => {
               const x = p || (le.value.value ? [le.value.value] : []);
-              Be(x), Ge();
+              Se(x), Ge();
             },
             r.signal
           );
@@ -1592,7 +1592,7 @@ const Qa = (e) => {
     ), C(
       () => [a.options],
       () => {
-        j.value = a.options, A.value = a.options?.filter((r) => !r.isGroupTitle).length ?? 0;
+        X.value = a.options, A.value = a.options?.filter((r) => !r.isGroupTitle).length ?? 0;
       },
       {
         immediate: !0,
@@ -1613,7 +1613,7 @@ const Qa = (e) => {
     ), C(
       () => [a.options, R.value],
       () => {
-        a.options?.length && (F.value = a.options?.filter(
+        a.options?.length && (N.value = a.options?.filter(
           (r) => !r.value || !R.value?.includes ? !1 : !r.isGroupTitle && R.value?.includes(r.value)
         ));
       },
@@ -1623,7 +1623,7 @@ const Qa = (e) => {
       }
     ), C(
       () => [
-        F.value,
+        N.value,
         a.selectedType,
         a.amountText,
         a.selectedLabels,
@@ -1634,13 +1634,13 @@ const Qa = (e) => {
           w.value = a.selectedLabels;
           return;
         }
-        if (F.value?.length) {
+        if (N.value?.length) {
           if (a.transformSelectedLabels) {
-            const r = F.value, p = a.transformSelectedLabels;
+            const r = N.value, p = a.transformSelectedLabels;
             w.value = p(r);
             return;
           }
-          a.selectedType === "amount" ? w.value = a.amountText ? a.amountText : `${F.value?.length} ${$a}` : w.value = F.value?.map((r) => we(r)).join(", ");
+          a.selectedType === "amount" ? w.value = a.amountText ? a.amountText : `${N.value?.length} ${$a}` : w.value = N.value?.map((r) => Be(r)).join(", ");
         } else
           w.value = "";
       },
@@ -1649,9 +1649,9 @@ const Qa = (e) => {
         flush: "post"
       }
     ), C(
-      () => [F.value],
+      () => [N.value],
       () => {
-        a.onAmountChange && a.onAmountChange(F.value?.length ?? 0);
+        a.onAmountChange && a.onAmountChange(N.value?.length ?? 0);
       },
       {
         immediate: !0,
@@ -1686,12 +1686,12 @@ const Qa = (e) => {
       le.value && (le.value.value = ha()), !le.value?.validity.valid || a.validation === "invalid" ? (Le(f.value), m.value = a.invalidMessage || le.value?.validationMessage || ee, ue() && (B.value = m.value, K(() => B.value = "", 1e3)), b.value && (d.value = a.validation ?? "invalid")) : Ue() && le.value?.validity.valid && a.required ? (Le(u.value), ue() && (B.value = a.validMessage ?? se, K(() => B.value = "", 1e3)), d.value = a.validation ?? "valid") : Z(a.message, a.showMessage) ? (Le(c.value), d.value = a.validation ?? "no-validation") : (Le(g.value), d.value = a.validation ?? "no-validation");
     }
     function fa(r) {
-      a.onDropdownToggle && (r.stopPropagation(), a.onDropdownToggle(r)), r.target instanceof HTMLDetailsElement && r.target.open ? (ge.value = new fe().addCallback(
+      a.onDropdownToggle && (r.stopPropagation(), a.onDropdownToggle(r)), r.target instanceof HTMLDetailsElement && r.target.open ? (be.value = new fe().addCallback(
         (p) => Ba(p)
       ), Me.value = new oe().addCallback(
         (p) => va(p)
-      ), Ve(), Ne.value?.observe(V.value), r.target.dataset.test || He()) : (ge.value && new fe().removeCallback(
-        ge.value
+      ), Ve(), Ne.value?.observe(V.value), r.target.dataset.test || He()) : (be.value && new fe().removeCallback(
+        be.value
       ), Me.value && new oe().removeCallback(
         Me.value
       ), Ne.value?.unobserve(V.value));
@@ -1704,9 +1704,9 @@ const Qa = (e) => {
       r && p.push(r), L.value && w.value?.length && p.push(L.value), T.value = p.join(" ");
     }
     function ma() {
-      return a.selectAllLabel ?? ye;
+      return a.selectAllLabel ?? ke;
     }
-    function we(r) {
+    function Be(r) {
       return r.label ?? r.value?.toString() ?? "";
     }
     function ga(r) {
@@ -1719,7 +1719,7 @@ const Qa = (e) => {
         if (ae >= 0 && ae < p.length)
           return p[ae];
       }
-      return `${aa} ${we(r)}`;
+      return `${aa} ${Be(r)}`;
     }
     function ya(r, p) {
       p && p.stopPropagation(), We(r.value), $e();
@@ -1746,9 +1746,9 @@ const Qa = (e) => {
               if (r.key === "ArrowDown" || r.key === "ArrowRight") {
                 let ie = ae?.nextElementSibling;
                 for (; ie; ) {
-                  const be = ie.querySelector("input");
-                  if (be) {
-                    be.focus();
+                  const ye = ie.querySelector("input");
+                  if (ye) {
+                    ye.focus();
                     break;
                   }
                   ie = ie.nextElementSibling;
@@ -1757,18 +1757,18 @@ const Qa = (e) => {
               } else {
                 let ie = ae?.previousElementSibling;
                 for (; ie; ) {
-                  const be = ie.querySelector("input");
-                  if (be) {
-                    be.focus();
+                  const ye = ie.querySelector("input");
+                  if (ye) {
+                    ye.focus();
                     break;
                   }
                   ie = ie.previousElementSibling;
                 }
                 if (!ie) {
-                  const be = V.value.querySelector(
+                  const ye = V.value.querySelector(
                     'input[type="checkbox"]'
                   );
-                  if (be && be !== p)
+                  if (ye && ye !== p)
                     Ae(p);
                   else {
                     const je = _e(V.value);
@@ -1819,7 +1819,7 @@ const Qa = (e) => {
         V.value?.open && !V.value.contains(p) && (V.value.open = !1);
       }
     }
-    function Be(r) {
+    function Se(r) {
       (/* @__PURE__ */ new Date()).getTime() - Ce.value < 200 || (R.value = r, b.value = !0, a.onOptionSelected && a.onOptionSelected(r ?? []), de(
         l,
         {
@@ -1831,14 +1831,14 @@ const Qa = (e) => {
       ), Ce.value = (/* @__PURE__ */ new Date()).getTime());
     }
     function We(r) {
-      r && (a.multiple ? R.value?.includes(r) ? Be(R.value.filter((p) => p !== r)) : Be([...R.value || [], r]) : (Be([r]), xe(void 0, !0)));
+      r && (a.multiple ? R.value?.includes(r) ? Se(R.value.filter((p) => p !== r)) : Se([...R.value || [], r]) : (Se([r]), xe(void 0, !0)));
     }
     function Sa(r) {
       if (r.stopPropagation(), R.value?.length === A.value)
-        Be([]);
+        Se([]);
       else {
-        const p = X.value && Pe.value ? Pe.value.value : void 0;
-        Be(
+        const p = j.value && Pe.value ? Pe.value.value : void 0;
+        Se(
           a.options ? a.options.filter(
             (x) => !x.isGroupTitle && (!p || x.value?.toLowerCase().includes(p.toLowerCase()))
           ).map((x) => x.value ?? "") : []
@@ -1878,14 +1878,14 @@ const Qa = (e) => {
         const x = r;
         x.stopPropagation(), a.onSearch && a.onSearch(x), p = x.target.value, Re.value = p;
       }
-      !a.options || !p || p.length === 0 ? j.value = a.options : a.searchFilter ? j.value = a.options.filter(
+      !a.options || !p || p.length === 0 ? X.value = a.options : a.searchFilter ? X.value = a.options.filter(
         (x) => a.searchFilter(x, p)
-      ) : j.value = a.options.filter(
-        (x) => !x.isGroupTitle && we(x).toLowerCase().includes(p.toLowerCase())
+      ) : X.value = a.options.filter(
+        (x) => !x.isGroupTitle && Be(x).toLowerCase().includes(p.toLowerCase())
       );
     }
     function pa(r) {
-      r.stopPropagation(), Be([]), $e();
+      r.stopPropagation(), Se([]), $e();
     }
     function $e() {
       V.value && V.value.querySelector("summary")?.focus();
@@ -1911,7 +1911,7 @@ const Qa = (e) => {
       "data-show-icon": n(P)(e.showIcon)
     }, [
       E("label", { id: k.value }, [
-        D(S(e.label ?? n(ye)), 1),
+        D(S(e.label ?? n(ke)), 1),
         E("select", {
           role: "none",
           hidden: !0,
@@ -1926,11 +1926,11 @@ const Qa = (e) => {
           required: n(q)(e.required, "required"),
           onChange: p[0] || (p[0] = async (x) => La(x))
         }, [
-          e.options?.length ? (v(!0), y(H, { key: 0 }, me(e.options, (x, ae) => (v(), y("option", {
+          e.options?.length ? (v(!0), y(H, { key: 0 }, ge(e.options, (x, ae) => (v(), y("option", {
             key: ae,
             disabled: x.disabled,
             value: x.value
-          }, S(we(x)), 9, St))), 128)) : z("", !0)
+          }, S(Be(x)), 9, St))), 128)) : z("", !0)
         ], 40, Bt)
       ], 8, wt),
       E("details", {
@@ -1957,7 +1957,7 @@ const Qa = (e) => {
               D(" " + S(w.value), 1)
             ], 8, It)) : z("", !0),
             e.selectedType === "tag" ? (v(), y("div", $t, [
-              (v(!0), y(H, null, me(F.value, (x, ae) => (v(), Y(yt, {
+              (v(!0), y(H, null, ge(N.value, (x, ae) => (v(), Y(yt, {
                 key: ae,
                 emphasis: "strong",
                 behavior: "removable",
@@ -1965,7 +1965,7 @@ const Qa = (e) => {
                 onRemove: (ie) => ya(x, ie)
               }, {
                 default: G(() => [
-                  D(S(we(x)), 1)
+                  D(S(Be(x)), 1)
                 ]),
                 _: 2
               }, 1032, ["removeButton", "onRemove"]))), 128))
@@ -1973,7 +1973,7 @@ const Qa = (e) => {
           ], 8, Lt),
           te(at, { width: e.dropdownWidth }, {
             default: G(() => [
-              X.value ? (v(), y("div", Tt, [
+              j.value ? (v(), y("div", Tt, [
                 te(mt, {
                   type: "search",
                   ref_key: "searchInputRef",
@@ -1982,13 +1982,13 @@ const Qa = (e) => {
                   form: i.value,
                   showLabel: !1,
                   value: Re.value,
-                  label: e.searchLabel ?? n(ye),
+                  label: e.searchLabel ?? n(ke),
                   placeholder: e.searchPlaceholder ?? e.searchLabel,
-                  ariaDescribedBy: pe.value || e.showLoading ? s.value : void 0,
+                  ariaDescribedBy: me.value || e.showLoading ? s.value : void 0,
                   onInput: (x) => Xe(x)
                 }, null, 8, ["name", "form", "value", "label", "placeholder", "ariaDescribedBy", "onInput"])
               ])) : z("", !0),
-              pe.value || e.showLoading ? (v(), Y(Q, {
+              me.value || e.showLoading ? (v(), Y(Q, {
                 key: 1,
                 id: s.value,
                 icon: e.showLoading ? "circular_arrows" : void 0,
@@ -1999,7 +1999,7 @@ const Qa = (e) => {
                 ]),
                 _: 1
               }, 8, ["id", "icon", "semantic"])) : (v(), y(H, { key: 2 }, [
-                N.value ? (v(), y("div", Ct, [
+                F.value ? (v(), y("div", Ct, [
                   E("div", Et, [
                     E("label", null, [
                       E("input", {
@@ -2017,16 +2017,16 @@ const Qa = (e) => {
                 ])) : z("", !0),
                 te(st, {
                   multiple: n(q)(e.multiple, "multiple"),
-                  label: e.listLabel ?? e.label ?? n(ye)
+                  label: e.listLabel ?? e.label ?? n(ke)
                 }, {
                   default: G(() => [
-                    (v(!0), y(H, null, me(j.value, (x, ae) => (v(), Y(ot, {
+                    (v(!0), y(H, null, ge(X.value, (x, ae) => (v(), Y(ot, {
                       key: ae,
                       type: e.multiple ? "checkbox" : "radio",
                       showDivider: x.showDivider,
                       icon: x.icon,
                       isGroupTitle: x.isGroupTitle,
-                      groupTitle: we(x),
+                      groupTitle: Be(x),
                       name: i.value,
                       checked: ga(x.value),
                       disabled: x.disabled,
@@ -2035,7 +2035,7 @@ const Qa = (e) => {
                     }, {
                       default: G(() => [
                         x.isGroupTitle ? z("", !0) : (v(), y(H, { key: 0 }, [
-                          D(S(we(x)), 1)
+                          D(S(Be(x)), 1)
                         ], 64))
                       ]),
                       _: 2
@@ -2045,7 +2045,7 @@ const Qa = (e) => {
                 }, 8, ["multiple", "label"])
               ], 64)),
               E("div", null, [
-                te(ke, {
+                te(we, {
                   variant: "ghost",
                   width: "full",
                   icon: "cross",
@@ -2065,7 +2065,7 @@ const Qa = (e) => {
           }, 8, ["width"])
         ], 64)) : z("", !0)
       ], 40, pt),
-      (e.showClearSelection ?? !0) && R.value?.length ? (v(), Y(ke, {
+      (e.showClearSelection ?? !0) && R.value?.length ? (v(), Y(we, {
         key: 0,
         icon: "cross",
         variant: "ghost",
@@ -2259,7 +2259,7 @@ const Qa = (e) => {
           E("div", Vt, [
             M(f.$slots, "drawer-header")
           ]),
-          te(ke, {
+          te(we, {
             class: "button-close-drawer",
             icon: "cross",
             variant: "ghost",
@@ -2456,7 +2456,7 @@ const Wt = ["id", "data-width", "data-on-forcing-mobile"], Ht = { class: "db-hea
         ]),
         E("div", ei, [
           E("div", ai, [
-            te(ke, {
+            te(we, {
               icon: "menu",
               variant: "ghost",
               noText: !0,
@@ -2716,7 +2716,7 @@ const Wt = ["id", "data-width", "data-on-forcing-mobile"], Ht = { class: "db-hea
           onClick: d[1] || (d[1] = async (b) => k(b))
         }, [
           a.value ? (v(), y("div", ui, [
-            te(ke, {
+            te(we, {
               icon: "arrow_left",
               variant: "ghost",
               id: e.backButtonId,
@@ -2790,7 +2790,7 @@ const Wt = ["id", "data-width", "data-on-forcing-mobile"], Ht = { class: "db-hea
       ]),
       n(Z)(e.timestamp, e.showTimestamp) ? (v(), y("span", vi, S(e.timestamp), 1)) : z("", !0),
       M(i.$slots, "link"),
-      n(q)(e.closeable, "closeable") ? (v(), Y(ke, {
+      n(q)(e.closeable, "closeable") ? (v(), Y(we, {
         key: 2,
         icon: "cross",
         variant: "ghost",
@@ -3206,17 +3206,17 @@ const Wt = ["id", "data-width", "data-on-forcing-mobile"], Ht = { class: "db-hea
       () => [b.value],
       () => {
         if (b.value) {
-          let R = d.value;
-          R || (R = new AbortController(), d.value = R), Oe(
+          let X = d.value;
+          X || (X = new AbortController(), d.value = X), Oe(
             b.value,
             {
               value: a.value,
               defaultValue: void 0
             },
-            (j) => {
-              B(j), L(j);
+            (me) => {
+              B(me), L(me);
             },
-            R.signal
+            X.signal
           );
         }
       },
@@ -3240,13 +3240,13 @@ const Wt = ["id", "data-width", "data-on-forcing-mobile"], Ht = { class: "db-hea
     function B(A, R) {
       a.onChange && a.onChange(A), de(l, A), T();
     }
-    function F(A) {
+    function N(A) {
       a.onBlur && a.onBlur(A);
     }
-    function N(A) {
+    function F(A) {
       a.onFocus && a.onFocus(A);
     }
-    function X(A) {
+    function j(A) {
       return A.label ?? A.value?.toString();
     }
     return (A, R) => (v(), y("div", {
@@ -3257,7 +3257,7 @@ const Wt = ["id", "data-width", "data-on-forcing-mobile"], Ht = { class: "db-hea
       "data-icon": e.icon,
       "data-show-icon": n(P)(e.showIcon)
     }, [
-      E("label", { for: i.value }, S(e.label ?? n(ye)), 9, wi),
+      E("label", { for: i.value }, S(e.label ?? n(ke)), 9, wi),
       E("select", {
         "aria-invalid": e.validation === "invalid",
         "data-custom-validity": e.validation,
@@ -3271,31 +3271,31 @@ const Wt = ["id", "data-width", "data-on-forcing-mobile"], Ht = { class: "db-hea
         value: e.value ?? $.value,
         autocomplete: e.autocomplete,
         multiple: e.multiple,
-        onInput: R[0] || (R[0] = async (j) => L(j)),
-        onClick: R[1] || (R[1] = async (j) => w(j)),
-        onChange: R[2] || (R[2] = async (j) => B(j)),
-        onBlur: R[3] || (R[3] = async (j) => F(j)),
-        onFocus: R[4] || (R[4] = async (j) => N(j)),
+        onInput: R[0] || (R[0] = async (X) => L(X)),
+        onClick: R[1] || (R[1] = async (X) => w(X)),
+        onChange: R[2] || (R[2] = async (X) => B(X)),
+        onBlur: R[3] || (R[3] = async (X) => N(X)),
+        onFocus: R[4] || (R[4] = async (X) => F(X)),
         "aria-describedby": e.ariaDescribedBy ?? k.value
       }, [
         e.variant === "floating" || e.placeholder ? (v(), y("option", Si)) : z("", !0),
-        e.options?.length ? (v(!0), y(H, { key: 1 }, me(e.options, (j, pe) => (v(), y(H, { key: pe }, [
-          j.options ? (v(), y("optgroup", {
+        e.options?.length ? (v(!0), y(H, { key: 1 }, ge(e.options, (X, me) => (v(), y(H, { key: me }, [
+          X.options ? (v(), y("optgroup", {
             key: 0,
-            label: X(j)
+            label: j(X)
           }, [
-            (v(!0), y(H, null, me(j.options, (ge, Ce) => (v(), y("option", {
+            (v(!0), y(H, null, ge(X.options, (be, Ce) => (v(), y("option", {
               key: Ce,
-              value: ge.value,
-              selected: ge.selected,
-              disabled: ge.disabled
-            }, S(X(ge)), 9, Li))), 128))
+              value: be.value,
+              selected: be.selected,
+              disabled: be.disabled
+            }, S(j(be)), 9, Li))), 128))
           ], 8, pi)) : (v(), y("option", {
             key: 1,
-            value: j.value,
-            disabled: j.disabled,
-            selected: j.selected
-          }, S(X(j)), 9, Ii))
+            value: X.value,
+            disabled: X.disabled,
+            selected: X.selected
+          }, S(j(X)), 9, Ii))
         ], 64))), 128)) : M(A.$slots, "default", { key: 2 })
       ], 40, Bi),
       e.placeholder ? (v(), y("span", {
@@ -3449,8 +3449,8 @@ const Wt = ["id", "data-width", "data-on-forcing-mobile"], Ht = { class: "db-hea
               checked: a.checked,
               defaultChecked: void 0
             },
-            (F) => {
-              b(F);
+            (N) => {
+              b(N);
             },
             B.signal
           );
@@ -3520,10 +3520,10 @@ const Wt = ["id", "data-width", "data-on-forcing-mobile"], Ht = { class: "db-hea
           required: n(q)(e.required, "required"),
           "data-aid-icon": e.iconLeading ?? e.icon,
           "data-aid-icon-trailing": e.iconTrailing,
-          onChange: B[0] || (B[0] = async (F) => b(F)),
-          onBlur: B[1] || (B[1] = async (F) => I(F)),
-          onFocus: B[2] || (B[2] = async (F) => T(F)),
-          onKeydown: B[3] || (B[3] = async (F) => w(F))
+          onChange: B[0] || (B[0] = async (N) => b(N)),
+          onBlur: B[1] || (B[1] = async (N) => I(N)),
+          onFocus: B[2] || (B[2] = async (N) => T(N)),
+          onKeydown: B[3] || (B[3] = async (N) => w(N))
         }, null, 40, Ai),
         e.label ? (v(), y(H, { key: 0 }, [
           D(S(e.label), 1)
@@ -3803,18 +3803,18 @@ const Wt = ["id", "data-width", "data-on-forcing-mobile"], Ht = { class: "db-hea
           )
         );
         for (const L of T) {
-          const B = T.indexOf(L), F = L.querySelector("label"), N = L.querySelector("input");
-          if (N && F) {
-            if (!N.id) {
-              const X = `${a.value}-tab-${B}`;
-              F.setAttribute("for", X), N.id = X, N.setAttribute("name", a.value), w.length > B && N.setAttribute(
+          const B = T.indexOf(L), N = L.querySelector("label"), F = L.querySelector("input");
+          if (F && N) {
+            if (!F.id) {
+              const j = `${a.value}-tab-${B}`;
+              N.setAttribute("for", j), F.id = j, F.setAttribute("name", a.value), w.length > B && F.setAttribute(
                 "aria-controls",
                 `${a.value}-tab-panel-${B}`
               );
             }
             if (I) {
-              const X = !t.initialSelectedMode || t.initialSelectedMode === "auto", A = t.initialSelectedIndex == null && B === 0 || Number(t.initialSelectedIndex) === B;
-              X && A && N.click();
+              const j = !t.initialSelectedMode || t.initialSelectedMode === "auto", A = t.initialSelectedIndex == null && B === 0 || Number(t.initialSelectedIndex) === B;
+              j && A && F.click();
             }
           }
         }
@@ -3833,8 +3833,8 @@ const Wt = ["id", "data-width", "data-on-forcing-mobile"], Ht = { class: "db-hea
           if (L) {
             const B = L.parentElement;
             if (B) {
-              const F = Array.from(B.children).indexOf(L);
-              t.onIndexChange && t.onIndexChange(F), t.onTabSelect && t.onTabSelect(I);
+              const N = Array.from(B.children).indexOf(L);
+              t.onIndexChange && t.onIndexChange(N), t.onTabSelect && t.onTabSelect(I);
             }
           }
         }
@@ -3852,7 +3852,7 @@ const Wt = ["id", "data-width", "data-on-forcing-mobile"], Ht = { class: "db-hea
       onInput: T[0] || (T[0] = async (w) => b(w)),
       onChange: T[1] || (T[1] = async (w) => b(w))
     }, [
-      c.value ? (v(), Y(ke, {
+      c.value ? (v(), Y(we, {
         key: 0,
         class: "tabs-scroll-left",
         variant: "ghost",
@@ -3869,7 +3869,7 @@ const Wt = ["id", "data-width", "data-on-forcing-mobile"], Ht = { class: "db-hea
       e.tabs ? (v(), y(H, { key: 1 }, [
         te(Pi, null, {
           default: G(() => [
-            (v(!0), y(H, null, me(k(), (w, L) => (v(), Y(Ni, {
+            (v(!0), y(H, null, ge(k(), (w, L) => (v(), Y(Ni, {
               key: e.name + "tab-item" + L,
               active: w.active,
               label: w.label,
@@ -3880,7 +3880,7 @@ const Wt = ["id", "data-width", "data-on-forcing-mobile"], Ht = { class: "db-hea
           ]),
           _: 1
         }),
-        (v(!0), y(H, null, me(k(), (w, L) => (v(), Y(qi, {
+        (v(!0), y(H, null, ge(k(), (w, L) => (v(), Y(qi, {
           key: e.name + "tab-panel" + L,
           content: w.content
         }, {
@@ -3890,7 +3890,7 @@ const Wt = ["id", "data-width", "data-on-forcing-mobile"], Ht = { class: "db-hea
           _: 2
         }, 1032, ["content"]))), 128))
       ], 64)) : z("", !0),
-      u.value ? (v(), Y(ke, {
+      u.value ? (v(), Y(we, {
         key: 2,
         class: "tabs-scroll-right",
         variant: "ghost",
@@ -3991,7 +3991,7 @@ const Wt = ["id", "data-width", "data-on-forcing-mobile"], Ht = { class: "db-hea
     ), C(
       () => [a.value],
       () => {
-        k.value = a.value;
+        a.value !== void 0 && (k.value = a.value);
       },
       {
         immediate: !0,
@@ -4008,8 +4008,8 @@ const Wt = ["id", "data-width", "data-on-forcing-mobile"], Ht = { class: "db-hea
               value: a.value,
               defaultValue: void 0
             },
-            (N) => {
-              T(N), I(N);
+            (j) => {
+              T(j), I(j);
             },
             F.signal
           );
@@ -4026,10 +4026,10 @@ const Wt = ["id", "data-width", "data-on-forcing-mobile"], Ht = { class: "db-hea
     function b() {
       !s.value?.validity.valid || a.validation === "invalid" ? (h.value = f.value, m.value = a.invalidMessage || s.value?.validationMessage || ee, ue() && ($.value = m.value, K(() => $.value = "", 1e3))) : d() && s.value?.validity.valid && (a.required || a.minLength || a.maxLength) ? (h.value = u.value, ue() && ($.value = a.validMessage ?? se, K(() => $.value = "", 1e3))) : Z(a.message, a.showMessage) ? h.value = c.value : h.value = void 0;
     }
-    function I(B, F) {
+    function I(B, N) {
       a.input && a.input(B), k.value = B.target.value, a.onInput && a.onInput(B), de(l, B), b();
     }
-    function T(B, F) {
+    function T(B, N) {
       a.onChange && a.onChange(B), de(l, B), b();
     }
     function w(B) {
@@ -4038,13 +4038,13 @@ const Wt = ["id", "data-width", "data-on-forcing-mobile"], Ht = { class: "db-hea
     function L(B) {
       a.onFocus && a.onFocus(B);
     }
-    return (B, F) => (v(), y("div", {
+    return (B, N) => (v(), y("div", {
       class: O(n(U)("db-textarea", a.class)),
       "data-variant": e.variant,
       "data-hide-asterisk": n(ne)(e.showRequiredAsterisk),
       "data-hide-label": n(ne)(e.showLabel)
     }, [
-      E("label", { for: i.value }, S(e.label ?? n(ye)), 9, Gi),
+      E("label", { for: i.value }, S(e.label ?? n(ke)), 9, Gi),
       E("textarea", {
         "aria-invalid": e.validation === "invalid",
         "data-custom-validity": e.validation,
@@ -4058,21 +4058,21 @@ const Wt = ["id", "data-width", "data-on-forcing-mobile"], Ht = { class: "db-hea
         required: n(q)(e.required, "required"),
         readOnly: n(q)(e.readOnly, "readOnly") || n(q)(e.readonly, "readonly"),
         form: e.form,
-        maxLength: n(Se)(e.maxLength, e.maxlength),
-        minLength: n(Se)(e.minLength, e.minlength),
+        maxLength: n(pe)(e.maxLength, e.maxlength),
+        minLength: n(pe)(e.minLength, e.minlength),
         name: e.name,
         wrap: e.wrap,
         spellcheck: e.spellCheck,
         autocomplete: e.autocomplete,
-        onInput: F[0] || (F[0] = async (N) => I(N)),
-        onChange: F[1] || (F[1] = async (N) => T(N)),
-        onBlur: F[2] || (F[2] = async (N) => w(N)),
-        onFocus: F[3] || (F[3] = async (N) => L(N)),
+        onInput: N[0] || (N[0] = async (F) => I(F)),
+        onChange: N[1] || (N[1] = async (F) => T(F)),
+        onBlur: N[2] || (N[2] = async (F) => w(F)),
+        onFocus: N[3] || (N[3] = async (F) => L(F)),
         value: e.value ?? k.value,
         "aria-describedby": e.ariaDescribedBy ?? h.value,
         placeholder: e.placeholder ?? n(ea),
-        rows: n(Se)(e.rows, n(Ea)),
-        cols: n(Se)(e.cols)
+        rows: n(pe)(e.rows, n(Ea)),
+        cols: n(pe)(e.cols)
       }, S(e.value), 41, Wi),
       n(Z)(e.message, e.showMessage) ? (v(), Y(Q, {
         key: 0,
@@ -4131,7 +4131,7 @@ export {
   qa as DBAccordionItem,
   sl as DBBadge,
   cl as DBBrand,
-  ke as DBButton,
+  we as DBButton,
   fl as DBCard,
   gl as DBCheckbox,
   bl as DBCustomSelect,
@@ -4173,7 +4173,7 @@ export {
   Te as DEFAULT_ID,
   ee as DEFAULT_INVALID_MESSAGE,
   ve as DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
-  ye as DEFAULT_LABEL,
+  ke as DEFAULT_LABEL,
   Ye as DEFAULT_LABEL_ID_SUFFIX,
   Ia as DEFAULT_MESSAGE,
   ce as DEFAULT_MESSAGE_ID_SUFFIX,
@@ -4251,7 +4251,7 @@ export {
   sa as getFloatingProps,
   ne as getHideProp,
   Ze as getInputValue,
-  Se as getNumber,
+  pe as getNumber,
   ll as getOptionKey,
   _e as getSearchInput,
   Ra as getStep,