@fusion.dev/helix-headless 0.143.0 → 0.145.0

package/dist/object-inspector/root/object-inspector-root.d.ts

@@ -1,18 +1,7 @@
 import { AriaForwardController, HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../copy-button/index.js';
-/** One visible line of the tree: a value, where it sits, and whether it is open. */
-interface Row {
-    branch: boolean;
-    depth: number;
-    /** The property name or array index this value is under; absent for the root. */
-    key?: string;
-    open: boolean;
-    path: string;
-    position: number;
-    siblings: number;
-    value: unknown;
-}
+import { type Row } from '../rows.js';
 /**
  * @summary A structured value shown as a tree, where you can close branches,
  * see how many entries each holds, and copy any part.
@@ -34,6 +23,22 @@ interface Row {
  * row. Each row carries its real level, position, and set size, including in
  * a windowed tree.
  *
+ * `active` is the active row's path, written the way a JSON Pointer writes it:
+ * the empty string for the root and `/meta/tags/0` for an entry under it.
+ * Moving to another row sends `helix-before-activate`, which you can cancel,
+ * and then `helix-activate`, both with the path. Writing `active` moves there
+ * and opens the branches around it, and sends nothing. `expanded` holds the
+ * open branches by path, and writing it opens those and closes the rest. A row
+ * that closes around the active one hands it to the nearest open branch.
+ *
+ * `filter` narrows the tree to the entries whose key or value holds the text,
+ * ignoring case, and the branches that lead to them, which it opens. A matched
+ * branch keeps everything under it. Each matched row carries `row-match`, and
+ * a screen reader hears how many entries matched from `result-label` and
+ * `results-label`. `filterable` adds a field that sets it: typing sends
+ * `helix-filter`, which you can cancel, and then `helix-filtered`, and Down
+ * moves from the field to the tree.
+ *
  * A new `value` keeps the branches a reader opened or closed, and the active
  * row, where the new value still has them. A branch the old value did not have
  * opens to `default-depth`.
@@ -53,13 +58,18 @@ interface Row {
  * @aliases JSON viewer, Object viewer, Inspector, Data explorer
  * @documentation https://fusion.dev/helix/components/object-inspector
  *
+ * @event {HelixActivateEvent} helix-activate - The active row moved, by a key or a click. The detail's `value` is its path.
+ * @event {HelixBeforeActivateEvent} helix-before-activate - The active row is about to move, with its new path. Cancelable: cancel it to keep the row where it is.
  * @event {HelixCopyEvent} helix-copy - A value was put on the clipboard, from the copy button or the keyboard.
+ * @event {HelixFilterEvent} helix-filter - Text was typed in the filter field, with what it now holds. Cancelable: cancel it to keep the filter as it was.
+ * @event {HelixFilteredEvent} helix-filtered - The filter field changed `filter`, which now holds the text.
  *
  * @csspart after - The space the rows below the drawn rows would take, when `windowed` is set.
  * @csspart before - The space the rows above the drawn rows would take, when `windowed` is set.
  * @csspart boolean - A `true` or `false`.
  * @csspart copy - The copy button, which copies the active row.
  * @csspart copy-button - The button inside the copy control.
+ * @csspart copy-live - The live region inside the copy button, which says its `pending-label` when the copy becomes pending under focus.
  * @csspart copy-mark - The clipboard icon, and the confirmation icon that replaces it.
  * @csspart copy-text - The words on that button, trimmed to their capitals and baseline.
  * @csspart copy-tooltip - The tooltip, forwarded from the copy button's tooltip.
@@ -77,10 +87,13 @@ interface Row {
  * @csspart header - The bar that holds the label, when there is one.
  * @csspart key - A property name or an array index.
  * @csspart label - The label.
+ * @csspart live - How many entries a filter matched, in a region that screen readers announce when it changes. Drawn from the first filter on. Visually hidden in the styled tier.
  * @csspart null - A `null`.
  * @csspart number - A number.
  * @csspart row - One entry, as a tree item.
  * @csspart row-active - The entry the keyboard is on. Set alongside `row`.
+ * @csspart row-match - An entry whose key or value holds the filter. Set alongside `row`.
+ * @csspart search-field - The field that sets `filter`, with `filterable`.
  * @csspart string - A string, in quotes.
  * @csspart summary - The brackets that stand for a branch's contents.
  * @csspart toggle - The caret on a branch. It points down when the branch is open and sideways when it is closed.
@@ -89,6 +102,17 @@ interface Row {
  * @cssproperty --object-inspector-level - How deep a row is, from 0 at the root, for indenting it.
  */
 export declare class HelixHeadlessObjectInspector extends HelixElement {
+    /**
+     * The active row's path, such as `/meta/tags/0`, and the empty string for the
+     * root.
+     *
+     * Reading gives the row the keys are on. Writing moves there, opening the
+     * branches around it, and sends no event, the way a script's write to any
+     * current value sends none. A path the value does not hold moves to the
+     * nearest branch above it that it does.
+     */
+    get active(): string;
+    set active(path: string);
     /**
      * The copy button's accessible name on a row with a key, with the key filled
      * in as `{name}`.
@@ -108,6 +132,23 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
      * wall of text this exists to avoid.
      */
     defaultDepth: number;
+    /**
+     * The open branches, by path, in no set order.
+     *
+     * Writing opens exactly these and closes every other, keeping the active row
+     * where it stays visible. A property, never an attribute.
+     */
+    get expanded(): string[];
+    set expanded(paths: string[]);
+    /**
+     * Text the tree is narrowed to: the entries whose key or value holds it,
+     * ignoring case, and the branches that lead to them. Empty shows everything.
+     */
+    filter: string;
+    /** Whether to show a field that sets `filter`. */
+    filterable: boolean;
+    /** The filter field's placeholder and accessible name. */
+    filterLabel: string;
     /**
      * The id of a `<script type="application/json">` holding the value.
      *
@@ -142,6 +183,13 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
      * reach a value.
      */
     noCopy: boolean;
+    /** What a screen reader hears when a filter matches one entry. `{count}` is the count. */
+    resultLabel: string;
+    /**
+     * What a screen reader hears when a filter matches any other number of
+     * entries. `{count}` is the count. The two are chosen by `Intl.PluralRules`.
+     */
+    resultsLabel: string;
     /**
      * The tree's accessible name when `label` is empty and the host names it
      * with neither `aria-label` nor `aria-labelledby`.
@@ -168,7 +216,18 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
     /** Which branches are open, by path. */
     private opened;
     /** The row the arrow keys are on, by its place among the visible rows. */
-    private active;
+    private cursor;
+    /** A path written to `active` and not yet found among the rows. */
+    private wanted;
+    /**
+     * The branches written to `expanded`, until the next update applies them.
+     *
+     * Its own field, because a property declared with an accessor is in the
+     * first update's changes whether or not anybody wrote it.
+     */
+    private declared;
+    /** The paths the filter matched, or nothing while there is no filter. */
+    private found;
     /** Set by a keyboard move, so the next render brings the active row into view. */
     private revealing;
     /** What has been typed toward a key, and when the last letter came. */
@@ -177,6 +236,8 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
     private branches;
     /** Carries a host `aria-label` and `aria-labelledby` to the tree, which is what takes focus. */
     protected readonly aria: AriaForwardController;
+    /** Says how many entries a filter matched. */
+    private readonly status;
     /**
      * How tall a row is taken to be before it has been drawn, in pixels.
      *
@@ -192,8 +253,6 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
     /** Every visible row, in order, worked out once per change rather than per read. */
     private rows;
     private readonly copier;
-    /** Every visible row, in order, for the tree as it stands. */
-    private flatten;
     /**
      * Opens every branch shallower than `defaultDepth`.
      *
@@ -204,7 +263,17 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
      * place on every update.
      */
     private seed;
+    /** Opens the branches around each path, where the value has them. */
+    private openAround;
     protected willUpdate(changed: PropertyValues): void;
+    /**
+     * Where the active row goes once the rows have moved: onto `path` where it
+     * is still shown, onto the first match where a filter just hid it, and
+     * otherwise onto the nearest branch around it that is.
+     */
+    private place;
+    /** Says how many entries the filter matched, and nothing for an empty one. */
+    private tell;
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     private load;
@@ -224,6 +293,10 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
     /** What copying takes: a branch as indented JSON, a string as itself. */
     private copyable;
     private toggle;
+    /**
+     * Moves the active row, asking first: `helix-before-activate` with the path,
+     * then `helix-activate` once it has moved. Returns whether it is there.
+     */
     private move;
     private readonly handleKeydown;
     /** Opens every branch at the active row's level under the same parent, as `*` asks. */
@@ -236,7 +309,12 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
      * keys that start with it.
      */
     private typeahead;
+    /** A press opens or closes the row it lands on, once that row is the active one. */
     private handleRowClick;
+    /** Text typed in the filter field, asked for before the tree narrows to it. */
+    private readonly handleFilterInput;
+    /** Down from the filter field goes to the tree, where the matches are. */
+    private readonly handleFilterKeydown;
     private renderValue;
     /**
      * One entry, named for its state where it holds one.
@@ -247,6 +325,11 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
      * attribute would be a second spelling with no reader. The name is the one a
      * consumer can reach, nothing being able to follow `::part()` with an
      * attribute selector.
+     *
+     * **`aria-selected="false"` on every row**, because nothing here is chosen.
+     * Chromium takes the active descendant of a single-selection tree as selected
+     * when no row says otherwise, so every arrow press was also announced as a
+     * selection. An explicit false is the one thing that turns that off.
      */
     private renderRow;
     /** The copy button, behind the seam Code Block's uses, so each tier renders its own. */
@@ -258,4 +341,3 @@ declare global {
         'helix-headless-object-inspector': HelixHeadlessObjectInspector;
     }
 }
-export {};

package/dist/object-inspector/root/object-inspector-root.js

@@ -5,22 +5,23 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessObjectInspector_1;
-import { AriaForwardController, CopyController, customElement, elementById, fillTemplate, formatNumbers, HelixElement, inlineStep, scrollItemIntoView, searchableById, VirtualizeController, } from '@fusion.dev/helix-core';
+import { AriaForwardController, CopyController, countLabel, customElement, drawStatus, elementById, fillTemplate, formatNumbers, HelixActivateEvent, HelixBeforeActivateEvent, HelixElement, HelixFilterEvent, HelixFilteredEvent, inlineStep, requestChange, StatusController, scrollItemIntoView, searchableById, VirtualizeController, } from '@fusion.dev/helix-core';
 import { caretDown, caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html as staticHtml } from 'lit/static-html.js';
 import '../../copy-button/index.js';
-const branchy = (value) => value !== null && typeof value === 'object';
-const entries = (value) => Array.isArray(value) ? value.map((item, at) => [String(at), item]) : Object.entries(value);
-const child = (path, key) => `${path}/${key.replaceAll('~', '~0').replaceAll('/', '~1')}`;
+import { ancestorsOf, entries, flatten, search, seed } from '../rows.js';
 let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends HelixElement {
     constructor() {
         super(...arguments);
         this.copyLabel = 'Copy {name}';
         this.copyValueLabel = 'Copy value';
         this.defaultDepth = 1;
+        this.filter = '';
+        this.filterable = false;
+        this.filterLabel = 'Filter';
         this.for = '';
         this.itemLabel = '{count} item';
         this.itemsLabel = '{count} items';
@@ -28,12 +29,14 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         this.keysLabel = '{count} keys';
         this.label = '';
         this.noCopy = false;
+        this.resultLabel = '{count} result';
+        this.resultsLabel = '{count} results';
         this.treeLabel = 'Value';
         this.value = undefined;
         this.windowed = false;
         this.read = undefined;
         this.opened = new Set();
-        this.active = 0;
+        this.cursor = 0;
         this.revealing = false;
         this.typed = { at: 0, text: '' };
         this.branches = new Set();
@@ -41,6 +44,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             label: true,
             target: () => this.partNamed('tree'),
         });
+        this.status = new StatusController(this);
         this.virtualize = new VirtualizeController(this, {
             container: () => (this.windowed ? this.partNamed('tree') : null),
             count: () => this.rows.length,
@@ -52,7 +56,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         this.copier = new CopyController(this);
         this.handleKeydown = (event) => {
             const rows = this.rows;
-            const row = rows[this.active];
+            const row = rows[this.cursor];
             if (!row) {
                 return;
             }
@@ -66,10 +70,10 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             }
             switch (event.key) {
                 case 'ArrowDown':
-                    this.move(this.active + 1);
+                    this.move(this.cursor + 1);
                     break;
                 case 'ArrowUp':
-                    this.move(this.active - 1);
+                    this.move(this.cursor - 1);
                     break;
                 case 'Home':
                     this.move(0);
@@ -84,14 +88,14 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
                             this.toggle(row, true);
                         }
                         else if (row.open) {
-                            this.move(this.active + 1);
+                            this.move(this.cursor + 1);
                         }
                     }
                     else if (row.open) {
                         this.toggle(row, false);
                     }
                     else {
-                        const parent = rows.findLastIndex((candidate, at) => at < this.active && candidate.depth === row.depth - 1);
+                        const parent = rows.findLastIndex((candidate, at) => at < this.cursor && candidate.depth === row.depth - 1);
                         if (parent >= 0) {
                             this.move(parent);
                         }
@@ -114,80 +118,123 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             }
             event.preventDefault();
         };
+        this.handleFilterInput = (event) => {
+            const field = event.currentTarget;
+            const applied = requestChange({
+                apply: (value) => {
+                    this.filter = value;
+                },
+                event: (value) => new HelixFilterEvent({ value }),
+                host: this,
+                next: field.value,
+            });
+            if (applied) {
+                this.dispatchEvent(new HelixFilteredEvent({ value: field.value }));
+            }
+            else {
+                field.value = this.filter;
+            }
+        };
+        this.handleFilterKeydown = (event) => {
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                this.partNamed('tree')?.focus();
+            }
+        };
     }
     static { HelixHeadlessObjectInspector_1 = this; }
+    get active() {
+        return this.wanted ?? this.rows[this.cursor]?.path ?? '';
+    }
+    set active(path) {
+        const previous = this.active;
+        this.wanted = path;
+        this.requestUpdate('active', previous);
+    }
+    get expanded() {
+        return [...this.opened];
+    }
+    set expanded(paths) {
+        const previous = this.expanded;
+        this.declared = new Set(paths);
+        this.opened = this.declared;
+        this.requestUpdate('expanded', previous);
+    }
     static { this.ESTIMATE = 24; }
     get root() {
         return this.value === undefined ? this.read : this.value;
     }
-    flatten() {
-        const rows = [];
-        if (this.root === undefined) {
-            return rows;
-        }
-        const visit = (value, path, depth, position, siblings, key) => {
-            const branch = branchy(value);
-            const open = branch && this.opened.has(path);
-            rows.push({
-                branch,
-                depth,
-                open,
-                path,
-                position,
-                siblings,
-                value,
-                ...(key === undefined ? {} : { key }),
-            });
-            if (open) {
-                const children = entries(value);
-                children.forEach(([name, item], at) => {
-                    visit(item, child(path, name), depth + 1, at + 1, children.length, name);
-                });
-            }
-        };
-        visit(this.root, '', 0, 1, 1);
-        return rows;
-    }
     seed(keep) {
-        const opened = new Set();
-        const branches = new Set();
-        const visit = (value, path, depth) => {
-            if (!branchy(value)) {
-                return;
-            }
-            branches.add(path);
-            const known = keep && this.branches.has(path);
-            if (known ? this.opened.has(path) : depth < this.defaultDepth) {
-                opened.add(path);
-            }
-            for (const [name, item] of entries(value)) {
-                visit(item, child(path, name), depth + 1);
-            }
-        };
-        visit(this.root, '', 0);
+        const { branches, opened } = seed(this.root, this.defaultDepth, keep ? this.branches : undefined, this.opened);
         this.branches = branches;
         this.opened = opened;
         if (!keep) {
-            this.active = 0;
+            this.cursor = 0;
         }
     }
+    openAround(paths) {
+        const opened = new Set(this.opened);
+        for (const path of paths) {
+            for (const above of ancestorsOf(path)) {
+                if (this.branches.has(above)) {
+                    opened.add(above);
+                }
+            }
+        }
+        this.opened = opened;
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         if (this.loadedFor !== this.for && searchableById(this) && !this.hydrating) {
             this.loadedFor = this.for;
             this.load();
         }
-        const was = this.rows[this.active]?.path;
-        if (changed.has('value') || changed.has('read') || changed.has('defaultDepth')) {
+        const was = this.rows[this.cursor]?.path;
+        const written = this.declared;
+        this.declared = undefined;
+        const fresh = changed.has('value') || changed.has('read');
+        if (fresh || changed.has('defaultDepth')) {
             this.seed(!changed.has('defaultDepth'));
         }
-        if (changed.has('value') ||
-            changed.has('read') ||
-            changed.has('opened') ||
-            changed.has('defaultDepth')) {
-            this.rows = this.flatten();
-            const found = was === undefined ? -1 : this.rows.findIndex((row) => row.path === was);
-            this.active = found >= 0 ? found : Math.min(this.active, Math.max(0, this.rows.length - 1));
+        if (written) {
+            this.opened = written;
+        }
+        if (fresh || changed.has('filter')) {
+            this.found = this.filter.trim() === '' ? undefined : search(this.root, this.filter);
+            this.openAround(this.found ?? []);
+        }
+        const wanted = this.root === undefined ? undefined : this.wanted;
+        if (wanted !== undefined) {
+            this.wanted = undefined;
+            this.openAround([wanted]);
+        }
+        if (fresh ||
+            wanted !== undefined ||
+            ['active', 'defaultDepth', 'expanded', 'filter', 'opened'].some((name) => changed.has(name))) {
+            this.rows = flatten(this.root, this.opened, this.found);
+            this.cursor = this.place(wanted ?? was, changed.has('filter'));
+        }
+        if (changed.has('filter') && this.hasUpdated) {
+            this.tell();
+        }
+    }
+    place(path, filtered) {
+        const rows = this.rows;
+        const at = (one) => rows.findIndex((row) => row.path === one);
+        const own = path === undefined ? -1 : at(path);
+        if (own >= 0 || path === undefined) {
+            return own >= 0 ? own : Math.min(this.cursor, Math.max(0, rows.length - 1));
+        }
+        const match = filtered ? rows.findIndex((row) => row.match) : -1;
+        const around = ancestorsOf(path)
+            .reverse()
+            .map(at)
+            .find((one) => one >= 0);
+        return match >= 0 ? match : (around ?? 0);
+    }
+    tell() {
+        if (this.found) {
+            this.status.say(countLabel(this.found.size, this.resultLabel, this.resultsLabel, this.lang));
         }
     }
     firstUpdated(changed) {
@@ -215,7 +262,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
     }
     reveal(attempts = 8) {
         const tree = this.partNamed('tree');
-        const row = tree?.querySelector(`[data-index="${this.active}"]`);
+        const row = tree?.querySelector(`[data-index="${this.cursor}"]`);
         if (row) {
             scrollItemIntoView(row);
             return;
@@ -227,8 +274,8 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             return;
         }
         const height = first.offsetHeight || HelixHeadlessObjectInspector_1.ESTIMATE;
-        const from = Number(this.active > Number(last.dataset.index) ? last.dataset.index : first.dataset.index);
-        tree.scrollTop += (this.active - from) * height;
+        const from = Number(this.cursor > Number(last.dataset.index) ? last.dataset.index : first.dataset.index);
+        tree.scrollTop += (this.cursor - from) * height;
         this.virtualize.measure();
         void this.updateComplete.then(() => this.reveal(attempts - 1));
     }
@@ -252,9 +299,27 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         this.opened = opened;
     }
     move(to) {
-        const last = this.rows.length - 1;
-        this.active = Math.max(0, Math.min(to, last));
+        const at = Math.max(0, Math.min(to, this.rows.length - 1));
+        const path = this.rows[at]?.path;
+        if (path === undefined) {
+            return false;
+        }
+        if (at !== this.cursor) {
+            const moved = requestChange({
+                apply: () => {
+                    this.cursor = at;
+                },
+                event: (value) => new HelixBeforeActivateEvent({ value }),
+                host: this,
+                next: path,
+            });
+            if (!moved) {
+                return false;
+            }
+            this.dispatchEvent(new HelixActivateEvent({ value: path }));
+        }
         this.revealing = true;
+        return true;
     }
     openSiblings(row) {
         const parent = row.path.slice(0, row.path.lastIndexOf('/'));
@@ -275,7 +340,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         const wanted = text.toLocaleLowerCase();
         const repeated = [...wanted].every((one) => one === wanted[0]);
         const rows = this.rows;
-        const start = wanted.length === 1 || repeated ? this.active + 1 : this.active;
+        const start = wanted.length === 1 || repeated ? this.cursor + 1 : this.cursor;
         for (let step = 0; step < rows.length; step += 1) {
             const at = (start + step) % rows.length;
             const key = rows[at]?.key?.toLocaleLowerCase();
@@ -286,8 +351,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         }
     }
     handleRowClick(index, row) {
-        this.active = index;
-        if (row.branch) {
+        if (this.move(index) && row.branch) {
             this.toggle(row);
         }
     }
@@ -324,14 +388,15 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         return html `<span part="string" dir="ltr">${String(value)}</span>`;
     }
     renderRow(row, index) {
-        const active = index === this.active;
+        const active = index === this.cursor;
         return html `<div
-      part="row${active ? ' row-active' : ''}"
+      part="row${active ? ' row-active' : ''}${row.match ? ' row-match' : ''}"
       role="treeitem"
       id=${`row-${index}`}
       data-index=${index}
       aria-level=${row.depth + 1}
       aria-posinset=${row.position}
+      aria-selected="false"
       aria-setsize=${row.siblings}
       aria-expanded=${row.branch ? String(row.open) : nothing}
       style=${`--object-inspector-level: ${row.depth}`}
@@ -353,7 +418,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
     renderCopyButton(row) {
         return staticHtml `<${this.tag('copy-button')}
       part="copy"
-      exportparts="button: copy-button, text: copy-text, mark: copy-mark, tooltip: copy-tooltip,
+      exportparts="button: copy-button, live: copy-live, text: copy-text, mark: copy-mark, tooltip: copy-tooltip,
         tooltip-arrow: copy-tooltip-arrow, tooltip-arrow-bottom: copy-tooltip-arrow-bottom,
         tooltip-arrow-left: copy-tooltip-arrow-left, tooltip-arrow-right: copy-tooltip-arrow-right,
         tooltip-arrow-top: copy-tooltip-arrow-top, tooltip-bottom: copy-tooltip-bottom,
@@ -368,15 +433,28 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             ? this.virtualize.window
             : { after: 0, before: 0, first: 0, last: rows.length };
         const shown = rows.slice(first, last);
-        return html `${this.label ? html `<div part="header"><span part="label">${this.label}</span></div>` : nothing}
+        return html `${this.label ? html `<div part="header"><span part="label">${this.label}</span></div>` : nothing}${this.filterable
+            ? html `<input
+            part="search-field"
+            type="search"
+            spellcheck="false"
+            .value=${this.filter}
+            placeholder=${this.filterLabel}
+            aria-label=${this.filterLabel}
+            aria-controls="tree"
+            @input=${this.handleFilterInput}
+            @keydown=${this.handleFilterKeydown}
+          />`
+            : nothing}
       <div part="frame">
         <div
           part="tree"
+          id="tree"
           role="tree"
           tabindex="0"
           ?data-scroller=${this.windowed}
           aria-label=${this.label || this.treeLabel}
-          aria-activedescendant=${rows.length > 0 ? `row-${this.active}` : nothing}
+          aria-activedescendant=${rows.length > 0 ? `row-${this.cursor}` : nothing}
           @keydown=${this.handleKeydown}
           @scroll=${() => this.virtualize.measure()}
         >
@@ -384,10 +462,14 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
           ${shown.map((row, at) => this.renderRow(row, first + at))}
           ${this.windowed ? html `<div part="after" role="presentation" style="block-size: ${after}px"></div>` : nothing}
         </div>
-        ${this.noCopy ? nothing : this.renderCopyButton(rows[this.active])}
-      </div>`;
+        ${this.noCopy ? nothing : this.renderCopyButton(rows[this.cursor])}
+      </div>
+      ${drawStatus(this.status)}`;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessObjectInspector.prototype, "active", null);
 __decorate([
     property({ attribute: 'copy-label' })
 ], HelixHeadlessObjectInspector.prototype, "copyLabel", void 0);
@@ -397,6 +479,18 @@ __decorate([
 __decorate([
     property({ attribute: 'default-depth', type: Number })
 ], HelixHeadlessObjectInspector.prototype, "defaultDepth", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessObjectInspector.prototype, "expanded", null);
+__decorate([
+    property()
+], HelixHeadlessObjectInspector.prototype, "filter", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessObjectInspector.prototype, "filterable", void 0);
+__decorate([
+    property({ attribute: 'filter-label' })
+], HelixHeadlessObjectInspector.prototype, "filterLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessObjectInspector.prototype, "for", void 0);
@@ -418,6 +512,12 @@ __decorate([
 __decorate([
     property({ attribute: 'no-copy', type: Boolean })
 ], HelixHeadlessObjectInspector.prototype, "noCopy", void 0);
+__decorate([
+    property({ attribute: 'result-label' })
+], HelixHeadlessObjectInspector.prototype, "resultLabel", void 0);
+__decorate([
+    property({ attribute: 'results-label' })
+], HelixHeadlessObjectInspector.prototype, "resultsLabel", void 0);
 __decorate([
     property({ attribute: 'tree-label' })
 ], HelixHeadlessObjectInspector.prototype, "treeLabel", void 0);
@@ -435,7 +535,7 @@ __decorate([
 ], HelixHeadlessObjectInspector.prototype, "opened", void 0);
 __decorate([
     state()
-], HelixHeadlessObjectInspector.prototype, "active", void 0);
+], HelixHeadlessObjectInspector.prototype, "cursor", void 0);
 HelixHeadlessObjectInspector = HelixHeadlessObjectInspector_1 = __decorate([
     customElement('helix-headless-object-inspector')
 ], HelixHeadlessObjectInspector);