@fusion.dev/helix-headless 0.219.0 → 0.220.0

package/dist/code-editor/root/code-editor-root.d.ts

@@ -1,6 +1,7 @@
-import { AriaForwardController, HelixFormElement, ListedController } from '@fusion.dev/helix-core';
+import { AriaForwardController, findRanges, HelixFormElement, ListedController } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import '../../button/index.js';
+import '../../find/index.js';
 import '../../icon-button/index.js';
 import '../../toolbar/index.js';
 /** A problem in the text, from a linter or a language server, by where it is. */
@@ -81,8 +82,8 @@ export declare const positionOf: (value: string, at: number) => {
     column: number;
     line: number;
 };
-/** Where a query matches in a text, as `[from, to]` offsets, with no empty match. */
-export declare const findRanges: (text: string, query: EditorFindQuery) => Array<[number, number]>;
+/** Where a query matches in a text, as `[from, to]` offsets, with no empty match. Find's own, from core. */
+export { findRanges };
 declare const HelixHeadlessCodeEditor_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary An editor for a file of code, drawn by a code editor you connect.
@@ -128,6 +129,7 @@ declare const HelixHeadlessCodeEditor_base: (new (...args: any[]) => import("@fu
  *
  * @event {Event} change - The reader finished an edit and focus left the code, in the engine or the plain field.
  * @event {HelixBeforeChangeEvent} helix-before-change - The text is about to change. Cancelable: cancel it to keep the current text.
+ * @event {HelixFoundEvent} helix-found - The find bar searched or moved among the matches, with `count` and the selected match's `index`, counting from 0, or -1 for none.
  * @event {Event} input - Fired after the text changes.
  *
  * @csspart body - The box the code is drawn in, between the header and the problems.
@@ -142,9 +144,9 @@ declare const HelixHeadlessCodeEditor_base: (new (...args: any[]) => import("@fu
  * @csspart diagnostics - The list of problems under the code, while there are any.
  * @csspart feedback - The message that says what is wrong.
  * @csspart field - The frame around the header, the code, the problems and the status line.
- * @csspart find - The button in the header that opens the find bar.
- * @csspart find-bar - The find bar under the header, while it is open.
- * @csspart find-button - The Find button's inner button.
+ * @csspart find - The find bar under the header, where the reader searches the code: a Find of its own.
+ * @csspart find-actions - The find bar's `actions` slot, which the editor fills with nothing.
+ * @csspart find-bar - The find bar's strip: the replace toggle, the field, the count, the toolbar, and the replace row while it shows.
  * @csspart find-close - The button that closes the find bar.
  * @csspart find-close-button - The close button's inner button.
  * @csspart find-close-live - The close button's live region, which speaks while the button is pending.
@@ -154,10 +156,11 @@ declare const HelixHeadlessCodeEditor_base: (new (...args: any[]) => import("@fu
  * @csspart find-controls-toolbar - The box inside the find bar's toolbar that lays its buttons out.
  * @csspart find-count - Which match is selected, of how many.
  * @csspart find-field - The field the search is typed in.
- * @csspart find-live - The Find button's live region, which speaks while the button is pending.
+ * @csspart find-live - The find bar's live region, which says the count as it changes.
  * @csspart find-match-case - The option that finds only the same case. Pressed while it applies.
  * @csspart find-match-case-button - The match case button's inner button.
  * @csspart find-match-case-live - The match case button's live region, which speaks while the button is pending.
+ * @csspart find-match-case-pressed - The match case option while it applies, beside `find-match-case`.
  * @csspart find-match-case-spinner - The ring the match case button turns while it is pending.
  * @csspart find-match-case-text - The box the match case button's icon sits in.
  * @csspart find-next - The button that selects the next match.
@@ -173,18 +176,34 @@ declare const HelixHeadlessCodeEditor_base: (new (...args: any[]) => import("@fu
  * @csspart find-regex - The option that reads the search as a regular expression. Pressed while it applies.
  * @csspart find-regex-button - The regular expression button's inner button.
  * @csspart find-regex-live - The regular expression button's live region, which speaks while the button is pending.
+ * @csspart find-regex-pressed - The regular expression option while it applies, beside `find-regex`.
  * @csspart find-regex-spinner - The ring the regular expression button turns while it is pending.
  * @csspart find-regex-text - The box the regular expression button's icon sits in.
- * @csspart find-replace - The button that shows the replace field under the find field. Expanded while it shows.
- * @csspart find-replace-button - The find and replace button's inner button.
- * @csspart find-replace-live - The find and replace button's live region, which speaks while the button is pending.
- * @csspart find-replace-spinner - The ring the find and replace button turns while it is pending.
- * @csspart find-replace-text - The box the find and replace button's icon sits in.
- * @csspart find-spinner - The ring the Find button turns while it is pending.
- * @csspart find-text - The box the Find button's icon sits in.
+ * @csspart find-replace - The button that replaces the selected match.
+ * @csspart find-replace-all - The button that replaces every match.
+ * @csspart find-replace-all-button - The Replace all button's inner button.
+ * @csspart find-replace-all-live - The Replace all button's live region, which speaks while the button is pending.
+ * @csspart find-replace-all-spinner - The ring the Replace all button turns while it is pending.
+ * @csspart find-replace-all-text - The box the Replace all button's words sits in.
+ * @csspart find-replace-button - The Replace button's inner button.
+ * @csspart find-replace-field - The field the replacement is typed in.
+ * @csspart find-replace-live - The Replace button's live region, which speaks while the button is pending.
+ * @csspart find-replace-spinner - The ring the Replace button turns while it is pending.
+ * @csspart find-replace-text - The box the Replace button's words sits in.
+ * @csspart find-replace-toggle - The button that shows the replace field under the find field. Expanded while it shows. Not drawn while `readonly`.
+ * @csspart find-replace-toggle-button - The find and replace button's inner button.
+ * @csspart find-replace-toggle-live - The find and replace button's live region, which speaks while the button is pending.
+ * @csspart find-replace-toggle-spinner - The ring the find and replace button turns while it is pending.
+ * @csspart find-replace-toggle-text - The box the find and replace button's icon sits in.
+ * @csspart find-toggle - The button in the header that opens and closes the find bar. Expanded while it is open.
+ * @csspart find-toggle-button - The Find button's inner button.
+ * @csspart find-toggle-live - The Find button's live region, which speaks while the button is pending.
+ * @csspart find-toggle-spinner - The ring the Find button turns while it is pending.
+ * @csspart find-toggle-text - The box the Find button's icon sits in.
  * @csspart find-whole-word - The option that finds only whole words. Pressed while it applies.
  * @csspart find-whole-word-button - The whole word button's inner button.
  * @csspart find-whole-word-live - The whole word button's live region, which speaks while the button is pending.
+ * @csspart find-whole-word-pressed - The whole word option while it applies, beside `find-whole-word`.
  * @csspart find-whole-word-spinner - The ring the whole word button turns while it is pending.
  * @csspart find-whole-word-text - The box the whole word button's icon sits in.
  * @csspart header - The strip above the code: the name, the language, and the controls.
@@ -193,27 +212,14 @@ declare const HelixHeadlessCodeEditor_base: (new (...args: any[]) => import("@fu
  * @csspart language - The language's name in the header.
  * @csspart position - The caret's line and column, in the status line.
  * @csspart problem-count - How many problems there are, in the status line.
- * @csspart replace - The button that replaces the selected match.
- * @csspart replace-all - The button that replaces every match.
- * @csspart replace-all-button - The Replace all button's inner button.
- * @csspart replace-all-live - The Replace all button's live region, which speaks while the button is pending.
- * @csspart replace-all-spinner - The ring the Replace all button turns while it is pending.
- * @csspart replace-all-text - The box the Replace all button's words sit in.
- * @csspart replace-button - The Replace button's inner button.
- * @csspart replace-field - The field the replacement is typed in.
- * @csspart replace-live - The Replace button's live region, which speaks while the button is pending.
- * @csspart replace-spinner - The ring the Replace button turns while it is pending.
- * @csspart replace-text - The box the Replace button's words sit in.
  * @csspart status - The strip under the code.
  * @csspart view - Where an engine draws, while one is connected.
  *
  * @cssstate connected - An engine draws the editor.
  * @cssstate find-open - The find bar is open.
  * @cssstate invalid - The editor has an error to show, from `required` or your `feedback`.
- * @cssstate replace-open - The replace field shows under the find field.
  */
 export declare class HelixHeadlessCodeEditor extends HelixHeadlessCodeEditor_base {
-    protected static markRules: string[];
     /**
      * The key this family's words are registered under, its styled tag:
      * `registerWords('de', { 'helix-code-editor': { findLabel: 'Suchen' } })`.
@@ -286,13 +292,10 @@ export declare class HelixHeadlessCodeEditor extends HelixHeadlessCodeEditor_bas
     wrap: boolean;
     /** Where the caret is, as an offset into the value. */
     private caret;
-    /** Whether the find bar is open. */
+    /** Whether the find bar is open, as it last said. */
     private findOpen;
-    /** Where the search stands, or nothing before one. */
-    private found;
-    /** Whether the replace field shows under the find field. */
-    private replaceOpen;
-    private query;
+    /** The find bar drawn now, and how a search is reported to it. */
+    private find;
     private view;
     /** Whether Escape came just before, which lets Tab leave the plain field. */
     private escaped;
@@ -303,8 +306,6 @@ export declare class HelixHeadlessCodeEditor extends HelixHeadlessCodeEditor_bas
     /** The textarea, which the form's validity is read from either way. */
     private get control();
     private get engineState();
-    /** Whether the search can be read, which a regular expression may not be. */
-    private get readable();
     /** Puts the caret in the editor, as a label pointing at it would. */
     focus(options?: FocusOptions): void;
     /** Selects a range of the code and puts the caret there, in the engine or the plain field. */
@@ -319,19 +320,18 @@ export declare class HelixHeadlessCodeEditor extends HelixHeadlessCodeEditor_bas
     private readonly handleViewFocusOut;
     /** Opens the find bar, with the selection as the search where one is selected, and puts focus in its field. */
     private openFind;
-    /** Closes the find bar, takes the marks away, and puts focus back in the code. */
-    private closeFind;
+    /** Hands the find bar drawn now the editor to search through, once per bar. */
+    private attachFind;
+    /** The editor, as the find bar searches through it: the engine, or the plain field. */
+    private readonly finder;
     /** Finds the search and selects a match, in the engine or the plain field. */
-    private search;
-    /** Replaces the selected match, or every match, through `requestValue`. */
-    private replace;
-    /** Turns one of the find bar's options on or off, and searches again with it. */
-    private toggleOption;
+    private findIn;
+    /** Replaces the selected match, or every match, through `requestValue`, and finds the next. */
+    private replaceIn;
+    /** The find bar opened or closed, which the Find button shows. */
+    private readonly handleFindToggle;
     /** The find key opens the find bar from anywhere in the editor, ahead of the browser's own. */
     private readonly handleKeys;
-    private readonly handleFindInput;
-    private readonly handleReplaceInput;
-    private readonly handleFindKeys;
     /** An edit in the textarea, which has taken the character already: put back where it is refused. */
     private readonly handleInput;
     /** Relayed, because `change` does not cross a shadow boundary on its own. */
@@ -343,14 +343,12 @@ export declare class HelixHeadlessCodeEditor extends HelixHeadlessCodeEditor_bas
      * Escape came just before it, which lets the reader leave.
      */
     private readonly handleKeydown;
-    /** The words the find bar's count says, or its regular expression's fault. */
-    private get countText();
     /** The header: the name, the language, and the toolbar of the page's actions and Find. */
     protected renderHeader(): TemplateResult;
     /**
-     * The find bar, kept in the tree while closed so its fields keep what was
-     * typed. The fields stand outside the toolbar, which leaves the arrows to a
-     * text field.
+     * The find bar, a Find of the editor's own that searches the engine or the
+     * plain field, kept in the tree while closed so its fields keep what was
+     * typed. The editor takes the find key itself, so the bar takes none.
      */
     protected renderFind(): TemplateResult;
     /** The problems, each a button that moves the caret to it, in its tone. */
@@ -364,4 +362,3 @@ declare global {
         'helix-headless-code-editor': HelixHeadlessCodeEditor;
     }
 }
-export {};

package/dist/code-editor/root/code-editor-root.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
-import { AriaForwardController, customElement, drawIcon, formatWords, HelixFormElement, ListedController, MIRROR_RULE, MixinControllerValue, MixinField, numberConverter, onApple, restoreValue, stopPress, words, } from '@fusion.dev/helix-core';
-import { asterisk, caretDown, caretRight, caretUp, info, magnifyingGlass, textAa, textAUnderline, warning, x, xCircleFill, } from '@fusion.dev/helix-icons';
+import { AriaForwardController, customElement, drawIcon, findPattern, findRanges, formatWords, HelixFormElement, ListedController, MixinControllerValue, MixinField, numberConverter, onApple, restoreValue, stopPress, words, } from '@fusion.dev/helix-core';
+import { info, magnifyingGlass, warning, xCircleFill } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { live } from 'lit/directives/live.js';
 import { html } from 'lit/static-html.js';
 import '../../button/index.js';
+import '../../find/index.js';
 import '../../icon-button/index.js';
 import '../../toolbar/index.js';
 export const diagnosticLines = (value, diagnostics) => {
@@ -53,24 +53,7 @@ export const positionOf = (value, at) => {
         line: before.split('\n').length,
     };
 };
-const patternOf = (query) => {
-    const source = query.regex ? query.search : query.search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    try {
-        return new RegExp(query.wholeWord ? `\\b(?:${source})\\b` : source, query.caseSensitive ? 'gu' : 'giu');
-    }
-    catch {
-        return undefined;
-    }
-};
-export const findRanges = (text, query) => {
-    const pattern = query.search === '' ? undefined : patternOf(query);
-    if (!pattern) {
-        return [];
-    }
-    return [...text.matchAll(pattern)]
-        .filter((match) => match[0] !== '')
-        .map((match) => [match.index, match.index + match[0].length]);
-};
+export { findRanges };
 const LANGUAGE_NAMES = {
     bash: 'Shell',
     css: 'CSS',
@@ -129,15 +112,6 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
         this.wrap = false;
         this.caret = 0;
         this.findOpen = false;
-        this.found = undefined;
-        this.replaceOpen = false;
-        this.query = {
-            caseSensitive: false,
-            regex: false,
-            replace: '',
-            search: '',
-            wholeWord: false,
-        };
         this.escaped = false;
         this.engineEdited = false;
         this.handleViewFocusOut = (event) => {
@@ -147,6 +121,14 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
                 this.announceChange();
             }
         };
+        this.finder = {
+            end: () => this.view?.findEnd?.(),
+            find: (query, direction) => this.findIn(query, direction),
+            replace: (query, all) => this.replaceIn(query, all),
+        };
+        this.handleFindToggle = (event) => {
+            this.findOpen = event.newState === 'open';
+        };
         this.handleKeys = (event) => {
             const mod = onApple() ? event.metaKey && !event.ctrlKey : event.ctrlKey && !event.metaKey;
             if (mod && !event.altKey && !event.shiftKey && event.key.toLowerCase() === 'f') {
@@ -155,28 +137,6 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
                 void this.openFind();
             }
         };
-        this.handleFindInput = (event) => {
-            this.query = { ...this.query, search: event.target.value };
-            this.search('first');
-        };
-        this.handleReplaceInput = (event) => {
-            this.query = { ...this.query, replace: event.target.value };
-        };
-        this.handleFindKeys = (event) => {
-            if (event.key === 'Escape') {
-                event.preventDefault();
-                this.closeFind();
-            }
-            else if (event.key === 'Enter') {
-                event.preventDefault();
-                if (event.target.getAttribute('part') === 'replace-field') {
-                    this.replace(event.metaKey || event.ctrlKey);
-                }
-                else {
-                    this.search(event.shiftKey ? 'previous' : 'next');
-                }
-            }
-        };
         this.handleInput = (event) => {
             event.stopPropagation();
             const control = event.target;
@@ -203,7 +163,6 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
             this.escaped = false;
         };
     }
-    static { this.markRules = [MIRROR_RULE]; }
     static { this.words = 'helix-code-editor'; }
     get control() {
         return this.partNamed('control');
@@ -220,9 +179,6 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
             wrap: this.wrap,
         };
     }
-    get readable() {
-        return this.query.search === '' || patternOf(this.query) !== undefined;
-    }
     focus(options) {
         if (this.view?.focus) {
             this.view.focus();
@@ -273,7 +229,7 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
             this.refreshFeedback();
         }
         this.toggleState('find-open', this.findOpen);
-        this.toggleState('replace-open', this.findOpen && this.replaceOpen && !this.readOnly);
+        this.attachFind();
         const mount = this.partNamed('view');
         if (changed.has('engine') || (this.engine && !this.view && mount)) {
             this.view?.destroy();
@@ -308,43 +264,35 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
         return true;
     }
     async openFind() {
+        const find = this.find?.element;
+        if (!find) {
+            return;
+        }
         const control = this.control;
         if (!this.view && control && control.selectionEnd > control.selectionStart) {
             const selected = control.value.slice(control.selectionStart, control.selectionEnd);
             if (!selected.includes('\n')) {
-                this.query = { ...this.query, search: selected };
+                find.query = selected;
             }
         }
-        this.findOpen = true;
-        await this.updateComplete;
-        const field = this.partNamed('find-field');
-        field?.focus();
-        field?.select();
-        if (this.query.search !== '') {
-            this.search('first');
-        }
-    }
-    closeFind() {
-        this.findOpen = false;
-        this.found = undefined;
-        this.view?.findEnd?.();
-        this.focus();
+        await find.show();
     }
-    search(direction) {
-        if (this.query.search === '' || !this.readable) {
-            this.found = undefined;
-            this.view?.findEnd?.();
+    attachFind() {
+        const element = this.partNamed('find') ?? undefined;
+        if (element === this.find?.element) {
             return;
         }
+        this.find?.sink.detach();
+        this.find = element ? { element, sink: element.attach(this.finder) } : undefined;
+    }
+    findIn(query, direction) {
         if (this.view?.find) {
-            this.found = this.view.find(this.query, direction);
-            return;
+            return this.view.find(query, direction);
         }
         const control = this.control;
-        const ranges = findRanges(this.value, this.query);
+        const ranges = findRanges(this.value, query);
         if (!control || ranges.length === 0) {
-            this.found = { count: ranges.length, index: -1 };
-            return;
+            return { count: ranges.length, index: -1 };
         }
         const at = direction === 'first' ? control.selectionStart : control.selectionEnd;
         let index = direction === 'previous'
@@ -356,54 +304,37 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
         const [from, to] = ranges[index] ?? [0, 0];
         control.setSelectionRange(from, to);
         this.caret = from;
-        this.found = { count: ranges.length, index };
+        return { count: ranges.length, index };
     }
-    replace(all) {
-        if (this.readOnly || this.query.search === '' || !this.readable) {
-            return;
+    replaceIn(query, all) {
+        if (this.readOnly) {
+            return undefined;
         }
         if (this.view?.replace) {
-            this.found = this.view.replace(this.query, all);
-            return;
+            return this.view.replace(query, all);
         }
         const control = this.control;
-        const pattern = patternOf(this.query);
+        const pattern = findPattern(query);
         if (!control || !pattern) {
-            return;
+            return undefined;
         }
         if (all) {
-            this.requestValue(this.value.replace(pattern, this.query.replace));
+            this.requestValue(this.value.replace(pattern, query.replace));
         }
         else {
-            const selected = findRanges(this.value, this.query).find(([from, to]) => from === control.selectionStart && to === control.selectionEnd);
+            const selected = findRanges(this.value, query).find(([from, to]) => from === control.selectionStart && to === control.selectionEnd);
             if (!selected) {
-                this.search('next');
-                return;
+                return this.findIn(query, 'next');
             }
             const [from, to] = selected;
             const one = new RegExp(pattern.source, pattern.flags.replace('g', ''));
-            const replaced = this.value.slice(from, to).replace(one, this.query.replace);
+            const replaced = this.value.slice(from, to).replace(one, query.replace);
             this.requestValue(this.value.slice(0, from) + replaced + this.value.slice(to));
             restoreValue(control, this.value);
             control.setSelectionRange(from + replaced.length, from + replaced.length);
         }
         restoreValue(control, this.value);
-        this.search('next');
-    }
-    toggleOption(option) {
-        this.query = { ...this.query, [option]: !this.query[option] };
-        this.search('first');
-    }
-    get countText() {
-        if (!this.readable) {
-            return this.findInvalidLabel;
-        }
-        return this.found === undefined
-            ? ''
-            : formatWords(this, 'matchesLabel', {
-                count: this.found.count,
-                index: Math.max(this.found.index, 0) + 1,
-            });
+        return this.findIn(query, 'next');
     }
     renderHeader() {
         const toolbar = this.tag('toolbar');
@@ -412,14 +343,14 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
         return html `<div part="header">
       ${this.renderLabel()}
       ${language ? html `<span part="language">${language}</span>` : nothing}
-      <${toolbar} part="controls" exportparts="toolbar: controls-toolbar" exportparts="toolbar: controls-toolbar" label=${this.controlsLabel}>
+      <${toolbar} part="controls" exportparts="toolbar: controls-toolbar" label=${this.controlsLabel}>
         <slot name="actions"></slot>
         <${button}
-          part="find"
-          exportparts="button: find-button, live: find-live, spinner: find-spinner, text: find-text"
+          part="find-toggle"
+          exportparts="button: find-toggle-button, live: find-toggle-live, spinner: find-toggle-spinner, text: find-toggle-text"
           .expanded=${this.findOpen}
           label=${this.findLabel}
-          @click=${() => (this.findOpen ? this.closeFind() : void this.openFind())}
+          @click=${() => (this.findOpen ? this.find?.element.hide() : void this.openFind())}
           @helix-press=${stopPress}
         >
           ${drawIcon(magnifyingGlass)}
@@ -428,132 +359,28 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
     </div>`;
     }
     renderFind() {
-        const toolbar = this.tag('toolbar');
-        const button = this.tag('icon-button');
-        const textButton = this.tag('button');
-        const searchable = this.readable && (this.found?.count ?? 0) > 0;
-        const replacing = this.replaceOpen && !this.readOnly;
-        return html `<div part="find-bar" role="search" aria-label=${this.findLabel} ?hidden=${!this.findOpen}>
-      ${this.readOnly
-            ? nothing
-            : html `<${button}
-              part="find-replace"
-              exportparts="button: find-replace-button, live: find-replace-live, spinner: find-replace-spinner, text: find-replace-text"
-              .expanded=${replacing}
-              label=${this.findReplaceLabel}
-              @click=${() => {
-                this.replaceOpen = !this.replaceOpen;
-            }}
-              @helix-press=${stopPress}
-            >
-              ${replacing ? drawIcon(caretDown) : html `<span data-mirror>${drawIcon(caretRight)}</span>`}
-            </${button}>`}
-      <input
-        part="find-field"
-        aria-label=${this.findLabel}
-        aria-invalid=${this.readable ? nothing : 'true'}
-        autocomplete="off"
-        placeholder=${this.findLabel}
-        spellcheck="false"
-        type="search"
-        .value=${live(this.query.search)}
-        @input=${this.handleFindInput}
-        @keydown=${this.handleFindKeys}
-      />
-      <span part="find-count" role="status">${this.countText}</span>
-      <${toolbar} part="find-controls" exportparts="toolbar: find-controls-toolbar" exportparts="toolbar: find-controls-toolbar" label=${this.findControlsLabel}>
-        <${button}
-          part="find-match-case"
-          exportparts="button: find-match-case-button, live: find-match-case-live, spinner: find-match-case-spinner, text: find-match-case-text"
-          aria-pressed=${this.query.caseSensitive ? 'true' : 'false'}
-          label=${this.findMatchCaseLabel}
-          @click=${() => this.toggleOption('caseSensitive')}
-          @helix-press=${stopPress}
-        >
-          ${drawIcon(textAa)}
-        </${button}>
-        <${button}
-          part="find-whole-word"
-          exportparts="button: find-whole-word-button, live: find-whole-word-live, spinner: find-whole-word-spinner, text: find-whole-word-text"
-          aria-pressed=${this.query.wholeWord ? 'true' : 'false'}
-          label=${this.findWholeWordLabel}
-          @click=${() => this.toggleOption('wholeWord')}
-          @helix-press=${stopPress}
-        >
-          ${drawIcon(textAUnderline)}
-        </${button}>
-        <${button}
-          part="find-regex"
-          exportparts="button: find-regex-button, live: find-regex-live, spinner: find-regex-spinner, text: find-regex-text"
-          aria-pressed=${this.query.regex ? 'true' : 'false'}
-          label=${this.findRegexLabel}
-          @click=${() => this.toggleOption('regex')}
-          @helix-press=${stopPress}
-        >
-          ${drawIcon(asterisk)}
-        </${button}>
-        <${button}
-          part="find-previous"
-          exportparts="button: find-previous-button, live: find-previous-live, spinner: find-previous-spinner, text: find-previous-text"
-          ?disabled=${!searchable}
-          label=${this.findPreviousLabel}
-          @click=${() => this.search('previous')}
-          @helix-press=${stopPress}
-        >
-          ${drawIcon(caretUp)}
-        </${button}>
-        <${button}
-          part="find-next"
-          exportparts="button: find-next-button, live: find-next-live, spinner: find-next-spinner, text: find-next-text"
-          ?disabled=${!searchable}
-          label=${this.findNextLabel}
-          @click=${() => this.search('next')}
-          @helix-press=${stopPress}
-        >
-          ${drawIcon(caretDown)}
-        </${button}>
-        <${button}
-          part="find-close"
-          exportparts="button: find-close-button, live: find-close-live, spinner: find-close-spinner, text: find-close-text"
-          label=${this.findCloseLabel}
-          @click=${() => this.closeFind()}
-          @helix-press=${stopPress}
-        >
-          ${drawIcon(x)}
-        </${button}>
-      </${toolbar}>
-      ${!replacing
-            ? nothing
-            : html `<input
-              part="replace-field"
-              aria-label=${this.replaceWithLabel}
-              autocomplete="off"
-              placeholder=${this.replaceWithLabel}
-              spellcheck="false"
-              type="text"
-              .value=${live(this.query.replace)}
-              @input=${this.handleReplaceInput}
-              @keydown=${this.handleFindKeys}
-            />
-            <${textButton}
-              part="replace"
-              exportparts="button: replace-button, live: replace-live, spinner: replace-spinner, text: replace-text"
-              ?disabled=${!searchable}
-              @click=${() => this.replace(false)}
-              @helix-press=${stopPress}
-            >
-              ${this.replaceLabel}
-            </${textButton}>
-            <${textButton}
-              part="replace-all"
-              exportparts="button: replace-all-button, live: replace-all-live, spinner: replace-all-spinner, text: replace-all-text"
-              ?disabled=${!searchable}
-              @click=${() => this.replace(true)}
-              @helix-press=${stopPress}
-            >
-              ${this.replaceAllLabel}
-            </${textButton}>`}
-    </div>`;
+        const find = this.tag('find');
+        return html `<${find}
+      part="find"
+      exportparts="actions: find-actions, bar: find-bar, close: find-close, close-button: find-close-button, close-live: find-close-live, close-spinner: find-close-spinner, close-text: find-close-text, controls: find-controls, controls-toolbar: find-controls-toolbar, count: find-count, field: find-field, live: find-live, match-case: find-match-case, match-case-button: find-match-case-button, match-case-live: find-match-case-live, match-case-pressed: find-match-case-pressed, match-case-spinner: find-match-case-spinner, match-case-text: find-match-case-text, next: find-next, next-button: find-next-button, next-live: find-next-live, next-spinner: find-next-spinner, next-text: find-next-text, previous: find-previous, previous-button: find-previous-button, previous-live: find-previous-live, previous-spinner: find-previous-spinner, previous-text: find-previous-text, regex: find-regex, regex-button: find-regex-button, regex-live: find-regex-live, regex-pressed: find-regex-pressed, regex-spinner: find-regex-spinner, regex-text: find-regex-text, replace: find-replace, replace-all: find-replace-all, replace-all-button: find-replace-all-button, replace-all-live: find-replace-all-live, replace-all-spinner: find-replace-all-spinner, replace-all-text: find-replace-all-text, replace-button: find-replace-button, replace-field: find-replace-field, replace-live: find-replace-live, replace-spinner: find-replace-spinner, replace-text: find-replace-text, replace-toggle: find-replace-toggle, replace-toggle-button: find-replace-toggle-button, replace-toggle-live: find-replace-toggle-live, replace-toggle-spinner: find-replace-toggle-spinner, replace-toggle-text: find-replace-toggle-text, whole-word: find-whole-word, whole-word-button: find-whole-word-button, whole-word-live: find-whole-word-live, whole-word-pressed: find-whole-word-pressed, whole-word-spinner: find-whole-word-spinner, whole-word-text: find-whole-word-text"
+      close-label=${this.findCloseLabel}
+      controls-label=${this.findControlsLabel}
+      invalid-label=${this.findInvalidLabel}
+      label=${this.findLabel}
+      match-case-label=${this.findMatchCaseLabel}
+      matches-label=${this.matchesLabel}
+      next-label=${this.findNextLabel}
+      previous-label=${this.findPreviousLabel}
+      ?readonly=${this.readOnly}
+      regex-label=${this.findRegexLabel}
+      replace-all-label=${this.replaceAllLabel}
+      replace-field-label=${this.replaceWithLabel}
+      replace-label=${this.replaceLabel}
+      replace-toggle-label=${this.findReplaceLabel}
+      shortcut=""
+      whole-word-label=${this.findWholeWordLabel}
+      @toggle=${this.handleFindToggle}
+    ></${find}>`;
     }
     renderDiagnostics() {
         if (this.diagnostics.length === 0) {
@@ -731,15 +558,6 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessCodeEditor.prototype, "findOpen", void 0);
-__decorate([
-    state()
-], HelixHeadlessCodeEditor.prototype, "found", void 0);
-__decorate([
-    state()
-], HelixHeadlessCodeEditor.prototype, "replaceOpen", void 0);
-__decorate([
-    state()
-], HelixHeadlessCodeEditor.prototype, "query", void 0);
 HelixHeadlessCodeEditor = __decorate([
     customElement('helix-headless-code-editor')
 ], HelixHeadlessCodeEditor);