/**
 * TabPanel web component
 *
 * A simple tab switcher. Reads the `active` attribute to determine which tab
 * is visible. Without JS, both panels are visible (tab buttons hidden via CSS).
 */
class TabPanel extends HTMLElement {
	connectedCallback() {
		this.querySelectorAll(".tab-button").forEach((button) => {
			button.addEventListener("click", () => {
				this.setAttribute("active", button.dataset.tab);
			});
		});
	}

	static get observedAttributes() {
		return ["active"];
	}

	attributeChangedCallback(name) {
		if (name === "active") this.#updateVisibility();
	}

	#updateVisibility() {
		const active = this.getAttribute("active");

		this.querySelectorAll(".tab-button").forEach((button) => {
			button.classList.toggle("active", button.dataset.tab === active);
		});

		this.querySelectorAll(".tab-content").forEach((content) => {
			content.hidden = content.dataset.tab !== active;
		});
	}
}

customElements.define("tab-panel", TabPanel);