@fusion.dev/helix-headless 0.218.0 → 0.220.0

package/dist/spatial-bar-chart/root/spatial-bar-chart-root.js

@@ -1,10 +1,16 @@
 import { __decorate } from "tslib";
-import { AriaForwardController, CHART_PLOT, customElement, depthOrder, drawTooltip, formatWords, HelixElement, HelixPlotChangeEvent, HelixPlotTurnEvent, HelixReadingChangeEvent, HelixReadingPressEvent, isRtl, MixinChartSource, MixinChartStatus, spokenReading, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, CHART_PLOT, customElement, drawTooltip, formatWords, HelixElement, HelixPlotChangeEvent, HelixPlotTurnEvent, HelixReadingChangeEvent, HelixReadingPressEvent, isRtl, MixinChartSource, MixinChartStatus, motionPaused, reducedMotion, shortNumber, spokenReading, words, } from '@fusion.dev/helix-core';
 import { html, nothing, svg, } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '../../tooltip/index.js';
-import { boundsOf, boxView, DragTurn, drawBox, SPATIAL_VIEW, turned, } from '../../spatial-scatter-chart/view.js';
-import { barsDrawn, barsOf } from '../bars.js';
+import { boundsOf, boxView, DragTurn, drawBox, SPATIAL_VIEW, TICK_SIZE, turned, } from '../../spatial-scatter-chart/view.js';
+import { barsDrawn, barsOf, climbing, floorOf, grownAt, growTime, heightened, namesOf, paintOrder, rowFits, tallestTimes, widthOf, } from '../bars.js';
+const barSizeOf = (style) => {
+    const size = Number.parseFloat(style.columnGap);
+    return Number.isFinite(size) && size > 0 ? size : undefined;
+};
+const WORD_LINES = 3.6;
+const CLIMB_SHARE = 0.25;
 const TURNS = {
     ArrowDown: { across: 0, up: -1 },
     ArrowLeft: { across: -1, up: 0 },
@@ -12,12 +18,22 @@ const TURNS = {
     ArrowUp: { across: 0, up: 1 },
 };
 const SERIES = 24;
+const toned = (tone) => tone && /^[a-z][a-z0-9-]*$/.test(tone) ? tone : undefined;
+const around = (frame, points) => {
+    const xs = [frame.x, frame.x + frame.width, ...points.map((point) => point.x)];
+    const ys = [frame.y, frame.y + frame.height, ...points.map((point) => point.y)];
+    const [left, top] = [Math.min(...xs), Math.min(...ys)];
+    return { height: Math.max(...ys) - top, width: Math.max(...xs) - left, x: left, y: top };
+};
 let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends MixinChartStatus(MixinChartSource(HelixElement)) {
     constructor() {
         super(...arguments);
+        this.grow = false;
+        this.growAgain = false;
         this.noBox = false;
         this.openLabel = '{category}, {series}: no value';
         this.plotLabel = '3D bar chart';
+        this.stacked = false;
         this.summaryLabel = '{count, plural, one {# bar} other {# bars}} in {series, plural, one {# series} other {# series}} over {categories, plural, one {# category} other {# categories}}, from {low} to {high}.';
         this.rendered = false;
         this.camera = SPATIAL_VIEW;
@@ -25,6 +41,8 @@ let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends Mi
             this.camera = next(this.camera);
         }, () => this.requestUpdate());
         this.told = -1;
+        this.grew = false;
+        this.fresh = new Map();
         this.aria = new AriaForwardController(this, {
             target: () => this.partNamed('plot'),
         });
@@ -71,8 +89,14 @@ let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends Mi
     get field() {
         const rows = this.sourceRows;
         const columns = this.plottedColumns;
-        if (this.memo?.rows !== rows || this.memo.columns !== columns) {
-            this.memo = { columns, field: barsOf(rows, columns), rows };
+        const series = this.series;
+        if (this.memo?.rows !== rows ||
+            this.memo.columns !== columns ||
+            this.memo.series !== series ||
+            this.memo.stacked !== this.stacked) {
+            const tones = series.map((one) => new Map(one.points.map((point) => [point.at, toned(point.tone)])));
+            const field = barsOf(rows, columns, this.stacked, (row, depth) => tones[depth]?.get(row));
+            this.memo = { columns, field, rows, series, stacked: this.stacked };
         }
         return this.memo.field;
     }
@@ -99,10 +123,158 @@ let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends Mi
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        this.pointer.grid = Math.max(1, this.field.series.length);
+        const field = this.field;
+        this.pointer.grid = Math.max(1, field.series.length);
+        const labels = new Set(field.categories);
+        const moves = typeof IntersectionObserver === 'function' &&
+            typeof requestAnimationFrame === 'function' &&
+            !reducedMotion() &&
+            !motionPaused();
+        if (this.grow && !this.grew && field.readings > 0) {
+            this.grew = true;
+            this.growth = moves ? {} : undefined;
+        }
+        else if (this.grow && this.grew && field.readings > 0 && this.drawnLabels && moves) {
+            const added = [...labels].filter((label) => !this.drawnLabels?.has(label));
+            if (added.length > 0 && !this.growth) {
+                const since = performance.now();
+                added.forEach((label, index) => {
+                    this.fresh.set(label, { count: added.length, index, since });
+                });
+                this.followFresh();
+            }
+        }
+        if (field.readings > 0) {
+            this.drawnLabels = labels;
+        }
+    }
+    followFresh() {
+        const frame = () => {
+            const now = performance.now();
+            for (const [label, one] of this.fresh) {
+                if (now - one.since >= growTime(one.count)) {
+                    this.fresh.delete(label);
+                }
+            }
+            this.requestUpdate();
+            if (this.fresh.size > 0) {
+                requestAnimationFrame(frame);
+            }
+        };
+        requestAnimationFrame(frame);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.sizes?.disconnect();
+        this.sizes = undefined;
+        this.measured = undefined;
+        this.seen?.disconnect();
+        this.seen = undefined;
+        this.gone?.disconnect();
+        this.gone = undefined;
+    }
+    measure() {
+        const box = this.partNamed('fallback');
+        if (!box || box === this.measured || typeof ResizeObserver !== 'function') {
+            return;
+        }
+        this.measured = box;
+        this.sizes?.disconnect();
+        this.sizes = new ResizeObserver(([entry]) => {
+            const { height, width } = entry?.contentRect ?? { height: 0, width: 0 };
+            const style = getComputedStyle(box);
+            const font = Number.parseFloat(style.fontSize) || 16;
+            const bar = barSizeOf(style);
+            const was = this.room;
+            if (was?.width !== width || was.height !== height || was.font !== font || was.bar !== bar) {
+                this.room =
+                    height > 0 && width > 0
+                        ? { font, height, width, ...(bar && bar > 0 ? { bar } : {}) }
+                        : undefined;
+            }
+        });
+        this.sizes.observe(box);
+    }
+    get fits() {
+        const box = this.partNamed('fallback');
+        if (!box || !this.variant || typeof getComputedStyle !== 'function') {
+            return undefined;
+        }
+        const style = getComputedStyle(box);
+        const bar = barSizeOf(style);
+        const width = box.clientWidth;
+        return bar && width > 0 ? rowFits(width, bar) : undefined;
+    }
+    sized(read, projection, layout, room) {
+        const first = barsDrawn(read, projection, layout)[0];
+        if (!first || !room.bar) {
+            return undefined;
+        }
+        const frameOf = (field, grown) => {
+            const floor = this.noBox ? [] : floorOf(field, projection, layout);
+            const drawn = barsDrawn(field, projection, layout, grown);
+            return boundsOf([...drawn.flatMap((bar) => bar.corners), ...floor.flatMap((one) => one.corners)], 0);
+        };
+        const unit = Math.max(widthOf(first) / room.bar, frameOf(read, () => 0).width / Math.max(1, room.width - room.font * 2));
+        const field = climbing(read, room.height * CLIMB_SHARE * unit, frameOf(read, () => 0).width);
+        const low = frameOf(field, () => 0);
+        const high = frameOf(field);
+        const tall = (room.height - room.font * WORD_LINES) * unit;
+        const rises = high.height - low.height;
+        const fills = rises > 0 ? Math.max(0.05, (tall - low.height) / rises) : 1;
+        const times = Math.min(fills, tallestTimes(field, projection, barsDrawn(field, projection, layout)));
+        return { field: heightened(field, times), unit };
+    }
+    watchGrowth() {
+        if (!this.growth || this.growth.since !== undefined || this.seen) {
+            return;
+        }
+        this.seen = new IntersectionObserver(([entry]) => {
+            if (!entry?.isIntersecting || !this.growth) {
+                return;
+            }
+            this.seen?.disconnect();
+            this.seen = undefined;
+            const since = performance.now();
+            this.growth = { since };
+            const length = growTime(this.field.categories.length);
+            const frame = () => {
+                if (this.growth?.since !== since) {
+                    return;
+                }
+                if (performance.now() - since >= length) {
+                    this.growth = undefined;
+                    this.watchExit();
+                    return;
+                }
+                this.requestUpdate();
+                requestAnimationFrame(frame);
+            };
+            requestAnimationFrame(frame);
+        }, { threshold: 0.4 });
+        this.seen.observe(this);
+    }
+    watchExit() {
+        if (!this.growAgain || this.gone) {
+            return;
+        }
+        this.gone = new IntersectionObserver(([entry]) => {
+            if (!entry || entry.isIntersecting) {
+                return;
+            }
+            this.gone?.disconnect();
+            this.gone = undefined;
+            this.fresh.clear();
+            this.growth = {};
+        });
+        this.gone.observe(this);
     }
     connectedCallback() {
         super.connectedCallback();
+        if (this.hasUpdated) {
+            this.measure();
+            this.watchGrowth();
+        }
         this.pointer.axis = 'none';
         this.pointer.onReading = (heard, detail) => {
             const cell = this.field.cells[detail.index];
@@ -116,6 +288,8 @@ let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends Mi
     }
     updated(changed) {
         super.updated(changed);
+        this.measure();
+        this.watchGrowth();
         const field = this.field;
         if (field !== this.last) {
             this.last = field;
@@ -156,14 +330,85 @@ let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends Mi
       </div>
       ${readable ? this.renderSummary(field) : this.renderStatus()}${this.renderSonify()}${this.renderTable()}`;
     }
-    renderFallback(field, at) {
-        const view = boxView(field.axes, this.camera, [], this.noBox);
-        const bars = barsDrawn(field, view.projection);
+    renderFallback(read, at) {
+        const layout = this.variant ?? 'grid';
+        const lined = layout === 'grid' ? undefined : layout;
+        const bare = this.noBox || lined !== undefined;
+        const view = boxView(read.axes, this.camera, [], bare);
+        const room = this.room;
+        const sized = lined && room?.bar ? this.sized(read, view.projection, lined, room) : undefined;
+        const field = sized?.field ?? read;
+        const full = barsDrawn(field, view.projection, layout);
+        const growth = this.growth;
+        const since = growth?.since;
+        const elapsed = since === undefined ? 0 : performance.now() - since;
+        const categories = field.categories.length;
+        const now = performance.now();
+        const bars = growth
+            ? barsDrawn(field, view.projection, layout, (one) => grownAt(one.across, categories, elapsed))
+            : this.fresh.size > 0
+                ? barsDrawn(field, view.projection, layout, (one) => {
+                    const added = this.fresh.get(one.label);
+                    return added ? grownAt(added.index, added.count, now - added.since) : 1;
+                })
+                : full;
+        const floor = lined && !this.noBox ? floorOf(field, view.projection, lined) : [];
         const active = bars.find((bar) => bar.index === at);
         const cell = field.cells[at];
-        const bounds = this.drag.frame(this.noBox
-            ? boundsOf(bars.flatMap((bar) => bar.corners), 0.1)
-            : view.bounds, view.on([0, 0, 0]));
+        const base = bare
+            ? boundsOf([...full.flatMap((bar) => bar.corners), ...floor.flatMap((one) => one.corners)], 0.1)
+            : view.bounds;
+        const pixelOf = (frame) => sized
+            ? sized.unit
+            : room
+                ? 1 / Math.min(room.width / frame.width, room.height / frame.height)
+                : undefined;
+        const sizeOf = (frame) => {
+            const pixel = pixelOf(frame);
+            return room && pixel !== undefined ? room.font * pixel : TICK_SIZE;
+        };
+        const wordsAt = (size) => {
+            const names = floor.length > 0 ? namesOf(field, floor, size) : [];
+            const values = full.flatMap((bar) => {
+                const one = field.cells[bar.index];
+                const text = one?.tone ? this.sourceRows[one.row]?.cells[one.column]?.text : undefined;
+                return one && text
+                    ? [
+                        {
+                            index: bar.index,
+                            text,
+                            tone: one.tone,
+                            x: bar.drawn.peak.x,
+                            y: bar.drawn.crown - size,
+                        },
+                    ]
+                    : [];
+            });
+            const extents = [...names, ...values].flatMap((word) => {
+                const half = (word.text.length * size * 0.62) / 2;
+                return [
+                    { x: word.x - half, y: word.y - size * 0.7 },
+                    { x: word.x + half, y: word.y + size * 0.7 },
+                ];
+            });
+            return { frame: around(base, extents), names, values };
+        };
+        const first = wordsAt(sizeOf(base));
+        const size = sizeOf(first.frame);
+        const { frame: fits, names, values } = wordsAt(size);
+        const wide = sized && room ? room.width * sized.unit : 0;
+        const high = sized && room ? room.height * sized.unit : 0;
+        const placed = sized && fits.width <= wide + 1e-9 && fits.height <= high + 1e-9
+            ? {
+                height: high,
+                width: wide,
+                x: fits.x + (fits.width - wide) / 2,
+                y: fits.y + (fits.height - high) / 2,
+            }
+            : fits;
+        const bounds = this.drag.frame(placed, view.on([0, 0, 0]));
+        const pixel = pixelOf(bounds);
+        const font = Math.round(size * 10_000) / 10_000;
         return html `<div aria-hidden="true" dir="ltr" ?hidden=${this.rendered} part="fallback">
       <svg
         part="drawing"
@@ -176,15 +421,21 @@ let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends Mi
         @pointerleave=${this.onDrawingLeave}
         @pointermove=${this.onDrawingMove}
         @pointerup=${this.onDrawingTap}
-      >${this.noBox ? nothing : drawBox(view)}${depthOrder(view.projection, bars).map((bar) => svg `${this.renderBar(field, bar, at)}${bar === active ? svg `<path d=${active.drawn.outline} part="ring"></path>` : nothing}`)}${active
-            ? svg `<path d=${active.drawn.outline} part="ring-behind"></path><foreignObject height="0.001" overflow="visible" width="0.001" x=${active.drawn.peak.x} y=${active.drawn.peak.y}>${this.renderOwnTooltip(cell?.row)}</foreignObject>`
+      >${bars.some((bar) => field.cells[bar.index]?.tone)
+            ? svg `<defs><filter height="160%" id="helix-spatial-bar-chart-glow" width="500%" x="-200%" y="-30%"><feGaussianBlur stdDeviation=${(pixel ?? 0.006) * 8}></feGaussianBlur></filter></defs>`
+            : nothing}${bare ? nothing : drawBox(view)}${floor.map((plate) => svg `<path d=${plate.d} part="floor"></path>`)}${names.map((name) => svg `<text data-tone=${name.tone ?? nothing} dominant-baseline="central" font-size=${font} part="tick" style="${name.tone ? `--chart-series: var(--spatial-bar-chart-tone-${name.tone})` : ''}" text-anchor="middle" x=${shortNumber(name.x)} y=${shortNumber(name.y)}>${name.text}</text>`)}${paintOrder(view.projection, bars).map((bar) => svg `${field.cells[bar.index]?.tone ? svg `<path d=${bar.drawn.outline} fill="none" filter="url(#helix-spatial-bar-chart-glow)" part="glow" style="--chart-series: var(--spatial-bar-chart-tone-${field.cells[bar.index]?.tone})"></path>` : nothing}${this.renderBar(field, bar, at)}${bar === active ? svg `<path d=${active.drawn.outline} part="ring"></path>` : nothing}`)}${values.map((value) => {
+            const crown = bars.find((bar) => bar.index === value.index)?.drawn.crown ?? value.y + size;
+            return svg `<text data-tone=${value.tone ?? nothing} dominant-baseline="central" font-size=${font} part="value" text-anchor="middle" x=${shortNumber(value.x)} y=${shortNumber(crown - size)}>${value.text}</text>`;
+        })}${active
+            ? svg `<path d=${active.drawn.outline} part="ring-behind"></path><foreignObject height="0.001" overflow="visible" width="0.001" x=${active.drawn.peak.x} y=${active.drawn.crown}>${this.renderOwnTooltip(cell?.row)}</foreignObject>`
             : nothing}</svg>
     </div>`;
     }
     renderBar(field, bar, at) {
-        const depth = field.cells[bar.index]?.depth ?? 0;
+        const one = field.cells[bar.index];
+        const series = ((one?.depth ?? 0) % SERIES) + 1;
         const short = (value) => Math.round(value * 1000) / 1000;
-        return svg `<g data-index=${bar.index} part="bar${bar.index === at ? ' bar-active' : ''}" style="--chart-series: var(--chart-series-${(depth % SERIES) + 1})">${bar.drawn.faces.map((face) => svg `<path d=${face.d} part="face" style="--spatial-bar-chart-shade: ${short(face.darken)}"></path>`)}</g>`;
+        return svg `<g data-index=${bar.index} data-tone=${one?.tone ?? nothing} part="bar${bar.index === at ? ' bar-active' : ''}" style="--chart-series: ${one?.tone ? `var(--spatial-bar-chart-tone-${one.tone}, var(--chart-series-${series}))` : `var(--chart-series-${series})`}">${bar.drawn.faces.map((face) => svg `<path d=${face.d} part="face" style="--spatial-bar-chart-shade: ${short(face.darken)}"></path>`)}</g>`;
     }
     renderLive(field, at) {
         const cell = field.cells[at];
@@ -232,6 +483,12 @@ let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends Mi
         return html `<p id="helix-chart-summary" part="summary">${said}</p>`;
     }
 };
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessSpatialBarChart.prototype, "grow", void 0);
+__decorate([
+    property({ attribute: 'grow-again', reflect: true, type: Boolean })
+], HelixHeadlessSpatialBarChart.prototype, "growAgain", void 0);
 __decorate([
     property({ attribute: 'no-box', reflect: true, type: Boolean })
 ], HelixHeadlessSpatialBarChart.prototype, "noBox", void 0);
@@ -243,10 +500,16 @@ __decorate([
     words,
     property({ attribute: 'plot-label' })
 ], HelixHeadlessSpatialBarChart.prototype, "plotLabel", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessSpatialBarChart.prototype, "stacked", void 0);
 __decorate([
     words,
     property({ attribute: 'summary-label' })
 ], HelixHeadlessSpatialBarChart.prototype, "summaryLabel", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessSpatialBarChart.prototype, "variant", void 0);
 __decorate([
     state()
 ], HelixHeadlessSpatialBarChart.prototype, "rendered", void 0);
@@ -256,6 +519,12 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessSpatialBarChart.prototype, "place", void 0);
+__decorate([
+    state()
+], HelixHeadlessSpatialBarChart.prototype, "room", void 0);
+__decorate([
+    state()
+], HelixHeadlessSpatialBarChart.prototype, "growth", void 0);
 HelixHeadlessSpatialBarChart = __decorate([
     customElement('helix-headless-spatial-bar-chart')
 ], HelixHeadlessSpatialBarChart);

package/dist/splitter/root/splitter-root.js

@@ -20,6 +20,7 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
     set collapsed(next) {
         const previous = this.collapsed;
         this.collapsedState = next ?? 'none';
+        this.reached = undefined;
         this.requestUpdate('collapsed', previous);
     }
     toPercent(value, fallback) {

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

@@ -60,6 +60,10 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  *
  * A tab with `dismissible` can be closed: see `Tabs.Tab`.
  *
+ * **Panels are optional.** A set with none is a strip whose tabs stand for
+ * something the page shows elsewhere: the keys, the selection, `active` and
+ * `helix-activate` work the same, and no tab names a panel it controls.
+ *
  * The `indicator` part moves to the selected tab and carries its place and
  * size, so a mark of your own can be drawn there: style the part, or slot an
  * element into `indicator`, which sits inside the part and reads the same

package/dist/tabs/tab/tab.d.ts

@@ -34,6 +34,7 @@ declare const HelixHeadlessTab_base: (new (...args: any[]) => import("@fusion.de
  *
  * @csspart dismiss - The mark a pointer presses to close a `dismissible` tab.
  * @csspart dismiss-mark - The glyph on that mark, where none is slotted.
+ * @csspart label - The slot the tab's label is in.
  * @csspart tab - The tab itself.
  *
  * @cssstate selected - While it is the tab selected.

package/dist/tabs/tab/tab.js

@@ -88,7 +88,7 @@ let HelixHeadlessTab = class HelixHeadlessTab extends MixinDismissible(MixinSele
         @click=${this.handleLinkClick}
         @keydown=${this.handleKeydown}
       >
-        <slot></slot>${this.renderDismiss()}
+        <slot part="label"></slot>${this.renderDismiss()}
       </a>`;
         }
         return html `<button
@@ -102,7 +102,7 @@ let HelixHeadlessTab = class HelixHeadlessTab extends MixinDismissible(MixinSele
       @click=${() => this.select()}
       @keydown=${this.handleKeydown}
     >
-      <slot></slot>${this.renderDismiss()}
+      <slot part="label"></slot>${this.renderDismiss()}
     </button>`;
     }
 };

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

@@ -42,7 +42,7 @@ declare const HelixHeadlessTag_base: (new (...args: any[]) => import("@fusion.de
  *
  * @slot - The tag's label.
  * @slot dismiss-icon - Replaces the glyph on the remove button.
- * @slot start - The category the label belongs to, shown before it in a heavier weight.
+ * @slot start - The category the label belongs to, shown before it in a heavier weight, or an icon.
  *
  * @event {HelixDismissEvent} helix-dismiss - The remove button was pressed. The tag does not remove itself, so remove it in response. Cancelable.
  *

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

@@ -1,7 +1,9 @@
 import { HelixElement, type TerminalResizeDetail } 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 '../../tooltip/index.js';
 import '../../toolbar/index.js';
 /** How a search through a terminal's output moves. */
 export interface TerminalFindOptions {
@@ -163,6 +165,7 @@ export interface TerminalSink {
  * @slot restart-icon - Replaces the glyph inside the Restart button.
  *
  * @event {HelixCopyEvent} helix-copy - The copy control or its key put the selection on the clipboard.
+ * @event {HelixFoundEvent} helix-found - The find bar searched or moved among the matches, with `count` and the current match's `index`, counting from 0, or -1 for none.
  * @event {HelixTerminalBellEvent} helix-terminal-bell - The program rang the bell. The frame flashes once.
  * @event {HelixTerminalInputEvent} helix-terminal-input - The reader typed or pasted, with `data` encoded for the program. Write it to the process. Not sent while `readonly`, or once `exit-code` is set.
  * @event {HelixTerminalLinkEvent} helix-terminal-link - A link in the output was activated, with its `href`. Cancelable: cancel it to open the link yourself. Left alone, a web address opens in a new tab.
@@ -184,23 +187,23 @@ export interface TerminalSink {
  * @csspart copy-spinner - The ring the copy button turns while it is pending.
  * @csspart copy-text - The box the copy button's icon sits in.
  * @csspart exit-actions - The `exit-actions` slot, beside Restart in the status line.
- * @csspart find - The button that opens and closes the find bar. Expanded while it is open.
- * @csspart find-actions - The `find-actions` slot, first in the find bar's toolbar.
- * @csspart find-bar - The bar under the header where the reader searches the output.
- * @csspart find-button - The find button's inner button.
+ * @csspart find - The find bar under the header, where the reader searches the output: a Find of its own.
+ * @csspart find-actions - The `find-actions` slot, in the find bar's toolbar.
+ * @csspart find-bar - The find bar's strip: the field, the count, and the toolbar.
  * @csspart find-close - The button that closes the find bar.
  * @csspart find-close-button - The find bar's close button's inner button.
  * @csspart find-close-live - The find bar's close button's live region, which speaks while the button is pending.
  * @csspart find-close-spinner - The ring the find bar's close button turns while it is pending.
  * @csspart find-close-text - The box the find bar's close button's icon sits in.
- * @csspart find-controls - The toolbar at the end of the find bar: your find actions, then the buttons that move between matches and close the bar.
+ * @csspart find-controls - The toolbar at the end of the find bar: the options, your find actions, and the buttons that move between matches and close the bar.
  * @csspart find-controls-toolbar - The box inside the find bar's toolbar that lays its buttons out.
  * @csspart find-count - Which match is current and how many there are, such as "3 of 12 matches".
  * @csspart find-field - The search field in the find bar.
- * @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 button that matches case in the find bar. Pressed while it does.
  * @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 button while case has to match, 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 moves to the next match.
@@ -216,13 +219,34 @@ export interface TerminalSink {
  * @csspart find-regex - The button that reads the find field as a regular expression. Pressed while it does.
  * @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 button while the field reads as one, 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-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 find bar's Replace button, which a terminal does not draw, since its output cannot be changed.
+ * @csspart find-replace-all - The find bar's Replace all button, which a terminal does not draw.
+ * @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 find bar's replace field, which a terminal does not draw.
+ * @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 find bar's replace row, which a terminal does not draw.
+ * @csspart find-replace-toggle-button - The replace toggle's inner button.
+ * @csspart find-replace-toggle-live - The replace toggle's live region, which speaks while the button is pending.
+ * @csspart find-replace-toggle-spinner - The ring the replace toggle turns while it is pending.
+ * @csspart find-replace-toggle-text - The box the replace toggle'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 button that matches whole words only in the find bar. Pressed while it does.
  * @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 button while only whole words match, 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 fullscreen - The button that makes the terminal fill the screen. Pressed while it does.
@@ -240,6 +264,16 @@ export interface TerminalSink {
  * @csspart restart-spinner - The ring the Restart button turns while it is pending.
  * @csspart restart-text - The Restart button's label.
  * @csspart status - The line under the terminal that says the process exited, or that Tab moves focus.
+ * @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 terminal is drawn in.
  *
  * @cssproperty --terminal-active-match-background-color - The ground of the current match of a search.
@@ -374,16 +408,12 @@ export declare class HelixHeadlessTerminal extends HelixElement {
     tabMovesFocusLabel: string;
     /** What screen readers hear when Tab goes back to typing in the terminal. */
     tabTypesLabel: string;
-    /** Whether the find bar is open. */
+    /** Whether the find bar is open, as it last said. */
     private findOpen;
-    /** What the find field holds. */
-    private query;
-    /** The current match, counting from `0`, or `-1` for none. */
-    private matchIndex;
-    /** How many matches the search found, or `undefined` before one ran. */
-    private matchCount;
-    /** Whether the regular expression in the field cannot be read, which the count says instead. */
-    private invalid;
+    /** The find bar drawn now, and how the renderer reports a search to it. */
+    private find;
+    /** The options the renderer last searched with, which a search with others ends first. */
+    private searchedWith;
     /** Whether Tab moves focus, after Control+M. */
     private tabMovesFocus;
     /** Whether any text is selected in the grid. */
@@ -457,8 +487,6 @@ export declare class HelixHeadlessTerminal extends HelixElement {
     private say;
     /** Whether `controls`, or the resting controls, names a control the renderer can answer. */
     private draws;
-    /** The find bar's count, as the reader reads it. */
-    private get countText();
     /** The chord that switches Tab, as a reader says it. */
     private get tabKey();
     /**
@@ -479,16 +507,15 @@ export declare class HelixHeadlessTerminal extends HelixElement {
      * a key the frame takes never reaches the program.
      */
     private readonly handleKeys;
-    /** Opens the find bar and puts focus in its field, searching again for what it holds. */
+    /** Opens the find bar and puts focus in its field. */
     private openFind;
-    /** Closes the find bar, takes its highlights off, and returns focus to the terminal. */
-    private closeFind;
-    /** Searches for what the field holds, toward the bottom or with `backward` toward the top. */
-    private search;
-    /** Turns one of the find bar's options on or off, and searches again with it, staying on a match that still matches. */
-    private toggleOption;
-    private readonly handleFindInput;
-    private readonly handleFindKeys;
+    /**
+     * The renderer, as the find bar searches through it. The renderer reports
+     * the matches through `found`, once it has counted them.
+     */
+    private readonly finder;
+    /** The find bar opened or closed, which the find button shows. */
+    private readonly handleFindToggle;
     /** Copies the selection, and says so. */
     private copySelection;
     private readonly handleActions;
@@ -501,6 +528,8 @@ export declare class HelixHeadlessTerminal extends HelixElement {
      */
     protected willUpdate(changed: PropertyValues<this>): void;
     protected updated(changed: PropertyValues<this>): void;
+    /** Hands the find bar drawn now the renderer to search through, once per bar. */
+    private attachFind;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /** Whether any built-in control is drawn. */
@@ -515,10 +544,9 @@ export declare class HelixHeadlessTerminal extends HelixElement {
      */
     protected renderControls(): TemplateResult;
     /**
-     * The find bar, kept in the tree while closed so its field keeps what was
-     * typed. The field stands before the toolbar and outside it, because a
-     * toolbar leaves the arrows to a text field, and the buttons in one with it
-     * would be out of their reach.
+     * The find bar, a Find of the frame's own that searches through the
+     * renderer, kept in the tree while closed so its field keeps what was
+     * typed. The frame takes the find key itself, so the bar takes none.
      */
     protected renderFind(): TemplateResult | typeof nothing;
     /**