refactor: switch to sd-option to allow for CheckBoxList support

src/ui/components/option.ts

@@ -67,6 +67,14 @@ export class SDOptionElement extends LitElement {
 		this.htmlValue = value?.toString();
 	}
 
+	/**
+	 * @inheritdoc
+	 */
+	protected override update(changedProperties: Map<PropertyKey, unknown>): void {
+		super.update(changedProperties);
+		this.dispatchEvent(new Event("update"));
+	}
+
 	/**
 	 * @inheritdoc
 	 */

src/ui/components/radio-group.ts

@@ -1,76 +1,53 @@
 import { css, html, LitElement, type TemplateResult } from "lit";
-import { customElement, queryAssignedElements } from "lit/decorators.js";
+import { customElement } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
 
 import { Input } from "../mixins/input";
+import { List } from "../mixins/list";
 import { SDRadioElement } from "./radio";
 
 /**
  * Element that offers persisting a value via a list of radio options.
  */
 @customElement("sd-radiogroup")
-export class SDRadioGroupElement extends Input<boolean | number | string>(LitElement) {
+export class SDRadioGroupElement extends List(Input<boolean | number | string>(LitElement)) {
 	/**
 	 * @inheritdoc
 	 */
 	public static styles = [
 		super.styles ?? [],
 		...SDRadioElement.styles,
 		css`
-			::slotted(sd-radio) {
+			sd-radio {
 				display: flex;
 			}
 		`,
 	];
 
-	/**
-	 * Radio buttons associated with this group.
-	 */
-	@queryAssignedElements({ selector: "sd-radio" })
-	accessor #radioButtons!: Array<SDRadioElement>;
-
 	/**
 	 * @inheritdoc
 	 */
 	public override render(): TemplateResult {
 		return html`
-			<slot
-				@change=${(ev: Event): void => {
-					if (ev.target instanceof SDRadioElement) {
-						this.value = ev.target.value;
-					}
-				}}
-				@slotchange=${(): void => this.#setRadioButtonProperties()}
-			></slot>
+			${repeat(
+				this.items,
+				(opt) => opt,
+				(opt) => {
+					return html`<sd-radio
+						name="__radio"
+						.checked=${this.value === opt.value}
+						.disabled=${opt.disabled}
+						.label=${opt.label}
+						.value=${opt.value}
+						@change=${() => {
+							this.value = opt.value;
+						}}
+						>${opt.innerText}</sd-radio
+					>`;
+				},
+			)}
 		`;
 	}
-
-	/**
-	 * @inheritdoc
-	 */
-	protected override willUpdate(_changedProperties: Map<PropertyKey, unknown>): void {
-		super.willUpdate(_changedProperties);
-
-		// Reflect the necessary properties of the radio group, to its radio buttons.
-		if (_changedProperties.has("disabled") || _changedProperties.has("value")) {
-			const disabled = _changedProperties.get("disabled") !== undefined ? this.disabled : undefined;
-			this.#setRadioButtonProperties(disabled);
-		}
-	}
-
-	/**
-	 * Sets the properties of the child radio buttons, based on this parent group.
-	 * @param disabled Determines the disabled state of all radio buttons; ignored when `undefined`.
-	 */
-	#setRadioButtonProperties(disabled?: boolean): void {
-		for (const radioButton of this.#radioButtons) {
-			radioButton.name = "__radio"; // Radio buttons are scoped to this shadow root.
-			radioButton.checked = this.value === radioButton.value;
-
-			if (disabled !== undefined) {
-				radioButton.disabled = disabled;
-			}
-		}
-	}
 }
 
 declare global {

src/ui/controllers/option-controller.ts

@@ -0,0 +1,105 @@
+import { ReactiveController, ReactiveControllerHost } from "lit";
+
+import { SDOptionElement } from "../components";
+
+/**
+ * Controller for tracking {@link SDOptionElement} within a host.
+ */
+export class OptionController implements ReactiveController {
+	/**
+	 * Current options within the host.
+	 */
+	public readonly options: SDOptionElement[] = [];
+
+	/**
+	 * Host this controller is attached to.
+	 */
+	readonly #host: HTMLElement & ReactiveControllerHost;
+
+	/**
+	 * Underlying mutation observer monitoring changes to the shadow DOM.
+	 */
+	readonly #observer: MutationObserver;
+
+	/**
+	 * Requests a host update which is processed asynchronously.
+	 */
+	readonly #requestUpdate: () => void;
+
+	/**
+	 * Initializes a new instance of the {@link OptionController} class.
+	 * @param host Host to attach to.
+	 */
+	constructor(host: HTMLElement & ReactiveControllerHost) {
+		this.#host = host;
+		this.#host.addController(this);
+		this.#requestUpdate = () => this.#host.requestUpdate();
+
+		this.#observer = new MutationObserver((mutations: MutationRecord[]) => this.#onMutation(mutations));
+		this.#setOptionsByQueryingHost();
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public hostConnected(): void {
+		this.#observer.observe(this.#host, { childList: true });
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public hostDisconnected(): void {
+		this.#observer.disconnect();
+	}
+
+	/**
+	 * Handles a mutation on the host's shadow DOM, updating the tracked collection of nodes.
+	 * @param mutations Mutations that occurred.
+	 */
+	#onMutation(mutations: MutationRecord[]): void {
+		let isOptionRemoved = false;
+
+		for (const { addedNodes, removedNodes, target, type } of mutations) {
+			// When a new option was added, simply rebuild the collection of options to maintain correct ordering.
+			for (const added of addedNodes) {
+				if (added instanceof SDOptionElement) {
+					this.#setOptionsByQueryingHost();
+					return;
+				}
+			}
+
+			// When an option was removed, remove it from the collection, but continue the evaluation.
+			for (const removed of removedNodes) {
+				if (removed instanceof SDOptionElement) {
+					const index = this.options.indexOf(removed);
+					if (index !== -1) {
+						this.options
+							.splice(index, 1)
+							.forEach((option) => option.removeEventListener("update", this.#requestUpdate));
+
+						isOptionRemoved = true;
+					}
+				}
+			}
+		}
+
+		if (isOptionRemoved) {
+			this.#host.requestUpdate();
+		}
+	}
+
+	/**
+	 * Sets the options associated with this instance by querying the host.
+	 */
+	#setOptionsByQueryingHost(): void {
+		this.options.length = 0;
+
+		this.#host.querySelectorAll(":scope > sd-option").forEach((option) => {
+			this.options.push(<SDOptionElement>option);
+			option.addEventListener("update", this.#requestUpdate);
+		});
+
+		this.#host.requestUpdate();
+	}
+}