@zeyos/zx 2.3.0 → 3.0.0

package/dist/types/components/dock/dock.d.ts

@@ -0,0 +1,495 @@
+import { Component } from '../../core/component.js';
+import { dragAxis } from '../../core/drag-axis.js';
+import { storage } from '../../core/storage.js';
+export type DockContentValue = string | Node | Component | null;
+export type DockContent = DockContentValue | (() => DockContentValue);
+export type DockTab = {
+    /**
+     * Stable tab name.
+     */
+    name: string;
+    /**
+     * Visible tab label.
+     */
+    title: string;
+    /**
+     * Panel content, or a factory called on first reveal.
+     */
+    content?: DockContent;
+};
+export type DockPane = {
+    /**
+     * Stable pane name.
+     */
+    name: string;
+    /**
+     * Header title. For a tab group it names the collapse control only.
+     */
+    title?: string;
+    /**
+     * Body content, or a factory called on first reveal. Ignored
+     * when `tabs` is given.
+     */
+    content?: DockContent;
+    /**
+     * Tabs whose strip replaces the pane's title in the header.
+     */
+    tabs?: DockTab[];
+    /**
+     * Initially active tab name; defaults to the first tab.
+     */
+    active?: string;
+    /**
+     * Initial size along the dock's axis. A number is pixels.
+     */
+    size?: number | string;
+    /**
+     * Smallest the pane may be dragged to, in pixels. Never smaller than
+     * its own header.
+     */
+    min?: number;
+    /**
+     * Whether this pane absorbs leftover space. At most one pane
+     * does; with `content` present the content absorbs it instead.
+     */
+    grow?: boolean;
+    /**
+     * Whether the pane starts collapsed to its header.
+     */
+    collapsed?: boolean;
+    /**
+     * Whether the pane may be collapsed at all.
+     */
+    collapsible?: boolean;
+    /**
+     * Which side of `content` the pane sits on. Ignored when
+     * the dock has no `content`.
+     */
+    side?: 'start' | 'end';
+};
+export type DockState = {
+    /**
+     * Pane sizes in pixels, by pane name.
+     */
+    sizes: Record<string, number>;
+    /**
+     * Names of collapsed panes.
+     */
+    collapsed: string[];
+    /**
+     * Active tab name, by pane name.
+     */
+    active: Record<string, string>;
+};
+export type DockOptions = {
+    /**
+     * Axis the panes stack along.
+     * `vertical` stacks them top to bottom behind horizontal dividers.
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Optional flexible middle. With it the dock is a region
+     * and panes sit on either `side` of it; without it the panes fill the dock.
+     */
+    content?: DockContent;
+    /**
+     * Panes, in order.
+     */
+    panes?: DockPane[];
+    /**
+     * Whether dividers may be dragged.
+     */
+    resizable?: boolean;
+    /**
+     * Default for `pane.collapsible`.
+     */
+    collapsible?: boolean;
+    /**
+     * Whether content factories run on first reveal rather than up
+     * front.
+     */
+    lazy?: boolean;
+    /**
+     * Key under which sizes, collapsed panes, and active
+     * tabs are remembered. Storage failures degrade to memory rather than throwing.
+     */
+    storageKey?: string | null;
+    /**
+     * Accessible name given to every divider.
+     */
+    label?: string;
+    /**
+     * Collapse listener.
+     */
+    oncollapse?: (event: CustomEvent<{
+        name: string;
+    }>) => void;
+    /**
+     * Expand listener.
+     */
+    onexpand?: (event: CustomEvent<{
+        name: string;
+    }>) => void;
+    /**
+     * Resize listener.
+     */
+    onresize?: (event: CustomEvent<{
+        name: string;
+        size: number;
+    }>) => void;
+    /**
+     * Tab listener.
+     */
+    ontabchange?: (event: CustomEvent<{
+        pane: string;
+        tab: string;
+        previous: string | null;
+    }>) => void;
+    /**
+     * Reveal listener.
+     */
+    onreveal?: (event: CustomEvent<{
+        name: string;
+    }>) => void;
+};
+/** @typedef {string|Node|Component|null} DockContentValue */
+/** @typedef {DockContentValue|(() => DockContentValue)} DockContent */
+/**
+ * @typedef {Object} DockTab
+ * @property {string} name Stable tab name.
+ * @property {string} title Visible tab label.
+ * @property {DockContent} [content] Panel content, or a factory called on first reveal.
+ */
+/**
+ * @typedef {Object} DockPane
+ * @property {string} name Stable pane name.
+ * @property {string} [title=''] Header title. For a tab group it names the collapse control only.
+ * @property {DockContent} [content] Body content, or a factory called on first reveal. Ignored
+ *   when `tabs` is given.
+ * @property {DockTab[]} [tabs] Tabs whose strip replaces the pane's title in the header.
+ * @property {string} [active] Initially active tab name; defaults to the first tab.
+ * @property {number|string} [size] Initial size along the dock's axis. A number is pixels.
+ * @property {number} [min=0] Smallest the pane may be dragged to, in pixels. Never smaller than
+ *   its own header.
+ * @property {boolean} [grow=false] Whether this pane absorbs leftover space. At most one pane
+ *   does; with `content` present the content absorbs it instead.
+ * @property {boolean} [collapsed=false] Whether the pane starts collapsed to its header.
+ * @property {boolean} [collapsible=true] Whether the pane may be collapsed at all.
+ * @property {'start'|'end'} [side='start'] Which side of `content` the pane sits on. Ignored when
+ *   the dock has no `content`.
+ */
+/**
+ * @typedef {Object} DockState
+ * @property {Record<string, number>} sizes Pane sizes in pixels, by pane name.
+ * @property {string[]} collapsed Names of collapsed panes.
+ * @property {Record<string, string>} active Active tab name, by pane name.
+ */
+/**
+ * @typedef {Object} DockOptions
+ * @property {'vertical'|'horizontal'} [orientation='vertical'] Axis the panes stack along.
+ *   `vertical` stacks them top to bottom behind horizontal dividers.
+ * @property {DockContent} [content=null] Optional flexible middle. With it the dock is a region
+ *   and panes sit on either `side` of it; without it the panes fill the dock.
+ * @property {DockPane[]} [panes=[]] Panes, in order.
+ * @property {boolean} [resizable=true] Whether dividers may be dragged.
+ * @property {boolean} [collapsible=true] Default for `pane.collapsible`.
+ * @property {boolean} [lazy=true] Whether content factories run on first reveal rather than up
+ *   front.
+ * @property {string|null} [storageKey=null] Key under which sizes, collapsed panes, and active
+ *   tabs are remembered. Storage failures degrade to memory rather than throwing.
+ * @property {string} [label='Resize panes'] Accessible name given to every divider.
+ * @property {(event: CustomEvent<{name: string}>) => void} [oncollapse] Collapse listener.
+ * @property {(event: CustomEvent<{name: string}>) => void} [onexpand] Expand listener.
+ * @property {(event: CustomEvent<{name: string, size: number}>) => void} [onresize] Resize listener.
+ * @property {(event: CustomEvent<{pane: string, tab: string, previous: string|null}>) => void} [ontabchange] Tab listener.
+ * @property {(event: CustomEvent<{name: string}>) => void} [onreveal] Reveal listener.
+ */
+/**
+ * A stack of collapsible, resizable panes — the docked inspector column of a design tool, and the
+ * detail side of an ERP master–detail screen.
+ *
+ * The sizing model is one custom property per pane and one flex rule: a sized pane is
+ * `flex: 0 0 var(--zx-pane-size)`, a collapsed one falls to `flex: 0 0 auto` with its body hidden,
+ * and exactly one pane (or the `content`, when there is one) grows to absorb the slack. That is
+ * what keeps a drag local — it rewrites two properties and nothing else moves — and what makes
+ * collapsing feed the grower rather than redistributing across every pane.
+ *
+ * A pane is either titled or a tab group. A tab group puts its strip where the title would go,
+ * which is the pattern every panel dock uses and the reason `tabs` is a key on a pane rather than
+ * a separate component nested inside one.
+ * @fires Dock#collapse
+ * @fires Dock#expand
+ * @fires Dock#resize
+ * @fires Dock#tabchange
+ * @fires Dock#reveal
+ * @extends {Component<DockOptions>}
+ */
+export declare class Dock extends Component<DockOptions> {
+    _store: ReturnType<typeof storage> | null;
+    _orientation: string;
+    _resizable: boolean;
+    _lazy: boolean;
+    _destroyed: boolean;
+    /** @type {Map<string, Record<string, any>>} */
+    _panes: Map<string, Record<string, any>>;
+    /** @type {Record<string, any>|null} */
+    _drag: Record<string, any> | null;
+    /**
+     * One controller per divider. Dividers are rebuilt on every relayout, so the old controllers
+     * have to come down with them or each relayout would leave a set behind.
+     * @type {ReturnType<typeof dragAxis>[]}
+     */
+    _dividerDrags: ReturnType<typeof dragAxis>[];
+    _createdRoot: boolean;
+    _snapshot: import("../../core/dom.js").TargetSnapshot;
+    _content: HTMLElement;
+    static cssName: string;
+    /** @type {Readonly<DockOptions>} */
+    static defaults: Readonly<DockOptions>;
+    /**
+     * Creates a dock, or turns an existing element into one.
+     * @param {Element|string|null} [target=null] Existing container, selector, or null.
+     * @param {DockOptions} [options={}] Dock options.
+     */
+    constructor(target?: Element | string | null, options?: DockOptions);
+    /**
+     * Builds the panes, dividers, and optional content region. Runs inside the base constructor,
+     * before any class field would exist, so all state is assigned here as plain properties.
+     * @returns {HTMLElement}
+     */
+    render(): HTMLElement;
+    /**
+     * Returns a pane's record.
+     * @param {string} name Pane name.
+     * @returns {Record<string, any>|null}
+     */
+    pane(name: string): Record<string, any> | null;
+    /**
+     * Lists pane names in visual order.
+     * @returns {string[]}
+     */
+    names(): string[];
+    /**
+     * Adds a pane.
+     * @param {DockPane} definition Pane definition.
+     * @param {{index?: number}} [options={}] Insertion index; omitted appends.
+     * @returns {Record<string, any>}
+     */
+    add(definition: DockPane, options?: {
+        index?: number;
+    }): Record<string, any>;
+    /**
+     * Removes a pane and its element.
+     * @param {string} name Pane name.
+     * @returns {this}
+     */
+    remove(name: string): this;
+    /**
+     * Collapses a pane to its header.
+     * @param {string} name Pane name.
+     * @returns {this}
+     * @fires Dock#collapse
+     */
+    collapse(name: string): this;
+    /**
+     * Expands a pane.
+     * @param {string} name Pane name.
+     * @returns {this}
+     * @fires Dock#expand
+     */
+    expand(name: string): this;
+    /**
+     * Toggles a pane's collapsed state.
+     * @param {string} name Pane name.
+     * @returns {this}
+     */
+    toggle(name: string): this;
+    /**
+     * Reports whether a pane is collapsed.
+     * @param {string} name Pane name.
+     * @returns {boolean}
+     */
+    isCollapsed(name: string): boolean;
+    /**
+     * Brings something into view by name — a pane, or a tab in one of them. Expands the pane,
+     * activates the tab where the name is a tab's, and scrolls the pane into view.
+     * @param {string} name Pane or tab name.
+     * @returns {this}
+     * @fires Dock#reveal
+     */
+    reveal(name: string): this;
+    /**
+     * Sets a pane's size along the dock's axis.
+     * @param {string} name Pane name.
+     * @param {number|string} size Pixels, or any CSS length.
+     * @returns {this}
+     */
+    setSize(name: string, size: number | string): this;
+    /**
+     * Returns a pane's current size in pixels.
+     * @param {string} name Pane name.
+     * @returns {number}
+     */
+    getSize(name: string): number;
+    /**
+     * Activates a tab inside a tab-group pane.
+     * @param {string} paneName Pane name.
+     * @param {string} tabName Tab name.
+     * @returns {this}
+     * @fires Dock#tabchange
+     */
+    activate(paneName: string, tabName: string): this;
+    /**
+     * Returns the active tab name of a tab-group pane.
+     * @param {string} paneName Pane name.
+     * @returns {string|null}
+     */
+    getActive(paneName: string): string | null;
+    /**
+     * Captures the layout as a serialisable object.
+     * @returns {DockState}
+     */
+    state(): DockState;
+    /**
+     * Restores a layout captured by `state()`. Unknown pane names are ignored, so a stored layout
+     * survives a release that added or removed panes.
+     * @param {DockState} state Layout state.
+     * @returns {this}
+     */
+    setState(state: DockState): this;
+    /**
+     * Removes created nodes and restores an enhanced target.
+     * @returns {void}
+     */
+    destroy(): void;
+    /**
+     * Builds one pane, titled or tabbed.
+     * @param {DockPane} definition Pane definition.
+     * @returns {Record<string, any>}
+     */
+    _buildPane(definition: DockPane): Record<string, any>;
+    /**
+     * Runs any not-yet-run content factory for whatever the pane currently shows.
+     * @param {Record<string, any>} record Pane record.
+     * @returns {void}
+     */
+    _materialize(record: Record<string, any>): void;
+    /**
+     * Re-inserts panes, dividers, and the content region in visual order.
+     * @returns {void}
+     */
+    _layout(): void;
+    /**
+     * Creates one divider with its separator semantics and drag wiring.
+     * @returns {HTMLElement}
+     */
+    _divider(): HTMLElement;
+    /**
+     * Whether a record currently occupies no usable space: a collapsed pane, or a closed sheet.
+     * A closed sheet differs from a collapsed pane in that it leaves nothing at all behind, not
+     * even a header — which is why the two cannot share one flag.
+     * @param {Record<string, any>} record Pane or sheet record.
+     * @returns {boolean}
+     */
+    _isHidden(record: Record<string, any>): boolean;
+    /**
+     * Hands a Sheet's positioning to this dock. The sheet becomes a track in the dock's flow: the
+     * dock owns its side, size, and resizing, while the sheet keeps its own content and lifecycle.
+     *
+     * Nothing about the sheet is rebuilt — adoption moves the element and reopens it in place, so
+     * listeners and DOM state survive the handoff.
+     * @param {Object} sheet Sheet to adopt.
+     * @param {{name?: string, side?: 'start'|'end', index?: number, size?: number|string,
+     *   min?: number, dockAt?: 'sm'|'md'|'lg'|'xl'|null}} [options={}] Placement options.
+     *   `dockAt` floats the sheet back to a free overlay below that breakpoint, measured on the
+     *   dock's own width.
+     * @returns {Record<string, any>}
+     */
+    adopt(sheet: any, options?: {
+        name?: string;
+        side?: 'start' | 'end';
+        index?: number;
+        size?: number | string;
+        min?: number;
+        dockAt?: 'sm' | 'md' | 'lg' | 'xl' | null;
+    }): Record<string, any>;
+    /**
+     * Hands a sheet back. It becomes a free overlay again, still open if it was open.
+     * @param {Object} sheet Sheet to release.
+     * @returns {this}
+     */
+    release(sheet: any): this;
+    /**
+     * Drops a sheet that destroyed itself while adopted, without re-hosting a dead element.
+     * @param {Object} sheet Sheet being destroyed.
+     * @returns {void}
+     */
+    _forget(sheet: any): void;
+    /**
+     * Docks or floats one adopted sheet, per its breakpoint.
+     * @param {Record<string, any>} record Sheet record.
+     * @param {boolean} docked Whether the dock is wide enough to hold it.
+     * @returns {void}
+     */
+    _applyDockAt(record: Record<string, any>, docked: boolean): void;
+    /**
+     * Picks which element absorbs leftover space. The content always wins where there is one;
+     * otherwise the declared `grow` pane, or the last expanded pane so the stack still fills.
+     * @returns {void}
+     */
+    _syncGrow(): void;
+    /**
+     * Refreshes every divider's live separator values and disables the ones with nothing to resize.
+     * @returns {void}
+     */
+    _syncDividers(): void;
+    /**
+     * Applies the collapsed flag to the DOM.
+     * @param {Record<string, any>} record Pane record.
+     * @returns {void}
+     */
+    _syncPaneState(record: Record<string, any>): void;
+    /** @returns {HTMLElement[]} */
+    _dividers(): HTMLElement[];
+    /**
+     * @param {HTMLElement} divider
+     * @returns {{before: Record<string, any>|null, after: Record<string, any>|null}}
+     */
+    _neighbours(divider: HTMLElement): {
+        before: Record<string, any> | null;
+        after: Record<string, any> | null;
+    };
+    /**
+     * Decides which pane a divider actually resizes. A pane that grows or is collapsed is not a
+     * candidate, and neither is the content region — dragging beside those resizes the other side.
+     * @param {Record<string, any>|null} before
+     * @param {Record<string, any>|null} after
+     * @returns {{element: HTMLElement, record: Record<string, any>, sign: number, opposite: Record<string, any>|null}|null}
+     */
+    _resizeSubject(before: Record<string, any> | null, after: Record<string, any> | null): {
+        element: HTMLElement;
+        record: Record<string, any>;
+        sign: number;
+        opposite: Record<string, any> | null;
+    } | null;
+    /** @param {Record<string, any>} subject @returns {number} */
+    _minSize(subject: Record<string, any>): number;
+    /** @param {Element} element @returns {number} */
+    _axisSize(element: Element): number;
+    /**
+     * Applies a pointer delta to the pane the divider resizes, and to its neighbour where the pair
+     * shares a fixed budget.
+     * @param {number} delta Pixels travelled along the axis since the drag began.
+     * @returns {void}
+     */
+    _trackDelta(delta: number): void;
+    /**
+     * Moves a divider by a keyboard step.
+     * @param {HTMLElement} divider Divider being driven.
+     * @param {number} amount Signed pixels.
+     * @returns {void}
+     */
+    _stepDivider(divider: HTMLElement, amount: number): void;
+    /** @returns {void} */
+    _persist(): void;
+}

package/dist/types/components/dropdown/dropdown.d.ts

@@ -11,7 +11,7 @@ export type DropdownOptions = {
     /**
      * Panel placement.
      */
-    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'bottom' | 'top';
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'bottom' | 'top' | 'right-start' | 'right-end' | 'left-start' | 'left-end' | 'right' | 'left';
     /**
      * Gap between anchor and panel in pixels.
      */
@@ -40,7 +40,7 @@ export type DropdownOptions = {
 /**
  * @typedef {Object} DropdownOptions
  * @property {Node|string|number|{toElement: () => Node|null}|null} [content=null] Panel content.
- * @property {'bottom-start'|'bottom-end'|'top-start'|'top-end'|'bottom'|'top'} [placement='bottom-start'] Panel placement.
+ * @property {'bottom-start'|'bottom-end'|'top-start'|'top-end'|'bottom'|'top'|'right-start'|'right-end'|'left-start'|'left-end'|'right'|'left'} [placement='bottom-start'] Panel placement.
  * @property {number} [offset=4] Gap between anchor and panel in pixels.
  * @property {boolean} [matchWidth=false] Whether the panel matches the anchor width.
  * @property {'click'|'manual'} [openOn='click'] Trigger behavior.

package/dist/types/components/field/field.d.ts

@@ -48,6 +48,18 @@ export type FieldOptions = {
      * Adapter used by the `custom` type.
      */
     adapter?: FieldAdapterFactory;
+    /**
+     * Value change listener.
+     */
+    onchange?: (event: CustomEvent<{
+        value: unknown;
+    }>) => void;
+    /**
+     * Validation failure listener.
+     */
+    oninvalid?: (event: CustomEvent<{
+        message: string;
+    }>) => void;
 };
 export type FieldAdapter = {
     /**
@@ -96,6 +108,8 @@ export type NumericCoercion = {
  * @property {'stack'|'inline'} [layout='stack'] Label/control layout.
  * @property {Record<string, unknown>} [props={}] Adapter-specific control properties.
  * @property {FieldAdapterFactory} [adapter] Adapter used by the `custom` type.
+ * @property {(event: CustomEvent<{value: unknown}>) => void} [onchange] Value change listener.
+ * @property {(event: CustomEvent<{message: string}>) => void} [oninvalid] Validation failure listener.
  */
 /**
  * @typedef {Object} FieldAdapter

package/dist/types/components/field-upload/field-upload.d.ts

@@ -76,6 +76,34 @@ export type FieldUploadOptions = {
      * Injected Http-compatible or stub upload transport.
      */
     http?: UploadTransport | null;
+    /**
+     * File selection listener.
+     */
+    onselect?: (event: CustomEvent<{
+        files: File[];
+    }>) => void;
+    /**
+     * Upload progress listener.
+     */
+    onprogress?: (event: CustomEvent<{
+        percent: number;
+    }>) => void;
+    /**
+     * Upload success listener.
+     */
+    onsuccess?: (event: CustomEvent<{
+        response: unknown;
+    }>) => void;
+    /**
+     * Upload failure listener.
+     */
+    onerror?: (event: CustomEvent<{
+        error: Error;
+    }>) => void;
+    /**
+     * Upload abort listener.
+     */
+    onabort?: (event: CustomEvent<Record<string, never>>) => void;
 };
 /**
  * @typedef {Object} UploadTransport
@@ -103,6 +131,11 @@ export type FieldUploadOptions = {
  * @property {boolean} [autoUpload=true] Upload immediately after selection.
  * @property {boolean} [preview=true] Show a preview for the first selected image.
  * @property {UploadTransport|null} [http=null] Injected Http-compatible or stub upload transport.
+ * @property {(event: CustomEvent<{files: File[]}>) => void} [onselect] File selection listener.
+ * @property {(event: CustomEvent<{percent: number}>) => void} [onprogress] Upload progress listener.
+ * @property {(event: CustomEvent<{response: unknown}>) => void} [onsuccess] Upload success listener.
+ * @property {(event: CustomEvent<{error: Error}>) => void} [onerror] Upload failure listener.
+ * @property {(event: CustomEvent<Record<string, never>>) => void} [onabort] Upload abort listener.
  */
 /**
  * Accessible click/drop upload area. Native requests intentionally use XMLHttpRequest because
@@ -189,22 +222,22 @@ export declare class FieldUpload extends Component<FieldUploadOptions> {
 /**
  * Files selected event.
  * @event FieldUpload#select
- * @type {CustomEvent<{files: File[]}>
+ * @type {CustomEvent<{files: File[]}>}
  */
 /**
  * Upload progress event.
  * @event FieldUpload#progress
- * @type {CustomEvent<{percent: number}>
+ * @type {CustomEvent<{percent: number}>}
  */
 /**
  * Upload success event.
  * @event FieldUpload#success
- * @type {CustomEvent<{response: unknown}>
+ * @type {CustomEvent<{response: unknown}>}
  */
 /**
  * Upload failure event.
  * @event FieldUpload#error
- * @type {CustomEvent<{error: Error}>
+ * @type {CustomEvent<{error: Error}>}
  */
 /**
  * Upload aborted event.

package/dist/types/components/form/form.d.ts

@@ -51,6 +51,25 @@ export type FormOptions = {
      * Native `novalidate` state.
      */
     novalidate?: boolean;
+    /**
+     * Submit listener.
+     */
+    onsubmit?: (event: CustomEvent<{
+        values: Record<string, unknown>;
+    }>) => void;
+    /**
+     * Invalid listener.
+     */
+    oninvalid?: (event: CustomEvent<{
+        errors: Record<string, string>;
+    }>) => void;
+    /**
+     * Field change listener.
+     */
+    onchange?: (event: CustomEvent<{
+        id: string;
+        value: unknown;
+    }>) => void;
 };
 /**
  * @typedef {Object} FormAction
@@ -69,6 +88,9 @@ export type FormOptions = {
  * @property {Array<Fieldset|import('../fieldset/fieldset.js').FieldsetOptions>} [fieldsets=[]] Initial fieldsets.
  * @property {FormAction[]} [actions=[]] Form action descriptors.
  * @property {boolean} [novalidate=true] Native `novalidate` state.
+ * @property {(event: CustomEvent<{values: Record<string, unknown>}>) => void} [onsubmit] Submit listener.
+ * @property {(event: CustomEvent<{errors: Record<string, string>}>) => void} [oninvalid] Invalid listener.
+ * @property {(event: CustomEvent<{id: string, value: unknown}>) => void} [onchange] Field change listener.
  */
 /**
  * Real form element coordinating fieldsets, validation, and actions.
@@ -180,15 +202,15 @@ export declare class Form extends Component<FormOptions> {
 /**
  * Successful form submission event.
  * @event Form#submit
- * @type {CustomEvent<{values: Record<string, unknown>}>
+ * @type {CustomEvent<{values: Record<string, unknown>}>}
  */
 /**
  * Form validation failure event.
  * @event Form#invalid
- * @type {CustomEvent<{errors: Record<string, string>}>
+ * @type {CustomEvent<{errors: Record<string, string>}>}
  */
 /**
  * Delegated field value change event.
  * @event Form#change
- * @type {CustomEvent<{id: string, value: unknown}>
+ * @type {CustomEvent<{id: string, value: unknown}>}
  */