@lovince/icons 1.0.0 → 1.1.1

package/dist/LvIconInspector.vue.d.ts

@@ -0,0 +1,12 @@
+import { IconName } from './paths';
+type __VLS_Props = {
+    name: IconName;
+    size?: number;
+    strokeWidth?: number;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: number;
+    strokeWidth: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/core/choreography.d.ts

@@ -0,0 +1,48 @@
+export interface Cue {
+    readonly name: string;
+    /** Seconds from the timeline start. */
+    readonly at: number;
+    readonly duration: number;
+    readonly run: (progress: number) => void;
+    readonly onComplete?: () => void;
+}
+export interface CueInput {
+    readonly name: string;
+    readonly duration?: number;
+    /** Seconds after the previous cue starts. Negative overlaps it. */
+    readonly offset?: number;
+    readonly run: (progress: number) => void;
+    readonly onComplete?: () => void;
+}
+export interface Timeline {
+    readonly add: (cue: CueInput) => Timeline;
+    readonly stagger: (cues: readonly CueInput[], gap?: number) => Timeline;
+    readonly cues: () => readonly Cue[];
+    readonly duration: () => number;
+    readonly play: () => Promise<void>;
+    readonly cancel: () => void;
+}
+/**
+ * A sequencer for interface motion.
+ *
+ * The problem it solves: a spotlight, a tooltip, an icon and a progress bar
+ * that each animate independently read as four things twitching. Sequenced,
+ * with deliberate overlap, they read as one movement. Cues are declared
+ * relative to the previous one, so inserting a step does not require
+ * re-timing everything after it.
+ *
+ * Framework-free and driven by `requestAnimationFrame`. Under reduced motion
+ * every cue fires once at its final value, so the end state is identical.
+ */
+export declare const createTimeline: () => Timeline;
+/**
+ * The default choreography for a journey step: the spotlight leads, the tooltip
+ * follows before it settles, then progress and the icon land together. The
+ * overlap is what makes it one movement instead of a queue.
+ */
+export declare const journeyChoreography: (handlers: {
+    spotlight: (p: number) => void;
+    tooltip: (p: number) => void;
+    progress?: (p: number) => void;
+    icon?: (p: number) => void;
+}) => Timeline;

package/dist/element.d.ts

@@ -1,8 +1,9 @@
-export declare class LvIconElement extends HTMLElement {
-    static get observedAttributes(): readonly string[];
-    connectedCallback(): void;
-    attributeChangedCallback(): void;
-    private render;
-}
-/** Idempotent, so calling it from several entry points is safe. */
+import { IconName } from './paths';
+import { RenderOptions } from './render';
+declare const normaliseName: (value: string | null) => IconName | null;
+/** Reads the element's attributes into render options. Exported for testing. */
+export declare const optionsFromAttributes: (get: (name: string) => string | null, has: (name: string) => boolean) => RenderOptions;
+export { normaliseName as resolveElementName };
+export type LvIconElement = HTMLElement;
+/** Idempotent and SSR-safe: a no-op anywhere without a DOM. */
 export declare const defineIconElement: (tag?: string) => void;

package/dist/index.d.ts

@@ -5,7 +5,8 @@
  */
 export { paths, iconNames, iconGroups, isIconName, type IconName } from './paths';
 export { renderIcon, createIcon, iconDataUri, type RenderOptions } from './render';
-export { LvIconElement, defineIconElement } from './element';
+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 { createTimeline, journeyChoreography, type Cue, type CueInput, type Timeline, } from './core/choreography';
 export { DURATION, EASE, cssDuration, prefersReducedMotion, resolveDuration, } from './core/motion';

package/dist/index.js

@@ -53,32 +53,107 @@ var C = "http://www.w3.org/2000/svg", w = (e) => e.replace(/&/g, "&").replac
 	if (e == null) return t;
 	let n = Number.parseFloat(e);
 	return Number.isFinite(n) ? n : t;
-}, N = class extends HTMLElement {
-	static get observedAttributes() {
-		return k;
-	}
-	connectedCallback() {
-		this.render();
-	}
-	attributeChangedCallback() {
-		this.isConnected && this.render();
-	}
-	render() {
-		let e = j(this.getAttribute("name"));
-		if (this.replaceChildren(), e === null) return;
-		let t = this.getAttribute("flip"), n = D(e, {
-			size: M(this.getAttribute("size"), 24),
-			strokeWidth: M(this.getAttribute("stroke-width"), 2),
-			absoluteStrokeWidth: this.hasAttribute("absolute-stroke-width"),
-			fill: M(this.getAttribute("fill"), 0),
-			rotate: M(this.getAttribute("rotate"), 0),
-			...t === "horizontal" || t === "vertical" || t === "both" ? { flip: t } : {},
-			...this.getAttribute("label") == null ? {} : { label: this.getAttribute("label") }
-		});
-		n !== null && this.appendChild(n);
-	}
+}, N = (e, t) => {
+	let n = e("flip"), r = e("label");
+	return {
+		size: M(e("size"), 24),
+		strokeWidth: M(e("stroke-width"), 2),
+		absoluteStrokeWidth: t("absolute-stroke-width"),
+		fill: M(e("fill"), 0),
+		rotate: M(e("rotate"), 0),
+		...n === "horizontal" || n === "vertical" || n === "both" ? { flip: n } : {},
+		...r == null ? {} : { label: r }
+	};
 }, P = (e = "lv-icon") => {
-	typeof window > "u" || typeof customElements > "u" || customElements.get(e) === void 0 && customElements.define(e, N);
+	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;
+		}
+		connectedCallback() {
+			this.render();
+		}
+		attributeChangedCallback() {
+			this.isConnected && this.render();
+		}
+		render() {
+			let e = j(this.getAttribute("name"));
+			if (this.replaceChildren(), e === null) return;
+			let t = D(e, N((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 = () => {
+	let e = [], t = 0, n = 0, r = !1, i = (n) => {
+		let r = n.duration ?? y.state, i = Math.max(0, t + (n.offset ?? 0));
+		e.push({
+			name: n.name,
+			at: i,
+			duration: r,
+			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) => {
+			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;
+		},
+		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") {
+				for (let t of e) t.run(1), t.onComplete?.();
+				return Promise.resolve();
+			}
+			return new Promise((i) => {
+				let a = performance.now(), o = /* @__PURE__ */ new Set(), s = (c) => {
+					if (r) return i();
+					let l = (c - a) / 1e3;
+					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?.());
+					}
+					if (l >= t) return i();
+					n = requestAnimationFrame(s);
+				};
+				n = requestAnimationFrame(s);
+			});
+		},
+		cancel: () => {
+			r = !0, n !== 0 && typeof cancelAnimationFrame == "function" && cancelAnimationFrame(n), n = 0;
+		}
+	};
+	return o;
+}, L = (e) => {
+	let t = I().add({
+		name: "spotlight",
+		duration: .72,
+		run: e.spotlight
+	}).add({
+		name: "tooltip",
+		duration: .44,
+		offset: -.46,
+		run: e.tooltip
+	}), n = [];
+	return e.progress && n.push({
+		name: "progress",
+		duration: .28,
+		run: e.progress
+	}), e.icon && n.push({
+		name: "icon",
+		duration: .28,
+		run: e.icon
+	}), 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, N as LvIconElement, v as STATE_FILL, o as STATE_OPACITY, f as VARIANT_FILL, D as createIcon, _ as cssDuration, P as defineIconElement, O as iconDataUri, e as iconGroups, t as iconNames, n as isIconName, b as opticalStroke, r as paths, d as prefersReducedMotion, E as renderIcon, s as resolveContext, a as resolveDuration, l as resolveFill, i as resolveGeometry, x as resolveStroke, S as resolveTransform, c as resolveVariantFill };
+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 };

package/dist/style.css

@@ -224,3 +224,62 @@
   transform: scaleX(1);
   opacity: 1;
 }
+
+/* ── Inspector ────────────────────────────────────────────────────────────
+   Development tooling. Deliberately unstyled by tokens so it looks like a tool
+   rather than part of the product it is inspecting. */
+
+.lv-inspector {
+  display: grid;
+  gap: 1rem;
+  padding: 1rem;
+  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
+  border-radius: 12px;
+  font-size: 0.8125rem;
+}
+
+.lv-inspector__states {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.lv-inspector__state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 4.5rem;
+}
+
+.lv-inspector__swatch {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  padding: 0.875rem 0;
+  border-radius: 8px;
+  background: color-mix(in srgb, currentColor 6%, transparent);
+}
+
+.lv-inspector__caption {
+  font-size: 0.6875rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  opacity: 0.6;
+}
+
+.lv-inspector__facts {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.375rem 1rem;
+  margin: 0;
+}
+
+.lv-inspector__facts dt {
+  opacity: 0.6;
+}
+
+.lv-inspector__facts dd {
+  margin: 0;
+  font-family: ui-monospace, monospace;
+}

package/dist/vue.d.ts

@@ -2,6 +2,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 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, f as n, g as r, n as i, o as a, r as o, t as s, u as c } from "./motion-72rOKpWt.js";
-import { Fragment as l, computed as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineComponent as h, normalizeClass as g, normalizeStyle as _, openBlock as v, renderList as y, unref as b } from "vue";
+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";
 //#region src/LvIcon.vue?vue&type=script&setup=true&lang.ts
-var x = [
+var T = [
 	"width",
 	"height",
 	"stroke-width",
 	"aria-hidden",
 	"role",
 	"aria-label"
-], S = ["transform"], C = [
+], E = ["transform"], D = [
 	"d",
 	"fill",
 	"fill-opacity"
-], w = /* @__PURE__ */ h({
+], O = /* @__PURE__ */ v({
 	__name: "LvIcon",
 	props: {
 		name: {},
@@ -32,14 +32,14 @@ var x = [
 		label: {}
 	},
 	setup(n) {
-		let i = n, a = u(() => e[i.name] ?? []), o = u(() => t({
-			size: i.size,
-			strokeWidth: i.strokeWidth,
-			absoluteStrokeWidth: i.absoluteStrokeWidth,
-			rotate: i.rotate,
-			flip: i.flip
-		})), s = u(() => r(i.fill)), c = u(() => i.label == null || i.label.length === 0);
-		return (e, t) => (v(), f("svg", {
+		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", {
 			class: "lv-icon",
 			xmlns: "http://www.w3.org/2000/svg",
 			width: o.value.size,
@@ -53,14 +53,14 @@ var x = [
 			"aria-hidden": c.value ? "true" : void 0,
 			role: c.value ? void 0 : "img",
 			"aria-label": c.value ? void 0 : n.label
-		}, [p("g", { transform: o.value.transform }, [(v(!0), f(l, null, y(a.value, (e, t) => (v(), f("path", {
+		}, [g("g", { transform: o.value.transform }, [(x(!0), h(f, null, S(a.value, (e, t) => (x(), h("path", {
 			key: t,
 			d: e,
 			fill: s.value > 0 ? "currentColor" : "none",
 			"fill-opacity": s.value > 0 ? s.value : void 0
-		}, null, 8, C))), 128))], 8, S)], 8, x));
+		}, null, 8, D))), 128))], 8, E)], 8, T));
 	}
-}), T = ["disabled", "aria-label"], E = /* @__PURE__ */ h({
+}), k = ["disabled", "aria-label"], A = /* @__PURE__ */ v({
 	__name: "LvIconButton",
 	props: {
 		icon: {},
@@ -79,33 +79,33 @@ var x = [
 		}
 	},
 	setup(e) {
-		let t = e, r = u(() => a[t.context] ?? a.button), i = u(() => t.size ?? r.value.size), o = u(() => Math.max(t.hitArea ?? r.value.hitArea, 44)), s = u(() => t.optical ? c(i.value, r.value.strokeWidth) : r.value.strokeWidth);
-		return (t, r) => (v(), f("button", {
+		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", {
 			type: "button",
-			class: g(["lv-icon-button", { "is-disabled": e.disabled }]),
-			style: _({ "--lv-target": `${o.value}px` }),
+			class: y(["lv-icon-button", { "is-disabled": e.disabled }]),
+			style: b({ "--lv-target": `${a.value}px` }),
 			disabled: e.disabled,
 			"aria-label": e.label
-		}, [m(w, {
+		}, [_(O, {
 			name: e.icon,
 			size: i.value,
-			"stroke-width": s.value,
-			fill: b(n)(e.variant)
+			"stroke-width": o.value,
+			fill: w(r)(e.variant)
 		}, null, 8, [
 			"name",
 			"size",
 			"stroke-width",
 			"fill"
-		])], 14, T));
+		])], 14, k));
 	}
-}), D = [
+}), j = [
 	"width",
 	"height",
 	"stroke-width",
 	"aria-hidden",
 	"role",
 	"aria-label"
-], O = /* @__PURE__ */ h({
+], M = /* @__PURE__ */ v({
 	__name: "LvJourneyStep",
 	props: {
 		state: { default: "pending" },
@@ -114,13 +114,13 @@ var x = [
 		label: {}
 	},
 	setup(e) {
-		let t = e, n = u(() => ({
-			"--lv-duration": o(s.state),
-			"--lv-ease": i.enter
-		})), r = u(() => t.label == null || t.label.length === 0);
-		return (t, i) => (v(), f("svg", {
-			class: g(["lv-icon lv-icon--step", `is-${e.state}`]),
-			style: _(n.value),
+		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),
 			xmlns: "http://www.w3.org/2000/svg",
 			width: e.size,
 			height: e.size,
@@ -134,13 +134,13 @@ var x = [
 			role: r.value ? void 0 : "img",
 			"aria-label": r.value ? void 0 : e.label
 		}, [...i[0] ||= [
-			p("circle", {
+			g("circle", {
 				class: "lv-icon__ring",
 				cx: "12",
 				cy: "12",
 				r: "8.5"
 			}, null, -1),
-			p("circle", {
+			g("circle", {
 				class: "lv-icon__dot",
 				cx: "12",
 				cy: "12",
@@ -148,24 +148,85 @@ var x = [
 				fill: "currentColor",
 				stroke: "none"
 			}, null, -1),
-			p("path", {
+			g("path", {
 				class: "lv-icon__tick",
 				d: "m8 12.25 2.5 2.5 5.5-5.75"
 			}, null, -1),
-			p("path", {
+			g("path", {
 				class: "lv-icon__dash",
 				d: "M8.5 12h7"
 			}, null, -1)
-		]], 14, D));
+		]], 14, j));
 	}
-}), k = [
+}), N = { class: "lv-inspector" }, P = { class: "lv-inspector__states" }, F = { class: "lv-inspector__caption" }, I = { class: "lv-inspector__facts" }, L = /* @__PURE__ */ v({
+	__name: "LvIconInspector",
+	props: {
+		name: {},
+		size: { default: 32 },
+		strokeWidth: { default: 2 }
+	},
+	setup(t) {
+		let r = t, i = [
+			"default",
+			"hover",
+			"active",
+			"disabled"
+		], o = p(() => [
+			{
+				label: "Name",
+				value: r.name
+			},
+			{
+				label: "Grid",
+				value: "24 × 24"
+			},
+			{
+				label: "Paths",
+				value: String(e[r.name]?.length ?? 0)
+			},
+			{
+				label: "Stroke",
+				value: `${r.strokeWidth}px`
+			},
+			{
+				label: "Optical stroke",
+				value: `${d(r.size, r.strokeWidth).toFixed(2)}px`
+			},
+			{
+				label: "Motion",
+				value: `${u.state * 1e3}ms state · ${u.morph * 1e3}ms morph`
+			},
+			{
+				label: "Reduced motion",
+				value: a() ? "active — motion off" : "supported"
+			}
+		]);
+		return (e, r) => (x(), h("div", N, [g("div", P, [(x(), h(f, null, S(i, (e) => g("div", {
+			key: e,
+			class: "lv-inspector__state"
+		}, [g("div", {
+			class: "lv-inspector__swatch",
+			style: b({ opacity: w(n)[e] })
+		}, [_(O, {
+			name: t.name,
+			size: t.size,
+			"stroke-width": t.strokeWidth,
+			fill: w(l)[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))])]));
+	}
+}), R = [
 	"width",
 	"height",
 	"stroke-width",
 	"aria-hidden",
 	"role",
 	"aria-label"
-], A = /* @__PURE__ */ h({
+], z = /* @__PURE__ */ v({
 	__name: "LvMenuToClose",
 	props: {
 		open: {
@@ -179,20 +240,20 @@ var x = [
 			default: !1
 		},
 		label: {},
-		duration: { default: s.morph }
+		duration: { default: u.morph }
 	},
 	setup(e) {
-		let n = e, r = u(() => t({
+		let n = e, r = p(() => t({
 			size: n.size,
 			strokeWidth: n.strokeWidth,
 			absoluteStrokeWidth: n.absoluteStrokeWidth
-		})), a = u(() => ({
-			"--lv-duration": o(n.duration),
-			"--lv-ease": i.morph
-		})), s = u(() => n.label == null || n.label.length === 0);
-		return (t, n) => (v(), f("svg", {
-			class: g(["lv-icon lv-icon--menu", { "is-open": e.open }]),
-			style: _(a.value),
+		})), 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),
 			xmlns: "http://www.w3.org/2000/svg",
 			width: r.value.size,
 			height: r.value.size,
@@ -201,41 +262,41 @@ var x = [
 			stroke: "currentColor",
 			"stroke-width": r.value.strokeWidth,
 			"stroke-linecap": "round",
-			"aria-hidden": s.value ? "true" : void 0,
-			role: s.value ? void 0 : "img",
-			"aria-label": s.value ? void 0 : e.label
+			"aria-hidden": a.value ? "true" : void 0,
+			role: a.value ? void 0 : "img",
+			"aria-label": a.value ? void 0 : e.label
 		}, [...n[0] ||= [
-			p("line", {
+			g("line", {
 				class: "lv-icon__bar lv-icon__bar--top",
 				x1: "4",
 				y1: "7",
 				x2: "20",
 				y2: "7"
 			}, null, -1),
-			p("line", {
+			g("line", {
 				class: "lv-icon__bar lv-icon__bar--mid",
 				x1: "4",
 				y1: "12",
 				x2: "20",
 				y2: "12"
 			}, null, -1),
-			p("line", {
+			g("line", {
 				class: "lv-icon__bar lv-icon__bar--bottom",
 				x1: "4",
 				y1: "17",
 				x2: "20",
 				y2: "17"
 			}, null, -1)
-		]], 14, k));
+		]], 14, R));
 	}
-}), j = [
+}), B = [
 	"width",
 	"height",
 	"stroke-width",
 	"aria-hidden",
 	"role",
 	"aria-label"
-], M = /* @__PURE__ */ h({
+], V = /* @__PURE__ */ v({
 	__name: "LvPlusToClose",
 	props: {
 		open: {
@@ -249,20 +310,20 @@ var x = [
 			default: !1
 		},
 		label: {},
-		duration: { default: s.morph }
+		duration: { default: u.morph }
 	},
 	setup(e) {
-		let n = e, r = u(() => t({
+		let n = e, r = p(() => t({
 			size: n.size,
 			strokeWidth: n.strokeWidth,
 			absoluteStrokeWidth: n.absoluteStrokeWidth
-		})), a = u(() => ({
-			"--lv-duration": o(n.duration),
-			"--lv-ease": i.morph
-		})), s = u(() => n.label == null || n.label.length === 0);
-		return (t, n) => (v(), f("svg", {
-			class: g(["lv-icon lv-icon--plus", { "is-open": e.open }]),
-			style: _(a.value),
+		})), 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),
 			xmlns: "http://www.w3.org/2000/svg",
 			width: r.value.size,
 			height: r.value.size,
@@ -271,35 +332,35 @@ var x = [
 			stroke: "currentColor",
 			"stroke-width": r.value.strokeWidth,
 			"stroke-linecap": "round",
-			"aria-hidden": s.value ? "true" : void 0,
-			role: s.value ? void 0 : "img",
-			"aria-label": s.value ? void 0 : e.label
-		}, [...n[0] ||= [p("g", { class: "lv-icon__cross" }, [p("line", {
+			"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", {
 			x1: "12",
 			y1: "5",
 			x2: "12",
 			y2: "19"
-		}), p("line", {
+		}), g("line", {
 			x1: "5",
 			y1: "12",
 			x2: "19",
 			y2: "12"
-		})], -1)]], 14, j));
+		})], -1)]], 14, B));
 	}
-}), N = [
+}), H = [
 	"width",
 	"height",
 	"stroke-width",
 	"aria-hidden",
 	"role",
 	"aria-label"
-], P = {
+], U = {
 	key: 0,
 	class: "lv-icon__ring",
 	cx: "12",
 	cy: "12",
 	r: "9"
-}, F = ["d"], I = /* @__PURE__ */ h({
+}, W = ["d"], G = /* @__PURE__ */ v({
 	__name: "LvCheckmark",
 	props: {
 		checked: {
@@ -317,20 +378,20 @@ var x = [
 			default: !1
 		},
 		label: {},
-		duration: { default: s.state }
+		duration: { default: u.state }
 	},
 	setup(e) {
-		let n = e, r = u(() => t({
+		let n = e, r = p(() => t({
 			size: n.size,
 			strokeWidth: n.strokeWidth,
 			absoluteStrokeWidth: n.absoluteStrokeWidth
-		})), a = u(() => ({
-			"--lv-duration": o(n.duration),
-			"--lv-ease": i.enter
-		})), s = u(() => n.label == null || n.label.length === 0);
-		return (t, n) => (v(), f("svg", {
-			class: g(["lv-icon lv-icon--check", { "is-checked": e.checked }]),
-			style: _(a.value),
+		})), 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),
 			xmlns: "http://www.w3.org/2000/svg",
 			width: r.value.size,
 			height: r.value.size,
@@ -340,20 +401,20 @@ var x = [
 			"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
-		}, [e.circle ? (v(), f("circle", P)) : d("", !0), p("path", {
+			"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", {
 			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, F)], 14, N));
+		}, null, 8, W)], 14, H));
 	}
-}), L = [
+}), K = [
 	"width",
 	"height",
 	"stroke-width",
 	"aria-label"
-], R = /* @__PURE__ */ h({
+], q = /* @__PURE__ */ v({
 	__name: "LvLoading",
 	props: {
 		size: { default: 24 },
@@ -366,14 +427,14 @@ var x = [
 		label: { default: "Loading" }
 	},
 	setup(e) {
-		let n = e, r = u(() => t({
+		let n = e, r = p(() => t({
 			size: n.size,
 			strokeWidth: n.strokeWidth,
 			absoluteStrokeWidth: n.absoluteStrokeWidth
-		})), i = u(() => ({ "--lv-duration": o(n.duration) }));
-		return (t, n) => (v(), f("svg", {
+		})), i = p(() => ({ "--lv-duration": c(n.duration) }));
+		return (t, n) => (x(), h("svg", {
 			class: "lv-icon lv-icon--loading",
-			style: _(i.value),
+			style: b(i.value),
 			xmlns: "http://www.w3.org/2000/svg",
 			width: r.value.size,
 			height: r.value.size,
@@ -384,25 +445,25 @@ var x = [
 			"stroke-linecap": "round",
 			role: "status",
 			"aria-label": e.label
-		}, [...n[0] ||= [p("circle", {
+		}, [...n[0] ||= [g("circle", {
 			class: "lv-icon__track",
 			cx: "12",
 			cy: "12",
 			r: "9",
 			opacity: "0.22"
-		}, null, -1), p("path", {
+		}, null, -1), g("path", {
 			class: "lv-icon__arc",
 			d: "M21 12a9 9 0 0 0-9-9"
-		}, null, -1)]], 12, L));
+		}, null, -1)]], 12, K));
 	}
-}), z = [
+}), J = [
 	"width",
 	"height",
 	"stroke-width",
 	"aria-hidden",
 	"role",
 	"aria-label"
-], B = /* @__PURE__ */ h({
+], Y = /* @__PURE__ */ v({
 	__name: "LvArrowMotion",
 	props: {
 		direction: { default: "right" },
@@ -414,27 +475,27 @@ var x = [
 			default: !1
 		},
 		label: {},
-		duration: { default: s.micro }
+		duration: { default: u.micro }
 	},
 	setup(e) {
-		let n = e, r = u(() => t({
+		let n = e, r = p(() => t({
 			size: n.size,
 			strokeWidth: n.strokeWidth,
 			absoluteStrokeWidth: n.absoluteStrokeWidth
-		})), a = {
+		})), i = {
 			right: 0,
 			down: 90,
 			left: 180,
 			up: 270
-		}, s = u(() => ({
-			"--lv-duration": o(n.duration),
-			"--lv-ease": i.enter,
+		}, a = p(() => ({
+			"--lv-duration": c(n.duration),
+			"--lv-ease": o.enter,
 			"--lv-travel": `${n.travel}px`,
-			"--lv-rotate": `${a[n.direction]}deg`
-		})), c = u(() => n.label == null || n.label.length === 0);
-		return (t, n) => (v(), f("svg", {
+			"--lv-rotate": `${i[n.direction]}deg`
+		})), s = p(() => n.label == null || n.label.length === 0);
+		return (t, n) => (x(), h("svg", {
 			class: "lv-icon lv-icon--arrow",
-			style: _(s.value),
+			style: b(a.value),
 			xmlns: "http://www.w3.org/2000/svg",
 			width: r.value.size,
 			height: r.value.size,
@@ -444,17 +505,17 @@ var x = [
 			"stroke-width": r.value.strokeWidth,
 			"stroke-linecap": "round",
 			"stroke-linejoin": "round",
-			"aria-hidden": c.value ? "true" : void 0,
-			role: c.value ? void 0 : "img",
-			"aria-label": c.value ? void 0 : e.label
-		}, [...n[0] ||= [p("g", { class: "lv-icon__arrow-inner" }, [p("path", {
+			"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", {
 			class: "lv-icon__shaft",
 			d: "M4 12h15"
-		}), p("path", {
+		}), g("path", {
 			class: "lv-icon__head",
 			d: "m13 6 6 6-6 6"
-		})], -1)]], 12, z));
+		})], -1)]], 12, J));
 	}
 });
 //#endregion
-export { B as LvArrowMotion, I as LvCheckmark, w as LvIcon, E as LvIconButton, O as LvJourneyStep, R as LvLoading, A as LvMenuToClose, M as LvPlusToClose };
+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 };

package/package.json

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