@zeyos/zx 4.4.0 → 5.0.0

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

@@ -22,6 +22,12 @@ export type ChartSpec = {
      * Engine-specific options.
      */
     options: Record<string, unknown>;
+    /**
+     * Whether the chart must not animate: the operating system asks
+     * for reduced motion, or the host sits inside a `data-zx-motion="reduced"` region. An adapter turns
+     * its engine's own animation off when this is true; `ChartJsAdapter` sets `animation: false`.
+     */
+    reducedMotion: boolean;
     /**
      * Point-selection callback.
      */
@@ -155,6 +161,9 @@ export type ChartOptions = {
  * @property {string} type Chart type.
  * @property {ChartData} data Chart data.
  * @property {Record<string, unknown>} options Engine-specific options.
+ * @property {boolean} reducedMotion Whether the chart must not animate: the operating system asks
+ *   for reduced motion, or the host sits inside a `data-zx-motion="reduced"` region. An adapter turns
+ *   its engine's own animation off when this is true; `ChartJsAdapter` sets `animation: false`.
  * @property {(detail: ChartSelectDetail) => void} onSelect Point-selection callback.
  */
 /**
@@ -223,6 +232,7 @@ export declare class Chart extends Component<ChartOptions> {
     _handle: ChartHandle;
     _destroyed: boolean;
     _observer: ResizeObserver;
+    _stopWatchingMotion: () => void;
     static cssName: string;
     /** @type {Readonly<ChartOptions>} */
     static defaults: Readonly<ChartOptions>;

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

@@ -29,6 +29,12 @@ export type ChecklistOptions = {
      * Fallback initial checked state.
      */
     defaultChecked?: boolean;
+    /**
+     * Whether the heading is left out. The group keeps the
+     * heading text as its accessible name (`aria-label`); a Field labelling the checklist names it
+     * instead, which is why the `checklist` field type sets this.
+     */
+    hideLabel?: boolean;
     /**
      * Async item loader.
      */
@@ -62,6 +68,9 @@ export type ChecklistLoadedDetail = {
  * @property {boolean} [search=true] Whether the search field is shown.
  * @property {number} [height=280] Maximum list height in pixels.
  * @property {boolean} [defaultChecked=false] Fallback initial checked state.
+ * @property {boolean} [hideLabel=false] Whether the heading is left out. The group keeps the
+ *   heading text as its accessible name (`aria-label`); a Field labelling the checklist names it
+ *   instead, which is why the `checklist` field type sets this.
  * @property {(() => Promise<ChecklistItem[]>|ChecklistItem[])|null} [load=null] Async item loader.
  * @property {Record<string, string>|Record<string, Record<string, string>>} [msg] Localized messages.
  * @property {(event: CustomEvent<ChecklistChangeDetail>) => void} [onchange] Change listener.

package/dist/types/components/code-editor/code-editor.d.ts

@@ -61,27 +61,14 @@ export type CodeEditorOptions = {
         value: string;
     }>) => void;
 };
-/**
- * @typedef {Object} CodeEditorOptions
- * @property {unknown} [value=''] Initial text.
- * @property {string} [name=''] Form field name.
- * @property {string} [language='text'] Language identifier shown to the user and exposed as data.
- * @property {string} [label='Code editor'] Accessible editor label.
- * @property {string} [placeholder=''] Placeholder text.
- * @property {number} [rows=12] Visible textarea rows.
- * @property {string} [indent='\t'] Text inserted by Tab and removed by Shift+Tab.
- * @property {'off'|'soft'|'hard'} [wrap='off'] Textarea wrapping behavior.
- * @property {boolean} [spellcheck=false] Whether browser spellcheck is enabled.
- * @property {boolean} [readOnly=false] Whether content can be selected but not changed.
- * @property {boolean} [disabled=false] Whether the editor is disabled.
- * @property {boolean} [status=true] Whether the line/column status is visible.
- * @property {(event: CustomEvent<{value:string}>) => void} [oninput] Input listener.
- * @property {(event: CustomEvent<{value:string}>) => void} [onchange] Change listener.
- */
 /**
  * Dependency-free source editor for structured text, Markdown, JSON and code. It deliberately uses
  * a native textarea: values remain text-safe, browser undo and IME behavior stay intact, and Tab /
  * Shift+Tab provide predictable indentation without a third-party editor runtime.
+ *
+ * Capturing Tab is what a code surface has to do, and it would be a keyboard trap if nothing undid
+ * it: Escape releases the capture until the next keystroke in the editor, so Escape then Tab (or
+ * Shift+Tab) moves focus out of the editor as it would leave any other field.
  * @fires CodeEditor#input
  * @fires CodeEditor#change
  * @extends {Component<CodeEditorOptions>}
@@ -95,6 +82,8 @@ export declare class CodeEditor extends Component<CodeEditorOptions> {
     _position: HTMLElement;
     _header: HTMLElement;
     _input: HTMLTextAreaElement;
+    /** Set by Escape: the next Tab moves focus instead of indenting. */
+    _tabReleased: boolean;
     static cssName: string;
     /** @type {CodeEditorOptions} */
     static defaults: CodeEditorOptions;

package/dist/types/components/datebox/date-range-box.d.ts

@@ -29,7 +29,8 @@ export type DateRangeBoxOptions = {
      */
     placeholder?: string | null;
     /**
-     * Show a clear button while a range is present.
+     * Show a clear button while a range is present and the box is
+     * enabled; without it the input keeps no room for one.
      */
     clearable?: boolean;
     /**
@@ -119,6 +120,7 @@ export declare function formatRangeText(range: DateRange | null, format: string,
 export declare class DateRangeBox extends Component<DateRangeBoxOptions> {
     _originalState: string;
     _originalAriaDisabled: string;
+    _originalClearable: string;
     _format: string;
     _separator: string;
     _disabled: boolean;
@@ -209,6 +211,8 @@ export declare class DateRangeBox extends Component<DateRangeBoxOptions> {
     _placeholder(): string;
     /** @returns {void} */
     _syncDisplay(): void;
+    /** A disabled box offers no clear button: there is nothing it could do. @returns {void} */
+    _syncClear(): void;
     /** @returns {void} */
     _syncDisabled(): void;
     /** @returns {void} */

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

@@ -26,7 +26,8 @@ export type DateboxOptions = {
      */
     placeholder?: string | null;
     /**
-     * Show a clear button when a value is present.
+     * Show a clear button while a value is present and the box is
+     * enabled; without it the input keeps no room for one.
      */
     clearable?: boolean;
     /**
@@ -66,7 +67,8 @@ export type DateboxUnit = 'date' | 'seconds';
  * @property {Date|null} [min=null] Earliest selectable date.
  * @property {Date|null} [max=null] Latest selectable date.
  * @property {string|null} [placeholder=null] Input placeholder; null derives one from the format.
- * @property {boolean} [clearable=true] Show a clear button when a value is present.
+ * @property {boolean} [clearable=true] Show a clear button while a value is present and the box is
+ *   enabled; without it the input keeps no room for one.
  * @property {boolean} [disabled=false] Disable all controls.
  * @property {(event: CustomEvent<{date: Date|null}>) => void} [onchange] Change listener.
  * @property {(event: CustomEvent<{text: string}>) => void} [oninvalid] Invalid-input listener.
@@ -86,6 +88,7 @@ export type DateboxUnit = 'date' | 'seconds';
 export declare class Datebox extends Component<DateboxOptions> {
     _originalState: string;
     _originalAriaDisabled: string;
+    _originalClearable: string;
     _format: string;
     _disabled: boolean;
     _open: boolean;
@@ -142,6 +145,8 @@ export declare class Datebox extends Component<DateboxOptions> {
     _normalizeValue(value: Date | number | string | null | unknown): Date | null;
     /** @returns {void} */
     _syncDisplay(): void;
+    /** A disabled box offers no clear button: there is nothing it could do. @returns {void} */
+    _syncClear(): void;
     /** @returns {void} */
     _syncDisabled(): void;
     /** @returns {void} */

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

@@ -50,7 +50,7 @@ export type DialogOptions = {
         toElement: () => Node | null;
     } | null;
     /**
-     * Element whose nearest Zx theme scope owns the overlay; defaults to the opener.
+     * Element whose nearest Zx theme scope owns the overlay; defaults to the opener. Resolved on every open, so a scope connected after construction still owns it.
      */
     scope?: Element | string | null;
     /**
@@ -137,6 +137,14 @@ export type ConfirmOptions = {
      * Whether the confirmation action is dangerous.
      */
     danger?: boolean;
+    /**
+     * Text the reader must type before the confirm button
+     * enables — the name of what is about to be deleted, say. The dialog adds an input labelled
+     * "Type <confirmText> to confirm" (message `dialog.typeToConfirm`, `%1` standing for the text),
+     * focuses it, and enables the confirm button, and Enter, only while its value matches exactly,
+     * ignoring surrounding spaces.
+     */
+    confirmText?: string | null;
 };
 export type PromptOptions = {
     /**
@@ -155,6 +163,14 @@ export type PromptOptions = {
      * Input placeholder.
      */
     placeholder?: string;
+    /**
+     * Confirmation label.
+     */
+    okLabel?: string;
+    /**
+     * Cancellation label.
+     */
+    cancelLabel?: string;
 };
 /** @typedef {'default'|'primary'|'danger'|'ghost'} DialogButtonKind */
 /**
@@ -173,7 +189,7 @@ export type PromptOptions = {
  * @property {DialogButton[]} [buttons=[]] Footer buttons.
  * @property {boolean} [closable=true] Whether Escape and the header button may close the dialog.
  * @property {Node|string|number|{toElement: () => Node|null}|null} [content=null] Body content.
- * @property {Element|string|null} [scope=null] Element whose nearest Zx theme scope owns the overlay; defaults to the opener.
+ * @property {Element|string|null} [scope=null] Element whose nearest Zx theme scope owns the overlay; defaults to the opener. Resolved on every open, so a scope connected after construction still owns it.
  * @property {(event: CustomEvent<Record<string, never>>) => void} [onopen] Open event listener.
  * @property {(event: CustomEvent<{result: unknown}>) => void} [onclose] Close event listener.
  * @property {(event: CustomEvent<Record<string, never>>) => void} [oncancel] Cancel event listener.
@@ -204,6 +220,11 @@ export type PromptOptions = {
  * @property {string} [okLabel='OK'] Confirmation label.
  * @property {string} [cancelLabel='Cancel'] Cancellation label.
  * @property {boolean} [danger=false] Whether the confirmation action is dangerous.
+ * @property {string|null} [confirmText=null] Text the reader must type before the confirm button
+ *   enables — the name of what is about to be deleted, say. The dialog adds an input labelled
+ *   "Type <confirmText> to confirm" (message `dialog.typeToConfirm`, `%1` standing for the text),
+ *   focuses it, and enables the confirm button, and Enter, only while its value matches exactly,
+ *   ignoring surrounding spaces.
  */
 /**
  * @typedef {Object} PromptOptions
@@ -211,6 +232,8 @@ export type PromptOptions = {
  * @property {Node|string|number|null} [message=''] Prompt message.
  * @property {string} [value=''] Initial input value.
  * @property {string} [placeholder=''] Input placeholder.
+ * @property {string} [okLabel='OK'] Confirmation label.
+ * @property {string} [cancelLabel='Cancel'] Cancellation label.
  */
 /**
  * Structured modal with a title, body, footer actions, and switchable views.
@@ -285,17 +308,18 @@ export declare class Dialog extends Modal {
      */
     static alert({ title, message, okLabel }?: AlertOptions): Promise<void>;
     /**
-     * Opens a confirmation dialog.
+     * Opens a confirmation dialog. With `confirmText` it becomes a type-to-confirm dialog: the
+     * confirm button stays disabled until the reader has typed that text.
      * @param {ConfirmOptions} [options={}] Confirmation options.
-     * @returns {Promise<boolean>}
+     * @returns {Promise<boolean>} True when confirmed; false on Cancel, Escape, or the close button.
      */
-    static confirm({ title, message, okLabel, cancelLabel, danger }?: ConfirmOptions): Promise<boolean>;
+    static confirm({ title, message, okLabel, cancelLabel, danger, confirmText }?: ConfirmOptions): Promise<boolean>;
     /**
      * Opens a single-line text prompt.
      * @param {PromptOptions} [options={}] Prompt options.
      * @returns {Promise<string|null>}
      */
-    static prompt({ title, message, value, placeholder }?: PromptOptions): Promise<string | null>;
+    static prompt({ title, message, value, placeholder, okLabel, cancelLabel }?: PromptOptions): Promise<string | null>;
     /**
      * Applies the dialog width. Subclasses that size themselves on a different axis override this.
      *
@@ -313,6 +337,22 @@ export declare class Dialog extends Modal {
      */
     _message(key: string, fallback: string): string;
 }
+/**
+ * Reports whether what the reader typed confirms a type-to-confirm dialog: the same text, exactly
+ * — case and inner spacing included — once surrounding spaces are ignored on both sides.
+ * @param {unknown} typed Input value.
+ * @param {unknown} expected Text the dialog asks for.
+ * @returns {boolean}
+ */
+export declare function typedConfirmation(typed: unknown, expected: unknown): boolean;
+/**
+ * Splits the type-to-confirm message around `%1`, where the text to type goes. A translation that
+ * leaves `%1` out gets the text after it, following a space; a second `%1` is filled in as text.
+ * @param {string} template Message such as "Type %1 to confirm".
+ * @param {string} expected Text to type.
+ * @returns {[string, string]} The text before and after the text to type.
+ */
+export declare function typeToConfirmParts(template: string, expected: string): [string, string];
 /**
  * Copies footer-button descriptors without mutating the caller's array or objects, and settles
  * the two booleans the footer renders from.

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

@@ -29,7 +29,7 @@ export type DropdownOptions = {
      */
     closeOnSelect?: boolean;
     /**
-     * Element whose nearest Zx theme scope owns the panel; defaults to the anchor.
+     * Element whose nearest Zx theme scope owns the panel; defaults to the anchor. Resolved on every open, so an anchor connected after construction still gets its scope.
      */
     scope?: Element | string | null;
     /**
@@ -49,7 +49,7 @@ export type DropdownOptions = {
  * @property {boolean} [matchWidth=false] Whether the panel matches the anchor width.
  * @property {'click'|'manual'} [openOn='click'] Trigger behavior.
  * @property {boolean} [closeOnSelect=false] Whether a click within the panel closes it.
- * @property {Element|string|null} [scope=null] Element whose nearest Zx theme scope owns the panel; defaults to the anchor.
+ * @property {Element|string|null} [scope=null] Element whose nearest Zx theme scope owns the panel; defaults to the anchor. Resolved on every open, so an anchor connected after construction still gets its scope.
  * @property {(event: CustomEvent<Record<string, never>>) => void} [onopen] Open event listener.
  * @property {(event: CustomEvent<Record<string, never>>) => void} [onclose] Close event listener.
  */

package/dist/types/components/entity-ref/entity-ref.d.ts

@@ -115,7 +115,7 @@ export type EntityRefOptions = {
      */
     actions?: EntityRefActionEntry[];
     /**
-     * Density-independent identity size.
+     * Size of the icon and the identity text.
      */
     size?: 'sm' | 'md' | 'lg';
     /**
@@ -230,7 +230,7 @@ export type EntityRefState = {
  * @property {EntityRefMetadata[]} [metadata=[]] Labelled dense metadata.
  * @property {EntityRefLinkValue} [link=null] Optional native primary link.
  * @property {EntityRefActionEntry[]} [actions=[]] Secondary controls; element actions keep their own behavior.
- * @property {'sm'|'md'|'lg'} [size='md'] Density-independent identity size.
+ * @property {'sm'|'md'|'lg'} [size='md'] Size of the icon and the identity text.
  * @property {boolean} [wrap=false] Whether long identity text may wrap instead of truncating.
  * @property {string} [actionsLabel='Entity actions'] Accessible name for secondary actions.
  * @property {(event: CustomEvent<{id: unknown, entity: Readonly<EntityRefState>, href: string, event: MouseEvent}>) => void} [onactivate]

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

@@ -1,9 +1,15 @@
 import { Component } from '../../core/component.js';
 export type FieldOptions = {
     /**
-     * Control ID and logical field identifier.
+     * DOM id of the control. Generated when omitted; a Fieldset
+     * derives it from its `idPrefix` and the field key, so a key never becomes a DOM id by itself.
      */
     id?: string | null;
+    /**
+     * Field name: the `name` of a native control and the key the
+     * field is filed under. A Fieldset sets it to the field key; a standalone field falls back to `id`.
+     */
+    name?: string | null;
     /**
      * Registered field type.
      */
@@ -88,6 +94,12 @@ export type FieldAdapter = {
      * Release adapter-owned resources.
      */
     destroy?: () => void;
+    /**
+     * The element the field's label, description, and validity
+     * belong to when it is not `el` — the text input inside a composite control. Left out, a
+     * wrapper that cannot be labelled hands them to the first unnamed form control inside it.
+     */
+    labelTarget?: Element;
 };
 export type FieldAdapterFactory = (field: Field, options: Readonly<FieldOptions>) => FieldAdapter;
 export type NumericCoercion = {
@@ -96,7 +108,10 @@ export type NumericCoercion = {
 };
 /**
  * @typedef {Object} FieldOptions
- * @property {string|null} [id=null] Control ID and logical field identifier.
+ * @property {string|null} [id=null] DOM id of the control. Generated when omitted; a Fieldset
+ *   derives it from its `idPrefix` and the field key, so a key never becomes a DOM id by itself.
+ * @property {string|null} [name=null] Field name: the `name` of a native control and the key the
+ *   field is filed under. A Fieldset sets it to the field key; a standalone field falls back to `id`.
  * @property {string} [type='text'] Registered field type.
  * @property {string} [label=''] Visible label.
  * @property {string} [description=''] Supporting description.
@@ -119,6 +134,9 @@ export type NumericCoercion = {
  * @property {() => void} focus Focus the control.
  * @property {(disabled: boolean) => void} setDisabled Set disabled state.
  * @property {() => void} [destroy] Release adapter-owned resources.
+ * @property {Element} [labelTarget] The element the field's label, description, and validity
+ *   belong to when it is not `el` — the text input inside a composite control. Left out, a
+ *   wrapper that cannot be labelled hands them to the first unnamed form control inside it.
  */
 /** @typedef {(field: Field, options: Readonly<FieldOptions>) => FieldAdapter} FieldAdapterFactory */
 /** @typedef {{valid: boolean, value: number|string}} NumericCoercion */
@@ -133,8 +151,12 @@ export declare class Field extends Component<FieldOptions> {
     _ownedComponents: Set<any>;
     _ownedNodes: any[];
     _rootAttributes: Map<string, string>;
+    /** @type {string} The control's DOM id: `options.id`, or a generated one. */
     controlId: string;
+    /** @type {string} The field name (`options.name`, else `options.id`), '' when there is none. */
+    name: string;
     adapter: FieldAdapter;
+    _labelled: Element;
     _baseDescribedBy: string;
     _descriptionId: string;
     _highlightId: string;

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

@@ -13,6 +13,12 @@ export type FieldsetOptions = {
      * Initial fields.
      */
     fields?: Record<string, FieldOptions | Field | Element | Component>;
+    /**
+     * Prefix of the DOM ids generated for the fields, as
+     * `<idPrefix>-<key>`. Null generates one per instance, so the same fieldset mounted twice
+     * never repeats an id and a field key never collides with an element id elsewhere on the page.
+     */
+    idPrefix?: string | null;
 };
 export type FieldOptions = import('../field/field.js').FieldOptions;
 /**
@@ -20,6 +26,9 @@ export type FieldOptions = import('../field/field.js').FieldOptions;
  * @property {string} [title=''] Legend text.
  * @property {1|2|3} [columns=1] Grid column count.
  * @property {Record<string, FieldOptions|Field|Element|Component>} [fields={}] Initial fields.
+ * @property {string|null} [idPrefix=null] Prefix of the DOM ids generated for the fields, as
+ *   `<idPrefix>-<key>`. Null generates one per instance, so the same fieldset mounted twice
+ *   never repeats an id and a field key never collides with an element id elsewhere on the page.
  */
 /** @typedef {import('../field/field.js').FieldOptions} FieldOptions */
 /**
@@ -32,6 +41,7 @@ export declare class Fieldset extends Component<FieldsetOptions> {
     _origins: Map<any, any>;
     _fieldIdAttributes: Map<any, any>;
     _ownedNodes: any[];
+    _idPrefix: string;
     _columnAttribute: string;
     _grid: HTMLElement;
     static cssName: string;
@@ -40,7 +50,9 @@ export declare class Fieldset extends Component<FieldsetOptions> {
     /** @returns {HTMLElement} */
     render(): HTMLElement;
     /**
-     * Adds a field from options, an existing field, an element, or a component.
+     * Adds a field from options, an existing field, an element, or a component. The key becomes the
+     * field's `name` and its `data-field-id`; the control's DOM id is `<idPrefix>-<key>`, unless the
+     * field options give an `id` of their own that differs from the key.
      * @param {string} id Logical field identifier.
      * @param {FieldOptions|Field|Element|Component} field Field source.
      * @returns {Field}
@@ -118,6 +130,12 @@ export declare class Fieldset extends Component<FieldsetOptions> {
      * @returns {this}
      */
     clearHighlights(): this;
+    /**
+     * The DOM id generated for a field key: unique per instance unless `idPrefix` was given.
+     * @param {string} key Field key.
+     * @returns {string}
+     */
+    _controlId(key: string): string;
     /** @param {Field} field @returns {void} */
     _releaseField(field: Field): void;
     /** @returns {void} */

package/dist/types/components/file-item/file-item.d.ts

@@ -20,15 +20,22 @@ export type FileItemOptions = {
      */
     size?: number | string | null;
     /**
-     * MIME type.
+     * MIME type. Shown as a readable type ("PDF", "Image"), never as
+     * the raw string, and used to pick the icon.
      */
     mime?: string;
+    /**
+     * Type shown beside the size; null derives it from the
+     * MIME type (or the name's extension when the MIME type is unfamiliar), an empty string hides it.
+     */
+    typeLabel?: string | null;
     /**
      * Optional supporting text before generated metadata.
      */
     subtitle?: EntityRefContent;
     /**
-     * File icon name, node, component, or lazy renderer.
+     * File icon name, node, component, or lazy renderer. The
+     * generic `'file'` glyph gives way to one for the MIME type when the active icon set has it.
      */
     icon?: EntityRefIcon;
     /**
@@ -60,9 +67,9 @@ export type FileItemOptions = {
      */
     indeterminate?: boolean;
     /**
-     * File-identity presentation size.
+     * Size of the file's icon and name.
      */
-    density?: 'sm' | 'md' | 'lg';
+    identitySize?: 'sm' | 'md' | 'lg';
     /**
      * Whether long identity text may wrap.
      */
@@ -112,6 +119,10 @@ export type FileItemState = {
      * MIME type.
      */
     mime: string;
+    /**
+     * Explicit type label, or null for the one derived from `mime`.
+     */
+    typeLabel: string | null;
     /**
      * Supporting content.
      */
@@ -149,9 +160,9 @@ export type FileItemState = {
      */
     indeterminate: boolean;
     /**
-     * Identity size.
+     * Size of the file's icon and name.
      */
-    density: 'sm' | 'md' | 'lg';
+    identitySize: 'sm' | 'md' | 'lg';
     /**
      * Wrapping state.
      */
@@ -230,5 +241,22 @@ export declare class FileItem extends Component<FileItemOptions> {
  * @returns {FileItemState}
  */
 export declare function normalizeFileItem(values?: Partial<FileItemOptions> | null | undefined): FileItemState;
+/**
+ * A readable name for a file's type: "PDF", "CSV", "Image", "Spreadsheet". An unfamiliar MIME type
+ * falls back to the name's extension in capitals ("EXE"); without a MIME type, or with neither,
+ * the result is empty — a raw MIME string is never shown.
+ * @param {string} mime MIME type, possibly with parameters (`text/csv; charset=utf-8`).
+ * @param {string} [name=''] File name, consulted only when the MIME type is unfamiliar.
+ * @returns {string}
+ */
+export declare function fileTypeLabel(mime: string, name?: string): string;
+/**
+ * The icon name for a MIME type: a type-specific glyph when the active icon set can draw one,
+ * `'file'` otherwise. Font Awesome resolves every name it is given; the bundled inline set only
+ * those it carries or that `registerIcons()` added, so a missing glyph never shows a placeholder.
+ * @param {string} mime MIME type, possibly with parameters.
+ * @returns {string}
+ */
+export declare function fileTypeIcon(mime: string): string;
 /** Fired before a native file link continues. @event FileItem#activate @type {CustomEvent<{id: unknown, file: Readonly<FileItemState>, href: string, event: MouseEvent}>} */
 /** Fired before a descriptor action callback runs. @event FileItem#action @type {CustomEvent<{id: string, fileId: unknown, action: object, file: Readonly<FileItemState>, event: MouseEvent}>} */

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

@@ -51,6 +51,12 @@ export type FormOptions = {
      * Native `novalidate` state.
      */
     novalidate?: boolean;
+    /**
+     * Prefix of the DOM ids generated for the fields of the
+     * fieldsets this form builds, as `<idPrefix>-<key>`. Null generates one per form instance, so a
+     * form mounted twice never repeats an id. A fieldset's own `idPrefix` wins.
+     */
+    idPrefix?: string | null;
     /**
      * Submit listener.
      */
@@ -88,6 +94,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 {string|null} [idPrefix=null] Prefix of the DOM ids generated for the fields of the
+ *   fieldsets this form builds, as `<idPrefix>-<key>`. Null generates one per form instance, so a
+ *   form mounted twice never repeats an id. A fieldset's own `idPrefix` wins.
  * @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.
@@ -104,6 +113,7 @@ export declare class Form extends Component<FormOptions> {
     _ownedFieldsets: Set<any>;
     _origins: Map<any, any>;
     _ownedNodes: any[];
+    _idPrefix: string;
     _novalidateAttribute: string;
     _body: HTMLElement;
     _actions: HTMLElement;
@@ -126,7 +136,8 @@ export declare class Form extends Component<FormOptions> {
     /** @returns {HTMLElement} */
     render(): HTMLElement;
     /**
-     * Adds an existing fieldset or constructs one from options.
+     * Adds an existing fieldset or constructs one from options. A constructed fieldset generates its
+     * field ids from the form's `idPrefix` unless its options carry their own.
      * @param {Fieldset|import('../fieldset/fieldset.js').FieldsetOptions} fieldset Fieldset source.
      * @returns {Fieldset}
      */

package/dist/types/components/kanban-view/kanban-card.d.ts

@@ -52,6 +52,12 @@ export type KanbanAssignee = {
      * Fallback initials.
      */
     initials: string;
+    /**
+     * Fallback tint: a descriptor's own
+     * `tone` when it names one of `AVATAR_TONES`, otherwise `avatarTone(name)` — the colour the same
+     * person has in every Avatar.
+     */
+    tone: import('../avatar/avatar.js').AvatarTone;
 };
 /**
  * Normalizes one indicator value into the descriptor the badge is built from. A plain value
@@ -88,6 +94,8 @@ export declare function createKanbanProgress(progress: KanbanProgress, label: st
 /**
  * Normalizes one or more responsible people. Names, name lists, and descriptor objects all
  * resolve to the same shape, and an unsafe image URL degrades to initials rather than failing.
+ * A descriptor may name its `tone`; otherwise the tone is derived from the name exactly as Avatar
+ * derives it.
  * @param {unknown} value Raw field value.
  * @returns {KanbanAssignee[]} Normalized people, in the order supplied.
  */