@loadbare/widgets 0.3.2 → 0.5.0

package/dist/lb-table.browser.js

@@ -1,16 +1,16 @@
 /// <reference lib="dom" />
-import { ATTR_CELL, ATTR_KEY_VALUE } from "@loadbare/app/constants";
+import { ATTR_COLUMN, ATTR_KEY_VALUE } 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, and the case that shows what a
+ * widget holding rows is for once the hub reconciles rows on its own.
  *
- * 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
@@ -21,9 +21,9 @@ import { ATTR_CELL, ATTR_KEY_VALUE } from "@loadbare/app/constants";
  *
  * 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.
+ * 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.
  */
 /** Named on the row template: the column whose distinct values become sections. */
 const GROUP_COLUMN = "data-group";
@@ -108,7 +108,7 @@ class LbTable extends HTMLElement {
 }
 /** What a live row is showing in one column. */
 function cellOf(row, column) {
-    const selector = `[${ATTR_CELL}="${column}"]`;
+    const selector = `[${ATTR_COLUMN}="${column}"]`;
     const el = row.matches(selector) ? row : row.querySelector(selector);
     return el?.textContent ?? "";
 }

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_CELL, ATTR_KEY_VALUE } from \"@loadbare/app/constants\";\nimport type { ListHost, Row } from \"@loadbare/app/types\";\n\n/**\n * A table that owns its own scaffolding, and the case that shows what a list\n * widget is for once the hub reconciles lists on its own.\n *\n * A plain `<table lb-list>` 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-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 ordinary scope carrying its own `lb-row` — a\n * grand total is a second query over the same data, and the hub resolves it\n * by name like any other. See demo/pages/ledger.html.\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 ListHost {\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_CELL}=\"${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":"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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"]}

package/dist/lb-table.html

@@ -2,7 +2,7 @@
   <caption>
     {{caption}}
   </caption>
-  <thead lb-template="head"></thead>
-  <tbody lb-slot></tbody>
-  <tfoot lb-template="foot"></tfoot>
+  <thead lb-exp-template="head"></thead>
+  <tbody lb-exp-slot></tbody>
+  <tfoot lb-exp-template="foot"></tfoot>
 </table>

package/dist/lb-unknown-page.html

@@ -1,10 +1,8 @@
-<dialog lb-unknown-page lb-row="lb-navigation">
+<dialog lb-url-unknown lb-query="lb-url">
   <p>This page is not in the app.</p>
   <dl>
-    <dt>Page</dt>
-    <dd lb-cell="page-label"></dd>
     <dt>URL</dt>
-    <dd lb-cell="page-uri"></dd>
+    <dd lb-column="lb-path"></dd>
   </dl>
   <form method="dialog"><button>{{button-text | OK}}</button></form>
 </dialog>

package/docs/lb-input.md

@@ -2,16 +2,17 @@
 
 > Status: a barebones starter.  Iterative use will drive improvements.
 
-A wrapper for HTML Input.  
+A control wrapping an HTML `<input>`.  The hub sets it from a column and
+gathers it back under the same column, as it does a native `<input>`.
 
-Requires attributes `lb-cell` and `exp-label`.  
+Requires attributes `lb-column` and `exp-label`.
 
 ```html
-<div lb-list="people">
-  <template lb-key="id">
+<div lb-query="people">
+  <template>
     <div>
-      <lb-input lb-cell="name" exp-label="Name" lb-action="lb-row-update"></lb-input>
-      <lb-input lb-cell="email" exp-label="Email" exp-readonly></lb-input>
+      <lb-input lb-column="name" exp-label="Name" lb-request="lb-row-update"></lb-input>
+      <lb-input lb-column="email" exp-label="Email" exp-readonly></lb-input>
     </div>
   </template>
 </div>
@@ -21,57 +22,57 @@ Requires attributes `lb-cell` and `exp-label`.
 
 These are the parameters that control build-time expansion of the final HTML.
 
-| Parameter             | Fills                                            |
-|-----------------------|--------------------------------------------------|
-| `exp-label`           | the visible `<label>` text                       |
-| `exp-readonly`        | the input's `readonly` attribute                 |
+| Parameter      | Fills                            |
+| -------------- | -------------------------------- |
+| `exp-label`    | the visible `<label>` text       |
+| `exp-readonly` | the input's `readonly` attribute |
 
-Any value on `exp-readonly` makes the input readonly. Leaving the parameter
+Any value on `exp-readonly` makes the input readonly.  Leaving the parameter
 off drops the attribute.
 
+## Attributes
 
-## Behavioral Attributes
+| Attribute    | Names                                     |
+| ------------ | ----------------------------------------- |
+| `lb-column`  | the column the input shows and gathers to |
+| `lb-request` | the request a change issues               |
 
-| Attribute   | Names                                              |
-|-------------|----------------------------------------------------|
-| `lb-action` | what a change sends; nothing is sent without it    |
+## The control
 
-`lb-action="lb-row-update"` saves the input's own cell: the hub sends an
-`lb-row-update` whose `values` holds that one cell, and the list's `rowUpdate`
-answers it the same way it answers a form. Any other name sends that action,
-carrying the input's value. The hub adds the binding below to either.
+`lb-input` is a form-associated custom element.  Its `value` property gets and
+sets the value of the `<input>` inside it, and it fires `change` on itself when
+that `<input>` fires `change`.  A form reset returns the `<input>` to its
+default.
 
-## Binding
-
-| Attribute  | Read from            | Names                        |
-|------------|----------------------|------------------------------|
-| `lb-cell`  | the element itself   | the column the input shows   |
-| `lb-key-value` | the nearest ancestor | the row                  |
-| `lb-list` | the nearest ancestor | the query                    |
+A value that lands on a live row before the row's elements upgrade reaches the
+widget as `lb-column-value`, and the widget takes it up when it first
+connects.
 
 ## Inside a form
 
 An `lb-input` inside an `lb-row-insert` or `lb-row-update` form carries no
-`lb-action`. The form reads every `lb-cell` in it on submit and sends one
-request for all of them, so an input that also sent its own would write the
-same edit twice.
+`lb-request`.  The hub gathers every `lb-column` whose form owner is the form
+on submit and sends one request for all of them.
 
 ```html
-<form lb-action="lb-row-update">
-  <lb-input lb-cell="name" exp-label="Name"></lb-input>
-  <lb-input lb-cell="email" exp-label="Email"></lb-input>
-  <button type="submit">Save</button>
+<form lb-query="people" lb-request="lb-row-insert">
+  <lb-input lb-column="name" exp-label="Name"></lb-input>
+  <lb-input lb-column="email" exp-label="Email"></lb-input>
+  <button type="submit">Add</button>
 </form>
 ```
 
-## Editing
+## Editing one column
 
-By default an `lb-input` does not notify the hub when its value changes, as shown
-in the form example above.
+With `lb-request`, the `lb-input` commits on `change`.  The hub gathers its
+value alone, so `lb-request="lb-row-update"` sends an `lb-row-update` for the
+query and key of the row around it, with `values` holding that one column.
+Any other request name sends that request with the same `query`, `key` and
+`values`.
 
-To send on change, add `lb-action`. The hub catches the event and sends the
-request to the server.
+Inside `lb-query="lb-url"`, `lb-request="lb-row-update"` writes the column as a
+query parm, and the hub answers with no round trip.
 
 While the request is in flight the hub marks the `lb-input` with
-`lb-pending`, and on failure with `lb-error`. Both are there for a
-stylesheet to read.
+`lb-request-pending`, and on failure with `lb-request-error`.  Both are there
+for a stylesheet to read.

package/docs/lb-options.md

@@ -1,18 +1,25 @@
 # `lb-options`
 
-A wrapper for HTML Select, with the `<option>`s coming from a query.
+A control wrapping an HTML `<select>`, with the `<option>`s coming from a
+query.
 
-Apply the `lb-list` attribute to name the query, and `lb-action` to name the
-action a change sends. Write a `<template lb-key="...">` inside the tag, and
-apply `lb-cell` to the `<option>` itself — an `<option>` holds text, not
-elements. Apply `data-group` to the template to section the options.
+Apply the `lb-query` attribute to name the query, `lb-column` to name the
+column the choice shows and gathers to, and `lb-request` to name the request a
+change issues.  Write a `<template>` inside the tag, and apply `lb-column` to
+the `<option>` itself — an `<option>` holds text, not elements.  Apply
+`data-group` to the template to section the options.
 
 Provide `exp-label`.
 
 ```html
-<lb-options lb-list="statuses" exp-label="Status" lb-action="setStatus">
-  <template lb-key="id" data-group="category">
-    <option lb-cell="label"></option>
+<lb-options
+  lb-query="statuses"
+  lb-column="status_id"
+  exp-label="Status"
+  lb-request="setStatus"
+>
+  <template data-group="category">
+    <option lb-column="label"></option>
   </template>
 </lb-options>
 ```
@@ -25,49 +32,58 @@ improvements through iterative use.
 ## Parameters
 
 | Parameter   | Fills                      |
-|-------------|----------------------------|
+| ----------- | -------------------------- |
 | `exp-label` | the visible `<label>` text |
 
-## Binding
+## Attributes
 
-| Attribute   | Read from          | Names                                |
-|-------------|--------------------|--------------------------------------|
-| `lb-list`  | the element itself | the query whose rows become options  |
-| `lb-action` | the element itself | the action a change sends            |
-| `lb-query-parm` | the element itself | the query parm a change writes   |
-| `lb-key` | the row template | the column that identifies a row     |
-| `data-group`  | the row template   | the column that sections the options |
-| `lb-cell`   | the `<option>`     | the column the option shows          |
+| Attribute    | On                 | Names                                      |
+| ------------ | ------------------ | ------------------------------------------ |
+| `lb-query`   | the element itself | the query whose rows become options        |
+| `lb-column`  | the element itself | the column the choice shows and gathers to |
+| `lb-request` | the element itself | the request a change issues                |
+| `data-group` | the row template   | the column that sections the options       |
+| `lb-column`  | the `<option>`     | the column the option shows                |
 
-The key column gives the option its `value`, so the page names it once.
+The server declares the query's key.  The widget copies each option's
+`lb-key-value` to its `value`.
 
 ## Grouping
 
 `data-group` names a column whose distinct values become `<optgroup>`s, each
 labelled with the value.
 
+## The control
+
+`lb-options` is a form-associated custom element.  Its `value` property gets
+and sets the value of the `<select>` inside it, and it fires `change` on itself
+when that `<select>` fires `change`.  A form reset selects the first option.
+
+The hub reads the element's own `lb-column` from the row around it, and lands
+the rows of its `lb-query` inside it.  A value set before the option it names
+has landed selects that option when the rows land.
+
 ## Choosing
 
-Choosing an option notifies the hub, which fires a request to the server: the
-action named by `lb-action`, carrying the key of the chosen row. Declare that
-action on the server.
+With `lb-request`, the `lb-options` commits on `change`.  The hub gathers its
+value alone, the key of the chosen row, and sends the request with the `query`
+and `key` of the row around it.  Declare that request on the server, or name
+`lb-row-update`.
 
-`lb-action` is required, unless the element carries `lb-query-parm`, in
-which case the hub writes the chosen key into the URL and lands the URL's
-back on the widget, and the widget sends nothing. Without either, a change
-does nothing.
+Without `lb-request`, a change commits nothing, and the form or live row around
+the `lb-options` gathers its value.
 
-A value landed on the widget, as `lb-value`, selects the option with that
-key, including one that arrives after the value did.
+Inside `lb-query="lb-url"`, `lb-request="lb-row-update"` writes the chosen key
+as a query parm, and the hub answers with no round trip.
 
 While the request is in flight the hub marks the `lb-options` with
-`lb-pending`, and on failure with `lb-error`. Both are there for a
-stylesheet to read.
+`lb-request-pending`, and on failure with `lb-request-error`.  Both are there
+for a stylesheet to read.
 
 ## Styling an empty list
 
-`lb-options` carries `lb-row-count` with the number of options showing, for a
-stylesheet to read.
+`lb-options` carries `lb-query-row-count` with the number of options showing,
+for a stylesheet to read.
 
 For the case where every row is one option and only the column names vary,
 see [`lb-picker`](./lb-picker.md).

package/docs/lb-picker.md

@@ -1,21 +1,22 @@
 # `lb-picker`
 
 [`lb-options`](./lb-options.md) with the row template built in, for when every
-row is one option and only the column names vary. It takes no children.
+row is one option and only the column names vary.  It takes no children.
 
-Apply the `lb-list` attribute to name the query, and `lb-action` to name the
-action a change sends.
+Apply the `lb-query` attribute to name the query, `lb-column` to name the
+column the choice shows and gathers to, and `lb-request` to name the request a
+change issues.
 
-Provide `exp-label`, `exp-key`, `exp-cell`, and optionally `exp-group`.
+Provide `exp-label`, `exp-column`, and optionally `exp-group`.
 
 ```html
 <lb-picker
-  lb-list="statuses"
+  lb-query="statuses"
+  lb-column="status_id"
   exp-label="Status"
-  exp-key="id"
-  exp-cell="label"
+  exp-column="label"
   exp-group="category"
-  lb-action="setStatus"
+  lb-request="setStatus"
 ></lb-picker>
 ```
 
@@ -26,28 +27,28 @@ improvements through iterative use.
 
 ## Parameters
 
-| Parameter   | Fills                                            |
-|-------------|--------------------------------------------------|
-| `exp-label` | the visible `<label>` text                       |
-| `exp-key`   | the column that identifies a row                 |
-| `exp-cell`  | the column the option shows                      |
-| `exp-group` | the column that sections the options, if grouped |
+| Parameter    | Fills                                            |
+| ------------ | ------------------------------------------------ |
+| `exp-label`  | the visible `<label>` text                       |
+| `exp-column` | the column the option shows                      |
+| `exp-group`  | the column that sections the options, if grouped |
 
-`exp-key` and `exp-cell` are required. Leaving `exp-group` off leaves the
-options ungrouped.
+`exp-column` is required.  Leaving `exp-group` off leaves the options
+ungrouped.  The server declares the query's key, which becomes each option's
+`value`.
 
-## Binding
+## Attributes
 
-| Attribute   | Read from          | Names                               |
-|-------------|--------------------|-------------------------------------|
-| `lb-list`  | the element itself | the query whose rows become options |
-| `lb-action` | the element itself | the action a change sends           |
-| `lb-query-parm` | the element itself | the query parm a change writes  |
+| Attribute    | Names                                      |
+| ------------ | ------------------------------------------ |
+| `lb-query`   | the query whose rows become options        |
+| `lb-column`  | the column the choice shows and gathers to |
+| `lb-request` | the request a change issues                |
 
 ## Choosing
 
 The same as [`lb-options`](./lb-options.md): grouping, the key as the option's
-value, `lb-row-count`, and the action or query parm on change.
+value, the control's `value`, `lb-query-row-count`, and the request on change.
 
 Write `lb-options` and the template instead for a row that needs a second
 element, or an option built from two columns.

package/docs/lb-select.md

@@ -1,14 +1,14 @@
 # `lb-select`
 
-A wrapper for HTML Select, with the `<option>`s written by hand.
+A control wrapping an HTML `<select>`, with the `<option>`s written by hand.
 
-Apply the `lb-cell` attribute to name the column, and `lb-action` to name the
-action a change sends.
+Apply the `lb-column` attribute to name the column, and `lb-request` to name the
+request a change issues.
 
 Provide `exp-label`.
 
 ```html
-<lb-select lb-cell="status" exp-label="Status" lb-action="setStatus">
+<lb-select lb-column="status" exp-label="Status" lb-request="setStatus">
   <option value="open">Open</option>
   <option value="closed">Closed</option>
 </lb-select>
@@ -22,30 +22,48 @@ improvements through iterative use.
 ## Parameters
 
 | Parameter   | Fills                      |
-|-------------|----------------------------|
+| ----------- | -------------------------- |
 | `exp-label` | the visible `<label>` text |
 
-## Binding
+## Attributes
 
-| Attribute   | Read from          | Names                       |
-|-------------|--------------------|-----------------------------|
-| `lb-cell`   | the element itself | the column the select shows |
-| `lb-action` | the element itself | the action a change sends   |
-| `lb-query-parm` | the element itself | the query parm a change writes |
+| Attribute    | Names                                      |
+| ------------ | ------------------------------------------ |
+| `lb-column`  | the column the select shows and gathers to |
+| `lb-request` | the request a change issues                |
+
+## The control
+
+`lb-select` is a form-associated custom element.  Its `value` property gets
+and sets the value of the `<select>` inside it, and it fires `change` on itself
+when that `<select>` fires `change`.  A form reset selects the option marked
+`selected`, or the first option.
 
 ## Choosing
 
-Choosing an option notifies the hub, which fires a request to the server: the
-action named by `lb-action`, carrying the chosen option's value. Declare that
-action on the server.
+With `lb-request`, the `lb-select` commits on `change`.  The hub gathers its
+value alone and sends the request with the `query` and `key` of the row around
+it, and `values` holding the chosen option's value under its column.  Declare
+that request on the server, or name `lb-row-update`.
+
+Without `lb-request`, a change commits nothing, and the form or live row around
+the `lb-select` gathers its value.
 
-`lb-action` is required, unless the select carries `lb-query-parm`, in which
-case the hub writes the choice into the URL and the select sends nothing.
-Without either, a change does nothing.
+Inside `lb-query="lb-url"`, `lb-request="lb-row-update"` writes the choice as a
+query parm, and the hub answers with no round trip.
+
+```html
+<div lb-query="lb-url">
+  <lb-select lb-column="status" exp-label="Status" lb-request="lb-row-update">
+    <option value="">All</option>
+    <option value="open">Open</option>
+  </lb-select>
+</div>
+```
 
 While the request is in flight the hub marks the `lb-select` with
-`lb-pending`, and on failure with `lb-error`. Both are there for a
-stylesheet to read.
+`lb-request-pending`, and on failure with `lb-request-error`.  Both are there
+for a stylesheet to read.
 
 For a `<select>` whose options come from a query, see
 [`lb-options`](./lb-options.md) and [`lb-picker`](./lb-picker.md).

package/docs/lb-table.md

@@ -2,24 +2,24 @@
 
 A wrapper for HTML Table, supplying the `<table>` itself.
 
-Apply the `lb-list` attribute to name the query. Write three `<template>`s
-inside the tag: one marked `lb-template="head"` for the heading row, one
-carrying `lb-key` for the row, and optionally one marked `lb-template="foot"`
-for the footer. Apply `data-sort` and `data-group` to the row template to order
+Apply the `lb-query` attribute to name the query.  Write three `<template>`s
+inside the tag: one marked `lb-exp-template="head"` for the heading row, one
+unmarked for the row, and optionally one marked `lb-exp-template="foot"` for
+the footer.  Apply `data-sort` and `data-group` to the row template to order
 and section the rows.
 
 Provide `exp-caption`.
 
 ```html
-<lb-table lb-list="ledger" exp-caption="Ledger">
-  <template lb-template="head">
+<lb-table lb-query="ledger" exp-caption="Ledger">
+  <template lb-exp-template="head">
     <tr><th>Date</th><th>Amount</th></tr>
   </template>
-  <template lb-key="id" data-sort="date" data-group="month">
-    <tr><td lb-cell="date"></td><td lb-cell="amount"></td></tr>
+  <template data-sort="date" data-group="month">
+    <tr><td lb-column="date"></td><td lb-column="amount"></td></tr>
   </template>
-  <template lb-template="foot">
-    <tr lb-row="ledger-total"><td>Total</td><td lb-cell="total"></td></tr>
+  <template lb-exp-template="foot">
+    <tr lb-query="ledger-total"><td>Total</td><td lb-column="total"></td></tr>
   </template>
 </lb-table>
 ```
@@ -35,35 +35,37 @@ improvements through iterative use.
 ## Parameters
 
 | Parameter     | Fills                |
-|---------------|----------------------|
+| ------------- | -------------------- |
 | `exp-caption` | the `<caption>` text |
 
-## Binding
+## Attributes
 
-| Attribute  | Read from                        | Names                              |
-|------------|----------------------------------|------------------------------------|
-| `lb-list` | the element itself               | the query whose rows fill the body |
-| `lb-key` | the row template             | the column that identifies a row   |
+| Attribute    | On                               | Names                              |
+| ------------ | -------------------------------- | ---------------------------------- |
+| `lb-query`   | the element itself               | the query whose rows fill the body |
 | `data-sort`  | the row template                 | the column rows are ordered by     |
 | `data-group` | the row template                 | the column rows are sectioned by   |
-| `lb-cell`  | elements inside the row template | the column each element shows      |
+| `lb-column`  | elements inside the row template | the column each element shows      |
+
+The server declares the query's key.
 
 ## Sorting and grouping
 
 `data-sort` names the column rows are ordered by, comparing the text each row
-shows. `data-group` names the column they are sectioned by: each distinct value
-gets a heading row of its own, spanning the width of the row template, and
-rows sort within their section.
+shows.  `data-group` names the column they are sectioned by: each distinct
+value gets a heading row of its own, spanning the width of the row template,
+and rows sort within their section.
 
 ## The footer
 
 The footer is an ordinary part of the page, not a row from the table's query.
-Give it its own `lb-row` — a grand total is a second query, declared on the
-server like any other.
+Give it its own `lb-query` — a grand total is a second query of kind `row`,
+declared on the server like any other.
 
 ## Styling an empty table
 
-`lb-table` carries `lb-row-count` with the number of rows showing, for a
+`lb-table` carries `lb-query-row-count` with the number of rows showing, for a
 stylesheet to read.
 
-For a repeater with no table of its own, see [`lb-list`](./lb-list.md).
+For rows with no table of their own, write the row template inside any element
+that carries `lb-query`.