@loadbare/app 0.18.0 → 0.18.2

package/docs/reference/page-files.md

@@ -96,7 +96,7 @@ export const queries: Queries = {
 
 | Declared with              | Answers with                              |
 |----------------------------|-------------------------------------------|
-| `row(key, run)`            | One row, an object                        |
+| `row(key, run)`            | One row, an object, or `null` for none    |
 | `rows(key, run, options)`  | All its rows, an array of objects         |
 
 `options` are a `rows` query's order and column types. `order` is the
@@ -317,6 +317,7 @@ queries:
 | Answer                   | States                                      |
 |--------------------------|---------------------------------------------|
 | `{ ... }`                | The row of a `row` query                    |
+| `null`                   | A `row` query found no row                  |
 | `[...]`                  | All rows of a `rows` query, and their order |
 | `patch({ rows: [...] })` | These rows arrive or change; the rest stand |
 | `patch({ drop: [...] })` | These keys are gone; the rest stand         |

package/docs/reference/widgets.md

@@ -1,8 +1,8 @@
 # The Basic Widget Library
 
-Eleven widgets: `lb-input`, `lb-select`, `lb-options`, `lb-picker`,
+Thirteen widgets: `lb-input`, `lb-select`, `lb-options`, `lb-picker`,
 `lb-table`, `lb-unknown-page`, `lb-confirm`, `lb-form`, `lb-insert-dialog`,
-`lb-master` and `lb-checkbox`. Every one of them is an ordinary custom element, written
+`lb-master`, `lb-checkbox`, `lb-number` and `lb-date`. Every one of them is an ordinary custom element, written
 against the contracts in [Custom Elements](./custom-elements.md#html) for its
 definition and [Custom Elements](./custom-elements.md#code) for its class.
 
@@ -258,6 +258,28 @@ checked. The hub sets a native checkbox's `checked` directly.
 | `exp-label`   | The label's text                              |
 | `exp-request` | The checkbox's `lb-request`, none when absent |
 
+## `lb-number` and `lb-date`
+
+A number shown by the browser's `Intl.NumberFormat`, and a date or time
+shown by `Intl.DateTimeFormat`.  Neither is a control: `lb-column` goes on
+the tag, and the widget renders the `lb-column-value` the hub stamps; see
+[Receiving a value](./custom-elements.md#receiving-a-value).
+
+```html
+<lb-number lb-column="balance" exp-style="currency" exp-currency="USD"></lb-number>
+<lb-date lb-column="due" exp-date-style="medium"></lb-date>
+```
+
+Each parameter is one of Intl's options in kebab-case, as `exp-currency-sign`
+for `currencySign`, plus `exp-locale`.  A value that is no number or date
+shows as it arrived, and a date alone, `YYYY-MM-DD`, shows as that day in
+every time zone.  The stamp keeps the raw value, so a stylesheet selects on
+it:
+
+```css
+lb-number[lb-column-value^="-"] { color: var(--negative); }
+```
+
 ## `lb-unknown-page`
 
 The chrome's dialog for a URL that names no page, as one tag:

package/docs/roadmap.md

@@ -1,7 +1,7 @@
 # Roadmap
 
-Release 1.0 is optimized to prove that a Loadbare app can be robust and
-highly performant with a codebase that has very low accidental complexity.
+Release 1.0 is optimized to prove that a Loadbare app holds a median 300ms
+round trip from click to paint.  See [Theory](./theory.md).
 
 What follows is everything not yet decided or not yet built: release
 candidates, risks not worth solving speculatively, and open design
@@ -30,13 +30,6 @@ read from a query parm. Whether a response may say the server already
 sorted it is open: the server may not sort as the browser does, and for a
 thousand rows the hub's sort is a small cost.
 
-### Nesting
-
-Whether a live row may hold rows of its own detail (master-detail, an
-expanding row). [Theory](./theory.md) already flags this as possibly load-bearing if
-disallowed. Worth a decision-in-principle the first time a master-detail
-page is built, even before the mechanism is needed elsewhere.
-
 ### Events while a request is in flight
 
 The hub ignores a commit on an element carrying `lb-request-pending`.
@@ -90,6 +83,9 @@ If the hub were configured with a URL for the data channel, the entire app
 could be delivered from a static origin, such as an S3 bucket or static web
 server.
 
+`<lb-hub>` reads no attributes, so the data channel's URL, and a timeout an
+application outgrows, can arrive as attributes on it.
+
 ### Tree-shaking CSS by tag name
 
 Release 1.0 concatenates every `.css` file under `src`, and every one inside
@@ -110,6 +106,18 @@ Most valuable against a large imported widget library, where an app uses a
 small fraction of what ships. Revisit when a real app's `app.css` is big
 enough to measure.
 
+### HTML validation in the build
+
+A page can be well formed and still break HTML's rules for what an element
+may hold, such as a `<div>` inside a `<p>`.  The parser rearranges it
+silently, the same way at build time and in the browser.  The builder could
+run html-validate on the source or the expanded output, as an opt-in.
+
+### A whole row for a custom element
+
+A column lands one element at a time.  An optional `lbAcceptRow` beside
+`lbRowsLanded` would hand a custom element its whole row.
+
 ### Options on `createHub`
 
 Global hooks, transaction wrapping, error handling and a CSRF token each

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@loadbare/app",
   "description": "High performance web app framework for server-bound applications",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "type": "module",
   "files": [
     "dist",

package/skills/loadbare-app/SKILL.md

@@ -155,7 +155,8 @@ answers with a constant one.
 **There is no template language.**  No `{#if}`, no `v-for`, no `map()`.  A
 set of rows is an element carrying `lb-query` with a `<template>` inside it,
 the row template, which the hub clones once per row.  A `row` query with no
-row template lands on the element itself.  A `rows` query with no row
+row template lands on the element itself, and one answering `null` empties
+every column there and removes its `lb-key-value`.  A `rows` query with no row
 template lands nothing, which is what an insert form naming its query is.  A
 condition is `lb-show="<column>"`: write every possibility into the page and
 let a column decide which is present.  The column is a boolean or null; the
@@ -244,8 +245,11 @@ row.  Anything else gathers its form owner's controls.  A `<form>` cannot
 wrap a `<tr>`, so an insert row in a table puts its controls in a form
 elsewhere with the HTML `form` attribute.  A checkbox is a control: checked
 unless its column is `false` or null, and gathered as `"true"` or `"false"`.
-Radio buttons and file inputs are not controls here: they receive no value
-and are not gathered.
+A radio button is a control: checked when its `value` is the column's
+value, and the group gathers the one checked, or `""`.  In a row template
+the hub stamps its `name` with the row's key, so each row is its own group.
+File inputs are not controls here: they receive no value and are not
+gathered.
 
 **A form that adds to a set chosen elsewhere is written once, outside every
 row.**  A form cannot sit inside another form or in a table row, so a dialog
@@ -331,7 +335,8 @@ reason.  A list shared by several handlers is a warning sign.
 one page's elements in the form they show: formatted dates and amounts, and
 the words a reader sees, such as "12 postings".  The hub does no type
 conversion, so what a number, date or null looks like is decided on the
-server.  A value the page reads back stays data: a column on a control, the
+server, or by `lb-number` and `lb-date`, which format a raw value with
+`Intl`.  Send a column the user sorts or filters raw.  A value the page reads back stays data: a column on a control, the
 key, an `lb-show` condition, a value a stylesheet selects on.  What pages
 share goes beneath them, in a database view or a helper module, never in a
 layer between the page and its queries.
@@ -454,7 +459,8 @@ own, or to act on rows once they land through the hook the hub calls,
 
 Before writing one, check `@loadbare/widgets`: `lb-input`, `lb-select`,
 `lb-options`, `lb-picker`, `lb-table`, `lb-unknown-page`, `lb-confirm`,
-`lb-form`, `lb-insert-dialog`, `lb-master`, `lb-checkbox`.  The first four are
+`lb-form`, `lb-insert-dialog`, `lb-master`, `lb-checkbox`, `lb-number`,
+`lb-date`.  The first four are
 form-associated controls that carry `lb-column` and `lb-request`
 themselves.  Install the package and list it in `src/imports.ts`:
 

package/skills/loadbare-app/references/TECHREF-1.0.md

@@ -13,42 +13,6 @@ that they can be decided later w/o breaking changes, then we rename
 them to "Out of Scope" or move them to the roadmap.  Otherwise, 
 they must be resolved before we declare 1.0.
 
-### Data types
-
-Loadbare/app enforces no data types on values between the database and the
-browser.  A uniform and useful approach is difficult to discern, and we do
-not want to pollute 1.0 with a potentially sub-optimal solution.  Until then
-a value is rendered by browser coercion when it lands on an HTML text
-element or a control, and by whatever the custom element does with
-`lb-column-value` when it lands on one that is not a control.
-
-Three places read a value's type today.  The [order](#order) compares
-values by their JSON type, a [filter](#filters) reads its value as the
-column's type, and an [aggregate](#aggregates) reads a sum or an average
-from a JSON number or a string holding a plain decimal.  A `rows` query may
-declare a column's type, which the order, a filter, `lb-min` and `lb-max`
-read the column as in place of its JSON type.  No declared type changes how
-a value renders.
-
-We will then see if a useful solution emerges that Loadbare/app should
-handle.
-
-### Form controls
-
-- **Radio buttons are not implemented.** A value does not land on one and
-  the hub does not gather one.  A radio group is several elements answering
-  to one column.
-
-### Custom element hooks
-
-Loadbare/app owns every method name beginning with `lb` on a custom element.
-That decision is firm; what the set contains is not.
-
-- **Decide whether a custom element may receive a whole row.** A column
-  lands one element at a time and offers no escape hatch.  An optional
-  `lbAcceptRow` would sit beside `lbRowsLanded`, and this is the most likely
-  first request from a custom element author.
-
 ### Nested queries
 
 Imagine an HTML `<select>` that shows a fixed set of choices on every row of
@@ -83,18 +47,8 @@ But the allowed values may depend on other values in the row.
   repository with several applications gets one per application.  `--src`
   stays a flag, since it is what locates the file.  State the precedence
   between a flag and a key once.  Its key names join the permanent surface,
-  so this lands before 1.0 or not at all.
-- **Decide CSS pairing.** Naming a stylesheet `<tag>.css` beside its
-  definition would let the builder ship only what survives expansion.
-  Recommend deferring the mechanism and reserving the configuration key, so
-  that it lands as an opt-in rather than as a silent drop.
-- **Decide whether the build validates HTML.** A page can be well formed and
-  still break HTML's rules for what an element may hold, such as a `<div>`
-  inside a `<p>`.  The parser rearranges it silently, the same way at build
-  time and in the browser, so nothing reports it.  Checking those rules is a
-  validator's job, and html-validate is one the builder could run on the
-  source or on the expanded output.  Deciding it after 1.0 is free if it
-  lands as an opt-in, and it may need a configuration key.
+  so this lands before 1.0 or not at all.  It reserves a key for the
+  roadmap's tree-shaking CSS by tag name.
 - **Confirm the three output names.** `app.html`, `client.js` and `app.css`
   are about to be fixed in `staticRoutes` as well as in the builder.
 
@@ -103,16 +57,15 @@ But the allowed values may depend on other values in the row.
 None of this is surface.  It is listed here because trimming it is free
 today and breaking after 1.0.
 
-- **Audit what the hub does.** It appears to have routines that go beyond
-  what the `lb-*` attribute namespace specifies.
+- **Audit what the hub does.** Every routine it runs answers to an `lb-*`
+  attribute, a [reserved query](#reserved-queries), or a
+  [reserved event](#reserved-events) or [method](#reserved-methods).  Trim
+  whatever does not, and leave what stays clean: no dead code, no routine
+  written twice, no comment the code contradicts.
 - **Keep the rest as constants.** The endpoint, `index` and the timeout are
   linkage between the builder and the hub rather than facts an application
   varies.  Adding a knob for any of them buys a second shape of application
   to reason about.
-- **Give the hub a configuration channel without using it.** `<lb-hub>` reads
-  no attributes at all, which is the free landing spot for the roadmap's
-  static-origin split and for a timeout an application eventually outgrows.
-  Reserve the idea, build nothing.
 
 ## The build
 
@@ -220,7 +173,8 @@ it is sent to the browser on initial page load, no HTML is ever sent
 again.
 
 The developer writes `lb-*` attributes in markup.  Script never assigns
-them.  The hub and the builder write only their stamps.  See
+them.  The hub and the builder write only their stamps, and the hub writes
+the `name` of a radio button in a row template.  See
 [The markup checks](#the-markup-checks).
 
 ### Expansion
@@ -457,8 +411,8 @@ unless its name begins with `lb-`.
 | Any other element                                | Its text content               |
 
 A control is an `<input>`, `<select>` or `<textarea>`, or a form-associated
-custom element with a `value` property that fires `change`.  A checkbox is a
-control too, by the rule below.  A
+custom element with a `value` property that fires `change`.  A checkbox and
+a radio button are controls too, by the rules below.  A
 form-associated custom element declares `static formAssociated = true`.
 
 The hub stamps `lb-column-value` with the value on every element it sets.
@@ -481,9 +435,18 @@ attribute means nothing to the hub.
 <input type="checkbox" lb-column="active" lb-request="lb-row-update" />
 ```
 
-An `<input>` of type `radio` or `file` receives nothing, not even
-`lb-column-value`, and the hub reports it to the console.  The hub does not
-gather one either.
+A radio button's state is `checked` as well.  The hub checks it when its
+`value` attribute equals the value as a string, and unchecks it otherwise,
+`null` included.  Of the radio buttons naming one column, the hub gathers
+the `value` of the one checked, or `""` when none is.
+
+```html
+<input type="radio" lb-column="shift" value="day" lb-request="lb-row-update" />
+<input type="radio" lb-column="shift" value="night" lb-request="lb-row-update" />
+```
+
+An `<input>` of type `file` receives nothing, not even `lb-column-value`,
+and the hub reports it to the console.  The hub does not gather one either.
 
 A `<select>` with no option for the value shows no selection.
 
@@ -509,6 +472,10 @@ landed inside another query, such as a total in a table's foot, is not one
 of that query's rows.  A stylesheet or a custom element selects live rows
 with `[lb-row-live]`, and never with `[lb-key-value]`.
 
+A `row` query answering `null` lands every column its element names as
+null, and the element loses `lb-key-value`.  Under a row template, its live
+row leaves.
+
 A key is unique within a query.  Two rows with one key in the same answer,
 or two live rows showing one key, are reported on the console.
 
@@ -1583,6 +1550,26 @@ whose name begins with `lb` and a capital and is not in
 Script never assigns an `lb-` attribute, so the markup states every one
 that exists, and checking the markup is sound.
 
+### Uncommon layouts
+
+The hub supports these layouts and adds no check to refuse them.  They are
+uncommon, and Loadbare/app does not shape itself around them.
+
+- **A radio button in a row template.**  The browser groups radio buttons
+  by `name`, and a row template repeats one `name` in every live row.  The
+  hub stamps each radio button's `name` with the `name` written, or its
+  column when none is, followed by `-` and the live row's key, so each live
+  row holds a group of its own.
+- **Several rows not yet entered, each holding radio buttons.**  A
+  [row not yet entered](#a-row-not-yet-entered) has an empty key, so the
+  radio buttons of every such row share one `name` and form one group.
+- **Radio buttons populated from a query.**  A radio button in a query's row
+  template answers to that query's row, as any element there does, so which
+  row and column it lands from and gathers to follows from where the layout
+  puts it.  The result is the same as in any framework that populates radio
+  buttons from a query.  A choice among a query's rows is better made with a
+  form-associated control, such as `lb-options` in `@loadbare/widgets`.
+
 ## Application files
 
 ### Chrome
@@ -1801,8 +1788,8 @@ export const queries: Queries = {
 };
 ```
 
-A `row` query returns one object, and a `rows` query returns an array of
-objects, which the page shows in that order when the query declares none.  An answer that disagrees with
+A `row` query returns one object, or `null` when it finds no row, and a
+`rows` query returns an array of objects, which the page shows in that order when the query declares none.  An answer that disagrees with
 its declared kind is left out of the response, with a warning naming the
 query.
 

package/skills/loadbare-app/references/css.md

@@ -42,3 +42,166 @@ See [`chrome.html`](./chrome.md) for the link, [The Express
 server](./server.md) for the route, and
 [`loadbare-app-build`](./builder.md#running-the-builder) for `--minify`.
 </content>
+
+## Selecting what the hub stamps
+
+The hub tells a stylesheet everything it knows through attributes, so an
+application styles state with selectors and writes no script for it.  Each
+stamp is an `lb-` attribute the hub writes; never write one in markup.
+
+### A value
+
+Every element a column lands on carries the value as `lb-column-value`,
+exactly as the query sent it, and loses it when the value is null.  Select
+on the column and the value:
+
+```css
+[lb-column="status"][lb-column-value="locked"] { opacity: 0.5; }
+[lb-column="balance"][lb-column-value^="-"] { color: var(--negative); }
+[lb-column="note"]:not([lb-column-value]) { display: none; }
+```
+
+A widget that formats its value, such as `lb-number`, keeps the raw value
+in the stamp, so the selector reads the number and not its text.  See
+[Where a column lands](./data-binding.md#where-a-column-lands).
+
+### A row
+
+| Select               | For                                             |
+|----------------------|-------------------------------------------------|
+| `[lb-row-live]`      | Every live row of a list                        |
+| `[lb-row-selected]`  | A row its `lb-select` checkbox ticks            |
+| `[lb-row-editing]`   | The row a pointed form is editing               |
+| `[lb-key-value="…"]` | One row, by its key                             |
+| `[hidden]`           | A row a filter hides; the browser hides it      |
+
+An element a `row` query lands on carries `lb-key-value` while the query has
+a row, and loses it when the query answers `null`:
+
+```css
+[lb-query="member"]:not([lb-key-value]) .member-missing { display: revert; }
+```
+
+Select live rows with `[lb-row-live]`, never with `[lb-key-value]`: a `row`
+landed inside a list, such as a total in a table's foot, carries a key and
+is not one of the list's rows.
+
+```css
+[lb-row-selected] { background: var(--selected); }
+[lb-row-editing] { outline: 2px solid var(--accent); }
+```
+
+See [Rows](./data-binding.md#rows), [Selecting rows](./data-binding.md#selecting-rows)
+and [Editing a row in one form](./data-binding.md#editing-a-row-in-one-form).
+
+### A group
+
+Each top-level element of a group carries `lb-group-live`, the column it
+breaks on as `lb-group-column`, and its value there as `lb-group-value`:
+
+```css
+[lb-group-column="category"][lb-group-value="Income"] { color: var(--income); }
+```
+
+See [Groups](./data-binding.md#groups).
+
+### What just happened to a row
+
+The hub stamps what its last landing did, so a stylesheet animates with
+nothing else:
+
+| Select                         | For                                            |
+|--------------------------------|------------------------------------------------|
+| `[lb-row-created]`             | A row that arrived                             |
+| `[lb-row-changed]`             | A row whose values changed                     |
+| `[lb-row-moved]`               | A row whose values changed and now stands elsewhere; it carries `lb-row-changed` too |
+| `[lb-row-requested]`           | Any of the three, done by this page's request, as `created`, `changed` or `moved` |
+| `[lb-row-leaving]`, `[lb-group-leaving]` | A row or group on its way out; the hub removes it when its animations end |
+
+```css
+[lb-row-created] { animation: arrive 200ms; }
+[lb-row-requested="changed"] { animation: flash 600ms; }
+[lb-row-leaving] { animation: depart 200ms forwards; }
+```
+
+A row stamped again plays its animation again.  See
+[What happened to a row](./data-binding.md#what-happened-to-a-row).
+
+### How many rows show
+
+An element carrying `lb-query` and a row template carries
+`lb-query-row-count`, the number of live rows showing.  A row a filter hides
+is not counted.
+
+```css
+.roster-empty { display: none; }
+[lb-query-row-count="0"] .roster-empty { display: revert; }
+```
+
+See [Counting rows](./data-binding.md#counting-rows).
+
+### A request
+
+| Select                 | For                                                     |
+|------------------------|---------------------------------------------------------|
+| `[lb-request-pending]` | The element that committed, while its round trip is out; `aria-busy="true"` rides with it |
+| `[lb-request-error]`   | The element whose round trip failed, until it commits again |
+| `[lb-request-refused]` | The element whose request the handler refused, holding the message, empty when there is none |
+| `:invalid`             | A control a refusal named a column for                  |
+
+The hub ignores a commit on a pending element, so the stylesheet only has to
+show it:
+
+```css
+[lb-request-pending] { cursor: progress; opacity: 0.6; }
+[lb-request-error] { outline: 2px solid var(--error); }
+[lb-request-refused]:not([lb-request-refused=""])::after {
+  content: attr(lb-request-refused);
+}
+```
+
+See [Request state](./data-binding.md#request-state) and
+[Refusals](./data-binding.md#refusals).
+
+### A form pointed at a row
+
+A pointed form's `lb-key-value` says what it is doing:
+
+| Select                       | The form is        |
+|------------------------------|--------------------|
+| `form[lb-key-value]:not([lb-key-value=""])` | Editing a row |
+| `form[lb-key-value=""]`      | Entering a new row |
+| `form:not([lb-key-value])`   | Not in use         |
+
+```css
+form[lb-key-value=""] .save-existing,
+form:not([lb-key-value=""]) .save-new { display: none; }
+```
+
+See [Editing a row in one form](./data-binding.md#editing-a-row-in-one-form).
+
+### The user's choices
+
+An order or a filter the user chose is a column of `lb-choices`, so the
+element showing it carries it as `lb-column-value`.  Style anything else by
+it with `:has()`:
+
+```css
+table:has([lb-column="accounts_order"][lb-column-value="-balance"])
+  th.balance::after { content: "▼"; }
+```
+
+See [Choices](./data-binding.md#choices).
+
+### Content shown by condition
+
+An element `lb-show` turns off is moved into a `<template>`, so no selector
+reaches it and nothing about it needs styling.  The `<template>` keeps its
+place, so `:nth-child()` counts it; prefer `:nth-child(… of …)` or a class
+over position.  See [Where an absent element is](./data-binding.md#where-an-absent-element-is).
+
+### The first load
+
+Write `hidden` on the chrome's `<body>`, and the hub removes it once the
+first page has landed.  See
+[Preventing the first-load blink](./chrome.md#preventing-the-first-load-blink).

package/skills/loadbare-app/references/data-binding.md

@@ -95,6 +95,10 @@ not `lb-row-live`, so a `row` shown inside another query, such as a total in
 a table's foot, is not one of that query's rows. Select live rows with
 `[lb-row-live]`, never with `[lb-key-value]`.
 
+A `row` query answering `null` found no row. The hub lands every column the
+element names as null and removes its `lb-key-value`; under a row template,
+the live row leaves.
+
 Write `lb-column` on each element that shows a column. The element reads
 from its nearest ancestor row: the live row it is in, or the element a
 `row` landed on. A nested `lb-query` begins a new query, and what is inside
@@ -124,6 +128,7 @@ no row fills.
 |------------------------------------------------------|-----------------------------------------|
 | `<input>`, `<select>`, `<textarea>`                  | Its `value`, and `lb-column-value`      |
 | `<input type="checkbox">`                            | Its `checked`, and `lb-column-value`    |
+| `<input type="radio">`                               | Its `checked`, and `lb-column-value`    |
 | A form-associated custom element with `value`        | Its `value`, and `lb-column-value`      |
 | Any other custom element                             | `lb-column-value` only                  |
 | Any other element                                    | Its text content, and `lb-column-value` |
@@ -135,11 +140,13 @@ element that is not a control keeps the content the builder placed in it
 from its element file, and renders `lb-column-value` itself; see
 [Custom Elements](./custom-elements.md#receiving-a-value).
 
-A radio button and a file input receive nothing, and the hub reports it to
-the console.
+A file input receives nothing, and the hub reports it to the console.
 
 The hub hands every value to the browser as the server sent it. What a
-number, a date or a null looks like is decided in the query.
+number, a date or a null looks like is decided in the query, or by a custom
+element that formats it, such as
+[`lb-number` and `lb-date`](./widgets.md#lb-number-and-lb-date). Send a
+column the user sorts or filters raw, and format it in the element.
 
 ### Checkboxes
 
@@ -155,6 +162,27 @@ boolean, and the string `"false"` is checked. Unchecked sends `"false"`
 rather than nothing, so a flag can be set back. The checkbox's `value`
 attribute means nothing to the hub.
 
+### Radio buttons
+
+A radio button is a control.  It is checked when its `value` is the
+column's value as a string, and unchecked otherwise.  Of the radio buttons
+naming one column, the hub gathers the `value` of the one checked, or `""`
+when none is:
+
+```html
+<input type="radio" lb-column="shift" value="day" lb-request="lb-row-update" />
+<input type="radio" lb-column="shift" value="night" lb-request="lb-row-update" />
+```
+
+In a row template, the hub stamps each radio button's `name` with the
+`name` written, or its column when none is, followed by `-` and the live
+row's key, so each live row holds a group of its own.  Rows not yet entered
+share the empty key, and so share one group.
+
+A radio button in a query's row template answers to that query's row, as
+any element there does.  A choice among a query's rows is better made with
+a form-associated control, such as `lb-options` in `@loadbare/widgets`.
+
 ### Rows
 
 Write a `<template>` inside the element carrying `lb-query`, holding one

package/skills/loadbare-app/references/page-files.md

@@ -96,7 +96,7 @@ export const queries: Queries = {
 
 | Declared with              | Answers with                              |
 |----------------------------|-------------------------------------------|
-| `row(key, run)`            | One row, an object                        |
+| `row(key, run)`            | One row, an object, or `null` for none    |
 | `rows(key, run, options)`  | All its rows, an array of objects         |
 
 `options` are a `rows` query's order and column types. `order` is the
@@ -317,6 +317,7 @@ queries:
 | Answer                   | States                                      |
 |--------------------------|---------------------------------------------|
 | `{ ... }`                | The row of a `row` query                    |
+| `null`                   | A `row` query found no row                  |
 | `[...]`                  | All rows of a `rows` query, and their order |
 | `patch({ rows: [...] })` | These rows arrive or change; the rest stand |
 | `patch({ drop: [...] })` | These keys are gone; the rest stand         |

package/skills/loadbare-app/references/widgets.md

@@ -1,8 +1,8 @@
 # The Basic Widget Library
 
-Eleven widgets: `lb-input`, `lb-select`, `lb-options`, `lb-picker`,
+Thirteen widgets: `lb-input`, `lb-select`, `lb-options`, `lb-picker`,
 `lb-table`, `lb-unknown-page`, `lb-confirm`, `lb-form`, `lb-insert-dialog`,
-`lb-master` and `lb-checkbox`. Every one of them is an ordinary custom element, written
+`lb-master`, `lb-checkbox`, `lb-number` and `lb-date`. Every one of them is an ordinary custom element, written
 against the contracts in [Custom Elements](./custom-elements.md#html) for its
 definition and [Custom Elements](./custom-elements.md#code) for its class.
 
@@ -258,6 +258,28 @@ checked. The hub sets a native checkbox's `checked` directly.
 | `exp-label`   | The label's text                              |
 | `exp-request` | The checkbox's `lb-request`, none when absent |
 
+## `lb-number` and `lb-date`
+
+A number shown by the browser's `Intl.NumberFormat`, and a date or time
+shown by `Intl.DateTimeFormat`.  Neither is a control: `lb-column` goes on
+the tag, and the widget renders the `lb-column-value` the hub stamps; see
+[Receiving a value](./custom-elements.md#receiving-a-value).
+
+```html
+<lb-number lb-column="balance" exp-style="currency" exp-currency="USD"></lb-number>
+<lb-date lb-column="due" exp-date-style="medium"></lb-date>
+```
+
+Each parameter is one of Intl's options in kebab-case, as `exp-currency-sign`
+for `currencySign`, plus `exp-locale`.  A value that is no number or date
+shows as it arrived, and a date alone, `YYYY-MM-DD`, shows as that day in
+every time zone.  The stamp keeps the raw value, so a stylesheet selects on
+it:
+
+```css
+lb-number[lb-column-value^="-"] { color: var(--negative); }
+```
+
 ## `lb-unknown-page`
 
 The chrome's dialog for a URL that names no page, as one tag: