@threadlabs/looma 0.23.19 → 0.23.21

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-combobox/ui-combobox.html

@@ -388,7 +388,7 @@
               from:disabled="disabled or readonly or item.disabled"
               from:aria-label="concat(item.label, ', press Delete or Backspace to remove')"
             >
-              <slot from:name="concat('item-', item.id)"><ui-badge $value="item.label"></ui-badge></slot>
+              <slot from:name="concat('item-', item.id)"><ui-badge>{$item.label}</ui-badge></slot>
             </button>
           </template>
           <input
@@ -467,7 +467,7 @@
     <div class="popup" $ref="popup" from:hidden="not expanded">
       <div role="listbox" $ref="listbox" from:id="concat(uid, '-listbox')" from:aria-label="concat(label, ' suggestions')" from:aria-busy="loading">
         <div $each="group of groups" $key="group.name" from:role="group.role" from:aria-label="group.label">
-          <div $if="group.name" class="group" $value="group.name"></div>
+          <div $if="group.name" class="group">{$group.name}</div>
           <div
             $each="row of group.rows"
             $key="row.id"
@@ -486,15 +486,14 @@
             <slot from:name="concat('option-', row.id)">
               <span $if="row.detail" class="detail">
                 <span class="line">
-                  <span class="primary" from:id="concat(uid, '-option-', row.index, '-label')" $value="row.label"></span>
+                  <span class="primary" from:id="concat(uid, '-option-', row.index, '-label')">{$row.label}</span>
                   <ui-badge $if="row.tag" from:tone="row.tag.tone" style:--ui-badge-color="row.tag.color"><span
                       from:id="concat(uid, '-option-', row.index, '-tag')"
-                      $value="row.tag.label"
-                    ></span></ui-badge>
+                    >{$row.tag.label}</span></ui-badge>
                 </span>
-                <span $if="row.description" class="description" from:id="concat(uid, '-option-', row.index, '-description')" $value="row.description"></span>
+                <span $if="row.description" class="description" from:id="concat(uid, '-option-', row.index, '-description')">{$row.description}</span>
               </span>
-              <span $if="not row.detail" class="primary" $value="row.label"></span>
+              <span $if="not row.detail" class="primary">{$row.label}</span>
             </slot>
           </div>
         </div>
@@ -517,7 +516,7 @@
       <slot name="footer"></slot>
     </div>
     <div class="message" from:id="concat(uid, '-validation')" from:hidden="not validation.issues.length">
-      <div $each="issue of validation.issues" $value="issue.message"></div>
+      <div $each="issue of validation.issues">{$issue.message}</div>
     </div>
     <div class="sr-only" role="status" aria-live="polite" aria-atomic="true">{$statusText}</div>
     <div class="authored-options" $ref="options" hidden aria-hidden="true"><slot></slot></div>

package/components/ui-editor-mention-menu/ui-editor-mention-menu.html

@@ -36,8 +36,8 @@
         from:data-index="index"
         from:data-value="row.id"
       >
-        <span class="avatar" aria-hidden="true" $value="row.initials"></span>
-        <span class="body"><span class="label" $value="row.label"></span><span $if="row.detail" class="detail" $value="row.detail"></span></span>
+        <span class="avatar" aria-hidden="true">{$row.initials}</span>
+        <span class="body"><span class="label">{$row.label}</span><span $if="row.detail" class="detail">{$row.detail}</span></span>
       </li>
       <slot></slot>
     </ul>

package/components/ui-editor-slash-menu/ui-editor-slash-menu.html

@@ -35,7 +35,7 @@
         from:data-value="item.value"
       >
         <span class="icon" aria-hidden="true"><ui-icon from:name="item.icon"></ui-icon></span>
-        <span class="body"><span class="title" $value="item.title"></span><span class="description" $value="item.description"></span></span>
+        <span class="body"><span class="title">{$item.title}</span><span class="description">{$item.description}</span></span>
       </li>
       <slot></slot>
     </ul>

package/components/ui-editor-table-context-menu/ui-editor-table-context-menu.html

@@ -56,14 +56,14 @@
           from:data-action="swatch.action"
         >
           <span class="swatch" class:default="not swatch.color" style:--_swatch="swatch.color"></span>
-          <span class="swatch-label" $value="swatch.label"></span>
+          <span class="swatch-label">{$swatch.label}</span>
         </button>
       </div>
     </div>
     <template $each="section of sections" $key="section.heading">
       <div class="sep"></div>
       <div class="section" role="none">
-        <div class="heading" role="presentation" $value="section.heading"></div>
+        <div class="heading" role="presentation">{$section.heading}</div>
         <button
           $each="item of section.items"
           $key="item.action"
@@ -74,7 +74,7 @@
           from:data-action="item.action"
         >
           <ui-icon from:name="item.icon"></ui-icon>
-          <span $value="item.label"></span>
+          <span>{$item.label}</span>
         </button>
       </div>
     </template>

package/components/ui-editor-table-overlay/ui-editor-table-overlay.html

@@ -127,7 +127,7 @@
           from:aria-label="control.label"
         >
           <ui-icon name="plus"></ui-icon>
-          <span class="tooltip" role="tooltip" $value="control.label"></span>
+          <span class="tooltip" role="tooltip">{$control.label}</span>
         </button>
       </div>
     </div>
@@ -151,7 +151,7 @@
           from:aria-label="control.label"
         >
           <ui-icon name="plus"></ui-icon>
-          <span class="tooltip" role="tooltip" $value="control.label"></span>
+          <span class="tooltip" role="tooltip">{$control.label}</span>
         </button>
       </div>
     </div>

package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.html

@@ -71,7 +71,7 @@
     <div $if="structure" class="group" role="group" aria-label="Table structure">
       <button $each="item of structure" $key="item.action" type="button" from:data-action="item.action">
         <ui-icon from:name="item.icon"></ui-icon>
-        <span $value="item.label"></span>
+        <span>{$item.label}</span>
       </button>
     </div>
     <div $if="(alignments or structure) and hasOverflow" class="sep" aria-hidden="true"></div>
@@ -96,12 +96,12 @@
               from:data-action="swatch.action"
             >
               <span class="swatch" class:default="not swatch.color" style:--_swatch="swatch.color"></span>
-              <span $value="swatch.label"></span>
+              <span>{$swatch.label}</span>
             </button>
           </div>
         </div>
         <div $each="section of sections" $key="section.heading" class="menu-section divided" role="none">
-          <div class="menu-heading" role="presentation" $value="section.heading"></div>
+          <div class="menu-heading" role="presentation">{$section.heading}</div>
           <button
             $each="item of section.items"
             $key="item.action"
@@ -112,7 +112,7 @@
             from:data-action="item.action"
           >
             <ui-icon from:name="item.icon"></ui-icon>
-            <span $value="item.label"></span>
+            <span>{$item.label}</span>
           </button>
         </div>
       </div>

package/components/ui-listbox/ui-listbox.html

@@ -46,7 +46,7 @@
         from:aria-selected="choice.selected"
         from:aria-disabled="choice.disabled"
       >
-        <span $value="choice.label"></span>
+        <span>{$choice.label}</span>
       </div>
     </ui-scroll-area>
     <select

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/components/ui-toast-region/ui-toast-region.html

@@ -37,7 +37,7 @@
       from:role="toast.role"
       from:data-tone="toast.tone"
     >
-      <span class="message" $value="toast.message"></span>
+      <span class="message">{$toast.message}</span>
       <span class="dismiss" from:data-toast="toast.id">
         <ui-icon-button size="sm" variant="ghost" from:round="true" from:label="concat('Dismiss ', toast.message)">
           <ui-icon name="x"></ui-icon>