@fusion.dev/helix-headless 0.145.0 → 0.146.0

package/dist/heatmap/root/heatmap-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, byRow, CHART_PLOT, customElement, drawTooltip, HelixElement, HelixResizeEvent, MixinChartSource, markRegion, searchableById, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
+import { AriaForwardController, byRow, CHART_PLOT, customElement, drawTooltip, formatNumbers, HelixElement, HelixResizeEvent, MixinChartSource, markRegion, searchableById, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -12,12 +12,14 @@ import { fits, toneOf } from './buckets.js';
 let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(HelixElement) {
     constructor() {
         super(...arguments);
+        this.busiestLabel = 'Busiest';
         this.emptyText = 'No readings';
         this.gap = 2;
         this.minCell = 8;
         this.rows = 1;
         this.thresholds = '';
         this.tones = '';
+        this.totalLabel = 'Total';
         this.width = undefined;
         this.metrics = undefined;
         this.aria = new AriaForwardController(this, {
@@ -42,15 +44,6 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
     get visible() {
         return Math.min(this.points.length, this.room);
     }
-    static get observedAttributes() {
-        return [...super.observedAttributes, 'aria-label'];
-    }
-    attributeChangedCallback(name, old, value) {
-        super.attributeChangedCallback(name, old, value);
-        if (name === 'aria-label') {
-            this.requestUpdate();
-        }
-    }
     get points() {
         const series = this.series[0];
         if (!series) {
@@ -151,7 +144,8 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         const cells = this.drawn;
         const readable = cells.length > 0;
         return html `<div
-        aria-label=${this.getAttribute?.('aria-label') || this.named || 'Heatmap'}
+        aria-describedby=${readable ? 'helix-chart-summary' : nothing}
+        aria-label=${this.named || 'Heatmap'}
         part="strip"
         id=${CHART_PLOT}
         role=${readable ? 'application' : 'img'}
@@ -184,7 +178,29 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         <span part="start"><slot name="start"></slot></span>
         <span part="summary"><slot name="summary"></slot></span>
         <span part="end"><slot name="end"></slot></span>
-      </div>`;
+      </div>${readable ? this.renderOverview(cells) : nothing}`;
+    }
+    renderOverview(cells) {
+        const rows = this.sourceRows;
+        const offset = this.points.length - cells.length;
+        const column = this.plottedColumns[0] ?? -1;
+        let busiest = -1;
+        let total = 0;
+        cells.forEach((cell, index) => {
+            if (cell.value === undefined) {
+                return;
+            }
+            total += cell.value;
+            if (busiest < 0 || cell.value > (cells[busiest]?.value ?? 0)) {
+                busiest = index;
+            }
+        });
+        const row = rows[offset + busiest];
+        const most = row
+            ? `${this.busiestLabel}: ${row.label} ${row.cells[column]?.text ?? ''}`.trim()
+            : '';
+        const sum = `${this.totalLabel} ${formatNumbers(this.locale)(total)}`;
+        return html `<p id="helix-chart-summary" part="overview">${most ? `${most}; ${sum}` : sum}.</p>`;
     }
     renderTooltip() {
         const at = this.pointer.at;
@@ -203,6 +219,9 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         }, undefined, this.pointer);
     }
 };
+__decorate([
+    property({ attribute: 'busiest-label' })
+], HelixHeadlessHeatmap.prototype, "busiestLabel", void 0);
 __decorate([
     property({ attribute: 'empty-text' })
 ], HelixHeadlessHeatmap.prototype, "emptyText", void 0);
@@ -221,6 +240,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessHeatmap.prototype, "tones", void 0);
+__decorate([
+    property({ attribute: 'total-label' })
+], HelixHeadlessHeatmap.prototype, "totalLabel", void 0);
 __decorate([
     state()
 ], HelixHeadlessHeatmap.prototype, "width", void 0);

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

@@ -28,7 +28,8 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * rendered is drawn then.
  *
  * A name with no match renders nothing, and the element fires `error`, so a
- * typo in a name can be heard.
+ * typo in a name can be heard. It waits until the page has loaded and painted
+ * first, so a library a later module registers is not taken for a typo.
  *
  * An icon is decorative by default and hidden from assistive technology. Set
  * `label` only when the icon is the only carrier of meaning, such as in a
@@ -120,6 +121,16 @@ export declare class HelixHeadlessIcon extends HelixElement {
     private lookup;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    /** The name a report is waiting on the page to settle for, so it is asked once. */
+    private pending;
+    /**
+     * Says a name drew nothing, once the page has had its chance to register
+     * it: a library registered by a module further down the page, or by the
+     * page's own script after this element, is not a missing glyph. Asked again
+     * then, and said only where the name still draws nothing and nothing is
+     * still on its way.
+     */
+    private reportMissing;
     protected render(): TemplateResult | typeof nothing;
 }
 declare global {

package/dist/icon/root/icon-root.js

@@ -9,6 +9,7 @@ import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { resolveIcon, watchIcons } from '../registry.js';
+import { afterPageSettles } from '../settle.js';
 let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
     constructor() {
         super(...arguments);
@@ -18,6 +19,7 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
         this.missed = '';
         this.waiting = false;
         this.arrived = '';
+        this.pending = '';
     }
     static get observedAttributes() {
         return [...super.observedAttributes, 'aria-label'];
@@ -69,22 +71,31 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
         }
         this.arrived = '';
         if (this.drawn === undefined && this.name !== '' && !this.waiting) {
-            if (this.missed !== this.name) {
-                this.missed = this.name;
-                this.dispatchEvent(new Event('error', { bubbles: false, cancelable: false, composed: false }));
-                reportRuntime({
-                    kind: 'unknown-icon',
-                    message: `<${this.localName} name="${this.name}"> names no registered icon, so it draws ` +
-                        'nothing. Check the name, register the glyph with `registerIcons`, or import it ' +
-                        'and pass it as `icon`.',
-                    tag: this.localName,
-                });
+            if (this.missed !== this.name && this.pending !== this.name) {
+                this.pending = this.name;
+                afterPageSettles(() => this.reportMissing());
             }
         }
         else {
             this.missed = '';
         }
     }
+    reportMissing() {
+        const name = this.pending;
+        this.pending = '';
+        if (this.name !== name || this.drawn !== undefined || this.waiting || !this.isConnected) {
+            return;
+        }
+        this.missed = name;
+        this.dispatchEvent(new Event('error', { bubbles: false, cancelable: false, composed: false }));
+        reportRuntime({
+            kind: 'unknown-icon',
+            message: `<${this.localName} name="${name}"> names no registered icon, so it draws ` +
+                'nothing. Check the name, register the glyph with `registerIcons`, or import it ' +
+                'and pass it as `icon`.',
+            tag: this.localName,
+        });
+    }
     render() {
         const icon = this.drawn;
         if (!icon) {

package/dist/icon/settle.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Calls back once the page has loaded and painted a frame after it: every
+ * module a page lists has run by then, and with it every `registerIcons` and
+ * `registerIconLibrary` they hold. A page that has loaded already waits only
+ * the frame.
+ */
+export declare const afterPageSettles: (callback: () => void) => void;

package/dist/icon/settle.js

@@ -0,0 +1,10 @@
+export const afterPageSettles = (callback) => {
+    const frame = () => {
+        requestAnimationFrame(() => callback());
+    };
+    if (document.readyState === 'complete') {
+        frame();
+        return;
+    }
+    window.addEventListener('load', frame, { once: true });
+};

package/dist/icon-button/root/icon-button-root.d.ts

@@ -17,6 +17,8 @@ import { HelixHeadlessButton } from '../../button/root/button-root.js';
  * mean a part of a button, and an icon-only button is a complete button with
  * different content and a different shape.
  *
+ * **Keyboard.** Enter and Space press the button, as `Button`'s do.
+ *
  * @since 0.1.0
  * @status stable
  * @category actions

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

@@ -12,13 +12,17 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * The `placeholder` slot is empty by default, so the headless tier does not
  * depend on `Skeleton`, which it does not ship.
  *
+ * The placeholder is hidden from screen readers, the picture having a name of
+ * its own. The fallback is read once the picture fails, after the picture's
+ * `alt`, so a reader hears that it did not load, as a sighted reader sees.
+ *
  * @since 0.1.0
  * @status stable
  * @category media
  * @aliases Picture, Img, Figure
  * @documentation https://fusion.dev/helix/components/image
  *
- * @slot fallback - Shown in place of the image if it fails to load.
+ * @slot fallback - Shown in place of the image if it fails to load, and read by screen readers then, such as "Photo unavailable".
  * @slot placeholder - Shown until the image loads.
  *
  * @event {Event} error - The image failed to load. Relayed from the inner image, whose own event stays inside the shadow root.

package/dist/image/root/image-root.js

@@ -147,7 +147,7 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
       ></span>
       <span
         part="fallback"
-        aria-hidden="true"
+        aria-hidden=${this.status === 'error' ? nothing : 'true'}
         ?hidden=${this.status !== 'error'}
         ><slot name="fallback"></slot
       ></span>`;

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

@@ -20,7 +20,10 @@ declare const HelixHeadlessInput_base: (new (...args: any[]) => import("@fusion.
  * which a reset restores.
  *
  * Validity comes from the browser. `type` and `required` are set on the real
- * input, and its `validity` is copied to the host.
+ * input, and its `validity` is copied to the host. `validate` adds your own
+ * rule, run on every change once the browser finds nothing wrong, as React
+ * Aria's TextField `validate` does. What it returns is the message the field
+ * shows once the user has edited it, and the message a submit raises.
  *
  * @since 0.1.0
  * @status stable
@@ -48,7 +51,8 @@ declare const HelixHeadlessInput_base: (new (...args: any[]) => import("@fusion.
  * @csspart reveal - The button that shows and hides a password.
  * @csspart reveal-pressed - The reveal button while the password is shown, added beside `reveal`.
  *
- * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
+ * @cssstate blank - The field holds no text.
+ * @cssstate invalid - The control has an error to show, from the browser's validation, `validate`, or your `feedback`.
  */
 export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
     protected readonly aria: AriaForwardController;
@@ -281,6 +285,12 @@ export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
      * validation follow.
      */
     type: InputType;
+    /**
+     * Your own rule for the value, run on every change once the browser finds
+     * nothing wrong. Return a message, or a list of them, to mark the field
+     * invalid, and `true`, `null`, or nothing to accept the value.
+     */
+    validate?: (value: string) => string | string[] | true | null | undefined;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, customElement, drawIcon, HelixClearEvent, HelixFormElement, holdCaret, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, drawIcon, HelixClearEvent, HelixFormElement, holdCaret, MixinControllerValue, MixinField, restoreValue, submitImplicitly, } from '@fusion.dev/helix-core';
 import { eye, eyeSlash, x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -48,7 +48,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
         };
         this.handleKeypress = (event) => {
             if (event.key === 'Enter' && !event.defaultPrevented) {
-                this.submitImplicitly();
+                submitImplicitly(this.form);
             }
         };
         this.handleChange = (event) => {
@@ -112,6 +112,11 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
             return;
         }
         this.copyValidity(control);
+        const own = control.validity.valid ? this.validate?.(this.value) : undefined;
+        const message = Array.isArray(own) ? own.join(' ') : typeof own === 'string' ? own : '';
+        if (message !== '') {
+            this.internals.setValidity({ customError: true }, message, control);
+        }
         this.refreshFeedback();
     }
     focus(options) {
@@ -136,6 +141,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        this.toggleState('blank', this.value === '');
         if (!this.hasUpdated) {
             return;
         }
@@ -268,6 +274,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessInput.prototype, "type", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessInput.prototype, "validate", void 0);
 HelixHeadlessInput = __decorate([
     customElement('helix-headless-input')
 ], HelixHeadlessInput);

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

@@ -23,6 +23,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * the shortcut with the control. A chord the page wrote there itself is left
  * alone, and the key takes back only what it added.
  *
+ * `caps` draws a chord as a key per key: each is a `key` part and the `+`
+ * between two a `separator` part, so a sheet can draw a cap for each.
+ * `key-labels` renames any key, on every platform, such as
+ * `key-labels='{"mod":"Command"}'`.
+ *
  * @since 0.1.0
  * @status stable
  * @category typography
@@ -33,9 +38,20 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @event {HelixShortcutEvent} helix-shortcut - The chord was pressed. Cancelable: cancel it to let the key press keep its usual effect.
  *
- * @csspart kbd - The key.
+ * @csspart kbd - The key, or the chord under `keys`.
+ * @csspart key - One key of a chord under `keys` and `caps`, such as `Ctrl` in `Ctrl+K`.
+ * @csspart separator - The `+` between two keys of a chord under `keys` and `caps`, drawn where the platform writes one: on Windows and Linux. An Apple keyboard writes none.
  */
 export declare class HelixHeadlessKbd extends HelixElement {
+    /**
+     * Draws a chord under `keys` as one key per key, each a `key` part with a
+     * `separator` part between two where the platform writes a `+`, as GitHub
+     * and most docs draw `Ctrl` `K`.
+     *
+     * Absent, a chord is one key holding the whole label, as it always was.
+     * Reflected, because the styled tier draws the caps on the keys under it.
+     */
+    caps: boolean;
     /**
      * The id of the control the shortcut works, which is given the chord as its
      * `aria-keyshortcuts`.
@@ -45,6 +61,18 @@ export declare class HelixHeadlessKbd extends HelixElement {
      * shortcut the page binds itself.
      */
     for: string;
+    /**
+     * Names for keys in place of the platform's own, by the key's name in
+     * `keys`, written as JSON in the attribute: `key-labels='{"mod":"Command",
+     * "enter":"Return"}'` shows `Command` and `Return` wherever `mod` and
+     * `enter` are written.
+     *
+     * For a page in another language, or a product with its own word for a key.
+     * Absent, the platform's glyphs and words are used. Only what is shown
+     * changes: the chord written onto `aria-keyshortcuts` keeps the names a
+     * screen reader knows.
+     */
+    keyLabels?: Record<string, string>;
     /**
      * The key or chord to show, such as `mod+k`, `?`, or `/`.
      *
@@ -93,6 +121,12 @@ export declare class HelixHeadlessKbd extends HelixElement {
     private readonly handleKeydown;
     protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
+    /**
+     * The chord under `caps`, a part for each key and for each `+` between two,
+     * so a sheet can draw a cap per key. Written with no space between, so a
+     * chord reads as the one label it was.
+     */
+    protected renderChord(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/kbd/root/kbd-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { ariaChord, chordParts, customElement, elementById, HelixElement, HelixShortcutEvent, matchesChord, onApple, printableChord, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { claimShortcut, releaseShortcut } from '../shortcut.js';
 const typing = (node) => {
@@ -70,6 +70,7 @@ const ELSEWHERE = {
 let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
     constructor() {
         super(...arguments);
+        this.caps = false;
         this.for = '';
         this.keys = '';
         this.handleKeydown = (event) => {
@@ -134,8 +135,12 @@ let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
     get label() {
         const apple = !this.hydrating && onApple();
         const names = apple ? APPLE : ELSEWHERE;
-        const parts = chordParts(this.keys).map((part) => names[part.toLowerCase()] ?? (part.length === 1 ? part.toUpperCase() : part));
-        return parts.join(apple ? '' : '+');
+        const own = this.keyLabels ?? {};
+        const keys = chordParts(this.keys).map((part) => {
+            const name = part.toLowerCase();
+            return own[name] ?? names[name] ?? (part.length === 1 ? part.toUpperCase() : part);
+        });
+        return { keys, separator: apple ? '' : '+' };
     }
     listen() {
         if (!this.within || this.keys === '') {
@@ -157,12 +162,26 @@ let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
         this.finishHydration();
     }
     render() {
-        return html `<kbd part="kbd">${this.keys === '' ? html `<slot></slot>` : this.label}</kbd>`;
+        if (this.keys === '') {
+            return html `<kbd part="kbd"><slot></slot></kbd>`;
+        }
+        const { keys, separator } = this.label;
+        return html `<kbd part="kbd">${this.caps ? this.renderChord() : keys.join(separator)}</kbd>`;
+    }
+    renderChord() {
+        const { keys, separator } = this.label;
+        return html `${keys.map((key, index) => html `${index > 0 && separator !== '' ? html `<span part="separator">${separator}</span>` : nothing}<span part="key">${key}</span>`)}`;
     }
 };
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessKbd.prototype, "caps", void 0);
 __decorate([
     property()
 ], HelixHeadlessKbd.prototype, "for", void 0);
+__decorate([
+    property({ attribute: 'key-labels', type: Object })
+], HelixHeadlessKbd.prototype, "keyLabels", void 0);
 __decorate([
     property()
 ], HelixHeadlessKbd.prototype, "keys", void 0);

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

@@ -1,4 +1,4 @@
-import { HelixElement, SourceController } from '@fusion.dev/helix-core';
+import { HelixElement, KeyboardNavigationController, SourceController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A list of the series in a chart, each name beside the color it is drawn in.
@@ -21,8 +21,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * **`toggles` makes each entry a button that hides its series.** Every chart
  * reading the same table draws without a hidden series and fits its scale to
  * the rest, and the series keeps its color. The button says whether its
- * series is shown with `aria-pressed`. `hidden-series` holds the hidden names,
- * so a page can start with some hidden or read which are.
+ * series is shown with `aria-pressed`. The buttons are one tab stop: the
+ * arrow keys move between them, Home and End go to the first and the last,
+ * and a typed letter goes to the next name starting with it.
+ * `hidden-series` holds the hidden names,
+ * so a page can start with some hidden or read which are. Two legends on one
+ * table show the same hidden series: the list written last wins, and the
+ * other legend takes it for its own entries.
  *
  * @since 0.1.0
  * @status stable
@@ -99,16 +104,56 @@ export declare class HelixHeadlessLegend extends HelixElement {
      */
     toggles: boolean;
     protected readonly source: SourceController;
-    /** Whether this legend has written the table's hidden series, so leaving undoes it. */
-    private wrote;
+    /**
+     * The toggle that holds the one tab stop, by place: the one a reader was
+     * last on, or the first.
+     */
+    private stop;
+    /**
+     * The arrow keys, Home, End and typed letters among the toggles, so a
+     * legend of twelve series is one tab stop, as a toolbar of
+     * toggle buttons is. Nothing without `toggles`, where there is nothing to
+     * press.
+     */
+    protected readonly keys: KeyboardNavigationController;
+    /** The table this legend last wrote its `hidden-series` to, so leaving undoes it. */
+    private wroteTo;
+    /** Whether this update writes `hidden-series` to the table, decided before the render. */
+    private writes;
+    /**
+     * Decides who holds the hidden series for this update: this legend, or the
+     * table.
+     *
+     * **This legend, where its own `hidden-series` moved**, by a press, by the
+     * page, or by its first value, and where it has a list the table it now
+     * reads has not had from it yet. **The table otherwise**, which is a second
+     * legend on the same table having hidden something: this one takes the
+     * table's list for its own entries and writes nothing back.
+     *
+     * Writing back on every update is what hung a page with two legends whose
+     * lists differed: each write asks every reader of the table to update,
+     * which included the other legend, which wrote its own list back. Now the
+     * last list written wins and the other legend shows it, as two switches on
+     * one lamp do.
+     */
     protected willUpdate(changed: PropertyValues<this>): void;
+    /**
+     * Takes the table's hidden series as this legend's own, for its entries.
+     *
+     * A name hidden on the table that is not one of this legend's entries stays
+     * out of its list: a legend of the rows and one of the columns share a
+     * table, and each keeps a list of its own.
+     */
+    private follow;
     /**
      * Hands `hidden-series` to the table, where every chart reading it finds
      * it.
      *
      * After the update rather than before, because a server has no table and a
      * hydrating render must draw what the server drew: the charts follow a frame
-     * after the legend, which is when they draw at all.
+     * after the legend, which is when they draw at all. Only this legend's own
+     * entries are written, so a series another legend hid among other names
+     * stays hidden.
      */
     protected updated(changed: PropertyValues<this>): void;
     disconnectedCallback(): void;
@@ -135,9 +180,11 @@ export declare class HelixHeadlessLegend extends HelixElement {
      * The button around a name under `toggles`, behind a seam a tier can move.
      *
      * Pressed while its series is shown, which is the state a reader changes by
-     * pressing it: a toggle button says whether its thing is on.
+     * pressing it: a toggle button says whether its thing is on. `holds` says
+     * whether it is the one tab stop, which is the last toggle a reader was on,
+     * the toggle at `index`.
      */
-    protected renderToggle(name: string, off: boolean): TemplateResult;
+    protected renderToggle(name: string, off: boolean, index?: number, holds?: boolean): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {