@fusion.dev/helix-headless 0.142.0 → 0.143.0

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

@@ -1,6 +1,6 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { type HelixIcon } from '@fusion.dev/helix-icons';
-import { nothing, type TemplateResult } from 'lit';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A named icon from the Helix set.
  *
@@ -18,11 +18,13 @@ import { nothing, type TemplateResult } from 'lit';
  * a dark background. Shapes that set their own `fill` or `stroke` are
  * unaffected.
  *
- * A name with no match renders nothing.
+ * A name with no match renders nothing, and the element fires `error`, so a
+ * typo in a name can be heard.
  *
  * 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
- * button with no text.
+ * button with no text. An `aria-label` on the element works too: the element
+ * is then an image with that name.
  *
  * @since 0.1.0
  * @status stable
@@ -30,6 +32,8 @@ import { nothing, type TemplateResult } from 'lit';
  * @aliases Glyph, Symbol
  * @documentation https://fusion.dev/helix/components/icon
  *
+ * @event {Event} error - `name` matches no icon in the set, so nothing is drawn.
+ *
  * @csspart svg - The rendered SVG.
  */
 export declare class HelixHeadlessIcon extends HelixElement {
@@ -73,6 +77,23 @@ export declare class HelixHeadlessIcon extends HelixElement {
      * value instead.
      */
     name: string;
+    /**
+     * Hears an `aria-label` written on the element, which no property mirrors.
+     *
+     * Lit observes the attributes of its own properties only, and `ariaLabel`
+     * belongs to the platform.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Called by the browser when an observed attribute changes. A new
+     * `aria-label` asks for an update, because the element takes the image role
+     * while one names it.
+     */
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    /** The name the last `error` was fired for, so it fires once per name. */
+    private missed;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult | typeof nothing;
 }
 declare global {

package/dist/icon/root/icon-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, 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';
@@ -15,6 +15,39 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
         this.label = '';
         this.mirror = false;
         this.name = '';
+        this.missed = '';
+    }
+    static get observedAttributes() {
+        return [...super.observedAttributes, 'aria-label'];
+    }
+    attributeChangedCallback(name, old, value) {
+        super.attributeChangedCallback(name, old, value);
+        if (name === 'aria-label') {
+            this.requestUpdate();
+        }
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        const named = this.label === '' && (this.getAttribute?.('aria-label') ?? '') !== '';
+        hostAria(this.internals, { role: named ? 'img' : '' });
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (this.icon === undefined && this.name !== '' && !Object.hasOwn(icons, this.name)) {
+            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`.',
+                    tag: this.localName,
+                });
+            }
+        }
+        else {
+            this.missed = '';
+        }
     }
     render() {
         const named = Object.hasOwn(icons, this.name) ? icons[this.name] : undefined;

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

@@ -25,7 +25,7 @@ import { HelixHeadlessButton } from '../../button/root/button-root.js';
  *
  * @slot - The icon.
  *
- * @csspart button - The inner button or anchor.
+ * @csspart button - The inner button.
  */
 export declare class HelixHeadlessIconButton extends HelixHeadlessButton {
 }

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

@@ -33,9 +33,11 @@ export declare class HelixHeadlessImage extends HelixElement {
      * A text description of the image, read by screen readers.
      *
      * Empty is a real answer and means decoration. Omitting the attribute is not
-     * the same thing: a reader with nothing to read announces the file name.
+     * the same thing: the inner image is then written with no `alt` either, as a
+     * native one would be, so a screen reader announces the file name and an
+     * accessibility checker reports the missing description.
      */
-    alt: string;
+    alt?: string;
     /**
      * How the image is fetched across origins. It decides whether a canvas can
      * read the image.
@@ -117,6 +119,11 @@ export declare class HelixHeadlessImage extends HelixElement {
      * for the event it reports, and `settle` runs twice in the first update.
      */
     private reported;
+    /**
+     * The event `settle` sent for a picture that finished before anything
+     * listened, so the platform's own, still on its way, is not sent again.
+     */
+    private synthesized;
     /**
      * Says so under the platform's own name, because the platform's cannot escape.
      *

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

@@ -10,7 +10,6 @@ import { property, state } from 'lit/decorators.js';
 let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
     constructor() {
         super(...arguments);
-        this.alt = '';
         this.crossOrigin = null;
         this.decoding = 'async';
         this.fetchPriority = 'auto';
@@ -21,6 +20,7 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
         this.status = 'loading';
         this.answered = '';
         this.reported = false;
+        this.synthesized = undefined;
         this.handleLoad = (event) => {
             this.announce('loaded', event);
         };
@@ -32,10 +32,15 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
         this.reported = true;
         const name = status === 'loaded' ? 'load' : 'error';
         if (event) {
+            if (this.synthesized === name) {
+                this.synthesized = undefined;
+                return;
+            }
             this.status = status;
             this.relayNativeEvent(event);
             return;
         }
+        this.synthesized = name;
         const send = () => {
             this.status = status;
             this.dispatchEvent(new Event(name, { bubbles: false, cancelable: false, composed: false }));
@@ -64,6 +69,7 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
         if (changed.has('src') && this.answered !== this.src) {
             this.answered = this.src;
             this.reported = false;
+            this.synthesized = undefined;
             this.status = 'loading';
         }
     }
@@ -103,7 +109,7 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
     render() {
         return html `<img
         part="image"
-        alt=${this.alt}
+        alt=${this.alt ?? nothing}
         loading=${this.loading ?? 'lazy'}
         decoding=${this.decoding}
         crossorigin=${this.crossOrigin ?? nothing}

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

@@ -29,6 +29,9 @@ declare const HelixHeadlessInput_base: (new (...args: any[]) => import("@fusion.
  * @documentation https://fusion.dev/helix/components/input
  *
  * @slot end - After the text, for an icon or a unit.
+ * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
+ * @slot hint - Help under the control, for content richer than the `hint` text.
+ * @slot label - The label, for content richer than the `label` text.
  * @slot start - Before the text, for an icon or a prefix.
  *
  * @event {Event} change - Sent when the user finishes changing the value. Relayed from the native input.
@@ -50,6 +53,11 @@ export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
     protected readonly aria: AriaForwardController;
     /** Typed or dragged, so every edit is announced. See `announcesInput`. */
     protected readonly announcesInput = true;
+    /**
+     * Whether a phone capitalizes as the reader types: `off`, `sentences`,
+     * `words` or `characters`, as the platform's `autocapitalize`.
+     */
+    autocapitalize: string;
     /**
      * What the browser may autofill in the field, as an HTML `autocomplete`
      * token.
@@ -71,10 +79,30 @@ export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
      * The accessible name of the clear button, which shows only an icon.
      */
     clearLabel: string;
+    /**
+     * The key the on-screen keyboard shows for Enter, as the platform's
+     * `enterkeyhint`: `search`, `send`, `go`, `next`, `previous`, `done` or
+     * `enter`.
+     */
+    enterKeyHint: string;
+    /**
+     * The keyboard a phone offers, as the platform's `inputmode`, such as
+     * `numeric` for a code typed as text.
+     */
+    inputMode: string;
+    /**
+     * The greatest value, for `type="number"`. Number Input adds steppers and
+     * keys to the same bounds.
+     */
+    max: string;
     /**
      * Most characters the value may have.
      */
     maxLength?: number;
+    /**
+     * The least value, for `type="number"`.
+     */
+    min: string;
     /**
      * Fewest characters the value may have.
      */
@@ -106,6 +134,15 @@ export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
      * form, `readOnly` came back `false`.
      */
     readOnly: boolean;
+    /**
+     * Whether a password field offers a toggle that shows what was typed.
+     *
+     * Ignored on every other type. A reveal on an email field would be a button
+     * that does nothing visible, and guarding it here rather than asking the
+     * consumer not to means the property can be set once on a component that
+     * changes type.
+     */
+    reveal: boolean;
     /**
      * Whether the password is currently showing.
      *
@@ -181,6 +218,15 @@ export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
      * where it was.
      */
     private readonly handleClear;
+    /**
+     * Enter submits the form, as it does in a native text field.
+     *
+     * On `keypress`, where the platform runs its own implicit submission, so a
+     * consumer who prevents the `keydown` for Enter stops this too.
+     */
+    private readonly handleKeypress;
+    /** @internal A single line of text counts against implicit submission. */
+    protected get blocksImplicitSubmission(): boolean;
     /** Relayed, because `change` does not cross a shadow boundary on its own. */
     private readonly handleChange;
     /** Reports the value and the validity the host stands behind. */
@@ -198,21 +244,17 @@ export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
     private releaseCaret;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
-    /**
-     * Whether a password field offers a toggle that shows what was typed.
-     *
-     * Ignored on every other type. A reveal on an email field would be a button
-     * that does nothing visible, and guarding it here rather than asking the
-     * consumer not to means the property can be set once on a component that
-     * changes type.
-     */
-    reveal: boolean;
     /**
      * The accessible name of the reveal toggle.
      *
      * The state is `aria-pressed`, not this.
      */
     revealLabel: string;
+    /**
+     * The step a valid value is a multiple of, counted from `min`, for
+     * `type="number"`.
+     */
+    step: string;
     /**
      * The kind of text the field accepts. It sets the on-screen keyboard and the
      * validation.

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,26 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
             restoreValue(control, this.value);
         };
         this.handleClear = () => {
-            this.requestValue('');
+            if (this.value !== '' && this.requestValue('')) {
+                this.announceChange();
+            }
             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 +101,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;
@@ -134,6 +150,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 +163,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 +199,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 +211,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 +238,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

@@ -31,11 +31,16 @@ 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 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;
     /**
@@ -67,11 +72,14 @@ export declare class HelixHeadlessKbd extends HelixElement {
     private deafen;
     private readonly handleKeydown;
     /**
-     * Whether this chord is one bare character, and so indistinguishable from
+     * Whether this chord types a character, and so is 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.
+     * 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. */

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

@@ -132,9 +132,10 @@ let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
     get printable() {
         const parts = this.keys
             .split('+')
-            .map((part) => part.trim())
+            .map((part) => part.trim().toLowerCase())
             .filter((part) => part !== '');
-        return parts.length === 1 && [...(parts[0] ?? '')].length === 1;
+        const key = parts.at(-1) ?? '';
+        return [...key].length === 1 && parts.slice(0, -1).every((modifier) => modifier === 'shift');
     }
     matches_(press) {
         const parts = this.keys
@@ -146,17 +147,15 @@ let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
         }
         const wanted = parts[parts.length - 1] ?? '';
         const modifiers = new Set(parts.slice(0, -1));
-        const mod = onApple() ? press.metaKey : press.ctrlKey;
+        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('mod') ? mod : true) &&
-            (modifiers.has('shift') ? press.shiftKey : !press.shiftKey) &&
+            (modifiers.has('shift') ? press.shiftKey : symbol || !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));
+            (ctrl ? press.ctrlKey : !press.ctrlKey) &&
+            (meta ? press.metaKey : !press.metaKey));
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);

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

@@ -62,6 +62,13 @@ export declare class HelixHeadlessLegend extends HelixElement {
      * `Tooltip.for` does, so it does not reflect and nothing styles on it.
      */
     for: 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;
     protected readonly source: SourceController;
     protected willUpdate(changed: PropertyValues<this>): void;
     /**

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

@@ -5,12 +5,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
     constructor() {
         super(...arguments);
         this.for = '';
+        this.label = '';
         this.source = new SourceController(this);
     }
     willUpdate(changed) {
@@ -26,7 +27,8 @@ 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">
+        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) => html `<li
           data-series=${seriesIndex(index)}
           part="entry"
@@ -44,6 +46,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessLegend.prototype, "for", void 0);
+__decorate([
+    property()
+], HelixHeadlessLegend.prototype, "label", void 0);
 HelixHeadlessLegend = __decorate([
     customElement('helix-headless-legend')
 ], HelixHeadlessLegend);

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

@@ -33,7 +33,8 @@ 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;
     /**

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

@@ -19,8 +19,10 @@ declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusi
  * focus stays in the dialog.
  *
  * The chrome hides when there is no input, through `IdleController`, and comes
- * back on a pointer move or a focus. `fullscreen` uses `FullscreenController`,
- * as `Video` does.
+ * back on a pointer move, a key press, or a focus. It stays while focus is on a
+ * control in the header or the footer, so a keyboard reader is never left on
+ * a control that has gone. `fullscreen` uses `FullscreenController`, as `Video`
+ * does. While the viewer is open, the page behind it does not scroll.
  *
  * @since 0.100.0
  * @status stable
@@ -37,7 +39,7 @@ declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusi
  * @event {HelixBeforeActivateEvent} helix-before-activate - Fired before the shown item changes. Cancelable: cancel it to keep the current item. It is the only way to stop the change.
  * @event {HelixBeforeCloseEvent} helix-before-close - Fired before the viewer closes. Cancelable.
  * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the viewer opens. Cancelable.
- * @event {Event} toggle - Fired when the viewer opens or closes, with `newState` and `oldState`.
+ * @event {ToggleEvent} toggle - Fired when the viewer opens or closes, with `newState` and `oldState`.
  *
  * @csspart dialog - The native dialog element.
  * @csspart live - The live region that announces which item is shown.
@@ -66,8 +68,8 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
      */
     loop: boolean;
     /**
-     * The status text that says which item is shown, with `{index}` and `{count}`
-     * filled in.
+     * The status text that says which item is shown, with `{index}`, `{count}`
+     * and the item's `{label}` filled in.
      *
      * Announced rather than only drawn, because the picture changing under a
      * reader who cannot see it is otherwise silent. A consumer who has their own
@@ -82,6 +84,14 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
     private announcement;
     private readonly fullscreen;
     private readonly idle;
+    /**
+     * Whether focus is on something in the header or the footer.
+     *
+     * The styled tier hides both with `visibility: hidden` while idle, which
+     * takes focus off a control in them and drops it on the body, where the
+     * arrow keys no longer reach this element.
+     */
+    private chromeHasFocus;
     protected readonly commands: CommandController;
     /**
      * The items, read from the host.
@@ -156,6 +166,7 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
      */
     private readonly handleBackdrop;
     protected willUpdate(changed: PropertyValues): void;
+    disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
     /**
      * Tells each item whether it is the one being shown.