@loadbare/app 0.7.3 → 0.8.0

package/docs/TECHREF-1.0.md

@@ -10,8 +10,8 @@ to be true, then revise the code, docs, and tests to ensure it is true.
 We cannot declare 1.0 until we determine if these blockers can be
 added later w/o breaking changes.  If we are reasonably confident
 that they can be decided later w/o breaking changes, then we rename
-them to "Out of Scope".  Otherwise, they must be resolved before
-we declare 1.0.
+them to "Out of Scope" or move them to the roadmap.  Otherwise, 
+they must be resolved before we declare 1.0.
 
 ### Data types
 
@@ -59,6 +59,15 @@ That decision is firm; what the set contains is not.
 
 ### Lists
 
+Imagine we have an HTML `<select>` that displays a fixed list for all
+rows in a table, such as `customer_type` for a table of customers.  When
+all customers can be any customer type, our system as written today
+is fine, because all HTML `<select>` elements get the same list.
+
+But it may be that the list of allowed values is dependent on other values
+in the row.   
+
+
 - **Decide how a new row fills a nested list.** A row added to the outer
   list starts with an empty nested list, which fills only when the nested
   list's name lands again.  See [Master-detail](#master-detail) for what a
@@ -210,7 +219,7 @@ the whole of `--src` is one flat namespace, as stated in
 Three kinds of file hold HTML.
 
 | File               | Holds                                | Found in     |
-|--------------------|--------------------------------------|--------------|
+| ------------------ | ------------------------------------ | ------------ |
 | `chrome.html`      | The one HTML document                | `--src`      |
 | `<stub>.page.html` | One page's markup, as a fragment     | `--src`      |
 | `<tag-name>.html`  | One widget definition, as a fragment | Every origin |
@@ -277,13 +286,13 @@ A definition states a default with `{{name|default}}`, as in
 `{{button-label|OK}}`.  Whitespace around the name and around the default is
 discarded.  The default is a literal.
 
-| The attribute is assigned | Expansion defines  | Result                           |
-|---------------------------|--------------------|----------------------------------|
-| `exp-name="text"`         | `{{name}}`         | `text`                           |
-| `exp-name=""`             | `{{name}}`         | An empty string                  |
-| Nothing                   | `{{name|default}}` | `default`                        |
-| Nothing                   | `{{name}}`         | Nothing, and the attribute drops |
-| `exp-name`                | No `{{name}}`      | A build error                    |
+| The attribute is assigned | Expansion defines   | Result                           |
+| ------------------------- | ------------------- | -------------------------------- |
+| `exp-name="text"`         | `{{name}}`          | `text`                           |
+| `exp-name=""`             | `{{name}}`          | An empty string                  |
+| Nothing                   | `{{name\|default}}` | `default`                        |
+| Nothing                   | `{{name}}`          | Nothing, and the attribute drops |
+| `exp-name`                | No `{{name}}`       | A build error                    |
 
 Attributes without the `exp-` prefix are ignored during expansion.
 
@@ -370,20 +379,19 @@ These are build errors:
 
 ### Binding
 
----- UNEDITED ----
-
 Binding attributes determine how the hub updates the DOM, either by
 directly updating a plain HTML element or instructing 
 custom widgets to update themselves.
 
 
-| Attribute    | Assigned By | Behavior                                                                                  |
-|--------------|-------------|-------------------------------------------------------------------------------------------|
-| lb-list      | Developer   | Scopes DOM children to a named set of rows; a nested lb-list or lb-row begins a new scope |
-| lb-row       | Developer   | Scopes DOM children to one named row; a nested lb-list or lb-row begins a new scope       |
-| lb-cell      | Developer   | This DOM node displays this column of the row in scope                                    |
-| lb-key       | Developer   | Names the column that identifies a row, on the row template inside an lb-list             |
-| lb-key-value | Hub         | Stamped on a live row: that row's value of `lb-key`                                       |
+| Attribute    | Assigned By | Behavior                                                                                        |
+| ------------ | ----------- | ----------------------------------------------------------------------------------------------- |
+| lb-list      | Developer   | Scopes DOM children to a named set of rows; a nested lb-list or lb-row begins a new scope       |
+| lb-row       | Developer   | Scopes DOM children to one named row; a nested lb-list or lb-row begins a new scope             |
+| lb-cell      | Developer   | This DOM node displays this column of the row in scope                                          |
+| lb-show      | Developer   | This DOM node is present when this column of the row in scope is neither null nor false         |
+| lb-key       | Developer   | Names the column that identifies a row, on the row template inside an lb-list                   |
+| lb-key-value | Hub         | Stamped on a live row: that row's value of `lb-key`                                             |
 | lb-value     | Hub         | The value that landed on a cell; a widget updates itself from it and a stylesheet selects on it |
 
 #### How a value lands
@@ -391,11 +399,11 @@ custom widgets to update themselves.
 A cell lands one of three ways, and the element decides which.  Every cell
 that receives a value also carries it as `lb-value`.
 
-| Element                                             | Receives the value as                |
-|-----------------------------------------------------|--------------------------------------|
-| A custom element, tag hyphenated                    | Its `lb-value` attribute             |
-| `<select>`, `<textarea>`, or `<input>`              | Its `value`, and `lb-value`          |
-| Any other native element                            | Its `textContent`, and `lb-value`    |
+| Element                                | Receives the value as             |
+| -------------------------------------- | --------------------------------- |
+| A custom element, tag hyphenated       | Its `lb-value` attribute          |
+| `<select>`, `<textarea>`, or `<input>` | Its `value`, and `lb-value`       |
+| Any other native element               | Its `textContent`, and `lb-value` |
 
 A widget owns whatever control it wraps, so it is handed the value and
 renders it itself.  A form control shows its state as its `value`, so a
@@ -433,30 +441,44 @@ A widget sees `attributeChangedCallback` for an `lb-value` already present
 when it upgrades, so a widget cannot tell a first landing from a refresh,
 and does not need to.
 
-#### Displaying by value
+#### Displaying by condition
 
-A stylesheet selects on `lb-value` to show or hide part of a page according
-to a value that landed.  A column the page does not display is bound to a
-hidden element.
+`lb-show` names the column that decides whether an element is present.
+`null` and `false` are off, and every other value is on.  No string is read,
+so `"false"` is on, and a query spells a condition as a boolean or a null.
 
 ```html
 <template lb-key="id">
   <tr>
     <td lb-cell="name"></td>
-    <td lb-cell="locked" hidden></td>
-    <td><button lb-action="lb-row-delete">Remove</button></td>
+    <td><button lb-action="lb-row-delete" lb-show="removable">Remove</button></td>
   </tr>
 </template>
 ```
 
-```css
-tr:has([lb-cell="locked"][lb-value="true"]) button { display: none; }
-```
+It binds as `lb-cell` does, to the row on the nearest scoped ancestor, and on
+an element that is itself a scope the column belongs to the row around it.  A row
+that does not carry the column leaves the element as it is.
 
-`lb-value` holds the string the query sent, so the query decides the spelling
-a selector matches.  A hidden control is out of reach, keyboard included; a
-stylesheet cannot disable one, which is a widget's job.  Hiding is
-presentation, and the server still refuses what a request may not do.
+An element that is off is moved into a `<template lb-show="column">` standing
+where it stood, and moved back out when the column turns on.  It is not
+rendered, focused, clicked, announced or gathered.  It is moved and never
+rebuilt, so a widget keeps its instance.  Landing reaches into that template,
+and nothing else does, so the element and every cell and scope inside it
+return current.  A custom element sees `disconnectedCallback` then
+`adoptedCallback` going in, and `adoptedCallback` then `connectedCallback`
+coming out, and still receives `lb-value` while it is away.
+
+The builder ships every `lb-show` element already inside its template, so
+nothing conditional shows until its row lands.  An absent element's template
+keeps its place among its siblings, and a position selector counts it.
+
+These are build errors: `lb-show` on a row template's root, with no row
+around it (outside every scope, on a scope with none around it, or in a list
+scope outside its row template), or on a `<template>`.
+
+Hiding is presentation, and the server still refuses what a request may not
+do.
 
 #### Master-detail
 
@@ -504,11 +526,10 @@ name, the same test that decides how a value lands — see
 [How a value lands](#how-a-value-lands).
 
 | lb-action      | Written on                                        |
-|----------------|---------------------------------------------------|
+| -------------- | ------------------------------------------------- |
 | lb-row-insert  | a `<form>`, or a button in a `<tr>`, in a list    |
 | lb-row-delete  | anything inside a live row                        |
-| lb-row-update  | a `<form>`, or a button in a live row             |
-| lb-cell-change | a widget wrapping one control                     |
+| lb-row-update  | a `<form>`, a button in a live row, or a widget cell |
 | anything else  | must be a named routine in the page's server code |
 
 The wire format is not visible to the user, but uses the same lb-*
@@ -520,13 +541,12 @@ dispatched it.  It reads the scope from the dispatching element before any
 ancestor sees the event, and never overwrites a field the request already
 carries.
 
-| `action`         | Filled from scope              | Required                   |
-|------------------|--------------------------------|----------------------------|
-| a declared name  | `list` or `row`, `key`, `cell` | nothing                    |
-| `lb-cell-change` | `list`, `key`, `cell`          | all three, and `value`     |
-| `lb-row-insert`  | `list`                         | `list`, and `values`       |
-| `lb-row-delete`  | `list`, `key`                  | both                       |
-| `lb-row-update`  | `list`, `key`                  | both, and `values`         |
+| `action`         | Filled from scope              | Required               |
+| ---------------- | ------------------------------ | ---------------------- |
+| a declared name  | `list` or `row`, `key`, `cell` | nothing                |
+| `lb-row-insert`  | `list`                         | `list`, and `values`   |
+| `lb-row-delete`  | `list`, `key`                  | both                   |
+| `lb-row-update`  | `list`, `key`                  | both, and `values`     |
 
 An element's own `lb-list` or `lb-row` names what it displays, never where
 its request goes.  A request belongs to the scope around the element, the
@@ -534,7 +554,13 @@ way a control belongs to the form around it.  `list` or `row` comes from the
 nearest ancestor scope, `key` from the nearest live row inside that scope,
 and `cell` from the dispatching element's own `lb-cell`.
 A request missing a required field is not sent.  The hub never fills
-`value`.  An `lb-row-insert` or `lb-row-update` gathers the row it belongs
+`value`.  An `lb-row-insert` or `lb-row-update` from an element carrying
+`lb-cell` is a record of one cell, the way a control has a value and a form
+has values: `values` holds that cell alone, taken from the `value` the widget
+sent or else read from the control it is or wraps, and `value` is not sent
+beside it.  A widget that sends a `value` from an element carrying no
+`lb-cell` is refused, since nothing names the column.  Any other
+`lb-row-insert` or `lb-row-update` gathers the row it belongs
 to: `values` holds every `lb-cell` with a control to read in the nearest
 `<form>`, `<tr>` or live row around the dispatching element, itself
 included, inside its scope.  The cells are found the way a row lands, so a
@@ -547,10 +573,11 @@ own form; a live row counts because it is the row the key names.  The scope
 itself is never the row, since its cells belong to other rows.  A request
 from an element in no form or row is not sent, and the hub reports that its
 cells belong in a `<form>`.  A request that already carries `values` keeps
-them, and one whose row has no cell to read is not sent.  A click inside a
-native element that carries either operation and
-holds cells itself is not sent, since clicking into one of its controls
-would send the row: put the action on a form or on a button.
+them, and one whose row has no cell to read is not sent.  A click on a
+native element that carries either operation and is a cell or
+holds cells is not sent, since clicking into one of its controls
+would send the row: put the action on a form, on a button, or on a widget
+that decides when its cell has changed.
 
 A widget dispatches the action and, where it wraps a control, that control's
 value.
@@ -559,7 +586,7 @@ value.
 { action: "lb-row-insert",  list: "rosterList", values: {...} }
 { action: "lb-row-delete",  list: "rosterList", key: "42" }
 { action: "lb-row-update",  list: "rosterList", key: "42", values: {...} }
-{ action: "lb-cell-change", list: "rosterList", key: "42", cell: "name", value: "Ann" }
+{ action: "lb-row-update",  list: "rosterList", key: "42", values: { name: "Ann" } }
 { action: "selectTab",      row: "prefs", cell: "active_tab", value: "two" }
 ```
 
@@ -624,7 +651,7 @@ other link, so leaving the application is the default and staying in it is
 the opt-in.
 
 | Attribute   | Assigned By | Behavior                                                                                |
-|-------------|-------------|-----------------------------------------------------------------------------------------|
+| ----------- | ----------- | --------------------------------------------------------------------------------------- |
 | lb-nav-link | Developer   | On an `<a>`: the hub shows the page the anchor's path names, without loading a document |
 
 The attribute takes no value.  The hub looks for the nearest ancestor 
@@ -677,7 +704,7 @@ Current page, published by the hub as a row.  Can be bound anywhere just
 like a server-produced result.
 
 | Cell         | Holds                                                               |
-|--------------|---------------------------------------------------------------------|
+| ------------ | ------------------------------------------------------------------- |
 | `page-label` | The text of the link to the current page, empty if no link names it |
 | `page-uri`   | The path as the browser has it, such as `/members`                  |
 
@@ -799,7 +826,7 @@ client script, the stylesheet, the hub's data channel, and the one HTML
 document.
 
 | Handle                       | With                |
-|------------------------------|---------------------|
+| ---------------------------- | ------------------- |
 | `/client.js`                 | `dist/client.js`    |
 | `/app.css`                   | `dist/app.css`      |
 | `hubRoutes(hub, contextFor)` | The hub's own route |
@@ -888,9 +915,9 @@ as explained in the next section.
 It has three optional keys.
 
 | Key           | Keyed by              | Answers                                            |
-|---------------|-----------------------|----------------------------------------------------|
+| ------------- | --------------------- | -------------------------------------------------- |
 | `actions`     | The `lb-action` value | Anything the page chooses to declare               |
-| `crud`        | A query name          | The four reserved `lb-action` values               |
+| `crud`        | A query name          | The three reserved `lb-action` values              |
 | `onPageEnter` | Nothing               | Runs once on entering the page, before its queries |
 
 
@@ -941,16 +968,19 @@ export const requests: Requests = {
 
 Each key under a `crud` entry is a reserved `lb-action` value with its prefix
 stripped and the rest camel-cased, so the attribute, the wire and this key
-are one vocabulary.  All four operate on a list, because each needs a key and
+are one vocabulary.  All three operate on a list, because each needs a key and
 a key exists only on a live row.
 
 | `lb-action`      | Key under `crud` | `where` carries        |
-|------------------|------------------|------------------------|
-| `lb-cell-change` | `cellChange`     | `key`, `cell`, `value` |
+| ---------------- | ---------------- | ---------------------- |
 | `lb-row-delete`  | `rowDelete`      | `key`                  |
 | `lb-row-insert`  | `rowInsert`      | `values`               |
 | `lb-row-update`  | `rowUpdate`      | `key`, `values`        |
 
+A `rowUpdate` sets the columns `values` names and leaves the rest as they
+are, as an SQL `UPDATE` does.  A form sends the cells it holds and a widget
+cell sends itself, so one handler answers both.
+
 ## Widgets
 
 ---- UNEDITED ----
@@ -988,21 +1018,31 @@ The hub stamps these on the element that dispatched a request, which is the
 widget itself when a widget fired it.  A widget observes them and reacts; it
 must name them in `observedAttributes` to see them change.
 
-| Attribute      | Written on              | Holds                                           |
-|----------------|-------------------------|-------------------------------------------------|
-| `lb-pending`   | The dispatching element | The round trip is in flight                     |
+| Attribute      | Written on              | Holds                                                                                   |
+| -------------- | ----------------------- | --------------------------------------------------------------------------------------- |
+| `lb-pending`   | The dispatching element | The round trip is in flight                                                             |
 | `lb-error`     | The dispatching element | The last round trip failed, cleared on the next — see [The round trip](#the-round-trip) |
-| `lb-row-count` | A list scope            | How many rows the scope is showing              |
+| `lb-row-count` | A list scope            | How many rows the scope is showing                                                      |
+
+They are also stamped on plain HTML, where a stylesheet is the only
+consumer: dim a pending button, mark a failed one, and style an empty list
+against `lb-row-count` rather than carrying an empty-state element.
+
+The hub reads one of them.  A native `lb-action` element, a button or a
+form, that is performed again while it carries `lb-pending` is ignored: the
+click or submit is cancelled and nothing is sent.  A pending native action is
+therefore disabled in fact, and a stylesheet only has to show it.  A widget is
+not held back this way, because a widget that sends on change must have its
+latest value sent rather than dropped.
 
-The hub writes all three and never reads them.  They are also stamped on
-plain HTML, where a stylesheet is the only consumer: dim a pending button,
-mark a failed one, and style an empty list against `lb-row-count` rather than
-carrying an empty-state element.
+Alongside `lb-pending` the hub sets `aria-busy="true"` on the same element and
+removes it when the round trip settles, so assistive technology hears the
+state a stylesheet shows.
 
 #### Row hooks
 
 | Name                            | Implemented By | Behavior                                                    |
-|---------------------------------|----------------|-------------------------------------------------------------|
+| ------------------------------- | -------------- | ----------------------------------------------------------- |
 | `applyRow(root, row)`           | Loadbare       | Fills one scope from one row                                |
 | `lbPlaceRow(el, row, template)` | Developer      | Optional on a list scope: where a row goes                  |
 | `lbRowsLanded()`                | Developer      | Optional on a list scope: scaffolding derived from the rows |
@@ -1027,7 +1067,7 @@ that defines it. The definition lives there and only there.
 Loadbare/app owns every flag in this table.
 
 | Flag       | Default | Names                                     | Defined in                                        |
-|------------|---------|-------------------------------------------|---------------------------------------------------|
+| ---------- | ------- | ----------------------------------------- | ------------------------------------------------- |
 | `--src`    | `src`   | The application's own tree, scanned whole | [What the builder scans](#what-the-builder-scans) |
 | `--out`    | `dist`  | Where the builder writes                  | [Running the builder](#running-the-builder)       |
 | `--watch`  | off     | Rebuild on change under `--src`           | [Running the builder](#running-the-builder)       |
@@ -1040,7 +1080,7 @@ named carries its meaning wherever it sits in the `--src` tree, so an
 application must not use one of these names for anything else.
 
 | File                    | How many               | Holds                                                    | Defined in                                              |
-|-------------------------|------------------------|----------------------------------------------------------|---------------------------------------------------------|
+| ----------------------- | ---------------------- | -------------------------------------------------------- | ------------------------------------------------------- |
 | `chrome.html`           | Exactly one            | The application's one HTML document                      | [Chrome](#chrome)                                       |
 | `imports.ts`            | Zero or one            | Default-exports an array of widget library package names | [Imported widget libraries](#imported-widget-libraries) |
 | `<stub>.page.html`      | One per page           | One page's markup, as a fragment                         | [Pages](#pages)                                         |
@@ -1058,7 +1098,7 @@ only when some origin has a stylesheet, `pages.ts` only when some page has a
 `.queries.ts` or a `.requests.ts`.
 
 | Path               | Written           | Holds                                                              | Read by    | Defined in                                  |
-|--------------------|-------------------|--------------------------------------------------------------------|------------|---------------------------------------------|
+| ------------------ | ----------------- | ------------------------------------------------------------------ | ---------- | ------------------------------------------- |
 | `/app.html`        | Always            | The chrome, built                                                  | The server | [Chrome](#chrome)                           |
 | `/client.js`       | Always            | `<lb-hub>` and every widget the application uses                   | The chrome | [Chrome](#chrome)                           |
 | `/client-entry.ts` | Always            | The generated entry `client.js` is bundled from                    | Nothing    | [Running the builder](#running-the-builder) |
@@ -1071,7 +1111,7 @@ Loadbare/app owns every key in this table. A widget library declares them.
 An application never does.
 
 | Key                | Value                     | Means                                                                        | Defined in                                              |
-|--------------------|---------------------------|------------------------------------------------------------------------------|---------------------------------------------------------|
+| ------------------ | ------------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------- |
 | `loadbare.widgets` | A path inside the package | Where this package's widgets are. Absent means the whole installed directory | [Imported widget libraries](#imported-widget-libraries) |
 
 ### Reserved namespaces
@@ -1079,11 +1119,11 @@ An application never does.
 Loadbare/app owns every namespace in this table. Ownership of a name and
 ownership of its behavior are stated separately, because they differ.
 
-| Namespace | Applies to                 | Loadbare owns                                | Defined in                                        |
-|-----------|----------------------------|----------------------------------------------|---------------------------------------------------|
-| `lb-*`    | HTML attributes            | The names and their behavior                 | [The lb-* namespace](#the-lb--namespace)           |
-| `exp-*`   | HTML attributes            | The behavior; widget authors pick the values | [Build time parameters](#build-time-parameters)   |
-| `lb*`     | Methods on custom elements | The names and their behavior                 | [Row hooks](#row-hooks)                           |
+| Namespace | Applies to                 | Loadbare owns                                | Defined in                                      |
+| --------- | -------------------------- | -------------------------------------------- | ----------------------------------------------- |
+| `lb-*`    | HTML attributes            | The names and their behavior                 | [The lb-* namespace](#the-lb--namespace)        |
+| `exp-*`   | HTML attributes            | The behavior; widget authors pick the values | [Build time parameters](#build-time-parameters) |
+| `lb*`     | Methods on custom elements | The names and their behavior                 | [Row hooks](#row-hooks)                         |
 
 #### The lb-* namespace
 
@@ -1092,28 +1132,29 @@ application writes the ones this table names and invents none of its own,
 because a name Loadbare has not defined today it may define tomorrow.
 
 The prefix reaches past HTML.  A query name cannot begin with `lb-` either,
-which is what keeps the four operations apart from an application's own
+which is what keeps the three operations apart from an application's own
 actions on the wire — see [Page Queries](#page-queries).
 
 Each attribute is defined in one section, and this table says which.
 
-| Attribute        | Written by  | Defined in                                        |
-|------------------|-------------|---------------------------------------------------|
-| `lb-list`        | Developer   | [Binding](#binding)                               |
-| `lb-row`         | Developer   | [Binding](#binding)                               |
-| `lb-cell`        | Developer   | [Binding](#binding)                               |
-| `lb-key`         | Developer   | [Binding](#binding)                               |
-| `lb-key-value`   | Hub         | [Binding](#binding)                               |
-| `lb-value`       | Hub         | [How a value lands](#how-a-value-lands)           |
-| `lb-action`      | Developer   | [Requests](#requests)                             |
-| `lb-nav-link`    | Developer   | [Links](#links)                                   |
-| `lb-pending`     | Hub         | [Request state](#request-state)                   |
-| `lb-error`       | Hub         | [Request state](#request-state)                   |
-| `lb-row-count`   | Hub         | [Request state](#request-state)                   |
-| `lb-unknown-page`| Developer   | [Chrome](#chrome)                                 |
-| `lb-slot`        | Widget author | [Slots and templates](#slots-and-templates)     |
-| `lb-template`    | Widget author | [Slots and templates](#slots-and-templates)     |
-| `lb-page`        | Builder     | [Pages](#pages)                                   |
+| Attribute         | Written by    | Defined in                                          |
+| ----------------- | ------------- | --------------------------------------------------- |
+| `lb-list`         | Developer     | [Binding](#binding)                                 |
+| `lb-row`          | Developer     | [Binding](#binding)                                 |
+| `lb-cell`         | Developer     | [Binding](#binding)                                 |
+| `lb-show`         | Developer     | [Displaying by condition](#displaying-by-condition) |
+| `lb-key`          | Developer     | [Binding](#binding)                                 |
+| `lb-key-value`    | Hub           | [Binding](#binding)                                 |
+| `lb-value`        | Hub           | [How a value lands](#how-a-value-lands)             |
+| `lb-action`       | Developer     | [Requests](#requests)                               |
+| `lb-nav-link`     | Developer     | [Links](#links)                                     |
+| `lb-pending`      | Hub           | [Request state](#request-state)                     |
+| `lb-error`        | Hub           | [Request state](#request-state)                     |
+| `lb-row-count`    | Hub           | [Request state](#request-state)                     |
+| `lb-unknown-page` | Developer     | [Chrome](#chrome)                                   |
+| `lb-slot`         | Widget author | [Slots and templates](#slots-and-templates)         |
+| `lb-template`     | Widget author | [Slots and templates](#slots-and-templates)         |
+| `lb-page`         | Builder       | [Pages](#pages)                                     |
 
 An attribute the builder does not recognize is left alone today.  Refusing
 one is on the list of validations still to land — see
@@ -1125,7 +1166,7 @@ Loadbare/app owns every tag in this table.  An application writes them and
 never defines them.
 
 | Tag        | Written in | Means                          | Defined in        |
-|------------|------------|--------------------------------|-------------------|
+| ---------- | ---------- | ------------------------------ | ----------------- |
 | `<lb-hub>` | The chrome | The application's live element | [Chrome](#chrome) |
 
 ### Reserved events
@@ -1134,7 +1175,7 @@ Loadbare/app owns every DOM event in this table, both the name and what its
 `detail` carries.
 
 | Event        | Dispatched from        | Bubbles | Cancelable | Defined in                              |
-|--------------|------------------------|---------|------------|-----------------------------------------|
+| ------------ | ---------------------- | ------- | ---------- | --------------------------------------- |
 | `lb-request` | The element that acted | Yes     | No         | [The request event](#the-request-event) |
 
 ### Reserved attributes
@@ -1143,6 +1184,6 @@ Loadbare/app owns every attribute in this table, both the name and its
 behavior.
 
 | Attribute         | Written on                          | Takes a value | Defined in        |
-|-------------------|-------------------------------------|---------------|-------------------|
+| ----------------- | ----------------------------------- | ------------- | ----------------- |
 | `lb-unknown-page` | A `<dialog>` in chrome              | No            | [Chrome](#chrome) |
 | `lb-page`         | A `<template>`, by the builder only | Yes           | [Pages](#pages)   |