@loadbare/widgets 0.5.0 → 0.7.0

package/dist/lb-options.browser.js

@@ -1,33 +1,32 @@
 /// <reference lib="dom" />
-import { ATTR_KEY_VALUE } from "@loadbare/app/constants";
+import { ATTR_GROUP_VALUE, ATTR_KEY_VALUE, LIVE_GROUP, LIVE_ROW, } from "@loadbare/app/constants";
 import { WrappedControl } from "./control.js";
 /**
- * A `<select>` whose choices are the rows of a query, and the case that
- * shows why placement belongs to the widget rather than to the framework.
+ * A `<select>` whose choices are the rows of the query it names.
  *
- * The rows arrive flat and keyed. Nothing on the wire knows about
- * `<optgroup>`, and nothing needs to: a group is a column like any other, and
- * turning a repeated column value into an element is exactly the local
- * knowledge a widget has and the hub does not. So the attribute that names
- * the column is this widget's own, in HTML's `data-` namespace rather than
- * the hub's: the hub never reads it, and `lb-` is reserved for what the hub
- * does read.
+ * The hub places the options by the query's order, and a group template
+ * holding an `<optgroup>` puts them in groups. What landing does not give an
+ * `<optgroup>` is its label, so the widget sets it from the `lb-group-value`
+ * the hub stamps on it.
  *
- * The identity of a row is the value of the option, so the `lb-key-value`
- * the hub stamps on each option is copied to its `value`. The server declares
- * the key, and the page never names it.
+ * The identity of a row is the value of its option, so the `lb-key-value` the
+ * hub stamps on each option is copied to its `value`. The key column is the
+ * one the server declared for the query; the page never names it.
  *
- * It is a control like `lb-select`: `lb-column` sets which option is
- * selected, from the row around it, and `lb-request` commits the choice on
- * `change`. A value can arrive before the options it names, so the widget
- * keeps the value it was last given and selects it again whenever rows land.
+ * It is two things at once, and the hub keeps them apart: its own `lb-query`
+ * names the rows it offers, and its `lb-column` is a column of the row around
+ * it, which is what it holds and what it sends. As a control it is
+ * form-associated, with a `value` and a `change` of its own, so the hub lands
+ * that column on `value` and commits `lb-request` on `change`.
  *
- * Exported because `lb-picker` is this widget with its row template
- * supplied by the definition instead of by the page. Nothing about the
- * behavior changes, so nothing about the behavior is written twice.
+ * The value is held here as well as on the select. A `<select>` does not hold
+ * a value it has no option for: it selects nothing and forgets it. The value
+ * and the choices are two answers that land in either order, so the held
+ * value is put on the select again whenever rows land.
+ *
+ * Exported because `lb-picker` is this widget with its row template supplied
+ * by the definition instead of by the page.
  */
-/** Named on the row template: the column whose distinct values become groups. */
-const GROUP_COLUMN = "data-group";
 export class LbOptions extends WrappedControl {
     inner = "select";
     /**
@@ -50,48 +49,20 @@ export class LbOptions extends WrappedControl {
         this.chosen = this.control?.value ?? null;
         super.changed();
     }
-    /**
-     * The hub reconciles the rows and calls this for placement only, so this
-     * widget carries no copy of what a row is or when one arrives.
-     */
-    lbPlaceRow(el, row, template) {
-        const select = this.querySelector("select");
-        const groupColumn = template.getAttribute(GROUP_COLUMN);
-        if (!groupColumn) {
-            select.insertBefore(el, template);
-            return;
-        }
-        this.groupFor(select, template, String(row[groupColumn] ?? "")).append(el);
-    }
-    /** Everything derived from the rows, once the whole result has landed. */
+    /** Everything derived from the rows, once the whole answer has landed. */
     lbRowsLanded() {
-        // The identity of the row is the value of the option, so nothing on the
-        // page has to say so.
-        for (const option of this.querySelectorAll(`option[${ATTR_KEY_VALUE}]`)) {
+        for (const option of this.querySelectorAll(`option${LIVE_ROW}`)) {
             option.setAttribute("value", option.getAttribute(ATTR_KEY_VALUE));
         }
-        // A group is derived, so it goes when its last row does.
-        for (const group of this.querySelectorAll("optgroup")) {
-            if (!group.querySelector("option"))
-                group.remove();
+        for (const group of this.querySelectorAll(`optgroup${LIVE_GROUP}`)) {
+            group.label = group.getAttribute(ATTR_GROUP_VALUE) ?? "";
         }
-        // A value that arrived before its option selects it now.
+        // After the values above, since the select matches against them.
         const select = this.querySelector("select");
         if (select && this.chosen !== null)
             select.value = this.chosen;
         this.formValue();
     }
-    /** The group with this label, or a new one in front of the template. */
-    groupFor(select, template, label) {
-        for (const group of select.querySelectorAll("optgroup")) {
-            if (group.label === label)
-                return group;
-        }
-        const group = document.createElement("optgroup");
-        group.label = label;
-        select.insertBefore(group, template);
-        return group;
-    }
 }
 customElements.define("lb-options", LbOptions);
 //# sourceMappingURL=lb-options.browser.js.map

package/dist/lb-options.browser.js.map

@@ -1 +1 @@
-{"version":3,"file":"lb-options.browser.js","sourceRoot":"","sources":["../widgets/lb-options.browser.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAE3B,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAGzD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,iFAAiF;AACjF,MAAM,YAAY,GAAG,YAAY,CAAC;AAElC,MAAM,OAAO,SAAU,SAAQ,cAAc;IACxB,KAAK,GAAG,QAAQ,CAAC;IAEpC;;;OAGG;IACK,MAAM,GAAkB,IAAI,CAAC;IAErC,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC;IACpC,CAAC;IAED,IAAI,KAAK,CAAC,KAAa;QACrB,IAAI,CAAC,MAAM,GAAG,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC3E,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;IACtB,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC5B,CAAC;IAES,OAAO;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC;QAC1C,KAAK,CAAC,OAAO,EAAE,CAAC;IAClB,CAAC;IAED;;;OAGG;IACH,UAAU,CAAC,EAAW,EAAE,GAAQ,EAAE,QAA6B;QAC7D,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC;QAC7C,MAAM,WAAW,GAAG,QAAQ,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;QACxD,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,MAAM,CAAC,YAAY,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;YAClC,OAAO;QACT,CAAC;QACD,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAC7E,CAAC;IAED,0EAA0E;IAC1E,YAAY;QACV,wEAAwE;QACxE,sBAAsB;QACtB,KAAK,MAAM,MAAM,IAAI,IAAI,CAAC,gBAAgB,CAAC,UAAU,cAAc,GAAG,CAAC,EAAE,CAAC;YACxE,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,YAAY,CAAC,cAAc,CAAE,CAAC,CAAC;QACrE,CAAC;QACD,yDAAyD;QACzD,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,EAAE,CAAC;YACtD,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC;gBAAE,KAAK,CAAC,MAAM,EAAE,CAAC;QACrD,CAAC;QACD,yDAAyD;QACzD,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC5C,IAAI,MAAM,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI;YAAE,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC;QAC/D,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED,wEAAwE;IAChE,QAAQ,CAAC,MAAe,EAAE,QAAiB,EAAE,KAAa;QAChE,KAAK,MAAM,KAAK,IAAI,MAAM,CAAC,gBAAgB,CAAC,UAAU,CAAC,EAAE,CAAC;YACxD,IAAI,KAAK,CAAC,KAAK,KAAK,KAAK;gBAAE,OAAO,KAAK,CAAC;QAC1C,CAAC;QACD,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACjD,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;QACpB,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;QACrC,OAAO,KAAK,CAAC;IACf,CAAC;CACF;AAED,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport { ATTR_KEY_VALUE } from \"@loadbare/app/constants\";\nimport type { Row, RowsHost } from \"@loadbare/app/types\";\n\nimport { WrappedControl } from \"./control.js\";\n\n/**\n * A `<select>` whose choices are the rows of a query, and the case that\n * shows why placement belongs to the widget rather than to the framework.\n *\n * The rows arrive flat and keyed. Nothing on the wire knows about\n * `<optgroup>`, and nothing needs to: a group is a column like any other, and\n * turning a repeated column value into an element is exactly the local\n * knowledge a widget has and the hub does not. So the attribute that names\n * the column is this widget's own, in HTML's `data-` namespace rather than\n * the hub's: the hub never reads it, and `lb-` is reserved for what the hub\n * does read.\n *\n * The identity of a row is the value of the option, so the `lb-key-value`\n * the hub stamps on each option is copied to its `value`. The server declares\n * the key, and the page never names it.\n *\n * It is a control like `lb-select`: `lb-column` sets which option is\n * selected, from the row around it, and `lb-request` commits the choice on\n * `change`. A value can arrive before the options it names, so the widget\n * keeps the value it was last given and selects it again whenever rows land.\n *\n * Exported because `lb-picker` is this widget with its row template\n * supplied by the definition instead of by the page. Nothing about the\n * behavior changes, so nothing about the behavior is written twice.\n */\n/** Named on the row template: the column whose distinct values become groups. */\nconst GROUP_COLUMN = \"data-group\";\n\nexport class LbOptions extends WrappedControl implements RowsHost {\n  protected readonly inner = \"select\";\n\n  /**\n   * The value last set or chosen, which the options may not include yet.\n   * Null when nothing chose one, so the select's own default stands.\n   */\n  private chosen: string | null = null;\n\n  get value(): string {\n    return this.chosen ?? super.value;\n  }\n\n  set value(value: string) {\n    this.chosen = value === null || value === undefined ? null : String(value);\n    super.value = value;\n  }\n\n  formResetCallback(): void {\n    this.chosen = null;\n    super.formResetCallback();\n  }\n\n  protected changed(): void {\n    this.chosen = this.control?.value ?? null;\n    super.changed();\n  }\n\n  /**\n   * The hub reconciles the rows and calls this for placement only, so this\n   * widget carries no copy of what a row is or when one arrives.\n   */\n  lbPlaceRow(el: Element, row: Row, template: HTMLTemplateElement): void {\n    const select = this.querySelector(\"select\")!;\n    const groupColumn = template.getAttribute(GROUP_COLUMN);\n    if (!groupColumn) {\n      select.insertBefore(el, template);\n      return;\n    }\n    this.groupFor(select, template, String(row[groupColumn] ?? \"\")).append(el);\n  }\n\n  /** Everything derived from the rows, once the whole result has landed. */\n  lbRowsLanded(): void {\n    // The identity of the row is the value of the option, so nothing on the\n    // page has to say so.\n    for (const option of this.querySelectorAll(`option[${ATTR_KEY_VALUE}]`)) {\n      option.setAttribute(\"value\", option.getAttribute(ATTR_KEY_VALUE)!);\n    }\n    // A group is derived, so it goes when its last row does.\n    for (const group of this.querySelectorAll(\"optgroup\")) {\n      if (!group.querySelector(\"option\")) group.remove();\n    }\n    // A value that arrived before its option selects it now.\n    const select = this.querySelector(\"select\");\n    if (select && this.chosen !== null) select.value = this.chosen;\n    this.formValue();\n  }\n\n  /** The group with this label, or a new one in front of the template. */\n  private groupFor(select: Element, template: Element, label: string): Element {\n    for (const group of select.querySelectorAll(\"optgroup\")) {\n      if (group.label === label) return group;\n    }\n    const group = document.createElement(\"optgroup\");\n    group.label = label;\n    select.insertBefore(group, template);\n    return group;\n  }\n}\n\ncustomElements.define(\"lb-options\", LbOptions);\n"]}
+{"version":3,"file":"lb-options.browser.js","sourceRoot":"","sources":["../widgets/lb-options.browser.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAE3B,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,QAAQ,GACT,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,MAAM,OAAO,SAAU,SAAQ,cAAc;IACjC,KAAK,GAAG,QAAQ,CAAC;IAE3B;;;OAGG;IACK,MAAM,GAAkB,IAAI,CAAC;IAErC,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC;IACpC,CAAC;IAED,IAAI,KAAK,CAAC,KAAa;QACrB,IAAI,CAAC,MAAM,GAAG,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC3E,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;IACtB,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC5B,CAAC;IAES,OAAO;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC;QAC1C,KAAK,CAAC,OAAO,EAAE,CAAC;IAClB,CAAC;IAED,0EAA0E;IAC1E,YAAY;QACV,KAAK,MAAM,MAAM,IAAI,IAAI,CAAC,gBAAgB,CAAC,SAAS,QAAQ,EAAE,CAAC,EAAE,CAAC;YAChE,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,YAAY,CAAC,cAAc,CAAE,CAAC,CAAC;QACrE,CAAC;QACD,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,gBAAgB,CACvC,WAAW,UAAU,EAAE,CACxB,EAAE,CAAC;YACF,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;QAC3D,CAAC;QACD,iEAAiE;QACjE,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC5C,IAAI,MAAM,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI;YAAE,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC;QAC/D,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;CACF;AAED,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport {\n  ATTR_GROUP_VALUE,\n  ATTR_KEY_VALUE,\n  LIVE_GROUP,\n  LIVE_ROW,\n} from \"@loadbare/app/constants\";\nimport type { RowsHost } from \"@loadbare/app/types\";\nimport { WrappedControl } from \"./control.js\";\n\n/**\n * A `<select>` whose choices are the rows of the query it names.\n *\n * The hub places the options by the query's order, and a group template\n * holding an `<optgroup>` puts them in groups. What landing does not give an\n * `<optgroup>` is its label, so the widget sets it from the `lb-group-value`\n * the hub stamps on it.\n *\n * The identity of a row is the value of its option, so the `lb-key-value` the\n * hub stamps on each option is copied to its `value`. The key column is the\n * one the server declared for the query; the page never names it.\n *\n * It is two things at once, and the hub keeps them apart: its own `lb-query`\n * names the rows it offers, and its `lb-column` is a column of the row around\n * it, which is what it holds and what it sends. As a control it is\n * form-associated, with a `value` and a `change` of its own, so the hub lands\n * that column on `value` and commits `lb-request` on `change`.\n *\n * The value is held here as well as on the select. A `<select>` does not hold\n * a value it has no option for: it selects nothing and forgets it. The value\n * and the choices are two answers that land in either order, so the held\n * value is put on the select again whenever rows land.\n *\n * Exported because `lb-picker` is this widget with its row template supplied\n * by the definition instead of by the page.\n */\n\nexport class LbOptions extends WrappedControl implements RowsHost {\n  protected inner = \"select\";\n\n  /**\n   * The value last set or chosen, which the options may not include yet.\n   * Null when nothing chose one, so the select's own default stands.\n   */\n  private chosen: string | null = null;\n\n  get value(): string {\n    return this.chosen ?? super.value;\n  }\n\n  set value(value: string) {\n    this.chosen = value === null || value === undefined ? null : String(value);\n    super.value = value;\n  }\n\n  formResetCallback(): void {\n    this.chosen = null;\n    super.formResetCallback();\n  }\n\n  protected changed(): void {\n    this.chosen = this.control?.value ?? null;\n    super.changed();\n  }\n\n  /** Everything derived from the rows, once the whole answer has landed. */\n  lbRowsLanded(): void {\n    for (const option of this.querySelectorAll(`option${LIVE_ROW}`)) {\n      option.setAttribute(\"value\", option.getAttribute(ATTR_KEY_VALUE)!);\n    }\n    for (const group of this.querySelectorAll<HTMLOptGroupElement>(\n      `optgroup${LIVE_GROUP}`,\n    )) {\n      group.label = group.getAttribute(ATTR_GROUP_VALUE) ?? \"\";\n    }\n    // After the values above, since the select matches against them.\n    const select = this.querySelector(\"select\");\n    if (select && this.chosen !== null) select.value = this.chosen;\n    this.formValue();\n  }\n}\n\ncustomElements.define(\"lb-options\", LbOptions);\n"]}

package/dist/lb-picker.browser.js

@@ -6,18 +6,15 @@ import { LbOptions } from "./lb-options.browser.js";
  *
  * A row template is markup, so writing it is the page author's job — until
  * every row is one option and the only thing that varies is which columns it
- * reads. Those are words, and words are parameters: `exp-column` and
- * `exp-group` fill the placeholders in the template the definition already
- * has, at build time, and the page writes one tag with no children. The key
- * is the server's, declared with the query, so the page names none.
+ * reads. That is a word, and words are parameters: `exp-column` fills the
+ * placeholder in the template the definition already has, at build time, and
+ * the page writes one tag with no children.
  *
- * It is the same trade as anywhere else in expansion. A page author who wants
- * a second element in the row, or an option built from two columns, writes
- * `lb-options` and the template themselves. This one is for when they do
- * not.
+ * A page author who wants a second element in the row, an option built from
+ * two columns, or options in groups, writes `lb-options` and the templates
+ * themselves.
  *
- * The behavior is inherited whole, because it is the same behavior: rows land
- * in groups, the key becomes the value, and the widget is a control. A
+ * The behavior is inherited whole, because it is the same behavior. A
  * distinct class exists only because `customElements.define` requires one
  * constructor per name.
  */

package/dist/lb-picker.browser.js.map

@@ -1 +1 @@
-{"version":3,"file":"lb-picker.browser.js","sourceRoot":"","sources":["../widgets/lb-picker.browser.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAE3B,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,QAAS,SAAQ,SAAS;CAAG;AAEnC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport { LbOptions } from \"./lb-options.browser.js\";\n\n/**\n * The same `<select>` as `lb-options`, with the row template supplied by\n * the definition instead of by the page.\n *\n * A row template is markup, so writing it is the page author's job — until\n * every row is one option and the only thing that varies is which columns it\n * reads. Those are words, and words are parameters: `exp-column` and\n * `exp-group` fill the placeholders in the template the definition already\n * has, at build time, and the page writes one tag with no children. The key\n * is the server's, declared with the query, so the page names none.\n *\n * It is the same trade as anywhere else in expansion. A page author who wants\n * a second element in the row, or an option built from two columns, writes\n * `lb-options` and the template themselves. This one is for when they do\n * not.\n *\n * The behavior is inherited whole, because it is the same behavior: rows land\n * in groups, the key becomes the value, and the widget is a control. A\n * distinct class exists only because `customElements.define` requires one\n * constructor per name.\n */\nclass LbPicker extends LbOptions {}\n\ncustomElements.define(\"lb-picker\", LbPicker);\n"]}
+{"version":3,"file":"lb-picker.browser.js","sourceRoot":"","sources":["../widgets/lb-picker.browser.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAE3B,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,QAAS,SAAQ,SAAS;CAAG;AAEnC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport { LbOptions } from \"./lb-options.browser.js\";\n\n/**\n * The same `<select>` as `lb-options`, with the row template supplied by\n * the definition instead of by the page.\n *\n * A row template is markup, so writing it is the page author's job — until\n * every row is one option and the only thing that varies is which columns it\n * reads. That is a word, and words are parameters: `exp-column` fills the\n * placeholder in the template the definition already has, at build time, and\n * the page writes one tag with no children.\n *\n * A page author who wants a second element in the row, an option built from\n * two columns, or options in groups, writes `lb-options` and the templates\n * themselves.\n *\n * The behavior is inherited whole, because it is the same behavior. A\n * distinct class exists only because `customElements.define` requires one\n * constructor per name.\n */\nclass LbPicker extends LbOptions {}\n\ncustomElements.define(\"lb-picker\", LbPicker);\n"]}

package/dist/lb-picker.html

@@ -1,7 +1,7 @@
 <label
   >{{label}}
   <select>
-    <template data-group="{{group}}">
+    <template>
       <option lb-column="{{column}}"></option>
     </template></select
 ></label>

package/dist/lb-select.browser.js

@@ -1,14 +1,11 @@
 /// <reference lib="dom" />
 import { WrappedControl } from "./control.js";
 /**
- * A control wrapping a `<select>` whose options the page writes. The hub
- * sets its `value` from the column its `lb-column` names, and gathers it back
- * under the same name.
+ * A `<select>` with its label and the options the page writes, as one
+ * control, like `lb-input` and for the same reasons.
  *
- * The choice is the interaction, so this is the control that most often
- * carries `lb-request`: it commits on `change`, and the hub sends that request
- * with this select's column alone. The server still decides what the choice
- * means.
+ * Inside `lb-query="lb-url"` with `lb-request="lb-row-update"` it writes a
+ * query parm, and the hub answers that itself.
  */
 class LbSelect extends WrappedControl {
     inner = "select";

package/dist/lb-select.browser.js.map

@@ -1 +1 @@
-{"version":3,"file":"lb-select.browser.js","sourceRoot":"","sources":["../widgets/lb-select.browser.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAE3B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;;;;;GASG;AACH,MAAM,QAAS,SAAQ,cAAc;IAChB,KAAK,GAAG,QAAQ,CAAC;CACrC;AAED,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport { WrappedControl } from \"./control.js\";\n\n/**\n * A control wrapping a `<select>` whose options the page writes. The hub\n * sets its `value` from the column its `lb-column` names, and gathers it back\n * under the same name.\n *\n * The choice is the interaction, so this is the control that most often\n * carries `lb-request`: it commits on `change`, and the hub sends that request\n * with this select's column alone. The server still decides what the choice\n * means.\n */\nclass LbSelect extends WrappedControl {\n  protected readonly inner = \"select\";\n}\n\ncustomElements.define(\"lb-select\", LbSelect);\n"]}
+{"version":3,"file":"lb-select.browser.js","sourceRoot":"","sources":["../widgets/lb-select.browser.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAE3B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;;GAMG;AACH,MAAM,QAAS,SAAQ,cAAc;IACzB,KAAK,GAAG,QAAQ,CAAC;CAC5B;AAED,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport { WrappedControl } from \"./control.js\";\n\n/**\n * A `<select>` with its label and the options the page writes, as one\n * control, like `lb-input` and for the same reasons.\n *\n * Inside `lb-query=\"lb-url\"` with `lb-request=\"lb-row-update\"` it writes a\n * query parm, and the hub answers that itself.\n */\nclass LbSelect extends WrappedControl {\n  protected inner = \"select\";\n}\n\ncustomElements.define(\"lb-select\", LbSelect);\n"]}

package/dist/lb-table.browser.js

@@ -1,8 +1,7 @@
 /// <reference lib="dom" />
-import { ATTR_COLUMN, ATTR_KEY_VALUE } from "@loadbare/app/constants";
+import { ATTR_COLUMN, ATTR_ROW_REQUESTED, LB_DONE_EVENT_NAME, REQUEST_ROW_INSERT, REQUESTED_CREATED, REQUESTED_MOVED, } from "@loadbare/app/constants";
 /**
- * A table that owns its own scaffolding, and the case that shows what a
- * widget holding rows is for once the hub reconciles rows on its own.
+ * A table that owns its own scaffolding.
  *
  * A plain `<table lb-query>` with a row template inside it needs no widget at
  * all. This one supplies the table, and the developer writes what only the
@@ -12,105 +11,79 @@ import { ATTR_COLUMN, ATTR_KEY_VALUE } from "@loadbare/app/constants";
  * `<template>` survives anywhere, so the heading row arrives wrapped and
  * expansion unwraps it into the `lb-exp-template` destination beside the slot.
  *
- * What it adds at run time is placement, and only placement. `data-sort`
- * names the column rows are ordered by; `data-group` names the column they
- * are sectioned by. Both are this widget's own attributes, in HTML's `data-`
- * namespace rather than the hub's: the hub never reads them, and `lb-` is
- * reserved for what the hub does read. `lb-options` happens to spell its
- * grouping attribute the same way, which is a convenience and not a contract.
+ * Placement and groups are the hub's, by the query's order and the page's
+ * group templates. What this widget adds at run time is the ghost row, and
+ * scrolling to the row the page's own request created or moved.
  *
- * The `foot` destination is the head's argument a second time and needs no
- * code here. A `<tfoot>` is a place on the page, not a row the hub delivers,
- * so what lands in it is an element carrying its own `lb-query` — a grand
- * total is a second query over the same data, of kind `row`, and the hub
- * lands it by name like any other.
+ * The `foot` destination needs no code here. A `<tfoot>` is a place on the
+ * page, not a row the hub delivers, so what lands in it is an aggregate or a
+ * `row` query of its own, named on its `<tr>`.
  */
-/** Named on the row template: the column whose distinct values become sections. */
-const GROUP_COLUMN = "data-group";
-/** Named on the row template: the column rows are ordered by within a section. */
-const SORT_COLUMN = "data-sort";
 /**
- * The heading row of a section, carrying the value it stands for.
+ * The ghost row's `<tbody>`, a blank row for entering a new one, between the
+ * rows and the footer. The page writes it as the `ghost` template, so it
+ * ships in the document like the heading and the footer, and the hub lands
+ * on whatever in it names a query. It is not a live row: the hub never
+ * reconciles it and never counts it.
  *
- * The widget's own scaffolding, derived from rows the hub knows and invisible
- * to the hub itself, exactly as the `<optgroup>` in `lb-options` is. Nothing
- * binds to it, so it carries no `lb-key-value` and no name from the vocabulary.
+ * A `<form>` cannot wrap a `<tr>`, so the widget makes one outside the table
+ * and joins the row's controls and buttons to it with the HTML `form`
+ * attribute. Sending is the page's: a button in the row carrying
+ * `lb-row-insert` submits that form, and the hub gathers what the form owns.
+ * The hub resets the form once the insert succeeds.
  */
-const SECTION_ROW = "data-section";
+const GHOST = "data-ghost";
+/** Ghost row forms need ids for the `form` attribute; any unique one will do. */
+let ghostForms = 0;
 class LbTable extends HTMLElement {
     /**
-     * Group first, then sort within the group.
-     *
-     * Inserting a row before the first one that sorts after it keeps the
-     * section ordered, whatever else is in it — which is what lets a whole set
-     * and a single patched row take the same path.
+     * A ghost row is for entering the next row, so once one is saved the
+     * cursor goes back to the start of it. `lb-request-done` comes after the
+     * response items have landed, so nothing the hub places afterwards takes
+     * the focus away again. A refused insert leaves the cursor where the user
+     * left it.
      */
-    lbPlaceRow(el, row, template) {
-        const groupColumn = template.getAttribute(GROUP_COLUMN);
-        const sortColumn = template.getAttribute(SORT_COLUMN);
-        const heading = groupColumn
-            ? this.headingFor(template, String(row[groupColumn] ?? ""))
-            : null;
-        const { rows, end } = this.section(heading);
-        const value = sortColumn ? String(row[sortColumn] ?? "") : "";
-        const after = sortColumn
-            ? rows.find((other) => other !== el && cellOf(other, sortColumn) > value)
-            : undefined;
-        template.parentElement.insertBefore(el, after ?? end);
+    constructor() {
+        super();
+        this.addEventListener(LB_DONE_EVENT_NAME, (e) => {
+            const { request, error } = e.detail;
+            if (error || request.name !== REQUEST_ROW_INSERT)
+                return;
+            const row = e.target.closest(`[${GHOST}]`);
+            if (row)
+                firstControl(row)?.focus();
+        });
     }
-    /** A section is derived, so it goes when its last row does. */
-    lbRowsLanded() {
-        for (const heading of this.querySelectorAll(`tr[${SECTION_ROW}]`)) {
-            if (this.section(heading).rows.length === 0)
-                heading.remove();
+    connectedCallback() {
+        const ghost = this.querySelector(`tbody[${GHOST}]`);
+        if (!ghost?.firstElementChild || this.ghostForm())
+            return;
+        const form = document.createElement("form");
+        form.id = `ghost-row-${++ghostForms}`;
+        form.hidden = true;
+        this.append(form);
+        for (const el of ghost.querySelectorAll(`[${ATTR_COLUMN}], button`)) {
+            el.setAttribute("form", form.id);
         }
     }
-    /**
-     * The rows of one section, and the node it ends at.
-     *
-     * A section runs from its heading to the next heading, or to the template
-     * if there is none after it. Without grouping there is one section and it
-     * is the whole body — the heading row the developer wrote is skipped along
-     * the way, because it carries no key and is therefore not a row.
-     */
-    section(heading) {
-        const template = this.querySelector("template");
-        const rows = [];
-        let node = heading
-            ? heading.nextElementSibling
-            : template.parentElement.firstElementChild;
-        while (node && node !== template && !node.hasAttribute(SECTION_ROW)) {
-            if (node.hasAttribute(ATTR_KEY_VALUE))
-                rows.push(node);
-            node = node.nextElementSibling;
-        }
-        return { rows, end: node ?? template };
+    /** The row this page's request created or moved, brought into view. */
+    lbRowsLanded() {
+        this.querySelector(`[${ATTR_ROW_REQUESTED}="${REQUESTED_CREATED}"], ` +
+            `[${ATTR_ROW_REQUESTED}="${REQUESTED_MOVED}"]`)?.scrollIntoView({ block: "nearest" });
     }
-    /** The section with this label, or a new one in front of the template. */
-    headingFor(template, label) {
-        const body = template.parentElement;
-        for (const heading of body.querySelectorAll(`tr[${SECTION_ROW}]`)) {
-            if (heading.getAttribute(SECTION_ROW) === label)
-                return heading;
-        }
-        const heading = document.createElement("tr");
-        heading.setAttribute(SECTION_ROW, label);
-        const cell = document.createElement("th");
-        cell.setAttribute("scope", "rowgroup");
-        // How wide the table is, from the row the developer wrote. Nothing
-        // else knows, and nothing had to be told twice.
-        cell.colSpan = template.content.firstElementChild?.childElementCount ?? 1;
-        cell.textContent = label;
-        heading.append(cell);
-        body.insertBefore(heading, template);
-        return heading;
+    /** The ghost row's form, once this table has made it. */
+    ghostForm() {
+        return this.querySelector(":scope > form");
     }
 }
-/** What a live row is showing in one column. */
-function cellOf(row, column) {
-    const selector = `[${ATTR_COLUMN}="${column}"]`;
-    const el = row.matches(selector) ? row : row.querySelector(selector);
-    return el?.textContent ?? "";
+/**
+ * The first control in a row the user can type into or choose from. A
+ * control a widget wraps is found inside it, since the wrapper takes no focus.
+ */
+function firstControl(row) {
+    return [
+        ...row.querySelectorAll('input:not([type="hidden"]), select, textarea'),
+    ].find((el) => !el.matches(":disabled") && el.checkVisibility?.() !== false);
 }
 customElements.define("lb-table", LbTable);
 //# sourceMappingURL=lb-table.browser.js.map

package/dist/lb-table.browser.js.map

@@ -1 +1 @@
-{"version":3,"file":"lb-table.browser.js","sourceRoot":"","sources":["../widgets/lb-table.browser.ts"],"names":[],"mappings":"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","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport { ATTR_COLUMN, ATTR_KEY_VALUE } from \"@loadbare/app/constants\";\nimport type { Row, RowsHost } from \"@loadbare/app/types\";\n\n/**\n * A table that owns its own scaffolding, and the case that shows what a\n * widget holding rows is for once the hub reconciles rows on its own.\n *\n * A plain `<table lb-query>` with a row template inside it needs no widget at\n * all. This one supplies the table, and the developer writes what only the\n * page knows: the heading row and the row template. That division is forced\n * rather than chosen — a `<thead>` written inside a custom element is not\n * inside a table, so the parser drops the tag and keeps the text. A\n * `<template>` survives anywhere, so the heading row arrives wrapped and\n * expansion unwraps it into the `lb-exp-template` destination beside the slot.\n *\n * What it adds at run time is placement, and only placement. `data-sort`\n * names the column rows are ordered by; `data-group` names the column they\n * are sectioned by. Both are this widget's own attributes, in HTML's `data-`\n * namespace rather than the hub's: the hub never reads them, and `lb-` is\n * reserved for what the hub does read. `lb-options` happens to spell its\n * grouping attribute the same way, which is a convenience and not a contract.\n *\n * The `foot` destination is the head's argument a second time and needs no\n * code here. A `<tfoot>` is a place on the page, not a row the hub delivers,\n * so what lands in it is an element carrying its own `lb-query` — a grand\n * total is a second query over the same data, of kind `row`, and the hub\n * lands it by name like any other.\n */\n\n/** Named on the row template: the column whose distinct values become sections. */\nconst GROUP_COLUMN = \"data-group\";\n\n/** Named on the row template: the column rows are ordered by within a section. */\nconst SORT_COLUMN = \"data-sort\";\n\n/**\n * The heading row of a section, carrying the value it stands for.\n *\n * The widget's own scaffolding, derived from rows the hub knows and invisible\n * to the hub itself, exactly as the `<optgroup>` in `lb-options` is. Nothing\n * binds to it, so it carries no `lb-key-value` and no name from the vocabulary.\n */\nconst SECTION_ROW = \"data-section\";\n\nclass LbTable extends HTMLElement implements RowsHost {\n  /**\n   * Group first, then sort within the group.\n   *\n   * Inserting a row before the first one that sorts after it keeps the\n   * section ordered, whatever else is in it — which is what lets a whole set\n   * and a single patched row take the same path.\n   */\n  lbPlaceRow(el: Element, row: Row, template: HTMLTemplateElement): void {\n    const groupColumn = template.getAttribute(GROUP_COLUMN);\n    const sortColumn = template.getAttribute(SORT_COLUMN);\n    const heading = groupColumn\n      ? this.headingFor(template, String(row[groupColumn] ?? \"\"))\n      : null;\n    const { rows, end } = this.section(heading);\n\n    const value = sortColumn ? String(row[sortColumn] ?? \"\") : \"\";\n    const after = sortColumn\n      ? rows.find((other) => other !== el && cellOf(other, sortColumn) > value)\n      : undefined;\n    template.parentElement!.insertBefore(el, after ?? end);\n  }\n\n  /** A section is derived, so it goes when its last row does. */\n  lbRowsLanded(): void {\n    for (const heading of this.querySelectorAll(`tr[${SECTION_ROW}]`)) {\n      if (this.section(heading).rows.length === 0) heading.remove();\n    }\n  }\n\n  /**\n   * The rows of one section, and the node it ends at.\n   *\n   * A section runs from its heading to the next heading, or to the template\n   * if there is none after it. Without grouping there is one section and it\n   * is the whole body — the heading row the developer wrote is skipped along\n   * the way, because it carries no key and is therefore not a row.\n   */\n  private section(heading: Element | null): { rows: Element[]; end: Element } {\n    const template = this.querySelector(\"template\")!;\n    const rows: Element[] = [];\n    let node = heading\n      ? heading.nextElementSibling\n      : template.parentElement!.firstElementChild;\n    while (node && node !== template && !node.hasAttribute(SECTION_ROW)) {\n      if (node.hasAttribute(ATTR_KEY_VALUE)) rows.push(node);\n      node = node.nextElementSibling;\n    }\n    return { rows, end: node ?? template };\n  }\n\n  /** The section with this label, or a new one in front of the template. */\n  private headingFor(template: HTMLTemplateElement, label: string): Element {\n    const body = template.parentElement!;\n    for (const heading of body.querySelectorAll(`tr[${SECTION_ROW}]`)) {\n      if (heading.getAttribute(SECTION_ROW) === label) return heading;\n    }\n    const heading = document.createElement(\"tr\");\n    heading.setAttribute(SECTION_ROW, label);\n    const cell = document.createElement(\"th\");\n    cell.setAttribute(\"scope\", \"rowgroup\");\n    // How wide the table is, from the row the developer wrote. Nothing\n    // else knows, and nothing had to be told twice.\n    cell.colSpan = template.content.firstElementChild?.childElementCount ?? 1;\n    cell.textContent = label;\n    heading.append(cell);\n    body.insertBefore(heading, template);\n    return heading;\n  }\n}\n\n/** What a live row is showing in one column. */\nfunction cellOf(row: Element, column: string): string {\n  const selector = `[${ATTR_COLUMN}=\"${column}\"]`;\n  const el = row.matches(selector) ? row : row.querySelector(selector);\n  return el?.textContent ?? \"\";\n}\n\ncustomElements.define(\"lb-table\", LbTable);\n"]}
+{"version":3,"file":"lb-table.browser.js","sourceRoot":"","sources":["../widgets/lb-table.browser.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAE3B,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,eAAe,GAChB,MAAM,yBAAyB,CAAC;AAGjC;;;;;;;;;;;;;;;;;;GAkBG;AAEH;;;;;;;;;;;;GAYG;AACH,MAAM,KAAK,GAAG,YAAY,CAAC;AAE3B,iFAAiF;AACjF,IAAI,UAAU,GAAG,CAAC,CAAC;AAEnB,MAAM,OAAQ,SAAQ,WAAW;IAC/B;;;;;;OAMG;IACH;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,CAAC,CAAC,EAAE,EAAE;YAC9C,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAI,CAAiC,CAAC,MAAM,CAAC;YACrE,IAAI,KAAK,IAAI,OAAO,CAAC,IAAI,KAAK,kBAAkB;gBAAE,OAAO;YACzD,MAAM,GAAG,GAAI,CAAC,CAAC,MAAkB,CAAC,OAAO,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC;YACxD,IAAI,GAAG;gBAAE,YAAY,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC;QACtC,CAAC,CAAC,CAAC;IACL,CAAC;IAED,iBAAiB;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC;QACpD,IAAI,CAAC,KAAK,EAAE,iBAAiB,IAAI,IAAI,CAAC,SAAS,EAAE;YAAE,OAAO;QAE1D,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC5C,IAAI,CAAC,EAAE,GAAG,aAAa,EAAE,UAAU,EAAE,CAAC;QACtC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAClB,KAAK,MAAM,EAAE,IAAI,KAAK,CAAC,gBAAgB,CAAC,IAAI,WAAW,WAAW,CAAC,EAAE,CAAC;YACpE,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAED,uEAAuE;IACvE,YAAY;QACV,IAAI,CAAC,aAAa,CAChB,IAAI,kBAAkB,KAAK,iBAAiB,MAAM;YAChD,IAAI,kBAAkB,KAAK,eAAe,IAAI,CACjD,EAAE,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;IAC1C,CAAC;IAED,yDAAyD;IACjD,SAAS;QACf,OAAO,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IAC7C,CAAC;CACF;AAED;;;GAGG;AACH,SAAS,YAAY,CAAC,GAAY;IAChC,OAAO;QACL,GAAG,GAAG,CAAC,gBAAgB,CACrB,8CAA8C,CAC/C;KACF,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,eAAe,EAAE,EAAE,KAAK,KAAK,CAAC,CAAC;AAC/E,CAAC;AAED,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport {\n  ATTR_COLUMN,\n  ATTR_ROW_REQUESTED,\n  LB_DONE_EVENT_NAME,\n  REQUEST_ROW_INSERT,\n  REQUESTED_CREATED,\n  REQUESTED_MOVED,\n} from \"@loadbare/app/constants\";\nimport type { HubRequestDone, RowsHost } from \"@loadbare/app/types\";\n\n/**\n * A table that owns its own scaffolding.\n *\n * A plain `<table lb-query>` with a row template inside it needs no widget at\n * all. This one supplies the table, and the developer writes what only the\n * page knows: the heading row and the row template. That division is forced\n * rather than chosen — a `<thead>` written inside a custom element is not\n * inside a table, so the parser drops the tag and keeps the text. A\n * `<template>` survives anywhere, so the heading row arrives wrapped and\n * expansion unwraps it into the `lb-exp-template` destination beside the slot.\n *\n * Placement and groups are the hub's, by the query's order and the page's\n * group templates. What this widget adds at run time is the ghost row, and\n * scrolling to the row the page's own request created or moved.\n *\n * The `foot` destination needs no code here. A `<tfoot>` is a place on the\n * page, not a row the hub delivers, so what lands in it is an aggregate or a\n * `row` query of its own, named on its `<tr>`.\n */\n\n/**\n * The ghost row's `<tbody>`, a blank row for entering a new one, between the\n * rows and the footer. The page writes it as the `ghost` template, so it\n * ships in the document like the heading and the footer, and the hub lands\n * on whatever in it names a query. It is not a live row: the hub never\n * reconciles it and never counts it.\n *\n * A `<form>` cannot wrap a `<tr>`, so the widget makes one outside the table\n * and joins the row's controls and buttons to it with the HTML `form`\n * attribute. Sending is the page's: a button in the row carrying\n * `lb-row-insert` submits that form, and the hub gathers what the form owns.\n * The hub resets the form once the insert succeeds.\n */\nconst GHOST = \"data-ghost\";\n\n/** Ghost row forms need ids for the `form` attribute; any unique one will do. */\nlet ghostForms = 0;\n\nclass LbTable extends HTMLElement implements RowsHost {\n  /**\n   * A ghost row is for entering the next row, so once one is saved the\n   * cursor goes back to the start of it. `lb-request-done` comes after the\n   * response items have landed, so nothing the hub places afterwards takes\n   * the focus away again. A refused insert leaves the cursor where the user\n   * left it.\n   */\n  constructor() {\n    super();\n    this.addEventListener(LB_DONE_EVENT_NAME, (e) => {\n      const { request, error } = (e as CustomEvent<HubRequestDone>).detail;\n      if (error || request.name !== REQUEST_ROW_INSERT) return;\n      const row = (e.target as Element).closest(`[${GHOST}]`);\n      if (row) firstControl(row)?.focus();\n    });\n  }\n\n  connectedCallback(): void {\n    const ghost = this.querySelector(`tbody[${GHOST}]`);\n    if (!ghost?.firstElementChild || this.ghostForm()) return;\n\n    const form = document.createElement(\"form\");\n    form.id = `ghost-row-${++ghostForms}`;\n    form.hidden = true;\n    this.append(form);\n    for (const el of ghost.querySelectorAll(`[${ATTR_COLUMN}], button`)) {\n      el.setAttribute(\"form\", form.id);\n    }\n  }\n\n  /** The row this page's request created or moved, brought into view. */\n  lbRowsLanded(): void {\n    this.querySelector(\n      `[${ATTR_ROW_REQUESTED}=\"${REQUESTED_CREATED}\"], ` +\n        `[${ATTR_ROW_REQUESTED}=\"${REQUESTED_MOVED}\"]`,\n    )?.scrollIntoView({ block: \"nearest\" });\n  }\n\n  /** The ghost row's form, once this table has made it. */\n  private ghostForm(): HTMLFormElement | null {\n    return this.querySelector(\":scope > form\");\n  }\n}\n\n/**\n * The first control in a row the user can type into or choose from. A\n * control a widget wraps is found inside it, since the wrapper takes no focus.\n */\nfunction firstControl(row: Element): HTMLElement | undefined {\n  return [\n    ...row.querySelectorAll<HTMLElement>(\n      'input:not([type=\"hidden\"]), select, textarea',\n    ),\n  ].find((el) => !el.matches(\":disabled\") && el.checkVisibility?.() !== false);\n}\n\ncustomElements.define(\"lb-table\", LbTable);\n"]}

package/dist/lb-table.html

@@ -4,5 +4,6 @@
   </caption>
   <thead lb-exp-template="head"></thead>
   <tbody lb-exp-slot></tbody>
+  <tbody data-ghost lb-exp-template="ghost"></tbody>
   <tfoot lb-exp-template="foot"></tfoot>
 </table>

package/docs/lb-checkbox.md

@@ -0,0 +1,63 @@
+# `lb-checkbox`
+
+> Status: a barebones starter.  Iterative use will drive improvements.
+
+A checkbox and its label as one element, for an application to style.  A
+definition only, with no script: the hub treats a native checkbox as a
+control, so the widget adds nothing but the markup.
+
+Requires `exp-column` and `exp-label`.
+
+```html
+<div lb-query="people">
+  <template>
+    <div>
+      <lb-checkbox exp-column="active" exp-label="Active" exp-request="lb-row-update"></lb-checkbox>
+    </div>
+  </template>
+</div>
+```
+
+## Expansion Attributes
+
+| Parameter     | Fills                                           |
+| ------------- | ----------------------------------------------- |
+| `exp-column`  | the checkbox's `lb-column`                      |
+| `exp-label`   | the label's text                                |
+| `exp-request` | the checkbox's `lb-request`, none when absent   |
+
+The column and request go on the checkbox inside, since it is the control,
+so they are expansion attributes here rather than `lb-column` and
+`lb-request` on the tag.
+
+## Why it is not like `lb-input`
+
+`lb-input` has a script that makes the tag itself the control, so the page
+writes `lb-column` on the tag.  `lb-checkbox` cannot do the same.  A value
+that lands before a widget's script has loaded reaches it only as the
+`lb-column-value` stamp, a string, and a checkbox's state is a boolean.  A
+script `lb-checkbox` would read the stamp `"false"` as checked, since no
+string is read.  The native checkbox has no such gap: the hub sets `checked`
+on it directly.
+
+`lb-input` could equally be markup alone; its script is a convention, kept
+for now.
+
+## The control
+
+The checkbox is checked when its column is anything but `false` or null, and
+sends `"true"` or `"false"`.  See
+[checkboxes](../../app/docs/reference/data-binding.md#checkboxes).
+
+## Styling
+
+The definition is a `<label>` holding the `<input type="checkbox">` and a
+`<span>` with the text:
+
+```css
+lb-checkbox label {
+  display: inline-flex;
+  gap: 0.5em;
+  align-items: center;
+}
+```

package/docs/lb-confirm.md

@@ -0,0 +1,45 @@
+# `lb-confirm`
+
+> Status: a barebones starter.  Iterative use will drive improvements.
+
+A button that asks before it sends.  The button opens a dialog holding the
+message the page writes inside the tag, a Cancel button, and a confirm button
+carrying the request.
+
+Requires `exp-label` and `exp-request`.
+
+```html
+<template>
+  <tr>
+    <td lb-column="name"></td>
+    <td>
+      <lb-confirm exp-label="Delete" exp-request="lb-row-delete">
+        Delete <b lb-column="name"></b>?
+      </lb-confirm>
+    </td>
+  </tr>
+</template>
+```
+
+## Expansion Attributes
+
+| Parameter     | Fills                                         |
+| ------------- | --------------------------------------------- |
+| `exp-label`   | the text of the button that opens the dialog  |
+| `exp-request` | the confirm button's `lb-request`             |
+| `exp-confirm` | the confirm button's text, `Confirm` when absent |
+
+## The request
+
+The request is on the dialog's confirm button, never on the tag, so nothing
+reaches the hub until the user says yes.  The dialog sits in the row the tag
+sits in, so the request carries that row's query and key, and the message
+can show the row's columns with `lb-column`.
+
+Cancel comes first and takes focus, so Enter on a dialog opened by accident
+sends nothing.  The widget closes the dialog when `lb-request-done` says the
+request succeeded.  A refused request leaves it open, with the hub's
+`lb-request-error` on the confirm button.
+
+The dialog is found by its place in the tag, not by id, so the tag works in a
+row template, where the hub clones it once per row.

package/docs/lb-form.md

@@ -0,0 +1,35 @@
+# `lb-form`
+
+> Status: a barebones starter.  Iterative use will drive improvements.
+
+A `<form>` over one row's controls, in one of two modes the row decides.
+
+Requires `exp-id`.
+
+```html
+<section lb-query="account">
+  <lb-form exp-id="account-form">
+    <lb-input lb-column="name" exp-label="Name" lb-request="lb-row-update"></lb-input>
+  </lb-form>
+  <button type="submit" form="account-form" lb-request="lb-row-insert">Save new</button>
+</section>
+```
+
+## Expansion Attributes
+
+| Parameter | Fills              |
+| --------- | ------------------ |
+| `exp-id`  | the form's `id`    |
+
+## Two modes
+
+A row with a key is on record, and each control saves its own column on
+`change` with `lb-request="lb-row-update"`.  A row whose key is empty is a new
+one not yet entered: the hub sends no update for it, so the controls only
+hold what a submit will gather.  See
+[a row not yet entered](../../app/docs/reference/data-binding.md#a-row-not-yet-entered).
+
+A definition only, with no script of its own.
+
+A button that acts on the row as a whole, such as one adding it to the set,
+belongs to whatever holds the set, and reaches the form by `form="<id>"`.