wave-ui 4.1.0 → 4.1.1

package/dist/wave-ui.esm.js

@@ -1,4 +1,4 @@
-import { Fragment as e, KeepAlive as t, Teleport as n, Transition as r, TransitionGroup as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createSlots as u, createTextVNode as d, createVNode as f, h as p, inject as m, mergeProps as h, nextTick as g, normalizeClass as _, normalizeProps as v, normalizeStyle as y, onBeforeUnmount as ee, onMounted as te, openBlock as b, reactive as x, ref as S, render as C, renderList as w, renderSlot as T, resolveComponent as E, resolveDirective as ne, resolveDynamicComponent as D, toDisplayString as O, toHandlers as k, unref as re, useAttrs as ie, useId as ae, vModelDynamic as A, vModelText as j, vShow as oe, watch as se, withCtx as M, withDirectives as N, withKeys as P, withModifiers as F } from "vue";
+import { Fragment as e, KeepAlive as t, Teleport as n, Transition as r, TransitionGroup as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createSlots as u, createTextVNode as d, createVNode as f, h as p, inject as m, mergeProps as h, nextTick as g, normalizeClass as _, normalizeProps as v, normalizeStyle as y, onBeforeUnmount as ee, onMounted as te, openBlock as b, reactive as x, ref as S, render as C, renderList as w, renderSlot as T, resolveComponent as E, resolveDirective as ne, resolveDynamicComponent as D, toDisplayString as O, toHandlers as k, unref as re, useAttrs as ie, useId as A, vModelDynamic as ae, vModelText as j, vShow as oe, watch as se, withCtx as M, withDirectives as N, withKeys as P, withModifiers as F } from "vue";
 //#region \0rolldown/runtime.js
 var ce = Object.defineProperty, I = (e, t) => {
 	let n = {};
@@ -1176,21 +1176,21 @@ var xe = [
 		label: "inherit",
 		color: "inherit"
 	}
-], Se = {
+], H = {
 	cssScope: ".w-app",
 	baseIncrement: 4
-}, H = {
+}, U = {
 	keys: [],
 	values: []
-}, Ce = null, we = (e) => {
+}, Se = null, Ce = (e) => {
 	let t = "";
 	return e.forEach(({ label: e, color: n, shades: r = [] }) => {
 		t += `--w-${e}-color: ${n};`, r.forEach((e) => {
 			t += `--w-${e.label}-color: ${e.color};`;
 		});
 	}), `:root{${t}}`;
-}, Te = (e, t) => {
-	let n = "", r = "", { info: i, warning: a, success: o, error: s, shades: c, ...l } = e, { cssScope: u } = Se;
+}, we = (e, t) => {
+	let n = "", r = "", { info: i, warning: a, success: o, error: s, shades: c, ...l } = e, { cssScope: u } = H;
 	for (let e in l) n += `${u} .${e}--bg{background-color:var(--w-${e}-color)}${u} .${e}{color:var(--w-${e}-color)}`;
 	for (let e in c) {
 		let r = t ? `var(--w-${e}-color)` : c[e];
@@ -1206,8 +1206,8 @@ var xe = [
 	for (let e in d) r += `--w-${e}-color: ${d[e]?.color ?? d[e]};`;
 	if (t) for (let e in c) r += `--w-${e}-color: ${c[e]};`;
 	return `:root{${r}}${n}`;
-}, Ee = (e, t) => {
-	let n = "", { cssScope: r } = Se;
+}, Te = (e, t) => {
+	let n = "", { cssScope: r } = H;
 	return e.forEach(({ min: e, label: i }) => {
 		if (i === "xs") for (let e = 0; e < t; e++) n += `${r} .${i}${t - e}{width:${parseFloat(((t - e) * 100 / t).toFixed(4))}%;}`;
 		else {
@@ -1216,8 +1216,8 @@ var xe = [
 			n += "}";
 		}
 	}), n;
-}, De = (e) => {
-	let t = "", { cssScope: n } = Se, r = /* @__PURE__ */ "show{display:block}.hide{display:none}.d-flex{display:flex}.d-iflex{display:inline-flex}.d-block{display:block}.d-iblock{display:inline-block}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-nowrap{white-space:nowrap}.row{flex-direction:row}.column{flex-direction:column}.column-reverse{flex-direction:column-reverse}.grow{flex-grow:1;flex-basis:auto}.no-grow{flex-grow:0}.shrink{flex-shrink:1;margin-left:auto;margin-right:auto}.no-shrink{flex-shrink:0}.wrap{flex-wrap: wrap}.no-wrap{flex-wrap: nowrap}.fill-width{width:100%}.fill-height{height:100%}.h-auto{height:auto}.h-screen{height:100vh}.basis-zero{flex-basis:0}.align-start{align-items:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.align-self-start{align-self:flex-start}.align-self-center{align-self:center}.align-self-end{align-self:flex-end}.align-self-stretch{align-self:stretch}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-space-between{justify-content:space-between}.justify-space-around{justify-content:space-around}.justify-space-evenly{justify-content:space-evenly}".split("."), i = Array(12).fill();
+}, Ee = (e) => {
+	let t = "", { cssScope: n } = H, r = /* @__PURE__ */ "show{display:block}.hide{display:none}.d-flex{display:flex}.d-iflex{display:inline-flex}.d-block{display:block}.d-iblock{display:inline-block}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-nowrap{white-space:nowrap}.row{flex-direction:row}.column{flex-direction:column}.column-reverse{flex-direction:column-reverse}.grow{flex-grow:1;flex-basis:auto}.no-grow{flex-grow:0}.shrink{flex-shrink:1;margin-left:auto;margin-right:auto}.no-shrink{flex-shrink:0}.wrap{flex-wrap: wrap}.no-wrap{flex-wrap: nowrap}.fill-width{width:100%}.fill-height{height:100%}.h-auto{height:auto}.h-screen{height:100vh}.basis-zero{flex-basis:0}.align-start{align-items:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.align-self-start{align-self:flex-start}.align-self-center{align-self:center}.align-self-end{align-self:flex-end}.align-self-stretch{align-self:stretch}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-space-between{justify-content:space-between}.justify-space-around{justify-content:space-around}.justify-space-evenly{justify-content:space-evenly}".split("."), i = Array(12).fill();
 	return e.forEach(({ label: e, min: a }) => {
 		e !== "xs" && (t += `@media(min-width:${a}px){` + r.map((t) => `${n} .${e}u-${t}`).join("") + i.map((t, n) => `.w-grid.${e}u-columns${n + 1}{grid-template-columns:repeat(${n + 1},1fr);}`).join("") + i.map((t, n) => `.w-flex.${e}u-gap${n + 1},.w-grid.${e}u-gap${n + 1}{gap:calc(${n + 1} * var(--w-base-increment));}`).join("") + `.w-flex.${e}u-gap0,.w-flex.${e}u-gap0{gap:0}}`);
 	}), e.forEach(({ label: e, min: a, max: o }) => {
@@ -1225,11 +1225,11 @@ var xe = [
 	}), e.forEach(({ label: e, max: a }) => {
 		e !== "xl" && (t += `@media (max-width:${a}px){` + r.map((t) => `${n} .${e}d-${t}`).join("") + i.map((t, n) => `.w-grid.${e}d-columns${n + 1}{grid-template-columns:repeat(${n + 1},1fr);}`).join("") + i.map((t, n) => `.w-flex.${e}d-gap${n + 1},.w-grid.${e}d-gap${n + 1}{gap:calc(${n + 1} * var(--w-base-increment));}`).join("") + `.w-flex.${e}d-gap0,.w-flex.${e}d-gap0{gap:0}}`);
 	}), t;
-}, U = (e) => {
-	let t = window.innerWidth, n = H.values.slice(0);
+}, W = (e) => {
+	let t = window.innerWidth, n = U.values.slice(0);
 	n.push(t), n.sort((e, t) => e - t);
-	let r = H.keys[n.indexOf(t)] || "xl";
-	r !== Ce && (Ce = r, e.breakpoint = {
+	let r = U.keys[n.indexOf(t)] || "xl";
+	r !== Se && (Se = r, e.breakpoint = {
 		name: r,
 		xs: r === "xs",
 		sm: r === "sm",
@@ -1238,14 +1238,14 @@ var xe = [
 		xl: r === "xl",
 		width: t
 	}), e.breakpoint.width = window.innerWidth;
-}, W = (e) => {
+}, G = (e) => {
 	let { config: t } = e;
-	if (H = {
+	if (U = {
 		keys: Object.keys(t.breakpoints),
 		values: Object.values(t.breakpoints)
 	}, !document.getElementById("wave-ui-styles")) {
 		let e = document.createElement("style");
-		e.id = "wave-ui-styles", e.innerHTML = G(t);
+		e.id = "wave-ui-styles", e.innerHTML = K(t);
 		let n = document.head.querySelectorAll("style,link[rel=\"stylesheet\"]");
 		if (t.css.prependCss) {
 			let t = n[0];
@@ -1255,21 +1255,21 @@ var xe = [
 			t ? t.after(e) : document.head.appendChild(e);
 		}
 	}
-	U(e), window.addEventListener("resize", () => U(e));
-}, Oe = (e, t, n) => {
+	W(e), window.addEventListener("resize", () => W(e));
+}, De = (e, t, n) => {
 	if (!document.getElementById("wave-ui-palette")) {
 		let e = document.createElement("style");
-		e.id = "wave-ui-palette", e.innerHTML = we(t);
+		e.id = "wave-ui-palette", e.innerHTML = Ce(t);
 		let n = document.head.querySelectorAll("style,link[rel=\"stylesheet\"]")[0];
 		n ? n.before(e) : document.head.appendChild(e);
 	}
 	if (!document.getElementById("wave-ui-colors")) {
 		let t = document.createElement("style");
-		t.id = "wave-ui-colors", t.innerHTML = Te(e, n);
+		t.id = "wave-ui-colors", t.innerHTML = we(e, n);
 		let r = document.head.querySelectorAll("style,link[rel=\"stylesheet\"]")[0];
 		r ? r.before(t) : document.head.appendChild(t);
 	}
-}, G = (e) => {
+}, K = (e) => {
 	let t = Object.entries(e.breakpoints), n = t.map(([e, n], r) => {
 		let [, i = 0] = t[r - 1] || [];
 		return {
@@ -1278,11 +1278,11 @@ var xe = [
 			max: n
 		};
 	}), r = getComputedStyle(document.documentElement);
-	Se.cssScope = (r.getPropertyValue("--w-css-scope") || ".w-app").trim() || ".w-app", Se.baseIncrement = parseInt(r.getPropertyValue("--w-base-increment"), 10);
+	H.cssScope = (r.getPropertyValue("--w-css-scope") || ".w-app").trim() || ".w-app", H.baseIncrement = parseInt(r.getPropertyValue("--w-base-increment"), 10);
 	let i = "";
-	return i += Ee(n, e.css.grid), e.css.breakpointLayoutClasses && (i += De(n)), i;
-}, ke = ["innerHTML"];
-function Ae(t, r, a, u, d, p) {
+	return i += Te(n, e.css.grid), e.css.breakpointLayoutClasses && (i += Ee(n)), i;
+}, Oe = ["innerHTML"];
+function ke(t, r, a, u, d, p) {
 	let m = E("w-alert");
 	return b(), o(n, { to: ".w-app" }, [f(i, {
 		class: _(["w-notification-manager", { "w-notification-manager--left": p.conf.align === "left" }]),
@@ -1297,7 +1297,7 @@ function Ae(t, r, a, u, d, p) {
 			"onUpdate:modelValue": (e) => t._value = e,
 			onClose: t.dismiss
 		}, { ref_for: !0 }, p.notifProps(t)), {
-			default: M(() => [l("div", { innerHTML: t.message }, null, 8, ke)]),
+			default: M(() => [l("div", { innerHTML: t.message }, null, 8, Oe)]),
 			_: 2
 		}, 1040, [
 			"modelValue",
@@ -1309,11 +1309,11 @@ function Ae(t, r, a, u, d, p) {
 }
 //#endregion
 //#region \0plugin-vue:export-helper
-var K = (e, t) => {
+var q = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, je = /* @__PURE__ */ K({
+}, Ae = /* @__PURE__ */ q({
 	name: "w-notification-manager",
 	computed: {
 		conf() {
@@ -1330,7 +1330,7 @@ var K = (e, t) => {
 		let { _value: t, _uid: n, message: r, timeout: i, ...a } = e;
 		return a.dismiss &&= !0, a;
 	} }
-}, [["render", Ae]]), Me = class e {
+}, [["render", ke]]), je = class e {
 	static #e;
 	notifications;
 	_uid;
@@ -1368,15 +1368,15 @@ var K = (e, t) => {
 	dismiss(e) {
 		this.notifications = this.notifications.filter((t) => t._uid !== e);
 	}
-}, Ne = (e) => {
+}, Me = (e) => {
 	let t = document.createElement("div");
 	document.body.appendChild(t);
-	let n = p(je);
+	let n = p(Ae);
 	n.appContext = e._context, C(n, t), t.remove();
 };
 //#endregion
 //#region src/wave-ui/utils/ripple.js
-function Pe(e, t, n = {}) {
+function Ne(e, t, n = {}) {
 	if (typeof window > "u" || typeof document > "u" || !e?.ownerDocument || n.disabled || window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches) return;
 	let r = typeof t.clientX == "number" ? t.clientX : null, i = typeof t.clientY == "number" ? t.clientY : null;
 	if ((r == null || i == null) && t.touches?.length && (r = t.touches[0].clientX, i = t.touches[0].clientY), r == null || i == null) return;
@@ -1391,31 +1391,31 @@ function Pe(e, t, n = {}) {
 		d.parentNode === e && d.remove();
 	}, 600);
 }
-function Fe(e) {
+function Pe(e) {
 	let t = e?.$waveui;
 	return t && typeof t == "object" ? t : { config: { ripple: !0 } };
 }
-function Ie(e, t) {
+function Fe(e, t) {
 	return typeof e == "boolean" ? e : t?.config?.ripple !== !1;
 }
 //#endregion
 //#region src/wave-ui/utils/wave-ripple-directive.js
-function Le(e) {
+function Ie(e) {
 	let t = e.value;
 	return !!(t === !1 || t && typeof t == "object" && t.disabled);
 }
-function Re(e, t) {
-	if (Le(e)) return !1;
-	let n = Fe(t);
-	return e.value === !0 ? Ie(!0, n) : Ie(void 0, n);
+function Le(e, t) {
+	if (Ie(e)) return !1;
+	let n = Pe(t);
+	return e.value === !0 ? Fe(!0, n) : Fe(void 0, n);
 }
-var ze = {
+var Re = {
 	mounted(e, t) {
 		e.classList.add("w-ripple"), e.__waveRippleLastBinding = t;
 		let n = (t) => {
 			if (typeof t.button == "number" && t.button !== 0) return;
 			let n = e.__waveRippleLastBinding;
-			Re(n, n?.instance) && Pe(e, t);
+			Le(n, n?.instance) && Ne(e, t);
 		};
 		e.__waveRippleHandler = n, e.addEventListener("pointerdown", n);
 	},
@@ -1425,43 +1425,62 @@ var ze = {
 	unmounted(e) {
 		e.removeEventListener("pointerdown", e.__waveRippleHandler), delete e.__waveRippleHandler, delete e.__waveRippleLastBinding;
 	}
-};
-//#endregion
-//#region src/wave-ui/utils/focus.js
-function q(e) {
-	e?.focus?.();
-}
-function J(e) {
-	return !(e.isDisabled || e.isReadonly);
-}
+}, ze = new Set(["w-menu", "w-tooltip"]);
 function Be(e, t) {
-	let n = e?.component ?? t?.__vueParentComponent;
+	let n = e?.__vueParentComponent;
 	for (; n;) {
-		let e = n.exposed?.focus ?? n.proxy?.focus;
-		if (typeof e == "function") return e;
+		if (t(n)) return n;
 		n = n.parent;
 	}
 	return null;
 }
-function Ve(e, t) {
-	let n = Be(e, t);
+function Ve(e) {
+	return e?.type?.name ?? e?.proxy?.$options?.name;
+}
+function He(e) {
+	return !!(e?.type?.focusable || e?.proxy?.$options?.focusable);
+}
+function Ue(e) {
+	return ze.has(Ve(e));
+}
+function J(e) {
+	e?.focus?.();
+}
+function We(e) {
+	return !(e.isDisabled || e.isReadonly);
+}
+function Ge(e) {
+	return Be(e, He);
+}
+function Ke(e) {
+	return Be(e, Ue)?.proxy ?? null;
+}
+function qe(e) {
+	let t = Ge(e), n = t?.exposed?.focus ?? t?.proxy?.focus;
 	if (typeof n == "function") {
 		n();
 		return;
 	}
-	q(t);
+	J(e);
+}
+function Je(e) {
+	g(() => qe(e));
 }
-function He(e, t) {
-	g(() => Ve(e, t));
+function Ye(e) {
+	let t = Ke(e);
+	return t ? (e.__waveUiDetachable = t, t.registerAutofocus({ el: e }), !0) : !1;
+}
+function Xe(e) {
+	e.__waveUiDetachable?.unregisterAutofocus(e), delete e.__waveUiDetachable;
 }
 //#endregion
 //#region src/wave-ui/core.js
-var Ue = !1, We = (e) => {
+var Ze = !1, Qe = (e) => {
 	let t = window.matchMedia("(prefers-color-scheme: dark)");
 	e.preferredTheme = t.matches ? "dark" : "light", e.switchTheme(e.preferredTheme), t.addEventListener("change", (t) => {
 		e.preferredTheme = t.matches ? "dark" : "light", e.switchTheme(e.preferredTheme);
 	});
-}, Ge = (e, t) => {
+}, $e = (e, t) => {
 	for (let n in t) if (e.props?.[n]) e.props[n].default = t[n];
 	else {
 		let r = !1;
@@ -1473,7 +1492,7 @@ var Ue = !1, We = (e) => {
 			r || R(`Attempting to set a preset on a prop that doesn't exist: \`${e.name}.${n}\`.`);
 		}
 	}
-}, Ke = class e {
+}, et = class e {
 	$waveui = {
 		breakpoint: {
 			name: "",
@@ -1495,7 +1514,7 @@ var Ue = !1, We = (e) => {
 		switchTheme(e) {
 			this.theme = e, document.documentElement.setAttribute("data-theme", e), document.head.querySelector("#wave-ui-colors")?.remove?.();
 			let t = this.config.colors[this.theme];
-			Oe(t, xe, this.config.css.colorShadeCssVariables), this.colors = de(t, xe);
+			De(t, xe, this.config.css.colorShadeCssVariables), this.colors = de(t, xe);
 		},
 		setAppClasses(...e) {
 			let t = document.querySelector(".w-app");
@@ -1503,32 +1522,37 @@ var Ue = !1, We = (e) => {
 		}
 	};
 	static install(t, n = {}) {
-		t.directive("focus", { mounted: (e, t, n) => He(n, e) }), t.directive("scroll", { mounted: (e, t) => {
+		t.directive("focus", {
+			mounted: (e) => {
+				Ye(e) || Je(e);
+			},
+			unmounted: (e) => Xe(e)
+		}), t.directive("scroll", { mounted: (e, t) => {
 			let n = (r) => {
 				t.value(r, e) && window.removeEventListener("scroll", n);
 			};
 			window.addEventListener("scroll", n);
-		} }), t.directive("waveRipple", ze);
+		} }), t.directive("waveRipple", Re);
 		let { components: r = {} } = n || {};
 		for (let e in r) {
 			let i = r[e];
-			n.presets?.[i.name] && Ge(i, n.presets[i.name]), t.component(i.name, i);
+			n.presets?.[i.name] && $e(i, n.presets[i.name]), t.component(i.name, i);
 		}
 		t.mixin({ beforeMount() {
-			if (!Ue) {
-				Ue = !0;
+			if (!Ze) {
+				Ze = !0;
 				let e = m("$waveui"), { config: n } = e, r = document.querySelector(n.on) || document.body;
 				if (r.classList.add("w-app"), n.css.appClasses) {
 					let e = typeof n.css.appClasses == "string" ? n.css.appClasses.split(" ").filter((e) => e) : n.css.appClasses;
 					e.length && r.classList.add(...e);
 				}
-				n.theme === "auto" ? We(e) : e.switchTheme(n.theme, !0), W(e), Ne(t), t._context.mixins.find((e) => e.mounted &&= void 0);
+				n.theme === "auto" ? Qe(e) : e.switchTheme(n.theme, !0), G(e), Me(t), t._context.mixins.find((e) => e.mounted &&= void 0);
 			}
 		} }), new e(t, n);
 	}
 	constructor(e, t = {}) {
 		if (e.config.globalProperties.$waveui) return;
-		if (this.$waveui._notificationManager = new Me(), t.theme ||= "light", t.colors) {
+		if (this.$waveui._notificationManager = new je(), t.theme ||= "light", t.colors) {
 			let e = { ...t.colors };
 			t.colors.light || (t.colors.light = e), t.colors.dark || (t.colors.dark = e), t.colors = {
 				light: t.colors.light,
@@ -1550,7 +1574,7 @@ var Ue = !1, We = (e) => {
 		default: void 0
 	} },
 	computed: { rippleActive() {
-		return Ie(this.noRipple ? !1 : void 0, this.$waveui);
+		return Fe(this.noRipple ? !1 : void 0, this.$waveui);
 	} },
 	methods: { onRipple(e, t, n) {
 		if (!this.rippleActive || !e) return;
@@ -1559,20 +1583,20 @@ var Ue = !1, We = (e) => {
 			let t = e.target;
 			r = (t?.nodeType === 1 ? t : t?.parentElement)?.closest?.(".w-ripple") ?? null;
 		}
-		!r?.getBoundingClientRect && this.$el instanceof Element && this.$el.classList?.contains("w-ripple") && (r = this.$el), r?.getBoundingClientRect && Pe(r, e, n);
+		!r?.getBoundingClientRect && this.$el instanceof Element && this.$el.classList?.contains("w-ripple") && (r = this.$el), r?.getBoundingClientRect && Ne(r, e, n);
 	} }
-}, qe = { class: "w-accordion__item-content" };
-function Je(e, t, n, r, i, a) {
-	return b(), c("div", qe, [T(e.$slots, "default")]);
+}, tt = { class: "w-accordion__item-content" };
+function nt(e, t, n, r, i, a) {
+	return b(), c("div", tt, [T(e.$slots, "default")]);
 }
-var Ye = /* @__PURE__ */ K({
+var rt = /* @__PURE__ */ q({
 	name: "accordion-content",
 	props: { item: {
 		type: Object,
 		default: () => ({})
 	} }
-}, [["render", Je]]), Xe = ["aria-expanded"], Ze = ["tabindex"], Qe = ["innerHTML"], $e = ["innerHTML"], et = ["innerHTML"], tt = ["innerHTML"], nt = ["innerHTML"];
-function rt(e, n, r, i, a, u) {
+}, [["render", nt]]), it = ["aria-expanded"], at = ["tabindex"], ot = ["innerHTML"], st = ["innerHTML"], ct = ["innerHTML"], lt = ["innerHTML"], ut = ["innerHTML"];
+function dt(e, n, r, i, a, u) {
 	let d = E("w-button"), p = E("accordion-content"), m = E("w-transition-expand");
 	return b(), c("div", {
 		class: _(["w-accordion__item", u.itemClasses]),
@@ -1611,7 +1635,7 @@ function rt(e, n, r, i, a, u) {
 		}, () => [l("div", {
 			class: "grow",
 			innerHTML: u.accordionItem[u.options.itemTitleKey]
-		}, null, 8, Qe)]),
+		}, null, 8, ot)]),
 		u.options.expandIcon && u.options.expandIconRight ? (b(), o(d, {
 			key: 1,
 			class: _(["w-accordion__expand-icon", {
@@ -1623,7 +1647,7 @@ function rt(e, n, r, i, a, u) {
 			onKeypress: n[2] ||= F(() => {}, ["stop"]),
 			onClick: n[3] ||= F((e) => !u.accordionItem._disabled && u.toggleItem(u.accordionItem, e), ["stop"])
 		}, null, 8, ["icon", "class"])) : s("", !0)
-	], 42, Ze), u.options.keepInDom ? (b(), o(m, {
+	], 42, at), u.options.keepInDom ? (b(), o(m, {
 		key: 0,
 		y: "",
 		onAfterLeave: n[8] ||= (e) => u.onEndOfCollapse(u.accordionItem),
@@ -1638,12 +1662,12 @@ function rt(e, n, r, i, a, u) {
 				item: u.getOriginalItem(u.accordionItem),
 				expanded: u.accordionItem._expanded,
 				index: u.accordionItem._index + 1
-			}, () => [l("div", { innerHTML: u.accordionItem[u.options.itemContentKey] }, null, 8, $e)]) : T(e.$slots, "default", {
+			}, () => [l("div", { innerHTML: u.accordionItem[u.options.itemContentKey] }, null, 8, st)]) : T(e.$slots, "default", {
 				key: 1,
 				item: u.getOriginalItem(u.accordionItem),
 				expanded: u.accordionItem._expanded,
 				index: u.accordionItem._index + 1
-			}, () => [l("div", { innerHTML: u.accordionItem[u.options.itemContentKey] }, null, 8, et)])]),
+			}, () => [l("div", { innerHTML: u.accordionItem[u.options.itemContentKey] }, null, 8, ct)])]),
 			_: 3
 		}, 8, ["item", "class"]), [[oe, u.accordionItem._expanded]])]),
 		_: 3
@@ -1663,25 +1687,26 @@ function rt(e, n, r, i, a, u) {
 				item: u.getOriginalItem(u.accordionItem),
 				expanded: u.accordionItem._expanded,
 				index: u.accordionItem._index + 1
-			}, () => [l("div", { innerHTML: u.accordionItem[u.options.itemContentKey] }, null, 8, tt)]) : T(e.$slots, "default", {
+			}, () => [l("div", { innerHTML: u.accordionItem[u.options.itemContentKey] }, null, 8, lt)]) : T(e.$slots, "default", {
 				key: 1,
 				item: u.getOriginalItem(u.accordionItem),
 				expanded: u.accordionItem._expanded,
 				index: u.accordionItem._index + 1
-			}, () => [l("div", { innerHTML: u.accordionItem[u.options.itemContentKey] }, null, 8, nt)])]),
+			}, () => [l("div", { innerHTML: u.accordionItem[u.options.itemContentKey] }, null, 8, ut)])]),
 			_: 3
 		}, 8, ["item", "class"])) : s("", !0)], 1032, ["exclude"]))]),
 		_: 3
-	}, 8, ["duration"]))], 10, Xe);
+	}, 8, ["duration"]))], 10, it);
 }
-var it = /* @__PURE__ */ K({
+var ft = /* @__PURE__ */ q({
 	name: "w-accordion-item",
+	focusable: !0,
 	expose: ["focus"],
 	mixins: [X],
 	setup() {
-		return { accordionItemUid: ae() };
+		return { accordionItemUid: A() };
 	},
-	components: { AccordionContent: Ye },
+	components: { AccordionContent: rt },
 	props: {
 		title: { type: String },
 		content: { type: String },
@@ -1713,7 +1738,7 @@ var it = /* @__PURE__ */ K({
 				let t = this.getAccordionNoRipple?.();
 				e = typeof t == "boolean" ? t : void 0;
 			}
-			return Ie(e ? !1 : void 0, this.$waveui);
+			return Fe(e ? !1 : void 0, this.$waveui);
 		},
 		accordionTitleClasses() {
 			return {
@@ -1738,7 +1763,7 @@ var it = /* @__PURE__ */ K({
 	},
 	methods: {
 		focus() {
-			this.accordionItem._disabled || q(this.$el.querySelector(".w-accordion__item-title"));
+			this.accordionItem._disabled || J(this.$el.querySelector(".w-accordion__item-title"));
 		},
 		onAccordionTitlePointerDown(e) {
 			this.accordionItem._disabled || e.target.closest?.(".w-accordion__expand-icon") || this.onRipple(e);
@@ -1760,10 +1785,10 @@ var it = /* @__PURE__ */ K({
 	beforeUnmount() {
 		this.unregisterItem(this.accordionItemUid);
 	}
-}, [["render", rt]]);
+}, [["render", dt]]);
 //#endregion
 //#region src/wave-ui/components/w-accordion/index.vue?vue&type=template&lang.js
-function at(t, n, r, i, a, l) {
+function pt(t, n, r, i, a, l) {
 	let u = E("w-accordion-item");
 	return b(), c("div", { class: _(["w-accordion", l.accordionClasses]) }, [l.accordionItemsProvided ? T(t.$slots, "default", { key: 0 }) : (r.items || []).length ? (b(!0), c(e, { key: 1 }, w(r.items.length ? r.items : t.accordionItems, (e, r) => (b(), o(u, {
 		key: r,
@@ -1805,7 +1830,7 @@ function at(t, n, r, i, a, l) {
 		"disabled"
 	]))), 128)) : s("", !0)], 2);
 }
-var ot = /* @__PURE__ */ K({
+var mt = /* @__PURE__ */ q({
 	name: "w-accordion",
 	mixins: [X],
 	props: {
@@ -1873,7 +1898,7 @@ var ot = /* @__PURE__ */ K({
 			default: !1
 		}
 	},
-	components: { WAccordionItem: it },
+	components: { WAccordionItem: ft },
 	emits: [
 		"input",
 		"update:modelValue",
@@ -1930,7 +1955,7 @@ var ot = /* @__PURE__ */ K({
 	},
 	methods: {
 		hasAccordionItemVNodes(t = []) {
-			return t.some((t) => t ? t.type === it || t.type?.name === "w-accordion-item" ? !0 : t.type === e && Array.isArray(t.children) ? this.hasAccordionItemVNodes(t.children) : !1 : !1);
+			return t.some((t) => t ? t.type === ft || t.type?.name === "w-accordion-item" ? !0 : t.type === e && Array.isArray(t.children) ? this.hasAccordionItemVNodes(t.children) : !1 : !1);
 		},
 		getAccordionItem(e) {
 			return this.accordionItemsById[e];
@@ -1973,8 +1998,8 @@ var ot = /* @__PURE__ */ K({
 		}
 		e.forEach((e, t) => (this.accordionItems[t] || {})._expanded = e);
 	} }
-}, [["render", at]]), st = { class: "w-alert__content" };
-function ct(t, n, r, i, a, u) {
+}, [["render", pt]]), ht = { class: "w-alert__content" };
+function gt(t, n, r, i, a, u) {
 	let f = E("w-icon"), p = E("w-button");
 	return a.show ? (b(), c("div", {
 		key: 0,
@@ -1987,7 +2012,7 @@ function ct(t, n, r, i, a, u) {
 			default: M(() => [d(O(u.type ? u.typeIcon : r.icon), 1)]),
 			_: 1
 		})) : s("", !0),
-		l("div", st, [T(t.$slots, "default")]),
+		l("div", ht, [T(t.$slots, "default")]),
 		r.dismiss ? (b(), o(p, {
 			key: 1,
 			class: "w-alert__dismiss",
@@ -2001,7 +2026,7 @@ function ct(t, n, r, i, a, u) {
 		})) : s("", !0)
 	], 64)) : T(t.$slots, "default", { key: 1 })], 2)) : s("", !0);
 }
-var lt = /* @__PURE__ */ K({
+var _t = /* @__PURE__ */ q({
 	name: "w-alert",
 	props: {
 		modelValue: { default: !0 },
@@ -2079,11 +2104,11 @@ var lt = /* @__PURE__ */ K({
 	watch: { modelValue(e) {
 		this.show = e;
 	} }
-}, [["render", ct]]);
+}, [["render", gt]]);
 //#endregion
 //#region src/wave-ui/mixins/form-elements.js
 function Z() {
-	return { waveUiUseId: ae() };
+	return { waveUiUseId: A() };
 }
 var Q = {
 	inject: {
@@ -2131,19 +2156,27 @@ var Q = {
 	methods: { validate() {
 		this.$refs.formEl.validate(this);
 	} }
-}, $ = { methods: { focus() {
-	if (!J(this)) return;
-	let e = this.$options.focusTargetRef || "input", t = this.$refs[e];
-	t ? q(t) : this.$nextTick(() => q(this.$refs[e]));
-} } }, ut = ["for"], dt = ["innerHTML"], ft = ["innerHTML"], pt = [
+}, $ = {
+	focusable: !0,
+	methods: { focus() {
+		if (!We(this)) return;
+		let e = this.$options.focusTargetRef || "input", t = () => {
+			let t = this.$refs[e];
+			return t && J(t), !!t;
+		};
+		t() || this.$nextTick(() => {
+			t() || this.$nextTick(() => t());
+		});
+	} }
+}, vt = ["for"], yt = ["innerHTML"], bt = ["innerHTML"], xt = [
 	"id",
 	"value",
 	"name",
 	"disabled",
 	"readonly",
 	"tabindex"
-], mt = ["for"], ht = ["innerHTML"], gt = ["innerHTML"], _t = ["for"];
-function vt(t, n, r, i, a, u) {
+], St = ["for"], Ct = ["innerHTML"], wt = ["innerHTML"], Tt = ["for"];
+function Et(t, n, r, i, a, u) {
 	let p = E("w-icon"), m = E("w-button"), g = E("w-list"), v = E("w-menu");
 	return b(), o(D(t.formRegister ? "w-form-element" : "div"), h({ ref: "formEl" }, t.formRegister && {
 		validators: t.validators,
@@ -2165,7 +2198,7 @@ function vt(t, n, r, i, a, u) {
 				key: 0,
 				class: _(["w-autocomplete__label w-autocomplete__label--left w-form-el-shakable", t.labelClasses]),
 				for: t.inputId
-			}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, ut)) : s("", !0)], 64)) : s("", !0),
+			}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, vt)) : s("", !0)], 64)) : s("", !0),
 			f(v, h({
 				ref: "menu",
 				modelValue: t.menuOpen,
@@ -2201,7 +2234,7 @@ function vt(t, n, r, i, a, u) {
 						item: M(({ item: e }) => [T(t.$slots, "item", {
 							item: e,
 							highlighted: t.highlightedItem === e.uid
-						}, () => [l("span", { innerHTML: e[r.itemLabelKey] }, null, 8, ht)])]),
+						}, () => [l("span", { innerHTML: e[r.itemLabelKey] }, null, 8, Ct)])]),
 						_: 3
 					}, 8, [
 						"items",
@@ -2217,7 +2250,7 @@ function vt(t, n, r, i, a, u) {
 					}, [T(t.$slots, "no-match", {}, () => [l("div", {
 						class: "caption",
 						innerHTML: r.noMatch ?? "No match."
-					}, null, 8, gt)])], 2)),
+					}, null, 8, wt)])], 2)),
 					t.$slots["extra-item"] ? (b(), c("div", {
 						key: 2,
 						class: _(["w-autocomplete__extra-item", { highlighted: t.highlightedItem === "extra-item" }]),
@@ -2244,7 +2277,7 @@ function vt(t, n, r, i, a, u) {
 					}, [T(t.$slots, "selection", {
 						item: e,
 						unselect: () => u.unselectItem(n)
-					}, () => [l("span", { innerHTML: e[r.itemLabelKey] }, null, 8, dt), f(m, {
+					}, () => [l("span", { innerHTML: e[r.itemLabelKey] }, null, 8, yt), f(m, {
 						onClick: F((e) => u.unselectItem(n), ["stop"]),
 						icon: "wi-cross",
 						xs: "",
@@ -2255,7 +2288,7 @@ function vt(t, n, r, i, a, u) {
 						key: 1,
 						class: "w-autocomplete__placeholder",
 						innerHTML: r.placeholder
-					}, null, 8, ft)) : s("", !0),
+					}, null, 8, bt)) : s("", !0),
 					l("input", h({
 						class: "w-autocomplete__input",
 						ref: "input",
@@ -2265,12 +2298,12 @@ function vt(t, n, r, i, a, u) {
 						disabled: t.isDisabled || null,
 						readonly: t.isReadonly || null,
 						tabindex: t.tabindex || null
-					}, k(u.inputEventListeners, !0), u.inputAttrs), null, 16, pt),
+					}, k(u.inputEventListeners, !0), u.inputAttrs), null, 16, xt),
 					r.labelPosition === "inside" && u.showLabelInside ? (b(), c(e, { key: 2 }, [t.$slots.default || r.label ? (b(), c("label", {
 						key: 0,
 						class: _(["w-autocomplete__label w-autocomplete__label--inside w-form-el-shakable", t.labelClasses]),
 						for: t.inputId
-					}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, mt)) : s("", !0)], 64)) : s("", !0),
+					}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, St)) : s("", !0)], 64)) : s("", !0),
 					T(t.$slots, "icon-right", {}, () => [r.innerIconRight ? (b(), o(p, {
 						key: 0,
 						class: "w-autocomplete__icon w-autocomplete__icon--inner-right",
@@ -2293,7 +2326,7 @@ function vt(t, n, r, i, a, u) {
 				key: 0,
 				class: _(["w-autocomplete__label w-autocomplete__label--right w-form-el-shakable", t.labelClasses]),
 				for: t.inputId
-			}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, _t)) : s("", !0)], 64)) : s("", !0)
+			}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, Tt)) : s("", !0)], 64)) : s("", !0)
 		]),
 		_: 3
 	}, 16, [
@@ -2304,7 +2337,7 @@ function vt(t, n, r, i, a, u) {
 		"style"
 	]);
 }
-var yt = /* @__PURE__ */ K({
+var Dt = /* @__PURE__ */ q({
 	name: "w-autocomplete",
 	expose: ["focus"],
 	mixins: [Q, $],
@@ -2599,9 +2632,9 @@ var yt = /* @__PURE__ */ K({
 			this.menuOpen && e.length !== t.length && this.$nextTick(() => this.$refs.menu?.computeDetachableCoords());
 		}
 	}
-}, [["render", vt]]), bt = { class: "w-badge-wrap" };
-function xt(e, t, n, i, a, o) {
-	return b(), c("div", bt, [T(e.$slots, "default"), f(r, { name: `${n.transition}` }, {
+}, [["render", Et]]), Ot = { class: "w-badge-wrap" };
+function kt(e, t, n, i, a, o) {
+	return b(), c("div", Ot, [T(e.$slots, "default"), f(r, { name: `${n.transition}` }, {
 		default: M(() => [n.modelValue ? (b(), c("div", {
 			key: 0,
 			class: _(["w-badge", o.classes]),
@@ -2614,7 +2647,7 @@ function xt(e, t, n, i, a, o) {
 		_: 3
 	}, 8, ["name"])]);
 }
-var St = /* @__PURE__ */ K({
+var At = /* @__PURE__ */ q({
 	name: "w-badge",
 	props: {
 		modelValue: { default: !0 },
@@ -2680,8 +2713,8 @@ var St = /* @__PURE__ */ K({
 			return this.forcedSize && `font-size: ${this.forcedSize}`;
 		}
 	}
-}, [["render", xt]]), Ct = ["innerHTML"];
-function wt(t, n, r, i, a, l) {
+}, [["render", kt]]), jt = ["innerHTML"];
+function Mt(t, n, r, i, a, l) {
 	let u = E("w-icon");
 	return b(), c("div", { class: _(["w-breadcrumbs", l.classes]) }, [(b(!0), c(e, null, w(r.items, (n, i) => (b(), c(e, null, [i && t.$slots.separator ? (b(), c("span", {
 		class: _(["w-breadcrumbs__separator", r.separatorColor]),
@@ -2731,9 +2764,9 @@ function wt(t, n, r, i, a, l) {
 	}) : (b(), c("span", {
 		key: `${i}f`,
 		innerHTML: n[r.itemLabelKey]
-	}, null, 8, Ct))], 64))), 256))], 2);
+	}, null, 8, jt))], 64))), 256))], 2);
 }
-var Tt = /* @__PURE__ */ K({
+var Nt = /* @__PURE__ */ q({
 	name: "w-breadcrumbs",
 	mixins: [X],
 	props: {
@@ -2780,11 +2813,11 @@ var Tt = /* @__PURE__ */ K({
 			return { [`size--${this.size}`]: !0 };
 		}
 	}
-}, [["render", wt]]), Et = {
+}, [["render", Mt]]), Pt = {
 	key: 0,
 	class: "w-button__loader"
 };
-function Dt(e, t, n, i, a, u) {
+function Ft(e, t, n, i, a, u) {
 	let p = E("w-icon");
 	return b(), o(D(!n.disabled && n.route ? "a" : "button"), h({
 		class: ["w-button", u.classes],
@@ -2799,7 +2832,7 @@ function Dt(e, t, n, i, a, u) {
 			default: M(() => [d(O(n.icon), 1)]),
 			_: 1
 		}, 16)) : T(e.$slots, "default", { key: 1 }), f(r, { name: "scale-fade" }, {
-			default: M(() => [n.loading ? (b(), c("div", Et, [T(e.$slots, "loading", {}, () => [t[0] ||= l("svg", { viewBox: "0 0 40 40" }, [l("circle", {
+			default: M(() => [n.loading ? (b(), c("div", Pt, [T(e.$slots, "loading", {}, () => [t[0] ||= l("svg", { viewBox: "0 0 40 40" }, [l("circle", {
 				cx: "20",
 				cy: "20",
 				r: "18",
@@ -2820,7 +2853,7 @@ function Dt(e, t, n, i, a, u) {
 		"onPointerdown"
 	]);
 }
-var Ot = /* @__PURE__ */ K({
+var It = /* @__PURE__ */ q({
 	inheritAttrs: !1,
 	mixins: [X],
 	props: {
@@ -2923,11 +2956,11 @@ var Ot = /* @__PURE__ */ K({
 			};
 		}
 	}
-}, [["render", Dt]]), kt = ["innerHTML"];
-function At(e, t, n, r, i, a) {
+}, [["render", Ft]]), Lt = ["innerHTML"];
+function Rt(e, t, n, r, i, a) {
 	let s = E("button-partial");
 	return n.tooltip ? (b(), o(D("w-tooltip"), v(h({ key: 0 }, n.tooltipProps)), {
-		tooltip: M(() => [l("div", { innerHTML: n.tooltip }, null, 8, kt)]),
+		tooltip: M(() => [l("div", { innerHTML: n.tooltip }, null, 8, Lt)]),
 		default: M(() => [f(s, h({ ref: "button" }, a.buttonProps), {
 			default: M(() => [T(e.$slots, "default")]),
 			_: 3
@@ -2942,8 +2975,9 @@ function At(e, t, n, r, i, a) {
 		_: 3
 	}, 16));
 }
-var jt = /* @__PURE__ */ K({
+var zt = /* @__PURE__ */ q({
 	name: "w-button",
+	focusable: !0,
 	expose: ["focus"],
 	inheritAttrs: !1,
 	props: {
@@ -2995,7 +3029,7 @@ var jt = /* @__PURE__ */ K({
 			default: void 0
 		}
 	},
-	components: { ButtonPartial: Ot },
+	components: { ButtonPartial: It },
 	emits: [],
 	computed: { buttonProps() {
 		let { tooltip: e, tooltipProps: t = {}, ...n } = this.$props;
@@ -3005,10 +3039,10 @@ var jt = /* @__PURE__ */ K({
 		};
 	} },
 	methods: { focus() {
-		this.disabled || q(this.$refs.button?.$el);
+		this.disabled || J(this.$refs.button?.$el);
 	} }
-}, [["render", At]]), Mt = ["innerHTML"];
-function Nt(e, t, n, r, i, a) {
+}, [["render", Rt]]), Bt = ["innerHTML"];
+function Vt(e, t, n, r, i, a) {
 	let u = E("w-image");
 	return b(), c("div", { class: _(["w-card", a.classes]) }, [
 		e.$slots.title ? (b(), c("div", {
@@ -3024,7 +3058,7 @@ function Nt(e, t, n, r, i, a) {
 				...a.titleClasses
 			}]),
 			innerHTML: n.title
-		}, null, 10, Mt)) : s("", !0),
+		}, null, 10, Bt)) : s("", !0),
 		n.image ? (b(), o(u, h({
 			key: 2,
 			class: "w-card__image",
@@ -3040,7 +3074,7 @@ function Nt(e, t, n, r, i, a) {
 		}, [T(e.$slots, "actions")], 2)) : s("", !0)
 	], 2);
 }
-var Pt = /* @__PURE__ */ K({
+var Ht = /* @__PURE__ */ q({
 	name: "w-card",
 	props: {
 		color: { type: String },
@@ -3100,7 +3134,7 @@ var Pt = /* @__PURE__ */ K({
 			};
 		}
 	}
-}, [["render", Nt]]), Ft = [
+}, [["render", Vt]]), Ut = [
 	"id",
 	"name",
 	"checked",
@@ -3108,8 +3142,8 @@ var Pt = /* @__PURE__ */ K({
 	"required",
 	"tabindex",
 	"aria-checked"
-], It = ["for"], Lt = ["for", "innerHTML"], Rt = ["for"], zt = ["for", "innerHTML"];
-function Bt(t, n, r, i, a, u) {
+], Wt = ["for"], Gt = ["for", "innerHTML"], Kt = ["for"], qt = ["for", "innerHTML"];
+function Jt(t, n, r, i, a, u) {
 	return b(), o(D(t.formRegister && !u.wCheckboxes ? "w-form-element" : "div"), h({ ref: "formEl" }, t.formRegister && {
 		validators: t.validators,
 		inputValue: a.isChecked,
@@ -3140,17 +3174,17 @@ function Bt(t, n, r, i, a, u) {
 				onKeypress: n[3] ||= P((...e) => u.onInput && u.onInput(...e), ["enter"]),
 				"aria-checked": a.isChecked || "false",
 				role: "checkbox"
-			}, null, 40, Ft),
+			}, null, 40, Ut),
 			u.hasLabel && r.labelOnLeft ? (b(), c(e, { key: 0 }, [t.$slots.default ? (b(), c("label", {
 				key: 0,
 				class: _(["w-checkbox__label w-form-el-shakable pr2", t.labelClasses]),
 				for: t.inputId
-			}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, It)) : r.label ? (b(), c("label", {
+			}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, Wt)) : r.label ? (b(), c("label", {
 				key: 1,
 				class: _(["w-checkbox__label w-form-el-shakable pr2", t.labelClasses]),
 				for: t.inputId,
 				innerHTML: r.label
-			}, null, 10, Lt)) : s("", !0)], 64)) : s("", !0),
+			}, null, 10, Gt)) : s("", !0)], 64)) : s("", !0),
 			l("div", {
 				class: _(["w-checkbox__input", this.color]),
 				onClick: n[4] ||= (e) => {
@@ -3161,17 +3195,17 @@ function Bt(t, n, r, i, a, u) {
 				key: 0,
 				class: _(["w-checkbox__label w-form-el-shakable pl2", t.labelClasses]),
 				for: t.inputId
-			}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, Rt)) : r.label ? (b(), c("label", {
+			}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, Kt)) : r.label ? (b(), c("label", {
 				key: 1,
 				class: _(["w-checkbox__label w-form-el-shakable pl2", t.labelClasses]),
 				for: t.inputId,
 				innerHTML: r.label
-			}, null, 10, zt)) : s("", !0)], 64)) : s("", !0)
+			}, null, 10, qt)) : s("", !0)], 64)) : s("", !0)
 		]),
 		_: 3
 	}, 16, ["valid", "class"]);
 }
-var Vt = /* @__PURE__ */ K({
+var Yt = /* @__PURE__ */ q({
 	name: "w-checkbox",
 	expose: ["focus"],
 	mixins: [Q, $],
@@ -3251,8 +3285,8 @@ var Vt = /* @__PURE__ */ K({
 	watch: { modelValue(e) {
 		this.isChecked = e;
 	} }
-}, [["render", Bt]]), Ht = ["innerHTML"];
-function Ut(t, n, r, i, a, l) {
+}, [["render", Jt]]), Xt = ["innerHTML"];
+function Zt(t, n, r, i, a, l) {
 	let u = E("w-checkbox");
 	return b(), o(D(t.formRegister ? "w-form-element" : "div"), h({ ref: "formEl" }, t.formRegister && {
 		validators: t.validators,
@@ -3295,7 +3329,7 @@ function Ut(t, n, r, i, a, l) {
 			}) : e.label ? (b(), c("div", {
 				key: 1,
 				innerHTML: e.label
-			}, null, 8, Ht)) : s("", !0)]),
+			}, null, 8, Xt)) : s("", !0)]),
 			_: 2
 		}, 1040, [
 			"model-value",
@@ -3314,8 +3348,9 @@ function Ut(t, n, r, i, a, l) {
 		"class"
 	]);
 }
-var Wt = /* @__PURE__ */ K({
+var Qt = /* @__PURE__ */ q({
 	name: "w-checkboxes",
+	focusable: !0,
 	expose: ["focus"],
 	mixins: [Q],
 	setup() {
@@ -3392,7 +3427,7 @@ var Wt = /* @__PURE__ */ K({
 	},
 	methods: {
 		focus() {
-			J(this) && [].concat(this.$refs.item || []).filter(Boolean).find((e) => !e.isDisabled && !e.isReadonly)?.focus?.();
+			We(this) && [].concat(this.$refs.item || []).filter(Boolean).find((e) => !e.isDisabled && !e.isReadonly)?.focus?.();
 		},
 		reset() {
 			this.checkboxItems.forEach((e) => e._isChecked = null), this.$emit("update:modelValue", []), this.$emit("input", []);
@@ -3406,10 +3441,10 @@ var Wt = /* @__PURE__ */ K({
 			return this.items[e._index];
 		}
 	}
-}, [["render", Ut]]);
+}, [["render", Zt]]);
 //#endregion
 //#region src/wave-ui/components/w-confirm.vue?vue&type=template&lang.js
-function Gt(e, t, n, r, i, a) {
+function $t(e, t, n, r, i, a) {
 	let c = E("w-button"), u = E("w-flex"), p = E("w-menu"), m = ne("focus");
 	return b(), o(p, h({
 		modelValue: e.showPopup,
@@ -3449,7 +3484,7 @@ function Gt(e, t, n, r, i, a) {
 		_: 3
 	}, 16, ["modelValue", "disable"]);
 }
-var Kt = /* @__PURE__ */ K({
+var en = /* @__PURE__ */ q({
 	name: "w-confirm",
 	inheritAttrs: !1,
 	props: {
@@ -3575,16 +3610,16 @@ var Kt = /* @__PURE__ */ K({
 			this.$emit("confirm"), this.showPopup = !1;
 		}
 	}
-}, [["render", Gt]]);
+}, [["render", $t]]);
 //#endregion
 //#region src/wave-ui/components/w-date-picker.vue?vue&type=template&lang.js
-function qt(e, t, n, r, i, a) {
+function tn(e, t, n, r, i, a) {
 	return b(), c("div", {
 		class: _(["w-date-picker", a.classes]),
 		style: y(a.styles)
 	}, [T(e.$slots, "default")], 6);
 }
-var Jt = /* @__PURE__ */ K({
+var nn = /* @__PURE__ */ q({
 	name: "w-date-picker",
 	props: {
 		dark: { type: Boolean },
@@ -3602,10 +3637,10 @@ var Jt = /* @__PURE__ */ K({
 			return !1;
 		}
 	}
-}, [["render", qt]]);
+}, [["render", tn]]);
 //#endregion
 //#region src/wave-ui/components/w-dialog.vue?vue&type=template&lang.js
-function Yt(e, t, n, i, a, s) {
+function rn(e, t, n, i, a, s) {
 	let c = E("w-card"), l = E("w-overlay");
 	return b(), o(l, {
 		class: _(["w-dialog", s.classes]),
@@ -3667,7 +3702,7 @@ function Yt(e, t, n, i, a, s) {
 		"class"
 	]);
 }
-var Xt = /* @__PURE__ */ K({
+var an = /* @__PURE__ */ q({
 	name: "w-dialog",
 	expose: ["focus"],
 	props: {
@@ -3768,15 +3803,15 @@ var Xt = /* @__PURE__ */ K({
 	watch: { modelValue(e) {
 		this.showWrapper = e, this.showContent = e;
 	} }
-}, [["render", Yt]]), Zt = ["role", "aria-orientation"];
-function Qt(e, t, n, r, i, a) {
+}, [["render", rn]]), on = ["role", "aria-orientation"];
+function sn(e, t, n, r, i, a) {
 	return b(), c("div", {
 		class: _(["w-divider", a.classes]),
 		role: e.$slots.default ? null : "presentation",
 		"aria-orientation": n.vertical ? "vertical" : "horizontal"
-	}, [T(e.$slots, "default")], 10, Zt);
+	}, [T(e.$slots, "default")], 10, on);
 }
-var $t = /* @__PURE__ */ K({
+var cn = /* @__PURE__ */ q({
 	name: "w-divider",
 	props: {
 		vertical: { type: Boolean },
@@ -3794,8 +3829,8 @@ var $t = /* @__PURE__ */ K({
 			"w-divider--light": this.light
 		};
 	} }
-}, [["render", Qt]]), en = { class: "w-drawer-wrap__pushable" };
-function tn(t, n, i, a, u, d) {
+}, [["render", sn]]), ln = { class: "w-drawer-wrap__pushable" };
+function un(t, n, i, a, u, d) {
 	let p = E("w-overlay");
 	return u.showWrapper || i.pushContent ? (b(), c("div", {
 		key: 0,
@@ -3804,7 +3839,7 @@ function tn(t, n, i, a, u, d) {
 		key: 0,
 		class: "w-drawer-wrap__track",
 		style: y(d.trackStyles)
-	}, [l("div", en, [i.noOverlay ? s("", !0) : (b(), o(p, {
+	}, [l("div", ln, [i.noOverlay ? s("", !0) : (b(), o(p, {
 		key: 0,
 		ref: "overlay",
 		modelValue: u.showDrawer,
@@ -3887,12 +3922,12 @@ function tn(t, n, i, a, u, d) {
 }
 //#endregion
 //#region src/wave-ui/components/w-drawer.vue
-var nn = {
+var dn = {
 	left: "right",
 	right: "left",
 	top: "down",
 	bottom: "up"
-}, rn = /* @__PURE__ */ K({
+}, fn = /* @__PURE__ */ q({
 	name: "w-drawer",
 	expose: ["focus"],
 	props: {
@@ -3999,12 +4034,12 @@ var nn = {
 			return !this.showWrapper;
 		},
 		transitionName() {
-			return `slide-${nn[this.position]}`;
+			return `slide-${dn[this.position]}`;
 		}
 	},
 	methods: {
 		focus() {
-			this.$refs.overlay ? this.$refs.overlay.focus() : q(this.$refs.drawer?.$el || this.$refs.drawer);
+			this.$refs.overlay ? this.$refs.overlay.focus() : J(this.$refs.drawer?.$el || this.$refs.drawer);
 		},
 		onBeforeClose() {
 			this.$emit("before-close");
@@ -4019,16 +4054,16 @@ var nn = {
 	watch: { modelValue(e) {
 		e && (this.showWrapper = !0), this.showDrawer = e;
 	} }
-}, [["render", tn]]);
+}, [["render", un]]);
 //#endregion
 //#region src/wave-ui/components/w-flex.vue?vue&type=template&lang.js
-function an(e, t, n, r, i, a) {
+function pn(e, t, n, r, i, a) {
 	return b(), o(D(n.tag), { class: _(["w-flex", a.classes]) }, {
 		default: M(() => [T(e.$slots, "default")]),
 		_: 3
 	}, 8, ["class"]);
 }
-var on = /* @__PURE__ */ K({
+var mn = /* @__PURE__ */ q({
 	name: "w-flex",
 	props: {
 		tag: {
@@ -4079,10 +4114,10 @@ var on = /* @__PURE__ */ K({
 			[`gap${this.gap}`]: ~~this.gap
 		};
 	} }
-}, [["render", an]]);
+}, [["render", pn]]);
 //#endregion
 //#region src/wave-ui/components/w-form.vue?vue&type=template&lang.js
-function sn(e, t, n, r, i, a) {
+function hn(e, t, n, r, i, a) {
 	return b(), c("form", {
 		class: _(["w-form", a.classes]),
 		onSubmit: t[0] ||= (...e) => a.onSubmit && a.onSubmit(...e),
@@ -4092,10 +4127,10 @@ function sn(e, t, n, r, i, a) {
 }
 //#endregion
 //#region src/wave-ui/components/w-form.vue
-var cn = async (e, t) => {
+var gn = async (e, t) => {
 	for (let n of e) if (await t(n)) return !0;
 	return !1;
-}, ln = /* @__PURE__ */ K({
+}, _n = /* @__PURE__ */ q({
 	name: "w-form",
 	props: {
 		modelValue: {},
@@ -4170,7 +4205,7 @@ var cn = async (e, t) => {
 		},
 		async checkElementValidators(e) {
 			let t = !1, n = "";
-			await cn(e.validators, async (r) => {
+			await gn(e.validators, async (r) => {
 				let i = await (typeof r == "function" && r(e.inputValue));
 				return t = typeof i != "string", n = t ? "" : i, !t;
 			}), e.hasJustReset = !1, e.Validation.isValid = t, e.Validation.message = n;
@@ -4191,10 +4226,10 @@ var cn = async (e, t) => {
 	watch: { modelValue(e) {
 		(this.status === !1 && e || e === null && this.status !== null) && this.reset(), this.status = e;
 	} }
-}, [["render", sn]]);
+}, [["render", hn]]);
 //#endregion
 //#region src/wave-ui/components/w-form-element.vue?vue&type=template&lang.js
-function un(e, t, n, r, i, a) {
+function vn(e, t, n, r, i, a) {
 	let o = E("w-transition-expand");
 	return b(), c("div", { class: _(a.classes) }, [l("div", { class: _(["w-flex grow", [n.column ? "column" : "align-center", n.wrap ? "wrap" : ""]]) }, [T(e.$slots, "default")], 2), f(o, { y: "" }, {
 		default: M(() => [e.Validation.message ? (b(), c("div", {
@@ -4204,7 +4239,7 @@ function un(e, t, n, r, i, a) {
 		_: 3
 	})], 2);
 }
-var dn = /* @__PURE__ */ K({
+var yn = /* @__PURE__ */ q({
 	name: "w-form-element",
 	props: {
 		valid: { required: !0 },
@@ -4272,16 +4307,16 @@ var dn = /* @__PURE__ */ K({
 	beforeUnmount() {
 		this.formUnregister && this.formUnregister(this);
 	}
-}, [["render", un]]);
+}, [["render", vn]]);
 //#endregion
 //#region src/wave-ui/components/w-grid.vue?vue&type=template&lang.js
-function fn(e, t, n, r, i, a) {
+function bn(e, t, n, r, i, a) {
 	return b(), o(D(n.tag), { class: _(["w-grid", a.classes]) }, {
 		default: M(() => [T(e.$slots, "default")]),
 		_: 3
 	}, 8, ["class"]);
 }
-var pn = /* @__PURE__ */ K({
+var xn = /* @__PURE__ */ q({
 	name: "w-grid",
 	props: {
 		tag: {
@@ -4353,10 +4388,10 @@ var pn = /* @__PURE__ */ K({
 			};
 		}
 	}
-}, [["render", fn]]);
+}, [["render", bn]]);
 //#endregion
 //#region src/wave-ui/components/w-icon.vue?vue&type=template&lang.js
-function mn(t, n, r, i, a, l) {
+function Sn(t, n, r, i, a, l) {
 	return b(), o(D(r.tag || "i"), {
 		class: _(["w-icon", l.classes]),
 		role: "icon",
@@ -4367,7 +4402,7 @@ function mn(t, n, r, i, a, l) {
 		_: 1
 	}, 8, ["class", "style"]);
 }
-var hn = /* @__PURE__ */ K({
+var Cn = /* @__PURE__ */ q({
 	name: "w-icon",
 	props: {
 		tag: {
@@ -4437,11 +4472,11 @@ var hn = /* @__PURE__ */ K({
 		let { default: e } = this.$slots, [t = "", n = ""] = typeof e == "function" && e()?.[0]?.children?.trim()?.split(" ") || [];
 		return this.fontName = t, this.icon = n, !0;
 	} }
-}, [["render", mn]]), gn = {
+}, [["render", Sn]]), wn = {
 	key: 0,
 	class: "w-image__loader"
-}, _n = ["innerHTML"];
-function vn(e, t, n, i, a, l) {
+}, Tn = ["innerHTML"];
+function En(e, t, n, i, a, l) {
 	let u = E("w-progress");
 	return b(), o(D(l.wrapperTag), {
 		class: _(["w-image", l.wrapperClasses]),
@@ -4466,7 +4501,7 @@ function vn(e, t, n, i, a, l) {
 				])) : s("", !0)]),
 				_: 1
 			}, 8, ["name"]),
-			!n.noSpinner && a.loading ? (b(), c("span", gn, [e.$slots.loading ? T(e.$slots, "loading", { key: 0 }) : (b(), o(u, h({
+			!n.noSpinner && a.loading ? (b(), c("span", wn, [e.$slots.loading ? T(e.$slots, "loading", { key: 0 }) : (b(), o(u, h({
 				key: 1,
 				circle: "",
 				indeterminate: ""
@@ -4485,12 +4520,12 @@ function vn(e, t, n, i, a, l) {
 				key: 3,
 				class: _(["w-image__caption caption", n.captionClass]),
 				innerHTML: n.caption
-			}, null, 10, _n)) : s("", !0)
+			}, null, 10, Tn)) : s("", !0)
 		]),
 		_: 3
 	}, 40, ["class", "style"]);
 }
-var yn = /* @__PURE__ */ K({
+var Dn = /* @__PURE__ */ q({
 	name: "w-image",
 	props: {
 		tag: {
@@ -4603,7 +4638,7 @@ var yn = /* @__PURE__ */ K({
 	watch: { src() {
 		this.loadImage();
 	} }
-}, [["render", vn]]), bn = ["name"], xn = ["for"], Sn = [
+}, [["render", En]]), On = ["name"], kn = ["for"], An = [
 	"id",
 	"type",
 	"name",
@@ -4618,17 +4653,17 @@ var yn = /* @__PURE__ */ K({
 	"disabled",
 	"required",
 	"tabindex"
-], Cn = [
+], jn = [
 	"id",
 	"name",
 	"multiple",
 	"disabled",
 	"data-progress"
-], wn = {
+], Mn = {
 	class: "w-input__no-file",
 	key: "no-file"
-}, Tn = ["for"], En = ["src"], Dn = ["for"];
-function On(t, n, r, a, u, p) {
+}, Nn = ["for"], Pn = ["src"], Fn = ["for"];
+function In(t, n, r, a, u, p) {
 	let m = E("w-icon"), g = E("w-progress");
 	return b(), o(D(t.formRegister ? "w-form-element" : "div"), h({ ref: "formEl" }, t.formRegister && {
 		validators: t.validators,
@@ -4652,12 +4687,12 @@ function On(t, n, r, a, u, p) {
 			type: "hidden",
 			name: t.name || null,
 			"onUpdate:modelValue": n[0] ||= (e) => u.inputValue = e
-		}, null, 8, bn)), [[j, u.inputValue]]) : (b(), c(e, { key: 1 }, [
+		}, null, 8, On)), [[j, u.inputValue]]) : (b(), c(e, { key: 1 }, [
 			r.labelPosition === "left" ? (b(), c(e, { key: 0 }, [t.$slots.default || r.label ? (b(), c("label", {
 				key: 0,
 				class: _(["w-input__label w-input__label--left w-form-el-shakable", t.labelClasses]),
 				for: t.inputId
-			}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, xn)) : s("", !0)], 64)) : s("", !0),
+			}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, kn)) : s("", !0)], 64)) : s("", !0),
 			l("div", { class: _(["w-input__input-wrap", p.inputWrapClasses]) }, [
 				T(t.$slots, "icon-left", { inputId: t.inputId }, () => [r.innerIconLeft ? (b(), o(m, {
 					key: 0,
@@ -4681,13 +4716,13 @@ function On(t, n, r, a, u, p) {
 				}, p.attrs, {
 					disabled: t.isDisabled || null,
 					"data-progress": p.overallFilesProgress
-				}), null, 16, Cn), f(i, {
+				}), null, 16, jn), f(i, {
 					class: "w-input__input w-input__input--file",
 					tag: "label",
 					name: "fade",
 					for: t.inputId
 				}, {
-					default: M(() => [!u.inputFiles.length && u.isFocused ? (b(), c("span", wn, [T(t.$slots, "no-file", {}, () => [t.$slots["no-file"] === void 0 ? (b(), c(e, { key: 0 }, [d("No file")], 64)) : s("", !0)])])) : s("", !0), (b(!0), c(e, null, w(u.inputFiles, (e, t) => (b(), c("span", { key: e.lastModified }, [
+					default: M(() => [!u.inputFiles.length && u.isFocused ? (b(), c("span", Mn, [T(t.$slots, "no-file", {}, () => [t.$slots["no-file"] === void 0 ? (b(), c(e, { key: 0 }, [d("No file")], 64)) : s("", !0)])])) : s("", !0), (b(!0), c(e, null, w(u.inputFiles, (e, t) => (b(), c("span", { key: e.lastModified }, [
 						d(O(t ? ", " : ""), 1),
 						(b(), c("span", {
 							class: "filename",
@@ -4718,7 +4753,7 @@ function On(t, n, r, a, u, p) {
 					disabled: t.isDisabled || null,
 					required: t.required || null,
 					tabindex: t.tabindex || null
-				}, p.attrs, { class: r.inputClass }), null, 16, Sn)), [[A, u.inputValue]]),
+				}, p.attrs, { class: r.inputClass }), null, 16, An)), [[ae, u.inputValue]]),
 				r.labelPosition === "inside" && p.showLabelInside ? (b(), c(e, { key: 2 }, [t.$slots.default || r.label ? (b(), c("label", {
 					key: 0,
 					class: _(["w-input__label w-input__label--inside w-form-el-shakable", t.labelClasses])
@@ -4753,15 +4788,15 @@ function On(t, n, r, a, u, p) {
 				key: `${n}b`,
 				src: t.preview,
 				alt: ""
-			}, null, 8, En)) : (b(), c("i", {
+			}, null, 8, Pn)) : (b(), c("i", {
 				class: _(["w-icon w-input__file-preview primary size--md", r.preview && typeof r.preview == "string" ? r.preview : "wi-file"]),
 				key: `${n}c`
-			}, null, 2))], 64))), 256))], 8, Tn)) : s("", !0),
+			}, null, 2))], 64))), 256))], 8, Nn)) : s("", !0),
 			r.labelPosition === "right" ? (b(), c(e, { key: 2 }, [t.$slots.default || r.label ? (b(), c("label", {
 				key: 0,
 				class: _(["w-input__label w-input__label--right w-form-el-shakable", t.labelClasses]),
 				for: t.inputId
-			}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, Dn)) : s("", !0)], 64)) : s("", !0)
+			}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, Fn)) : s("", !0)], 64)) : s("", !0)
 		], 64))]),
 		_: 3
 	}, 16, [
@@ -4771,7 +4806,7 @@ function On(t, n, r, a, u, p) {
 		"style"
 	]);
 }
-var kn = /* @__PURE__ */ K({
+var Ln = /* @__PURE__ */ q({
 	name: "w-input",
 	expose: ["focus"],
 	mixins: [Q, $],
@@ -4972,10 +5007,10 @@ var kn = /* @__PURE__ */ K({
 	watch: { modelValue(e) {
 		this.inputValue = e, !e && e !== 0 && (this.isAutofilled = !1, this.inputFiles = []);
 	} }
-}, [["render", On]]);
+}, [["render", In]]);
 //#endregion
 //#region src/wave-ui/components/w-list.vue?vue&type=template&lang.js
-function An(t, n, r, i, a, l) {
+function Rn(t, n, r, i, a, l) {
 	let f = E("w-icon"), p = E("w-list", !0);
 	return b(), c("ul", { class: _(["w-list", l.classes]) }, [(b(!0), c(e, null, w(t.listItems, (e, i) => (b(), c("li", {
 		class: _(["w-list__item", { "w-list__item--parent": (e.children || []).length }]),
@@ -5042,12 +5077,13 @@ function An(t, n, r, i, a, l) {
 		}]), 1040, ["items", "depth"])) : s("", !0)
 	], 2))), 128))], 2);
 }
-var jn = /* @__PURE__ */ K({
+var zn = /* @__PURE__ */ q({
 	name: "w-list",
+	focusable: !0,
 	expose: ["focus"],
 	mixins: [X],
 	setup() {
-		return { waveUiUseId: ae() };
+		return { waveUiUseId: A() };
 	},
 	props: {
 		items: {
@@ -5143,7 +5179,7 @@ var jn = /* @__PURE__ */ K({
 	methods: {
 		focus() {
 			let e = this.listItems.find((e) => e._selected && !e.disabled) || this.listItems.find((e) => !e.disabled);
-			e && (this.listId ? q(document.getElementById(`${this.listId}_item-${e._index + 1}`)) : q(this.$el.querySelector("[role=\"option\"][tabindex=\"0\"]")));
+			e && (this.listId ? J(document.getElementById(`${this.listId}_item-${e._index + 1}`)) : J(this.$el.querySelector("[role=\"option\"][tabindex=\"0\"]")));
 		},
 		getItemValue(e) {
 			return e && typeof e == "object" ? e[this.itemValueKey] === void 0 ? e[this.itemLabelKey] === void 0 ? e.index : e[this.itemLabelKey] : e[this.itemValueKey] : e;
@@ -5246,8 +5282,8 @@ var jn = /* @__PURE__ */ K({
 			}
 		}
 	}
-}, [["render", An]]), Mn = 4;
-function Nn(e) {
+}, [["render", Rn]]), Bn = 4;
+function Vn(e) {
 	return {
 		top: "bottom",
 		bottom: "top",
@@ -5255,7 +5291,7 @@ function Nn(e) {
 		right: "left"
 	}[e] || "bottom";
 }
-var Pn = {
+var Hn = {
 	props: {
 		appendTo: { type: [
 			String,
@@ -5290,6 +5326,8 @@ var Pn = {
 		openTimeout: null,
 		viewportPlacementOverride: null,
 		detachableReady: !1,
+		_contentEntered: !1,
+		_autofocusTargets: [],
 		teleportTarget: null
 	}),
 	computed: {
@@ -5333,7 +5371,23 @@ var Pn = {
 	},
 	methods: {
 		onAfterLeave() {
-			this.detachableReady = !1, this.detachableEl = null;
+			this.detachableReady = !1, this.detachableEl = null, this._contentEntered = !1, this._autofocusTargets = [];
+		},
+		onDetachableAfterEnter() {
+			this._contentEntered = !0, this._maybeFlushAutofocus();
+		},
+		registerAutofocus(e) {
+			this._autofocusTargets ||= [], this._autofocusTargets.push(e), this._maybeFlushAutofocus();
+		},
+		unregisterAutofocus(e) {
+			this._autofocusTargets?.length && (this._autofocusTargets = this._autofocusTargets.filter((t) => t.el !== e));
+		},
+		_maybeFlushAutofocus() {
+			this.detachableReady && this._contentEntered && this.flushAutofocus();
+		},
+		flushAutofocus() {
+			let e = this._autofocusTargets || [];
+			this._autofocusTargets = [], e.length && this.$nextTick(() => e.forEach(({ el: e }) => qe(e)));
 		},
 		unbindActivatorDocEvents() {
 			typeof document > "u" || this.docEventListenersHandlers.length && (this.docEventListenersHandlers.forEach(({ eventName: e, handler: t }) => {
@@ -5366,7 +5420,7 @@ var Pn = {
 			}), this._activatorDomEl = null, this._activatorAttachedEvents = []);
 		},
 		async open(e) {
-			this.disable || (this.delay && await new Promise((e) => this.openTimeout = setTimeout(e, this.delay)), !(this.delay && !this.openTimeout) && (this.disable || (this.detachableReady = !1, typeof document < "u" && (this.teleportTarget = this.appendToTarget), this.detachableVisible = !0, this.activator && (this.activatorEl = e.target), await this.$nextTick(), this.detachableEl = this.$refs.detachable?.$el || this.$refs.detachable, this.minWidth === "activator" && this.activatorEl && (this.activatorWidth = this.activatorEl.offsetWidth), this.noPosition ? this.detachableReady = !0 : this.computeDetachableCoords(), this.timeoutId = setTimeout(() => {
+			this.disable || (this.delay && await new Promise((e) => this.openTimeout = setTimeout(e, this.delay)), !(this.delay && !this.openTimeout) && (this.disable || (this.detachableReady = !1, this._contentEntered = !1, typeof document < "u" && (this.teleportTarget = this.appendToTarget), this.detachableVisible = !0, this.activator && (this.activatorEl = e.target), await this.$nextTick(), this.detachableEl = this.$refs.detachable?.$el || this.$refs.detachable, this.minWidth === "activator" && this.activatorEl && (this.activatorWidth = this.activatorEl.offsetWidth), this.noPosition ? (this.detachableReady = !0, this._maybeFlushAutofocus()) : await this.computeDetachableCoords(), this.timeoutId = setTimeout(() => {
 				this.$emit("update:modelValue", !0), this.$emit("input", !0), this.$emit("open");
 			}, 0), typeof document < "u" && !this.persistent && document.addEventListener("mousedown", this.onOutsideMousedown), typeof window < "u" && !this.noPosition && window.addEventListener("resize", this.onResize))));
 		},
@@ -5419,14 +5473,14 @@ var Pn = {
 			this.viewportPlacementOverride = null, this.detachableEl.style.display = "flex";
 			let e = window.getComputedStyle(this.detachableEl, null), t = this.detachableEl.offsetWidth, n = this.detachableEl.offsetHeight, r = this.position;
 			if (!this.noPosition) {
-				let e = Mn, i = window.innerWidth, a = window.innerHeight, { top: o, left: s, width: c, height: l } = this.activatorEl.getBoundingClientRect();
-				(r === "bottom" && o + l + n > a - e && o - n >= e || r === "top" && o - n < e && o + l + n <= a - e || r === "right" && s + c + t > i - e && s - t >= e || r === "left" && s - t < e && s + c + t <= i - e) && (r = Nn(r), this.viewportPlacementOverride = r);
+				let e = Bn, i = window.innerWidth, a = window.innerHeight, { top: o, left: s, width: c, height: l } = this.activatorEl.getBoundingClientRect();
+				(r === "bottom" && o + l + n > a - e && o - n >= e || r === "top" && o - n < e && o + l + n <= a - e || r === "right" && s + c + t > i - e && s - t >= e || r === "left" && s - t < e && s + c + t <= i - e) && (r = Vn(r), this.viewportPlacementOverride = r);
 			}
 			let i = this.getActivatorCoordinates(), { top: a, left: o } = this._applyDetachablePlacement(r, i, e);
 			this.detachableCoords = {
 				top: a,
 				left: o
-			}, this.detachableReady = !0, await this.$nextTick(), this.detachableEl && (this.detachableVisible || (this.detachableEl.style.display = "none"));
+			}, this.detachableReady = !0, await this.$nextTick(), this._maybeFlushAutofocus(), this.detachableEl && (this.detachableVisible || (this.detachableEl.style.display = "none"));
 		},
 		onResize() {
 			typeof window > "u" || (this.minWidth === "activator" && this.activatorEl && (this.activatorWidth = this.activatorEl.offsetWidth), this.computeDetachableCoords());
@@ -5476,7 +5530,7 @@ var Pn = {
 };
 //#endregion
 //#region src/wave-ui/components/w-menu.vue?vue&type=template&lang.js
-function Fn(t, i, a, l, d, p) {
+function Un(t, i, a, l, d, p) {
 	let m = E("w-card"), g = E("w-overlay");
 	return b(), c(e, null, [
 		T(t.$slots, "activator"),
@@ -5488,6 +5542,7 @@ function Fn(t, i, a, l, d, p) {
 		}, [f(r, {
 			name: p.transitionName,
 			appear: "",
+			onAfterEnter: t.onDetachableAfterEnter,
 			onAfterLeave: t.onAfterLeave
 		}, {
 			default: M(() => [a.custom && t.detachableVisible ? (b(), c("div", h({
@@ -5536,7 +5591,11 @@ function Fn(t, i, a, l, d, p) {
 				"style"
 			])) : s("", !0)]),
 			_: 3
-		}, 8, ["name", "onAfterLeave"]), a.overlay ? (b(), o(g, h({
+		}, 8, [
+			"name",
+			"onAfterEnter",
+			"onAfterLeave"
+		]), a.overlay ? (b(), o(g, h({
 			key: 0,
 			ref: "overlay",
 			"model-value": t.detachableVisible,
@@ -5553,10 +5612,10 @@ function Fn(t, i, a, l, d, p) {
 		])) : s("", !0)], 8, ["to", "disabled"])) : s("", !0)
 	], 64);
 }
-var In = /* @__PURE__ */ K({
+var Wn = /* @__PURE__ */ q({
 	name: "w-menu",
 	expose: ["focus"],
-	mixins: [Pn],
+	mixins: [Hn],
 	inheritAttrs: !1,
 	props: {
 		modelValue: {},
@@ -5693,7 +5752,7 @@ var In = /* @__PURE__ */ K({
 	},
 	methods: {
 		focus() {
-			this.overlay && this.$refs.overlay ? this.$refs.overlay.focus() : q(this.activatorEl);
+			this.overlay && this.$refs.overlay ? this.$refs.overlay.focus() : J(this.activatorEl);
 		},
 		toggle(e) {
 			if (this.disable) return;
@@ -5704,10 +5763,10 @@ var In = /* @__PURE__ */ K({
 			this.openTimeout = clearTimeout(this.openTimeout), this.detachableVisible && (this.showOnHover && !e && (await new Promise((e) => setTimeout(e, 10)), this.showOnHover && (this.hoveringMenu || this.hoveringActivator)) || (this.$emit("update:modelValue", this.detachableVisible = !1), this.$emit("input", !1), this.$emit("close"), this.viewportPlacementOverride = null, typeof document < "u" && document.removeEventListener("mousedown", this.onOutsideMousedown), typeof window < "u" && window.removeEventListener("resize", this.onResize)));
 		}
 	}
-}, [["render", Fn]]);
+}, [["render", Un]]);
 //#endregion
 //#region src/wave-ui/components/w-notification.vue?vue&type=template&lang.js
-function Ln(e, t, n, i, a, l) {
+function Gn(e, t, n, i, a, l) {
 	let u = E("w-alert");
 	return b(), o(r, {
 		name: l.transitionName,
@@ -5729,7 +5788,7 @@ function Ln(e, t, n, i, a, l) {
 		_: 3
 	}, 8, ["name"]);
 }
-var Rn = /* @__PURE__ */ K({
+var Kn = /* @__PURE__ */ q({
 	name: "w-notification",
 	props: {
 		modelValue: { default: !0 },
@@ -5859,10 +5918,10 @@ var Rn = /* @__PURE__ */ K({
 	watch: { modelValue(e) {
 		clearTimeout(this.timeoutId), this.show = e, e && this.timeoutVal && this.countdown();
 	} }
-}, [["render", Ln]]);
+}, [["render", Gn]]);
 //#endregion
 //#region src/wave-ui/components/w-overlay.vue?vue&type=template&lang.js
-function zn(e, t, n, i, a, l) {
+function qn(e, t, n, i, a, l) {
 	return b(), o(r, {
 		name: "fade",
 		appear: "",
@@ -5879,7 +5938,7 @@ function zn(e, t, n, i, a, l) {
 		_: 3
 	}, 8, ["onAfterLeave"]);
 }
-var Bn = /* @__PURE__ */ K({
+var Jn = /* @__PURE__ */ q({
 	name: "w-overlay",
 	expose: ["focus"],
 	props: {
@@ -5933,7 +5992,7 @@ var Bn = /* @__PURE__ */ K({
 	},
 	methods: {
 		focus() {
-			q(this.$refs.overlay);
+			J(this.$refs.overlay);
 		},
 		bindDocumentEscape() {
 			this.documentEscapeBound ||= (document.addEventListener("keydown", this.onDocumentEscape), !0);
@@ -5963,22 +6022,22 @@ var Bn = /* @__PURE__ */ K({
 	watch: { modelValue(e) {
 		e ? (this.showOverlay = !0, this.bindDocumentEscape()) : this.unbindDocumentEscape();
 	} }
-}, [["render", zn]]), Vn = { class: "w-parallax" };
-function Hn(e, t, n, r, i, a) {
-	return b(), c("div", Vn);
+}, [["render", qn]]), Yn = { class: "w-parallax" };
+function Xn(e, t, n, r, i, a) {
+	return b(), c("div", Yn);
 }
-var Un = /* @__PURE__ */ K({
+var Zn = /* @__PURE__ */ q({
 	name: "w-parallax",
 	props: {},
 	emits: [],
 	data: () => ({})
-}, [["render", Hn]]), Wn = ["viewBox"], Gn = [
+}, [["render", Xn]]), Qn = ["viewBox"], $n = [
 	"cx",
 	"cy",
 	"r",
 	"stroke-dasharray",
 	"stroke-width"
-], Kn = [
+], er = [
 	"cx",
 	"cy",
 	"r",
@@ -5986,7 +6045,7 @@ var Un = /* @__PURE__ */ K({
 	"stroke-linecap",
 	"stroke-dasharray"
 ];
-function qn(e, t, n, r, i, a) {
+function tr(e, t, n, r, i, a) {
 	return b(), c("div", {
 		class: _(["w-progress", a.classes]),
 		style: y(a.styles)
@@ -6002,7 +6061,7 @@ function qn(e, t, n, r, i, a) {
 		fill: "transparent",
 		"stroke-dasharray": e.circleCircumference,
 		"stroke-width": n.stroke
-	}, null, 10, Gn)) : s("", !0), l("circle", {
+	}, null, 10, $n)) : s("", !0), l("circle", {
 		class: "w-progress__progress",
 		cx: a.circleCenter,
 		cy: a.circleCenter,
@@ -6012,7 +6071,7 @@ function qn(e, t, n, r, i, a) {
 		"stroke-linecap": n.roundCap && "round",
 		"stroke-dasharray": e.circleCircumference,
 		style: y(`stroke-dashoffset: ${(1 - a.progressValue / 100) * e.circleCircumference}`)
-	}, null, 12, Kn)], 8, Wn)) : (b(), c("div", {
+	}, null, 12, er)], 8, Qn)) : (b(), c("div", {
 		key: 0,
 		class: _(["w-progress__progress", { full: a.progressValue === 100 }]),
 		style: y(`width: ${a.progressValue}%`)
@@ -6023,7 +6082,7 @@ function qn(e, t, n, r, i, a) {
 }
 //#endregion
 //#region src/wave-ui/components/w-progress.vue
-var Jn = 40, Yn = Jn / 2, Xn = Math.round(Jn * 3.14 * 100) / 100, Zn = /* @__PURE__ */ K({
+var nr = 40, rr = nr / 2, ir = Math.round(nr * 3.14 * 100) / 100, ar = /* @__PURE__ */ q({
 	name: "w-progress",
 	props: {
 		modelValue: {
@@ -6065,16 +6124,16 @@ var Jn = 40, Yn = Jn / 2, Xn = Math.round(Jn * 3.14 * 100) / 100, Zn = /* @__PUR
 	},
 	emits: [],
 	data: () => ({
-		circleSize: Jn,
-		circleRadius: Yn,
-		circleCircumference: Xn
+		circleSize: nr,
+		circleRadius: rr,
+		circleCircumference: ir
 	}),
 	computed: {
 		progressValue() {
 			return parseFloat(this.modelValue);
 		},
 		circleCenter() {
-			return Jn + this.stroke;
+			return nr + this.stroke;
 		},
 		forcedSize() {
 			return this.size && (isNaN(this.size) ? this.size : `${this.size}px`);
@@ -6104,7 +6163,7 @@ var Jn = 40, Yn = Jn / 2, Xn = Math.round(Jn * 3.14 * 100) / 100, Zn = /* @__PUR
 			return { [this.circle ? "width" : "height"]: this.forcedSize || null };
 		}
 	}
-}, [["render", qn]]), Qn = [
+}, [["render", tr]]), or = [
 	"id",
 	"name",
 	"checked",
@@ -6112,8 +6171,8 @@ var Jn = 40, Yn = Jn / 2, Xn = Math.round(Jn * 3.14 * 100) / 100, Zn = /* @__PUR
 	"required",
 	"tabindex",
 	"aria-checked"
-], $n = ["for"], er = ["for", "innerHTML"], tr = ["for"], nr = ["for", "innerHTML"];
-function rr(t, n, r, i, a, u) {
+], sr = ["for"], cr = ["for", "innerHTML"], lr = ["for"], ur = ["for", "innerHTML"];
+function dr(t, n, r, i, a, u) {
 	return b(), o(D(t.formRegister && !u.wRadios ? "w-form-element" : "div"), h({ ref: "formEl" }, t.formRegister && {
 		validators: t.validators,
 		inputValue: t.inputValue,
@@ -6142,17 +6201,17 @@ function rr(t, n, r, i, a, u) {
 				onChange: n[1] ||= (e) => u.onInput(e),
 				"aria-checked": t.inputValue || "false",
 				role: "radio"
-			}, null, 40, Qn),
+			}, null, 40, or),
 			u.hasLabel && r.labelOnLeft ? (b(), c(e, { key: 0 }, [t.$slots.default ? (b(), c("label", {
 				key: 0,
 				class: _(["w-radio__label w-form-el-shakable pr2", t.labelClasses]),
 				for: t.inputId
-			}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, $n)) : r.label ? (b(), c("label", {
+			}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, sr)) : r.label ? (b(), c("label", {
 				key: 1,
 				class: _(["w-radio__label w-form-el-shakable pr2", t.labelClasses]),
 				for: t.inputId,
 				innerHTML: r.label
-			}, null, 10, er)) : s("", !0)], 64)) : s("", !0),
+			}, null, 10, cr)) : s("", !0)], 64)) : s("", !0),
 			l("div", {
 				class: _(["w-radio__input", this.color]),
 				onClick: n[2] ||= (e) => {
@@ -6163,17 +6222,17 @@ function rr(t, n, r, i, a, u) {
 				key: 0,
 				class: _(["w-radio__label w-form-el-shakable pl2", t.labelClasses]),
 				for: t.inputId
-			}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, tr)) : r.label ? (b(), c("label", {
+			}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, lr)) : r.label ? (b(), c("label", {
 				key: 1,
 				class: _(["w-radio__label w-form-el-shakable pl2", t.labelClasses]),
 				for: t.inputId,
 				innerHTML: r.label
-			}, null, 10, nr)) : s("", !0)], 64)) : s("", !0)
+			}, null, 10, ur)) : s("", !0)], 64)) : s("", !0)
 		]),
 		_: 3
 	}, 16, ["valid", "class"]);
 }
-var ir = /* @__PURE__ */ K({
+var fr = /* @__PURE__ */ q({
 	name: "w-radio",
 	expose: ["focus"],
 	mixins: [Q, $],
@@ -6254,8 +6313,8 @@ var ir = /* @__PURE__ */ K({
 	watch: { modelValue() {
 		this.toggleFromOutside();
 	} }
-}, [["render", rr]]), ar = ["innerHTML"];
-function or(t, n, r, i, a, l) {
+}, [["render", dr]]), pr = ["innerHTML"];
+function mr(t, n, r, i, a, l) {
 	let u = E("w-radio");
 	return b(), o(D(t.formRegister ? "w-form-element" : "div"), h({ ref: "formEl" }, t.formRegister && {
 		validators: t.validators,
@@ -6299,7 +6358,7 @@ function or(t, n, r, i, a, l) {
 			}) : e.label ? (b(), c("div", {
 				key: 1,
 				innerHTML: e.label
-			}, null, 8, ar)) : s("", !0)]),
+			}, null, 8, pr)) : s("", !0)]),
 			_: 2
 		}, 1040, [
 			"model-value",
@@ -6317,8 +6376,9 @@ function or(t, n, r, i, a, l) {
 		"class"
 	]);
 }
-var sr = /* @__PURE__ */ K({
+var hr = /* @__PURE__ */ q({
 	name: "w-radios",
+	focusable: !0,
 	expose: ["focus"],
 	mixins: [Q],
 	setup() {
@@ -6394,7 +6454,7 @@ var sr = /* @__PURE__ */ K({
 	},
 	methods: {
 		focus() {
-			J(this) && [].concat(this.$refs.item || []).filter(Boolean).find((e) => !e.isDisabled && !e.isReadonly)?.focus?.();
+			We(this) && [].concat(this.$refs.item || []).filter(Boolean).find((e) => !e.isDisabled && !e.isReadonly)?.focus?.();
 		},
 		onInput(e) {
 			this.inputValue = !0, this.$emit("update:modelValue", e.value), this.$emit("input", e.value);
@@ -6403,17 +6463,17 @@ var sr = /* @__PURE__ */ K({
 			return this.items[e._index];
 		}
 	}
-}, [["render", or]]), cr = [
+}, [["render", mr]]), gr = [
 	"id",
 	"name",
 	"value"
-], lr = [
+], _r = [
 	"disabled",
 	"onMouseenter",
 	"onClick",
 	"tabindex"
 ];
-function ur(t, n, r, i, a, u) {
+function vr(t, n, r, i, a, u) {
 	return b(), o(D(t.formRegister ? "w-form-element" : "div"), h({ ref: "formEl" }, t.formRegister && {
 		validators: t.validators,
 		inputValue: a.rating,
@@ -6433,7 +6493,7 @@ function ur(t, n, r, i, a, u) {
 			name: t.inputName,
 			type: "hidden",
 			value: a.rating
-		}, null, 8, cr), (b(!0), c(e, null, w(r.max, (i) => (b(), c(e, { key: i }, [t.$slots.item ? T(t.$slots, "item", {
+		}, null, 8, gr), (b(!0), c(e, null, w(r.max, (i) => (b(), c(e, { key: i }, [t.$slots.item ? T(t.$slots, "item", {
 			key: 0,
 			index: i + 1
 		}) : s("", !0), l("button", {
@@ -6453,12 +6513,13 @@ function ur(t, n, r, i, a, u) {
 			role: "icon",
 			"aria-hidden": "true",
 			style: y(u.halfStarStyle)
-		}, null, 6)) : s("", !0)], 42, lr)], 64))), 128))]),
+		}, null, 6)) : s("", !0)], 42, _r)], 64))), 128))]),
 		_: 3
 	}, 16, ["valid", "class"]);
 }
-var dr = /* @__PURE__ */ K({
+var yr = /* @__PURE__ */ q({
 	name: "w-rating",
+	focusable: !0,
 	expose: ["focus"],
 	mixins: [Q],
 	setup() {
@@ -6529,7 +6590,7 @@ var dr = /* @__PURE__ */ K({
 	},
 	methods: {
 		focus() {
-			J(this) && q(this.$el.querySelector(".w-rating__button:not([disabled])"));
+			We(this) && J(this.$el.querySelector(".w-rating__button:not([disabled])"));
 		},
 		onButtonClick(e) {
 			this.rating = e, this.$emit("update:modelValue", this.rating), this.$emit("input", this.rating), this.noRipple || (this.ripple.start = !0, this.ripple.timeout = setTimeout(() => {
@@ -6569,14 +6630,17 @@ var dr = /* @__PURE__ */ K({
 	watch: { value(e) {
 		this.rating = parseFloat(e);
 	} }
-}, [["render", ur]]), fr = ["tabindex", "aria-disabled"], pr = ["id"], mr = [
+}, [["render", vr]]), br = ["tabindex", "aria-disabled"], xr = ["id"], Sr = [
 	"aria-controls",
 	"aria-orientation",
 	"aria-valuemax",
 	"aria-valuenow",
 	"aria-disabled",
 	"aria-label"
-], hr = 120, gr = 450, _r = /* @__PURE__ */ Object.assign({ name: "WScrollable" }, {
+], Cr = 120, wr = 450, Tr = /* @__PURE__ */ Object.assign({
+	name: "WScrollable",
+	focusable: !0
+}, {
 	__name: "w-scrollable",
 	props: {
 		color: {
@@ -6650,11 +6714,11 @@ var dr = /* @__PURE__ */ K({
 				deltaXorY: "deltaY",
 				scrollTopOrLeft: "scrollTop"
 			}
-		}, s = ae(), u = ie(), d = S(null), f = S(null), p = S(null), m = S(null), v = S(!1), x = S(!1), C = S(!1), w = S(0), E = S(0), ne = S("native"), D = S(!1), O = S(!1), k = S({
+		}, s = A(), u = ie(), d = S(null), f = S(null), p = S(null), m = S(null), v = S(!1), x = S(!1), C = S(!1), w = S(0), E = S(0), ne = S("native"), D = S(!1), O = S(!1), k = S({
 			offset: 0,
 			trackStart: 0,
 			trackSize: 0
-		}), A = S(null), j = null, M = null, P = null, ce = "", I = a(() => r.horizontal), L = a(() => o[I.value ? "h" : "v"]), le = a(() => r.disabled ? -1 : r.tabindex), R = a(() => {
+		}), ae = S(null), j = null, M = null, P = null, ce = "", I = a(() => r.horizontal), L = a(() => o[I.value ? "h" : "v"]), le = a(() => r.disabled ? -1 : r.tabindex), R = a(() => {
 			let e = r.scrollbar;
 			return e === 0 || e === "0" ? "off" : e === 1 || e === "1" ? "always" : e === "hover" ? "hover" : e === "interaction" ? "interaction" : "always";
 		}), z = a(() => R.value !== "off"), ue = a(() => ({
@@ -6687,17 +6751,17 @@ var dr = /* @__PURE__ */ K({
 		let xe = a(() => ({
 			"max-width": be(r.width),
 			"max-height": be(r.height)
-		})), Se = a(() => {
-			let e = Math.max(0, 100 - ve.value), t = H(w.value / 100 * e, 0, e);
+		})), H = a(() => {
+			let e = Math.max(0, 100 - ve.value), t = U(w.value / 100 * e, 0, e);
 			return {
 				[L.value.size]: `${ve.value}%`,
 				[L.value.topOrLeft]: `${t}%`
 			};
 		});
-		function H(e, t, n) {
+		function U(e, t, n) {
 			return Math.max(t, Math.min(e, n));
 		}
-		function Ce(e) {
+		function Se(e) {
 			if (!e || e === d.value) return !1;
 			let t = e.tagName;
 			return t ? e.isContentEditable ? !0 : [
@@ -6707,7 +6771,7 @@ var dr = /* @__PURE__ */ K({
 				"BUTTON"
 			].includes(t) : !1;
 		}
-		function we(e = "native") {
+		function Ce(e = "native") {
 			if (!f.value) return {
 				top: 0,
 				left: 0,
@@ -6728,113 +6792,113 @@ var dr = /* @__PURE__ */ K({
 				source: e
 			};
 		}
-		function Te(e = "native") {
-			let t = we(e);
+		function we(e = "native") {
+			let t = Ce(e);
 			i("scroll", t), O.value || (O.value = !0, i("scroll-start", t)), j && window.clearTimeout(j), j = window.setTimeout(() => {
-				O.value = !1, i("scroll-end", we("native"));
-			}, hr);
+				O.value = !1, i("scroll-end", Ce("native"));
+			}, Cr);
 		}
-		function Ee() {
+		function Te() {
 			v.value = !0;
 		}
-		function De() {
+		function Ee() {
 			v.value = !1;
 		}
-		function U() {
+		function W() {
 			f.value && (w.value = V.value ? f.value[L.value.scrollTopOrLeft] * 100 / V.value : 0);
 		}
-		function W(e, t = "api") {
+		function G(e, t = "api") {
 			if (!f.value) return;
-			let n = H(e, 0, V.value), r = f.value[L.value.scrollTopOrLeft];
+			let n = U(e, 0, V.value), r = f.value[L.value.scrollTopOrLeft];
 			if (ne.value = t, Math.abs(r - n) < 1) {
-				U(), Te(t);
+				W(), we(t);
 				return;
 			}
-			(t === "wheel" || t === "keyboard") && K(), D.value = !0, f.value[L.value.scrollTopOrLeft] = n, U(), Te(t);
+			(t === "wheel" || t === "keyboard") && q(), D.value = !0, f.value[L.value.scrollTopOrLeft] = n, W(), we(t);
 		}
-		function Oe(e, t = "api") {
-			W(H(e, 0, 100) / 100 * V.value, t);
+		function De(e, t = "api") {
+			G(U(e, 0, 100) / 100 * V.value, t);
 		}
-		function G() {
+		function K() {
 			g(() => {
-				E.value++, U(), requestAnimationFrame(() => {
-					E.value++, U();
+				E.value++, W(), requestAnimationFrame(() => {
+					E.value++, W();
 				});
 			});
 		}
-		function ke() {
+		function Oe() {
 			if (D.value) {
 				D.value = !1;
 				return;
 			}
-			U(), Te(ne.value), ne.value = "native";
+			W(), we(ne.value), ne.value = "native";
 		}
-		function Ae(e) {
+		function ke(e) {
 			let t = e.deltaX || 0, n = e.deltaY || 0, i = 0;
 			return I.value ? (i = Math.abs(t) >= Math.abs(n) ? t : n, !i && e.shiftKey && (i = n)) : i = Math.abs(n) >= Math.abs(t) ? n : t, f.value ? e.deltaMode === 1 ? i * r.wheelStep : e.deltaMode === 2 ? i * f.value[L.value.clientSize] : i : i;
 		}
-		function K() {
+		function q() {
 			x.value = !0, M && window.clearTimeout(M), M = window.setTimeout(() => {
 				x.value = !1, M = null;
-			}, gr);
+			}, wr);
 		}
-		function je() {
+		function Ae() {
 			let e = r.scrollPosition;
 			if (e == null || !f.value) return;
 			if (typeof e == "number") {
 				if (Number.isNaN(e)) return;
-				W(e, "api");
+				G(e, "api");
 				return;
 			}
 			if (typeof e != "object" || !e) return;
 			let t = f.value, n = Math.max(0, t.scrollHeight - t.clientHeight), i = Math.max(0, t.scrollWidth - t.clientWidth), a = "top" in e && e.top != null && typeof e.top == "number" && !Number.isNaN(e.top), o = "left" in e && e.left != null && typeof e.left == "number" && !Number.isNaN(e.left);
 			if (a || o) {
-				D.value = !0, a && (t.scrollTop = H(e.top, 0, n)), o && (t.scrollLeft = H(e.left, 0, i)), U(), Te("api");
+				D.value = !0, a && (t.scrollTop = U(e.top, 0, n)), o && (t.scrollLeft = U(e.left, 0, i)), W(), we("api");
 				return;
 			}
 			let s = I.value ? e.left ?? e.top : e.top ?? e.left;
-			typeof s == "number" && !Number.isNaN(s) && W(s, "api");
+			typeof s == "number" && !Number.isNaN(s) && G(s, "api");
 		}
-		function Me(e) {
+		function je(e) {
 			e ? (ce = document.documentElement.style.cursor, document.documentElement.style.cursor = "grabbing") : (document.documentElement.style.cursor = ce, ce = "");
 		}
-		function Ne() {
-			document.addEventListener("pointermove", Be, !0), document.addEventListener("pointerup", Ve, !0), document.addEventListener("pointercancel", Ve, !0);
+		function Me() {
+			document.addEventListener("pointermove", Ve, !0), document.addEventListener("pointerup", He, !0), document.addEventListener("pointercancel", He, !0);
 		}
-		function Pe() {
-			document.removeEventListener("pointermove", Be, !0), document.removeEventListener("pointerup", Ve, !0), document.removeEventListener("pointercancel", Ve, !0);
+		function Ne() {
+			document.removeEventListener("pointermove", Ve, !0), document.removeEventListener("pointerup", He, !0), document.removeEventListener("pointercancel", He, !0);
 		}
-		function Fe(e) {
+		function Pe(e) {
 			if (r.disabled || !B.value) return;
 			if (e.metaKey) {
-				let t = Ae(e);
+				let t = ke(e);
 				if (!t) return;
-				e.preventDefault(), W(t < 0 ? 0 : V.value, "wheel");
+				e.preventDefault(), G(t < 0 ? 0 : V.value, "wheel");
 				return;
 			}
-			let t = Ae(e);
+			let t = ke(e);
 			if (!t) return;
-			let n = f.value[L.value.scrollTopOrLeft], i = H(n + t, 0, V.value), a = n <= 0 && t < 0, o = n >= V.value && t > 0;
-			a || o || (e.preventDefault(), W(i, "wheel"));
+			let n = f.value[L.value.scrollTopOrLeft], i = U(n + t, 0, V.value), a = n <= 0 && t < 0, o = n >= V.value && t > 0;
+			a || o || (e.preventDefault(), G(i, "wheel"));
 		}
-		function Ie(e) {
-			if (r.disabled || !B.value || Ce(e.target)) return;
+		function Fe(e) {
+			if (r.disabled || !B.value || Se(e.target)) return;
 			let t = f.value[L.value.scrollTopOrLeft], n = r.wheelStep, i = f.value[L.value.clientSize], a = null;
 			if (e.metaKey) {
 				if (e.key === "ArrowUp" && !I.value) {
-					e.preventDefault(), W(0, "keyboard");
+					e.preventDefault(), G(0, "keyboard");
 					return;
 				}
 				if (e.key === "ArrowDown" && !I.value) {
-					e.preventDefault(), W(V.value, "keyboard");
+					e.preventDefault(), G(V.value, "keyboard");
 					return;
 				}
 				if (e.key === "ArrowLeft" && I.value) {
-					e.preventDefault(), W(0, "keyboard");
+					e.preventDefault(), G(0, "keyboard");
 					return;
 				}
 				if (e.key === "ArrowRight" && I.value) {
-					e.preventDefault(), W(V.value, "keyboard");
+					e.preventDefault(), G(V.value, "keyboard");
 					return;
 				}
 			}
@@ -6864,105 +6928,105 @@ var dr = /* @__PURE__ */ K({
 					a = V.value;
 					break;
 			}
-			a !== null && (e.preventDefault(), W(a, "keyboard"));
+			a !== null && (e.preventDefault(), G(a, "keyboard"));
 		}
-		function Le(e, t, n) {
+		function Ie(e, t, n) {
 			if (!p.value) return;
 			let r = p.value.getBoundingClientRect();
 			k.value.trackStart = r[L.value.topOrLeft], k.value.trackSize = r[L.value.size], k.value.offset = Number.isFinite(t) ? t : 0, C.value = !0;
 			let i = n?.pointerId;
 			if (i != null && d.value?.setPointerCapture) try {
-				d.value.setPointerCapture(i), A.value = i;
+				d.value.setPointerCapture(i), ae.value = i;
 			} catch {
-				A.value = null;
+				ae.value = null;
 			}
-			Me(!0), Re(e), Ne();
+			je(!0), Le(e), Me();
 		}
-		function Re(e) {
+		function Le(e) {
 			if (!C.value || !k.value.trackSize) return;
 			let t = k.value.trackSize * (ve.value / 100), n = Math.max(1, k.value.trackSize - t);
-			Oe(H(e - k.value.trackStart - k.value.offset, 0, n) / n * 100, "drag");
+			De(U(e - k.value.trackStart - k.value.offset, 0, n) / n * 100, "drag");
 		}
-		function ze() {
-			if (A.value != null && d.value?.releasePointerCapture) {
+		function Re() {
+			if (ae.value != null && d.value?.releasePointerCapture) {
 				try {
-					d.value.releasePointerCapture(A.value);
+					d.value.releasePointerCapture(ae.value);
 				} catch {}
-				A.value = null;
+				ae.value = null;
 			}
-			Me(!1), C.value = !1, Pe();
+			je(!1), C.value = !1, Ne();
 		}
-		function q(e) {
+		function ze(e) {
 			if (r.disabled || e.button !== 0 && e.pointerType !== "touch") return;
-			ze();
+			Re();
 			let t = m.value?.getBoundingClientRect(), n = t ? t[L.value.size] / 2 : 0;
-			Le(e[L.value.clientXorY], n, e);
+			Ie(e[L.value.clientXorY], n, e);
 		}
-		function J(e) {
+		function Be(e) {
 			if (r.disabled || e.button !== 0 && e.pointerType !== "touch") return;
-			ze();
+			Re();
 			let t = m.value?.getBoundingClientRect(), n = t ? e[L.value.clientXorY] - t[L.value.topOrLeft] : 0;
-			Le(e[L.value.clientXorY], n, e);
+			Ie(e[L.value.clientXorY], n, e);
 		}
-		function Be(e) {
-			C.value && (e.cancelable && e.preventDefault(), Re(e[L.value.clientXorY]));
+		function Ve(e) {
+			C.value && (e.cancelable && e.preventDefault(), Le(e[L.value.clientXorY]));
 		}
-		function Ve() {
-			C.value && ze();
+		function He() {
+			C.value && Re();
 		}
-		function He(e = w.value) {
+		function Ue(e = w.value) {
 			if (typeof e == "number") {
-				Oe(e, "api");
+				De(e, "api");
 				return;
 			}
-			e && typeof e == "object" && Ue(e);
+			e && typeof e == "object" && J(e);
 		}
-		function Ue({ top: e, left: t, behavior: n = "auto" } = {}) {
+		function J({ top: e, left: t, behavior: n = "auto" } = {}) {
 			let r = I.value ? t ?? e : e ?? t;
-			typeof r == "number" && W(r, "api");
+			typeof r == "number" && G(r, "api");
 		}
 		function We({ top: e = 0, left: t = 0, behavior: n = "auto" } = {}) {
 			if (!f.value) return;
 			let r = I.value ? t : e;
-			W(f.value[L.value.scrollTopOrLeft] + r, "api");
+			G(f.value[L.value.scrollTopOrLeft] + r, "api");
 		}
 		function Ge() {
-			W(0, "api");
+			G(0, "api");
 		}
 		function Ke() {
-			W(V.value, "api");
+			G(V.value, "api");
 		}
-		function X() {
+		function qe() {
 			d.value?.focus();
 		}
 		return te(() => {
-			G(), window.addEventListener("resize", G), typeof ResizeObserver < "u" && f.value && (P = new ResizeObserver(() => G()), P.observe(f.value)), g(() => {
+			K(), window.addEventListener("resize", K), typeof ResizeObserver < "u" && f.value && (P = new ResizeObserver(() => K()), P.observe(f.value)), g(() => {
 				requestAnimationFrame(() => {
-					je(), U();
+					Ae(), W();
 				});
 			});
 		}), se(() => [
 			r.horizontal,
 			r.width,
 			r.height
-		], () => G()), se(() => r.scrollPosition, () => {
+		], () => K()), se(() => r.scrollPosition, () => {
 			r.scrollPosition != null && g(() => {
-				je(), U();
+				Ae(), W();
 			});
 		}, { deep: !0 }), se(I, () => {
 			r.scrollPosition != null && g(() => {
-				je(), U();
+				Ae(), W();
 			});
 		}), ee(() => {
-			window.removeEventListener("resize", G), ze(), j && window.clearTimeout(j), M && window.clearTimeout(M), P && f.value && P.unobserve(f.value), P = null;
+			window.removeEventListener("resize", K), Re(), j && window.clearTimeout(j), M && window.clearTimeout(M), P && f.value && P.unobserve(f.value), P = null;
 		}), t({
-			scroll: He,
-			scrollTo: Ue,
+			scroll: Ue,
+			scrollTo: J,
 			scrollBy: We,
 			scrollToStart: Ge,
 			scrollToEnd: Ke,
-			focus: X,
-			refresh: G
+			focus: qe,
+			refresh: K
 		}), (e, t) => (b(), c("div", h({
 			class: "w-scrollable",
 			ref_key: "rootEl",
@@ -6971,10 +7035,10 @@ var dr = /* @__PURE__ */ K({
 			tabindex: le.value,
 			role: "region",
 			"aria-disabled": r.disabled ? "true" : void 0,
-			onMouseenter: Ee,
-			onMouseleave: De,
-			onWheel: Fe,
-			onKeydown: Ie,
+			onMouseenter: Te,
+			onMouseleave: Ee,
+			onWheel: Pe,
+			onKeydown: Fe,
 			class: ue.value,
 			style: xe.value
 		}), [l("div", {
@@ -6982,18 +7046,18 @@ var dr = /* @__PURE__ */ K({
 			id: re(s),
 			ref_key: "scrollableEl",
 			ref: f,
-			onScroll: ke
-		}, [T(e.$slots, "default")], 42, pr), N(l("div", {
+			onScroll: Oe
+		}, [T(e.$slots, "default")], 42, xr), N(l("div", {
 			class: _(["w-scrollable__scrollbar", de.value]),
 			ref_key: "trackEl",
 			ref: p,
 			role: "presentation",
-			onPointerdown: F(q, ["prevent"])
+			onPointerdown: F(ze, ["prevent"])
 		}, [l("div", {
 			class: _(["w-scrollable__scrollbar-thumb", { [r.color]: !!r.color }]),
 			ref_key: "thumbEl",
 			ref: m,
-			style: y(Se.value),
+			style: y(H.value),
 			role: "scrollbar",
 			"aria-controls": re(s),
 			"aria-orientation": pe.value,
@@ -7003,18 +7067,18 @@ var dr = /* @__PURE__ */ K({
 			"aria-disabled": r.disabled ? "true" : void 0,
 			"aria-label": _e.value,
 			tabindex: "-1",
-			onPointerdown: F(J, ["stop", "prevent"])
-		}, null, 46, mr)], 34), [[oe, B.value && z.value]])], 16, fr));
+			onPointerdown: F(Be, ["stop", "prevent"])
+		}, null, 46, Sr)], 34), [[oe, B.value && z.value]])], 16, br));
 	}
-}), vr = [
+}), Er = [
 	"aria-expanded",
 	"aria-owns",
 	"aria-activedescendant"
-], yr = {
+], Dr = {
 	key: 0,
 	class: "w-select__selection-slot"
-}, br = ["innerHTML"], xr = ["value", "name"];
-function Sr(t, n, r, i, a, p) {
+}, Or = ["innerHTML"], kr = ["value", "name"];
+function Ar(t, n, r, i, a, p) {
 	let m = E("w-icon"), g = E("w-list"), v = E("w-menu");
 	return b(), o(D(t.formRegister ? "w-form-element" : "div"), h({ ref: "formEl" }, t.formRegister && {
 		validators: t.validators,
@@ -7109,20 +7173,20 @@ function Sr(t, n, r, i, a, p) {
 						default: M(() => [d(O(r.innerIconLeft), 1)]),
 						_: 1
 					})) : s("", !0)]),
-					t.$slots.selection ? (b(), c("div", yr, [T(t.$slots, "selection", { item: r.multiple ? t.inputValue : t.inputValue[0] })])) : s("", !0),
+					t.$slots.selection ? (b(), c("div", Dr, [T(t.$slots, "selection", { item: r.multiple ? t.inputValue : t.inputValue[0] })])) : s("", !0),
 					l("div", h({
 						class: "w-select__selection",
 						ref: "selection-input",
 						onFocus: n[2] ||= (e) => !t.isDisabled && !t.isReadonly && p.onFocus(e),
 						onBlur: n[3] ||= (...e) => p.onBlur && p.onBlur(...e),
 						onKeydown: n[4] ||= (e) => !t.isDisabled && !t.isReadonly && p.onKeydown(e)
-					}, p.selectionAttributes, { innerHTML: p.selectionHtml }), null, 16, br),
+					}, p.selectionAttributes, { innerHTML: p.selectionHtml }), null, 16, Or),
 					(b(!0), c(e, null, w(t.inputValue.length ? t.inputValue : [{}], (e, n) => (b(), c("input", {
 						key: n,
 						type: "hidden",
 						value: e.value === void 0 ? "" : e.value.toString(),
 						name: t.inputName + (r.multiple ? "[]" : "")
-					}, null, 8, xr))), 128)),
+					}, null, 8, kr))), 128)),
 					r.labelPosition === "inside" && p.showLabelInside ? (b(), c(e, { key: 1 }, [t.$slots.default || r.label ? (b(), c("label", {
 						key: 0,
 						class: _(["w-select__label w-select__label--inside w-form-el-shakable", t.labelClasses])
@@ -7136,7 +7200,7 @@ function Sr(t, n, r, i, a, p) {
 						default: M(() => [d(O(r.innerIconRight), 1)]),
 						_: 1
 					})) : s("", !0)])
-				], 10, vr)]),
+				], 10, Er)]),
 				_: 3
 			}, 16, [
 				"modelValue",
@@ -7158,7 +7222,7 @@ function Sr(t, n, r, i, a, p) {
 		"class"
 	]);
 }
-var Cr = /* @__PURE__ */ K({
+var jr = /* @__PURE__ */ q({
 	name: "w-select",
 	expose: ["focus"],
 	mixins: [Q, $],
@@ -7318,7 +7382,7 @@ var Cr = /* @__PURE__ */ K({
 	},
 	methods: {
 		focus() {
-			J(this) && (q(this.$refs["selection-input"]), this.showMenu || this.openMenu());
+			We(this) && (J(this.$refs["selection-input"]), this.showMenu || this.openMenu());
 		},
 		onFocus(e) {
 			if (!this.isFocused) return this.isFocused = !0, this.$emit("focus", e), !1;
@@ -7403,12 +7467,12 @@ var Cr = /* @__PURE__ */ K({
 			this.inputValue = this.checkSelection(this.modelValue);
 		}
 	}
-}, [["render", Sr]]), wr = ["for"], Tr = ["for", "innerHTML"], Er = { class: "w-slider__track-wrap" }, Dr = [
+}, [["render", Ar]]), Mr = ["for"], Nr = ["for", "innerHTML"], Pr = { class: "w-slider__track-wrap" }, Fr = [
 	"aria-valuemin",
 	"aria-valuemax",
 	"aria-valuenow",
 	"aria-readonly"
-], Or = [
+], Ir = [
 	"id",
 	"name",
 	"model-value",
@@ -7416,11 +7480,11 @@ var Cr = /* @__PURE__ */ K({
 	"readonly",
 	"aria-readonly",
 	"tabindex"
-], kr = ["for"], Ar = { key: 0 }, jr = {
+], Lr = ["for"], Rr = { key: 0 }, zr = {
 	key: 0,
 	class: "w-slider__step-labels"
-}, Mr = ["onClick"], Nr = ["for"], Pr = ["for", "innerHTML"];
-function Fr(t, n, r, i, a, u) {
+}, Br = ["onClick"], Vr = ["for"], Hr = ["for", "innerHTML"];
+function Ur(t, n, r, i, a, u) {
 	return b(), o(D(t.formRegister ? "w-form-element" : "div"), h({ ref: "formEl" }, t.formRegister && {
 		validators: t.validators,
 		inputValue: t.rangeValueScaled,
@@ -7441,13 +7505,13 @@ function Fr(t, n, r, i, a, u) {
 				key: 0,
 				class: _(["w-slider__label w-slider__label--left w-form-el-shakable", t.labelClasses]),
 				for: u.thumbId
-			}, [T(t.$slots, "label-left")], 10, wr)) : r.labelLeft ? (b(), c("label", {
+			}, [T(t.$slots, "label-left")], 10, Mr)) : r.labelLeft ? (b(), c("label", {
 				key: 1,
 				class: _(["w-slider__label w-slider__label--left w-form-el-shakable", t.labelClasses]),
 				for: u.thumbId,
 				innerHTML: r.labelLeft
-			}, null, 10, Tr)) : s("", !0),
-			l("div", Er, [l("div", {
+			}, null, 10, Nr)) : s("", !0),
+			l("div", Pr, [l("div", {
 				class: _(["w-slider__track", u.trackClasses]),
 				ref: "track",
 				onMousedown: n[4] ||= (...e) => u.onTrackMouseDown && u.onTrackMouseDown(...e),
@@ -7478,14 +7542,14 @@ function Fr(t, n, r, i, a, u) {
 				onKeydown: [n[0] ||= P((e) => u.onKeyDown(e, -1), ["left"]), n[1] ||= P((e) => u.onKeyDown(e, 1), ["right"])],
 				onFocus: n[2] ||= (e) => t.$emit("focus", e),
 				onClick: n[3] ||= F(() => {}, ["prevent"])
-			}, null, 42, Or), r.thumbLabel ? (b(), c("label", {
+			}, null, 42, Ir), r.thumbLabel ? (b(), c("label", {
 				key: 0,
 				class: _(["w-slider__thumb-label", u.thumbClasses]),
 				for: u.thumbId
-			}, [r.thumbLabel === "droplet" ? (b(), c("div", Ar, [T(t.$slots, "label", { value: t.rangeValueScaled }, () => [d(O(~~t.rangeValueScaled), 1)])])) : T(t.$slots, "label", {
+			}, [r.thumbLabel === "droplet" ? (b(), c("div", Rr, [T(t.$slots, "label", { value: t.rangeValueScaled }, () => [d(O(~~t.rangeValueScaled), 1)])])) : T(t.$slots, "label", {
 				key: 1,
 				value: t.rangeValueScaled
-			}, () => [d(O(~~t.rangeValueScaled), 1)])], 10, kr)) : s("", !0)], 4)], 42, Dr), r.stepLabels && r.step ? (b(), c("div", jr, [
+			}, () => [d(O(~~t.rangeValueScaled), 1)])], 10, Lr)) : s("", !0)], 4)], 42, Fr), r.stepLabels && r.step ? (b(), c("div", zr, [
 				l("div", {
 					class: "w-slider__step-label",
 					onClick: n[6] ||= (e) => u.onStepLabelClick(0)
@@ -7495,7 +7559,7 @@ function Fr(t, n, r, i, a, u) {
 					key: e,
 					onClick: (t) => u.onStepLabelClick(e * (100 / u.numberOfSteps)),
 					style: y(`left: ${e * (100 / u.numberOfSteps)}%`)
-				}, O(u.percentToScaled(e * (100 / u.numberOfSteps))), 13, Mr))), 128)),
+				}, O(u.percentToScaled(e * (100 / u.numberOfSteps))), 13, Br))), 128)),
 				~~u.numberOfSteps === u.numberOfSteps ? s("", !0) : (b(), c("div", {
 					key: 0,
 					class: "w-slider__step-label",
@@ -7507,12 +7571,12 @@ function Fr(t, n, r, i, a, u) {
 				key: 2,
 				class: _(["w-slider__label w-slider__label--right w-form-el-shakable", t.labelClasses]),
 				for: u.thumbId
-			}, [T(t.$slots, "label-right")], 10, Nr)) : r.labelRight ? (b(), c("label", {
+			}, [T(t.$slots, "label-right")], 10, Vr)) : r.labelRight ? (b(), c("label", {
 				key: 3,
 				class: _(["w-slider__label w-slider__label--right w-form-el-shakable", t.labelClasses]),
 				for: u.thumbId,
 				innerHTML: r.labelRight
-			}, null, 10, Pr)) : s("", !0)
+			}, null, 10, Hr)) : s("", !0)
 		]),
 		_: 3
 	}, 16, [
@@ -7521,7 +7585,7 @@ function Fr(t, n, r, i, a, u) {
 		"class"
 	]);
 }
-var Ir = /* @__PURE__ */ K({
+var Wr = /* @__PURE__ */ q({
 	name: "w-slider",
 	expose: ["focus"],
 	focusTargetRef: "thumb",
@@ -7675,15 +7739,15 @@ var Ir = /* @__PURE__ */ K({
 	watch: { modelValue(e) {
 		this.rangeValueScaled !== e && (this.rangeValueScaled = e, this.rangeValuePercent = this.scaledToPercent(e));
 	} }
-}, [["render", Fr]]), Lr = { key: 0 };
-function Rr(e, t, n, r, i, a) {
+}, [["render", Ur]]), Gr = { key: 0 };
+function Kr(e, t, n, r, i, a) {
 	return n.modelValue || n.modelValue === void 0 ? (b(), c("div", {
 		key: 0,
 		class: _(["w-spinner", a.classes]),
 		style: y(a.styles)
-	}, [a.isThreeDots ? (b(), c("span", Lr)) : s("", !0)], 6)) : s("", !0);
+	}, [a.isThreeDots ? (b(), c("span", Gr)) : s("", !0)], 6)) : s("", !0);
 }
-var zr = /* @__PURE__ */ K({
+var qr = /* @__PURE__ */ q({
 	name: "w-spinner",
 	props: {
 		modelValue: {},
@@ -7724,13 +7788,13 @@ var zr = /* @__PURE__ */ K({
 			};
 		}
 	}
-}, [["render", Rr]]);
+}, [["render", Kr]]);
 //#endregion
 //#region src/wave-ui/components/w-steps.vue?vue&type=template&lang.js
-function Br(e, t, n, r, i, a) {
+function Jr(e, t, n, r, i, a) {
 	return b(), c("div", { class: _(["w-steps", a.classes]) }, null, 2);
 }
-var Vr = /* @__PURE__ */ K({
+var Yr = /* @__PURE__ */ q({
 	name: "w-steps",
 	props: {
 		dark: { type: Boolean },
@@ -7744,7 +7808,7 @@ var Vr = /* @__PURE__ */ K({
 			"w-steps--light": this.light
 		};
 	} }
-}, [["render", Br]]), Hr = [
+}, [["render", Jr]]), Xr = [
 	"id",
 	"name",
 	"checked",
@@ -7754,11 +7818,11 @@ var Vr = /* @__PURE__ */ K({
 	"required",
 	"tabindex",
 	"aria-checked"
-], Ur = ["for"], Wr = {
+], Zr = ["for"], Qr = {
 	key: 0,
 	class: "w-switch__track"
-}, Gr = { class: "w-switch__thumb" }, Kr = { class: "w-switch__thumb-content" }, qr = ["for"];
-function Jr(t, n, r, i, a, u) {
+}, $r = { class: "w-switch__thumb" }, ei = { class: "w-switch__thumb-content" }, ti = ["for"];
+function ni(t, n, r, i, a, u) {
 	let f = E("w-progress");
 	return b(), o(D(t.formRegister ? "w-form-element" : "div"), h({ ref: "formEl" }, t.formRegister && {
 		validators: t.validators,
@@ -7795,18 +7859,18 @@ function Jr(t, n, r, i, a, u) {
 				onBlur: n[2] ||= (e) => t.$emit("blur", e),
 				"aria-checked": a.isOn || "false",
 				role: "switch"
-			}), null, 16, Hr),
+			}), null, 16, Xr),
 			u.hasLabel && r.labelOnLeft ? (b(), c(e, { key: 0 }, [t.$slots.default || r.label ? (b(), c("label", {
 				key: 0,
 				class: _(["w-switch__label w-switch__label--left w-form-el-shakable", t.labelClasses]),
 				for: t.inputId
-			}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, Ur)) : s("", !0)], 64)) : s("", !0),
+			}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, Zr)) : s("", !0)], 64)) : s("", !0),
 			l("div", {
 				class: _(["w-switch__input", u.inputClasses]),
 				onClick: n[3] ||= (e) => {
 					t.$refs.input.focus(), t.$refs.input.click();
 				}
-			}, [t.$slots.track ? (b(), c("div", Wr, [T(t.$slots, "track")])) : s("", !0), l("div", Gr, [l("div", Kr, [r.loading ? (b(), o(f, h({
+			}, [t.$slots.track ? (b(), c("div", Qr, [T(t.$slots, "track")])) : s("", !0), l("div", $r, [l("div", ei, [r.loading ? (b(), o(f, h({
 				key: 0,
 				circle: "",
 				color: "inherit"
@@ -7815,7 +7879,7 @@ function Jr(t, n, r, i, a, u) {
 				key: 0,
 				class: _(["w-switch__label w-switch__label--right w-form-el-shakable", t.labelClasses]),
 				for: t.inputId
-			}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, qr)) : s("", !0)], 64)) : s("", !0)
+			}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, ti)) : s("", !0)], 64)) : s("", !0)
 		]),
 		_: 3
 	}, 16, [
@@ -7824,7 +7888,7 @@ function Jr(t, n, r, i, a, u) {
 		"style"
 	]);
 }
-var Yr = /* @__PURE__ */ K({
+var ri = /* @__PURE__ */ q({
 	name: "w-switch",
 	expose: ["focus"],
 	mixins: [Q, $],
@@ -7920,28 +7984,28 @@ var Yr = /* @__PURE__ */ K({
 	watch: { modelValue(e) {
 		this.isOn = e;
 	} }
-}, [["render", Jr]]), Xr = { class: "w-tabs__content" };
-function Zr(e, t, n, r, i, a) {
-	return b(), c("div", Xr, [T(e.$slots, "default", { item: n.item })]);
+}, [["render", ni]]), ii = { class: "w-tabs__content" };
+function ai(e, t, n, r, i, a) {
+	return b(), c("div", ii, [T(e.$slots, "default", { item: n.item })]);
 }
-var Qr = /* @__PURE__ */ K({
+var oi = /* @__PURE__ */ q({
 	name: "tab-content",
 	props: { item: Object }
-}, [["render", Zr]]), $r = [
+}, [["render", ai]]), si = [
 	"onPointerdown",
 	"onClick",
 	"onFocus",
 	"tabindex",
 	"onKeypress",
 	"aria-selected"
-], ei = ["innerHTML"], ti = {
+], ci = ["innerHTML"], li = {
 	key: 0,
 	class: "w-tabs__bar-extra"
-}, ni = {
+}, ui = {
 	key: 0,
 	class: "w-tabs__content-wrap"
-}, ri = ["innerHTML"], ii = ["innerHTML"];
-function ai(n, a, u, d, f, p) {
+}, di = ["innerHTML"], fi = ["innerHTML"];
+function pi(n, a, u, d, f, p) {
 	let m = E("tab-content");
 	return b(), c("div", { class: _(["w-tabs", p.tabsClasses]) }, [l("div", {
 		class: _(["w-tabs__bar", p.tabsBarClasses]),
@@ -7967,14 +8031,14 @@ function ai(n, a, u, d, f, p) {
 			item: p.getOriginalItem(e),
 			index: t + 1,
 			active: e._uid === n.activeTabUid
-		}, () => [l("div", { innerHTML: e[u.itemTitleKey] }, null, 8, ei)])], 42, $r))), 128)),
-		n.$slots["tabs-bar-extra"] ? (b(), c("div", ti, [T(n.$slots, "tabs-bar-extra")])) : s("", !0),
+		}, () => [l("div", { innerHTML: e[u.itemTitleKey] }, null, 8, ci)])], 42, si))), 128)),
+		n.$slots["tabs-bar-extra"] ? (b(), c("div", li, [T(n.$slots, "tabs-bar-extra")])) : s("", !0),
 		!u.noSlider && !u.card ? (b(), c("div", {
 			key: 1,
 			class: _(["w-tabs__slider", u.sliderColor]),
 			style: y(p.sliderStyles)
 		}, null, 6)) : s("", !0)
-	], 2), n.tabs.length ? (b(), c("div", ni, [u.keepInDom ? (b(), o(i, {
+	], 2), n.tabs.length ? (b(), c("div", ui, [u.keepInDom ? (b(), o(i, {
 		key: 0,
 		name: p.transitionName
 	}, {
@@ -7996,7 +8060,7 @@ function ai(n, a, u, d, f, p) {
 			}, () => [e[u.itemContentKey] ? (b(), c("div", {
 				key: 0,
 				innerHTML: e[u.itemContentKey]
-			}, null, 8, ri)) : s("", !0)])]),
+			}, null, 8, di)) : s("", !0)])]),
 			_: 2
 		}, 1032, ["item", "class"])), [[oe, e._uid === p.activeTab._uid]])), 128))]),
 		_: 3
@@ -8023,18 +8087,19 @@ function ai(n, a, u, d, f, p) {
 			}, () => [t[u.itemContentKey] ? (b(), c("div", {
 				key: 0,
 				innerHTML: t[u.itemContentKey]
-			}, null, 8, ii)) : s("", !0)])], 64)) : s("", !0)]),
+			}, null, 8, fi)) : s("", !0)])], 64)) : s("", !0)]),
 			_: 3
 		}, 8, ["item", "class"]))], 1032, ["exclude"]))]),
 		_: 3
 	}, 8, ["name", "mode"]))])) : s("", !0)], 2);
 }
-var oi = /* @__PURE__ */ K({
+var mi = /* @__PURE__ */ q({
 	name: "w-tabs",
+	focusable: !0,
 	expose: ["focus"],
 	mixins: [X],
 	setup() {
-		return { tabsStableId: ae() };
+		return { tabsStableId: A() };
 	},
 	props: {
 		modelValue: { type: [Number, String] },
@@ -8096,7 +8161,7 @@ var oi = /* @__PURE__ */ K({
 			default: !1
 		}
 	},
-	components: { TabContent: Qr },
+	components: { TabContent: oi },
 	emits: [
 		"input",
 		"update:modelValue",
@@ -8160,7 +8225,7 @@ var oi = /* @__PURE__ */ K({
 	methods: {
 		focus() {
 			let e = this.$refs["tabs-bar"];
-			e && q(e.querySelector("[role=\"tab\"][aria-selected=\"true\"]:not([tabindex=\"-1\"])") || e.querySelector("[role=\"tab\"][tabindex=\"0\"]"));
+			e && J(e.querySelector("[role=\"tab\"][aria-selected=\"true\"]:not([tabindex=\"-1\"])") || e.querySelector("[role=\"tab\"][tabindex=\"0\"]"));
 		},
 		resolveTabUid(e) {
 			if (!this.tabs.length) return null;
@@ -8281,45 +8346,45 @@ var oi = /* @__PURE__ */ K({
 			e ? window.removeEventListener("resize", this.onResize) : (this.updateSlider(), window.addEventListener("resize", this.onResize));
 		}
 	}
-}, [["render", ai]]), si = { class: "w-table__scroll-wrap" }, ci = { ref: "colgroup" }, li = ["width"], ui = { key: 0 }, di = ["onClick", "onPointerdown"], fi = ["innerHTML"], pi = {
+}, [["render", pi]]), hi = { class: "w-table__scroll-wrap" }, gi = { ref: "colgroup" }, _i = ["width"], vi = { key: 0 }, yi = ["onClick", "onPointerdown"], bi = ["innerHTML"], xi = {
 	key: 0,
 	class: "w-table__progress-bar"
-}, mi = ["colspan"], hi = {
+}, Si = ["colspan"], Ci = {
 	key: 0,
 	class: "w-table__progress-bar"
-}, gi = ["colspan"], _i = { class: "w-table__loading-text" }, vi = {
+}, wi = ["colspan"], Ti = { class: "w-table__loading-text" }, Ei = {
 	key: 1,
 	class: "no-data"
-}, yi = ["colspan"], bi = ["onClick"], xi = ["data-label"], Si = ["data-label"], Ci = ["innerHTML"], wi = {
+}, Di = ["colspan"], Oi = ["onClick"], ki = ["data-label"], Ai = ["data-label"], ji = ["innerHTML"], Mi = {
 	key: 2,
 	class: "w-table__row w-table__row--expansion"
-}, Ti = ["colspan"], Ei = { key: 0 }, Di = {
+}, Ni = ["colspan"], Pi = { key: 0 }, Fi = {
 	key: 3,
 	class: "w-table__extra-row"
-}, Oi = {
+}, Ii = {
 	key: 1,
 	class: "w-table__footer"
-}, ki = {
+}, Li = {
 	key: 1,
 	class: "w-table__row"
-}, Ai = ["colspan"], ji = {
+}, Ri = ["colspan"], zi = {
 	key: 0,
 	class: "w-table__pagination w-pagination"
-}, Mi = { class: "pages-wrap" }, Ni = { class: "w-pagination__results" };
-function Pi(t, n, r, i, a, u) {
+}, Bi = { class: "pages-wrap" }, Vi = { class: "w-pagination__results" };
+function Hi(t, n, r, i, a, u) {
 	let p = E("w-icon"), m = E("w-progress"), h = E("w-transition-fade"), g = E("w-transition-expand"), v = E("w-select"), y = E("w-button");
-	return b(), c("div", { class: _(["w-table w-table--wrap", u.classes]) }, [l("div", si, [l("table", {
+	return b(), c("div", { class: _(["w-table w-table--wrap", u.classes]) }, [l("div", hi, [l("table", {
 		class: "w-table__table",
 		onMousedown: n[2] ||= (...e) => u.onMouseDown && u.onMouseDown(...e),
 		onMouseover: n[3] ||= (...e) => u.onMouseOver && u.onMouseOver(...e),
 		onMouseout: n[4] ||= (...e) => u.onMouseOut && u.onMouseOut(...e)
 	}, [
-		l("colgroup", ci, [(b(!0), c(e, null, w(r.headers, (e, t) => (b(), c("col", {
+		l("colgroup", gi, [(b(!0), c(e, null, w(r.headers, (e, t) => (b(), c("col", {
 			class: _(["w-table__col", u.colClasses[t]]),
 			key: t,
 			width: e.width || null
-		}, null, 10, li))), 128))], 512),
-		r.noHeaders ? s("", !0) : (b(), c("thead", ui, [l("tr", null, [(b(!0), c(e, null, w(r.headers, (i, a) => (b(), c("th", {
+		}, null, 10, _i))), 128))], 512),
+		r.noHeaders ? s("", !0) : (b(), c("thead", vi, [l("tr", null, [(b(!0), c(e, null, w(r.headers, (i, a) => (b(), c("th", {
 			class: _(["w-table__header", u.headerClasses(i)]),
 			key: a,
 			onClick: (e) => !t.colResizing.dragging && i.sortable !== !1 && u.sortTable(i),
@@ -8340,7 +8405,7 @@ function Pi(t, n, r, i, a, u) {
 			}, () => [d(O(i.label || ""), 1)]) : (b(), c("span", {
 				key: 1,
 				innerHTML: i.label || ""
-			}, null, 8, fi))], 64)) : s("", !0),
+			}, null, 8, bi))], 64)) : s("", !0),
 			i.sortable !== !1 && i.align !== "right" ? (b(), o(p, {
 				key: 2,
 				class: _(["w-table__header-sort", u.headerSortClasses(i)])
@@ -8356,15 +8421,15 @@ function Pi(t, n, r, i, a, u) {
 				}]),
 				onClick: n[0] ||= F(() => {}, ["stop"])
 			}, null, 2)) : s("", !0)
-		], 42, di))), 128))]), f(h, null, {
-			default: M(() => [r.loading === "header" ? (b(), c("tr", pi, [l("td", { colspan: r.headers.length }, [f(m, { tile: "" })], 8, mi)])) : s("", !0)]),
+		], 42, yi))), 128))]), f(h, null, {
+			default: M(() => [r.loading === "header" ? (b(), c("tr", xi, [l("td", { colspan: r.headers.length }, [f(m, { tile: "" })], 8, Si)])) : s("", !0)]),
 			_: 1
 		})])),
 		l("tbody", null, [
-			r.loading === !0 ? (b(), c("tr", hi, [l("td", { colspan: r.headers.length }, [f(m, { tile: "" }), l("div", _i, [T(t.$slots, "loading", {}, () => [n[11] ||= d("Loading...", -1)])])], 8, gi)])) : u.tableItems.length ? s("", !0) : (b(), c("tr", vi, [l("td", {
+			r.loading === !0 ? (b(), c("tr", Ci, [l("td", { colspan: r.headers.length }, [f(m, { tile: "" }), l("div", Ti, [T(t.$slots, "loading", {}, () => [n[11] ||= d("Loading...", -1)])])], 8, wi)])) : u.tableItems.length ? s("", !0) : (b(), c("tr", Ei, [l("td", {
 				class: "w-table__cell text-center",
 				colspan: r.headers.length
-			}, [T(t.$slots, "no-data", {}, () => [n[12] ||= d("No data to show.", -1)])], 8, yi)])),
+			}, [T(t.$slots, "no-data", {}, () => [n[12] ||= d("No data to show.", -1)])], 8, Di)])),
 			u.tableItems.length && r.loading !== !0 ? (b(!0), c(e, { key: 2 }, w(u.paginatedItems, (i, a) => (b(), c(e, { key: a }, [t.$slots.item ? T(t.$slots, "item", {
 				key: 0,
 				item: i,
@@ -8412,21 +8477,21 @@ function Pi(t, n, r, i, a, u) {
 					"w-table__col-resizer--hover": t.colResizing.hover === o,
 					"w-table__col-resizer--active": t.colResizing.columnIndex === o
 				}])
-			}, null, 2)) : s("", !0)], 10, xi)) : (b(), c("td", {
+			}, null, 2)) : s("", !0)], 10, ki)) : (b(), c("td", {
 				class: _(["w-table__cell", u.cellClasses(n)]),
 				key: `${o}-b`,
 				"data-label": n.label
-			}, [l("div", { innerHTML: i[n.key] || "" }, null, 8, Ci), o < r.headers.length - 1 && r.resizableColumns ? (b(), c("span", {
+			}, [l("div", { innerHTML: i[n.key] || "" }, null, 8, ji), o < r.headers.length - 1 && r.resizableColumns ? (b(), c("span", {
 				key: 0,
 				class: _(["w-table__col-resizer", {
 					"w-table__col-resizer--hover": t.colResizing.hover === o,
 					"w-table__col-resizer--active": t.colResizing.columnIndex === o
 				}])
-			}, null, 2)) : s("", !0)], 10, Si))], 64))), 256))], 42, bi)), u.expandedRowsByUid[i._uid] ? (b(), c("tr", wi, [l("td", {
+			}, null, 2)) : s("", !0)], 10, Ai))], 64))), 256))], 42, Oi)), u.expandedRowsByUid[i._uid] ? (b(), c("tr", Mi, [l("td", {
 				class: "w-table__cell",
 				colspan: r.headers.length
 			}, [f(g, { y: "" }, {
-				default: M(() => [u.expandedRowsByUid[i._uid] ? (b(), c("div", Ei, [T(t.$slots, "row-expansion", {
+				default: M(() => [u.expandedRowsByUid[i._uid] ? (b(), c("div", Pi, [T(t.$slots, "row-expansion", {
 					item: i,
 					index: a + 1
 				})])) : s("", !0), a < r.headers.length - 1 && r.resizableColumns ? (b(), c("span", {
@@ -8437,14 +8502,14 @@ function Pi(t, n, r, i, a, u) {
 					}])
 				}, null, 2)) : s("", !0)]),
 				_: 2
-			}, 1024)], 8, Ti)])) : s("", !0)], 64))), 128)) : s("", !0),
-			t.$slots["extra-row"] ? (b(), c("div", Di, [T(t.$slots, "extra-row")])) : s("", !0)
+			}, 1024)], 8, Ni)])) : s("", !0)], 64))), 128)) : s("", !0),
+			t.$slots["extra-row"] ? (b(), c("div", Fi, [T(t.$slots, "extra-row")])) : s("", !0)
 		]),
-		t.$slots.footer || t.$slots["footer-row"] ? (b(), c("tfoot", Oi, [t.$slots["footer-row"] ? T(t.$slots, "footer-row", { key: 0 }) : t.$slots.footer ? (b(), c("tr", ki, [l("td", {
+		t.$slots.footer || t.$slots["footer-row"] ? (b(), c("tfoot", Ii, [t.$slots["footer-row"] ? T(t.$slots, "footer-row", { key: 0 }) : t.$slots.footer ? (b(), c("tr", Li, [l("td", {
 			class: "w-table__cell",
 			colspan: r.headers.length
-		}, [T(t.$slots, "footer")], 8, Ai)])) : s("", !0)])) : s("", !0)
-	], 32)]), r.pagination && t.paginationConfig ? (b(), c("div", ji, [T(t.$slots, "pagination", {
+		}, [T(t.$slots, "footer")], 8, Ri)])) : s("", !0)])) : s("", !0)
+	], 32)]), r.pagination && t.paginationConfig ? (b(), c("div", zi, [T(t.$slots, "pagination", {
 		range: `${t.paginationConfig.start}-${t.paginationConfig.end}`,
 		total: t.paginationConfig.total,
 		pagesCount: t.paginationConfig.pagesCount,
@@ -8462,7 +8527,7 @@ function Pi(t, n, r, i, a, u) {
 			label: "Items per page",
 			"label-color": "inherit"
 		}, null, 8, ["modelValue", "items"])) : s("", !0),
-		l("div", Mi, [
+		l("div", Bi, [
 			f(y, {
 				class: "w-pagination__arrow w-pagination__arrow--prev",
 				onClick: n[7] ||= (e) => u.goToPage("-1"),
@@ -8520,12 +8585,12 @@ function Pi(t, n, r, i, a, u) {
 				lg: ""
 			}, null, 8, ["disabled"])
 		]),
-		l("span", Ni, O(t.paginationConfig.start) + "-" + O(t.paginationConfig.end || t.paginationConfig.total) + " of " + O(t.paginationConfig.total), 1)
+		l("span", Vi, O(t.paginationConfig.start) + "-" + O(t.paginationConfig.end || t.paginationConfig.total) + " of " + O(t.paginationConfig.total), 1)
 	])])) : s("", !0)], 2);
 }
 //#endregion
 //#region src/wave-ui/components/w-table.vue
-var Fi = 15, Ii = /* @__PURE__ */ K({
+var Ui = 15, Wi = /* @__PURE__ */ q({
 	name: "w-table",
 	mixins: [X],
 	props: {
@@ -8746,9 +8811,9 @@ var Fi = 15, Ii = /* @__PURE__ */ K({
 			this.colResizing.dragging = !0;
 			let o = e.pageX - t, s = i + a, c = i + o, l = a - o;
 			n.style.width = `${i + o}px`, r.style.width = `${a - o}px`;
-			let u = o < 0 && n.offsetWidth > c || n.offsetWidth <= Fi, d = o > 0 && r.offsetWidth > l;
+			let u = o < 0 && n.offsetWidth > c || n.offsetWidth <= Ui, d = o > 0 && r.offsetWidth > l;
 			if (u) {
-				let e = Math.max(n.offsetWidth, Fi);
+				let e = Math.max(n.offsetWidth, Ui);
 				n.style.width = `${e}px`, r.style.width = `${s - e}px`;
 			} else d && (n.style.width = `${s - r.offsetWidth}px`, r.style.width = `${r.offsetWidth}px`);
 		},
@@ -8835,12 +8900,12 @@ var Fi = 15, Ii = /* @__PURE__ */ K({
 			this.updatePaginationConfig({ total: e });
 		}
 	}
-}, [["render", Pi]]), Li = [
+}, [["render", Hi]]), Gi = [
 	"role",
 	"aria-pressed",
 	"tabindex"
 ];
-function Ri(e, t, n, r, i, a) {
+function Ki(e, t, n, r, i, a) {
 	return b(), c("span", {
 		class: _(["w-tag", a.classes]),
 		onClick: t[1] ||= (t) => {
@@ -8862,10 +8927,11 @@ function Ri(e, t, n, r, i, a) {
 		}, ["stop"]),
 		role: "icon",
 		"aria-hidden": "true"
-	})) : s("", !0)], 46, Li);
+	})) : s("", !0)], 46, Gi);
 }
-var zi = /* @__PURE__ */ K({
+var qi = /* @__PURE__ */ q({
 	name: "w-tag",
+	focusable: !0,
 	expose: ["focus"],
 	mixins: [X],
 	props: {
@@ -8893,7 +8959,7 @@ var zi = /* @__PURE__ */ K({
 	},
 	emits: ["input", "update:modelValue"],
 	methods: { focus() {
-		this.modelValue !== -1 && q(this.$el);
+		this.modelValue !== -1 && J(this.$el);
 	} },
 	computed: {
 		presetSize() {
@@ -8925,7 +8991,7 @@ var zi = /* @__PURE__ */ K({
 	methods: { onTagPointerDown(e) {
 		this.modelValue !== -1 && (e.target.closest?.(".w-tag__closable") || this.onRipple(e));
 	} }
-}, [["render", Ri]]), Bi = ["for"], Vi = [
+}, [["render", Ki]]), Ji = ["for"], Yi = [
 	"id",
 	"name",
 	"placeholder",
@@ -8936,8 +9002,8 @@ var zi = /* @__PURE__ */ K({
 	"disabled",
 	"required",
 	"tabindex"
-], Hi = ["for"];
-function Ui(t, n, r, i, a, u) {
+], Xi = ["for"];
+function Zi(t, n, r, i, a, u) {
 	let f = E("w-icon");
 	return b(), o(D(t.formRegister ? "w-form-element" : "div"), h({ ref: "formEl" }, t.formRegister && {
 		validators: t.validators,
@@ -8961,7 +9027,7 @@ function Ui(t, n, r, i, a, u) {
 				key: 0,
 				class: _(["w-textarea__label w-textarea__label--left w-form-el-shakable", t.labelClasses]),
 				for: t.inputId
-			}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, Bi)) : s("", !0)], 64)) : s("", !0),
+			}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, Ji)) : s("", !0)], 64)) : s("", !0),
 			l("div", { class: _(["w-textarea__textarea-wrap", u.inputWrapClasses]) }, [
 				T(t.$slots, "icon-left", { inputId: t.inputId }, () => [r.innerIconLeft ? (b(), o(f, {
 					key: 0,
@@ -8991,7 +9057,7 @@ function Ui(t, n, r, i, a, u) {
 					disabled: t.isDisabled || null,
 					required: t.required || null,
 					tabindex: t.tabindex || null
-				}), null, 16, Vi), [[j, a.inputValue]]),
+				}), null, 16, Yi), [[j, a.inputValue]]),
 				r.labelPosition === "inside" && u.showLabelInside ? (b(), c(e, { key: 0 }, [t.$slots.default || r.label ? (b(), c("label", {
 					key: 0,
 					class: _(["w-textarea__label w-textarea__label--inside w-form-el-shakable", t.labelClasses])
@@ -9011,7 +9077,7 @@ function Ui(t, n, r, i, a, u) {
 				key: 0,
 				class: _(["w-textarea__label w-textarea__label--right w-form-el-shakable", t.labelClasses]),
 				for: t.inputId
-			}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, Hi)) : s("", !0)], 64)) : s("", !0)
+			}, [T(t.$slots, "default", {}, () => [d(O(r.label), 1)])], 10, Xi)) : s("", !0)], 64)) : s("", !0)
 		]),
 		_: 3
 	}, 16, [
@@ -9021,7 +9087,7 @@ function Ui(t, n, r, i, a, u) {
 		"style"
 	]);
 }
-var Wi = /* @__PURE__ */ K({
+var Qi = /* @__PURE__ */ q({
 	name: "w-textarea",
 	expose: ["focus"],
 	focusTargetRef: "textarea",
@@ -9161,8 +9227,8 @@ var Wi = /* @__PURE__ */ K({
 			e ? this.getLineHeight() : this.height = null;
 		}
 	}
-}, [["render", Ui]]), Gi = ["innerHTML"], Ki = ["innerHTML"];
-function qi(t, n, r, i, a, s) {
+}, [["render", Zi]]), $i = ["innerHTML"], ea = ["innerHTML"];
+function ta(t, n, r, i, a, s) {
 	return b(), c("ul", { class: _(["w-timeline", s.classes]) }, [(b(!0), c(e, null, w(r.items, (e, n) => (b(), c("li", {
 		class: "w-timeline-item",
 		key: n
@@ -9180,12 +9246,12 @@ function qi(t, n, r, i, a, s) {
 	}, () => [l("div", {
 		class: _(["w-timeline-item__title", { [e[r.itemColorKey] || r.color]: e[r.itemColorKey] || r.color }]),
 		innerHTML: e[r.itemTitleKey]
-	}, null, 10, Gi), l("div", {
+	}, null, 10, $i), l("div", {
 		class: "w-timeline-item__content",
 		innerHTML: e[r.itemContentKey]
-	}, null, 8, Ki)])]))), 128))], 2);
+	}, null, 8, ea)])]))), 128))], 2);
 }
-var Ji = /* @__PURE__ */ K({
+var na = /* @__PURE__ */ q({
 	name: "w-timeline",
 	props: {
 		items: {
@@ -9220,16 +9286,16 @@ var Ji = /* @__PURE__ */ K({
 			"w-timeline--light": this.light
 		};
 	} }
-}, [["render", qi]]);
+}, [["render", ta]]);
 //#endregion
 //#region src/wave-ui/components/w-toolbar.vue?vue&type=template&lang.js
-function Yi(e, t, n, r, i, a) {
+function ra(e, t, n, r, i, a) {
 	return b(), c("div", {
 		class: _(["w-toolbar", a.classes]),
 		style: y(a.styles)
 	}, [T(e.$slots, "default")], 6);
 }
-var Xi = /* @__PURE__ */ K({
+var ia = /* @__PURE__ */ q({
 	name: "w-toolbar",
 	props: {
 		color: { type: String },
@@ -9284,10 +9350,10 @@ var Xi = /* @__PURE__ */ K({
 			};
 		}
 	}
-}, [["render", Yi]]);
+}, [["render", ra]]);
 //#endregion
 //#region src/wave-ui/components/w-tooltip.vue?vue&type=template&lang.js
-function Zi(t, i, a, l, u, p) {
+function aa(t, i, a, l, u, p) {
 	return b(), c(e, null, [
 		T(t.$slots, "activator"),
 		t.$slots.activator ? s("", !0) : T(t.$slots, "default", { key: 0 }),
@@ -9298,6 +9364,7 @@ function Zi(t, i, a, l, u, p) {
 		}, [f(r, {
 			name: p.transitionName,
 			appear: "",
+			onAfterEnter: t.onDetachableAfterEnter,
 			onAfterLeave: t.onAfterLeave
 		}, {
 			default: M(() => [t.detachableVisible ? (b(), c("div", {
@@ -9307,14 +9374,18 @@ function Zi(t, i, a, l, u, p) {
 				style: y(p.styles)
 			}, [a.tooltip ? (b(), c(e, { key: 0 }, [d(O(a.tooltip), 1)], 64)) : t.$slots.tooltip ? T(t.$slots, "tooltip", { key: 1 }) : t.$slots.activator ? T(t.$slots, "default", { key: 2 }) : s("", !0)], 6)) : s("", !0)]),
 			_: 3
-		}, 8, ["name", "onAfterLeave"])], 8, ["to", "disabled"])) : s("", !0)
+		}, 8, [
+			"name",
+			"onAfterEnter",
+			"onAfterLeave"
+		])], 8, ["to", "disabled"])) : s("", !0)
 	], 64);
 }
-var Qi = /* @__PURE__ */ K({
+var oa = /* @__PURE__ */ q({
 	name: "w-tooltip",
-	mixins: [Pn],
+	mixins: [Hn],
 	setup() {
-		return { tooltipInstanceId: ae() };
+		return { tooltipInstanceId: A() };
 	},
 	props: {
 		modelValue: {},
@@ -9427,26 +9498,26 @@ var Qi = /* @__PURE__ */ K({
 			this.detachableVisible && (this.showOnHover && !e && (await new Promise((e) => setTimeout(e, 10)), this.showOnHover && this.hoveringActivator) || (this.$emit("update:modelValue", this.detachableVisible = !1), this.$emit("input", !1), this.$emit("close"), this.viewportPlacementOverride = null, typeof document < "u" && document.removeEventListener("mousedown", this.onOutsideMousedown), typeof window < "u" && window.removeEventListener("resize", this.onResize)));
 		}
 	}
-}, [["render", Zi]]);
+}, [["render", aa]]);
 //#endregion
 //#region src/wave-ui/components/transitions/w-transition-bounce.vue?vue&type=template&lang.js
-function $i(e, t, n, i, a, s) {
+function sa(e, t, n, i, a, s) {
 	return b(), o(r, h({ name: "bounce" }, e.$props), {
 		default: M(() => [T(e.$slots, "default")]),
 		_: 3
 	}, 16);
 }
-var ea = /* @__PURE__ */ K({
+var ca = /* @__PURE__ */ q({
 	name: "w-transition-bounce",
 	props: {
 		appear: { type: Boolean },
 		duration: { type: [Number, String] },
 		mode: { type: String }
 	}
-}, [["render", $i]]);
+}, [["render", sa]]);
 //#endregion
 //#region src/wave-ui/components/transitions/w-transition-expand.vue?vue&type=template&lang.js
-function ta(e, t, n, i, a, s) {
+function la(e, t, n, i, a, s) {
 	return b(), o(r, {
 		name: "expand",
 		mode: n.mode,
@@ -9476,7 +9547,7 @@ function ta(e, t, n, i, a, s) {
 		"onAfterLeave"
 	]);
 }
-var na = /* @__PURE__ */ K({
+var ua = /* @__PURE__ */ q({
 	name: "w-transition-expand",
 	props: {
 		x: { type: Boolean },
@@ -9573,64 +9644,64 @@ var na = /* @__PURE__ */ K({
 			this.animX && (this.el.width = e.offsetWidth, this.el.marginLeft = t.getPropertyValue("marginLeft"), this.el.marginRight = t.getPropertyValue("marginRight"), this.el.paddingLeft = t.getPropertyValue("paddingLeft"), this.el.paddingRight = t.getPropertyValue("paddingRight"), this.el.borderLeftWidth = t.getPropertyValue("borderLeftWidth"), this.el.borderRightWidth = t.getPropertyValue("borderRightWidth")), this.animY && (this.el.height = e.offsetHeight, this.el.marginTop = t.getPropertyValue("marginTop"), this.el.marginBottom = t.getPropertyValue("marginBottom"), this.el.paddingTop = t.getPropertyValue("paddingTop"), this.el.paddingBottom = t.getPropertyValue("paddingBottom"), this.el.borderTopWidth = t.getPropertyValue("borderTopWidth"), this.el.borderBottomWidth = t.getPropertyValue("borderBottomWidth")), this.el.savedState = !0;
 		}
 	}
-}, [["render", ta]]);
+}, [["render", la]]);
 //#endregion
 //#region src/wave-ui/components/transitions/w-transition-fade.vue?vue&type=template&lang.js
-function ra(e, t, n, i, a, s) {
+function da(e, t, n, i, a, s) {
 	return b(), o(r, h({ name: "fade" }, e.$props), {
 		default: M(() => [T(e.$slots, "default")]),
 		_: 3
 	}, 16);
 }
-var ia = /* @__PURE__ */ K({
+var fa = /* @__PURE__ */ q({
 	name: "w-transition-fade",
 	props: {
 		appear: { type: Boolean },
 		duration: { type: [Number, String] },
 		mode: { type: String }
 	}
-}, [["render", ra]]);
+}, [["render", da]]);
 //#endregion
 //#region src/wave-ui/components/transitions/w-transition-scale.vue?vue&type=template&lang.js
-function aa(e, t, n, i, a, s) {
+function pa(e, t, n, i, a, s) {
 	return b(), o(r, h({ name: "scale" }, e.$props), {
 		default: M(() => [T(e.$slots, "default")]),
 		_: 3
 	}, 16);
 }
-var oa = /* @__PURE__ */ K({
+var ma = /* @__PURE__ */ q({
 	name: "w-transition-scale",
 	props: {
 		appear: { type: Boolean },
 		duration: { type: [Number, String] },
 		mode: { type: String }
 	}
-}, [["render", aa]]);
+}, [["render", pa]]);
 //#endregion
 //#region src/wave-ui/components/transitions/w-transition-scale-fade.vue?vue&type=template&lang.js
-function sa(e, t, n, i, a, s) {
+function ha(e, t, n, i, a, s) {
 	return b(), o(r, h({ name: "scale-fade" }, e.$props), {
 		default: M(() => [T(e.$slots, "default")]),
 		_: 3
 	}, 16);
 }
-var ca = /* @__PURE__ */ K({
+var ga = /* @__PURE__ */ q({
 	name: "w-transition-scale-fade",
 	props: {
 		appear: { type: Boolean },
 		duration: { type: [Number, String] },
 		mode: { type: String }
 	}
-}, [["render", sa]]);
+}, [["render", ha]]);
 //#endregion
 //#region src/wave-ui/components/transitions/w-transition-slide.vue?vue&type=template&lang.js
-function la(e, t, n, i, a, s) {
+function _a(e, t, n, i, a, s) {
 	return b(), o(r, h({ name: s.transitionName }, e.$props), {
 		default: M(() => [T(e.$slots, "default")]),
 		_: 3
 	}, 16, ["name"]);
 }
-var ua = /* @__PURE__ */ K({
+var va = /* @__PURE__ */ q({
 	name: "w-transition-slide",
 	props: {
 		appear: { type: Boolean },
@@ -9649,16 +9720,16 @@ var ua = /* @__PURE__ */ K({
 			return `slide-${this.direction}`;
 		}
 	}
-}, [["render", la]]);
+}, [["render", _a]]);
 //#endregion
 //#region src/wave-ui/components/transitions/w-transition-slide-fade.vue?vue&type=template&lang.js
-function da(e, t, n, i, a, s) {
+function ya(e, t, n, i, a, s) {
 	return b(), o(r, h({ name: s.transitionName }, e.$props), {
 		default: M(() => [T(e.$slots, "default")]),
 		_: 3
 	}, 16, ["name"]);
 }
-var fa = /* @__PURE__ */ K({
+var ba = /* @__PURE__ */ q({
 	name: "w-transition-slide-fade",
 	props: {
 		appear: { type: Boolean },
@@ -9677,27 +9748,27 @@ var fa = /* @__PURE__ */ K({
 			return `slide-fade-${this.direction}`;
 		}
 	}
-}, [["render", da]]);
+}, [["render", ya]]);
 //#endregion
 //#region src/wave-ui/components/transitions/w-transition-twist.vue?vue&type=template&lang.js
-function pa(e, t, n, i, a, s) {
+function xa(e, t, n, i, a, s) {
 	return b(), o(r, h({ name: "twist" }, e.$props), {
 		default: M(() => [T(e.$slots, "default")]),
 		_: 3
 	}, 16);
 }
-var ma = /* @__PURE__ */ K({
+var Sa = /* @__PURE__ */ q({
 	name: "w-transition-twist",
 	props: {
 		appear: { type: Boolean },
 		duration: { type: [Number, String] },
 		mode: { type: String }
 	}
-}, [["render", pa]]), ha = ["innerHTML"], ga = {
+}, [["render", xa]]), Ca = ["innerHTML"], wa = {
 	key: 1,
 	class: "ml1"
 };
-function _a(t, n, r, i, a, u) {
+function Ta(t, n, r, i, a, u) {
 	let f = E("w-button"), p = E("w-icon"), m = E("w-tree", !0);
 	return b(), c("ul", { class: _(["w-tree", u.classes]) }, [(b(!0), c(e, null, w(t.currentDepthItems, (e, i) => (b(), c("li", {
 		class: _(["w-tree__item", u.itemClasses(e)]),
@@ -9739,8 +9810,8 @@ function _a(t, n, r, i, a, u) {
 				default: M(() => [d(O(u.itemIcon(e)), 1)]),
 				_: 2
 			}, 1032, ["color"])) : s("", !0),
-			l("span", { innerHTML: e.label }, null, 8, ha),
-			r.counts && (e.children || e.branch) ? (b(), c("span", ga, "(" + O(e.originalItem.children?.length || 0) + ")", 1)) : s("", !0)
+			l("span", { innerHTML: e.label }, null, 8, Ca),
+			r.counts && (e.children || e.branch) ? (b(), c("span", wa, "(" + O(e.originalItem.children?.length || 0) + ")", 1)) : s("", !0)
 		])]),
 		_: 2
 	}, 1040, [
@@ -9788,8 +9859,9 @@ function _a(t, n, r, i, a, u) {
 		"onAfterLeave"
 	]))], 2))), 128))], 2);
 }
-var va = /* @__PURE__ */ K({
+var Ea = /* @__PURE__ */ q({
 	name: "w-tree",
+	focusable: !0,
 	expose: ["focus"],
 	mixins: [X],
 	props: {
@@ -9873,7 +9945,7 @@ var va = /* @__PURE__ */ K({
 	} },
 	methods: {
 		focus() {
-			this.disabled || q(this.$el.querySelector(".w-tree__item-label[tabindex=\"0\"]"));
+			this.disabled || J(this.$el.querySelector(".w-tree__item-label[tabindex=\"0\"]"));
 		},
 		updateCurrentDepthTree(e, t = []) {
 			if (this.currentDepthItems = [], !Array.isArray(e) && typeof e != "object") return R(`[w-tree] the tree items must be of type array or object, ${typeof e} received.`, e);
@@ -9987,65 +10059,65 @@ var va = /* @__PURE__ */ K({
 	unmounted() {
 		this.dataPropUnwatch();
 	}
-}, [["render", _a]]), ya = /* @__PURE__ */ I({
-	WAccordion: () => ot,
-	WAccordionItem: () => it,
-	WAlert: () => lt,
-	WAutocomplete: () => yt,
-	WBadge: () => St,
-	WBreadcrumbs: () => Tt,
-	WButton: () => jt,
-	WCard: () => Pt,
-	WCheckbox: () => Vt,
-	WCheckboxes: () => Wt,
-	WConfirm: () => Kt,
-	WDatePicker: () => Jt,
-	WDialog: () => Xt,
-	WDivider: () => $t,
-	WDrawer: () => rn,
-	WFlex: () => on,
-	WForm: () => ln,
-	WFormElement: () => dn,
-	WGrid: () => pn,
-	WIcon: () => hn,
-	WImage: () => yn,
-	WInput: () => kn,
-	WList: () => jn,
-	WMenu: () => In,
-	WNotification: () => Rn,
-	WOverlay: () => Bn,
-	WParallax: () => Un,
-	WProgress: () => Zn,
-	WRadio: () => ir,
-	WRadios: () => sr,
-	WRating: () => dr,
-	WScrollable: () => _r,
-	WSelect: () => Cr,
-	WSlider: () => Ir,
-	WSpinner: () => zr,
-	WSteps: () => Vr,
-	WSwitch: () => Yr,
-	WTable: () => Ii,
-	WTabs: () => oi,
-	WTag: () => zi,
-	WTextarea: () => Wi,
-	WTimeline: () => Ji,
-	WToolbar: () => Xi,
-	WTooltip: () => Qi,
-	WTransitionBounce: () => ea,
-	WTransitionExpand: () => na,
-	WTransitionFade: () => ia,
-	WTransitionScale: () => oa,
-	WTransitionScaleFade: () => ca,
-	WTransitionSlide: () => ua,
-	WTransitionSlideFade: () => fa,
-	WTransitionTwist: () => ma,
-	WTree: () => va
-}), ba = Ke.install;
-Ke.install = (e, t = {}) => ba.call(Ke, e, {
-	components: ya,
+}, [["render", Ta]]), Da = /* @__PURE__ */ I({
+	WAccordion: () => mt,
+	WAccordionItem: () => ft,
+	WAlert: () => _t,
+	WAutocomplete: () => Dt,
+	WBadge: () => At,
+	WBreadcrumbs: () => Nt,
+	WButton: () => zt,
+	WCard: () => Ht,
+	WCheckbox: () => Yt,
+	WCheckboxes: () => Qt,
+	WConfirm: () => en,
+	WDatePicker: () => nn,
+	WDialog: () => an,
+	WDivider: () => cn,
+	WDrawer: () => fn,
+	WFlex: () => mn,
+	WForm: () => _n,
+	WFormElement: () => yn,
+	WGrid: () => xn,
+	WIcon: () => Cn,
+	WImage: () => Dn,
+	WInput: () => Ln,
+	WList: () => zn,
+	WMenu: () => Wn,
+	WNotification: () => Kn,
+	WOverlay: () => Jn,
+	WParallax: () => Zn,
+	WProgress: () => ar,
+	WRadio: () => fr,
+	WRadios: () => hr,
+	WRating: () => yr,
+	WScrollable: () => Tr,
+	WSelect: () => jr,
+	WSlider: () => Wr,
+	WSpinner: () => qr,
+	WSteps: () => Yr,
+	WSwitch: () => ri,
+	WTable: () => Wi,
+	WTabs: () => mi,
+	WTag: () => qi,
+	WTextarea: () => Qi,
+	WTimeline: () => na,
+	WToolbar: () => ia,
+	WTooltip: () => oa,
+	WTransitionBounce: () => ca,
+	WTransitionExpand: () => ua,
+	WTransitionFade: () => fa,
+	WTransitionScale: () => ma,
+	WTransitionScaleFade: () => ga,
+	WTransitionSlide: () => va,
+	WTransitionSlideFade: () => ba,
+	WTransitionTwist: () => Sa,
+	WTree: () => Ea
+}), Oa = et.install;
+et.install = (e, t = {}) => Oa.call(et, e, {
+	components: Da,
 	...t
 });
-var xa = Ke;
+var ka = et;
 //#endregion
-export { xa as default };
+export { ka as default };