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

package/dist/rule/rule-editor.js

@@ -0,0 +1,290 @@
+import { html, nothing } from "lit-html";
+import { AsterElement, define, uid } from "../base/element.js";
+import { controlFor } from "../form/controls.js";
+import { formatValue } from "../field/values.js";
+import { TreeChoices } from "../picker/tree-choices.js";
+import "../picker/tree-picker.js";
+import { manyView } from "../select/many.js";
+import "../select/select.js";
+import { opLabel } from "./operators.js";
+const GROUPS = ["and", "or", "not"];
+/** Operators that need no value. */
+const UNARY = ["set", "unset"];
+/**
+ * Edits a rule as a tree of clauses: groups (all of, any of, none of)
+ * holding conditions (a field, an operator, a value) and further groups.
+ * The clauses are rows of a list edit, so every input shows pending, a
+ * changed row offers Revert, a removed one is struck through with Undo, and
+ * the whole rule saves with its record.
+ *
+ * Rows have `op`, `parentClauseId`, `position`, `category`, `fieldRef`,
+ * `value` and, on a message's top group, `message`. A value for `in` is a
+ * JSON array. With `messages`, each top-level group is a message shown when
+ * its conditions hold; otherwise there's at most one, and none means
+ * "always".
+ */
+export class RuleEditor extends AsterElement {
+    #list = this.prop(undefined);
+    #category = this.prop("");
+    #label = this.prop("");
+    #messages = this.prop(false);
+    #fields = this.prop(undefined);
+    #describe = this.prop(undefined);
+    #readOnly = this.prop(undefined);
+    #empty = this.prop("Always");
+    #id = uid("aster-rule");
+    #focus;
+    get list() {
+        return this.#list.value;
+    }
+    set list(v) {
+        this.#list.value = v;
+    }
+    /** The rows' `category`: this editor shows and adds only these. */
+    get category() {
+        return this.#category.value;
+    }
+    set category(v) {
+        this.#category.value = v;
+    }
+    get label() {
+        return this.#label.value;
+    }
+    set label(v) {
+        this.#label.value = v;
+    }
+    /** Each top-level group is a message with its own conditions. */
+    get messages() {
+        return this.#messages.value;
+    }
+    set messages(v) {
+        this.#messages.value = v;
+    }
+    /** The fields a condition can name: a list, or a tree where names repeat across groups. */
+    get fields() {
+        return this.#fields.value;
+    }
+    set fields(v) {
+        this.#fields.value = v;
+    }
+    /** What a named field allows: its operators and values. */
+    get describe() {
+        return this.#describe.value;
+    }
+    set describe(v) {
+        this.#describe.value = v;
+    }
+    /** Why the rule can't be edited now; set, it makes the editor read-only. */
+    get readOnlyReason() {
+        return this.#readOnly.value;
+    }
+    set readOnlyReason(v) {
+        this.#readOnly.value = v;
+    }
+    /** Said when there's no rule. */
+    get empty() {
+        return this.#empty.value;
+    }
+    set empty(v) {
+        this.#empty.value = v;
+    }
+    render() {
+        const list = this.#list.value;
+        if (!list)
+            return nothing;
+        const rows = list.rows.value.filter((r) => r.edit.values.value.category === this.#category.value);
+        const readOnly = this.#readOnly.value !== undefined;
+        const roots = this.#children(rows, null);
+        const live = roots.filter((r) => !r.removing);
+        const canAdd = !readOnly && (this.#messages.value || live.length === 0);
+        return html `<section class="aster-rule" aria-labelledby=${`${this.#id}-label`}>
+      <div class="aster-rule-label" id=${`${this.#id}-label`}>${this.#label.value}</div>
+      ${this.#readOnly.value ? html `<p class="aster-hint">${this.#readOnly.value}</p>` : nothing}
+      ${roots.length === 0 ? html `<p class="aster-rule-empty">${this.#empty.value}</p>` : nothing}
+      ${roots.map((r, i) => this.#group(rows, r, readOnly, 0, this.#messages.value ? `Message ${i + 1}` : this.#label.value))}
+      ${canAdd
+            ? html `<button type="button" class="aster-list-edit-add" @click=${() => this.#addRoot(list)}>
+            <svg viewBox="0 0 14 14" aria-hidden="true"><path d="M7 2.5v9M2.5 7h9"/></svg>${this.#messages.value ? "Add a message" : "Add a condition"}
+          </button>`
+            : nothing}
+    </section>`;
+    }
+    #group(rows, row, readOnly, depth, name) {
+        const list = this.#list.peek();
+        const { edit } = row;
+        const kids = this.#children(rows, row);
+        const locked = readOnly || row.removing;
+        const headId = `${this.#id}-${row.id}`;
+        const isMessage = this.#messages.value && depth === 0;
+        const ops = GROUPS.map((value) => ({ value, label: opLabel(edit.type.field("op")?.allowedValues, value) }));
+        return html `<div class="aster-rule-group" role="group" aria-labelledby=${headId} data-id=${row.id}
+        ?data-new=${row.isNew} ?data-removing=${row.removing} ?data-pending=${row.isNew || edit.dirty.value} style=${`--depth:${depth}`}>
+      <div class="aster-rule-head" id=${headId}>
+        ${row.removing || row.isNew ? html `<span class="aster-sr-only">${row.removing ? "To be removed:" : "New:"}</span>` : nothing}
+        ${isMessage
+            ? locked
+                ? html `<span class="aster-rule-static">${String(edit.values.value.message ?? "")}</span>`
+                : controlFor(edit, "message", { labelled: false })
+            : nothing}
+        <span class="aster-rule-when">${isMessage ? "when" : depth === 0 ? "When" : ""}</span>
+        ${locked
+            ? html `<span class="aster-rule-static">${opLabel(edit.type.field("op")?.allowedValues, edit.values.value.op)}</span>`
+            : html `<aster-select .model=${edit} .field=${"op"} .label=${`${name}: match`} .choices=${ops}></aster-select>`}
+        <span class="aster-rule-of">of these</span>
+        ${this.#actions(row, readOnly, name, rows)}
+      </div>
+      <div class="aster-rule-body">
+        ${kids.map((k, i) => (GROUPS.includes(String(k.edit.values.value.op)) ? this.#group(rows, k, locked, depth + 1, `${name}, group ${i + 1}`) : this.#leaf(k, locked, `${name}, condition ${i + 1}`, rows)))}
+        ${locked
+            ? nothing
+            : html `<div class="aster-rule-adds">
+              <button type="button" class="aster-list-edit-add" @click=${() => this.#addLeaf(list, row, rows)}>
+                <svg viewBox="0 0 14 14" aria-hidden="true"><path d="M7 2.5v9M2.5 7h9"/></svg>Add condition</button>
+              <button type="button" class="aster-list-edit-add" @click=${() => this.#addGroup(list, row, rows)}>
+                <svg viewBox="0 0 14 14" aria-hidden="true"><path d="M7 2.5v9M2.5 7h9"/></svg>Add group</button>
+            </div>`}
+      </div>
+    </div>`;
+    }
+    #leaf(row, readOnly, name, rows) {
+        const { edit } = row;
+        const values = edit.values.value;
+        const field = this.#describe.value?.(values.fieldRef).value;
+        const op = String(values.op ?? "");
+        const opMeta = edit.type.field("op")?.allowedValues;
+        const ops = (field?.operators ?? []).map((value) => ({ value, label: opLabel(opMeta, value) }));
+        const locked = readOnly || row.removing;
+        const fieldsOptions = this.#fields.value;
+        const fieldControl = locked || !fieldsOptions
+            ? html `<span class="aster-rule-static">${this.#fieldText(row)}</span>`
+            : fieldsOptions instanceof TreeChoices
+                ? html `<aster-tree-picker .model=${edit} .field=${"fieldRef"} .label=${`${name}: field`} .options=${fieldsOptions}></aster-tree-picker>`
+                : html `<aster-picker .model=${edit} .field=${"fieldRef"} .label=${`${name}: field`} .options=${fieldsOptions}></aster-picker>`;
+        const opControl = locked || !field
+            ? html `<span class="aster-rule-static">${op ? opLabel(opMeta, op) : ""}</span>`
+            : html `<aster-select .model=${edit} .field=${"op"} .label=${`${name}: test`} .choices=${ops}></aster-select>`;
+        return html `<div class="aster-rule-leaf" role="group" aria-label=${row.removing ? `${name}, to be removed` : row.isNew ? `${name}, new` : name} data-id=${row.id}
+        ?data-new=${row.isNew} ?data-removing=${row.removing} ?data-pending=${row.isNew || edit.dirty.value}>
+      ${fieldControl}${opControl}
+      ${UNARY.includes(op) || !field ? html `<span></span>` : this.#value(row, field, op, locked, name)}
+      ${this.#actions(row, readOnly, name, rows)}
+      ${row.removeError ? html `<p class="aster-error" role="alert">${row.removeError}</p>` : nothing}
+    </div>`;
+    }
+    #value(row, field, op, locked, name) {
+        const { edit } = row;
+        const raw = edit.values.value.value;
+        const options = field.options;
+        if (locked) {
+            const shown = options
+                ? (op === "in" ? parseList(raw) : [String(raw ?? "")]).map((v) => options.find((o) => o.value === v)?.label ?? v).join(", ")
+                : formatValue(edit.type.field("value"), raw);
+            return html `<span class="aster-rule-static">${shown}</span>`;
+        }
+        if (options && op === "in") {
+            return manyView({ label: `${name}: values`, options: options.map((o) => ({ ...o, value: String(o.value) })), values: parseList(raw),
+                pending: edit.pending("value").value, change: (values) => edit.set("value", values.length ? JSON.stringify(values) : null) });
+        }
+        if (options)
+            return html `<aster-select .model=${edit} .field=${"value"} .label=${`${name}: value`} .choices=${options}></aster-select>`;
+        return html `<aster-field .model=${edit} .field=${"value"} .label=${`${name}: value`}
+      .keyboard=${field.input === "number" ? "decimal" : ""} .placeholder=${field.input === "date" ? "YYYY-MM-DD" : ""}></aster-field>`;
+    }
+    #actions(row, readOnly, name, rows) {
+        if (readOnly)
+            return nothing;
+        const list = this.#list.peek();
+        if (row.removing) {
+            return html `<button type="button" class="aster-list-edit-action" aria-label=${`Undo removing ${name}`}
+        @click=${() => [row, ...this.#descendants(rows, row)].forEach((r) => r.removing && list.restore(r.id))}>Undo</button>`;
+        }
+        return html `<span class="aster-rule-actions">
+      ${row.edit.dirty.value && !row.isNew
+            ? html `<button type="button" class="aster-list-edit-action" aria-label=${`Revert ${name}`} @click=${() => row.edit.revert()}>Revert</button>`
+            : nothing}
+      <button type="button" class="aster-list-edit-action" aria-label=${`Remove ${name}`}
+        @click=${() => [...this.#descendants(rows, row).reverse(), row].forEach((r) => list.remove(r.id))}>Remove</button>
+    </span>`;
+    }
+    #fieldText(row) {
+        const options = this.#fields.value;
+        const ref = row.edit.values.value.fieldRef;
+        if (!options || ref === null || ref === undefined)
+            return nothing;
+        const record = options.record(ref)?.value;
+        if (!record)
+            return html `${String(ref)}`;
+        const trail = options instanceof TreeChoices ? options.trail(record) : [];
+        return trail.length
+            ? html `${options.text(record)} <span class="aster-rule-trail">(in ${trail.join(" › ")})</span>`
+            : html `${options.text(record)}`;
+    }
+    /** A group's rows, in position order; a new row's parent is its link until saved. */
+    #children(rows, parent) {
+        const key = parent === null ? null : parent.isNew ? parent.id : JSON.parse(parent.id)[0];
+        return rows
+            .filter((r) => {
+            const link = r.links?.parentClauseId;
+            if (link !== undefined)
+                return parent !== null && link === parent.id;
+            return (r.edit.values.value.parentClauseId ?? null) === key;
+        })
+            .sort((a, b) => Number(a.edit.values.value.position ?? 0) - Number(b.edit.values.value.position ?? 0));
+    }
+    #descendants(rows, row) {
+        return this.#children(rows, row).flatMap((k) => [k, ...this.#descendants(rows, k)]);
+    }
+    #nextPosition(rows, parent) {
+        return Math.max(0, ...this.#children(rows, parent).map((r) => Number(r.edit.values.value.position ?? 0))) + 1;
+    }
+    #add(list, parent, values, rows) {
+        const base = { category: this.#category.peek(), position: this.#nextPosition(rows, parent), fieldRef: null, value: null, message: null };
+        if (parent === null)
+            return list.add({ ...base, parentClauseId: null, ...values }).id;
+        if (!parent.isNew)
+            return list.add({ ...base, parentClauseId: JSON.parse(parent.id)[0], ...values }).id;
+        return list.add({ ...base, parentClauseId: null, ...values }, { parentClauseId: parent.id }).id;
+    }
+    #addRoot(list) {
+        const rows = list.rows.peek().filter((r) => r.edit.values.peek().category === this.#category.peek());
+        const root = this.#add(list, null, { op: "and" }, rows);
+        const group = list.rows.peek().find((r) => r.id === root);
+        this.#focus = this.#add(list, group, { op: null }, list.rows.peek());
+    }
+    #addLeaf(list, parent, rows) {
+        this.#focus = this.#add(list, parent, { op: null }, rows);
+    }
+    #addGroup(list, parent, rows) {
+        const group = this.#add(list, parent, { op: "or" }, rows);
+        const row = list.rows.peek().find((r) => r.id === group);
+        this.#focus = this.#add(list, row, { op: null }, list.rows.peek());
+    }
+    updated() {
+        if (this.#focus !== undefined)
+            this.#focusAdded(this.#focus);
+    }
+    /** Focuses an added row's first control; a picker in it renders its input a frame or so later. */
+    #focusAdded(id, frames = 10) {
+        const target = this.querySelector(`[data-id="${CSS.escape(id)}"] :is(input, [role=combobox])`);
+        if (target) {
+            if (this.#focus === id)
+                this.#focus = undefined;
+            target.focus();
+        }
+        else if (frames > 0 && this.#focus === id) {
+            requestAnimationFrame(() => this.#focusAdded(id, frames - 1));
+        }
+    }
+}
+function parseList(raw) {
+    if (typeof raw !== "string")
+        return [];
+    try {
+        const v = JSON.parse(raw);
+        return Array.isArray(v) ? v.map(String) : [raw];
+    }
+    catch {
+        return [raw];
+    }
+}
+define("aster-rule-editor", RuleEditor);

package/dist/section/accordion.d.ts

@@ -0,0 +1,24 @@
+import { AsterElement, type View } from "../base/element.ts";
+import "./section.ts";
+export interface AccordionItem {
+    readonly id: string;
+    readonly heading: string;
+    readonly summary?: View;
+    readonly actions?: View;
+    readonly disabled?: boolean;
+    readonly body?: View;
+    readonly create?: () => View;
+}
+export declare class Accordion extends AsterElement {
+    #private;
+    get items(): readonly AccordionItem[];
+    set items(v: readonly AccordionItem[]);
+    get expanded(): readonly string[];
+    set expanded(v: readonly string[]);
+    get multiple(): boolean;
+    set multiple(v: boolean);
+    get headingLevel(): 2 | 3 | 4;
+    set headingLevel(v: 2 | 3 | 4);
+    protected render(): View;
+    protected updated(): void;
+}

package/dist/section/accordion.js

@@ -0,0 +1,90 @@
+import { html, nothing } from "lit-html";
+import { AsterElement, define, each } from "../base/element.js";
+import "./section.js";
+export class Accordion extends AsterElement {
+    #items = this.prop([]);
+    #expanded = this.prop([]);
+    #multiple = this.prop(false);
+    #level = this.prop(2);
+    #created = new Map();
+    #restoreFocus = false;
+    get items() { return this.#items.value; }
+    set items(v) {
+        if (new Set(v.map(i => i.id)).size !== v.length || v.some(i => !i.id || i.body !== undefined && i.create !== undefined))
+            throw new TypeError("Accordion items require unique IDs and either body or create");
+        const active = document.activeElement?.closest("[data-accordion-id]");
+        this.#restoreFocus = !!active && active.closest("aster-accordion") === this && !v.some(i => i.id === active.dataset.accordionId);
+        const ids = new Set(v.map(i => i.id));
+        for (const id of this.#created.keys())
+            if (!ids.has(id))
+                this.#created.delete(id);
+        this.#expanded.value = this.#expanded.peek().filter(id => ids.has(id));
+        this.#items.value = [...v];
+    }
+    get expanded() { return this.#expanded.value; }
+    set expanded(v) {
+        if (new Set(v).size !== v.length || v.some(id => !id))
+            throw new TypeError("Expanded IDs must be unique");
+        this.#expanded.value = [...v];
+    }
+    get multiple() { return this.#multiple.value; }
+    set multiple(v) { this.#multiple.value = v; }
+    get headingLevel() { return this.#level.value; }
+    set headingLevel(v) { this.#level.value = v; }
+    render() {
+        const expanded = this.#expanded.value, multiple = this.#multiple.value;
+        return html `<div class="aster-accordion" @keydown=${(e) => this.#key(e)}>
+      ${each(this.#items.value, i => i.id, item => {
+            const open = expanded.includes(item.id);
+            if (open && item.create && !this.#created.has(item.id))
+                this.#created.set(item.id, item.create());
+            return html `<div class="aster-accordion-item" data-accordion-id=${item.id}>
+          <aster-section .heading=${item.heading} .level=${this.#level.value} .open=${open}
+            .summary=${item.summary ?? nothing} .actions=${item.actions ?? nothing} .disabled=${!!item.disabled}
+            .body=${item.body ?? this.#created.get(item.id) ?? nothing}
+            @section-toggle=${(e) => {
+                if (e.target.parentElement?.dataset.accordionId !== item.id)
+                    return;
+                e.stopPropagation();
+                this.#expanded.value = e.detail.open ? [...(multiple || e.detail.reason === "error" ? this.#expanded.peek().filter(id => id !== item.id) : []), item.id] : this.#expanded.peek().filter(id => id !== item.id);
+                this.emit("expanded-change", { expanded: this.#expanded.peek(), reason: e.detail.reason });
+            }}></aster-section>
+        </div>`;
+        })}
+    </div>`;
+    }
+    updated() {
+        if (this.#restoreFocus) {
+            this.#restoreFocus = false;
+            this.#headers()[0]?.focus();
+        }
+    }
+    #headers() {
+        return [...this.querySelectorAll(":scope > .aster-accordion > .aster-accordion-item > aster-section > .aster-section-head > button:not(:disabled)")].filter(el => el.closest("aster-accordion") === this);
+    }
+    #key(e) {
+        const headers = this.#headers(), index = headers.indexOf(e.target);
+        if (index < 0)
+            return;
+        let next;
+        switch (e.key) {
+            case "ArrowDown":
+                next = (index + 1) % headers.length;
+                break;
+            case "ArrowUp":
+                next = (index + headers.length - 1) % headers.length;
+                break;
+            case "Home":
+                next = 0;
+                break;
+            case "End":
+                next = headers.length - 1;
+                break;
+            default: return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        headers[next]?.focus();
+    }
+}
+define("aster-accordion", Accordion);

package/dist/section/section.d.ts

@@ -0,0 +1,30 @@
+import { AsterElement, type View } from "../base/element.ts";
+/**
+ * A titled section that collapses. The heading is a button with
+ * `aria-expanded`; the body stays in the DOM, inert while collapsed, and CSS
+ * animates its height (a grid row from 0fr to 1fr), so no layout is
+ * measured in JS. A collapsed section opens when an error newly appears in
+ * it; collapsing it again holds while that error stays.
+ */
+export declare class Section extends AsterElement {
+    #private;
+    get heading(): string;
+    set heading(v: string);
+    get actions(): View;
+    set actions(v: View);
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    get open(): boolean;
+    set open(v: boolean);
+    get body(): View;
+    set body(v: View);
+    /** The heading's level in the page outline. */
+    get level(): 2 | 3 | 4;
+    set level(v: 2 | 3 | 4);
+    /** Shown beside the heading while collapsed, such as "2 changes". */
+    get summary(): View;
+    set summary(v: View);
+    protected render(): View;
+    protected updated(): void;
+    disconnectedCallback(): void;
+}

package/dist/section/section.js

@@ -0,0 +1,99 @@
+import { html, nothing } from "lit-html";
+import { AsterElement, define, uid } from "../base/element.js";
+/**
+ * A titled section that collapses. The heading is a button with
+ * `aria-expanded`; the body stays in the DOM, inert while collapsed, and CSS
+ * animates its height (a grid row from 0fr to 1fr), so no layout is
+ * measured in JS. A collapsed section opens when an error newly appears in
+ * it; collapsing it again holds while that error stays.
+ */
+export class Section extends AsterElement {
+    #heading = this.prop("");
+    #open = this.prop(true);
+    #body = this.prop(nothing);
+    #summary = this.prop(nothing);
+    #actions = this.prop(nothing);
+    #level = this.prop(2);
+    #disabled = this.prop(false);
+    #id = uid("aster-section");
+    /** Whether the body held an error after the last commit, so only a new one opens the section. */
+    #errored = false;
+    #errors;
+    get heading() {
+        return this.#heading.value;
+    }
+    set heading(v) {
+        this.#heading.value = v;
+    }
+    get actions() { return this.#actions.value; }
+    set actions(v) { this.#actions.value = v; }
+    get disabled() { return this.#disabled.value; }
+    set disabled(v) { this.#disabled.value = v; }
+    get open() {
+        return this.#open.value;
+    }
+    set open(v) {
+        if (!v && this.querySelector(".aster-section-body")?.contains(document.activeElement))
+            this.querySelector(".aster-section-head button")?.focus();
+        this.#open.value = v;
+    }
+    get body() {
+        return this.#body.value;
+    }
+    set body(v) {
+        this.#body.value = v;
+    }
+    /** The heading's level in the page outline. */
+    get level() {
+        return this.#level.value;
+    }
+    set level(v) {
+        this.#level.value = v;
+    }
+    /** Shown beside the heading while collapsed, such as "2 changes". */
+    get summary() {
+        return this.#summary.value;
+    }
+    set summary(v) {
+        this.#summary.value = v;
+    }
+    render() {
+        const open = this.#open.value;
+        this.toggleAttribute("data-open", open);
+        return html `<div class="aster-section-head" role="heading" aria-level=${this.#level.value}>
+        <button type="button" ?disabled=${this.#disabled.value} aria-expanded=${open ? "true" : "false"} aria-controls=${this.#id}
+          @click=${() => this.#toggle(!this.#open.peek(), "user")}>
+          <svg viewBox="0 0 10 10" aria-hidden="true"><path d="M3.5 2 6.5 5l-3 3"/></svg>
+          <span>${this.#heading.value}</span>
+        </button>
+        ${open ? nothing : html `<span class="aster-section-summary">${this.#summary.value}</span>`}
+        ${this.#actions.value === nothing ? nothing : html `<div class="aster-section-actions">${this.#actions.value}</div>`}
+      </div>
+      <div class="aster-section-body" id=${this.#id} role="region" aria-label=${this.#heading.value} ?inert=${!open}>
+        <div class="aster-section-inner">${this.#body.value}</div>
+      </div>`;
+    }
+    updated() {
+        if (!this.#errors) {
+            this.#errors = new MutationObserver(() => this.#checkErrors());
+            this.#errors.observe(this, { subtree: true, childList: true, attributes: true, attributeFilter: ["aria-invalid"] });
+        }
+        this.#checkErrors();
+    }
+    disconnectedCallback() {
+        this.#errors?.disconnect();
+        this.#errors = undefined;
+        super.disconnectedCallback();
+    }
+    #checkErrors() {
+        const errored = this.querySelector(".aster-section-body [aria-invalid='true']") !== null;
+        if (errored && !this.#errored && !this.#open.peek())
+            this.#toggle(true, "error");
+        this.#errored = errored;
+    }
+    #toggle(open, reason) {
+        this.#open.value = open;
+        this.emit("section-toggle", { open, reason });
+    }
+}
+define("aster-section", Section);

package/dist/select/choice-element.d.ts

@@ -0,0 +1,20 @@
+import type { Value } from "@getaster/data";
+import { AsterElement, type View } from "../base/element.ts";
+import { type Option } from "./choice.ts";
+/**
+ * A select-only combobox not bound to a form: `options`, a `value`, and a
+ * `change` event with the chosen value. Filter rows and toolbars use it.
+ */
+export declare class Choice extends AsterElement {
+    #private;
+    get options(): readonly Option[];
+    set options(v: readonly Option[]);
+    get value(): Value | undefined;
+    set value(v: Value | undefined);
+    get label(): string;
+    set label(v: string);
+    get placeholder(): string;
+    set placeholder(v: string);
+    focus(options?: FocusOptions): void;
+    protected render(): View;
+}

package/dist/select/choice-element.js

@@ -0,0 +1,55 @@
+import { AsterElement, define, uid } from "../base/element.js";
+import { ChoiceState, choiceView } from "./choice.js";
+/**
+ * A select-only combobox not bound to a form: `options`, a `value`, and a
+ * `change` event with the chosen value. Filter rows and toolbars use it.
+ */
+export class Choice extends AsterElement {
+    #options = this.prop([]);
+    #value = this.prop(undefined);
+    #label = this.prop("");
+    #placeholder = this.prop("Choose…");
+    #state = new ChoiceState();
+    #id = uid("aster-choice");
+    get options() {
+        return this.#options.value;
+    }
+    set options(v) {
+        this.#options.value = v;
+    }
+    get value() {
+        return this.#value.value;
+    }
+    set value(v) {
+        this.#value.value = v;
+    }
+    get label() {
+        return this.#label.value;
+    }
+    set label(v) {
+        this.#label.value = v;
+    }
+    get placeholder() {
+        return this.#placeholder.value;
+    }
+    set placeholder(v) {
+        this.#placeholder.value = v;
+    }
+    focus(options) {
+        this.querySelector("[role=combobox]")?.focus(options);
+    }
+    render() {
+        return choiceView(this.#state, {
+            id: this.#id,
+            options: this.#options.value,
+            value: this.#value.value,
+            placeholder: this.#placeholder.value,
+            label: this.#label.value,
+            choose: (v) => {
+                this.#value.value = v;
+                this.emit("change", v);
+            },
+        });
+    }
+}
+define("aster-choice", Choice);

package/dist/select/choice.d.ts

@@ -0,0 +1,34 @@
+import type { Value } from "@getaster/data";
+import { type TemplateResult } from "lit-html";
+export interface Option {
+    readonly value: Value;
+    readonly label: string;
+}
+/** Whether a choice's list is open, and which option is active in it. */
+export declare class ChoiceState {
+    readonly open: import("@preact/signals-core").Signal<boolean>;
+    readonly active: import("@preact/signals-core").Signal<number>;
+}
+export interface ChoiceProps {
+    readonly id: string;
+    readonly options: readonly Option[];
+    readonly value: Value | undefined;
+    /** Shown when the value isn't one of the options. */
+    readonly placeholder: string;
+    readonly readOnly?: boolean;
+    readonly label?: string;
+    readonly labelledBy?: string;
+    readonly required?: boolean;
+    readonly invalid?: boolean;
+    readonly describedBy?: string;
+    readonly choose: (value: Value) => void;
+}
+/**
+ * A select-only combobox: the value in a frame, and a list drawn like the
+ * picker's rather than by the platform.
+ *
+ * Keyboard: ↓/↑, Enter or Space open; in the list ↓/↑, Home and End move,
+ * a letter jumps to the next label starting with it, Enter or Space choose,
+ * Escape and Tab close. The active option is `aria-activedescendant`.
+ */
+export declare function choiceView(state: ChoiceState, p: ChoiceProps): TemplateResult;