@kernel4632/kima 0.9.2 → 0.9.4

package/dist/vue/utils/motion.js

@@ -1,69 +1,138 @@
+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
-};
-function s(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 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"), Object.assign(e.style, {
+	e.ownerDocument.defaultView.getComputedStyle(t).position === "static" && (t.style.position = "relative"), l.has(e) || l.set(e, Object.fromEntries([
+		"position",
+		"top",
+		"left",
+		"right",
+		"bottom",
+		"width",
+		"height",
+		"boxSizing",
+		"margin"
+	].map((t) => [t, e.style[t]]))), Object.assign(e.style, {
 		position: "absolute",
-		insetBlockStart: `${n.top - r.top + t.scrollTop}px`,
-		insetInlineStart: `${n.left - r.left + t.scrollLeft}px`,
+		top: `${n.top - r.top - t.clientTop + t.scrollTop}px`,
+		left: `${n.left - r.left - t.clientLeft + t.scrollLeft}px`,
+		right: "auto",
+		bottom: "auto",
 		width: `${n.width}px`,
 		height: `${n.height}px`,
 		boxSizing: "border-box",
 		margin: "0"
-	}), i(e);
+	}), o(e);
 }
-var c = /* @__PURE__ */ new WeakMap();
-function l(e) {
+var f = /* @__PURE__ */ new WeakMap();
+function p(e) {
 	let t = e?.getBoundingClientRect().height || 0;
-	t > 0 && c.set(e, t);
+	t > 0 && f.set(e, t);
 }
-function u(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 d(i, a, o) {
-	let s = i.ownerDocument.defaultView, l = i.style.display === "none" || s.getComputedStyle(i).display === "none";
-	o && l && (i.style.display = "");
-	let u = s.getComputedStyle(i), d = t.get(i);
-	t.delete(i);
-	let f = i.getBoundingClientRect().height || c.get(i) || 0, p = n(i) ? 0 : r(u.getPropertyValue("--kima-duration-slow") || "300ms"), m = u.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
@@ -72,24 +141,24 @@ function d(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 : u.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 f = {
-	onEnter: (e, t) => d(e, t, !0),
-	onLeave: (e, t) => d(e, t, !1),
-	onEnterCancelled: u,
-	onLeaveCancelled: u
+var g = {
+	onEnter: (e, t) => h(e, t, !0),
+	onLeave: (e, t) => h(e, t, !1),
+	onEnterCancelled: m,
+	onLeaveCancelled: m
 };
-export { a as activateMotionElement, f as collapseTransition, s as freezeLeaveLayout, n as prefersReducedMotion, o as presenceTransition, l as rememberCollapseHeight, 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.2",
+  "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/core/notification.ce.vue_vue_type_style_index_0_scoped_1cfa12e4_lang.css

@@ -1 +0,0 @@
-@keyframes kima-ripple-glow-1cfa12e4{0%{opacity:.14}55%{opacity:.1}to{opacity:0}}.kima-notification-enter-active[data-v-1cfa12e4]{transition:opacity var(--kima-duration-medium) var(--kima-curve-emphasized), transform var(--kima-duration-medium) var(--kima-curve-emphasized)}.kima-notification-leave-active[data-v-1cfa12e4]{pointer-events:none;transition:opacity var(--kima-duration-fast) var(--kima-curve-standard), transform var(--kima-duration-fast) var(--kima-curve-standard)}.kima-notification-enter-from[data-v-1cfa12e4],.kima-notification-leave-to[data-v-1cfa12e4]{opacity:0}.kima-notification--top-right.kima-notification-enter-from[data-v-1cfa12e4],.kima-notification--top-right.kima-notification-leave-to[data-v-1cfa12e4],.kima-notification--bottom-right.kima-notification-enter-from[data-v-1cfa12e4],.kima-notification--bottom-right.kima-notification-leave-to[data-v-1cfa12e4]{transform:translate(calc(100% + 24px))}.kima-notification--top-left.kima-notification-enter-from[data-v-1cfa12e4],.kima-notification--top-left.kima-notification-leave-to[data-v-1cfa12e4],.kima-notification--bottom-left.kima-notification-enter-from[data-v-1cfa12e4],.kima-notification--bottom-left.kima-notification-leave-to[data-v-1cfa12e4]{transform:translate(calc(-100% - 24px))}.kima-notification--slide-right.kima-notification-enter-from[data-v-1cfa12e4],.kima-notification--slide-right.kima-notification-leave-to[data-v-1cfa12e4]{transform:translate(calc(100% + 24px))}.kima-notification--slide-left.kima-notification-enter-from[data-v-1cfa12e4],.kima-notification--slide-left.kima-notification-leave-to[data-v-1cfa12e4]{transform:translate(calc(-100% - 24px))}.kima-notification--slide-up.kima-notification-enter-from[data-v-1cfa12e4],.kima-notification--slide-up.kima-notification-leave-to[data-v-1cfa12e4]{transform:translateY(calc(-100% - 24px))}.kima-notification--slide-down.kima-notification-enter-from[data-v-1cfa12e4],.kima-notification--slide-down.kima-notification-leave-to[data-v-1cfa12e4]{transform:translateY(calc(100% + 24px))}.kima-notification--top.kima-notification-enter-from[data-v-1cfa12e4],.kima-notification--top-center.kima-notification-enter-from[data-v-1cfa12e4],.kima-notification--top.kima-notification-leave-to[data-v-1cfa12e4],.kima-notification--top-center.kima-notification-leave-to[data-v-1cfa12e4]{transform:translate(-50%)translateY(calc(-100% - 24px))}.kima-notification--bottom.kima-notification-enter-from[data-v-1cfa12e4],.kima-notification--bottom-center.kima-notification-enter-from[data-v-1cfa12e4],.kima-notification--bottom.kima-notification-leave-to[data-v-1cfa12e4],.kima-notification--bottom-center.kima-notification-leave-to[data-v-1cfa12e4]{transform:translate(-50%)translateY(calc(100% + 24px))}.kima-notification[data-v-1cfa12e4]{box-sizing:border-box;z-index:1100;align-items:flex-start;gap:var(--kima-space-3);width:min(420px,100vw - 32px);max-height:calc(100dvh - 32px);padding:var(--kima-space-4);border-radius:var(--kima-radius-l);color:var(--kima-color-on-surface);background:var(--kima-color-popup);box-shadow:var(--kima-elevation-4);font-family:var(--kima-font-family);border:0;display:flex;overflow:auto}.kima-notification--stacked[data-v-1cfa12e4]{pointer-events:auto;width:100%;position:relative;inset:auto}.kima-notification__icon[data-v-1cfa12e4]{width:24px;height:calc(var(--kima-font-size-md) * 1.3);opacity:.9;flex:none;justify-content:center;align-items:center;display:inline-flex}.kima-notification--top[data-v-1cfa12e4],.kima-notification--top-center[data-v-1cfa12e4],.kima-notification--top-left[data-v-1cfa12e4],.kima-notification--top-right[data-v-1cfa12e4]{top:var(--kima-space-4)}.kima-notification--bottom[data-v-1cfa12e4],.kima-notification--bottom-center[data-v-1cfa12e4],.kima-notification--bottom-left[data-v-1cfa12e4],.kima-notification--bottom-right[data-v-1cfa12e4]{bottom:var(--kima-space-4)}.kima-notification--top[data-v-1cfa12e4],.kima-notification--bottom[data-v-1cfa12e4],.kima-notification--top-center[data-v-1cfa12e4],.kima-notification--bottom-center[data-v-1cfa12e4]{left:50%;transform:translate(-50%)}.kima-notification--top-left[data-v-1cfa12e4],.kima-notification--bottom-left[data-v-1cfa12e4]{left:var(--kima-space-4)}.kima-notification--top-right[data-v-1cfa12e4],.kima-notification--bottom-right[data-v-1cfa12e4]{right:var(--kima-space-4)}.kima-notification--info[data-v-1cfa12e4]{color:var(--kima-color-on-primary-container);background:var(--kima-color-primary-container)}.kima-notification--warning[data-v-1cfa12e4]{color:var(--kima-color-on-warning);background:var(--kima-color-warning)}.kima-notification--success[data-v-1cfa12e4]{color:var(--kima-color-on-success);background:var(--kima-color-success)}.kima-notification--danger[data-v-1cfa12e4]{color:var(--kima-color-on-danger);background:var(--kima-color-danger)}.kima-notification__copy[data-v-1cfa12e4]{gap:var(--kima-space-1);overflow-wrap:anywhere;flex-direction:column;flex:auto;min-width:0;display:flex}.kima-notification__title[data-v-1cfa12e4]{font-size:var(--kima-font-size-md);font-weight:var(--kima-font-weight-bold);line-height:1.3}.kima-notification__message[data-v-1cfa12e4]{font-size:var(--kima-font-size-sm);line-height:1.45}.kima-notification__action[data-v-1cfa12e4]{margin-top:var(--kima-space-2);gap:var(--kima-space-2);flex-wrap:wrap;display:flex}.kima-notification__action[data-v-1cfa12e4]:empty{display:none}.kima-notification__close[data-v-1cfa12e4]{width:32px;height:32px;margin:calc((var(--kima-font-size-md) * 1.3 - 32px) / 2) calc(var(--kima-space-1) * -1) 0 0;border-radius:var(--kima-radius-full);color:inherit;background:var(--kima-color-transparent);cursor:pointer;border:0;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex;position:relative}.kima-notification__close[data-v-1cfa12e4]:after{content:"";z-index:1;border-radius:inherit;opacity:0;pointer-events:none;transition:opacity var(--kima-duration-effects) var(--kima-curve-standard);background:currentColor;position:absolute;inset:0}.kima-notification__close[data-v-1cfa12e4]>*{z-index:2;position:relative}.kima-notification__close[data-v-1cfa12e4]:hover:not(:disabled):not([aria-disabled=true]):after{opacity:var(--kima-state-hover)}.kima-notification__close[data-v-1cfa12e4]:focus-visible:after{opacity:var(--kima-state-focus)}.kima-notification__close[data-v-1cfa12e4]:active:not(:disabled):not([aria-disabled=true]):after{opacity:var(--kima-state-pressed)}.kima-notification__close[data-v-1cfa12e4]:focus-visible{outline:var(--kima-focus-ring-width) solid var(--kima-color-primary);outline-offset:var(--kima-focus-ring-offset)}.kima-notification__close[data-v-1cfa12e4]{position:relative;overflow:hidden}.kima-notification__close[data-v-1cfa12e4] .kima-ripple{z-index:2;pointer-events:none;animation:kima-ripple-glow-1cfa12e4 var(--kima-duration-slower) linear forwards;background:currentColor;position:absolute;inset:0}.kima-notification__close[data-v-1cfa12e4]{transition:background-color var(--kima-duration-effects) var(--kima-curve-standard)}.kima-notification__close[data-v-1cfa12e4]:hover{background:color-mix(in srgb, currentColor 12%, var(--kima-color-transparent))}@media (prefers-reduced-motion:reduce){.kima-notification__close[data-v-1cfa12e4]{transition:none}.kima-notification-enter-active[data-v-1cfa12e4],.kima-notification-leave-active[data-v-1cfa12e4]{transition-duration:1ms}.kima-notification-enter-from[data-v-1cfa12e4],.kima-notification-leave-to[data-v-1cfa12e4]{transform:none}.kima-notification--top[data-v-1cfa12e4],.kima-notification--top-center[data-v-1cfa12e4],.kima-notification--bottom[data-v-1cfa12e4],.kima-notification--bottom-center[data-v-1cfa12e4]{transform:translate(-50%)}}@media (width<=600px){.kima-notification--top[data-v-1cfa12e4],.kima-notification--top-left[data-v-1cfa12e4],.kima-notification--top-center[data-v-1cfa12e4],.kima-notification--top-right[data-v-1cfa12e4]{top:var(--kima-space-3)}.kima-notification--bottom[data-v-1cfa12e4],.kima-notification--bottom-left[data-v-1cfa12e4],.kima-notification--bottom-center[data-v-1cfa12e4],.kima-notification--bottom-right[data-v-1cfa12e4]{bottom:var(--kima-space-3)}.kima-notification--top-left[data-v-1cfa12e4],.kima-notification--bottom-left[data-v-1cfa12e4]{left:var(--kima-space-3)}.kima-notification--top-right[data-v-1cfa12e4],.kima-notification--bottom-right[data-v-1cfa12e4]{right:var(--kima-space-3)}}

package/dist/components/utility/notification-queue.ce.vue_vue_type_style_index_0_scoped_8ff80bbb_lang.css

@@ -1 +0,0 @@
-.kima-notification-queue[data-v-8ff80bbb]{z-index:1100;pointer-events:none;width:min(420px,100vw - 32px);font-family:var(--kima-font-family);position:fixed}.kima-notification-queue--top[data-v-8ff80bbb],.kima-notification-queue--top-center[data-v-8ff80bbb],.kima-notification-queue--top-left[data-v-8ff80bbb],.kima-notification-queue--top-right[data-v-8ff80bbb]{top:var(--kima-space-4)}.kima-notification-queue--bottom[data-v-8ff80bbb],.kima-notification-queue--bottom-center[data-v-8ff80bbb],.kima-notification-queue--bottom-left[data-v-8ff80bbb],.kima-notification-queue--bottom-right[data-v-8ff80bbb]{bottom:var(--kima-space-4)}.kima-notification-queue--top[data-v-8ff80bbb],.kima-notification-queue--bottom[data-v-8ff80bbb],.kima-notification-queue--top-center[data-v-8ff80bbb],.kima-notification-queue--bottom-center[data-v-8ff80bbb]{left:50%;transform:translate(-50%)}.kima-notification-queue--top-left[data-v-8ff80bbb],.kima-notification-queue--bottom-left[data-v-8ff80bbb]{left:var(--kima-space-4)}.kima-notification-queue--top-right[data-v-8ff80bbb],.kima-notification-queue--bottom-right[data-v-8ff80bbb]{right:var(--kima-space-4)}.kima-notification-queue--slide-right .kima-notification-queue-enter-from[data-v-8ff80bbb],.kima-notification-queue--slide-right .kima-notification-queue-leave-to[data-v-8ff80bbb]{transform:translate(calc(100% + 24px))}.kima-notification-queue--slide-left .kima-notification-queue-enter-from[data-v-8ff80bbb],.kima-notification-queue--slide-left .kima-notification-queue-leave-to[data-v-8ff80bbb]{transform:translate(calc(-100% - 24px))}.kima-notification-queue--slide-up .kima-notification-queue-enter-from[data-v-8ff80bbb],.kima-notification-queue--slide-up .kima-notification-queue-leave-to[data-v-8ff80bbb]{transform:translateY(calc(-100% - 24px))}.kima-notification-queue--slide-down .kima-notification-queue-enter-from[data-v-8ff80bbb],.kima-notification-queue--slide-down .kima-notification-queue-leave-to[data-v-8ff80bbb]{transform:translateY(calc(100% + 24px))}.kima-notification-queue__stack[data-v-8ff80bbb]{gap:var(--kima-space-3);pointer-events:none;display:grid}.kima-notification-queue__item[data-v-8ff80bbb]{min-width:0}.kima-notification-queue__item.kima-notification-queue-enter-active[data-v-8ff80bbb],.kima-notification-queue__item.kima-notification-queue-leave-active[data-v-8ff80bbb]{transition:opacity var(--kima-duration-medium) var(--kima-curve-emphasized), transform var(--kima-duration-medium) var(--kima-curve-emphasized)}.kima-notification-queue__item.kima-notification-queue-leave-active[data-v-8ff80bbb]{pointer-events:none;position:absolute;inset-inline:0}.kima-notification-queue__item.kima-notification-queue-enter-from[data-v-8ff80bbb],.kima-notification-queue__item.kima-notification-queue-leave-to[data-v-8ff80bbb]{opacity:0}@media (prefers-reduced-motion:reduce){.kima-notification-queue__item.kima-notification-queue-enter-active[data-v-8ff80bbb],.kima-notification-queue__item.kima-notification-queue-leave-active[data-v-8ff80bbb],.kima-notification-queue__item.kima-notification-queue-move[data-v-8ff80bbb]{transition-duration:1ms}}

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}