optikos 0.1.0 → 0.2.0

package/dist/themes/dark.css

@@ -1,38 +1,53 @@
-/* Dark theme: only semantic colors and shadows change. Use data-op-theme="dark" on any element. */
+/* Dark: the same sober look at night. Steel blue on deep slate, quiet borders, a darker sidebar; shape and density come
+   from the base. Use data-op-theme="dark" on any element. */
 @layer optikos {
   [data-op-theme~='dark'] {
     color-scheme: dark; /* native controls follow */
-    --op-color-bg: var(--op-gray-900);
-    --op-color-surface: var(--op-gray-800);
-    --op-color-surface-2: #273449;
-    --op-color-fg: var(--op-gray-100);
-    --op-color-fg-muted: var(--op-gray-400);
-    --op-color-border: var(--op-gray-700);
-    --op-color-border-strong: var(--op-gray-600);
-    --op-color-hover: #2b3a52;
-    --op-color-selected: #1e3a8a;
-    --op-color-primary: var(--op-blue-500);
-    --op-color-primary-hover: #60a5fa;
-    --op-color-primary-fg: var(--op-gray-900);
-    --op-color-primary-soft: #172554;
-    --op-color-danger: #f87171;
-    --op-color-danger-hover: #fca5a5;
-    --op-color-danger-fg: var(--op-gray-900);
-    --op-color-danger-soft: #450a0a;
-    --op-color-success: #4ade80;
-    --op-color-success-soft: #052e16;
-    --op-color-warning: #fbbf24;
-    --op-color-warning-soft: #422006;
-    --op-color-info: #60a5fa;
-    --op-color-info-soft: #172554;
-    --op-color-focus: #60a5fa;
-    --op-color-disabled-fg: var(--op-gray-500);
-    --op-color-disabled-bg: #1b2538;
-    --op-color-overlay: rgb(0 0 0 / 0.65);
-    --op-color-inverse-bg: var(--op-gray-100);
-    --op-color-inverse-fg: var(--op-gray-900);
-    --op-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
-    --op-shadow: 0 4px 12px rgb(0 0 0 / 0.5);
+    --op-color-bg: #0f141c;
+    --op-color-surface: #161d28;
+    --op-color-surface-2: #1c2532;
+    --op-color-fg: #e2e8f0;
+    --op-color-fg-muted: #9ba7b8;
+    --op-color-border: #2a3444;
+    --op-color-border-strong: #435064;
+    --op-color-hover: #212d3e;
+    --op-color-selected: #1d3557;
+    --op-color-primary: #6ea8ec; /* primary text keeps 4.5:1 on the dark surfaces */
+    --op-color-primary-hover: #93bff2;
+    --op-color-primary-fg: #0b1524;
+    --op-color-primary-soft: #172a45;
+    --op-color-danger: #f28b82;
+    --op-color-danger-hover: #f6aaa3;
+    --op-color-danger-fg: #1f0b09;
+    --op-color-danger-soft: #3b1715;
+    --op-color-success: #5cc493;
+    --op-color-success-soft: #10301f;
+    --op-color-warning: #e9b44c;
+    --op-color-warning-soft: #36270c;
+    --op-color-info: #6ea8ec;
+    --op-color-info-soft: #172a45;
+    --op-color-focus: #6ea8ec;
+    --op-color-disabled-fg: #647186;
+    --op-color-disabled-bg: #1a222e;
+    --op-color-overlay: rgb(0 0 0 / 0.62);
+    --op-color-inverse-bg: #e2e8f0;
+    --op-color-inverse-fg: #0f141c;
+    --op-shadow-sm: none;
+    --op-shadow: 0 2px 8px rgb(0 0 0 / 0.45);
     --op-shadow-lg: 0 12px 32px rgb(0 0 0 / 0.6);
+
+    --op-navmenu-item-height: 2.5rem;
+    --op-navmenu-bg: #0b1018;
+    --op-navmenu-fg: #c6d0de;
+    --op-navmenu-group-fg: #7f8ea6;
+    --op-navmenu-item-hover-bg: #172131;
+    --op-navmenu-active-bg: #1b3050;
+    --op-navmenu-active-fg: #ffffff;
+    --op-navmenu-active-bar: #6ea8ec;
+    --op-navmenu-badge-bg: #6ea8ec;
+    --op-navmenu-badge-fg: #0b1524;
+    --op-grid-header-bg: #1a2230;
+    --op-grid-header-fg: #d3dbe6;
+    --op-field-label-weight: 600;
   }
 }

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

@@ -0,0 +1 @@
+export * from '../components/base/badge/badge.js';

package/dist/types/components/base/badge/badge.d.ts

@@ -0,0 +1,18 @@
+import { Component, type ComponentConfig } from '../../../core/component.js';
+export type Tone = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+export interface BadgeConfig extends ComponentConfig {
+    text?: string | number;
+    tone?: Tone;
+    icon?: string;
+    /** A small colored dot before the text (a status light). */
+    dot?: boolean;
+}
+/** A small status label or count: "Paid", "3 new", "Beta". Not interactive (see Chip for that). */
+export declare class Badge extends Component<BadgeConfig> {
+    protected baseCls: string;
+    protected tag: 'span';
+    private textEl;
+    protected onRender(): void;
+    setText(text: string | number): void;
+    setTone(tone: Tone): void;
+}

package/dist/types/components/base/chip/chip.d.ts

@@ -0,0 +1,27 @@
+import { Component, type ComponentConfig } from '../../../core/component.js';
+export interface ChipConfig extends ComponentConfig {
+    text?: string;
+    icon?: string;
+    /** Click toggles it on and off (a filter, a tag being picked): a toggle button with `aria-pressed`. */
+    selectable?: boolean;
+    selected?: boolean;
+    /** Shows a × button that fires `remove` (the app removes the chip). */
+    removable?: boolean;
+    disabled?: boolean;
+    handler?: (chip: Chip) => void;
+}
+/** A compact token: a filter to toggle, a tag to remove, a choice to click. */
+export declare class Chip extends Component<ChipConfig> {
+    protected baseCls: string;
+    protected tag: 'span';
+    private main;
+    private textEl;
+    private removeBtn?;
+    protected onRender(): void;
+    setText(text: string): void;
+    /** Selected state (only meaningful with `selectable`); `notify` fires `change`. */
+    setSelected(on: boolean, notify?: boolean): void;
+    isSelected(): boolean;
+    setDisabled(disabled: boolean): void;
+    protected focusEl(): HTMLElement;
+}

package/dist/types/components/base/codeviewer/codeviewer.d.ts

@@ -0,0 +1,48 @@
+import { Component, type ComponentConfig } from '../../../core/component.js';
+export type CodeLanguage = 'ts' | 'js' | 'json' | 'css' | 'html' | 'sh' | 'text';
+export interface CodeViewerConfig extends ComponentConfig {
+    code?: string;
+    language?: CodeLanguage;
+    /** The bar text. Default: the language name. */
+    title?: string;
+    lineNumbers?: boolean;
+    startLine?: number;
+    /** Lines to mark: `[3, 4]` or `'3-5,8'` (numbers as shown, so they follow `startLine`). */
+    highlight?: number[] | string;
+    wrap?: boolean;
+    copyable?: boolean;
+    bar?: boolean;
+    maxHeight?: number | string;
+}
+type Tok = [kind: string, text: string];
+/** Splits code into tokens (kind '' = plain). Pure: no DOM. */
+export declare function tokenize(code: string, language?: CodeLanguage): Tok[];
+/** Read-only code: syntax colors, line numbers (CSS counters, never copied), marked lines and a copy button. */
+export declare class CodeViewer extends Component<CodeViewerConfig> {
+    protected baseCls: string;
+    private titleEl;
+    private bar;
+    private pre;
+    private codeEl;
+    private status;
+    private copyBtn;
+    protected build(): HTMLDivElement;
+    protected onRender(): void;
+    private get language();
+    private paintBar;
+    /** One line element per line, tokens split at line breaks so a comment or string can span lines. */
+    private paintCode;
+    getCode(): string;
+    /** Copies the code. Without a clipboard (an insecure page) it selects the code instead and resolves false. */
+    copy(): Promise<boolean>;
+    private update;
+    setCode(code: string): void;
+    setLanguage(language: CodeLanguage): void;
+    setTitle(title: string): void;
+    setLineNumbers(lineNumbers: boolean): void;
+    setStartLine(startLine: number): void;
+    setHighlight(highlight: CodeViewerConfig['highlight']): void;
+    setWrap(wrap: boolean): void;
+    setMaxHeight(maxHeight: CodeViewerConfig['maxHeight']): void;
+}
+export {};

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

@@ -0,0 +1 @@
+export * from '../components/data/cellediting/cellediting.js';

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

@@ -0,0 +1 @@
+export * from '../components/fields/checkboxgroup/checkboxgroup.js';

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

@@ -0,0 +1 @@
+export * from '../components/base/chip/chip.js';

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

@@ -0,0 +1 @@
+export * from '../components/base/codeviewer/codeviewer.js';

package/dist/types/components/data/cellediting/cellediting.d.ts

@@ -0,0 +1,10 @@
+import type { GridPlugin } from '../grid/grid.js';
+export interface CellEditingOptions {
+    /** What starts editing with the pointer: a double click (default) or a single click. F2 and Enter always do. */
+    trigger?: 'dblclick' | 'click';
+}
+/**
+ * Inline editing plugin. Events on the grid: `before-edit(record, field)` (cancelable), `edit(record, field, value, old)`
+ * after a valid value was written to the record (`record.set`, so it is marked modified), `edit-cancel(record, field)`.
+ */
+export declare function cellEditing(options?: CellEditingOptions): GridPlugin;

package/dist/types/components/data/filterbuilder/filterbuilder.d.ts

@@ -5,6 +5,8 @@ export interface FilterField {
     name: string;
     label?: string;
     type?: 'text' | 'number' | 'date' | 'select';
+    /** Fields with the same group sit together in the field pickers (as columns do in the Grid's column menu). */
+    group?: string;
     /** For `select`: the choices. */
     options?: Array<string | number | {
         value: string | number;
@@ -21,7 +23,7 @@ export interface FilterBuilderConfig extends ComponentConfig {
     live?: boolean;
     /**
      * What "Add filter" does: `'row'` (default) adds an empty row for the first field; `'pick'` first asks
-     * which field to filter by (a menu of the fields) and adds the row for it.
+     * which field to filter by (a menu of the fields, grouped by `group`, with a search field past 6 fields) and adds the row for it.
      */
     addMode?: 'row' | 'pick';
     /** Deepest group nesting allowed. Default 3. */

package/dist/types/components/data/grid/grid.d.ts

@@ -2,11 +2,11 @@ import { Component, type ComponentConfig } from '../../../core/component.js';
 import { Store } from '../../../data/store.js';
 import type { Model } from '../../../data/model.js';
 import { type Column } from '../../../data/column.js';
-export interface GridConfig extends ComponentConfig {
-    store?: Store<any>;
+export interface GridConfig<T extends Record<string, any> = any> extends ComponentConfig {
+    store?: Store<T>;
     /** Used when no `store` is given. */
-    data?: Record<string, any>[];
-    columns: Column[];
+    data?: Partial<T>[];
+    columns: Column<T>[];
     selection?: 'none' | 'single' | 'multi';
     /** Row height in px. Default: measured from the `--op-grid-row-height` / `--op-row-height` tokens. */
     rowHeight?: number;
@@ -20,9 +20,11 @@ export interface GridConfig extends ComponentConfig {
     /** Keep selected records when the page or the filters change. Default false. */
     keepSelection?: boolean;
     /** Buttons shown in a bar above the header while records are selected. */
-    bulkActions?: GridAction[];
+    bulkActions?: GridAction<T>[];
     /** Actions at the end of every row (see `rowActionsMode`). */
-    rowActions?: GridRowAction[];
+    rowActions?: GridRowAction<T>[];
+    /** Optional features (`cellEditing()`...). See `GridPlugin`. */
+    plugins?: GridPlugin<T>[];
     /** `'menu'` (default): one "⋯" button opens a menu. `'visible'`: every action is an icon button, always shown (dimmed until the row is hovered, active or selected). */
     rowActionsMode?: 'menu' | 'visible';
     /** A "Columns" button in the bar: toggle columns on and off, with search. */
@@ -34,19 +36,31 @@ export interface GridConfig extends ComponentConfig {
     /** Show the group labels (`Column.group`) as a band over the header. Default true when any column has a group. */
     groupHeaders?: boolean;
 }
-export interface GridAction {
+/** Extends a Grid without growing its base: `init` runs once the grid is rendered and may return a cleanup. */
+export interface GridPlugin<T extends Record<string, any> = any> {
+    init(grid: Grid<T>): void | (() => void);
+    destroy?(): void;
+}
+/** What `cellAt` finds under a DOM node: the row index, its record, the column and the cell element. */
+export interface GridCell<T extends Record<string, any> = any> {
+    index: number;
+    record: Model<T>;
+    column: Column<T>;
+    el: HTMLElement;
+}
+export interface GridAction<T extends Record<string, any> = any> {
     text: string;
     icon?: string;
     variant?: 'default' | 'danger';
-    handler: (records: Model[], grid: Grid) => void;
+    handler: (records: Model<T>[], grid: Grid<T>) => void;
 }
-export interface GridRowAction {
+export interface GridRowAction<T extends Record<string, any> = any> {
     text: string;
     icon?: string;
     variant?: 'default' | 'danger';
     /** Disabled for the records where this returns true. */
-    disabled?: (record: Model) => boolean;
-    handler: (record: Model, grid: Grid) => void;
+    disabled?: (record: Model<T>) => boolean;
+    handler: (record: Model<T>, grid: Grid<T>) => void;
 }
 export interface ColumnState {
     field: string;
@@ -54,7 +68,8 @@ export interface ColumnState {
     width?: number;
 }
 /** Data grid with a virtualized body: only the visible rows (plus a small overscan) exist in the DOM. */
-export declare class Grid extends Component<GridConfig> {
+/** `T` is the record shape; `new Grid({ store })` infers it from a typed `Store<T>`. */
+export declare class Grid<T extends Record<string, any> = any> extends Component<GridConfig<T>> {
     protected baseCls: string;
     private store;
     private offStore?;
@@ -62,6 +77,8 @@ export declare class Grid extends Component<GridConfig> {
     private headRow;
     private viewport;
     private emptyEl;
+    /** The focusable `role=grid` part (header + rows); the root also holds the bulk bar and the pager, which a grid may not contain. */
+    private table;
     private pager?;
     private v;
     private selected;
@@ -87,14 +104,22 @@ export declare class Grid extends Component<GridConfig> {
     private mode;
     protected build(): HTMLDivElement;
     protected onRender(): void;
+    /** The row, record, column and cell element under a node (e.g. an event target), if it is a body cell. */
+    cellAt(node: EventTarget | null): GridCell<T> | undefined;
+    /** The body cell of row `index` and column `field`, when that row is in the DOM (rows are virtualized). */
+    getCell(index: number, field: string): HTMLElement | undefined;
+    /** The visible data columns, in order (no checkbox/action columns). */
+    getColumns(): Column<T>[];
+    /** The active row index (keyboard cursor), or -1. */
+    getActive(): number;
     notifyMount(): void;
     /** Re-measures row height and scrollbar (needed after the grid becomes visible or resizes). */
     private layout;
     private bindStore;
     /** Brings count, selection and the empty state in line with the store. */
     private sync;
-    setStore(store: Store<any>): void;
-    getStore(): Store<any>;
+    setStore(store: Store<T>): void;
+    getStore(): Store<T>;
     /** Column widths → the CSS grid template shared by the header and every row. */
     private layoutColumns;
     private buildHeader;
@@ -124,9 +149,9 @@ export declare class Grid extends Component<GridConfig> {
     private renderRow;
     private indexOfEvent;
     private onRowEvent;
-    getSelection(): Model[];
+    getSelection(): Model<T>[];
     /** Selects a record or row index. `add` keeps the current selection (multi mode). */
-    select(target: Model | number, opts?: {
+    select(target: Model<T> | number, opts?: {
         add?: boolean;
     }): void;
     deselectAll(): void;
@@ -138,6 +163,7 @@ export declare class Grid extends Component<GridConfig> {
     private setActive;
     private updateActiveDescendant;
     focusRow(i: number): void;
+    protected focusEl(): HTMLElement;
     scrollToRow(i: number): void;
     private onKey;
     refresh(): void;

package/dist/types/components/data/tree/tree.d.ts

@@ -0,0 +1,71 @@
+import { Component, type ComponentConfig } from '../../../core/component.js';
+export interface TreeNode {
+    id: string;
+    text: string;
+    icon?: string;
+    children?: TreeNode[];
+    /** No children and nothing to load: no expand arrow. Default: true when there are no `children` and no `load`. */
+    leaf?: boolean;
+    expanded?: boolean;
+    disabled?: boolean;
+    /** With `checkboxes`: the node's own state (a parent's state comes from its children). */
+    checked?: boolean;
+    data?: unknown;
+}
+export type CheckState = boolean | 'mixed';
+export interface TreeConfig extends ComponentConfig {
+    items?: TreeNode[];
+    /** `single` (default), `multi` (Ctrl/⌘ + click or Space toggle) or `none`. */
+    selection?: 'single' | 'multi' | 'none';
+    /** A tri-state checkbox per node: checking a parent checks its whole branch; a parent shows "mixed" when partly checked. */
+    checkboxes?: boolean;
+    /** Children on demand: called the first time a node without `children` (and not `leaf`) is expanded. */
+    load?: (node: TreeNode) => Promise<TreeNode[]> | TreeNode[];
+    emptyText?: string;
+}
+/** A hierarchy: expand/collapse, single or multiple selection, tri-state checkboxes, children loaded on demand, filter, APG tree keyboard. */
+export declare class Tree extends Component<TreeConfig> {
+    protected baseCls: string;
+    private items;
+    private open;
+    private selected;
+    private loading;
+    private query;
+    private focusId?;
+    private root;
+    protected onRender(): void;
+    getNode(id: string, list?: TreeNode[]): TreeNode | undefined;
+    /** The ancestors of a node, from the root down. */
+    getPath(id: string, list?: TreeNode[], trail?: TreeNode[]): TreeNode[] | undefined;
+    private isLeaf;
+    private matches;
+    private walk;
+    private paint;
+    private node;
+    expand(id: string): Promise<void>;
+    collapse(id: string): void;
+    toggle(id: string): void;
+    /** Opens every node that already has its children (it does not load). */
+    expandAll(): void;
+    collapseAll(): void;
+    private pick;
+    /** Selects a node (opening its parents); `add` keeps the current selection in multi mode. */
+    select(id: string, opts?: {
+        add?: boolean;
+    }): void;
+    getSelection(): TreeNode[];
+    deselectAll(): void;
+    /** A node's state: its own `checked`, or for a parent with children, all / none / "mixed" of them. */
+    checkState(n: TreeNode): CheckState;
+    private setBranch;
+    setChecked(id: string, on: boolean): void;
+    toggleChecked(id: string): void;
+    /** Every checked node (a fully checked parent and its children all count). */
+    getChecked(): TreeNode[];
+    setItems(items: TreeNode[]): void;
+    /** Shows only what matches (and its ancestors, opened); empty text clears the filter. */
+    filter(text: string): void;
+    private rows;
+    private focusRow;
+    private onKey;
+}

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

@@ -0,0 +1 @@
+export * from '../components/fields/dial/dial.js';

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

@@ -0,0 +1 @@
+export * from '../components/form/fieldgroup/fieldgroup.js';

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

@@ -0,0 +1 @@
+export * from '../components/form/fieldlist/fieldlist.js';

package/dist/types/components/fields/checkboxgroup/checkboxgroup.d.ts

@@ -0,0 +1,27 @@
+import { Field, type FieldConfig } from '../../../core/field.js';
+import type { RadioOption } from '../radiogroup/radiogroup.js';
+type Value = string | number;
+export interface CheckboxGroupConfig extends FieldConfig<Value[]> {
+    options?: RadioOption[];
+    direction?: 'vertical' | 'horizontal';
+}
+/** Several choices from a few visible options; the value is the list of checked option values, in option order. */
+export declare class CheckboxGroup extends Field<Value[], CheckboxGroupConfig> {
+    protected baseCls: string;
+    private group;
+    private inputs;
+    protected emptyValue(): Value[];
+    /** `required` means "at least one". */
+    protected isEmpty(v: Value[]): boolean;
+    protected isEqual(a: Value[], b: Value[]): boolean;
+    protected createControl(): HTMLElement;
+    private opts;
+    private buildOptions;
+    protected onRender(): void;
+    protected applyValue(v: Value[]): void;
+    private paint;
+    getDisplayText(): string;
+    protected onDisabled(disabled: boolean): void;
+    setOptions(options: RadioOption[]): void;
+}
+export {};

package/dist/types/components/fields/dial/dial.d.ts

@@ -0,0 +1,84 @@
+import { Field, type FieldConfig } from '../../../core/field.js';
+export type DialValue = number | string;
+export interface DialOption {
+    value: DialValue;
+    label?: string;
+}
+export interface DialConfig extends FieldConfig<DialValue> {
+    min?: number;
+    max?: number;
+    step?: number;
+    /** A list instead of a range: the value is the item's value. */
+    options?: (DialValue | DialOption)[];
+    /** Snap points: every multiple of N (a range, default 10), every N items (a list, default 1), explicit values, or none. */
+    snap?: number | DialValue[] | false;
+    shape?: 'linear' | 'circle';
+    format?: (v: DialValue) => string;
+    /** Which ticks get a label. Default `snap`. */
+    labels?: 'snap' | 'all' | 'none';
+}
+/** A flat ruler (or a clock face) to pick one value from a range or a list, with a rolling readout. */
+export declare class Dial extends Field<DialValue, DialConfig> {
+    protected baseCls: string;
+    private face;
+    private tape;
+    private needle;
+    private readout;
+    private cache?;
+    /** Where the ruler sits, as an item index (fractional while dragging). */
+    private pos;
+    /** The hand's angle in circle mode, kept continuous so it always turns the short way. */
+    private angle;
+    private shown;
+    private stopGlide?;
+    constructor(config?: DialConfig);
+    private get isCircle();
+    private get items();
+    private fmt;
+    private buildItems;
+    protected emptyValue(): DialValue;
+    protected isEmpty(): boolean;
+    private indexOf;
+    private normalize;
+    private get index();
+    protected createControl(): HTMLDivElement;
+    protected onRender(): void;
+    private paintTicks;
+    protected build(): HTMLElement;
+    /** Distance in px between two ticks on the ruler, for drags (12 when there is no layout, as in tests). */
+    private spacing;
+    private place;
+    /** Turns the hand to item `i` the short way round. */
+    private aim;
+    protected applyValue(v: DialValue): void;
+    /** ARIA, the current tick and the readout for item `i`. */
+    private paintState;
+    /** Digits roll like an odometer when the text keeps its shape; any other change slides the new text in. */
+    private paintReadout;
+    /** The user picked item `i`: animate there and tell everyone. */
+    private choose;
+    private get locked();
+    private onKey;
+    /** The next snap point after item `i` in direction `dir` (or the limit when there is none). */
+    private snapFrom;
+    private angleAt;
+    private onDown;
+    /** Comes to rest on item `i`; a glide (after a flick) takes longer the further it goes. */
+    private rest;
+    /** Moves `n` steps (negative goes back). */
+    next(n?: number): void;
+    prev(n?: number): void;
+    nextSnap(): void;
+    prevSnap(): void;
+    getDisplayText(): string;
+    private rebuild;
+    setMin(min: number): void;
+    setMax(max: number): void;
+    setStep(step: number): void;
+    setOptions(options: DialConfig['options']): void;
+    setSnap(snap: DialConfig['snap']): void;
+    setShape(shape: 'linear' | 'circle'): void;
+    setFormat(format: DialConfig['format']): void;
+    protected onDisabled(disabled: boolean): void;
+    protected onReadonly(readonly: boolean): void;
+}

package/dist/types/components/fields/toggle/toggle.d.ts

@@ -0,0 +1,9 @@
+import { Checkbox, type CheckboxConfig } from '../checkbox/checkbox.js';
+export type ToggleConfig = Omit<CheckboxConfig, 'indeterminate'>;
+/** An on/off switch: a Checkbox with `role="switch"` and a track-and-knob look. Same value (`boolean`), events and API. */
+export declare class Toggle extends Checkbox {
+    protected baseCls: string;
+    protected onRender(): void;
+    /** A switch has no third state. */
+    setIndeterminate(): void;
+}

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

@@ -0,0 +1,33 @@
+import { Container, type ContainerConfig } from '../../../core/container.js';
+import { Field } from '../../../core/field.js';
+export interface FieldGroupConfig extends ContainerConfig {
+    label?: string;
+    help?: string;
+    /** The `*` marker (also shown when any field inside is required). */
+    required?: boolean;
+    /** Default: the form's `labelPos`. */
+    labelPos?: 'top' | 'left';
+    /** Under this width (px) the row becomes a column. */
+    stackBelow?: number;
+}
+/** Several inputs read as one field: one label, one help line and one error line over a row of fields. */
+export declare class FieldGroup extends Container<FieldGroupConfig> {
+    protected baseCls: string;
+    private labelEl;
+    private bodyEl;
+    private helpEl;
+    private errorEl;
+    private error;
+    constructor(config?: FieldGroupConfig);
+    getBody(): HTMLElement;
+    /** The fields inside (also inside nested containers). */
+    getFields(): Field<any>[];
+    getError(): string;
+    protected build(): HTMLElement;
+    protected onRender(): void;
+    /** The group shows the first error of its fields, in one line. */
+    private paintError;
+    private describe;
+    setLabel(label: string): void;
+    setHelp(help: string): void;
+}

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

@@ -0,0 +1,58 @@
+import { Field, type FieldConfig } from '../../../core/field.js';
+import { Container } from '../../../core/container.js';
+import { type AnyConfig } from '../../../core/registry.js';
+import type { LayoutSpec } from '../../../layout/layout.js';
+import { Component } from '../../../core/component.js';
+type Row = Record<string, any>;
+export interface FieldListConfig extends FieldConfig<Row[]> {
+    /** The fields of one row (configs or instances such as `ui.text(...)`). Names are relative to the row (nested allowed). */
+    items?: Array<AnyConfig | Component>;
+    min?: number;
+    max?: number;
+    addText?: string;
+    reorderable?: boolean;
+    /** Values for a new row, or a function that returns them. */
+    newRow?: Row | (() => Row);
+    /** Layout of a row. Default `hbox` (the fields share the row). */
+    rowLayout?: LayoutSpec;
+}
+/** A repeating block of fields: add, remove and reorder rows; the value is an array of row objects. */
+export declare class FieldList extends Field<Row[], FieldListConfig> {
+    protected baseCls: string;
+    private rowsEl;
+    private addBtn;
+    private emptyEl;
+    private rows;
+    private syncing;
+    protected emptyValue(): Row[];
+    protected isEmpty(v: Row[]): boolean;
+    protected createControl(): HTMLDivElement;
+    protected onRender(): void;
+    private label;
+    private makeRow;
+    private rowFields;
+    private collect;
+    private commitRows;
+    /** Puts every row in place: its group name, tools, and which tools are allowed. */
+    private paintRows;
+    protected applyValue(value: Row[]): void;
+    /** Adds a row (at the end) and focuses its first field. */
+    addRow(values?: Row): void;
+    removeRow(index: number): void;
+    moveRow(from: number, to: number): void;
+    getRows(): Container[];
+    getRowFields(index: number): Field<any>[];
+    setAddText(text: string): void;
+    setMin(min: number): void;
+    setMax(max: number): void;
+    protected check(): string;
+    /** Validates every row too; the list is valid when its own rules and every field inside pass. */
+    validate(): boolean;
+    isValid(): boolean;
+    /** The first invalid field inside, or the add button. */
+    focus(): void;
+    protected onDisabled(disabled: boolean): void;
+    protected onReadonly(readonly: boolean): void;
+    protected onDestroy(): void;
+}
+export {};