@loadbare/widgets 0.4.0 → 0.6.0

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":"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

@@ -2,7 +2,8 @@
   <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>
+  <tbody data-ghost lb-exp-template="ghost"></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-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,33 @@
+# `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: there is nothing to update, so the widget stops an
+`lb-row-update` that carries an empty key, and the controls only hold what a
+submit will gather.
+
+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>"`.

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,58 @@ 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-type`     | the input's `type`, `text` when absent |
+| `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-insert-dialog.md

@@ -0,0 +1,50 @@
+# `lb-insert-dialog`
+
+> Status: a barebones starter.  Iterative use will drive improvements.
+
+A row entered in a modal dialog, for a set being chosen from elsewhere on the
+page, such as creating an account while a picker chooses one.  The page
+writes the controls inside the tag; the dialog supplies the form, Cancel and
+Save.
+
+Requires `exp-id`, `exp-title` and `exp-query`.
+
+```html
+<lb-options lb-query="accounts" lb-column="account_id" exp-label="Account">
+  <template><option lb-column="name"></option></template>
+</lb-options>
+<button type="button" commandfor="new-account" command="show-modal">New</button>
+
+<lb-insert-dialog exp-id="new-account" exp-title="New account" exp-query="accounts">
+  <lb-input lb-column="name" exp-label="Name"></lb-input>
+</lb-insert-dialog>
+```
+
+## Expansion Attributes
+
+| Parameter   | Fills                                        |
+| ----------- | -------------------------------------------- |
+| `exp-id`    | the dialog's `id`, which buttons open        |
+| `exp-title` | the dialog's heading                         |
+| `exp-query` | the `lb-query` of the form, which it inserts into |
+| `exp-save`  | the Save button's text, `Save` when absent   |
+
+## Where it goes
+
+Write it once, outside every row and every form, and open it with HTML's own
+`commandfor` and `command="show-modal"` from as many buttons as need it.  A
+form inside another form is dropped by the parser, and `lb-table` joins every
+control in a ghost row to that row's form, so the dialog cannot sit beside
+the control it serves.
+
+## What it does
+
+Save is the form's `lb-row-insert`.  When `lb-request-done` says it
+succeeded, the widget chooses the new row in the nearest `lb-options` around
+the button that opened the dialog, fires `change` on it, and closes the
+dialog.  The new key comes from the patch the insert answers with, so the
+handler answers with the row it created.  A picker that saves its own column
+saves it; one in a ghost row or a new record holds it until Save.
+
+A refused insert leaves the dialog open to correct.  Cancel and Escape close
+it, and closing resets the form.

package/docs/lb-master.md

@@ -0,0 +1,53 @@
+# `lb-master`
+
+> Status: a barebones starter.  Iterative use will drive improvements.
+
+A set on one side, one of its rows on the other, and the buttons that act on
+the set.  A definition only, with no script of its own: it is built from
+[`lb-form`](./lb-form.md) and [`lb-confirm`](./lb-confirm.md).
+
+Requires `exp-row`.
+
+```html
+<lb-master exp-row="account">
+  <template lb-exp-template="picker">
+    <div lb-query="lb-url">
+      <lb-picker lb-query="accounts" lb-column="acct" lb-request="lb-row-update"
+        exp-label="Account" exp-column="name"></lb-picker>
+    </div>
+  </template>
+  <lb-input lb-column="name" exp-label="Name" lb-request="lb-row-update"></lb-input>
+  <template lb-exp-template="delete-message">
+    Delete <b lb-column="name"></b>?
+  </template>
+</lb-master>
+```
+
+## Expansion Attributes
+
+| Parameter      | Fills                                          |
+| -------------- | ---------------------------------------------- |
+| `exp-row`      | the `lb-query` of the row the form shows       |
+| `exp-form-id`  | the form's `id`, `master-form` when absent     |
+
+| Template                                    | Fills                         |
+| ------------------------------------------- | ----------------------------- |
+| `<template lb-exp-template="picker">`       | the side that chooses the row |
+| `<template lb-exp-template="delete-message">` | the question Delete asks    |
+
+## The buttons
+
+| Button   | Shows             | Does                                          |
+| -------- | ----------------- | --------------------------------------------- |
+| Copy     | A row on record   | Sends `copy`, a request the page declares     |
+| Delete   | A row on record   | Asks, then sends `lb-row-delete`              |
+| Save new | A new row         | Submits the form as `lb-row-insert`, and pushes a history entry |
+| Cancel   | A new row         | Resets the form                               |
+
+Each carries `data-mode`, `on-record` or `new`, and the stylesheet shows each
+only in its mode.  A new row is one whose key is empty.  New is not a button:
+a button cannot write a query parm, so choosing the picker's blank starts a
+new row.
+
+Copy goes to the server rather than filling the form, because a copy is a new
+row in the set, and only the server can bring its children along.

package/docs/lb-options.md

@@ -1,18 +1,27 @@
 # `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.  For options
+in groups, write a group template holding an `<optgroup>`.
 
 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 lb-group>
+    <optgroup>
+      <template><option lb-column="label"></option></template>
+    </optgroup>
   </template>
 </lb-options>
 ```
@@ -25,49 +34,60 @@ 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                |
+| `lb-group`   | a template holding an `<optgroup>` | a group of 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 hub makes one `<optgroup>` per run of the query's order's leading term.
+An `<optgroup>` takes its label from an attribute, which landing does not
+set, so the widget labels each from the `lb-group-value` the hub stamps on
+it: the value the group breaks on.
+
+## 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,23 @@
 # `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 it shows varies.  It takes no
+children.  Options in groups take a group template, which is `lb-options`
+with the page's own templates.
 
-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` and `exp-column`.
 
 ```html
 <lb-picker
-  lb-list="statuses"
+  lb-query="statuses"
+  lb-column="status_id"
   exp-label="Status"
-  exp-key="id"
-  exp-cell="label"
-  exp-group="category"
-  lb-action="setStatus"
+  exp-column="label"
+  lb-request="setStatus"
 ></lb-picker>
 ```
 
@@ -26,28 +28,26 @@ 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-key` and `exp-cell` are required. Leaving `exp-group` off leaves the
-options ungrouped.
+`exp-column` is required.  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.