module/apps/elements/Toggle.mjs

@@ -1,5 +1,7 @@
 import { StyledShadowElement } from "./StyledShadowElement.mjs";
 
+const { debounce } = foundry.utils;
+
 export class TafToggle extends StyledShadowElement(HTMLElement) {
 	static elementName = `taf-toggle`;
 	static formAssociated = true;
@@ -72,8 +74,9 @@ export class TafToggle extends StyledShadowElement(HTMLElement) {
 			};
 		};
 
-		const label = document.createElement(`label`);
-		label.dataset.type = `round`;
+		const container = document.createElement(`div`);
+		container.classList = `toggle`;
+		container.dataset.type = `round`;
 
 		const input = this._input = document.createElement(`input`);
 		input.type = `checkbox`;
@@ -83,13 +86,17 @@ export class TafToggle extends StyledShadowElement(HTMLElement) {
 			this.#emitEvents();
 		});
 
-		label.appendChild(input);
+		this.addEventListener(`click`, () => {
+			input.click();
+		});
+
+		container.appendChild(input);
 
 		const slider = document.createElement(`div`);
 		slider.classList = `slider`;
-		label.appendChild(slider);
+		container.appendChild(slider);
 
-		this._shadow.appendChild(label);
+		this._shadow.appendChild(container);
 
 		this._mounted = true;
 	};
@@ -100,8 +107,11 @@ export class TafToggle extends StyledShadowElement(HTMLElement) {
 		this._mounted = false;
 	};
 
-	#emitEvents() {
+	#emitEvents = debounce(
+		() => {
 			this.dispatchEvent(new Event(`input`, {bubbles: true, cancelable: false}));
 			this.dispatchEvent(new Event(`change`, {bubbles: true, cancelable: false}));
-	};
+		},
+		150,
+	);
 };

styles/components/toggle.css

@@ -16,11 +16,11 @@ input {
 		--slider-colour,
 		var(--toggle-slider-unchecked-colour)
 	);
-	transition: all var(--speed, 150ms) ease-in-out;
+	transition: all 150ms ease-in-out;
 	border-radius: 9999px;
 }
 
-label {
+.toggle {
 	display: flex;
 	padding: var(--padding, 4px);
 	height: calc(var(--size, 16px) + (var(--padding, 4px) * 2));
@@ -34,7 +34,7 @@ label {
 	cursor: pointer;
 
 	/* Non-checked, clicking */
-	&:active .slider {
+	&:is(&:active, &.active) .slider {
 		width: calc(var(--size, 16px) * 1.5);
 	}
 
@@ -48,7 +48,7 @@ label {
 	}
 
 	/* checked, clicking */
-	&:active > :checked + .slider {
+	&:is(&:active, &.active) > :checked + .slider {
 		width: calc(var(--size, 16px) * 1.5);
 		transform: translateX(calc(var(--size, 16px) * 0.5));
 	}