@kernel4632/kima 0.9.7 → 0.9.8

package/dist/vue/utils/motion.js

@@ -1,84 +1,115 @@
-import { onBeforeUnmount as e } from "vue";
+import { nextTick as e, onBeforeUnmount as t, watch as n } from "vue";
 // src/utils/motion.js
-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;
+var r = /* @__PURE__ */ new WeakMap();
+function i(r, i) {
+	let a = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map(), l = 0;
+	function u() {
+		let e = r.value;
 		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 d() {
+		for (let e of c.values()) e.cancel();
+		c.clear();
 	}
-	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
+	return n(i, () => {
+		l++;
+		let e = u();
+		if (!e) return;
+		let t = e.getBoundingClientRect();
+		a = new Map([...e.children].filter((e) => !e.inert).map((e) => {
+			let n = e.getBoundingClientRect();
+			return [e, {
+				rect: n,
+				x: n.x - t.x,
+				y: n.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"
-					});
+		})), d();
+	}, {
+		flush: "pre",
+		deep: !0
+	}), n(i, async () => {
+		let t = l;
+		if (await e(), t !== l) return;
+		let n = u();
+		if (!n || o(n) || !n.animate) {
+			a.clear();
+			return;
+		}
+		let r = getComputedStyle(n), i = s(r.getPropertyValue("--kima-duration-slow")), d = s(r.getPropertyValue("--kima-duration-fast")), f = r.getPropertyValue("--kima-curve-emphasized").trim() || "ease-out", p = n.getBoundingClientRect(), m = [...n.children].filter((e) => !e.inert && a.has(e)).map((e) => {
+			let t = e.getBoundingClientRect(), n = a.get(e);
+			return {
+				node: e,
+				dx: n.x - (t.x - p.x),
+				dy: n.y - (t.y - p.y)
+			};
+		}), h = m.some(({ dy: e }) => e < -.5);
+		for (let { node: e, dx: t, dy: n } of m) {
+			if (!i || Math.abs(t) + Math.abs(n) < .5) continue;
+			let r = [
+				{
+					transform: `translate(${t}px, ${n}px)`,
+					offset: 0,
+					easing: f
+				},
+				{
+					transform: h ? `translate(${t}px, 0)` : `translate(0, ${n}px)`,
+					offset: .5,
+					easing: f
+				},
+				{
+					transform: "translate(0, 0)",
+					offset: 1
 				}
-				r.clear();
-			}
-		});
-	}
-	return e(() => {
-		o = !0, cancelAnimationFrame(a);
+			], a = e.animate(r, {
+				duration: i,
+				delay: d,
+				fill: "backwards"
+			});
+			c.set(e, a), a.finished.then(() => {
+				c.get(e) === a && c.delete(e);
+			}).catch(() => {});
+		}
+		a.clear();
+	}, {
+		flush: "post",
+		deep: !0
+	}), t(() => {
+		l++, d();
 	}), {
-		capture: l,
-		play: u
+		beforeLeave(e) {
+			p(e, a.get(e)?.rect);
+		},
+		beforeEnter: f,
+		leaveCancelled: f
 	};
 }
-var r = /* @__PURE__ */ new WeakMap();
-function i(e) {
+var a = /* @__PURE__ */ new WeakMap();
+function o(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 a(e) {
+function s(e) {
 	let t = parseFloat(e) || 0;
 	return e.trim().endsWith("ms") ? t : t * 1e3;
 }
-function o(e) {
+function c(e) {
 	e.inert = !0, e.setAttribute("aria-hidden", "true");
 }
-function s(e) {
+function l(e) {
 	e.inert = !1, e.removeAttribute("aria-hidden");
 }
-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);
+var u = {
+	onBeforeEnter: l,
+	onBeforeLeave: c
+}, d = /* @__PURE__ */ new WeakMap();
+function f(e) {
+	let t = d.get(e);
+	t && (Object.assign(e.style, t), d.delete(e)), 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"), l.has(e) || l.set(e, Object.fromEntries([
+function p(e, t) {
+	let n = e.parentElement;
+	if (!n) return;
+	let r = t ?? e.getBoundingClientRect(), i = n.getBoundingClientRect();
+	e.ownerDocument.defaultView.getComputedStyle(n).position === "static" && (n.style.position = "relative"), d.has(e) || d.set(e, Object.fromEntries([
 		"position",
 		"top",
 		"left",
@@ -90,36 +121,36 @@ function d(e) {
 		"margin"
 	].map((t) => [t, e.style[t]]))), Object.assign(e.style, {
 		position: "absolute",
-		top: `${n.top - r.top - t.clientTop + t.scrollTop}px`,
-		left: `${n.left - r.left - t.clientLeft + t.scrollLeft}px`,
+		top: `${r.top - i.top - n.clientTop + n.scrollTop}px`,
+		left: `${r.left - i.left - n.clientLeft + n.scrollLeft}px`,
 		right: "auto",
 		bottom: "auto",
-		width: `${n.width}px`,
-		height: `${n.height}px`,
+		width: `${r.width}px`,
+		height: `${r.height}px`,
 		boxSizing: "border-box",
 		margin: "0"
-	}), o(e);
+	}), c(e);
 }
-var f = /* @__PURE__ */ new WeakMap();
-function p(e) {
+var m = /* @__PURE__ */ new WeakMap();
+function h(e) {
 	let t = e?.getBoundingClientRect().height || 0;
-	t > 0 && f.set(e, t);
+	t > 0 && m.set(e, t);
 }
-function m(e) {
-	let n = t.get(e);
-	n && (r.set(e, {
+function g(e) {
+	let t = r.get(e);
+	t && (a.set(e, {
 		height: e.getBoundingClientRect().height,
 		opacity: getComputedStyle(e).opacity
-	}), n.observer?.disconnect(), t.delete(e), n.animation?.cancel(), e.style.overflow = n.overflow);
+	}), t.observer?.disconnect(), r.delete(e), t.animation?.cancel(), e.style.overflow = t.overflow);
 }
-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();
+function _(e, t, n) {
+	let i = e.ownerDocument.defaultView, c = e.style.display === "none" || i.getComputedStyle(e).display === "none";
+	n && c && (e.style.display = "");
+	let l = i.getComputedStyle(e), u = a.get(e);
+	a.delete(e);
+	let d = e.getBoundingClientRect().height || m.get(e) || 0, f = o(e) ? 0 : s(l.getPropertyValue("--kima-duration-slow") || "300ms"), p = l.getPropertyValue("--kima-curve-emphasized").trim() || "ease-out";
+	if (!f || !e.animate) {
+		t();
 		return;
 	}
 	let h = {
@@ -127,38 +158,38 @@ function h(e, n, o) {
 		animation: null,
 		observer: null
 	};
-	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
+	r.set(e, h), e.style.overflow = "clip";
+	let g = n ? d : 0;
+	function _(i, a) {
+		let o = e.animate([{
+			height: `${i}px`,
+			opacity: a
 		}, {
 			height: `${g}px`,
-			opacity: +!!o
+			opacity: +!!n
 		}], {
-			duration: p,
-			easing: m,
+			duration: f,
+			easing: p,
 			fill: "both"
 		});
-		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());
+		h.animation = o, o.finished.then(() => {
+			r.get(e) === h && h.animation === o && (h.observer?.disconnect(), r.delete(e), e.style.overflow = h.overflow, t(), o.cancel());
 		}).catch(() => {});
 	}
-	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 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);
+	if (_(u?.height ?? (n ? 0 : d), u?.opacity ?? (n ? 0 : l.opacity)), n && i.ResizeObserver && e.firstElementChild) {
+		let t = e.firstElementChild.getBoundingClientRect().height;
+		h.observer = new i.ResizeObserver(() => {
+			let n = e.firstElementChild?.getBoundingClientRect().height ?? t;
+			if (Math.abs(n - t) < .5 || r.get(e) !== h) return;
+			let a = e.getBoundingClientRect().height, o = i.getComputedStyle(e).opacity;
+			g += n - t, t = n, h.animation.cancel(), _(a, o);
 		}), h.observer.observe(e.firstElementChild);
 	}
 }
-var g = {
-	onEnter: (e, t) => h(e, t, !0),
-	onLeave: (e, t) => h(e, t, !1),
-	onEnterCancelled: m,
-	onLeaveCancelled: m
+var v = {
+	onEnter: (e, t) => _(e, t, !0),
+	onLeave: (e, t) => _(e, t, !1),
+	onEnterCancelled: g,
+	onLeaveCancelled: g
 };
-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 };
+export { l as activateMotionElement, v as collapseTransition, p as freezeLeaveLayout, o as prefersReducedMotion, u as presenceTransition, h as rememberCollapseHeight, f as restoreLeaveLayout, c as retireMotionElement, i as useLayoutFlip };

package/package.json

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

package/dist/components/display/list.ce.vue_vue_type_style_index_0_scoped_df3ec98f_lang.css

@@ -1 +0,0 @@
-@keyframes kima-ripple-glow-df3ec98f{0%{opacity:.14}55%{opacity:.1}to{opacity:0}}.kima-list[data-v-df3ec98f]{box-sizing:border-box;min-width:0;font-family:var(--kima-font-family);font-size:var(--kima-font-size-body-medium);font-weight:var(--kima-font-weight-semi-bold);line-height:var(--kima-line-height-normal);color:var(--kima-color-on-surface);overflow-wrap:anywhere;gap:var(--kima-list-gap,var(--kima-space-3));width:100%;min-width:0;margin:0;padding:0;list-style-position:inside;display:grid}.kima-list[data-v-df3ec98f]:is(ul){list-style:none}.kima-list__item[data-v-df3ec98f]{background:var(--kima-color-layer-1);min-height:var(--kima-list-item-height);padding:var(--kima-space-5);border-radius:var(--kima-radius-m);border:0}.kima-list--plain .kima-list__item[data-v-df3ec98f]{background:0 0;border-radius:0;min-height:0;padding:0}.kima-list:is(ul) .kima-list__item[data-v-df3ec98f]{align-items:center;gap:var(--kima-space-4);display:flex}.kima-list__body[data-v-df3ec98f]{flex:1;min-width:0}.kima-list p[data-v-df3ec98f]{margin:var(--kima-space-2) 0 0;color:var(--kima-color-on-surface-variant)}.kima-list__action[data-v-df3ec98f]{gap:var(--kima-space-2);flex-wrap:wrap;display:flex}.kima-list__empty[data-v-df3ec98f]{padding:var(--kima-space-6);color:var(--kima-color-on-surface-variant);list-style:none}

package/dist/components/interaction/multi-select.ce.vue_vue_type_style_index_0_scoped_cf70a212_lang.css

@@ -1 +0,0 @@
-@keyframes kima-ripple-glow-cf70a212{0%{opacity:.14}55%{opacity:.1}to{opacity:0}}.kima-multi-select[data-v-cf70a212]{min-width:0;color:var(--kima-color-on-surface);font-family:var(--kima-font-family);font-size:var(--kima-font-size-body-medium);gap:var(--kima-space-3);max-width:100%;line-height:1.5;display:grid;position:relative}.kima-multi-select__control[data-v-cf70a212],.kima-multi-select__chips[data-v-cf70a212]{align-items:center;gap:var(--kima-space-2);flex-wrap:wrap;grid-column:1/-1;display:flex}.kima-multi-select__chip[data-v-cf70a212],.kima-multi-select__clear[data-v-cf70a212]{display:inline-flex}.kima-multi-select__chips[data-v-cf70a212]:empty{display:none}.kima-multi-select__search[data-v-cf70a212]{box-sizing:border-box;width:100%;min-height:48px;margin-bottom:var(--kima-space-2);padding:var(--kima-space-3);border-radius:var(--kima-radius-m);background:var(--kima-color-layer-2);color:var(--kima-color-on-surface);font:inherit;border:0}.kima-multi-select__search[data-v-cf70a212]:focus{outline:var(--kima-focus-ring-width) solid var(--kima-color-primary);outline-offset:-2px}.kima-multi-select__list[data-v-cf70a212]{outline:none}.kima-multi-select__item[data-v-cf70a212]:focus-visible{outline:var(--kima-focus-ring-width) solid var(--kima-color-primary);outline-offset:var(--kima-focus-ring-offset)}.kima-multi-select__item[data-v-cf70a212]:disabled,.kima-multi-select__item[aria-disabled=true][data-v-cf70a212]{cursor:not-allowed;opacity:var(--kima-opacity-disabled)}.kima-multi-select__item[data-v-cf70a212]{box-sizing:border-box;justify-content:space-between;align-items:center;gap:var(--kima-space-3);width:100%;min-height:48px;padding:var(--kima-space-2) var(--kima-space-3);border-radius:var(--kima-radius-s);background:var(--kima-color-transparent);color:var(--kima-color-on-surface);font:inherit;text-align:start;cursor:pointer;transition:background-color var(--kima-duration-effects) var(--kima-curve-standard), color var(--kima-duration-effects) var(--kima-curve-standard);border:0;display:flex}.kima-multi-select__item[data-v-cf70a212]:hover:not([aria-disabled=true]):not([data-disabled]),.kima-multi-select__item[data-highlighted][data-v-cf70a212],.kima-multi-select__item[data-active=true][data-v-cf70a212]{background:var(--kima-color-layer-3)}.kima-multi-select__item[aria-selected=true][data-v-cf70a212]{color:var(--kima-color-on-primary-container);background:var(--kima-color-primary-container)}.kima-multi-select__item[aria-selected=true][data-v-cf70a212]:hover,.kima-multi-select__item[aria-selected=true][data-active=true][data-v-cf70a212]{background:var(--kima-color-primary-container-hover)}.kima-multi-select__item[data-disabled][data-v-cf70a212]{opacity:var(--kima-opacity-disabled);cursor:not-allowed}.kima-multi-select__native[data-v-cf70a212]{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:0;padding:0;position:absolute;overflow:hidden}.kima-multi-select small[data-v-cf70a212]{color:var(--kima-color-on-surface-variant);display:block}.kima-multi-select__popup{min-width:0;color:var(--kima-color-on-surface);font-family:var(--kima-font-family);font-size:var(--kima-font-size-body-medium);background:var(--kima-color-popup);box-shadow:var(--kima-elevation-3);box-sizing:border-box;z-index:60;width:min(360px,100vw - 24px);max-height:min(70vh, var(--reka-popper-available-height,70vh));padding:var(--kima-space-4);border-radius:var(--kima-radius-l);padding:var(--kima-space-2);border:0;outline:none;line-height:1.5;overflow:auto}

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

@@ -1 +0,0 @@
-.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}