@getaster/elements 0.3.0 → 0.4.0

package/dist/section/accordion.d.ts

@@ -1,4 +1,5 @@
 import { AsterElement, type View } from "../base/element.ts";
+import { type VisibilityMode } from "./policy.ts";
 import "./section.ts";
 export interface AccordionItem {
     readonly id: string;
@@ -9,16 +10,41 @@ export interface AccordionItem {
     readonly body?: View;
     readonly create?: () => View;
 }
+/** A request to move an item; the host applies `order` to `items`. */
+export interface AccordionReorderDetail {
+    readonly id: string;
+    readonly from: number;
+    readonly to: number;
+    readonly order: readonly string[];
+}
+/**
+ * Coordinates retained [[class:Section]] panels. Single mode constrains user
+ * toggles; errors may still reveal a panel. Close and reorder are requests:
+ * the accordion never removes or reorders its host-owned items itself.
+ */
 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[]);
+    /** Sugar for `visibilityMode`: `true` is `"multiple"`, `false` is `"mutex"`. Default `false`. */
     get multiple(): boolean;
     set multiple(v: boolean);
+    /** How many sections may be open at once: `"mutex"` (default) or `"multiple"`. */
+    get visibilityMode(): VisibilityMode;
+    set visibilityMode(v: VisibilityMode);
     get headingLevel(): 2 | 3 | 4;
     set headingLevel(v: 2 | 3 | 4);
+    /** Whether items get a close control. Default `false`; a close is a cancelable request. */
+    get canClose(): boolean;
+    set canClose(v: boolean);
+    /** Whether items get Move up and Move down controls. Default `false`. */
+    get canReorder(): boolean;
+    set canReorder(v: boolean);
+    /** Whether a Collapse all control is shown. Default `false`. */
+    get canCollapseAll(): boolean;
+    set canCollapseAll(v: boolean);
     protected render(): View;
     protected updated(): void;
 }

package/dist/section/accordion.js

@@ -1,11 +1,20 @@
 import { html, nothing } from "lit-html";
 import { AsterElement, define, each } from "../base/element.js";
+import { reorderIds, visibilityModeFromMultiple } from "./policy.js";
 import "./section.js";
+/**
+ * Coordinates retained [[class:Section]] panels. Single mode constrains user
+ * toggles; errors may still reveal a panel. Close and reorder are requests:
+ * the accordion never removes or reorders its host-owned items itself.
+ */
 export class Accordion extends AsterElement {
     #items = this.prop([]);
     #expanded = this.prop([]);
-    #multiple = this.prop(false);
+    #visibilityMode = this.prop("mutex");
     #level = this.prop(2);
+    #canClose = this.prop(false);
+    #canReorder = this.prop(false);
+    #canCollapseAll = this.prop(false);
     #created = new Map();
     #restoreFocus = false;
     get items() { return this.#items.value; }
@@ -27,26 +36,74 @@ export class Accordion extends AsterElement {
             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; }
+    /** Sugar for `visibilityMode`: `true` is `"multiple"`, `false` is `"mutex"`. Default `false`. */
+    get multiple() { return this.#visibilityMode.value === "multiple"; }
+    set multiple(v) {
+        if (typeof v !== "boolean")
+            throw new TypeError("multiple must be a boolean");
+        this.#visibilityMode.value = visibilityModeFromMultiple(v);
+    }
+    /** How many sections may be open at once: `"mutex"` (default) or `"multiple"`. */
+    get visibilityMode() { return this.#visibilityMode.value; }
+    set visibilityMode(v) {
+        if (v !== "multiple" && v !== "mutex")
+            throw new TypeError('visibilityMode must be "multiple" or "mutex"');
+        this.#visibilityMode.value = v;
+    }
     get headingLevel() { return this.#level.value; }
     set headingLevel(v) { this.#level.value = v; }
+    /** Whether items get a close control. Default `false`; a close is a cancelable request. */
+    get canClose() { return this.#canClose.value; }
+    set canClose(v) {
+        if (typeof v !== "boolean")
+            throw new TypeError("canClose must be a boolean");
+        this.#canClose.value = v;
+    }
+    /** Whether items get Move up and Move down controls. Default `false`. */
+    get canReorder() { return this.#canReorder.value; }
+    set canReorder(v) {
+        if (typeof v !== "boolean")
+            throw new TypeError("canReorder must be a boolean");
+        this.#canReorder.value = v;
+    }
+    /** Whether a Collapse all control is shown. Default `false`. */
+    get canCollapseAll() { return this.#canCollapseAll.value; }
+    set canCollapseAll(v) {
+        if (typeof v !== "boolean")
+            throw new TypeError("canCollapseAll must be a boolean");
+        this.#canCollapseAll.value = v;
+    }
     render() {
-        const expanded = this.#expanded.value, multiple = this.#multiple.value;
+        const expanded = this.#expanded.value;
+        const mode = this.#visibilityMode.value;
+        const items = this.#items.value;
         return html `<div class="aster-accordion" @keydown=${(e) => this.#key(e)}>
-      ${each(this.#items.value, i => i.id, item => {
+      ${this.#canCollapseAll.value ? html `<div class="aster-accordion-tools">
+        <button type="button" class="aster-accordion-collapse-all" @click=${() => this.#collapseAll()}>Collapse all</button>
+      </div>` : nothing}
+      ${each(items, i => i.id, item => {
             const open = expanded.includes(item.id);
+            const index = items.findIndex(i => i.id === item.id);
             if (open && item.create && !this.#created.has(item.id))
                 this.#created.set(item.id, item.create());
+            const reorder = this.#canReorder.value && !item.disabled ? this.#reorderControls(item, index, items.length) : nothing;
+            const actions = reorder === nothing && item.actions === undefined ? nothing : html `${reorder}${item.actions ?? nothing}`;
             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}
+            .summary=${item.summary ?? nothing} .actions=${actions} .disabled=${!!item.disabled}
+            .canClose=${this.#canClose.value} .chrome=${this.#canClose.value ? { close: true } : undefined}
             .body=${item.body ?? this.#created.get(item.id) ?? nothing}
+            @close=${(e) => {
+                if (e.target.parentElement?.dataset.accordionId !== item.id)
+                    return;
+                e.stopPropagation();
+                this.emit("close", item.id);
+            }}
             @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.#expanded.value = e.detail.open ? [...(mode === "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>`;
@@ -59,8 +116,29 @@ export class Accordion extends AsterElement {
             this.#headers()[0]?.focus();
         }
     }
+    #reorderControls(item, index, count) {
+        return html `<span class="aster-accordion-reorder">
+      <button type="button" aria-label=${`Move ${item.heading} up`} ?disabled=${index <= 0}
+        @click=${(e) => { e.stopPropagation(); this.#requestReorder(index, index - 1); }}>↑</button>
+      <button type="button" aria-label=${`Move ${item.heading} down`} ?disabled=${index >= count - 1}
+        @click=${(e) => { e.stopPropagation(); this.#requestReorder(index, index + 1); }}>↓</button>
+    </span>`;
+    }
+    /** A cancelable request; the host sets `items` to `order` to apply it. */
+    #requestReorder(from, to) {
+        const items = this.#items.peek();
+        if (from === to || from < 0 || to < 0 || from >= items.length || to >= items.length)
+            return;
+        this.emit("reorder", { id: items[from].id, from, to, order: reorderIds(items.map(i => i.id), from, to) });
+    }
+    #collapseAll() {
+        if (!this.#expanded.peek().length)
+            return;
+        this.#expanded.value = [];
+        this.emit("expanded-change", { expanded: [], reason: "user" });
+    }
     #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);
+        return [...this.querySelectorAll(":scope > .aster-accordion > .aster-accordion-item > aster-section > .aster-section-head > button:not(:disabled):not(.aster-section-close)")].filter(el => el.closest("aster-accordion") === this);
     }
     #key(e) {
         const headers = this.#headers(), index = headers.indexOf(e.target);

package/dist/section/policy.d.ts

@@ -0,0 +1,8 @@
+/** How many sections may be open: one at a time (`"mutex"`, the default) or any number. */
+export type VisibilityMode = "multiple" | "mutex";
+/** The structured form of the existing `multiple` shorthand. */
+export declare function visibilityModeFromMultiple(multiple: boolean): VisibilityMode;
+/** A close control exists only when the section permits closing and chrome asks for it. */
+export declare function closeShown(canClose: boolean, chromeClose: boolean | undefined): boolean;
+/** The item order after moving `from` to `to`, for the `reorder` request. */
+export declare function reorderIds(ids: readonly string[], from: number, to: number): string[];

package/dist/section/policy.js

@@ -0,0 +1,17 @@
+/** The structured form of the existing `multiple` shorthand. */
+export function visibilityModeFromMultiple(multiple) {
+    return multiple ? "multiple" : "mutex";
+}
+/** A close control exists only when the section permits closing and chrome asks for it. */
+export function closeShown(canClose, chromeClose) {
+    return canClose && chromeClose === true;
+}
+/** The item order after moving `from` to `to`, for the `reorder` request. */
+export function reorderIds(ids, from, to) {
+    if (from < 0 || to < 0 || from >= ids.length || to >= ids.length)
+        throw new RangeError("reorder indexes are out of range");
+    const order = [...ids];
+    const [id] = order.splice(from, 1);
+    order.splice(to, 0, id);
+    return order;
+}

package/dist/section/section.d.ts

@@ -1,10 +1,28 @@
 import { AsterElement, type View } from "../base/element.ts";
+/** Presentational chrome for a section, independent of its contents. */
+export interface SectionChrome {
+    /** Window-bar look, via the shared title-bar template (window/chrome.ts). */
+    titleBar?: boolean;
+    /** Separate fold chevron in the title bar. Defaults to true with `titleBar`; ignored without it. */
+    fold?: boolean;
+    /** Close control; activating it emits a cancelable `close` action event. */
+    close?: boolean;
+    /** Footer region at the bottom of the body area. */
+    footer?: boolean;
+    /** Where `summary` shows: only while collapsed (default), or always. */
+    status?: "collapsed" | "always";
+}
 /**
  * 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.
+ *
+ * Optional chrome turns it into an in-flow panel: a shared window title bar
+ * with a separate fold control, a close control, a footer and a status that
+ * can stay visible. `collapsible: false` renders a plain heading and keeps
+ * the body open. The panel never closes itself; the host handles `close`.
  */
 export declare class Section extends AsterElement {
     #private;
@@ -24,6 +42,18 @@ export declare class Section extends AsterElement {
     /** Shown beside the heading while collapsed, such as "2 changes". */
     get summary(): View;
     set summary(v: View);
+    /** Presentational chrome. Default `{}`; omitted fields keep their defaults. */
+    get chrome(): SectionChrome;
+    set chrome(v: SectionChrome | undefined);
+    /** Whether the heading toggles the body. Default `true`. */
+    get collapsible(): boolean;
+    set collapsible(v: boolean);
+    /** Whether the section permits a close control. Default `true`; `chrome.close` still chooses whether to show it as [[object:SectionChrome]]. */
+    get canClose(): boolean;
+    set canClose(v: boolean);
+    /** Footer content; setting it also sets `chrome.footer`. Default `nothing`. */
+    get footer(): View;
+    set footer(v: View);
     protected render(): View;
     protected updated(): void;
     disconnectedCallback(): void;

package/dist/section/section.js

@@ -1,11 +1,18 @@
 import { html, nothing } from "lit-html";
 import { AsterElement, define, uid } from "../base/element.js";
+import { windowBar } from "../window/chrome.js";
+import { closeShown } from "./policy.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.
+ *
+ * Optional chrome turns it into an in-flow panel: a shared window title bar
+ * with a separate fold control, a close control, a footer and a status that
+ * can stay visible. `collapsible: false` renders a plain heading and keeps
+ * the body open. The panel never closes itself; the host handles `close`.
  */
 export class Section extends AsterElement {
     #heading = this.prop("");
@@ -15,6 +22,10 @@ export class Section extends AsterElement {
     #actions = this.prop(nothing);
     #level = this.prop(2);
     #disabled = this.prop(false);
+    #chrome = this.prop({});
+    #collapsible = this.prop(true);
+    #canClose = this.prop(true);
+    #footer = this.prop(nothing);
     #id = uid("aster-section");
     /** Whether the body held an error after the last commit, so only a new one opens the section. */
     #errored = false;
@@ -33,8 +44,8 @@ export class Section extends AsterElement {
         return this.#open.value;
     }
     set open(v) {
-        if (!v && this.querySelector(".aster-section-body")?.contains(document.activeElement))
-            this.querySelector(".aster-section-head button")?.focus();
+        if (!v && this.#collapsible.peek() && this.querySelector(".aster-section-body")?.contains(document.activeElement))
+            this.#toggleButton()?.focus();
         this.#open.value = v;
     }
     get body() {
@@ -57,9 +68,38 @@ export class Section extends AsterElement {
     set summary(v) {
         this.#summary.value = v;
     }
+    /** Presentational chrome. Default `{}`; omitted fields keep their defaults. */
+    get chrome() {
+        return this.#chrome.value;
+    }
+    set chrome(v) {
+        this.#chrome.value = Object.freeze({ ...(v ?? {}) });
+    }
+    /** Whether the heading toggles the body. Default `true`. */
+    get collapsible() { return this.#collapsible.value; }
+    set collapsible(v) { this.#collapsible.value = v; }
+    /** Whether the section permits a close control. Default `true`; `chrome.close` still chooses whether to show it as [[object:SectionChrome]]. */
+    get canClose() { return this.#canClose.value; }
+    set canClose(v) { this.#canClose.value = v; }
+    /** Footer content; setting it also sets `chrome.footer`. Default `nothing`. */
+    get footer() { return this.#footer.value; }
+    set footer(v) {
+        this.#footer.value = v;
+        this.#chrome.value = Object.freeze({ ...this.#chrome.peek(), footer: v !== nothing });
+    }
     render() {
         const open = this.#open.value;
-        this.toggleAttribute("data-open", open);
+        const collapsible = this.#collapsible.value;
+        const chrome = this.#chrome.value;
+        const expanded = open || !collapsible;
+        this.toggleAttribute("data-open", expanded);
+        return this.#defaultChrome(collapsible, chrome) ? this.#defaultView(open) : this.#panelView(open, collapsible, expanded, chrome);
+    }
+    /** No option set: keep the original template verbatim, including its markers. */
+    #defaultChrome(collapsible, chrome) {
+        return collapsible && chrome.titleBar !== true && chrome.close !== true && chrome.footer !== true && chrome.status !== "always";
+    }
+    #defaultView(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")}>
@@ -73,6 +113,24 @@ export class Section extends AsterElement {
         <div class="aster-section-inner">${this.#body.value}</div>
       </div>`;
     }
+    #panelView(open, collapsible, expanded, chrome) {
+        if (chrome.titleBar === true)
+            return html `${this.#titleBar(expanded, collapsible, chrome)}
+      ${this.#bodyRegion(collapsible, chrome)}`;
+        return html `<div class="aster-section-head" role="heading" aria-level=${this.#level.value}>
+        ${collapsible
+            ? html `<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>`
+            : html `<span class="aster-section-title">${this.#heading.value}</span>`}
+        ${this.#showsSummary(expanded, chrome) ? html `<span class="aster-section-summary">${this.#summary.value}</span>` : nothing}
+        ${this.#actions.value === nothing ? nothing : html `<div class="aster-section-actions">${this.#actions.value}</div>`}
+        ${closeShown(this.#canClose.value, chrome.close) ? this.#close() : nothing}
+      </div>
+      ${this.#bodyRegion(collapsible, chrome)}`;
+    }
     updated() {
         if (!this.#errors) {
             this.#errors = new MutationObserver(() => this.#checkErrors());
@@ -85,6 +143,49 @@ export class Section extends AsterElement {
         this.#errors = undefined;
         super.disconnectedCallback();
     }
+    /** The retained body, inert while collapsed; the footer moves with it. */
+    #bodyRegion(collapsible, chrome) {
+        return html `<div class="aster-section-body" id=${this.#id} role="region" aria-label=${this.#heading.value} ?inert=${collapsible && !this.#open.value}>
+        <div class="aster-section-inner">${this.#body.value}${chrome.footer === true ? html `<div class="aster-section-footer">${this.#footer.value}</div>` : nothing}</div>
+      </div>`;
+    }
+    /** The window-style bar: shared title template, status, and bar controls. */
+    #titleBar(expanded, collapsible, chrome) {
+        const heading = html `<span class="aster-section-title">${this.#heading.value}</span>${this.#showsSummary(expanded, chrome)
+            ? html `<span class="aster-section-summary">${this.#summary.value}</span>`
+            : nothing}`;
+        const actions = html `${this.#actions.value === nothing ? nothing : html `<div class="aster-section-actions">${this.#actions.value}</div>`}${collapsible && chrome.fold !== false ? this.#fold() : nothing}${closeShown(this.#canClose.value, chrome.close) ? this.#close() : nothing}`;
+        return windowBar(`${this.#id}-heading`, heading, actions, undefined, { level: this.#level.value });
+    }
+    #showsSummary(expanded, chrome) {
+        return !expanded || chrome.status === "always";
+    }
+    #fold() {
+        const open = this.#open.value;
+        return html `<button type="button" class="aster-section-fold" ?disabled=${this.#disabled.value}
+      aria-expanded=${open ? "true" : "false"} aria-controls=${this.#id}
+      aria-label=${open ? `Collapse ${this.#heading.value}` : `Expand ${this.#heading.value}`}
+      @click=${(event) => {
+            event.stopPropagation();
+            this.#toggle(!this.#open.peek(), "user");
+        }}>
+      <svg viewBox="0 0 10 10" aria-hidden="true"><path d="M2 3.5 5 6.5l3-3"/></svg>
+    </button>`;
+    }
+    #close() {
+        return html `<button type="button" class="aster-section-close" aria-label=${`Close ${this.#heading.value}`}
+      @click=${(event) => {
+            event.stopPropagation();
+            this.emit("close");
+        }}>
+      <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg>
+    </button>`;
+    }
+    #toggleButton() {
+        return this.querySelector(":scope > .aster-window-bar > .aster-section-fold")
+            ?? this.querySelector(":scope > .aster-section-head > button:not(.aster-section-close)")
+            ?? undefined;
+    }
     #checkErrors() {
         const errored = this.querySelector(".aster-section-body [aria-invalid='true']") !== null;
         if (errored && !this.#errored && !this.#open.peek())
@@ -92,6 +193,8 @@ export class Section extends AsterElement {
         this.#errored = errored;
     }
     #toggle(open, reason) {
+        if (!this.#collapsible.peek())
+            return;
         this.#open.value = open;
         this.emit("section-toggle", { open, reason });
     }

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

@@ -15,6 +15,18 @@ export declare class Choice extends AsterElement {
     set label(v: string);
     get placeholder(): string;
     set placeholder(v: string);
+    /** Filters the list as the person types. Default `false`. */
+    get filter(): boolean;
+    set filter(v: boolean);
+    /** Shows a clear button while a value is chosen. Default `false`. */
+    get clearable(): boolean;
+    set clearable(v: boolean);
+    /** What the filtered list says when nothing matches. Default "No matches". */
+    get noResults(): string;
+    set noResults(v: string);
+    /** Removes the choice from the tab order and stops it opening. Default `false`. */
+    get disabled(): boolean;
+    set disabled(v: boolean);
     focus(options?: FocusOptions): void;
     protected render(): View;
 }

package/dist/select/choice-element.js

@@ -9,6 +9,10 @@ export class Choice extends AsterElement {
     #value = this.prop(undefined);
     #label = this.prop("");
     #placeholder = this.prop("Choose…");
+    #filter = this.prop(false);
+    #clearable = this.prop(false);
+    #noResults = this.prop("No matches");
+    #disabled = this.prop(false);
     #state = new ChoiceState();
     #id = uid("aster-choice");
     get options() {
@@ -35,6 +39,34 @@ export class Choice extends AsterElement {
     set placeholder(v) {
         this.#placeholder.value = v;
     }
+    /** Filters the list as the person types. Default `false`. */
+    get filter() {
+        return this.#filter.value;
+    }
+    set filter(v) {
+        this.#filter.value = v;
+    }
+    /** Shows a clear button while a value is chosen. Default `false`. */
+    get clearable() {
+        return this.#clearable.value;
+    }
+    set clearable(v) {
+        this.#clearable.value = v;
+    }
+    /** What the filtered list says when nothing matches. Default "No matches". */
+    get noResults() {
+        return this.#noResults.value;
+    }
+    set noResults(v) {
+        this.#noResults.value = v;
+    }
+    /** Removes the choice from the tab order and stops it opening. Default `false`. */
+    get disabled() {
+        return this.#disabled.value;
+    }
+    set disabled(v) {
+        this.#disabled.value = v;
+    }
     focus(options) {
         this.querySelector("[role=combobox]")?.focus(options);
     }
@@ -45,6 +77,10 @@ export class Choice extends AsterElement {
             value: this.#value.value,
             placeholder: this.#placeholder.value,
             label: this.#label.value,
+            filter: this.#filter.value,
+            clearable: this.#clearable.value,
+            noResults: this.#noResults.value,
+            disabled: this.#disabled.value,
             choose: (v) => {
                 this.#value.value = v;
                 this.emit("change", v);

package/dist/select/choice.d.ts

@@ -4,10 +4,11 @@ export interface Option {
     readonly value: Value;
     readonly label: string;
 }
-/** Whether a choice's list is open, and which option is active in it. */
+/** Whether a choice's list is open, which option is active in it, and the filter text. */
 export declare class ChoiceState {
     readonly open: import("@preact/signals-core").Signal<boolean>;
     readonly active: import("@preact/signals-core").Signal<number>;
+    readonly query: import("@preact/signals-core").Signal<string>;
 }
 export interface ChoiceProps {
     readonly id: string;
@@ -16,11 +17,18 @@ export interface ChoiceProps {
     /** Shown when the value isn't one of the options. */
     readonly placeholder: string;
     readonly readOnly?: boolean;
+    readonly disabled?: boolean;
     readonly label?: string;
     readonly labelledBy?: string;
     readonly required?: boolean;
     readonly invalid?: boolean;
     readonly describedBy?: string;
+    /** Filters the options as the person types, and shows `noResults` when nothing matches. */
+    readonly filter?: boolean;
+    /** Shows a clear button while a value is chosen. */
+    readonly clearable?: boolean;
+    /** What the open list says when the filter matches nothing. Default "No matches". */
+    readonly noResults?: string;
     readonly choose: (value: Value) => void;
 }
 /**
@@ -29,6 +37,8 @@ export interface ChoiceProps {
  *
  * 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`.
+ * Escape and Tab close. With `filter`, typed text narrows the list and
+ * Backspace edits it; Enter chooses the active option. The active option is
+ * `aria-activedescendant`.
  */
 export declare function choiceView(state: ChoiceState, p: ChoiceProps): TemplateResult;