@threadlabs/looma 0.9.1 → 0.10.0

package/components/ui-input/ui-input.html

@@ -1,6 +1,8 @@
 <template component="ui-input" controller="./ui-input.js">
   <defs>
-    <prop name="value" type="string">Current text value.</prop>
+    <prop name="value" type="string"
+    >The input'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 input'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-input/ui-input.js

@@ -1,7 +1,10 @@
-// The value attribute only sets the default; a controlled value is applied to the live input.
+// The value attribute only sets the default; a controlled value is applied to the live input. 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-menu-item/ui-menu-item.html

@@ -1,7 +1,10 @@
 <template component="ui-menu-item">
   <defs>
-    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
-    <prop name="value" type="string" default="">value token.</prop>
+    <prop name="disabled" type="boolean" default="false"
+    >Makes the item unavailable: it is faded, skipped by the arrow keys, and choosing it does nothing. It stays visible and is announced as disabled.</prop>
+    <prop name="value" type="string" default=""
+    >The value the enclosing menu reports in its select event when this item is chosen. Give each item a distinct value so one handler can tell them
+      apart.</prop>
   </defs>
   <div role="menuitem" tabindex="-1" :aria-disabled="disabled" :data-value="value"><slot></slot></div>
   <style>

package/components/ui-radio/ui-radio.html

@@ -1,10 +1,17 @@
 <template component="ui-radio" controller="./ui-radio.js">
   <defs>
-    <prop name="checked" type="boolean" default="false">Whether the radio is checked initially or when set externally.</prop>
-    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
-    <prop name="name" type="string" default="">name token.</prop>
-    <prop name="required" type="boolean" default="false">required token.</prop>
-    <prop name="value" type="string" default="on">value token.</prop>
+    <prop name="checked" type="boolean" default="false"
+    >Whether the radio is checked initially or when set externally. A form reset returns it to this. Inside a ui-radio-group the group's value decides
+      instead.</prop>
+    <prop name="disabled" type="boolean" default="false">Disables the native radio, so it cannot be chosen, focused, or reached with the arrow keys.</prop>
+    <prop name="name" type="string" default=""
+    >The native name that groups radios: of the radios that share a name, only one can be checked, and the arrow keys move between them. Inside a ui-radio-group
+      the group sets the name, so leave this empty there.</prop>
+    <prop name="required" type="boolean" default="false"
+    >Marks the native radio required, so native form validation fails until a radio with the same name is checked.</prop>
+    <prop name="value" type="string" default="on"
+    >The value this radio stands for: submitted with a form, reported in its change event, and matched against a ui-radio-group's value to decide which radio is
+      checked.</prop>
     <state name="internalChecked" :value="false"></state>
     <event name="change" type="object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })"></event>
   </defs>

package/components/ui-radio/ui-radio.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);
@@ -17,8 +21,15 @@ 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, () => {
+    // Inside a ui-radio-group the group's value decides, whichever reset runs first.
+    if (input.closest('[data-component~="ui-radio-group"]')) return;
+    host.state.internalChecked = Boolean(external);
+    input.checked = Boolean(external);
+  });
   return () => {
     stop();
+    stopReset();
     stopTracking();
     input.removeEventListener("change", onChange);
   };

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

@@ -1,16 +1,26 @@
 <template component="ui-radio-group" controller="./ui-radio-group.js">
   <defs>
-    <prop name="value" type="string" default="">value token.</prop>
-    <prop name="name" type="string" default="">name token.</prop>
-    <prop name="label" type="string" default="Options">label token.</prop>
-    <prop name="orientation" type="horizontal | vertical" default="horizontal">orientation token.</prop>
-    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
-    <prop name="required" type="boolean" default="false">required token.</prop>
+    <prop name="value" type="string" default=""
+    >The value of the checked radio, initially or when set externally; empty checks none. The user's choice updates it from there and is reported as select and
+      change events, and a form reset returns the group to it.</prop>
+    <prop name="name" type="string" default=""
+    >The native name given to every radio in the group, under which a form submits the chosen value. Left empty, the group generates a unique name that keeps
+      the radios together, so set it when the choice submits with a form.</prop>
+    <prop name="label" type="string" default="Options"
+    >The group's legend, shown above the radios and announced as the group's name. Phrase it as the question the radios answer.</prop>
+    <prop name="orientation" type="horizontal | vertical" default="horizontal"
+    >horizontal lays the radios out in a row; vertical stacks them in a column. The arrow keys move between radios either way.</prop>
+    <prop name="disabled" type="boolean" default="false"
+    >Disables every radio in the group through the native fieldset, so no choice can be made and the group submits nothing with its form. A radio disabled on
+      its own stays disabled when the group is enabled.</prop>
+    <prop name="required" type="boolean" default="false"
+    >Makes a choice required, as a required native radio does for its group: the group states aria-required, every radio in it is marked required, and native
+      form validation fails until one is checked.</prop>
     <state name="internalValue" :value="''"></state>
     <event name="select" type="object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })"></event>
     <event name="change" type="object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })"></event>
   </defs>
-  <fieldset role="radiogroup">
+  <fieldset role="radiogroup" :aria-required="required" :disabled="disabled">
     <legend><template $value="label"></template></legend>
     <slot></slot>
   </fieldset>

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

@@ -1,8 +1,14 @@
 <template component="ui-reel">
   <defs>
-    <prop name="gap" type="xs | s | m | l | xl">gap token.</prop>
-    <prop name="itemWidth" type="sm | md | lg">itemWidth token.</prop>
-    <prop name="snap" type="start | center">snap token.</prop>
+    <prop name="gap" type="xs | s | m | l | xl"
+    >Space between items, on the spacing scale: xs is 0.5rem, s 0.75rem, m 1rem (also the default), l 1.5rem, and xl 2rem. The --ui-reel-gap custom property,
+      when set, overrides it.</prop>
+    <prop name="itemWidth" type="sm | md | lg"
+    >A fixed width for every item: sm is 12rem, md is 16rem, and lg is 20rem. Unset, each item keeps its content's width. Items never shrink to fit, so the reel
+      scrolls sideways once they overflow.</prop>
+    <prop name="snap" type="start | center"
+    >Snaps scrolling to items: start comes to rest with an item's start edge at the reel's start, and center with an item centred in the reel. Unset, the reel
+      scrolls freely.</prop>
   </defs>
   <div role="region" tabindex="0"><slot></slot></div>
   <style>

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

@@ -1,9 +1,11 @@
 <template component="ui-search-result-row">
   <defs>
-    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
-    <prop name="selected" type="boolean" default="false">selected token.</prop>
+    <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"
+    >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-stack/ui-stack.html

@@ -1,8 +1,14 @@
 <template component="ui-stack">
   <defs>
-    <prop name="gap" type="xs | s | m | l | xl">gap token.</prop>
-    <prop name="align" type="start | center | end | stretch">align token.</prop>
-    <prop name="justify" type="start | center | end | between">justify token.</prop>
+    <prop name="gap" type="xs | s | m | l | xl"
+    >Space between items, on the spacing scale: xs is 0.5rem, s 0.75rem, m 1rem (also the default), l 1.5rem, and xl 2rem. The --ui-stack-gap custom property,
+      when set, overrides it.</prop>
+    <prop name="align" type="start | center | end | stretch"
+    >How items sit across the stack: stretch (the default) makes each fill the stack's width; start, center, and end keep each at its own width, against the
+      start, in the middle, or against the end.</prop>
+    <prop name="justify" type="start | center | end | between"
+    >Where items sit along a stack that is taller than its content: start (the default), center, end, or between, which spreads the spare space between items.
+      It has no effect unless the stack is given a height or stretched to one.</prop>
   </defs>
   <div><slot></slot></div>
   <style>

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

@@ -1,14 +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="disabled" type="boolean" default="false">disabled token.</prop>
-    <prop name="required" type="boolean" default="false">required token.</prop>
-    <prop name="value" type="string" default="on">value token.</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 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-switcher/ui-switcher.html

@@ -1,8 +1,14 @@
 <template component="ui-switcher">
   <defs>
-    <prop name="gap" type="xs | s | m | l | xl">gap token.</prop>
-    <prop name="threshold" type="xs | sm | md | lg">threshold token.</prop>
-    <prop name="align" type="start | center | end | stretch">align token.</prop>
+    <prop name="gap" type="xs | s | m | l | xl"
+    >Space between items, on the spacing scale: xs is 0.5rem, s 0.75rem, m 1rem (also the default), l 1.5rem, and xl 2rem. The --ui-switcher-gap custom
+      property, when set, overrides it.</prop>
+    <prop name="threshold" type="xs | sm | md | lg"
+    >The container width at which items switch between a row and a stack: wider, they all sit side by side; narrower, each takes the full width. xs is 20rem, sm
+      is 30rem (also the default), md is 45rem, and lg is 60rem.</prop>
+    <prop name="align" type="start | center | end | stretch"
+    >How items line up while they sit in a row: stretch (the default) makes them equally tall; start, center, and end align their tops, middles, or
+      bottoms.</prop>
   </defs>
   <div><slot></slot></div>
   <style>

package/components/ui-tabs/ui-tabs.html

@@ -1,9 +1,14 @@
 <template component="ui-tabs" controller="./ui-tabs.js">
   <defs>
     <prop name="density" type="comfortable | compact" default="comfortable">Compact trades padding and type size for rows that fit more on screen.</prop>
-    <prop name="label" type="string" default="Tabs">label token.</prop>
-    <prop name="value" type="string" default="">value token.</prop>
-    <prop name="orientation" type="horizontal | vertical" default="horizontal">orientation token.</prop>
+    <prop name="label" type="string" default="Tabs"
+    >The tab list's accessible name, announced when focus enters the list. Name what the tabs switch between.</prop>
+    <prop name="value" type="string" default=""
+    >The id of the selected panel, initially or when set externally; empty selects the first panel. Choosing a tab updates it from there and reports a select
+      event. A panel without an id is given a generated one.</prop>
+    <prop name="orientation" type="horizontal | vertical" default="horizontal"
+    >horizontal puts the tabs in a row above the panels, moved between with the Left and Right arrow keys; vertical puts them in a column beside the panels,
+      moved between with Up and Down.</prop>
     <prop name="stretch" type="boolean" default="false">Share the full width of the tab list equally between tabs instead of sizing each to its label.</prop>
     <state name="internalValue" :value="''"></state>
     <state name="tabs" type="list(object({ id: string, label: string }))" :value="[]"></state>

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

@@ -1,6 +1,8 @@
 <template component="ui-textarea" controller="./ui-textarea.js">
   <defs>
-    <prop name="value" type="string">Current text value.</prop>
+    <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. 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/ui-tree.html

@@ -2,9 +2,13 @@
 <template component="ui-tree" controller="./ui-tree.js">
   <defs>
     <prop name="density" type="comfortable | compact" default="comfortable">Compact trades padding and type size for rows that fit more on screen.</prop>
-    <prop name="label" type="string" default="Tree">label token.</prop>
-    <prop name="hoverExpandDelay" type="number" default="700">hoverExpandDelay token.</prop>
-    <prop name="maxDepth" type="number" default="0">maxDepth token.</prop>
+    <prop name="label" type="string" default="Tree">The tree's accessible name, announced when focus enters it. Name what the tree holds.</prop>
+    <prop name="hoverExpandDelay" type="number" default="700"
+    >How long, in milliseconds, a dragged item must hover over the middle of a collapsed branch before the branch opens to receive it. 0 opens it at
+      once.</prop>
+    <prop name="maxDepth" type="number" default="0"
+    >The deepest level a drag may produce, counting the top level as 1. A drop that would place the dragged item, or any item beneath it, deeper than this is
+      refused and reported as reorder-rejected. 0 means no limit.</prop>
     <event
       name="reorder"
       type="object({ sourceId: string, targetId: string, position: before | inside | after, sourceType: string, targetType: string, sourceScope: string, targetScope: string, trigger: keyboard | pointer | programmatic })"

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

@@ -1,17 +1,38 @@
 <template component="ui-tree-item" controller="./ui-tree-item.js">
   <defs>
-    <prop name="itemId" type="string" default="">itemId token.</prop>
+    <prop name="itemId" type="string" default=""
+    >The item's identifier, reported as sourceId and targetId in the tree's reorder events and as id in its expand event. A sortable item needs one to be
+      dragged, and a drop onto an item without one is not reported.</prop>
     <prop name="label" type="string" default="">The item's accessible name, also shown as the row text unless the label slot supplies content.</prop>
-    <prop name="dropDepth" type="number">dropDepth token.</prop>
-    <prop name="subtreeDepth" type="number">subtreeDepth token.</prop>
-    <prop name="container" type="boolean" default="false">container token.</prop>
-    <prop name="sortable" type="boolean" default="false">sortable token.</prop>
-    <prop name="dragType" type="string" default="item">dragType token.</prop>
-    <prop name="dropScope" type="string" default="">dropScope token.</prop>
-    <prop name="accepts" type="string" default="">accepts token.</prop>
-    <prop name="expanded" type="boolean" default="false">expanded token.</prop>
-    <prop name="selected" type="boolean" default="false">selected token.</prop>
-    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <prop name="dropDepth" type="number"
+    >Overrides the level this item counts as when the tree checks maxDepth for a drop onto it. Unset, its level in the rendered tree is used; set it when the
+      item sits deeper in the real hierarchy than the rendered tree shows.</prop>
+    <prop name="subtreeDepth" type="number"
+    >Overrides how many levels sit beneath this item when the tree checks maxDepth for a drag of it. Unset, the tree counts the rendered descendants; set it
+      when some are not rendered, such as children that load later.</prop>
+    <prop name="container" type="boolean" default="false"
+    >Makes the item a branch even before it has children: it gets the expand button and aria-expanded, and accepts drops inside it. An item with nested items is
+      a branch without it.</prop>
+    <prop name="sortable" type="boolean" default="false"
+    >Gives the item a drag handle, shown on hover, so it can be dragged to a new place in the tree. The tree reports the drop as a reorder event and leaves
+      moving the item to you. Needs itemId; a disabled item, and any item under touch input, shows no handle.</prop>
+    <prop name="dragType" type="string" default="item"
+    >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=""
+    >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>
+    <prop name="expanded" type="boolean" default="false"
+    >Whether the branch shows its children, initially or when set externally. The expand button, a click on the row, and the arrow keys toggle it from there,
+      each reported as an expand event. Only meaningful for a branch.</prop>
+    <prop name="selected" type="boolean" default="false"
+    >Marks the item selected: it sets aria-selected and gives the row the highlighted surface. The tree does not select on click, so drive it from your own
+      state.</prop>
+    <prop name="disabled" type="boolean" default="false"
+    >Makes the item unavailable: faded, skipped by keyboard navigation, unable to expand or be dragged, and closed to drops inside it.</prop>
     <state name="internalExpanded" :value="false"></state>
     <state name="structuralLevel" :value="1"></state>
     <state name="tabStop" :value="false"></state>