const styles = ["purple", "gray", "red", "green", "yellow", "blue"]; class DevToolbarRadioCheckbox extends HTMLElement { _radioStyle = "purple"; input; shadowRoot; get radioStyle() { return this._radioStyle; } set radioStyle(value) { if (!styles.includes(value)) { console.error(`Invalid style: ${value}, expected one of ${styles.join(", ")}.`); return; } this._radioStyle = value; this.updateStyle(); } static observedAttributes = ["radio-style", "checked", "disabled", "name", "value"]; constructor() { super(); this.shadowRoot = this.attachShadow({ mode: "open" }); this.shadowRoot.innerHTML = ` `; this.input = document.createElement("input"); this.input.type = "radio"; this.shadowRoot.append(this.input); } connectedCallback() { this.updateInputState(); this.updateStyle(); } updateStyle() { const styleElement = this.shadowRoot.querySelector("#selected-style"); if (styleElement) { styleElement.innerHTML = ` :host { --unchecked-color: var(--${this._radioStyle}-unchecked); --checked-color: var(--${this._radioStyle}-checked); } `; } } updateInputState() { this.input.checked = this.hasAttribute("checked"); this.input.disabled = this.hasAttribute("disabled"); this.input.name = this.getAttribute("name") || ""; this.input.value = this.getAttribute("value") || ""; } attributeChangedCallback() { if (this.hasAttribute("radio-style")) { this.radioStyle = this.getAttribute("radio-style"); } this.updateInputState(); } } export { DevToolbarRadioCheckbox };