@unofficialbox/box-open-elements 0.5.0 → 0.6.0

package/dist/components/forms/select.js

@@ -1,6 +1,15 @@
 import { FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDataFromNamedValues, formDescriptionMarkup, formErrorMessageMarkup, stringValuesFromFormValue, } from "../../core/index.js";
 import { boeControl, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
+import { boeMotionDuration, boeMotionEasing, boeReducedMotionStyles, } from "../../foundations/motion/index.js";
 const DEFAULT_TAG_NAME = "box-select";
+/** Attribute payloads are author input — validate every record. */
+const isSelectOptionRecord = (value) => {
+    if (typeof value !== "object" || value === null) {
+        return false;
+    }
+    const option = value;
+    return typeof option.value === "string" && typeof option.label === "string";
+};
 const escapeHtml = (value) => value
     .replaceAll("&", "&")
     .replaceAll("<", "&lt;")
@@ -77,16 +86,56 @@ const selectStyles = `
     border-radius: ${boeRadius.size};
   }
 
+  /* Control wrapper exists for the trailing status; with no status it is
+     layout-neutral. */
+  [part="control"] {
+    position: relative;
+    display: block;
+  }
+
+  [part="status"] {
+    position: absolute;
+    inset-block-start: 50%;
+    /* Left of the chevron. */
+    inset-inline-end: 2rem;
+    transform: translateY(-50%);
+    display: none;
+    align-items: center;
+    pointer-events: none;
+  }
+
+  [part="control"][data-status="loading"] [part="status"] {
+    display: inline-flex;
+  }
+
+  [part="spinner"] {
+    inline-size: 1rem;
+    block-size: 1rem;
+    border-radius: 999px;
+    border: 2px solid color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 20%, transparent);
+    border-top-color: var(--boe-token-surface-surface-brand, #0061d5);
+    animation: boe-select-spin ${boeMotionDuration.spin} ${boeMotionEasing.linear} infinite;
+  }
+
+  @keyframes boe-select-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  ${boeReducedMotionStyles('[part="spinner"]', "animation-duration: 1.6s;")}
+
   ${boeFormFieldErrorStyles}
   ${boeFormFieldSupportStyles}
 `;
+const spinnerMarkup = '<span part="spinner" aria-hidden="true"></span>';
 export class Select extends FormAssociatedElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.fieldObservedAttributes,
             "disabled",
+            "empty-text",
             "label",
+            "loading",
             "multiple",
             "options",
             "value",
@@ -98,6 +147,8 @@ export class Select extends FormAssociatedElement {
     labelEl;
     descriptionEl;
     errorEl;
+    controlEl;
+    statusEl;
     /** Allow selecting several options (native multi-select list box). */
     get multiple() {
         return this.hasAttribute("multiple");
@@ -146,6 +197,28 @@ export class Select extends FormAssociatedElement {
     set label(value) {
         this.setAttribute("label", value);
     }
+    /**
+     * True while options are being fetched: shows a trailing spinner (matching
+     * `box-text-field`'s status vocabulary) and states "Loading options…" in
+     * the control instead of leaving it blank.
+     */
+    get loading() {
+        return this.hasAttribute("loading");
+    }
+    set loading(value) {
+        this.toggleAttribute("loading", Boolean(value));
+    }
+    /**
+     * What the control says when it has no options and is not loading. An
+     * async-loaded select with an empty result must say so — a silently blank
+     * control reads as broken.
+     */
+    get emptyText() {
+        return this.getAttribute("empty-text") ?? "No options available";
+    }
+    set emptyText(value) {
+        this.setAttribute("empty-text", value);
+    }
     get options() {
         const raw = this.getAttribute("options");
         if (!raw) {
@@ -153,7 +226,9 @@ export class Select extends FormAssociatedElement {
         }
         try {
             const parsed = JSON.parse(raw);
-            return Array.isArray(parsed) ? parsed : [];
+            return Array.isArray(parsed) && parsed.every(isSelectOptionRecord)
+                ? parsed
+                : [];
         }
         catch {
             return [];
@@ -202,7 +277,10 @@ export class Select extends FormAssociatedElement {
       <label part="field">
         <span part="label"></span>
         ${formDescriptionMarkup()}
-        <select part="select"></select>
+        <span part="control">
+          <select part="select"></select>
+          <span part="status" aria-hidden="true"></span>
+        </span>
         ${formErrorMessageMarkup()}
       </label>
     `;
@@ -210,6 +288,8 @@ export class Select extends FormAssociatedElement {
         this.descriptionEl = this.shadowRoot.querySelector('[part="description"]');
         this.selectEl = this.shadowRoot.querySelector('[part="select"]');
         this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
+        this.controlEl = this.shadowRoot.querySelector('[part="control"]');
+        this.statusEl = this.shadowRoot.querySelector('[part="status"]');
     }
     setupListeners() {
         this.selectEl.addEventListener("change", event => {
@@ -262,8 +342,25 @@ export class Select extends FormAssociatedElement {
         }
         this.labelEl.textContent = this.label;
         // Rebuild options (the list itself may change), grouping by `group`.
+        // While loading — and when an async load came back empty — the control
+        // says so in words instead of presenting a silently blank select.
         this.selectEl.multiple = this.multiple;
-        this.selectEl.innerHTML = this.optionsMarkup();
+        const options = this.options;
+        if (this.loading) {
+            this.controlEl.dataset.status = "loading";
+            this.statusEl.innerHTML = spinnerMarkup;
+            this.selectEl.innerHTML = `<option value="" disabled selected>Loading options…</option>`;
+        }
+        else if (options.length === 0) {
+            this.controlEl.removeAttribute("data-status");
+            this.statusEl.innerHTML = "";
+            this.selectEl.innerHTML = `<option value="" disabled selected>${escapeHtml(this.emptyText)}</option>`;
+        }
+        else {
+            this.controlEl.removeAttribute("data-status");
+            this.statusEl.innerHTML = "";
+            this.selectEl.innerHTML = this.optionsMarkup();
+        }
         // Patch selected value(s) and disabled after rebuilding options.
         if (this.multiple) {
             const selected = new Set(this.valuesInternal);

package/dist/components/forms/text-field.d.ts

@@ -1,9 +1,14 @@
 import { FormAssociatedElement } from "../../core/index.js";
 import type { FormValue } from "../../core/index.js";
+/** Detail of this element's `value-changed` event, for typed listeners. */
+export interface TextFieldValueChangedDetail {
+    value: string;
+}
 export declare class TextField extends FormAssociatedElement {
     static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
+    private revealed;
     private inputEl;
     private labelEl;
     private descriptionEl;
@@ -11,9 +16,25 @@ export declare class TextField extends FormAssociatedElement {
     private controlEl;
     private iconSlot;
     private statusEl;
+    private revealEl;
     /** Input type passthrough (text/email/tel/url/password/search/number). */
     get type(): string;
     set type(value: string);
+    /**
+     * `autocomplete` passthrough to the inner input ("email",
+     * "current-password", "off", …). Without it password managers and
+     * autofill cannot classify the field — the shadow boundary hides any
+     * autocomplete the host writes on the custom element itself.
+     */
+    get autocomplete(): string;
+    set autocomplete(value: string);
+    /**
+     * Opt-in visibility toggle for `type="password"`: renders a Show/Hide
+     * control that swaps the inner input between password and text without
+     * changing the field's declared `type`.
+     */
+    get reveal(): boolean;
+    set reveal(value: boolean);
     /** Shows a trailing spinner (e.g. while validating/looking up asynchronously). */
     get loading(): boolean;
     set loading(value: boolean);

package/dist/components/forms/text-field.js

@@ -109,6 +109,47 @@ const textFieldStyles = `
     color: var(--boe-token-surface-status-surface-success, #26c281);
   }
 
+  /* Password visibility toggle: a word, not an eye glyph, so the state is
+     stated. Hidden entirely unless reveal is opted in on a password. */
+  [part="reveal"] {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: 0.35rem;
+    transform: translateY(-50%);
+    appearance: none;
+    border: 0;
+    padding: 0.15rem 0.4rem;
+    border-radius: 4px;
+    background: transparent;
+    font: inherit;
+    font-size: 0.78rem;
+    font-weight: 700;
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+    cursor: pointer;
+  }
+
+  [part="reveal"]:hover {
+    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 8%, transparent);
+  }
+
+  [part="reveal"]:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 34%, transparent);
+    outline-offset: 1px;
+  }
+
+  [part="control"][data-reveal="true"] [part="input"] {
+    padding-inline-end: 3.4rem;
+  }
+
+  /* Reveal and a trailing status can coexist: the status shifts inward. */
+  [part="control"][data-reveal="true"] [part="status"] {
+    inset-inline-end: 3.4rem;
+  }
+
+  [part="control"][data-reveal="true"][data-status] [part="input"] {
+    padding-inline-end: 5rem;
+  }
+
   ${boeFormFieldErrorStyles}
   ${boeFormFieldSupportStyles}
 `;
@@ -117,9 +158,11 @@ export class TextField extends FormAssociatedElement {
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.fieldObservedAttributes,
+            "autocomplete",
             "disabled",
             "label",
             "placeholder",
+            "reveal",
             "type",
             "loading",
             "valid",
@@ -127,6 +170,7 @@ export class TextField extends FormAssociatedElement {
         ];
     }
     valueInternal = "";
+    revealed = false;
     inputEl;
     labelEl;
     descriptionEl;
@@ -134,6 +178,7 @@ export class TextField extends FormAssociatedElement {
     controlEl;
     iconSlot;
     statusEl;
+    revealEl;
     /** Input type passthrough (text/email/tel/url/password/search/number). */
     get type() {
         const value = this.getAttribute("type");
@@ -142,6 +187,34 @@ export class TextField extends FormAssociatedElement {
     set type(value) {
         this.setAttribute("type", value);
     }
+    /**
+     * `autocomplete` passthrough to the inner input ("email",
+     * "current-password", "off", …). Without it password managers and
+     * autofill cannot classify the field — the shadow boundary hides any
+     * autocomplete the host writes on the custom element itself.
+     */
+    get autocomplete() {
+        return this.getAttribute("autocomplete") ?? "";
+    }
+    set autocomplete(value) {
+        if (value) {
+            this.setAttribute("autocomplete", value);
+        }
+        else {
+            this.removeAttribute("autocomplete");
+        }
+    }
+    /**
+     * Opt-in visibility toggle for `type="password"`: renders a Show/Hide
+     * control that swaps the inner input between password and text without
+     * changing the field's declared `type`.
+     */
+    get reveal() {
+        return this.hasAttribute("reveal");
+    }
+    set reveal(value) {
+        this.toggleAttribute("reveal", Boolean(value));
+    }
     /** Shows a trailing spinner (e.g. while validating/looking up asynchronously). */
     get loading() {
         return this.hasAttribute("loading");
@@ -214,6 +287,7 @@ export class TextField extends FormAssociatedElement {
           <slot name="icon" part="icon"></slot>
           <input type="text" part="input" />
           <span part="status" aria-hidden="true"></span>
+          <button type="button" part="reveal" aria-pressed="false" hidden></button>
         </span>
         ${formErrorMessageMarkup()}
       </label>
@@ -225,9 +299,14 @@ export class TextField extends FormAssociatedElement {
         this.controlEl = this.shadowRoot.querySelector('[part="control"]');
         this.iconSlot = this.shadowRoot.querySelector('slot[name="icon"]');
         this.statusEl = this.shadowRoot.querySelector('[part="status"]');
+        this.revealEl = this.shadowRoot.querySelector('[part="reveal"]');
     }
     setupListeners() {
         this.iconSlot.addEventListener("slotchange", () => this.syncIconSlot());
+        this.revealEl.addEventListener("click", () => {
+            this.revealed = !this.revealed;
+            this.update();
+        });
         this.inputEl.addEventListener("input", event => {
             const nextValue = event.currentTarget.value;
             this.valueInternal = nextValue;
@@ -253,9 +332,29 @@ export class TextField extends FormAssociatedElement {
             return;
         }
         this.labelEl.textContent = this.label;
-        this.inputEl.type = this.type;
+        const revealActive = this.reveal && this.type === "password";
+        this.inputEl.type = revealActive && this.revealed ? "text" : this.type;
         this.inputEl.placeholder = this.placeholder;
+        if (this.autocomplete) {
+            this.inputEl.setAttribute("autocomplete", this.autocomplete);
+        }
+        else {
+            this.inputEl.removeAttribute("autocomplete");
+        }
         this.syncIconSlot();
+        // The reveal control only exists for a password with reveal opted in.
+        this.revealEl.hidden = !revealActive;
+        this.controlEl.dataset.reveal = revealActive ? "true" : "false";
+        if (revealActive) {
+            // The visible word and the accessible name agree; aria-pressed makes
+            // the toggle state machine explicit to AT.
+            this.revealEl.textContent = this.revealed ? "Hide" : "Show";
+            this.revealEl.setAttribute("aria-label", this.revealed ? "Hide password" : "Show password");
+            this.revealEl.setAttribute("aria-pressed", String(this.revealed));
+        }
+        else {
+            this.revealed = false;
+        }
         // Trailing status: loading spinner takes precedence over the valid check.
         if (this.loading) {
             this.controlEl.dataset.status = "loading";

package/dist/components/layout/nav-sidebar.d.ts

@@ -9,6 +9,12 @@ import { BaseElement } from "../../core/index.js";
  * Collapsed icon contract: slot `a`/`button` rows with an icon and a
  * `[data-nav-label]` span. Host exposes `--boe-nav-label-display` (`none` when
  * collapsed) so light-DOM CSS can hide labels without piercing the shadow tree.
+ *
+ * Hiding the label span removes the row's only accessible name, so while
+ * collapsed this element mirrors each row's label text onto `aria-label` (and
+ * `title`, for the hover tooltip) — but only on rows the host has not named
+ * itself, and it removes exactly what it added on expand. The host stays the
+ * authority: an author-set `aria-label` or `title` is never overwritten.
  */
 export declare class NavSidebar extends BaseElement {
     static readonly tagName: string;
@@ -19,5 +25,13 @@ export declare class NavSidebar extends BaseElement {
     get label(): string;
     set label(value: string);
     protected renderTemplate(): void;
+    protected setupListeners(): void;
+    /**
+     * Collapsing hides `[data-nav-label]`, which is a row's only accessible
+     * name. Mirror the label text onto `aria-label`/`title` while collapsed —
+     * marked, so expand removes only what collapse added and a host-authored
+     * name is never touched.
+     */
+    private syncCollapsedRowNames;
     protected update(): void;
 }

package/dist/components/layout/nav-sidebar.js

@@ -134,6 +134,12 @@ const navSidebarStyles = `
  * Collapsed icon contract: slot `a`/`button` rows with an icon and a
  * `[data-nav-label]` span. Host exposes `--boe-nav-label-display` (`none` when
  * collapsed) so light-DOM CSS can hide labels without piercing the shadow tree.
+ *
+ * Hiding the label span removes the row's only accessible name, so while
+ * collapsed this element mirrors each row's label text onto `aria-label` (and
+ * `title`, for the hover tooltip) — but only on rows the host has not named
+ * itself, and it removes exactly what it added on expand. The host stays the
+ * authority: an author-set `aria-label` or `title` is never overwritten.
  */
 export class NavSidebar extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
@@ -173,12 +179,55 @@ export class NavSidebar extends BaseElement {
     `;
         this.sidebarEl = this.shadowRoot.querySelector('[part="sidebar"]');
     }
+    setupListeners() {
+        // Rows slotted in while already collapsed still need their names mirrored.
+        this.shadowRoot
+            ?.querySelector('[part="body"] slot')
+            ?.addEventListener("slotchange", () => {
+            this.update();
+        });
+    }
+    /**
+     * Collapsing hides `[data-nav-label]`, which is a row's only accessible
+     * name. Mirror the label text onto `aria-label`/`title` while collapsed —
+     * marked, so expand removes only what collapse added and a host-authored
+     * name is never touched.
+     */
+    syncCollapsedRowNames() {
+        for (const row of Array.from(this.querySelectorAll("a, button"))) {
+            if (this.collapsed) {
+                const label = row.querySelector("[data-nav-label]")?.textContent?.trim();
+                if (!label) {
+                    continue;
+                }
+                if (!row.hasAttribute("aria-label")) {
+                    row.setAttribute("aria-label", label);
+                    row.setAttribute("data-boe-managed-name", "");
+                }
+                if (!row.hasAttribute("title")) {
+                    row.setAttribute("title", label);
+                    row.setAttribute("data-boe-managed-title", "");
+                }
+            }
+            else {
+                if (row.hasAttribute("data-boe-managed-name")) {
+                    row.removeAttribute("aria-label");
+                    row.removeAttribute("data-boe-managed-name");
+                }
+                if (row.hasAttribute("data-boe-managed-title")) {
+                    row.removeAttribute("title");
+                    row.removeAttribute("data-boe-managed-title");
+                }
+            }
+        }
+    }
     update() {
         if (!this.sidebarEl) {
             return;
         }
         this.sidebarEl.dataset.collapsed = this.collapsed ? "true" : "false";
         this.sidebarEl.setAttribute("aria-label", this.label);
+        this.syncCollapsedRowNames();
     }
 }
 NavSidebar.register();

package/dist/components/layout/split-view.d.ts

@@ -1,4 +1,8 @@
 import { BaseElement } from "../../core/index.js";
+/** Detail of `detail-dismissed`: what asked the slide-over to close. */
+export interface SplitViewDetailDismissedDetail {
+    source: "escape";
+}
 export declare class SplitView extends BaseElement {
     static readonly tagName: string;
     static get observedAttributes(): string[];
@@ -11,6 +15,16 @@ export declare class SplitView extends BaseElement {
     set ratio(value: number);
     get resizable(): boolean;
     set resizable(value: boolean);
+    /** "auto" collapses to master-detail when the container narrows. */
+    get collapse(): string;
+    set collapse(value: string);
+    /**
+     * Host-controlled: whether the secondary pane shows as a slide-over while
+     * collapsed. The host sets it on selection and clears it on
+     * `detail-dismissed` — selection state stays where it lives, in the list.
+     */
+    get detailOpen(): boolean;
+    set detailOpen(value: boolean);
     private setRatioFromResize;
     private stopResize;
     protected renderTemplate(): void;

package/dist/components/layout/split-view.js

@@ -33,11 +33,47 @@ const splitViewStyles = `
     height: 100%;
     background: color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
   }
+
+  :host {
+    container-type: inline-size;
+  }
+
+  /* Master-detail collapse (opt-in via collapse="auto"): when the container
+     narrows, the primary pane takes the full width and the secondary pane
+     becomes a slide-over that the host opens with detail-open — typically on
+     selection — and closes by clearing it (Escape asks via detail-dismissed).
+     The slotted content never moves; only the shadow wrapper changes shape. */
+  @container (max-width: 640px) {
+    :host([collapse="auto"]) [part="split-view"] {
+      grid-template-columns: minmax(0, 1fr) !important;
+    }
+
+    :host([collapse="auto"]) [part="separator"] {
+      display: none;
+    }
+
+    :host([collapse="auto"]) [part="secondary"] {
+      display: none;
+    }
+
+    :host([collapse="auto"][detail-open]) [part="secondary"] {
+      display: block;
+      position: fixed;
+      inset-block: 0;
+      inset-inline-end: 0;
+      z-index: 1100;
+      width: min(90vw, 26rem);
+      overflow: auto;
+      background: var(--boe-token-surface-surface, #ffffff);
+      border-inline-start: 1px solid var(--boe-token-stroke-stroke, #e8e8e8);
+      box-shadow: -12px 0 32px rgb(0 0 0 / 18%);
+    }
+  }
 `;
 export class SplitView extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["label", "ratio", "resizable"];
+        return ["collapse", "detail-open", "label", "ratio", "resizable"];
     }
     isResizing = false;
     splitViewEl;
@@ -64,6 +100,29 @@ export class SplitView extends BaseElement {
     set resizable(value) {
         this.toggleAttribute("resizable", value);
     }
+    /** "auto" collapses to master-detail when the container narrows. */
+    get collapse() {
+        return this.getAttribute("collapse") ?? "";
+    }
+    set collapse(value) {
+        if (value) {
+            this.setAttribute("collapse", value);
+        }
+        else {
+            this.removeAttribute("collapse");
+        }
+    }
+    /**
+     * Host-controlled: whether the secondary pane shows as a slide-over while
+     * collapsed. The host sets it on selection and clears it on
+     * `detail-dismissed` — selection state stays where it lives, in the list.
+     */
+    get detailOpen() {
+        return this.hasAttribute("detail-open");
+    }
+    set detailOpen(value) {
+        this.toggleAttribute("detail-open", Boolean(value));
+    }
     setRatioFromResize(nextRatio) {
         const clamped = Math.max(0.2, Math.min(0.8, nextRatio));
         const previous = this.ratio;
@@ -108,6 +167,26 @@ export class SplitView extends BaseElement {
         this.separatorEl = this.shadowRoot.querySelector('[part="separator"]');
     }
     setupListeners() {
+        // Escape inside the collapsed slide-over asks the host to close it; the
+        // host owns detail-open, so this only asks.
+        this.addEventListener("keydown", event => {
+            const keyboardEvent = event;
+            if (keyboardEvent.key !== "Escape" || !this.detailOpen || this.collapse !== "auto") {
+                return;
+            }
+            // The slide-over only exists under the 640px container query; on a wide
+            // container the secondary pane is an ordinary pane and Escape means
+            // nothing. Mirror the CSS condition rather than emitting a phantom ask.
+            if (this.offsetWidth > 640) {
+                return;
+            }
+            keyboardEvent.preventDefault();
+            this.dispatchEvent(new CustomEvent("detail-dismissed", {
+                bubbles: true,
+                composed: true,
+                detail: { source: "escape" },
+            }));
+        });
         this.separatorEl.addEventListener("pointerdown", event => {
             const pointerEvent = event;
             this.isResizing = true;

package/dist/components/overlays/command-palette.d.ts

@@ -0,0 +1,62 @@
+import type { CommandDescriptor } from "./command-types.js";
+import { BaseElement } from "../../core/index.js";
+/**
+ * Keyboard-first action launcher (CLM gap 4) over the existing overlay and
+ * listbox machinery.
+ *
+ * Follows the ARIA combobox-with-listbox pattern: focus never leaves the
+ * search input, so typing and navigating are the same gesture. The active
+ * option is communicated with `aria-activedescendant` rather than by moving
+ * focus, which is what lets Up/Down browse results while the query stays
+ * editable.
+ *
+ * The host owns what commands mean — the palette only reports the choice.
+ */
+export declare class CommandPalette extends BaseElement {
+    static readonly tagName: string;
+    static get observedAttributes(): string[];
+    private hostEl;
+    private readonly focusRestore;
+    private openValue;
+    private wasOpen;
+    private query;
+    private activeIndex;
+    /** Flattened, ranked matches — the index space the keyboard walks. */
+    private rankedMatches;
+    private commandsRaw;
+    private commandsCache;
+    private recentIdsValue;
+    private readonly onDocumentKeydown;
+    get open(): boolean;
+    set open(value: boolean);
+    get placeholder(): string;
+    set placeholder(value: string);
+    /**
+     * Global shortcut that opens the palette, e.g. `mod+k`. `mod` resolves to
+     * Cmd or Ctrl per platform. Omit to let the host own the trigger.
+     */
+    get hotkey(): string;
+    set hotkey(value: string);
+    get hideDisabled(): boolean;
+    set hideDisabled(value: boolean);
+    /** Command catalogue; JSON payloads are validated per record. */
+    get commands(): CommandDescriptor[];
+    set commands(value: CommandDescriptor[]);
+    /** Most recently run command ids, most recent first; boosts ranking. */
+    get recentIds(): string[];
+    set recentIds(value: string[]);
+    /** The ranked matches currently on screen. */
+    get visibleCommands(): CommandDescriptor[];
+    show(): void;
+    hide(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private runActive;
+    private moveActive;
+    private scrollActiveIntoView;
+    private optionHtml;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}