@threadlabs/looma 0.23.19 → 0.23.20

package/components/shared/radio-group.js

@@ -0,0 +1,27 @@
+const groups = new WeakMap();
+const radios = new WeakMap();
+
+// Native names own exclusivity and defaultChecked owns form reset. A group's model also has to
+// update a child's reactive checked binding, which otherwise can overwrite the native property
+// after controller startup. Coordinate through native elements, independently of the adapter.
+export function checkRadio(input, checked) {
+  radios.get(input)?.(checked);
+  input.checked = checked;
+}
+
+export function radioGroupOwns(input) {
+  return groups.has(input.closest('[role="radiogroup"]'));
+}
+
+/** Register a group's selection callback until its controller disconnects. */
+export function connectRadioGroup(element, apply) {
+  groups.set(element, apply);
+  return () => groups.delete(element);
+}
+
+/** Join a live group, or let its later startup find this control's checked binding. */
+export function connectRadio(input, update) {
+  radios.set(input, update);
+  groups.get(input.closest('[role="radiogroup"]'))?.(input);
+  return () => radios.delete(input);
+}

package/components/ui-radio/ui-radio.js

@@ -1,5 +1,6 @@
 import { afterFormReset } from "../shared/form-reset.js";
 import { describeInput } from "../shared/describe.js";
+import { connectRadio, radioGroupOwns } from "../shared/radio-group.js";
 import { trackTrigger } from "../shared/trigger.js";
 
 // `checked` sets the control initially and whenever it changes; the user's changes update the state.
@@ -9,13 +10,15 @@ export default function controller(host) {
   const input = host.refs.input;
   describeInput(input, host.refs.description);
   const [trigger, stopTracking] = trackTrigger(host);
+  const stopRadio = connectRadio(input, (checked) => { host.state.internalChecked = checked; });
   let external = host.props.checked.value;
-  host.state.internalChecked = Boolean(external);
+  if (!radioGroupOwns(input)) host.state.internalChecked = Boolean(external);
   const stop = host.effect(() => {
-    input.defaultChecked = Boolean(host.props.checked.value);
+    const grouped = radioGroupOwns(input);
+    if (!grouped) input.defaultChecked = Boolean(host.props.checked.value);
     if (host.props.checked.value === external) return;
     external = host.props.checked.value;
-    host.state.internalChecked = Boolean(external);
+    if (!grouped) host.state.internalChecked = Boolean(external);
   });
   const onChange = () => {
     host.state.internalChecked = input.checked;
@@ -25,12 +28,13 @@ export default function controller(host) {
   input.addEventListener("change", onChange);
   const stopReset = afterFormReset(input, () => {
     // Inside a ui-radio-group the group's value decides, whichever reset runs first.
-    if (input.closest('[role="radiogroup"]')) return;
+    if (radioGroupOwns(input)) return;
     host.state.internalChecked = Boolean(external);
     input.checked = Boolean(external);
   });
   return () => {
     stop();
+    stopRadio();
     stopReset();
     stopTracking();
     input.removeEventListener("change", onChange);

package/components/ui-radio-group/ui-radio-group.js

@@ -1,4 +1,5 @@
 import { afterFormReset } from "../shared/form-reset.js";
+import { checkRadio, connectRadioGroup } from "../shared/radio-group.js";
 import { trackTrigger } from "../shared/trigger.js";
 
 let groups = 0;
@@ -15,6 +16,14 @@ export default function controller(host) {
   // A radio's own required survives until the group's required changes, since either one makes the
   // whole name group required.
   let required = false;
+  const apply = (input, value = host.state.internalValue) => {
+    if (required) input.required = true;
+    input.name = name;
+    checkRadio(input, input.value === value);
+    // The value prop is the choice a native form reset returns to.
+    input.defaultChecked = input.value === String(external ?? "");
+  };
+  const stopGroup = connectRadioGroup(element, apply);
   host.state.internalValue = String(external ?? "");
   const stop = host.effect(() => {
     if (host.props.value.value !== external) {
@@ -26,10 +35,7 @@ export default function controller(host) {
     required = Boolean(host.props.required.value);
     for (const input of inputs()) {
       if (applyRequired) input.required = required;
-      input.name = name;
-      input.checked = input.value === value;
-      // The value prop is the choice a form reset returns to.
-      input.defaultChecked = input.value === String(external ?? "");
+      apply(input, value);
     }
   });
   const onChange = (event) => {
@@ -44,10 +50,11 @@ export default function controller(host) {
   element.addEventListener("change", onChange);
   const stopReset = afterFormReset(element, () => {
     host.state.internalValue = String(external ?? "");
-    for (const input of inputs()) input.checked = input.value === host.state.internalValue;
+    for (const input of inputs()) checkRadio(input, input.value === host.state.internalValue);
   });
   return () => {
     stop();
+    stopGroup();
     stopReset();
     stopTracking();
     element.removeEventListener("change", onChange);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.23.19",
+  "version": "0.23.20",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",