@fusion.dev/helix-headless 0.218.0 → 0.220.0

package/dist/find/root/find-root.js

@@ -0,0 +1,577 @@
+import { __decorate } from "tslib";
+import { customElement, deepActiveElement, deepContains, drawIcon, elementById, findPattern, formatWords, HelixElement, HelixFoundEvent, MIRROR_RULE, MixinControllerOpen, matchesChord, onApple, stopPress, textFinder, words, } from '@fusion.dev/helix-core';
+import { asterisk, caretDown, caretRight, caretUp, textAa, textAUnderline, x, } from '@fusion.dev/helix-icons';
+import { nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { keyed } from 'lit/directives/keyed.js';
+import { live } from 'lit/directives/live.js';
+import { html } from 'lit/static-html.js';
+import '../../button/index.js';
+import '../../icon-button/index.js';
+import '../../toolbar/index.js';
+const SEARCHED = ['for', 'matchCase', 'open', 'query', 'regex', 'skip', 'wholeWord'];
+let HelixHeadlessFind = class HelixHeadlessFind extends MixinControllerOpen(HelixElement) {
+    constructor() {
+        super(...arguments);
+        this.closeLabel = 'Close find';
+        this.controlsLabel = 'Find controls';
+        this.for = '';
+        this.invalidLabel = 'Not a valid regular expression';
+        this.label = 'Find';
+        this.matchCase = false;
+        this.matchCaseLabel = 'Match case';
+        this.matchesLabel = '{count, plural, =0 {No matches} one {{index} of # match} other {{index} of # matches}}';
+        this.nextLabel = 'Next match';
+        this.options = 'match-case whole-word regex';
+        this.previousLabel = 'Previous match';
+        this.query = '';
+        this.readOnly = false;
+        this.regex = false;
+        this.regexLabel = 'Use regular expression';
+        this.replaceAllLabel = 'Replace all';
+        this.replaceFieldLabel = 'Replace with';
+        this.replaceLabel = 'Replace';
+        this.replacement = '';
+        this.replaceToggleLabel = 'Find and replace';
+        this.shortcut = 'mod+f';
+        this.skip = '';
+        this.wholeWord = false;
+        this.wholeWordLabel = 'Match whole word';
+        this.result = undefined;
+        this.replaceOpen = false;
+        this.attached = undefined;
+        this.announcement = '';
+        this.said = 0;
+        this.inside = false;
+        this.handleWhere = (event) => {
+            this.inside = this.within(event);
+        };
+        this.handleShortcut = (event) => {
+            if (event.defaultPrevented ||
+                event.isComposing ||
+                this.shortcut === '' ||
+                !matchesChord(event, this.shortcut, onApple()) ||
+                !(this.inside || this.within(event)) ||
+                this.finder === undefined) {
+                return;
+            }
+            event.preventDefault();
+            void this.show();
+        };
+        this.handleInput = (event) => {
+            this.query = event.target.value;
+        };
+        this.handleReplaceInput = (event) => {
+            this.replacement = event.target.value;
+        };
+        this.handleKeys = (event) => {
+            if (event.defaultPrevented || event.isComposing) {
+                return;
+            }
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                event.stopPropagation();
+                this.hide();
+                return;
+            }
+            if (event.key !== 'Enter') {
+                return;
+            }
+            const origin = event.composedPath()[0];
+            if (!(origin instanceof HTMLInputElement)) {
+                return;
+            }
+            event.preventDefault();
+            if (origin.getAttribute('part') === 'replace-field') {
+                this.replace(event.metaKey || event.ctrlKey);
+            }
+            else {
+                this.search(event.shiftKey ? 'previous' : 'next');
+            }
+        };
+    }
+    static { this.markRules = [MIRROR_RULE]; }
+    static { this.words = 'helix-find'; }
+    attach(finder) {
+        this.endSearch();
+        this.attached = finder;
+        this.replaceOpen = this.replaceOpen && finder.replace !== undefined;
+        if (this.open) {
+            queueMicrotask(() => this.search('first'));
+        }
+        return {
+            detach: () => {
+                if (this.attached === finder) {
+                    this.endSearch();
+                    this.attached = undefined;
+                }
+            },
+            found: (result) => {
+                if (this.attached === finder) {
+                    this.report(result);
+                }
+            },
+        };
+    }
+    async show() {
+        const active = deepActiveElement();
+        if (active !== null && !deepContains(this, active)) {
+            this.returnTo = active;
+        }
+        const selected = this.attached ? '' : this.selectedText();
+        if (selected !== '') {
+            this.query = selected;
+        }
+        if (!this.requestOpen(true)) {
+            return;
+        }
+        await this.updateComplete;
+        const field = this.partNamed('field');
+        field?.focus();
+        field?.select();
+    }
+    hide() {
+        const active = deepActiveElement();
+        const focused = active !== null && deepContains(this, active);
+        if (!this.requestOpen(false)) {
+            return;
+        }
+        const back = this.returnTo;
+        this.returnTo = undefined;
+        if (focused && back?.isConnected) {
+            ;
+            back.focus();
+        }
+    }
+    next() {
+        if (this.open) {
+            this.search('next');
+        }
+    }
+    previous() {
+        if (this.open) {
+            this.search('previous');
+        }
+    }
+    refresh() {
+        if (this.open) {
+            this.search('first');
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const document = this.ownerDocument;
+        document.addEventListener('keydown', this.handleShortcut, true);
+        document.addEventListener('pointerdown', this.handleWhere, true);
+        document.addEventListener('focusin', this.handleWhere, true);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        const document = this.ownerDocument;
+        document.removeEventListener('keydown', this.handleShortcut, true);
+        document.removeEventListener('pointerdown', this.handleWhere, true);
+        document.removeEventListener('focusin', this.handleWhere, true);
+        this.endSearch();
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.toggleState('replace-open', this.replacing);
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (!this.open) {
+            if (changed.has('open')) {
+                this.endSearch();
+            }
+            return;
+        }
+        if (SEARCHED.some((name) => changed.has(name))) {
+            queueMicrotask(() => this.search('first'));
+        }
+    }
+    get target() {
+        return this.for === '' ? null : elementById(this, this.for);
+    }
+    get finder() {
+        if (this.attached) {
+            return this.attached;
+        }
+        const root = this.target;
+        if (root === null) {
+            return undefined;
+        }
+        if (this.own?.root !== root || this.own.skip !== this.skip) {
+            this.own?.finder.end();
+            this.own = {
+                finder: textFinder(root, { found: (result) => this.report(result), skip: this.skip }),
+                root,
+                skip: this.skip,
+            };
+        }
+        return this.own.finder;
+    }
+    get findQuery() {
+        return {
+            caseSensitive: this.matchCase,
+            regex: this.regex,
+            replace: this.replacement,
+            search: this.query,
+            wholeWord: this.wholeWord,
+        };
+    }
+    get readable() {
+        return this.query === '' || findPattern(this.findQuery) !== undefined;
+    }
+    get replaceable() {
+        return !this.hydrating && !this.readOnly && this.attached?.replace !== undefined;
+    }
+    get replacing() {
+        return this.replaceOpen && this.replaceable;
+    }
+    get countText() {
+        if (!this.readable) {
+            return this.invalidLabel;
+        }
+        return this.result === undefined
+            ? ''
+            : formatWords(this, 'matchesLabel', {
+                count: this.result.count,
+                index: Math.max(this.result.index, 0) + 1,
+            });
+    }
+    offers(option) {
+        return this.options.split(/\s+/).includes(option);
+    }
+    selectedText() {
+        const selection = this.ownerDocument.getSelection?.();
+        const root = this.target;
+        const text = selection?.toString() ?? '';
+        const anchor = selection?.anchorNode ?? null;
+        return root !== null &&
+            anchor !== null &&
+            root.contains(anchor) &&
+            text.trim() !== '' &&
+            !/[\r\n]/.test(text)
+            ? text
+            : '';
+    }
+    search(direction) {
+        const finder = this.finder;
+        if (!finder) {
+            return;
+        }
+        if (this.marking !== finder) {
+            this.endSearch();
+        }
+        if (this.query === '' || !this.readable) {
+            this.endSearch();
+            if (!this.readable) {
+                this.say(this.invalidLabel);
+            }
+            return;
+        }
+        this.marking = finder;
+        const result = finder.find(this.findQuery, direction);
+        if (result) {
+            this.report(result);
+        }
+    }
+    endSearch() {
+        this.marking?.end();
+        this.marking = undefined;
+        this.result = undefined;
+    }
+    report(result) {
+        if (!this.open) {
+            return;
+        }
+        this.result = result;
+        this.say(this.countText);
+        this.dispatchEvent(new HelixFoundEvent({ count: result.count, index: result.index }));
+    }
+    replace(all) {
+        const finder = this.finder;
+        if (!finder?.replace || this.readOnly || this.query === '' || !this.readable) {
+            return;
+        }
+        const result = finder.replace(this.findQuery, all);
+        if (result) {
+            this.report(result);
+        }
+    }
+    say(text) {
+        this.announcement = text;
+        this.said += 1;
+    }
+    within(event) {
+        const path = event.composedPath();
+        const root = this.target;
+        return path.includes(this) || (root !== null && path.includes(root));
+    }
+    toggleOption(option) {
+        this[option] = !this[option];
+    }
+    renderReplaceToggle() {
+        if (!this.replaceable) {
+            return nothing;
+        }
+        const button = this.tag('icon-button');
+        return html `<${button}
+      part="replace-toggle"
+      exportparts="button: replace-toggle-button, live: replace-toggle-live, spinner: replace-toggle-spinner, text: replace-toggle-text"
+      .expanded=${this.replacing}
+      label=${this.replaceToggleLabel}
+      @click=${() => {
+            this.replaceOpen = !this.replaceOpen;
+        }}
+      @helix-press=${stopPress}
+    >
+      ${this.replacing ? drawIcon(caretDown) : html `<span data-mirror>${drawIcon(caretRight)}</span>`}
+    </${button}>`;
+    }
+    renderOptionButtons() {
+        const button = this.tag('icon-button');
+        return html `${this.offers('match-case')
+            ? html `<${button}
+            part="match-case${this.matchCase ? ' match-case-pressed' : ''}"
+            exportparts="button: match-case-button, live: match-case-live, spinner: match-case-spinner, text: match-case-text"
+            aria-pressed=${this.matchCase ? 'true' : 'false'}
+            label=${this.matchCaseLabel}
+            @click=${() => this.toggleOption('matchCase')}
+            @helix-press=${stopPress}
+          >
+            <slot name="match-case-icon">${drawIcon(textAa)}</slot>
+          </${button}>`
+            : nothing}${this.offers('whole-word')
+            ? html `<${button}
+            part="whole-word${this.wholeWord ? ' whole-word-pressed' : ''}"
+            exportparts="button: whole-word-button, live: whole-word-live, spinner: whole-word-spinner, text: whole-word-text"
+            aria-pressed=${this.wholeWord ? 'true' : 'false'}
+            label=${this.wholeWordLabel}
+            @click=${() => this.toggleOption('wholeWord')}
+            @helix-press=${stopPress}
+          >
+            <slot name="whole-word-icon">${drawIcon(textAUnderline)}</slot>
+          </${button}>`
+            : nothing}${this.offers('regex')
+            ? html `<${button}
+            part="regex${this.regex ? ' regex-pressed' : ''}"
+            exportparts="button: regex-button, live: regex-live, spinner: regex-spinner, text: regex-text"
+            aria-pressed=${this.regex ? 'true' : 'false'}
+            label=${this.regexLabel}
+            @click=${() => this.toggleOption('regex')}
+            @helix-press=${stopPress}
+          >
+            <slot name="regex-icon">${drawIcon(asterisk)}</slot>
+          </${button}>`
+            : nothing}`;
+    }
+    renderControls() {
+        const toolbar = this.tag('toolbar');
+        const button = this.tag('icon-button');
+        const searchable = this.readable && (this.result?.count ?? 0) > 0;
+        return html `<${toolbar} part="controls" exportparts="toolbar: controls-toolbar" label=${this.controlsLabel}>
+      ${this.renderOptionButtons()}
+      <slot name="actions" part="actions"></slot>
+      <${button}
+        part="previous"
+        exportparts="button: previous-button, live: previous-live, spinner: previous-spinner, text: previous-text"
+        ?disabled=${!searchable}
+        label=${this.previousLabel}
+        @click=${() => this.search('previous')}
+        @helix-press=${stopPress}
+      >
+        <slot name="previous-icon">${drawIcon(caretUp)}</slot>
+      </${button}>
+      <${button}
+        part="next"
+        exportparts="button: next-button, live: next-live, spinner: next-spinner, text: next-text"
+        ?disabled=${!searchable}
+        label=${this.nextLabel}
+        @click=${() => this.search('next')}
+        @helix-press=${stopPress}
+      >
+        <slot name="next-icon">${drawIcon(caretDown)}</slot>
+      </${button}>
+      <${button}
+        part="close"
+        exportparts="button: close-button, live: close-live, spinner: close-spinner, text: close-text"
+        label=${this.closeLabel}
+        @click=${() => this.hide()}
+        @helix-press=${stopPress}
+      >
+        <slot name="close-icon">${drawIcon(x)}</slot>
+      </${button}>
+    </${toolbar}>`;
+    }
+    renderReplace() {
+        if (!this.replacing) {
+            return nothing;
+        }
+        const button = this.tag('button');
+        const searchable = this.readable && (this.result?.count ?? 0) > 0;
+        return html `<input
+        part="replace-field"
+        aria-label=${this.replaceFieldLabel}
+        autocomplete="off"
+        placeholder=${this.replaceFieldLabel}
+        spellcheck="false"
+        type="text"
+        .value=${live(this.replacement)}
+        @input=${this.handleReplaceInput}
+      />
+      <${button}
+        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}
+      </${button}>
+      <${button}
+        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}
+      </${button}>`;
+    }
+    render() {
+        return html `<div
+        part="bar"
+        role="search"
+        aria-label=${this.label}
+        ?hidden=${!this.open}
+        @keydown=${this.handleKeys}
+      >
+        ${this.renderReplaceToggle()}
+        <input
+          part="field"
+          aria-invalid=${this.readable ? nothing : 'true'}
+          aria-label=${this.label}
+          autocomplete="off"
+          placeholder=${this.label}
+          spellcheck="false"
+          type="search"
+          .value=${live(this.query)}
+          @input=${this.handleInput}
+        />
+        <span part="count" aria-hidden="true">${this.countText || nothing}</span>
+        ${this.renderControls()}
+        ${this.renderReplace()}
+      </div>
+      <span part="live" role="status">${keyed(this.said, this.announcement)}</span>`;
+    }
+};
+__decorate([
+    words,
+    property({ attribute: 'close-label' })
+], HelixHeadlessFind.prototype, "closeLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'controls-label' })
+], HelixHeadlessFind.prototype, "controlsLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessFind.prototype, "for", void 0);
+__decorate([
+    words,
+    property({ attribute: 'invalid-label' })
+], HelixHeadlessFind.prototype, "invalidLabel", void 0);
+__decorate([
+    words,
+    property()
+], HelixHeadlessFind.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'match-case', type: Boolean })
+], HelixHeadlessFind.prototype, "matchCase", void 0);
+__decorate([
+    words,
+    property({ attribute: 'match-case-label' })
+], HelixHeadlessFind.prototype, "matchCaseLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'matches-label' })
+], HelixHeadlessFind.prototype, "matchesLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'next-label' })
+], HelixHeadlessFind.prototype, "nextLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessFind.prototype, "options", void 0);
+__decorate([
+    words,
+    property({ attribute: 'previous-label' })
+], HelixHeadlessFind.prototype, "previousLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessFind.prototype, "query", void 0);
+__decorate([
+    property({ attribute: 'readonly', type: Boolean })
+], HelixHeadlessFind.prototype, "readOnly", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessFind.prototype, "regex", void 0);
+__decorate([
+    words,
+    property({ attribute: 'regex-label' })
+], HelixHeadlessFind.prototype, "regexLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'replace-all-label' })
+], HelixHeadlessFind.prototype, "replaceAllLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'replace-field-label' })
+], HelixHeadlessFind.prototype, "replaceFieldLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'replace-label' })
+], HelixHeadlessFind.prototype, "replaceLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessFind.prototype, "replacement", void 0);
+__decorate([
+    words,
+    property({ attribute: 'replace-toggle-label' })
+], HelixHeadlessFind.prototype, "replaceToggleLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessFind.prototype, "shortcut", void 0);
+__decorate([
+    property()
+], HelixHeadlessFind.prototype, "skip", void 0);
+__decorate([
+    property({ attribute: 'whole-word', type: Boolean })
+], HelixHeadlessFind.prototype, "wholeWord", void 0);
+__decorate([
+    words,
+    property({ attribute: 'whole-word-label' })
+], HelixHeadlessFind.prototype, "wholeWordLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessFind.prototype, "result", void 0);
+__decorate([
+    state()
+], HelixHeadlessFind.prototype, "replaceOpen", void 0);
+__decorate([
+    state()
+], HelixHeadlessFind.prototype, "attached", void 0);
+__decorate([
+    state()
+], HelixHeadlessFind.prototype, "announcement", void 0);
+__decorate([
+    state()
+], HelixHeadlessFind.prototype, "said", void 0);
+HelixHeadlessFind = __decorate([
+    customElement('helix-headless-find')
+], HelixHeadlessFind);
+export { HelixHeadlessFind };

package/dist/graph/root/graph-root.d.ts

@@ -2,6 +2,7 @@ import { type GraphSignalDetail, HelixElement, ToolbarController, type ViewportP
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import { type StaticValue } from 'lit/static-html.js';
 import '../../icon-button/index.js';
+import '../../tooltip/index.js';
 import { type GraphLink, type GraphNode } from './graph-model.js';
 declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.dev/helix-core").ViewportElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerActiveInterface) & typeof HelixElement;
 /**
@@ -149,6 +150,16 @@ declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.
  * @csspart settling - What is said while a layout runs unseen, where the reader asked for less motion or the page paused its motion, over the hidden drawing.
  * @csspart stage - The drawing and its controls.
  * @csspart stop-layout - The button that stops a layout that has run past five seconds, where the notes stand.
+ * @csspart tooltip-arrow - The arrow of the tooltip that names each button, forwarded from `Tooltip`.
+ * @csspart tooltip-arrow-bottom - The arrow while the bubble is below its button, on the bubble's top edge. Set together with `tooltip-arrow`.
+ * @csspart tooltip-arrow-left - The arrow while the bubble is left of its button, on the bubble's right edge. Set together with `tooltip-arrow`.
+ * @csspart tooltip-arrow-right - The arrow while the bubble is right of its button, on the bubble's left edge. Set together with `tooltip-arrow`.
+ * @csspart tooltip-arrow-top - The arrow while the bubble is above its button, on the bubble's bottom edge. Set together with `tooltip-arrow`.
+ * @csspart tooltip-surface - The bubble of the tooltip that names each button, forwarded from `Tooltip`.
+ * @csspart tooltip-surface-bottom - The bubble while it is below its button. Set together with `tooltip-surface`.
+ * @csspart tooltip-surface-left - The bubble while it is left of its button. Set together with `tooltip-surface`.
+ * @csspart tooltip-surface-right - The bubble while it is right of its button. Set together with `tooltip-surface`.
+ * @csspart tooltip-surface-top - The bubble while it is above its button. Set together with `tooltip-surface`.
  * @csspart viewport - The box the renderer draws in.
  * @csspart zoom-in - The zoom in button.
  * @csspart zoom-in-button - `zoom-in`'s inner button.

package/dist/graph/root/graph-root.js

@@ -5,6 +5,7 @@ import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html as staticHtml } from 'lit/static-html.js';
 import '../../icon-button/index.js';
+import '../../tooltip/index.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { adjacencyOf, cursorAfter, entriesOf, groupsOf, nameOf, sortedOf, within, withoutGroups, } from './graph-model.js';
@@ -559,9 +560,11 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
             return nothing;
         }
         const button = this.controlTag;
+        const tip = this.tag('tooltip');
         const { material, raised } = this.controlAxes;
         return staticHtml `<${button}
       part="notes-toggle"
+      id="notes-toggle"
       exportparts="button: notes-toggle-button, live: notes-toggle-live, spinner: notes-toggle-spinner, text: notes-toggle-text"
       aria-controls="panel"
       .expanded=${this.panelOpen}
@@ -574,7 +577,7 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
       <svg aria-hidden="true" fill="currentColor" viewBox=${list.viewBox}>
         ${unsafeSVG(list.content)}
       </svg>
-    </${button}>`;
+    </${button}><${tip} for="notes-toggle" content=${this.notesLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`;
     }
     renderFilterIcon() {
         return html `<slot name="filter-icon">

package/dist/index.d.ts

@@ -50,6 +50,7 @@ export * from './empty/index.js';
 export * from './file-input/index.js';
 export * from './filter-input/index.js';
 export * from './filter-input/menu/index.js';
+export * from './find/index.js';
 export * from './format-date/index.js';
 export * from './graph/index.js';
 export * from './heatmap/index.js';

package/dist/index.js

@@ -41,6 +41,7 @@ export * from './empty/index.js';
 export * from './file-input/index.js';
 export * from './filter-input/index.js';
 export * from './filter-input/menu/index.js';
+export * from './find/index.js';
 export * from './format-date/index.js';
 export * from './graph/index.js';
 export * from './heatmap/index.js';

package/dist/input/root/input-root.d.ts

@@ -99,6 +99,12 @@ export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
      * a token like `email` or `bday` to ask for autofill, or to `off` to refuse.
      */
     autocomplete: string;
+    /**
+     * Whether the browser corrects words as the reader types, as the platform's
+     * `autocorrect`. Turn it off, with `autocorrect="off"`, for text that is not
+     * prose, such as an address or a code, which corrections would change.
+     */
+    autocorrect: boolean;
     /**
      * Whether the field shows a button that empties it.
      *

package/dist/input/root/input-root.js

@@ -13,6 +13,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinVoice(MixinContro
         this.announcesInput = true;
         this.autocapitalize = '';
         this.autocomplete = '';
+        this.autocorrect = true;
         this.clearable = false;
         this.clearLabel = 'Clear';
         this.enterKeyHint = '';
@@ -198,6 +199,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinVoice(MixinContro
         inputmode=${this.inputMode || nothing}
         enterkeyhint=${this.enterKeyHint || nothing}
         autocapitalize=${this.autocapitalize || nothing}
+        autocorrect=${this.autocorrect ? nothing : 'off'}
         aria-describedby=${this.describedBy ?? nothing}
         aria-invalid=${this.invalidity ?? nothing}
         ?disabled=${this.isDisabled}
@@ -243,6 +245,11 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessInput.prototype, "autocomplete", void 0);
+__decorate([
+    property({
+        converter: { fromAttribute: (value) => value?.toLowerCase() !== 'off' },
+    })
+], HelixHeadlessInput.prototype, "autocorrect", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessInput.prototype, "clearable", void 0);