@harmonics/lattice-ui 0.7.0 → 0.8.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 `@harmonics/lattice-ui` follows semantic versioning; while it is `0.x`, a minor version may change
 an element's inputs, events or tokens, and says so here.
 
+## 0.8.1
+
+- Published by the repository's own workflow on merge (npm trusted publishing), the first
+  release so made. No change to the package.
+
+## 0.8.0
+
+- `<lattice-icon>` draws three more marks: `name` (a pencil), `split` (the Sierpinski step) and
+  `search` (a hexagon lens). Every line upright or at 30°, as the others. Additive: nothing in
+  0.7.0 changes.
+
 ## 0.7.0
 
 - `<lattice-shape pressable>`: a button shaped like itself, in the tab order, named by its

package/README.md

@@ -152,8 +152,12 @@ at 30°.
 | `glue` | two cells sharing a heavy side (G) | `glue-cell`, `glue-seam` |
 | `apart` | two cells with a gap (Shift+G) | `apart-cell` |
 | `bin` | a cup under a diamond lid (Delete) | `bin-can`, `bin-rib`, `bin-lid` |
+| `name` | a pencil rising at 30°, a triangle for its point | `name-body`, `name-point`, `name-band` |
+| `split` | a triangle with its middle turned over, the Sierpinski step | `split-whole`, `split-hole` |
+| `search` | a hexagon lens, a strip for its handle | `search-lens`, `search-handle` |
 
-The last four are `<lattice-board>`'s keyboard actions, for a page that gives each a button.
+`turn`, `glue`, `apart` and `bin` are `<lattice-board>`'s keyboard actions, for a page that gives
+each a button; `name`, `split` and `bin` are the Harmonics grid's own controls.
 
 ## Board
 

package/dist/define.js

@@ -1,4 +1,4 @@
-import { t as e } from "./elements-DdyLdkzr.js";
+import { t as e } from "./elements-Bk_vtqsk.js";
 //#region src/elements/define.ts
 e();
 //#endregion

package/dist/{elements-DdyLdkzr.js → elements-Bk_vtqsk.js}

@@ -850,91 +850,165 @@ var je = ".face .plate-top{fill:var(--color-tree-raised);stroke:color-mix(in srg
 }, Je = (e, t) => {
 	let n = e * Z / 2;
 	return [Q(8 - n - t / 2, 8, e), Q(8 + n + t / 2, 8, e)];
-}, Ye = {
+}, Ye = () => {
+	let e = 4.2, [t, n] = Je(e, 0);
+	return [
+		{
+			part: "glue-cell",
+			look: "line",
+			d: h(t)
+		},
+		{
+			part: "glue-cell",
+			look: "line",
+			d: h(n)
+		},
+		{
+			part: "glue-seam",
+			look: "heavy",
+			d: $([{
+				x: 8,
+				y: 8 - e / 2
+			}, {
+				x: 8,
+				y: 10.1
+			}])
+		}
+	];
+}, Xe = () => {
+	let [e, t] = Je(3.7, 2);
+	return [{
+		part: "apart-cell",
+		look: "line",
+		d: h(e)
+	}, {
+		part: "apart-cell",
+		look: "line",
+		d: h(t)
+	}];
+}, Ze = () => {
+	let [, e, t, n, r, i] = Q(8, 9.4, 5.2), a = (e) => $([{
+		x: e,
+		y: 8.6
+	}, {
+		x: e,
+		y: 12.2
+	}]);
+	return [
+		{
+			part: "bin-can",
+			look: "line",
+			d: $([
+				i,
+				r,
+				n,
+				t,
+				e
+			])
+		},
+		{
+			part: "bin-rib",
+			look: "line",
+			d: `${a(6.5)} ${a(9.5)}`
+		},
+		{
+			part: "bin-lid",
+			look: "line",
+			d: h(Ue(8, 3.9, 5))
+		}
+	];
+}, Qe = (e, t, n, r, i) => {
+	let a = (n - e) / Z * (i ? -1 : 1);
+	return [
+		{
+			x: e,
+			y: t
+		},
+		{
+			x: n,
+			y: t + a
+		},
+		{
+			x: n,
+			y: t + a + r
+		},
+		{
+			x: e,
+			y: t + r
+		}
+	];
+}, $e = {
 	shears: We,
 	done: Ge,
 	note: Ke,
 	turn: qe,
-	glue: () => {
-		let e = 4.2, [t, n] = Je(e, 0);
+	glue: Ye,
+	apart: Xe,
+	bin: Ze,
+	name: () => {
+		let e = 3.6, t = Qe(5, 9.9, 14.4, e, !0), n = 9.9 - 7 / Z;
 		return [
 			{
-				part: "glue-cell",
+				part: "name-body",
 				look: "line",
 				d: h(t)
 			},
 			{
-				part: "glue-cell",
-				look: "line",
-				d: h(n)
+				part: "name-point",
+				look: "fill",
+				d: h(He(5, 11.700000000000001, e, -1))
 			},
 			{
-				part: "glue-seam",
-				look: "heavy",
+				part: "name-band",
+				look: "line",
 				d: $([{
-					x: 8,
-					y: 8 - e / 2
+					x: 12,
+					y: n
 				}, {
-					x: 8,
-					y: 10.1
+					x: 12,
+					y: n + e
 				}])
 			}
 		];
 	},
-	apart: () => {
-		let [e, t] = Je(3.7, 2);
+	split: () => {
+		let e = He(3, 8, 13, 1), [t, n, r] = e, i = (e, t) => ({
+			x: (e.x + t.x) / 2,
+			y: (e.y + t.y) / 2
+		});
 		return [{
-			part: "apart-cell",
+			part: "split-whole",
 			look: "line",
 			d: h(e)
 		}, {
-			part: "apart-cell",
+			part: "split-hole",
 			look: "line",
-			d: h(t)
+			d: h([
+				i(t, r),
+				i(t, n),
+				i(n, r)
+			])
 		}];
 	},
-	bin: () => {
-		let [, e, t, n, r, i] = Q(8, 9.4, 5.2), a = (e) => $([{
-			x: e,
-			y: 8.6
-		}, {
-			x: e,
-			y: 12.2
-		}]);
-		return [
-			{
-				part: "bin-can",
-				look: "line",
-				d: $([
-					i,
-					r,
-					n,
-					t,
-					e
-				])
-			},
-			{
-				part: "bin-rib",
-				look: "line",
-				d: `${a(6.5)} ${a(9.5)}`
-			},
-			{
-				part: "bin-lid",
-				look: "line",
-				d: h(Ue(8, 3.9, 5))
-			}
-		];
-	}
-}, Xe = /*#__PURE__*/ u("<svg viewBox=\"0 0 16 16\"aria-hidden=true>"), Ze = /*#__PURE__*/ u("<svg><path></svg>", !1, !0, !1);
-function Qe(e) {
+	search: () => [{
+		part: "search-lens",
+		look: "line",
+		d: h(Q(6.4, 6.4, 4.6))
+	}, {
+		part: "search-handle",
+		look: "fill",
+		d: h(Qe(11.2, 8.07, 15.2, 2.2, !1))
+	}]
+}, et = /*#__PURE__*/ u("<svg viewBox=\"0 0 16 16\"aria-hidden=true>"), tt = /*#__PURE__*/ u("<svg><path></svg>", !1, !0, !1);
+function nt(e) {
 	return (() => {
-		var t = Xe();
+		var t = et();
 		return c(t, s(o, {
 			get each() {
-				return Ye[e.name]();
+				return $e[e.name]();
 			},
 			children: (e) => (() => {
-				var t = Ze();
+				var t = tt();
 				return a((n) => {
 					var r = `${e.part} ${e.look}`, i = e.part, a = e.d;
 					return r !== n.e && w(t, "class", n.e = r), i !== n.t && w(t, "part", n.t = i), a !== n.a && w(t, "d", n.a = a), n;
@@ -949,15 +1023,18 @@ function Qe(e) {
 }
 //#endregion
 //#region src/elements/icon.css?inline
-var $e = ":host{width:var(--lattice-icon-size,var(--space-tree-4));height:var(--lattice-icon-size,var(--space-tree-4))}span{width:100%;height:100%;display:block}svg{width:100%;height:100%}.mark{fill:none;stroke:currentColor;stroke-width:1.3px;stroke-linejoin:miter}.mark .fill{fill:currentColor}.mark .heavy{stroke-width:1.6px}", et = /*#__PURE__*/ u("<span part=icon>"), tt = /*#__PURE__*/ u("<span part=icon role=img>"), nt = "lattice-icon", rt = [
+var rt = ":host{width:var(--lattice-icon-size,var(--space-tree-4));height:var(--lattice-icon-size,var(--space-tree-4))}span{width:100%;height:100%;display:block}svg{width:100%;height:100%}.mark{fill:none;stroke:currentColor;stroke-width:1.3px;stroke-linejoin:miter}.mark .fill{fill:currentColor}.mark .heavy{stroke-width:1.6px}", it = /*#__PURE__*/ u("<span part=icon>"), at = /*#__PURE__*/ u("<span part=icon role=img>"), ot = "lattice-icon", st = [
 	"shears",
 	"done",
 	"note",
 	"turn",
 	"glue",
 	"apart",
-	"bin"
-], it = (e) => Object.hasOwn(Ye, e), at = S($e), ot = class e extends v {
+	"bin",
+	"name",
+	"split",
+	"search"
+], ct = (e) => Object.hasOwn($e, e), lt = S(rt), ut = class e extends v {
 	static observedAttributes = ["name", "label"];
 	inputs = e.observedAttributes;
 	nameSignal = _("shears");
@@ -967,7 +1044,7 @@ var $e = ":host{width:var(--lattice-icon-size,var(--space-tree-4));height:var(--
 	}
 	set name(e) {
 		let t = String(e ?? "").toLowerCase();
-		this.nameSignal[1](it(t) ? t : "shears");
+		this.nameSignal[1](ct(t) ? t : "shears");
 	}
 	get label() {
 		return this.labelSignal[0]();
@@ -979,12 +1056,12 @@ var $e = ":host{width:var(--lattice-icon-size,var(--space-tree-4));height:var(--
 		Reflect.set(this, e, n ?? "");
 	}
 	sheet() {
-		return at();
+		return lt();
 	}
 	draw() {
 		let e = () => {
 			let e = this;
-			return s(Qe, { get name() {
+			return s(nt, { get name() {
 				return e.name;
 			} });
 		}, t = this;
@@ -994,17 +1071,17 @@ var $e = ":host{width:var(--lattice-icon-size,var(--space-tree-4));height:var(--
 			},
 			get fallback() {
 				return (() => {
-					var t = et();
+					var t = it();
 					return c(t, e), t;
 				})();
 			},
 			children: (t) => (() => {
-				var n = tt();
+				var n = at();
 				return c(n, e), a(() => w(n, "aria-label", t())), n;
 			})()
 		});
 	}
-}, st = (e) => C(nt, ot, e), ct = /*#__PURE__*/ u("<svg class=\"shape woods\"part=shape><g class=faces></g><path class=seams></path><g class=ring part=ring>"), lt = /*#__PURE__*/ u("<svg><path></svg>", !1, !0, !1), ut = /*#__PURE__*/ u("<svg><line></svg>", !1, !0, !1), dt = "lattice-shape", ft = (e) => Object.hasOwn(b, e), pt = S(`${te}\n${d}`), mt = 4, ht = !1, gt = class e extends v {
+}, dt = (e) => C(ot, ut, e), ft = /*#__PURE__*/ u("<svg class=\"shape woods\"part=shape><g class=faces></g><path class=seams></path><g class=ring part=ring>"), pt = /*#__PURE__*/ u("<svg><path></svg>", !1, !0, !1), mt = /*#__PURE__*/ u("<svg><line></svg>", !1, !0, !1), ht = "lattice-shape", gt = (e) => Object.hasOwn(b, e), _t = S(`${te}\n${d}`), vt = 4, yt = !1, bt = class e extends v {
 	static observedAttributes = [
 		"shape",
 		"parts",
@@ -1031,7 +1108,7 @@ var $e = ":host{width:var(--lattice-icon-size,var(--space-tree-4));height:var(--
 	}
 	set shape(e) {
 		let t = String(e ?? "").toLowerCase();
-		this.shapeSignal[1](ft(t) ? t : "cell");
+		this.shapeSignal[1](gt(t) ? t : "cell");
 	}
 	made;
 	get parts() {
@@ -1100,7 +1177,7 @@ var $e = ":host{width:var(--lattice-icon-size,var(--space-tree-4));height:var(--
 		e === "parts" ? this.parts = n : e === "pressable" || e === "pressed" || e === "disabled" ? Reflect.set(this, e, n) : Reflect.set(this, e, n ?? "");
 	}
 	sheet() {
-		return pt();
+		return _t();
 	}
 	beAButton() {
 		let e = !1;
@@ -1108,7 +1185,7 @@ var $e = ":host{width:var(--lattice-icon-size,var(--space-tree-4));height:var(--
 			let t = this.pressable, n = this.disabled, r = this.pressedSignal[0](), i = (e, t) => {
 				t === void 0 ? this.removeAttribute(e) : this.getAttribute(e) !== t && this.setAttribute(e, t);
 			};
-			i("role", t ? "button" : void 0), i("aria-label", t && this.label ? this.label : void 0), i("aria-pressed", t && r !== void 0 ? String(r) : void 0), i("aria-disabled", t && n ? "true" : void 0), t && !n && !this.hasAttribute("tabindex") ? (this.setAttribute("tabindex", "0"), e = !0) : (!t || n) && e && (this.removeAttribute("tabindex"), e = !1), t && !this.label && !ht && (ht = !0, console.warn("<lattice-shape pressable> has no label: give it one, so it can be named"));
+			i("role", t ? "button" : void 0), i("aria-label", t && this.label ? this.label : void 0), i("aria-pressed", t && r !== void 0 ? String(r) : void 0), i("aria-disabled", t && n ? "true" : void 0), t && !n && !this.hasAttribute("tabindex") ? (this.setAttribute("tabindex", "0"), e = !0) : (!t || n) && e && (this.removeAttribute("tabindex"), e = !1), t && !this.label && !yt && (yt = !0, console.warn("<lattice-shape pressable> has no label: give it one, so it can be named"));
 		});
 	}
 	draw() {
@@ -1136,15 +1213,15 @@ var $e = ":host{width:var(--lattice-icon-size,var(--space-tree-4));height:var(--
 		g(() => {
 			for (let [e, t] of p) this.removeEventListener(e, t);
 		});
-		let h = () => this.pressable ? i() || this.pressed ? this.lift / 2 : e() && !this.disabled ? this.lift + mt : this.lift : this.lift, v = n(() => l(this.parts, h())), y = n(() => l(this.parts, this.pressable ? this.lift + mt : this.lift).box), b = n(() => ae(ie("shape", this.parts))), x = () => !this.pressable && this.label !== "", S = this;
+		let h = () => this.pressable ? i() || this.pressed ? this.lift / 2 : e() && !this.disabled ? this.lift + vt : this.lift : this.lift, v = n(() => l(this.parts, h())), y = n(() => l(this.parts, this.pressable ? this.lift + vt : this.lift).box), b = n(() => ae(ie("shape", this.parts))), x = () => !this.pressable && this.label !== "", S = this;
 		return (() => {
-			var e = ct(), n = e.firstChild, i = n.nextSibling, l = i.nextSibling;
+			var e = ft(), n = e.firstChild, i = n.nextSibling, l = i.nextSibling;
 			return m(n, "pointerleave", () => r(!1)), m(n, "pointerenter", () => r(!0)), c(n, s(t, {
 				get each() {
 					return v().faces;
 				},
 				children: (e) => (() => {
-					var t = lt();
+					var t = pt();
 					return a((n) => {
 						var r = `flat-${e().kind}`, i = e().tone, a = e().d;
 						return r !== n.e && w(t, "class", n.e = r), i !== n.t && w(t, "data-tone", n.t = i), a !== n.a && w(t, "d", n.a = a), n;
@@ -1159,7 +1236,7 @@ var $e = ":host{width:var(--lattice-icon-size,var(--space-tree-4));height:var(--
 					return b();
 				},
 				children: ([e, t]) => (() => {
-					var n = ut();
+					var n = mt();
 					return a((r) => {
 						var i = e.x, a = e.y, o = t.x, s = t.y;
 						return i !== r.e && w(n, "x1", r.e = i), a !== r.t && w(n, "y1", r.t = a), o !== r.a && w(n, "x2", r.a = o), s !== r.o && w(n, "y2", r.o = s), r;
@@ -1185,11 +1262,11 @@ var $e = ":host{width:var(--lattice-icon-size,var(--space-tree-4));height:var(--
 			}), e;
 		})();
 	}
-}, _t = (e) => C(dt, gt, e), vt = ":host{touch-action:none;cursor:crosshair;display:block;position:relative}:host([disabled]){cursor:auto;pointer-events:none}.trail{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.blade{fill:none;stroke:var(--color-tree-alert);stroke-width:var(--tree-rule-thick-width);stroke-linecap:round;stroke-linejoin:round}", yt = 220;
-function bt() {
+}, xt = (e) => C(ht, bt, e), St = ":host{touch-action:none;cursor:crosshair;display:block;position:relative}:host([disabled]){cursor:auto;pointer-events:none}.trail{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.blade{fill:none;stroke:var(--color-tree-alert);stroke-width:var(--tree-rule-thick-width);stroke-linecap:round;stroke-linejoin:round}", Ct = 220;
+function wt() {
 	let [e, t] = _([]), n, r = () => {
 		let i = performance.now();
-		t((e) => e.filter((e) => i - e.at < yt)), n = e().length > 0 ? requestAnimationFrame(r) : void 0;
+		t((e) => e.filter((e) => i - e.at < Ct)), n = e().length > 0 ? requestAnimationFrame(r) : void 0;
 	};
 	return g(() => {
 		n !== void 0 && cancelAnimationFrame(n);
@@ -1205,7 +1282,7 @@ function bt() {
 }
 //#endregion
 //#region src/elements/shears.tsx
-var xt = /*#__PURE__*/ u("<svg class=trail part=trail aria-hidden=true><polyline class=blade>"), St = "shears-pad", Ct = S(vt), wt = class t extends v {
+var Tt = /*#__PURE__*/ u("<svg class=trail part=trail aria-hidden=true><polyline class=blade>"), Et = "shears-pad", Dt = S(St), Ot = class t extends v {
 	static observedAttributes = ["disabled"];
 	inputs = t.observedAttributes;
 	disabledSignal = _(!1);
@@ -1219,10 +1296,10 @@ var xt = /*#__PURE__*/ u("<svg class=trail part=trail aria-hidden=true><polyline
 		this.disabled = n;
 	}
 	sheet() {
-		return Ct();
+		return Dt();
 	}
 	draw() {
-		let t = bt(), n, i, o = (e) => {
+		let t = wt(), n, i, o = (e) => {
 			let t = this.getBoundingClientRect();
 			return {
 				x: e.clientX - t.left,
@@ -1266,11 +1343,11 @@ var xt = /*#__PURE__*/ u("<svg class=trail part=trail aria-hidden=true><polyline
 			s(!0);
 			for (let [e, t] of d) this.removeEventListener(e, t);
 		}), (() => {
-			var e = xt(), n = e.firstChild;
+			var e = Tt(), n = e.firstChild;
 			return a(() => w(n, "points", t.points())), e;
 		})();
 	}
-}, Tt = (e) => C(St, wt, e), Et = ":host{background:var(--color-tree-sky);display:block;position:relative}:host([kind=earth]){background:var(--color-tree-earth)}.sky{width:100%;height:100%;position:absolute;inset:0;overflow:hidden}.line{fill:none;stroke:var(--color-tree-lattice-sky);stroke-width:var(--tree-rule-width)}:host([kind=earth]) .line{stroke:var(--color-tree-lattice-earth)}", Dt = /*#__PURE__*/ u("<svg class=sky part=sky aria-hidden=true><defs><pattern patternUnits=userSpaceOnUse><path class=line></path></pattern></defs><rect width=100% height=100%>"), Ot = "hex-sky", kt = S(Et), At = 0, jt = class e extends v {
+}, kt = (e) => C(Et, Ot, e), At = ":host{background:var(--color-tree-sky);display:block;position:relative}:host([kind=earth]){background:var(--color-tree-earth)}.sky{width:100%;height:100%;position:absolute;inset:0;overflow:hidden}.line{fill:none;stroke:var(--color-tree-lattice-sky);stroke-width:var(--tree-rule-width)}:host([kind=earth]) .line{stroke:var(--color-tree-lattice-earth)}", jt = /*#__PURE__*/ u("<svg class=sky part=sky aria-hidden=true><defs><pattern patternUnits=userSpaceOnUse><path class=line></path></pattern></defs><rect width=100% height=100%>"), Mt = "hex-sky", Nt = S(At), Pt = 0, Ft = class e extends v {
 	static observedAttributes = [
 		"kind",
 		"orient",
@@ -1319,12 +1396,12 @@ var xt = /*#__PURE__*/ u("<svg class=trail part=trail aria-hidden=true><polyline
 		Reflect.set(this, e, n ?? "");
 	}
 	sheet() {
-		return kt();
+		return Nt();
 	}
 	draw() {
-		let e = `${Ot}-${++At}`, t = this;
+		let e = `${Mt}-${++Pt}`, t = this;
 		return (() => {
-			var n = Dt(), r = n.firstChild, i = r.firstChild, o = i.firstChild, s = r.nextSibling;
+			var n = jt(), r = n.firstChild, i = r.firstChild, o = i.firstChild, s = r.nextSibling;
 			return w(i, "id", e), w(s, "fill", `url(#${e})`), a((e) => {
 				var n = re.width, r = re.height, a = `translate(${t.x} ${t.y})${t.orient === "flat" ? " rotate(90)" : ""} scale(${t.scale})`, s = oe[t.kind];
 				return n !== e.e && w(i, "width", e.e = n), r !== e.t && w(i, "height", e.t = r), a !== e.a && w(i, "patternTransform", e.a = a), s !== e.o && w(o, "d", e.o = s), e;
@@ -1336,11 +1413,11 @@ var xt = /*#__PURE__*/ u("<svg class=trail part=trail aria-hidden=true><polyline
 			}), n;
 		})();
 	}
-}, Mt = (e) => C(Ot, jt, e);
+}, It = (e) => C(Mt, Ft, e);
 //#endregion
 //#region src/elements/index.ts
-function Nt() {
-	Ve(), Mt(), _t(), Tt(), st();
+function Lt() {
+	Ve(), It(), xt(), kt(), dt();
 }
 //#endregion
-export { Fe as _, St as a, gt as c, rt as d, nt as f, Be as g, Pe as h, Mt as i, dt as l, st as m, jt as n, wt as o, ot as p, Ot as r, Tt as s, Nt as t, _t as u, Ve as v, K as y };
+export { Fe as _, Et as a, bt as c, st as d, ot as f, Be as g, Pe as h, It as i, ht as l, dt as m, Ft as n, Ot as o, ut as p, Mt as r, kt as s, Lt as t, xt as u, Ve as v, K as y };

package/dist/index.js

@@ -1,3 +1,3 @@
 import { i as e, r as t } from "./woods-C8W11GkD.js";
-import { _ as n, a as r, c as i, d as a, f as o, g as s, h as c, i as l, l as u, m as d, n as f, o as p, p as m, r as h, s as g, t as _, u as v, v as y, y as b } from "./elements-DdyLdkzr.js";
+import { _ as n, a as r, c as i, d as a, f as o, g as s, h as c, i as l, l as u, m as d, n as f, o as p, p as m, r as h, s as g, t as _, u as v, v as y, y as b } from "./elements-Bk_vtqsk.js";
 export { b as FACES, c as FACE_TAG, f as HexSky, a as ICON_NAMES, o as ICON_TAG, s as LatticeFace, m as LatticeIcon, i as LatticeShape, n as MOODS, t as SHAPE_NAMES, u as SHAPE_TAG, r as SHEARS_TAG, h as SKY_TAG, p as ShearsPadElement, e as TONES, l as defineHexSky, _ as defineLatticeElements, y as defineLatticeFace, d as defineLatticeIcon, v as defineLatticeShape, g as defineShearsPad };

package/dist/types/elements/icon.d.ts

@@ -1,6 +1,6 @@
 import { LatticeElement } from "./host";
 export declare const ICON_TAG = "lattice-icon";
-export declare const ICON_NAMES: readonly ["shears", "done", "note", "turn", "glue", "apart", "bin"];
+export declare const ICON_NAMES: readonly ["shears", "done", "note", "turn", "glue", "apart", "bin", "name", "split", "search"];
 export type IconName = (typeof ICON_NAMES)[number];
 export declare class LatticeIcon extends LatticeElement {
     static readonly observedAttributes: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@harmonics/lattice-ui",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "The Harmonics tree's look as Custom Elements: a lattice face, the hexagon sky, raised lattice shapes, a shears cut gesture, two marks and a board of pieces to build on. Any page, any framework.",
   "license": "MIT",
   "type": "module",