@getaster/elements 0.3.5 → 0.4.0

package/dist/form/controls.js

@@ -6,29 +6,72 @@ import "../field/field.js";
 import "../field/number-field.js";
 import "../picker/picker.js";
 import "../select/select.js";
+import "./custom-field.js";
 const NONE = new Map();
+/** The control metadata picks for a field, before any override. */
+export function metadataControl(model, name, options) {
+    if (options)
+        return "picker";
+    const field = model.type.field(name);
+    if (field?.type === "Edm.Boolean")
+        return "check";
+    if (field?.allowedValues)
+        return "select";
+    switch (field?.type) {
+        case "Edm.Date":
+            return "date";
+        case "Edm.Byte":
+        case "Edm.SByte":
+        case "Edm.Int16":
+        case "Edm.Int32":
+        case "Edm.Int64":
+        case "Edm.Decimal":
+        case "Edm.Single":
+        case "Edm.Double":
+            return "number";
+        default:
+            return "text";
+    }
+}
 /**
  * The control for one field, chosen from metadata: a foreign key with
  * `options` gives a picker, a Boolean a checkbox, allowed values a select,
- * a Date the date field, anything else a field.
+ * a Date the date field, anything else a field. `control` replaces that
+ * choice with a named editor, or with a renderer that draws its own.
  */
 export function controlFor(model, name, opts) {
     const style = styleMap(opts.span ? { "--span": String(opts.span) } : {});
     const shared = opts.sharedReasons ?? NONE;
-    if (opts.options) {
-        return html `<aster-picker style=${style} .model=${model} .field=${name} .labelled=${opts.labelled} .sharedReasons=${shared} .options=${opts.options}></aster-picker>`;
-    }
-    if (model.type.field(name)?.type === "Edm.Boolean") {
-        return html `<aster-check style=${style} .model=${model} .field=${name} .labelled=${opts.labelled} .sharedReasons=${shared}></aster-check>`;
-    }
-    if (model.type.field(name)?.allowedValues) {
-        return html `<aster-select style=${style} .model=${model} .field=${name} .labelled=${opts.labelled} .sharedReasons=${shared}></aster-select>`;
-    }
-    if (model.type.field(name)?.type === "Edm.Date") {
-        return html `<aster-date style=${style} .model=${model} .field=${name} .labelled=${opts.labelled} .sharedReasons=${shared}></aster-date>`;
+    const labelled = opts.labelled;
+    const label = opts.title ?? "";
+    const hint = opts.hint ?? "";
+    const placeholder = opts.placeholder ?? "";
+    const showErrors = opts.showErrors ?? true;
+    const validateOn = opts.validateOn ?? "submit";
+    const control = typeof opts.control === "function" ? opts.control : opts.control ?? metadataControl(model, name, opts.options);
+    if (typeof control === "function") {
+        return html `<aster-custom-field style=${style} .model=${model} .field=${name} .labelled=${labelled} .sharedReasons=${shared}
+      .label=${label} .hint=${hint} .showErrors=${showErrors} .validateOn=${validateOn} .renderControl=${control}></aster-custom-field>`;
     }
-    if (["Edm.Byte", "Edm.SByte", "Edm.Int16", "Edm.Int32", "Edm.Int64", "Edm.Decimal", "Edm.Single", "Edm.Double"].includes(model.type.field(name)?.type ?? "")) {
-        return html `<aster-number-field style=${style} .model=${model} .field=${name} .labelled=${opts.labelled} .sharedReasons=${shared}></aster-number-field>`;
+    switch (control) {
+        case "picker":
+            return html `<aster-picker style=${style} .model=${model} .field=${name} .labelled=${labelled} .sharedReasons=${shared}
+        .label=${label} .hint=${hint} .showErrors=${showErrors} .validateOn=${validateOn}
+        .placeholder=${placeholder} .options=${opts.options}></aster-picker>`;
+        case "check":
+            return html `<aster-check style=${style} .model=${model} .field=${name} .labelled=${labelled} .sharedReasons=${shared}
+        .label=${label} .hint=${hint} .showErrors=${showErrors} .validateOn=${validateOn}></aster-check>`;
+        case "select":
+            return html `<aster-select style=${style} .model=${model} .field=${name} .labelled=${labelled} .sharedReasons=${shared}
+        .label=${label} .hint=${hint} .showErrors=${showErrors} .validateOn=${validateOn} .placeholder=${placeholder}></aster-select>`;
+        case "date":
+            return html `<aster-date style=${style} .model=${model} .field=${name} .labelled=${labelled} .sharedReasons=${shared}
+        .label=${label} .hint=${hint} .showErrors=${showErrors} .validateOn=${validateOn} .placeholder=${placeholder}></aster-date>`;
+        case "number":
+            return html `<aster-number-field style=${style} .model=${model} .field=${name} .labelled=${labelled} .sharedReasons=${shared}
+        .label=${label} .hint=${hint} .showErrors=${showErrors} .validateOn=${validateOn} .placeholder=${placeholder}></aster-number-field>`;
+        case "text":
+            return html `<aster-field style=${style} .model=${model} .field=${name} .labelled=${labelled} .sharedReasons=${shared}
+        .label=${label} .hint=${hint} .showErrors=${showErrors} .validateOn=${validateOn} .placeholder=${placeholder}></aster-field>`;
     }
-    return html `<aster-field style=${style} .model=${model} .field=${name} .labelled=${opts.labelled} .sharedReasons=${shared}></aster-field>`;
 }

package/dist/form/custom-field.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/form/custom-field.js

@@ -0,0 +1,23 @@
+import { nothing } from "lit-html";
+import { define } from "../base/element.js";
+import { BoundField } from "../field/bound-field.js";
+/**
+ * A field whose editor is a renderer supplied by the page. The frame, label,
+ * hint, error and state handling stay [[class:BoundField]]'s; the renderer
+ * gets the control context and a write that respects read-only and disabled.
+ * Internal: [[object:FormField.control]] is the public surface.
+ */
+class CustomField extends BoundField {
+    #renderControl = this.prop(undefined);
+    get renderControl() {
+        return this.#renderControl.value;
+    }
+    set renderControl(v) {
+        this.#renderControl.value = v;
+    }
+    control(c) {
+        const render = this.#renderControl.value;
+        return render ? render({ ...c, write: (value) => this.write(value) }) : nothing;
+    }
+}
+define("aster-custom-field", CustomField);

package/dist/form/features.d.ts

@@ -0,0 +1,27 @@
+/**
+ * How the form behaves. A descriptor says how, never whether: switching a
+ * presentation feature off is [[object:FormChrome]]'s job. Plain data, so a
+ * composition catalog can carry it.
+ */
+export type FormFeature = {
+    readonly kind: "validation";
+    readonly on?: "change" | "exit";
+} | {
+    readonly kind: "save";
+};
+/** When a field revalidates: only when the host validates, on change, or on exit. */
+export type ValidateOn = "submit" | "change" | "exit";
+/** One descriptor of `kind`, if the page gave one. */
+export declare function formFeature<K extends FormFeature["kind"]>(features: readonly FormFeature[] | undefined, kind: K): Extract<FormFeature, {
+    kind: K;
+}> | undefined;
+/** The features with `next` replacing the first descriptor of its kind, or appended. */
+export declare function withFormFeature(features: readonly FormFeature[] | undefined, next: FormFeature): FormFeature[];
+/** The features without the descriptor of `kind`. */
+export declare function withoutFormFeature(features: readonly FormFeature[] | undefined, kind: FormFeature["kind"]): FormFeature[];
+/** The validation timing; absent means validation happens when the host validates or saves. */
+export declare function validationOn(features: readonly FormFeature[] | undefined): ValidateOn;
+/** Whether Enter in a single-line field saves the model. */
+export declare function savesOnEnter(features: readonly FormFeature[] | undefined): boolean;
+/** Checks a features value: known kinds, plain fields and valid unions. */
+export declare function validateFormFeatures(value: unknown): asserts value is readonly FormFeature[];

package/dist/form/features.js

@@ -0,0 +1,52 @@
+/** One descriptor of `kind`, if the page gave one. */
+export function formFeature(features, kind) {
+    return features?.find((entry) => entry.kind === kind);
+}
+/** The features with `next` replacing the first descriptor of its kind, or appended. */
+export function withFormFeature(features, next) {
+    const list = [...(features ?? [])];
+    const at = list.findIndex((entry) => entry.kind === next.kind);
+    if (at < 0)
+        list.push(next);
+    else
+        list[at] = next;
+    return list;
+}
+/** The features without the descriptor of `kind`. */
+export function withoutFormFeature(features, kind) {
+    return (features ?? []).filter((entry) => entry.kind !== kind);
+}
+/** The validation timing; absent means validation happens when the host validates or saves. */
+export function validationOn(features) {
+    return formFeature(features, "validation")?.on ?? "submit";
+}
+/** Whether Enter in a single-line field saves the model. */
+export function savesOnEnter(features) {
+    return formFeature(features, "save") !== undefined;
+}
+/** Checks a features value: known kinds, plain fields and valid unions. */
+export function validateFormFeatures(value) {
+    if (!Array.isArray(value))
+        throw new TypeError("features must be an array");
+    const seen = new Set();
+    for (const entry of value) {
+        if (!entry || typeof entry !== "object" || Array.isArray(entry))
+            throw new TypeError("each feature must be a plain object");
+        const kind = entry.kind;
+        if (kind !== "validation" && kind !== "save")
+            throw new TypeError(`unknown feature kind: ${String(kind)}`);
+        if (seen.has(kind))
+            throw new TypeError(`feature "${kind}" appears more than once`);
+        seen.add(kind);
+        switch (kind) {
+            case "validation": {
+                const on = entry.on;
+                if (on !== undefined && on !== "change" && on !== "exit")
+                    throw new TypeError('validation.on must be "change" or "exit"');
+                break;
+            }
+            case "save":
+                break;
+        }
+    }
+}

package/dist/form/form.d.ts

@@ -1,14 +1,33 @@
 import type { Collection, EditModel } from "@getaster/data";
-import type { ReadonlySignal } from "@preact/signals-core";
+import { type ReadonlySignal } from "@preact/signals-core";
 import type { PickerOptions } from "../picker/options.ts";
 import { AsterElement, type View } from "../base/element.ts";
 import "../field/field.ts";
 import "../section/section.ts";
+import { type FormControl } from "./controls.ts";
+import { type FormFeature, type ValidateOn } from "./features.ts";
+import { type FormChrome, type FormPolicy } from "./policy.ts";
+export type { FormFeature } from "./features.ts";
+export type { FormChrome, FormPolicy } from "./policy.ts";
 /** A field of the model, optionally spanning columns; `options` makes a foreign key a picker. */
 export interface FormField {
     readonly field: string;
     readonly span?: number;
     readonly options?: Collection | PickerOptions;
+    /** A label override; default: the field's title from metadata. */
+    readonly title?: string;
+    /** Help text under the control. */
+    readonly hint?: string;
+    /** Placeholder text, for the controls that have one. */
+    readonly placeholder?: string;
+    /** Starts read-only unless a page rule names read-only. */
+    readonly readOnly?: boolean;
+    /** Starts disabled unless a page rule names enabled. */
+    readonly disabled?: boolean;
+    /** Starts required unless a page rule names required. */
+    readonly required?: boolean;
+    /** A typed editor override, or a renderer for a custom control (JavaScript only). */
+    readonly control?: FormControl;
 }
 /** A value shown read-only, such as a figure derived from other fields. */
 export interface FormValue {
@@ -24,12 +43,16 @@ export interface FormSection {
     readonly open?: boolean;
     readonly items: readonly FormItem[];
 }
+/** What the cancelable `form-submit` event carries. */
+export interface FormSubmitDetail {
+    readonly model: EditModel;
+}
 /**
- * Fields laid out from metadata. The app gives only the arrangement
- * (sections, columns, spans); each field's control, label, type, required
- * marker, allowed values and state come from the model and its metadata:
- * allowed values become a select, a foreign key with `options` a picker,
- * anything else a field.
+ * Fields laid out from metadata. The app gives the arrangement
+ * (sections, columns, spans) and may override a field's label, hint,
+ * placeholder or editor; each field's control, type, allowed values and
+ * state still come from the model and its metadata. Static read-only,
+ * disabled and required values are defaults that page rules override.
  */
 export declare class Form extends AsterElement {
     #private;
@@ -40,7 +63,44 @@ export declare class Form extends AsterElement {
     /** The sections' heading level in the page outline. */
     get headingLevel(): 2 | 3 | 4;
     set headingLevel(v: 2 | 3 | 4);
-    /** Focuses the first field with an error, or the first field. */
+    /** Static edit defaults for the whole form, as [[object:FormPolicy]]. Default `{}`. */
+    get policy(): FormPolicy;
+    set policy(v: FormPolicy);
+    /** Sugar for `policy.readOnly`. Default `false`. */
+    get readOnly(): boolean;
+    set readOnly(v: boolean);
+    /** Sugar for `policy.disabled`. Default `false`. */
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    /** Which presentation surfaces the form shows, as [[object:FormChrome]]. Default `{}`. */
+    get chrome(): FormChrome;
+    set chrome(v: FormChrome);
+    /** Sugar for `chrome.columns`: columns for sections that don't set their own. Default `2`. */
+    get columns(): number;
+    set columns(v: number);
+    /** Sugar for `chrome.titleOrientation`: labels above (`"top"`) or beside (`"start"`) their controls. Default `"top"`. */
+    get titleOrientation(): "top" | "start";
+    set titleOrientation(v: "top" | "start");
+    /** Sugar for `chrome.showInlineErrors`. Default `true`. */
+    get showInlineErrors(): boolean;
+    set showInlineErrors(v: boolean);
+    /** Sugar for `chrome.errorSummary`. Default `false`. */
+    get errorSummary(): boolean;
+    set errorSummary(v: boolean);
+    /** Sugar for `chrome.autoFocus`. Default `false`. */
+    get autoFocus(): boolean;
+    set autoFocus(v: boolean);
+    /** How the form behaves, as [[type:FormFeature]] descriptors. Default `[]`. */
+    get features(): readonly FormFeature[];
+    set features(v: readonly FormFeature[]);
+    /** Sugar for a `validation` feature's timing: `"submit"` (default), `"change"` or `"exit"`. */
+    get validateOn(): ValidateOn;
+    set validateOn(v: ValidateOn);
+    /** Sugar for a `save` feature: Enter in a single-line field saves. Default `false`. */
+    get saveOnEnter(): boolean;
+    set saveOnEnter(v: boolean);
+    connectedCallback(): void;
+    /** Focuses the first field with an error, or the first editable field. */
     focusFirst(): void;
     protected render(): View;
 }

package/dist/form/form.js

@@ -1,21 +1,27 @@
+import { effect } from "@preact/signals-core";
 import { html, nothing } from "lit-html";
 import { styleMap } from "lit-html/directives/style-map.js";
 import { AsterElement, define, uid } from "../base/element.js";
 import "../field/field.js";
 import "../section/section.js";
 import { controlFor } from "./controls.js";
+import { savesOnEnter, validationOn, validateFormFeatures, withFormFeature, withoutFormFeature, } from "./features.js";
+import { autoFocusOnError, errorSummaryShown, formColumns, inlineErrorsShown, titleOrientation, } from "./policy.js";
 /**
- * Fields laid out from metadata. The app gives only the arrangement
- * (sections, columns, spans); each field's control, label, type, required
- * marker, allowed values and state come from the model and its metadata:
- * allowed values become a select, a foreign key with `options` a picker,
- * anything else a field.
+ * Fields laid out from metadata. The app gives the arrangement
+ * (sections, columns, spans) and may override a field's label, hint,
+ * placeholder or editor; each field's control, type, allowed values and
+ * state still come from the model and its metadata. Static read-only,
+ * disabled and required values are defaults that page rules override.
  */
 export class Form extends AsterElement {
     #shared = new Map();
     #model = this.prop(undefined);
     #sections = this.prop([]);
     #level = this.prop(2);
+    #policy = this.prop({});
+    #chrome = this.prop({});
+    #features = this.prop([]);
     #id = uid("aster-form");
     get model() {
         return this.#model.value;
@@ -36,44 +42,276 @@ export class Form extends AsterElement {
     set headingLevel(v) {
         this.#level.value = v;
     }
-    /** Focuses the first field with an error, or the first field. */
+    /** Static edit defaults for the whole form, as [[object:FormPolicy]]. Default `{}`. */
+    get policy() {
+        return this.#policy.value;
+    }
+    set policy(v) {
+        this.#policy.value = v;
+    }
+    /** Sugar for `policy.readOnly`. Default `false`. */
+    get readOnly() {
+        return this.#policy.value.readOnly === true;
+    }
+    set readOnly(v) {
+        this.#policy.value = { ...this.#policy.peek(), readOnly: v };
+    }
+    /** Sugar for `policy.disabled`. Default `false`. */
+    get disabled() {
+        return this.#policy.value.disabled === true;
+    }
+    set disabled(v) {
+        this.#policy.value = { ...this.#policy.peek(), disabled: v };
+    }
+    /** Which presentation surfaces the form shows, as [[object:FormChrome]]. Default `{}`. */
+    get chrome() {
+        return this.#chrome.value;
+    }
+    set chrome(v) {
+        this.#chrome.value = v;
+    }
+    /** Sugar for `chrome.columns`: columns for sections that don't set their own. Default `2`. */
+    get columns() {
+        return formColumns(this.#chrome.value);
+    }
+    set columns(v) {
+        if (!Number.isSafeInteger(v) || v < 1)
+            throw new TypeError("columns must be a positive integer");
+        this.#chrome.value = { ...this.#chrome.peek(), columns: v };
+    }
+    /** Sugar for `chrome.titleOrientation`: labels above (`"top"`) or beside (`"start"`) their controls. Default `"top"`. */
+    get titleOrientation() {
+        return titleOrientation(this.#chrome.value);
+    }
+    set titleOrientation(v) {
+        if (v !== "top" && v !== "start")
+            throw new TypeError('titleOrientation must be "top" or "start"');
+        this.#chrome.value = { ...this.#chrome.peek(), titleOrientation: v };
+    }
+    /** Sugar for `chrome.showInlineErrors`. Default `true`. */
+    get showInlineErrors() {
+        return inlineErrorsShown(this.#chrome.value);
+    }
+    set showInlineErrors(v) {
+        this.#chrome.value = { ...this.#chrome.peek(), showInlineErrors: v };
+    }
+    /** Sugar for `chrome.errorSummary`. Default `false`. */
+    get errorSummary() {
+        return errorSummaryShown(this.#chrome.value);
+    }
+    set errorSummary(v) {
+        this.#chrome.value = { ...this.#chrome.peek(), errorSummary: v };
+    }
+    /** Sugar for `chrome.autoFocus`. Default `false`. */
+    get autoFocus() {
+        return autoFocusOnError(this.#chrome.value);
+    }
+    set autoFocus(v) {
+        this.#chrome.value = { ...this.#chrome.peek(), autoFocus: v };
+    }
+    /** How the form behaves, as [[type:FormFeature]] descriptors. Default `[]`. */
+    get features() {
+        return this.#features.value;
+    }
+    set features(v) {
+        validateFormFeatures(v);
+        this.#features.value = v.map((entry) => ({ ...entry }));
+    }
+    /** Sugar for a `validation` feature's timing: `"submit"` (default), `"change"` or `"exit"`. */
+    get validateOn() {
+        return validationOn(this.#features.value);
+    }
+    set validateOn(v) {
+        if (v !== "submit" && v !== "change" && v !== "exit")
+            throw new TypeError('validateOn must be "submit", "change" or "exit"');
+        this.#features.value = v === "submit"
+            ? withoutFormFeature(this.#features.peek(), "validation")
+            : withFormFeature(this.#features.peek(), { kind: "validation", on: v });
+    }
+    /** Sugar for a `save` feature: Enter in a single-line field saves. Default `false`. */
+    get saveOnEnter() {
+        return savesOnEnter(this.#features.value);
+    }
+    set saveOnEnter(v) {
+        if (typeof v !== "boolean")
+            throw new TypeError("saveOnEnter must be a boolean");
+        this.#features.value = v ? withFormFeature(this.#features.peek(), { kind: "save" }) : withoutFormFeature(this.#features.peek(), "save");
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        let applied;
+        const stopPolicy = effect(() => {
+            const model = this.#model.value;
+            const policy = this.#editPolicy(this.#policy.value);
+            if (applied && applied !== model)
+                applied.applyPolicy({});
+            applied = model;
+            model?.applyPolicy(policy);
+        });
+        let hadErrors = false;
+        const stopFocus = effect(() => {
+            const model = this.#model.value;
+            if (!model || !autoFocusOnError(this.#chrome.value)) {
+                hadErrors = false;
+                return;
+            }
+            const any = Object.keys(model.errors.value).length > 0;
+            if (any && !hadErrors)
+                requestAnimationFrame(() => this.focusFirst());
+            hadErrors = any;
+        });
+        this.listen(this, "keydown", (event) => this.#keydown(event));
+        this.onDisconnect(() => {
+            stopPolicy();
+            stopFocus();
+            applied?.applyPolicy({});
+        });
+    }
+    /** Focuses the first field with an error, or the first editable field. */
     focusFirst() {
-        const target = this.querySelector("[aria-invalid='true']") ??
-            this.querySelector("input:not([readonly]), textarea:not([readonly]), [role=combobox]:not([aria-readonly])");
+        const invalid = [...this.querySelectorAll("[aria-invalid='true']")];
+        const target = invalid.find(isFocusable) ?? invalid[0] ?? this.#firstFocusable("input, textarea, [role=combobox]");
         target?.focus();
     }
     render() {
         const model = this.#model.value;
         if (!model)
             return nothing;
-        // A read-only reason that applies to several fields shows once, above them.
-        const counts = new Map();
-        for (const item of this.#sections.value.flatMap((s) => s.items).filter(isField)) {
-            const state = model.state(nameOf(item)).value;
-            const reason = state.visible && state.readOnly ? state.reasons.readOnly : undefined;
-            if (reason !== undefined)
-                counts.set(reason, (counts.get(reason) ?? 0) + 1);
-        }
-        const shared = new Map([...counts].filter(([, n]) => n > 1).map(([reason], i) => [reason, `${this.#id}-reason-${i}`]));
-        this.#shared = shared;
-        return html `${[...shared].map(([reason, id]) => html `<p class="aster-hint aster-form-reason" id=${id}>${reason}</p>`)}
+        const chrome = this.#chrome.value;
+        this.setAttribute("data-title-orientation", titleOrientation(chrome));
+        const showErrors = inlineErrorsShown(chrome);
+        this.#shared = this.#sharedReasons(model);
+        const labels = this.#fieldLabels(model);
+        const summary = errorSummaryShown(chrome) ? this.#summary(model, labels) : nothing;
+        const timing = validationOn(this.#features.value);
+        return html `${summary}${[...this.#shared].map(([reason, id]) => html `<p class="aster-hint aster-form-reason" id=${id}>${reason}</p>`)}
       ${this.#sections.value.map((section) => {
             const changed = section.items.filter(isField).filter((i) => model.pending(nameOf(i)).value).length;
             return html `<aster-section .heading=${section.title} .level=${this.#level.value} .open=${section.open ?? true}
         .summary=${changed ? `${changed} ${changed === 1 ? "change" : "changes"}` : nothing}
-        .body=${html `<div class="aster-form-grid" style=${styleMap({ "--columns": String(section.columns ?? 2) })}>
-          ${section.items.map((item) => this.#item(model, item))}
+        .body=${html `<div class="aster-form-grid" style=${styleMap({ "--columns": String(section.columns ?? formColumns(chrome)) })}>
+          ${section.items.map((item) => this.#item(model, item, timing, showErrors))}
         </div>`}></aster-section>`;
         })}`;
     }
-    #item(model, item) {
+    #item(model, item, timing, showErrors) {
         const span = typeof item === "object" ? (item.span ?? 1) : 1;
         if (typeof item === "object" && "value" in item) {
             return html `<aster-field style=${styleMap({ "--span": String(span) })} .labelled=${true} .label=${item.title}
         .value=${item.value.value} .readOnly=${true}></aster-field>`;
         }
-        const options = typeof item === "object" ? item.options : undefined;
-        return controlFor(model, nameOf(item), { options, labelled: true, span, sharedReasons: this.#shared });
+        const configured = typeof item === "object" ? item : undefined;
+        return controlFor(model, nameOf(item), {
+            options: configured?.options,
+            labelled: true,
+            span,
+            sharedReasons: this.#shared,
+            title: configured?.title,
+            hint: configured?.hint,
+            placeholder: configured?.placeholder,
+            control: configured?.control,
+            validateOn: timing,
+            showErrors,
+        });
+    }
+    /** Reasons shown once for several fields: read-only and disabled reasons repeated across fields. */
+    #sharedReasons(model) {
+        const counts = new Map();
+        for (const item of this.#sections.value.flatMap((s) => s.items).filter(isField)) {
+            const state = model.state(nameOf(item)).value;
+            if (!state.visible)
+                continue;
+            for (const reason of [state.readOnly ? state.reasons.readOnly : undefined, state.enabled ? undefined : state.reasons.enabled]) {
+                if (reason !== undefined)
+                    counts.set(reason, (counts.get(reason) ?? 0) + 1);
+            }
+        }
+        return new Map([...counts].filter(([, n]) => n > 1).map(([reason], i) => [reason, `${this.#id}-reason-${i}`]));
+    }
+    /** Field names in the layout with the text the summary should use. */
+    #fieldLabels(model) {
+        const labels = new Map();
+        for (const item of this.#sections.value.flatMap((s) => s.items).filter(isField)) {
+            const name = nameOf(item);
+            labels.set(name, (typeof item === "object" ? item.title : undefined) || model.type.field(name)?.title || name);
+        }
+        return labels;
+    }
+    /** The errors above the sections, each a button that focuses its field. */
+    #summary(model, labels) {
+        const errors = Object.entries(model.errors.value).filter(([name]) => labels.has(name) && model.state(name).value.visible);
+        const formError = model.formError.value;
+        if (!errors.length && !formError)
+            return nothing;
+        return html `<div class="aster-form-summary" role="alert" tabindex="-1">
+      ${errors.length ? html `<p class="aster-form-summary-title">${errors.length === 1 ? "There is 1 problem" : `There are ${errors.length} problems`}</p>` : nothing}
+      ${formError ? html `<p class="aster-form-summary-form">${formError}</p>` : nothing}
+      ${errors.length ? html `<ul>${errors.map(([name, messages]) => html `<li>${messages.map((message) => html `<button type="button" @click=${() => this.#focusField(name)}>${labels.get(name)}: ${message}</button>`)}</li>`)}</ul>` : nothing}
+    </div>`;
+    }
+    /** Focuses a field by name, opening its collapsed section first and waiting for the field to take focus. */
+    #focusField(name, frames = 5) {
+        requestAnimationFrame(() => {
+            const element = this.querySelector(`[data-field="${CSS.escape(name)}"]`);
+            const section = element?.closest("aster-section");
+            if (section && !section.open)
+                section.open = true;
+            element?.focus();
+            // Custom editors may not be focusable themselves; hand focus to their
+            // editor control, before any row chrome such as a revert button.
+            if (element && !(element === document.activeElement || element.contains(document.activeElement))) {
+                const editor = [...element.querySelectorAll("input:not([type=hidden]), textarea, select, [role=combobox], [contenteditable]")].find(isFocusable)
+                    ?? [...element.querySelectorAll("button, [tabindex]")].find(isFocusable);
+                editor?.focus();
+            }
+            // Succeeded only when the field took focus, not when it stayed on the summary button.
+            if (element && (element === document.activeElement || element.contains(document.activeElement)))
+                return;
+            if (frames > 0)
+                this.#focusField(name, frames - 1);
+        });
+    }
+    #firstFocusable(selector) {
+        return [...this.querySelectorAll(selector)].find(isFocusable);
+    }
+    /** Static defaults the form adds to the model: form-wide entries, then each field's own. */
+    #editPolicy(policy) {
+        const fields = {};
+        for (const item of this.#sections.value.flatMap((s) => s.items)) {
+            if (typeof item !== "object" || !("field" in item))
+                continue;
+            if (item.readOnly === undefined && item.disabled === undefined && item.required === undefined)
+                continue;
+            fields[item.field] = {
+                ...(item.readOnly === undefined ? {} : { readOnly: item.readOnly }),
+                ...(item.disabled === undefined ? {} : { disabled: item.disabled }),
+                ...(item.required === undefined ? {} : { required: item.required }),
+            };
+        }
+        return {
+            ...(policy.readOnly === undefined ? {} : { readOnly: policy.readOnly }),
+            ...(policy.disabled === undefined ? {} : { disabled: policy.disabled }),
+            ...(Object.keys(fields).length ? { fields } : {}),
+        };
+    }
+    #keydown(event) {
+        if (!savesOnEnter(this.#features.peek()))
+            return;
+        if (event.defaultPrevented || event.key !== "Enter" || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey || event.isComposing)
+            return;
+        const target = event.target;
+        if (!(target instanceof HTMLElement))
+            return;
+        // A textarea takes its own newline; buttons, links and comboboxes have their own Enter.
+        if (target.closest("textarea, button, a, [role=button], [role=combobox], input[type=checkbox], input[type=radio]"))
+            return;
+        const model = this.#model.peek();
+        if (!model)
+            return;
+        if (!this.emit("form-submit", { model }))
+            return;
+        event.preventDefault();
+        void model.save();
     }
 }
 function isField(item) {
@@ -82,4 +320,9 @@ function isField(item) {
 function nameOf(item) {
     return typeof item === "string" ? item : item.field;
 }
+/** A control that can take focus: not natively disabled, ARIA-disabled or read-only. */
+function isFocusable(element) {
+    return !element.hasAttribute("disabled") && element.getAttribute("aria-disabled") !== "true"
+        && !element.hasAttribute("readonly") && element.getAttribute("aria-readonly") !== "true";
+}
 define("aster-form", Form);