@fusion.dev/helix-headless 0.143.0 → 0.145.0

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

@@ -4,21 +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 { 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') {
@@ -29,16 +59,29 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
     render() {
         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
+      ${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 })
@@ -46,9 +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.
@@ -37,6 +42,16 @@ export declare class HelixHeadlessLightboxItem extends HelixElement {
      * 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.
      */

package/dist/lightbox/item/lightbox-item.js

@@ -12,6 +12,8 @@ let HelixHeadlessLightboxItem = class HelixHeadlessLightboxItem extends HelixEle
         super(...arguments);
         this.current = false;
         this.label = '';
+        this.position = '';
+        this.roleLabel = '';
         this.value = '';
     }
     willUpdate(changed) {
@@ -22,7 +24,8 @@ let HelixHeadlessLightboxItem = class HelixHeadlessLightboxItem extends HelixEle
         return html `<div
       part="item"
       role="group"
-      aria-label=${this.label || nothing}
+      aria-roledescription=${this.roleLabel || nothing}
+      aria-label=${this.label || this.position || nothing}
       ?hidden=${!this.current}
     >
       <slot></slot>
@@ -36,6 +39,12 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessLightboxItem.prototype, "label", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessLightboxItem.prototype, "position", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessLightboxItem.prototype, "roleLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessLightboxItem.prototype, "value", void 0);

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

@@ -1,4 +1,4 @@
-import { CommandController, HelixElement } from '@fusion.dev/helix-core';
+import { CommandController, HelixElement, SwipeController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerActiveInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
 /**
@@ -18,6 +18,16 @@ declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusi
  * holds the current item, as in `Tabs`. The arrow keys change the item while
  * 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`.
+ *
+ * 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
+ * swiped across the picture shows the next or the previous item, the way the
+ * line of text runs.
+ *
  * The chrome hides when there is no input, through `IdleController`, and comes
  * 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
@@ -42,7 +52,13 @@ declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusi
  * @event {ToggleEvent} toggle - Fired when the viewer opens or closes, with `newState` and `oldState`.
  *
  * @csspart dialog - The native dialog element.
+ * @csspart dismiss - The close control, drawn with `controls`.
+ * @csspart dismiss-mark - The glyph on the close control.
  * @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 previous - The control that shows the previous item, drawn with `controls`.
+ * @csspart previous-mark - The glyph on the previous control.
  * @csspart viewport - The box the current item is shown in.
  *
  * @cssstate fullscreen - While the viewer fills the screen.
@@ -50,6 +66,20 @@ declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusi
  * @cssstate open - While the viewer is open.
  */
 export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
+    /**
+     * Draws the viewer's own previous, next and close controls over the picture.
+     *
+     * Off by default, for a viewer whose chrome you compose in the `header` and
+     * `footer` slots. The controls hide with the rest of the chrome while the
+     * reader is idle, and the previous and next ones say they are unavailable at
+     * either end of a set that does not `loop`.
+     */
+    controls: boolean;
+    /**
+     * The close control's accessible name. Translate it with the rest of your
+     * interface.
+     */
+    dismissLabel: string;
     /**
      * How long the user can be idle before the header and footer hide, in
      * milliseconds.
@@ -67,6 +97,25 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
      * Whether moving past the last item returns to the first.
      */
     loop: boolean;
+    /**
+     * The next control's accessible name.
+     */
+    nextLabel: string;
+    /**
+     * The previous control's accessible name.
+     */
+    previousLabel: string;
+    /**
+     * The name of an item with no `label` of its own, with `{index}` and
+     * `{count}` filled in.
+     */
+    slideLabel: string;
+    /**
+     * The word screen readers announce in place of an item's role, set as
+     * `aria-roledescription`. Translate it with the rest of your text, or empty
+     * it to leave the role as `group`.
+     */
+    slideRoleLabel: string;
     /**
      * The status text that says which item is shown, with `{index}`, `{count}`
      * and the item's `{label}` filled in.
@@ -82,6 +131,7 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
     private filled;
     /** What the live region is currently saying. */
     private announcement;
+    protected readonly swipes: SwipeController;
     private readonly fullscreen;
     private readonly idle;
     /**
@@ -176,6 +226,8 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
      * every set whose current item has just been removed.
      */
     private mark;
+    /** Whether a step that way would show nothing new, at the end of a set that does not loop. */
+    private atEnd;
     /**
      * Says where the reader is, once the reader has moved.
      *
@@ -185,6 +237,14 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
      */
     private say;
     protected render(): TemplateResult;
+    /**
+     * The viewer's own controls, behind a seam a tier above can move.
+     *
+     * After the item in the order, so `Tab` from the viewer reaches the picture's
+     * content first. `aria-disabled` at the ends, and never `disabled`, so a
+     * control that has just shown the last picture keeps focus.
+     */
+    protected renderControls(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -4,20 +4,41 @@ 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, keyClaimed, lockScroll, MixinControllerActive, MixinControllerOpen, resolveActiveItem, unlockScroll, } from '@fusion.dev/helix-core';
+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 { 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';
 let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerActive(MixinControllerOpen(HelixElement)) {
     constructor() {
         super(...arguments);
+        this.controls = false;
+        this.dismissLabel = 'Close';
         this.idleDelay = 0;
         this.label = '';
         this.loop = false;
+        this.nextLabel = 'Next';
+        this.previousLabel = 'Previous';
+        this.slideLabel = '{index} of {count}';
+        this.slideRoleLabel = 'slide';
         this.statusLabel = '{index} of {count}';
         this.resting = false;
         this.filled = false;
         this.announcement = '';
+        this.swipes = new SwipeController(this, {
+            axis: () => (this.open ? 'x' : undefined),
+            end: (dx, _dy, vx) => {
+                const width = this.partNamed('viewport')?.getBoundingClientRect().width ?? 0;
+                const step = swipeStep(dx, vx, width, isRtl(this));
+                if (step !== 0) {
+                    this.step(step);
+                }
+            },
+            move: () => this.idle.stir(),
+            start: (_target, event) => event.pointerType !== 'mouse',
+            surface: () => this.dialog,
+        });
         this.fullscreen = new FullscreenController(this, (full) => {
             this.filled = full;
         });
@@ -84,7 +105,9 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
     }
     chromeHasFocus() {
         const active = deepActiveElement();
-        return this.knownChildren.some((child) => (child.slot === 'header' || child.slot === 'footer') && deepContains(child, active));
+        const own = this.shadowRoot?.activeElement?.matches('[part="previous"], [part="next"], [part="dismiss"]');
+        return (own === true ||
+            this.knownChildren.some((child) => (child.slot === 'header' || child.slot === 'footer') && deepContains(child, active)));
     }
     get items() {
         return this.knownChildren.filter((child) => child instanceof HelixHeadlessLightboxItem);
@@ -169,9 +192,23 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
     mark() {
         const items = this.items;
         const current = resolveActiveItem(this.active, items);
-        for (const item of items) {
+        items.forEach((item, at) => {
             item.current = item === current;
-        }
+            whenHydrated(item, () => {
+                item.position = fillTemplate(this.slideLabel, {
+                    count: items.length,
+                    index: at + 1,
+                    label: item.label,
+                });
+                item.roleLabel = this.slideRoleLabel;
+            });
+        });
+    }
+    atEnd(by) {
+        const items = this.items;
+        const shown = this.shown;
+        const at = shown ? items.indexOf(shown) : 0;
+        return !this.loop && (items.length === 0 || (by === 1 ? at >= items.length - 1 : at <= 0));
     }
     say(changed) {
         if (!changed.has('active') && !changed.has('open')) {
@@ -212,10 +249,51 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         <slot></slot>
       </div>
       <slot name="footer"></slot>
+      ${this.controls ? this.renderControls() : nothing}
       <span part="live" role="status" aria-live="polite">${this.announcement || nothing}</span>
     </dialog>`;
     }
+    renderControls() {
+        return html `<button
+        part="previous"
+        type="button"
+        aria-label=${this.previousLabel}
+        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>
+      </button>
+      <button
+        part="next"
+        type="button"
+        aria-label=${this.nextLabel}
+        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>
+      </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>`;
+    }
 };
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessLightbox.prototype, "controls", void 0);
+__decorate([
+    property({ attribute: 'dismiss-label' })
+], HelixHeadlessLightbox.prototype, "dismissLabel", void 0);
 __decorate([
     property({ attribute: 'idle-delay', type: Number })
 ], HelixHeadlessLightbox.prototype, "idleDelay", void 0);
@@ -225,6 +303,18 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessLightbox.prototype, "loop", void 0);
+__decorate([
+    property({ attribute: 'next-label' })
+], HelixHeadlessLightbox.prototype, "nextLabel", void 0);
+__decorate([
+    property({ attribute: 'previous-label' })
+], HelixHeadlessLightbox.prototype, "previousLabel", void 0);
+__decorate([
+    property({ attribute: 'slide-label' })
+], HelixHeadlessLightbox.prototype, "slideLabel", void 0);
+__decorate([
+    property({ attribute: 'slide-role-label' })
+], HelixHeadlessLightbox.prototype, "slideRoleLabel", void 0);
 __decorate([
     property({ attribute: 'status-label' })
 ], HelixHeadlessLightbox.prototype, "statusLabel", void 0);

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

@@ -23,10 +23,16 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * `<svg>` that fills its box scales with the box, so the same `font-size` can
  * render at 10px in a narrow chart and 43px in a wide one.
  *
- * The table is the accessible representation, and the drawing is `aria-hidden`.
- * Screen reader users get the numbers. The `summary` part names the chart, from
+ * The table is the accessible representation, and the drawing is hidden from
+ * screen readers, who get the numbers. The `summary` part names the chart, from
  * `label` or the table's caption, and gives each series' latest reading.
  *
+ * **The plot is read by key.** It takes focus, named by `label` or the caption.
+ * The left and right arrows move from reading to reading, Home and End go to
+ * the first and the last, and the up and down arrows move among the series of
+ * a reading. The tooltip follows, the `live` part says the reading in words,
+ * and Escape puts the tooltip away.
+ *
  * @since 0.1.0
  * @status stable
  * @category charts
@@ -41,8 +47,9 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * @csspart label - One reading's name.
  * @csspart labels - The row of reading names.
  * @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 plot - The drawing.
+ * @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.
  * @csspart terminus - The mark on one series' last reading.
@@ -55,6 +62,7 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * @csspart tooltip-arrow-top - The point while the bubble is above the reading, so on its bottom edge, beside `tooltip-arrow`.
  * @csspart tooltip-bottom - The bubble while it is below the reading, beside `tooltip`.
  * @csspart tooltip-cell - One column's name and value inside the tooltip.
+ * @csspart tooltip-cell-current - The cell the up and down arrows rest on, while they rest there. Set alongside `tooltip-cell`.
  * @csspart tooltip-label - The reading's own name inside the tooltip.
  * @csspart tooltip-left - The bubble while it is left of the reading, beside `tooltip`.
  * @csspart tooltip-name - A column's name inside the tooltip.

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

@@ -21,13 +21,18 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         return this.gridlines === 'both' || this.gridlines === 'category';
     }
     range(series) {
-        const values = series.flatMap((one) => one.points.map((point) => point.value));
+        const values = series
+            .filter((one) => this.showsSeries(one.name))
+            .flatMap((one) => one.points.map((point) => point.value));
         const [low, high] = extent(values.length > 0 ? values : [0]);
         return this.zero ? [Math.min(0, low), Math.max(0, high)] : [low, high];
     }
     ends(series, x, y) {
         return series.flatMap((one, depth) => {
             const last = one.points.at(-1);
+            if (!this.showsSeries(one.name)) {
+                return [];
+            }
             if (!last || one.points.length < 2) {
                 return [];
             }
@@ -68,7 +73,7 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
             ? `${latest[0]?.label ?? ''}: ${latest.map((one) => one.reading).join(', ')}`
             : latest.map((one) => `${one.label}: ${one.reading}`).join('; ');
         const named = this.named ? `${this.named}, ` : '';
-        return html `<p part="summary">${named}${body}.</p>`;
+        return html `<p id="helix-chart-summary" part="summary">${named}${body}.</p>`;
     }
     renderPlot(series, x, y, domain) {
         const floor = domain[0] <= 0 && domain[1] >= 0 ? y(0) : undefined;
@@ -79,12 +84,17 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
                 .join(', ')
             : undefined;
         return html `<div
-      aria-hidden="true"
+      aria-describedby=${this.named ? 'helix-chart-summary' : nothing}
+      aria-label=${this.named || nothing}
+      aria-labelledby=${this.named ? nothing : 'helix-chart-summary'}
       id=${CHART_PLOT}
       part="plot"
+      role="application"
+      tabindex="0"
       style=${holes ? `--_line-chart-holes: ${holes}` : nothing}
     >
       <svg part="svg"
+        aria-hidden="true"
         data-mirror
         preserveAspectRatio="none"
         viewBox="0 0 ${PLOT_WIDTH} ${PLOT_HEIGHT}"
@@ -140,6 +150,9 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         ></span>`)}`;
     }
     renderSeries(one, depth, x, y) {
+        if (!this.showsSeries(one.name)) {
+            return html `${nothing}`;
+        }
         const runs = unbroken(one)
             .map((run) => {
             const points = run.map((point) => [x(point.at), y(point.value)]);
@@ -182,11 +195,12 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         const at = this.pointer.at;
         const series = this.series;
         if (at < 0 || series.length === 0) {
-            return drawTooltip(this.sourceRows, at, this.tag('tooltip'));
+            return drawTooltip(this.sourceRows, at, this.tag('tooltip'), undefined, undefined, this.pointer);
         }
         const domain = this.range(series);
         const scale = linear(domain, [PLOT_HEIGHT, 0]);
         const tops = series
+            .filter((one) => this.showsSeries(one.name))
             .map((one) => byRow(one, this.readings)[at]?.value)
             .filter((one) => one !== undefined)
             .map((one) => scale(one));
@@ -195,7 +209,7 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
             placement: 'top',
             x: `${at * slot + slot / 2}%`,
             y: `${tops.length > 0 ? Math.min(...tops) : 0}%`,
-        }, (cell) => this.seriesOf(cell));
+        }, (cell) => this.seriesOf(cell), this.pointer);
     }
 };
 __decorate([

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,39 @@ 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 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.