@fusion.dev/helix 0.172.0 → 0.174.0

package/dist/sandbox/source/sandbox-source.d.ts

@@ -28,8 +28,37 @@ import { type SandboxTokenizer } from '../tokens.js';
  * that wraps keeps one number. The numbers are drawn, and hidden from screen
  * readers, which read the field.
  *
- * Enter keeps the indentation of the line it breaks, and the new line is
- * undone with the next undo as typing is.
+ * Enter keeps the indentation of the line it breaks, one level deeper after
+ * an opening bracket, and puts the closing bracket of an empty pair on a line
+ * of its own. The new line is undone with the next undo as typing is.
+ *
+ * **The editing keys are CodeMirror's.** Tab with text selected indents every
+ * line the selection touches. `Mod+]` indents the lines and `Mod+[` outdents
+ * them, and `Mod+/` comments them out or back in: `//` in a `js` pane, and one
+ * block comment in an `html` or `css` pane. `Mod` is Command on a Mac and
+ * Control elsewhere. Each is one step of undo.
+ *
+ * **`close-brackets` closes brackets and quotes** as you type them: `(`, `[`,
+ * `{` and the three quotes. A closing character typed before the same one
+ * steps over it, Backspace between an empty pair deletes both, and a bracket
+ * typed with text selected goes around the text. **`match-brackets` marks
+ * the bracket beside the caret and its pair** while the field has focus, each
+ * a `bracket` part, and a bracket with no pair is also `bracket-unmatched`.
+ * A bracket in a string or a comment is not matched, where `tokenize` says
+ * which runs those are.
+ *
+ * **`complete` offers completions as you type**: the words of the source and
+ * of `completions` that start with the word before the caret. They open in a
+ * list under the word. The arrow keys move through it, Enter or Tab takes the
+ * word, and Escape closes it. `Ctrl+Space` opens it where it is closed. The
+ * field is `aria-autocomplete="list"` and points at the word chosen with
+ * `aria-activedescendant`, so a screen reader reads each one. Give
+ * `completions` the names a page uses, such as the tag and attribute names of
+ * a custom elements manifest through `manifestWords`.
+ *
+ * **The pane is `:state(modified)` while its source differs from the source it
+ * was given**, the first `value` or the last one set from outside. `reset()`
+ * puts that source back, as an edit the sandbox passes on to its preview.
  *
  * **The source can be written inside the pane** where `value` is not set: its
  * text, or the markup of a `<template>` it holds, without the indentation the
@@ -45,15 +74,23 @@ import { type SandboxTokenizer } from '../tokens.js';
  * @event {HelixCaretEvent} helix-caret - Fired when the cursor moves.
  * @event {HelixEditEvent} helix-edit - Fired after the source was edited, with the new source.
  *
- * @csspart field - The box that scrolls the field and its colors together, under `tokenize` or `line-numbers`.
- * @csspart highlight - The colored copy of the source drawn under the field, under `tokenize` or `line-numbers`.
+ * @csspart bracket - The bracket beside the caret and its pair, under `match-brackets`.
+ * @csspart bracket-unmatched - A bracket beside the caret with no pair, under `match-brackets`.
+ * @csspart completion - One word in the list of completions, under `complete`.
+ * @csspart completion-active - The word chosen in that list, which Enter or Tab takes.
+ * @csspart completions - The list of completions under the word being typed, under `complete`.
+ * @csspart field - The box that scrolls the field and its colors together, under `tokenize`, `line-numbers`, `match-brackets` or `complete`.
+ * @csspart highlight - The colored copy of the source drawn under the field, under `tokenize`, `line-numbers`, `match-brackets` or `complete`.
  * @csspart line - One line of that copy, under `line-numbers`, numbered in the gutter by its `::before`.
  * @csspart source - The editable region.
  * @csspart token - One run of the source that has a kind, under `tokenize`.
  *
  * @cssproperty --sandbox-source-background-color - Fill behind the source.
+ * @cssproperty --sandbox-source-bracket-color - Fill behind a matched bracket, under `match-brackets`. Defaults to `--helix-color-accent-subtle`.
  * @cssproperty --sandbox-source-callable-color - Color of a `callable` run, under `tokenize`. Defaults to `--helix-color-syntax-callable`.
  * @cssproperty --sandbox-source-comment-color - Color of a `comment` run, under `tokenize`. Defaults to `--helix-color-syntax-comment`.
+ * @cssproperty --sandbox-source-completions-border-width - Width of the edge of the list of completions, under `complete`. Defaults to `--helix-border-floating`.
+ * @cssproperty --sandbox-source-completions-shadow - Shadow under the list of completions, under `complete`. Defaults to `--helix-shadow-floating`.
  * @cssproperty --sandbox-source-constant-color - Color of a `constant` run, under `tokenize`. Defaults to `--helix-color-syntax-constant`.
  * @cssproperty --sandbox-source-invalid-color - Color of an `invalid` run, under `tokenize`. Defaults to `--helix-color-syntax-invalid`.
  * @cssproperty --sandbox-source-keyword-color - Color of a `keyword` run, under `tokenize`. Defaults to `--helix-color-syntax-keyword`.
@@ -62,6 +99,8 @@ import { type SandboxTokenizer } from '../tokens.js';
  * @cssproperty --sandbox-source-name-color - Color of a `name` run, under `tokenize`. Defaults to `--helix-color-syntax-name`.
  * @cssproperty --sandbox-source-string-color - Color of a `string` run, under `tokenize`. Defaults to `--helix-color-syntax-string`.
  * @cssproperty --sandbox-source-tag-color - Color of a `tag` run, under `tokenize`. Defaults to `--helix-color-syntax-tag`.
+ *
+ * @cssstate modified - While the source differs from the source the pane was given, until `reset()` or a new `value`.
  */
 export declare class HelixSandboxSource extends HelixElement {
     /**
@@ -69,6 +108,26 @@ export declare class HelixSandboxSource extends HelixElement {
      * `registerWords('de', { 'helix-sandbox-source': { fieldLabel: 'Quelltext' } })`.
      */
     static words: string;
+    /**
+     * Whether typing an opening bracket or quote types its closing one too, and
+     * a bracket typed with text selected goes around it.
+     */
+    closeBrackets: boolean;
+    /**
+     * Whether the pane offers completions for the word before the caret, from
+     * the words of the source and of `completions`.
+     */
+    complete: boolean;
+    /**
+     * Words the pane offers under `complete` beside the words of the source,
+     * such as tag and attribute names. `manifestWords` reads them from a custom
+     * elements manifest. Set it as JSON in the attribute or as an array.
+     */
+    completions: readonly string[];
+    /**
+     * The name of the list of completions, read by screen readers.
+     */
+    completionsLabel: string;
     /**
      * The editable region's name, read by screen readers.
      */
@@ -92,6 +151,11 @@ export declare class HelixSandboxSource extends HelixElement {
      * Whether each line of the source is numbered, in a gutter beside it.
      */
     lineNumbers: boolean;
+    /**
+     * Whether the bracket beside the caret and its pair are marked while the
+     * field has focus.
+     */
+    matchBrackets: boolean;
     /**
      * Which source this pane holds. Every `helix-before-edit` event includes it.
      *
@@ -101,6 +165,12 @@ export declare class HelixSandboxSource extends HelixElement {
      * Not reflected: nothing selects on it, so it keeps a real default instead.
      */
     name: string;
+    /**
+     * Whether the source is read only: it can be selected and copied, and not
+     * edited, as Sandpack's `readOnly` file is. Tab moves focus out of a field
+     * that is read only.
+     */
+    readOnly: boolean;
     /**
      * Whether Tab indents the source. When it is off, Tab moves focus.
      */
@@ -125,6 +195,29 @@ export declare class HelixSandboxSource extends HelixElement {
     value: string;
     /** Set by Escape, so the next Tab leaves the field. */
     private escaped;
+    /** The source the pane was given, which `reset()` puts back. */
+    private baseline;
+    /** The source the last edit left, to tell an edit from a `value` set from outside. */
+    private edited;
+    /** Where the caret is, while nothing is selected, for `match-brackets`. */
+    private caret;
+    /** The completions open under the word being typed, under `complete`. */
+    private offered;
+    /** Which of the completions Enter or Tab takes. */
+    private chosen;
+    /** Set while a completion is written, so writing it does not offer more. */
+    private accepting;
+    /**
+     * Whether the source differs from the source the pane was given: its first
+     * `value`, or the last one set from outside.
+     */
+    get modified(): boolean;
+    /**
+     * Puts back the source the pane was given, as an edit: `helix-before-edit`
+     * is sent first and can refuse it, and the sandbox passes it to its preview.
+     */
+    reset(): void;
+    private get field();
     /** Whether the source written inside the pane has been read. */
     private read;
     /**
@@ -141,6 +234,8 @@ export declare class HelixSandboxSource extends HelixElement {
     private readWritten;
     connectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
+    /** Places the completions under the word they complete, and keeps the chosen one in view. */
+    protected updated(changed: PropertyValues): void;
     /**
      * Reports where the cursor is, for a status bar to read.
      *
@@ -172,6 +267,14 @@ export declare class HelixSandboxSource extends HelixElement {
      * without sending the caret to the end. Exactly what `Input` does with the
      * same helper for the same reason. */
     private readonly handleInput;
+    /** Opens the completions for the word before the caret, or closes them where there are none. */
+    private offer;
+    /** Writes the chosen completion over the word it completes. */
+    private accept;
+    /**
+     * The keys of the open completions. Returns whether the key was theirs.
+     */
+    private completionKey;
     /**
      * The one place an edit is taken, so a refusal cannot be forgotten at one of
      * them. Two paths reach it, a keystroke and the tab that indents.
@@ -179,8 +282,21 @@ export declare class HelixSandboxSource extends HelixElement {
     private edit;
     private readonly handleKeydown;
     /**
-     * Breaks the line with the indentation it has, where it has some. A line at
-     * the margin is left to the platform's own Enter.
+     * The editing commands: the `Mod` keys for indenting and comments, and, where
+     * they are on, closing brackets and opening completions. Returns whether the
+     * key was one, so it does nothing else.
+     */
+    private command;
+    /**
+     * Makes a change as typing would, through `insert`, and puts the selection
+     * where the change says. A change that refuses nothing and replaces nothing
+     * only moves the caret.
+     */
+    private apply;
+    /**
+     * Breaks the line with the indentation it has, one level deeper after an
+     * opening bracket. A line at the margin with no bracket is left to the
+     * platform's own Enter.
      */
     private breakLine;
     /**
@@ -197,6 +313,15 @@ export declare class HelixSandboxSource extends HelixElement {
      */
     private insert;
     protected render(): TemplateResult;
+    /**
+     * The runs with the brackets beside the caret and the completions' anchor
+     * marked, where either is on.
+     */
+    private mark;
+    /** The list of completions, while it is open. */
+    private renderCompletions;
+    /** Closes the completions, as the field loses focus. */
+    private readonly close;
     /** The field itself and its description, which is the whole pane without `tokenize`. */
     private renderField;
     static styles: CSSResultGroup;

package/dist/sandbox/source/sandbox-source.js

@@ -6,8 +6,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement, formatWords, HelixBeforeEditEvent, HelixCaretEvent, HelixEditEvent, HelixElement, onUnlessFalse, restoreValue, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { drawnRuns } from '../tokens.js';
+import { breakLine, closeBracket, deletePair, indentLines, matchBracket, outdentLines, suggest, syntaxOf, toggleComment, } from './editing.js';
 import { styles } from './sandbox-source.css.js';
 const MODIFIERS = new Set(['Alt', 'AltGraph', 'Control', 'Meta', 'Shift']);
 const dedent = (text) => {
@@ -20,37 +21,90 @@ const dedent = (text) => {
         .map((line) => /^[ \t]*/.exec(line)?.[0].length ?? 0));
     return Number.isFinite(shared) ? lines.map((line) => line.slice(shared)).join('\n') : '';
 };
+const cut = (runs, marks) => {
+    if (marks.size === 0) {
+        return [...runs];
+    }
+    const points = [...marks.keys()].sort((a, b) => a - b);
+    const pieces = [];
+    let at = 0;
+    let next = 0;
+    for (const { kind, text } of runs) {
+        let from = 0;
+        for (let point = points[next]; point !== undefined && point < at + text.length; point = points[++next]) {
+            const mark = marks.get(point);
+            const index = point - at;
+            if (index > from) {
+                pieces.push({ kind, text: text.slice(from, index) });
+            }
+            from = mark === 'anchor' ? index : index + 1;
+            pieces.push({ kind, mark, text: text.slice(index, from) });
+        }
+        if (from < text.length) {
+            pieces.push({ kind, text: text.slice(from) });
+        }
+        at += text.length;
+    }
+    for (const point of points.slice(next)) {
+        pieces.push({ mark: marks.get(point), text: '' });
+    }
+    return pieces;
+};
 const linesOf = (runs) => {
     const lines = [[]];
-    for (const { kind, text } of runs) {
+    for (const { kind, mark, text } of runs) {
         text.split('\n').forEach((piece, at) => {
             if (at > 0) {
                 lines.push([]);
             }
-            if (piece !== '') {
-                lines.at(-1)?.push(kind ? { kind, text: piece } : { text: piece });
+            if (piece !== '' || mark === 'anchor') {
+                lines.at(-1)?.push({ kind, mark, text: piece });
             }
         });
     }
     return lines;
 };
+const quietOf = (runs, length) => {
+    const quiet = new Uint8Array(length);
+    let at = 0;
+    for (const { kind, text } of runs) {
+        if (kind === 'string' || kind === 'comment') {
+            quiet.fill(1, at, at + text.length);
+        }
+        at += text.length;
+    }
+    return quiet;
+};
 let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
     constructor() {
         super(...arguments);
+        this.closeBrackets = false;
+        this.complete = false;
+        this.completions = [];
+        this.completionsLabel = 'Completions';
         this.fieldLabel = 'Example source';
         this.fieldNameLabel = '{field}, {name}';
         this.keysDescription = 'Tab inserts two spaces. To leave, press Escape and then Tab, or press Shift+Tab to go back.';
         this.label = '';
         this.lineNumbers = false;
+        this.matchBrackets = false;
         this.name = 'html';
+        this.readOnly = false;
         this.tabIndents = true;
         this.value = '';
         this.escaped = false;
+        this.baseline = '';
+        this.caret = -1;
+        this.chosen = 0;
+        this.accepting = false;
         this.read = false;
         this.reportCaret = (event) => {
             const field = event.target;
             const at = field.selectionStart ?? 0;
             const before = field.value.slice(0, at);
+            if (this.matchBrackets) {
+                this.caret = at === field.selectionEnd ? at : -1;
+            }
             this.dispatchEvent(new HelixCaretEvent({
                 column: at - (before.lastIndexOf('\n') + 1) + 1,
                 line: before.split('\n').length,
@@ -60,8 +114,24 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
             const field = event.target;
             this.edit(field, field.value);
             this.reportCaret(event);
+            const typed = event.inputType ?? '';
+            if (this.complete &&
+                !this.accepting &&
+                (this.offered || /^insert(?:Text|Replacement)/.test(typed))) {
+                this.offer(field);
+            }
+            else {
+                this.offered = undefined;
+            }
         };
         this.handleKeydown = (event) => {
+            const field = event.target;
+            if (this.readOnly) {
+                return;
+            }
+            if (this.completionKey(event, field)) {
+                return;
+            }
             if (event.key === 'Escape') {
                 this.escaped = true;
                 return;
@@ -69,6 +139,11 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
             if (MODIFIERS.has(event.key)) {
                 return;
             }
+            if (this.command(event, field)) {
+                this.escaped = false;
+                event.preventDefault();
+                return;
+            }
             if (event.key === 'Enter' &&
                 !event.isComposing &&
                 !(event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)) {
@@ -81,10 +156,30 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
                 return;
             }
             event.preventDefault();
-            this.insert(event.target, '  ');
+            if (field.selectionStart === field.selectionEnd) {
+                this.insert(field, '  ');
+            }
+            else {
+                this.apply(field, indentLines(field.value, field.selectionStart, field.selectionEnd));
+            }
+        };
+        this.close = () => {
+            this.offered = undefined;
         };
     }
     static { this.words = 'helix-sandbox-source'; }
+    get modified() {
+        return this.value === this.edited && this.value !== this.baseline;
+    }
+    reset() {
+        const field = this.field;
+        if (field && this.modified) {
+            this.edit(field, this.baseline);
+        }
+    }
+    get field() {
+        return this.renderRoot.querySelector('textarea');
+    }
     readWritten() {
         if (this.read ||
             this.children === undefined ||
@@ -108,11 +203,77 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
         if (!this.hasUpdated) {
             this.readWritten();
         }
+        if (this.value !== this.edited) {
+            this.baseline = this.value;
+            this.edited = undefined;
+        }
+        this.toggleState('modified', this.modified);
+    }
+    updated(changed) {
+        super.updated(changed);
+        const list = this.renderRoot.querySelector('[part="completions"]');
+        const anchor = this.renderRoot.querySelector('#anchor');
+        const box = this.renderRoot.querySelector('[part="field"]');
+        if (!list || !anchor || !box) {
+            return;
+        }
+        const at = anchor.getBoundingClientRect();
+        const frame = box.getBoundingClientRect();
+        list.style.top = `${at.bottom - frame.top + box.scrollTop}px`;
+        list.style.left = `${at.left - frame.left + box.scrollLeft}px`;
+        list.querySelector('[aria-selected="true"]')?.scrollIntoView?.({ block: 'nearest' });
+    }
+    offer(field) {
+        const at = field.selectionStart;
+        this.offered =
+            at === field.selectionEnd ? suggest(field.value, at, this.completions) : undefined;
+        this.chosen = 0;
+    }
+    accept(field, index) {
+        const offered = this.offered;
+        const word = offered?.words[index];
+        this.offered = undefined;
+        if (!offered || word === undefined) {
+            return;
+        }
+        this.accepting = true;
+        this.apply(field, {
+            from: offered.from,
+            selection: [offered.from + word.length, offered.from + word.length],
+            text: word,
+            to: field.selectionEnd,
+        });
+        this.accepting = false;
+    }
+    completionKey(event, field) {
+        const offered = this.offered;
+        if (!offered) {
+            return false;
+        }
+        const count = offered.words.length;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            this.chosen = (this.chosen + (event.key === 'ArrowDown' ? 1 : count - 1)) % count;
+        }
+        else if (event.key === 'Enter' || (event.key === 'Tab' && !event.shiftKey)) {
+            this.accept(field, this.chosen);
+        }
+        else if (event.key === 'Escape') {
+            this.offered = undefined;
+        }
+        else {
+            if (/^(?:Arrow|Home|End|Page)/.test(event.key)) {
+                this.offered = undefined;
+            }
+            return false;
+        }
+        event.preventDefault();
+        return true;
     }
     edit(field, next) {
         const request = new HelixBeforeEditEvent({ value: next });
         const accepted = this.dispatchEvent(request);
         if (accepted) {
+            this.edited = next;
             this.value = next;
         }
         restoreValue(field, this.value);
@@ -120,14 +281,56 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
             this.dispatchEvent(new HelixEditEvent({ value: next }));
         }
     }
+    command(event, field) {
+        const { selectionEnd: to, selectionStart: from, value } = field;
+        const mod = (event.ctrlKey || event.metaKey) && !event.altKey;
+        if (event.isComposing) {
+            return false;
+        }
+        if (mod && (event.key === ']' || event.key === '[')) {
+            this.apply(field, (event.key === ']' ? indentLines : outdentLines)(value, from, to));
+            return true;
+        }
+        const syntax = syntaxOf(this.name);
+        if (mod && event.key === '/' && syntax) {
+            this.apply(field, toggleComment(value, from, to, syntax));
+            return true;
+        }
+        if (this.complete && event.ctrlKey && event.key === ' ') {
+            this.offer(field);
+            return true;
+        }
+        if (!this.closeBrackets || mod || event.altKey) {
+            return false;
+        }
+        const change = event.key === 'Backspace'
+            ? deletePair(value, from, to)
+            : event.key.length === 1
+                ? closeBracket(value, from, to, event.key)
+                : undefined;
+        this.apply(field, change);
+        return change !== undefined;
+    }
+    apply(field, change) {
+        if (!change) {
+            return;
+        }
+        const { from, selection, text, to } = change;
+        const next = `${field.value.slice(0, from)}${text}${field.value.slice(to)}`;
+        if (text !== '' || from !== to) {
+            field.setSelectionRange(from, to);
+            this.insert(field, text);
+        }
+        if (field.value === next) {
+            field.setSelectionRange(...selection);
+        }
+    }
     breakLine(event) {
         const field = event.target;
-        const at = field.selectionStart ?? 0;
-        const start = field.value.lastIndexOf('\n', at - 1) + 1;
-        const indent = /^[ \t]*/.exec(field.value.slice(start, at))?.[0] ?? '';
-        if (indent !== '') {
+        const change = breakLine(field.value, field.selectionStart, field.selectionEnd);
+        if (change) {
             event.preventDefault();
-            this.insert(field, `\n${indent}`);
+            this.apply(field, change);
         }
     }
     insert(field, text) {
@@ -135,7 +338,9 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
         const focused = field.getRootNode().activeElement === field;
         if (focused &&
             typeof ownerDocument.execCommand === 'function' &&
-            ownerDocument.execCommand('insertText', false, text)) {
+            (text === ''
+                ? ownerDocument.execCommand('delete')
+                : ownerDocument.execCommand('insertText', false, text))) {
             return;
         }
         field.setRangeText(text, field.selectionStart, field.selectionEnd, 'end');
@@ -143,7 +348,7 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
     }
     render() {
         const field = this.renderField();
-        if (!this.tokenize && !this.lineNumbers) {
+        if (!this.tokenize && !this.lineNumbers && !this.matchBrackets && !this.complete) {
             return field;
         }
         let given = [];
@@ -153,18 +358,63 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
         catch (error) {
             globalThis.reportError?.(error);
         }
-        const runs = drawnRuns(this.value, given);
-        const draw = (some) => some.map(({ kind, text }) => kind ? html `<span part="token" data-kind=${kind}>${text}</span>` : text);
+        const runs = this.mark(drawnRuns(this.value, given));
+        const draw = (some) => some.map(({ kind, mark, text }) => {
+            const lone = mark === 'unmatched';
+            const shown = mark === 'anchor'
+                ? html `<span id="anchor"></span>`
+                : mark
+                    ? html `<span part="bracket${lone ? ' bracket-unmatched' : ''}">${text}</span>`
+                    : text;
+            return kind ? html `<span part="token" data-kind=${kind}>${shown}</span>` : shown;
+        });
         if (this.lineNumbers) {
             const lines = linesOf(runs);
             return html `<div part="field" style="--_sandbox-source-gutter: ${String(lines.length).length}ch">
         <pre part="highlight" aria-hidden="true">${lines.map((line) => html `<span part="line">${draw(line)}</span>`)}</pre>
-        ${field}
+        ${field}${this.renderCompletions()}
       </div>`;
         }
         return html `<div part="field">
       <pre part="highlight" aria-hidden="true">${draw(runs)}${'\n'}</pre>
-      ${field}
+      ${field}${this.renderCompletions()}
+    </div>`;
+    }
+    mark(runs) {
+        const marks = new Map();
+        if (this.matchBrackets && this.caret >= 0) {
+            const quiet = quietOf(runs, this.value.length);
+            const found = matchBracket(this.value, this.caret, (index) => quiet[index] === 1);
+            if (found) {
+                marks.set(found.at, found.match === undefined ? 'unmatched' : 'bracket');
+                if (found.match !== undefined) {
+                    marks.set(found.match, 'bracket');
+                }
+            }
+        }
+        if (this.offered) {
+            marks.set(this.offered.from, 'anchor');
+        }
+        return cut(runs, marks);
+    }
+    renderCompletions() {
+        const offered = this.offered;
+        if (!offered) {
+            return nothing;
+        }
+        return html `<div part="completions" id="completions" role="listbox" aria-label=${this.completionsLabel}>
+      ${offered.words.map((word, at) => {
+            const chosen = at === this.chosen;
+            return html `<div part="completion${chosen ? ' completion-active' : ''}" id=${`completion-${at}`}
+          role="option" aria-selected=${chosen ? 'true' : 'false'}
+          @pointerdown=${(event) => {
+                event.preventDefault();
+                const field = this.field;
+                if (field) {
+                    this.accept(field, at);
+                }
+            }}>${word}</div>`;
+        })}
     </div>`;
     }
     renderField() {
@@ -173,10 +423,16 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
       aria-label=${this.label
             ? formatWords(this, 'fieldNameLabel', { field: this.fieldLabel, name: this.label })
             : this.fieldLabel}
-      aria-describedby=${this.tabIndents ? 'keys' : nothing}
+      aria-describedby=${this.tabIndents && !this.readOnly ? 'keys' : nothing}
+      aria-autocomplete=${this.complete ? 'list' : nothing}
+      aria-controls=${this.offered ? 'completions' : nothing}
+      aria-activedescendant=${this.offered ? `completion-${this.chosen}` : nothing}
       spellcheck="false"
+      ?readonly=${this.readOnly}
       .value=${this.value}
+      @blur=${this.close}
       @focus=${this.reportCaret}
+      @pointerdown=${this.close}
       @input=${this.handleInput}
       @keydown=${this.handleKeydown}
       @keyup=${this.reportCaret}
@@ -186,6 +442,19 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
     }
     static { this.styles = styles; }
 };
+__decorate([
+    property({ attribute: 'close-brackets', type: Boolean })
+], HelixSandboxSource.prototype, "closeBrackets", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixSandboxSource.prototype, "complete", void 0);
+__decorate([
+    property({ type: Array })
+], HelixSandboxSource.prototype, "completions", void 0);
+__decorate([
+    words,
+    property({ attribute: 'completions-label' })
+], HelixSandboxSource.prototype, "completionsLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'field-label' })
@@ -204,9 +473,15 @@ __decorate([
 __decorate([
     property({ attribute: 'line-numbers', reflect: true, type: Boolean })
 ], HelixSandboxSource.prototype, "lineNumbers", void 0);
+__decorate([
+    property({ attribute: 'match-brackets', type: Boolean })
+], HelixSandboxSource.prototype, "matchBrackets", void 0);
 __decorate([
     property()
 ], HelixSandboxSource.prototype, "name", void 0);
+__decorate([
+    property({ attribute: 'readonly', reflect: true, type: Boolean })
+], HelixSandboxSource.prototype, "readOnly", void 0);
 __decorate([
     property({ attribute: 'tab-indents', converter: onUnlessFalse })
 ], HelixSandboxSource.prototype, "tabIndents", void 0);
@@ -216,6 +491,15 @@ __decorate([
 __decorate([
     property()
 ], HelixSandboxSource.prototype, "value", void 0);
+__decorate([
+    state()
+], HelixSandboxSource.prototype, "caret", void 0);
+__decorate([
+    state()
+], HelixSandboxSource.prototype, "offered", void 0);
+__decorate([
+    state()
+], HelixSandboxSource.prototype, "chosen", void 0);
 HelixSandboxSource = __decorate([
     customElement('helix-sandbox-source')
 ], HelixSandboxSource);