@lovince/icons 1.1.1 → 1.2.0

package/README.md

@@ -10,14 +10,16 @@ bun add @lovince/icons
 
 No runtime dependencies. Vue is an optional peer, needed only for the Vue layer.
 
-## Not another icon collection
+## What this is for
 
-Competing on icon count is a losing game. This competes on what generic sets
-don't do:
+Lucide, Heroicons and Material Symbols are excellent, and this does not try to
+out-draw them — 47 icons against Lucide's 2,000 is not a contest. It exists to
+do the things a general-purpose set is not trying to do:
 
 | | |
 |---|---|
 | **One geometry, three variants** | Outline, duotone and filled are the same paths at different fill strengths — so a variant change is an animatable value, not a swap |
+| **Any icon morphs into any other** | Not curated pairs — `home` into `settings`, `search` into `spark`. Arbitrary geometry, no hand-alignment |
 | **Transitions, not swaps** | Menu ⇄ Close, Plus ⇄ Close, and a tick that draws on. Continuity is the point |
 | **Hit area separated from icon size** | An 18px icon still gets a 44px target. The most common icon-button mistake, invisible until someone taps it |
 | **Journey step states** | `○ → ◉ → ✓` as one shape, for onboarding progress |
@@ -111,9 +113,46 @@ control moves as one object:
 </button>
 ```
 
+## Morphing
+
+Libraries that morph icons do it by hand: a menu and a close are *drawn* as the
+same three lines so CSS can rotate one into the other. That works for a handful
+of curated pairs and not at all for the rest.
+
+This morphs arbitrary geometry.
+
+```vue
+<LvMorphIcon :name="current" :size="28" />
+```
+
+Change `name` and the icon transforms into the new one — any icon, any other
+icon, with no pre-alignment.
+
+```ts
+import { planMorph, canMorph } from '@lovince/icons'
+
+const plan = planMorph(paths.home, paths.settings)
+plan?.at(0.5)   // the geometry halfway between them
+```
+
+**How it works.** Both icons are sampled into equal point counts using the
+browser's own geometry engine (`getPointAtLength`), then interpolated. Using
+the browser rather than a hand-written path parser means arcs, cubics,
+quadratics and every shorthand come for free, and the sampling cannot drift
+from how the path actually renders.
+
+Sub-paths are padded on both sides, so a five-path icon can morph into a
+two-path icon: the surplus collapses to a point instead of vanishing. Point
+rings are rotated to their nearest alignment first, which is what stops the
+shape visibly unwinding mid-morph.
+
+Where no geometry engine exists — a server, an old browser, reduced motion —
+`canMorph()` reports `false` and the component swaps instantly. The end state
+is identical either way.
+
 ## Icon set
 
-52 icons across five groups — `navigation`, `journey`, `status`, `onboarding`,
+47 icons across five groups — `navigation`, `journey`, `status`, `onboarding`,
 `interface`.
 
 ```ts
@@ -150,6 +189,37 @@ paths.js   2.0 KB gzip   geometry only
 style.css  2.0 KB gzip   animated components only
 ```
 
+## Prior art and credits
+
+This set stands on conventions established by others, and it is worth naming
+them.
+
+**[Lucide](https://lucide.dev)** (ISC) — the design language here follows
+Lucide's published guidelines: a 24×24 canvas, 2px centred stroke, round caps
+and joins. The `absoluteStrokeWidth` prop is Lucide's name for that behaviour
+and is kept deliberately, because developers already know it.
+
+**[Material Symbols](https://fonts.google.com/icons)** (Apache-2.0) — the idea
+of an icon varying continuously along axes such as fill and weight, rather than
+shipping a separate file per state, comes from Material's variable font work.
+
+**[Heroicons](https://heroicons.com)** (MIT) — for the outline/solid pairing
+that this generalises into a single fill value.
+
+### On geometry overlap
+
+Every path here was authored by hand rather than copied. That said, this set
+was diffed against all 2,025 Lucide icons, and **21 of its 126 paths are
+identical** — all of them primitive: straight lines, dots, and a chevron.
+
+A horizontal line across a 24-unit grid has one sensible form; so does a plus,
+a minus, and `M12 8h.01` for a dot. Those matches are convergence, not
+authorship. No multi-curve icon matched. The comparison is reproducible if you
+want to run it yourself.
+
+Universal shapes — a house for home, a magnifier for search, three bars for a
+menu — are shared visual vocabulary and belong to no one.
+
 ## License
 
 MIT

package/dist/LvMorphIcon.vue.d.ts

@@ -0,0 +1,28 @@
+import { IconName } from './paths';
+import { IconFlip } from './core/props';
+type __VLS_Props = {
+    /** Change this and the icon morphs into the new one. Any icon, any other icon. */
+    name: IconName;
+    size?: number | string;
+    strokeWidth?: number | string;
+    absoluteStrokeWidth?: boolean;
+    flip?: IconFlip;
+    rotate?: number | string;
+    label?: string;
+    duration?: number;
+    /** Points sampled per sub-path. Higher is smoother and slower to prepare. */
+    resolution?: number;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    morphed: (args_0: "arrowRight" | "arrowLeft" | "arrowUp" | "arrowDown" | "chevronRight" | "chevronLeft" | "chevronUp" | "chevronDown" | "close" | "menu" | "external" | "start" | "skip" | "complete" | "target" | "spark" | "pause" | "restart" | "success" | "warning" | "info" | "error" | "welcome" | "discover" | "click" | "swipe" | "drag" | "scroll" | "tip" | "help" | "shortcut" | "newFeature" | "home" | "search" | "install" | "book" | "code" | "palette" | "shield" | "accessibility" | "sun" | "moon" | "monitor" | "plus" | "minus" | "copy" | "settings") => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onMorphed?: ((args_0: "arrowRight" | "arrowLeft" | "arrowUp" | "arrowDown" | "chevronRight" | "chevronLeft" | "chevronUp" | "chevronDown" | "close" | "menu" | "external" | "start" | "skip" | "complete" | "target" | "spark" | "pause" | "restart" | "success" | "warning" | "info" | "error" | "welcome" | "discover" | "click" | "swipe" | "drag" | "scroll" | "tip" | "help" | "shortcut" | "newFeature" | "home" | "search" | "install" | "book" | "code" | "palette" | "shield" | "accessibility" | "sun" | "moon" | "monitor" | "plus" | "minus" | "copy" | "settings") => any) | undefined;
+}>, {
+    size: number | string;
+    strokeWidth: number | string;
+    absoluteStrokeWidth: boolean;
+    duration: number;
+    resolution: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/animated/LvMenuToClose.vue.d.ts

@@ -10,8 +10,8 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {
     size: number | string;
     strokeWidth: number | string;
     absoluteStrokeWidth: boolean;
-    open: boolean;
     duration: number;
+    open: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/animated/LvPlusToClose.vue.d.ts

@@ -10,8 +10,8 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {
     size: number | string;
     strokeWidth: number | string;
     absoluteStrokeWidth: boolean;
-    open: boolean;
     duration: number;
+    open: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/core/morph.d.ts

@@ -0,0 +1,50 @@
+export interface Point {
+    readonly x: number;
+    readonly y: number;
+}
+/**
+ * Morphing between *arbitrary* icons.
+ *
+ * Icon libraries that morph do it by hand: a menu and a close are drawn as the
+ * same three lines so CSS can rotate them. That works for a handful of curated
+ * pairs and not at all for the other 2,000 combinations.
+ *
+ * This samples any two paths into equal point counts and interpolates between
+ * them, so *any* icon can become *any* other — `home` into `settings`, `search`
+ * into `spark` — with no hand-alignment.
+ *
+ * The sampling uses the browser's own geometry engine (`getPointAtLength`)
+ * rather than a hand-written path parser. That is the whole trick: arcs,
+ * cubics, quadratics and every shorthand come for free and cannot drift from
+ * how the browser actually renders them.
+ *
+ * Where that engine is unavailable — a server, an older environment — every
+ * function returns `null` and callers swap instantly instead.
+ */
+export declare const canMorph: () => boolean;
+/** Samples one path into `count` points spaced evenly along its length. */
+export declare const samplePath: (d: string, count: number) => Point[] | null;
+/**
+ * Samples a whole icon. Sub-paths are padded to the same count on both sides so
+ * a three-path icon can morph into a one-path icon: the surplus collapses to a
+ * point rather than being dropped, which keeps the motion continuous.
+ */
+export declare const sampleIcon: (shapes: readonly string[], perPath: number) => Point[][] | null;
+/**
+ * Rotates the target ring so its start point is nearest the source's. Without
+ * this the shape visibly unwinds during the morph, which reads as a glitch
+ * rather than a transformation.
+ */
+export declare const align: (from: readonly Point[], to: readonly Point[]) => Point[];
+export declare const lerp: (a: number, b: number, t: number) => number;
+export interface MorphPlan {
+    readonly from: Point[][];
+    readonly to: Point[][];
+    /** `at(0)` is the source icon, `at(1)` the target. */
+    readonly at: (progress: number) => string[];
+}
+/**
+ * Prepares a reusable interpolation between two icons. Sampling is the
+ * expensive part, so it happens once here rather than on every frame.
+ */
+export declare const planMorph: (from: readonly string[], to: readonly string[], perPath?: number) => MorphPlan | null;

package/dist/index.d.ts

@@ -8,5 +8,6 @@ export { renderIcon, createIcon, iconDataUri, type RenderOptions } from './rende
 export { defineIconElement, optionsFromAttributes, resolveElementName, type LvIconElement, } from './element';
 export { CANVAS, DEFAULT_SIZE, DEFAULT_STROKE, resolveGeometry, resolveStroke, resolveTransform, resolveFill, type IconFlip, type IconGeometry, } from './core/props';
 export { CONTEXT, VARIANT_FILL, STATE_FILL, STATE_OPACITY, opticalStroke, resolveContext, resolveVariantFill, type ContextPreset, type IconContext, type IconState, type IconVariant, } from './core/variants';
+export { align, canMorph, lerp, planMorph, sampleIcon, samplePath, type MorphPlan, type Point, } from './core/morph';
 export { createTimeline, journeyChoreography, type Cue, type CueInput, type Timeline, } from './core/choreography';
 export { DURATION, EASE, cssDuration, prefersReducedMotion, resolveDuration, } from './core/motion';

package/dist/index.js

@@ -1,9 +1,9 @@
 import { iconGroups as e, iconNames as t, isIconName as n, paths as r } from "./paths.js";
-import { _ as i, a, c as o, d as s, f as c, g as l, h as u, i as d, l as f, m as p, n as m, o as h, p as g, r as _, s as v, t as y, u as b, v as x, y as S } from "./motion-72rOKpWt.js";
+import { C as i, S as a, T as o, _ as s, a as c, b as l, c as u, d, f, g as p, h as m, i as h, l as g, m as _, n as v, o as y, p as b, r as x, s as S, t as C, u as w, v as T, w as E, x as D, y as O } from "./motion-CBQXeIyE.js";
 //#region src/render.ts
-var C = "http://www.w3.org/2000/svg", w = (e) => e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), T = (e, t) => {
-	let n = i(t), a = l(t.fill), o = t.label == null || t.label.length === 0, s = {
-		xmlns: C,
+var k = "http://www.w3.org/2000/svg", A = (e) => e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), j = (e, t) => {
+	let n = i(t), o = a(t.fill), s = t.label == null || t.label.length === 0, c = {
+		xmlns: k,
 		class: t.class ?? "lv-icon",
 		width: String(n.size),
 		height: String(n.size),
@@ -14,29 +14,29 @@ var C = "http://www.w3.org/2000/svg", w = (e) => e.replace(/&/g, "&amp;").replac
 		"stroke-linecap": "round",
 		"stroke-linejoin": "round"
 	};
-	return o ? s["aria-hidden"] = "true" : (s.role = "img", s["aria-label"] = t.label), {
-		attrs: s,
+	return s ? c["aria-hidden"] = "true" : (c.role = "img", c["aria-label"] = t.label), {
+		attrs: c,
 		shapes: r[e] ?? [],
 		transform: n.transform,
-		fill: a
+		fill: o
 	};
-}, E = (e, t = {}) => {
-	let { attrs: n, shapes: r, transform: i, fill: a } = T(e, t), o = Object.entries(n).map(([e, t]) => `${e}="${w(t)}"`).join(" "), s = a > 0 ? ` fill="currentColor" fill-opacity="${a}"` : "", c = r.map((e) => `<path d="${w(e)}"${s}/>`).join("");
-	return `<svg ${o}>${i === void 0 ? c : `<g transform="${w(i)}">${c}</g>`}</svg>`;
-}, D = (e, t = {}) => {
+}, M = (e, t = {}) => {
+	let { attrs: n, shapes: r, transform: i, fill: a } = j(e, t), o = Object.entries(n).map(([e, t]) => `${e}="${A(t)}"`).join(" "), s = a > 0 ? ` fill="currentColor" fill-opacity="${a}"` : "", c = r.map((e) => `<path d="${A(e)}"${s}/>`).join("");
+	return `<svg ${o}>${i === void 0 ? c : `<g transform="${A(i)}">${c}</g>`}</svg>`;
+}, N = (e, t = {}) => {
 	if (typeof document > "u") return null;
-	let { attrs: n, shapes: r, transform: i, fill: a } = T(e, t), o = document.createElementNS(C, "svg");
+	let { attrs: n, shapes: r, transform: i, fill: a } = j(e, t), o = document.createElementNS(k, "svg");
 	for (let [e, t] of Object.entries(n)) o.setAttribute(e, t);
 	let s = i === void 0 ? o : (() => {
-		let e = document.createElementNS(C, "g");
+		let e = document.createElementNS(k, "g");
 		return e.setAttribute("transform", i), o.appendChild(e), e;
 	})();
 	for (let e of r) {
-		let t = document.createElementNS(C, "path");
+		let t = document.createElementNS(k, "path");
 		t.setAttribute("d", e), a > 0 && (t.setAttribute("fill", "currentColor"), t.setAttribute("fill-opacity", String(a))), s.appendChild(t);
 	}
 	return o;
-}, O = (e, t = {}) => `data:image/svg+xml,${encodeURIComponent(E(e, t))}`, k = [
+}, P = (e, t = {}) => `data:image/svg+xml,${encodeURIComponent(M(e, t))}`, F = [
 	"name",
 	"size",
 	"stroke-width",
@@ -45,30 +45,30 @@ var C = "http://www.w3.org/2000/svg", w = (e) => e.replace(/&/g, "&amp;").replac
 	"rotate",
 	"flip",
 	"label"
-], A = (e) => e.replace(/-([a-z])/g, (e, t) => t.toUpperCase()), j = (e) => {
+], I = (e) => e.replace(/-([a-z])/g, (e, t) => t.toUpperCase()), L = (e) => {
 	if (e == null) return null;
-	let t = A(e.trim());
+	let t = I(e.trim());
 	return n(t) ? t : null;
-}, M = (e, t) => {
+}, R = (e, t) => {
 	if (e == null) return t;
 	let n = Number.parseFloat(e);
 	return Number.isFinite(n) ? n : t;
-}, N = (e, t) => {
+}, z = (e, t) => {
 	let n = e("flip"), r = e("label");
 	return {
-		size: M(e("size"), 24),
-		strokeWidth: M(e("stroke-width"), 2),
+		size: R(e("size"), 24),
+		strokeWidth: R(e("stroke-width"), 2),
 		absoluteStrokeWidth: t("absolute-stroke-width"),
-		fill: M(e("fill"), 0),
-		rotate: M(e("rotate"), 0),
+		fill: R(e("fill"), 0),
+		rotate: R(e("rotate"), 0),
 		...n === "horizontal" || n === "vertical" || n === "both" ? { flip: n } : {},
 		...r == null ? {} : { label: r }
 	};
-}, P = (e = "lv-icon") => {
+}, B = (e = "lv-icon") => {
 	if (typeof window > "u" || typeof customElements > "u" || typeof HTMLElement > "u" || customElements.get(e) !== void 0) return;
 	class t extends HTMLElement {
 		static get observedAttributes() {
-			return k;
+			return F;
 		}
 		connectedCallback() {
 			this.render();
@@ -77,16 +77,16 @@ var C = "http://www.w3.org/2000/svg", w = (e) => e.replace(/&/g, "&amp;").replac
 			this.isConnected && this.render();
 		}
 		render() {
-			let e = j(this.getAttribute("name"));
+			let e = L(this.getAttribute("name"));
 			if (this.replaceChildren(), e === null) return;
-			let t = D(e, N((e) => this.getAttribute(e), (e) => this.hasAttribute(e)));
+			let t = N(e, z((e) => this.getAttribute(e), (e) => this.hasAttribute(e)));
 			t !== null && this.appendChild(t);
 		}
 	}
 	customElements.define(e, t);
-}, F = (e) => e < .5 ? 4 * e * e * e : 1 - (-2 * e + 2) ** 3 / 2, I = () => {
+}, V = (e) => e < .5 ? 4 * e * e * e : 1 - (-2 * e + 2) ** 3 / 2, H = () => {
 	let e = [], t = 0, n = 0, r = !1, i = (n) => {
-		let r = n.duration ?? y.state, i = Math.max(0, t + (n.offset ?? 0));
+		let r = n.duration ?? C.state, i = Math.max(0, t + (n.offset ?? 0));
 		e.push({
 			name: n.name,
 			at: i,
@@ -94,23 +94,23 @@ var C = "http://www.w3.org/2000/svg", w = (e) => e.replace(/&/g, "&amp;").replac
 			run: n.run,
 			...n.onComplete === void 0 ? {} : { onComplete: n.onComplete }
 		}), t = i + r;
-	}, o = {
-		add: (e) => (i(e), o),
-		stagger: (e, n = y.micro / 2) => {
+	}, a = {
+		add: (e) => (i(e), a),
+		stagger: (e, n = C.micro / 2) => {
 			let r = t;
 			return e.forEach((e, a) => {
 				t = r + a * n, i({
 					...e,
 					offset: 0
 				});
-			}), t = Math.max(t, r + (e.length - 1) * n + (e[0]?.duration ?? y.state)), o;
+			}), t = Math.max(t, r + (e.length - 1) * n + (e[0]?.duration ?? C.state)), a;
 		},
 		cues: () => [...e],
 		duration: () => e.reduce((e, t) => Math.max(e, t.at + t.duration), 0),
 		play: () => {
 			r = !1;
-			let t = o.duration();
-			if (a(t) === 0 || typeof requestAnimationFrame != "function") {
+			let t = a.duration();
+			if (c(t) === 0 || typeof requestAnimationFrame != "function") {
 				for (let t of e) t.run(1), t.onComplete?.();
 				return Promise.resolve();
 			}
@@ -121,7 +121,7 @@ var C = "http://www.w3.org/2000/svg", w = (e) => e.replace(/&/g, "&amp;").replac
 					for (let t of e) {
 						if (l < t.at) continue;
 						let e = t.duration <= 0 ? 1 : (l - t.at) / t.duration, n = e >= 1 ? 1 : e;
-						t.run(F(n)), n === 1 && !o.has(t.name) && (o.add(t.name), t.onComplete?.());
+						t.run(V(n)), n === 1 && !o.has(t.name) && (o.add(t.name), t.onComplete?.());
 					}
 					if (l >= t) return i();
 					n = requestAnimationFrame(s);
@@ -133,9 +133,9 @@ var C = "http://www.w3.org/2000/svg", w = (e) => e.replace(/&/g, "&amp;").replac
 			r = !0, n !== 0 && typeof cancelAnimationFrame == "function" && cancelAnimationFrame(n), n = 0;
 		}
 	};
-	return o;
-}, L = (e) => {
-	let t = I().add({
+	return a;
+}, U = (e) => {
+	let t = H().add({
 		name: "spotlight",
 		duration: .72,
 		run: e.spotlight
@@ -156,4 +156,4 @@ var C = "http://www.w3.org/2000/svg", w = (e) => e.replace(/&/g, "&amp;").replac
 	}), n.length > 0 && t.stagger(n, .06), t;
 };
 //#endregion
-export { g as CANVAS, h as CONTEXT, p as DEFAULT_SIZE, u as DEFAULT_STROKE, y as DURATION, m as EASE, v as STATE_FILL, o as STATE_OPACITY, f as VARIANT_FILL, D as createIcon, I as createTimeline, _ as cssDuration, P as defineIconElement, O as iconDataUri, e as iconGroups, t as iconNames, n as isIconName, L as journeyChoreography, b as opticalStroke, N as optionsFromAttributes, r as paths, d as prefersReducedMotion, E as renderIcon, s as resolveContext, a as resolveDuration, j as resolveElementName, l as resolveFill, i as resolveGeometry, x as resolveStroke, S as resolveTransform, c as resolveVariantFill };
+export { O as CANVAS, f as CONTEXT, l as DEFAULT_SIZE, D as DEFAULT_STROKE, C as DURATION, v as EASE, b as STATE_FILL, _ as STATE_OPACITY, m as VARIANT_FILL, y as align, S as canMorph, N as createIcon, H as createTimeline, x as cssDuration, B as defineIconElement, P as iconDataUri, e as iconGroups, t as iconNames, n as isIconName, U as journeyChoreography, u as lerp, p as opticalStroke, z as optionsFromAttributes, r as paths, g as planMorph, h as prefersReducedMotion, M as renderIcon, s as resolveContext, c as resolveDuration, L as resolveElementName, a as resolveFill, i as resolveGeometry, E as resolveStroke, o as resolveTransform, T as resolveVariantFill, w as sampleIcon, d as samplePath };

package/dist/motion-CBQXeIyE.js

@@ -0,0 +1,166 @@
+//#region src/core/props.ts
+var e = 24, t = 24, n = 2, r = (e, t) => {
+	if (typeof e == "number") return Number.isFinite(e) ? e : t;
+	if (typeof e == "string") {
+		let n = Number.parseFloat(e);
+		return Number.isFinite(n) ? n : t;
+	}
+	return t;
+}, i = (e, t, n) => {
+	let i = r(e, 2);
+	return !n || t <= 0 ? i : i * 24 / t;
+}, a = (e) => (r(e, 0) % 360 + 360) % 360, o = (e) => e === "horizontal" ? [-1, 1] : e === "vertical" ? [1, -1] : e === "both" ? [-1, -1] : [1, 1], s = (e, t) => {
+	let n = a(e), [r, i] = o(t);
+	if (n === 0 && r === 1 && i === 1) return;
+	let s = ["translate(12 12)"];
+	return n !== 0 && s.push(`rotate(${n})`), (r !== 1 || i !== 1) && s.push(`scale(${r} ${i})`), s.push("translate(-12 -12)"), s.join(" ");
+}, c = (e) => {
+	let t = r(e.size, 24);
+	return {
+		size: t,
+		strokeWidth: i(e.strokeWidth, t, e.absoluteStrokeWidth === !0),
+		transform: s(e.rotate, e.flip)
+	};
+}, l = (e) => {
+	if (e === !0) return 1;
+	if (e === void 0 || e === !1) return 0;
+	let t = r(e, 0);
+	return t < 0 ? 0 : t > 1 ? 1 : t;
+}, u = {
+	outline: 0,
+	duotone: .18,
+	filled: 1
+}, d = (e) => u[e ?? "outline"] ?? 0, f = {
+	inline: {
+		size: 16,
+		strokeWidth: 2,
+		hitArea: 0
+	},
+	toolbar: {
+		size: 20,
+		strokeWidth: 2,
+		hitArea: 44
+	},
+	button: {
+		size: 18,
+		strokeWidth: 2,
+		hitArea: 44
+	},
+	navigation: {
+		size: 22,
+		strokeWidth: 1.9,
+		hitArea: 48
+	},
+	status: {
+		size: 20,
+		strokeWidth: 2,
+		hitArea: 0
+	},
+	hero: {
+		size: 40,
+		strokeWidth: 1.6,
+		hitArea: 0
+	}
+}, p = (e) => e === void 0 ? null : f[e] ?? null, m = (e, t = 2) => e <= 16 ? t * .9 : e <= 20 ? t * .95 : e <= 28 ? t : e <= 40 ? t * .85 : t * .75, h = {
+	default: 0,
+	hover: .12,
+	active: 1,
+	selected: 1,
+	disabled: 0
+}, g = {
+	default: 1,
+	hover: 1,
+	active: 1,
+	selected: 1,
+	disabled: .38
+}, _ = "http://www.w3.org/2000/svg", v = () => {
+	if (typeof document > "u") return !1;
+	try {
+		let e = document.createElementNS(_, "path");
+		return typeof e.getTotalLength == "function" && typeof e.getPointAtLength == "function";
+	} catch {
+		return !1;
+	}
+}, y = (e, t) => {
+	if (!v() || t < 2) return null;
+	try {
+		let n = document.createElementNS(_, "svg"), r = document.createElementNS(_, "path");
+		r.setAttribute("d", e), n.appendChild(r);
+		let i = r.getTotalLength();
+		if (!Number.isFinite(i) || i <= 0) return null;
+		let a = [];
+		for (let e = 0; e < t; e += 1) {
+			let n = r.getPointAtLength(i * e / (t - 1));
+			a.push({
+				x: n.x,
+				y: n.y
+			});
+		}
+		return a;
+	} catch {
+		return null;
+	}
+}, b = (e, t) => {
+	if (e.length === 0) return null;
+	let n = [];
+	for (let r of e) {
+		let e = y(r, t);
+		if (e === null) return null;
+		n.push(e);
+	}
+	return n;
+}, x = (e) => {
+	let t = 0, n = 0;
+	for (let r of e) t += r.x, n += r.y;
+	return {
+		x: t / e.length,
+		y: n / e.length
+	};
+}, S = (e) => {
+	let t = x(e);
+	return e.map(() => t);
+}, C = (e, t) => Math.hypot(e.x - t.x, e.y - t.y), w = (e, t) => {
+	if (e.length !== t.length || e.length === 0) return [...t];
+	let n = 0, r = Infinity, i = Math.max(1, Math.floor(t.length / 24));
+	for (let a = 0; a < t.length; a += i) {
+		let o = 0;
+		for (let n = 0; n < e.length; n += i) o += C(e[n], t[(n + a) % t.length]);
+		o < r && (r = o, n = a);
+	}
+	return t.map((e, r) => t[(r + n) % t.length]);
+}, T = (e, t, n) => e + (t - e) * n, E = (e) => {
+	if (e.length === 0) return "";
+	let t = e[0], n = e.slice(1).map((e) => `L${e.x.toFixed(2)} ${e.y.toFixed(2)}`).join("");
+	return `M${t.x.toFixed(2)} ${t.y.toFixed(2)}${n}`;
+}, D = (e, t, n = 64) => {
+	let r = b(e, n), i = b(t, n);
+	if (r === null || i === null) return null;
+	let a = Math.max(r.length, i.length), o = [], s = [];
+	for (let e = 0; e < a; e += 1) {
+		let t = r[e], n = i[e];
+		t !== void 0 && n !== void 0 ? (o.push([...t]), s.push(w(t, n))) : t === void 0 ? n !== void 0 && (o.push(S(n)), s.push([...n])) : (o.push([...t]), s.push(S(t)));
+	}
+	return {
+		from: o,
+		to: s,
+		at: (e) => {
+			let t = e <= 0 ? 0 : e >= 1 ? 1 : e;
+			return o.map((e, n) => {
+				let r = s[n];
+				return E(e.map((e, n) => ({
+					x: T(e.x, r[n].x, t),
+					y: T(e.y, r[n].y, t)
+				})));
+			});
+		}
+	};
+}, O = {
+	micro: .18,
+	state: .28,
+	morph: .36
+}, k = {
+	enter: "cubic-bezier(0.33, 1, 0.68, 1)",
+	morph: "cubic-bezier(0.65, 0, 0.35, 1)"
+}, A = () => typeof window > "u" || typeof window.matchMedia != "function" ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches === !0, j = (e, t = A()) => t ? 0 : e, M = (e, t) => `${j(e, t)}s`;
+//#endregion
+export { c as C, l as S, s as T, p as _, j as a, t as b, T as c, y as d, f, m as g, u as h, A as i, D as l, g as m, k as n, w as o, h as p, M as r, v as s, O as t, b as u, d as v, i as w, n as x, e as y };

package/dist/vue.d.ts

@@ -3,6 +3,7 @@ export { default as LvIcon } from './LvIcon.vue';
 export { default as LvIconButton } from './LvIconButton.vue';
 export { default as LvJourneyStep } from './LvJourneyStep.vue';
 export { default as LvIconInspector } from './LvIconInspector.vue';
+export { default as LvMorphIcon } from './LvMorphIcon.vue';
 export { default as LvMenuToClose } from './animated/LvMenuToClose.vue';
 export { default as LvPlusToClose } from './animated/LvPlusToClose.vue';
 export { default as LvCheckmark } from './animated/LvCheckmark.vue';

package/dist/vue.js

@@ -1,19 +1,19 @@
 import { paths as e } from "./paths.js";
-import { _ as t, c as n, f as r, g as i, i as a, n as o, o as s, r as c, s as l, t as u, u as d } from "./motion-72rOKpWt.js";
-import { Fragment as f, computed as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createVNode as _, defineComponent as v, normalizeClass as y, normalizeStyle as b, openBlock as x, renderList as S, toDisplayString as C, unref as w } from "vue";
+import { C as t, S as n, a as r, f as i, g as a, i as o, l as s, m as c, n as l, p as u, r as d, s as f, t as p, v as m } from "./motion-CBQXeIyE.js";
+import { Fragment as h, computed as g, createCommentVNode as _, createElementBlock as v, createElementVNode as y, createVNode as b, defineComponent as x, normalizeClass as S, normalizeStyle as C, onBeforeUnmount as w, openBlock as T, ref as E, renderList as D, toDisplayString as O, unref as k, watch as A } from "vue";
 //#region src/LvIcon.vue?vue&type=script&setup=true&lang.ts
-var T = [
+var j = [
 	"width",
 	"height",
 	"stroke-width",
 	"aria-hidden",
 	"role",
 	"aria-label"
-], E = ["transform"], D = [
+], M = ["transform"], N = [
 	"d",
 	"fill",
 	"fill-opacity"
-], O = /* @__PURE__ */ v({
+], P = /* @__PURE__ */ x({
 	__name: "LvIcon",
 	props: {
 		name: {},
@@ -31,15 +31,15 @@ var T = [
 		flip: {},
 		label: {}
 	},
-	setup(n) {
-		let r = n, a = p(() => e[r.name] ?? []), o = p(() => t({
-			size: r.size,
-			strokeWidth: r.strokeWidth,
-			absoluteStrokeWidth: r.absoluteStrokeWidth,
-			rotate: r.rotate,
-			flip: r.flip
-		})), s = p(() => i(r.fill)), c = p(() => r.label == null || r.label.length === 0);
-		return (e, t) => (x(), h("svg", {
+	setup(r) {
+		let i = r, a = g(() => e[i.name] ?? []), o = g(() => t({
+			size: i.size,
+			strokeWidth: i.strokeWidth,
+			absoluteStrokeWidth: i.absoluteStrokeWidth,
+			rotate: i.rotate,
+			flip: i.flip
+		})), s = g(() => n(i.fill)), c = g(() => i.label == null || i.label.length === 0);
+		return (e, t) => (T(), v("svg", {
 			class: "lv-icon",
 			xmlns: "http://www.w3.org/2000/svg",
 			width: o.value.size,
@@ -52,15 +52,15 @@ var T = [
 			"stroke-linejoin": "round",
 			"aria-hidden": c.value ? "true" : void 0,
 			role: c.value ? void 0 : "img",
-			"aria-label": c.value ? void 0 : n.label
-		}, [g("g", { transform: o.value.transform }, [(x(!0), h(f, null, S(a.value, (e, t) => (x(), h("path", {
+			"aria-label": c.value ? void 0 : r.label
+		}, [y("g", { transform: o.value.transform }, [(T(!0), v(h, null, D(a.value, (e, t) => (T(), v("path", {
 			key: t,
 			d: e,
 			fill: s.value > 0 ? "currentColor" : "none",
 			"fill-opacity": s.value > 0 ? s.value : void 0
-		}, null, 8, D))), 128))], 8, E)], 8, T));
+		}, null, 8, N))), 128))], 8, M)], 8, j));
 	}
-}), k = ["disabled", "aria-label"], A = /* @__PURE__ */ v({
+}), F = ["disabled", "aria-label"], I = /* @__PURE__ */ x({
 	__name: "LvIconButton",
 	props: {
 		icon: {},
@@ -79,33 +79,33 @@ var T = [
 		}
 	},
 	setup(e) {
-		let t = e, n = p(() => s[t.context] ?? s.button), i = p(() => t.size ?? n.value.size), a = p(() => Math.max(t.hitArea ?? n.value.hitArea, 44)), o = p(() => t.optical ? d(i.value, n.value.strokeWidth) : n.value.strokeWidth);
-		return (t, n) => (x(), h("button", {
+		let t = e, n = g(() => i[t.context] ?? i.button), r = g(() => t.size ?? n.value.size), o = g(() => Math.max(t.hitArea ?? n.value.hitArea, 44)), s = g(() => t.optical ? a(r.value, n.value.strokeWidth) : n.value.strokeWidth);
+		return (t, n) => (T(), v("button", {
 			type: "button",
-			class: y(["lv-icon-button", { "is-disabled": e.disabled }]),
-			style: b({ "--lv-target": `${a.value}px` }),
+			class: S(["lv-icon-button", { "is-disabled": e.disabled }]),
+			style: C({ "--lv-target": `${o.value}px` }),
 			disabled: e.disabled,
 			"aria-label": e.label
-		}, [_(O, {
+		}, [b(P, {
 			name: e.icon,
-			size: i.value,
-			"stroke-width": o.value,
-			fill: w(r)(e.variant)
+			size: r.value,
+			"stroke-width": s.value,
+			fill: k(m)(e.variant)
 		}, null, 8, [
 			"name",
 			"size",
 			"stroke-width",
 			"fill"
-		])], 14, k));
+		])], 14, F));
 	}
-}), j = [
+}), L = [
 	"width",
 	"height",
 	"stroke-width",
 	"aria-hidden",
 	"role",
 	"aria-label"
-], M = /* @__PURE__ */ v({
+], R = /* @__PURE__ */ x({
 	__name: "LvJourneyStep",
 	props: {
 		state: { default: "pending" },
@@ -114,13 +114,13 @@ var T = [
 		label: {}
 	},
 	setup(e) {
-		let t = e, n = p(() => ({
-			"--lv-duration": c(u.state),
-			"--lv-ease": o.enter
-		})), r = p(() => t.label == null || t.label.length === 0);
-		return (t, i) => (x(), h("svg", {
-			class: y(["lv-icon lv-icon--step", `is-${e.state}`]),
-			style: b(n.value),
+		let t = e, n = g(() => ({
+			"--lv-duration": d(p.state),
+			"--lv-ease": l.enter
+		})), r = g(() => t.label == null || t.label.length === 0);
+		return (t, i) => (T(), v("svg", {
+			class: S(["lv-icon lv-icon--step", `is-${e.state}`]),
+			style: C(n.value),
 			xmlns: "http://www.w3.org/2000/svg",
 			width: e.size,
 			height: e.size,
@@ -134,13 +134,13 @@ var T = [
 			role: r.value ? void 0 : "img",
 			"aria-label": r.value ? void 0 : e.label
 		}, [...i[0] ||= [
-			g("circle", {
+			y("circle", {
 				class: "lv-icon__ring",
 				cx: "12",
 				cy: "12",
 				r: "8.5"
 			}, null, -1),
-			g("circle", {
+			y("circle", {
 				class: "lv-icon__dot",
 				cx: "12",
 				cy: "12",
@@ -148,17 +148,17 @@ var T = [
 				fill: "currentColor",
 				stroke: "none"
 			}, null, -1),
-			g("path", {
+			y("path", {
 				class: "lv-icon__tick",
 				d: "m8 12.25 2.5 2.5 5.5-5.75"
 			}, null, -1),
-			g("path", {
+			y("path", {
 				class: "lv-icon__dash",
 				d: "M8.5 12h7"
 			}, null, -1)
-		]], 14, j));
+		]], 14, L));
 	}
-}), N = { class: "lv-inspector" }, P = { class: "lv-inspector__states" }, F = { class: "lv-inspector__caption" }, I = { class: "lv-inspector__facts" }, L = /* @__PURE__ */ v({
+}), z = { class: "lv-inspector" }, B = { class: "lv-inspector__states" }, V = { class: "lv-inspector__caption" }, H = { class: "lv-inspector__facts" }, U = /* @__PURE__ */ x({
 	__name: "LvIconInspector",
 	props: {
 		name: {},
@@ -166,15 +166,15 @@ var T = [
 		strokeWidth: { default: 2 }
 	},
 	setup(t) {
-		let r = t, i = [
+		let n = t, r = [
 			"default",
 			"hover",
 			"active",
 			"disabled"
-		], o = p(() => [
+		], i = g(() => [
 			{
 				label: "Name",
-				value: r.name
+				value: n.name
 			},
 			{
 				label: "Grid",
@@ -182,51 +182,123 @@ var T = [
 			},
 			{
 				label: "Paths",
-				value: String(e[r.name]?.length ?? 0)
+				value: String(e[n.name]?.length ?? 0)
 			},
 			{
 				label: "Stroke",
-				value: `${r.strokeWidth}px`
+				value: `${n.strokeWidth}px`
 			},
 			{
 				label: "Optical stroke",
-				value: `${d(r.size, r.strokeWidth).toFixed(2)}px`
+				value: `${a(n.size, n.strokeWidth).toFixed(2)}px`
 			},
 			{
 				label: "Motion",
-				value: `${u.state * 1e3}ms state · ${u.morph * 1e3}ms morph`
+				value: `${p.state * 1e3}ms state · ${p.morph * 1e3}ms morph`
 			},
 			{
 				label: "Reduced motion",
-				value: a() ? "active — motion off" : "supported"
+				value: o() ? "active — motion off" : "supported"
 			}
 		]);
-		return (e, r) => (x(), h("div", N, [g("div", P, [(x(), h(f, null, S(i, (e) => g("div", {
+		return (e, n) => (T(), v("div", z, [y("div", B, [(T(), v(h, null, D(r, (e) => y("div", {
 			key: e,
 			class: "lv-inspector__state"
-		}, [g("div", {
+		}, [y("div", {
 			class: "lv-inspector__swatch",
-			style: b({ opacity: w(n)[e] })
-		}, [_(O, {
+			style: C({ opacity: k(c)[e] })
+		}, [b(P, {
 			name: t.name,
 			size: t.size,
 			"stroke-width": t.strokeWidth,
-			fill: w(l)[e]
+			fill: k(u)[e]
 		}, null, 8, [
 			"name",
 			"size",
 			"stroke-width",
 			"fill"
-		])], 4), g("span", F, C(e), 1)])), 64))]), g("dl", I, [(x(!0), h(f, null, S(o.value, (e) => (x(), h(f, { key: e.label }, [g("dt", null, C(e.label), 1), g("dd", null, C(e.value), 1)], 64))), 128))])]));
+		])], 4), y("span", V, O(e), 1)])), 64))]), y("dl", H, [(T(!0), v(h, null, D(i.value, (e) => (T(), v(h, { key: e.label }, [y("dt", null, O(e.label), 1), y("dd", null, O(e.value), 1)], 64))), 128))])]));
 	}
-}), R = [
+}), W = [
 	"width",
 	"height",
 	"stroke-width",
 	"aria-hidden",
 	"role",
 	"aria-label"
-], z = /* @__PURE__ */ v({
+], G = ["transform"], K = ["d"], q = /* @__PURE__ */ x({
+	__name: "LvMorphIcon",
+	props: {
+		name: {},
+		size: { default: 24 },
+		strokeWidth: { default: 2 },
+		absoluteStrokeWidth: {
+			type: Boolean,
+			default: !1
+		},
+		flip: {},
+		rotate: {},
+		label: {},
+		duration: { default: p.morph },
+		resolution: { default: 64 }
+	},
+	emits: ["morphed"],
+	setup(n, { emit: i }) {
+		let a = n, o = i, c = E(e[a.name] ?? []), l = g(() => t({
+			size: a.size,
+			strokeWidth: a.strokeWidth,
+			absoluteStrokeWidth: a.absoluteStrokeWidth,
+			rotate: a.rotate,
+			flip: a.flip
+		})), u = 0, d = null, p = () => {
+			u !== 0 && typeof cancelAnimationFrame == "function" && cancelAnimationFrame(u), u = 0;
+		}, m = (t) => {
+			c.value = e[t] ?? [], o("morphed", t);
+		};
+		A(() => a.name, (t, n) => {
+			p();
+			let i = e[t];
+			if (i === void 0) return;
+			let o = r(a.duration);
+			if (!f() || o <= 0 || n === void 0 || (d = s(e[n] ?? [], i, a.resolution), d === null)) return m(t);
+			let l = performance.now(), h = (e) => {
+				let n = Math.min(1, (e - l) / (o * 1e3));
+				if (c.value = d.at(n < .5 ? 4 * n * n * n : 1 - (-2 * n + 2) ** 3 / 2), n < 1) {
+					u = requestAnimationFrame(h);
+					return;
+				}
+				m(t);
+			};
+			u = requestAnimationFrame(h);
+		}), w(p);
+		let _ = g(() => a.label == null || a.label.length === 0);
+		return (e, t) => (T(), v("svg", {
+			class: "lv-icon lv-icon--morph",
+			xmlns: "http://www.w3.org/2000/svg",
+			width: l.value.size,
+			height: l.value.size,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			"stroke-width": l.value.strokeWidth,
+			"stroke-linecap": "round",
+			"stroke-linejoin": "round",
+			"aria-hidden": _.value ? "true" : void 0,
+			role: _.value ? void 0 : "img",
+			"aria-label": _.value ? void 0 : n.label
+		}, [y("g", { transform: l.value.transform }, [(T(!0), v(h, null, D(c.value, (e, t) => (T(), v("path", {
+			key: t,
+			d: e
+		}, null, 8, K))), 128))], 8, G)], 8, W));
+	}
+}), J = [
+	"width",
+	"height",
+	"stroke-width",
+	"aria-hidden",
+	"role",
+	"aria-label"
+], Y = /* @__PURE__ */ x({
 	__name: "LvMenuToClose",
 	props: {
 		open: {
@@ -240,20 +312,20 @@ var T = [
 			default: !1
 		},
 		label: {},
-		duration: { default: u.morph }
+		duration: { default: p.morph }
 	},
 	setup(e) {
-		let n = e, r = p(() => t({
+		let n = e, r = g(() => t({
 			size: n.size,
 			strokeWidth: n.strokeWidth,
 			absoluteStrokeWidth: n.absoluteStrokeWidth
-		})), i = p(() => ({
-			"--lv-duration": c(n.duration),
-			"--lv-ease": o.morph
-		})), a = p(() => n.label == null || n.label.length === 0);
-		return (t, n) => (x(), h("svg", {
-			class: y(["lv-icon lv-icon--menu", { "is-open": e.open }]),
-			style: b(i.value),
+		})), i = g(() => ({
+			"--lv-duration": d(n.duration),
+			"--lv-ease": l.morph
+		})), a = g(() => n.label == null || n.label.length === 0);
+		return (t, n) => (T(), v("svg", {
+			class: S(["lv-icon lv-icon--menu", { "is-open": e.open }]),
+			style: C(i.value),
 			xmlns: "http://www.w3.org/2000/svg",
 			width: r.value.size,
 			height: r.value.size,
@@ -266,37 +338,37 @@ var T = [
 			role: a.value ? void 0 : "img",
 			"aria-label": a.value ? void 0 : e.label
 		}, [...n[0] ||= [
-			g("line", {
+			y("line", {
 				class: "lv-icon__bar lv-icon__bar--top",
 				x1: "4",
 				y1: "7",
 				x2: "20",
 				y2: "7"
 			}, null, -1),
-			g("line", {
+			y("line", {
 				class: "lv-icon__bar lv-icon__bar--mid",
 				x1: "4",
 				y1: "12",
 				x2: "20",
 				y2: "12"
 			}, null, -1),
-			g("line", {
+			y("line", {
 				class: "lv-icon__bar lv-icon__bar--bottom",
 				x1: "4",
 				y1: "17",
 				x2: "20",
 				y2: "17"
 			}, null, -1)
-		]], 14, R));
+		]], 14, J));
 	}
-}), B = [
+}), X = [
 	"width",
 	"height",
 	"stroke-width",
 	"aria-hidden",
 	"role",
 	"aria-label"
-], V = /* @__PURE__ */ v({
+], Z = /* @__PURE__ */ x({
 	__name: "LvPlusToClose",
 	props: {
 		open: {
@@ -310,20 +382,20 @@ var T = [
 			default: !1
 		},
 		label: {},
-		duration: { default: u.morph }
+		duration: { default: p.morph }
 	},
 	setup(e) {
-		let n = e, r = p(() => t({
+		let n = e, r = g(() => t({
 			size: n.size,
 			strokeWidth: n.strokeWidth,
 			absoluteStrokeWidth: n.absoluteStrokeWidth
-		})), i = p(() => ({
-			"--lv-duration": c(n.duration),
-			"--lv-ease": o.morph
-		})), a = p(() => n.label == null || n.label.length === 0);
-		return (t, n) => (x(), h("svg", {
-			class: y(["lv-icon lv-icon--plus", { "is-open": e.open }]),
-			style: b(i.value),
+		})), i = g(() => ({
+			"--lv-duration": d(n.duration),
+			"--lv-ease": l.morph
+		})), a = g(() => n.label == null || n.label.length === 0);
+		return (t, n) => (T(), v("svg", {
+			class: S(["lv-icon lv-icon--plus", { "is-open": e.open }]),
+			style: C(i.value),
 			xmlns: "http://www.w3.org/2000/svg",
 			width: r.value.size,
 			height: r.value.size,
@@ -335,32 +407,32 @@ var T = [
 			"aria-hidden": a.value ? "true" : void 0,
 			role: a.value ? void 0 : "img",
 			"aria-label": a.value ? void 0 : e.label
-		}, [...n[0] ||= [g("g", { class: "lv-icon__cross" }, [g("line", {
+		}, [...n[0] ||= [y("g", { class: "lv-icon__cross" }, [y("line", {
 			x1: "12",
 			y1: "5",
 			x2: "12",
 			y2: "19"
-		}), g("line", {
+		}), y("line", {
 			x1: "5",
 			y1: "12",
 			x2: "19",
 			y2: "12"
-		})], -1)]], 14, B));
+		})], -1)]], 14, X));
 	}
-}), H = [
+}), Q = [
 	"width",
 	"height",
 	"stroke-width",
 	"aria-hidden",
 	"role",
 	"aria-label"
-], U = {
+], $ = {
 	key: 0,
 	class: "lv-icon__ring",
 	cx: "12",
 	cy: "12",
 	r: "9"
-}, W = ["d"], G = /* @__PURE__ */ v({
+}, ee = ["d"], te = /* @__PURE__ */ x({
 	__name: "LvCheckmark",
 	props: {
 		checked: {
@@ -378,20 +450,20 @@ var T = [
 			default: !1
 		},
 		label: {},
-		duration: { default: u.state }
+		duration: { default: p.state }
 	},
 	setup(e) {
-		let n = e, r = p(() => t({
+		let n = e, r = g(() => t({
 			size: n.size,
 			strokeWidth: n.strokeWidth,
 			absoluteStrokeWidth: n.absoluteStrokeWidth
-		})), i = p(() => ({
-			"--lv-duration": c(n.duration),
-			"--lv-ease": o.enter
-		})), a = p(() => n.label == null || n.label.length === 0);
-		return (t, n) => (x(), h("svg", {
-			class: y(["lv-icon lv-icon--check", { "is-checked": e.checked }]),
-			style: b(i.value),
+		})), i = g(() => ({
+			"--lv-duration": d(n.duration),
+			"--lv-ease": l.enter
+		})), a = g(() => n.label == null || n.label.length === 0);
+		return (t, n) => (T(), v("svg", {
+			class: S(["lv-icon lv-icon--check", { "is-checked": e.checked }]),
+			style: C(i.value),
 			xmlns: "http://www.w3.org/2000/svg",
 			width: r.value.size,
 			height: r.value.size,
@@ -404,17 +476,17 @@ var T = [
 			"aria-hidden": a.value ? "true" : void 0,
 			role: a.value ? void 0 : "img",
 			"aria-label": a.value ? void 0 : e.label
-		}, [e.circle ? (x(), h("circle", U)) : m("", !0), g("path", {
+		}, [e.circle ? (T(), v("circle", $)) : _("", !0), y("path", {
 			class: "lv-icon__tick",
 			d: e.circle ? "m8.25 12.25 2.5 2.5 5-5.5" : "m5 12.5 4.5 4.5L19 7.5"
-		}, null, 8, W)], 14, H));
+		}, null, 8, ee)], 14, Q));
 	}
-}), K = [
+}), ne = [
 	"width",
 	"height",
 	"stroke-width",
 	"aria-label"
-], q = /* @__PURE__ */ v({
+], re = /* @__PURE__ */ x({
 	__name: "LvLoading",
 	props: {
 		size: { default: 24 },
@@ -427,14 +499,14 @@ var T = [
 		label: { default: "Loading" }
 	},
 	setup(e) {
-		let n = e, r = p(() => t({
+		let n = e, r = g(() => t({
 			size: n.size,
 			strokeWidth: n.strokeWidth,
 			absoluteStrokeWidth: n.absoluteStrokeWidth
-		})), i = p(() => ({ "--lv-duration": c(n.duration) }));
-		return (t, n) => (x(), h("svg", {
+		})), i = g(() => ({ "--lv-duration": d(n.duration) }));
+		return (t, n) => (T(), v("svg", {
 			class: "lv-icon lv-icon--loading",
-			style: b(i.value),
+			style: C(i.value),
 			xmlns: "http://www.w3.org/2000/svg",
 			width: r.value.size,
 			height: r.value.size,
@@ -445,25 +517,25 @@ var T = [
 			"stroke-linecap": "round",
 			role: "status",
 			"aria-label": e.label
-		}, [...n[0] ||= [g("circle", {
+		}, [...n[0] ||= [y("circle", {
 			class: "lv-icon__track",
 			cx: "12",
 			cy: "12",
 			r: "9",
 			opacity: "0.22"
-		}, null, -1), g("path", {
+		}, null, -1), y("path", {
 			class: "lv-icon__arc",
 			d: "M21 12a9 9 0 0 0-9-9"
-		}, null, -1)]], 12, K));
+		}, null, -1)]], 12, ne));
 	}
-}), J = [
+}), ie = [
 	"width",
 	"height",
 	"stroke-width",
 	"aria-hidden",
 	"role",
 	"aria-label"
-], Y = /* @__PURE__ */ v({
+], ae = /* @__PURE__ */ x({
 	__name: "LvArrowMotion",
 	props: {
 		direction: { default: "right" },
@@ -475,10 +547,10 @@ var T = [
 			default: !1
 		},
 		label: {},
-		duration: { default: u.micro }
+		duration: { default: p.micro }
 	},
 	setup(e) {
-		let n = e, r = p(() => t({
+		let n = e, r = g(() => t({
 			size: n.size,
 			strokeWidth: n.strokeWidth,
 			absoluteStrokeWidth: n.absoluteStrokeWidth
@@ -487,15 +559,15 @@ var T = [
 			down: 90,
 			left: 180,
 			up: 270
-		}, a = p(() => ({
-			"--lv-duration": c(n.duration),
-			"--lv-ease": o.enter,
+		}, a = g(() => ({
+			"--lv-duration": d(n.duration),
+			"--lv-ease": l.enter,
 			"--lv-travel": `${n.travel}px`,
 			"--lv-rotate": `${i[n.direction]}deg`
-		})), s = p(() => n.label == null || n.label.length === 0);
-		return (t, n) => (x(), h("svg", {
+		})), o = g(() => n.label == null || n.label.length === 0);
+		return (t, n) => (T(), v("svg", {
 			class: "lv-icon lv-icon--arrow",
-			style: b(a.value),
+			style: C(a.value),
 			xmlns: "http://www.w3.org/2000/svg",
 			width: r.value.size,
 			height: r.value.size,
@@ -505,17 +577,17 @@ var T = [
 			"stroke-width": r.value.strokeWidth,
 			"stroke-linecap": "round",
 			"stroke-linejoin": "round",
-			"aria-hidden": s.value ? "true" : void 0,
-			role: s.value ? void 0 : "img",
-			"aria-label": s.value ? void 0 : e.label
-		}, [...n[0] ||= [g("g", { class: "lv-icon__arrow-inner" }, [g("path", {
+			"aria-hidden": o.value ? "true" : void 0,
+			role: o.value ? void 0 : "img",
+			"aria-label": o.value ? void 0 : e.label
+		}, [...n[0] ||= [y("g", { class: "lv-icon__arrow-inner" }, [y("path", {
 			class: "lv-icon__shaft",
 			d: "M4 12h15"
-		}), g("path", {
+		}), y("path", {
 			class: "lv-icon__head",
 			d: "m13 6 6 6-6 6"
-		})], -1)]], 12, J));
+		})], -1)]], 12, ie));
 	}
 });
 //#endregion
-export { Y as LvArrowMotion, G as LvCheckmark, O as LvIcon, A as LvIconButton, L as LvIconInspector, M as LvJourneyStep, q as LvLoading, z as LvMenuToClose, V as LvPlusToClose };
+export { ae as LvArrowMotion, te as LvCheckmark, P as LvIcon, I as LvIconButton, U as LvIconInspector, R as LvJourneyStep, re as LvLoading, Y as LvMenuToClose, q as LvMorphIcon, Z as LvPlusToClose };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lovince/icons",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A motion-aware icon system for Vue 3 \u2014 24x24 geometry, variable weight and fill, animated state transitions.",
   "type": "module",
   "license": "MIT",

package/dist/motion-72rOKpWt.js

@@ -1,85 +0,0 @@
-//#region src/core/props.ts
-var e = 24, t = 24, n = 2, r = (e, t) => {
-	if (typeof e == "number") return Number.isFinite(e) ? e : t;
-	if (typeof e == "string") {
-		let n = Number.parseFloat(e);
-		return Number.isFinite(n) ? n : t;
-	}
-	return t;
-}, i = (e, t, n) => {
-	let i = r(e, 2);
-	return !n || t <= 0 ? i : i * 24 / t;
-}, a = (e) => (r(e, 0) % 360 + 360) % 360, o = (e) => e === "horizontal" ? [-1, 1] : e === "vertical" ? [1, -1] : e === "both" ? [-1, -1] : [1, 1], s = (e, t) => {
-	let n = a(e), [r, i] = o(t);
-	if (n === 0 && r === 1 && i === 1) return;
-	let s = ["translate(12 12)"];
-	return n !== 0 && s.push(`rotate(${n})`), (r !== 1 || i !== 1) && s.push(`scale(${r} ${i})`), s.push("translate(-12 -12)"), s.join(" ");
-}, c = (e) => {
-	let t = r(e.size, 24);
-	return {
-		size: t,
-		strokeWidth: i(e.strokeWidth, t, e.absoluteStrokeWidth === !0),
-		transform: s(e.rotate, e.flip)
-	};
-}, l = (e) => {
-	if (e === !0) return 1;
-	if (e === void 0 || e === !1) return 0;
-	let t = r(e, 0);
-	return t < 0 ? 0 : t > 1 ? 1 : t;
-}, u = {
-	outline: 0,
-	duotone: .18,
-	filled: 1
-}, d = (e) => u[e ?? "outline"] ?? 0, f = {
-	inline: {
-		size: 16,
-		strokeWidth: 2,
-		hitArea: 0
-	},
-	toolbar: {
-		size: 20,
-		strokeWidth: 2,
-		hitArea: 44
-	},
-	button: {
-		size: 18,
-		strokeWidth: 2,
-		hitArea: 44
-	},
-	navigation: {
-		size: 22,
-		strokeWidth: 1.9,
-		hitArea: 48
-	},
-	status: {
-		size: 20,
-		strokeWidth: 2,
-		hitArea: 0
-	},
-	hero: {
-		size: 40,
-		strokeWidth: 1.6,
-		hitArea: 0
-	}
-}, p = (e) => e === void 0 ? null : f[e] ?? null, m = (e, t = 2) => e <= 16 ? t * .9 : e <= 20 ? t * .95 : e <= 28 ? t : e <= 40 ? t * .85 : t * .75, h = {
-	default: 0,
-	hover: .12,
-	active: 1,
-	selected: 1,
-	disabled: 0
-}, g = {
-	default: 1,
-	hover: 1,
-	active: 1,
-	selected: 1,
-	disabled: .38
-}, _ = {
-	micro: .18,
-	state: .28,
-	morph: .36
-}, v = {
-	enter: "cubic-bezier(0.33, 1, 0.68, 1)",
-	morph: "cubic-bezier(0.65, 0, 0.35, 1)"
-}, y = () => typeof window > "u" || typeof window.matchMedia != "function" ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches === !0, b = (e, t = y()) => t ? 0 : e, x = (e, t) => `${b(e, t)}s`;
-//#endregion
-export { c as _, b as a, g as c, p as d, d as f, l as g, n as h, y as i, u as l, t as m, v as n, f as o, e as p, x as r, h as s, _ as t, m as u, i as v, s as y };