@fusion.dev/helix-headless 0.145.0 → 0.147.0

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

@@ -4,31 +4,44 @@ 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, DelayController, 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, minus, plus } 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 { percentOf } from '../zoom.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}';
         this.slideRoleLabel = 'slide';
         this.statusLabel = '{index} of {count}';
+        this.zoomInLabel = 'Zoom in';
+        this.zoomOutLabel = 'Zoom out';
+        this.zoomStatusLabel = 'Zoomed to {percent}%';
         this.resting = false;
         this.filled = false;
         this.announcement = '';
+        this.zoomScale = 1;
+        this.zoomSaid = new DelayController(this, { renders: false });
+        this.quietZoom = false;
         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 +52,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 +88,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,9 +125,34 @@ 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();
+        if (scale !== this.zoomScale) {
+            this.zoomScale = scale;
+            this.sayZoom();
+        }
+    }
+    sayZoom() {
+        if (this.quietZoom || !this.open || this.zoomStatusLabel === '') {
+            this.zoomSaid.cancel();
+            return;
+        }
+        this.zoomSaid.start(400, () => {
+            this.announcement = fillTemplate(this.zoomStatusLabel, { percent: percentOf(this.zoomScale) });
+        });
+    }
+    zoomTo(scale) {
+        this.zoomer.zoomTo(scale);
+    }
     chromeHasFocus() {
         const active = deepActiveElement();
-        const own = this.shadowRoot?.activeElement?.matches('[part="previous"], [part="next"], [part="dismiss"]');
+        const own = this.shadowRoot?.activeElement?.matches('[part="previous"], [part="next"], [part="dismiss"], [part="zoom-in"], [part="zoom-out"]');
         return (own === true ||
             this.knownChildren.some((child) => (child.slot === 'header' || child.slot === 'footer') && deepContains(child, active)));
     }
@@ -147,6 +194,30 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             this.requestActive(target.value);
         }
     }
+    zoomKey(key) {
+        if (this.maxZoom <= 1) {
+            return false;
+        }
+        if (key === '+' || key === '=') {
+            this.zoomIn();
+        }
+        else if (key === '-') {
+            this.zoomOut();
+        }
+        else if (key === '0') {
+            this.zoomer.reset();
+        }
+        else {
+            return false;
+        }
+        return true;
+    }
+    zoomIn() {
+        this.zoomer.zoomTo(this.zoomer.scale * 1.5);
+    }
+    zoomOut() {
+        this.zoomer.zoomTo(this.zoomer.scale / 1.5);
+    }
     toEnd(at) {
         const target = this.items[at];
         if (target && target !== this.shown) {
@@ -161,6 +232,12 @@ 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.quietZoom = true;
+            this.zoomer.reset();
+            this.quietZoom = false;
+        }
         this.say(changed);
     }
     disconnectedCallback() {
@@ -230,6 +307,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"
@@ -244,12 +332,13 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
       @pointerleave=${this.idle.leave}
       @pointermove=${this.idle.stir}
     >
-      <slot name="header"></slot>
+      <slot name="header" part="header"></slot>
       <div part="viewport">
         <slot></slot>
       </div>
-      <slot name="footer"></slot>
+      <slot name="footer" part="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 +350,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 +363,54 @@ 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>
+      ${this.maxZoom > 1 ? this.renderZoomControls() : nothing}
+      ${drawDismiss({
+            label: this.dismissLabel,
+            mark: html `<slot name="dismiss-icon">${drawDismissGlyph()}</slot>`,
+            onDismiss: () => this.close(),
+        })}`;
+    }
+    renderZoomControls() {
+        return html `<button
+        part="zoom-out"
+        type="button"
+        aria-label=${this.zoomOutLabel}
+        aria-disabled=${this.zoomScale <= 1 ? 'true' : nothing}
+        @click=${() => this.zoomOut()}
+      >
+        <slot name="zoom-out-icon">
+          <svg part="zoom-out-mark" fill="currentColor" viewBox=${minus.viewBox} aria-hidden="true">
+            ${unsafeSVG(minus.content)}
+          </svg>
+        </slot>
       </button>
       <button
-        part="dismiss"
+        part="zoom-in"
         type="button"
-        aria-label=${this.dismissLabel}
-        @click=${() => this.close()}
+        aria-label=${this.zoomInLabel}
+        aria-disabled=${this.zoomScale >= this.maxZoom ? 'true' : nothing}
+        @click=${() => this.zoomIn()}
       >
-        <svg part="dismiss-mark" fill="currentColor" viewBox=${x.viewBox} aria-hidden="true">
-          ${unsafeSVG(x.content)}
-        </svg>
+        <slot name="zoom-in-icon">
+          <svg part="zoom-in-mark" fill="currentColor" viewBox=${plus.viewBox} aria-hidden="true">
+            ${unsafeSVG(plus.content)}
+          </svg>
+        </slot>
       </button>`;
     }
 };
 __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 +423,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);
@@ -318,6 +441,15 @@ __decorate([
 __decorate([
     property({ attribute: 'status-label' })
 ], HelixHeadlessLightbox.prototype, "statusLabel", void 0);
+__decorate([
+    property({ attribute: 'zoom-in-label' })
+], HelixHeadlessLightbox.prototype, "zoomInLabel", void 0);
+__decorate([
+    property({ attribute: 'zoom-out-label' })
+], HelixHeadlessLightbox.prototype, "zoomOutLabel", void 0);
+__decorate([
+    property({ attribute: 'zoom-status-label' })
+], HelixHeadlessLightbox.prototype, "zoomStatusLabel", void 0);
 __decorate([
     state()
 ], HelixHeadlessLightbox.prototype, "resting", void 0);
@@ -327,6 +459,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessLightbox.prototype, "announcement", void 0);
+__decorate([
+    state()
+], HelixHeadlessLightbox.prototype, "zoomScale", void 0);
 HelixHeadlessLightbox = __decorate([
     customElement('helix-headless-lightbox')
 ], HelixHeadlessLightbox);

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,24 @@
+/** 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;
+/** A scale as a whole percent, which is how a reader hears it: 1.5 is 150. */
+export declare const percentOf: (scale: number) => number;

package/dist/lightbox/zoom.js

@@ -0,0 +1,18 @@
+import { clamp } from '@fusion.dev/helix-core';
+const held = (value, low, high) => clamp(value, low, high) || 0;
+export const clampScale = (scale, max) => held(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: held(pan.x, -x, x), y: held(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,
+});
+export const percentOf = (scale) => Math.round(scale * 100);

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

@@ -15,6 +15,10 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  *
  * Every series shares one scale, as in the bar chart.
  *
+ * `dashed` names the series drawn as a dashed line, such as a forecast or a
+ * target beside the readings: `dashed="Forecast"`. Each takes a
+ * `line-dashed` part beside `line`.
+ *
  * `area` fills each series down to the floor on its own, so the fills overlap.
  * For a total made of parts, use `Area Chart`, which stacks the series so the
  * top edge is the total and each band is a share.
@@ -47,8 +51,11 @@ 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 line-dashed - A `line` whose series `dashed` names. Set alongside `line`.
  * @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.
@@ -110,6 +117,15 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
      * here, which is what lets a line take the reading aid.
      */
     curve?: Curve;
+    /**
+     * The series drawn as a dashed line, by their headings, separated by
+     * commas: `dashed="Forecast, Target"`.
+     *
+     * For a series that is not a reading, such as a forecast or a goal, drawn
+     * beside the ones that are. Each takes a `line-dashed` part beside `line`,
+     * which a stylesheet draws dashed. Absent, every line is solid.
+     */
+    dashed: string;
     /**
      * Which rules are drawn across the plot, if any.
      *
@@ -138,6 +154,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 +225,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 +281,17 @@ 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;
+    /** Whether `dashed` names this series, matched as a heading is. */
+    private dashes;
     /**
      * One series, its wash first so the line is drawn over its own fill.
      *