@kernel4632/kima 0.8.5 → 0.8.6

package/dist/vue/components/interaction/multi-select.ce.js

@@ -1,16 +1,17 @@
 import e from "../../_virtual/_plugin-vue_export-helper.js";
 import t from "../core/button.ce.js";
 import n from "../core/icon.ce.js";
-import { presenceTransition as r } from "../../utils/motion.js";
-import { dismissInteraction as ee, useChoiceCursor as te, useInteractionModel as i, useInteractionReset as a, useInteractionRoot as o, usePlacement as s } from "../../utils/interaction.js";
-import ne from "../core/icon-button.ce.js";
-import re from "./chip.ce.js";
+import { freezeLeaveLayout as r, presenceTransition as i } from "../../utils/motion.js";
+import { dismissInteraction as ee, useChoiceCursor as te, useInteractionModel as a, useInteractionReset as ne, useInteractionRoot as re, usePlacement as ie } from "../../utils/interaction.js";
+import ae from "../core/icon-button.ce.js";
+import { useContentMotion as o } from "../../utils/content-motion.js";
+import oe from "./chip.ce.js";
 /* empty css                                                                */
-import { Fragment as c, Transition as l, TransitionGroup as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createTextVNode as g, createVNode as _, mergeProps as v, nextTick as y, openBlock as b, ref as x, renderList as S, toDisplayString as C, unref as w, useId as ie, vModelText as ae, watch as oe, withCtx as T, withDirectives as se, withKeys as ce, withModifiers as E } from "vue";
-import { PopoverContent as le, PopoverRoot as ue, PopoverTrigger as de } from "reka-ui";
-import { Cancel01Icon as fe, Tick01Icon as pe } from "@hugeicons/core-free-icons";
+import { Fragment as s, Transition as c, TransitionGroup as se, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, mergeProps as g, nextTick as _, openBlock as v, ref as y, renderList as b, toDisplayString as x, unref as S, useId as ce, vModelText as le, watch as ue, withCtx as C, withDirectives as de, withKeys as fe, withModifiers as w } from "vue";
+import { PopoverContent as pe, PopoverRoot as me, PopoverTrigger as he } from "reka-ui";
+import { Cancel01Icon as ge, Tick01Icon as _e } from "@hugeicons/core-free-icons";
 // src/components/interaction/multi-select.ce.vue
-var me = { class: "kima-multi-select__control" }, he = ["aria-activedescendant"], ge = [
+var ve = { class: "kima-multi-select__control" }, T = ["aria-activedescendant"], E = [
 	"aria-label",
 	"tabindex",
 	"aria-activedescendant"
@@ -78,61 +79,65 @@ var me = { class: "kima-multi-select__control" }, he = ["aria-activedescendant"]
 		"change"
 	],
 	setup(e, { emit: N }) {
-		let P = e, F = N, { root: I, attrs: L, forwardedAttrs: _e } = o(), [R, z] = i(P, "modelValue", F), [B, ve] = i(P, "open", F), ye = s(P), V = x(""), H = x(null), U = x(null), W = `kima-multi-select-${ie()}`, G = d(() => Array.isArray(R.value) ? R.value : []), K = d(() => P.items.filter((e) => G.value.includes(e.value))), q = d(() => P.items.filter((e) => `${e.label} ${e.description || ""}`.toLocaleLowerCase().includes(V.value.trim().toLocaleLowerCase())));
-		function J(e) {
-			P.disabled || (z(e), F("change", [...e]));
+		let P = e, F = N, { root: I, attrs: ye, forwardedAttrs: be } = re(), [L, R] = a(P, "modelValue", F), [z, xe] = a(P, "open", F), Se = ie(P), B = y(""), V = y(null), H = y(null), U = `kima-multi-select-${ce()}`, W = l(() => Array.isArray(L.value) ? L.value : []), G = l(() => P.items.filter((e) => W.value.includes(e.value))), K = l(() => P.items.filter((e) => `${e.label} ${e.description || ""}`.toLocaleLowerCase().includes(B.value.trim().toLocaleLowerCase())));
+		y(null), o(I, () => G.value);
+		function q(e) {
+			P.disabled || (R(e), F("change", [...e]));
 		}
-		function Y(e) {
-			P.disabled || e.disabled || J(G.value.includes(e.value) ? G.value.filter((t) => !Object.is(t, e.value)) : [...G.value, e.value]);
+		function J(e) {
+			P.disabled || e.disabled || q(W.value.includes(e.value) ? W.value.filter((t) => !Object.is(t, e.value)) : [...W.value, e.value]);
 		}
-		function be(e) {
-			e.disabled || J(G.value.filter((t) => !Object.is(t, e.value)));
+		function Ce(e) {
+			e.disabled || q(W.value.filter((t) => !Object.is(t, e.value)));
 		}
-		function xe() {
-			J(P.items.filter((e) => e.disabled && G.value.includes(e.value)).map((e) => e.value));
+		function we() {
+			q(P.items.filter((e) => e.disabled && W.value.includes(e.value)).map((e) => e.value));
 		}
-		function X(e) {
-			e && P.disabled || (e && !B.value && (V.value = ""), ve(e));
+		function Y(e) {
+			e && P.disabled || (e && !z.value && (B.value = ""), xe(e));
 		}
-		let { active: Z, activeId: Q, highlight: Se, keydown: Ce } = te(q, Y, `${W}-option`);
+		let { active: X, activeId: Z, highlight: Q, keydown: Te } = te(K, J, `${U}-option`);
 		function $(e) {
 			if (!e.isComposing) {
 				if (e.key === " " && !P.searchable) {
 					e.preventDefault();
-					let t = q.value[Z.value];
-					t && Y(t);
-				} else Ce(e);
+					let t = K.value[X.value];
+					t && J(t);
+				} else Te(e);
 			}
 		}
-		function we(e) {
-			e.preventDefault(), y(() => {
-				B.value && !P.disabled && (P.searchable ? H.value : U.value)?.focus();
+		function Ee(e) {
+			e.preventDefault(), _(() => {
+				z.value && !P.disabled && (P.searchable ? V.value : H.value)?.focus();
 			});
 		}
-		function Te(e) {
-			J([...e.target.selectedOptions].map((e) => P.items[Number(e.dataset.index)].value));
+		function De(e) {
+			q([...e.target.selectedOptions].map((e) => P.items[Number(e.dataset.index)].value));
 		}
-		return a(I, R, z, () => X(!1)), oe(() => P.disabled, (e) => {
-			e && X(!1);
-		}), (te, i) => (b(), m("div", v({
+		return ne(I, L, R, () => Y(!1)), ue(() => P.disabled, (e) => {
+			e && Y(!1);
+		}), (te, a) => (v(), f("div", g({
 			ref_key: "root",
 			ref: I
-		}, w(_e), { class: "kima-multi-select" }), [
-			_(u, v({
+		}, S(be), { class: "kima-multi-select" }), [
+			h(se, g({
 				tag: "div",
 				name: "kima-list"
-			}, w(r), { class: "kima-multi-select__chips" }), {
-				default: T(() => [(b(!0), m(c, null, S(K.value, (t) => (b(), m("span", {
+			}, {
+				...S(i),
+				onBeforeLeave: S(r)
+			}, { class: "kima-multi-select__chips" }), {
+				default: C(() => [(v(!0), f(s, null, b(G.value, (t) => (v(), f("span", {
 					key: t.value,
 					class: "kima-multi-select__chip"
-				}, [_(re, {
+				}, [h(oe, {
 					removable: "",
 					label: t.label,
 					disabled: e.disabled || t.disabled,
 					value: t.value,
-					onRemove: (e) => be(t)
+					onRemove: (e) => Ce(t)
 				}, {
-					default: T(() => [g(C(t.label), 1)]),
+					default: C(() => [m(x(t.label), 1)]),
 					_: 2
 				}, 1032, [
 					"label",
@@ -142,20 +147,20 @@ var me = { class: "kima-multi-select__control" }, he = ["aria-activedescendant"]
 				])]))), 128))]),
 				_: 1
 			}, 16),
-			h("div", me, [_(w(ue), {
-				open: w(B) && !e.disabled,
+			p("div", ve, [h(S(me), {
+				open: S(z) && !e.disabled,
 				modal: !1,
-				"onUpdate:open": X
+				"onUpdate:open": Y
 			}, {
-				default: T(() => [_(w(de), { "as-child": "" }, {
-					default: T(() => [_(t, {
+				default: C(() => [h(S(he), { "as-child": "" }, {
+					default: C(() => [h(t, {
 						variant: "tonal",
 						disabled: e.disabled,
-						"aria-label": w(L)["aria-label"] || e.label,
+						"aria-label": S(ye)["aria-label"] || e.label,
 						"aria-required": e.required || void 0,
-						onKeydown: i[0] ||= ce(E((e) => X(!0), ["prevent"]), ["down"])
+						onKeydown: a[0] ||= fe(w((e) => Y(!0), ["prevent"]), ["down"])
 					}, {
-						default: T(() => [g(C(K.value.length ? `已选择 ${K.value.length} 项` : e.placeholder), 1)]),
+						default: C(() => [m(x(G.value.length ? `已选择 ${G.value.length} 项` : e.placeholder), 1)]),
 						_: 1
 					}, 8, [
 						"disabled",
@@ -163,84 +168,84 @@ var me = { class: "kima-multi-select__control" }, he = ["aria-activedescendant"]
 						"aria-required"
 					])]),
 					_: 1
-				}), _(l, v({ name: "kima-popup" }, w(r)), {
-					default: T(() => [w(B) && !e.disabled ? (b(), f(w(le), v({
+				}), h(c, g({ name: "kima-popup" }, S(i)), {
+					default: C(() => [S(z) && !e.disabled ? (v(), u(S(pe), g({
 						key: 0,
 						"force-mount": ""
-					}, w(ye), {
+					}, S(Se), {
 						class: "kima-multi-select__popup",
 						"aria-label": e.label,
-						onOpenAutoFocus: we,
-						onEscapeKeyDown: i[5] ||= (e) => w(ee)(e, () => X(!1))
+						onOpenAutoFocus: Ee,
+						onEscapeKeyDown: a[5] ||= (e) => S(ee)(e, () => Y(!1))
 					}), {
-						default: T(() => [
-							e.searchable ? se((b(), m("input", {
+						default: C(() => [
+							e.searchable ? de((v(), f("input", {
 								key: 0,
 								ref_key: "search",
-								ref: H,
-								"onUpdate:modelValue": i[1] ||= (e) => V.value = e,
+								ref: V,
+								"onUpdate:modelValue": a[1] ||= (e) => B.value = e,
 								class: "kima-multi-select__search",
 								type: "search",
 								role: "combobox",
 								"aria-expanded": "true",
 								"aria-autocomplete": "list",
 								"aria-label": "搜索选项",
-								"aria-controls": W,
-								"aria-activedescendant": w(Q),
+								"aria-controls": U,
+								"aria-activedescendant": S(Z),
 								onKeydown: $,
-								onInput: i[2] ||= E(() => {}, ["stop"]),
-								onChange: i[3] ||= E(() => {}, ["stop"])
-							}, null, 40, he)), [[ae, V.value]]) : p("", !0),
-							h("div", {
-								id: W,
+								onInput: a[2] ||= w(() => {}, ["stop"]),
+								onChange: a[3] ||= w(() => {}, ["stop"])
+							}, null, 40, T)), [[le, B.value]]) : d("", !0),
+							p("div", {
+								id: U,
 								ref_key: "panel",
-								ref: U,
+								ref: H,
 								class: "kima-multi-select__list",
 								role: "listbox",
 								"aria-multiselectable": "true",
 								"aria-label": e.label,
 								tabindex: e.searchable ? -1 : 0,
-								"aria-activedescendant": e.searchable ? void 0 : w(Q),
+								"aria-activedescendant": e.searchable ? void 0 : S(Z),
 								onKeydown: $
-							}, [(b(!0), m(c, null, S(q.value, (e, t) => (b(), m("div", {
-								id: `${W}-option-${t}`,
+							}, [(v(!0), f(s, null, b(K.value, (e, t) => (v(), f("div", {
+								id: `${U}-option-${t}`,
 								key: e.value,
 								class: "kima-multi-select__item",
 								role: "option",
-								"aria-selected": G.value.includes(e.value),
+								"aria-selected": W.value.includes(e.value),
 								"aria-disabled": e.disabled || void 0,
-								"data-active": w(Z) === t,
-								onPointerdown: i[4] ||= E(() => {}, ["prevent"]),
-								onPointermove: (n) => !e.disabled && w(Se)(t),
-								onClick: (t) => Y(e)
-							}, [h("span", null, [g(C(e.label), 1), e.description ? (b(), m("small", O, C(e.description), 1)) : p("", !0)]), G.value.includes(e.value) ? (b(), f(n, {
+								"data-active": S(X) === t,
+								onPointerdown: a[4] ||= w(() => {}, ["prevent"]),
+								onPointermove: (n) => !e.disabled && S(Q)(t),
+								onClick: (t) => J(e)
+							}, [p("span", null, [m(x(e.label), 1), e.description ? (v(), f("small", O, x(e.description), 1)) : d("", !0)]), W.value.includes(e.value) ? (v(), u(n, {
 								key: 0,
-								icon: w(pe),
+								icon: S(_e),
 								size: 20,
 								"aria-hidden": "true"
-							}, null, 8, ["icon"])) : p("", !0)], 40, D))), 128))], 40, ge),
-							q.value.length ? p("", !0) : (b(), m("p", k, "没有匹配选项"))
+							}, null, 8, ["icon"])) : d("", !0)], 40, D))), 128))], 40, E),
+							K.value.length ? d("", !0) : (v(), f("p", k, "没有匹配选项"))
 						]),
 						_: 1
-					}, 16, ["aria-label"])) : p("", !0)]),
+					}, 16, ["aria-label"])) : d("", !0)]),
 					_: 1
 				}, 16)]),
 				_: 1
-			}, 8, ["open"]), _(l, v({ name: "kima-content" }, w(r)), {
-				default: T(() => [e.clearable && K.value.length ? (b(), m("span", A, [_(ne, {
+			}, 8, ["open"]), h(c, g({ name: "kima-content" }, S(i)), {
+				default: C(() => [e.clearable && G.value.length ? (v(), f("span", A, [h(ae, {
 					label: "清除选择",
 					disabled: e.disabled,
-					onClick: xe
+					onClick: we
 				}, {
-					default: T(() => [_(n, {
-						icon: w(fe),
+					default: C(() => [h(n, {
+						icon: S(ge),
 						size: 20
 					}, null, 8, ["icon"])]),
 					_: 1
-				}, 8, ["disabled"])])) : p("", !0)]),
+				}, 8, ["disabled"])])) : d("", !0)]),
 				_: 1
 			}, 16)]),
-			h("select", {
+			p("select", {
 				class: "kima-multi-select__native",
 				multiple: "",
 				name: e.name,
@@ -248,17 +253,17 @@ var me = { class: "kima-multi-select__control" }, he = ["aria-activedescendant"]
 				disabled: e.disabled,
 				tabindex: "-1",
 				"aria-hidden": "true",
-				onInput: i[6] ||= E(() => {}, ["stop"]),
-				onChange: E(Te, ["stop"]),
-				onInvalid: i[7] ||= E((e) => w(I)?.querySelector("button")?.focus(), ["prevent"])
-			}, [(b(!0), m(c, null, S(e.items, (e, t) => (b(), m("option", {
+				onInput: a[6] ||= w(() => {}, ["stop"]),
+				onChange: w(De, ["stop"]),
+				onInvalid: a[7] ||= w((e) => S(I)?.querySelector("button")?.focus(), ["prevent"])
+			}, [(v(!0), f(s, null, b(e.items, (e, t) => (v(), f("option", {
 				key: e.value,
 				value: String(e.value),
 				"data-index": t,
 				disabled: e.disabled,
-				selected: G.value.includes(e.value)
-			}, C(e.label), 9, M))), 128))], 40, j)
+				selected: W.value.includes(e.value)
+			}, x(e.label), 9, M))), 128))], 40, j)
 		], 16));
 	}
-}), [["__scopeId", "data-v-b5be8e98"]]);
+}), [["__scopeId", "data-v-cf70a212"]]);
 export { N as default };

package/dist/vue/components/navigation/carousel.ce.js

@@ -122,5 +122,5 @@ var D = ["aria-label"], O = [
 			v(t.$slots, "default", {}, void 0, !0)
 		], 16, D));
 	}
-}), [["__scopeId", "data-v-6a7ca57f"]]);
+}), [["__scopeId", "data-v-03e729d7"]]);
 export { P as default };

package/dist/vue/components/utility/progress-group.ce.js

@@ -1,11 +1,12 @@
 import e from "../../_virtual/_plugin-vue_export-helper.js";
-import { presenceTransition as t } from "../../utils/motion.js";
-import { useInteractionRoot as n } from "../../utils/interaction.js";
-import r from "../core/progress.ce.js";
+import { freezeLeaveLayout as t, presenceTransition as n } from "../../utils/motion.js";
+import { useInteractionRoot as r } from "../../utils/interaction.js";
+import { useContentMotion as i } from "../../utils/content-motion.js";
+import a from "../core/progress.ce.js";
 /* empty css                                                                  */
-import { Fragment as i, TransitionGroup as a, computed as o, createElementBlock as s, createElementVNode as c, createVNode as l, mergeProps as u, openBlock as d, renderList as f, toDisplayString as p, unref as m, watch as h, withCtx as g } from "vue";
+import { Fragment as o, TransitionGroup as s, computed as c, createElementBlock as l, createElementVNode as u, createVNode as d, mergeProps as f, openBlock as p, ref as m, renderList as h, toDisplayString as g, unref as _, watch as v, withCtx as y } from "vue";
 // src/components/utility/progress-group.ce.vue
-var _ = ["aria-label"], v = /*#__PURE__*/ e(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+var b = ["aria-label"], x = /*#__PURE__*/ e(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
 	__name: "progress-group.ce",
 	props: {
 		tasks: {
@@ -18,8 +19,8 @@ var _ = ["aria-label"], v = /*#__PURE__*/ e(/* @__PURE__ */ Object.assign({ inhe
 		}
 	},
 	emits: ["change"],
-	setup(e, { expose: v, emit: y }) {
-		let b = e, x = y, { root: S, forwardedAttrs: C } = n(), w = o(() => b.tasks.map((e, t) => {
+	setup(e, { expose: x, emit: S }) {
+		let C = e, w = S, { root: T, forwardedAttrs: E } = r(), D = c(() => C.tasks.map((e, t) => {
 			let n = Number(e.max ?? 100), r = Number(e.value) || 0, i = Number(e.weight ?? 1);
 			return {
 				...e,
@@ -27,33 +28,36 @@ var _ = ["aria-label"], v = /*#__PURE__*/ e(/* @__PURE__ */ Object.assign({ inhe
 				weight: Number.isFinite(i) ? Math.max(0, i) : 0,
 				percent: n > 0 ? Math.min(100, Math.max(0, r / n * 100)) : 0
 			};
-		})), T = o(() => {
-			let e = w.value.reduce((e, t) => e + t.weight, 0);
-			return e ? w.value.reduce((e, t) => e + t.percent * t.weight, 0) / e : 0;
+		})), O = c(() => {
+			let e = D.value.reduce((e, t) => e + t.weight, 0);
+			return e ? D.value.reduce((e, t) => e + t.percent * t.weight, 0) / e : 0;
 		});
-		return h(T, (e) => x("change", e)), v({ aggregate: T }), (n, o) => (d(), s("section", u({
+		return m(null), i(T, () => D.value), v(O, (e) => w("change", e)), x({ aggregate: O }), (r, i) => (p(), l("section", f({
 			ref_key: "root",
-			ref: S
-		}, m(C), {
+			ref: T
+		}, _(E), {
 			class: "kima-progress-group",
 			"aria-label": e.label
 		}), [
-			l(r, {
-				value: T.value,
+			d(a, {
+				value: O.value,
 				label: e.label
 			}, null, 8, ["value", "label"]),
-			c("p", null, p(e.label) + " · " + p(Math.round(T.value)) + "%", 1),
-			l(a, u({
+			u("p", null, g(e.label) + " · " + g(Math.round(O.value)) + "%", 1),
+			d(s, f({
 				tag: "ul",
 				name: "kima-list"
-			}, m(t)), {
-				default: g(() => [(d(!0), s(i, null, f(w.value, (e) => (d(), s("li", { key: e.id }, [c("span", null, p(e.label), 1), l(r, {
+			}, {
+				..._(n),
+				onBeforeLeave: _(t)
+			}), {
+				default: y(() => [(p(!0), l(o, null, h(D.value, (e) => (p(), l("li", { key: e.id }, [u("span", null, g(e.label), 1), d(a, {
 					value: e.percent,
 					label: e.label || "任务"
 				}, null, 8, ["value", "label"])]))), 128))]),
 				_: 1
 			}, 16)
-		], 16, _));
+		], 16, b));
 	}
-}), [["__scopeId", "data-v-681cf67d"]]);
-export { v as default };
+}), [["__scopeId", "data-v-d4453504"]]);
+export { x as default };

package/dist/vue/components/utility/tag-group.ce.js

@@ -1,15 +1,16 @@
 import e from "../../_virtual/_plugin-vue_export-helper.js";
-import { presenceTransition as t } from "../../utils/motion.js";
-import { useInteractionModel as n, useInteractionReset as r, useInteractionRoot as i } from "../../utils/interaction.js";
-import a from "../interaction/chip.ce.js";
+import { freezeLeaveLayout as t, presenceTransition as n } from "../../utils/motion.js";
+import { useInteractionModel as r, useInteractionReset as i, useInteractionRoot as a } from "../../utils/interaction.js";
+import { useContentMotion as o } from "../../utils/content-motion.js";
+import s from "../interaction/chip.ce.js";
 /* empty css                                                             */
-import { Fragment as o, TransitionGroup as s, computed as c, createBlock as l, createElementBlock as u, createVNode as d, mergeProps as f, nextTick as p, onMounted as m, openBlock as h, ref as g, renderList as _, unref as v, watch as y, withCtx as b } from "vue";
+import { Fragment as c, TransitionGroup as l, computed as u, createBlock as d, createElementBlock as f, createVNode as p, mergeProps as m, nextTick as h, onMounted as g, openBlock as _, ref as v, renderList as y, unref as b, watch as x, withCtx as S } from "vue";
 // src/components/utility/tag-group.ce.vue
-var x = ["aria-label"], S = [
+var C = ["aria-label"], w = [
 	"name",
 	"value",
 	"disabled"
-], C = /*#__PURE__*/ e(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+], T = /*#__PURE__*/ e(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
 	__name: "tag-group.ce",
 	props: {
 		items: {
@@ -35,61 +36,66 @@ var x = ["aria-label"], S = [
 		"change",
 		"remove"
 	],
-	setup(e, { emit: C }) {
-		let w = e, T = C, { root: E, forwardedAttrs: D } = i(), [O, k] = n(w, "items", T), [A, j] = n(w, "modelValue", T), M = g(0), N = c(() => O.value.map((e) => typeof e == "object" ? e : {
+	setup(e, { emit: T }) {
+		let E = e, D = T, { root: O, forwardedAttrs: k } = a(), [A, j] = r(E, "items", D), [M, N] = r(E, "modelValue", D), P = v(0), F = u(() => A.value.map((e) => typeof e == "object" ? e : {
 			value: e,
 			label: String(e)
-		})), P = (e) => A.value.includes(e.value);
-		function F(e) {
-			w.disabled || e.disabled || (j(P(e) ? A.value.filter((t) => t !== e.value) : [...A.value, e.value]), T("change", A.value));
+		}));
+		o(O, () => F.value);
+		let I = (e) => M.value.includes(e.value);
+		function L(e) {
+			E.disabled || e.disabled || (N(I(e) ? M.value.filter((t) => t !== e.value) : [...M.value, e.value]), D("change", M.value));
 		}
-		function I() {
-			return [...E.value?.querySelectorAll("button:not(:disabled)") || []].filter((e) => !e.closest("[inert]"));
+		function R() {
+			return [...O.value?.querySelectorAll("button:not(:disabled)") || []].filter((e) => !e.closest("[inert]"));
 		}
-		async function L(e = !1) {
-			await p();
-			let t = I();
-			M.value = Math.max(0, Math.min(M.value, t.length - 1)), t.forEach((e, t) => {
-				e.tabIndex = t === M.value ? 0 : -1;
-			}), e && t[M.value]?.focus();
+		async function z(e = !1) {
+			await h();
+			let t = R();
+			P.value = Math.max(0, Math.min(P.value, t.length - 1)), t.forEach((e, t) => {
+				e.tabIndex = t === P.value ? 0 : -1;
+			}), e && t[P.value]?.focus();
 		}
-		function R(e) {
-			w.disabled || e.disabled || (k(O.value.filter((t) => (typeof t == "object" ? t.value : t) !== e.value)), j(A.value.filter((t) => t !== e.value)), T("remove", e), L(!0));
+		function B(e) {
+			E.disabled || e.disabled || (j(A.value.filter((t) => (typeof t == "object" ? t.value : t) !== e.value)), N(M.value.filter((t) => t !== e.value)), D("remove", e), z(!0));
 		}
-		function z(e) {
-			let t = I(), n = t.indexOf(e.target);
+		function V(e) {
+			let t = R(), n = t.indexOf(e.target);
 			if (!(n < 0) && ([
 				"ArrowRight",
 				"ArrowLeft",
 				"Home",
 				"End"
-			].includes(e.key) && (e.preventDefault(), M.value = e.key === "Home" ? 0 : e.key === "End" ? t.length - 1 : (n + (e.key === "ArrowLeft" ? -1 : 1) + t.length) % t.length, L(!0)), ["Delete", "Backspace"].includes(e.key) && w.removable)) {
+			].includes(e.key) && (e.preventDefault(), P.value = e.key === "Home" ? 0 : e.key === "End" ? t.length - 1 : (n + (e.key === "ArrowLeft" ? -1 : 1) + t.length) % t.length, z(!0)), ["Delete", "Backspace"].includes(e.key) && E.removable)) {
 				let t = e.target.closest("[data-tag-index]")?.dataset.tagIndex;
-				t != null && (e.preventDefault(), R(N.value[Number(t)]));
+				t != null && (e.preventDefault(), B(F.value[Number(t)]));
 			}
 		}
-		return y([
-			N,
-			() => w.disabled,
-			() => w.selectable,
-			() => w.removable
-		], () => L(), {
+		return x([
+			F,
+			() => E.disabled,
+			() => E.selectable,
+			() => E.removable
+		], () => z(), {
 			immediate: !0,
 			flush: "post"
-		}), m(() => L()), r(E, A, j), r(E, O, k), (n, r) => (h(), u("div", f({
+		}), g(() => z()), i(O, M, N), i(O, A, j), (r, i) => (_(), f("div", m({
 			ref_key: "root",
-			ref: E
-		}, v(D), {
+			ref: O
+		}, b(k), {
 			class: "kima-tag-group",
 			role: "group",
 			"aria-label": e.label,
-			onKeydown: z
-		}), [d(s, f({
+			onKeydown: V
+		}), [p(l, m({
 			name: "kima-list",
 			tag: "div",
 			class: "kima-tag-group__items"
-		}, v(t)), {
-			default: b(() => [(h(!0), u(o, null, _(N.value, (t, n) => (h(), l(a, {
+		}, {
+			...b(n),
+			onBeforeLeave: b(t)
+		}), {
+			default: S(() => [(_(!0), f(c, null, y(F.value, (t, n) => (_(), d(s, {
 				key: t.value,
 				"data-tag-index": n,
 				label: t.label,
@@ -97,9 +103,9 @@ var x = ["aria-label"], S = [
 				selectable: e.selectable,
 				removable: e.removable,
 				disabled: e.disabled || t.disabled,
-				"model-value": P(t),
-				onChange: (e) => F(t),
-				onRemove: (e) => R(t)
+				"model-value": I(t),
+				onChange: (e) => L(t),
+				onRemove: (e) => B(t)
 			}, null, 8, [
 				"data-tag-index",
 				"label",
@@ -112,13 +118,13 @@ var x = ["aria-label"], S = [
 				"onRemove"
 			]))), 128))]),
 			_: 1
-		}, 16), (h(!0), u(o, null, _(v(A), (t) => (h(), u("input", {
+		}, 16), (_(!0), f(c, null, y(b(M), (t) => (_(), f("input", {
 			key: t,
 			type: "hidden",
 			name: e.name,
 			value: t,
 			disabled: e.disabled
-		}, null, 8, S))), 128))], 16, x));
+		}, null, 8, w))), 128))], 16, C));
 	}
-}), [["__scopeId", "data-v-3d44ac1c"]]);
-export { C as default };
+}), [["__scopeId", "data-v-892954ad"]]);
+export { T as default };