@kernel4632/kima 0.9.3 → 0.9.4

package/dist/style.css

@@ -264,7 +264,7 @@ kima-affix{display:contents}.kima-affix[data-v-f21e108b]{z-index:10;color:var(--
 /*$vite$:1*/
 .kima-qr-code[data-v-3ef776fe]{max-width:100%;color:var(--kima-color-on-surface);font-family:var(--kima-font-family);display:inline-block}.kima-qr-code svg[data-v-3ef776fe]{max-width:100%;height:auto;fill:var(--kima-color-on-surface);display:block}.kima-qr-code__paper[data-v-3ef776fe]{fill:var(--kima-color-surface)}
 /*$vite$:1*/
-.kima-tag-group[data-v-892954ad]{color:var(--kima-color-on-surface);font-family:var(--kima-font-family)}.kima-tag-group__items[data-v-892954ad]{gap:var(--kima-space-2);flex-wrap:wrap;display:flex;position:relative}
+.kima-tag-group[data-v-b575c982]{color:var(--kima-color-on-surface);font-family:var(--kima-font-family)}.kima-tag-group__items[data-v-b575c982]{gap:var(--kima-space-2);flex-wrap:wrap;display:flex;position:relative}
 /*$vite$:1*/
 @keyframes kima-ripple-glow-b5823fc3{0%{opacity:.14}55%{opacity:.1}to{opacity:0}}.kima-tour[data-v-b5823fc3]{font-family:var(--kima-font-family);color:var(--kima-color-on-surface)}.kima-tour__dialog[data-v-b5823fc3]{width:100%;max-width:none;height:100%;max-height:none;color:inherit;background:var(--kima-color-transparent);transition:opacity var(--kima-duration-medium), display var(--kima-duration-medium) allow-discrete, overlay var(--kima-duration-medium) allow-discrete;border:0;margin:0;padding:0;position:fixed;inset:0}.kima-tour__dialog[data-v-b5823fc3]::backdrop{background:var(--kima-color-transparent)}.kima-tour__dialog[data-v-b5823fc3]:not([open]){opacity:0}@starting-style{.kima-tour__dialog[open][data-v-b5823fc3]{opacity:0}}.kima-tour__mask[data-v-b5823fc3]{background:color-mix(in srgb, var(--kima-color-scrim) var(--kima-scrim-opacity), transparent);-webkit-backdrop-filter:blur(var(--kima-backdrop-blur));backdrop-filter:blur(var(--kima-backdrop-blur));pointer-events:auto;position:fixed}.kima-tour__spotlight[data-v-b5823fc3]{outline:3px solid var(--kima-color-primary);border-radius:var(--kima-radius-s);pointer-events:none;transition:top var(--kima-duration-medium) var(--kima-curve-emphasized), left var(--kima-duration-medium) var(--kima-curve-emphasized), width var(--kima-duration-medium), height var(--kima-duration-medium);position:fixed}.kima-tour__panel[data-v-b5823fc3]{background:var(--kima-color-popup);box-shadow:var(--kima-elevation-3);box-sizing:border-box;max-height:calc(100vh - 32px);padding:var(--kima-space-5);border-radius:var(--kima-radius-xl);border:0;position:fixed;overflow:auto}.kima-tour__panel h2[data-v-b5823fc3]{margin:var(--kima-space-2) 0}.kima-tour__actions[data-v-b5823fc3]{gap:var(--kima-space-2);flex-wrap:wrap;display:flex}@media (prefers-reduced-motion:reduce){.kima-tour__dialog[data-v-b5823fc3],.kima-tour__spotlight[data-v-b5823fc3]{transition:none}}
 /*$vite$:1*/

package/dist/styles/tag-group.css

@@ -3,4 +3,4 @@
 @import "../components/core/icon.ce.vue_vue_type_style_index_0_scoped_5c94f2ca_lang.css";
 @import "../components/core/icon-button.ce.vue_vue_type_style_index_0_scoped_a18b4478_lang.css";
 @import "../components/interaction/chip.ce.vue_vue_type_style_index_0_scoped_541c9ed1_lang.css";
-@import "../components/utility/tag-group.ce.vue_vue_type_style_index_0_scoped_892954ad_lang.css";
+@import "../components/utility/tag-group.ce.vue_vue_type_style_index_0_scoped_b575c982_lang.css";

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

@@ -1,16 +1,16 @@
 import e from "../../_virtual/_plugin-vue_export-helper.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";
+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";
 /* empty css                                                             */
-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";
+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";
 // src/components/utility/tag-group.ce.vue
-var C = ["aria-label"], w = [
+var w = ["aria-label"], T = [
 	"name",
 	"value",
 	"disabled"
-], T = /*#__PURE__*/ e(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+], E = /*#__PURE__*/ e(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
 	__name: "tag-group.ce",
 	props: {
 		items: {
@@ -36,77 +36,81 @@ var C = ["aria-label"], w = [
 		"change",
 		"remove"
 	],
-	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 : {
+	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 : {
 			value: e,
 			label: String(e)
 		}));
-		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));
+		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));
 		}
-		function R() {
-			return [...O.value?.querySelectorAll("button:not(:disabled)") || []].filter((e) => !e.closest("[inert]"));
+		function V() {
+			return [...k.value?.querySelectorAll("button:not(:disabled)") || []].filter((e) => !e.closest("[inert]"));
 		}
-		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();
+		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();
 		}
-		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 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 V(e) {
-			let t = R(), n = t.indexOf(e.target);
+		function W(e) {
+			let t = V(), n = t.indexOf(e.target);
 			if (!(n < 0) && ([
 				"ArrowRight",
 				"ArrowLeft",
 				"Home",
 				"End"
-			].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)) {
+			].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)) {
 				let t = e.target.closest("[data-tag-index]")?.dataset.tagIndex;
-				t != null && (e.preventDefault(), B(F.value[Number(t)]));
+				t != null && (e.preventDefault(), U(I.value[Number(t)]));
 			}
 		}
-		return x([
-			F,
-			() => E.disabled,
-			() => E.selectable,
-			() => E.removable
-		], () => z(), {
+		return S([
+			I,
+			() => D.disabled,
+			() => D.selectable,
+			() => D.removable
+		], () => H(), {
 			immediate: !0,
 			flush: "post"
-		}), g(() => z()), i(O, M, N), i(O, A, j), (r, i) => (_(), f("div", m({
+		}), _(() => H()), a(k, N, P), a(k, j, M), (r, i) => (v(), p("div", h({
 			ref_key: "root",
-			ref: O
-		}, b(k), {
+			ref: k
+		}, x(A), {
 			class: "kima-tag-group",
 			role: "group",
 			"aria-label": e.label,
-			onKeydown: V
-		}), [p(l, m({
+			onKeydown: W
+		}), [m(u, h({
+			ref_key: "flipRoot",
+			ref: L,
 			name: "kima-list",
 			tag: "div",
 			class: "kima-tag-group__items"
 		}, {
-			...b(n),
-			onBeforeLeave: b(t)
+			...x(n),
+			onBeforeLeave: x(t)
 		}), {
-			default: S(() => [(_(!0), f(c, null, y(F.value, (t, n) => (_(), d(s, {
+			default: C(() => [(v(!0), p(l, null, b(I.value, (t, n) => (v(), f(c, {
 				key: t.value,
+				"data-kima-flip-key": t.value,
 				"data-tag-index": n,
 				label: t.label,
 				value: t.value,
 				selectable: e.selectable,
 				removable: e.removable,
 				disabled: e.disabled || t.disabled,
-				"model-value": I(t),
-				onChange: (e) => L(t),
-				onRemove: (e) => B(t)
+				"model-value": z(t),
+				onChange: (e) => B(t),
+				onRemove: (e) => U(t)
 			}, null, 8, [
+				"data-kima-flip-key",
 				"data-tag-index",
 				"label",
 				"value",
@@ -118,13 +122,13 @@ var C = ["aria-label"], w = [
 				"onRemove"
 			]))), 128))]),
 			_: 1
-		}, 16), (_(!0), f(c, null, y(b(M), (t) => (_(), f("input", {
+		}, 16), (v(!0), p(l, null, b(x(N), (t) => (v(), p("input", {
 			key: t,
 			type: "hidden",
 			name: e.name,
 			value: t,
 			disabled: e.disabled
-		}, null, 8, w))), 128))], 16, C));
+		}, null, 8, T))), 128))], 16, w));
 	}
-}), [["__scopeId", "data-v-892954ad"]]);
-export { T as default };
+}), [["__scopeId", "data-v-b575c982"]]);
+export { E as default };

package/dist/vue/utils/motion.js

@@ -1,31 +1,84 @@
+import { onBeforeUnmount as e } from "vue";
 // src/utils/motion.js
-var e = /* @__PURE__ */ new WeakMap(), t = /* @__PURE__ */ new WeakMap();
-function n(e) {
+var t = /* @__PURE__ */ new WeakMap();
+function n(t, n = "[data-kima-flip-key]") {
+	let r = /* @__PURE__ */ new Map(), a = 0, o = !1;
+	function s() {
+		let e = t?.value ?? t;
+		return e?.nodeType === 1 ? e : e?.$el?.nodeType === 1 ? e.$el : null;
+	}
+	function c(e) {
+		return e.getAttribute(n.slice(1, -1)) || e.dataset.kimaFlipKey || e;
+	}
+	function l() {
+		let e = s();
+		e && (r = new Map([...e.children].map((e) => {
+			let t = e.getBoundingClientRect();
+			return [c(e), {
+				node: e,
+				x: t.x,
+				y: t.y
+			}];
+		})));
+	}
+	function u() {
+		cancelAnimationFrame(a), a = requestAnimationFrame(() => {
+			if (o) return;
+			let e = s();
+			if (!e || i(e) || !e.animate) {
+				r.clear();
+				return;
+			}
+			let t = getComputedStyle(e), n = t.getPropertyValue("--kima-duration-slow").trim(), a = n ? parseFloat(n) * (n.endsWith("ms") ? 1 : 1e3) : 300;
+			if (!Number.isFinite(a) || a <= 0) r.clear();
+			else {
+				for (let n of e.children) {
+					let e = r.get(c(n));
+					if (!e) continue;
+					let i = n.getBoundingClientRect(), o = e.x - i.x, s = e.y - i.y;
+					Math.abs(o) < .5 && Math.abs(s) < .5 || n.animate([{ transform: `translate(${o}px, ${s}px)` }, { transform: "translate(0, 0)" }], {
+						duration: a,
+						easing: t.getPropertyValue("--kima-curve-emphasized").trim() || "ease-out"
+					});
+				}
+				r.clear();
+			}
+		});
+	}
+	return e(() => {
+		o = !0, cancelAnimationFrame(a);
+	}), {
+		capture: l,
+		play: u
+	};
+}
+var r = /* @__PURE__ */ new WeakMap();
+function i(e) {
 	return (e?.closest?.("[data-kima-reduced-motion]"))?.getAttribute("data-kima-reduced-motion") === "reduce" ? !0 : e?.ownerDocument?.defaultView?.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? !1;
 }
-function r(e) {
+function a(e) {
 	let t = parseFloat(e) || 0;
 	return e.trim().endsWith("ms") ? t : t * 1e3;
 }
-function i(e) {
+function o(e) {
 	e.inert = !0, e.setAttribute("aria-hidden", "true");
 }
-function a(e) {
+function s(e) {
 	e.inert = !1, e.removeAttribute("aria-hidden");
 }
-var o = {
-	onBeforeEnter: a,
-	onBeforeLeave: i
-}, s = /* @__PURE__ */ new WeakMap();
-function c(e) {
-	let t = s.get(e);
-	t && (Object.assign(e.style, t), s.delete(e)), a(e);
+var c = {
+	onBeforeEnter: s,
+	onBeforeLeave: o
+}, l = /* @__PURE__ */ new WeakMap();
+function u(e) {
+	let t = l.get(e);
+	t && (Object.assign(e.style, t), l.delete(e)), s(e);
 }
-function l(e) {
+function d(e) {
 	let t = e.parentElement;
 	if (!t) return;
 	let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
-	e.ownerDocument.defaultView.getComputedStyle(t).position === "static" && (t.style.position = "relative"), s.has(e) || s.set(e, Object.fromEntries([
+	e.ownerDocument.defaultView.getComputedStyle(t).position === "static" && (t.style.position = "relative"), l.has(e) || l.set(e, Object.fromEntries([
 		"position",
 		"top",
 		"left",
@@ -45,41 +98,41 @@ function l(e) {
 		height: `${n.height}px`,
 		boxSizing: "border-box",
 		margin: "0"
-	}), i(e);
+	}), o(e);
 }
-var u = /* @__PURE__ */ new WeakMap();
-function d(e) {
+var f = /* @__PURE__ */ new WeakMap();
+function p(e) {
 	let t = e?.getBoundingClientRect().height || 0;
-	t > 0 && u.set(e, t);
+	t > 0 && f.set(e, t);
 }
-function f(n) {
-	let r = e.get(n);
-	r && (t.set(n, {
-		height: n.getBoundingClientRect().height,
-		opacity: getComputedStyle(n).opacity
-	}), r.observer?.disconnect(), e.delete(n), r.animation?.cancel(), n.style.overflow = r.overflow);
+function m(e) {
+	let n = t.get(e);
+	n && (r.set(e, {
+		height: e.getBoundingClientRect().height,
+		opacity: getComputedStyle(e).opacity
+	}), n.observer?.disconnect(), t.delete(e), n.animation?.cancel(), e.style.overflow = n.overflow);
 }
-function p(i, a, o) {
-	let s = i.ownerDocument.defaultView, c = i.style.display === "none" || s.getComputedStyle(i).display === "none";
-	o && c && (i.style.display = "");
-	let l = s.getComputedStyle(i), d = t.get(i);
-	t.delete(i);
-	let f = i.getBoundingClientRect().height || u.get(i) || 0, p = n(i) ? 0 : r(l.getPropertyValue("--kima-duration-slow") || "300ms"), m = l.getPropertyValue("--kima-curve-emphasized").trim() || "ease-out";
-	if (!p || !i.animate) {
-		a();
+function h(e, n, o) {
+	let s = e.ownerDocument.defaultView, c = e.style.display === "none" || s.getComputedStyle(e).display === "none";
+	o && c && (e.style.display = "");
+	let l = s.getComputedStyle(e), u = r.get(e);
+	r.delete(e);
+	let d = e.getBoundingClientRect().height || f.get(e) || 0, p = i(e) ? 0 : a(l.getPropertyValue("--kima-duration-slow") || "300ms"), m = l.getPropertyValue("--kima-curve-emphasized").trim() || "ease-out";
+	if (!p || !e.animate) {
+		n();
 		return;
 	}
 	let h = {
-		overflow: i.style.overflow,
+		overflow: e.style.overflow,
 		animation: null,
 		observer: null
 	};
-	e.set(i, h), i.style.overflow = "clip";
-	let g = o ? f : 0;
-	function _(t, n) {
-		let r = i.animate([{
-			height: `${t}px`,
-			opacity: n
+	t.set(e, h), e.style.overflow = "clip";
+	let g = o ? d : 0;
+	function _(r, i) {
+		let a = e.animate([{
+			height: `${r}px`,
+			opacity: i
 		}, {
 			height: `${g}px`,
 			opacity: +!!o
@@ -88,24 +141,24 @@ function p(i, a, o) {
 			easing: m,
 			fill: "both"
 		});
-		h.animation = r, r.finished.then(() => {
-			e.get(i) === h && h.animation === r && (h.observer?.disconnect(), e.delete(i), i.style.overflow = h.overflow, a(), r.cancel());
+		h.animation = a, a.finished.then(() => {
+			t.get(e) === h && h.animation === a && (h.observer?.disconnect(), t.delete(e), e.style.overflow = h.overflow, n(), a.cancel());
 		}).catch(() => {});
 	}
-	if (_(d?.height ?? (o ? 0 : f), d?.opacity ?? (o ? 0 : l.opacity)), o && s.ResizeObserver && i.firstElementChild) {
-		let t = i.firstElementChild.getBoundingClientRect().height;
+	if (_(u?.height ?? (o ? 0 : d), u?.opacity ?? (o ? 0 : l.opacity)), o && s.ResizeObserver && e.firstElementChild) {
+		let n = e.firstElementChild.getBoundingClientRect().height;
 		h.observer = new s.ResizeObserver(() => {
-			let n = i.firstElementChild?.getBoundingClientRect().height ?? t;
-			if (Math.abs(n - t) < .5 || e.get(i) !== h) return;
-			let r = i.getBoundingClientRect().height, a = s.getComputedStyle(i).opacity;
-			g += n - t, t = n, h.animation.cancel(), _(r, a);
-		}), h.observer.observe(i.firstElementChild);
+			let r = e.firstElementChild?.getBoundingClientRect().height ?? n;
+			if (Math.abs(r - n) < .5 || t.get(e) !== h) return;
+			let i = e.getBoundingClientRect().height, a = s.getComputedStyle(e).opacity;
+			g += r - n, n = r, h.animation.cancel(), _(i, a);
+		}), h.observer.observe(e.firstElementChild);
 	}
 }
-var m = {
-	onEnter: (e, t) => p(e, t, !0),
-	onLeave: (e, t) => p(e, t, !1),
-	onEnterCancelled: f,
-	onLeaveCancelled: f
+var g = {
+	onEnter: (e, t) => h(e, t, !0),
+	onLeave: (e, t) => h(e, t, !1),
+	onEnterCancelled: m,
+	onLeaveCancelled: m
 };
-export { a as activateMotionElement, m as collapseTransition, l as freezeLeaveLayout, n as prefersReducedMotion, o as presenceTransition, d as rememberCollapseHeight, c as restoreLeaveLayout, i as retireMotionElement };
+export { s as activateMotionElement, g as collapseTransition, d as freezeLeaveLayout, i as prefersReducedMotion, c as presenceTransition, p as rememberCollapseHeight, u as restoreLeaveLayout, o as retireMotionElement, n as useLayoutFlip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kernel4632/kima",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "description": "KIMA (Kinetic, Interaction, Motion, Alive) - a Material 3 style Web UI design system and component library.",
   "type": "module",
   "license": "MIT",

package/dist/components/utility/tag-group.ce.vue_vue_type_style_index_0_scoped_892954ad_lang.css

@@ -1 +0,0 @@
-.kima-tag-group[data-v-892954ad]{color:var(--kima-color-on-surface);font-family:var(--kima-font-family)}.kima-tag-group__items[data-v-892954ad]{gap:var(--kima-space-2);flex-wrap:wrap;display:flex;position:relative}