@loadbare/widgets 0.9.1 → 0.10.1

package/README.md

@@ -19,6 +19,8 @@ Inventory:
 | [`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` |
+| [`lb-tel`](docs/lb-tel.md) | a phone number shown as a `tel:` link |
+| [`lb-mailto`](docs/lb-mailto.md) | an email address shown as a `mailto:` link |
 
 ## Installing
 

package/dist/index.d.ts

@@ -7,4 +7,6 @@ import "./lb-confirm.browser.js";
 import "./lb-insert-dialog.browser.js";
 import "./lb-number.browser.js";
 import "./lb-date.browser.js";
+import "./lb-tel.browser.js";
+import "./lb-mailto.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;AACvC,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,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;AAC9B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,wBAAwB,CAAC"}

package/dist/index.js

@@ -7,4 +7,6 @@ import "./lb-confirm.browser.js";
 import "./lb-insert-dialog.browser.js";
 import "./lb-number.browser.js";
 import "./lb-date.browser.js";
+import "./lb-tel.browser.js";
+import "./lb-mailto.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;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"]}
+{"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;AAC9B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,wBAAwB,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\";\nimport \"./lb-tel.browser.js\";\nimport \"./lb-mailto.browser.js\";\n"]}

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

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

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

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

package/dist/lb-mailto.browser.js

@@ -0,0 +1,29 @@
+/// <reference lib="dom" />
+import { ATTR_COLUMN_VALUE } from "@loadbare/app/constants";
+/**
+ * Shows the value that landed on it as written, in the `<a>` its definition
+ * holds, with a `mailto:` `href` that writes to it. Not a control: the hub
+ * stamps `lb-column-value` on the tag and never gathers it.
+ *
+ * The address is encoded into the `href`, so a value carrying `?` or `&`
+ * cannot add a subject, a body or another recipient to the message. A value
+ * with no `@` shows as it arrived, with no `href`.
+ */
+class LbMailto extends HTMLElement {
+    static observedAttributes = [ATTR_COLUMN_VALUE];
+    attributeChangedCallback(_name, _old, value) {
+        const a = this.querySelector("a");
+        if (!a)
+            return;
+        a.textContent = value ?? "";
+        const address = value?.trim();
+        if (address?.includes("@")) {
+            a.setAttribute("href", `mailto:${encodeURIComponent(address).replace(/%40/g, "@")}`);
+        }
+        else {
+            a.removeAttribute("href");
+        }
+    }
+}
+customElements.define("lb-mailto", LbMailto);
+//# sourceMappingURL=lb-mailto.browser.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lb-mailto.browser.js","sourceRoot":"","sources":["../widgets/lb-mailto.browser.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAE3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D;;;;;;;;GAQG;AACH,MAAM,QAAS,SAAQ,WAAW;IAChC,MAAM,CAAC,kBAAkB,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEhD,wBAAwB,CACtB,KAAa,EACb,IAAmB,EACnB,KAAoB;QAEpB,MAAM,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAClC,IAAI,CAAC,CAAC;YAAE,OAAO;QACf,CAAC,CAAC,WAAW,GAAG,KAAK,IAAI,EAAE,CAAC;QAC5B,MAAM,OAAO,GAAG,KAAK,EAAE,IAAI,EAAE,CAAC;QAC9B,IAAI,OAAO,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC3B,CAAC,CAAC,YAAY,CACZ,MAAM,EACN,UAAU,kBAAkB,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAC7D,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,CAAC,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC;;AAGH,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 as written, in the `<a>` its definition\n * holds, with a `mailto:` `href` that writes to it. Not a control: the hub\n * stamps `lb-column-value` on the tag and never gathers it.\n *\n * The address is encoded into the `href`, so a value carrying `?` or `&`\n * cannot add a subject, a body or another recipient to the message. A value\n * with no `@` shows as it arrived, with no `href`.\n */\nclass LbMailto extends HTMLElement {\n  static observedAttributes = [ATTR_COLUMN_VALUE];\n\n  attributeChangedCallback(\n    _name: string,\n    _old: string | null,\n    value: string | null,\n  ): void {\n    const a = this.querySelector(\"a\");\n    if (!a) return;\n    a.textContent = value ?? \"\";\n    const address = value?.trim();\n    if (address?.includes(\"@\")) {\n      a.setAttribute(\n        \"href\",\n        `mailto:${encodeURIComponent(address).replace(/%40/g, \"@\")}`,\n      );\n    } else {\n      a.removeAttribute(\"href\");\n    }\n  }\n}\n\ncustomElements.define(\"lb-mailto\", LbMailto);\n"]}

package/dist/lb-mailto.html

@@ -0,0 +1,6 @@
+<!--
+  An email address as a mailto: link. The script writes the href from the
+  value, so the definition is an <a> with none: until a value lands it is
+  not a link.
+-->
+<a></a>

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/dist/lb-tel.browser.d.ts

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

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

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

package/dist/lb-tel.browser.js

@@ -0,0 +1,40 @@
+/// <reference lib="dom" />
+import { ATTR_COLUMN_VALUE } from "@loadbare/app/constants";
+/**
+ * Shows the value that landed on it as written, in the `<a>` its definition
+ * holds, with a `tel:` `href` that dials it. Not a control: the hub stamps
+ * `lb-column-value` on the tag and never gathers it.
+ *
+ * The `href` keeps a leading `+` and the digits, and drops the rest, so
+ * `(555) 123-4567` dials as `5551234567`. An extension written after `x`,
+ * `ext` or `extension` becomes `;ext=`, rather than digits dialed on the end
+ * of the number. A value with no digits shows as it arrived, with no `href`.
+ */
+class LbTel extends HTMLElement {
+    static observedAttributes = [ATTR_COLUMN_VALUE];
+    attributeChangedCallback(_name, _old, value) {
+        const a = this.querySelector("a");
+        if (!a)
+            return;
+        a.textContent = value ?? "";
+        const href = value === null ? null : tel(value);
+        if (href)
+            a.setAttribute("href", href);
+        else
+            a.removeAttribute("href");
+    }
+}
+/** The `tel:` URI for a number as a person writes it, null for no number. */
+function tel(value) {
+    const [number, ext] = value.split(EXTENSION, 2);
+    const digits = number.replace(/\D/g, "");
+    if (!digits)
+        return null;
+    const plus = number.trim().startsWith("+") ? "+" : "";
+    const extDigits = ext?.replace(/\D/g, "");
+    return `tel:${plus}${digits}${extDigits ? `;ext=${extDigits}` : ""}`;
+}
+/** Where a number ends and its extension begins. */
+const EXTENSION = /\s*(?:extension|ext\.?|x)\s*(?=\d)/i;
+customElements.define("lb-tel", LbTel);
+//# sourceMappingURL=lb-tel.browser.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lb-tel.browser.js","sourceRoot":"","sources":["../widgets/lb-tel.browser.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAE3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D;;;;;;;;;GASG;AACH,MAAM,KAAM,SAAQ,WAAW;IAC7B,MAAM,CAAC,kBAAkB,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEhD,wBAAwB,CACtB,KAAa,EACb,IAAmB,EACnB,KAAoB;QAEpB,MAAM,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAClC,IAAI,CAAC,CAAC;YAAE,OAAO;QACf,CAAC,CAAC,WAAW,GAAG,KAAK,IAAI,EAAE,CAAC;QAC5B,MAAM,IAAI,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAChD,IAAI,IAAI;YAAE,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;;YAClC,CAAC,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;IACjC,CAAC;;AAGH,6EAA6E;AAC7E,SAAS,GAAG,CAAC,KAAa;IACxB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IAChD,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IACzC,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IACzB,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACtD,MAAM,SAAS,GAAG,GAAG,EAAE,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IAC1C,OAAO,OAAO,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,QAAQ,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;AACvE,CAAC;AAED,oDAAoD;AACpD,MAAM,SAAS,GAAG,qCAAqC,CAAC;AAExD,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,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 as written, in the `<a>` its definition\n * holds, with a `tel:` `href` that dials it. Not a control: the hub stamps\n * `lb-column-value` on the tag and never gathers it.\n *\n * The `href` keeps a leading `+` and the digits, and drops the rest, so\n * `(555) 123-4567` dials as `5551234567`. An extension written after `x`,\n * `ext` or `extension` becomes `;ext=`, rather than digits dialed on the end\n * of the number. A value with no digits shows as it arrived, with no `href`.\n */\nclass LbTel extends HTMLElement {\n  static observedAttributes = [ATTR_COLUMN_VALUE];\n\n  attributeChangedCallback(\n    _name: string,\n    _old: string | null,\n    value: string | null,\n  ): void {\n    const a = this.querySelector(\"a\");\n    if (!a) return;\n    a.textContent = value ?? \"\";\n    const href = value === null ? null : tel(value);\n    if (href) a.setAttribute(\"href\", href);\n    else a.removeAttribute(\"href\");\n  }\n}\n\n/** The `tel:` URI for a number as a person writes it, null for no number. */\nfunction tel(value: string): string | null {\n  const [number, ext] = value.split(EXTENSION, 2);\n  const digits = number.replace(/\\D/g, \"\");\n  if (!digits) return null;\n  const plus = number.trim().startsWith(\"+\") ? \"+\" : \"\";\n  const extDigits = ext?.replace(/\\D/g, \"\");\n  return `tel:${plus}${digits}${extDigits ? `;ext=${extDigits}` : \"\"}`;\n}\n\n/** Where a number ends and its extension begins. */\nconst EXTENSION = /\\s*(?:extension|ext\\.?|x)\\s*(?=\\d)/i;\n\ncustomElements.define(\"lb-tel\", LbTel);\n"]}

package/dist/lb-tel.html

@@ -0,0 +1,6 @@
+<!--
+  A phone number as a tel: link. The script writes the href from the value,
+  so the definition is an <a> with none: until a value lands it is not a
+  link.
+-->
+<a></a>

package/docs/lb-mailto.md

@@ -0,0 +1,29 @@
+# `lb-mailto`
+
+> Status: a barebones starter.  Iterative use will drive improvements.
+
+An email address shown as written, as a `mailto:` link.  Not a control:
+write `lb-column` on the tag, and the hub lands the column on it and never
+gathers it.
+
+```html
+<lb-mailto lb-column="email"></lb-mailto>
+```
+
+It takes no parameters.  To edit the address, use
+`<lb-input exp-type="email">`.
+
+## The value
+
+The link's text is the value as it arrived.  Its `href` is `mailto:` and the
+address, encoded, so a value carrying `?` or `&` cannot add a subject, a body
+or another recipient to the message.
+
+A value with no `@` shows as it arrived, with no `href`.  Null shows
+nothing.
+
+## Styling
+
+The definition is an `<a>`, with no `href` while there is no address, so
+`lb-mailto a:not([href])` selects a value that is no link.  The hub stamps
+the tag with `lb-column-value`, the value as it arrived.

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/lb-tel.md

@@ -0,0 +1,32 @@
+# `lb-tel`
+
+> Status: a barebones starter.  Iterative use will drive improvements.
+
+A phone number shown as written, as a `tel:` link.  Not a control: write
+`lb-column` on the tag, and the hub lands the column on it and never gathers
+it.
+
+```html
+<lb-tel lb-column="phone"></lb-tel>
+```
+
+It takes no parameters.  To edit the number, use
+`<lb-input exp-type="tel">`.
+
+## The value
+
+The link's text is the value as it arrived.  Its `href` keeps a leading `+`
+and the digits, and drops everything else, so `(555) 123-4567` dials
+`tel:5551234567`.
+
+An extension written after `x`, `ext`, `ext.` or `extension` goes in the
+`href` as `;ext=`, so `555-123-4567 x89` dials `tel:5551234567;ext=89`.
+
+A value with no digits shows as it arrived, with no `href`.  Null shows
+nothing.
+
+## Styling
+
+The definition is an `<a>`, with no `href` while there is nothing to dial,
+so `lb-tel a:not([href])` selects a number that is no link.  The hub stamps
+the tag with `lb-column-value`, the value as it arrived.

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, number, date",
-  "version": "0.9.1",
+  "description": "The basic widget set for @loadbare/app: input, select, options, picker, table, unknown-page, confirm, form, insert-dialog, master, checkbox, number, date, tel, mailto",
+  "version": "0.10.1",
   "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",