Begin work on a custom element for incrementer

module/components/incrementer.mjs

@@ -0,0 +1,71 @@
+/**
+Attributes:
+@property {number} value
+@property {number} stepSize
+@property {number} largeStepSize
+*/
+class DotDungeonIncrementer extends HTMLElement {
+
+	#input;
+
+	constructor() {
+		super();
+
+		const sr = this.attachShadow({ mode: `open` });
+		const container = document.createElement(`div`);
+
+		const style = document.createElement(`link`);
+		style.href = `./systems/dotdungeon/.styles/components/incrementer.css`;
+		style.rel = `stylesheet`;
+		container.appendChild(style);
+
+
+		const input = document.createElement(`input`);
+		this.#input = input;
+		input.type = `number`;
+		input.value = this.getAttribute(`value`);
+		input.addEventListener(`change`, this.#updateValue.bind(this));
+
+		const increment = document.createElement(`button`);
+		increment.innerHTML = `+`;
+		increment.type = `button`;
+		increment.classList.value = `increment`;
+		increment.addEventListener(`click`, this.#increment.bind(this));
+
+		const decrement = document.createElement(`button`);
+		decrement.innerHTML = `-`;
+		decrement.type = `button`;
+		decrement.classList.value = `decrement`;
+		decrement.addEventListener(`click`, this.#decrement.bind(this));
+
+
+		// Construct the DOM
+		container.appendChild(decrement);
+		container.appendChild(input);
+		container.appendChild(increment);
+		sr.appendChild(container);
+	};
+
+	#updateValue() {
+		// TODO: Emit a change event for the new value, and check for cancellation
+		const event = new Event(`change`);
+		this.dispatchEvent(event);
+	};
+
+	#increment() {
+		console.log(`increment event`)
+		this.#input.value++;
+		this.#updateValue();
+	};
+
+	#decrement() {
+		console.log(`decrement event`)
+		this.#input.value--;
+		this.#updateValue();
+	};
+};
+
+
+if (!window.customElements.get(`dd-incrementer`)) {
+	window.customElements.define(`dd-incrementer`, DotDungeonIncrementer);
+};