@parent-tobias/chord-component 1.0.0 → 1.1.0

package/dist/chord-diagram.js

@@ -1,17 +1,16 @@
-import { css as b, LitElement as x, html as n } from "lit";
-import { customElement as w } from "./node_modules/@lit/reactive-element/decorators/custom-element.js";
-import { property as v } from "./node_modules/@lit/reactive-element/decorators/property.js";
+import { LitElement as w, css as E, html as e } from "lit";
+import { property as x } from "./node_modules/@lit/reactive-element/decorators/property.js";
 import { state as g } from "./node_modules/@lit/reactive-element/decorators/state.js";
-import { query as C } from "./node_modules/@lit/reactive-element/decorators/query.js";
-import { SVGuitarChord as D } from "svguitar";
-import { instruments as E, chordToNotes as $, chordOnInstrument as j } from "./music-utils.js";
-import { chordDataService as F } from "./chord-data-service.js";
-var O = Object.defineProperty, L = Object.getOwnPropertyDescriptor, d = (r, c, a, o) => {
-  for (var i = o > 1 ? void 0 : o ? L(c, a) : c, h = r.length - 1, s; h >= 0; h--)
-    (s = r[h]) && (i = (o ? s(c, a, i) : s(i)) || i);
-  return o && i && O(c, a, i), i;
+import { query as $ } from "./node_modules/@lit/reactive-element/decorators/query.js";
+import { SVGuitarChord as C } from "svguitar";
+import { instruments as D, chordToNotes as j, chordOnInstrument as F } from "./music-utils.js";
+import { chordDataService as k } from "./chord-data-service.js";
+var L = Object.defineProperty, a = (v, r, d, s) => {
+  for (var i = void 0, n = v.length - 1, c; n >= 0; n--)
+    (c = v[n]) && (i = c(r, d, i) || i);
+  return i && L(r, d, i), i;
 };
-let e = class extends x {
+const u = class u extends w {
   constructor() {
     super(...arguments), this.instrument = "Standard Ukulele", this.chord = "", this.chordData = {}, this.isLoading = !1, this.loadError = null;
   }
@@ -24,7 +23,7 @@ let e = class extends x {
   async loadChordData() {
     this.isLoading = !0, this.loadError = null;
     try {
-      const r = await F.getChordData(this.instrument);
+      const r = await k.getChordData(this.instrument);
       this.chordData = r.data;
     } catch (r) {
       console.error("Failed to load chord data:", r), this.loadError = "Failed to load chord data", this.chordData = {};
@@ -34,7 +33,7 @@ let e = class extends x {
   }
   render() {
     if (this.isLoading)
-      return n`
+      return e`
 				<div class='chord'>
 					<div style="color: #90cdf4; font-size: 0.8rem; text-align: center; padding: 0.5rem;">
 						Loading...
@@ -42,61 +41,61 @@ let e = class extends x {
 				</div>
 			`;
     if (this.loadError)
-      return n`
+      return e`
 				<div class='chord'>
 					<div class='error'>${this.loadError}</div>
 				</div>
 			`;
     if (!this.chord)
-      return n`
+      return e`
 				<div class='chord'>
 					<div class='error'>No chord specified</div>
 				</div>
 			`;
-    const r = E.find(({ name: t }) => t === this.instrument);
+    const r = D.find(({ name: t }) => t === this.instrument);
     if (!r)
-      return n`
+      return e`
 				<div class='chord'>
 					<span>${this.chord.replace(/(maj)$/, "")}</span>
 					<div class='error'>Unknown instrument: ${this.instrument}</div>
 				</div>
 			`;
-    const c = j(r), a = $(this.chord);
-    if (!a || !a.notes || a.notes.length === 0)
-      return n`
+    const d = F(r), s = j(this.chord);
+    if (!s || !s.notes || s.notes.length === 0)
+      return e`
 				<div class='chord'>
 					<span>${this.chord.replace(/(maj)$/, "")}</span>
 					<div class='error'>Unknown chord: ${this.chord}</div>
 				</div>
 			`;
-    const o = this.chordData[this.chord] ? this.chordData[this.chord] : {
+    const i = this.chordData[this.chord] ? this.chordData[this.chord] : {
       barres: [],
-      fingers: c(a) || []
-    }, i = o.fingers.map(
+      fingers: d(s) || []
+    }, n = i.fingers.map(
       ([, t]) => typeof t == "number" ? t : 1 / 0
-    ), h = o.barres.map((t) => typeof t.fret == "number" ? t.fret : 0), s = [...i, ...h], y = s.length > 0 ? Math.min(...s.filter((t) => t > 0)) : 1, l = s.length > 0 ? Math.max(...s, 0) : 4;
+    ), c = i.barres.map((t) => typeof t.fret == "number" ? t.fret : 0), h = [...n, ...c], b = h.length > 0 ? Math.min(...h.filter((t) => t > 0)) : 1, l = h.length > 0 ? Math.max(...h, 0) : 4;
     let m = 1;
-    l > 4 && (m = Math.max(1, y));
+    l > 4 && (m = Math.max(1, b));
     let p, f;
     m > 1 || l > 4 ? (p = Math.max(l - m + 1, 4), f = m) : (p = Math.max(l, 4), f = 1);
-    const u = document.createElement("div");
+    const y = document.createElement("div");
     try {
-      return new D(u).configure({
+      return new C(y).configure({
         strings: r.strings.length,
         frets: p,
         position: f,
         tuning: [...r.strings]
       }).chord({
-        fingers: o.fingers,
-        barres: o.barres
-      }).draw(), n`
+        fingers: i.fingers,
+        barres: i.barres
+      }).draw(), e`
 				<div class='chord'>
 					<span>${this.chord.replace(/(maj)$/, "")}</span>
-					<div class='diagram'>${u.firstChild}</div>
+					<div class='diagram'>${y.firstChild}</div>
 				</div>
 			`;
     } catch (t) {
-      return console.error("Error generating chord diagram:", t), n`
+      return console.error("Error generating chord diagram:", t), e`
 				<div class='chord'>
 					<span>${this.chord.replace(/(maj)$/, "")}</span>
 					<div class='error'>Error generating diagram</div>
@@ -105,7 +104,7 @@ let e = class extends x {
     }
   }
 };
-e.styles = b`
+u.styles = E`
 	:host {
 		display: block;
 		width: 100%;
@@ -151,31 +150,30 @@ e.styles = b`
 		padding: 0.5rem;
 	}
 	`;
-d([
-  v({
+let o = u;
+a([
+  x({
     type: String
   })
-], e.prototype, "instrument", 2);
-d([
-  v({
+], o.prototype, "instrument");
+a([
+  x({
     type: String
   })
-], e.prototype, "chord", 2);
-d([
-  C(".diagram")
-], e.prototype, "container", 2);
-d([
+], o.prototype, "chord");
+a([
+  $(".diagram")
+], o.prototype, "container");
+a([
   g()
-], e.prototype, "chordData", 2);
-d([
+], o.prototype, "chordData");
+a([
   g()
-], e.prototype, "isLoading", 2);
-d([
+], o.prototype, "isLoading");
+a([
   g()
-], e.prototype, "loadError", 2);
-e = d([
-  w("chord-diagram")
-], e);
+], o.prototype, "loadError");
+customElements.get("chord-diagram") || customElements.define("chord-diagram", o);
 export {
-  e as ChordDiagram
+  o as ChordDiagram
 };

package/dist/chord-editor.js

@@ -1,22 +1,21 @@
-import { css as b, LitElement as v, html as l } from "lit";
-import { customElement as y } from "./node_modules/@lit/reactive-element/decorators/custom-element.js";
-import { property as m } from "./node_modules/@lit/reactive-element/decorators/property.js";
+import { LitElement as y, css as w, html as d } from "lit";
+import { property as b } from "./node_modules/@lit/reactive-element/decorators/property.js";
 import { state as c } from "./node_modules/@lit/reactive-element/decorators/state.js";
-import { query as w } from "./node_modules/@lit/reactive-element/decorators/query.js";
-import { SVGuitarChord as x } from "svguitar";
-import { instruments as g, chordToNotes as F, chordOnInstrument as k } from "./music-utils.js";
-import { chordDataService as f } from "./chord-data-service.js";
-var M = Object.defineProperty, C = Object.getOwnPropertyDescriptor, d = (t, i, e, r) => {
-  for (var s = r > 1 ? void 0 : r ? C(i, e) : i, o = t.length - 1, n; o >= 0; o--)
-    (n = t[o]) && (s = (r ? n(i, e, s) : n(s)) || s);
-  return r && s && M(i, e, s), s;
+import { query as x } from "./node_modules/@lit/reactive-element/decorators/query.js";
+import { SVGuitarChord as k } from "svguitar";
+import { instruments as f, chordToNotes as F, chordOnInstrument as M } from "./music-utils.js";
+import { chordDataService as g } from "./chord-data-service.js";
+var C = Object.defineProperty, l = (p, t, i, e) => {
+  for (var r = void 0, o = p.length - 1, s; o >= 0; o--)
+    (s = p[o]) && (r = s(t, i, r) || r);
+  return r && C(t, i, r), r;
 };
-let a = class extends v {
+const m = class m extends y {
   constructor() {
     super(...arguments), this.instrument = "Standard Ukulele", this.chord = "", this.fingers = [], this.barres = [], this.viewPosition = 1, this.isLoading = !1, this.isModified = !1, this.editMode = "finger";
   }
   get numStrings() {
-    const t = g.find(({ name: i }) => i === this.instrument);
+    const t = f.find(({ name: i }) => i === this.instrument);
     return (t == null ? void 0 : t.strings.length) || 4;
   }
   get calculatedPosition() {
@@ -30,8 +29,8 @@ let a = class extends v {
   }
   get maxFrets() {
     const t = [
-      ...this.fingers.map(([, s]) => typeof s == "number" ? s : 0),
-      ...this.barres.map((s) => typeof s.fret == "number" ? s.fret : 0)
+      ...this.fingers.map(([, o]) => typeof o == "number" ? o : 0),
+      ...this.barres.map((o) => typeof o.fret == "number" ? o.fret : 0)
     ], i = Math.max(...t, 0), e = 5, r = Math.max(i - this.viewPosition + 1, 4);
     return Math.max(e, r);
   }
@@ -45,11 +44,11 @@ let a = class extends v {
     if (this.chord) {
       this.isLoading = !0;
       try {
-        const t = await f.getChord(this.instrument, this.chord, !0);
+        const t = await g.getChord(this.instrument, this.chord, !0);
         if (t)
           this.fingers = [...t.fingers], this.barres = [...t.barres], this.viewPosition = this.calculatedPosition, this.isModified = !1;
         else {
-          const i = await f.getChord(this.instrument, this.chord, !1);
+          const i = await g.getChord(this.instrument, this.chord, !1);
           i ? (this.fingers = [...i.fingers], this.barres = [...i.barres], this.viewPosition = this.calculatedPosition, this.isModified = !1) : this.generateDefaultChord();
         }
       } catch (t) {
@@ -60,38 +59,38 @@ let a = class extends v {
     }
   }
   generateDefaultChord() {
-    const t = g.find(({ name: r }) => r === this.instrument);
+    const t = f.find(({ name: r }) => r === this.instrument);
     if (!t) return;
-    const i = k(t), e = F(this.chord);
+    const i = M(t), e = F(this.chord);
     e && e.notes && e.notes.length > 0 && (this.fingers = i(e) || [], this.barres = [], this.viewPosition = this.calculatedPosition, this.isModified = !1);
   }
   renderDiagram() {
     if (!this.diagramContainer) return;
-    const t = g.find(({ name: e }) => e === this.instrument);
+    const t = f.find(({ name: e }) => e === this.instrument);
     if (!t) return;
     this.diagramContainer.innerHTML = "";
     const i = document.createElement("div");
     try {
-      const e = this.fingers.map(([o, n]) => {
-        if (typeof n == "number") {
-          const h = n - this.viewPosition + 1;
+      const e = this.fingers.map(([s, a]) => {
+        if (typeof a == "number") {
+          const h = a - this.viewPosition + 1;
           if (h >= 0 && h <= this.maxFrets)
-            return [o, h];
+            return [s, h];
         } else
-          return [o, n];
+          return [s, a];
         return null;
-      }).filter((o) => o !== null), r = this.barres.map((o) => {
-        if (typeof o.fret == "number") {
-          const n = o.fret - this.viewPosition + 1;
-          if (n >= 0 && n <= this.maxFrets)
+      }).filter((s) => s !== null), r = this.barres.map((s) => {
+        if (typeof s.fret == "number") {
+          const a = s.fret - this.viewPosition + 1;
+          if (a >= 0 && a <= this.maxFrets)
             return {
-              ...o,
-              fret: n
+              ...s,
+              fret: a
             };
         }
         return null;
-      }).filter((o) => o !== null);
-      new x(i).configure({
+      }).filter((s) => s !== null);
+      new k(i).configure({
         strings: t.strings.length,
         frets: this.maxFrets,
         position: this.viewPosition,
@@ -110,11 +109,11 @@ let a = class extends v {
     t && t.addEventListener("click", (e) => this.handleDiagramClick(e));
   }
   handleDiagramClick(t) {
-    const e = t.currentTarget.getBoundingClientRect(), r = t.clientX - e.left, s = t.clientY - e.top, o = e.width / (this.numStrings + 1), n = e.height / (this.maxFrets + 2), h = Math.round((e.width - r) / o);
-    let u = Math.round((s - n) / n);
+    const e = t.currentTarget.getBoundingClientRect(), r = t.clientX - e.left, o = t.clientY - e.top, s = e.width / (this.numStrings + 1), a = e.height / (this.maxFrets + 2), h = Math.round((e.width - r) / s);
+    let u = Math.round((o - a) / a);
     u = u + this.viewPosition - 1;
-    const p = this.viewPosition + this.maxFrets - 1;
-    h >= 1 && h <= this.numStrings && u >= 0 && u <= p && this.handlePositionClick(h, u);
+    const v = this.viewPosition + this.maxFrets - 1;
+    h >= 1 && h <= this.numStrings && u >= 0 && u <= v && this.handlePositionClick(h, u);
   }
   handlePositionClick(t, i) {
     this.editMode === "finger" ? this.addOrUpdateFinger(t, i) : this.editMode === "remove" && this.removeFinger(t);
@@ -132,7 +131,7 @@ let a = class extends v {
   async saveChord() {
     if (this.chord)
       try {
-        await f.saveUserChord(
+        await g.saveUserChord(
           this.instrument,
           this.chord,
           {
@@ -156,7 +155,7 @@ let a = class extends v {
   async resetToDefault() {
     if (confirm("Reset to default chord? This will discard your changes."))
       try {
-        await f.deleteUserChord(this.instrument, this.chord), await this.loadChordData(), this.dispatchEvent(new CustomEvent("chord-reset", {
+        await g.deleteUserChord(this.instrument, this.chord), await this.loadChordData(), this.dispatchEvent(new CustomEvent("chord-reset", {
           detail: {
             instrument: this.instrument,
             chord: this.chord
@@ -213,15 +212,15 @@ let a = class extends v {
     this.barres.splice(t, 1), this.barres = [...this.barres], this.isModified = !0, this.requestUpdate();
   }
   render() {
-    return this.isLoading ? l`
+    return this.isLoading ? d`
 				<div class='editor'>
 					<div class='info'>Loading...</div>
 				</div>
-			` : this.chord ? l`
+			` : this.chord ? d`
 			<div class='editor'>
 				<div class='header'>
 					<h3>${this.chord} - ${this.instrument}</h3>
-					${this.isModified ? l`<span class='badge modified'>Modified</span>` : l`<span class='badge'>Saved</span>`}
+					${this.isModified ? d`<span class='badge modified'>Modified</span>` : d`<span class='badge'>Saved</span>`}
 				</div>
 
 				<div class='diagram-container'></div>
@@ -266,9 +265,9 @@ let a = class extends v {
 					<div class='control-group'>
 						<label>Finger Positions (${this.fingers.length})</label>
 						<div class='finger-list'>
-							${this.fingers.length === 0 ? l`
+							${this.fingers.length === 0 ? d`
 								<div class='info'>No finger positions. Click the diagram or use "Add Finger" below.</div>
-							` : this.fingers.map((t, i) => l`
+							` : this.fingers.map((t, i) => d`
 								<div class='finger-item'>
 									<div class='finger-inputs'>
 										<label style="color: #a0aec0; font-size: 0.75rem;">String:</label>
@@ -276,14 +275,14 @@ let a = class extends v {
 											type="number"
 											min="1"
 											max="${this.numStrings}"
-											.value="${t[0]}"
+											.value="${t[0].toString()}"
 											@input=${(e) => this.updateFingerString(i, e.target.value)}
 										/>
 										<label style="color: #a0aec0; font-size: 0.75rem;">Fret:</label>
 										<input
 											type="number"
 											min="0"
-											.value="${t[1]}"
+											.value="${t[1].toString()}"
 											@input=${(e) => this.updateFingerFret(i, e.target.value)}
 										/>
 									</div>
@@ -304,9 +303,9 @@ let a = class extends v {
 					<div class='control-group'>
 						<label>Barre Positions (${this.barres.length})</label>
 						<div class='finger-list'>
-							${this.barres.length === 0 ? l`
+							${this.barres.length === 0 ? d`
 								<div class='info'>No barres. Use "Add Barre" below to create one.</div>
-							` : this.barres.map((t, i) => l`
+							` : this.barres.map((t, i) => d`
 								<div class='finger-item'>
 									<div class='finger-inputs'>
 										<label style="color: #a0aec0; font-size: 0.75rem;">From:</label>
@@ -314,7 +313,7 @@ let a = class extends v {
 											type="number"
 											min="1"
 											max="${this.numStrings}"
-											.value="${t.fromString}"
+											.value="${t.fromString.toString()}"
 											@input=${(e) => this.updateBarreFromString(i, e.target.value)}
 										/>
 										<label style="color: #a0aec0; font-size: 0.75rem;">To:</label>
@@ -322,14 +321,14 @@ let a = class extends v {
 											type="number"
 											min="1"
 											max="${this.numStrings}"
-											.value="${t.toString}"
+											.value="${t.toString.toString()}"
 											@input=${(e) => this.updateBarreToString(i, e.target.value)}
 										/>
 										<label style="color: #a0aec0; font-size: 0.75rem;">Fret:</label>
 										<input
 											type="number"
 											min="0"
-											.value="${t.fret}"
+											.value="${t.fret.toString()}"
 											@input=${(e) => this.updateBarreFret(i, e.target.value)}
 										/>
 									</div>
@@ -374,14 +373,14 @@ let a = class extends v {
 					${this.editMode === "finger" ? "Click on the diagram to add or update finger positions." : "Click on a finger position to remove it."}
 				</div>
 			</div>
-		` : l`
+		` : d`
 				<div class='editor'>
 					<div class='error'>No chord specified</div>
 				</div>
 			`;
   }
 };
-a.styles = b`
+m.styles = w`
 	:host {
 		display: block;
 		width: 100%;
@@ -656,36 +655,35 @@ a.styles = b`
 		font-style: italic;
 	}
 	`;
-d([
-  m({ type: String })
-], a.prototype, "instrument", 2);
-d([
-  m({ type: String })
-], a.prototype, "chord", 2);
-d([
+let n = m;
+l([
+  b({ type: String })
+], n.prototype, "instrument");
+l([
+  b({ type: String })
+], n.prototype, "chord");
+l([
   c()
-], a.prototype, "fingers", 2);
-d([
+], n.prototype, "fingers");
+l([
   c()
-], a.prototype, "barres", 2);
-d([
+], n.prototype, "barres");
+l([
   c()
-], a.prototype, "viewPosition", 2);
-d([
+], n.prototype, "viewPosition");
+l([
   c()
-], a.prototype, "isLoading", 2);
-d([
+], n.prototype, "isLoading");
+l([
   c()
-], a.prototype, "isModified", 2);
-d([
+], n.prototype, "isModified");
+l([
   c()
-], a.prototype, "editMode", 2);
-d([
-  w(".diagram-container")
-], a.prototype, "diagramContainer", 2);
-a = d([
-  y("chord-editor")
-], a);
+], n.prototype, "editMode");
+l([
+  x(".diagram-container")
+], n.prototype, "diagramContainer");
+customElements.get("chord-editor") || customElements.define("chord-editor", n);
 export {
-  a as ChordEditor
+  n as ChordEditor
 };

package/dist/chord-list.js

@@ -1,14 +1,13 @@
-import { css as p, LitElement as c, html as m } from "lit";
-import { customElement as l } from "./node_modules/@lit/reactive-element/decorators/custom-element.js";
-import { property as d } from "./node_modules/@lit/reactive-element/decorators/property.js";
-import { state as u } from "./node_modules/@lit/reactive-element/decorators/state.js";
+import { LitElement as p, css as c, html as n } from "lit";
+import { property as m } from "./node_modules/@lit/reactive-element/decorators/property.js";
+import { state as l } from "./node_modules/@lit/reactive-element/decorators/state.js";
 import "./chord-diagram.js";
-var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (t, e, n, i) => {
-  for (var r = i > 1 ? void 0 : i ? g(e, n) : e, a = t.length - 1, h; a >= 0; a--)
-    (h = t[a]) && (r = (i ? h(e, n, r) : h(r)) || r);
-  return i && r && f(e, n, r), r;
+var u = Object.defineProperty, a = (d, t, s, f) => {
+  for (var r = void 0, i = d.length - 1, h; i >= 0; i--)
+    (h = d[i]) && (r = h(t, s, r) || r);
+  return r && u(t, s, r), r;
 };
-let s = class extends c {
+const o = class o extends p {
   constructor() {
     super(...arguments), this.instrument = "Standard Ukulele", this.chords = "[]", this.numChords = 0;
   }
@@ -27,26 +26,26 @@ let s = class extends c {
   }
   render() {
     const t = this.parsedChords;
-    return t.length === 0 ? m`
+    return t.length === 0 ? n`
 				<header>
 					<h3>${this.instrument}</h3>
 				</header>
 				<div class='empty-state'>
 					No chords to display
 				</div>
-			` : m`
+			` : n`
 			<header>
 				<h3>${this.instrument} (${this.numChords} chord${this.numChords !== 1 ? "s" : ""})</h3>
 			</header>
 			<div class='list'>
 				${t.map(
-      (e) => m`<chord-diagram chord=${e} instrument='${this.instrument}'></chord-diagram>`
+      (s) => n`<chord-diagram chord=${s} instrument='${this.instrument}'></chord-diagram>`
     )}
 			</div>
 		`;
   }
 };
-s.styles = p`
+o.styles = c`
 	:host {
 		display: block;
 		width: 100%;
@@ -100,20 +99,19 @@ s.styles = p`
 		}
 	}
 	`;
-o([
-  d({
+let e = o;
+a([
+  m({
     type: String
   })
-], s.prototype, "instrument", 2);
-o([
-  d()
-], s.prototype, "chords", 2);
-o([
-  u()
-], s.prototype, "numChords", 2);
-s = o([
-  l("chord-list")
-], s);
+], e.prototype, "instrument");
+a([
+  m()
+], e.prototype, "chords");
+a([
+  l()
+], e.prototype, "numChords");
+customElements.get("chord-list") || customElements.define("chord-list", e);
 export {
-  s as ChordList
+  e as ChordList
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parent-tobias/chord-component",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Lit-based web components for displaying musical chord diagrams and chord lists",
   "type": "module",
   "main": "dist/index.js",
@@ -80,4 +80,4 @@
   "engines": {
     "node": ">=18.0.0"
   }
-}
+}

package/src/chord-diagram.ts

@@ -1,5 +1,5 @@
 import { LitElement, css, html } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { SVGuitarChord } from 'svguitar';
 
 import { instruments, chordOnInstrument, chordToNotes } from './music-utils.js';
@@ -19,8 +19,12 @@ import type { InstrumentDefault } from './default-chords.js';
  * <chord-diagram chord="C" instrument="Standard Ukulele"></chord-diagram>
  * <chord-diagram chord="Am7" instrument="Standard Guitar"></chord-diagram>
  * ```
+ * 
+ * Remove the customElement decorator as it's not going to handle re-registration gracefully.
+ * Instead, register the component manually if it has not already been.
  */
-@customElement('chord-diagram')
+
+// @customElement('chord-diagram')
 export class ChordDiagram extends LitElement {
 
 	static styles = css`
@@ -252,4 +256,8 @@ export class ChordDiagram extends LitElement {
 			`;
 		}
 	}
+}
+
+if(!customElements.get('chord-diagram')) {
+	customElements.define('chord-diagram', ChordDiagram);
 }

package/src/chord-editor.ts

@@ -1,5 +1,5 @@
 import { LitElement, css, html } from 'lit';
-import { customElement, property, state, query } from 'lit/decorators.js';
+import { property, state, query } from 'lit/decorators.js';
 import { SVGuitarChord } from 'svguitar';
 import type { Finger, Barre } from 'svguitar';
 
@@ -23,7 +23,8 @@ import { chordDataService } from './chord-data-service.js';
  * <chord-editor chord="C" instrument="Standard Ukulele"></chord-editor>
  * ```
  */
-@customElement('chord-editor')
+
+// @customElement('chord-editor')
 export class ChordEditor extends LitElement {
 
 	static styles = css`
@@ -816,14 +817,14 @@ export class ChordEditor extends LitElement {
 											type="number"
 											min="1"
 											max="${this.numStrings}"
-											.value="${finger[0]}"
+											.value="${finger[0].toString()}"
 											@input=${(e: Event) => this.updateFingerString(index, (e.target as HTMLInputElement).value)}
 										/>
 										<label style="color: #a0aec0; font-size: 0.75rem;">Fret:</label>
 										<input
 											type="number"
 											min="0"
-											.value="${finger[1]}"
+											.value="${finger[1].toString()}"
 											@input=${(e: Event) => this.updateFingerFret(index, (e.target as HTMLInputElement).value)}
 										/>
 									</div>
@@ -854,7 +855,7 @@ export class ChordEditor extends LitElement {
 											type="number"
 											min="1"
 											max="${this.numStrings}"
-											.value="${barre.fromString}"
+											.value="${barre.fromString.toString()}"
 											@input=${(e: Event) => this.updateBarreFromString(index, (e.target as HTMLInputElement).value)}
 										/>
 										<label style="color: #a0aec0; font-size: 0.75rem;">To:</label>
@@ -862,14 +863,14 @@ export class ChordEditor extends LitElement {
 											type="number"
 											min="1"
 											max="${this.numStrings}"
-											.value="${barre.toString}"
+											.value="${barre.toString.toString()}"
 											@input=${(e: Event) => this.updateBarreToString(index, (e.target as HTMLInputElement).value)}
 										/>
 										<label style="color: #a0aec0; font-size: 0.75rem;">Fret:</label>
 										<input
 											type="number"
 											min="0"
-											.value="${barre.fret}"
+											.value="${barre.fret.toString()}"
 											@input=${(e: Event) => this.updateBarreFret(index, (e.target as HTMLInputElement).value)}
 										/>
 									</div>
@@ -917,3 +918,7 @@ export class ChordEditor extends LitElement {
 		`;
 	}
 }
+
+if(!customElements.get('chord-editor')) {
+	customElements.define('chord-editor', ChordEditor);
+}

package/src/chord-list.ts

@@ -1,5 +1,5 @@
 import { LitElement, css, html, type PropertyValues } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import './chord-diagram.js';
 
 /**
@@ -16,7 +16,7 @@ import './chord-diagram.js';
  * <chord-list instrument="Standard Guitar" chords='["E", "A", "D"]'></chord-list>
  * ```
  */
-@customElement('chord-list')
+// @customElement('chord-list')
 export class ChordList extends LitElement {
 	
 	/**
@@ -142,4 +142,8 @@ export class ChordList extends LitElement {
 			</div>
 		`;
 	}
+}
+
+if(!customElements.get('chord-list')) {
+	customElements.define('chord-list', ChordList);
 }

package/dist/node_modules/@lit/reactive-element/decorators/custom-element.js

@@ -1,13 +0,0 @@
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const s = (e) => (t, n) => {
-  n !== void 0 ? n.addInitializer(() => {
-    customElements.define(e, t);
-  }) : customElements.define(e, t);
-};
-export {
-  s as customElement
-};