Make it so that the custom input delegates focus

module/components/incrementer.mjs

@@ -14,7 +14,11 @@ Styling:
 - `--height`: Controls the height of the element + the width of the buttons (default: 1.25rem)
 - `--width`: Controls the width of the number input (default 50px)
 */
-export class DotDungeonIncrementer extends StyledShadowElement(HTMLElement) {
+export class DotDungeonIncrementer
+extends StyledShadowElement(
+	HTMLElement,
+	{ mode: `open`, delegatesFocus: true }
+) {
 	static elementName = `dd-incrementer`;
 	static formAssociated = true;
 

module/components/mixins/Styles.mjs

@@ -1,7 +1,7 @@
 /**
  * @param {HTMLElement} Base
  */
-export function StyledShadowElement(Base) {
+export function StyledShadowElement(Base, shadowOptions = { mode: `open` }) {
 	return class extends Base {
 		/**
 		 * The path to the CSS that is loaded
@@ -33,7 +33,7 @@ export function StyledShadowElement(Base) {
 		constructor() {
 			super();
 
-			this._shadow = this.attachShadow({ mode: `open` });
+			this._shadow = this.attachShadow(shadowOptions);
 			this._style = document.createElement(`style`);
 			this._shadow.appendChild(this._style);
 		};