@fusion.dev/helix-headless 0.142.1 → 0.144.0

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,9 +18,21 @@ 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 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,10 +49,16 @@ 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 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.
@@ -48,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.
@@ -66,8 +98,27 @@ 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 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.
      *
      * 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
@@ -80,8 +131,17 @@ 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;
+    /**
+     * 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 +216,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.
@@ -165,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.
      *
@@ -174,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,25 +4,46 @@ 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, FullscreenController, fillTemplate, HelixElement, hostAria, IdleController, inlineStep, keyClaimed, MixinControllerActive, MixinControllerOpen, resolveActiveItem, } 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;
         });
         this.idle = new IdleController(this, () => this.idleDelay, (resting) => {
-            this.resting = resting;
+            this.resting = resting && !this.chromeHasFocus();
         });
         this.commands = new CommandController(this, {
             commands: {
@@ -45,6 +66,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             this.relayNativeEvent(event);
         };
         this.handleKeydown = (event) => {
+            this.idle.stir();
             if (keyClaimed(event) || event.altKey || event.ctrlKey || event.metaKey) {
                 return;
             }
@@ -81,6 +103,12 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             this.requestOpen(false);
         };
     }
+    chromeHasFocus() {
+        const active = deepActiveElement();
+        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);
     }
@@ -135,9 +163,19 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         this.toggleState('idle', this.resting);
         this.say(changed);
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        unlockScroll(this);
+    }
     updated(changed) {
         super.updated(changed);
         this.mark();
+        if (this.open) {
+            lockScroll(this);
+        }
+        else {
+            unlockScroll(this);
+        }
         const dialog = this.dialog;
         if (!dialog) {
             return;
@@ -154,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')) {
@@ -170,7 +222,13 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         const current = resolveActiveItem(this.active, items);
         const at = current ? items.indexOf(current) : -1;
         this.announcement =
-            at === -1 ? '' : fillTemplate(this.statusLabel, { count: items.length, index: at + 1 });
+            at === -1 || !current
+                ? ''
+                : fillTemplate(this.statusLabel, {
+                    count: items.length,
+                    index: at + 1,
+                    label: current.label,
+                });
     }
     render() {
         return html `<dialog
@@ -191,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);
@@ -204,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,8 +23,15 @@ 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 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
@@ -40,8 +47,10 @@ 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.
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
@@ -53,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.
@@ -183,6 +193,16 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
      */
     private ends;
     protected render(): TemplateResult;
+    /**
+     * What a reader who cannot see the lines is told: the chart's name and the
+     * latest reading of each series.
+     *
+     * 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`.
+     */
+    protected renderSummary(series: Series[]): TemplateResult;
     /**
      * The lines themselves, behind a seam the styled tier can move.
      *
@@ -235,7 +255,12 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
         x: number;
         y: number;
     }>): TemplateResult | typeof nothing;
-    /** One series, its wash first so the line is drawn over its own fill. */
+    /**
+     * One series, its wash first so the line is drawn over its own fill.
+     *
+     * Each reading sits at its own row, and the line breaks where a row has no
+     * reading: a line drawn across a blank claims a value nobody measured.
+     */
     protected renderSeries(one: Series, depth: number, x: (value: number) => number, y: (value: number) => number): TemplateResult;
     /**
      * The reading names, as HTML beside the drawing rather than inside it.

package/dist/line-chart/root/line-chart-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 { CHART_PLOT, customElement, drawTooltip, extent, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, ticks, } from '@fusion.dev/helix-core';
+import { byRow, CHART_PLOT, customElement, drawTooltip, extent, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, ticks, unbroken, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -21,20 +21,25 @@ 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 [];
             }
             return [
                 {
                     index: seriesIndex(depth),
-                    x: (x(one.points.length - 1) / PLOT_WIDTH) * 100,
+                    x: (x(last.at) / PLOT_WIDTH) * 100,
                     y: (y(last.value) / PLOT_HEIGHT) * 100,
                 },
             ];
@@ -42,7 +47,7 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
     }
     render() {
         const series = this.series;
-        const readings = series[0]?.points.map((point) => point.label) ?? [];
+        const readings = series.length === 0 ? [] : this.sourceRows.map((row) => row.label);
         if (readings.length === 0) {
             return html `<div id=${CHART_PLOT} part="plot"></div>`;
         }
@@ -50,7 +55,25 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         const y = linear(domain, [PLOT_HEIGHT, 0]);
         const slot = PLOT_WIDTH / readings.length;
         const x = linear([0, Math.max(readings.length - 1, 1)], [slot / 2, PLOT_WIDTH - slot / 2]);
-        return html `${this.renderPlot(series, x, y, domain)} ${this.renderLabels(readings)}`;
+        return html `${this.renderPlot(series, x, y, domain)} ${this.renderLabels(readings)}${this.renderSummary(series)}`;
+    }
+    renderSummary(series) {
+        const rows = this.sourceRows;
+        const columns = this.plottedColumns;
+        const latest = series.flatMap((one, depth) => {
+            const last = one.points.at(-1);
+            if (last === undefined) {
+                return [];
+            }
+            const text = rows[last.at]?.cells[columns[depth] ?? -1]?.text ?? String(last.value);
+            return [{ label: last.label, reading: `${one.name} ${text}` }];
+        });
+        const shared = latest.every((one) => one.label === latest[0]?.label);
+        const body = shared
+            ? `${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 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;
@@ -61,22 +84,27 @@ 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}"
         xmlns="http://www.w3.org/2000/svg"
       >
-        ${this.renderGridlines(x, y, domain, series[0]?.points.length ?? 0)}
+        ${this.renderGridlines(x, y, domain, this.readings)}
         ${floor === undefined
             ? nothing
             : svg `<line part="baseline" x1="0" x2=${PLOT_WIDTH} y1=${floor} y2=${floor} />`}
-        ${this.renderBand(series[0]?.points.length ?? 0)}
+        ${this.renderBand(this.readings)}
         ${this.renderGuide(x)}
         ${series.map((one, depth) => this.renderSeries(one, depth, x, y))}
       </svg>
@@ -122,15 +150,27 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         ></span>`)}`;
     }
     renderSeries(one, depth, x, y) {
-        const points = one.points.map((point, index) => [x(index), y(point.value)]);
-        const path = linePath(points, this.curve ?? 'smooth');
-        if (path === '') {
+        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)]);
+            return { path: linePath(points, this.curve ?? 'smooth'), points };
+        })
+            .filter((run) => run.path !== '');
+        if (runs.length === 0) {
             return html `${nothing}`;
         }
         const index = seriesIndex(depth);
-        const first = points[0];
-        const last = points.at(-1);
-        const wash = `${path}L${last[0]},${PLOT_HEIGHT}L${first[0]},${PLOT_HEIGHT}Z`;
+        const path = runs.map((run) => run.path).join('');
+        const wash = runs
+            .map((run) => {
+            const first = run.points[0];
+            const last = run.points.at(-1);
+            return `${run.path}L${last[0]},${PLOT_HEIGHT}L${first[0]},${PLOT_HEIGHT}Z`;
+        })
+            .join('');
         return svg `${this.area
             ? svg `<path
             d=${wash}
@@ -155,12 +195,13 @@ 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
-            .map((one) => one.points[at]?.value)
+            .filter((one) => this.showsSeries(one.name))
+            .map((one) => byRow(one, this.readings)[at]?.value)
             .filter((one) => one !== undefined)
             .map((one) => scale(one));
         const slot = 100 / this.readings;
@@ -168,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

@@ -6,11 +6,16 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @description
  * Provides layout and semantics. The row is a target only when you set `href`.
  *
- * **`href` makes the whole row a link.** The component wraps its own layout in
- * an `<a part="row">`, as `Tree.Item` does. An anchor of your own cannot wrap
- * slots it does not own. With the anchor, the whole row is a target, Enter
- * follows it, middle click opens a new tab, the status bar shows the
- * destination, and all of it works before JavaScript runs.
+ * **`href` makes the row a link.** The component wraps the leading content,
+ * the label, and the description in an `<a part="link">` inside the row, as
+ * `Tree.Item` does. An anchor of your own cannot wrap slots it does not own.
+ * With the anchor, the row is a target, Enter follows it, middle click opens a
+ * new tab, the status bar shows the destination, and all of it works before
+ * JavaScript runs.
+ *
+ * **The `end` slot sits beside the link, outside it**, so a button or a menu
+ * there is a control of its own: a click on it does not follow the link, and
+ * its name is not part of the link's.
  *
  * Client-side routing needs your own handling. A router cannot render its
  * anchor inside the shadow root, so to navigate without a page load, intercept
@@ -30,6 +35,7 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @slot end - Trailing content.
  * @slot start - Leading content, usually an icon or an avatar.
  *
+ * @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.
  */
 export declare class HelixHeadlessListItem extends HelixElement {

package/dist/list/item/list-item.js

@@ -24,17 +24,16 @@ let HelixHeadlessListItem = class HelixHeadlessListItem extends HelixElement {
     render() {
         const content = html `${this.renderRail()}<slot name="start"></slot>
       <slot></slot>
-      <slot name="description"></slot>
-      <slot name="end"></slot>`;
+      <slot name="description"></slot>`;
         return this.href === ''
-            ? html `<div part="row">${content}</div>`
-            : html `<a
-          part="row"
+            ? html `<div part="row">${content}<slot name="end"></slot></div>`
+            : html `<div part="row"><a
+          part="link"
           href=${this.href}
           target=${this.target || nothing}
           rel=${this.rel || nothing}
           >${content}</a
-        >`;
+        ><slot name="end"></slot></div>`;
     }
 };
 __decorate([