@getaster/elements 0.0.0-stage → 0.1.0-preview.1

package/dist/form/controls.d.ts

@@ -0,0 +1,20 @@
+import type { Collection, EditModel } from "@getaster/data";
+import type { PickerOptions } from "../picker/options.ts";
+import { type TemplateResult } from "lit-html";
+import "../date/date-field.ts";
+import "../field/check.ts";
+import "../field/field.ts";
+import "../field/number-field.ts";
+import "../picker/picker.ts";
+import "../select/select.ts";
+/**
+ * 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.
+ */
+export declare function controlFor(model: EditModel, name: string, opts: {
+    options?: Collection | PickerOptions | undefined;
+    labelled: boolean;
+    span?: number;
+    sharedReasons?: ReadonlyMap<string, string>;
+}): TemplateResult;

package/dist/form/controls.js

@@ -0,0 +1,34 @@
+import { html } from "lit-html";
+import { styleMap } from "lit-html/directives/style-map.js";
+import "../date/date-field.js";
+import "../field/check.js";
+import "../field/field.js";
+import "../field/number-field.js";
+import "../picker/picker.js";
+import "../select/select.js";
+const NONE = new Map();
+/**
+ * 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.
+ */
+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>`;
+    }
+    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>`;
+    }
+    return html `<aster-field style=${style} .model=${model} .field=${name} .labelled=${opts.labelled} .sharedReasons=${shared}></aster-field>`;
+}

package/dist/form/form.d.ts

@@ -0,0 +1,46 @@
+import type { Collection, EditModel } from "@getaster/data";
+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";
+/** 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 value shown read-only, such as a figure derived from other fields. */
+export interface FormValue {
+    readonly title: string;
+    readonly value: ReadonlySignal<string>;
+    readonly span?: number;
+}
+export type FormItem = string | FormField | FormValue;
+export interface FormSection {
+    readonly title: string;
+    readonly columns?: number;
+    /** Starts collapsed when false. */
+    readonly open?: boolean;
+    readonly items: readonly FormItem[];
+}
+/**
+ * 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.
+ */
+export declare class Form extends AsterElement {
+    #private;
+    get model(): EditModel | undefined;
+    set model(v: EditModel | undefined);
+    get sections(): readonly FormSection[];
+    set sections(v: readonly FormSection[]);
+    /** 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. */
+    focusFirst(): void;
+    protected render(): View;
+}

package/dist/form/form.js

@@ -0,0 +1,85 @@
+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";
+/**
+ * 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.
+ */
+export class Form extends AsterElement {
+    #shared = new Map();
+    #model = this.prop(undefined);
+    #sections = this.prop([]);
+    #level = this.prop(2);
+    #id = uid("aster-form");
+    get model() {
+        return this.#model.value;
+    }
+    set model(v) {
+        this.#model.value = v;
+    }
+    get sections() {
+        return this.#sections.value;
+    }
+    set sections(v) {
+        this.#sections.value = v;
+    }
+    /** The sections' heading level in the page outline. */
+    get headingLevel() {
+        return this.#level.value;
+    }
+    set headingLevel(v) {
+        this.#level.value = v;
+    }
+    /** Focuses the first field with an error, or the first field. */
+    focusFirst() {
+        const target = this.querySelector("[aria-invalid='true']") ??
+            this.querySelector("input:not([readonly]), textarea:not([readonly]), [role=combobox]:not([aria-readonly])");
+        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>`)}
+      ${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))}
+        </div>`}></aster-section>`;
+        })}`;
+    }
+    #item(model, item) {
+        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 });
+    }
+}
+function isField(item) {
+    return typeof item === "string" || "field" in item;
+}
+function nameOf(item) {
+    return typeof item === "string" ? item : item.field;
+}
+define("aster-form", Form);

package/dist/format.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A short relative time: "Just now", "18 min ago", "1 h ago", "Yesterday",
+ * a weekday within the week, then a date. Always pair it with
+ * `absoluteTime` on hover.
+ */
+export declare function relativeTime(iso: string, now: number, timeZone?: string): string;
+/** "Wed 7 Oct 2026, 14:57". */
+export declare function absoluteTime(iso: string, timeZone?: string): string;
+/** "£41.2k", "£980", "£1.3m": compact, for figures. Never truncated. */
+export declare function compactMoney(amount: number, currency?: string): string;

package/dist/format.js

@@ -0,0 +1,57 @@
+const MINUTE = 60_000;
+const HOUR = 60 * MINUTE;
+/**
+ * A short relative time: "Just now", "18 min ago", "1 h ago", "Yesterday",
+ * a weekday within the week, then a date. Always pair it with
+ * `absoluteTime` on hover.
+ */
+export function relativeTime(iso, now, timeZone) {
+    const t = Date.parse(iso);
+    const ago = now - t;
+    if (ago < MINUTE)
+        return "Just now";
+    if (ago < HOUR)
+        return `${Math.floor(ago / MINUTE)} min ago`;
+    const days = dayNumber(now, timeZone) - dayNumber(t, timeZone);
+    if (days === 0)
+        return `${Math.floor(ago / HOUR)} h ago`;
+    if (days === 1)
+        return "Yesterday";
+    const opts = timeZone ? { timeZone } : {};
+    if (days < 7)
+        return new Intl.DateTimeFormat("en-GB", { weekday: "short", ...opts }).format(t);
+    return new Intl.DateTimeFormat("en-GB", { day: "numeric", month: "short", ...opts }).format(t);
+}
+/** "Wed 7 Oct 2026, 14:57". */
+export function absoluteTime(iso, timeZone) {
+    const parts = new Intl.DateTimeFormat("en-GB", {
+        weekday: "short",
+        day: "numeric",
+        month: "short",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        hourCycle: "h23",
+        ...(timeZone ? { timeZone } : {}),
+    }).formatToParts(Date.parse(iso));
+    const get = (type) => parts.find((p) => p.type === type)?.value ?? "";
+    return `${get("weekday")} ${get("day")} ${get("month")} ${get("year")}, ${get("hour")}:${get("minute")}`;
+}
+/** Whole days since the epoch in the time zone, for "yesterday" and weekday names. */
+function dayNumber(t, timeZone) {
+    const p = new Intl.DateTimeFormat("en-CA", { year: "numeric", month: "2-digit", day: "2-digit", ...(timeZone ? { timeZone } : {}) }).format(t);
+    return Math.floor(Date.parse(`${p}T00:00:00Z`) / 86_400_000);
+}
+/** "£41.2k", "£980", "£1.3m": compact, for figures. Never truncated. */
+export function compactMoney(amount, currency = "GBP") {
+    return new Intl.NumberFormat("en-GB", {
+        style: "currency",
+        currency,
+        notation: "compact",
+        maximumFractionDigits: 1,
+    })
+        .format(amount)
+        .replace(/K$/, "k")
+        .replace(/M$/, "m")
+        .replace(/^-/, "−");
+}

package/dist/grid/filters.d.ts

@@ -0,0 +1,16 @@
+import type { Criteria, Field } from "@getaster/data";
+/**
+ * A filter typed into a number or date column: `5`, `>5`, `>=5`, `<5`,
+ * `<=5`, or a range `1..3`. Returns undefined for empty text, and an error
+ * message for text that isn't one of these.
+ */
+export declare function parseRange(field: Field, text: string): {
+    criteria?: Criteria;
+    error?: string;
+};
+/** The text a range filter shows for its criteria, so a restored view shows what was typed. */
+export declare function rangeText(criteria: Criteria | undefined): string;
+/** Text contains, ignoring case. */
+export declare function containsText(field: string, text: string): Criteria | undefined;
+/** A filter's text with its date replaced by `date`, keeping an operator typed before it. */
+export declare function withDate(text: string, date: string): string;

package/dist/grid/filters.js

@@ -0,0 +1,66 @@
+import { parseDate, today } from "../date/dates.js";
+/**
+ * A filter typed into a number or date column: `5`, `>5`, `>=5`, `<5`,
+ * `<=5`, or a range `1..3`. Returns undefined for empty text, and an error
+ * message for text that isn't one of these.
+ */
+export function parseRange(field, text) {
+    const t = text.trim();
+    if (t === "")
+        return {};
+    const literal = (s) => {
+        const v = s.trim();
+        if (field.type === "Edm.Date")
+            return parseDate(v, Number(today().slice(0, 4)));
+        if (!/^-?\d+(\.\d+)?$/.test(v))
+            return undefined;
+        return field.type === "Edm.Decimal" || field.type === "Edm.Int64" ? v : Number(v);
+    };
+    const hint = field.type === "Edm.Date" ? "a date like 1 Oct 2026" : "a number";
+    const range = /^(.+?)\.\.(.+)$/.exec(t);
+    if (range) {
+        const from = literal(range[1]);
+        const to = literal(range[2]);
+        if (from === undefined || to === undefined)
+            return { error: `Use ${hint} on both sides of ..` };
+        return {
+            criteria: {
+                op: "and",
+                args: [
+                    { op: "ge", field: field.name, value: from },
+                    { op: "le", field: field.name, value: to },
+                ],
+            },
+        };
+    }
+    const m = /^(>=|<=|>|<|=)?\s*(.+)$/.exec(t);
+    const value = literal(m[2]);
+    if (value === undefined)
+        return { error: `Use ${hint}, optionally after >, >=, < or <=, or a range a..b` };
+    const op = { ">=": "ge", "<=": "le", ">": "gt", "<": "lt", "=": "eq" }[m[1]] ?? "eq";
+    return { criteria: { op, field: field.name, value } };
+}
+/** The text a range filter shows for its criteria, so a restored view shows what was typed. */
+export function rangeText(criteria) {
+    if (!criteria)
+        return "";
+    if (criteria.op === "and" && criteria.args.length === 2) {
+        const [a, b] = criteria.args;
+        if (a && b && "value" in a && "value" in b)
+            return `${a.value}..${b.value}`;
+    }
+    if ("value" in criteria && criteria.op !== "contains") {
+        const sign = { eq: "", gt: ">", ge: ">=", lt: "<", le: "<=" }[criteria.op] ?? "";
+        return `${sign}${criteria.value}`;
+    }
+    return "";
+}
+/** Text contains, ignoring case. */
+export function containsText(field, text) {
+    return text.trim() === "" ? undefined : { op: "contains", field, value: text.trim(), caseInsensitive: true };
+}
+/** A filter's text with its date replaced by `date`, keeping an operator typed before it. */
+export function withDate(text, date) {
+    const op = /^\s*(>=|<=|>|<|=)/.exec(text)?.[1] ?? "";
+    return `${op}${date}`;
+}

package/dist/grid/grid.d.ts

@@ -0,0 +1,209 @@
+import { type ReadonlySignal } from "@preact/signals-core";
+import { type ProgressPolicy, type CsvOptions, type Aggregate, Tree, type Collection, type Selection, type FilterMode, type FieldRules, type Criteria, type DataContext, type Entity, type Field, type Grouping, type KeyText, type Value } from "@getaster/data";
+import { AsterElement, type View } from "../base/element.ts";
+import type { MenuItem } from "../menu/menu.ts";
+import "../menu/menu.ts";
+import "../progress/status.ts";
+import "../select/choice-element.ts";
+import "../filter/filter-builder.ts";
+import "../dialog/dialog.ts";
+import { type GridView } from "./view.ts";
+/** Renders a cell's content; `entity` is the row's record. */
+export type CellRenderer = (entity: Entity, key: KeyText) => View;
+/** Text presentation of a typed value. Queries and exports retain the underlying value. */
+export type CellFormatter = (value: Value | undefined, entity: Entity, field: Field | undefined) => string;
+/** How a column shows a foreign key: the related set and the field to show. */
+export interface Lookup {
+    readonly set: string;
+    readonly display: string;
+}
+/** An exact total over the grid query; count needs no field. */
+export type GridSummary = {
+    readonly method: "count";
+    readonly label?: string;
+} | {
+    readonly method: Aggregate["method"];
+    readonly field: string;
+    readonly label?: string;
+};
+/** Export visible metadata columns, in view order. */
+export interface GridCsvOptions extends Omit<CsvOptions, "keys"> {
+    /** All filtered results by default, or shared selection in pick order. */
+    readonly scope?: "query" | "selection";
+}
+/** A row as row controls and expansion content see it; read inside a render, it updates them. */
+export interface RowState {
+    readonly key: KeyText;
+    readonly entity: Entity;
+    readonly expanded: boolean;
+    readonly editable: boolean;
+}
+/** A button of a row's floating controls. */
+export interface RowControl {
+    readonly label: string;
+    readonly icon: View;
+    readonly run: () => void;
+}
+/**
+ * The content a row expands into. Its state outlives the DOM: scrolled out
+ * of view and back, it's the same editor. `dirty`, `save` and `discard` let
+ * the grid ask before closing over unsaved changes.
+ */
+export interface ExpansionEditor {
+    readonly view: View;
+    readonly dirty?: ReadonlySignal<boolean>;
+    save?(): Promise<boolean>;
+    discard?(): void;
+    dispose?(): void;
+}
+export interface Expansion {
+    content(row: RowState): ExpansionEditor;
+    /** Whether a record may expand; all may by default. */
+    canExpand?(entity: Entity): boolean;
+    /** Expanding a row closes the one already open. */
+    single?: boolean;
+    /** At most this many open at once; another is refused with a message. */
+    limit?: number;
+    /** The record's name in messages ("task"). */
+    noun?: string;
+}
+/** Makes the grid a tree grid over a self-referencing set. */
+export interface GridTree {
+    /** The field holding a record's parent key. */
+    readonly parentField: string;
+    /** The parent value of top-level records; null by default. */
+    readonly rootValue?: Value;
+    /** `keepAncestors` (the default) shows a filter's matches with the paths to them. */
+    readonly filterMode?: FilterMode;
+    /** Rows can be dragged onto another row to move under it, or onto the header to the top level; a touch or pen holds a row still to lift it. */
+    readonly draggable?: boolean;
+}
+/**
+ * A virtualized grid over an entity set, shaped by a view the person can
+ * change: sort, filter, hide, reorder, resize, freeze; their view is kept
+ * per browser with `persist`, and named views can be saved.
+ *
+ * Layout is CSS: the columns are one `grid-template-columns`, each row is a
+ * subgrid, the header and frozen columns are sticky. JS keeps only the rows
+ * near the viewport in the DOM (spacers stand for the rest), measures row
+ * heights with a ResizeObserver, and writes column tracks as a variable.
+ *
+ * The collection's query follows the view; rows load by page as they come
+ * into view, and ones not loaded yet show as placeholders. Focus is on the
+ * grid; its active cell is `aria-activedescendant`. Shared picks are separate
+ * from focus; an owned grid without shared selection chooses the active row.
+ */
+export declare class Grid extends AsterElement {
+    #private;
+    get ctx(): DataContext | undefined;
+    set ctx(v: DataContext | undefined);
+    /** The entity set the grid shows. */
+    get set(): string;
+    set set(v: string);
+    /** Criteria every row meets, beneath the view's own filters. */
+    get base(): Criteria | undefined;
+    set base(v: Criteria | undefined);
+    /** The view in use. Set by the page, it's also what Reset goes back to. */
+    get view(): GridView | undefined;
+    set view(v: GridView | undefined);
+    get label(): string;
+    set label(v: string);
+    /** The page-scope key for the view and selection. */
+    get publish(): string;
+    set publish(v: string);
+    /** Keeps the person's views in this browser under this name. */
+    get persist(): string;
+    set persist(v: string);
+    /** Cell content by field, where the default formatting isn't enough. */
+    get renderers(): Readonly<Record<string, CellRenderer>>;
+    set renderers(v: Readonly<Record<string, CellRenderer>>);
+    /** Text-only display formatting by field; never changes server sorting or filtering. */
+    get formatters(): Readonly<Record<string, CellFormatter>>;
+    set formatters(value: Readonly<Record<string, CellFormatter>>);
+    /** Exact overall totals and, when grouped, totals on each group header. */
+    get summaries(): readonly GridSummary[];
+    set summaries(value: readonly GridSummary[]);
+    /** Fresh server values; custom DOM renderers and lookup labels are not exported. */
+    exportCsv(options?: GridCsvOptions): Promise<string>;
+    /** Foreign keys shown by a related record's field, by column. */
+    get lookups(): Readonly<Record<string, Lookup>>;
+    set lookups(v: Readonly<Record<string, Lookup>>);
+    /** The page's actions for a row, shown first in its menu (right-click, Shift+F10, the Menu key). */
+    get rowMenu(): (entity: Entity, key: KeyText) => readonly MenuItem[];
+    set rowMenu(v: (entity: Entity, key: KeyText) => readonly MenuItem[]);
+    /**
+     * A tree grid: the first column shows each record's level with an opener;
+     * levels load as they open; a filter keeps the path to each match. Set it
+     * before the grid connects.
+     */
+    get tree(): GridTree | undefined;
+    set tree(v: GridTree | undefined);
+    /** The lazy group hierarchy of an owned grouped grid. */
+    get groupingModel(): Grouping | undefined;
+    /** The tree model, in a tree grid: open state, reveal, move. */
+    get treeModel(): Tree | undefined;
+    /**
+     * Floating controls for each row, recomputed from its state. They show on
+     * hover, on the selected and the active row; Tab reaches them from the
+     * grid, ←/→ move between them, Escape goes back.
+     */
+    get rowControls(): ((row: RowState) => readonly RowControl[]) | undefined;
+    set rowControls(v: ((row: RowState) => readonly RowControl[]) | undefined);
+    /** Rows expand in place into content the page supplies (double-click, or `expand`). */
+    get expansion(): Expansion | undefined;
+    set expansion(v: Expansion | undefined);
+    /** Keys of the expanded rows, in the order they opened. */
+    get expanded(): ReadonlySignal<readonly KeyText[]>;
+    /**
+     * Expands a row and moves focus into its content. Refused (false) for a
+     * record that can't expand, or over the limit, which says so.
+     */
+    expand(key: KeyText): boolean;
+    /**
+     * Collapses a row. `ask` (the default) asks first when it has unsaved
+     * changes; `discard` drops them on purpose; `save` saves, and stays open
+     * if that fails.
+     */
+    collapse(key: KeyText, how?: "ask" | "discard" | "save"): Promise<boolean>;
+    /**
+     * In a tree grid, opens the path to a record, makes its row active and
+     * scrolls it to the top. Resolves to whether the record is in the tree.
+     */
+    reveal(key: KeyText): Promise<boolean>;
+    /** Rows can be edited in place: Enter, F2 or a double-click start, Enter saves, Escape cancels. */
+    get editable(): boolean;
+    set editable(v: boolean);
+    /**
+     * Page rules for the cells of a row being edited. Each row has a child
+     * scope where it's published as `row`, so a rule reads its own record.
+     */
+    get rules(): Readonly<Record<string, FieldRules>>;
+    set rules(v: Readonly<Record<string, FieldRules>>);
+    get progressPolicy(): ProgressPolicy;
+    set progressPolicy(value: ProgressPolicy);
+    /** Shown when the query matches nothing. */
+    get empty(): View;
+    set empty(v: View);
+    get collection(): Collection | undefined;
+    set collection(v: Collection | undefined);
+    /** Shared selection; without collection, its collection supplies the binding. */
+    get selection(): Selection | undefined;
+    /** Allows this view to change selection; borrowed selection state remains visible. */
+    get selectable(): boolean;
+    set selectable(value: boolean);
+    set selection(v: Selection | undefined);
+    /** Navigation key, independent of a shared selection. */
+    get activeKey(): KeyText | undefined;
+    /** Saves an inline edit before an owner changes or removes this view. False keeps invalid/failed edits open. */
+    finishEditing(): Promise<boolean>;
+    /** The selected record's key. */
+    get selected(): KeyText | undefined;
+    /** Loads and focuses a flat collection position without changing shared selection. */
+    focusIndex(index: number, column?: number): Promise<boolean>;
+    /** Reveals a key currently loaded in the flat collection. */
+    focusKey(key: KeyText, column?: number): Promise<boolean>;
+    connectedCallback(): void;
+    focus(options?: FocusOptions): void;
+    protected render(): View;
+    protected updated(): void;
+}