@db-ux/v-core-components 4.5.0 → 4.5.1

package/dist/db-ux.es.js

@@ -1,4 +1,4 @@
-import { defineComponent as W, ref as o, onMounted as ae, watch as $, createElementBlock as b, openBlock as h, normalizeClass as U, unref as l, createElementVNode as E, createCommentVNode as P, renderSlot as M, Fragment as X, createTextVNode as D, toDisplayString as L, useId as ge, renderList as ye, createBlock as Q, onUnmounted as be, createVNode as le, withCtx as H } from "vue";
+import { defineComponent as W, ref as o, onMounted as ae, watch as $, openBlock as h, createElementBlock as b, normalizeClass as U, unref as l, createElementVNode as E, Fragment as X, createTextVNode as D, toDisplayString as L, createCommentVNode as P, renderSlot as M, useId as ge, renderList as ye, createBlock as Q, onUnmounted as be, withCtx as H, createVNode as le } from "vue";
 const Ue = () => {
   if (typeof window < "u") {
     if (window.crypto?.randomUUID)
@@ -26,7 +26,7 @@ const Ue = () => {
   if (typeof window > "u" || typeof navigator > "u") return !1;
   const e = navigator.userAgent, a = /iP(ad|hone|od)/.test(e), i = !!e.match(/Safari/) && !e.match(/CriOS|FxiOS|OPiOS|EdgiOS/);
   return a && i;
-}, J = (e, a) => new Promise(() => setTimeout(e, a)), O = (e) => {
+}, J = (e, a) => new Promise(() => setTimeout(e, a)), N = (e) => {
   if (e != null)
     return String(typeof e == "string" ? e === "true" : e);
 }, V = (e, a) => {
@@ -40,7 +40,7 @@ const Ue = () => {
     return e === "any" ? "any" : Number(e);
 }, Ze = (e, a) => a && ["number", "range"].includes(a) ? xe(e) : e, lt = (e) => typeof e == "string" ? e === "true" : e, de = (e) => {
   if (e != null)
-    return O(!lt(e));
+    return N(!lt(e));
 }, te = (e, a) => (a === void 0 || lt(a)) && !!e, _e = (e) => e.querySelector('input[type="search"]'), ll = (e, a) => {
   const i = e.id ?? e.value ?? Ue();
   return `${a}${i}`;
@@ -63,7 +63,7 @@ const Ue = () => {
     default:
       return "article";
   }
-}, Ot = ["id"], Nt = ["aria-disabled", "name", "open"], Rt = /* @__PURE__ */ W({
+}, Nt = ["id"], Ot = ["aria-disabled", "name", "open"], Rt = /* @__PURE__ */ W({
   name: "DBAccordionItem",
   __name: "accordion-item",
   props: {
@@ -115,7 +115,7 @@ const Ue = () => {
       class: U(l(G)("db-accordion-item", a.class))
     }, [
       E("details", {
-        "aria-disabled": l(O)(e.disabled),
+        "aria-disabled": l(N)(e.disabled),
         ref_key: "_ref",
         ref: d,
         name: n.value,
@@ -134,8 +134,8 @@ const Ue = () => {
             D(L(e.text), 1)
           ], 64)) : M(u.$slots, "default", { key: 1 })
         ])
-      ], 8, Nt)
-    ], 10, Ot));
+      ], 8, Ot)
+    ], 10, Nt));
   }
 }), zt = ["id", "data-variant"], nl = /* @__PURE__ */ W({
   name: "DBAccordion",
@@ -228,7 +228,7 @@ const Ue = () => {
       }, null, 8, ["headlinePlain", "disabled", "text"]))), 128)) : P("", !0)
     ], 10, zt));
   }
-}), ol = ["divider", "card"], dl = ["multiple", "single"], Pt = "OVERWRITE_DEFAULT_ID", pe = "LABEL SHOULD BE SET", nt = " ", Vt = "MESSAGE SHOULD BE SET", et = "-label", tt = "-select", ve = "-message", fe = "-valid-message", he = "-invalid-message", Oe = "-placeholder", at = "-datalist", ce = "TODO: Add a validMessage", _ = "TODO: Add an invalidMessage", ot = "Remove", qt = "Back", Ut = "Selected", Gt = "BurgerMenu", Wt = "brand", Ht = 4, Ge = "Close", sl = "density", ul = "color";
+}), ol = ["divider", "card"], dl = ["multiple", "single"], Pt = "OVERWRITE_DEFAULT_ID", pe = "LABEL SHOULD BE SET", nt = " ", Vt = "MESSAGE SHOULD BE SET", et = "-label", tt = "-select", ve = "-message", fe = "-valid-message", he = "-invalid-message", Ne = "-placeholder", at = "-datalist", ce = "TODO: Add a validMessage", _ = "TODO: Add an invalidMessage", ot = "Remove", qt = "Back", Ut = "Selected", Gt = "BurgerMenu", Wt = "brand", Ht = 4, Ge = "Close", sl = "density", ul = "color";
 var dt = /* @__PURE__ */ ((e) => (e.FUNCTIONAL = "functional", e.REGULAR = "regular", e.EXPRESSIVE = "expressive", e))(dt || {});
 const rl = Object.entries(dt).map(([, e]) => e);
 var st = /* @__PURE__ */ ((e) => (e.PRIMARY = "primary", e))(st || {}), ut = /* @__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))(ut || {});
@@ -293,7 +293,7 @@ const fl = Object.entries(rt).map(([, e]) => e), Xt = {
       "data-size": e.size,
       "data-emphasis": e.emphasis,
       "data-placement": e.placement,
-      "data-wrap": l(O)(e.wrap),
+      "data-wrap": l(N)(e.wrap),
       "data-label": e.placement?.startsWith("corner") && (e.label ?? l(pe))
     }, [
       e.text ? (h(), b(X, { key: 0 }, [
@@ -322,7 +322,7 @@ const fl = Object.entries(rt).map(([, e]) => e), Xt = {
       ref_key: "_ref",
       ref: i,
       "data-icon": e.hideLogo ? "none" : e.icon ?? l(Wt),
-      "data-show-icon": l(O)(e.showIcon),
+      "data-show-icon": l(N)(e.showIcon),
       id: e.id ?? e.propOverrides?.id,
       class: U(l(G)("db-brand", a.class))
     }, [
@@ -377,14 +377,14 @@ const fl = Object.entries(rt).map(([, e]) => e), Xt = {
       type: n(),
       disabled: l(V)(e.disabled, "disabled"),
       "data-icon": e.iconLeading ?? e.icon,
-      "data-show-icon": l(O)(e.showIconLeading ?? e.showIcon),
+      "data-show-icon": l(N)(e.showIconLeading ?? e.showIcon),
       "data-icon-trailing": e.iconTrailing,
-      "data-show-icon-trailing": l(O)(e.showIconTrailing),
+      "data-show-icon-trailing": l(N)(e.showIconTrailing),
       "data-size": e.size,
       "data-width": e.width,
       "data-variant": e.variant,
-      "data-wrap": l(O)(e.wrap),
-      "data-no-text": l(O)(e.noText),
+      "data-wrap": l(N)(e.wrap),
+      "data-no-text": l(N)(e.noText),
       name: e.name,
       form: e.form,
       value: e.value,
@@ -431,14 +431,14 @@ const fl = Object.entries(rt).map(([, e]) => e), Xt = {
   }
 }), Sl = ["static", "interactive"], Il = ["1", "2", "3"], ue = (e, a, i = "value") => {
   e(`update:${i}`, a.target[i]);
-}, Ne = (e, a, i) => {
+}, Oe = (e, a, i) => {
   e.form && !e._dbFormResetListenerAdded && (e.form.addEventListener("reset", (n) => {
     a(n);
   }, {
     signal: i
   }), e._dbFormResetListenerAdded = !0);
 }, ct = (e, a, i, n) => {
-  Ne(e, (t) => {
+  Oe(e, (t) => {
     J(() => {
       const d = a.checked ? a.checked : a.defaultChecked ? a.defaultChecked : e.checked, v = {
         ...t,
@@ -451,7 +451,7 @@ const fl = Object.entries(rt).map(([, e]) => e), Xt = {
     }, 1);
   }, n);
 }, We = (e, a, i, n) => {
-  Ne(e, (t) => {
+  Oe(e, (t) => {
     J(() => {
       const d = a.value ? a.value : a.defaultValue ? a.defaultValue : e.value, v = {
         ...t,
@@ -490,8 +490,8 @@ const fl = Object.entries(rt).map(([, e]) => e), Xt = {
       "data-icon": e.icon,
       "data-semantic": e.semantic,
       "data-size": e.size,
-      "data-wrap": l(O)(e.wrap),
-      "data-show-icon-leading": l(O)(e.showIcon ?? !0)
+      "data-wrap": l(N)(e.wrap),
+      "data-show-icon-leading": l(N)(e.showIcon ?? !0)
     }, [
       e.text ? (h(), b(X, { key: 0 }, [
         D(L(e.text), 1)
@@ -605,8 +605,8 @@ const fl = Object.entries(rt).map(([, e]) => e), Xt = {
               checked: t.checked,
               defaultChecked: void 0
             },
-            (N) => {
-              k(N);
+            (O) => {
+              k(O);
             },
             x.signal
           );
@@ -655,9 +655,9 @@ const fl = Object.entries(rt).map(([, e]) => e), Xt = {
           disabled: l(V)(e.disabled, "disabled"),
           value: e.value,
           required: l(V)(e.required, "required"),
-          onChange: x[0] || (x[0] = async (N) => k(N)),
-          onBlur: x[1] || (x[1] = async (N) => y(N)),
-          onFocus: x[2] || (x[2] = async (N) => p(N)),
+          onChange: x[0] || (x[0] = async (O) => k(O)),
+          onBlur: x[1] || (x[1] = async (O) => y(O)),
+          onFocus: x[2] || (x[2] = async (O) => p(O)),
           "aria-describedby": e.ariaDescribedBy ?? I.value
         }, null, 40, ta),
         e.label ? (h(), b(X, { key: 0 }, [
@@ -729,13 +729,13 @@ const fl = Object.entries(rt).map(([, e]) => e), Xt = {
       id: e.id ?? e.propOverrides?.id,
       class: U(l(G)("db-custom-button", a.class)),
       "data-icon": e.iconLeading ?? e.icon,
-      "data-show-icon": l(O)(e.showIconLeading ?? e.showIcon),
+      "data-show-icon": l(N)(e.showIconLeading ?? e.showIcon),
       "data-icon-trailing": e.iconTrailing,
-      "data-show-icon-trailing": l(O)(e.showIconTrailing),
+      "data-show-icon-trailing": l(N)(e.showIconTrailing),
       "data-size": e.size,
       "data-width": e.width,
       "data-variant": e.variant,
-      "data-no-text": l(O)(e.noText)
+      "data-no-text": l(N)(e.noText)
     }, [
       M(n.$slots, "default")
     ], 10, ia));
@@ -819,7 +819,7 @@ const la = (e) => {
     vx: t ? "right" : "left"
   }, e.dataset.outsideVx = d.vx) : delete e.dataset.outsideVx, d;
 }, oa = (e, a, i) => {
-  if (getComputedStyle(e).zIndex === "9999") return;
+  if (!e || !a || getComputedStyle(e).zIndex === "9999") return;
   const {
     top: n,
     bottom: t,
@@ -885,6 +885,7 @@ const la = (e) => {
   }
   return Fe.set(e, null), null;
 }, ft = (e, a, i) => {
+  if (!e || !a) return;
   const n = getComputedStyle(a), t = ["absolute", "fixed"].includes(n.position), d = sa(e), v = !d && !t, u = getComputedStyle(e)?.getPropertyValue("--db-popover-distance") ?? "0px";
   let {
     top: f,
@@ -1021,12 +1022,12 @@ const la = (e) => {
           "db-radio": e.type !== "checkbox" && !e.isGroupTitle
         })
       ),
-      "data-divider": l(O)(t.value)
+      "data-divider": l(N)(t.value)
     }, [
       e.isGroupTitle ? (h(), b("span", ha, L(e.groupTitle), 1)) : (h(), b("label", {
         key: 0,
         "data-icon": e.type !== "checkbox" && e.icon ? e.icon : void 0,
-        "data-show-icon": l(O)(e.showIcon),
+        "data-show-icon": l(N)(e.showIcon),
         "data-icon-trailing": u()
       }, [
         E("input", {
@@ -1146,13 +1147,13 @@ const la = (e) => {
   setup(e, { emit: a }) {
     const i = ge(), n = a, t = e, d = o(void 0), v = o(void 0), u = o(void 0), f = o(void 0), g = o(void 0), w = o(void 0), I = o(void 0), B = o(""), m = o(""), c = o(void 0), S = o(null);
     ae(() => {
-      N(), g.value = t.invalidMessage || _;
+      O(), g.value = t.invalidMessage || _;
     }), be(() => {
       c.value?.abort();
     }), $(
       () => [t.id, t.propOverrides?.id],
       () => {
-        (t.id ?? t.propOverrides?.id) && N();
+        (t.id ?? t.propOverrides?.id) && O();
       },
       {
         immediate: !0,
@@ -1238,7 +1239,7 @@ const la = (e) => {
         })) : F) || []
       );
     }
-    function N() {
+    function O() {
       const F = t.id ?? t.propOverrides?.id ?? `input-${i}`;
       d.value = F, v.value = F + ve, u.value = F + fe, f.value = F + he, w.value = F + at;
     }
@@ -1246,11 +1247,11 @@ const la = (e) => {
       class: U(l(G)("db-input", t.class)),
       "data-variant": e.variant,
       "data-hide-label": l(de)(e.showLabel),
-      "data-show-icon": l(O)(e.showIconLeading ?? e.showIcon),
+      "data-show-icon": l(N)(e.showIconLeading ?? e.showIcon),
       "data-icon": e.iconLeading ?? e.icon,
       "data-icon-trailing": e.iconTrailing,
       "data-hide-asterisk": l(de)(e.showRequiredAsterisk),
-      "data-show-icon-trailing": l(O)(e.showIconTrailing)
+      "data-show-icon-trailing": l(N)(e.showIconTrailing)
     }, [
       E("label", { for: d.value }, L(e.label ?? l(pe)), 9, wa),
       E("input", {
@@ -1432,11 +1433,11 @@ const la = (e) => {
       class: U(l(G)("db-tooltip", i.class)),
       id: n.value,
       "data-emphasis": e.emphasis,
-      "data-wrap": l(O)(e.wrap),
-      "data-animation": l(O)(e.animation ?? !0),
+      "data-wrap": l(N)(e.wrap),
+      "data-animation": l(N)(e.animation ?? !0),
       "data-delay": e.delay,
       "data-width": e.width,
-      "data-show-arrow": l(O)(e.showArrow ?? !0),
+      "data-show-arrow": l(N)(e.showArrow ?? !0),
       "data-placement": e.placement,
       onClick: k[0] || (k[0] = async (y) => f(y))
     }, [
@@ -1484,10 +1485,10 @@ const la = (e) => {
       "data-semantic": e.semantic,
       "data-emphasis": e.emphasis,
       "data-icon": e.icon,
-      "data-show-check-state": l(O)(e.showCheckState ?? !0),
-      "data-show-icon": l(O)(e.showIcon),
-      "data-no-text": l(O)(e.noText),
-      "data-overflow": l(O)(e.overflow)
+      "data-show-check-state": l(N)(e.showCheckState ?? !0),
+      "data-show-icon": l(N)(e.showIcon),
+      "data-no-text": l(N)(e.noText),
+      "data-overflow": l(N)(e.overflow)
     }, [
       M(d.$slots, "content"),
       M(d.$slots, "default"),
@@ -1513,10 +1514,10 @@ const la = (e) => {
       ])) : P("", !0)
     ], 10, xa));
   }
-}), $a = ["id", "aria-invalid", "data-custom-validity", "data-width", "data-variant", "data-required", "data-hide-asterisk", "data-placement", "data-selected-type", "data-hide-label", "data-icon", "data-show-icon"], Ca = ["id"], Ea = ["id", "form", "name", "data-custom-validity", "multiple", "disabled", "required"], Aa = ["disabled", "value"], Da = ["open"], Ma = ["id", "aria-disabled", "tabIndex", "aria-labelledby"], Fa = ["data-visually-hidden", "id"], Oa = {
+}), $a = ["id", "aria-invalid", "data-custom-validity", "data-width", "data-variant", "data-required", "data-hide-asterisk", "data-placement", "data-selected-type", "data-hide-label", "data-icon", "data-show-icon"], Ca = ["id"], Ea = ["id", "form", "name", "data-custom-validity", "multiple", "disabled", "required"], Aa = ["disabled", "value"], Da = ["open"], Ma = ["id", "aria-disabled", "tabIndex", "aria-labelledby"], Fa = ["data-visually-hidden", "id"], Na = {
   key: 0,
   "data-visually-hidden": "true"
-}, Na = { key: 1 }, Ra = { key: 0 }, za = { key: 0 }, Pa = { class: "db-checkbox db-custom-select-list-item" }, Va = ["form", "checked"], qa = ["aria-hidden", "id"], Ua = {
+}, Oa = { key: 1 }, Ra = { key: 0 }, za = { key: 0 }, Pa = { class: "db-checkbox db-custom-select-list-item" }, Va = ["form", "checked"], qa = ["aria-hidden", "id"], Ua = {
   "data-visually-hidden": "true",
   role: "status"
 }, Tl = /* @__PURE__ */ W({
@@ -1587,7 +1588,7 @@ const la = (e) => {
   },
   emits: ["update:values"],
   setup(e, { emit: a }) {
-    const i = ge(), n = a, t = e, d = o(void 0), v = o(void 0), u = o(void 0), f = o(void 0), g = o(void 0), w = o(void 0), I = o(void 0), B = o(void 0), m = o(void 0), c = o(void 0), S = o("no-validation"), s = o(!1), k = o(void 0), y = o(void 0), p = o(""), j = o(void 0), A = o(""), x = o([]), N = o(!1), F = o(!1), K = o(0), R = o([]), z = o([]), Z = o(!1), Y = o(void 0), Se = o(0), we = o(void 0), $e = o(void 0), Re = o(void 0), ze = o(!1), Ce = o(!1), mt = o(null), q = o(null), oe = o(null), De = o(null), Pe = o(null);
+    const i = ge(), n = a, t = e, d = o(void 0), v = o(void 0), u = o(void 0), f = o(void 0), g = o(void 0), w = o(void 0), I = o(void 0), B = o(void 0), m = o(void 0), c = o(void 0), S = o("no-validation"), s = o(!1), k = o(void 0), y = o(void 0), p = o(""), j = o(void 0), A = o(""), x = o([]), O = o(!1), F = o(!1), K = o(0), R = o([]), z = o([]), Z = o(!1), Y = o(void 0), Se = o(0), we = o(void 0), $e = o(void 0), Re = o(void 0), ze = o(!1), Ce = o(!1), mt = o(null), q = o(null), oe = o(null), De = o(null), Pe = o(null);
     ae(() => {
       Ye(), g.value = t.invalidMessage || _, typeof window < "u" && "IntersectionObserver" in window && ($e.value = new IntersectionObserver((r) => {
         if (q.value) {
@@ -1623,7 +1624,7 @@ const la = (e) => {
       () => {
         if (d.value) {
           const r = d.value + ve;
-          I.value = d.value + et, w.value = d.value + tt, u.value = d.value + fe, f.value = d.value + he, m.value = d.value + Oe, te(t.message, t.showMessage) ? Te(r) : Te();
+          I.value = d.value + et, w.value = d.value + tt, u.value = d.value + fe, f.value = d.value + he, m.value = d.value + Ne, te(t.message, t.showMessage) ? Te(r) : Te();
         }
       },
       {
@@ -1657,7 +1658,7 @@ const la = (e) => {
     ), $(
       () => [t.showSelectAll, K.value, t.multiple],
       () => {
-        N.value = !!(t.multiple && (t.showSelectAll ?? K.value > 5));
+        O.value = !!(t.multiple && (t.showSelectAll ?? K.value > 5));
       },
       {
         immediate: !0,
@@ -1698,7 +1699,7 @@ const la = (e) => {
           let r = k.value;
           r || (r = new AbortController(), k.value = r);
           const T = t.values;
-          Ne(
+          Oe(
             oe.value,
             () => {
               const C = T || (oe.value.value ? [oe.value.value] : []);
@@ -1957,7 +1958,7 @@ const la = (e) => {
           q.value.open = !1, Ae();
         else if (q.value.open && r && r.relatedTarget) {
           const C = r.relatedTarget;
-          q.value.contains(C) || J(() => q.value.open = !1, 1);
+          !q.value.contains(C) && C.localName !== "dialog" && J(() => q.value.open = !1, 1);
         }
       }
     }
@@ -2040,7 +2041,7 @@ const la = (e) => {
     }
     function Ye() {
       const r = t.id ?? t.propOverrides?.id ?? `custom-select-${i}`;
-      d.value = r, v.value = r + ve, u.value = r + fe, f.value = r + he, w.value = r + tt, I.value = r + et, B.value = r + "-summary", m.value = r + Oe, j.value = r + "-selected-labels", c.value = r + "-info";
+      d.value = r, v.value = r + ve, u.value = r + fe, f.value = r + he, w.value = r + tt, I.value = r + et, B.value = r + "-summary", m.value = r + Ne, j.value = r + "-selected-labels", c.value = r + "-info";
     }
     function $t(r) {
       r.stopPropagation();
@@ -2054,13 +2055,13 @@ const la = (e) => {
       "data-custom-validity": S.value,
       "data-width": e.formFieldWidth,
       "data-variant": e.variant === "floating" && e.selectedType === "tag" && e.multiple ? "above" : e.variant,
-      "data-required": l(O)(e.required),
+      "data-required": l(N)(e.required),
       "data-hide-asterisk": l(de)(e.showRequiredAsterisk),
       "data-placement": e.placement,
       "data-selected-type": e.multiple ? e.selectedType : "text",
       "data-hide-label": l(de)(e.showLabel),
       "data-icon": e.icon,
-      "data-show-icon": l(O)(e.showIcon)
+      "data-show-icon": l(N)(e.showIcon)
     }, [
       E("label", { id: I.value }, [
         D(L(e.label ?? l(pe)), 1),
@@ -2098,19 +2099,19 @@ const la = (e) => {
           E("summary", {
             class: "db-custom-select-form-field",
             id: B.value,
-            "aria-disabled": l(O)(e.disabled),
+            "aria-disabled": l(N)(e.disabled),
             tabIndex: e.disabled ? -1 : void 0,
             "aria-labelledby": I.value
           }, [
             p.value?.length ? (h(), b("span", {
               key: 0,
-              "data-visually-hidden": l(O)(e.selectedType === "tag"),
+              "data-visually-hidden": l(N)(e.selectedType === "tag"),
               id: j.value
             }, [
-              e.selectedPrefix ? (h(), b("span", Oa, L(e.selectedPrefix), 1)) : P("", !0),
+              e.selectedPrefix ? (h(), b("span", Na, L(e.selectedPrefix), 1)) : P("", !0),
               D(" " + L(p.value), 1)
             ], 8, Fa)) : P("", !0),
-            e.selectedType === "tag" ? (h(), b("div", Na, [
+            e.selectedType === "tag" ? (h(), b("div", Oa, [
               (h(!0), b(X, null, ye(x.value, (C, ie) => (h(), Q(Ta, {
                 key: ie,
                 emphasis: "strong",
@@ -2153,7 +2154,7 @@ const la = (e) => {
                 ]),
                 _: 1
               }, 8, ["id", "icon", "semantic"])) : (h(), b(X, { key: 2 }, [
-                N.value ? (h(), b("div", za, [
+                O.value ? (h(), b("div", za, [
                   E("div", Pa, [
                     E("label", null, [
                       E("input", {
@@ -2243,7 +2244,7 @@ const la = (e) => {
       }, 8, ["name", "form", "disabled", "onClick"])) : P("", !0),
       E("span", {
         class: "db-custom-select-placeholder",
-        "aria-hidden": l(O)(!0),
+        "aria-hidden": l(N)(!0),
         id: m.value
       }, L(e.placeholder ?? e.label), 9, qa),
       l(te)(e.message, e.showMessage) ? (h(), Q(ee, {
@@ -2415,7 +2416,7 @@ const la = (e) => {
         "data-spacing": e.spacing,
         "data-width": e.width,
         "data-direction": e.direction,
-        "data-rounded": l(O)(e.rounded)
+        "data-rounded": l(N)(e.rounded)
       }, [
         E("header", ja, [
           E("div", Ka, [
@@ -2441,7 +2442,7 @@ const la = (e) => {
       ], 10, Xa)
     ], 40, Ha));
   }
-}), Ol = ["none", "strong", "weak", "invisible"], Nl = ["left", "right", "up", "down"], Rl = ["modal", "inside"], zl = ["fixed", "absolute"], Qa = (e) => {
+}), Nl = ["none", "strong", "weak", "invisible"], Ol = ["left", "right", "up", "down"], Rl = ["modal", "inside"], zl = ["fixed", "absolute"], Qa = (e) => {
   const {
     target: a
   } = e;
@@ -2732,13 +2733,13 @@ const _a = ["id", "data-width", "data-on-forcing-mobile"], ei = { class: "db-hea
       role: e.role,
       referrerPolicy: e.referrerpolicy ?? e.referrerPolicy,
       hrefLang: e.hreflang,
-      "aria-disabled": l(O)(e.disabled),
+      "aria-disabled": l(N)(e.disabled),
       tabIndex: e.disabled ? -1 : 0,
       "data-size": e.size,
-      "data-show-icon-trailing": l(O)(e.showIcon ?? !0),
+      "data-show-icon-trailing": l(N)(e.showIcon ?? !0),
       "data-variant": e.variant,
       "data-content": e.content || "internal",
-      "data-wrap": l(O)(e.wrap),
+      "data-wrap": l(N)(e.wrap),
       onClick: d[0] || (d[0] = async (v) => n(v))
     }, [
       e.text ? (h(), b(X, { key: 0 }, [
@@ -2850,10 +2851,10 @@ const _a = ["id", "data-width", "data-on-forcing-mobile"], ei = { class: "db-hea
       class: U(l(G)("db-navigation-item", a.class)),
       "data-width": e.width,
       "data-icon": e.icon,
-      "data-show-icon": l(O)(e.showIcon),
+      "data-show-icon": l(N)(e.showIcon),
       "data-active": e.active,
-      "data-wrap": l(O)(e.wrap),
-      "aria-disabled": l(O)(e.disabled)
+      "data-wrap": l(N)(e.wrap),
+      "aria-disabled": l(N)(e.disabled)
     }, [
       t.value ? P("", !0) : (h(), b(X, { key: 0 }, [
         e.text ? (h(), b(X, { key: 0 }, [
@@ -2944,7 +2945,7 @@ const _a = ["id", "data-width", "data-on-forcing-mobile"], ei = { class: "db-hea
       "data-semantic": e.semantic,
       "data-variant": e.variant,
       "data-icon": l(V)(e.showIcon) !== !1 ? e.icon : void 0,
-      "data-show-icon": l(O)(e.showIcon),
+      "data-show-icon": l(N)(e.showIcon),
       "data-link-variant": e.linkVariant
     }, [
       M(t.$slots, "image"),
@@ -3003,8 +3004,8 @@ const _a = ["id", "data-width", "data-on-forcing-mobile"], ei = { class: "db-hea
       id: e.id ?? e.propOverrides?.id,
       class: U(l(G)("db-page", a.class)),
       "data-variant": e.variant,
-      "data-fade-in": l(O)(e.fadeIn),
-      "data-fonts-loaded": l(O)(i.value)
+      "data-fade-in": l(N)(e.fadeIn),
+      "data-fonts-loaded": l(N)(i.value)
     }, [
       M(t.$slots, "header"),
       E("main", {
@@ -3129,9 +3130,9 @@ const _a = ["id", "data-width", "data-on-forcing-mobile"], ei = { class: "db-hea
       E("article", {
         class: "db-popover-content",
         "data-spacing": e.spacing,
-        "data-gap": l(O)(e.gap),
-        "data-animation": l(O)(e.animation ?? !0),
-        "data-open": l(O)(e.open),
+        "data-gap": l(N)(e.gap),
+        "data-animation": l(N)(e.animation ?? !0),
+        "data-open": l(N)(e.open),
         "data-delay": e.delay,
         "data-width": e.width,
         "data-placement": e.placement
@@ -3201,7 +3202,7 @@ const _a = ["id", "data-width", "data-on-forcing-mobile"], ei = { class: "db-hea
       () => {
         if (f.value) {
           let c = u.value;
-          c || (c = new AbortController(), u.value = c), Ne(
+          c || (c = new AbortController(), u.value = c), Oe(
             f.value,
             (S) => {
               J(() => {
@@ -3295,7 +3296,7 @@ const _a = ["id", "data-width", "data-on-forcing-mobile"], ei = { class: "db-hea
       M(n.$slots, "default")
     ], 10, Ti));
   }
-}), $i = ["data-variant", "data-hide-label", "data-hide-asterisk", "data-icon", "data-show-icon"], Ci = ["for"], Ei = ["aria-invalid", "data-custom-validity", "required", "disabled", "id", "name", "size", "value", "autocomplete", "multiple", "aria-describedby"], Ai = ["data-show-empty-option"], Di = ["label"], Mi = ["value", "selected", "disabled"], Fi = ["value", "disabled", "selected"], Oi = ["id"], Ni = {
+}), $i = ["data-variant", "data-hide-label", "data-hide-asterisk", "data-icon", "data-show-icon"], Ci = ["for"], Ei = ["aria-invalid", "data-custom-validity", "required", "disabled", "id", "name", "size", "value", "autocomplete", "multiple", "aria-describedby"], Ai = ["data-show-empty-option"], Di = ["label"], Mi = ["value", "selected", "disabled"], Fi = ["value", "disabled", "selected"], Ni = ["id"], Oi = {
   "data-visually-hidden": "true",
   role: "status"
 }, on = /* @__PURE__ */ W({
@@ -3372,7 +3373,7 @@ const _a = ["id", "data-width", "data-on-forcing-mobile"], ei = { class: "db-hea
       () => [d.value, m.value],
       () => {
         if (d.value && m.value) {
-          const z = d.value + ve, Z = d.value + Oe;
+          const z = d.value + ve, Z = d.value + Ne;
           v.value = z, u.value = d.value + fe, f.value = d.value + he, w.value = Z, te(t.message, t.showMessage) ? I.value = z : t.placeholder ? I.value = Z : I.value = void 0, y(), m.value = !1;
         }
       },
@@ -3430,7 +3431,7 @@ const _a = ["id", "data-width", "data-on-forcing-mobile"], ei = { class: "db-hea
     function x(z) {
       t.onBlur && t.onBlur(z);
     }
-    function N(z) {
+    function O(z) {
       t.onFocus && t.onFocus(z);
     }
     function F(z) {
@@ -3441,7 +3442,7 @@ const _a = ["id", "data-width", "data-on-forcing-mobile"], ei = { class: "db-hea
     }
     function R() {
       const z = t.id ?? t.propOverrides?.id ?? `select-${i}`;
-      d.value = z, v.value = z + ve, u.value = z + fe, f.value = z + he, w.value = z + Oe;
+      d.value = z, v.value = z + ve, u.value = z + fe, f.value = z + he, w.value = z + Ne;
     }
     return (z, Z) => (h(), b("div", {
       class: U(l(G)("db-select", t.class)),
@@ -3449,7 +3450,7 @@ const _a = ["id", "data-width", "data-on-forcing-mobile"], ei = { class: "db-hea
       "data-hide-label": l(de)(e.showLabel),
       "data-hide-asterisk": l(de)(e.showRequiredAsterisk),
       "data-icon": e.icon,
-      "data-show-icon": l(O)(e.showIcon)
+      "data-show-icon": l(N)(e.showIcon)
     }, [
       E("label", { for: d.value }, L(e.label ?? l(pe)), 9, Ci),
       E("select", {
@@ -3469,14 +3470,14 @@ const _a = ["id", "data-width", "data-on-forcing-mobile"], ei = { class: "db-hea
         onClick: Z[1] || (Z[1] = async (Y) => p(Y)),
         onChange: Z[2] || (Z[2] = async (Y) => A(Y)),
         onBlur: Z[3] || (Z[3] = async (Y) => x(Y)),
-        onFocus: Z[4] || (Z[4] = async (Y) => N(Y)),
+        onFocus: Z[4] || (Z[4] = async (Y) => O(Y)),
         "aria-describedby": e.ariaDescribedBy ?? I.value
       }, [
         e.variant === "floating" || e.placeholder ? (h(), b("option", {
           key: 0,
           class: "placeholder",
           value: "",
-          "data-show-empty-option": l(O)(K())
+          "data-show-empty-option": l(N)(K())
         }, null, 8, Ai)) : P("", !0),
         e.options?.length ? (h(!0), b(X, { key: 1 }, ye(e.options, (Y, Se) => (h(), b(X, { key: Se }, [
           Y.options ? (h(), b("optgroup", {
@@ -3501,7 +3502,7 @@ const _a = ["id", "data-width", "data-on-forcing-mobile"], ei = { class: "db-hea
         key: 0,
         class: "db-select-placeholder",
         id: w.value
-      }, L(e.placeholder), 9, Oi)) : P("", !0),
+      }, L(e.placeholder), 9, Ni)) : P("", !0),
       l(te)(e.message, e.showMessage) ? (h(), Q(ee, {
         key: 1,
         size: "small",
@@ -3534,7 +3535,7 @@ const _a = ["id", "data-width", "data-on-forcing-mobile"], ei = { class: "db-hea
         ]),
         _: 1
       }, 8, ["id"]),
-      E("span", Ni, L(c.value), 1)
+      E("span", Oi, L(c.value), 1)
     ], 10, $i));
   }
 }), Ri = ["id", "data-gap", "data-variant", "data-direction", "data-alignment", "data-justify-content", "data-wrap"], dn = /* @__PURE__ */ W({
@@ -3566,7 +3567,7 @@ const _a = ["id", "data-width", "data-on-forcing-mobile"], ei = { class: "db-hea
       "data-direction": e.direction,
       "data-alignment": e.alignment,
       "data-justify-content": e.justifyContent,
-      "data-wrap": l(O)(e.wrap)
+      "data-wrap": l(N)(e.wrap)
     }, [
       M(n.$slots, "default")
     ], 10, Ri));
@@ -3668,8 +3669,8 @@ const _a = ["id", "data-width", "data-on-forcing-mobile"], ei = { class: "db-hea
               checked: t.checked,
               defaultChecked: void 0
             },
-            (N) => {
-              s(N);
+            (O) => {
+              s(O);
             },
             x.signal
           );
@@ -3719,7 +3720,7 @@ const _a = ["id", "data-width", "data-on-forcing-mobile"], ei = { class: "db-hea
       d.value = A, v.value = `${A}${ve}`, u.value = `${A}${fe}`, f.value = `${A}${he}`;
     }
     return (A, x) => (h(), b("div", {
-      "data-visual-aid": l(O)(e.visualAid),
+      "data-visual-aid": l(N)(e.visualAid),
       "data-size": e.size,
       "data-hide-label": l(de)(e.showLabel),
       "data-variant": e.variant,
@@ -3743,10 +3744,10 @@ const _a = ["id", "data-width", "data-on-forcing-mobile"], ei = { class: "db-hea
           required: l(V)(e.required, "required"),
           "data-aid-icon": e.iconLeading ?? e.icon,
           "data-aid-icon-trailing": e.iconTrailing,
-          onChange: x[0] || (x[0] = async (N) => s(N)),
-          onBlur: x[1] || (x[1] = async (N) => k(N)),
-          onFocus: x[2] || (x[2] = async (N) => y(N)),
-          onKeydown: x[3] || (x[3] = async (N) => p(N))
+          onChange: x[0] || (x[0] = async (O) => s(O)),
+          onBlur: x[1] || (x[1] = async (O) => k(O)),
+          onFocus: x[2] || (x[2] = async (O) => y(O)),
+          onKeydown: x[3] || (x[3] = async (O) => p(O))
         }, null, 40, Vi),
         e.label ? (h(), b(X, { key: 0 }, [
           D(L(e.label), 1)
@@ -3853,9 +3854,9 @@ const _a = ["id", "data-width", "data-on-forcing-mobile"], ei = { class: "db-hea
         for: e.id ?? e.propOverrides?.id,
         "data-icon": e.iconLeading ?? e.icon,
         "data-icon-trailing": e.iconTrailing,
-        "data-show-icon": l(O)(e.showIconLeading ?? e.showIcon),
-        "data-show-icon-trailing": l(O)(e.showIconTrailing),
-        "data-no-text": l(O)(e.noText)
+        "data-show-icon": l(N)(e.showIconLeading ?? e.showIcon),
+        "data-show-icon-trailing": l(N)(e.showIconTrailing),
+        "data-no-text": l(N)(e.noText)
       }, [
         E("input", {
           type: "radio",
@@ -4031,15 +4032,15 @@ const _a = ["id", "data-width", "data-on-forcing-mobile"], ei = { class: "db-hea
           const j = k.indexOf(p), A = p.querySelector("label"), x = p.querySelector("input");
           if (x && A) {
             if (!x.id) {
-              const N = `${n.value}-tab-${j}`;
-              A.setAttribute("for", N), x.id = N, x.setAttribute("name", n.value), y.length > j && x.setAttribute(
+              const O = `${n.value}-tab-${j}`;
+              A.setAttribute("for", O), x.id = O, x.setAttribute("name", n.value), y.length > j && x.setAttribute(
                 "aria-controls",
                 `${n.value}-tab-panel-${j}`
               );
             }
             if (s) {
-              const N = !i.initialSelectedMode || i.initialSelectedMode === "auto", F = i.initialSelectedIndex == null && j === 0 || Number(i.initialSelectedIndex) === j;
-              N && F && x.click();
+              const O = !i.initialSelectedMode || i.initialSelectedMode === "auto", F = i.initialSelectedIndex == null && j === 0 || Number(i.initialSelectedIndex) === j;
+              O && F && x.click();
             }
           }
         }
@@ -4260,10 +4261,10 @@ const _a = ["id", "data-width", "data-on-forcing-mobile"], ei = { class: "db-hea
     function s() {
       !c.value?.validity.valid || t.validation === "invalid" ? (w.value = f.value, g.value = t.invalidMessage || c.value?.validationMessage || _, re() && (B.value = g.value, J(() => B.value = "", 1e3))) : S() && c.value?.validity.valid && (t.required || t.minLength || t.maxLength) ? (w.value = u.value, re() && (B.value = t.validMessage ?? ce, J(() => B.value = "", 1e3))) : te(t.message, t.showMessage) ? w.value = v.value : w.value = void 0;
     }
-    function k(x, N) {
+    function k(x, O) {
       t.input && t.input(x), I.value = x.target.value, t.onInput && t.onInput(x), ue(n, x), s();
     }
-    function y(x, N) {
+    function y(x, O) {
       t.onChange && t.onChange(x), ue(n, x), s();
     }
     function p(x) {
@@ -4276,7 +4277,7 @@ const _a = ["id", "data-width", "data-on-forcing-mobile"], ei = { class: "db-hea
       const x = t.id ?? t.propOverrides?.id ?? `textarea-${i}`;
       d.value = x, v.value = x + ve, u.value = x + fe, f.value = x + he;
     }
-    return (x, N) => (h(), b("div", {
+    return (x, O) => (h(), b("div", {
       class: U(l(G)("db-textarea", t.class)),
       "data-variant": e.variant,
       "data-hide-asterisk": l(de)(e.showRequiredAsterisk),
@@ -4302,10 +4303,10 @@ const _a = ["id", "data-width", "data-on-forcing-mobile"], ei = { class: "db-hea
         wrap: e.wrap,
         spellcheck: e.spellCheck,
         autocomplete: e.autocomplete,
-        onInput: N[0] || (N[0] = async (F) => k(F)),
-        onChange: N[1] || (N[1] = async (F) => y(F)),
-        onBlur: N[2] || (N[2] = async (F) => p(F)),
-        onFocus: N[3] || (N[3] = async (F) => j(F)),
+        onInput: O[0] || (O[0] = async (F) => k(F)),
+        onChange: O[1] || (O[1] = async (F) => y(F)),
+        onBlur: O[2] || (O[2] = async (F) => p(F)),
+        onFocus: O[3] || (O[3] = async (F) => j(F)),
         value: e.value ?? I.value,
         "aria-describedby": e.ariaDescribedBy ?? w.value,
         placeholder: e.placeholder ?? l(nt),
@@ -4347,7 +4348,7 @@ const _a = ["id", "data-width", "data-on-forcing-mobile"], ei = { class: "db-hea
       E("span", el, L(B.value), 1)
     ], 10, Qi));
   }
-}), yn = ["none", "both", "horizontal", "vertical"], wn = ["hard", "soft", "off"], kn = ["description", "label"], pn = ["adaptive", "neutral", "critical", "informational", "warning", "successful"], Bn = ["medium", "small", "large", "none"], Sn = ["medium", "small", "large", "none"], tl = ["left", "right", "left-start", "left-end", "right-start", "right-end"], al = ["top", "bottom", "top-start", "top-end", "bottom-start", "bottom-end"], In = [...tl, ...al], Ln = ["none", "3x-large", "2x-large", "x-large", "large", "medium", "small", "x-small", "2x-small", "3x-small"], xn = ["horizontal", "vertical"], Tn = ["full", "auto"], $n = ["full", "medium", "large", "small"], Cn = ["none", "slow", "fast"], En = ["auto", "fixed"], An = ["small", "medium"], Dn = ["weak", "strong"], Mn = ["invalid", "valid", "no-validation"], Fn = ["fixed", "content"], On = ["above", "floating"], Nn = ["leading", "trailing"], Rn = ["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"], zn = ["_self", "_blank", "_parent", "_top"], Pn = ["no-referrer", "no-referrer-when-downgrade", "origin", "origin-when-cross-origin", "same-origin", "strict-origin", "strict-origin-when-cross-origin", "unsafe-url"], Vn = ["start", "center"];
+}), yn = ["none", "both", "horizontal", "vertical"], wn = ["hard", "soft", "off"], kn = ["description", "label"], pn = ["adaptive", "neutral", "critical", "informational", "warning", "successful"], Bn = ["medium", "small", "large", "none"], Sn = ["medium", "small", "large", "none"], tl = ["left", "right", "left-start", "left-end", "right-start", "right-end"], al = ["top", "bottom", "top-start", "top-end", "bottom-start", "bottom-end"], In = [...tl, ...al], Ln = ["none", "3x-large", "2x-large", "x-large", "large", "medium", "small", "x-small", "2x-small", "3x-small"], xn = ["horizontal", "vertical"], Tn = ["full", "auto"], $n = ["full", "medium", "large", "small"], Cn = ["none", "slow", "fast"], En = ["auto", "fixed"], An = ["small", "medium"], Dn = ["weak", "strong"], Mn = ["invalid", "valid", "no-validation"], Fn = ["fixed", "content"], Nn = ["above", "floating"], On = ["leading", "trailing"], Rn = ["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"], zn = ["_self", "_blank", "_parent", "_top"], Pn = ["no-referrer", "no-referrer-when-downgrade", "origin", "origin-when-cross-origin", "same-origin", "strict-origin", "strict-origin-when-cross-origin", "unsafe-url"], Vn = ["start", "center"];
 export {
   dl as AccordionBehaviorList,
   ol as AccordionVariantList,
@@ -4417,7 +4418,7 @@ export {
   Vt as DEFAULT_MESSAGE,
   ve as DEFAULT_MESSAGE_ID_SUFFIX,
   nt as DEFAULT_PLACEHOLDER,
-  Oe as DEFAULT_PLACEHOLDER_ID_SUFFIX,
+  Ne as DEFAULT_PLACEHOLDER_ID_SUFFIX,
   ot as DEFAULT_REMOVE,
   Ht as DEFAULT_ROWS,
   Ut as DEFAULT_SELECTED,
@@ -4433,8 +4434,8 @@ export {
   Fl as DividerVariantList,
   me as DocumentClickListener,
   se as DocumentScrollListener,
-  Ol as DrawerBackdropList,
-  Nl as DrawerDirectionList,
+  Nl as DrawerBackdropList,
+  Ol as DrawerDirectionList,
   zl as DrawerPositionList,
   Rl as DrawerVariantList,
   Dn as EmphasisList,
@@ -4442,8 +4443,8 @@ export {
   Ln as GapSpacingList,
   ql as IconWeightList,
   Ul as InputTypeList,
-  Nn as LabelVariantHorizontalList,
-  On as LabelVariantList,
+  On as LabelVariantHorizontalList,
+  Nn as LabelVariantList,
   Xl as LinkContentList,
   Pn as LinkReferrerPolicyList,
   Hl as LinkSizeList,
@@ -4486,7 +4487,7 @@ export {
   G as cls,
   J as delay,
   V as getBoolean,
-  O as getBooleanAsString,
+  N as getBooleanAsString,
   vt as getFloatingProps,
   de as getHideProp,
   Ze as getInputValue,