From 9ad73f03c8e7ea60e482405ad47a496da1cf50e8 Mon Sep 17 00:00:00 2001
From: Richard Herman <geekyeggo@users.noreply.github.com>
Date: Fri, 1 Nov 2024 16:12:40 +0000
Subject: [PATCH 1/8] feat: enable standalone radio buttons

---
 src/ui/components/index.ts            |  13 +-
 src/ui/components/option.ts           |   8 +-
 src/ui/components/radio-group.ts      | 113 ++--------------
 src/ui/components/radio.ts            | 187 ++++++++++++++++++++++++++
 src/ui/controllers/option-observer.ts |  22 ++-
 src/ui/mixins/list.ts                 |   5 +-
 6 files changed, 229 insertions(+), 119 deletions(-)
 create mode 100644 src/ui/components/radio.ts

diff --git a/src/ui/components/index.ts b/src/ui/components/index.ts
index b9cf3cf..031e9e2 100644
--- a/src/ui/components/index.ts
+++ b/src/ui/components/index.ts
@@ -1,6 +1,7 @@
-import "./field";
-import "./label";
-import "./option";
-import "./radio-group";
-import "./switch";
-import "./text-field";
+export * from "./field";
+export * from "./label";
+export * from "./option";
+export * from "./radio";
+export * from "./radio-group";
+export * from "./switch";
+export * from "./text-field";
diff --git a/src/ui/components/option.ts b/src/ui/components/option.ts
index 2365490..d2fdf45 100644
--- a/src/ui/components/option.ts
+++ b/src/ui/components/option.ts
@@ -20,12 +20,10 @@ export class SDOptionElement extends LitElement {
 	public accessor disabled: boolean = false;
 
 	/**
-	 * Label that represents the option; read from the `innerText` of the element.
-	 * @returns The label.
+	 * Label that represents the option.
 	 */
-	public get label(): string {
-		return this.innerText;
-	}
+	@property()
+	public accessor label: string | undefined;
 
 	/**
 	 * Type of the value; allows for the value to be converted to a boolean or number.
diff --git a/src/ui/components/radio-group.ts b/src/ui/components/radio-group.ts
index 6d53d17..b844bdc 100644
--- a/src/ui/components/radio-group.ts
+++ b/src/ui/components/radio-group.ts
@@ -5,7 +5,7 @@ import { repeat } from "lit/directives/repeat.js";
 
 import { Input } from "../mixins/input";
 import { List } from "../mixins/list";
-import { preventDoubleClickSelection } from "../utils";
+import { SDRadioElement } from "./radio";
 
 /**
  * Element that offers persisting a value via a list of radio options.
@@ -17,92 +17,10 @@ export class SDRadioGroupElement extends List(Input<boolean | number | string>(L
 	 */
 	public static styles = [
 		super.styles ?? [],
+		...SDRadioElement.styles,
 		css`
-			label {
+			sd-radio {
 				display: flex;
-				align-items: center;
-			}
-
-			input {
-				/* Hide the input, whilst still allowing focus */
-				height: 0;
-				opacity: 0;
-				position: absolute;
-				width: 0;
-			}
-
-			/**
-			 * Radio button replacement.
-			 */
-
-			.indicator {
-				--size: calc(var(--size-m) - calc(var(--border-width-thin) * 2));
-				align-items: center;
-				border: var(--border-width-thin) solid var(--color-content-disabled);
-				border-radius: var(--rounding-full);
-				display: inline-flex;
-				height: var(--size);
-				justify-content: center;
-				margin: var(--space-xs) var(--space-xs) var(--space-xs) 0;
-				user-select: none;
-				width: var(--size);
-			}
-
-			/**
-			 * Checked.
-			 */
-
-			input:checked {
-				& + .indicator {
-					background: var(--color-surface-accent);
-					border-color: var(--color-content-disabled);
-					border-radius: var(--rounding-full);
-				}
-
-				& + .indicator::before {
-					content: "";
-					background: var(--color-surface-ondark);
-					border-radius: var(--rounding-full);
-					display: block;
-					height: var(--size-xs);
-					width: var(--size-xs);
-				}
-			}
-
-			/**
-			 * Disabled.
-			 */
-
-			label:has(input:disabled) {
-				color: var(--color-content-disabled);
-			}
-
-			input:disabled + .indicator {
-				border-color: var(--color-border-subtle-disabled);
-			}
-
-			/**
-			 * Checked + disabled.
-			 */
-
-			input:checked:disabled {
-				& + .indicator {
-					background-color: var(--color-surface-disabled);
-				}
-
-				& + .indicator::before {
-					background-color: var(--color-content-disabled);
-				}
-			}
-
-			/**
-			 * Focus
-			 */
-
-			input:focus-visible + .indicator {
-				box-shadow: var(--highlight-box-shadow);
-				outline: var(--highlight-outline--focus);
-				outline-offset: var(--highlight-outline-offset);
 			}
 		`,
 	];
@@ -117,21 +35,16 @@ export class SDRadioGroupElement extends List(Input<boolean | number | string>(L
 				({ key }) => key,
 				({ disabled, label, value }) => {
 					return html`
-						<label role="radio" @mousedown=${preventDoubleClickSelection}>
-							<input
-								name="radio"
-								type="radio"
-								value=${ifDefined(value)}
-								tabindex=${ifDefined(disabled ? undefined : 0)}
-								.checked=${this.value === value}
-								.disabled=${disabled}
-								@change=${(): void => {
-									this.value = value;
-								}}
-							/>
-							<span class="indicator"></span>
-							${label}
-						</label>
+						<sd-radio
+							name="radio"
+							value=${ifDefined(value)}
+							.checked=${this.value === value}
+							.disabled=${disabled}
+							.label=${label}
+							@change=${(): void => {
+								this.value = value;
+							}}
+						></sd-radio>
 					`;
 				},
 			)}
diff --git a/src/ui/components/radio.ts b/src/ui/components/radio.ts
new file mode 100644
index 0000000..c2ffbbe
--- /dev/null
+++ b/src/ui/components/radio.ts
@@ -0,0 +1,187 @@
+import { css, html, type TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+import { preventDoubleClickSelection } from "../utils";
+import { SDOptionElement } from "./option";
+
+/**
+ * Element that offers an option in the form of a radio button.
+ */
+@customElement("sd-radio")
+export class SDRadioElement extends SDOptionElement {
+	/**
+	 * Determines whether the shared styles have already been appended to the document.
+	 */
+	static #isStyleAppended = false;
+
+	/**
+	 * @inheritdoc
+	 */
+	public static styles = [
+		css`
+			label.sd-radio-container {
+				display: inline-flex;
+				align-items: center;
+
+				& input {
+					/* Hide the input, whilst still allowing focus */
+					height: 0;
+					opacity: 0;
+					position: absolute;
+					width: 0;
+				}
+
+				/**
+                 * Radio button replacement.
+                 */
+
+				& span {
+					--size: calc(var(--size-m) - calc(var(--border-width-thin) * 2));
+					align-items: center;
+					border: var(--border-width-thin) solid var(--color-content-disabled);
+					border-radius: var(--rounding-full);
+					display: inline-flex;
+					height: var(--size);
+					justify-content: center;
+					margin: var(--space-xs) var(--space-xs) var(--space-xs) 0;
+					user-select: none;
+					width: var(--size);
+				}
+
+				/**
+                 * Checked.
+                 */
+
+				& input:checked {
+					& + span {
+						background: var(--color-surface-accent);
+						border-color: var(--color-content-disabled);
+						border-radius: var(--rounding-full);
+					}
+
+					& + span::before {
+						content: "";
+						background: var(--color-surface-ondark);
+						border-radius: var(--rounding-full);
+						display: block;
+						height: var(--size-xs);
+						position: absolute;
+						width: var(--size-xs);
+					}
+				}
+
+				/**
+                 * Disabled.
+                 */
+
+				&:has(input:disabled) {
+					color: var(--color-content-disabled);
+				}
+
+				& input:disabled + span {
+					border-color: var(--color-border-subtle-disabled);
+				}
+
+				/**
+                 * Checked + disabled.
+                 */
+
+				& input:checked:disabled {
+					& + span {
+						background-color: var(--color-surface-disabled);
+					}
+
+					& + span::before {
+						background-color: var(--color-content-disabled);
+					}
+				}
+
+				/**
+                 * Focus
+                 */
+
+				& input:focus-visible + span {
+					box-shadow: var(--highlight-box-shadow);
+					outline: var(--highlight-outline--focus);
+					outline-offset: var(--highlight-outline-offset);
+				}
+			}
+		`,
+	];
+
+	/**
+	 * Name of the radio button group the element is associated with.
+	 */
+	@property()
+	public accessor name: string | undefined = undefined;
+
+	/**
+	 * Determines whether the radio button is checked; default `false`.
+	 */
+	@property({
+		reflect: true,
+		type: Boolean,
+	})
+	public accessor checked: boolean = false;
+
+	/**
+	 * @inheritdoc
+	 */
+	public override connectedCallback(): void {
+		super.connectedCallback();
+		if (SDRadioElement.#isStyleAppended) {
+			return;
+		}
+
+		// As the root of the element is not a shadow DOM, we can't scope styles, so instead we add
+		// the styles as a <style> element to the document.
+		const style = document.createElement("style");
+		style.innerHTML = SDRadioElement.styles
+			.map((s) => s.toString())
+			.filter((s) => s !== "")
+			.join("\n");
+
+		// Only add the <style> element once.
+		SDRadioElement.#isStyleAppended = true;
+		document.head.append(style);
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	protected override createRenderRoot(): HTMLElement | DocumentFragment {
+		// Shadow root has to be open to allow for joining named radio buttons.
+		this.innerHTML = "";
+		return this;
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	protected override render(): TemplateResult {
+		return html`
+			<label class="sd-radio-container" @mousedown=${preventDoubleClickSelection}>
+				<input
+					name=${ifDefined(this.name)}
+					type="radio"
+					value=${ifDefined(this.value)}
+					tabindex=${ifDefined(this.disabled ? undefined : 0)}
+					.checked=${this.checked}
+					.disabled=${this.disabled}
+				/>
+				<span role="radio" aria-checked=${this.checked}></span>
+				${this.label}
+			</label>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		/**
+		 * Element that offers an option in the form of a radio button.
+		 */
+		"sd-radio": SDRadioElement;
+	}
+}
diff --git a/src/ui/controllers/option-observer.ts b/src/ui/controllers/option-observer.ts
index 27c2e10..8d45d24 100644
--- a/src/ui/controllers/option-observer.ts
+++ b/src/ui/controllers/option-observer.ts
@@ -1,5 +1,6 @@
 import { ReactiveController, ReactiveControllerHost } from "lit";
 
+import { SDRadioElement } from "../components";
 import { SDOptionElement } from "../components/option";
 
 /**
@@ -9,7 +10,7 @@ export class OptionObserver implements ReactiveController {
 	/**
 	 * Current options within the host.
 	 */
-	public readonly options: SDOptionElement[];
+	public readonly options: (SDOptionElement | SDRadioElement)[];
 
 	/**
 	 * Host this controller is attached to.
@@ -31,7 +32,7 @@ export class OptionObserver implements ReactiveController {
 
 		// Add the controller, and determine the initial set of options.
 		this.#host.addController(this);
-		this.options = Array.from(this.#host.querySelectorAll("sd-option"));
+		this.options = Array.from(this.#host.querySelectorAll("sd-option, sd-radio"));
 	}
 
 	/**
@@ -60,19 +61,19 @@ export class OptionObserver implements ReactiveController {
 		mutations.forEach((mutation) => {
 			// Added.
 			for (const added of mutation.addedNodes) {
-				if (added instanceof SDOptionElement) {
+				if (this.#isObservedElement(added)) {
 					changed = true;
 					this.options.push(added);
 				}
 			}
 
 			// Removed.
-			mutation.removedNodes.forEach((node) => {
-				if (!(node instanceof SDOptionElement)) {
+			mutation.removedNodes.forEach((removed) => {
+				if (!this.#isObservedElement(removed)) {
 					return;
 				}
 
-				const index = this.options.indexOf(node);
+				const index = this.options.indexOf(removed);
 				if (index !== -1) {
 					changed = true;
 					this.options.splice(index, 1);
@@ -84,4 +85,13 @@ export class OptionObserver implements ReactiveController {
 			this.#host.requestUpdate();
 		}
 	}
+
+	/**
+	 * Determines whether the specified node is an instance of an element this observer is tracking.
+	 * @param node Node instance to check.
+	 * @returns `true` when the node is an instance of an observed element type; otherwise `false`.
+	 */
+	#isObservedElement(node: Node): node is SDOptionElement | SDRadioElement {
+		return node instanceof SDOptionElement || node instanceof SDRadioElement;
+	}
 }
diff --git a/src/ui/mixins/list.ts b/src/ui/mixins/list.ts
index a26572b..aad0664 100644
--- a/src/ui/mixins/list.ts
+++ b/src/ui/mixins/list.ts
@@ -2,6 +2,7 @@ import { LitElement } from "lit";
 
 import type { Constructor } from "../../common/utils";
 import type { SDOptionElement } from "../components/option";
+import type { SDRadioElement } from "../components/radio";
 import { OptionObserver } from "../controllers/option-observer";
 
 /**
@@ -26,7 +27,7 @@ export const List = <TBase extends Constructor<LitElement> = typeof LitElement>(
 		 * @returns The list items.
 		 */
 		public get items(): Iterable<ListItem> {
-			return this.#domObserver.options.map((opt: SDOptionElement): ListItem => {
+			return this.#domObserver.options.map((opt: SDOptionElement | SDRadioElement): ListItem => {
 				return {
 					disabled: opt.disabled,
 					key: opt,
@@ -68,7 +69,7 @@ export type ListItem = {
 	/**
 	 * Label of the list item.
 	 */
-	label: string;
+	label: string | undefined;
 
 	/**
 	 * Value of the list item.

From cad47adc67955270c0ef2d9e554609f68d4afe4d Mon Sep 17 00:00:00 2001
From: Richard Herman <geekyeggo@users.noreply.github.com>
Date: Sun, 3 Nov 2024 17:44:59 +0000
Subject: [PATCH 2/8] feat: add setter to Option.value, and improve getter

---
 src/ui/components/option.ts | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/ui/components/option.ts b/src/ui/components/option.ts
index d2fdf45..7435e04 100644
--- a/src/ui/components/option.ts
+++ b/src/ui/components/option.ts
@@ -11,7 +11,7 @@ export class SDOptionElement extends LitElement {
 	/**
 	 * Private backing field for {@link SDOptionElement.value}.
 	 */
-	#value: boolean | number | string | undefined;
+	#value: boolean | number | string | undefined | null = null;
 
 	/**
 	 * Determines whether the option is disabled; default `false`.
@@ -42,9 +42,28 @@ export class SDOptionElement extends LitElement {
 	 * @returns The value.
 	 */
 	public get value(): boolean | number | string | undefined {
+		if (this.#value === null) {
+			if (this.type === "boolean") {
+				this.#value = parseBoolean(this.htmlValue);
+			} else if (this.type === "number") {
+				this.#value = parseNumber(this.htmlValue);
+			} else {
+				this.#value = this.htmlValue;
+			}
+		}
+
 		return this.#value;
 	}
 
+	/**
+	 * Sets the value of the option, and associated type.
+	 * @param value New value.
+	 */
+	public set value(value: boolean | number | string | undefined) {
+		this.type = typeof value === "number" ? "number" : typeof value === "boolean" ? "boolean" : "string";
+		this.htmlValue = value?.toString();
+	}
+
 	/**
 	 * @inheritdoc
 	 */
@@ -52,13 +71,7 @@ export class SDOptionElement extends LitElement {
 		super.willUpdate(_changedProperties);
 
 		if (_changedProperties.has("type") || _changedProperties.has("value")) {
-			if (this.type === "boolean") {
-				this.#value = parseBoolean(this.htmlValue);
-			} else if (this.type === "number") {
-				this.#value = parseNumber(this.htmlValue);
-			} else {
-				this.#value = this.htmlValue;
-			}
+			this.#value = null;
 		}
 	}
 }

From fc96ebb32f72063933ecc63e21f4801461aaf593 Mon Sep 17 00:00:00 2001
From: Richard Herman <geekyeggo@users.noreply.github.com>
Date: Sun, 3 Nov 2024 17:58:43 +0000
Subject: [PATCH 3/8] feat: allow label to be derived from innerText and
 improve scoping

---
 src/ui/components/radio.ts | 54 ++++++++++++++++++++++++--------------
 1 file changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/ui/components/radio.ts b/src/ui/components/radio.ts
index c2ffbbe..97de042 100644
--- a/src/ui/components/radio.ts
+++ b/src/ui/components/radio.ts
@@ -36,7 +36,7 @@ export class SDRadioElement extends SDOptionElement {
                  * Radio button replacement.
                  */
 
-				& span {
+				& span[role="radio"] {
 					--size: calc(var(--size-m) - calc(var(--border-width-thin) * 2));
 					align-items: center;
 					border: var(--border-width-thin) solid var(--color-content-disabled);
@@ -54,13 +54,13 @@ export class SDRadioElement extends SDOptionElement {
                  */
 
 				& input:checked {
-					& + span {
+					& + span[role="radio"] {
 						background: var(--color-surface-accent);
 						border-color: var(--color-content-disabled);
 						border-radius: var(--rounding-full);
 					}
 
-					& + span::before {
+					& + span[role="radio"]::before {
 						content: "";
 						background: var(--color-surface-ondark);
 						border-radius: var(--rounding-full);
@@ -79,7 +79,7 @@ export class SDRadioElement extends SDOptionElement {
 					color: var(--color-content-disabled);
 				}
 
-				& input:disabled + span {
+				& input:disabled + span[role="radio"] {
 					border-color: var(--color-border-subtle-disabled);
 				}
 
@@ -88,11 +88,11 @@ export class SDRadioElement extends SDOptionElement {
                  */
 
 				& input:checked:disabled {
-					& + span {
+					& + span[role="radio"] {
 						background-color: var(--color-surface-disabled);
 					}
 
-					& + span::before {
+					& + span[role="radio"]::before {
 						background-color: var(--color-content-disabled);
 					}
 				}
@@ -101,7 +101,7 @@ export class SDRadioElement extends SDOptionElement {
                  * Focus
                  */
 
-				& input:focus-visible + span {
+				& input:focus-visible + span[role="radio"] {
 					box-shadow: var(--highlight-box-shadow);
 					outline: var(--highlight-outline--focus);
 					outline-offset: var(--highlight-outline-offset);
@@ -125,6 +125,11 @@ export class SDRadioElement extends SDOptionElement {
 	})
 	public accessor checked: boolean = false;
 
+	/**
+	 * Fallback label, derived from the original inner text of this element when creating the render root.
+	 */
+	#fallbackLabel: string | undefined;
+
 	/**
 	 * @inheritdoc
 	 */
@@ -150,31 +155,40 @@ export class SDRadioElement extends SDOptionElement {
 	/**
 	 * @inheritdoc
 	 */
-	protected override createRenderRoot(): HTMLElement | DocumentFragment {
-		// Shadow root has to be open to allow for joining named radio buttons.
-		this.innerHTML = "";
-		return this;
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	protected override render(): TemplateResult {
+	public override render(): TemplateResult {
 		return html`
-			<label class="sd-radio-container" @mousedown=${preventDoubleClickSelection}>
+			<label
+				class="sd-radio-container"
+				@mousedown=${preventDoubleClickSelection}
+				@change=${(ev: Event): void => {
+					// Propagate the change on the component.
+					ev.stopImmediatePropagation();
+					this.dispatchEvent(new Event("change"));
+				}}
+			>
 				<input
 					name=${ifDefined(this.name)}
 					type="radio"
-					value=${ifDefined(this.value)}
 					tabindex=${ifDefined(this.disabled ? undefined : 0)}
 					.checked=${this.checked}
 					.disabled=${this.disabled}
 				/>
 				<span role="radio" aria-checked=${this.checked}></span>
-				${this.label}
+				${this.label ?? this.#fallbackLabel}
 			</label>
 		`;
 	}
+
+	/**
+	 * @inheritdoc
+	 */
+	protected override createRenderRoot(): HTMLElement | DocumentFragment {
+		// Shadow root has to be open to allow for joining named radio buttons.
+		this.#fallbackLabel = this.innerText;
+		this.innerHTML = "";
+
+		return this;
+	}
 }
 
 declare global {

From 7fb40a22b92ec2dae99e5efd5fdaa5447632da5a Mon Sep 17 00:00:00 2001
From: Richard Herman <geekyeggo@users.noreply.github.com>
Date: Sun, 3 Nov 2024 18:44:51 +0000
Subject: [PATCH 4/8] refactor: update radio group to use dynamic slots, and
 remove List mixin

---
 src/ui/components/option.ts               |   2 +-
 src/ui/components/radio-group.ts          |  51 +++++---
 src/ui/components/radio.ts                |   2 +-
 src/ui/controllers/mutation-controller.ts | 134 ++++++++++++++++++++++
 src/ui/controllers/option-observer.ts     |  97 ----------------
 src/ui/mixins/list.ts                     |  78 -------------
 6 files changed, 168 insertions(+), 196 deletions(-)
 create mode 100644 src/ui/controllers/mutation-controller.ts
 delete mode 100644 src/ui/controllers/option-observer.ts
 delete mode 100644 src/ui/mixins/list.ts

diff --git a/src/ui/components/option.ts b/src/ui/components/option.ts
index 7435e04..0c6354e 100644
--- a/src/ui/components/option.ts
+++ b/src/ui/components/option.ts
@@ -11,7 +11,7 @@ export class SDOptionElement extends LitElement {
 	/**
 	 * Private backing field for {@link SDOptionElement.value}.
 	 */
-	#value: boolean | number | string | undefined | null = null;
+	#value: boolean | number | string | null | undefined = null;
 
 	/**
 	 * Determines whether the option is disabled; default `false`.
diff --git a/src/ui/components/radio-group.ts b/src/ui/components/radio-group.ts
index b844bdc..99ddcc9 100644
--- a/src/ui/components/radio-group.ts
+++ b/src/ui/components/radio-group.ts
@@ -1,17 +1,16 @@
 import { css, html, LitElement, type TemplateResult } from "lit";
 import { customElement } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 import { repeat } from "lit/directives/repeat.js";
 
+import { MutationController } from "../controllers/mutation-controller";
 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 List(Input<boolean | number | string>(LitElement)) {
+export class SDRadioGroupElement extends Input<boolean | number | string>(LitElement) {
 	/**
 	 * @inheritdoc
 	 */
@@ -19,33 +18,47 @@ export class SDRadioGroupElement extends List(Input<boolean | number | string>(L
 		super.styles ?? [],
 		...SDRadioElement.styles,
 		css`
-			sd-radio {
+			::slotted(sd-radio) {
 				display: flex;
 			}
 		`,
 	];
 
+	/**
+	 * Mutation controller that tracks the child radio buttons.
+	 */
+	readonly #childObserver = new MutationController<SDRadioElement>(
+		this,
+		(node: Node): node is SDRadioElement => node instanceof SDRadioElement,
+	);
+
+	/**
+	 * Handles a child radio button changing.
+	 * @param ev Source event.
+	 */
+	readonly #handleChildChanged = (ev: Event): void => {
+		if (ev.target instanceof SDRadioElement) {
+			this.value = ev.target.value;
+		} else {
+			console.warn("Unrecognized change event in SDRadioGroupElement", ev);
+		}
+	};
+
 	/**
 	 * @inheritdoc
 	 */
 	public override render(): TemplateResult {
 		return html`
 			${repeat(
-				this.items,
-				({ key }) => key,
-				({ disabled, label, value }) => {
-					return html`
-						<sd-radio
-							name="radio"
-							value=${ifDefined(value)}
-							.checked=${this.value === value}
-							.disabled=${disabled}
-							.label=${label}
-							@change=${(): void => {
-								this.value = value;
-							}}
-						></sd-radio>
-					`;
+				this.#childObserver.nodes,
+				(opt) => opt,
+				(opt, i) => {
+					opt.addEventListener("change", this.#handleChildChanged);
+					opt.checked = this.value === opt.value;
+					opt.name = "radio";
+					opt.slot = i.toString();
+
+					return html`<slot name=${i}></slot>`;
 				},
 			)}
 		`;
diff --git a/src/ui/components/radio.ts b/src/ui/components/radio.ts
index 97de042..52ef006 100644
--- a/src/ui/components/radio.ts
+++ b/src/ui/components/radio.ts
@@ -182,7 +182,7 @@ export class SDRadioElement extends SDOptionElement {
 	/**
 	 * @inheritdoc
 	 */
-	protected override createRenderRoot(): HTMLElement | DocumentFragment {
+	protected override createRenderRoot(): DocumentFragment | HTMLElement {
 		// Shadow root has to be open to allow for joining named radio buttons.
 		this.#fallbackLabel = this.innerText;
 		this.innerHTML = "";
diff --git a/src/ui/controllers/mutation-controller.ts b/src/ui/controllers/mutation-controller.ts
new file mode 100644
index 0000000..9f38234
--- /dev/null
+++ b/src/ui/controllers/mutation-controller.ts
@@ -0,0 +1,134 @@
+import { ReactiveController, ReactiveControllerHost } from "lit";
+
+/**
+ * Controller for tracking filtered mutations within a host.
+ */
+export class MutationController<T extends Node> implements ReactiveController {
+	/**
+	 * Current nodes within the host that match the filter.
+	 */
+	public readonly nodes: T[] = [];
+
+	/**
+	 * Host this controller is attached to.
+	 */
+	readonly #host: HTMLElement & ReactiveControllerHost;
+
+	/**
+	 * Underlying mutation observer monitoring changes to the shadow DOM.
+	 */
+	readonly #observer: MutationObserver;
+
+	/**
+	 * Predicate that determines if the node is tracked by the host.
+	 */
+	readonly #predicate: (node: Node) => node is T;
+
+	/**
+	 * Initializes a new instance of the {@link MutationController} class.
+	 * @param host Host to attached to.
+	 * @param predicate Function that determines if a node should be tracked.
+	 */
+	constructor(host: HTMLElement & ReactiveControllerHost, predicate: (node: Node) => node is T) {
+		this.#host = host;
+		this.#host.addController(this);
+		this.#predicate = predicate;
+
+		this.#observer = new MutationObserver((mutations: MutationRecord[]) => this.#onMutation(mutations));
+		this.#setNodesByQueryingHost();
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public hostConnected(): void {
+		this.#observer.observe(this.#host, {
+			childList: true,
+		});
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public hostDisconnected(): void {
+		this.#observer.disconnect();
+	}
+
+	/**
+	 * Evaluates a mutation, and determines whether a rebuild is required, or whether the collection of nodes changed.
+	 * @param mutations Mutations that occurred.
+	 * @returns Result of the evaluation.
+	 */
+	#evaluateMutation(mutations: MutationRecord[]): MutationEvaluationResult {
+		const result: MutationEvaluationResult = {
+			rebuildNodes: false,
+			requestUpdate: false,
+		};
+
+		for (const { addedNodes, removedNodes } of mutations) {
+			// When a new node was added, simply rebuild the collection of nodes to maintain correct ordering.
+			for (const added of addedNodes) {
+				if (this.#predicate(added)) {
+					result.rebuildNodes = true;
+					result.requestUpdate = true;
+
+					return result;
+				}
+			}
+
+			// When a node was removed, remove it from the collection, but continue the evaluation.
+			for (const removed of removedNodes) {
+				if (this.#predicate(removed)) {
+					const index = this.nodes.indexOf(removed);
+					if (index !== -1) {
+						this.nodes.splice(index, 1);
+						result.requestUpdate = true;
+					}
+				}
+			}
+		}
+
+		return result;
+	}
+
+	/**
+	 * Handles a mutation on the host's shadow DOM, updating the tracked collection of nodes.
+	 * @param mutations Mutations that occurred.
+	 */
+	#onMutation(mutations: MutationRecord[]): void {
+		const { rebuildNodes, requestUpdate } = this.#evaluateMutation(mutations);
+
+		if (rebuildNodes) {
+			this.#setNodesByQueryingHost();
+			this.#host.requestUpdate();
+		} else if (requestUpdate) {
+			this.#host.requestUpdate();
+		}
+	}
+
+	/**
+	 * Sets the nodes associated with this instance by querying the host.
+	 */
+	#setNodesByQueryingHost(): void {
+		this.#host.querySelectorAll(":scope > *").forEach((node) => {
+			if (this.#predicate(node)) {
+				this.nodes.push(node);
+			}
+		});
+	}
+}
+
+/**
+ * Result of evaluating a mutation of nodes.
+ */
+type MutationEvaluationResult = {
+	/**
+	 * Determines whether the collection of nodes should be rebuilt from the host.
+	 */
+	rebuildNodes: boolean;
+
+	/**
+	 * Determines whether an update is requested.
+	 */
+	requestUpdate: boolean;
+};
diff --git a/src/ui/controllers/option-observer.ts b/src/ui/controllers/option-observer.ts
deleted file mode 100644
index 8d45d24..0000000
--- a/src/ui/controllers/option-observer.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import { ReactiveController, ReactiveControllerHost } from "lit";
-
-import { SDRadioElement } from "../components";
-import { SDOptionElement } from "../components/option";
-
-/**
- * Controller for tracking {@link SDOptionElement} elements within a host.
- */
-export class OptionObserver implements ReactiveController {
-	/**
-	 * Current options within the host.
-	 */
-	public readonly options: (SDOptionElement | SDRadioElement)[];
-
-	/**
-	 * Host this controller is attached to.
-	 */
-	readonly #host: HTMLElement & ReactiveControllerHost;
-
-	/**
-	 * Underlying mutation observer monitoring changes to the shadow DOM.
-	 */
-	readonly #observer: MutationObserver;
-
-	/**
-	 * Initializes a new instance of the {@link OptionObserver} class.
-	 * @param host Host to attached to.
-	 */
-	constructor(host: HTMLElement & ReactiveControllerHost) {
-		this.#host = host;
-		this.#observer = new MutationObserver((mutations: MutationRecord[]) => this.#onMutation(mutations));
-
-		// Add the controller, and determine the initial set of options.
-		this.#host.addController(this);
-		this.options = Array.from(this.#host.querySelectorAll("sd-option, sd-radio"));
-	}
-
-	/**
-	 * @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 {@link SDOptionElement}.
-	 * @param mutations Mutations that occurred.
-	 */
-	#onMutation(mutations: MutationRecord[]): void {
-		let changed = false;
-
-		mutations.forEach((mutation) => {
-			// Added.
-			for (const added of mutation.addedNodes) {
-				if (this.#isObservedElement(added)) {
-					changed = true;
-					this.options.push(added);
-				}
-			}
-
-			// Removed.
-			mutation.removedNodes.forEach((removed) => {
-				if (!this.#isObservedElement(removed)) {
-					return;
-				}
-
-				const index = this.options.indexOf(removed);
-				if (index !== -1) {
-					changed = true;
-					this.options.splice(index, 1);
-				}
-			});
-		});
-
-		if (changed) {
-			this.#host.requestUpdate();
-		}
-	}
-
-	/**
-	 * Determines whether the specified node is an instance of an element this observer is tracking.
-	 * @param node Node instance to check.
-	 * @returns `true` when the node is an instance of an observed element type; otherwise `false`.
-	 */
-	#isObservedElement(node: Node): node is SDOptionElement | SDRadioElement {
-		return node instanceof SDOptionElement || node instanceof SDRadioElement;
-	}
-}
diff --git a/src/ui/mixins/list.ts b/src/ui/mixins/list.ts
deleted file mode 100644
index aad0664..0000000
--- a/src/ui/mixins/list.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { LitElement } from "lit";
-
-import type { Constructor } from "../../common/utils";
-import type { SDOptionElement } from "../components/option";
-import type { SDRadioElement } from "../components/radio";
-import { OptionObserver } from "../controllers/option-observer";
-
-/**
- * List mixin that provides common functionality for input elements that have options.
- * @param superClass Class the mixin extends.
- * @returns List mixin class.
- */
-export const List = <TBase extends Constructor<LitElement> = typeof LitElement>(
-	superClass: TBase,
-): Constructor<SDListElement> & TBase => {
-	/**
-	 * List mixin that provides common functionality for input elements that have options.
-	 */
-	class ListMixin extends superClass {
-		/**
-		 * Mutation observer for monitoring {@link SDOptionElement} within the shadow DOM of this instance.
-		 */
-		readonly #domObserver = new OptionObserver(this);
-
-		/**
-		 * Gets the items within the list.
-		 * @returns The list items.
-		 */
-		public get items(): Iterable<ListItem> {
-			return this.#domObserver.options.map((opt: SDOptionElement | SDRadioElement): ListItem => {
-				return {
-					disabled: opt.disabled,
-					key: opt,
-					label: opt.label,
-					value: opt.value,
-				};
-			});
-		}
-	}
-
-	return ListMixin as unknown as Constructor<SDListElement> & TBase;
-};
-
-/**
- * List mixin that provides common functionality for input elements that have options.
- */
-export declare class SDListElement extends LitElement {
-	/**
-	 * Gets the items within the list.
-	 * @returns The list items.
-	 */
-	public get items(): Iterable<ListItem>;
-}
-
-/**
- * Information about an item within a list.
- */
-export type ListItem = {
-	/**
-	 * Determines whether the list item is disabled.
-	 */
-	disabled: boolean;
-
-	/**
-	 * Unique key that identifies the list item.
-	 */
-	key: unknown;
-
-	/**
-	 * Label of the list item.
-	 */
-	label: string | undefined;
-
-	/**
-	 * Value of the list item.
-	 */
-	value: boolean | number | string | undefined;
-};

From c2e171d025b00137f7c8dc3a16f33a1baa4d6325 Mon Sep 17 00:00:00 2001
From: Richard Herman <geekyeggo@users.noreply.github.com>
Date: Sun, 3 Nov 2024 20:44:12 +0000
Subject: [PATCH 5/8] perf: improve rendering of radio buttons within a radio
 group

---
 src/ui/components/option.ts               |  5 ++-
 src/ui/components/radio-group.ts          | 50 +++++++++++------------
 src/ui/components/radio.ts                | 10 ++---
 src/ui/controllers/mutation-controller.ts | 22 +++++++++-
 4 files changed, 52 insertions(+), 35 deletions(-)

diff --git a/src/ui/components/option.ts b/src/ui/components/option.ts
index 0c6354e..2b6b179 100644
--- a/src/ui/components/option.ts
+++ b/src/ui/components/option.ts
@@ -16,7 +16,10 @@ export class SDOptionElement extends LitElement {
 	/**
 	 * Determines whether the option is disabled; default `false`.
 	 */
-	@property({ type: Boolean })
+	@property({
+		reflect: true,
+		type: Boolean,
+	})
 	public accessor disabled: boolean = false;
 
 	/**
diff --git a/src/ui/components/radio-group.ts b/src/ui/components/radio-group.ts
index 99ddcc9..a103c2a 100644
--- a/src/ui/components/radio-group.ts
+++ b/src/ui/components/radio-group.ts
@@ -18,7 +18,7 @@ export class SDRadioGroupElement extends Input<boolean | number | string>(LitEle
 		super.styles ?? [],
 		...SDRadioElement.styles,
 		css`
-			::slotted(sd-radio) {
+			sd-radio {
 				display: flex;
 			}
 		`,
@@ -30,38 +30,34 @@ export class SDRadioGroupElement extends Input<boolean | number | string>(LitEle
 	readonly #childObserver = new MutationController<SDRadioElement>(
 		this,
 		(node: Node): node is SDRadioElement => node instanceof SDRadioElement,
+		{
+			attributes: true,
+			attributeFilter: ["disabled"],
+			subtree: true,
+		},
 	);
 
-	/**
-	 * Handles a child radio button changing.
-	 * @param ev Source event.
-	 */
-	readonly #handleChildChanged = (ev: Event): void => {
-		if (ev.target instanceof SDRadioElement) {
-			this.value = ev.target.value;
-		} else {
-			console.warn("Unrecognized change event in SDRadioGroupElement", ev);
-		}
-	};
-
 	/**
 	 * @inheritdoc
 	 */
 	public override render(): TemplateResult {
-		return html`
-			${repeat(
-				this.#childObserver.nodes,
-				(opt) => opt,
-				(opt, i) => {
-					opt.addEventListener("change", this.#handleChildChanged);
-					opt.checked = this.value === opt.value;
-					opt.name = "radio";
-					opt.slot = i.toString();
-
-					return html`<slot name=${i}></slot>`;
-				},
-			)}
-		`;
+		return html` ${repeat(
+			this.#childObserver.nodes,
+			(radio) => radio,
+			(radio) => html`
+				<sd-radio
+					name="radio"
+					.checked=${this.value === radio.value}
+					.label=${radio.label}
+					.disabled=${radio.disabled}
+					.value=${radio.value}
+					@change=${(): void => {
+						this.value = radio.value;
+					}}
+					>${radio.innerText}</sd-radio
+				>
+			`,
+		)}`;
 	}
 }
 
diff --git a/src/ui/components/radio.ts b/src/ui/components/radio.ts
index 52ef006..477a3e5 100644
--- a/src/ui/components/radio.ts
+++ b/src/ui/components/radio.ts
@@ -10,11 +10,6 @@ import { SDOptionElement } from "./option";
  */
 @customElement("sd-radio")
 export class SDRadioElement extends SDOptionElement {
-	/**
-	 * Determines whether the shared styles have already been appended to the document.
-	 */
-	static #isStyleAppended = false;
-
 	/**
 	 * @inheritdoc
 	 */
@@ -110,6 +105,11 @@ export class SDRadioElement extends SDOptionElement {
 		`,
 	];
 
+	/**
+	 * Determines whether the shared styles have already been appended to the document.
+	 */
+	static #isStyleAppended = false;
+
 	/**
 	 * Name of the radio button group the element is associated with.
 	 */
diff --git a/src/ui/controllers/mutation-controller.ts b/src/ui/controllers/mutation-controller.ts
index 9f38234..0d784c4 100644
--- a/src/ui/controllers/mutation-controller.ts
+++ b/src/ui/controllers/mutation-controller.ts
@@ -19,6 +19,11 @@ export class MutationController<T extends Node> implements ReactiveController {
 	 */
 	readonly #observer: MutationObserver;
 
+	/**
+	 * Mutation observation options.
+	 */
+	readonly #options?: MutationObserverInit;
+
 	/**
 	 * Predicate that determines if the node is tracked by the host.
 	 */
@@ -28,11 +33,17 @@ export class MutationController<T extends Node> implements ReactiveController {
 	 * Initializes a new instance of the {@link MutationController} class.
 	 * @param host Host to attached to.
 	 * @param predicate Function that determines if a node should be tracked.
+	 * @param options Mutation observation options; by default only `childList` is true.
 	 */
-	constructor(host: HTMLElement & ReactiveControllerHost, predicate: (node: Node) => node is T) {
+	constructor(
+		host: HTMLElement & ReactiveControllerHost,
+		predicate: (node: Node) => node is T,
+		options?: MutationObserverInit,
+	) {
 		this.#host = host;
 		this.#host.addController(this);
 		this.#predicate = predicate;
+		this.#options = options;
 
 		this.#observer = new MutationObserver((mutations: MutationRecord[]) => this.#onMutation(mutations));
 		this.#setNodesByQueryingHost();
@@ -44,6 +55,7 @@ export class MutationController<T extends Node> implements ReactiveController {
 	public hostConnected(): void {
 		this.#observer.observe(this.#host, {
 			childList: true,
+			...(this.#options || {}),
 		});
 	}
 
@@ -65,7 +77,7 @@ export class MutationController<T extends Node> implements ReactiveController {
 			requestUpdate: false,
 		};
 
-		for (const { addedNodes, removedNodes } of mutations) {
+		for (const { addedNodes, removedNodes, target, type } of mutations) {
 			// When a new node was added, simply rebuild the collection of nodes to maintain correct ordering.
 			for (const added of addedNodes) {
 				if (this.#predicate(added)) {
@@ -86,6 +98,11 @@ export class MutationController<T extends Node> implements ReactiveController {
 					}
 				}
 			}
+
+			// When an attribute changed, check if it originates from a tracked node.
+			if (type === "attributes" && this.#predicate(target)) {
+				result.requestUpdate = true;
+			}
 		}
 
 		return result;
@@ -110,6 +127,7 @@ export class MutationController<T extends Node> implements ReactiveController {
 	 * Sets the nodes associated with this instance by querying the host.
 	 */
 	#setNodesByQueryingHost(): void {
+		this.nodes.length = 0;
 		this.#host.querySelectorAll(":scope > *").forEach((node) => {
 			if (this.#predicate(node)) {
 				this.nodes.push(node);

From 909ba46660f8000f83618ba128858e189d55d08f Mon Sep 17 00:00:00 2001
From: Richard Herman <geekyeggo@users.noreply.github.com>
Date: Mon, 4 Nov 2024 10:37:01 +0000
Subject: [PATCH 6/8] refactor: update radio group to use a slot

---
 src/ui/components/radio-group.ts | 74 +++++++++++++++++++-------------
 src/ui/components/radio.ts       |  2 +-
 2 files changed, 44 insertions(+), 32 deletions(-)

diff --git a/src/ui/components/radio-group.ts b/src/ui/components/radio-group.ts
index a103c2a..f745abd 100644
--- a/src/ui/components/radio-group.ts
+++ b/src/ui/components/radio-group.ts
@@ -1,8 +1,6 @@
 import { css, html, LitElement, type TemplateResult } from "lit";
-import { customElement } from "lit/decorators.js";
-import { repeat } from "lit/directives/repeat.js";
+import { customElement, queryAssignedElements } from "lit/decorators.js";
 
-import { MutationController } from "../controllers/mutation-controller";
 import { Input } from "../mixins/input";
 import { SDRadioElement } from "./radio";
 
@@ -18,46 +16,60 @@ export class SDRadioGroupElement extends Input<boolean | number | string>(LitEle
 		super.styles ?? [],
 		...SDRadioElement.styles,
 		css`
-			sd-radio {
+			::slotted(sd-radio) {
 				display: flex;
 			}
 		`,
 	];
 
 	/**
-	 * Mutation controller that tracks the child radio buttons.
+	 * Radio buttons associated with this group.
 	 */
-	readonly #childObserver = new MutationController<SDRadioElement>(
-		this,
-		(node: Node): node is SDRadioElement => node instanceof SDRadioElement,
-		{
-			attributes: true,
-			attributeFilter: ["disabled"],
-			subtree: true,
-		},
-	);
+	@queryAssignedElements({ selector: "sd-radio" })
+	accessor #radioButtons!: Array<SDRadioElement>;
 
 	/**
 	 * @inheritdoc
 	 */
 	public override render(): TemplateResult {
-		return html` ${repeat(
-			this.#childObserver.nodes,
-			(radio) => radio,
-			(radio) => html`
-				<sd-radio
-					name="radio"
-					.checked=${this.value === radio.value}
-					.label=${radio.label}
-					.disabled=${radio.disabled}
-					.value=${radio.value}
-					@change=${(): void => {
-						this.value = radio.value;
-					}}
-					>${radio.innerText}</sd-radio
-				>
-			`,
-		)}`;
+		return html`
+			<slot
+				@change=${(ev: Event): void => {
+					if (ev.target instanceof SDRadioElement) {
+						this.value = ev.target.value;
+					}
+				}}
+				@slotchange=${(): void => this.#setRadioButtonProperties()}
+			></slot>
+		`;
+	}
+
+	/**
+	 * @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;
+			}
+		}
 	}
 }
 
diff --git a/src/ui/components/radio.ts b/src/ui/components/radio.ts
index 477a3e5..c5a4904 100644
--- a/src/ui/components/radio.ts
+++ b/src/ui/components/radio.ts
@@ -163,7 +163,7 @@ export class SDRadioElement extends SDOptionElement {
 				@change=${(ev: Event): void => {
 					// Propagate the change on the component.
 					ev.stopImmediatePropagation();
-					this.dispatchEvent(new Event("change"));
+					this.dispatchEvent(new Event("change", { bubbles: true }));
 				}}
 			>
 				<input

From 743c5636acbecf2ab31602499f8ee59ce7acd10e Mon Sep 17 00:00:00 2001
From: Richard Herman <geekyeggo@users.noreply.github.com>
Date: Mon, 4 Nov 2024 17:55:09 +0000
Subject: [PATCH 7/8] refactor: switch to sd-option to allow for CheckBoxList
 support

---
 src/ui/components/option.ts               |   8 ++
 src/ui/components/radio-group.ts          |  67 ++++------
 src/ui/controllers/mutation-controller.ts | 152 ----------------------
 src/ui/controllers/option-controller.ts   | 105 +++++++++++++++
 src/ui/mixins/list.ts                     |  45 +++++++
 5 files changed, 180 insertions(+), 197 deletions(-)
 delete mode 100644 src/ui/controllers/mutation-controller.ts
 create mode 100644 src/ui/controllers/option-controller.ts
 create mode 100644 src/ui/mixins/list.ts

diff --git a/src/ui/components/option.ts b/src/ui/components/option.ts
index 2b6b179..68af222 100644
--- a/src/ui/components/option.ts
+++ b/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
 	 */
diff --git a/src/ui/components/radio-group.ts b/src/ui/components/radio-group.ts
index f745abd..b6fb34c 100644
--- a/src/ui/components/radio-group.ts
+++ b/src/ui/components/radio-group.ts
@@ -1,14 +1,16 @@
 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
 	 */
@@ -16,61 +18,36 @@ export class SDRadioGroupElement extends Input<boolean | number | string>(LitEle
 		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 {
diff --git a/src/ui/controllers/mutation-controller.ts b/src/ui/controllers/mutation-controller.ts
deleted file mode 100644
index 0d784c4..0000000
--- a/src/ui/controllers/mutation-controller.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-import { ReactiveController, ReactiveControllerHost } from "lit";
-
-/**
- * Controller for tracking filtered mutations within a host.
- */
-export class MutationController<T extends Node> implements ReactiveController {
-	/**
-	 * Current nodes within the host that match the filter.
-	 */
-	public readonly nodes: T[] = [];
-
-	/**
-	 * Host this controller is attached to.
-	 */
-	readonly #host: HTMLElement & ReactiveControllerHost;
-
-	/**
-	 * Underlying mutation observer monitoring changes to the shadow DOM.
-	 */
-	readonly #observer: MutationObserver;
-
-	/**
-	 * Mutation observation options.
-	 */
-	readonly #options?: MutationObserverInit;
-
-	/**
-	 * Predicate that determines if the node is tracked by the host.
-	 */
-	readonly #predicate: (node: Node) => node is T;
-
-	/**
-	 * Initializes a new instance of the {@link MutationController} class.
-	 * @param host Host to attached to.
-	 * @param predicate Function that determines if a node should be tracked.
-	 * @param options Mutation observation options; by default only `childList` is true.
-	 */
-	constructor(
-		host: HTMLElement & ReactiveControllerHost,
-		predicate: (node: Node) => node is T,
-		options?: MutationObserverInit,
-	) {
-		this.#host = host;
-		this.#host.addController(this);
-		this.#predicate = predicate;
-		this.#options = options;
-
-		this.#observer = new MutationObserver((mutations: MutationRecord[]) => this.#onMutation(mutations));
-		this.#setNodesByQueryingHost();
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	public hostConnected(): void {
-		this.#observer.observe(this.#host, {
-			childList: true,
-			...(this.#options || {}),
-		});
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	public hostDisconnected(): void {
-		this.#observer.disconnect();
-	}
-
-	/**
-	 * Evaluates a mutation, and determines whether a rebuild is required, or whether the collection of nodes changed.
-	 * @param mutations Mutations that occurred.
-	 * @returns Result of the evaluation.
-	 */
-	#evaluateMutation(mutations: MutationRecord[]): MutationEvaluationResult {
-		const result: MutationEvaluationResult = {
-			rebuildNodes: false,
-			requestUpdate: false,
-		};
-
-		for (const { addedNodes, removedNodes, target, type } of mutations) {
-			// When a new node was added, simply rebuild the collection of nodes to maintain correct ordering.
-			for (const added of addedNodes) {
-				if (this.#predicate(added)) {
-					result.rebuildNodes = true;
-					result.requestUpdate = true;
-
-					return result;
-				}
-			}
-
-			// When a node was removed, remove it from the collection, but continue the evaluation.
-			for (const removed of removedNodes) {
-				if (this.#predicate(removed)) {
-					const index = this.nodes.indexOf(removed);
-					if (index !== -1) {
-						this.nodes.splice(index, 1);
-						result.requestUpdate = true;
-					}
-				}
-			}
-
-			// When an attribute changed, check if it originates from a tracked node.
-			if (type === "attributes" && this.#predicate(target)) {
-				result.requestUpdate = true;
-			}
-		}
-
-		return result;
-	}
-
-	/**
-	 * Handles a mutation on the host's shadow DOM, updating the tracked collection of nodes.
-	 * @param mutations Mutations that occurred.
-	 */
-	#onMutation(mutations: MutationRecord[]): void {
-		const { rebuildNodes, requestUpdate } = this.#evaluateMutation(mutations);
-
-		if (rebuildNodes) {
-			this.#setNodesByQueryingHost();
-			this.#host.requestUpdate();
-		} else if (requestUpdate) {
-			this.#host.requestUpdate();
-		}
-	}
-
-	/**
-	 * Sets the nodes associated with this instance by querying the host.
-	 */
-	#setNodesByQueryingHost(): void {
-		this.nodes.length = 0;
-		this.#host.querySelectorAll(":scope > *").forEach((node) => {
-			if (this.#predicate(node)) {
-				this.nodes.push(node);
-			}
-		});
-	}
-}
-
-/**
- * Result of evaluating a mutation of nodes.
- */
-type MutationEvaluationResult = {
-	/**
-	 * Determines whether the collection of nodes should be rebuilt from the host.
-	 */
-	rebuildNodes: boolean;
-
-	/**
-	 * Determines whether an update is requested.
-	 */
-	requestUpdate: boolean;
-};
diff --git a/src/ui/controllers/option-controller.ts b/src/ui/controllers/option-controller.ts
new file mode 100644
index 0000000..f47d956
--- /dev/null
+++ b/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();
+	}
+}
diff --git a/src/ui/mixins/list.ts b/src/ui/mixins/list.ts
new file mode 100644
index 0000000..0b45cdc
--- /dev/null
+++ b/src/ui/mixins/list.ts
@@ -0,0 +1,45 @@
+import { LitElement } from "lit";
+
+import type { Constructor } from "../../common/utils";
+import { SDOptionElement } from "../components/option";
+import { OptionController } from "../controllers/option-controller";
+
+/**
+ * List mixin that provides common functionality for input elements that have options.
+ * @param superClass Class the mixin extends.
+ * @returns List mixin class.
+ */
+export const List = <TBase extends Constructor<LitElement> = typeof LitElement>(
+	superClass: TBase,
+): Constructor<SDListElement> & TBase => {
+	/**
+	 * List mixin that provides common functionality for input elements that have options.
+	 */
+	class ListMixin extends superClass {
+		/**
+		 * Option observer for monitoring {@link SDOptionElement} within this instance.
+		 */
+		readonly #optionObserver = new OptionController(this);
+
+		/**
+		 * Gets the items within the list.
+		 * @returns The list items.
+		 */
+		public get items(): Iterable<SDOptionElement> {
+			return this.#optionObserver.options;
+		}
+	}
+
+	return ListMixin as unknown as Constructor<SDListElement> & TBase;
+};
+
+/**
+ * List mixin that provides common functionality for input elements that have options.
+ */
+export declare class SDListElement extends LitElement {
+	/**
+	 * Gets the items within the list.
+	 * @returns The list items.
+	 */
+	public get items(): Iterable<SDOptionElement>;
+}

From 5446ed35211432b926294e0084d3cc58dbf7e6da Mon Sep 17 00:00:00 2001
From: Richard Herman <geekyeggo@users.noreply.github.com>
Date: Mon, 4 Nov 2024 18:30:52 +0000
Subject: [PATCH 8/8] style: fix linting

---
 src/ui/components/radio-group.ts        |  2 +-
 src/ui/controllers/option-controller.ts | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/ui/components/radio-group.ts b/src/ui/components/radio-group.ts
index b6fb34c..8f455b0 100644
--- a/src/ui/components/radio-group.ts
+++ b/src/ui/components/radio-group.ts
@@ -39,7 +39,7 @@ export class SDRadioGroupElement extends List(Input<boolean | number | string>(L
 						.disabled=${opt.disabled}
 						.label=${opt.label}
 						.value=${opt.value}
-						@change=${() => {
+						@change=${(): void => {
 							this.value = opt.value;
 						}}
 						>${opt.innerText}</sd-radio
diff --git a/src/ui/controllers/option-controller.ts b/src/ui/controllers/option-controller.ts
index f47d956..1af82ac 100644
--- a/src/ui/controllers/option-controller.ts
+++ b/src/ui/controllers/option-controller.ts
@@ -1,6 +1,6 @@
 import { ReactiveController, ReactiveControllerHost } from "lit";
 
-import { SDOptionElement } from "../components";
+import { SDOptionElement } from "../components/option";
 
 /**
  * Controller for tracking {@link SDOptionElement} within a host.
@@ -33,7 +33,7 @@ export class OptionController implements ReactiveController {
 	constructor(host: HTMLElement & ReactiveControllerHost) {
 		this.#host = host;
 		this.#host.addController(this);
-		this.#requestUpdate = () => this.#host.requestUpdate();
+		this.#requestUpdate = (): void => this.#host.requestUpdate();
 
 		this.#observer = new MutationObserver((mutations: MutationRecord[]) => this.#onMutation(mutations));
 		this.#setOptionsByQueryingHost();
@@ -60,7 +60,7 @@ export class OptionController implements ReactiveController {
 	#onMutation(mutations: MutationRecord[]): void {
 		let isOptionRemoved = false;
 
-		for (const { addedNodes, removedNodes, target, type } of mutations) {
+		for (const { addedNodes, removedNodes } 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) {
@@ -96,7 +96,11 @@ export class OptionController implements ReactiveController {
 		this.options.length = 0;
 
 		this.#host.querySelectorAll(":scope > sd-option").forEach((option) => {
-			this.options.push(<SDOptionElement>option);
+			if (!(option instanceof SDOptionElement)) {
+				return;
+			}
+
+			this.options.push(option);
 			option.addEventListener("update", this.#requestUpdate);
 		});