@db-ux/v-core-components 4.14.0 → 5.0.0

package/dist/db-ux.es.js

@@ -51,11 +51,20 @@ var x = () => {
 		case "successful": return "status";
 		default: return "article";
 	}
-}, H = ["id"], ee = [
+}, H = [
+	"ArrowRight",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowUp",
+	"Home",
+	"End",
+	"Enter",
+	" "
+], ee = () => typeof HTMLElement > "u" ? !1 : "focusGroup" in HTMLElement.prototype || "focusgroup" in HTMLElement.prototype, U = ["id"], te = [
 	"aria-disabled",
 	"name",
 	"open"
-], U = /* @__PURE__ */ s({
+], W = /* @__PURE__ */ s({
 	name: "DBAccordionItem",
 	__name: "accordion-item",
 	props: {
@@ -122,9 +131,9 @@ var x = () => {
 			ref: m,
 			name: l.value,
 			open: s.value
-		}, [i("summary", { onClick: d[0] ||= async (e) => v(e) }, [t.headlinePlain ? (f(), r(e, { key: 0 }, [a(g(t.headlinePlain), 1)], 64)) : n("", !0), t.headlinePlain ? n("", !0) : h(u.$slots, "headline", { key: 1 })]), i("div", null, [t.text ? (f(), r(e, { key: 0 }, [a(g(t.text), 1)], 64)) : n("", !0), h(u.$slots, "default")])], 8, ee)], 10, H));
+		}, [i("summary", { onClick: d[0] ||= async (e) => v(e) }, [t.headlinePlain ? (f(), r(e, { key: 0 }, [a(g(t.headlinePlain), 1)], 64)) : n("", !0), t.headlinePlain ? n("", !0) : h(u.$slots, "headline", { key: 1 })]), i("div", null, [t.text ? (f(), r(e, { key: 0 }, [a(g(t.text), 1)], 64)) : n("", !0), h(u.$slots, "default")])], 8, te)], 10, U));
 	}
-}), te = ["id", "data-variant"], W = /* @__PURE__ */ s({
+}), ne = ["id", "data-variant"], re = /* @__PURE__ */ s({
 	name: "DBAccordion",
 	__name: "accordion",
 	props: {
@@ -197,7 +206,7 @@ var x = () => {
 			id: i.id ?? i.propOverrides?.id,
 			class: c(_(C)("db-accordion", o.class)),
 			"data-variant": i.variant
-		}, [i.items ? n("", !0) : h(a.$slots, "default", { key: 0 }), i.items ? (f(!0), r(e, { key: 1 }, m(b(), (e, n) => (f(), t(U, {
+		}, [i.items ? n("", !0) : h(a.$slots, "default", { key: 0 }), i.items ? (f(!0), r(e, { key: 1 }, m(b(), (e, n) => (f(), t(W, {
 			key: `accordion-item-${n}`,
 			headlinePlain: e.headlinePlain,
 			disabled: e.disabled,
@@ -206,26 +215,26 @@ var x = () => {
 			"headlinePlain",
 			"disabled",
 			"text"
-		]))), 128)) : n("", !0)], 10, te));
+		]))), 128)) : n("", !0)], 10, ne));
 	}
-}), ne = ["divider", "card"], re = ["multiple", "single"], G = "OVERWRITE_DEFAULT_ID", ie = "LABEL SHOULD BE SET", ae = " ", K = "MESSAGE SHOULD BE SET", oe = "-label", se = "-select", q = "-message", J = "-valid-message", ce = "-invalid-message", le = "-placeholder", Y = "-datalist", ue = "TODO: Add a validMessage", de = "TODO: Add an invalidMessage", fe = "Remove", pe = "Back", me = "Selected", he = "Scroll left", ge = "Scroll right", _e = "Open navigation menu", ve = "brand", ye = 4, be = "Close", xe = "density", Se = "color", X = /* @__PURE__ */ function(e) {
+}), G = ["divider", "card"], ie = ["multiple", "single"], K = "OVERWRITE_DEFAULT_ID", q = "LABEL SHOULD BE SET", J = " ", Y = "MESSAGE SHOULD BE SET", ae = "-label", oe = "-select", X = "-message", se = "-valid-message", ce = "-invalid-message", le = "-placeholder", ue = "-datalist", de = "TODO: Add a validMessage", fe = "TODO: Add an invalidMessage", pe = "Remove", me = "Back", he = "Selected", ge = "Scroll left", _e = "Scroll right", ve = "Open navigation menu", ye = "brand", be = 4, xe = "Close", Z = "density", Q = "color", Se = /* @__PURE__ */ function(e) {
 	return e.FUNCTIONAL = "functional", e.REGULAR = "regular", e.EXPRESSIVE = "expressive", e;
-}({}), Z = Object.entries(X).map(([, e]) => e), Ce = /* @__PURE__ */ function(e) {
+}({}), Ce = Object.entries(Se).map(([, e]) => e), we = /* @__PURE__ */ function(e) {
 	return e.PRIMARY = "primary", e;
-}({}), we = /* @__PURE__ */ function(e) {
+}({}), Te = /* @__PURE__ */ function(e) {
 	return 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;
-}({}), Te = Object.entries(we).map(([, e]) => e), Ee = Object.entries(Ce).map(([, e]) => e), De = /* @__PURE__ */ function(e) {
+}({}), Ee = Object.entries(Te).map(([, e]) => e), De = Object.entries(we).map(([, e]) => e), Oe = /* @__PURE__ */ function(e) {
 	return e.CRITICAL = "critical", e.INFORMATIONAL = "informational", e.WARNING = "warning", e.SUCCESSFUL = "successful", e;
-}({}), Oe = Object.entries(De).map(([, e]) => e), ke = {
+}({}), ke = Object.entries(Oe).map(([, e]) => e), Ae = {
 	width: 390,
 	height: 884
-}, Ae = {
+}, je = {
 	width: 1920,
 	height: 1280
-}, je = [
+}, Me = [
 	{
 		name: "desktop",
-		...Ae
+		...je
 	},
 	{
 		name: "tablet",
@@ -234,9 +243,9 @@ var x = () => {
 	},
 	{
 		name: "mobile",
-		...ke
+		...Ae
 	}
-], Me = "db-ux-framework", Ne = "db-ux-mode", Pe = [
+], Ne = "db-ux-framework", Pe = "db-ux-mode", Fe = [
 	"id",
 	"data-semantic",
 	"data-size",
@@ -244,7 +253,7 @@ var x = () => {
 	"data-placement",
 	"data-wrap",
 	"data-label"
-], Fe = /* @__PURE__ */ s({
+], Ie = /* @__PURE__ */ s({
 	name: "DBBadge",
 	__name: "badge",
 	props: {
@@ -288,9 +297,9 @@ var x = () => {
 			"data-placement": t.placement,
 			"data-wrap": _(k)(t.wrap, "wrap"),
 			"data-label": t.placement?.startsWith("corner") && (t.label ?? _("LABEL SHOULD BE SET"))
-		}, [t.text ? (f(), r(e, { key: 0 }, [a(g(t.text), 1)], 64)) : n("", !0), h(o.$slots, "default")], 10, Pe));
+		}, [t.text ? (f(), r(e, { key: 0 }, [a(g(t.text), 1)], 64)) : n("", !0), h(o.$slots, "default")], 10, Fe));
 	}
-}), Ie = [
+}), Le = [
 	"inline",
 	"corner-top-left",
 	"corner-top-right",
@@ -298,11 +307,11 @@ var x = () => {
 	"corner-center-right",
 	"corner-bottom-left",
 	"corner-bottom-right"
-], Le = [
+], Re = [
 	"data-icon",
 	"data-show-icon",
 	"id"
-], Re = /* @__PURE__ */ s({
+], ze = /* @__PURE__ */ s({
 	name: "DBBrand",
 	__name: "brand",
 	props: {
@@ -332,9 +341,9 @@ var x = () => {
 			"data-show-icon": _(k)(t.showIcon, "showIcon"),
 			id: t.id ?? t.propOverrides?.id,
 			class: c(_(C)("db-brand", i.class))
-		}, [h(s.$slots, "default"), t.text ? (f(), r(e, { key: 0 }, [a(g(t.text), 1)], 64)) : n("", !0)], 10, Le));
+		}, [h(s.$slots, "default"), t.text ? (f(), r(e, { key: 0 }, [a(g(t.text), 1)], 64)) : n("", !0)], 10, Re));
 	}
-}), ze = [
+}), Be = [
 	"id",
 	"type",
 	"disabled",
@@ -352,7 +361,7 @@ var x = () => {
 	"value",
 	"command",
 	"commandfor"
-], Be = /* @__PURE__ */ s({
+], Ve = /* @__PURE__ */ s({
 	name: "DBButton",
 	__name: "button",
 	props: {
@@ -435,23 +444,23 @@ var x = () => {
 			command: t.command,
 			commandfor: t.commandfor,
 			onClick: d[0] ||= async (e) => l(e)
-		}, [t.text ? (f(), r(e, { key: 0 }, [a(g(t.text), 1)], 64)) : n("", !0), h(u.$slots, "default")], 10, ze));
+		}, [t.text ? (f(), r(e, { key: 0 }, [a(g(t.text), 1)], 64)) : n("", !0), h(u.$slots, "default")], 10, Be));
 	}
-}), Ve = [
+}), He = [
 	"outlined",
 	"brand",
 	"filled",
 	"ghost"
-], He = [
+], Ue = [
 	"button",
 	"reset",
 	"submit"
-], Ue = [
+], We = [
 	"id",
 	"data-behavior",
 	"data-elevation-level",
 	"data-spacing"
-], We = /* @__PURE__ */ s({
+], Ge = /* @__PURE__ */ s({
 	name: "DBCard",
 	__name: "card",
 	props: {
@@ -484,20 +493,20 @@ var x = () => {
 			"data-elevation-level": e.elevationLevel,
 			"data-spacing": e.spacing,
 			onClick: o[0] ||= async (e) => i(e)
-		}, [h(a.$slots, "default")], 10, Ue));
+		}, [h(a.$slots, "default")], 10, We));
 	}
-}), Ge = ["static", "interactive"], Ke = [
+}), Ke = ["static", "interactive"], qe = [
 	"1",
 	"2",
 	"3"
-], Q = (e, t, n = "value") => {
+], Je = (e, t, n = "value") => {
 	e(`update:${n}`, t.target[n]);
-}, qe = (e, t, n) => {
+}, Ye = (e, t, n) => {
 	e.form && !e._dbFormResetListenerAdded && (e.form.addEventListener("reset", (e) => {
 		t(e);
 	}, { signal: n }), e._dbFormResetListenerAdded = !0);
-}, Je = (e, t, n, r) => {
-	qe(e, (r) => {
+}, Xe = (e, t, n, r) => {
+	Ye(e, (r) => {
 		O(() => {
 			let i = t.checked ? t.checked : t.defaultChecked ? t.defaultChecked : e.checked;
 			n({
@@ -509,8 +518,8 @@ var x = () => {
 			});
 		}, 1);
 	}, r);
-}, Ye = (e, t, n, r) => {
-	qe(e, (r) => {
+}, Ze = (e, t, n, r) => {
+	Ye(e, (r) => {
 		O(() => {
 			let i = t.value ? t.value : t.defaultValue ? t.defaultValue : e.value;
 			n({
@@ -522,7 +531,7 @@ var x = () => {
 			});
 		}, 1);
 	}, r);
-}, Xe = [
+}, Qe = [
 	"id",
 	"data-icon",
 	"data-semantic",
@@ -564,13 +573,13 @@ var x = () => {
 			"data-size": t.size,
 			"data-wrap": _(k)(t.wrap, "wrap"),
 			"data-show-icon-leading": _(k)(t.showIcon ?? !0, "showIcon")
-		}, [t.text ? (f(), r(e, { key: 0 }, [a(g(t.text), 1)], 64)) : n("", !0), h(s.$slots, "default")], 10, Xe));
+		}, [t.text ? (f(), r(e, { key: 0 }, [a(g(t.text), 1)], 64)) : n("", !0), h(s.$slots, "default")], 10, Qe));
 	}
-}), Ze = [
+}), $e = [
 	"data-size",
 	"data-hide-asterisk",
 	"data-hide-label"
-], Qe = ["for"], $e = [
+], et = ["for"], tt = [
 	"aria-invalid",
 	"data-custom-validity",
 	"id",
@@ -580,10 +589,10 @@ var x = () => {
 	"value",
 	"required",
 	"aria-describedby"
-], et = {
+], nt = {
 	"data-visually-hidden": "true",
 	role: "status"
-}, tt = /* @__PURE__ */ s({
+}, rt = /* @__PURE__ */ s({
 	name: "DBCheckbox",
 	__name: "checkbox",
 	props: {
@@ -670,8 +679,8 @@ var x = () => {
 			flush: "post"
 		}), y(() => [T.value], () => {
 			if (T.value) {
-				let e = T.value + q;
-				D.value = e, k.value = T.value + J, j.value = T.value + ce, I(S.message, S.showMessage) && (N.value = e), B();
+				let e = T.value + X;
+				D.value = e, k.value = T.value + se, j.value = T.value + ce, I(S.message, S.showMessage) && (N.value = e), B();
 			}
 		}, {
 			immediate: !0,
@@ -697,7 +706,7 @@ var x = () => {
 		}), y(() => [R.value], () => {
 			if (R.value) {
 				let e = L.value;
-				e || (e = new AbortController(), L.value = e), Je(R.value, {
+				e || (e = new AbortController(), L.value = e), Xe(R.value, {
 					checked: S.checked,
 					defaultChecked: void 0
 				}, (e) => {
@@ -715,7 +724,7 @@ var x = () => {
 			!R.value?.validity.valid || S.validation === "invalid" ? (N.value = j.value, M.value = S.invalidMessage || R.value?.validationMessage || "TODO: Add an invalidMessage", E() && (P.value = M.value, O(() => P.value = "", 1e3))) : z() && R.value?.validity.valid && S.required ? (N.value = k.value, E() && (P.value = S.validMessage ?? "TODO: Add a validMessage", O(() => P.value = "", 1e3))) : I(S.message, S.showMessage) ? N.value = D.value : N.value = void 0;
 		}
 		function V(e, t) {
-			S.onChange && S.onChange(e), Q(x, e, "checked"), B();
+			S.onChange && S.onChange(e), Je(x, e, "checked"), B();
 		}
 		function H(e) {
 			S.onBlur && S.onBlur(e);
@@ -725,7 +734,7 @@ var x = () => {
 		}
 		function U() {
 			let e = S.id ?? S.propOverrides?.id ?? `checkbox-${m}`;
-			T.value = e, D.value = e + q, k.value = e + J, j.value = e + ce;
+			T.value = e, D.value = e + X, k.value = e + se, j.value = e + ce;
 		}
 		return (l, u) => (f(), r("div", {
 			class: c(_(C)("db-checkbox", S.class)),
@@ -750,10 +759,10 @@ var x = () => {
 					onBlur: u[1] ||= async (e) => H(e),
 					onFocus: u[2] ||= async (e) => ee(e),
 					"aria-describedby": s.ariaDescribedBy ?? N.value
-				}, null, 40, $e),
+				}, null, 40, tt),
 				s.label ? (f(), r(e, { key: 0 }, [a(g(s.label), 1)], 64)) : n("", !0),
 				h(l.$slots, "default")
-			], 8, Qe),
+			], 8, et),
 			_(I)(s.message, s.showMessage) ? (f(), t($, {
 				key: 0,
 				size: "small",
@@ -780,10 +789,10 @@ var x = () => {
 				default: b(() => [a(g(M.value), 1)]),
 				_: 1
 			}, 8, ["id"]),
-			i("span", et, g(P.value), 1)
-		], 10, Ze));
+			i("span", nt, g(P.value), 1)
+		], 10, $e));
 	}
-}), nt = [
+}), it = [
 	"id",
 	"data-icon",
 	"data-show-icon",
@@ -793,7 +802,7 @@ var x = () => {
 	"data-width",
 	"data-variant",
 	"data-no-text"
-], rt = /* @__PURE__ */ s({
+], at = /* @__PURE__ */ s({
 	name: "DBCustomButton",
 	__name: "custom-button",
 	props: {
@@ -842,9 +851,9 @@ var x = () => {
 			"data-width": e.width,
 			"data-variant": e.variant,
 			"data-no-text": _(k)(e.noText, "noText")
-		}, [h(i.$slots, "default")], 10, nt));
+		}, [h(i.$slots, "default")], 10, it));
 	}
-}), it = class {
+}), ot = class {
 	addCallback(e) {
 		let t = x(), n = this.getCallbacks();
 		return n[t] = e, t;
@@ -853,7 +862,7 @@ var x = () => {
 		let t = this.getCallbacks();
 		delete t[e];
 	}
-}, at = class e extends it {
+}, st = class e extends ot {
 	static callbacks = {};
 	static _instance = null;
 	static runCallbacks(t) {
@@ -866,7 +875,7 @@ var x = () => {
 	getCallbacks() {
 		return e.callbacks;
 	}
-}, ot = class e extends it {
+}, ct = class e extends ot {
 	static callbacks = {};
 	static _instance = null;
 	static runCallbacks(t) {
@@ -884,13 +893,13 @@ var x = () => {
 	getCallbacks() {
 		return e.callbacks;
 	}
-}, st = (e, t, n) => {
+}, lt = (e, t, n) => {
 	if (!e || !t) return;
 	let r = e.dataset.width === "full", i = e.dataset.width === "auto";
 	e.style.inlineSize = "", e.style.minInlineSize = "";
 	let a = getComputedStyle(e);
 	if (a.zIndex === "9999" || a.position !== "fixed" && a.position !== "absolute") return;
-	let { top: o, bottom: s, childHeight: c, childWidth: l, width: u, right: d, left: f, correctedPlacement: p, innerWidth: m } = ct(e, t, n), h = u;
+	let { top: o, bottom: s, childHeight: c, childWidth: l, width: u, right: d, left: f, correctedPlacement: p, innerWidth: m } = ut(e, t, n), h = u;
 	if (i) {
 		let t = parseFloat(getComputedStyle(e).maxInlineSize);
 		!isNaN(t) && t > 0 && (h = Math.min(u, t));
@@ -900,7 +909,7 @@ var x = () => {
 	i ? g = Math.max(l, h) : r && (g = u);
 	let _ = p;
 	i && (_ === "top" || _ === "bottom" || _ === "top-start" || _ === "bottom-start") && f + g > m && (_ = _.startsWith("top") ? "top-end" : "bottom-end"), _ === "top" || _ === "bottom" || _ === "top-start" || _ === "bottom-start" ? e.style.insetInlineStart = `${f}px` : (_ === "top-end" || _ === "bottom-end") && (e.style.insetInlineStart = `${Math.max(d - g, 0)}px`), _?.startsWith("top") ? e.style.insetBlockStart = `${o - c}px` : _?.startsWith("bottom") && (e.style.insetBlockStart = `${s}px`), e.style.position = "fixed";
-}, ct = (e, t, n) => {
+}, ut = (e, t, n) => {
 	if (!e || !t) return {
 		top: 0,
 		bottom: 0,
@@ -931,21 +940,21 @@ var x = () => {
 		innerHeight: u,
 		outsideYBoth: h && m
 	};
-}, lt = 10, ut = /* @__PURE__ */ new WeakMap(), dt = (e) => {
-	if (ut.has(e)) return ut.get(e);
+}, dt = 10, ft = /* @__PURE__ */ new WeakMap(), pt = (e) => {
+	if (ft.has(e)) return ft.get(e);
 	let t = e.parentElement, n = 0;
-	for (; t && n < lt;) {
-		if (t.dataset.correctedPlacement) return ut.set(e, t), t;
+	for (; t && n < dt;) {
+		if (t.dataset.correctedPlacement) return ft.set(e, t), t;
 		t = t.parentElement, n += 1;
 	}
-	return ut.set(e, null), null;
-}, ft = (e, t, n) => {
+	return ft.set(e, null), null;
+}, mt = (e, t, n) => {
 	if (!e || !t) return;
-	let r = getComputedStyle(t), i = ["absolute", "fixed"].includes(r.position), a = dt(e), o = !a && !i, s = getComputedStyle(e);
+	let r = getComputedStyle(t), i = ["absolute", "fixed"].includes(r.position), a = pt(e), o = !a && !i, s = getComputedStyle(e);
 	if (s.position !== "fixed" && s.position !== "absolute") return;
 	let c = s.getPropertyValue("--db-popover-distance");
 	c.length || (c = "0px");
-	let { top: l, height: u, width: d, childHeight: f, childWidth: p, right: m, left: h, bottom: g, correctedPlacement: _, innerWidth: v, innerHeight: y, outsideYBoth: b } = ct(e, t, e?.dataset?.placement ?? n ?? "bottom");
+	let { top: l, height: u, width: d, childHeight: f, childWidth: p, right: m, left: h, bottom: g, correctedPlacement: _, innerWidth: v, innerHeight: y, outsideYBoth: b } = ut(e, t, e?.dataset?.placement ?? n ?? "bottom");
 	if (a) {
 		let e = a.getBoundingClientRect();
 		h = Math.abs(h - e.left), m = (d + Math.abs(m - e.right)) * 1.5, l = Math.abs(l - e.top), g = (u + Math.abs(g - e.bottom)) * 1.5;
@@ -990,14 +999,14 @@ var x = () => {
 		let t = g + f;
 		e.style.insetBlockStart = `calc(${i ? t : g}px + ${c})`, e.style.insetBlockEnd = `calc(${o && t > y ? y : t}px + ${c})`;
 	}
-	b ? (e.style.overflow = "hidden auto", e.style.insetBlock = c, e.style.maxBlockSize = `calc(${y}px - 2 * ${c})`) : (e.style.overflow = "", e.style.maxBlockSize = ""), e.style.position = "fixed", e.dataset.correctedPlacement = _, pt(e);
-}, pt = (e) => {
-	let { outTop: t, outBottom: n, outLeft: r, outRight: i } = mt(e), a = {};
+	b ? (e.style.overflow = "hidden auto", e.style.insetBlock = c, e.style.maxBlockSize = `calc(${y}px - 2 * ${c})`) : (e.style.overflow = "", e.style.maxBlockSize = ""), e.style.position = "fixed", e.dataset.correctedPlacement = _, ht(e);
+}, ht = (e) => {
+	let { outTop: t, outBottom: n, outLeft: r, outRight: i } = gt(e), a = {};
 	return t || n ? (a = { vy: t ? "top" : "bottom" }, e.dataset.outsideVy = a.vy) : delete e.dataset.outsideVy, r || i ? (a = {
 		...a,
 		vx: i ? "right" : "left"
 	}, e.dataset.outsideVx = a.vx) : delete e.dataset.outsideVx, a;
-}, mt = (e) => {
+}, gt = (e) => {
 	let { top: t, bottom: n, left: r, right: i } = e.getBoundingClientRect(), { innerHeight: a, innerWidth: o } = window, s = t < 0, c = n > a, l = r < 0, u = i > o, d = e.dataset.outsideVy, f = e.dataset.outsideVx, p = e?.parentElement?.getBoundingClientRect();
 	return p && (d && (e.dataset.outsideVy === "top" ? s = p.top - (n - p.bottom) < 0 : c = p.bottom + (p.top - t) > a), f && (e.dataset.outsideVx === "left" ? l = p.left - (i - p.right) < 0 : u = p.right + (p.left - r) > o)), {
 		outTop: s,
@@ -1005,7 +1014,7 @@ var x = () => {
 		outLeft: l,
 		outRight: u
 	};
-}, ht = class {
+}, _t = class {
 	observe(e, t) {
 		let n = this.getObserver();
 		if (!n) return;
@@ -1024,7 +1033,7 @@ var x = () => {
 			e(t);
 		});
 	}
-}, gt = class e extends ht {
+}, vt = class e extends _t {
 	static _instance = null;
 	static callbacksByElement = /* @__PURE__ */ new Map();
 	static idToElement = /* @__PURE__ */ new Map();
@@ -1050,7 +1059,7 @@ var x = () => {
 	unobserveElement(e, t) {
 		e.unobserve(t);
 	}
-}, _t = class e extends ht {
+}, yt = class e extends _t {
 	static _instance = null;
 	static callbacksByElement = /* @__PURE__ */ new Map();
 	static idToElement = /* @__PURE__ */ new Map();
@@ -1076,7 +1085,7 @@ var x = () => {
 	unobserveElement(e, t) {
 		e.unobserve(t);
 	}
-}, vt = ["id", "data-width"], yt = /* @__PURE__ */ s({
+}, bt = ["id", "data-width"], xt = /* @__PURE__ */ s({
 	name: "DBCustomSelectDropdown",
 	__name: "custom-select-dropdown",
 	props: {
@@ -1097,20 +1106,20 @@ var x = () => {
 			id: e.id ?? e.propOverrides?.id,
 			class: c(_(C)("db-custom-select-dropdown db-card", t.class)),
 			"data-width": e.width
-		}, [h(i.$slots, "default")], 10, vt));
+		}, [h(i.$slots, "default")], 10, bt));
 	}
-}), bt = ["id", "data-divider"], xt = [
+}), St = ["id", "data-divider"], Ct = [
 	"data-icon",
 	"data-show-icon",
 	"data-icon-trailing"
-], St = [
+], wt = [
 	"type",
 	"name",
 	"form",
 	"checked",
 	"disabled",
 	"value"
-], Ct = { class: "db-custom-select-list-item-label" }, wt = { key: 1 }, Tt = /* @__PURE__ */ s({
+], Tt = { class: "db-custom-select-list-item-label" }, Et = { key: 1 }, Dt = /* @__PURE__ */ s({
 	name: "DBCustomSelectListItem",
 	__name: "custom-select-list-item",
 	props: {
@@ -1162,7 +1171,7 @@ var x = () => {
 			flush: "post"
 		});
 		function m(e) {
-			e.stopPropagation(), l.onChange && l.onChange(e), Q(s, e, "checked");
+			e.stopPropagation(), l.onChange && l.onChange(e), Je(s, e, "checked");
 		}
 		function v() {
 			if (!(l.isGroupTitle || l.type === "checkbox")) return A(l.checked, "checked") ? "check" : "x_placeholder";
@@ -1176,7 +1185,7 @@ var x = () => {
 				"db-radio": t.type !== "checkbox" && !t.isGroupTitle
 			})),
 			"data-divider": _(k)(u.value, "hasDivider")
-		}, [t.isGroupTitle ? (f(), r("span", wt, g(t.groupTitle), 1)) : (f(), r("label", {
+		}, [t.isGroupTitle ? (f(), r("span", Et, g(t.groupTitle), 1)) : (f(), r("label", {
 			key: 0,
 			"data-icon": t.type !== "checkbox" && t.icon ? t.icon : void 0,
 			"data-show-icon": _(k)(t.showIcon, "showIcon"),
@@ -1191,13 +1200,13 @@ var x = () => {
 			disabled: _(A)(t.disabled, "disabled"),
 			value: t.value,
 			onChange: s[0] ||= async (e) => m(e)
-		}, null, 40, St), i("span", Ct, [t.label ? (f(), r(e, { key: 0 }, [a(g(t.label), 1)], 64)) : n("", !0), h(o.$slots, "default")])], 8, xt))], 10, bt));
+		}, null, 40, wt), i("span", Tt, [t.label ? (f(), r(e, { key: 0 }, [a(g(t.label), 1)], 64)) : n("", !0), h(o.$slots, "default")])], 8, Ct))], 10, St));
 	}
-}), Et = [
+}), Ot = [
 	"role",
 	"aria-label",
 	"id"
-], Dt = /* @__PURE__ */ s({
+], kt = /* @__PURE__ */ s({
 	name: "DBCustomSelectList",
 	__name: "custom-select-list",
 	props: {
@@ -1222,9 +1231,9 @@ var x = () => {
 			ref: n,
 			id: e.id ?? e.propOverrides?.id,
 			class: c(_(C)("db-custom-select-list", t.class))
-		}, [i("ul", null, [h(a.$slots, "default")])], 10, Et));
+		}, [i("ul", null, [h(a.$slots, "default")])], 10, Ot));
 	}
-}), Ot = [
+}), At = [
 	"data-variant",
 	"data-hide-label",
 	"data-show-icon",
@@ -1232,10 +1241,10 @@ var x = () => {
 	"data-icon-trailing",
 	"data-hide-asterisk",
 	"data-show-icon-trailing"
-], kt = ["for"], At = /* @__PURE__ */ "aria-invalid.data-custom-validity.data-field-sizing.id.name.type.multiple.accept.placeholder.disabled.required.step.value.maxLength.minLength.max.min.readOnly.form.pattern.size.autoComplete.autoFocus.enterKeyHint.inputMode.list.aria-describedby.role".split("."), jt = ["id"], Mt = ["value"], Nt = {
+], jt = ["for"], Mt = /* @__PURE__ */ "aria-invalid.data-custom-validity.data-field-sizing.id.name.type.multiple.accept.placeholder.disabled.required.step.value.maxLength.minLength.max.min.readOnly.form.pattern.size.autoComplete.autoFocus.enterKeyHint.inputMode.list.aria-describedby.role".split("."), Nt = ["id"], Pt = ["value"], Ft = {
 	"data-visually-hidden": "true",
 	role: "status"
-}, Pt = /* @__PURE__ */ s({
+}, It = /* @__PURE__ */ s({
 	name: "DBInput",
 	__name: "input",
 	props: {
@@ -1355,11 +1364,11 @@ var x = () => {
 	setup(s, { emit: l }) {
 		let x = v(), S = l, T = s, P = p(void 0), L = p(void 0), R = p(void 0), z = p(void 0), B = p(void 0), V = p(void 0), H = p(void 0), ee = p(""), U = p(""), te = p(void 0), W = p(null);
 		u(() => {
-			se(), B.value = T.invalidMessage || "TODO: Add an invalidMessage";
+			Y(), B.value = T.invalidMessage || "TODO: Add an invalidMessage";
 		}), d(() => {
 			te.value?.abort();
 		}), y(() => [T.id, T.propOverrides?.id], () => {
-			(T.id ?? T.propOverrides?.id) && se();
+			(T.id ?? T.propOverrides?.id) && Y();
 		}, {
 			immediate: !0,
 			flush: "post"
@@ -1370,8 +1379,8 @@ var x = () => {
 			flush: "post"
 		}), y(() => [P.value], () => {
 			if (P.value) {
-				let e = P.value + q;
-				L.value = e, R.value = P.value + J, z.value = P.value + ce, V.value = T.dataListId ?? P.value + "-datalist", I(T.message, T.showMessage) && (H.value = e), re();
+				let e = P.value + X;
+				L.value = e, R.value = P.value + se, z.value = P.value + ce, V.value = T.dataListId ?? P.value + "-datalist", I(T.message, T.showMessage) && (H.value = e), re();
 			}
 		}, {
 			immediate: !0,
@@ -1384,7 +1393,7 @@ var x = () => {
 		}), y(() => [W.value], () => {
 			if (W.value) {
 				let e = te.value;
-				e || (e = new AbortController(), te.value = e), Ye(W.value, {
+				e || (e = new AbortController(), te.value = e), Ze(W.value, {
 					value: T.value,
 					defaultValue: void 0
 				}, (e) => {
@@ -1402,27 +1411,27 @@ var x = () => {
 			!W.value?.validity.valid || T.validation === "invalid" ? (H.value = z.value, B.value = T.invalidMessage || W.value?.validationMessage || "TODO: Add an invalidMessage", E() && (U.value = B.value, O(() => U.value = "", 1e3))) : ne() && W.value?.validity.valid && (T.required || T.minLength || T.maxLength || T.pattern) ? (H.value = R.value, E() && (U.value = T.validMessage ?? "TODO: Add a validMessage", O(() => U.value = "", 1e3))) : I(T.message, T.showMessage) ? H.value = L.value : H.value = void 0;
 		}
 		function G(e, t) {
-			T.input && T.input(e), ee.value = e.target.value, T.onInput && T.onInput(e), Q(S, e), re();
+			T.input && T.input(e), ee.value = e.target.value, T.onInput && T.onInput(e), Je(S, e), re();
 		}
 		function ie(e, t) {
-			T.onChange && T.onChange(e), Q(S, e), re();
+			T.onChange && T.onChange(e), Je(S, e), re();
 		}
-		function ae(e) {
+		function K(e) {
 			T.onBlur && T.onBlur(e);
 		}
-		function K(e) {
+		function q(e) {
 			T.onFocus && T.onFocus(e);
 		}
-		function oe() {
+		function J() {
 			let e = T.dataList;
 			return Array.from((w(e) ? e?.map((e) => ({
 				value: e,
 				label: void 0
 			})) : e) || []);
 		}
-		function se() {
+		function Y() {
 			let e = T.id ?? T.propOverrides?.id ?? `input-${x}`;
-			P.value = e, L.value = e + q, R.value = e + J, z.value = e + ce, V.value = e + Y;
+			P.value = e, L.value = e + X, R.value = e + se, z.value = e + ce, V.value = e + ue;
 		}
 		return (l, u) => (f(), r("div", {
 			class: c(_(C)("db-input", T.class)),
@@ -1434,7 +1443,7 @@ var x = () => {
 			"data-hide-asterisk": _(F)(s.showRequiredAsterisk),
 			"data-show-icon-trailing": _(k)(s.showIconTrailing, "showIconTrailing")
 		}, [
-			i("label", { for: P.value }, g(s.label ?? _("LABEL SHOULD BE SET")), 9, kt),
+			i("label", { for: P.value }, g(s.label ?? _("LABEL SHOULD BE SET")), 9, jt),
 			i("input", {
 				"aria-invalid": s.validation === "invalid",
 				"data-custom-validity": s.validation,
@@ -1465,8 +1474,8 @@ var x = () => {
 				inputMode: s.inputmode,
 				onInput: u[0] ||= async (e) => G(e),
 				onChange: u[1] ||= async (e) => ie(e),
-				onBlur: u[2] ||= async (e) => ae(e),
-				onFocus: u[3] ||= async (e) => K(e),
+				onBlur: u[2] ||= async (e) => K(e),
+				onFocus: u[3] ||= async (e) => q(e),
 				list: s.dataList && V.value,
 				"aria-describedby": s.ariaDescribedBy ?? H.value,
 				role: [
@@ -1477,14 +1486,14 @@ var x = () => {
 					"month",
 					"color"
 				].includes(s.type ?? "") && _(D)() ? "textbox" : void 0
-			}, null, 40, At),
+			}, null, 40, Mt),
 			s.dataList ? (f(), r("datalist", {
 				key: 0,
 				id: V.value
-			}, [(f(!0), r(e, null, m(oe(), (e) => (f(), r("option", {
+			}, [(f(!0), r(e, null, m(J(), (e) => (f(), r("option", {
 				key: V.value + "-option-" + e.value,
 				value: e.value
-			}, g(e.label), 9, Mt))), 128))], 8, jt)) : n("", !0),
+			}, g(e.label), 9, Pt))), 128))], 8, Nt)) : n("", !0),
 			h(l.$slots, "default"),
 			_(I)(s.message, s.showMessage) ? (f(), t($, {
 				key: 1,
@@ -1516,10 +1525,10 @@ var x = () => {
 				default: b(() => [a(g(B.value), 1)]),
 				_: 1
 			}, 8, ["id", "size"]),
-			i("span", Nt, g(U.value), 1)
-		], 10, Ot));
+			i("span", Ft, g(U.value), 1)
+		], 10, At));
 	}
-}), Ft = [
+}), Lt = [
 	"id",
 	"data-emphasis",
 	"data-wrap",
@@ -1528,7 +1537,7 @@ var x = () => {
 	"data-width",
 	"data-show-arrow",
 	"data-placement"
-], It = /* @__PURE__ */ s({
+], Rt = /* @__PURE__ */ s({
 	name: "DBTooltip",
 	__name: "tooltip",
 	props: {
@@ -1558,7 +1567,7 @@ var x = () => {
 		text: { default: void 0 }
 	},
 	setup(t) {
-		let i = v(), o = t, s = p(G), l = p(!1), m = p(void 0), b = p(void 0), x = p(void 0), S = p(void 0), w = p(void 0), T = p(0), E = p([]), D = p(null);
+		let i = v(), o = t, s = p(void 0), l = p(!1), m = p(void 0), b = p(void 0), x = p(void 0), S = p(void 0), w = p(void 0), T = p(0), E = p([]), D = p(null);
 		u(() => {
 			L(), l.value = !0;
 		}), d(() => {
@@ -1578,7 +1587,7 @@ var x = () => {
 				if (e) {
 					N(e);
 					let t = () => I(e), n = () => F(), r = (e) => j(e);
-					e.addEventListener("mouseenter", t), e.addEventListener("focusin", t), e.addEventListener("keydown", r), e.addEventListener("mouseleave", n), e.addEventListener("focusout", n), E.value = [
+					if (e.addEventListener("mouseenter", t), e.addEventListener("focusin", t), e.addEventListener("keydown", r), e.addEventListener("mouseleave", n), e.addEventListener("focusout", n), E.value = [
 						...E.value ?? [],
 						{
 							parent: e,
@@ -1605,7 +1614,12 @@ var x = () => {
 							type: "focusout",
 							fn: n
 						}
-					], e.dataset.hasTooltip = "true", o.variant === "label" ? e.setAttribute("aria-labelledby", s.value) : e.setAttribute("aria-describedby", s.value), S.value = e, w.value = s.value;
+					], e.dataset.hasTooltip = "true", o.variant === "label") e.setAttribute("aria-labelledby", s.value);
+					else {
+						let t = (e.getAttribute("aria-describedby") || "").split(" ").filter((e) => e !== "");
+						t.includes(s.value) || t.push(s.value), e.setAttribute("aria-describedby", t.join(" "));
+					}
+					S.value = e, w.value = s.value;
 				}
 				l.value = !1;
 			}
@@ -1625,17 +1639,17 @@ var x = () => {
 		}
 		function N(e) {
 			e && D.value && O(() => {
-				D.value && ft(D.value, e);
+				D.value && mt(D.value, e);
 			}, 1);
 		}
 		function P(e, t) {
 			e?.target?.contains && e?.target?.contains(D.value) && N(t);
 		}
 		function F() {
-			T.value = Math.max((T.value ?? 0) - 1, 0), !((T.value ?? 0) > 0) && (m.value &&= (new ot().removeCallback(m.value), void 0), x.value &&= (new _t().unobserve(x.value), void 0), b.value &&= (new gt().unobserve(b.value), void 0));
+			T.value = Math.max((T.value ?? 0) - 1, 0), !((T.value ?? 0) > 0) && (m.value &&= (new ct().removeCallback(m.value), void 0), x.value &&= (new yt().unobserve(x.value), void 0), b.value &&= (new vt().unobserve(b.value), void 0));
 		}
 		function I(e) {
-			T.value = (T.value ?? 0) + 1, T.value === 1 && (m.value = new ot().addCallback((t) => P(t, e)), x.value = new _t().observe(document.documentElement, () => N(e)), b.value = new gt().observe(M(), (e) => {
+			T.value = (T.value ?? 0) + 1, T.value === 1 && (m.value = new ct().addCallback((t) => P(t, e)), x.value = new yt().observe(document.documentElement, () => N(e)), b.value = new vt().observe(M(), (e) => {
 				e.isIntersecting || j(!1);
 			})), N(e);
 		}
@@ -1644,13 +1658,15 @@ var x = () => {
 		}
 		function R() {
 			let e = m.value;
-			e && (new ot().removeCallback(e), m.value = void 0), x.value &&= (new _t().unobserve(x.value), void 0), b.value &&= (new gt().unobserve(b.value), void 0), T.value = 0, (E.value ?? []).forEach((e) => {
+			e && (new ct().removeCallback(e), m.value = void 0), x.value &&= (new yt().unobserve(x.value), void 0), b.value &&= (new vt().unobserve(b.value), void 0), T.value = 0, (E.value ?? []).forEach((e) => {
 				e.parent.removeEventListener(e.type, e.fn);
 			}), E.value = [];
 			let t = S.value;
 			if (t) {
 				let e = w.value ?? s.value, n = t.querySelectorAll(".db-tooltip"), r = Array.from(n).some((e) => e !== D.value);
-				t.dataset.hasTooltip === "true" && !r && delete t.dataset.hasTooltip, t.getAttribute("aria-labelledby") === e && t.removeAttribute("aria-labelledby"), t.getAttribute("aria-describedby") === e && t.removeAttribute("aria-describedby"), S.value = void 0, w.value = void 0;
+				t.dataset.hasTooltip === "true" && !r && delete t.dataset.hasTooltip, t.getAttribute("aria-labelledby") === e && t.removeAttribute("aria-labelledby");
+				let i = t.getAttribute("aria-describedby") || "", a = i.split(" ").filter((t) => t !== "" && t !== e).join(" ");
+				a ? t.setAttribute("aria-describedby", a) : i && t.removeAttribute("aria-describedby"), S.value = void 0, w.value = void 0;
 			}
 		}
 		return (i, l) => (f(), r("i", {
@@ -1669,9 +1685,9 @@ var x = () => {
 			"data-show-arrow": _(k)(t.showArrow ?? !0, "showArrow"),
 			"data-placement": t.placement,
 			onClick: l[0] ||= async (e) => A(e)
-		}, [t.text ? (f(), r(e, { key: 0 }, [a(g(t.text), 1)], 64)) : n("", !0), h(i.$slots, "default")], 10, Ft));
+		}, [t.text ? (f(), r(e, { key: 0 }, [a(g(t.text), 1)], 64)) : n("", !0), h(i.$slots, "default")], 10, Lt));
 	}
-}), Lt = [
+}), zt = [
 	"id",
 	"data-semantic",
 	"data-emphasis",
@@ -1680,7 +1696,7 @@ var x = () => {
 	"data-show-icon",
 	"data-no-text",
 	"data-overflow"
-], Rt = /* @__PURE__ */ s({
+], Bt = /* @__PURE__ */ s({
 	name: "DBTag",
 	__name: "tag",
 	props: {
@@ -1726,7 +1742,7 @@ var x = () => {
 			e && (e.stopPropagation(), i.onRemove && i.onRemove(e));
 		}
 		function u() {
-			return i.removeButton ? i.removeButton : fe;
+			return i.removeButton ? i.removeButton : pe;
 		}
 		return (d, p) => (f(), r("div", {
 			ref_key: "_ref",
@@ -1753,13 +1769,13 @@ var x = () => {
 				"data-variant": "ghost",
 				type: "button",
 				onClick: p[0] ||= async (e) => l(e)
-			}, [o(It, { variant: "label" }, {
+			}, [o(Rt, { variant: "label" }, {
 				default: b(() => [a(g(u()), 1)]),
 				_: 1
 			})])) : n("", !0)
-		], 10, Lt));
+		], 10, zt));
 	}
-}), zt = [
+}), Vt = [
 	"id",
 	"aria-invalid",
 	"data-custom-validity",
@@ -1772,7 +1788,7 @@ var x = () => {
 	"data-hide-label",
 	"data-icon",
 	"data-show-icon"
-], Bt = ["id"], Vt = [
+], Ht = ["id"], Ut = [
 	"id",
 	"form",
 	"name",
@@ -1780,18 +1796,18 @@ var x = () => {
 	"multiple",
 	"disabled",
 	"required"
-], Ht = ["disabled", "value"], Ut = ["open"], Wt = [
+], Wt = ["disabled", "value"], Gt = ["open"], Kt = [
 	"id",
 	"aria-disabled",
 	"tabIndex",
 	"aria-labelledby"
-], Gt = ["data-visually-hidden", "id"], Kt = {
+], qt = ["data-visually-hidden", "id"], Jt = {
 	key: 0,
 	"data-visually-hidden": "true"
-}, qt = { key: 1 }, Jt = { key: 0 }, Yt = { key: 0 }, Xt = { class: "db-checkbox db-custom-select-list-item" }, Zt = ["form", "checked"], Qt = ["id"], $t = {
+}, Yt = { key: 1 }, Xt = { key: 0 }, Zt = { key: 0 }, Qt = { class: "db-checkbox db-custom-select-list-item" }, $t = ["form", "checked"], en = ["id"], tn = {
 	"data-visually-hidden": "true",
 	role: "status"
-}, en = /* @__PURE__ */ s({
+}, nn = /* @__PURE__ */ s({
 	name: "DBCustomSelect",
 	__name: "custom-select",
 	props: {
@@ -1916,32 +1932,32 @@ var x = () => {
 	},
 	emits: ["update:values"],
 	setup(s, { emit: l }) {
-		let x = v(), S = l, w = s, T = p(void 0), D = p(void 0), j = p(void 0), M = p(void 0), N = p(void 0), P = p(void 0), R = p(void 0), z = p(void 0), B = p(void 0), V = p(void 0), H = p("no-validation"), ee = p(!1), U = p(void 0), te = p(void 0), W = p(""), ne = p(void 0), re = p(""), G = p([]), ie = p(!1), ae = p(!1), K = p(0), Y = p([]), ue = p([]), de = p(!1), pe = p(void 0), he = p(0), ge = p(void 0), _e = p(void 0), ve = p(void 0), ye = p(void 0), be = p(!1), xe = p(!1), Se = p(null), X = p(null), Z = p(null), Ce = p(null), we = p(null);
+		let x = v(), S = l, w = s, T = p(void 0), D = p(void 0), j = p(void 0), M = p(void 0), N = p(void 0), P = p(void 0), R = p(void 0), z = p(void 0), B = p(void 0), V = p(void 0), H = p("no-validation"), ee = p(!1), U = p(void 0), te = p(void 0), W = p(""), ne = p(void 0), re = p(""), G = p([]), ie = p(!1), K = p(!1), q = p(0), J = p([]), Y = p([]), ue = p(!1), de = p(void 0), fe = p(0), me = p(void 0), ge = p(void 0), _e = p(void 0), ve = p(void 0), ye = p(!1), be = p(!1), xe = p(null), Z = p(null), Q = p(null), Se = p(null), Ce = p(null);
 		u(() => {
 			Ze(), N.value = w.invalidMessage || "TODO: Add an invalidMessage";
 		}), d(() => {
-			U.value?.abort(), pe.value && new at().removeCallback(pe.value), ge.value && new ot().removeCallback(ge.value), ve.value && new _t().unobserve(ve.value), _e.value && new gt().unobserve(_e.value);
+			U.value?.abort(), de.value && new st().removeCallback(de.value), me.value && new ct().removeCallback(me.value), _e.value && new yt().unobserve(_e.value), ge.value && new vt().unobserve(ge.value);
 		}), y(() => [w.id, w.propOverrides?.id], () => {
 			(w.id ?? w.propOverrides?.id) && Ze();
 		}, {
 			immediate: !0,
 			flush: "post"
-		}), y(() => [X.value], () => {
-			X.value && X.value.addEventListener("focusout", (e) => ze(e));
+		}), y(() => [Z.value], () => {
+			Z.value && Z.value.addEventListener("focusout", (e) => Re(e));
 		}, {
 			immediate: !0,
 			flush: "post"
 		}), y(() => [T.value], () => {
 			if (T.value) {
-				let e = T.value + q;
-				R.value = T.value + oe, P.value = T.value + se, j.value = T.value + J, M.value = T.value + ce, B.value = T.value + le, I(w.message, w.showMessage) ? Ae(e) : Ae();
+				let e = T.value + X;
+				R.value = T.value + ae, P.value = T.value + oe, j.value = T.value + se, M.value = T.value + ce, B.value = T.value + le, I(w.message, w.showMessage) ? ke(e) : ke();
 			}
 		}, {
 			immediate: !0,
 			flush: "post"
-		}), y(() => [X.value, te.value], () => {
-			if (X.value) {
-				let e = X.value.querySelector("summary");
+		}), y(() => [Z.value, te.value], () => {
+			if (Z.value) {
+				let e = Z.value.querySelector("summary");
 				e && e.setAttribute("aria-describedby", w.ariaDescribedBy ?? (te.value || ""));
 			}
 		}, {
@@ -1950,44 +1966,44 @@ var x = () => {
 		}), y(() => [
 			w.showNoResults,
 			w.showLoading,
-			ue.value
+			Y.value
 		], () => {
-			w.showNoResults === void 0 ? ue.value && (de.value = ue.value.length === 0) : de.value = w.showNoResults;
+			w.showNoResults === void 0 ? Y.value && (ue.value = Y.value.length === 0) : ue.value = w.showNoResults;
 		}, {
 			immediate: !0,
 			flush: "post"
 		}), y(() => [
 			w.showSelectAll,
-			K.value,
+			q.value,
 			w.multiple
 		], () => {
-			ie.value = !!(w.multiple && (w.showSelectAll ?? K.value > 5));
+			ie.value = !!(w.multiple && (w.showSelectAll ?? q.value > 5));
 		}, {
 			immediate: !0,
 			flush: "post"
-		}), y(() => [w.showSearch, K.value], () => {
-			ae.value = w.showSearch ?? K.value > 9;
+		}), y(() => [w.showSearch, q.value], () => {
+			K.value = w.showSearch ?? q.value > 9;
 		}, {
 			immediate: !0,
 			flush: "post"
 		}), y(() => [w.values], () => {
 			let e = w.values;
-			Array.isArray(e) ? Y.value !== e && (Y.value = e) : e == null && Y.value?.length !== 0 && (Y.value = []);
+			Array.isArray(e) ? J.value !== e && (J.value = e) : e == null && J.value?.length !== 0 && (J.value = []);
 		}, {
 			immediate: !0,
 			flush: "post"
-		}), y(() => [Y.value, Z.value], () => {
-			Z.value && De();
+		}), y(() => [J.value, Q.value], () => {
+			Q.value && Ee();
 		}, {
 			immediate: !0,
 			flush: "post"
-		}), y(() => [Z.value], () => {
-			if (Z.value) {
+		}), y(() => [Q.value], () => {
+			if (Q.value) {
 				let e = U.value;
 				e || (e = new AbortController(), U.value = e);
 				let t = w.values;
-				qe(Z.value, () => {
-					He(t || (Z.value.value ? [Z.value.value] : [])), De();
+				Ye(Q.value, () => {
+					Be(t || (Q.value.value ? [Q.value.value] : [])), Ee();
 				}, e.signal);
 			}
 		}, {
@@ -1998,26 +2014,26 @@ var x = () => {
 		}, {
 			immediate: !0,
 			flush: "post"
-		}), y(() => [Y.value, K.value], () => {
-			Y.value?.length === 0 ? (be.value = !1, xe.value = !1) : Y.value?.length === K.value ? (xe.value = !1, be.value = !0) : Y.value && (xe.value = !0);
+		}), y(() => [J.value, q.value], () => {
+			J.value?.length === 0 ? (ye.value = !1, be.value = !1) : J.value?.length === q.value ? (be.value = !1, ye.value = !0) : J.value && (be.value = !0);
 		}, {
 			immediate: !0,
 			flush: "post"
 		}), y(() => [w.options], () => {
-			ue.value = w.options, K.value = w.options?.filter((e) => !e.isGroupTitle).length ?? 0, X.value?.open && Ie();
+			Y.value = w.options, q.value = w.options?.filter((e) => !e.isGroupTitle).length ?? 0, Z.value?.open && Fe();
 		}, {
 			immediate: !0,
 			flush: "post"
 		}), y(() => [w.searchValue], () => {
-			if (ye.value = w.searchValue, w.searchValue) {
+			if (ve.value = w.searchValue, w.searchValue) {
 				let e = w.searchValue;
-				Je(e);
+				Ke(e);
 			}
 		}, {
 			immediate: !0,
 			flush: "post"
-		}), y(() => [w.options, Y.value], () => {
-			w.options?.length && (G.value = w.options?.filter((e) => !e.value || !Y.value?.includes ? !1 : !e.isGroupTitle && Y.value?.includes(e.value)));
+		}), y(() => [w.options, J.value], () => {
+			w.options?.length && (G.value = w.options?.filter((e) => !e.value || !J.value?.includes ? !1 : !e.isGroupTitle && J.value?.includes(e.value)));
 		}, {
 			immediate: !0,
 			flush: "post"
@@ -2038,7 +2054,7 @@ var x = () => {
 					W.value = t(e);
 					return;
 				}
-				w.selectedType === "amount" ? W.value = w.amountText ? w.amountText : `${G.value?.length} ${me}` : W.value = G.value?.map((e) => Me(e)).join(", ");
+				w.selectedType === "amount" ? W.value = w.amountText ? w.amountText : `${G.value?.length} ${he}` : W.value = G.value?.map((e) => je(e)).join(", ");
 			} else W.value = "";
 		}, {
 			immediate: !0,
@@ -2048,68 +2064,68 @@ var x = () => {
 		}, {
 			immediate: !0,
 			flush: "post"
-		}), y(() => [xe.value, Ce.value], () => {
-			Ce.value && (Ce.value.indeterminate = !!xe.value);
+		}), y(() => [be.value, Se.value], () => {
+			Se.value && (Se.value.indeterminate = !!be.value);
 		}, {
 			immediate: !0,
 			flush: "post"
-		}), y(() => [Z.value, w.invalidMessage], () => {
-			N.value = w.invalidMessage || Z.value?.validationMessage || "TODO: Add an invalidMessage";
+		}), y(() => [Q.value, w.invalidMessage], () => {
+			N.value = w.invalidMessage || Q.value?.validationMessage || "TODO: Add an invalidMessage";
 		}, {
 			immediate: !0,
 			flush: "post"
 		});
-		function Te(e) {
-			e?.target?.contains && e?.target?.contains(X.value) && Ie();
+		function we(e) {
+			e?.target?.contains && e?.target?.contains(Z.value) && Fe();
 		}
-		function Ee() {
+		function Te() {
 			return !!(w.validMessage ?? w.validation === "valid");
 		}
-		function De() {
-			Z.value && (Z.value.value = ke()), !Z.value?.validity.valid || w.validation === "invalid" ? (Ae(M.value), N.value = w.invalidMessage || Z.value?.validationMessage || "TODO: Add an invalidMessage", E() && (re.value = N.value, O(() => re.value = "", 1e3)), ee.value && (H.value = w.validation ?? "invalid")) : Ee() && Z.value?.validity.valid && w.required ? (Ae(j.value), E() && (re.value = w.validMessage ?? "TODO: Add a validMessage", O(() => re.value = "", 1e3)), H.value = w.validation ?? "valid") : I(w.message, w.showMessage) ? (Ae(D.value), H.value = w.validation ?? "no-validation") : (Ae(B.value), H.value = w.validation ?? "no-validation");
+		function Ee() {
+			Q.value && (Q.value.value = Oe()), !Q.value?.validity.valid || w.validation === "invalid" ? (ke(M.value), N.value = w.invalidMessage || Q.value?.validationMessage || "TODO: Add an invalidMessage", E() && (re.value = N.value, O(() => re.value = "", 1e3)), ee.value && (H.value = w.validation ?? "invalid")) : Te() && Q.value?.validity.valid && w.required ? (ke(j.value), E() && (re.value = w.validMessage ?? "TODO: Add a validMessage", O(() => re.value = "", 1e3)), H.value = w.validation ?? "valid") : I(w.message, w.showMessage) ? (ke(D.value), H.value = w.validation ?? "no-validation") : (ke(B.value), H.value = w.validation ?? "no-validation");
 		}
-		function Oe(e) {
-			w.onDropdownToggle && (e.stopPropagation(), w.onDropdownToggle(e)), e.target instanceof HTMLDetailsElement && e.target.open ? (pe.value = new at().addCallback((e) => Ve(e)), ge.value = new ot().addCallback((e) => Te(e)), Ie(), ve.value = new _t().observe(document.documentElement, () => Ie()), _e.value = new gt().observe(X.value, (e) => {
-				!e.isIntersecting && X.value.open && (X.value.open = !1);
-			}), e.target.dataset.test || Ke()) : (pe.value && new at().removeCallback(pe.value), ge.value && new ot().removeCallback(ge.value), ve.value && new _t().unobserve(ve.value), _e.value && new gt().unobserve(_e.value));
+		function De(e) {
+			w.onDropdownToggle && (e.stopPropagation(), w.onDropdownToggle(e)), e.target instanceof HTMLDetailsElement && e.target.open ? (de.value = new st().addCallback((e) => ze(e)), me.value = new ct().addCallback((e) => we(e)), Fe(), _e.value = new yt().observe(document.documentElement, () => Fe()), ge.value = new vt().observe(Z.value, (e) => {
+				!e.isIntersecting && Z.value.open && (Z.value.open = !1);
+			}), e.target.dataset.test || Ge()) : (de.value && new st().removeCallback(de.value), me.value && new ct().removeCallback(me.value), _e.value && new yt().unobserve(_e.value), ge.value && new vt().unobserve(ge.value));
 		}
-		function ke() {
-			return Y.value?.length ? Y.value.at(0) ?? "" : "";
+		function Oe() {
+			return J.value?.length ? J.value.at(0) ?? "" : "";
 		}
-		function Ae(e) {
+		function ke(e) {
 			let t = [];
 			e && t.push(e), ne.value && W.value?.length && t.push(ne.value), te.value = t.join(" ");
 		}
-		function je() {
+		function Ae() {
 			return w.selectAllLabel ?? "LABEL SHOULD BE SET";
 		}
-		function Me(e) {
+		function je(e) {
 			return e.label ?? e.value?.toString() ?? "";
 		}
-		function Ne(e) {
-			return e && Y.value?.includes ? Y.value?.includes(e) : !1;
+		function Me(e) {
+			return e && J.value?.includes ? J.value?.includes(e) : !1;
 		}
-		function Pe(e) {
+		function Ne(e) {
 			let t = w.removeTagsTexts, n = w.options;
 			if (t && n) {
 				let r = n.findIndex((t) => t.value === e.value);
 				if (r >= 0 && r < t.length) return t[r];
 			}
-			return `${fe} ${Me(e)}`;
+			return `${pe} ${je(e)}`;
 		}
-		function Fe(e, t) {
-			t && t.stopPropagation(), Ue(e.value), Xe();
+		function Pe(e, t) {
+			t && t.stopPropagation(), He(e.value), Xe();
 		}
-		function Ie() {
-			if (X.value) {
-				let e = X.value.querySelector("article");
+		function Fe() {
+			if (Z.value) {
+				let e = Z.value.querySelector("article");
 				e && O(() => {
-					st(e, X.value, w.placement ?? "bottom");
+					lt(e, Z.value, w.placement ?? "bottom");
 				}, 1);
 			}
 		}
-		function Le(e) {
-			if (X.value?.open) {
+		function Ie(e) {
+			if (Z.value?.open) {
 				if (self.document) {
 					let t = self.document.activeElement;
 					if (t) if (t.getAttribute("type") === "checkbox" || t.getAttribute("type") === "radio") {
@@ -2124,7 +2140,7 @@ var x = () => {
 								}
 								e = e.nextElementSibling;
 							}
-							e || Ge(t);
+							e || We(t);
 						} else {
 							let e = n?.previousElementSibling;
 							for (; e;) {
@@ -2136,69 +2152,69 @@ var x = () => {
 								e = e.previousElementSibling;
 							}
 							if (!e) {
-								let e = X.value.querySelector("input[type=\"checkbox\"]");
-								if (e && e !== t) Ge(t);
+								let e = Z.value.querySelector("input[type=\"checkbox\"]");
+								if (e && e !== t) We(t);
 								else {
-									let e = L(X.value);
+									let e = L(Z.value);
 									if (e) O(() => {
 										e.focus();
 									}, 100);
 									else {
-										let e = Array.from(X.value?.querySelectorAll("input[type=\"checkbox\"],input[type=\"radio\"]"));
+										let e = Array.from(Z.value?.querySelectorAll("input[type=\"checkbox\"],input[type=\"radio\"]"));
 										e.length && e.at(-1)?.focus();
 									}
 								}
 							}
 						}
-					} else t.getAttribute("type") === "search" && (e.key === "ArrowUp" || e.key === "ArrowLeft") ? (ze(void 0, !0), Xe()) : Ge(t);
+					} else t.getAttribute("type") === "search" && (e.key === "ArrowUp" || e.key === "ArrowLeft") ? (Re(void 0, !0), Xe()) : We(t);
 				}
-			} else (e.key === "ArrowDown" || e.key === "ArrowRight") && (Ie(), X.value && (X.value.open = !0), Ke());
+			} else (e.key === "ArrowDown" || e.key === "ArrowRight") && (Fe(), Z.value && (Z.value.open = !0), Ge());
 			e.stopPropagation(), e.preventDefault();
 		}
-		function Re(e) {
-			if (e.stopPropagation(), e.key === "Escape" && X.value?.open) ze(void 0, !0), Xe();
-			else if (e.key === "Enter" && X.value?.open) {
+		function Le(e) {
+			if (e.stopPropagation(), e.key === "Escape" && Z.value?.open) Re(void 0, !0), Xe();
+			else if (e.key === "Enter" && Z.value?.open) {
 				if (self.document) {
 					let t = self.document.activeElement;
 					if (["checkbox", "radio"].includes(t.getAttribute("type") || "")) t.click(), e.preventDefault();
 					else if (t.getAttribute("type") === "search") {
-						let t = ue.value?.find((e) => !e.isGroupTitle && !e.disabled);
-						t?.value && (Ue(t.value), e.preventDefault());
+						let t = Y.value?.find((e) => !e.isGroupTitle && !e.disabled);
+						t?.value && (He(t.value), e.preventDefault());
 					}
 				}
-			} else (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft" || e.key === "ArrowRight") && Le(e);
+			} else (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft" || e.key === "ArrowRight") && Ie(e);
 		}
-		function ze(e, t) {
-			if (X.value) {
-				if (t) X.value.open = !1, Xe();
-				else if (X.value.open && e && e.relatedTarget) {
+		function Re(e, t) {
+			if (Z.value) {
+				if (t) Z.value.open = !1, Xe();
+				else if (Z.value.open && e && e.relatedTarget) {
 					let t = e.relatedTarget;
-					!X.value.contains(t) && t.localName !== "dialog" && O(() => X.value.open = !1, 1);
+					!Z.value.contains(t) && t.localName !== "dialog" && O(() => Z.value.open = !1, 1);
 				}
 			}
 		}
-		function Ve(e) {
+		function ze(e) {
 			if (e) {
 				let t = e.target;
-				X.value?.open && !X.value.contains(t) && (X.value.open = !1);
+				Z.value?.open && !Z.value.contains(t) && (Z.value.open = !1);
 			}
 		}
+		function Be(e) {
+			(/* @__PURE__ */ new Date()).getTime() - fe.value < 200 || (J.value = e, ee.value = !0, w.onOptionSelected && w.onOptionSelected(e ?? []), Je(S, { target: { values: e } }, "values"), fe.value = (/* @__PURE__ */ new Date()).getTime());
+		}
 		function He(e) {
-			(/* @__PURE__ */ new Date()).getTime() - he.value < 200 || (Y.value = e, ee.value = !0, w.onOptionSelected && w.onOptionSelected(e ?? []), Q(S, { target: { values: e } }, "values"), he.value = (/* @__PURE__ */ new Date()).getTime());
+			e && (w.multiple ? J.value?.includes(e) ? Be(J.value.filter((t) => t !== e)) : Be([...J.value || [], e]) : (Be([e]), Re(void 0, !0)));
 		}
 		function Ue(e) {
-			e && (w.multiple ? Y.value?.includes(e) ? He(Y.value.filter((t) => t !== e)) : He([...Y.value || [], e]) : (He([e]), ze(void 0, !0)));
-		}
-		function We(e) {
-			if (e.stopPropagation(), Y.value?.length === K.value) He([]);
+			if (e.stopPropagation(), J.value?.length === q.value) Be([]);
 			else {
-				let e = ae.value && we.value ? we.value.value : void 0;
-				He(w.options ? w.options.filter((t) => !t.isGroupTitle && (!e || t.value?.toLowerCase().includes(e.toLowerCase()))).map((e) => e.value ?? "") : []);
+				let e = K.value && Ce.value ? Ce.value.value : void 0;
+				Be(w.options ? w.options.filter((t) => !t.isGroupTitle && (!e || t.value?.toLowerCase().includes(e.toLowerCase()))).map((e) => e.value ?? "") : []);
 			}
 		}
-		function Ge(e) {
-			if (X.value) {
-				let t = Array.from(X.value.querySelectorAll("input[type=\"checkbox\"],input[type=\"radio\"]"));
+		function We(e) {
+			if (Z.value) {
+				let t = Array.from(Z.value.querySelectorAll("input[type=\"checkbox\"],input[type=\"radio\"]"));
 				if (t.length) {
 					let n = t.at(0), r = n === e && t.length > 1 ? t.at(1) : n;
 					r && O(() => {
@@ -2207,33 +2223,33 @@ var x = () => {
 				}
 			}
 		}
-		function Ke() {
-			if (X.value) {
-				let e = L(X.value);
+		function Ge() {
+			if (Z.value) {
+				let e = L(Z.value);
 				e ? O(() => {
 					e.focus();
-				}, 1) : Ge();
+				}, 1) : We();
 			}
 		}
-		function Je(e) {
+		function Ke(e) {
 			if (e === void 0) return;
 			let t;
 			if (typeof e == "string") t = e;
 			else {
 				let n = e;
-				n.stopPropagation(), w.onSearch && w.onSearch(n), t = n.target.value, ye.value = t;
+				n.stopPropagation(), w.onSearch && w.onSearch(n), t = n.target.value, ve.value = t;
 			}
-			!w.options || !t || t.length === 0 ? ue.value = w.options : w.searchFilter ? ue.value = w.options.filter((e) => w.searchFilter(e, t)) : ue.value = w.options.filter((e) => !e.isGroupTitle && Me(e).toLowerCase().includes(t.toLowerCase())), X.value?.open && Ie();
+			!w.options || !t || t.length === 0 ? Y.value = w.options : w.searchFilter ? Y.value = w.options.filter((e) => w.searchFilter(e, t)) : Y.value = w.options.filter((e) => !e.isGroupTitle && je(e).toLowerCase().includes(t.toLowerCase())), Z.value?.open && Fe();
 		}
-		function Ye(e) {
-			e.stopPropagation(), He([]), Xe();
+		function qe(e) {
+			e.stopPropagation(), Be([]), Xe();
 		}
 		function Xe() {
-			X.value && X.value.querySelector("summary")?.focus();
+			Z.value && Z.value.querySelector("summary")?.focus();
 		}
 		function Ze() {
 			let e = w.id ?? w.propOverrides?.id ?? `custom-select-${x}`;
-			T.value = e, D.value = e + q, j.value = e + J, M.value = e + ce, P.value = e + se, R.value = e + oe, z.value = e + "-summary", B.value = e + le, ne.value = e + "-selected-labels", V.value = e + "-info";
+			T.value = e, D.value = e + X, j.value = e + se, M.value = e + ce, P.value = e + oe, R.value = e + ae, z.value = e + "-summary", B.value = e + le, ne.value = e + "-selected-labels", V.value = e + "-info";
 		}
 		function Qe(e) {
 			e.stopPropagation();
@@ -2241,7 +2257,7 @@ var x = () => {
 		return (l, u) => (f(), r("div", {
 			id: T.value,
 			ref_key: "_ref",
-			ref: Se,
+			ref: xe,
 			class: c(_(C)("db-custom-select", w.class)),
 			"aria-invalid": H.value === "invalid",
 			"data-custom-validity": H.value,
@@ -2261,7 +2277,7 @@ var x = () => {
 				id: P.value,
 				tabIndex: -1,
 				ref_key: "selectRef",
-				ref: Z,
+				ref: Q,
 				form: s.form,
 				name: s.name,
 				"data-custom-validity": H.value,
@@ -2273,13 +2289,13 @@ var x = () => {
 				key: t,
 				disabled: e.disabled,
 				value: e.value
-			}, g(Me(e)), 9, Ht))), 128)) : n("", !0)], 40, Vt)], 8, Bt),
+			}, g(je(e)), 9, Wt))), 128)) : n("", !0)], 40, Ut)], 8, Ht),
 			i("details", {
 				ref_key: "detailsRef",
-				ref: X,
+				ref: Z,
 				open: s.open,
-				onToggle: u[2] ||= async (e) => Oe(e),
-				onKeydown: u[3] ||= async (e) => Re(e)
+				onToggle: u[2] ||= async (e) => De(e),
+				onKeydown: u[3] ||= async (e) => Le(e)
 			}, [h(l.$slots, "default"), s.options ? (f(), r(e, { key: 0 }, [i("summary", {
 				class: "db-custom-select-form-field",
 				id: z.value,
@@ -2290,29 +2306,29 @@ var x = () => {
 				key: 0,
 				"data-visually-hidden": _(k)(s.selectedType === "tag", "selectedType"),
 				id: ne.value
-			}, [s.selectedPrefix ? (f(), r("span", Kt, g(s.selectedPrefix), 1)) : n("", !0), a(" " + g(W.value), 1)], 8, Gt)) : n("", !0), s.selectedType === "tag" ? (f(), r("div", qt, [(f(!0), r(e, null, m(G.value, (e, n) => (f(), t(Rt, {
+			}, [s.selectedPrefix ? (f(), r("span", Jt, g(s.selectedPrefix), 1)) : n("", !0), a(" " + g(W.value), 1)], 8, qt)) : n("", !0), s.selectedType === "tag" ? (f(), r("div", Yt, [(f(!0), r(e, null, m(G.value, (e, n) => (f(), t(Bt, {
 				key: n,
 				emphasis: "strong",
 				behavior: "removable",
-				removeButton: Pe(e),
-				onRemove: (t) => Fe(e, t)
+				removeButton: Ne(e),
+				onRemove: (t) => Pe(e, t)
 			}, {
-				default: b(() => [a(g(Me(e)), 1)]),
+				default: b(() => [a(g(je(e)), 1)]),
 				_: 2
-			}, 1032, ["removeButton", "onRemove"]))), 128))])) : n("", !0)], 8, Wt), o(yt, { width: s.dropdownWidth }, {
+			}, 1032, ["removeButton", "onRemove"]))), 128))])) : n("", !0)], 8, Kt), o(xt, { width: s.dropdownWidth }, {
 				default: b(() => [
-					ae.value ? (f(), r("div", Jt, [o(Pt, {
+					K.value ? (f(), r("div", Xt, [o(It, {
 						type: "search",
 						ref_key: "searchInputRef",
-						ref: we,
+						ref: Ce,
 						name: T.value,
 						form: T.value,
 						showLabel: !1,
-						value: ye.value,
+						value: ve.value,
 						label: s.searchLabel ?? _("LABEL SHOULD BE SET"),
 						placeholder: s.searchPlaceholder ?? s.searchLabel,
-						ariaDescribedBy: de.value || s.showLoading ? V.value : void 0,
-						onInput: (e) => Je(e)
+						ariaDescribedBy: ue.value || s.showLoading ? V.value : void 0,
+						onInput: (e) => Ke(e)
 					}, null, 8, [
 						"name",
 						"form",
@@ -2322,7 +2338,7 @@ var x = () => {
 						"ariaDescribedBy",
 						"onInput"
 					])])) : n("", !0),
-					de.value || s.showLoading ? (f(), t($, {
+					ue.value || s.showLoading ? (f(), t($, {
 						key: 1,
 						id: V.value,
 						icon: s.showLoading ? "circular_arrows" : void 0,
@@ -2334,32 +2350,32 @@ var x = () => {
 						"id",
 						"icon",
 						"semantic"
-					])) : (f(), r(e, { key: 2 }, [ie.value ? (f(), r("div", Yt, [i("div", Xt, [i("label", null, [i("input", {
+					])) : (f(), r(e, { key: 2 }, [ie.value ? (f(), r("div", Zt, [i("div", Qt, [i("label", null, [i("input", {
 						type: "checkbox",
 						value: "select-all",
 						ref_key: "selectAllRef",
-						ref: Ce,
+						ref: Se,
 						form: T.value,
-						checked: be.value,
-						onChange: u[1] ||= async (e) => We(e)
-					}, null, 40, Zt), a(g(je()), 1)])])])) : n("", !0), o(Dt, {
+						checked: ye.value,
+						onChange: u[1] ||= async (e) => Ue(e)
+					}, null, 40, $t), a(g(Ae()), 1)])])])) : n("", !0), o(kt, {
 						multiple: _(A)(s.multiple, "multiple"),
 						label: s.listLabel ?? s.label ?? _("LABEL SHOULD BE SET")
 					}, {
-						default: b(() => [(f(!0), r(e, null, m(ue.value, (i, o) => (f(), t(Tt, {
+						default: b(() => [(f(!0), r(e, null, m(Y.value, (i, o) => (f(), t(Dt, {
 							key: o,
 							type: s.multiple ? "checkbox" : "radio",
 							showDivider: i.showDivider,
 							icon: i.icon,
 							isGroupTitle: i.isGroupTitle,
-							groupTitle: Me(i),
+							groupTitle: je(i),
 							name: T.value,
-							checked: Ne(i.value),
+							checked: Me(i.value),
 							disabled: i.disabled,
 							value: i.value,
-							onChange: (e) => Ue(i.value)
+							onChange: (e) => He(i.value)
 						}, {
-							default: b(() => [i.isGroupTitle ? n("", !0) : (f(), r(e, { key: 0 }, [a(g(Me(i)), 1)], 64))]),
+							default: b(() => [i.isGroupTitle ? n("", !0) : (f(), r(e, { key: 0 }, [a(g(je(i)), 1)], 64))]),
 							_: 2
 						}, 1032, [
 							"type",
@@ -2375,14 +2391,14 @@ var x = () => {
 						]))), 128))]),
 						_: 1
 					}, 8, ["multiple", "label"])], 64)),
-					i("div", null, [o(Be, {
+					i("div", null, [o(Ve, {
 						variant: "ghost",
 						width: "full",
 						icon: "cross",
 						size: "small",
 						name: T.value,
 						form: T.value,
-						onClick: (e) => ze(void 0, !0)
+						onClick: (e) => Re(void 0, !0)
 					}, {
 						default: b(() => [a(g(s.mobileCloseButtonText ?? _("Close")), 1)]),
 						_: 1
@@ -2393,8 +2409,8 @@ var x = () => {
 					])])
 				]),
 				_: 1
-			}, 8, ["width"])], 64)) : n("", !0)], 40, Ut),
-			(s.showClearSelection ?? !0) && Y.value?.length ? (f(), t(Be, {
+			}, 8, ["width"])], 64)) : n("", !0)], 40, Gt),
+			(s.showClearSelection ?? !0) && J.value?.length ? (f(), t(Ve, {
 				key: 0,
 				icon: "cross",
 				variant: "ghost",
@@ -2403,9 +2419,9 @@ var x = () => {
 				name: T.value,
 				form: T.value,
 				disabled: _(A)(s.disabled, "disabled"),
-				onClick: (e) => Ye(e)
+				onClick: (e) => qe(e)
 			}, {
-				default: b(() => [a(g(s.clearSelectionText), 1), o(It, { placement: "top" }, {
+				default: b(() => [a(g(s.clearSelectionText), 1), o(Rt, { placement: "top" }, {
 					default: b(() => [a(g(s.clearSelectionText), 1)]),
 					_: 1
 				})]),
@@ -2420,7 +2436,7 @@ var x = () => {
 				class: "db-custom-select-placeholder",
 				"aria-hidden": "true",
 				id: B.value
-			}, g(s.placeholder ?? s.label), 9, Qt),
+			}, g(s.placeholder ?? s.label), 9, en),
 			_(I)(s.message, s.showMessage) ? (f(), t($, {
 				key: 1,
 				size: "small",
@@ -2430,7 +2446,7 @@ var x = () => {
 				default: b(() => [a(g(s.message), 1)]),
 				_: 1
 			}, 8, ["icon", "id"])) : n("", !0),
-			Ee() ? (f(), t($, {
+			Te() ? (f(), t($, {
 				key: 2,
 				size: "small",
 				semantic: "successful",
@@ -2447,14 +2463,14 @@ var x = () => {
 				default: b(() => [a(g(N.value), 1)]),
 				_: 1
 			}, 8, ["id"]),
-			i("span", $t, g(re.value), 1)
-		], 10, zt));
+			i("span", tn, g(re.value), 1)
+		], 10, Vt));
 	}
-}), tn = [
+}), rn = [
 	"fixed",
 	"auto",
 	"full"
-], nn = ["id"], rn = /* @__PURE__ */ s({
+], an = ["id"], on = /* @__PURE__ */ s({
 	name: "DBCustomSelectFormField",
 	__name: "custom-select-form-field",
 	props: {
@@ -2472,19 +2488,19 @@ var x = () => {
 			ref: n,
 			id: e.id ?? e.propOverrides?.id,
 			class: c(_(C)("db-custom-select-form-field", t.class))
-		}, [h(i.$slots, "default")], 10, nn));
+		}, [h(i.$slots, "default")], 10, an));
 	}
-}), an = ["checkbox", "radio"], on = [
+}), sn = ["checkbox", "radio"], cn = [
 	"amount",
 	"text",
 	"tag"
-], sn = [
+], ln = [
 	"id",
 	"data-margin",
 	"data-variant",
 	"data-emphasis",
 	"data-width"
-], cn = /* @__PURE__ */ s({
+], un = /* @__PURE__ */ s({
 	name: "DBDivider",
 	__name: "divider",
 	props: {
@@ -2510,26 +2526,31 @@ var x = () => {
 			"data-emphasis": e.emphasis,
 			"data-width": e.width,
 			class: c(_(C)("db-divider", t.class))
-		}, null, 10, sn));
+		}, null, 10, ln));
 	}
-}), ln = ["none", "_"], un = ["horizontal", "vertical"], dn = [
+}), dn = ["none", "_"], fn = ["horizontal", "vertical"], pn = [
 	"id",
 	"data-position",
 	"data-backdrop",
 	"data-direction",
 	"data-variant"
-], fn = [
-	"data-spacing",
-	"data-width",
+], mn = [
+	"data-container-size",
+	"data-show-spacing",
 	"data-direction",
 	"data-rounded"
-], pn = { class: "db-drawer-header" }, mn = { class: "db-drawer-header-text" }, hn = { class: "db-drawer-content" }, gn = /* @__PURE__ */ s({
+], hn = { class: "db-drawer-content" }, gn = /* @__PURE__ */ s({
 	name: "DBDrawer",
 	__name: "drawer",
 	props: {
 		backdrop: { default: void 0 },
 		direction: { default: void 0 },
-		drawerHeader: {},
+		header: {},
+		footer: {},
+		showSpacing: {
+			type: [Boolean, String],
+			default: void 0
+		},
 		open: {
 			type: [Boolean, String],
 			default: void 0
@@ -2540,6 +2561,7 @@ var x = () => {
 		},
 		variant: { default: void 0 },
 		position: { default: void 0 },
+		containerSize: { default: void 0 },
 		children: { default: void 0 },
 		className: { default: void 0 },
 		class: {},
@@ -2550,28 +2572,29 @@ var x = () => {
 			type: Function,
 			default: void 0
 		},
-		close: {},
-		closeButtonId: { default: void 0 },
-		closeButtonText: { default: void 0 },
-		width: { default: void 0 },
-		spacing: { default: void 0 }
+		close: {}
 	},
 	setup(e) {
-		let t = e, n = p(!1), s = p(!1), l = p(null), d = p(null);
+		let t = e, n = p(!1), a = p(!1), o = p(void 0), s = p(null), l = p(null);
 		u(() => {
-			S(), n.value = !0;
+			b(), n.value = !0;
+		}), d(() => {
+			if (o.value !== void 0 && clearTimeout(o.value), s.value && t.position === "absolute") {
+				let e = s.value.parentElement;
+				e && (e.style.position = "");
+			}
 		}), y(() => [t.open], () => {
-			S();
+			b();
 		}, {
 			immediate: !0,
 			flush: "post"
 		}), y(() => [
-			l.value,
+			s.value,
 			n.value,
 			t.position
 		], () => {
-			if (l.value && n.value && t.position === "absolute") {
-				let e = l.value.parentElement;
+			if (s.value && n.value && t.position === "absolute") {
+				let e = s.value.parentElement;
 				e && (e.style.position = "relative");
 			}
 		}, {
@@ -2581,68 +2604,162 @@ var x = () => {
 		function m() {
 			return t.position === "absolute" || t.backdrop === "none" || t.variant === "inside";
 		}
-		function v(e) {
-			s.value = e?.target?.nodeName === "DIALOG";
+		function g(e) {
+			a.value = e?.target?.nodeName === "DIALOG";
 		}
-		function x(e, n) {
-			e && (B(e) ? e.key === "Escape" && (e.preventDefault(), t.onClose && t.onClose(e)) : (n && (e.stopPropagation(), t.onClose && t.onClose(e)), e.target?.nodeName === "DIALOG" && e.type === "click" && t.backdrop !== "none" && s.value && t.onClose && t.onClose(e), s.value = !1));
+		function v(e, n) {
+			if (e) if (B(e)) e.key === "Escape" && (e.preventDefault(), t.onClose && t.onClose(e));
+			else {
+				n && (e.stopPropagation(), t.onClose && t.onClose(e));
+				let r = e.target?.nodeName === "DIALOG" && e.type === "click" && t.backdrop !== "none" && a.value, i = !!e.target?.closest?.("[data-action=\"close\"]");
+				(r || i) && t.onClose && t.onClose(e), a.value = !1;
+			}
 		}
-		function S() {
-			if (l.value) {
+		function b() {
+			if (s.value) {
 				let e = A(t.open, "open");
-				e && !l.value.open && (d.value && d.value.removeAttribute("data-transition"), m() ? l.value.show() : (l.value.setAttribute("closedby", "any"), l.value.showModal()), O(() => {
-					d.value && (d.value.dataset.transition = "open");
-				}, 1)), !e && l.value.open && (d.value && (d.value.dataset.transition = "close"), O(() => {
-					l.value?.close();
-				}, 401));
+				if (e && o.value !== void 0 && (clearTimeout(o.value), o.value = void 0, l.value && (l.value.dataset.transition = "open")), e && !s.value.open && (l.value && l.value.removeAttribute("data-transition"), m() ? s.value.show() : s.value.showModal(), O(() => {
+					l.value && (l.value.dataset.transition = "open");
+				}, 1)), !e && s.value.open) {
+					l.value && (l.value.dataset.transition = "close"), o.value !== void 0 && clearTimeout(o.value);
+					let e = 0;
+					if (l.value) {
+						let t = getComputedStyle(l.value).getPropertyValue("--db-drawer-close-delay").trim(), n = parseFloat(t);
+						n > 0 && (e = n * 1e3 + 1);
+					}
+					o.value = window.setTimeout(() => {
+						s.value?.close(), o.value = void 0;
+					}, e);
+				}
 			}
 		}
-		return (n, s) => (f(), r("dialog", {
+		return (n, a) => (f(), r("dialog", {
 			class: "db-drawer",
 			id: e.id ?? e.propOverrides?.id,
 			ref_key: "_ref",
-			ref: l,
-			onClick: s[0] ||= async (e) => x(e),
-			onMousedown: s[1] ||= async (e) => v(e),
-			onKeydown: s[2] ||= async (e) => x(e),
+			ref: s,
+			onClick: a[0] ||= async (e) => v(e),
+			onMousedown: a[1] ||= async (e) => g(e),
+			onKeydown: a[2] ||= async (e) => v(e),
 			"data-position": e.position,
 			"data-backdrop": e.backdrop,
 			"data-direction": e.direction,
 			"data-variant": e.variant
 		}, [i("article", {
 			ref_key: "dialogContainerRef",
-			ref: d,
+			ref: l,
 			class: c(_(C)("db-drawer-container", t.class)),
-			"data-spacing": e.spacing,
-			"data-width": e.width,
+			"data-container-size": e.containerSize,
+			"data-show-spacing": _(k)(e.showSpacing ?? !0, "showSpacing"),
 			"data-direction": e.direction,
 			"data-rounded": _(k)(e.rounded, "rounded")
-		}, [i("header", pn, [i("div", mn, [h(n.$slots, "drawer-header")]), o(Be, {
-			class: "button-close-drawer",
-			icon: "cross",
-			variant: "ghost",
-			id: e.closeButtonId,
-			noText: !0,
-			onClick: (e) => x(e, !0)
-		}, {
-			default: b(() => [a(g(e.closeButtonText ?? _("Close")), 1)]),
-			_: 1
-		}, 8, ["id", "onClick"])]), i("div", hn, [h(n.$slots, "default")])], 10, fn)], 40, dn));
+		}, [
+			h(n.$slots, "header"),
+			i("div", hn, [h(n.$slots, "default")]),
+			h(n.$slots, "footer")
+		], 10, mn)], 40, pn));
+	}
+}), _n = ["id"], vn = /* @__PURE__ */ s({
+	name: "DBDrawerFooter",
+	__name: "drawer-footer",
+	props: {
+		children: { default: void 0 },
+		className: { default: void 0 },
+		class: {},
+		id: { default: void 0 },
+		autofocus: { type: [Boolean, String] },
+		propOverrides: { default: void 0 }
+	},
+	setup(e) {
+		let t = e, n = p(null);
+		return (i, a) => (f(), r("footer", {
+			ref_key: "_ref",
+			ref: n,
+			id: e.id ?? e.propOverrides?.id,
+			class: c(_(C)("db-drawer-footer", t.class))
+		}, [h(i.$slots, "default")], 10, _n));
+	}
+}), yn = ["id"], bn = ["id"], xn = { key: 0 }, Sn = /* @__PURE__ */ s({
+	name: "DBDrawerHeader",
+	__name: "drawer-header",
+	props: {
+		closeButtonId: { default: void 0 },
+		closeButtonText: { default: xe },
+		text: { default: void 0 },
+		children: { default: void 0 },
+		className: { default: void 0 },
+		class: {},
+		id: { default: void 0 },
+		autofocus: { type: [Boolean, String] },
+		propOverrides: { default: void 0 },
+		startSlot: {},
+		endSlot: {}
+	},
+	setup(e) {
+		let t = v(), n = e, s = p("db-drawer-header-heading-" + t), l = p(null);
+		u(() => {
+			m();
+		}), d(() => {
+			y();
+		});
+		function m() {
+			if (l.value) {
+				let e = l.value.closest("dialog");
+				e && e.setAttribute("aria-labelledby", s.value);
+			}
+		}
+		function y() {
+			if (l.value) {
+				let e = l.value.closest("dialog");
+				e && e.getAttribute("aria-labelledby") === s.value && e.removeAttribute("aria-labelledby");
+			}
+		}
+		return (t, u) => (f(), r("div", {
+			ref_key: "_ref",
+			ref: l,
+			id: e.id ?? e.propOverrides?.id,
+			class: c(_(C)("db-drawer-header", n.class))
+		}, [
+			i("header", {
+				class: "db-drawer-header-container",
+				id: s.value
+			}, [h(t.$slots, "start-slot"), e.text ? (f(), r("h2", xn, g(e.text), 1)) : h(t.$slots, "default", { key: 1 })], 8, bn),
+			h(t.$slots, "end-slot"),
+			o(Ve, {
+				"data-action": "close",
+				icon: "cross",
+				variant: "ghost",
+				type: "button",
+				id: e.closeButtonId,
+				noText: !0
+			}, {
+				default: b(() => [a(g(e.closeButtonText), 1), o(Rt, null, {
+					default: b(() => [a(g(e.closeButtonText), 1)]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["id"])
+		], 10, yn));
 	}
-}), _n = [
+}), Cn = [
 	"none",
 	"strong",
 	"weak",
 	"invisible"
-], vn = [
-	"left",
-	"right",
+], wn = [
+	"to-left",
+	"to-right",
 	"up",
 	"down"
-], yn = ["modal", "inside"], bn = ["fixed", "absolute"], xn = (e) => {
+], Tn = ["modal", "inside"], En = ["fixed", "absolute"], Dn = [
+	"small",
+	"medium",
+	"large",
+	"full"
+], On = (e) => {
 	let { target: t } = e;
 	return !!(!t?.classList?.contains("db-navigation-item-expand-button") && t?.parentElement?.classList.contains("db-navigation-item"));
-}, Sn = class {
+}, kn = class {
 	element;
 	subNavigation;
 	parentSubNavigation = null;
@@ -2659,7 +2776,7 @@ var x = () => {
 	}
 	enableFollow() {
 		if (!this.initialized || this.triangleData || !this.element || !this.subNavigation) return;
-		let e = pt(this.subNavigation), t = this.element.getBoundingClientRect(), n = this.parentSubNavigation?.getBoundingClientRect().width ?? 0;
+		let e = ht(this.subNavigation), t = this.element.getBoundingClientRect(), n = this.parentSubNavigation?.getBoundingClientRect().width ?? 0;
 		this.triangleData = {
 			itemRect: t,
 			parentElementWidth: n,
@@ -2710,11 +2827,11 @@ var x = () => {
 		let t = this.hasMouseEnteredSubNavigation(), n = this.getTriangleCoordinates(t ? "fill-gap" : "safe-triangle");
 		n && (this.element.style.setProperty("--db-navigation-item-clip-path", `polygon(${n.lb}, ${n.lt}, ${n.rt}, ${n.rb})`), t && (this.triangleData = void 0));
 	}
-}, Cn = [
+}, An = [
 	"id",
 	"data-width",
 	"data-on-forcing-mobile"
-], wn = { class: "db-header-meta-navigation" }, Tn = { class: "db-header-navigation-bar" }, En = { class: "db-header-brand-container" }, Dn = { class: "db-header-navigation-container" }, On = { class: "db-header-navigation" }, kn = { class: "db-header-primary-action" }, An = { class: "db-header-action-container" }, jn = { class: "db-header-burger-menu-container" }, Mn = { class: "db-header-secondary-action" }, Nn = { class: "db-header-drawer-navigation" }, Pn = { class: "db-header-meta-navigation" }, Fn = { class: "db-header-secondary-action" }, In = /* @__PURE__ */ s({
+], jn = { class: "db-header-meta-navigation" }, Mn = { class: "db-header-navigation-bar" }, Nn = { class: "db-header-brand-container" }, Pn = { class: "db-header-navigation-container" }, Fn = { class: "db-header-navigation" }, In = { class: "db-header-primary-action" }, Ln = { class: "db-header-action-container" }, Rn = { class: "db-header-burger-menu-container" }, zn = { class: "db-header-secondary-action" }, Bn = { class: "db-header-drawer-navigation" }, Vn = { class: "db-header-meta-navigation" }, Hn = { class: "db-header-secondary-action" }, Un = /* @__PURE__ */ s({
 	name: "DBHeader",
 	__name: "header",
 	props: {
@@ -2730,6 +2847,7 @@ var x = () => {
 			type: [Boolean, String],
 			default: void 0
 		},
+		drawerHeaderText: { default: void 0 },
 		burgerMenuLabel: { default: void 0 },
 		closeButtonId: { default: void 0 },
 		closeButtonText: { default: void 0 },
@@ -2765,7 +2883,7 @@ var x = () => {
 			t.onToggle && t.onToggle(n);
 		}
 		function m(e) {
-			xn(e) && d();
+			On(e) && d();
 		}
 		return (n, u) => (f(), r("header", {
 			ref_key: "_ref",
@@ -2775,11 +2893,11 @@ var x = () => {
 			"data-width": e.width,
 			"data-on-forcing-mobile": e.forceMobile && !s.value
 		}, [
-			i("div", wn, [h(n.$slots, "meta-navigation")]),
-			i("div", Tn, [
-				i("div", En, [h(n.$slots, "brand")]),
-				i("div", Dn, [i("div", On, [h(n.$slots, "default")]), i("div", kn, [h(n.$slots, "primary-action")])]),
-				i("div", An, [i("div", jn, [o(Be, {
+			i("div", jn, [h(n.$slots, "meta-navigation")]),
+			i("div", Mn, [
+				i("div", Nn, [h(n.$slots, "brand")]),
+				i("div", Pn, [i("div", Fn, [h(n.$slots, "default")]), i("div", In, [h(n.$slots, "primary-action")])]),
+				i("div", Ln, [i("div", Rn, [o(Ve, {
 					icon: "menu",
 					variant: "ghost",
 					noText: !0,
@@ -2787,36 +2905,40 @@ var x = () => {
 				}, {
 					default: b(() => [a(g(e.burgerMenuLabel ?? _("Open navigation menu")), 1)]),
 					_: 1
-				}, 8, ["onClick"])]), i("div", Mn, [h(n.$slots, "secondary-action")])])
+				}, 8, ["onClick"])]), i("div", zn, [h(n.$slots, "secondary-action")])])
 			]),
 			o(gn, {
-				class: "db-header-drawer",
-				spacing: "small",
 				rounded: !0,
-				closeButtonId: e.closeButtonId,
-				closeButtonText: e.closeButtonText,
 				open: _(A)(e.drawerOpen),
 				onClose: (e) => d()
 			}, {
-				default: b(() => [i("div", Nn, [i("div", {
+				header: b(() => [o(Sn, {
+					closeButtonId: e.closeButtonId,
+					closeButtonText: e.closeButtonText,
+					text: e.drawerHeaderText
+				}, null, 8, [
+					"closeButtonId",
+					"closeButtonText",
+					"text"
+				])]),
+				footer: b(() => [o(vn, null, {
+					default: b(() => [i("div", Hn, [h(n.$slots, "secondary-action")])]),
+					_: 3
+				})]),
+				default: b(() => [i("div", Bn, [i("div", {
 					class: "db-header-navigation",
 					onClick: u[0] ||= async (e) => m(e)
-				}, [h(n.$slots, "default")]), i("div", Pn, [h(n.$slots, "meta-navigation")])]), i("div", Fn, [h(n.$slots, "secondary-action")])]),
+				}, [h(n.$slots, "default")]), i("div", Vn, [h(n.$slots, "meta-navigation")])])]),
 				_: 3
-			}, 8, [
-				"closeButtonId",
-				"closeButtonText",
-				"open",
-				"onClose"
-			])
-		], 10, Cn));
+			}, 8, ["open", "onClose"])
+		], 10, An));
 	}
-}), Ln = [
+}), Wn = [
 	"id",
 	"data-icon",
 	"data-icon-weight",
 	"data-icon-variant"
-], Rn = /* @__PURE__ */ s({
+], Gn = /* @__PURE__ */ s({
 	name: "DBIcon",
 	__name: "icon",
 	props: {
@@ -2842,16 +2964,16 @@ var x = () => {
 			"data-icon": t.icon,
 			"data-icon-weight": t.weight,
 			"data-icon-variant": t.variant
-		}, [t.text ? (f(), r(e, { key: 0 }, [a(g(t.text), 1)], 64)) : n("", !0), h(s.$slots, "default")], 10, Ln));
+		}, [t.text ? (f(), r(e, { key: 0 }, [a(g(t.text), 1)], 64)) : n("", !0), h(s.$slots, "default")], 10, Wn));
 	}
-}), zn = [
+}), Kn = [
 	"16",
 	"20",
 	"24",
 	"32",
 	"48",
 	"64"
-], Bn = [
+], qn = [
 	"color",
 	"date",
 	"datetime-local",
@@ -2868,7 +2990,7 @@ var x = () => {
 	"time",
 	"url",
 	"week"
-], Vn = [
+], Jn = [
 	"id",
 	"href",
 	"target",
@@ -2883,7 +3005,7 @@ var x = () => {
 	"data-variant",
 	"data-content",
 	"data-wrap"
-], Hn = /* @__PURE__ */ s({
+], Yn = /* @__PURE__ */ s({
 	name: "DBLink",
 	__name: "link",
 	props: {
@@ -2946,13 +3068,13 @@ var x = () => {
 			"data-content": t.content || "internal",
 			"data-wrap": _(k)(t.wrap, "wrap"),
 			onClick: u[0] ||= async (e) => s(e)
-		}, [t.text ? (f(), r(e, { key: 0 }, [a(g(t.text), 1)], 64)) : n("", !0), h(l.$slots, "default")], 10, Vn));
+		}, [t.text ? (f(), r(e, { key: 0 }, [a(g(t.text), 1)], 64)) : n("", !0), h(l.$slots, "default")], 10, Jn));
 	}
-}), Un = [
+}), Xn = [
 	"adaptive",
 	"brand",
 	"inline"
-], Wn = ["medium", "small"], Gn = ["external", "internal"], Kn = ["id"], qn = /* @__PURE__ */ s({
+], Zn = ["medium", "small"], Qn = ["external", "internal"], $n = ["id"], er = /* @__PURE__ */ s({
 	name: "DBNavigation",
 	__name: "navigation",
 	props: {
@@ -2970,9 +3092,9 @@ var x = () => {
 			ref: n,
 			id: e.id ?? e.propOverrides?.id,
 			class: c(_(C)("db-navigation", t.class))
-		}, [i("menu", null, [h(a.$slots, "default")])], 10, Kn));
+		}, [i("menu", null, [h(a.$slots, "default")])], 10, $n));
 	}
-}), Jn = [
+}), tr = [
 	"id",
 	"data-width",
 	"data-icon",
@@ -2980,20 +3102,20 @@ var x = () => {
 	"data-active",
 	"data-wrap",
 	"aria-disabled"
-], Yn = [
+], nr = [
 	"id",
 	"aria-haspopup",
 	"aria-expanded",
 	"aria-controls",
 	"disabled"
-], Xn = [
+], rr = [
 	"id",
 	"aria-labelledby",
 	"data-force-close"
-], Zn = {
+], ir = {
 	key: 0,
 	class: "db-mobile-navigation-back"
-}, Qn = /* @__PURE__ */ s({
+}, ar = /* @__PURE__ */ s({
 	name: "DBNavigationItem",
 	__name: "navigation-item",
 	props: {
@@ -3053,7 +3175,7 @@ var x = () => {
 		}), y(() => [d.value, j.value], () => {
 			if (d.value && j.value) {
 				let e = j.value.querySelector("menu");
-				e && (e.children?.length > 0 ? (m.value = !0, T.value ||= new Sn(j.value, e)) : x.value = !1);
+				e && (e.children?.length > 0 ? (m.value = !0, T.value ||= new kn(j.value, e)) : x.value = !1);
 			}
 		}, {
 			immediate: !0,
@@ -3081,7 +3203,7 @@ var x = () => {
 			"data-width": t.width,
 			"data-icon": t.icon,
 			"data-show-icon": _(k)(t.showIcon, "showIcon"),
-			"data-active": t.active,
+			"data-active": _(A)(t.active, "active"),
 			"data-wrap": _(k)(t.wrap, "wrap"),
 			"aria-disabled": _(k)(t.disabled, "disabled")
 		}, [!_(A)(t.hideSubNavigation, "hideSubNavigation") && x.value ? (f(), r(e, { key: 0 }, [i("button", {
@@ -3092,13 +3214,13 @@ var x = () => {
 			"aria-controls": E.value,
 			disabled: _(A)(t.disabled, "disabled"),
 			onClick: u[0] ||= async (e) => N(e)
-		}, [t.text ? (f(), r(e, { key: 0 }, [a(g(t.text), 1)], 64)) : h(s.$slots, "default", { key: 1 })], 8, Yn), i("menu", {
+		}, [t.text ? (f(), r(e, { key: 0 }, [a(g(t.text), 1)], 64)) : h(s.$slots, "default", { key: 1 })], 8, nr), i("menu", {
 			class: "db-sub-navigation",
 			id: E.value,
 			"aria-labelledby": D.value,
 			"data-force-close": w.value,
 			onClick: u[1] ||= async (e) => M(e)
-		}, [m.value ? (f(), r("div", Zn, [o(Be, {
+		}, [m.value ? (f(), r("div", ir, [o(Ve, {
 			icon: "arrow_left",
 			variant: "ghost",
 			id: t.backButtonId,
@@ -3106,9 +3228,9 @@ var x = () => {
 		}, {
 			default: b(() => [a(g(t.backButtonText ?? _("Back")), 1)]),
 			_: 1
-		}, 8, ["id", "onClick"])])) : n("", !0), h(s.$slots, "sub-navigation")], 8, Xn)], 64)) : (f(), r(e, { key: 1 }, [t.text ? (f(), r(e, { key: 0 }, [a(g(t.text), 1)], 64)) : h(s.$slots, "default", { key: 1 })], 64))], 42, Jn));
+		}, 8, ["id", "onClick"])])) : n("", !0), h(s.$slots, "sub-navigation")], 8, rr)], 64)) : (f(), r(e, { key: 1 }, [t.text ? (f(), r(e, { key: 0 }, [a(g(t.text), 1)], 64)) : h(s.$slots, "default", { key: 1 })], 64))], 42, tr));
 	}
-}), $n = [
+}), or = [
 	"id",
 	"role",
 	"aria-live",
@@ -3117,10 +3239,10 @@ var x = () => {
 	"data-icon",
 	"data-show-icon",
 	"data-link-variant"
-], er = {
+], sr = {
 	key: 0,
 	"data-area": "head"
-}, tr = { "data-area": "content" }, nr = ["dateTime"], rr = /* @__PURE__ */ s({
+}, cr = { "data-area": "content" }, lr = ["dateTime"], ur = /* @__PURE__ */ s({
 	name: "DBNotification",
 	__name: "notification",
 	props: {
@@ -3189,15 +3311,15 @@ var x = () => {
 			"data-link-variant": o.linkVariant
 		}, [
 			h(d.$slots, "image"),
-			_(I)(o.headline, o.showHeadline) ? (f(), r("header", er, g(o.headline), 1)) : n("", !0),
-			i("div", tr, [o.text ? (f(), r(e, { key: 0 }, [a(g(o.text), 1)], 64)) : n("", !0), h(d.$slots, "default")]),
+			_(I)(o.headline, o.showHeadline) ? (f(), r("header", sr, g(o.headline), 1)) : n("", !0),
+			i("div", cr, [o.text ? (f(), r(e, { key: 0 }, [a(g(o.text), 1)], 64)) : n("", !0), h(d.$slots, "default")]),
 			_(I)(o.timestamp, o.showTimestamp) ? (f(), r("time", {
 				key: 1,
 				"data-area": "timestamp",
 				dateTime: o.timestampDatetime
-			}, g(o.timestamp), 9, nr)) : n("", !0),
+			}, g(o.timestamp), 9, lr)) : n("", !0),
 			h(d.$slots, "link"),
-			_(A)(o.closeable, "closeable") ? (f(), t(Be, {
+			_(A)(o.closeable, "closeable") ? (f(), t(Ve, {
 				key: 2,
 				icon: "cross",
 				variant: "ghost",
@@ -3209,22 +3331,22 @@ var x = () => {
 				default: b(() => [a(g(o.closeButtonText ?? _("Close")), 1)]),
 				_: 1
 			}, 8, ["id", "onClick"])) : n("", !0)
-		], 10, $n));
+		], 10, or));
 	}
-}), ir = [
+}), dr = [
 	"docked",
 	"standalone",
 	"overlay"
-], ar = ["block", "inline"], or = [
+], fr = ["block", "inline"], pr = [
 	"assertive",
 	"polite",
 	"off"
-], sr = [
+], mr = [
 	"id",
 	"data-variant",
 	"data-fade-in",
 	"data-fonts-loaded"
-], cr = /* @__PURE__ */ s({
+], hr = /* @__PURE__ */ s({
 	name: "DBPage",
 	__name: "page",
 	props: {
@@ -3264,9 +3386,9 @@ var x = () => {
 			h(o.$slots, "header"),
 			i("main", { class: c(_(C)("db-main", e.mainClass)) }, [h(o.$slots, "default")], 2),
 			h(o.$slots, "footer")
-		], 10, sr));
+		], 10, mr));
 	}
-}), lr = ["auto", "fixed"], ur = ["hidden", "auto"], dr = ["id"], fr = [
+}), gr = ["auto", "fixed"], _r = ["hidden", "auto"], vr = ["id"], yr = [
 	"data-spacing",
 	"data-gap",
 	"data-animation",
@@ -3274,7 +3396,7 @@ var x = () => {
 	"data-delay",
 	"data-width",
 	"data-placement"
-], pr = /* @__PURE__ */ s({
+], br = /* @__PURE__ */ s({
 	name: "DBPopover",
 	__name: "popover",
 	props: {
@@ -3307,7 +3429,7 @@ var x = () => {
 		u(() => {
 			n.value = !0;
 		}), d(() => {
-			o.value &&= (new ot().removeCallback(o.value), void 0), l.value &&= (new _t().unobserve(l.value), void 0), s.value &&= (new gt().unobserve(s.value), void 0);
+			o.value &&= (new ct().removeCallback(o.value), void 0), l.value &&= (new yt().unobserve(l.value), void 0), s.value &&= (new vt().unobserve(s.value), void 0);
 		}), y(() => [m.value, n.value], () => {
 			if (m.value && n.value) {
 				n.value = !1;
@@ -3337,22 +3459,22 @@ var x = () => {
 			if (!m.value) return;
 			let e = m.value.querySelector("article");
 			e && O(() => {
-				ft(e, m.value);
+				mt(e, m.value);
 			}, 1);
 		}
 		function b(e) {
 			e?.target?.contains && e?.target?.contains(m.value) && v();
 		}
 		function x() {
-			a.value = !0, o.value &&= (new ot().removeCallback(o.value), void 0), l.value &&= (new _t().unobserve(l.value), void 0), s.value &&= (new gt().unobserve(s.value), void 0), o.value = new ot().addCallback((e) => b(e)), v(), l.value = new _t().observe(document.documentElement, () => v());
+			a.value = !0, o.value &&= (new ct().removeCallback(o.value), void 0), l.value &&= (new yt().unobserve(l.value), void 0), s.value &&= (new vt().unobserve(s.value), void 0), o.value = new ct().addCallback((e) => b(e)), v(), l.value = new yt().observe(document.documentElement, () => v());
 			let e = w();
-			e && (s.value = new gt().observe(e, (e) => {
+			e && (s.value = new vt().observe(e, (e) => {
 				e.isIntersecting || g(!1);
 			}));
 		}
 		function S(e) {
 			let t = e?.target;
-			(!t?.parentNode || t.parentNode.querySelector(":focus") !== t && t.parentNode.querySelector(":focus-within") !== t && t.parentNode.querySelector(":hover") !== t) && (a.value = !1, o.value &&= (new ot().removeCallback(o.value), void 0), l.value &&= (new _t().unobserve(l.value), void 0), s.value &&= (new gt().unobserve(s.value), void 0));
+			(!t?.parentNode || t.parentNode.querySelector(":focus") !== t && t.parentNode.querySelector(":focus-within") !== t && t.parentNode.querySelector(":hover") !== t) && (a.value = !1, o.value &&= (new ct().removeCallback(o.value), void 0), l.value &&= (new yt().unobserve(l.value), void 0), s.value &&= (new vt().unobserve(s.value), void 0));
 		}
 		function w() {
 			if (m.value) {
@@ -3378,14 +3500,14 @@ var x = () => {
 			"data-delay": e.delay,
 			"data-width": e.width,
 			"data-placement": e.placement
-		}, [h(n.$slots, "default")], 8, fr)], 10, dr));
+		}, [h(n.$slots, "default")], 8, yr)], 10, vr));
 	}
-}), mr = [
+}), xr = [
 	"data-size",
 	"data-hide-label",
 	"data-hide-asterisk",
 	"for"
-], hr = [
+], Sr = [
 	"aria-invalid",
 	"data-custom-validity",
 	"id",
@@ -3394,7 +3516,7 @@ var x = () => {
 	"disabled",
 	"value",
 	"required"
-], gr = /* @__PURE__ */ s({
+], Cr = /* @__PURE__ */ s({
 	name: "DBRadio",
 	__name: "radio",
 	props: {
@@ -3479,7 +3601,7 @@ var x = () => {
 		}), y(() => [w.value], () => {
 			if (w.value) {
 				let e = S.value;
-				e || (e = new AbortController(), S.value = e), qe(w.value, (e) => {
+				e || (e = new AbortController(), S.value = e), Ye(w.value, (e) => {
 					O(() => {
 						let t = m.checked ? m.checked : w.value.checked, n = {
 							...e,
@@ -3498,10 +3620,10 @@ var x = () => {
 			flush: "post"
 		});
 		function T(e, t) {
-			m.input && m.input(e), m.onInput && m.onInput(e), Q(l, e);
+			m.input && m.input(e), m.onInput && m.onInput(e), Je(l, e);
 		}
 		function E(e, t) {
-			m.onChange && m.onChange(e), Q(l, e);
+			m.onChange && m.onChange(e), Je(l, e);
 		}
 		function D(e) {
 			m.onBlur && m.onBlur(e);
@@ -3535,16 +3657,16 @@ var x = () => {
 				onChange: s[1] ||= async (e) => E(e),
 				onBlur: s[2] ||= async (e) => D(e),
 				onFocus: s[3] ||= async (e) => k(e)
-			}, null, 40, hr),
+			}, null, 40, Sr),
 			t.label ? (f(), r(e, { key: 0 }, [a(g(t.label), 1)], 64)) : n("", !0),
 			h(o.$slots, "default")
-		], 10, mr));
+		], 10, xr));
 	}
-}), _r = [
+}), wr = [
 	"id",
 	"data-spacing",
 	"data-width"
-], vr = /* @__PURE__ */ s({
+], Tr = /* @__PURE__ */ s({
 	name: "DBSection",
 	__name: "section",
 	props: {
@@ -3566,15 +3688,15 @@ var x = () => {
 			class: c(_(C)("db-section", t.class)),
 			"data-spacing": e.spacing || "medium",
 			"data-width": e.width
-		}, [h(i.$slots, "default")], 10, _r));
+		}, [h(i.$slots, "default")], 10, wr));
 	}
-}), yr = [
+}), Er = [
 	"data-variant",
 	"data-hide-label",
 	"data-hide-asterisk",
 	"data-icon",
 	"data-show-icon"
-], br = ["for"], xr = [
+], Dr = ["for"], Or = [
 	"aria-invalid",
 	"data-custom-validity",
 	"required",
@@ -3586,18 +3708,18 @@ var x = () => {
 	"autocomplete",
 	"multiple",
 	"aria-describedby"
-], Sr = ["data-show-empty-option"], Cr = ["label"], wr = [
+], kr = ["data-show-empty-option"], Ar = ["label"], jr = [
 	"value",
 	"selected",
 	"disabled"
-], Tr = [
+], Mr = [
 	"value",
 	"disabled",
 	"selected"
-], Er = ["id"], Dr = {
+], Nr = ["id"], Pr = {
 	"data-visually-hidden": "true",
 	role: "status"
-}, Or = /* @__PURE__ */ s({
+}, Fr = /* @__PURE__ */ s({
 	name: "DBSelect",
 	__name: "select",
 	props: {
@@ -3688,11 +3810,11 @@ var x = () => {
 	setup(s, { emit: l }) {
 		let x = v(), S = l, w = s, T = p(void 0), D = p(void 0), j = p(void 0), M = p(void 0), N = p(void 0), P = p(""), L = p(void 0), R = p(""), z = p(!1), B = p(""), V = p(void 0), H = p(null);
 		u(() => {
-			z.value = !0, K(), N.value = w.invalidMessage || "TODO: Add an invalidMessage";
+			z.value = !0, q(), N.value = w.invalidMessage || "TODO: Add an invalidMessage";
 		}), d(() => {
 			V.value?.abort();
 		}), y(() => [w.id, w.propOverrides?.id], () => {
-			(w.id ?? w.propOverrides?.id) && K();
+			(w.id ?? w.propOverrides?.id) && q();
 		}, {
 			immediate: !0,
 			flush: "post"
@@ -3703,8 +3825,8 @@ var x = () => {
 			flush: "post"
 		}), y(() => [T.value, z.value], () => {
 			if (T.value && z.value) {
-				let e = T.value + q, t = T.value + le;
-				D.value = e, j.value = T.value + J, M.value = T.value + ce, P.value = t, I(w.message, w.showMessage) ? L.value = e : w.placeholder ? L.value = t : L.value = void 0, U(), z.value = !1;
+				let e = T.value + X, t = T.value + le;
+				D.value = e, j.value = T.value + se, M.value = T.value + ce, P.value = t, I(w.message, w.showMessage) ? L.value = e : w.placeholder ? L.value = t : L.value = void 0, U(), z.value = !1;
 			}
 		}, {
 			immediate: !0,
@@ -3717,7 +3839,7 @@ var x = () => {
 		}), y(() => [H.value], () => {
 			if (H.value) {
 				let e = V.value;
-				e || (e = new AbortController(), V.value = e), Ye(H.value, {
+				e || (e = new AbortController(), V.value = e), Ze(H.value, {
 					value: w.value,
 					defaultValue: void 0
 				}, (e) => {
@@ -3738,10 +3860,10 @@ var x = () => {
 			w.onClick && w.onClick(e);
 		}
 		function W(e, t) {
-			w.input && w.input(e), R.value = e.target.value, w.onInput && w.onInput(e), Q(S, e), U();
+			w.input && w.input(e), R.value = e.target.value, w.onInput && w.onInput(e), Je(S, e), U();
 		}
 		function ne(e, t) {
-			w.onChange && w.onChange(e), Q(S, e), U();
+			w.onChange && w.onChange(e), Je(S, e), U();
 		}
 		function re(e) {
 			w.onBlur && w.onBlur(e);
@@ -3752,12 +3874,12 @@ var x = () => {
 		function ie(e) {
 			return e.label ?? e.value?.toString();
 		}
-		function ae() {
+		function K() {
 			return w.variant === "floating" || w.placeholder ? w.showEmptyOption === void 0 ? !w.required : w.showEmptyOption : !1;
 		}
-		function K() {
+		function q() {
 			let e = w.id ?? w.propOverrides?.id ?? `select-${x}`;
-			T.value = e, D.value = e + q, j.value = e + J, M.value = e + ce, P.value = e + le;
+			T.value = e, D.value = e + X, j.value = e + se, M.value = e + ce, P.value = e + le;
 		}
 		return (l, u) => (f(), r("div", {
 			class: c(_(C)("db-select", w.class)),
@@ -3767,7 +3889,7 @@ var x = () => {
 			"data-icon": s.icon,
 			"data-show-icon": _(k)(s.showIcon, "showIcon")
 		}, [
-			i("label", { for: T.value }, g(s.label ?? _("LABEL SHOULD BE SET")), 9, br),
+			i("label", { for: T.value }, g(s.label ?? _("LABEL SHOULD BE SET")), 9, Dr),
 			i("select", {
 				"aria-invalid": s.validation === "invalid",
 				"data-custom-validity": s.validation,
@@ -3791,8 +3913,8 @@ var x = () => {
 				key: 0,
 				class: "placeholder",
 				value: "",
-				"data-show-empty-option": _(k)(ae(), "showEmptyOption")
-			}, null, 8, Sr)) : n("", !0), s.options?.length ? (f(!0), r(e, { key: 1 }, m(s.options, (t, n) => (f(), r(e, { key: n }, [t.options ? (f(), r("optgroup", {
+				"data-show-empty-option": _(k)(K(), "showEmptyOption")
+			}, null, 8, kr)) : n("", !0), s.options?.length ? (f(!0), r(e, { key: 1 }, m(s.options, (t, n) => (f(), r(e, { key: n }, [t.options ? (f(), r("optgroup", {
 				key: 0,
 				label: ie(t)
 			}, [(f(!0), r(e, null, m(t.options, (e, t) => (f(), r("option", {
@@ -3800,17 +3922,17 @@ var x = () => {
 				value: e.value,
 				selected: e.selected,
 				disabled: e.disabled
-			}, g(ie(e)), 9, wr))), 128))], 8, Cr)) : (f(), r("option", {
+			}, g(ie(e)), 9, jr))), 128))], 8, Ar)) : (f(), r("option", {
 				key: 1,
 				value: t.value,
 				disabled: t.disabled,
 				selected: t.selected
-			}, g(ie(t)), 9, Tr))], 64))), 128)) : h(l.$slots, "default", { key: 2 })], 40, xr),
+			}, g(ie(t)), 9, Mr))], 64))), 128)) : h(l.$slots, "default", { key: 2 })], 40, Or),
 			s.placeholder ? (f(), r("span", {
 				key: 0,
 				class: "db-select-placeholder",
 				id: P.value
-			}, g(s.placeholder), 9, Er)) : n("", !0),
+			}, g(s.placeholder), 9, Nr)) : n("", !0),
 			_(I)(s.message, s.showMessage) ? (f(), t($, {
 				key: 1,
 				size: "small",
@@ -3837,10 +3959,10 @@ var x = () => {
 				default: b(() => [a(g(N.value), 1)]),
 				_: 1
 			}, 8, ["id"]),
-			i("span", Dr, g(B.value), 1)
-		], 10, yr));
+			i("span", Pr, g(B.value), 1)
+		], 10, Er));
 	}
-}), kr = [
+}), Ir = [
 	"id",
 	"data-gap",
 	"data-variant",
@@ -3848,7 +3970,7 @@ var x = () => {
 	"data-alignment",
 	"data-justify-content",
 	"data-wrap"
-], Ar = /* @__PURE__ */ s({
+], Lr = /* @__PURE__ */ s({
 	name: "DBStack",
 	__name: "stack",
 	props: {
@@ -3881,26 +4003,26 @@ var x = () => {
 			"data-alignment": e.alignment,
 			"data-justify-content": e.justifyContent,
 			"data-wrap": _(k)(e.wrap, "wrap")
-		}, [h(i.$slots, "default")], 10, kr));
+		}, [h(i.$slots, "default")], 10, Ir));
 	}
-}), jr = ["simple", "divider"], Mr = ["row", "column"], Nr = [
+}), Rr = ["simple", "divider"], zr = ["row", "column"], Br = [
 	"stretch",
 	"start",
 	"end",
 	"center"
-], Pr = [
+], Vr = [
 	"space-between",
 	"start",
-	"end",
-	"center"
-], Fr = [
+	"center",
+	"end"
+], Hr = [
 	"data-visual-aid",
 	"data-size",
 	"data-hide-label",
 	"data-variant",
 	"data-hide-asterisk",
 	"data-custom-validity"
-], Ir = ["for"], Lr = [
+], Ur = ["for"], Wr = [
 	"id",
 	"checked",
 	"value",
@@ -3911,10 +4033,10 @@ var x = () => {
 	"required",
 	"data-aid-icon",
 	"data-aid-icon-trailing"
-], Rr = {
+], Gr = {
 	"data-visually-hidden": "true",
 	role: "status"
-}, zr = /* @__PURE__ */ s({
+}, Kr = /* @__PURE__ */ s({
 	name: "DBSwitch",
 	__name: "switch",
 	props: {
@@ -4018,7 +4140,7 @@ var x = () => {
 		}), y(() => [R.value], () => {
 			if (R.value) {
 				let e = L.value;
-				e || (e = new AbortController(), L.value = e), Je(R.value, {
+				e || (e = new AbortController(), L.value = e), Xe(R.value, {
 					checked: S.checked,
 					defaultChecked: void 0
 				}, (e) => {
@@ -4052,7 +4174,7 @@ var x = () => {
 			N.value = void 0;
 		}
 		function V(e, t) {
-			S.onChange && S.onChange(e), B(), Q(x, e, "checked");
+			S.onChange && S.onChange(e), B(), Je(x, e, "checked");
 		}
 		function H(e) {
 			S.onBlur && S.onBlur(e);
@@ -4065,7 +4187,7 @@ var x = () => {
 		}
 		function te() {
 			let e = S.id ?? S.propOverrides?.id ?? `switch-${m}`;
-			w.value = e, T.value = `${e}${q}`, D.value = `${e}${J}`, j.value = `${e}${ce}`;
+			w.value = e, T.value = `${e}${X}`, D.value = `${e}${se}`, j.value = `${e}${ce}`;
 		}
 		return (l, u) => (f(), r("div", {
 			"data-visual-aid": _(k)(s.visualAid, "visualAid"),
@@ -4096,10 +4218,10 @@ var x = () => {
 					onBlur: u[1] ||= async (e) => H(e),
 					onFocus: u[2] ||= async (e) => ee(e),
 					onKeydown: u[3] ||= async (e) => U(e)
-				}, null, 40, Lr),
+				}, null, 40, Wr),
 				s.label ? (f(), r(e, { key: 0 }, [a(g(s.label), 1)], 64)) : n("", !0),
 				h(l.$slots, "default")
-			], 8, Ir),
+			], 8, Ur),
 			_(I)(s.message, s.showMessage) ? (f(), t($, {
 				key: 0,
 				size: "small",
@@ -4127,127 +4249,161 @@ var x = () => {
 				default: b(() => [a(g(M.value), 1)]),
 				_: 1
 			}, 8, ["id"]),
-			i("span", Rr, g(P.value), 1)
-		], 10, Fr));
+			i("span", Gr, g(P.value), 1)
+		], 10, Hr));
 	}
-}), Br = [
-	"for",
-	"data-icon",
-	"data-icon-trailing",
-	"data-show-icon",
-	"data-show-icon-trailing",
-	"data-no-text"
-], Vr = [
+}), qr = [
 	"disabled",
 	"aria-selected",
-	"checked",
-	"name",
-	"id"
-], Hr = /* @__PURE__ */ s({
+	"focusgroupstart",
+	"data-value"
+], Jr = [
+	"data-icon",
+	"data-show-icon",
+	"data-icon-trailing",
+	"data-show-icon-trailing"
+], Yr = { class: "db-tab-item-label-end-slot" }, Xr = /* @__PURE__ */ s({
 	name: "DBTabItem",
 	__name: "tab-item",
 	props: {
-		children: { default: void 0 },
-		className: { default: void 0 },
-		class: {},
-		id: { default: void 0 },
-		autofocus: { type: [Boolean, String] },
-		propOverrides: { default: void 0 },
-		checked: {
-			type: [Boolean, String],
-			default: void 0
-		},
 		disabled: {
 			type: [Boolean, String],
 			default: void 0
 		},
 		label: { default: void 0 },
-		noText: {
+		tabIndex: {},
+		value: { default: void 0 },
+		children: { default: void 0 },
+		className: { default: void 0 },
+		class: {},
+		autofocus: { type: [Boolean, String] },
+		icon: { default: void 0 },
+		showIcon: {
 			type: [Boolean, String],
 			default: void 0
 		},
-		icon: { default: void 0 },
 		iconTrailing: { default: void 0 },
 		iconLeading: { default: void 0 },
-		showIconLeading: {
-			type: [Boolean, String],
-			default: void 0
-		},
 		showIconTrailing: {
 			type: [Boolean, String],
 			default: void 0
 		},
-		active: {
+		showIconLeading: {
 			type: [Boolean, String],
 			default: void 0
 		},
-		change: {},
-		onChange: {
-			type: Function,
-			default: void 0
-		},
-		showIcon: {
+		active: {
 			type: [Boolean, String],
 			default: void 0
 		},
-		name: { default: void 0 }
+		width: {},
+		endSlot: {}
 	},
-	emits: ["update:checked"],
-	setup(t, { emit: o }) {
-		let s = o, l = t, m = p(!1), v = p(void 0), b = p(!1), x = p(!1), S = p(void 0), w = p(null);
+	setup(o) {
+		let s = o, l = p(!1), m = p(!1), v = p(""), x = p(null), S = p(null), w = p(null), T = p(!1), E = p(null), D = p(null);
 		u(() => {
-			S.value = T, b.value = !0;
+			l.value = !0;
 		}), d(() => {
-			x.value && w.value && S.value && (w.value.closest("[role=tablist]")?.removeEventListener("change", S.value), x.value = !1);
+			T.value = !0;
+			let e = w.value;
+			e !== null && (cancelAnimationFrame(e), w.value = null), x.value?.disconnect(), S.value?.disconnect();
+		}), y(() => [D.value, l.value], () => {
+			if (typeof window < "u" && D.value && l.value && !x.value) {
+				let e = () => {
+					w.value = requestAnimationFrame(() => {
+						if (w.value = null, !T.value) {
+							if (j(), D.value && !x.value) {
+								let e = new ResizeObserver(() => {
+									requestAnimationFrame(() => {
+										T.value || j();
+									});
+								});
+								e.observe(D.value), x.value = e;
+							}
+							if (D.value && !S.value) {
+								let e = new MutationObserver(() => {
+									requestAnimationFrame(() => {
+										T.value || j();
+									});
+								});
+								e.observe(D.value, {
+									childList: !0,
+									subtree: !0,
+									characterData: !0
+								}), S.value = e;
+							}
+						}
+					});
+				};
+				(s.iconLeading ?? s.icon ?? s.iconTrailing) && document.fonts?.ready ? document.fonts.ready.then(() => {
+					T.value || e();
+				}) : e();
+			}
+		}, {
+			immediate: !0,
+			flush: "post"
 		}), y(() => [
-			w.value,
-			b.value,
-			S.value
+			s.label,
+			l.value,
+			D.value
 		], () => {
-			w.value && b.value && S.value && (b.value = !1, x.value ||= (w.value.closest("[role=tablist]")?.addEventListener("change", S.value), !0), (l.active || w.value.checked) && (m.value = !0, w.value.click()));
+			D.value && l.value && j();
 		}, {
 			immediate: !0,
 			flush: "post"
-		}), y(() => [l.name], () => {
-			l.name && (v.value = l.name);
+		}), y(() => [E.value, m.value], () => {
+			E.value && !m.value && O();
 		}, {
 			immediate: !0,
 			flush: "post"
 		});
-		function T(e) {
-			e.stopPropagation(), m.value = e.target === w.value;
+		function O() {
+			if (!E.value || !E.value.hasAttribute("data-has-tooltip")) return;
+			E.value.removeAttribute("data-has-tooltip");
+			let e = E.value.querySelector(".db-tooltip");
+			if (!e || !e.id) return;
+			let t = (E.value.getAttribute("aria-describedby") || "").split(" ").filter((t) => t !== "" && t !== e.id).join(" ");
+			t ? E.value.setAttribute("aria-describedby", t) : E.value.removeAttribute("aria-describedby");
 		}
-		function E(e) {
-			l.onChange && l.onChange(e), Q(s, e, "checked");
+		function j() {
+			if (D.value) {
+				let e = Math.ceil(D.value.scrollWidth) > Math.ceil(D.value.clientWidth) + 1;
+				m.value !== e && (m.value = e, e ? E.value && E.value.setAttribute("title", "") : (O(), E.value && E.value.getAttribute("title") === "" && E.value.removeAttribute("title"))), v.value = e && (s.label || D.value.innerText || D.value.textContent) || "";
+			}
 		}
-		return (o, s) => (f(), r("li", {
-			role: "none",
-			class: c(_(C)("db-tab-item", l.class))
-		}, [i("label", {
-			for: t.id ?? t.propOverrides?.id,
-			"data-icon": t.iconLeading ?? t.icon,
-			"data-icon-trailing": t.iconTrailing,
-			"data-show-icon": _(k)(t.showIconLeading, "showIconLeading") || _(k)(t.showIcon, "showIcon"),
-			"data-show-icon-trailing": _(k)(t.showIconTrailing, "showIconTrailing"),
-			"data-no-text": _(k)(t.noText, "noText")
-		}, [
-			i("input", {
-				type: "radio",
-				role: "tab",
-				disabled: _(A)(t.disabled, "disabled"),
-				"aria-selected": m.value,
-				checked: _(A)(t.checked, "checked"),
-				ref_key: "_ref",
-				ref: w,
-				name: v.value,
-				id: t.id ?? t.propOverrides?.id,
-				onInput: s[0] ||= async (e) => E(e)
-			}, null, 40, Vr),
-			t.label ? (f(), r(e, { key: 0 }, [a(g(t.label), 1)], 64)) : n("", !0),
-			h(o.$slots, "default")
-		], 8, Br)], 2));
+		return (l, u) => (f(), r("button", {
+			type: "button",
+			role: "tab",
+			ref_key: "_ref",
+			ref: E,
+			class: c(_(C)("db-tab-item", s.class)),
+			disabled: _(A)(o.disabled, "disabled") ? !0 : void 0,
+			"aria-selected": _(k)(o.active, "active"),
+			focusgroupstart: _(A)(o.active, "active") ? "" : void 0,
+			"data-value": o.value
+		}, [i("span", {
+			class: "db-tab-item-label",
+			"data-icon": o.iconLeading ?? o.icon,
+			"data-show-icon": _(k)(o.showIconLeading, "showIconLeading") || _(k)(o.showIcon, "showIcon"),
+			"data-icon-trailing": o.iconTrailing,
+			"data-show-icon-trailing": _(k)(o.showIconTrailing, "showIconTrailing")
+		}, [i("span", {
+			class: "db-tab-item-label-text",
+			ref_key: "_labelRef",
+			ref: D
+		}, [o.label ? (f(), r(e, { key: 0 }, [a(g(o.label), 1)], 64)) : n("", !0), h(l.$slots, "default")], 512), i("span", Yr, [h(l.$slots, "end-slot")])], 8, Jr), m.value && v.value ? (f(), t(Rt, {
+			key: 0,
+			placement: "top"
+		}, {
+			default: b(() => [a(g(v.value), 1)]),
+			_: 1
+		})) : n("", !0)], 10, qr));
 	}
-}), Ur = ["id"], Wr = { role: "tablist" }, Gr = /* @__PURE__ */ s({
+}), Zr = [
+	"id",
+	"aria-orientation",
+	"focusgroup"
+], Qr = /* @__PURE__ */ s({
 	name: "DBTabList",
 	__name: "tab-list",
 	props: {
@@ -4256,47 +4412,53 @@ var x = () => {
 		class: {},
 		id: { default: void 0 },
 		autofocus: { type: [Boolean, String] },
-		propOverrides: { default: void 0 }
+		propOverrides: { default: void 0 },
+		orientation: { default: void 0 }
 	},
 	setup(e) {
-		let t = e, n = p(null);
-		return (a, o) => (f(), r("div", {
+		let t = v(), n = e, i = p(void 0), a = p(null);
+		return u(() => {
+			i.value = n.id || n.propOverrides?.id || "tab-list-" + t;
+		}), (t, o) => (f(), r("div", {
+			role: "tablist",
 			ref_key: "_ref",
-			ref: n,
-			id: e.id ?? e.propOverrides?.id,
-			class: c(_(C)("db-tab-list", t.class))
-		}, [i("ul", Wr, [h(a.$slots, "default")])], 10, Ur));
+			ref: a,
+			id: e.id ?? e.propOverrides?.id ?? i.value,
+			class: c(_(C)("db-tab-list", n.class)),
+			"aria-orientation": e.orientation ?? "horizontal",
+			focusgroup: e.orientation === "vertical" ? "tablist block wrap" : "tablist"
+		}, [h(t.$slots, "default")], 10, Zr));
 	}
-}), Kr = ["id"], qr = /* @__PURE__ */ s({
+}), $r = ["hidden"], ei = /* @__PURE__ */ s({
 	name: "DBTabPanel",
 	__name: "tab-panel",
 	props: {
-		content: { default: void 0 },
-		children: { default: void 0 },
-		className: { default: void 0 },
+		content: {},
+		hidden: { type: Boolean },
+		children: {},
+		className: {},
 		class: {},
-		id: { default: void 0 },
-		autofocus: { type: [Boolean, String] },
-		propOverrides: { default: void 0 }
+		autofocus: { type: [Boolean, String] }
 	},
 	setup(t) {
 		let i = t, o = p(null);
-		return u(() => {}), (s, l) => (f(), r("section", {
+		return (s, l) => (f(), r("div", {
 			role: "tabpanel",
 			ref_key: "_ref",
 			ref: o,
 			class: c(_(C)("db-tab-panel", i.class)),
-			id: t.id ?? t.propOverrides?.id
-		}, [t.content ? (f(), r(e, { key: 0 }, [a(g(t.content), 1)], 64)) : n("", !0), h(s.$slots, "default")], 10, Kr));
+			hidden: t.hidden,
+			tabIndex: 0
+		}, [t.content ? (f(), r(e, { key: 0 }, [a(g(t.content), 1)], 64)) : n("", !0), h(s.$slots, "default")], 10, $r));
 	}
-}), Jr = [
+}), ti = [
 	"id",
 	"data-horizontal-alignment",
 	"data-vertical-alignment",
 	"colSpan",
 	"rowSpan",
 	"headers"
-], Yr = /* @__PURE__ */ s({
+], ni = /* @__PURE__ */ s({
 	name: "DBTableDataCell",
 	__name: "table-data-cell",
 	props: {
@@ -4326,9 +4488,9 @@ var x = () => {
 			colSpan: _(j)(e.colSpan, e.colspan),
 			rowSpan: _(j)(e.rowSpan, e.rowspan),
 			headers: e.headers
-		}, [h(i.$slots, "default")], 10, Jr));
+		}, [h(i.$slots, "default")], 10, ti));
 	}
-}), Xr = [
+}), ri = [
 	"id",
 	"data-horizontal-alignment",
 	"data-vertical-alignment",
@@ -4338,7 +4500,7 @@ var x = () => {
 	"rowSpan",
 	"headers",
 	"abbr"
-], Zr = /* @__PURE__ */ s({
+], ii = /* @__PURE__ */ s({
 	name: "DBTableHeaderCell",
 	__name: "table-header-cell",
 	props: {
@@ -4377,13 +4539,13 @@ var x = () => {
 			rowSpan: _(j)(e.rowSpan, e.rowspan),
 			headers: e.headers,
 			abbr: e.abbr
-		}, [h(i.$slots, "default")], 10, Xr));
+		}, [h(i.$slots, "default")], 10, ri));
 	}
-}), Qr = [
+}), ai = [
 	"id",
 	"data-interactive",
 	"data-sub-header-emphasis"
-], $r = /* @__PURE__ */ s({
+], oi = /* @__PURE__ */ s({
 	name: "DBTableRow",
 	__name: "table-row",
 	props: {
@@ -4412,7 +4574,7 @@ var x = () => {
 			class: c(_(C)("db-table-row", o.class)),
 			"data-interactive": _(k)(n.interactive),
 			"data-sub-header-emphasis": n.subHeaderEmphasis
-		}, [n.cells ? (f(!0), r(e, { key: 0 }, m(n.cells, (o, s) => (f(), r(e, { key: s }, [o.headerCell ? (f(), t(Zr, {
+		}, [n.cells ? (f(!0), r(e, { key: 0 }, m(n.cells, (o, s) => (f(), r(e, { key: s }, [o.headerCell ? (f(), t(ii, {
 			key: `${o.id ?? n.id ?? _(i)}-table-row-header-cell-${s}`,
 			id: o.id,
 			abbr: l(o)?.abbr,
@@ -4427,7 +4589,7 @@ var x = () => {
 			rowSpan: o.rowSpan,
 			rowspan: o.rowspan
 		}, {
-			default: b(() => [o.link ? (f(), t(Hn, {
+			default: b(() => [o.link ? (f(), t(Yn, {
 				key: 0,
 				content: o.link?.content,
 				size: o.link?.size,
@@ -4480,7 +4642,7 @@ var x = () => {
 			"colspan",
 			"rowSpan",
 			"rowspan"
-		])) : (f(), t(Yr, {
+		])) : (f(), t(ni, {
 			key: `${o.id ?? n.id ?? _(i)}-table-row-data-cell-${s}`,
 			id: o.id,
 			className: o.className ?? o.class,
@@ -4492,7 +4654,7 @@ var x = () => {
 			rowSpan: o.rowSpan,
 			rowspan: o.rowspan
 		}, {
-			default: b(() => [o.link ? (f(), t(Hn, {
+			default: b(() => [o.link ? (f(), t(Yn, {
 				key: 0,
 				content: o.link?.content,
 				size: o.link?.size,
@@ -4542,9 +4704,9 @@ var x = () => {
 			"colspan",
 			"rowSpan",
 			"rowspan"
-		]))], 64))), 128)) : h(u.$slots, "default", { key: 1 })], 10, Qr));
+		]))], 64))), 128)) : h(u.$slots, "default", { key: 1 })], 10, ai));
 	}
-}), ei = ["id"], ti = /* @__PURE__ */ s({
+}), si = ["id"], ci = /* @__PURE__ */ s({
 	name: "DBTableBody",
 	__name: "table-body",
 	props: {
@@ -4563,7 +4725,7 @@ var x = () => {
 			ref: o,
 			id: n.id ?? n.propOverrides?.id,
 			class: c(_(C)("db-table-body", a.class))
-		}, [n.rows ? (f(!0), r(e, { key: 0 }, m(n.rows, (e, r) => (f(), t($r, {
+		}, [n.rows ? (f(!0), r(e, { key: 0 }, m(n.rows, (e, r) => (f(), t(oi, {
 			key: `${e.id ?? n.id ?? _(i)}-table-body-row-${r}`,
 			cells: e.cells,
 			className: e.className ?? e.class,
@@ -4574,9 +4736,9 @@ var x = () => {
 			"className",
 			"interactive",
 			"id"
-		]))), 128)) : h(s.$slots, "default", { key: 1 })], 10, ei));
+		]))), 128)) : h(s.$slots, "default", { key: 1 })], 10, si));
 	}
-}), ni = ["id"], ri = /* @__PURE__ */ s({
+}), li = ["id"], ui = /* @__PURE__ */ s({
 	name: "DBTableFooter",
 	__name: "table-footer",
 	props: {
@@ -4595,7 +4757,7 @@ var x = () => {
 			ref: o,
 			id: n.id ?? n.propOverrides?.id,
 			class: c(_(C)("db-table-footer", a.class))
-		}, [n.rows ? (f(!0), r(e, { key: 0 }, m(n.rows, (e, r) => (f(), t($r, {
+		}, [n.rows ? (f(!0), r(e, { key: 0 }, m(n.rows, (e, r) => (f(), t(oi, {
 			key: `${e.id ?? n.id ?? _(i)}-table-footer-row-${r}`,
 			cells: e.cells,
 			className: e.className ?? e.class,
@@ -4606,9 +4768,9 @@ var x = () => {
 			"className",
 			"interactive",
 			"id"
-		]))), 128)) : h(s.$slots, "default", { key: 1 })], 10, ni));
+		]))), 128)) : h(s.$slots, "default", { key: 1 })], 10, li));
 	}
-}), ii = ["id"], ai = /* @__PURE__ */ s({
+}), di = ["id"], fi = /* @__PURE__ */ s({
 	name: "DBTableHead",
 	__name: "table-head",
 	props: {
@@ -4633,7 +4795,7 @@ var x = () => {
 			ref: o,
 			id: n.id ?? n.propOverrides?.id,
 			class: c(_(C)("db-table-head", a.class))
-		}, [n.rows ? (f(!0), r(e, { key: 0 }, m(n.rows, (e, r) => (f(), t($r, {
+		}, [n.rows ? (f(!0), r(e, { key: 0 }, m(n.rows, (e, r) => (f(), t(oi, {
 			key: `${e.id ?? n.id ?? _(i)}-table-head-row-${r}`,
 			cells: s(e.cells),
 			className: e.className ?? e.class,
@@ -4646,9 +4808,9 @@ var x = () => {
 			"subHeaderEmphasis",
 			"interactive",
 			"id"
-		]))), 128)) : h(l.$slots, "default", { key: 1 })], 10, ii));
+		]))), 128)) : h(l.$slots, "default", { key: 1 })], 10, di));
 	}
-}), oi = [
+}), pi = [
 	"data-width",
 	"data-size",
 	"data-divider",
@@ -4656,7 +4818,7 @@ var x = () => {
 	"data-mobile-variant",
 	"data-show-caption",
 	"data-sticky-header"
-], si = ["id"], ci = { key: 0 }, li = /* @__PURE__ */ s({
+], mi = ["id"], hi = { key: 0 }, gi = /* @__PURE__ */ s({
 	name: "DBTable",
 	__name: "table",
 	props: {
@@ -4743,22 +4905,22 @@ var x = () => {
 			ref_key: "_ref",
 			ref: d,
 			id: a.id ?? a.propOverrides?.id
-		}, [a.captionPlain ? (f(), r("caption", ci, g(a.captionPlain), 1)) : h(p.$slots, "caption", { key: 1 }), s.value ? (f(), r(e, { key: 2 }, [
-			s.value?.header ? (f(), t(ai, {
+		}, [a.captionPlain ? (f(), r("caption", hi, g(a.captionPlain), 1)) : h(p.$slots, "caption", { key: 1 }), s.value ? (f(), r(e, { key: 2 }, [
+			s.value?.header ? (f(), t(fi, {
 				key: 0,
 				rows: s.value?.header
 			}, null, 8, ["rows"])) : n("", !0),
-			s.value?.body ? (f(), t(ti, {
+			s.value?.body ? (f(), t(ci, {
 				key: 1,
 				rows: s.value?.body
 			}, null, 8, ["rows"])) : n("", !0),
-			s.value?.footer ? (f(), t(ri, {
+			s.value?.footer ? (f(), t(ui, {
 				key: 2,
 				rows: s.value?.footer
 			}, null, 8, ["rows"])) : n("", !0)
-		], 64)) : h(p.$slots, "default", { key: 3 })], 8, si)], 14, oi));
+		], 64)) : h(p.$slots, "default", { key: 3 })], 8, mi)], 14, pi));
 	}
-}), ui = ["id"], di = /* @__PURE__ */ s({
+}), _i = ["id"], vi = /* @__PURE__ */ s({
 	name: "DBTableCaption",
 	__name: "table-caption",
 	props: {
@@ -4776,56 +4938,62 @@ var x = () => {
 			ref: n,
 			id: e.id ?? e.propOverrides?.id,
 			class: c(_(C)("db-table-caption", t.class))
-		}, [h(i.$slots, "default")], 10, ui));
+		}, [h(i.$slots, "default")], 10, _i));
 	}
-}), fi = [
+}), yi = [
 	"row",
 	"col",
 	"rowgroup",
 	"colgroup"
-], pi = [
+], bi = [
 	"none",
 	"weak",
 	"strong"
-], mi = [
+], xi = [
 	"x-small",
 	"small",
 	"medium",
 	"large"
-], hi = [
+], Si = [
 	"flat",
 	"zebra",
 	"spaced"
-], gi = [
+], Ci = [
 	"none",
 	"both",
 	"horizontal",
 	"vertical"
-], _i = ["table", "list"], vi = [
+], wi = ["table", "list"], Ti = [
 	"none",
 	"both",
 	"horizontal",
 	"vertical"
-], yi = [
+], Ei = [
 	"auto",
 	"1fr",
 	"min-content",
 	"max-content"
-], bi = [
+], Di = [
 	"id",
 	"data-orientation",
 	"data-scroll-behavior",
-	"data-alignment",
-	"data-width"
-], xi = /* @__PURE__ */ s({
+	"data-tab-item-alignment",
+	"data-tab-item-width",
+	"data-initial-selected-mode"
+], Oi = /* @__PURE__ */ s({
 	name: "DBTabs",
 	__name: "tabs",
 	props: {
+		arrowScrollDistance: { default: void 0 },
 		behavior: { default: void 0 },
 		initialSelectedIndex: { default: void 0 },
+		activeIndex: { default: void 0 },
 		initialSelectedMode: { default: void 0 },
-		name: { default: void 0 },
+		label: { default: void 0 },
 		tabs: { default: void 0 },
+		tabItemWidth: { default: "auto" },
+		scrollStartLabel: { default: "Scroll start" },
+		scrollEndLabel: { default: "Scroll end" },
 		children: { default: void 0 },
 		className: { default: void 0 },
 		class: {},
@@ -4833,183 +5001,403 @@ var x = () => {
 		autofocus: { type: [Boolean, String] },
 		propOverrides: { default: void 0 },
 		orientation: { default: void 0 },
-		width: { default: void 0 },
-		alignment: { default: void 0 },
-		arrowScrollDistance: { default: void 0 },
-		scrollLeftText: { default: void 0 },
-		scrollRightText: { default: void 0 },
+		tabItemAlignment: { default: "start" },
 		indexChange: {},
 		onIndexChange: {
 			type: Function,
 			default: void 0
 		},
-		onTabSelect: {
+		valueChange: {},
+		onValueChange: {
 			type: Function,
 			default: void 0
-		},
-		tabSelect: {}
+		}
 	},
 	setup(i) {
-		let s = v(), l = i, x = p(""), S = p(!1), w = p(!1), T = p(!1), E = p(null), D = p(void 0), O = p(null);
+		let s = v(), l = i, x = p(0), S = p(!1), w = p(!1), T = p(!1), E = p(null), D = p(null), O = p(null), k = p(null), j = p(!1), M = p([]), N = p([]), P = p(void 0), F = p(void 0), I = p(null);
 		u(() => {
-			x.value = `tabs-${l.name || s}`, S.value = !0;
+			j.value = ee(), L();
+			let { startIndex: e, hashApplied: t } = se();
+			if (x.value = e, S.value = !0, typeof window < "u" && I.value) {
+				ae(), le();
+				let n = e;
+				if (ie(t)) {
+					let e = G();
+					e > -1 && (n = e, x.value = e);
+				}
+				B(n);
+			}
+			ce();
 		}), d(() => {
-			D.value &&= (new _t().unobserve(D.value), void 0);
-		}), y(() => [O.value, S.value], () => {
-			if (O.value && S.value) {
-				M(), N(!0);
-				let e = O.value.querySelector(".db-tab-list");
-				e && new MutationObserver((e) => {
-					e.forEach((e) => {
-						(e.removedNodes.length || e.addedNodes.length) && (M(), N());
-					});
-				}).observe(e, {
-					childList: !0,
-					subtree: !0
-				}), S.value = !1;
+			let e = O.value;
+			e !== null && (cancelAnimationFrame(e), O.value = null), oe(), D.value?.disconnect(), D.value = null;
+		}), y(() => [l.tabs, S.value], () => {
+			S.value && l.tabs && (ae(), le(), B(x.value));
+		}, {
+			immediate: !0,
+			flush: "post"
+		}), y(() => [l.id, l.propOverrides?.id], () => {
+			(l.id ?? l.propOverrides?.id) && L();
+		}, {
+			immediate: !0,
+			flush: "post"
+		}), y(() => [P.value], () => {
+			P.value && le();
+		}, {
+			immediate: !0,
+			flush: "post"
+		}), y(() => [I.value, l.orientation], () => {
+			if (I.value) {
+				let e = K();
+				if (e?.setAttribute("aria-orientation", l.orientation ?? "horizontal"), e) {
+					let t = l.orientation === "vertical" ? "tablist block wrap" : "tablist";
+					e.setAttribute("focusgroup", t);
+				}
 			}
 		}, {
 			immediate: !0,
 			flush: "post"
+		}), y(() => [I.value, l.label], () => {
+			if (I.value) {
+				let e = l.label, t = K();
+				e ? (t?.setAttribute("aria-label", e), F.value = e) : F.value &&= (t?.getAttribute("aria-label") === F.value && t?.removeAttribute("aria-label"), void 0);
+			}
+		}, {
+			immediate: !0,
+			flush: "post"
+		}), y(() => [I.value, l.behavior], () => {
+			I.value && (l.behavior === "arrows" ? ae() : oe());
+		}, {
+			immediate: !0,
+			flush: "post"
+		}), y(() => [l.activeIndex], () => {
+			if (l.activeIndex !== void 0) {
+				let e = Number(l.activeIndex);
+				isNaN(e) || (x.value = e);
+			}
+		}, {
+			immediate: !0,
+			flush: "post"
+		}), y(() => [
+			M.value,
+			N.value,
+			x.value,
+			S.value
+		], () => {
+			S.value && M.value.length > 0 && B(x.value);
+		}, {
+			immediate: !0,
+			flush: "post"
 		});
-		function k() {
+		function L() {
+			P.value = l.id ?? l.propOverrides?.id ?? `tabs-${s}`;
+		}
+		function R() {
+			return l.id ?? l.propOverrides?.id;
+		}
+		function z(e) {
+			let t = M.value;
+			if (t.length > 0) {
+				let n = t[e];
+				if (n?.disabled || n?.getAttribute("aria-disabled") === "true") return;
+			}
+			let n = t[e]?.dataset?.value;
+			if (l.activeIndex !== void 0) {
+				if (e === Number(l.activeIndex)) return;
+				l.onIndexChange && l.onIndexChange(e), l.onValueChange && l.onValueChange(n);
+				return;
+			}
+			x.value !== e && (x.value = e, l.onIndexChange && l.onIndexChange(e), l.onValueChange && l.onValueChange(n), B(e));
+		}
+		function B(e) {
+			let t = M.value, n = N.value, r = e === void 0 ? x.value : e, i = (e) => !!e && !e.disabled && e.getAttribute("aria-disabled") !== "true", a = r;
+			a !== -1 && t.length > 0 && (a < 0 || a >= t.length || !i(t[a])) && (a = t.findIndex((e) => i(e))), a !== r && l.activeIndex === void 0 && (x.value = a);
+			let o = a === -1 ? t.findIndex((e) => i(e)) : a;
+			t.forEach((e, t) => {
+				let n = a === t, r = o === t ? 0 : -1;
+				e.setAttribute("aria-selected", String(n)), j.value || e.setAttribute("tabindex", String(r));
+			}), n.forEach((e, t) => {
+				e.hidden = a !== t;
+			});
+		}
+		function V(e) {
+			let t = e.target.closest("[role=\"tab\"]");
+			if (!t || !I.value || t.closest(".db-tabs") !== I.value) return;
+			let n = M.value.indexOf(t);
+			n !== -1 && (e.preventDefault(), z(n));
+		}
+		function U(e) {
+			if (!I.value) return;
+			let t = e.key;
+			if (!H.includes(t)) return;
+			let n = M.value;
+			if (n.length === 0) return;
+			let r = e.target?.closest("[role=\"tab\"]");
+			if (!r || r.closest(".db-tabs") !== I.value) return;
+			let i = n.indexOf(r);
+			if (i === -1) return;
+			if (t === "Enter" || t === " ") {
+				e.preventDefault(), z(i);
+				return;
+			}
+			if (j.value) return;
+			let a = l.orientation === "vertical", o = a ? "ArrowUp" : "ArrowLeft", s = a ? "ArrowDown" : "ArrowRight", c, u = n.length;
+			if (t === s ? c = (i + 1) % u : t === o ? c = (i - 1 + u) % u : t === "Home" ? c = 0 : t === "End" && (c = u - 1), c !== void 0) {
+				e.preventDefault();
+				let r = t === s || t === "Home";
+				for (let e = 0; e < u; e++) {
+					let e = n[c];
+					if (!e?.disabled && e?.getAttribute("aria-disabled") !== "true") break;
+					c = r ? (c + 1) % u : (c - 1 + u) % u;
+				}
+				let i = n[c];
+				i && !i.disabled && i.getAttribute("aria-disabled") !== "true" && (te(c), i.focus());
+			}
+		}
+		function te(e) {
+			j.value || M.value.forEach((t, n) => {
+				t.setAttribute("tabindex", e === n ? "0" : "-1");
+			});
+		}
+		function W() {
 			try {
-				return typeof l.tabs == "string" ? JSON.parse(l.tabs) : l.tabs;
+				if (typeof l.tabs == "string") return JSON.parse(l.tabs).map((e) => {
+					let t = e;
+					return !t.ariaLabel && t["aria-label"] ? {
+						...t,
+						ariaLabel: t["aria-label"]
+					} : e;
+				});
+				if (l.tabs) return l.tabs.map((e) => {
+					let t = e;
+					return !t.ariaLabel && t["aria-label"] ? {
+						...t,
+						ariaLabel: t["aria-label"]
+					} : e;
+				});
 			} catch (e) {
 				console.error(e);
 			}
 			return [];
 		}
-		function A(e) {
-			let t = e.scrollWidth > e.clientWidth;
-			w.value = t && e.scrollLeft > 1, T.value = t && e.scrollLeft < e.scrollWidth - e.clientWidth;
+		function ne() {
+			return S.value ? x.value : re();
 		}
-		function j(e) {
-			let t = Number(l.arrowScrollDistance) || 100;
-			e && (t *= -1), E.value?.scrollBy({
-				top: 0,
-				left: t,
+		function re() {
+			let e = W(), t = (e) => !A(e.disabled, "disabled");
+			if (l.activeIndex !== void 0) {
+				let n = Number(l.activeIndex), r = isNaN(n) ? 0 : n;
+				if (e.length > 0 && (r < 0 || r >= e.length || e[r] && !t(e[r]))) {
+					let n = e.findIndex(t);
+					return n > -1 ? n : 0;
+				}
+				return r;
+			}
+			if (l.initialSelectedIndex !== void 0) {
+				let n = Number(l.initialSelectedIndex);
+				if (isNaN(n)) return 0;
+				if (e.length > 0 && n >= e.length) {
+					let n = e.findIndex(t);
+					return n > -1 ? n : 0;
+				}
+				if (e.length > 0 && e[n] && !t(e[n])) {
+					let n = e.findIndex(t);
+					return n > -1 ? n : 0;
+				}
+				return n;
+			}
+			if (l.initialSelectedMode === "manually") return -1;
+			let n = e.findIndex((e) => A(e.active, "active") && t(e));
+			if (n > -1) return n;
+			let r = e.findIndex(t);
+			return r > -1 ? r : 0;
+		}
+		function G() {
+			return M.value.findIndex((e) => e.getAttribute("aria-selected") === "true" && !e.disabled && e.getAttribute("aria-disabled") !== "true");
+		}
+		function ie(e) {
+			return !e && !l.tabs && l.activeIndex === void 0 && l.initialSelectedIndex === void 0 && (l.initialSelectedMode === void 0 || l.initialSelectedMode === "auto");
+		}
+		function K() {
+			return I.value?.querySelector("[role=\"tablist\"]") ?? null;
+		}
+		function q() {
+			let e = K();
+			return !!e && typeof getComputedStyle < "u" && getComputedStyle(e).direction === "rtl";
+		}
+		function J(e) {
+			if (!(e.scrollWidth > e.clientWidth)) {
+				w.value = !1, T.value = !1;
+				return;
+			}
+			let t = Math.abs(e.scrollLeft), n = e.scrollWidth - e.clientWidth;
+			w.value = t > 2, T.value = t < n - 2;
+		}
+		function Y(e) {
+			let t = K();
+			if (!t) return;
+			let n = Number(l.arrowScrollDistance) || 120;
+			!!e !== q() && (n *= -1), t.scrollBy({
+				left: n,
 				behavior: "smooth"
 			});
 		}
-		function M() {
-			if (O.value) {
-				let e = O.value.querySelector(".db-tab-list");
+		function ae() {
+			if (I.value) {
+				let e = K();
 				if (e) {
-					let t = e.querySelector("[role=\"tablist\"]");
-					t && (t.setAttribute("aria-orientation", l.orientation || "horizontal"), l.behavior === "arrows" && (E.value = t, A(t), t.addEventListener("scroll", () => {
-						A(t);
-					}), D.value ||= new _t().observe(t, () => {
-						A(t);
-					})));
-				}
-			}
-		}
-		function N(e) {
-			if (O.value) {
-				let t = Array.from(O.value.querySelectorAll(":is(:scope > db-tab-list .db-tab-item, :scope > .db-tab-list .db-tab-item)")), n = Array.from(O.value.querySelectorAll(":is(:scope > .db-tab-panel, :scope > db-tab-panel > .db-tab-panel)"));
-				for (let r of t) {
-					let i = t.indexOf(r), a = r.querySelector("label"), o = r.querySelector("input");
-					if (o && a) {
-						if (!o.id) {
-							let e = `${x.value}-tab-${i}`;
-							a.setAttribute("for", e), o.id = e, o.setAttribute("name", x.value), n.length > i && o.setAttribute("aria-controls", `${x.value}-tab-panel-${i}`);
+					e.setAttribute("aria-orientation", l.orientation ?? "horizontal");
+					let t = l.orientation === "vertical" ? "tablist block wrap" : "tablist";
+					e.setAttribute("focusgroup", t);
+					let n = l.label;
+					if (n && (e.setAttribute("aria-label", n), F.value = n), l.behavior === "arrows") {
+						if (J(e), !k.value) {
+							let t = () => J(e);
+							k.value = { fn: t }, e.addEventListener("scroll", t);
 						}
-						if (e) {
-							let e = !l.initialSelectedMode || l.initialSelectedMode === "auto", t = l.initialSelectedIndex == null && i === 0 || Number(l.initialSelectedIndex) === i;
-							e && t && o.click();
+						if (!E.value) {
+							let t = new ResizeObserver(() => {
+								J(e);
+							});
+							t.observe(e), E.value = t;
 						}
 					}
 				}
-				for (let e of n) {
-					if (e.id) continue;
-					let t = n.indexOf(e);
-					e.id = `${x.value}-tab-panel-${t}`, e.setAttribute("aria-labelledby", `${x.value}-tab-${t}`);
-				}
 			}
 		}
-		function P(e) {
-			if (e.stopPropagation(), e.target) {
-				let t = e.target.parentElement;
-				if (t && t.parentElement && t.parentElement?.nodeName === "LI") {
-					let n = t.parentElement;
-					if (n) {
-						let t = n.parentElement;
-						if (t) {
-							let r = Array.from(t.children).indexOf(n);
-							l.onIndexChange && l.onIndexChange(r), l.onTabSelect && l.onTabSelect(e);
-						}
-					}
+		function oe() {
+			let e = k.value, t = K();
+			e && t && t.removeEventListener("scroll", e.fn), k.value = null, E.value?.disconnect(), E.value = null, w.value = !1, T.value = !1;
+		}
+		function X(e) {
+			return e.parentElement?.closest(".db-tabs, [role=\"tabpanel\"]") === I.value;
+		}
+		function se() {
+			let e = re(), t = !1, n = R();
+			if (typeof window < "u" && window.location.hash && n) {
+				let r = window.location.hash.substring(1), i = `${n}-tab-`;
+				if (r.startsWith(i)) {
+					let n = r.replace(i, ""), a = parseInt(n, 10);
+					isNaN(a) || (e = a, t = !0);
 				}
 			}
+			return {
+				startIndex: e,
+				hashApplied: t
+			};
+		}
+		function ce() {
+			if (!I.value) return;
+			let e = new MutationObserver((e) => {
+				let t = (e) => {
+					let t = e;
+					return !!t.matches && (t.matches("[role=\"tab\"], [role=\"tabpanel\"]") || !!t.querySelector?.("[role=\"tab\"], [role=\"tabpanel\"]"));
+				}, n = e.some((e) => Array.from(e.addedNodes).some(t) || Array.from(e.removedNodes).some(t)), r = e.some((e) => e.type === "characterData"), i = e.some((e) => e.type === "attributes" && (e.attributeName === "disabled" || e.attributeName === "aria-disabled") && e.target?.getAttribute?.("role") === "tab");
+				if (!n && !r && !i) return;
+				let a = O.value;
+				a !== null && cancelAnimationFrame(a), O.value = requestAnimationFrame(() => {
+					O.value = null, ae(), n && le(), i && B(x.value);
+				});
+			});
+			e.observe(I.value, {
+				childList: !0,
+				subtree: !0,
+				characterData: !0,
+				attributes: !0,
+				attributeFilter: ["disabled", "aria-disabled"]
+			}), D.value = e;
+		}
+		function le() {
+			let e = l.id ?? l.propOverrides?.id ?? P.value;
+			if (!e || !I.value) return;
+			let t = K(), n = Array.from(I.value?.querySelectorAll("[role=\"tabpanel\"]") ?? []).filter((e) => X(e));
+			if (!t) return;
+			let r = Array.from(t.querySelectorAll("[role=\"tab\"]"));
+			M.value = r, N.value = n, r.forEach((t, r) => {
+				let i = n[r], a = `${e}-tab-${r}`;
+				if (t.id = a, i) {
+					let n = `${e}-tab-panel-${r}`;
+					i.id = n, t.setAttribute("aria-controls", n), i.setAttribute("aria-labelledby", a);
+				}
+			});
 		}
 		return (s, u) => (f(), r("div", {
 			ref_key: "_ref",
-			ref: O,
-			id: i.id ?? i.propOverrides?.id,
+			ref: I,
+			id: i.id ?? i.propOverrides?.id ?? P.value,
 			class: c(_(C)("db-tabs", l.class)),
 			"data-orientation": i.orientation,
 			"data-scroll-behavior": i.behavior,
-			"data-alignment": i.alignment ?? "start",
-			"data-width": i.width ?? "auto",
-			onInput: u[0] ||= async (e) => P(e),
-			onChange: u[1] ||= async (e) => P(e)
+			"data-tab-item-alignment": i.tabItemAlignment,
+			"data-tab-item-width": i.tabItemWidth,
+			"data-initial-selected-mode": i.initialSelectedMode,
+			onClick: u[0] ||= async (e) => V(e),
+			onKeydown: u[1] ||= async (e) => U(e)
 		}, [
-			w.value ? (f(), t(Be, {
+			w.value ? (f(), t(Ve, {
 				key: 0,
-				class: "overflow-scroll-left-button",
+				class: "tabs-scroll-start",
 				variant: "ghost",
 				icon: "chevron_left",
 				type: "button",
 				noText: !0,
-				onClick: (e) => j(!0)
+				onClick: (e) => Y(!0)
 			}, {
-				default: b(() => [a(g(i.scrollLeftText ?? _("Scroll left")), 1)]),
+				default: b(() => [a(g(i.scrollStartLabel), 1)]),
 				_: 1
 			}, 8, ["onClick"])) : n("", !0),
-			i.tabs ? (f(), r(e, { key: 1 }, [o(Gr, null, {
-				default: b(() => [(f(!0), r(e, null, m(k(), (e, n) => (f(), t(Hr, {
-					key: i.name + "tab-item" + n,
-					active: e.active,
+			W().length ? (f(), r(e, { key: 1 }, [o(Qr, {
+				orientation: i.orientation,
+				"aria-label": i.label
+			}, {
+				default: b(() => [(f(!0), r(e, null, m(W(), (e, n) => (f(), t(Xr, {
+					key: i.label + "tab-item" + n,
+					"aria-label": e.ariaLabel,
 					label: e.label,
-					iconTrailing: e.iconTrailing,
 					icon: e.icon,
-					noText: e.noText
+					showIcon: e.showIcon,
+					iconTrailing: e.iconTrailing,
+					showIconTrailing: e.showIconTrailing,
+					disabled: e.disabled,
+					active: ne() !== -1 && ne() === n,
+					value: e.value
 				}, null, 8, [
-					"active",
+					"aria-label",
 					"label",
-					"iconTrailing",
 					"icon",
-					"noText"
+					"showIcon",
+					"iconTrailing",
+					"showIconTrailing",
+					"disabled",
+					"active",
+					"value"
 				]))), 128))]),
 				_: 1
-			}), (f(!0), r(e, null, m(k(), (e, n) => (f(), t(qr, {
-				key: i.name + "tab-panel" + n,
+			}, 8, ["orientation", "aria-label"]), (f(!0), r(e, null, m(W(), (e, n) => (f(), t(ei, {
+				key: i.label + "tab-panel" + n,
 				content: e.content
 			}, {
 				default: b(() => [a(g(e.children), 1)]),
 				_: 2
-			}, 1032, ["content"]))), 128))], 64)) : n("", !0),
-			T.value ? (f(), t(Be, {
-				key: 2,
-				class: "overflow-scroll-right-button",
+			}, 1032, ["content"]))), 128))], 64)) : h(s.$slots, "default", { key: 2 }),
+			T.value ? (f(), t(Ve, {
+				key: 3,
+				class: "tabs-scroll-end",
 				variant: "ghost",
 				icon: "chevron_right",
-				type: "button",
 				noText: !0,
-				onClick: (e) => j()
+				onClick: (e) => Y(!1)
 			}, {
-				default: b(() => [a(g(i.scrollRightText ?? _("Scroll right")), 1)]),
+				default: b(() => [a(g(i.scrollEndLabel), 1)]),
 				_: 1
-			}, 8, ["onClick"])) : n("", !0),
-			h(s.$slots, "default")
-		], 42, bi));
+			}, 8, ["onClick"])) : n("", !0)
+		], 42, Di));
 	}
-}), Si = ["scrollbar", "arrows"], Ci = ["auto", "manually"], wi = ["static", "removable"], Ti = [
+}), ki = ["scrollbar", "arrows"], Ai = ["auto", "manually"], ji = ["static", "removable"], Mi = [
 	"data-variant",
 	"data-hide-asterisk",
 	"data-hide-label"
-], Ei = ["for"], Di = [
+], Ni = ["for"], Pi = [
 	"aria-invalid",
 	"data-custom-validity",
 	"data-field-sizing",
@@ -5031,10 +5419,10 @@ var x = () => {
 	"placeholder",
 	"rows",
 	"cols"
-], Oi = {
+], Fi = {
 	"data-visually-hidden": "true",
 	role: "status"
-}, ki = /* @__PURE__ */ s({
+}, Ii = /* @__PURE__ */ s({
 	name: "DBTextarea",
 	__name: "textarea",
 	props: {
@@ -5145,8 +5533,8 @@ var x = () => {
 			flush: "post"
 		}), y(() => [x.value], () => {
 			if (x.value) {
-				let e = x.value + q;
-				S.value = e, w.value = x.value + J, T.value = x.value + ce, I(h.message, h.showMessage) && (k.value = e), z();
+				let e = x.value + X;
+				S.value = e, w.value = x.value + se, T.value = x.value + ce, I(h.message, h.showMessage) && (k.value = e), z();
 			}
 		}, {
 			immediate: !0,
@@ -5159,7 +5547,7 @@ var x = () => {
 		}), y(() => [L.value], () => {
 			if (L.value) {
 				let e = P.value;
-				e || (e = new AbortController(), P.value = e), Ye(L.value, {
+				e || (e = new AbortController(), P.value = e), Ze(L.value, {
 					value: h.value,
 					defaultValue: void 0
 				}, (e) => {
@@ -5177,10 +5565,10 @@ var x = () => {
 			!L.value?.validity.valid || h.validation === "invalid" ? (k.value = T.value, D.value = h.invalidMessage || L.value?.validationMessage || "TODO: Add an invalidMessage", E() && (N.value = D.value, O(() => N.value = "", 1e3))) : R() && L.value?.validity.valid && (h.required || h.minLength || h.maxLength) ? (k.value = w.value, E() && (N.value = h.validMessage ?? "TODO: Add a validMessage", O(() => N.value = "", 1e3))) : I(h.message, h.showMessage) ? k.value = S.value : k.value = void 0;
 		}
 		function B(e, t) {
-			h.input && h.input(e), M.value = e.target.value, h.onInput && h.onInput(e), Q(m, e), z();
+			h.input && h.input(e), M.value = e.target.value, h.onInput && h.onInput(e), Je(m, e), z();
 		}
 		function V(e, t) {
-			h.onChange && h.onChange(e), Q(m, e), z();
+			h.onChange && h.onChange(e), Je(m, e), z();
 		}
 		function H(e) {
 			h.onBlur && h.onBlur(e);
@@ -5190,7 +5578,7 @@ var x = () => {
 		}
 		function U() {
 			let e = h.id ?? h.propOverrides?.id ?? `textarea-${l}`;
-			x.value = e, S.value = e + q, w.value = e + J, T.value = e + ce;
+			x.value = e, S.value = e + X, w.value = e + se, T.value = e + ce;
 		}
 		return (s, l) => (f(), r("div", {
 			class: c(_(C)("db-textarea", h.class)),
@@ -5198,7 +5586,7 @@ var x = () => {
 			"data-hide-asterisk": _(F)(e.showRequiredAsterisk),
 			"data-hide-label": _(F)(e.showLabel)
 		}, [
-			i("label", { for: x.value }, g(e.label ?? _("LABEL SHOULD BE SET")), 9, Ei),
+			i("label", { for: x.value }, g(e.label ?? _("LABEL SHOULD BE SET")), 9, Ni),
 			i("textarea", {
 				"aria-invalid": e.validation === "invalid",
 				"data-custom-validity": e.validation,
@@ -5227,7 +5615,7 @@ var x = () => {
 				placeholder: e.placeholder ?? _(" "),
 				rows: _(j)(e.rows, _(4)),
 				cols: _(j)(e.cols)
-			}, g(e.value), 41, Di),
+			}, g(e.value), 41, Pi),
 			_(I)(e.message, e.showMessage) ? (f(), t($, {
 				key: 0,
 				size: "small",
@@ -5254,50 +5642,50 @@ var x = () => {
 				default: b(() => [a(g(D.value), 1)]),
 				_: 1
 			}, 8, ["id"]),
-			i("span", Oi, g(N.value), 1)
-		], 10, Ti));
+			i("span", Fi, g(N.value), 1)
+		], 10, Mi));
 	}
-}), Ai = [
+}), Li = [
 	"none",
 	"both",
 	"horizontal",
 	"vertical"
-], ji = [
+], Ri = [
 	"hard",
 	"soft",
 	"off"
-], Mi = ["description", "label"], Ni = [
+], zi = ["description", "label"], Bi = [
 	"adaptive",
 	"neutral",
 	"critical",
 	"informational",
 	"warning",
 	"successful"
-], Pi = [
+], Vi = [
 	"medium",
 	"small",
 	"large",
 	"none"
-], Fi = [
+], Hi = [
 	"medium",
 	"small",
 	"large",
 	"none"
-], Ii = [
+], Ui = [
 	"left",
 	"right",
 	"left-start",
 	"left-end",
 	"right-start",
 	"right-end"
-], Li = [
+], Wi = [
 	"top",
 	"bottom",
 	"top-start",
 	"top-end",
 	"bottom-start",
 	"bottom-end"
-], Ri = [...Ii, ...Li], zi = [
+], Gi = [...Ui, ...Wi], Ki = [
 	"none",
 	"3x-large",
 	"2x-large",
@@ -5308,25 +5696,25 @@ var x = () => {
 	"x-small",
 	"2x-small",
 	"3x-small"
-], Bi = ["horizontal", "vertical"], Vi = ["full", "auto"], Hi = [
+], qi = ["horizontal", "vertical"], Ji = ["full", "auto"], Yi = [
 	"full",
 	"medium",
 	"large",
 	"small"
-], Ui = [
+], Xi = [
 	"none",
 	"slow",
 	"fast"
-], Wi = ["auto", "fixed"], Gi = ["small", "medium"], Ki = ["weak", "strong"], qi = [
+], Zi = ["auto", "fixed"], Qi = ["small", "medium"], $i = ["weak", "strong"], ea = [
 	"invalid",
 	"valid",
 	"no-validation"
-], Ji = ["fixed", "content"], Yi = ["above", "floating"], Xi = ["leading", "trailing"], Zi = /* @__PURE__ */ "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".split("."), Qi = [
+], ta = ["fixed", "content"], na = ["above", "floating"], ra = ["leading", "trailing"], ia = /* @__PURE__ */ "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".split("."), aa = [
 	"_self",
 	"_blank",
 	"_parent",
 	"_top"
-], $i = [
+], oa = [
 	"no-referrer",
 	"no-referrer-when-downgrade",
 	"origin",
@@ -5335,10 +5723,10 @@ var x = () => {
 	"strict-origin",
 	"strict-origin-when-cross-origin",
 	"unsafe-url"
-], ea = [
+], sa = [
 	"start",
 	"center",
 	"end"
 ];
 //#endregion
-export { re as AccordionBehaviorList, ne as AccordionVariantList, ea as AlignmentList, Zi as AutoCompleteList, Ie as BadgePlacementList, He as ButtonTypeList, Ve as ButtonVariantList, we as COLOR, Te as COLORS, Ee as COLORS_SIMPLE, Se as COLOR_CONST, Ce as COLOR_SIMPLE, Ge as CardBehaviorList, Ke as CardElevationLevelList, tn as CustomSelectDropdownWidthList, an as CustomSelectListItemTypeList, W as DBAccordion, U as DBAccordionItem, Fe as DBBadge, Re as DBBrand, Be as DBButton, We as DBCard, tt as DBCheckbox, rt as DBCustomButton, en as DBCustomSelect, yt as DBCustomSelectDropdown, rn as DBCustomSelectFormField, Dt as DBCustomSelectList, Tt as DBCustomSelectListItem, cn as DBDivider, gn as DBDrawer, In as DBHeader, Rn as DBIcon, $ as DBInfotext, Pt as DBInput, Hn as DBLink, qn as DBNavigation, Qn as DBNavigationItem, rr as DBNotification, cr as DBPage, pr as DBPopover, gr as DBRadio, vr as DBSection, Or as DBSelect, Ar as DBStack, zr as DBSwitch, Hr as DBTabItem, Gr as DBTabList, qr as DBTabPanel, li as DBTable, ti as DBTableBody, di as DBTableCaption, yi as DBTableColumnsSizeList, Yr as DBTableDataCell, gi as DBTableDividerList, ri as DBTableFooter, ai as DBTableHead, Zr as DBTableHeaderCell, fi as DBTableHeaderCellScopeList, _i as DBTableMobileVariantList, $r as DBTableRow, mi as DBTableRowSizeList, pi as DBTableRowSubHeaderEmphasisList, vi as DBTableStickyHeaderList, hi as DBTableVariantList, xi as DBTabs, Rt as DBTag, ki as DBTextarea, It as DBTooltip, Me as DB_UX_LOCAL_STORAGE_FRAMEWORK, Ne as DB_UX_LOCAL_STORAGE_MODE, pe as DEFAULT_BACK, _e as DEFAULT_BURGER_MENU, be as DEFAULT_CLOSE_BUTTON, Y as DEFAULT_DATALIST_ID_SUFFIX, ve as DEFAULT_ICON, G as DEFAULT_ID, de as DEFAULT_INVALID_MESSAGE, ce as DEFAULT_INVALID_MESSAGE_ID_SUFFIX, ie as DEFAULT_LABEL, oe as DEFAULT_LABEL_ID_SUFFIX, K as DEFAULT_MESSAGE, q as DEFAULT_MESSAGE_ID_SUFFIX, ae as DEFAULT_PLACEHOLDER, le as DEFAULT_PLACEHOLDER_ID_SUFFIX, fe as DEFAULT_REMOVE, ye as DEFAULT_ROWS, he as DEFAULT_SCROLL_LEFT, ge as DEFAULT_SCROLL_RIGHT, me as DEFAULT_SELECTED, se as DEFAULT_SELECT_ID_SUFFIX, ue as DEFAULT_VALID_MESSAGE, J as DEFAULT_VALID_MESSAGE_ID_SUFFIX, ke as DEFAULT_VIEWPORT, Z as DENSITIES, X as DENSITY, xe as DENSITY_CONST, Ae as DESKTOP_VIEWPORT, ln as DividerMarginList, un as DividerVariantList, at as DocumentClickListener, ot as DocumentScrollListener, _n as DrawerBackdropList, vn as DrawerDirectionList, bn as DrawerPositionList, yn as DrawerVariantList, Ki as EmphasisList, Ji as FieldSizingList, zi as GapSpacingList, zn as IconWeightList, Bn as InputTypeList, Xi as LabelVariantHorizontalList, Yi as LabelVariantList, Gn as LinkContentList, $i as LinkReferrerPolicyList, Wn as LinkSizeList, Qi as LinkTargetList, Un as LinkVariantList, Fi as MarginList, Hi as MaxWidthList, Sn as NavigationItemSafeTriangle, or as NotificationAriaLiveList, ar as NotificationLinkVariantList, ir as NotificationVariantList, Bi as OrientationList, ur as PageDocumentOverflowList, lr as PageVariantList, Ii as PlacementHorizontalList, Ri as PlacementList, Li as PlacementVerticalList, Ui as PopoverDelayList, Wi as PopoverWidthList, De as SEMANTIC, Oe as SEMANTICS, on as SelectedTypeList, Ni as SemanticList, Gi as SizeList, Pi as SpacingList, Nr as StackAlignmentList, Mr as StackDirectionList, Pr as StackJustifyContentList, jr as StackVariantList, je as TESTING_VIEWPORTS, Si as TabsBehaviorList, Ci as TabsInitialSelectedModeList, wi as TagBehaviorList, Ai as TextareaResizeList, ji as TextareaWrapList, Mi as TooltipVariantList, qi as ValidationList, Vi as WidthList, S as addAttributeToChildren, C as cls, O as delay, A as getBoolean, k as getBooleanAsString, ct as getFloatingProps, F as getHideProp, N as getInputValue, V as getNotificationRole, j as getNumber, z as getOptionKey, L as getSearchInput, M as getStep, pt as handleDataOutside, st as handleFixedDropdown, ft as handleFixedPopover, E as hasVoiceOver, w as isArrayOfStrings, xn as isEventTargetNavigationItem, D as isIOSSafari, B as isKeyboardEvent, I as stringPropVisible, x as uuid };
+export { ie as AccordionBehaviorList, G as AccordionVariantList, sa as AlignmentList, ia as AutoCompleteList, Le as BadgePlacementList, Ue as ButtonTypeList, He as ButtonVariantList, Te as COLOR, Ee as COLORS, De as COLORS_SIMPLE, Q as COLOR_CONST, we as COLOR_SIMPLE, Ke as CardBehaviorList, qe as CardElevationLevelList, rn as CustomSelectDropdownWidthList, sn as CustomSelectListItemTypeList, re as DBAccordion, W as DBAccordionItem, Ie as DBBadge, ze as DBBrand, Ve as DBButton, Ge as DBCard, rt as DBCheckbox, at as DBCustomButton, nn as DBCustomSelect, xt as DBCustomSelectDropdown, on as DBCustomSelectFormField, kt as DBCustomSelectList, Dt as DBCustomSelectListItem, un as DBDivider, gn as DBDrawer, vn as DBDrawerFooter, Sn as DBDrawerHeader, Un as DBHeader, Gn as DBIcon, $ as DBInfotext, It as DBInput, Yn as DBLink, er as DBNavigation, ar as DBNavigationItem, ur as DBNotification, hr as DBPage, br as DBPopover, Cr as DBRadio, Tr as DBSection, Fr as DBSelect, Lr as DBStack, Kr as DBSwitch, Xr as DBTabItem, Qr as DBTabList, ei as DBTabPanel, gi as DBTable, ci as DBTableBody, vi as DBTableCaption, Ei as DBTableColumnsSizeList, ni as DBTableDataCell, Ci as DBTableDividerList, ui as DBTableFooter, fi as DBTableHead, ii as DBTableHeaderCell, yi as DBTableHeaderCellScopeList, wi as DBTableMobileVariantList, oi as DBTableRow, xi as DBTableRowSizeList, bi as DBTableRowSubHeaderEmphasisList, Ti as DBTableStickyHeaderList, Si as DBTableVariantList, Oi as DBTabs, Bt as DBTag, Ii as DBTextarea, Rt as DBTooltip, Ne as DB_UX_LOCAL_STORAGE_FRAMEWORK, Pe as DB_UX_LOCAL_STORAGE_MODE, me as DEFAULT_BACK, ve as DEFAULT_BURGER_MENU, xe as DEFAULT_CLOSE_BUTTON, ue as DEFAULT_DATALIST_ID_SUFFIX, ye as DEFAULT_ICON, K as DEFAULT_ID, fe as DEFAULT_INVALID_MESSAGE, ce as DEFAULT_INVALID_MESSAGE_ID_SUFFIX, q as DEFAULT_LABEL, ae as DEFAULT_LABEL_ID_SUFFIX, Y as DEFAULT_MESSAGE, X as DEFAULT_MESSAGE_ID_SUFFIX, J as DEFAULT_PLACEHOLDER, le as DEFAULT_PLACEHOLDER_ID_SUFFIX, pe as DEFAULT_REMOVE, be as DEFAULT_ROWS, ge as DEFAULT_SCROLL_LEFT, _e as DEFAULT_SCROLL_RIGHT, he as DEFAULT_SELECTED, oe as DEFAULT_SELECT_ID_SUFFIX, de as DEFAULT_VALID_MESSAGE, se as DEFAULT_VALID_MESSAGE_ID_SUFFIX, Ae as DEFAULT_VIEWPORT, Ce as DENSITIES, Se as DENSITY, Z as DENSITY_CONST, je as DESKTOP_VIEWPORT, dn as DividerMarginList, fn as DividerVariantList, st as DocumentClickListener, ct as DocumentScrollListener, Cn as DrawerBackdropList, Dn as DrawerContainerSizeList, wn as DrawerDirectionList, En as DrawerPositionList, Tn as DrawerVariantList, $i as EmphasisList, ta as FieldSizingList, Ki as GapSpacingList, Kn as IconWeightList, qn as InputTypeList, ra as LabelVariantHorizontalList, na as LabelVariantList, Qn as LinkContentList, oa as LinkReferrerPolicyList, Zn as LinkSizeList, aa as LinkTargetList, Xn as LinkVariantList, Hi as MarginList, Yi as MaxWidthList, H as NAVIGATION_KEYS, kn as NavigationItemSafeTriangle, pr as NotificationAriaLiveList, fr as NotificationLinkVariantList, dr as NotificationVariantList, qi as OrientationList, _r as PageDocumentOverflowList, gr as PageVariantList, Ui as PlacementHorizontalList, Gi as PlacementList, Wi as PlacementVerticalList, Xi as PopoverDelayList, Zi as PopoverWidthList, Oe as SEMANTIC, ke as SEMANTICS, cn as SelectedTypeList, Bi as SemanticList, Qi as SizeList, Vi as SpacingList, Br as StackAlignmentList, zr as StackDirectionList, Vr as StackJustifyContentList, Rr as StackVariantList, Me as TESTING_VIEWPORTS, ki as TabsBehaviorList, Ai as TabsInitialSelectedModeList, ji as TagBehaviorList, Li as TextareaResizeList, Ri as TextareaWrapList, zi as TooltipVariantList, ea as ValidationList, Ji as WidthList, S as addAttributeToChildren, C as cls, O as delay, A as getBoolean, k as getBooleanAsString, ut as getFloatingProps, F as getHideProp, N as getInputValue, V as getNotificationRole, j as getNumber, z as getOptionKey, L as getSearchInput, M as getStep, ht as handleDataOutside, lt as handleFixedDropdown, mt as handleFixedPopover, ee as hasFocusgroupSupport, E as hasVoiceOver, w as isArrayOfStrings, On as isEventTargetNavigationItem, D as isIOSSafari, B as isKeyboardEvent, I as stringPropVisible, x as uuid };