@fusion.dev/helix-headless 0.144.0 → 0.146.0

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
@@ -36,7 +39,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 {HelixClearEvent} 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.
@@ -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, 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';
@@ -38,7 +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 }));
+                this.dispatchEvent(new HelixClearEvent());
             }
             const control = this.control;
             if (control) {
@@ -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 {

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

@@ -4,9 +4,9 @@ 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 { commaList, customElement, HelixBeforeChangeEvent, HelixElement, requestChange, SourceController, seriesIndex, } from '@fusion.dev/helix-core';
+import { commaList, customElement, HelixBeforeChangeEvent, HelixElement, KeyboardNavigationController, requestChange, SourceController, seriesIndex, seriesKey, typeaheadBy, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { isHidden, toggledNames } from '../hidden-series.js';
 let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
     constructor() {
@@ -16,25 +16,58 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
         this.label = '';
         this.toggles = false;
         this.source = new SourceController(this);
-        this.wrote = false;
+        this.stop = 0;
+        this.keys = new KeyboardNavigationController(this, {
+            items: () => this.toggles
+                ? [...this.renderRoot.querySelectorAll('[part="toggle"]')].map((button) => ({
+                    contains: (node) => button.contains(node),
+                    disabled: false,
+                    focusItem: () => button.focus(),
+                    select: () => { },
+                    selected: false,
+                    words: button.textContent?.trim() ?? '',
+                }))
+                : [],
+            origin: 'focus',
+            selects: () => false,
+            typeahead: typeaheadBy((item) => item.words ?? ''),
+        });
+        this.wroteTo = null;
+        this.writes = false;
     }
     willUpdate(changed) {
         if (changed.has('for')) {
             this.source.watch();
         }
+        const table = this.source.element;
+        const asked = changed.has('hiddenSeries') &&
+            !(changed.get('hiddenSeries') === undefined && this.hiddenSeries === '');
+        this.writes = asked || (table !== null && table !== this.wroteTo && this.hiddenSeries !== '');
+        if (!this.writes && table !== null) {
+            this.follow();
+        }
+    }
+    follow() {
+        const hidden = this.source.hidden;
+        const now = commaList(this.hiddenSeries);
+        const next = this.names().filter((name) => hidden.has(seriesKey(name)));
+        const same = next.length === now.length &&
+            next.every((name) => now.some((one) => seriesKey(one) === seriesKey(name)));
+        if (!same) {
+            this.hiddenSeries = next.join(', ');
+        }
     }
     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;
+        if (this.writes) {
+            this.writes = false;
+            this.wroteTo = this.source.hide(commaList(this.hiddenSeries), this.names()) ?? this.wroteTo;
         }
     }
     disconnectedCallback() {
-        if (this.wrote) {
-            this.source.hide([]);
-            this.wrote = false;
+        if (this.wroteTo !== null) {
+            this.source.hide([], this.names());
+            this.wroteTo = null;
         }
         super.disconnectedCallback();
     }
@@ -58,8 +91,10 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
     }
     render() {
         const named = this.label || this.source.element?.querySelector('caption')?.textContent?.trim();
+        const names = this.names();
+        const stop = Math.min(this.stop, names.length - 1);
         return html `<ul aria-label=${named || nothing} part="list" role="list">
-      ${this.names().map((name, index) => {
+      ${names.map((name, index) => {
             const off = isHidden(this.hiddenSeries, name);
             return html `<li
           data-series=${seriesIndex(index)}
@@ -67,17 +102,21 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
           style="--chart-series: var(--chart-series-${seriesIndex(index)})"
           role="listitem"
         >
-          ${this.toggles ? this.renderToggle(name, off) : html `<span part="name">${name}</span>`}
+          ${this.toggles ? this.renderToggle(name, off, index, index === stop) : html `<span part="name">${name}</span>`}
         </li>`;
         })}
     </ul>`;
     }
-    renderToggle(name, off) {
+    renderToggle(name, off, index = 0, holds = true) {
         return html `<button
       aria-pressed=${off ? 'false' : 'true'}
       part="toggle"
+      tabindex=${holds ? '0' : '-1'}
       type="button"
       @click=${() => this.toggle(name)}
+      @focus=${() => {
+            this.stop = index;
+        }}
     >
       <span part="name">${name}</span>
     </button>`;
@@ -98,6 +137,9 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessLegend.prototype, "toggles", void 0);
+__decorate([
+    state()
+], HelixHeadlessLegend.prototype, "stop", void 0);
 HelixHeadlessLegend = __decorate([
     customElement('helix-headless-legend')
 ], HelixHeadlessLegend);

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

@@ -19,9 +19,18 @@ declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusi
  * focus stays in the dialog.
  *
  * Set `controls` for the viewer's own previous, next and close controls, named
- * by `previous-label`, `next-label` and `dismiss-label`. Without it, compose the
- * chrome yourself in the `header` and `footer` slots, with buttons that send
- * `--previous`, `--next` and `--close`.
+ * by `previous-label`, `next-label` and `dismiss-label`, whose glyphs you can
+ * replace in the `previous-icon`, `next-icon` and `dismiss-icon` slots. Without
+ * it, compose the chrome yourself in the `header` and `footer` slots, with
+ * buttons that send `--previous`, `--next` and `--close`.
+ *
+ * **Set `max-zoom` to let a reader zoom into the shown item**, such as `3`.
+ * Two fingers pinch it, a double click or a double tap zooms all the way in
+ * about the point pressed and back out, and once zoomed one pointer drags it
+ * about. `+` and `-` zoom in and out from the keyboard, and `0` puts it back.
+ * The scale and the offset are on the `viewport` part as `--lightbox-zoom`,
+ * `--lightbox-pan-x` and `--lightbox-pan-y`, written only while zoomed, and a
+ * swipe moves to the next item only while the item is at its own size.
  *
  * Each item is a slide: a `group` with the role description in
  * `slide-role-label`, named by its `label` or by `slide-label`. A touch or a pen
@@ -41,8 +50,11 @@ declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusi
  * @documentation https://fusion.dev/helix/components/lightbox
  *
  * @slot - The items, which are `<helix-headless-lightbox-item>` elements.
+ * @slot dismiss-icon - Replaces the glyph inside the close control.
  * @slot footer - Content below the item, such as a counter or a thumbnail strip.
  * @slot header - Content above the item, such as a title and a close button.
+ * @slot next-icon - Replaces the glyph inside the next control.
+ * @slot previous-icon - Replaces the glyph inside the previous control.
  *
  * @event {Event} close - Fired when the viewer closes. The component dispatches it again from the host, because the dialog's own event does not leave the shadow root.
  * @event {HelixActivateEvent} helix-activate - Fired after the shown item changes, when the element already holds the new item.
@@ -51,19 +63,26 @@ declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusi
  * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the viewer opens. Cancelable.
  * @event {ToggleEvent} toggle - Fired when the viewer opens or closes, with `newState` and `oldState`.
  *
+ * @csspart counter - The place of the shown item in the set, drawn with `counter`.
  * @csspart dialog - The native dialog element.
  * @csspart dismiss - The close control, drawn with `controls`.
- * @csspart dismiss-mark - The glyph on the close control.
+ * @csspart dismiss-mark - The glyph on the close control, where none is slotted.
  * @csspart live - The live region that announces which item is shown.
  * @csspart next - The control that shows the next item, drawn with `controls`.
- * @csspart next-mark - The glyph on the next control.
+ * @csspart next-mark - The glyph on the next control, where none is slotted.
  * @csspart previous - The control that shows the previous item, drawn with `controls`.
- * @csspart previous-mark - The glyph on the previous control.
+ * @csspart previous-mark - The glyph on the previous control, where none is slotted.
  * @csspart viewport - The box the current item is shown in.
  *
+ * @cssproperty --lightbox-pan-x - How far the zoomed item is moved across from the middle of the viewport, in pixels, toward the right. Written only while zoomed.
+ * @cssproperty --lightbox-pan-y - How far the zoomed item is moved down from the middle of the viewport, in pixels. Written only while zoomed.
+ * @cssproperty --lightbox-zoom - The scale the shown item is zoomed to, such as `2`. Written only while zoomed.
+ *
  * @cssstate fullscreen - While the viewer fills the screen.
  * @cssstate idle - The user has been still long enough for the controls to hide.
  * @cssstate open - While the viewer is open.
+ * @cssstate zoomable - While `max-zoom` lets a reader zoom.
+ * @cssstate zoomed - While the shown item is zoomed past its own size.
  */
 export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
     /**
@@ -75,6 +94,13 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
      * either end of a set that does not `loop`.
      */
     controls: boolean;
+    /**
+     * Draws the place of the shown item in the set over the picture, in the
+     * words of `status-label`, such as "2 of 5". It hides with the controls while
+     * the reader is idle. Screen readers hear the place from the live region, so
+     * the drawn copy is hidden from them.
+     */
+    counter: boolean;
     /**
      * The close control's accessible name. Translate it with the rest of your
      * interface.
@@ -97,6 +123,11 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
      * Whether moving past the last item returns to the first.
      */
     loop: boolean;
+    /**
+     * How far a reader can zoom into the shown item, as a scale, such as `3`.
+     * `1`, the default, turns zooming off.
+     */
+    maxZoom: number;
     /**
      * The next control's accessible name.
      */
@@ -132,6 +163,14 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
     /** What the live region is currently saying. */
     private announcement;
     protected readonly swipes: SwipeController;
+    private readonly zoomer;
+    /** Writes the zoom on the viewport, and nothing at the item's own size. */
+    private drawZoom;
+    /**
+     * Zooms the shown item to `scale`, held between `1` and `max-zoom`, about
+     * the middle of the viewport.
+     */
+    zoomTo(scale: number): void;
     private readonly fullscreen;
     private readonly idle;
     /**
@@ -202,6 +241,8 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
      * a reader having no way to know which one this component thinks it is.
      */
     private readonly handleKeydown;
+    /** `+` and `-` zoom in and out by half again, and `0` puts the item back. Returns whether it was one. */
+    private zoomKey;
     /** Home and End, which are an index rather than a step. */
     private toEnd;
     /** The item on screen: the one `active` names, or the first where it names none. */
@@ -236,6 +277,8 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
      * every page load.
      */
     private say;
+    /** The shown item's place in the set, in the words of `status-label`. */
+    private place;
     protected render(): TemplateResult;
     /**
      * The viewer's own controls, behind a seam a tier above can move.