Implement the most basic version of a dice pool configuration

module/Apps/elements/RipCryptBorder.mjs

@@ -0,0 +1,55 @@
+import { StyledShadowElement } from "./mixins/StyledShadowElement.mjs";
+
+/**
+Attributes:
+*/
+export class RipCryptBorder extends StyledShadowElement(HTMLElement) {
+	static elementName = `rc-border`;
+	static formAssociated = false;
+
+	/* Stuff for the mixin to use */
+	static _stylePath = `css/components/rc-border.css`;
+	#container;
+
+	_mounted = false;
+	async connectedCallback() {
+		super.connectedCallback();
+		if (this._mounted) { return };
+
+		/*
+		This converts all of the double-dash prefixed properties on the element to
+		CSS variables so that they don't all need to be provided by doing style=""
+		*/
+		for (const attrVar of this.attributes) {
+			if (attrVar.name?.startsWith(`var:`)) {
+				const prop = attrVar.name.replace(`var:`, ``);
+				this.style.setProperty(`--` + prop, attrVar.value);
+			};
+		};
+
+		this.#container = document.createElement(`div`);
+		this.#container.classList = `rc-border`;
+
+		const titleContainer = document.createElement(`div`);
+		titleContainer.classList = `title`;
+		const titleSlot = document.createElement(`slot`);
+		titleSlot.innerHTML = `No Title`;
+		titleSlot.name = `title`;
+		titleContainer.appendChild(titleSlot.cloneNode(true));
+		this.#container.appendChild(titleContainer.cloneNode(true));
+
+		const contentSlot = document.createElement(`slot`);
+		contentSlot.name = `content`;
+		this.#container.appendChild(contentSlot.cloneNode(true));
+
+		this._shadow.appendChild(this.#container);
+
+		this._mounted = true;
+	};
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (!this._mounted) { return };
+		this._mounted = false;
+	};
+};

module/Apps/elements/_index.mjs

@@ -1,10 +1,12 @@
 import { Logger } from "../../utils/Logger.mjs";
+import { RipCryptBorder } from "./RipCryptBorder.mjs";
 import { RipCryptIcon } from "./Icon.mjs";
 import { RipCryptSVGLoader } from "./svgLoader.mjs";
 
 const components = [
 	RipCryptIcon,
 	RipCryptSVGLoader,
+	RipCryptBorder,
 ];
 
 export function registerCustomComponents() {