@fusion.dev/helix-headless 0.143.0 → 0.144.0

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

@@ -5,10 +5,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, HelixElement, hostAria, reportRuntime } from '@fusion.dev/helix-core';
-import { icons } from '@fusion.dev/helix-icons';
 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';
 let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
     constructor() {
         super(...arguments);
@@ -16,6 +16,8 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
         this.mirror = false;
         this.name = '';
         this.missed = '';
+        this.waiting = false;
+        this.arrived = '';
     }
     static get observedAttributes() {
         return [...super.observedAttributes, 'aria-label'];
@@ -26,21 +28,55 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
             this.requestUpdate();
         }
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.unwatch = watchIcons(() => {
+            if (this.icon === undefined && this.name !== '') {
+                this.requestUpdate();
+            }
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.unwatch?.();
+        this.unwatch = undefined;
+    }
+    lookup() {
+        const found = this.name === '' ? undefined : resolveIcon(this.name);
+        this.waiting = found instanceof Promise;
+        if (!(found instanceof Promise)) {
+            return found;
+        }
+        const name = this.name;
+        void found.then(() => {
+            if (this.name === name && this.isConnected) {
+                this.arrived = name;
+                this.requestUpdate();
+            }
+        });
+        return undefined;
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         const named = this.label === '' && (this.getAttribute?.('aria-label') ?? '') !== '';
         hostAria(this.internals, { role: named ? 'img' : '' });
+        this.drawn = this.icon ?? this.lookup();
     }
     updated(changed) {
         super.updated(changed);
-        if (this.icon === undefined && this.name !== '' && !Object.hasOwn(icons, this.name)) {
+        if (this.arrived === this.name && this.drawn !== undefined) {
+            this.dispatchEvent(new Event('load', { bubbles: false, cancelable: false, composed: false }));
+        }
+        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 icon in the Helix set, so it draws ` +
-                        'nothing. Check the name, or import the glyph and pass it as `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,
                 });
             }
@@ -50,8 +86,7 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
         }
     }
     render() {
-        const named = Object.hasOwn(icons, this.name) ? icons[this.name] : undefined;
-        const icon = this.icon ?? named;
+        const icon = this.drawn;
         if (!icon) {
             return nothing;
         }

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

@@ -0,0 +1,2 @@
+export { type IconResolver, registerIconLibrary, registerIcons, resolveIcon } from '../registry.js';
+export * from './icon-root.js';

package/dist/icon/root/index.js

@@ -0,0 +1,2 @@
+export { registerIconLibrary, registerIcons, resolveIcon } from '../registry.js';
+export * from './icon-root.js';

package/dist/icon/set.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/icon/set.js

@@ -0,0 +1,3 @@
+import { icons } from '@fusion.dev/helix-icons';
+import { registerIcons } from './registry.js';
+registerIcons(icons);

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

@@ -27,6 +27,9 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart fallback - The fallback, shown when the image fails to load.
  * @csspart image - The image itself.
  * @csspart placeholder - The placeholder, shown until the image loads.
+ *
+ * @cssstate error - The image failed to load, and the fallback shows.
+ * @cssstate loaded - The image loaded.
  */
 export declare class HelixHeadlessImage extends HelixElement {
     /**
@@ -71,6 +74,14 @@ export declare class HelixHeadlessImage extends HelixElement {
      * that is not is the exception worth writing down.
      */
     loading?: 'eager' | 'lazy';
+    /**
+     * How long, in milliseconds, the placeholder waits before it shows.
+     *
+     * Absent or `0` shows it at once. A picture that arrives inside
+     * the wait never shows a placeholder at all, so a cached or fast image does
+     * not flash one. Radix's `delayMs` on its avatar fallback is the same idea.
+     */
+    placeholderDelay: number;
     /**
      * How much of the referring URL to send with the request.
      */
@@ -112,6 +123,8 @@ export declare class HelixHeadlessImage extends HelixElement {
      * Which `src` the current status belongs to, so a new one starts over.
      */
     private answered;
+    /** The placeholder's wait for this `src`, and whether it is over. */
+    private readonly wait;
     /**
      * Whether this picture's answer has been given, or is on its way.
      *
@@ -177,6 +190,7 @@ export declare class HelixHeadlessImage extends HelixElement {
     private settle;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    private startWait;
     protected firstUpdated(changed: PropertyValues): void;
     /**
      * The picture's own state, under the platform's own names.

package/dist/image/root/image-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 { customElement, HelixElement } from '@fusion.dev/helix-core';
+import { customElement, DelayController, HelixElement } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
@@ -13,12 +13,14 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
         this.crossOrigin = null;
         this.decoding = 'async';
         this.fetchPriority = 'auto';
+        this.placeholderDelay = 0;
         this.referrerPolicy = '';
         this.sizes = '';
         this.src = '';
         this.srcset = '';
         this.status = 'loading';
         this.answered = '';
+        this.wait = new DelayController(this);
         this.reported = false;
         this.synthesized = undefined;
         this.handleLoad = (event) => {
@@ -78,6 +80,9 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
         if (changed.has('src')) {
             this.settle();
         }
+        if (changed.has('src') || changed.has('placeholderDelay')) {
+            this.startWait();
+        }
         if (changed.has('status')) {
             if (this.status === 'loading') {
                 this.removeAttribute('data-status');
@@ -85,8 +90,13 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
             else {
                 this.setAttribute('data-status', this.status);
             }
+            this.toggleState('loaded', this.status === 'loaded');
+            this.toggleState('error', this.status === 'error');
         }
     }
+    startWait() {
+        this.wait.start(this.placeholderDelay > 0 ? this.placeholderDelay : undefined);
+    }
     firstUpdated(changed) {
         super.firstUpdated?.(changed);
         this.settle();
@@ -124,7 +134,7 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
       <span
         part="placeholder"
         aria-hidden="true"
-        ?hidden=${this.status !== 'loading'}
+        ?hidden=${this.status !== 'loading' || (this.placeholderDelay > 0 && !this.wait.elapsed)}
         ><slot name="placeholder"></slot
       ></span>
       <span
@@ -150,6 +160,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessImage.prototype, "loading", void 0);
+__decorate([
+    property({ attribute: 'placeholder-delay', type: Number })
+], HelixHeadlessImage.prototype, "placeholderDelay", void 0);
 __decorate([
     property({ attribute: 'referrerpolicy' })
 ], HelixHeadlessImage.prototype, "referrerPolicy", void 0);

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

@@ -36,6 +36,7 @@ declare const HelixHeadlessInput_base: (new (...args: any[]) => import("@fusion.
  *
  * @event {Event} change - Sent when the user finishes changing the value. Relayed from the native input.
  * @event {HelixBeforeChangeEvent} helix-before-change - The text is about to change. Cancelable: cancel it to keep the current text.
+ * @event {Event} helix-clear - Fired after the clear button has emptied the field, after `input` and `change`.
  * @event {Event} input - Fired as the value changes.
  *
  * @csspart clear - The button that empties the field.
@@ -235,6 +236,16 @@ export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
     focus(options?: FocusOptions): void;
     /** Selects everything in the field. */
     select(): void;
+    /**
+     * Moves a number, a date or a time up by `step`, `count` times, as the native
+     * method does. It sends no event, as the native method sends none, and it
+     * throws `InvalidStateError` on a type with no step, such as `text`.
+     */
+    stepUp(count?: number): void;
+    /** Moves a number, a date or a time down by `step`, `count` times. See `stepUp`. */
+    stepDown(count?: number): void;
+    /** Takes the native control's answer, which knows `min`, `max` and `step`. */
+    private takeStep;
     /**
      * The caret, held across a value the consumer wrote rather than the reader.
      *

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

@@ -38,6 +38,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
         this.handleClear = () => {
             if (this.value !== '' && this.requestValue('')) {
                 this.announceChange();
+                this.dispatchEvent(new Event('helix-clear', { bubbles: true, composed: true }));
             }
             const control = this.control;
             if (control) {
@@ -119,6 +120,20 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
     select() {
         this.control?.select();
     }
+    stepUp(count = 1) {
+        this.control?.stepUp(count);
+        this.takeStep();
+    }
+    stepDown(count = 1) {
+        this.control?.stepDown(count);
+        this.takeStep();
+    }
+    takeStep() {
+        const control = this.control;
+        if (control) {
+            this.value = control.value;
+        }
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         if (!this.hasUpdated) {

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

@@ -17,6 +17,12 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * The element binds the shortcut only when `within` is set. By default it draws
  * the key and listens for nothing.
  *
+ * **`for` names the control the shortcut works**, and the key writes its chord
+ * onto that control's `aria-keyshortcuts`, in the platform's words (`Meta+K`
+ * on an Apple keyboard, `Control+K` elsewhere), so a screen reader announces
+ * the shortcut with the control. A chord the page wrote there itself is left
+ * alone, and the key takes back only what it added.
+ *
  * @since 0.1.0
  * @status stable
  * @category typography
@@ -30,6 +36,15 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart kbd - The key.
  */
 export declare class HelixHeadlessKbd extends HelixElement {
+    /**
+     * The id of the control the shortcut works, which is given the chord as its
+     * `aria-keyshortcuts`.
+     *
+     * Names an element in the same tree, the way `Tooltip.for` does. Separate
+     * from `within`, which says where the key listens: a key can describe a
+     * shortcut the page binds itself.
+     */
+    for: string;
     /**
      * The key or chord to show, such as `mod+k`, `?`, or `/`.
      *
@@ -57,8 +72,13 @@ export declare class HelixHeadlessKbd extends HelixElement {
     within?: 'control' | 'document';
     /** The element the listener is on, kept so it can be taken off the same one. */
     private listening;
+    /** The control and the chord written onto it, so the same pair is taken back. */
+    private described;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /** Writes the chord onto the control `for` names, taking back one written before. */
+    private describe;
+    private undescribe;
     protected updated(changed: Map<string, unknown>): void;
     /**
      * The chord as this reader's keyboard labels it.
@@ -71,19 +91,6 @@ export declare class HelixHeadlessKbd extends HelixElement {
     private listen;
     private deafen;
     private readonly handleKeydown;
-    /**
-     * Whether this chord types a character, and so is indistinguishable from
-     * typing.
-     *
-     * One code point means a character rather than a name: `/` and `?` are
-     * printable, `escape` and `enter` are not. **Shift is allowed beside it**,
-     * because Shift is how a character is typed: `shift+?` and `shift+a` are a
-     * question mark and a capital A in a field, and taking them ate every one
-     * a reader typed on the page.
-     */
-    private get printable();
-    /** Whether a press is this chord, modifiers and all. */
-    private matches_;
     protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }

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

@@ -4,9 +4,10 @@ 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 { customElement, HelixElement, HelixShortcutEvent } from '@fusion.dev/helix-core';
+import { ariaChord, chordParts, customElement, elementById, HelixElement, HelixShortcutEvent, matchesChord, onApple, printableChord, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { claimShortcut, releaseShortcut } from '../shortcut.js';
 const typing = (node) => {
     if (node instanceof HTMLTextAreaElement) {
         return true;
@@ -66,20 +67,22 @@ const ELSEWHERE = {
     tab: 'Tab',
     up: '↑',
 };
-const onApple = () => typeof navigator !== 'undefined' && /mac|iphone|ipad|ipod/i.test(navigator.userAgent);
 let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
     constructor() {
         super(...arguments);
+        this.for = '';
         this.keys = '';
         this.handleKeydown = (event) => {
             const press = event;
             if (press.isComposing) {
                 return;
             }
-            if (this.within === 'document' && this.printable && typing(press.composedPath()[0])) {
+            if (this.within === 'document' &&
+                printableChord(this.keys) &&
+                typing(press.composedPath()[0])) {
                 return;
             }
-            if (!this.matches_(press)) {
+            if (!matchesChord(press, this.keys, onApple())) {
                 return;
             }
             const shortcut = new HelixShortcutEvent({ keys: this.keys });
@@ -92,10 +95,30 @@ let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
     connectedCallback() {
         super.connectedCallback();
         this.listen();
+        requestAnimationFrame(() => this.describe());
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.deafen();
+        this.undescribe();
+    }
+    describe() {
+        const control = this.isConnected && this.for !== '' ? elementById(this, this.for) : null;
+        const chord = ariaChord(this.keys, onApple());
+        if (control === this.described?.control && chord === this.described?.chord) {
+            return;
+        }
+        this.undescribe();
+        if (control && chord !== '') {
+            claimShortcut(control, chord);
+            this.described = { chord, control };
+        }
+    }
+    undescribe() {
+        if (this.described) {
+            releaseShortcut(this.described.control, this.described.chord);
+            this.described = undefined;
+        }
     }
     updated(changed) {
         super.updated(changed);
@@ -103,15 +126,15 @@ let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
             this.deafen();
             this.listen();
         }
+        if ((changed.has('for') && changed.get('for') !== undefined) ||
+            (changed.has('keys') && changed.get('keys') !== undefined)) {
+            this.describe();
+        }
     }
     get label() {
         const apple = !this.hydrating && onApple();
         const names = apple ? APPLE : ELSEWHERE;
-        const parts = this.keys
-            .split('+')
-            .map((part) => part.trim())
-            .filter((part) => part !== '')
-            .map((part) => names[part.toLowerCase()] ?? (part.length === 1 ? part.toUpperCase() : part));
+        const parts = chordParts(this.keys).map((part) => names[part.toLowerCase()] ?? (part.length === 1 ? part.toUpperCase() : part));
         return parts.join(apple ? '' : '+');
     }
     listen() {
@@ -129,34 +152,6 @@ let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
         this.listening?.removeEventListener('keydown', this.handleKeydown);
         this.listening = undefined;
     }
-    get printable() {
-        const parts = this.keys
-            .split('+')
-            .map((part) => part.trim().toLowerCase())
-            .filter((part) => part !== '');
-        const key = parts.at(-1) ?? '';
-        return [...key].length === 1 && parts.slice(0, -1).every((modifier) => modifier === 'shift');
-    }
-    matches_(press) {
-        const parts = this.keys
-            .split('+')
-            .map((part) => part.trim().toLowerCase())
-            .filter((part) => part !== '');
-        if (parts.length === 0) {
-            return false;
-        }
-        const wanted = parts[parts.length - 1] ?? '';
-        const modifiers = new Set(parts.slice(0, -1));
-        const apple = onApple();
-        const ctrl = modifiers.has('ctrl') || (modifiers.has('mod') && !apple);
-        const meta = modifiers.has('cmd') || modifiers.has('meta') || (modifiers.has('mod') && apple);
-        const symbol = wanted.toLowerCase() === wanted.toUpperCase() && [...wanted].length === 1;
-        return (press.key.toLowerCase() === wanted &&
-            (modifiers.has('shift') ? press.shiftKey : symbol || !press.shiftKey) &&
-            (modifiers.has('alt') || modifiers.has('opt') ? press.altKey : !press.altKey) &&
-            (ctrl ? press.ctrlKey : !press.ctrlKey) &&
-            (meta ? press.metaKey : !press.metaKey));
-    }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
@@ -165,6 +160,9 @@ let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
         return html `<kbd part="kbd">${this.keys === '' ? html `<slot></slot>` : this.label}</kbd>`;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessKbd.prototype, "for", void 0);
 __decorate([
     property()
 ], HelixHeadlessKbd.prototype, "keys", void 0);

package/dist/kbd/shortcut.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The bookkeeping that writes a chord onto the control a shortcut belongs to,
+ * in the words core's `ariaChord` spells it in.
+ *
+ * Beside the family's `index.ts`, because the attribute is a fact about
+ * another element, and not the key's template.
+ */
+/** The space-separated list with `chord` added once. */
+export declare const withShortcut: (list: string | null, chord: string) => string;
+/** The list with `chord` taken out, or `null` when nothing is left. */
+export declare const withoutShortcut: (list: string | null, chord: string) => string | null;
+/**
+ * Adds a chord to the control's `aria-keyshortcuts`, leaving any the page
+ * wrote itself.
+ */
+export declare const claimShortcut: (control: Element, chord: string) => void;
+/** Takes back a chord this file wrote, and the attribute with the last one. */
+export declare const releaseShortcut: (control: Element, chord: string) => void;

package/dist/kbd/shortcut.js

@@ -0,0 +1,35 @@
+export const withShortcut = (list, chord) => {
+    const chords = (list ?? '').split(/\s+/).filter(Boolean);
+    return chords.includes(chord) ? chords.join(' ') : [...chords, chord].join(' ');
+};
+export const withoutShortcut = (list, chord) => {
+    const chords = (list ?? '').split(/\s+/).filter((one) => one !== '' && one !== chord);
+    return chords.length > 0 ? chords.join(' ') : null;
+};
+const WRITTEN = new WeakMap();
+export const claimShortcut = (control, chord) => {
+    if (chord === '') {
+        return;
+    }
+    const before = control.getAttribute('aria-keyshortcuts');
+    if ((before ?? '').split(/\s+/).includes(chord) && !WRITTEN.get(control)?.has(chord)) {
+        return;
+    }
+    const written = WRITTEN.get(control) ?? new Set();
+    written.add(chord);
+    WRITTEN.set(control, written);
+    control.setAttribute('aria-keyshortcuts', withShortcut(before, chord));
+};
+export const releaseShortcut = (control, chord) => {
+    const written = WRITTEN.get(control);
+    if (!written?.delete(chord)) {
+        return;
+    }
+    const after = withoutShortcut(control.getAttribute('aria-keyshortcuts'), chord);
+    if (after === null) {
+        control.removeAttribute('aria-keyshortcuts');
+    }
+    else {
+        control.setAttribute('aria-keyshortcuts', after);
+    }
+};

package/dist/legend/hidden-series.d.ts

@@ -0,0 +1,8 @@
+/** Whether a name is in the list, matched without regard to case, as a heading is. */
+export declare const isHidden: (list: string, name: string) => boolean;
+/**
+ * The list a press on this name leaves: without it where it was hidden, and
+ * with it at the end where it was shown. Written back with a comma and a
+ * space, as a person writes a list.
+ */
+export declare const toggledNames: (list: string, name: string) => string;

package/dist/legend/hidden-series.js

@@ -0,0 +1,13 @@
+import { commaList, seriesKey } from '@fusion.dev/helix-core';
+export const isHidden = (list, name) => {
+    const key = seriesKey(name);
+    return commaList(list).some((one) => seriesKey(one) === key);
+};
+export const toggledNames = (list, name) => {
+    const key = seriesKey(name);
+    const now = commaList(list);
+    const next = isHidden(list, name)
+        ? now.filter((one) => seriesKey(one) !== key)
+        : [...now, name.trim()];
+    return next.join(', ');
+};

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

@@ -18,17 +18,28 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * The table is resolved on the client. There is no server pass.
  *
+ * **`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.
+ *
  * @since 0.1.0
  * @status stable
  * @category charts
  * @aliases Key, Series Key
  * @documentation https://fusion.dev/helix/components/legend
  *
+ * @event {Event} change - Fired once a toggle has hidden or shown a series.
+ * @event {HelixBeforeChangeEvent} helix-before-change - Fired before a toggle hides or shows a series, with the `hidden-series` it would leave. Cancelable.
+ *
  * @csspart entry - One name and its swatch. Draw the swatch with
  * `::part(entry)::before` in your stylesheet. The entry holds its series color
  * as `--chart-series`, and this tier ships no CSS.
+ * @csspart entry-hidden - An entry whose series is hidden. Set alongside `entry`.
  * @csspart list - The list of entries.
  * @csspart name - One series name.
+ * @csspart toggle - The button around a name under `toggles`, which hides or shows its series.
  */
 export declare class HelixHeadlessLegend extends HelixElement {
     /**
@@ -62,6 +73,15 @@ export declare class HelixHeadlessLegend extends HelixElement {
      * `Tooltip.for` does, so it does not reflect and nothing styles on it.
      */
     for: string;
+    /**
+     * The series hidden on the table, by name, separated by commas: what
+     * `toggles` hides and shows.
+     *
+     * Set it to start with series hidden. Every chart reading the same table
+     * draws without them. Commas only, because a column's heading may hold a
+     * space. For a ring the names are the rows.
+     */
+    hiddenSeries: string;
     /**
      * The name of the list, which a screen reader announces before its entries.
      *
@@ -69,8 +89,37 @@ export declare class HelixHeadlessLegend extends HelixElement {
      * charts has a legend list for each that says which chart it keys.
      */
     label: string;
+    /**
+     * Makes each entry a button that hides or shows its series in every chart
+     * reading the same table.
+     *
+     * Absent, the legend only displays, which is what it did before this
+     * existed. Reflected, because the styled tier draws a button differently
+     * from a plain entry.
+     */
+    toggles: boolean;
     protected readonly source: SourceController;
+    /** Whether this legend has written the table's hidden series, so leaving undoes it. */
+    private wrote;
     protected willUpdate(changed: PropertyValues<this>): void;
+    /**
+     * 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.
+     */
+    protected updated(changed: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    /**
+     * Hides the series of this name, or shows it again, asking first.
+     *
+     * `helix-before-change` carries the `hidden-series` the press would leave,
+     * and a listener that refuses it keeps the chart as it is. `change` follows
+     * once the series is hidden or shown.
+     */
+    protected toggle(name: string): void;
     /**
      * The names, in the order the chart will draw them.
      *
@@ -82,6 +131,13 @@ export declare class HelixHeadlessLegend extends HelixElement {
      */
     protected names(): string[];
     protected render(): TemplateResult;
+    /**
+     * 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.
+     */
+    protected renderToggle(name: string, off: boolean): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {