@fusion.dev/helix-headless 0.144.0 → 0.146.0

package/dist/lightbox/root/lightbox-root.js

@@ -4,20 +4,23 @@ 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 { CommandController, customElement, deepActiveElement, deepContains, FullscreenController, fillTemplate, HelixElement, hostAria, IdleController, inlineStep, isRtl, keyClaimed, lockScroll, MixinControllerActive, MixinControllerOpen, resolveActiveItem, SwipeController, swipeStep, unlockScroll, whenHydrated, } from '@fusion.dev/helix-core';
-import { caretLeft, caretRight, x } from '@fusion.dev/helix-icons';
+import { CommandController, customElement, deepActiveElement, deepContains, drawDismiss, drawDismissGlyph, FullscreenController, fillTemplate, HelixElement, hostAria, IdleController, inlineStep, isRtl, keyClaimed, lockScroll, MixinControllerActive, MixinControllerOpen, resolveActiveItem, SwipeController, swipeStep, unlockScroll, whenHydrated, } from '@fusion.dev/helix-core';
+import { caretLeft, caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { HelixHeadlessLightboxItem } from '../item/lightbox-item.js';
+import { ZoomController } from '../zoom-controller.js';
 let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerActive(MixinControllerOpen(HelixElement)) {
     constructor() {
         super(...arguments);
         this.controls = false;
+        this.counter = false;
         this.dismissLabel = 'Close';
         this.idleDelay = 0;
         this.label = '';
         this.loop = false;
+        this.maxZoom = 1;
         this.nextLabel = 'Next';
         this.previousLabel = 'Previous';
         this.slideLabel = '{index} of {count}';
@@ -27,8 +30,11 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         this.filled = false;
         this.announcement = '';
         this.swipes = new SwipeController(this, {
-            axis: () => (this.open ? 'x' : undefined),
+            axis: () => (this.open && !this.zoomer.engaged ? 'x' : undefined),
             end: (dx, _dy, vx) => {
+                if (this.zoomer.pinched) {
+                    return;
+                }
                 const width = this.partNamed('viewport')?.getBoundingClientRect().width ?? 0;
                 const step = swipeStep(dx, vx, width, isRtl(this));
                 if (step !== 0) {
@@ -39,6 +45,11 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             start: (_target, event) => event.pointerType !== 'mouse',
             surface: () => this.dialog,
         });
+        this.zoomer = new ZoomController(this, {
+            max: () => (this.open ? this.maxZoom : 1),
+            onChange: (scale, pan) => this.drawZoom(scale, pan),
+            surface: () => this.partNamed('viewport'),
+        });
         this.fullscreen = new FullscreenController(this, (full) => {
             this.filled = full;
         });
@@ -70,6 +81,10 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             if (keyClaimed(event) || event.altKey || event.ctrlKey || event.metaKey) {
                 return;
             }
+            if (this.zoomKey(event.key)) {
+                event.preventDefault();
+                return;
+            }
             const along = inlineStep(this, event.key);
             if (along === 1 || event.key === 'ArrowDown') {
                 event.preventDefault();
@@ -103,6 +118,18 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             this.requestOpen(false);
         };
     }
+    drawZoom(scale, pan) {
+        const viewport = this.partNamed('viewport');
+        const zoomed = scale > 1;
+        viewport?.style.setProperty('--lightbox-zoom', zoomed ? String(scale) : '');
+        viewport?.style.setProperty('--lightbox-pan-x', zoomed ? `${Math.round(pan.x)}px` : '');
+        viewport?.style.setProperty('--lightbox-pan-y', zoomed ? `${Math.round(pan.y)}px` : '');
+        this.toggleState('zoomed', zoomed);
+        this.idle.stir();
+    }
+    zoomTo(scale) {
+        this.zoomer.zoomTo(scale);
+    }
     chromeHasFocus() {
         const active = deepActiveElement();
         const own = this.shadowRoot?.activeElement?.matches('[part="previous"], [part="next"], [part="dismiss"]');
@@ -147,6 +174,25 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             this.requestActive(target.value);
         }
     }
+    zoomKey(key) {
+        if (this.maxZoom <= 1) {
+            return false;
+        }
+        const scale = this.zoomer.scale;
+        if (key === '+' || key === '=') {
+            this.zoomer.zoomTo(scale * 1.5);
+        }
+        else if (key === '-') {
+            this.zoomer.zoomTo(scale / 1.5);
+        }
+        else if (key === '0') {
+            this.zoomer.reset();
+        }
+        else {
+            return false;
+        }
+        return true;
+    }
     toEnd(at) {
         const target = this.items[at];
         if (target && target !== this.shown) {
@@ -161,6 +207,10 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         hostAria(this.internals, { label: this.label });
         this.toggleState('fullscreen', this.filled);
         this.toggleState('idle', this.resting);
+        this.toggleState('zoomable', this.maxZoom > 1);
+        if (changed.has('active') || (changed.has('open') && !this.open)) {
+            this.zoomer.reset();
+        }
         this.say(changed);
     }
     disconnectedCallback() {
@@ -230,6 +280,17 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
                     label: current.label,
                 });
     }
+    place() {
+        const items = this.items;
+        const current = resolveActiveItem(this.active, items);
+        return current
+            ? fillTemplate(this.statusLabel, {
+                count: items.length,
+                index: items.indexOf(current) + 1,
+                label: current.label,
+            })
+            : '';
+    }
     render() {
         return html `<dialog
       part="dialog"
@@ -250,6 +311,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
       </div>
       <slot name="footer"></slot>
       ${this.controls ? this.renderControls() : nothing}
+      ${this.counter ? html `<span part="counter" aria-hidden="true">${this.place()}</span>` : nothing}
       <span part="live" role="status" aria-live="polite">${this.announcement || nothing}</span>
     </dialog>`;
     }
@@ -261,9 +323,11 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         aria-disabled=${this.atEnd(-1) ? 'true' : nothing}
         @click=${() => this.previous()}
       >
-        <svg part="previous-mark" data-mirror fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
-          ${unsafeSVG(caretLeft.content)}
-        </svg>
+        <slot name="previous-icon">
+          <svg part="previous-mark" data-mirror fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
+            ${unsafeSVG(caretLeft.content)}
+          </svg>
+        </slot>
       </button>
       <button
         part="next"
@@ -272,25 +336,25 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         aria-disabled=${this.atEnd(1) ? 'true' : nothing}
         @click=${() => this.next()}
       >
-        <svg part="next-mark" data-mirror fill="currentColor" viewBox=${caretRight.viewBox} aria-hidden="true">
-          ${unsafeSVG(caretRight.content)}
-        </svg>
+        <slot name="next-icon">
+          <svg part="next-mark" data-mirror fill="currentColor" viewBox=${caretRight.viewBox} aria-hidden="true">
+            ${unsafeSVG(caretRight.content)}
+          </svg>
+        </slot>
       </button>
-      <button
-        part="dismiss"
-        type="button"
-        aria-label=${this.dismissLabel}
-        @click=${() => this.close()}
-      >
-        <svg part="dismiss-mark" fill="currentColor" viewBox=${x.viewBox} aria-hidden="true">
-          ${unsafeSVG(x.content)}
-        </svg>
-      </button>`;
+      ${drawDismiss({
+            label: this.dismissLabel,
+            mark: html `<slot name="dismiss-icon">${drawDismissGlyph()}</slot>`,
+            onDismiss: () => this.close(),
+        })}`;
     }
 };
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessLightbox.prototype, "controls", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessLightbox.prototype, "counter", void 0);
 __decorate([
     property({ attribute: 'dismiss-label' })
 ], HelixHeadlessLightbox.prototype, "dismissLabel", void 0);
@@ -303,6 +367,9 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessLightbox.prototype, "loop", void 0);
+__decorate([
+    property({ attribute: 'max-zoom', type: Number })
+], HelixHeadlessLightbox.prototype, "maxZoom", void 0);
 __decorate([
     property({ attribute: 'next-label' })
 ], HelixHeadlessLightbox.prototype, "nextLabel", void 0);

package/dist/lightbox/zoom-controller.d.ts

@@ -0,0 +1,59 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import { type Offset } from './zoom.js';
+export interface ZoomOptions {
+    /** The most the item may grow, as a scale. 1 or less turns zooming off. */
+    max: () => number;
+    /** Told every time the scale or the position changes. */
+    onChange: (scale: number, pan: Offset) => void;
+    /** The box the item is shown in, which presses must land in and the item scales from the middle of. */
+    surface: () => HTMLElement | null | undefined;
+}
+/**
+ * Pinch, double press and drag to zoom into the item a viewer shows, and to
+ * move about it once zoomed.
+ *
+ * Two fingers scale the item about the point between them. A double press, a
+ * double click or a double tap, zooms all the way in about the point pressed,
+ * and back out again. One pointer dragged across a zoomed item moves it, never
+ * so far that an edge comes inside the box. What it reports is a scale and an
+ * offset from the middle of the box; drawing them is the caller's.
+ */
+export declare class ZoomController implements ReactiveController {
+    private readonly host;
+    private readonly options;
+    /** The pointers down on the box, where each one is now. */
+    private readonly pointers;
+    /** What the gesture under way started from. */
+    private from;
+    /** The scale, 1 at rest. */
+    scale: number;
+    /** How far the item is moved from the middle of the box, in pixels. */
+    pan: Offset;
+    /**
+     * Whether two fingers have been down since the last gesture began, so a
+     * swipe that started with the first of them can be told it was a pinch.
+     */
+    pinched: boolean;
+    constructor(host: ReactiveControllerHost & HTMLElement, options: ZoomOptions);
+    /** Whether the item is zoomed, or two fingers are on it: either way, a drag is not a swipe. */
+    get engaged(): boolean;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /** Zooms to `scale` about the middle of the box, held to the range. */
+    zoomTo(scale: number, at?: Offset): void;
+    /** Back to the item at its own size, in the middle. */
+    reset(): void;
+    private set;
+    /** A point on the page, measured from the middle of the box. */
+    private offset;
+    /** Whether a press landed in the box, through slotted content as well. */
+    private inside;
+    /** Starts over from where every pointer down is now. */
+    private begin;
+    private readonly handleDown;
+    private readonly handleMove;
+    private readonly handleUp;
+    /** A double press zooms all the way in about the point, or back out. */
+    private readonly handleDouble;
+    private release;
+}

package/dist/lightbox/zoom-controller.js

@@ -0,0 +1,128 @@
+import { between, clampPan, clampScale, spread, zoomAt } from './zoom.js';
+export class ZoomController {
+    constructor(host, options) {
+        this.pointers = new Map();
+        this.scale = 1;
+        this.pan = { x: 0, y: 0 };
+        this.pinched = false;
+        this.handleDown = (event) => {
+            if (this.options.max() <= 1 || event.button !== 0 || !this.inside(event)) {
+                return;
+            }
+            if (this.pointers.size === 0) {
+                this.pinched = false;
+                window.addEventListener('pointermove', this.handleMove);
+                window.addEventListener('pointerup', this.handleUp);
+                window.addEventListener('pointercancel', this.handleUp);
+            }
+            this.pointers.set(event.pointerId, this.offset(event));
+            if (this.pointers.size > 1) {
+                this.pinched = true;
+            }
+            this.begin();
+        };
+        this.handleMove = (event) => {
+            const from = this.from;
+            if (!from || !this.pointers.has(event.pointerId)) {
+                return;
+            }
+            this.pointers.set(event.pointerId, this.offset(event));
+            const [a, b] = [...this.pointers.values()];
+            if (a && b && from.spread > 0) {
+                const at = between(a, b);
+                const scale = clampScale((from.scale * spread(a, b)) / from.spread, this.options.max());
+                const about = zoomAt(from.at, from.scale, scale, from.pan);
+                this.set(scale, { x: about.x + at.x - from.at.x, y: about.y + at.y - from.at.y });
+            }
+            else if (a && this.scale > 1) {
+                this.set(this.scale, { x: from.pan.x + a.x - from.at.x, y: from.pan.y + a.y - from.at.y });
+            }
+        };
+        this.handleUp = (event) => {
+            if (!this.pointers.delete(event.pointerId)) {
+                return;
+            }
+            if (this.pointers.size === 0) {
+                this.release();
+                return;
+            }
+            this.begin();
+        };
+        this.handleDouble = (event) => {
+            if (this.options.max() <= 1 || !this.inside(event)) {
+                return;
+            }
+            if (this.scale > 1) {
+                this.reset();
+            }
+            else {
+                this.zoomTo(this.options.max(), this.offset(event));
+            }
+        };
+        this.host = host;
+        this.options = options;
+        host.addController(this);
+    }
+    get engaged() {
+        return this.scale > 1 || this.pointers.size > 1;
+    }
+    hostConnected() {
+        this.host.addEventListener('pointerdown', this.handleDown);
+        this.host.addEventListener('dblclick', this.handleDouble);
+    }
+    hostDisconnected() {
+        this.host.removeEventListener('pointerdown', this.handleDown);
+        this.host.removeEventListener('dblclick', this.handleDouble);
+        this.release();
+    }
+    zoomTo(scale, at = { x: 0, y: 0 }) {
+        const next = clampScale(scale, this.options.max());
+        this.set(next, zoomAt(at, this.scale, next, this.pan));
+    }
+    reset() {
+        if (this.scale !== 1 || this.pan.x !== 0 || this.pan.y !== 0) {
+            this.set(1, { x: 0, y: 0 });
+        }
+    }
+    set(scale, pan) {
+        const box = this.options.surface()?.getBoundingClientRect();
+        const held = clampPan(pan, scale, box?.width ?? 0, box?.height ?? 0);
+        if (scale === this.scale && held.x === this.pan.x && held.y === this.pan.y) {
+            return;
+        }
+        this.scale = scale;
+        this.pan = held;
+        this.options.onChange(scale, held);
+    }
+    offset(event) {
+        const box = this.options.surface()?.getBoundingClientRect();
+        return {
+            x: event.clientX - (box ? box.left + box.width / 2 : 0),
+            y: event.clientY - (box ? box.top + box.height / 2 : 0),
+        };
+    }
+    inside(event) {
+        const surface = this.options.surface();
+        return surface !== null && surface !== undefined && event.composedPath().includes(surface);
+    }
+    begin() {
+        const [a, b] = [...this.pointers.values()];
+        if (!a) {
+            this.from = undefined;
+            return;
+        }
+        this.from = {
+            at: b ? between(a, b) : a,
+            pan: { ...this.pan },
+            scale: this.scale,
+            spread: b ? spread(a, b) : 0,
+        };
+    }
+    release() {
+        window.removeEventListener('pointermove', this.handleMove);
+        window.removeEventListener('pointerup', this.handleUp);
+        window.removeEventListener('pointercancel', this.handleUp);
+        this.pointers.clear();
+        this.from = undefined;
+    }
+}

package/dist/lightbox/zoom.d.ts

@@ -0,0 +1,22 @@
+/** A distance from the middle of the viewer, or a point measured from it, in pixels. */
+export interface Offset {
+    x: number;
+    y: number;
+}
+/** A scale held between 1, the item at its own size, and `max`. */
+export declare const clampScale: (scale: number, max: number) => number;
+/**
+ * How far a zoomed item may move, kept so its edges never come inside the
+ * viewer's: at a scale of 2 in a box 400 wide, 200 either way.
+ */
+export declare const clampPan: (pan: Offset, scale: number, width: number, height: number) => Offset;
+/**
+ * Where the item moves to as its scale goes from `from` to `to`, so the point
+ * under `at` stays under it. Both are measured from the middle of the viewer,
+ * which is where the item scales from.
+ */
+export declare const zoomAt: (at: Offset, from: number, to: number, pan: Offset) => Offset;
+/** The distance between two fingers. */
+export declare const spread: (a: Offset, b: Offset) => number;
+/** The point halfway between two fingers. */
+export declare const between: (a: Offset, b: Offset) => Offset;

package/dist/lightbox/zoom.js

@@ -0,0 +1,16 @@
+const clamp = (value, low, high) => Math.min(Math.max(value, low), high) || 0;
+export const clampScale = (scale, max) => clamp(scale, 1, Math.max(max, 1));
+export const clampPan = (pan, scale, width, height) => {
+    const x = ((scale - 1) * width) / 2;
+    const y = ((scale - 1) * height) / 2;
+    return { x: clamp(pan.x, -x, x), y: clamp(pan.y, -y, y) };
+};
+export const zoomAt = (at, from, to, pan) => ({
+    x: at.x - ((at.x - pan.x) * to) / from,
+    y: at.y - ((at.y - pan.y) * to) / from,
+});
+export const spread = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
+export const between = (a, b) => ({
+    x: (a.x + b.x) / 2,
+    y: (a.y + b.y) / 2,
+});

package/dist/line-chart/root/line-chart-root.d.ts

@@ -49,6 +49,8 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * @csspart line - The line for one series.
  * @csspart live - The readout: a polite live region that says the reading the keys moved to. Hide it visually.
  * @csspart mark - The invisible point the tooltip is anchored to.
+ * @csspart marker - The mark on one reading, under `markers`, and on a reading with a blank on either side. Placed with `inset-inline-start` and `inset-block-start`, and carries its series color as `--chart-series`.
+ * @csspart marker-lone - A `marker` on a reading with a blank on either side, which no line reaches. Set alongside `marker`.
  * @csspart plot - The drawing, which takes focus to be read by key.
  * @csspart summary - The chart's name and each series' latest reading, written as a sentence for screen readers. Hide it visually.
  * @csspart svg - The drawing surface the lines and areas sit on.
@@ -138,6 +140,15 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
     protected get rulesValue(): boolean;
     /** Whether each reading is ruled, which only two values ask for. */
     protected get rulesCategory(): boolean;
+    /**
+     * Draws a mark on every reading, the `marker` part, so a reader sees where
+     * the readings are, as well as the line between them.
+     *
+     * Absent draws none, except on a reading with a blank on either side: it
+     * has no line to be part of, so it takes a mark, the `marker` part with
+     * `marker-lone` beside it, or it would not be drawn at all.
+     */
+    markers: boolean;
     /**
      * The shape of the mark on each series' last reading.
      *
@@ -200,7 +211,8 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
      * The latest, because where a series ended is the question a line over time
      * is asked first, which is what `AreaChart` gives too. Each series' own last
      * reading, so a series with a blank in the last row still says where it was.
-     * Written the way the table writes it, such as `$128k` for `128000`.
+     * Written the way the table writes it, such as `$128k` for `128000`. A
+     * series a legend hid is not drawn and is not said.
      */
     protected renderSummary(series: Series[]): TemplateResult;
     /**
@@ -255,6 +267,15 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
         x: number;
         y: number;
     }>): TemplateResult | typeof nothing;
+    /**
+     * The marks on the readings: every one under `markers`, and otherwise only
+     * a reading no line reaches, which has a blank on either side.
+     *
+     * Elements beside the drawing, as the termini are, so a mark is round in a
+     * drawing `preserveAspectRatio="none"` stretches. Placed from the inline
+     * start, as the drawing is mirrored.
+     */
+    protected renderMarkers(series: Series[], x: (value: number) => number, y: (value: number) => number): TemplateResult | typeof nothing;
     /**
      * One series, its wash first so the line is drawn over its own fill.
      *

package/dist/line-chart/root/line-chart-root.js

@@ -12,6 +12,7 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
     constructor() {
         super(...arguments);
         this.area = false;
+        this.markers = false;
         this.zero = false;
     }
     get rulesValue() {
@@ -62,7 +63,7 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         const columns = this.plottedColumns;
         const latest = series.flatMap((one, depth) => {
             const last = one.points.at(-1);
-            if (last === undefined) {
+            if (last === undefined || !this.showsSeries(one.name)) {
                 return [];
             }
             const text = rows[last.at]?.cells[columns[depth] ?? -1]?.text ?? String(last.value);
@@ -109,6 +110,7 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         ${series.map((one, depth) => this.renderSeries(one, depth, x, y))}
       </svg>
       ${this.renderTermini(ends)}
+      ${this.renderMarkers(series, x, y)}
       ${this.renderTooltip()}
     </div>`;
     }
@@ -149,6 +151,21 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
           style=${`--chart-series: var(--chart-series-${end.index}); --chart-terminus-x: ${end.x}%; --chart-terminus-y: ${end.y}%`}
         ></span>`)}`;
     }
+    renderMarkers(series, x, y) {
+        const marks = series.flatMap((one, depth) => this.showsSeries(one.name)
+            ? unbroken(one).flatMap((run) => run.length > 1 && !this.markers
+                ? []
+                : run.map((point) => ({ depth, lone: run.length === 1, point })))
+            : []);
+        if (marks.length === 0) {
+            return nothing;
+        }
+        return html `${marks.map(({ depth, lone, point }) => html `<span
+          aria-hidden="true"
+          part="marker${lone ? ' marker-lone' : ''}"
+          style=${`--chart-series: var(--chart-series-${seriesIndex(depth)}); inset-inline-start: ${(x(point.at) / PLOT_WIDTH) * 100}%; inset-block-start: ${(y(point.value) / PLOT_HEIGHT) * 100}%`}
+        ></span>`)}`;
+    }
     renderSeries(one, depth, x, y) {
         if (!this.showsSeries(one.name)) {
             return html `${nothing}`;
@@ -221,6 +238,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessLineChart.prototype, "gridlines", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessLineChart.prototype, "markers", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessLineChart.prototype, "terminus", void 0);

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

@@ -1,5 +1,7 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+/** The values `current` takes, which are `aria-current`'s. */
+export type ListItemCurrent = 'date' | 'location' | 'page' | 'step' | 'time' | 'true';
 /**
  * @summary One row of a list.
  *
@@ -25,6 +27,14 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * **For a row that holds controls and is not a destination, use
  * `data-list-item`.** With `href` unset, the row is not a link.
  *
+ * `current` marks the row a reader is on, such as the page in a list of
+ * pages, with `aria-current` on its link, or on the row where it has none.
+ *
+ * **In a list with `selection-mode`, the row is a row of a grid.** The list
+ * gives it its role, its place in the one tab stop and, where the list
+ * selects, whether it is selected. Its link leaves the tab order there, and
+ * Enter follows it from the row.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Row, Entry
@@ -35,10 +45,38 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @slot end - Trailing content.
  * @slot start - Leading content, usually an icon or an avatar.
  *
+ * @event {HelixActionEvent} helix-action - The reader pressed Enter on the row, or pressed the row in a list that selects nothing, in a list with `selection-mode`. Read the row from `target`. A row with `href` follows its link instead.
+ *
  * @csspart link - The link, when the row has `href`. It holds every region except `end`.
- * @csspart row - The row's layout. It sits inside the host so the host can carry a list marker.
+ * @csspart row - The row's layout. It sits inside the host so the host can carry a list marker. In a list with `selection-mode` it is the grid cell that takes focus.
+ * @csspart row-current - Added to `row` while the row is `current`.
+ *
+ * @cssstate selected - The row is selected, in a list that selects.
  */
 export declare class HelixHeadlessListItem extends HelixElement {
+    /**
+     * Marks the row a reader is on: `page` for the page they are reading, `step`,
+     * `location`, `date` or `time` for those, and written bare for the current
+     * one of a set. It is `aria-current` on the row's link, or on the row where
+     * it has none.
+     *
+     * Not reflected, as a state never is. `row-current` is the part a
+     * stylesheet draws it from.
+     */
+    current?: ListItemCurrent;
+    /**
+     * Takes the row out of reach in a list with `selection-mode`: the arrow keys
+     * pass over it and it cannot be selected or acted on.
+     */
+    disabled: boolean;
+    /**
+     * Whether the row holds its list's tab stop.
+     *
+     * Written by a list with `selection-mode` on every row it holds, and unset
+     * otherwise, which is how a row knows it is a row of a grid. No attribute:
+     * it is coordination between elements, as `Tag.focusable` is.
+     */
+    focusable?: boolean | undefined;
     /**
      * The URL the row links to. Leave it empty for a row that is not a link.
      *
@@ -52,10 +90,41 @@ export declare class HelixHeadlessListItem extends HelixElement {
      * `target`, for the reason `Tree.Item` gives.
      */
     rel: string;
+    /**
+     * Whether the row is selected, in a list that selects.
+     *
+     * Written by the list from its own `value`, and unset where nothing can be
+     * selected, which keeps `aria-selected` off a list that does not select.
+     */
+    selected?: boolean | undefined;
     /**
      * Where the link opens. Use it for a row that leaves the site.
      */
     target: string;
+    /**
+     * What the row stands for in its list's `value`.
+     *
+     * Absent is the row's own words.
+     */
+    value: string;
+    /** The row's words, or none where the children are not known yet. */
+    get words(): string;
+    /** Whether something is slotted into `description`, or false where the children are not known yet. */
+    private get described();
+    /** Whether a list with `selection-mode` holds this row, which makes it a row of a grid. */
+    private get grouped();
+    /** @internal The cell a list with `selection-mode` moves focus to. */
+    get cell(): HTMLElement | null;
+    /**
+     * @internal The controls in the `end` slot, in order, which Left and Right
+     * move between in a list with `selection-mode`. Disabled ones are passed
+     * over.
+     */
+    get controls(): HTMLElement[];
+    /** Moves focus to the row's cell, in a list with `selection-mode`. */
+    focusItem(): void;
+    /** @internal Follows the row's link, as a press on it would. Called by the list on Enter. */
+    follow(): void;
     protected willUpdate(changed: PropertyValues): void;
     /**
      * The cell before the row's content, which this tier leaves empty.