/**
 * SpeciesColorPicker web component
 *
 * Progressive enhancement for species/color picker forms:
 * - Auto-submits the form when species or color changes (if JS is enabled)
 * - Shows a submit button as fallback (if JS is disabled or slow to load)
 * - Uses Custom Element internals API to communicate state to CSS
 */
class SpeciesColorPicker extends HTMLElement {
	#internals;

	constructor() {
		super();
		this.#internals = this.attachInternals();
	}

	connectedCallback() {
		// Listen for changes to auto-submit the form, then tell CSS about it!
		this.addEventListener("change", this.#handleChange);
		this.#internals.states.add("auto-loading");
	}

	#handleChange(e) {
		this.querySelector("form").requestSubmit();
	}
}

customElements.define("species-color-picker", SpeciesColorPicker);