@loadbare/widgets 0.9.0 → 0.10.0

package/README.md

@@ -17,6 +17,8 @@ Inventory:
 | [`lb-insert-dialog`](docs/lb-insert-dialog.md) | a row entered in a modal dialog, chosen in the picker that opened it |
 | [`lb-master`](docs/lb-master.md) | a set, one of its rows, and the buttons that act on the set |
 | [`lb-checkbox`](docs/lb-checkbox.md) | a checkbox and its label, as markup to style |
+| [`lb-number`](docs/lb-number.md) | a number shown by `Intl.NumberFormat` |
+| [`lb-date`](docs/lb-date.md) | a date or time shown by `Intl.DateTimeFormat` |
 
 ## Installing
 

package/dist/index.d.ts

@@ -5,4 +5,6 @@ import "./lb-table.browser.js";
 import "./lb-picker.browser.js";
 import "./lb-confirm.browser.js";
 import "./lb-insert-dialog.browser.js";
+import "./lb-number.browser.js";
+import "./lb-date.browser.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC;AACvC,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC"}

package/dist/index.js

@@ -5,4 +5,6 @@ import "./lb-table.browser.js";
 import "./lb-picker.browser.js";
 import "./lb-confirm.browser.js";
 import "./lb-insert-dialog.browser.js";
+import "./lb-number.browser.js";
+import "./lb-date.browser.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC","sourcesContent":["import \"./lb-input.browser.js\";\nimport \"./lb-select.browser.js\";\nimport \"./lb-options.browser.js\";\nimport \"./lb-table.browser.js\";\nimport \"./lb-picker.browser.js\";\nimport \"./lb-confirm.browser.js\";\nimport \"./lb-insert-dialog.browser.js\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC;AACvC,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC","sourcesContent":["import \"./lb-input.browser.js\";\nimport \"./lb-select.browser.js\";\nimport \"./lb-options.browser.js\";\nimport \"./lb-table.browser.js\";\nimport \"./lb-picker.browser.js\";\nimport \"./lb-confirm.browser.js\";\nimport \"./lb-insert-dialog.browser.js\";\nimport \"./lb-number.browser.js\";\nimport \"./lb-date.browser.js\";\n"]}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=lb-date.browser.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lb-date.browser.d.ts","sourceRoot":"","sources":["../widgets/lb-date.browser.ts"],"names":[],"mappings":""}

package/dist/lb-date.browser.js

@@ -0,0 +1,47 @@
+/// <reference lib="dom" />
+import { ATTR_COLUMN_VALUE } from "@loadbare/app/constants";
+/**
+ * Shows the value that landed on it through `Intl.DateTimeFormat`, in the
+ * `<time>` its definition holds, with the value itself as the `<time>`'s
+ * `datetime`. Not a control: the hub stamps `lb-column-value` on the tag and
+ * never gathers it.
+ *
+ * A date alone, `YYYY-MM-DD`, names a day and no instant, so it shows as
+ * that day in UTC rather than as the midnight it would be in UTC, shifted to
+ * the browser's zone. A value that is no date shows as it arrived.
+ */
+class LbDate extends HTMLElement {
+    static observedAttributes = [ATTR_COLUMN_VALUE];
+    formatters = new Map();
+    attributeChangedCallback(_name, _old, value) {
+        const time = this.querySelector("time");
+        if (!time)
+            return;
+        if (value === null) {
+            time.removeAttribute("datetime");
+            time.textContent = "";
+            return;
+        }
+        time.dateTime = value;
+        const date = new Date(value);
+        time.textContent = Number.isNaN(date.getTime())
+            ? value
+            : this.format(time, DAY.test(value)).format(date);
+    }
+    format(time, day) {
+        let formatter = this.formatters.get(day);
+        if (!formatter) {
+            const { locale, ...options } = time.dataset;
+            formatter = new Intl.DateTimeFormat(locale, {
+                ...options,
+                ...(day ? { timeZone: "UTC" } : {}),
+            });
+            this.formatters.set(day, formatter);
+        }
+        return formatter;
+    }
+}
+/** A date with no time, as Postgres writes a `date`. */
+const DAY = /^\d{4}-\d{2}-\d{2}$/;
+customElements.define("lb-date", LbDate);
+//# sourceMappingURL=lb-date.browser.js.map

package/dist/lb-date.browser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lb-date.browser.js","sourceRoot":"","sources":["../widgets/lb-date.browser.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAE3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D;;;;;;;;;GASG;AACH,MAAM,MAAO,SAAQ,WAAW;IAC9B,MAAM,CAAC,kBAAkB,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAExC,UAAU,GAAG,IAAI,GAAG,EAAgC,CAAC;IAE7D,wBAAwB,CACtB,KAAa,EACb,IAAmB,EACnB,KAAoB;QAEpB,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACxC,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;YACnB,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;YACjC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;YACtB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7B,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAC7C,CAAC,CAAC,KAAK;YACP,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACtD,CAAC;IAEO,MAAM,CAAC,IAAqB,EAAE,GAAY;QAChD,IAAI,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACzC,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;YAC5C,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE;gBAC1C,GAAI,OAAsC;gBAC1C,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;aACpC,CAAC,CAAC;YACH,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;QACtC,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;;AAGH,wDAAwD;AACxD,MAAM,GAAG,GAAG,qBAAqB,CAAC;AAElC,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport { ATTR_COLUMN_VALUE } from \"@loadbare/app/constants\";\n\n/**\n * Shows the value that landed on it through `Intl.DateTimeFormat`, in the\n * `<time>` its definition holds, with the value itself as the `<time>`'s\n * `datetime`. Not a control: the hub stamps `lb-column-value` on the tag and\n * never gathers it.\n *\n * A date alone, `YYYY-MM-DD`, names a day and no instant, so it shows as\n * that day in UTC rather than as the midnight it would be in UTC, shifted to\n * the browser's zone. A value that is no date shows as it arrived.\n */\nclass LbDate extends HTMLElement {\n  static observedAttributes = [ATTR_COLUMN_VALUE];\n\n  private formatters = new Map<boolean, Intl.DateTimeFormat>();\n\n  attributeChangedCallback(\n    _name: string,\n    _old: string | null,\n    value: string | null,\n  ): void {\n    const time = this.querySelector(\"time\");\n    if (!time) return;\n    if (value === null) {\n      time.removeAttribute(\"datetime\");\n      time.textContent = \"\";\n      return;\n    }\n    time.dateTime = value;\n    const date = new Date(value);\n    time.textContent = Number.isNaN(date.getTime())\n      ? value\n      : this.format(time, DAY.test(value)).format(date);\n  }\n\n  private format(time: HTMLTimeElement, day: boolean): Intl.DateTimeFormat {\n    let formatter = this.formatters.get(day);\n    if (!formatter) {\n      const { locale, ...options } = time.dataset;\n      formatter = new Intl.DateTimeFormat(locale, {\n        ...(options as Intl.DateTimeFormatOptions),\n        ...(day ? { timeZone: \"UTC\" } : {}),\n      });\n      this.formatters.set(day, formatter);\n    }\n    return formatter;\n  }\n}\n\n/** A date with no time, as Postgres writes a `date`. */\nconst DAY = /^\\d{4}-\\d{2}-\\d{2}$/;\n\ncustomElements.define(\"lb-date\", LbDate);\n"]}

package/dist/lb-date.html

@@ -0,0 +1,23 @@
+<!--
+  A date or a time, as the browser's Intl.DateTimeFormat shows it. Each
+  parameter is one of Intl's own options, in kebab-case, carried to the
+  script on the <time> as a data-* attribute; the dataset reads them back in
+  camelCase, as Intl names them. A parameter not given drops its attribute,
+  and Intl's default stands.
+-->
+<time
+  data-locale="{{locale}}"
+  data-date-style="{{date-style}}"
+  data-time-style="{{time-style}}"
+  data-time-zone="{{time-zone}}"
+  data-time-zone-name="{{time-zone-name}}"
+  data-hour-cycle="{{hour-cycle}}"
+  data-weekday="{{weekday}}"
+  data-era="{{era}}"
+  data-year="{{year}}"
+  data-month="{{month}}"
+  data-day="{{day}}"
+  data-hour="{{hour}}"
+  data-minute="{{minute}}"
+  data-second="{{second}}"
+></time>

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=lb-number.browser.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lb-number.browser.d.ts","sourceRoot":"","sources":["../widgets/lb-number.browser.ts"],"names":[],"mappings":""}

package/dist/lb-number.browser.js

@@ -0,0 +1,40 @@
+/// <reference lib="dom" />
+import { ATTR_COLUMN_VALUE } from "@loadbare/app/constants";
+/**
+ * Shows the value that landed on it through `Intl.NumberFormat`, in the
+ * `<data>` its definition holds, with the value itself as the `<data>`'s
+ * `value`. Not a control: the hub stamps `lb-column-value` on the tag and
+ * never gathers it.
+ *
+ * The value reaches `format` as the string it arrived as, so a decimal keeps
+ * every digit a number would round away. A value that is no number shows as
+ * it arrived.
+ */
+class LbNumber extends HTMLElement {
+    static observedAttributes = [ATTR_COLUMN_VALUE];
+    formatter;
+    attributeChangedCallback(_name, _old, value) {
+        const data = this.querySelector("data");
+        if (!data)
+            return;
+        if (value === null) {
+            data.removeAttribute("value");
+            data.textContent = "";
+            return;
+        }
+        data.value = value;
+        data.textContent = isNumber(value)
+            ? this.format(data).format(value)
+            : value;
+    }
+    format(data) {
+        const { locale, ...options } = data.dataset;
+        return (this.formatter ??= new Intl.NumberFormat(locale, options));
+    }
+}
+/** Whether a stamp holds a number: anything `Number` reads but blank. */
+function isNumber(value) {
+    return value.trim() !== "" && !Number.isNaN(Number(value));
+}
+customElements.define("lb-number", LbNumber);
+//# sourceMappingURL=lb-number.browser.js.map

package/dist/lb-number.browser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lb-number.browser.js","sourceRoot":"","sources":["../widgets/lb-number.browser.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAE3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D;;;;;;;;;GASG;AACH,MAAM,QAAS,SAAQ,WAAW;IAChC,MAAM,CAAC,kBAAkB,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAExC,SAAS,CAAqB;IAEtC,wBAAwB,CACtB,KAAa,EACb,IAAmB,EACnB,KAAoB;QAEpB,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACxC,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;YACnB,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;YAC9B,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;YACtB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,KAAK,CAAC;YAChC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,KAA0B,CAAC;YACtD,CAAC,CAAC,KAAK,CAAC;IACZ,CAAC;IAEO,MAAM,CAAC,IAAqB;QAClC,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;QAC5C,OAAO,CAAC,IAAI,CAAC,SAAS,KAAK,IAAI,IAAI,CAAC,YAAY,CAC9C,MAAM,EACN,OAAmC,CACpC,CAAC,CAAC;IACL,CAAC;;AAGH,yEAAyE;AACzE,SAAS,QAAQ,CAAC,KAAa;IAC7B,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AAC7D,CAAC;AAED,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport { ATTR_COLUMN_VALUE } from \"@loadbare/app/constants\";\n\n/**\n * Shows the value that landed on it through `Intl.NumberFormat`, in the\n * `<data>` its definition holds, with the value itself as the `<data>`'s\n * `value`. Not a control: the hub stamps `lb-column-value` on the tag and\n * never gathers it.\n *\n * The value reaches `format` as the string it arrived as, so a decimal keeps\n * every digit a number would round away. A value that is no number shows as\n * it arrived.\n */\nclass LbNumber extends HTMLElement {\n  static observedAttributes = [ATTR_COLUMN_VALUE];\n\n  private formatter?: Intl.NumberFormat;\n\n  attributeChangedCallback(\n    _name: string,\n    _old: string | null,\n    value: string | null,\n  ): void {\n    const data = this.querySelector(\"data\");\n    if (!data) return;\n    if (value === null) {\n      data.removeAttribute(\"value\");\n      data.textContent = \"\";\n      return;\n    }\n    data.value = value;\n    data.textContent = isNumber(value)\n      ? this.format(data).format(value as unknown as number)\n      : value;\n  }\n\n  private format(data: HTMLDataElement): Intl.NumberFormat {\n    const { locale, ...options } = data.dataset;\n    return (this.formatter ??= new Intl.NumberFormat(\n      locale,\n      options as Intl.NumberFormatOptions,\n    ));\n  }\n}\n\n/** Whether a stamp holds a number: anything `Number` reads but blank. */\nfunction isNumber(value: string): boolean {\n  return value.trim() !== \"\" && !Number.isNaN(Number(value));\n}\n\ncustomElements.define(\"lb-number\", LbNumber);\n"]}

package/dist/lb-number.html

@@ -0,0 +1,24 @@
+<!--
+  A number, as the browser's Intl.NumberFormat shows it. Each parameter is
+  one of Intl's own options, in kebab-case, carried to the script on the
+  <data> as a data-* attribute; the dataset reads them back in camelCase, as
+  Intl names them. A parameter not given drops its attribute, and Intl's
+  default stands.
+-->
+<data
+  data-locale="{{locale}}"
+  data-style="{{style}}"
+  data-currency="{{currency}}"
+  data-currency-display="{{currency-display}}"
+  data-currency-sign="{{currency-sign}}"
+  data-unit="{{unit}}"
+  data-unit-display="{{unit-display}}"
+  data-notation="{{notation}}"
+  data-compact-display="{{compact-display}}"
+  data-sign-display="{{sign-display}}"
+  data-minimum-integer-digits="{{minimum-integer-digits}}"
+  data-minimum-fraction-digits="{{minimum-fraction-digits}}"
+  data-maximum-fraction-digits="{{maximum-fraction-digits}}"
+  data-minimum-significant-digits="{{minimum-significant-digits}}"
+  data-maximum-significant-digits="{{maximum-significant-digits}}"
+></data>

package/dist/lb-table.browser.js

@@ -1,5 +1,5 @@
 /// <reference lib="dom" />
-import { ATTR_COLUMN, ATTR_FILTER, ATTR_ROW_REQUESTED, CHOICES_QUERY, LB_EVENT_NAME, LIVE_ROW, REQUEST_ROW_INSERT, REQUEST_ROW_UPDATE, REQUESTED_CREATED, REQUESTED_MOVED, } from "@loadbare/app/constants";
+import { ATTR_COLUMN, ATTR_FILTER, ATTR_GROUP, ATTR_ORDER, ATTR_QUERY, ATTR_QUERY_ORDER, ATTR_QUERY_UNSORTED_COUNT, ATTR_ROW_REQUESTED, ATTR_SHOW, CHOICES_QUERY, COMMAND_SORT, LB_EVENT_NAME, LIVE_ROW, ORDER_DESCENDING, REQUEST_ROW_INSERT, REQUEST_ROW_UPDATE, REQUESTED_CREATED, REQUESTED_MOVED, } from "@loadbare/app/constants";
 /**
  * A table that owns its own scaffolding.
  *
@@ -13,8 +13,8 @@ import { ATTR_COLUMN, ATTR_FILTER, ATTR_ROW_REQUESTED, CHOICES_QUERY, LB_EVENT_N
  *
  * Placement and groups are the hub's, by the query's order and the page's
  * group templates. What this widget adds at run time is the ghost row,
- * scrolling to the row the page's own request created or moved, and filtering
- * by selected text.
+ * scrolling to the row the page's own request created or moved, filtering
+ * by selected text, and the order shown on the heading.
  *
  * The `foot` destination needs no code here. A `<tfoot>` is a place on the
  * page, not a row the hub delivers, so what lands in it is an aggregate or a
@@ -36,6 +36,24 @@ import { ATTR_COLUMN, ATTR_FILTER, ATTR_ROW_REQUESTED, CHOICES_QUERY, LB_EVENT_N
  * same column of `lb-choices` shows it and clears it. The selection is
  * removed once it is used.
  */
+/**
+ * The heading of the column the rows are sorted by carries a triangle for the
+ * direction, and `aria-sort`. A heading's column is the one `lb-column` in
+ * the cell at the same position in the row template, a branch `lb-show`
+ * holds in a template included; a cell with none, or with several, gives its
+ * heading no column. Only the order's leading term is
+ * shown. A grouped table shows none of this.
+ *
+ * While rows stand out of order the triangle carries `data-unsorted`, and a
+ * click on its heading places them again with `--lb-sort`. Otherwise, on a
+ * table with `lb-order`, a click on the sorted heading reverses the order and
+ * a click on another heading sorts by its column, ascending: either way the
+ * table writes the user's order to the column of `lb-choices` that `lb-order`
+ * names. A table with no `lb-order` has nowhere to write one.
+ */
+const SORT = "data-sort";
+const UNSORTED = "data-unsorted";
+const SORTABLE = "data-sortable";
 /**
  * The ghost row's `<tbody>`, a blank row for entering a new one, between the
  * rows and the footer. The page writes it as the `ghost` template, so it
@@ -56,7 +74,10 @@ class LbTable extends HTMLElement {
     constructor() {
         super();
         this.addEventListener("mouseup", () => this.filterBySelection());
+        this.addEventListener("click", (e) => this.sortFromHeading(e));
     }
+    /** Each heading's column, by position in the row template; none when grouped. */
+    headings;
     lbAttached() {
         const ghost = this.querySelector(`tbody[${GHOST}]`);
         if (!ghost?.firstElementChild)
@@ -71,6 +92,7 @@ class LbTable extends HTMLElement {
     }
     /** The row this page's request created or moved, brought into view. */
     lbRowsLanded() {
+        this.showOrder();
         this.querySelector(`[${ATTR_ROW_REQUESTED}="${REQUESTED_CREATED}"], ` +
             `[${ATTR_ROW_REQUESTED}="${REQUESTED_MOVED}"]`)?.scrollIntoView({ block: "nearest" });
     }
@@ -88,6 +110,96 @@ class LbTable extends HTMLElement {
         if (row)
             firstControl(row)?.focus();
     }
+    /** The headings a column can be read for, and their columns. */
+    columns() {
+        if (this.headings)
+            return this.headings;
+        this.headings = new Map();
+        const body = this.querySelector(`tbody:not([${GHOST}])`);
+        const template = body?.querySelector(":scope > template");
+        const head = this.querySelector("thead tr");
+        if (!(template instanceof HTMLTemplateElement) || !head) {
+            return this.headings;
+        }
+        if (template.hasAttribute(ATTR_GROUP))
+            return this.headings;
+        const cells = template.content.querySelector("tr")?.children ?? [];
+        [...head.children].forEach((th, i) => {
+            const cell = cells[i];
+            if (!cell)
+                return;
+            const named = new Set(columnsIn(cell));
+            if (named.size === 1)
+                this.headings.set(th, [...named][0]);
+        });
+        return this.headings;
+    }
+    /** The order's leading term, from what the hub stamped. */
+    leading() {
+        const term = (this.getAttribute(ATTR_QUERY_ORDER) ?? "").split(",")[0];
+        if (!term)
+            return undefined;
+        const descending = term.startsWith(ORDER_DESCENDING);
+        return {
+            column: descending ? term.slice(ORDER_DESCENDING.length) : term,
+            descending,
+        };
+    }
+    /** Whether rows stand where the order would not put them. */
+    unsorted() {
+        const count = this.getAttribute(ATTR_QUERY_UNSORTED_COUNT);
+        return count !== null && count !== "0";
+    }
+    /** The triangle on the sorted heading, and every heading a click sorts. */
+    showOrder() {
+        const term = this.leading();
+        const writable = this.hasAttribute(ATTR_ORDER);
+        for (const [th, column] of this.columns()) {
+            const sorted = column === term?.column;
+            let mark = th.querySelector(`:scope > [${SORT}]`);
+            if (sorted) {
+                if (!mark) {
+                    mark = document.createElement("span");
+                    mark.setAttribute(SORT, "");
+                    mark.setAttribute("aria-hidden", "true");
+                    th.append(mark);
+                }
+                mark.textContent = term.descending ? "▼" : "▲";
+                mark.toggleAttribute(UNSORTED, this.unsorted());
+                th.setAttribute("aria-sort", term.descending ? "descending" : "ascending");
+            }
+            else {
+                mark?.remove();
+                th.removeAttribute("aria-sort");
+            }
+            th.toggleAttribute(SORTABLE, writable || (sorted && this.unsorted()));
+        }
+    }
+    /** A click on a heading: re-sort, reverse, or sort by its column. */
+    sortFromHeading(e) {
+        const th = e.target.closest("th");
+        const column = th && this.columns().get(th);
+        if (!column)
+            return;
+        const term = this.leading();
+        const sorted = column === term?.column;
+        if (sorted && this.unsorted()) {
+            const command = new Event("command");
+            Object.defineProperty(command, "command", { value: COMMAND_SORT });
+            this.dispatchEvent(command);
+            return;
+        }
+        const choice = this.getAttribute(ATTR_ORDER);
+        if (!choice)
+            return;
+        const descending = sorted && !term.descending;
+        const detail = {
+            name: REQUEST_ROW_UPDATE,
+            query: CHOICES_QUERY,
+            values: { [choice]: (descending ? ORDER_DESCENDING : "") + column },
+        };
+        this.dispatchEvent(new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail }));
+    }
     /** The columns of this table's rows a choice may filter. */
     filtered() {
         return (this.getAttribute(ATTR_FILTER) ?? "")
@@ -124,6 +236,25 @@ class LbTable extends HTMLElement {
         this.dispatchEvent(new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail }));
     }
 }
+/**
+ * The columns an element and everything in it show, read as the hub reads a
+ * row: into a branch an `lb-show` holds in a template, but not into another
+ * template, nor past an element naming a query of its own.
+ */
+function columnsIn(el) {
+    const own = el.getAttribute(ATTR_COLUMN);
+    const out = own ? [own] : [];
+    if (el.hasAttribute(ATTR_QUERY))
+        return out;
+    const children = el instanceof HTMLTemplateElement
+        ? el.hasAttribute(ATTR_SHOW)
+            ? [...el.content.children]
+            : []
+        : [...el.children];
+    for (const child of children)
+        out.push(...columnsIn(child));
+    return out;
+}
 /** A filter's term for text selected from a cell's whole text. */
 function termFor(selected, whole) {
     if (selected === "")

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 {\n  ATTR_COLUMN,\n  ATTR_FILTER,\n  ATTR_ROW_REQUESTED,\n  CHOICES_QUERY,\n  LB_EVENT_NAME,\n  LIVE_ROW,\n  REQUEST_ROW_INSERT,\n  REQUEST_ROW_UPDATE,\n  REQUESTED_CREATED,\n  REQUESTED_MOVED,\n} from \"@loadbare/app/constants\";\nimport type {\n  HubLifecycle,\n  HubRequest,\n  HubRequestDone,\n} 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,\n * scrolling to the row the page's own request created or moved, and filtering\n * by selected text.\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 * Text selected in a cell filters the table by that cell's column. When a\n * selection finishes inside one element of a live row whose `lb-column` the\n * table's `lb-filter` names, the table makes the choice of that name, and the\n * hub hides the rows it does not pass. Where the selection lies in the\n * element's text says how:\n *\n *   the whole text      `=`   equals\n *   from its start      `^=`  begins with\n *   up to its end       `$=`  ends with\n *   anywhere else       `*=`  contains\n *\n * The choice replaces whatever that column held, so a control naming the\n * same column of `lb-choices` shows it and clears it. The selection is\n * removed once it is used.\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 HubLifecycle {\n  constructor() {\n    super();\n    this.addEventListener(\"mouseup\", () => this.filterBySelection());\n  }\n\n  lbAttached(): void {\n    const ghost = this.querySelector(`tbody[${GHOST}]`);\n    if (!ghost?.firstElementChild) 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  /**\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. The hub calls this after the\n   * response items have landed, so nothing it places afterwards takes the\n   * focus away again. A refused insert leaves the cursor where the user left\n   * it.\n   */\n  lbRequestDone({ request, error }: HubRequestDone, origin: Element): void {\n    if (error || request.name !== REQUEST_ROW_INSERT) return;\n    const row = origin.closest(`[${GHOST}]`);\n    if (row) firstControl(row)?.focus();\n  }\n\n  /** The columns of this table's rows a choice may filter. */\n  private filtered(): string[] {\n    return (this.getAttribute(ATTR_FILTER) ?? \"\")\n      .split(\",\")\n      .map((column) => column.trim())\n      .filter(Boolean);\n  }\n\n  /** A finished selection in one filtered cell, made a choice. */\n  private filterBySelection(): void {\n    const selection = getSelection();\n    if (!selection || selection.isCollapsed || selection.rangeCount === 0) {\n      return;\n    }\n    const range = selection.getRangeAt(0);\n    const start = range.startContainer;\n    const el = (\n      start instanceof Element ? start : start.parentElement\n    )?.closest(`[${ATTR_COLUMN}]`);\n    if (!el || !el.contains(range.endContainer)) return;\n    const row = el.closest(LIVE_ROW);\n    if (!row || row.closest(\"lb-table\") !== this) return;\n    const column = el.getAttribute(ATTR_COLUMN)!;\n    if (!this.filtered().includes(column)) return;\n\n    const term = termFor(\n      selection.toString().trim(),\n      (el.textContent ?? \"\").trim(),\n    );\n    if (term === null) return;\n    selection.removeAllRanges();\n    const detail: HubRequest = {\n      name: REQUEST_ROW_UPDATE,\n      query: CHOICES_QUERY,\n      values: { [column]: term },\n    };\n    this.dispatchEvent(\n      new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail }),\n    );\n  }\n}\n\n/** A filter's term for text selected from a cell's whole text. */\nfunction termFor(selected: string, whole: string): string | null {\n  if (selected === \"\") return null;\n  if (selected === whole) return `=${selected}`;\n  if (whole.startsWith(selected)) return `^=${selected}`;\n  if (whole.endsWith(selected)) return `$=${selected}`;\n  return `*=${selected}`;\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"]}
+{"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 {\n  ATTR_COLUMN,\n  ATTR_FILTER,\n  ATTR_GROUP,\n  ATTR_ORDER,\n  ATTR_QUERY,\n  ATTR_QUERY_ORDER,\n  ATTR_QUERY_UNSORTED_COUNT,\n  ATTR_ROW_REQUESTED,\n  ATTR_SHOW,\n  CHOICES_QUERY,\n  COMMAND_SORT,\n  LB_EVENT_NAME,\n  LIVE_ROW,\n  ORDER_DESCENDING,\n  REQUEST_ROW_INSERT,\n  REQUEST_ROW_UPDATE,\n  REQUESTED_CREATED,\n  REQUESTED_MOVED,\n} from \"@loadbare/app/constants\";\nimport type {\n  HubLifecycle,\n  HubRequest,\n  HubRequestDone,\n} 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,\n * scrolling to the row the page's own request created or moved, filtering\n * by selected text, and the order shown on the heading.\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 * Text selected in a cell filters the table by that cell's column. When a\n * selection finishes inside one element of a live row whose `lb-column` the\n * table's `lb-filter` names, the table makes the choice of that name, and the\n * hub hides the rows it does not pass. Where the selection lies in the\n * element's text says how:\n *\n *   the whole text      `=`   equals\n *   from its start      `^=`  begins with\n *   up to its end       `$=`  ends with\n *   anywhere else       `*=`  contains\n *\n * The choice replaces whatever that column held, so a control naming the\n * same column of `lb-choices` shows it and clears it. The selection is\n * removed once it is used.\n */\n\n/**\n * The heading of the column the rows are sorted by carries a triangle for the\n * direction, and `aria-sort`. A heading's column is the one `lb-column` in\n * the cell at the same position in the row template, a branch `lb-show`\n * holds in a template included; a cell with none, or with several, gives its\n * heading no column. Only the order's leading term is\n * shown. A grouped table shows none of this.\n *\n * While rows stand out of order the triangle carries `data-unsorted`, and a\n * click on its heading places them again with `--lb-sort`. Otherwise, on a\n * table with `lb-order`, a click on the sorted heading reverses the order and\n * a click on another heading sorts by its column, ascending: either way the\n * table writes the user's order to the column of `lb-choices` that `lb-order`\n * names. A table with no `lb-order` has nowhere to write one.\n */\nconst SORT = \"data-sort\";\nconst UNSORTED = \"data-unsorted\";\nconst SORTABLE = \"data-sortable\";\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 HubLifecycle {\n  constructor() {\n    super();\n    this.addEventListener(\"mouseup\", () => this.filterBySelection());\n    this.addEventListener(\"click\", (e) => this.sortFromHeading(e));\n  }\n\n  /** Each heading's column, by position in the row template; none when grouped. */\n  private headings?: Map<Element, string>;\n\n  lbAttached(): void {\n    const ghost = this.querySelector(`tbody[${GHOST}]`);\n    if (!ghost?.firstElementChild) 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.showOrder();\n    this.querySelector(\n      `[${ATTR_ROW_REQUESTED}=\"${REQUESTED_CREATED}\"], ` +\n        `[${ATTR_ROW_REQUESTED}=\"${REQUESTED_MOVED}\"]`,\n    )?.scrollIntoView({ block: \"nearest\" });\n  }\n\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. The hub calls this after the\n   * response items have landed, so nothing it places afterwards takes the\n   * focus away again. A refused insert leaves the cursor where the user left\n   * it.\n   */\n  lbRequestDone({ request, error }: HubRequestDone, origin: Element): void {\n    if (error || request.name !== REQUEST_ROW_INSERT) return;\n    const row = origin.closest(`[${GHOST}]`);\n    if (row) firstControl(row)?.focus();\n  }\n\n  /** The headings a column can be read for, and their columns. */\n  private columns(): Map<Element, string> {\n    if (this.headings) return this.headings;\n    this.headings = new Map();\n    const body = this.querySelector(`tbody:not([${GHOST}])`);\n    const template = body?.querySelector(\":scope > template\");\n    const head = this.querySelector(\"thead tr\");\n    if (!(template instanceof HTMLTemplateElement) || !head) {\n      return this.headings;\n    }\n    if (template.hasAttribute(ATTR_GROUP)) return this.headings;\n    const cells = template.content.querySelector(\"tr\")?.children ?? [];\n    [...head.children].forEach((th, i) => {\n      const cell = cells[i];\n      if (!cell) return;\n      const named = new Set(columnsIn(cell));\n      if (named.size === 1) this.headings!.set(th, [...named][0]!);\n    });\n    return this.headings;\n  }\n\n  /** The order's leading term, from what the hub stamped. */\n  private leading(): { column: string; descending: boolean } | undefined {\n    const term = (this.getAttribute(ATTR_QUERY_ORDER) ?? \"\").split(\",\")[0];\n    if (!term) return undefined;\n    const descending = term.startsWith(ORDER_DESCENDING);\n    return {\n      column: descending ? term.slice(ORDER_DESCENDING.length) : term,\n      descending,\n    };\n  }\n\n  /** Whether rows stand where the order would not put them. */\n  private unsorted(): boolean {\n    const count = this.getAttribute(ATTR_QUERY_UNSORTED_COUNT);\n    return count !== null && count !== \"0\";\n  }\n\n  /** The triangle on the sorted heading, and every heading a click sorts. */\n  private showOrder(): void {\n    const term = this.leading();\n    const writable = this.hasAttribute(ATTR_ORDER);\n    for (const [th, column] of this.columns()) {\n      const sorted = column === term?.column;\n      let mark = th.querySelector(`:scope > [${SORT}]`);\n      if (sorted) {\n        if (!mark) {\n          mark = document.createElement(\"span\");\n          mark.setAttribute(SORT, \"\");\n          mark.setAttribute(\"aria-hidden\", \"true\");\n          th.append(mark);\n        }\n        mark.textContent = term.descending ? \"▼\" : \"▲\";\n        mark.toggleAttribute(UNSORTED, this.unsorted());\n        th.setAttribute(\"aria-sort\", term.descending ? \"descending\" : \"ascending\");\n      } else {\n        mark?.remove();\n        th.removeAttribute(\"aria-sort\");\n      }\n      th.toggleAttribute(SORTABLE, writable || (sorted && this.unsorted()));\n    }\n  }\n\n  /** A click on a heading: re-sort, reverse, or sort by its column. */\n  private sortFromHeading(e: Event): void {\n    const th = (e.target as Element).closest(\"th\");\n    const column = th && this.columns().get(th);\n    if (!column) return;\n    const term = this.leading();\n    const sorted = column === term?.column;\n    if (sorted && this.unsorted()) {\n      const command = new Event(\"command\");\n      Object.defineProperty(command, \"command\", { value: COMMAND_SORT });\n      this.dispatchEvent(command);\n      return;\n    }\n    const choice = this.getAttribute(ATTR_ORDER);\n    if (!choice) return;\n    const descending = sorted && !term.descending;\n    const detail: HubRequest = {\n      name: REQUEST_ROW_UPDATE,\n      query: CHOICES_QUERY,\n      values: { [choice]: (descending ? ORDER_DESCENDING : \"\") + column },\n    };\n    this.dispatchEvent(\n      new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail }),\n    );\n  }\n\n  /** The columns of this table's rows a choice may filter. */\n  private filtered(): string[] {\n    return (this.getAttribute(ATTR_FILTER) ?? \"\")\n      .split(\",\")\n      .map((column) => column.trim())\n      .filter(Boolean);\n  }\n\n  /** A finished selection in one filtered cell, made a choice. */\n  private filterBySelection(): void {\n    const selection = getSelection();\n    if (!selection || selection.isCollapsed || selection.rangeCount === 0) {\n      return;\n    }\n    const range = selection.getRangeAt(0);\n    const start = range.startContainer;\n    const el = (\n      start instanceof Element ? start : start.parentElement\n    )?.closest(`[${ATTR_COLUMN}]`);\n    if (!el || !el.contains(range.endContainer)) return;\n    const row = el.closest(LIVE_ROW);\n    if (!row || row.closest(\"lb-table\") !== this) return;\n    const column = el.getAttribute(ATTR_COLUMN)!;\n    if (!this.filtered().includes(column)) return;\n\n    const term = termFor(\n      selection.toString().trim(),\n      (el.textContent ?? \"\").trim(),\n    );\n    if (term === null) return;\n    selection.removeAllRanges();\n    const detail: HubRequest = {\n      name: REQUEST_ROW_UPDATE,\n      query: CHOICES_QUERY,\n      values: { [column]: term },\n    };\n    this.dispatchEvent(\n      new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail }),\n    );\n  }\n}\n\n/**\n * The columns an element and everything in it show, read as the hub reads a\n * row: into a branch an `lb-show` holds in a template, but not into another\n * template, nor past an element naming a query of its own.\n */\nfunction columnsIn(el: Element): string[] {\n  const own = el.getAttribute(ATTR_COLUMN);\n  const out = own ? [own] : [];\n  if (el.hasAttribute(ATTR_QUERY)) return out;\n  const children =\n    el instanceof HTMLTemplateElement\n      ? el.hasAttribute(ATTR_SHOW)\n        ? [...el.content.children]\n        : []\n      : [...el.children];\n  for (const child of children) out.push(...columnsIn(child));\n  return out;\n}\n\n/** A filter's term for text selected from a cell's whole text. */\nfunction termFor(selected: string, whole: string): string | null {\n  if (selected === \"\") return null;\n  if (selected === whole) return `=${selected}`;\n  if (whole.startsWith(selected)) return `^=${selected}`;\n  if (whole.endsWith(selected)) return `$=${selected}`;\n  return `*=${selected}`;\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.css

@@ -0,0 +1,25 @@
+/* lb-table: the order on its heading, and rows standing out of it. An
+   application's own stylesheet comes later and overrides any of this. */
+
+lb-table th[data-sortable] {
+  cursor: pointer;
+}
+
+lb-table th > [data-sort] {
+  display: inline-block;
+  margin-inline-start: 0.3em;
+  padding: 0 0.15em;
+  border: 1px solid transparent;
+  border-radius: 50%;
+  font-size: 0.8em;
+  line-height: 1.3;
+}
+
+lb-table th > [data-sort][data-unsorted] {
+  color: #b58900;
+  border-color: currentColor;
+}
+
+lb-table tr[lb-row-unsorted] > :first-child {
+  box-shadow: inset 3px 0 0 #b58900;
+}

package/docs/lb-date.md

@@ -0,0 +1,48 @@
+# `lb-date`
+
+> Status: a barebones starter.  Iterative use will drive improvements.
+
+A date or a time shown by the browser's `Intl.DateTimeFormat`.  Not a
+control: write `lb-column` on the tag, and the hub lands the column on it
+and never gathers it.
+
+```html
+<lb-date lb-column="due" exp-date-style="medium"></lb-date>
+```
+
+## Expansion Attributes
+
+Each parameter is one of `Intl.DateTimeFormat`'s options, in kebab-case.  A
+parameter not given leaves Intl's default.
+
+| Parameter            | `Intl.DateTimeFormat` option          |
+| -------------------- | ------------------------------------- |
+| `exp-locale`         | the locale, the browser's when absent |
+| `exp-date-style`     | `dateStyle`                           |
+| `exp-time-style`     | `timeStyle`                           |
+| `exp-time-zone`      | `timeZone`                            |
+| `exp-time-zone-name` | `timeZoneName`                        |
+| `exp-hour-cycle`     | `hourCycle`                           |
+| `exp-weekday`        | `weekday`                             |
+| `exp-era`            | `era`                                 |
+| `exp-year`           | `year`                                |
+| `exp-month`          | `month`                               |
+| `exp-day`            | `day`                                 |
+| `exp-hour`           | `hour`                                |
+| `exp-minute`         | `minute`                              |
+| `exp-second`         | `second`                              |
+
+Intl refuses `exp-date-style` or `exp-time-style` beside any of
+`exp-weekday` through `exp-second`.
+
+## The value
+
+The widget reads the value as JavaScript's `Date` does.  A date alone, as
+`YYYY-MM-DD`, shows as that day in every time zone.  A value that is no
+date shows as it arrived.  Null shows nothing.
+
+## Styling
+
+The definition is a `<time>` whose text is the formatted date and whose
+`datetime` is the value as it arrived.  The hub stamps the tag with
+`lb-column-value`, the value as it arrived.

package/docs/lb-number.md

@@ -0,0 +1,53 @@
+# `lb-number`
+
+> Status: a barebones starter.  Iterative use will drive improvements.
+
+A number shown by the browser's `Intl.NumberFormat`.  Not a control: write
+`lb-column` on the tag, and the hub lands the column on it and never gathers
+it.
+
+```html
+<lb-number lb-column="balance" exp-style="currency" exp-currency="USD"></lb-number>
+```
+
+## Expansion Attributes
+
+Each parameter is one of `Intl.NumberFormat`'s options, in kebab-case.  A
+parameter not given leaves Intl's default.
+
+| Parameter                        | `Intl.NumberFormat` option             |
+| -------------------------------- | -------------------------------------- |
+| `exp-locale`                     | the locale, the browser's when absent  |
+| `exp-style`                      | `style`                                |
+| `exp-currency`                   | `currency`                             |
+| `exp-currency-display`           | `currencyDisplay`                      |
+| `exp-currency-sign`              | `currencySign`                         |
+| `exp-unit`                       | `unit`                                 |
+| `exp-unit-display`               | `unitDisplay`                          |
+| `exp-notation`                   | `notation`                             |
+| `exp-compact-display`            | `compactDisplay`                       |
+| `exp-sign-display`               | `signDisplay`                          |
+| `exp-minimum-integer-digits`     | `minimumIntegerDigits`                 |
+| `exp-minimum-fraction-digits`    | `minimumFractionDigits`                |
+| `exp-maximum-fraction-digits`    | `maximumFractionDigits`                |
+| `exp-minimum-significant-digits` | `minimumSignificantDigits`             |
+| `exp-maximum-significant-digits` | `maximumSignificantDigits`             |
+
+## The value
+
+The widget formats the value as the string it arrived as, so a decimal the
+query sends as a string keeps every digit.  A value that is no number shows
+as it arrived.  Null shows nothing.
+
+## Styling
+
+The definition is a `<data>` whose text is the formatted number and whose
+`value` is the number as it arrived.  The hub stamps the tag with
+`lb-column-value`, the number as it arrived, so a stylesheet selects on the
+value itself:
+
+```css
+lb-number[lb-column-value^="-"] {
+  color: var(--negative);
+}
+```

package/docs/lb-table.md

@@ -56,8 +56,11 @@ The server declares the query's key and its order.
 
 ## Order and groups
 
-The hub places the rows by the query's order and builds its groups.  The
-rows land in the table's one `<tbody>`, and a `<tbody>` cannot hold another,
+The hub places the rows by the query's order and builds its groups.  An
+edit from a control in a row, or from the ghost row, leaves the rows where
+they stand until the user asks for the order; a button with
+`commandfor` naming the table's `id` and `command="--lb-sort"` does that.
+The rows land in the table's one `<tbody>`, and a `<tbody>` cannot hold another,
 so a group here is a heading row with its rows after it.  For a `<tbody>` per
 group, write a plain `<table lb-query>` whose group template is the
 `<tbody>`.
@@ -66,6 +69,35 @@ group, write a plain `<table lb-query>` whose group template is the
 `lb-query`: the user's order replaces the query's, and a row the user's
 filter does not pass is hidden.
 
+## The order on the heading
+
+The heading of the column the rows are sorted by carries a triangle, up for
+ascending and down for descending, and `aria-sort`.  Only the order's
+leading term is shown.  A heading's column is the `lb-column` in the cell
+at the same position in the row template, on the cell or inside it.  A cell
+naming no column, or several, gives its heading none.
+
+While rows stand out of order, the triangle carries `data-unsorted`, and a
+click on its heading places them again, as `--lb-sort` does, keeping the
+direction.
+
+With `lb-order` on the table, a click on the sorted heading reverses the
+order, and a click on another heading sorts by its column, ascending.  The
+widget writes the order to the column of `lb-choices` that `lb-order`
+names.  Without `lb-order` there is nowhere to write one, and only the
+re-sort answers a click.  There is no click back to the server's order.
+
+A heading that takes a click carries `data-sortable`.
+
+None of this shows on a grouped table, nor when the order's leading column
+has no heading.  There, a button with `commandfor` and `--lb-sort` does the
+re-sort.
+
+The package ships `lb-table.css`: the triangle turns amber and circled
+while rows stand out of order, and the first cell of a row carrying
+`lb-row-unsorted` is marked on its leading edge.  The application's own
+stylesheet comes after it and overrides any of it.
+
 ## Filtering by selection
 
 Text selected in a cell filters the table by that cell's column, when the

package/docs/temp-feature-request-lb-table.md

@@ -0,0 +1,130 @@
+# Feature request: `lb-table` for maintenance pages
+
+Temporary.  Written from the rkmedia app, which uses `lb-table` for every
+list it edits (lookup tables with a ghost row, edit-in-place cells,
+drag-to-reorder).  Two things every such page wants and today writes for
+itself, or cannot have.  To be settled here and then folded into
+`lb-table.md` or deleted.
+
+## 1. The order shown on the heading, and re-sorted from it
+
+**Status:** first iteration implemented, as settled below; see
+`lb-table.md`, *The order on the heading*.
+
+**Want:** `lb-table` always marks the heading of the column the rows are
+sorted by with an up or down triangle for the direction.  While the order is
+dirty from the user's edits (`lb-query-unsorted-count` is not 0), the
+triangle changes color.  Clicking the heading sorts by its column.
+
+**Why:** an edit from a control in a row, or from the ghost row, leaves the
+rows where they stand (`lb-table.md`, *Order and groups*).  Every table
+whose order reads a column the user edits needs a re-sort control, so every
+page writes the same markup and CSS.  What rkmedia writes today:
+
+```html
+<div class="list">
+  <button type="button" class="resort" commandfor="workshop-topics-list" command="--lb-sort">Re-sort</button>
+  <lb-table id="workshop-topics-list" lb-query="workshopTopics" exp-caption="Talks and workshops">
+    ...
+  </lb-table>
+</div>
+```
+
+```css
+.resort { visibility: hidden; }
+:has(> [lb-query-unsorted-count]:not([lb-query-unsorted-count="0"])) > .resort { visibility: visible; }
+```
+
+The button cannot go inside the tag, so it needs an `id`, `commandfor` and
+a `:has()` on a wrapper.  Shown with `display` it moves the table; shown
+with `visibility` it leaves a blank strip above every table.
+
+The heading row is always laid out and the widget owns it, so the
+triangle placed there moves nothing, needs no `id` and no page CSS.  The
+hub already knows the order: the server declares it, and `lb-order` names
+the user's.
+
+**Settled:**
+
+- **The triangle is always shown** on the sorted column's heading, clean or
+  dirty.
+- **Dirty is a color change** on the triangle.
+- **Clicking a dirty triangle re-sorts** (`--lb-sort`): it places the rows
+  and clears `lb-row-unsorted`, keeping the direction.  Only a click on a
+  clean triangle reverses.
+- **Clicking another heading sorts by its column**, writing the user's
+  order (`lb-order`).  That places every row and clears `lb-row-unsorted`.
+- **Raw values.**  A column shown formatted sorts by what the query sent,
+  so it must be sent raw or declared in `types` (the reference already says
+  so); worth repeating in `lb-table.md`.
+- **A default style for `tr[lb-row-unsorted]`** (rkmedia marks the first
+  cell's left edge), subtle and overridable, saves every app writing one.
+- **A heading takes its column from the row template.**  The nth heading
+  shows the column of the nth cell of the row template, the `lb-column` in
+  that cell.  The page writes nothing on the `<th>`.  A cell with no
+  `lb-column`, or with several, gives its heading no column, and that
+  heading does not sort.
+- **One column at a time.**  A heading click writes an order of one term.
+  When the order has several terms, the triangle marks the leading term.
+  Sub-sorts are a UI question for later, built on this foundation.
+- **Groups leave all of this out.**  A table with group templates shows no
+  triangle and takes no heading clicks, so none of it triggers there.
+- **Dirty is yellow, circled.**  The triangle turns yellow and gains a
+  circle around it, so the shape says dirty without the color.
+- **No route back to the server's order.**  Once the user sorts by a
+  heading, the user's order stands.
+- **No sort is the opt-out.**  A table with no order shows no triangle and
+  takes no heading clicks.
+
+**Open:**
+
+- **The order's column not shown.**  A drag-to-reorder table orders by a
+  position column no one displays, and a server's order may lead with any
+  column the template leaves out.  No heading carries the triangle, so a
+  dirty order has no re-sort control.  Either the triangle has an
+  always-present fallback, such tables keep a page-written button, or the
+  dirty state cannot arise for them (a drag rewrites positions so no row
+  stands out of order).
+- **Heading clicks without `lb-order`.**  A heading click writes the user's
+  order into the column of `lb-choices` that `lb-order` names.  A table
+  with a server order and no `lb-order` has nowhere to write it: it can
+  show the triangle and re-sort from it, but not sort by another heading.
+  Whether that is the intended reading of "no sort", or the widget
+  supplies a choice of its own.
+
+The first iteration takes the plain reading of both: a table whose order's
+leading column has no heading shows no triangle and keeps a page-written
+button, and a table without `lb-order` shows the triangle and re-sorts
+from it but takes no clicks on other headings.
+
+## 2. Highlight-to-filter that works on edit pages
+
+**Want:** select text in a cell and the table filters to the rows that
+match, on read-only and editable tables alike, and the table shows what it
+is filtered by.
+
+**What exists:** `lb-table.md`, *Filtering by selection*: a selection in a
+cell whose `lb-column` the table's `lb-filter` names becomes that column's
+choice (`=`, `^=`, `$=`, `*=`).
+
+**Gaps:**
+
+- **Inputs.**  The widget reads `getSelection()`, which does not report text
+  selected inside an `<input>` or `<textarea>`.  An editable cell is an
+  input, so on an edit page highlighting never filters.  A control reports
+  its own range (`selectionStart` / `selectionEnd`); the widget could read
+  that when the selection is in one.
+- **Selecting is also editing.**  In an input, selecting text is how you
+  replace it, so filtering on every selection there would fight editing.
+  It needs a gesture that means "filter": a modifier key held on mouse-up,
+  or inputs that are `readonly`.  Which gesture is Loadbare's call.
+- **No indicator.**  Nothing on the table says it is filtered, by what, or
+  offers to clear it; a page must add a control bound to `lb-choices`
+  itself.  With the re-sort on the heading, the caption line is free for
+  this: the active filters with a clear button for each, and rows hidden
+  ("12 of 40 shown").  Open whether the caption line is the place.
+
+## Order of value to rkmedia
+
+1, then 2.  rkmedia has editable ordered tables now, will want heading
+sorts on the first long list, and has no filters yet.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@loadbare/widgets",
-  "description": "The basic widget set for @loadbare/app: input, select, options, picker, table, unknown-page, confirm, form, insert-dialog, master, checkbox",
-  "version": "0.9.0",
+  "description": "The basic widget set for @loadbare/app: input, select, options, picker, table, unknown-page, confirm, form, insert-dialog, master, checkbox, number, date",
+  "version": "0.10.0",
   "type": "module",
   "files": [
     "dist",
@@ -49,10 +49,10 @@
     "node": ">=22"
   },
   "peerDependencies": {
-    "@loadbare/app": ">=0.17.0 <1.0.0"
+    "@loadbare/app": ">=0.20.0 <1.0.0"
   },
   "devDependencies": {
-    "@loadbare/app": ">=0.17.0 <1.0.0",
+    "@loadbare/app": ">=0.20.0 <1.0.0",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^22.0.0",
     "jsdom": "^25.0.0",