@lo-tek/interfaces 0.38.0 → 0.40.0

package/dist/components/css/breadcrumbs/breadcrumbs.d.ts

@@ -17,7 +17,7 @@ export type BreadcrumbsAttributes = {
  * <nav aria-label="You are here">
  *   <ol {...breadcrumbs()}>
  *     <li><a href="/">Home</a></li>
- *     <li><a href="/cases" aria-current="page">My cases</a></li>
+ *     <li><a href="/claims" aria-current="page">My claims</a></li>
  *   </ol>
  * </nav>
  * ```

package/dist/components/css/breadcrumbs/breadcrumbs.js

@@ -15,7 +15,7 @@ export const BREADCRUMBS_CLASS = "lt-breadcrumbs";
  * <nav aria-label="You are here">
  *   <ol {...breadcrumbs()}>
  *     <li><a href="/">Home</a></li>
- *     <li><a href="/cases" aria-current="page">My cases</a></li>
+ *     <li><a href="/claims" aria-current="page">My claims</a></li>
  *   </ol>
  * </nav>
  * ```

package/dist/components/css/card/card.d.ts

@@ -24,7 +24,7 @@ export type CardAttributes = {
  * reached with the keyboard nor be announced as something to press.
  *
  * ```ts
- * <a {...card({ interactive: true })} href="/case/481">…</a>
+ * <a {...card({ interactive: true })} href="/claims/AV-2079-0481">…</a>
  * ```
  */
 export declare const card: (({ variant, interactive }?: CardOptions) => CardAttributes) & {

package/dist/components/css/card/card.js

@@ -12,7 +12,7 @@ export const cardVariants = ["outline", "filled"];
  * reached with the keyboard nor be announced as something to press.
  *
  * ```ts
- * <a {...card({ interactive: true })} href="/case/481">…</a>
+ * <a {...card({ interactive: true })} href="/claims/AV-2079-0481">…</a>
  * ```
  */
 export const card = Object.assign(({ variant = "outline", interactive } = {}) => attributes({

package/dist/components/css/file-upload/file-upload.d.ts

@@ -29,7 +29,7 @@ export type FileUploadAttributes = {
  * "all files", so the type must be checked on the server anyway.
  *
  * ```ts
- * <input {...fileUpload({ multiple: true, accept: ".pdf" })} />
+ * <input {...fileUpload({ multiple: true, accept: ".bin" })} />
  * ```
  */
 export declare const fileUpload: (({ state, multiple, accept, }?: FileUploadOptions) => FileUploadAttributes) & {

package/dist/components/css/file-upload/file-upload.js

@@ -13,7 +13,7 @@ export const FILE_UPLOAD_LIST_CLASS = "lt-file-upload-list";
  * "all files", so the type must be checked on the server anyway.
  *
  * ```ts
- * <input {...fileUpload({ multiple: true, accept: ".pdf" })} />
+ * <input {...fileUpload({ multiple: true, accept: ".bin" })} />
  * ```
  */
 export const fileUpload = Object.assign(({ state = "default", multiple, accept, } = {}) => attributes({

package/dist/components/css/icon/icon.d.ts

@@ -25,7 +25,7 @@ export type IconAttributes = {
  * reports a button that lacks one.
  *
  * ```ts
- * <button {...button()} aria-label="Delete the application">
+ * <button {...button()} aria-label="Delete ticket #0331">
  *   <svg {...icon()} viewBox="0 0 24 24">…</svg>
  * </button>
  * ```

package/dist/components/css/icon/icon.js

@@ -11,7 +11,7 @@ export const ICON_CLASS = "lt-icon";
  * reports a button that lacks one.
  *
  * ```ts
- * <button {...button()} aria-label="Delete the application">
+ * <button {...button()} aria-label="Delete ticket #0331">
  *   <svg {...icon()} viewBox="0 0 24 24">…</svg>
  * </button>
  * ```

package/dist/components/css/label/label.d.ts

@@ -23,7 +23,7 @@ export type LabelAttributes = {
  * or the screen reader is not told that it must be filled in.
  *
  * ```ts
- * <label {...label({ required: "symbol" })} htmlFor="email">Email address</label>
+ * <label {...label({ required: "symbol" })} htmlFor="fixer">Fixer's address</label>
  * ```
  */
 export declare const label: (({ required, optional, disabled }?: LabelOptions) => LabelAttributes) & {

package/dist/components/css/label/label.js

@@ -8,7 +8,7 @@ export { requiredMarkers };
  * or the screen reader is not told that it must be filled in.
  *
  * ```ts
- * <label {...label({ required: "symbol" })} htmlFor="email">Email address</label>
+ * <label {...label({ required: "symbol" })} htmlFor="fixer">Fixer's address</label>
  * ```
  */
 export const label = Object.assign(({ required, optional, disabled } = {}) => attributes({

package/dist/components/css/link/link.d.ts

@@ -17,7 +17,7 @@ export type LinkAttributes = {
  * The attributes for a link.
  *
  * ```ts
- * <a {...link()} href="/receipt">See receipt</a>
+ * <a {...link()} href="/small-print">Read the small print</a>
  * <a {...link({ disabled: true })}>See annual statement</a>
  * ```
  *

package/dist/components/css/link/link.js

@@ -4,7 +4,7 @@ export const LINK_CLASS = "lt-link";
  * The attributes for a link.
  *
  * ```ts
- * <a {...link()} href="/receipt">See receipt</a>
+ * <a {...link()} href="/small-print">Read the small print</a>
  * <a {...link({ disabled: true })}>See annual statement</a>
  * ```
  *

package/dist/components/css/spinner/spinner.d.ts

@@ -13,17 +13,19 @@ export type SpinnerAttributes = {
     "data-size"?: NonDefaultSpinnerSize;
     role?: "status";
     "aria-label"?: string;
+    "aria-hidden"?: "true";
 };
 /**
  * The attributes for a loading indicator.
  *
- * Without `label` the ring is only a shape, and screen readers announce
- * nothing. With `label` it becomes a `role="status"` that says what is going
- * on. If you already have a visible text next to it, let that carry the
- * message and drop `label`, so the same thing is not announced twice.
+ * Without `label` the ring is only a shape, and is hidden from screen readers
+ * with `aria-hidden`, as an icon without a label is. With `label` it becomes a
+ * `role="status"` that says what is going on. If you already have a visible
+ * text next to it, let that carry the message and drop `label`, so the same
+ * thing is not announced twice.
  *
  * ```ts
- * <span {...spinner({ label: "Loading applications" })} />
+ * <span {...spinner({ label: "Loading sectors" })} />
  * ```
  */
 export declare const spinner: (({ size, label }?: SpinnerOptions) => SpinnerAttributes) & {

package/dist/components/css/spinner/spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/css/spinner/spinner.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,EAAG,YAAqB,CAAA;AAElD,eAAO,MAAM,YAAY,uCAAwC,CAAA;AAEjE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACvD,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;AAElE,MAAM,MAAM,cAAc,GAAG;IAC3B,+BAA+B;IAC/B,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,OAAO,aAAa,CAAA;IAC3B,WAAW,CAAC,EAAE,qBAAqB,CAAA;IACnC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,OAAO,sBACW,cAAc,KAAQ,iBAAiB;;;CAWrE,CAAA"}
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/css/spinner/spinner.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,EAAG,YAAqB,CAAA;AAElD,eAAO,MAAM,YAAY,uCAAwC,CAAA;AAEjE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACvD,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;AAElE,MAAM,MAAM,cAAc,GAAG;IAC3B,+BAA+B;IAC/B,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,OAAO,aAAa,CAAA;IAC3B,WAAW,CAAC,EAAE,qBAAqB,CAAA;IACnC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,OAAO,sBACW,cAAc,KAAQ,iBAAiB;;;CAYrE,CAAA"}

package/dist/components/css/spinner/spinner.js

@@ -4,13 +4,14 @@ export const spinnerSizes = ["small", "medium", "large"];
 /**
  * The attributes for a loading indicator.
  *
- * Without `label` the ring is only a shape, and screen readers announce
- * nothing. With `label` it becomes a `role="status"` that says what is going
- * on. If you already have a visible text next to it, let that carry the
- * message and drop `label`, so the same thing is not announced twice.
+ * Without `label` the ring is only a shape, and is hidden from screen readers
+ * with `aria-hidden`, as an icon without a label is. With `label` it becomes a
+ * `role="status"` that says what is going on. If you already have a visible
+ * text next to it, let that carry the message and drop `label`, so the same
+ * thing is not announced twice.
  *
  * ```ts
- * <span {...spinner({ label: "Loading applications" })} />
+ * <span {...spinner({ label: "Loading sectors" })} />
  * ```
  */
 export const spinner = Object.assign(({ size = "medium", label } = {}) => attributes({
@@ -18,6 +19,7 @@ export const spinner = Object.assign(({ size = "medium", label } = {}) => attrib
     "data-size": size === "medium" ? undefined : size,
     role: label ? "status" : undefined,
     "aria-label": label,
+    "aria-hidden": label ? undefined : "true",
 }), {
     sizes: spinnerSizes,
     isSize: createGuard(spinnerSizes),

package/dist/components/css/spinner/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../../src/components/css/spinner/spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAEtD,MAAM,CAAC,MAAM,aAAa,GAAG,YAAqB,CAAA;AAElD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAU,CAAA;AAmBjE;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAClC,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,KAAK,KAAqB,EAAE,EAAqB,EAAE,CACrE,UAAU,CAAC;IACT,KAAK,EAAE,aAAa;IACpB,WAAW,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;IACjD,IAAI,EAAE,KAAK,CAAC,CAAC,CAAE,QAAkB,CAAC,CAAC,CAAC,SAAS;IAC7C,YAAY,EAAE,KAAK;CACpB,CAAC,EACJ;IACE,KAAK,EAAE,YAAY;IACnB,MAAM,EAAE,WAAW,CAAC,YAAY,CAAC;CAClC,CACF,CAAA"}
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../../src/components/css/spinner/spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAEtD,MAAM,CAAC,MAAM,aAAa,GAAG,YAAqB,CAAA;AAElD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAU,CAAA;AAoBjE;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAClC,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,KAAK,KAAqB,EAAE,EAAqB,EAAE,CACrE,UAAU,CAAC;IACT,KAAK,EAAE,aAAa;IACpB,WAAW,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;IACjD,IAAI,EAAE,KAAK,CAAC,CAAC,CAAE,QAAkB,CAAC,CAAC,CAAC,SAAS;IAC7C,YAAY,EAAE,KAAK;IACnB,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAE,MAAgB;CACrD,CAAC,EACJ;IACE,KAAK,EAAE,YAAY;IACnB,MAAM,EAAE,WAAW,CAAC,YAAY,CAAC;CAClC,CACF,CAAA"}

package/dist/components/css/tag/tag.d.ts

@@ -25,7 +25,7 @@ export type TagAttributes = {
  * since only you know whether the tag is selected.
  *
  * ```ts
- * <button {...tag({ selectable: true })} aria-pressed="true">Housing benefit</button>
+ * <button {...tag({ selectable: true })} aria-pressed="true">Cutter</button>
  * ```
  */
 export declare const tag: (({ variant, selectable }?: TagOptions) => TagAttributes) & {

package/dist/components/css/tag/tag.js

@@ -13,7 +13,7 @@ export const tagVariants = ["outline", "filled"];
  * since only you know whether the tag is selected.
  *
  * ```ts
- * <button {...tag({ selectable: true })} aria-pressed="true">Housing benefit</button>
+ * <button {...tag({ selectable: true })} aria-pressed="true">Cutter</button>
  * ```
  */
 export const tag = Object.assign(({ variant = "outline", selectable } = {}) => attributes({

package/dist/components/css/toggle-group/toggle-group.d.ts

@@ -19,7 +19,7 @@ export type ToggleGroupAttributes = {
  * <fieldset {...toggleGroup()}>
  *   <legend class="lt-sr-only">View</legend>
  *   <label class={toggleGroup.option}>
- *     <input type="radio" name="view" value="list" checked /> List
+ *     <input type="radio" name="view" value="dry" checked /> Dry
  *   </label>
  * </fieldset>
  * ```

package/dist/components/css/toggle-group/toggle-group.js

@@ -17,7 +17,7 @@ export const TOGGLE_GROUP_OPTION_CLASS = "lt-toggle-group__option";
  * <fieldset {...toggleGroup()}>
  *   <legend class="lt-sr-only">View</legend>
  *   <label class={toggleGroup.option}>
- *     <input type="radio" name="view" value="list" checked /> List
+ *     <input type="radio" name="view" value="dry" checked /> Dry
  *   </label>
  * </fieldset>
  * ```

package/dist/components/css/tooltip/tooltip.d.ts

@@ -19,8 +19,8 @@ export type TooltipAttributes = {
  *
  * ```ts
  * <span {...tooltip()}>
- *   <button aria-describedby="hint">Archive</button>
- *   <span class={tooltip.bubble} role="tooltip" id="hint">Moves it to the archive</span>
+ *   <button aria-describedby="hint">Appraise</button>
+ *   <span class={tooltip.bubble} role="tooltip" id="hint">At street value</span>
  * </span>
  * ```
  */

package/dist/components/css/tooltip/tooltip.js

@@ -17,8 +17,8 @@ export const TOOLTIP_BUBBLE_CLASS = "lt-tooltip__bubble";
  *
  * ```ts
  * <span {...tooltip()}>
- *   <button aria-describedby="hint">Archive</button>
- *   <span class={tooltip.bubble} role="tooltip" id="hint">Moves it to the archive</span>
+ *   <button aria-describedby="hint">Appraise</button>
+ *   <span class={tooltip.bubble} role="tooltip" id="hint">At street value</span>
  * </span>
  * ```
  */

package/dist/components/frame/dialog/dialog.d.ts

@@ -14,7 +14,12 @@ export declare const DIALOG_FOOTER_CLASS: "lt-dialog__footer";
 export declare const dialogColors: readonly ["neutral", "brand", "info", "success", "warning", "danger"];
 export type DialogColor = (typeof dialogColors)[number];
 export type DialogOptions = {
-    /** Id of the heading. The dialog takes its name from it with `aria-labelledby`. */
+    /**
+     * Id of the heading. The dialog takes its name from it with
+     * `aria-labelledby`. Make it from a key in the data, never from the loop
+     * index or a counter, so it is unique on the page and the same on every
+     * render.
+     */
     titleId: string;
     /**
      * The dialog is open. Default: closed.
@@ -25,7 +30,7 @@ export type DialogOptions = {
      */
     open?: boolean;
     /**
-     * Colour of the header. Default: none.
+     * Colour of the header. Default: `neutral`, which gives none.
      *
      * The colour applies to `header`, so the header must be in the markup for
      * it to show: `<div {...box.header}>` around the heading. Without a header
@@ -89,15 +94,15 @@ export type DialogAttributes = {
  *   turns it into a modal.
  *
  * ```ts
- * const box = lt.dialog({ titleId: "delete-title", open: true })
+ * const box = lt.dialog({ titleId: "cancel-title", open: true })
  * ```
  * ```html
  * <lt-dialog {...box.host}>
  *   <dialog {...box.dialog}>
- *     <h2 {...box.title}>Delete the application?</h2>
- *     <div {...box.body}>The application and its attachments will be gone.</div>
+ *     <h2 {...box.title}>Cancel job 222-0481?</h2>
+ *     <div {...box.body}>The crew keeps the advance. This cannot be undone.</div>
  *     <form method="dialog" {...box.footer}>
- *       <button class="lt-button" value="cancel">Cancel</button>
+ *       <button class="lt-button" value="keep">Keep the job</button>
  *     </form>
  *   </dialog>
  * </lt-dialog>

package/dist/components/frame/dialog/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/frame/dialog/dialog.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,EAAG,WAAoB,CAAA;AAChD,eAAO,MAAM,mBAAmB,EAAG,mBAA4B,CAAA;AAC/D,eAAO,MAAM,kBAAkB,EAAG,kBAA2B,CAAA;AAC7D,eAAO,MAAM,qBAAqB,EAAG,qBAA8B,CAAA;AACnE,eAAO,MAAM,iBAAiB,EAAG,iBAA0B,CAAA;AAC3D,eAAO,MAAM,mBAAmB,EAAG,mBAA4B,CAAA;AAE/D;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,uEAOf,CAAA;AACV,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAEvD,MAAM,MAAM,aAAa,GAAG;IAC1B,mFAAmF;IACnF,OAAO,EAAE,MAAM,CAAA;IACf;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE;QACJ,IAAI,CAAC,EAAE,IAAI,CAAA;KACZ,CAAA;IACD,MAAM,EAAE;QACN,KAAK,EAAE,OAAO,YAAY,CAAA;QAC1B,iBAAiB,EAAE,MAAM,CAAA;QACzB,IAAI,CAAC,EAAE,IAAI,CAAA;QACX,YAAY,CAAC,EAAE,OAAO,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;KAC/C,CAAA;IACD,0EAA0E;IAC1E,MAAM,EAAE;QAAE,KAAK,EAAE,OAAO,mBAAmB,CAAA;KAAE,CAAA;IAC7C,KAAK,EAAE;QACL,KAAK,EAAE,OAAO,kBAAkB,CAAA;QAChC,EAAE,EAAE,MAAM,CAAA;KACX,CAAA;IACD,6DAA6D;IAC7D,QAAQ,EAAE;QAAE,KAAK,EAAE,OAAO,qBAAqB,CAAA;KAAE,CAAA;IACjD,IAAI,EAAE;QAAE,KAAK,EAAE,OAAO,iBAAiB,CAAA;KAAE,CAAA;IACzC,MAAM,EAAE;QAAE,KAAK,EAAE,OAAO,mBAAmB,CAAA;KAAE,CAAA;CAC9C,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,MAAM,wCAKd,aAAa,KAAG,gBAAgB;IAmCjC,0CAA0C;;IAE1C,yDAAyD;;IAEzD,8CAA8C;;IAE9C,+CAA+C;;IAE/C,6EAA6E;;IAE7E,qDAAqD;;;;CAKxD,CAAA"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/frame/dialog/dialog.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,EAAG,WAAoB,CAAA;AAChD,eAAO,MAAM,mBAAmB,EAAG,mBAA4B,CAAA;AAC/D,eAAO,MAAM,kBAAkB,EAAG,kBAA2B,CAAA;AAC7D,eAAO,MAAM,qBAAqB,EAAG,qBAA8B,CAAA;AACnE,eAAO,MAAM,iBAAiB,EAAG,iBAA0B,CAAA;AAC3D,eAAO,MAAM,mBAAmB,EAAG,mBAA4B,CAAA;AAE/D;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,uEAOf,CAAA;AACV,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAEvD,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;;OAKG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE;QACJ,IAAI,CAAC,EAAE,IAAI,CAAA;KACZ,CAAA;IACD,MAAM,EAAE;QACN,KAAK,EAAE,OAAO,YAAY,CAAA;QAC1B,iBAAiB,EAAE,MAAM,CAAA;QACzB,IAAI,CAAC,EAAE,IAAI,CAAA;QACX,YAAY,CAAC,EAAE,OAAO,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;KAC/C,CAAA;IACD,0EAA0E;IAC1E,MAAM,EAAE;QAAE,KAAK,EAAE,OAAO,mBAAmB,CAAA;KAAE,CAAA;IAC7C,KAAK,EAAE;QACL,KAAK,EAAE,OAAO,kBAAkB,CAAA;QAChC,EAAE,EAAE,MAAM,CAAA;KACX,CAAA;IACD,6DAA6D;IAC7D,QAAQ,EAAE;QAAE,KAAK,EAAE,OAAO,qBAAqB,CAAA;KAAE,CAAA;IACjD,IAAI,EAAE;QAAE,KAAK,EAAE,OAAO,iBAAiB,CAAA;KAAE,CAAA;IACzC,MAAM,EAAE;QAAE,KAAK,EAAE,OAAO,mBAAmB,CAAA;KAAE,CAAA;CAC9C,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,MAAM,wCAKd,aAAa,KAAG,gBAAgB;IAmCjC,0CAA0C;;IAE1C,yDAAyD;;IAEzD,8CAA8C;;IAE9C,+CAA+C;;IAE/C,6EAA6E;;IAE7E,qDAAqD;;;;CAKxD,CAAA"}

package/dist/components/frame/dialog/dialog.js

@@ -47,15 +47,15 @@ export const dialogColors = [
  *   turns it into a modal.
  *
  * ```ts
- * const box = lt.dialog({ titleId: "delete-title", open: true })
+ * const box = lt.dialog({ titleId: "cancel-title", open: true })
  * ```
  * ```html
  * <lt-dialog {...box.host}>
  *   <dialog {...box.dialog}>
- *     <h2 {...box.title}>Delete the application?</h2>
- *     <div {...box.body}>The application and its attachments will be gone.</div>
+ *     <h2 {...box.title}>Cancel job 222-0481?</h2>
+ *     <div {...box.body}>The crew keeps the advance. This cannot be undone.</div>
  *     <form method="dialog" {...box.footer}>
- *       <button class="lt-button" value="cancel">Cancel</button>
+ *       <button class="lt-button" value="keep">Keep the job</button>
  *     </form>
  *   </dialog>
  * </lt-dialog>

package/dist/components/frame/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../../src/components/frame/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAE3E,MAAM,CAAC,MAAM,YAAY,GAAG,WAAoB,CAAA;AAChD,MAAM,CAAC,MAAM,mBAAmB,GAAG,mBAA4B,CAAA;AAC/D,MAAM,CAAC,MAAM,kBAAkB,GAAG,kBAA2B,CAAA;AAC7D,MAAM,CAAC,MAAM,qBAAqB,GAAG,qBAA8B,CAAA;AACnE,MAAM,CAAC,MAAM,iBAAiB,GAAG,iBAA0B,CAAA;AAC3D,MAAM,CAAC,MAAM,mBAAmB,GAAG,mBAA4B,CAAA;AAE/D;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,SAAS;IACT,OAAO;IACP,MAAM;IACN,SAAS;IACT,SAAS;IACT,QAAQ;CACA,CAAA;AA8CV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CACjC,CAAC,EACC,OAAO,EAAE,OAAO,EAChB,IAAI,GAAG,KAAK,EACZ,KAAK,GAAG,SAAS,GACH,EAAoB,EAAE;IACpC,6DAA6D;IAC7D,MAAM,OAAO,GAAG,YAAY,CAAC,aAAa,EAAE,OAAO,EAAE,SAAS,CAAC,CAAA;IAE/D,OAAO;QACL,IAAI,EAAE,UAAU,CAAC;YACf,IAAI,EAAE,IAAI,CAAC,CAAC,CAAE,IAAc,CAAC,CAAC,CAAC,SAAS;SACzC,CAAC;QACF,MAAM,EAAE,UAAU,CAAC;YACjB,KAAK,EAAE,YAAY;YACnB,iBAAiB,EAAE,OAAO;YAC1B;;;;;;;;;;;;eAYG;YACH,IAAI,EAAE,IAAI,CAAC,CAAC,CAAE,IAAc,CAAC,CAAC,CAAC,SAAS;YACxC,YAAY,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK;SACtD,CAAC;QACF,MAAM,EAAE,UAAU,CAAC,EAAE,KAAK,EAAE,mBAAmB,EAAE,CAAC;QAClD,KAAK,EAAE,UAAU,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC;QAC7D,QAAQ,EAAE,UAAU,CAAC,EAAE,KAAK,EAAE,qBAAqB,EAAE,CAAC;QACtD,IAAI,EAAE,UAAU,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,CAAC;QAC9C,MAAM,EAAE,UAAU,CAAC,EAAE,KAAK,EAAE,mBAAmB,EAAE,CAAC;KACnD,CAAA;AACH,CAAC,EACD;IACE,0CAA0C;IAC1C,MAAM,EAAE,YAAY;IACpB,yDAAyD;IACzD,MAAM,EAAE,mBAAmB;IAC3B,8CAA8C;IAC9C,KAAK,EAAE,kBAAkB;IACzB,+CAA+C;IAC/C,QAAQ,EAAE,qBAAqB;IAC/B,6EAA6E;IAC7E,IAAI,EAAE,iBAAiB;IACvB,qDAAqD;IACrD,MAAM,EAAE,mBAAmB;IAC3B,MAAM,EAAE,YAAY;IACpB,OAAO,EAAE,WAAW,CAAC,YAAY,CAAC;CACnC,CACF,CAAA"}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../../src/components/frame/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAE3E,MAAM,CAAC,MAAM,YAAY,GAAG,WAAoB,CAAA;AAChD,MAAM,CAAC,MAAM,mBAAmB,GAAG,mBAA4B,CAAA;AAC/D,MAAM,CAAC,MAAM,kBAAkB,GAAG,kBAA2B,CAAA;AAC7D,MAAM,CAAC,MAAM,qBAAqB,GAAG,qBAA8B,CAAA;AACnE,MAAM,CAAC,MAAM,iBAAiB,GAAG,iBAA0B,CAAA;AAC3D,MAAM,CAAC,MAAM,mBAAmB,GAAG,mBAA4B,CAAA;AAE/D;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,SAAS;IACT,OAAO;IACP,MAAM;IACN,SAAS;IACT,SAAS;IACT,QAAQ;CACA,CAAA;AAmDV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CACjC,CAAC,EACC,OAAO,EAAE,OAAO,EAChB,IAAI,GAAG,KAAK,EACZ,KAAK,GAAG,SAAS,GACH,EAAoB,EAAE;IACpC,6DAA6D;IAC7D,MAAM,OAAO,GAAG,YAAY,CAAC,aAAa,EAAE,OAAO,EAAE,SAAS,CAAC,CAAA;IAE/D,OAAO;QACL,IAAI,EAAE,UAAU,CAAC;YACf,IAAI,EAAE,IAAI,CAAC,CAAC,CAAE,IAAc,CAAC,CAAC,CAAC,SAAS;SACzC,CAAC;QACF,MAAM,EAAE,UAAU,CAAC;YACjB,KAAK,EAAE,YAAY;YACnB,iBAAiB,EAAE,OAAO;YAC1B;;;;;;;;;;;;eAYG;YACH,IAAI,EAAE,IAAI,CAAC,CAAC,CAAE,IAAc,CAAC,CAAC,CAAC,SAAS;YACxC,YAAY,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK;SACtD,CAAC;QACF,MAAM,EAAE,UAAU,CAAC,EAAE,KAAK,EAAE,mBAAmB,EAAE,CAAC;QAClD,KAAK,EAAE,UAAU,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC;QAC7D,QAAQ,EAAE,UAAU,CAAC,EAAE,KAAK,EAAE,qBAAqB,EAAE,CAAC;QACtD,IAAI,EAAE,UAAU,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,CAAC;QAC9C,MAAM,EAAE,UAAU,CAAC,EAAE,KAAK,EAAE,mBAAmB,EAAE,CAAC;KACnD,CAAA;AACH,CAAC,EACD;IACE,0CAA0C;IAC1C,MAAM,EAAE,YAAY;IACpB,yDAAyD;IACzD,MAAM,EAAE,mBAAmB;IAC3B,8CAA8C;IAC9C,KAAK,EAAE,kBAAkB;IACzB,+CAA+C;IAC/C,QAAQ,EAAE,qBAAqB;IAC/B,6EAA6E;IAC7E,IAAI,EAAE,iBAAiB;IACvB,qDAAqD;IACrD,MAAM,EAAE,mBAAmB;IAC3B,MAAM,EAAE,YAAY;IACpB,OAAO,EAAE,WAAW,CAAC,YAAY,CAAC;CACnC,CACF,CAAA"}

package/dist/components/frame/dialog/lt-dialog.d.ts

@@ -72,7 +72,7 @@ export declare class LtDialog extends HostElement {
      */
     private nameless;
     /**
-     * Fills in what a template without JavaScript did not write: the class on
+     * Fills in what a template without a builder function did not write: the class on
      * the dialog, and the title. The title is what `aria-labelledby` points to
      * when the server wrote it, otherwise the first heading outside the body,
      * and only when the dialog does not already have a name from `aria-label`.

package/dist/components/frame/dialog/lt-dialog.js

@@ -48,8 +48,8 @@ export const LT_DIALOG_PARTS = {
  * ```html
  * <lt-dialog open>
  *   <dialog class="lt-dialog" aria-labelledby="title" open>
- *     <h2 class="lt-dialog__title" id="title">The decision is registered</h2>
- *     <div class="lt-dialog__body">The case has been processed.</div>
+ *     <h2 class="lt-dialog__title" id="title">The order is placed</h2>
+ *     <div class="lt-dialog__body">Job 222-0481 is open to crews.</div>
  *     <form method="dialog" class="lt-dialog__footer">
  *       <button class="lt-button" value="close">Close</button>
  *     </form>
@@ -193,7 +193,7 @@ export class LtDialog extends HostElement {
             this.headingOf(dialog) === null);
     }
     /**
-     * Fills in what a template without JavaScript did not write: the class on
+     * Fills in what a template without a builder function did not write: the class on
      * the dialog, and the title. The title is what `aria-labelledby` points to
      * when the server wrote it, otherwise the first heading outside the body,
      * and only when the dialog does not already have a name from `aria-label`.
@@ -371,7 +371,7 @@ export class LtDialog extends HostElement {
          * run. When something wrote `open` on the host in the meantime, such as a
          * framework setting the same value again, the component opened the dialog
          * again and cleared `returnValue`, and a listener on `close` read an empty
-         * value instead of "delete". `returnValue` is cleared every time the
+         * value instead of "cancel". `returnValue` is cleared every time the
          * dialog opens, so a value here comes from a button in this round.
          */
         if (this.open &&
@@ -397,9 +397,9 @@ export class LtDialog extends HostElement {
             /*
              * Escape and `close()` without an argument leave the previous
              * `returnValue` in place. A dialog the server opened again then
-             * reported "delete" from last time when it was closed from the server,
-             * and the app that tells "Cancel" from "Delete" by the value deleted
-             * something the user never asked for.
+             * reported "cancel" from last time when it was closed from the server,
+             * and the app that tells "Keep the job" from "Cancel the job" by the
+             * value cancelled something the user never asked for.
              */
             dialog.returnValue = "";
             dialog.showModal();

package/dist/components/frame/error-summary/error-summary.d.ts

@@ -3,7 +3,11 @@ export declare const ERROR_SUMMARY_TITLE_CLASS: "lt-error-summary__title";
 export type ErrorSummaryOptions = {
     /** The number of errors the server found. When it is zero, the box is hidden. */
     count?: number;
-    /** The id of the box, so the form can move focus here after submission. */
+    /**
+     * The id of the box, so the form can move focus here after submission.
+     * Make it from a key in the data, never from the loop index or a counter,
+     * so it is unique on the page and the same on every render.
+     */
     id?: string;
     /**
      * The id of the heading. The box takes its name from it with
@@ -45,7 +49,7 @@ export type ErrorSummaryAttributes = {
  * ```html
  * <lt-error-summary {...summary.host}>
  *   <h2 {...summary.title}>You need to fix 2 errors</h2>
- *   <ul><li><a href="#email">The email address is missing an @</a></li></ul>
+ *   <ul><li><a href="#fixer">The fixer's address is missing an @</a></li></ul>
  * </lt-error-summary>
  * ```
  */

package/dist/components/frame/error-summary/error-summary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"error-summary.d.ts","sourceRoot":"","sources":["../../../../src/components/frame/error-summary/error-summary.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,EAAG,kBAA2B,CAAA;AAC9D,eAAO,MAAM,yBAAyB,EAAG,yBAAkC,CAAA;AAE3E,MAAM,MAAM,mBAAmB,GAAG;IAChC,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2EAA2E;IAC3E,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO,mBAAmB,CAAA;QACjC,IAAI,EAAE,OAAO,CAAA;QACb,QAAQ,EAAE,IAAI,CAAA;QACd,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,MAAM,CAAC,EAAE,IAAI,CAAA;QACb,iBAAiB,CAAC,EAAE,MAAM,CAAA;KAC3B,CAAA;IACD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO,yBAAyB,CAAA;QACvC,EAAE,CAAC,EAAE,MAAM,CAAA;KACZ,CAAA;CACF,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,YAAY,GAAI,wCAI1B,mBAAwB,KAAG,sBA6B7B,CAAA"}
+{"version":3,"file":"error-summary.d.ts","sourceRoot":"","sources":["../../../../src/components/frame/error-summary/error-summary.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,EAAG,kBAA2B,CAAA;AAC9D,eAAO,MAAM,yBAAyB,EAAG,yBAAkC,CAAA;AAE3E,MAAM,MAAM,mBAAmB,GAAG;IAChC,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO,mBAAmB,CAAA;QACjC,IAAI,EAAE,OAAO,CAAA;QACb,QAAQ,EAAE,IAAI,CAAA;QACd,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,MAAM,CAAC,EAAE,IAAI,CAAA;QACb,iBAAiB,CAAC,EAAE,MAAM,CAAA;KAC3B,CAAA;IACD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO,yBAAyB,CAAA;QACvC,EAAE,CAAC,EAAE,MAAM,CAAA;KACZ,CAAA;CACF,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,YAAY,GAAI,wCAI1B,mBAAwB,KAAG,sBA6B7B,CAAA"}

package/dist/components/frame/error-summary/error-summary.js

@@ -19,7 +19,7 @@ export const ERROR_SUMMARY_TITLE_CLASS = "lt-error-summary__title";
  * ```html
  * <lt-error-summary {...summary.host}>
  *   <h2 {...summary.title}>You need to fix 2 errors</h2>
- *   <ul><li><a href="#email">The email address is missing an @</a></li></ul>
+ *   <ul><li><a href="#fixer">The fixer's address is missing an @</a></li></ul>
  * </lt-error-summary>
  * ```
  */

package/dist/components/frame/error-summary/error-summary.js.map

@@ -1 +1 @@
-{"version":3,"file":"error-summary.js","sourceRoot":"","sources":["../../../../src/components/frame/error-summary/error-summary.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAEhD,MAAM,CAAC,MAAM,mBAAmB,GAAG,kBAA2B,CAAA;AAC9D,MAAM,CAAC,MAAM,yBAAyB,GAAG,yBAAkC,CAAA;AA+B3E;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,KAAK,GAAG,CAAC,EACT,EAAE,EACF,OAAO,EAAE,YAAY,MACE,EAAE,EAA0B,EAAE;IACrD;;;;;OAKG;IACH,MAAM,OAAO,GAAG,YAAY,EAAE,IAAI,EAAE;QAClC,CAAC,CAAC,YAAY;QACd,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE;YACV,CAAC,CAAC,GAAG,EAAE,QAAQ;YACf,CAAC,CAAC,SAAS,CAAA;IACf,wEAAwE;IACxE,sCAAsC;IACtC,IAAI,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7C,MAAM,IAAI,KAAK,CACb,mCAAmC,OAAO,wHAAwH,CACnK,CAAA;IACH,OAAO;QACL,IAAI,EAAE,UAAU,CAAC;YACf,KAAK,EAAE,mBAAmB;YAC1B,IAAI,EAAE,OAAgB;YACtB,QAAQ,EAAE,IAAa;YACvB,EAAE;YACF,MAAM,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAE,IAAc,CAAC,CAAC,CAAC,SAAS;YACjD,iBAAiB,EAAE,OAAO;SAC3B,CAAC;QACF,KAAK,EAAE,UAAU,CAAC,EAAE,KAAK,EAAE,yBAAyB,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC;KACrE,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"error-summary.js","sourceRoot":"","sources":["../../../../src/components/frame/error-summary/error-summary.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAEhD,MAAM,CAAC,MAAM,mBAAmB,GAAG,kBAA2B,CAAA;AAC9D,MAAM,CAAC,MAAM,yBAAyB,GAAG,yBAAkC,CAAA;AAmC3E;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,KAAK,GAAG,CAAC,EACT,EAAE,EACF,OAAO,EAAE,YAAY,MACE,EAAE,EAA0B,EAAE;IACrD;;;;;OAKG;IACH,MAAM,OAAO,GAAG,YAAY,EAAE,IAAI,EAAE;QAClC,CAAC,CAAC,YAAY;QACd,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE;YACV,CAAC,CAAC,GAAG,EAAE,QAAQ;YACf,CAAC,CAAC,SAAS,CAAA;IACf,wEAAwE;IACxE,sCAAsC;IACtC,IAAI,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7C,MAAM,IAAI,KAAK,CACb,mCAAmC,OAAO,wHAAwH,CACnK,CAAA;IACH,OAAO;QACL,IAAI,EAAE,UAAU,CAAC;YACf,KAAK,EAAE,mBAAmB;YAC1B,IAAI,EAAE,OAAgB;YACtB,QAAQ,EAAE,IAAa;YACvB,EAAE;YACF,MAAM,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAE,IAAc,CAAC,CAAC,CAAC,SAAS;YACjD,iBAAiB,EAAE,OAAO;SAC3B,CAAC;QACF,KAAK,EAAE,UAAU,CAAC,EAAE,KAAK,EAAE,yBAAyB,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC;KACrE,CAAA;AACH,CAAC,CAAA"}

package/dist/components/frame/error-summary/lt-error-summary.d.ts

@@ -53,7 +53,7 @@ export declare class LtErrorSummary extends HostElement {
      */
     private get shouldFocus();
     /**
-     * Fills in what a template without JavaScript did not write. Only what is
+     * Fills in what a template without a builder function did not write. Only what is
      * missing: a role the server chose stays, and so does a `tabindex`.
      */
     private wire;

package/dist/components/frame/error-summary/lt-error-summary.js

@@ -15,10 +15,10 @@ export const LT_ERROR_SUMMARY_PARTS = {
  * Takes the user from an error in the summary to the field that failed.
  *
  * The server writes the content: the heading and the list of links. When the
- * markup is written with JavaScript, `lt.errorSummary()` also writes the
- * class, `role="alert"` and `tabindex="-1"` on the box, and the component
- * leaves them alone. When the markup comes from a template without
- * JavaScript, the component fills in those three and the class on the
+ * markup is written with a builder function, `lt.errorSummary()` also writes
+ * the class, `role="alert"` and `tabindex="-1"` on the box, and the component
+ * leaves them alone. When the markup comes from a template without one, the
+ * component fills in those three and the class on the
  * heading, and sets them back when a patch removes them. Either way, a box
  * without a name gets `aria-labelledby` pointing at its heading. The component
  * creates no nodes: it used to, and then the heading disappeared on the
@@ -38,7 +38,7 @@ export const LT_ERROR_SUMMARY_PARTS = {
  * <lt-error-summary>
  *   <h2>The form has two errors</h2>
  *   <ul class="lt-list">
- *     <li><a href="#email">Enter a valid email address</a></li>
+ *     <li><a href="#fixer">Enter a valid address</a></li>
  *   </ul>
  * </lt-error-summary>
  * ```
@@ -203,7 +203,7 @@ export class LtErrorSummary extends HostElement {
         return this.dataset.autofocus !== "false";
     }
     /**
-     * Fills in what a template without JavaScript did not write. Only what is
+     * Fills in what a template without a builder function did not write. Only what is
      * missing: a role the server chose stays, and so does a `tabindex`.
      */
     wire() {

package/dist/components/frame/field/field-core.d.ts

@@ -12,10 +12,12 @@ export { createFieldId };
  */
 export type FieldOptions = {
     /**
-     * The id of the control. Required.
+     * The id of the control. Required. Make it from a key in the data, never
+     * from the loop index or a counter, so it is unique on the page and the
+     * same on every render.
      *
      * In React it comes from `useId()`. Otherwise the field's name is usually
-     * the obvious choice. If you know for certain that the markup is rendered
+     * the obvious choice, and in a loop the name with the row's key. If you know for certain that the markup is rendered
      * once, call `createFieldId()` yourself.
      *
      * It used to be optional, and the function created one when it was

package/dist/components/frame/field/field-core.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-core.d.ts","sourceRoot":"","sources":["../../../../src/components/frame/field/field-core.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACrE,OAAO,EAAc,aAAa,EAAgB,MAAM,qBAAqB,CAAA;AAI7E,OAAO,EAAE,aAAa,EAAE,CAAA;AAExB;;;;;;;;GAQG;AAEH,MAAM,MAAM,YAAY,GAAG;IACzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,EAAE,EAAE,MAAM,CAAA;IACV,oEAAoE;IACpE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,4EAA4E;IAC5E,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE;QACL,KAAK,EAAE,UAAU,CAAA;QACjB,GAAG,EAAE,MAAM,CAAA;QACX,eAAe,CAAC,EAAE,cAAc,CAAA;QAChC,eAAe,CAAC,EAAE,EAAE,CAAA;QACpB,eAAe,CAAC,EAAE,MAAM,CAAA;KACzB,CAAA;IACD,OAAO,EAAE;QACP,EAAE,EAAE,MAAM,CAAA;QACV,kBAAkB,CAAC,EAAE,MAAM,CAAA;QAC3B,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,YAAY,CAAC,EAAE,SAAS,CAAA;QACxB,QAAQ,CAAC,EAAE,IAAI,CAAA;KAChB,CAAA;IACD,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAA;IACpB,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,IAAI,CAAA;KAAE,CAAA;IACpC,qFAAqF;IACrF,KAAK,EAAE,UAAU,CAAA;CAClB,CAAA;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,KAAK,CAAC,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC,GACrC,MAAM,GAAG,SAAS,CASpB;AAED,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,YAAY,GAAG,eAAe,CA+C7E"}
+{"version":3,"file":"field-core.d.ts","sourceRoot":"","sources":["../../../../src/components/frame/field/field-core.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACrE,OAAO,EAAc,aAAa,EAAgB,MAAM,qBAAqB,CAAA;AAI7E,OAAO,EAAE,aAAa,EAAE,CAAA;AAExB;;;;;;;;GAQG;AAEH,MAAM,MAAM,YAAY,GAAG;IACzB;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,EAAE,EAAE,MAAM,CAAA;IACV,oEAAoE;IACpE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,4EAA4E;IAC5E,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE;QACL,KAAK,EAAE,UAAU,CAAA;QACjB,GAAG,EAAE,MAAM,CAAA;QACX,eAAe,CAAC,EAAE,cAAc,CAAA;QAChC,eAAe,CAAC,EAAE,EAAE,CAAA;QACpB,eAAe,CAAC,EAAE,MAAM,CAAA;KACzB,CAAA;IACD,OAAO,EAAE;QACP,EAAE,EAAE,MAAM,CAAA;QACV,kBAAkB,CAAC,EAAE,MAAM,CAAA;QAC3B,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,YAAY,CAAC,EAAE,SAAS,CAAA;QACxB,QAAQ,CAAC,EAAE,IAAI,CAAA;KAChB,CAAA;IACD,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAA;IACpB,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,IAAI,CAAA;KAAE,CAAA;IACpC,qFAAqF;IACrF,KAAK,EAAE,UAAU,CAAA;CAClB,CAAA;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,KAAK,CAAC,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC,GACrC,MAAM,GAAG,SAAS,CASpB;AAED,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,YAAY,GAAG,eAAe,CA+C7E"}

package/dist/components/frame/field/field-core.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-core.js","sourceRoot":"","sources":["../../../../src/components/frame/field/field-core.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAE7E,yEAAyE;AACzE,yCAAyC;AACzC,OAAO,EAAE,aAAa,EAAE,CAAA;AA6ExB;;;;;;;;GAQG;AACH,MAAM,UAAU,eAAe,CAC7B,GAAsC;IAEtC,MAAM,MAAM,GAAG,IAAI,GAAG,EAAU,CAAA;IAChC,KAAK,MAAM,EAAE,IAAI,GAAG,EAAE,CAAC;QACrB,IAAI,CAAC,EAAE;YAAE,SAAQ;QACjB,KAAK,MAAM,IAAI,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;YACnC,IAAI,IAAI;gBAAE,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;QAC5B,CAAC;IACH,CAAC;IACD,OAAO,MAAM,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;AAC5D,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,OAAqB;IAC1D,MAAM,EACJ,EAAE,EAAE,OAAO,EACX,IAAI,GAAG,KAAK,EACZ,KAAK,GAAG,KAAK,EACb,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,WAAW,GAAG,EAAE,GACjB,GAAG,OAAO,CAAA;IAEX,6EAA6E;IAC7E,MAAM,EAAE,GAAG,YAAY,CAAC,YAAY,EAAE,OAAO,CAAC,CAAA;IAC9C,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,IAAI,GAAG,EAAE,OAAO,CAAA;IAC7C,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,IAAI,GAAG,EAAE,QAAQ,CAAA;IAEhD,OAAO;QACL,KAAK,EAAE,UAAU,CAAC;YAChB,KAAK,EAAE,UAAmB;YAC1B,GAAG,EAAE,EAAE;YACP,eAAe,EAAE,QAAQ;YACzB,eAAe,EAAE,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAE,EAAY,CAAC,CAAC,CAAC,SAAS;YAClE,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAE,MAAgB,CAAC,CAAC,CAAC,SAAS;SAC1D,CAAC;QACF,OAAO,EAAE,UAAU,CAAC;YAClB,EAAE;YACF,kBAAkB,EAAE,eAAe,CAAC;gBAClC,IAAI,IAAI,MAAM;gBACd,OAAO,IAAI,KAAK,IAAI,OAAO;gBAC3B,GAAG,WAAW;aACf,CAAC;YACF,cAAc,EAAE,OAAO,CAAC,CAAC,CAAE,MAAgB,CAAC,CAAC,CAAC,SAAS;YACvD,oEAAoE;YACpE,qEAAqE;YACrE,iEAAiE;YACjE,kBAAkB;YAClB,YAAY,EAAE,OAAO,CAAC,CAAC,CAAE,SAAmB,CAAC,CAAC,CAAC,SAAS;YACxD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAE,IAAc,CAAC,CAAC,CAAC,SAAS;SACjD,CAAC;QACF,IAAI,EAAE,UAAU,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC;QAChC,KAAK,EAAE,UAAU,CAAC;YAChB,EAAE,EAAE,OAAO;YACX,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAE,IAAc;SAC9C,CAAC;QACF,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;KACvC,CAAA;AACH,CAAC"}
+{"version":3,"file":"field-core.js","sourceRoot":"","sources":["../../../../src/components/frame/field/field-core.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAE7E,yEAAyE;AACzE,yCAAyC;AACzC,OAAO,EAAE,aAAa,EAAE,CAAA;AA+ExB;;;;;;;;GAQG;AACH,MAAM,UAAU,eAAe,CAC7B,GAAsC;IAEtC,MAAM,MAAM,GAAG,IAAI,GAAG,EAAU,CAAA;IAChC,KAAK,MAAM,EAAE,IAAI,GAAG,EAAE,CAAC;QACrB,IAAI,CAAC,EAAE;YAAE,SAAQ;QACjB,KAAK,MAAM,IAAI,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;YACnC,IAAI,IAAI;gBAAE,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;QAC5B,CAAC;IACH,CAAC;IACD,OAAO,MAAM,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;AAC5D,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,OAAqB;IAC1D,MAAM,EACJ,EAAE,EAAE,OAAO,EACX,IAAI,GAAG,KAAK,EACZ,KAAK,GAAG,KAAK,EACb,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,WAAW,GAAG,EAAE,GACjB,GAAG,OAAO,CAAA;IAEX,6EAA6E;IAC7E,MAAM,EAAE,GAAG,YAAY,CAAC,YAAY,EAAE,OAAO,CAAC,CAAA;IAC9C,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,IAAI,GAAG,EAAE,OAAO,CAAA;IAC7C,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,IAAI,GAAG,EAAE,QAAQ,CAAA;IAEhD,OAAO;QACL,KAAK,EAAE,UAAU,CAAC;YAChB,KAAK,EAAE,UAAmB;YAC1B,GAAG,EAAE,EAAE;YACP,eAAe,EAAE,QAAQ;YACzB,eAAe,EAAE,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAE,EAAY,CAAC,CAAC,CAAC,SAAS;YAClE,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAE,MAAgB,CAAC,CAAC,CAAC,SAAS;SAC1D,CAAC;QACF,OAAO,EAAE,UAAU,CAAC;YAClB,EAAE;YACF,kBAAkB,EAAE,eAAe,CAAC;gBAClC,IAAI,IAAI,MAAM;gBACd,OAAO,IAAI,KAAK,IAAI,OAAO;gBAC3B,GAAG,WAAW;aACf,CAAC;YACF,cAAc,EAAE,OAAO,CAAC,CAAC,CAAE,MAAgB,CAAC,CAAC,CAAC,SAAS;YACvD,oEAAoE;YACpE,qEAAqE;YACrE,iEAAiE;YACjE,kBAAkB;YAClB,YAAY,EAAE,OAAO,CAAC,CAAC,CAAE,SAAmB,CAAC,CAAC,CAAC,SAAS;YACxD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAE,IAAc,CAAC,CAAC,CAAC,SAAS;SACjD,CAAC;QACF,IAAI,EAAE,UAAU,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC;QAChC,KAAK,EAAE,UAAU,CAAC;YAChB,EAAE,EAAE,OAAO;YACX,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAE,IAAc;SAC9C,CAAC;QACF,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;KACvC,CAAA;AACH,CAAC"}

package/dist/components/frame/field/lt-field.d.ts

@@ -15,10 +15,11 @@ export declare const LT_FIELD_PARTS: {
 /**
  * Connects label, control, help text and error text in plain DOM.
  *
- * The component is for markup produced without JavaScript: a Go template, a
- * PHP file, a Razor view or handwritten HTML. When the markup is written with
- * JavaScript, wherever the code runs, `lt.field()` should write the
- * attributes instead, and this element is not needed.
+ * The component is for markup from code that cannot call a builder function:
+ * a Go template, a PHP file, a Razor view or handwritten HTML. When the code
+ * can, in TypeScript wherever it runs, or in Kotlin or Java, `lt.field()` or
+ * `Lt.field()` should write the attributes instead, and this element is not
+ * needed.
  *
  * The component renders nothing. It used to insert a `<slot>` element into
  * plain DOM, and since the server did not know about it, Datastar's morph

package/dist/components/frame/field/lt-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lt-field.d.ts","sourceRoot":"","sources":["../../../../src/components/frame/field/lt-field.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,WAAW,EASZ,MAAM,uBAAuB,CAAA;AAG9B,eAAO,MAAM,YAAY,EAAG,UAAmB,CAAA;AAE/C;;;;;GAKG;AACH,eAAO,MAAM,cAAc;;;;;CAKjB,CAAA;AA6FV;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,OAAQ,SAAQ,WAAW;IACtC,MAAM,CAAC,kBAAkB,oDAAoD;IAE7E,OAAO,CAAC,QAAQ,CAAC,CAAkB;IACnC;;;;;;OAMG;IACH,OAAO,CAAC,UAAU,CAAC,CAAQ;IAC3B,OAAO,CAAC,WAAW,CAAC,CAAQ;IAC5B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAoB;IAC/C;;;;;;;;;;OAUG;IACH,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAwC;IAC/D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAsC;IAClE,yDAAyD;IACzD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAiC;IACzD;;;;;;OAMG;IACH,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAyB;IAClD;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,WAAW,CAAC,CAAa;IACjC,oEAAoE;IACpE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IAEnD;;;;;OAKG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,IAAI,WAAW,IAAI,MAAM,GAAG,SAAS,CAEpC;IAED,IAAI,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAExC;IAED,iBAAiB,IAAI,IAAI;IAyCzB,oBAAoB,IAAI,IAAI;IAK5B,wBAAwB,IAAI,IAAI;IAIhC;;;;;;;;OAQG;IACH;;;OAGG;IACH,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,YAAY;IAYpB;;;;;;;OAOG;IACH,OAAO,CAAC,eAAe;IAqBvB,OAAO,CAAC,UAAU;IA2BlB;;;;;;;;OAQG;IACH,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,OAAO;IAIf;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,wBAAwB;IAyBhC;;;;;;OAMG;IACH,OAAO,CAAC,OAAO;IAqBf,OAAO,CAAC,IAAI;CAsUb;AAED,wBAAgB,aAAa,CAAC,OAAO,GAAE,MAAqB,GAAG,IAAI,CAElE"}
+{"version":3,"file":"lt-field.d.ts","sourceRoot":"","sources":["../../../../src/components/frame/field/lt-field.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,WAAW,EASZ,MAAM,uBAAuB,CAAA;AAG9B,eAAO,MAAM,YAAY,EAAG,UAAmB,CAAA;AAE/C;;;;;GAKG;AACH,eAAO,MAAM,cAAc;;;;;CAKjB,CAAA;AA6FV;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBAAa,OAAQ,SAAQ,WAAW;IACtC,MAAM,CAAC,kBAAkB,oDAAoD;IAE7E,OAAO,CAAC,QAAQ,CAAC,CAAkB;IACnC;;;;;;OAMG;IACH,OAAO,CAAC,UAAU,CAAC,CAAQ;IAC3B,OAAO,CAAC,WAAW,CAAC,CAAQ;IAC5B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAoB;IAC/C;;;;;;;;;;OAUG;IACH,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAwC;IAC/D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAsC;IAClE,yDAAyD;IACzD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAiC;IACzD;;;;;;OAMG;IACH,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAyB;IAClD;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,WAAW,CAAC,CAAa;IACjC,oEAAoE;IACpE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IAEnD;;;;;OAKG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,IAAI,WAAW,IAAI,MAAM,GAAG,SAAS,CAEpC;IAED,IAAI,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAExC;IAED,iBAAiB,IAAI,IAAI;IAyCzB,oBAAoB,IAAI,IAAI;IAK5B,wBAAwB,IAAI,IAAI;IAIhC;;;;;;;;OAQG;IACH;;;OAGG;IACH,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,YAAY;IAYpB;;;;;;;OAOG;IACH,OAAO,CAAC,eAAe;IAqBvB,OAAO,CAAC,UAAU;IA2BlB;;;;;;;;OAQG;IACH,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,OAAO;IAIf;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,wBAAwB;IAyBhC;;;;;;OAMG;IACH,OAAO,CAAC,OAAO;IAqBf,OAAO,CAAC,IAAI;CAsUb;AAED,wBAAgB,aAAa,CAAC,OAAO,GAAE,MAAqB,GAAG,IAAI,CAElE"}

package/dist/components/frame/field/lt-field.js

@@ -59,10 +59,11 @@ function readControlWord(control) {
 /**
  * Connects label, control, help text and error text in plain DOM.
  *
- * The component is for markup produced without JavaScript: a Go template, a
- * PHP file, a Razor view or handwritten HTML. When the markup is written with
- * JavaScript, wherever the code runs, `lt.field()` should write the
- * attributes instead, and this element is not needed.
+ * The component is for markup from code that cannot call a builder function:
+ * a Go template, a PHP file, a Razor view or handwritten HTML. When the code
+ * can, in TypeScript wherever it runs, or in Kotlin or Java, `lt.field()` or
+ * `Lt.field()` should write the attributes instead, and this element is not
+ * needed.
  *
  * The component renders nothing. It used to insert a `<slot>` element into
  * plain DOM, and since the server did not know about it, Datastar's morph