@fusion.dev/helix-headless 0.142.1 → 0.144.0

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

@@ -15,12 +15,18 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
             target: () => this.partNamed('control'),
         });
         this.announcesInput = true;
+        this.autocapitalize = '';
         this.autocomplete = '';
         this.clearable = false;
         this.clearLabel = 'Clear';
+        this.enterKeyHint = '';
+        this.inputMode = '';
+        this.max = '';
+        this.min = '';
         this.pattern = '';
         this.placeholder = '';
         this.readOnly = false;
+        this.reveal = false;
         this.revealed = false;
         this.handleInput = (event) => {
             event.stopPropagation();
@@ -30,19 +36,27 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
             restoreValue(control, this.value);
         };
         this.handleClear = () => {
-            this.requestValue('');
+            if (this.value !== '' && this.requestValue('')) {
+                this.announceChange();
+                this.dispatchEvent(new Event('helix-clear', { bubbles: true, composed: true }));
+            }
             const control = this.control;
             if (control) {
                 restoreValue(control, this.value);
                 control.focus();
             }
         };
+        this.handleKeypress = (event) => {
+            if (event.key === 'Enter' && !event.defaultPrevented) {
+                this.submitImplicitly();
+            }
+        };
         this.handleChange = (event) => {
             event.stopPropagation();
             this.announceChange();
         };
-        this.reveal = false;
         this.revealLabel = 'Show password';
+        this.step = '';
         this.type = 'text';
     }
     get effectiveType() {
@@ -88,6 +102,9 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
     get control() {
         return this.partNamed('control');
     }
+    get blocksImplicitSubmission() {
+        return true;
+    }
     sync() {
         this.internals.setFormValue(this.value);
         const control = this.control;
@@ -103,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) {
@@ -134,6 +165,12 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
         pattern=${this.pattern || nothing}
         minlength=${this.minLength ?? nothing}
         maxlength=${this.maxLength ?? nothing}
+        min=${this.min || nothing}
+        max=${this.max || nothing}
+        step=${this.step || nothing}
+        inputmode=${this.inputMode || nothing}
+        enterkeyhint=${this.enterKeyHint || nothing}
+        autocapitalize=${this.autocapitalize || nothing}
         aria-describedby=${this.describedBy ?? nothing}
         aria-invalid=${this.invalidity ?? nothing}
         ?disabled=${this.isDisabled}
@@ -141,6 +178,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
         ?required=${this.required}
         @input=${this.handleInput}
         @change=${this.handleChange}
+        @keypress=${this.handleKeypress}
       />
       <slot name="end"></slot>
       <!-- In the tab order, unlike the browser's own search clear, which is not
@@ -176,6 +214,9 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
     ${this.renderHint()}${this.renderFeedback()}`;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessInput.prototype, "autocapitalize", void 0);
 __decorate([
     property()
 ], HelixHeadlessInput.prototype, "autocomplete", void 0);
@@ -185,9 +226,21 @@ __decorate([
 __decorate([
     property({ attribute: 'clear-label' })
 ], HelixHeadlessInput.prototype, "clearLabel", void 0);
+__decorate([
+    property({ attribute: 'enterkeyhint' })
+], HelixHeadlessInput.prototype, "enterKeyHint", void 0);
+__decorate([
+    property({ attribute: 'inputmode' })
+], HelixHeadlessInput.prototype, "inputMode", void 0);
+__decorate([
+    property()
+], HelixHeadlessInput.prototype, "max", void 0);
 __decorate([
     property({ attribute: 'maxlength', type: Number })
 ], HelixHeadlessInput.prototype, "maxLength", void 0);
+__decorate([
+    property()
+], HelixHeadlessInput.prototype, "min", void 0);
 __decorate([
     property({ attribute: 'minlength', type: Number })
 ], HelixHeadlessInput.prototype, "minLength", void 0);
@@ -200,15 +253,18 @@ __decorate([
 __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessInput.prototype, "readOnly", void 0);
-__decorate([
-    state()
-], HelixHeadlessInput.prototype, "revealed", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessInput.prototype, "reveal", void 0);
+__decorate([
+    state()
+], HelixHeadlessInput.prototype, "revealed", void 0);
 __decorate([
     property({ attribute: 'reveal-label' })
 ], HelixHeadlessInput.prototype, "revealLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessInput.prototype, "step", void 0);
 __decorate([
     property()
 ], HelixHeadlessInput.prototype, "type", void 0);

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
@@ -31,11 +37,25 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  */
 export declare class HelixHeadlessKbd extends HelixElement {
     /**
-     * The key or chord to show, such as `mod+k`, `shift+?`, or `/`.
+     * 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 `/`.
      *
      * `mod` is the platform's own command modifier, which is the reason to write
      * a chord here rather than a glyph: it is the one token whose right answer
      * differs per reader.
+     *
+     * A symbol such as `?` or `!` is written as itself, without `shift`. It is
+     * matched whether or not Shift was held to type it, since that depends on
+     * the keyboard layout. Bound to the document, a chord that types a character
+     * is not taken from a field a reader is typing in.
      */
     keys: string;
     /**
@@ -52,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.
@@ -66,16 +91,6 @@ export declare class HelixHeadlessKbd extends HelixElement {
     private listen;
     private deafen;
     private readonly handleKeydown;
-    /**
-     * Whether this chord is one bare character, and so indistinguishable from
-     * typing.
-     *
-     * A single part means no modifier, and one code point means a character
-     * rather than a name: `/` and `?` are printable, `escape` and `enter` are not.
-     */
-    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,35 +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())
-            .filter((part) => part !== '');
-        return parts.length === 1 && [...(parts[0] ?? '')].length === 1;
-    }
-    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 mod = onApple() ? press.metaKey : press.ctrlKey;
-        return (press.key.toLowerCase() === wanted &&
-            (modifiers.has('mod') ? mod : true) &&
-            (modifiers.has('shift') ? press.shiftKey : !press.shiftKey) &&
-            (modifiers.has('alt') || modifiers.has('opt') ? press.altKey : !press.altKey) &&
-            (modifiers.has('ctrl') ? press.ctrlKey : modifiers.has('mod') ? true : !press.ctrlKey) &&
-            (modifiers.has('cmd') || modifiers.has('meta')
-                ? press.metaKey
-                : modifiers.has('mod')
-                    ? true
-                    : !press.metaKey));
-    }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
@@ -166,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,8 +73,53 @@ 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.
+     *
+     * Absent names the list after the table's caption, so a page with several
+     * 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.
      *
@@ -75,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 {

package/dist/legend/root/legend-root.js

@@ -4,20 +4,51 @@ 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, SourceController, seriesIndex, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { commaList, customElement, HelixBeforeChangeEvent, HelixElement, requestChange, SourceController, seriesIndex, } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { isHidden, toggledNames } from '../hidden-series.js';
 let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
     constructor() {
         super(...arguments);
         this.for = '';
+        this.hiddenSeries = '';
+        this.label = '';
+        this.toggles = false;
         this.source = new SourceController(this);
+        this.wrote = false;
     }
     willUpdate(changed) {
         if (changed.has('for')) {
             this.source.watch();
         }
     }
+    updated(changed) {
+        super.updated(changed);
+        const names = commaList(this.hiddenSeries);
+        if (names.length > 0 || this.wrote) {
+            this.source.hide(names);
+            this.wrote = names.length > 0;
+        }
+    }
+    disconnectedCallback() {
+        if (this.wrote) {
+            this.source.hide([]);
+            this.wrote = false;
+        }
+        super.disconnectedCallback();
+    }
+    toggle(name) {
+        requestChange({
+            apply: (value) => {
+                this.hiddenSeries = value;
+                this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+            },
+            event: (value) => new HelixBeforeChangeEvent({ value }),
+            host: this,
+            next: toggledNames(this.hiddenSeries, name),
+        });
+    }
     names() {
         const series = this.source.series;
         if (this.entries === 'categories') {
@@ -26,17 +57,31 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
         return (this.entries === 'measures' ? series.slice(1) : series).map((one) => one.name);
     }
     render() {
-        return html `<ul part="list" role="list">
-      ${this.names().map((name, index) => html `<li
+        const named = this.label || this.source.element?.querySelector('caption')?.textContent?.trim();
+        return html `<ul aria-label=${named || nothing} part="list" role="list">
+      ${this.names().map((name, index) => {
+            const off = isHidden(this.hiddenSeries, name);
+            return html `<li
           data-series=${seriesIndex(index)}
-          part="entry"
+          part="entry${off ? ' entry-hidden' : ''}"
           style="--chart-series: var(--chart-series-${seriesIndex(index)})"
           role="listitem"
         >
-          <span part="name">${name}</span>
-        </li>`)}
+          ${this.toggles ? this.renderToggle(name, off) : html `<span part="name">${name}</span>`}
+        </li>`;
+        })}
     </ul>`;
     }
+    renderToggle(name, off) {
+        return html `<button
+      aria-pressed=${off ? 'false' : 'true'}
+      part="toggle"
+      type="button"
+      @click=${() => this.toggle(name)}
+    >
+      <span part="name">${name}</span>
+    </button>`;
+    }
 };
 __decorate([
     property({ reflect: true })
@@ -44,6 +89,15 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessLegend.prototype, "for", void 0);
+__decorate([
+    property({ attribute: 'hidden-series' })
+], HelixHeadlessLegend.prototype, "hiddenSeries", void 0);
+__decorate([
+    property()
+], HelixHeadlessLegend.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessLegend.prototype, "toggles", void 0);
 HelixHeadlessLegend = __decorate([
     customElement('helix-headless-legend')
 ], HelixHeadlessLegend);

package/dist/lightbox/item/lightbox-item.d.ts

@@ -8,6 +8,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * or a chart. The lightbox shows one item at a time, and the root decides
  * which.
  *
+ * Each item is a `group` with the role description `slide`, named by its
+ * `label` or, without one, by its place in the set, such as "2 of 5", as the
+ * APG carousel pattern names a slide. The lightbox supplies both words, so they
+ * are translated on the lightbox.
+ *
  * An item that is not current is hidden and stays in the DOM, as a `TabPanel`
  * does. Crawlers can read it, it is in the server-rendered markup, and an
  * `<img>` that has decoded does not decode again when you go back to it.
@@ -33,9 +38,20 @@ export declare class HelixHeadlessLightboxItem extends HelixElement {
      */
     current: boolean;
     /**
-     * The item's name, used in the status text that says which item is shown.
+     * The item's name. It names the item's group, and fills `{label}` in the
+     * lightbox's `status-label`.
      */
     label: string;
+    /**
+     * @internal Set by the lightbox: the item's name where it has no `label`,
+     * which is its place in the set.
+     */
+    position: string;
+    /**
+     * @internal Set by the lightbox: the word a screen reader says in place of
+     * the item's role. Empty leaves the role as it is.
+     */
+    roleLabel: string;
     /**
      * The item's identifier. The root compares its `active` value against it.
      */