@loadbare/widgets 0.4.0 → 0.6.0

package/dist/lb-options.browser.d.ts

@@ -1,16 +1,43 @@
-import type { ListHost, Row } from "@loadbare/app/types";
-export declare class LbOptions extends HTMLElement implements ListHost {
-    static observedAttributes: string[];
-    attributeChangedCallback(_name: string, _old: string, value: string): void;
+import type { RowsHost } from "@loadbare/app/types";
+import { WrappedControl } from "./control.js";
+/**
+ * A `<select>` whose choices are the rows of the query it names.
+ *
+ * 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 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 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`.
+ *
+ * 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.
+ */
+export declare class LbOptions extends WrappedControl implements RowsHost {
+    protected inner: string;
     /**
-     * The hub reconciles the list and calls this for placement only, so this
-     * widget carries no copy of what a row is or when one arrives.
+     * The value last set or chosen, which the options may not include yet.
+     * Null when nothing chose one, so the select's own default stands.
      */
-    lbPlaceRow(el: Element, row: Row, template: HTMLTemplateElement): void;
-    /** Everything derived from the rows, once the whole result has landed. */
+    private chosen;
+    get value(): string;
+    set value(value: string);
+    formResetCallback(): void;
+    protected changed(): void;
+    /** Everything derived from the rows, once the whole answer has landed. */
     lbRowsLanded(): void;
-    /** The group with this label, or a new one in front of the template. */
-    private groupFor;
-    connectedCallback(): void;
 }
 //# sourceMappingURL=lb-options.browser.d.ts.map

package/dist/lb-options.browser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lb-options.browser.d.ts","sourceRoot":"","sources":["../widgets/lb-options.browser.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAc,QAAQ,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AA6BrE,qBAAa,SAAU,SAAQ,WAAY,YAAW,QAAQ;IAC5D,MAAM,CAAC,kBAAkB,WAAgB;IAEzC,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAKnE;;;OAGG;IACH,UAAU,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,mBAAmB,GAAG,IAAI;IAUtE,0EAA0E;IAC1E,YAAY,IAAI,IAAI;IAepB,wEAAwE;IACxE,OAAO,CAAC,QAAQ;IAUhB,iBAAiB;CAoBlB"}
+{"version":3,"file":"lb-options.browser.d.ts","sourceRoot":"","sources":["../widgets/lb-options.browser.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,qBAAa,SAAU,SAAQ,cAAe,YAAW,QAAQ;IAC/D,SAAS,CAAC,KAAK,SAAY;IAE3B;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAuB;IAErC,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAGtB;IAED,iBAAiB,IAAI,IAAI;IAKzB,SAAS,CAAC,OAAO,IAAI,IAAI;IAKzB,0EAA0E;IAC1E,YAAY,IAAI,IAAI;CAcrB"}

package/dist/lb-options.browser.js

@@ -1,97 +1,67 @@
 /// <reference lib="dom" />
-import { ATTR_ACTION, ATTR_KEY_VALUE, ATTR_QUERY_PARM, ATTR_VALUE, LB_EVENT_NAME, } 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 come from a list, 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`, and the developer
- * names the key column once, with `lb-key` on the template.
+ * 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 receives a value like any other cell, which selects the option whose
- * key it is. A picker that writes a query parm sends nothing: the hub reads
- * its choice off the bubbling `change` and lands the URL's back on it.
+ * 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 HTMLElement {
-    static observedAttributes = [ATTR_VALUE];
-    attributeChangedCallback(_name, _old, value) {
-        const select = this.querySelector("select");
-        if (select)
-            select.value = value;
-    }
+export class LbOptions extends WrappedControl {
+    inner = "select";
     /**
-     * The hub reconciles the list and calls this for placement only, so this
-     * widget carries no copy of what a row is or when one arrives.
+     * The value last set or chosen, which the options may not include yet.
+     * Null when nothing chose one, so the select's own default stands.
      */
-    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);
+    chosen = null;
+    get value() {
+        return this.chosen ?? super.value;
+    }
+    set value(value) {
+        this.chosen = value === null || value === undefined ? null : String(value);
+        super.value = value;
     }
-    /** Everything derived from the rows, once the whole result has landed. */
+    formResetCallback() {
+        this.chosen = null;
+        super.formResetCallback();
+    }
+    changed() {
+        this.chosen = this.control?.value ?? null;
+        super.changed();
+    }
+    /** 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 twice.
-        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();
-        }
-        // A value that landed before its option did selects it now.
-        const value = this.getAttribute(ATTR_VALUE);
-        if (value !== null)
-            this.querySelector("select").value = value;
-    }
-    /** 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;
+        for (const group of this.querySelectorAll(`optgroup${LIVE_GROUP}`)) {
+            group.label = group.getAttribute(ATTR_GROUP_VALUE) ?? "";
         }
-        const group = document.createElement("optgroup");
-        group.label = label;
-        select.insertBefore(group, template);
-        return group;
-    }
-    connectedCallback() {
-        this.addEventListener("change", () => {
-            const select = this.querySelector("select");
-            if (!select) {
-                console.error(`lb-options: change with no <select>, ignoring`);
-                return;
-            }
-            const name = this.getAttribute(ATTR_ACTION);
-            if (!name && this.hasAttribute(ATTR_QUERY_PARM))
-                return;
-            if (!name) {
-                console.error(`lb-options: no ${ATTR_ACTION}, nothing to send`);
-                return;
-            }
-            // The hub scopes it, so a choice inside a row says which row.
-            const detail = { action: name, value: select.value };
-            this.dispatchEvent(new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail }));
-        });
+        // 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();
     }
 }
 customElements.define("lb-options", LbOptions);

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":"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","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport {\n  ATTR_ACTION,\n  ATTR_KEY_VALUE,\n  ATTR_QUERY_PARM,\n  ATTR_VALUE,\n  LB_EVENT_NAME,\n} from \"@loadbare/app/constants\";\nimport type { HubRequest, ListHost, Row } from \"@loadbare/app/types\";\n\n/**\n * A `<select>` whose choices come from a list, and the case that shows why\n * 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`, and the developer\n * names the key column once, with `lb-key` on the template.\n *\n * It receives a value like any other cell, which selects the option whose\n * key it is. A picker that writes a query parm sends nothing: the hub reads\n * its choice off the bubbling `change` and lands the URL's back on it.\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 HTMLElement implements ListHost {\n  static observedAttributes = [ATTR_VALUE];\n\n  attributeChangedCallback(_name: string, _old: string, value: string) {\n    const select = this.querySelector(\"select\");\n    if (select) select.value = value;\n  }\n\n  /**\n   * The hub reconciles the list 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 twice.\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 landed before its option did selects it now.\n    const value = this.getAttribute(ATTR_VALUE);\n    if (value !== null) this.querySelector(\"select\")!.value = value;\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  connectedCallback() {\n    this.addEventListener(\"change\", () => {\n      const select = this.querySelector(\"select\");\n      if (!select) {\n        console.error(`lb-options: change with no <select>, ignoring`);\n        return;\n      }\n      const name = this.getAttribute(ATTR_ACTION);\n      if (!name && this.hasAttribute(ATTR_QUERY_PARM)) return;\n      if (!name) {\n        console.error(`lb-options: no ${ATTR_ACTION}, nothing to send`);\n        return;\n      }\n      // The hub scopes it, so a choice inside a row says which row.\n      const detail: HubRequest = { action: name, value: select.value };\n      this.dispatchEvent(\n        new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail }),\n      );\n    });\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-options.html

@@ -1,4 +1,4 @@
 <label
   >{{label}}
-  <select lb-slot></select
+  <select lb-exp-slot></select
 ></label>

package/dist/lb-picker.browser.js

@@ -6,19 +6,17 @@ 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-key`, `exp-cell` 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.
+ * 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 a change sends the declared
- * action. A distinct class exists only because `customElements.define`
- * requires one constructor per name.
+ * The behavior is inherited whole, because it is the same behavior. A
+ * distinct class exists only because `customElements.define` requires one
+ * constructor per name.
  */
 class LbPicker extends LbOptions {
 }

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;;;;;;;;;;;;;;;;;;;GAmBG;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-key`, `exp-cell` 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.\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 a change sends the declared\n * action. A distinct class exists only because `customElements.define`\n * requires one 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 lb-key="{{key}}" data-group="{{group}}">
-      <option lb-cell="{{cell}}"></option>
+    <template>
+      <option lb-column="{{column}}"></option>
     </template></select
 ></label>

package/dist/lb-select.browser.js

@@ -1,46 +1,14 @@
 /// <reference lib="dom" />
-import { ATTR_ACTION, ATTR_QUERY_PARM, ATTR_VALUE, LB_EVENT_NAME, } from "@loadbare/app/constants";
+import { WrappedControl } from "./control.js";
 /**
- * A leaf cell wrapping a <select>. It receives its value like any other cell,
- * and on change it sends the action the developer declared for it — the
- * request vocabulary and the binding vocabulary running in both directions on
- * one widget.
+ * 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 case where an action carries
- * a value. The server still decides what that choice means.
- *
- * A select that writes a query parm sends nothing: the hub reads its choice
- * off the bubbling `change` and puts it in the address bar.
+ * 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 HTMLElement {
-    static observedAttributes = [ATTR_VALUE];
-    attributeChangedCallback(_name, _old, value) {
-        const select = this.querySelector("select");
-        if (!select) {
-            console.error(`lb-select: no <select> to receive the value`);
-            return;
-        }
-        select.value = value;
-    }
-    connectedCallback() {
-        this.addEventListener("change", () => {
-            const select = this.querySelector("select");
-            if (!select) {
-                console.error(`lb-select: change with no <select>, ignoring`);
-                return;
-            }
-            const name = this.getAttribute(ATTR_ACTION);
-            if (!name && this.hasAttribute(ATTR_QUERY_PARM))
-                return;
-            if (!name) {
-                console.error(`lb-select: no ${ATTR_ACTION}, nothing to send`);
-                return;
-            }
-            // The hub scopes it, so a choice inside a row says which row.
-            const detail = { action: name, value: select.value };
-            this.dispatchEvent(new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail }));
-        });
-    }
+class LbSelect extends WrappedControl {
+    inner = "select";
 }
 customElements.define("lb-select", LbSelect);
 //# sourceMappingURL=lb-select.browser.js.map

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,EACL,WAAW,EACX,eAAe,EACf,UAAU,EACV,aAAa,GACd,MAAM,yBAAyB,CAAC;AAGjC;;;;;;;;;;;GAWG;AACH,MAAM,QAAS,SAAQ,WAAW;IAChC,MAAM,CAAC,kBAAkB,GAAG,CAAC,UAAU,CAAC,CAAC;IAEzC,wBAAwB,CAAC,KAAa,EAAE,IAAY,EAAE,KAAa;QACjE,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC5C,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAO,CAAC,KAAK,CAAC,6CAA6C,CAAC,CAAC;YAC7D,OAAO;QACT,CAAC;QACD,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;IACvB,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACnC,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAC5C,IAAI,CAAC,MAAM,EAAE,CAAC;gBACZ,OAAO,CAAC,KAAK,CAAC,8CAA8C,CAAC,CAAC;gBAC9D,OAAO;YACT,CAAC;YACD,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;YAC5C,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC;gBAAE,OAAO;YACxD,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,OAAO,CAAC,KAAK,CAAC,iBAAiB,WAAW,mBAAmB,CAAC,CAAC;gBAC/D,OAAO;YACT,CAAC;YACD,8DAA8D;YAC9D,MAAM,MAAM,GAAe,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC;YACjE,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAC1D,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;;AAGH,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport {\n  ATTR_ACTION,\n  ATTR_QUERY_PARM,\n  ATTR_VALUE,\n  LB_EVENT_NAME,\n} from \"@loadbare/app/constants\";\nimport type { HubRequest } from \"@loadbare/app/types\";\n\n/**\n * A leaf cell wrapping a <select>. It receives its value like any other cell,\n * and on change it sends the action the developer declared for it — the\n * request vocabulary and the binding vocabulary running in both directions on\n * one widget.\n *\n * The choice is the interaction, so this is the case where an action carries\n * a value. The server still decides what that choice means.\n *\n * A select that writes a query parm sends nothing: the hub reads its choice\n * off the bubbling `change` and puts it in the address bar.\n */\nclass LbSelect extends HTMLElement {\n  static observedAttributes = [ATTR_VALUE];\n\n  attributeChangedCallback(_name: string, _old: string, value: string) {\n    const select = this.querySelector(\"select\");\n    if (!select) {\n      console.error(`lb-select: no <select> to receive the value`);\n      return;\n    }\n    select.value = value;\n  }\n\n  connectedCallback() {\n    this.addEventListener(\"change\", () => {\n      const select = this.querySelector(\"select\");\n      if (!select) {\n        console.error(`lb-select: change with no <select>, ignoring`);\n        return;\n      }\n      const name = this.getAttribute(ATTR_ACTION);\n      if (!name && this.hasAttribute(ATTR_QUERY_PARM)) return;\n      if (!name) {\n        console.error(`lb-select: no ${ATTR_ACTION}, nothing to send`);\n        return;\n      }\n      // The hub scopes it, so a choice inside a row says which row.\n      const detail: HubRequest = { action: name, value: select.value };\n      this.dispatchEvent(\n        new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail }),\n      );\n    });\n  }\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-select.html

@@ -1,4 +1,4 @@
 <label
   >{{label}}
-  <select lb-slot></select
+  <select lb-exp-slot></select
 ></label>

package/dist/lb-table.browser.js

@@ -1,116 +1,89 @@
 /// <reference lib="dom" />
-import { ATTR_CELL, 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 list
- * widget is for once the hub reconciles lists on its own.
+ * A table that owns its own scaffolding.
  *
- * A plain `<table lb-list>` with a row template inside it needs no widget at
+ * 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
  * page knows: the heading row and the row template. That division is forced
  * rather than chosen — a `<thead>` written inside a custom element is not
  * inside a table, so the parser drops the tag and keeps the text. A
  * `<template>` survives anywhere, so the heading row arrives wrapped and
- * expansion unwraps it into the `lb-template` destination beside the slot.
+ * 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 ordinary scope carrying its own `lb-row` — a
- * grand total is a second query over the same data, and the hub resolves it
- * by name like any other. See demo/pages/ledger.html.
+ * 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_CELL}="${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