@kernel4632/kima 0.9.7 → 0.9.8

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

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

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

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

package/dist/vue/utils/content-motion.js

@@ -1,72 +1,104 @@
-import { prefersReducedMotion as e } from "./motion.js";
-import { nextTick as t, onBeforeUnmount as n, watch as r } from "vue";
+import { prefersReducedMotion as e, useLayoutFlip as t } from "./motion.js";
+import { nextTick as n, onBeforeUnmount as r, watch as i } from "vue";
 // src/utils/content-motion.js
-function i(e) {
+function a(e, n, r = e) {
+	s(e, n, { collection: !0 });
+	let i = t(r, n);
+	return {
+		name: "kima-collection",
+		moveClass: "kima-collection-no-move",
+		onBeforeLeave: i.beforeLeave,
+		onBeforeEnter: i.beforeEnter,
+		onLeaveCancelled: i.leaveCancelled
+	};
+}
+function o(e) {
 	let t = e?.value;
 	return t?.nodeType === 1 ? t : t?.$el?.nodeType === 1 ? t.$el : null;
 }
-function a(a, o, { opacity: s = !0 } = {}) {
-	let c, l = !1, u = 0, d = 0, f = 1, p = !1, m;
-	function h(e) {
-		m && (e.style.height = m.height, e.style.overflow = m.overflow, e.style.boxSizing = m.boxSizing, s && (e.style.opacity = m.opacity), m = void 0, p = !1);
+function s(t, a, { opacity: s = !0, collection: c = !1 } = {}) {
+	c && (s = !1);
+	let l = c ? "visible" : "clip", u, d = !1, f = 0, p = 0, m = 1, h = !1, g;
+	function _(e) {
+		g && (e.style.height = g.height, e.style.overflow = g.overflow, e.style.boxSizing = g.boxSizing, s && (e.style.opacity = g.opacity), g = void 0, h = !1);
 	}
-	r(o, () => {
-		let e = i(a);
+	i(a, () => {
+		let e = o(t);
 		if (!e) {
-			d = 0;
+			p = 0;
 			return;
 		}
-		let t = e.ownerDocument.defaultView, n = e.getBoundingClientRect();
-		d = n.height > 0 ? n.height : 0, f = s ? Number(t.getComputedStyle(e).opacity) : 1, c && (m ??= {
+		let n = e.ownerDocument.defaultView, r = e.getBoundingClientRect();
+		p = r.height > 0 ? r.height : 0, m = s ? Number(n.getComputedStyle(e).opacity) : 1, u && (g ??= {
 			height: e.style.height,
 			overflow: e.style.overflow,
 			boxSizing: e.style.boxSizing,
 			opacity: e.style.opacity
-		}, c.cancel(), c = void 0, e.style.height = `${d}px`, e.style.boxSizing = "border-box", e.style.overflow = "clip", s && (e.style.opacity = `${f}`), p = !0);
-	}, { flush: "pre" }), r(o, async () => {
-		let n = ++u;
-		if (await t(), l || n !== u) return;
-		let r = i(a), o = r?.ownerDocument.defaultView;
-		if (!r || e(r) || !r.animate) {
-			r && m && h(r);
+		}, u.cancel(), u = void 0, e.style.height = `${p}px`, e.style.boxSizing = "border-box", e.style.overflow = l, s && (e.style.opacity = `${m}`), h = !0);
+	}, {
+		flush: "pre",
+		deep: !0
+	}), i(a, async () => {
+		let r = ++f;
+		if (await n(), d || r !== f) return;
+		let i = o(t), a = i?.ownerDocument.defaultView;
+		if (!i || e(i) || !i.animate) {
+			i && g && _(i);
 			return;
 		}
-		let g = o.getComputedStyle(r), _ = g.getPropertyValue("--kima-duration-effects").trim(), v = _ ? parseFloat(_) * (_.endsWith("ms") ? 1 : 1e3) : 180;
-		if (!Number.isFinite(v) || v <= 0) {
-			h(r);
+		let v = a.getComputedStyle(i), y = v.getPropertyValue(c ? "--kima-duration-slow" : "--kima-duration-effects").trim(), b = y ? parseFloat(y) * (y.endsWith("ms") ? 1 : 1e3) : 180;
+		if (!Number.isFinite(b) || b <= 0) {
+			_(i);
 			return;
 		}
-		p && (r.style.height = m.height, r.style.boxSizing = m.boxSizing);
-		let y = r.getBoundingClientRect().height, b = d > 0 && Math.abs(y - d) > 1;
-		if (!b && !s) {
-			h(r);
+		h && (i.style.height = g.height, i.style.boxSizing = g.boxSizing);
+		let x = i.getBoundingClientRect().height, S = (c || p > 0) && Math.abs(x - p) > 1;
+		if (!S && !s) {
+			_(i);
 			return;
 		}
-		m ??= {
-			height: r.style.height,
-			overflow: r.style.overflow,
-			boxSizing: r.style.boxSizing,
-			opacity: r.style.opacity
-		}, b && (r.style.height = `${d}px`, r.style.boxSizing = "border-box", r.style.overflow = "clip");
-		let x = s ? f : 1;
-		s && (r.style.opacity = `${x}`);
-		let S = b ? [{
-			height: `${d}px`,
-			opacity: x
+		g ??= {
+			height: i.style.height,
+			overflow: i.style.overflow,
+			boxSizing: i.style.boxSizing,
+			opacity: i.style.opacity
+		}, S && (i.style.height = `${p}px`, i.style.boxSizing = "border-box", i.style.overflow = l);
+		let C = s ? m : 1;
+		s && (i.style.opacity = `${C}`);
+		let w = v.getPropertyValue("--kima-curve-emphasized").trim() || "ease-out", T = S && c ? [
+			{
+				height: `${p}px`,
+				offset: 0,
+				easing: w
+			},
+			{
+				height: `${x > p ? x : p}px`,
+				offset: .5,
+				easing: w
+			},
+			{
+				height: `${x}px`,
+				offset: 1
+			}
+		] : S ? [{
+			height: `${p}px`,
+			opacity: C
 		}, {
-			height: `${y}px`,
+			height: `${x}px`,
 			opacity: 1
-		}] : [{ opacity: x }, { opacity: 1 }], C = r.animate(S, {
-			duration: v,
-			easing: g.getPropertyValue("--kima-curve-emphasized").trim() || "ease-out"
+		}] : [{ opacity: C }, { opacity: 1 }], E = c ? v.getPropertyValue("--kima-duration-fast").trim() : "", D = E ? parseFloat(E) * (E.endsWith("ms") ? 1 : 1e3) : 0, O = i.animate(T, {
+			duration: b,
+			delay: Number.isFinite(D) ? Math.max(0, D) : 0,
+			easing: c ? "linear" : w,
+			fill: "both"
 		});
-		c = C, C.finished.then(() => {
-			c === C && (c = void 0, h(r));
+		u = O, O.finished.then(() => {
+			u === O && (u = void 0, _(i), O.cancel());
 		}).catch(() => {});
-	}, { deep: !0 }), n(() => {
-		l = !0, u++;
-		let e = i(a);
-		c?.cancel(), c = void 0, e && h(e);
+	}, { deep: !0 }), r(() => {
+		d = !0, f++;
+		let e = o(t);
+		u?.cancel(), u = void 0, e && _(e);
 	});
 }
-export { a as useContentMotion };
+export { a as useCollectionMotion, s as useContentMotion };