@threadlabs/looma 0.9.2 → 0.10.1

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

@@ -1,15 +1,20 @@
+import { afterFormReset } from "../shared/form-reset.js";
 import { trackTrigger } from "../shared/trigger.js";
 
 let groups = 0;
 
 // Native radios that share a name already move and check with the arrow keys. The group gives its
-// radios that name, applies a controlled value, and reports the user's choice.
+// radios that name, applies a controlled value, and reports the user's choice. Its fieldset disables
+// them, so a radio's own disabled is never overwritten.
 export default function controller(host) {
   const element = host.element;
   const name = String(host.state.name || `ui-radio-group-${++groups}`);
   const [trigger, stopTracking] = trackTrigger(host);
   const inputs = () => Array.from(element.querySelectorAll('[data-component~="ui-radio"] input[type="radio"]'));
   let external = host.state.value;
+  // A radio's own required survives until the group's required changes, since either one makes the
+  // whole name group required.
+  let required = false;
   host.state.internalValue = String(external ?? "");
   const stop = host.effect(() => {
     if (host.state.value !== external) {
@@ -17,11 +22,14 @@ export default function controller(host) {
       host.state.internalValue = String(external ?? "");
     }
     const value = host.state.internalValue;
-    const disabled = Boolean(host.state.disabled);
+    const applyRequired = Boolean(host.state.required) !== required;
+    required = Boolean(host.state.required);
     for (const input of inputs()) {
+      if (applyRequired) input.required = required;
       input.name = name;
       input.checked = input.value === value;
-      input.disabled = disabled;
+      // The value prop is the choice a form reset returns to.
+      input.defaultChecked = input.value === String(external ?? "");
     }
   });
   const onChange = (event) => {
@@ -34,8 +42,13 @@ export default function controller(host) {
     host.dispatch("change", { checked: true, value: input.value, trigger: how });
   };
   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;
+  });
   return () => {
     stop();
+    stopReset();
     stopTracking();
     element.removeEventListener("change", onChange);
   };

package/components/ui-search-result-row/ui-search-result-row.html

@@ -2,10 +2,10 @@
   <defs>
     <prop name="disabled" type="boolean" default="false">Disables the row's button, so it cannot be chosen or focused, and fades it to 60% opacity.</prop>
     <prop name="selected" type="boolean" default="false"
-    >Highlights the row with its hover surface, to mark the current result. It is visual only and sets no ARIA state, so convey the selection to assistive
-      technology another way where it matters.</prop>
+    >Marks the row as the current result: it gets the hover surface and aria-current="true", which assistive technology announces as current. Set it on one row
+      at a time, such as the result the arrow keys have moved to.</prop>
   </defs>
-  <button type="button" :disabled="disabled">
+  <button type="button" :disabled="disabled" :aria-current="selected">
     <span class="leading"><slot name="leading"></slot></span>
     <span class="content">
       <span class="title"><slot name="title"></slot></span>

package/components/ui-select/ui-select.html

@@ -1,6 +1,8 @@
 <template component="ui-select" controller="./ui-select.js">
   <defs>
-    <prop name="value" type="string">Currently selected option value.</prop>
+    <prop name="value" type="string"
+    >The value of the selected option, initially or when set externally. It is also the default, so a form reset returns to it rather than to the first
+      option.</prop>
     <prop name="disabled" type="boolean" default="false">Prevents selection and form submission.</prop>
     <prop name="invalid" type="boolean" default="false">Exposes invalid state to assistive technology and styling.</prop>
     <prop name="required" type="boolean" default="false">Requires a non-empty option for form validation.</prop>

package/components/ui-select/ui-select.js

@@ -1,10 +1,13 @@
 // A controlled value can arrive before its projected <option> elements, so it is applied again
-// whenever the options change.
+// whenever the options change. The value's option is also marked the native default, so a form
+// reset returns to it rather than to the first option.
 export default function controller(host) {
   const select = host.element;
   const apply = () => {
     const value = host.state.value;
-    if (value !== undefined && value !== null && select.value !== String(value)) select.value = String(value);
+    if (value === undefined || value === null) return;
+    for (const option of select.options) option.defaultSelected = option.value === String(value);
+    if (select.value !== String(value)) select.value = String(value);
   };
   const observer = new MutationObserver(apply);
   observer.observe(select, { childList: true, subtree: true });

package/components/ui-switch/ui-switch.html

@@ -1,16 +1,19 @@
 <template component="ui-switch" controller="./ui-switch.js">
   <defs>
-    <prop name="checked" type="boolean" default="false">Whether the switch is checked initially or when set externally.</prop>
+    <prop name="checked" type="boolean" default="false">Whether the switch is checked initially or when set externally. A form reset returns it to this.</prop>
     <prop name="disabled" type="boolean" default="false">Disables the native switch, so it cannot be toggled or focused.</prop>
     <prop name="required" type="boolean" default="false">Marks the native switch required, so native form validation treats it as invalid until it is on.</prop>
+    <prop name="name" type="string" default=""
+    >The native name the switch submits under: a form that contains it sends name=value while it is on, and nothing while it is off, as a native checkbox does.
+      Left empty, it takes no part in form submission.</prop>
     <prop name="value" type="string" default="on"
-    >The value set on the native input and reported in the change event's detail, so one handler can tell switches apart. on by default, as on a native
-      checkbox.</prop>
+    >The value a form submits under name while the switch is on, also reported in the change event's detail so one handler can tell switches apart. on by
+      default, as on a native checkbox.</prop>
     <state name="internalChecked" :value="false"></state>
     <event name="change" type="object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })"></event>
   </defs>
   <label>
-    <input type="checkbox" role="switch" $ref="input" .checked="internalChecked" :disabled="disabled" :required="required" :value="value">
+    <input type="checkbox" role="switch" $ref="input" .checked="internalChecked" :disabled="disabled" :required="required" :name="name" :value="value">
     <span class="label"><slot></slot></span>
   </label>
   <style>

package/components/ui-switch/ui-switch.js

@@ -1,12 +1,16 @@
+import { afterFormReset } from "../shared/form-reset.js";
 import { trackTrigger } from "../shared/trigger.js";
 
 // `checked` sets the control initially and whenever it changes; the user's changes update the state.
+// A form reset returns the control to `checked`. Vue writes the checked attribute on every render, so
+// the native default alone cannot hold it there.
 export default function controller(host) {
   const input = host.refs.input;
   const [trigger, stopTracking] = trackTrigger(host);
   let external = host.state.checked;
   host.state.internalChecked = Boolean(external);
   const stop = host.effect(() => {
+    input.defaultChecked = Boolean(host.state.checked);
     if (host.state.checked === external) return;
     external = host.state.checked;
     host.state.internalChecked = Boolean(external);
@@ -16,8 +20,13 @@ export default function controller(host) {
     host.dispatch("change", { checked: input.checked, value: String(host.state.value ?? "on"), trigger: trigger() });
   };
   input.addEventListener("change", onChange);
+  const stopReset = afterFormReset(input, () => {
+    host.state.internalChecked = Boolean(external);
+    input.checked = Boolean(external);
+  });
   return () => {
     stop();
+    stopReset();
     stopTracking();
     input.removeEventListener("change", onChange);
   };

package/components/ui-textarea/ui-textarea.html

@@ -1,8 +1,8 @@
 <template component="ui-textarea" controller="./ui-textarea.js">
   <defs>
     <prop name="value" type="string"
-    >The textarea's text. Setting or changing it replaces the live text; between changes the user's typing stands, so follow input events to keep it in
-      step.</prop>
+    >The textarea's text. Setting or changing it replaces the live text; between changes the user's typing stands, so follow input events to keep it in step. It
+      is also the textarea's default, so a form reset returns to it.</prop>
     <prop name="disabled" type="boolean" default="false">Prevents editing and form submission.</prop>
     <prop name="invalid" type="boolean" default="false">Exposes invalid state to assistive technology and styling.</prop>
     <prop name="readonly" type="boolean" default="false">Allows selection without allowing edits.</prop>

package/components/ui-textarea/ui-textarea.js

@@ -1,7 +1,10 @@
-// The value attribute only sets the default; a controlled value is applied to the live textarea.
+// The value attribute only sets the default; a controlled value is applied to the live textarea. The
+// value is also made the native default, so a form reset returns to it.
 export default function controller(host) {
   return host.effect(() => {
     const value = host.state.value;
-    if (value !== undefined && value !== null && host.element.value !== String(value)) host.element.value = String(value);
+    if (value === undefined || value === null) return;
+    host.element.defaultValue = String(value);
+    if (host.element.value !== String(value)) host.element.value = String(value);
   });
 }

package/components/ui-tree-item/ui-tree-item.html

@@ -20,8 +20,8 @@
     >The item's kind, for drag rules: it can be dropped before or after only items of the same type, and inside a branch only if that branch's accepts allows
       it. Reported as sourceType and targetType.</prop>
     <prop name="dropScope" type="string" default=""
-    >A label passed through as sourceScope and targetScope in the tree's reorder events. The tree does not enforce it; use it to tell drops within a scope from
-      drops across scopes.</prop>
+    >Names the list the item sits in, such as its parent's id, and is reported as sourceScope and targetScope in the tree's reorder events, so a handler can
+      tell a reorder within one list from a move between lists. It never restricts where an item can be dropped; dragType and accepts do that.</prop>
     <prop name="accepts" type="string" default=""
     >A comma-separated list of the dragType values this branch accepts dropped inside it. Empty accepts any type. It does not affect drops before or after the
       item.</prop>