@fusion.dev/helix-headless 0.144.0 → 0.146.0

package/dist/scroll-area/scrollbar.d.ts

@@ -0,0 +1,92 @@
+/**
+ * The arithmetic behind the scrollbars a scroll area draws under `scrollbars`.
+ *
+ * Every length here is along one axis and counted from that axis' start, which
+ * is the right-hand edge on a right-to-left page for the horizontal one. The
+ * component turns a pointer and a `scrollLeft` into those counts, so nothing
+ * below has to know which way the line runs.
+ */
+/** Which scrollbars are drawn, and when. Absent keeps the browser's own. */
+export type Scrollbars = 'always' | 'auto' | 'hover' | 'scroll';
+/** The two axes a scrollbar runs along. */
+export type Axis = 'horizontal' | 'vertical';
+/** The box a scrollbar reads, as the numbers it reads off it. */
+export interface Box {
+    clientHeight: number;
+    clientWidth: number;
+    scrollHeight: number;
+    scrollLeft: number;
+    scrollTop: number;
+    scrollWidth: number;
+}
+/** One axis of the viewport, read off the box. */
+export interface Extent {
+    /** How much of the content the viewport shows, `clientHeight` or `clientWidth`. */
+    client: number;
+    /** How far from its start the axis is scrolled, never negative. */
+    offset: number;
+    /** The whole length of the content, `scrollHeight` or `scrollWidth`. */
+    scroll: number;
+}
+/**
+ * The share of the track the thumb covers, from 0 to 1: how much of the content
+ * is in view. A box with no content, or one that shows all of it, is 1.
+ */
+export declare const thumbFraction: ({ client, scroll }: Extent) => number;
+/**
+ * How far along the axis is scrolled, from 0 at the start to 1 at the end. An
+ * axis with nothing to scroll is 0.
+ */
+export declare const scrollFraction: ({ client, offset, scroll }: Extent) => number;
+/**
+ * How far the content moves for each pixel the thumb is dragged.
+ *
+ * The thumb travels the track less its own length, and the content travels
+ * its length less the view, so the ratio of the two is the gearing. Zero where
+ * the thumb fills the track and cannot move.
+ */
+export declare const scrollPerPixel: (extent: Extent, track: number, thumb: number) => number;
+/**
+ * The offset that puts the middle of the thumb under a press on the track.
+ *
+ * `along` is where the press landed, counted from the track's start. The thumb
+ * stops at either end of the track, so a press near an end scrolls to that end.
+ */
+export declare const offsetAt: (extent: Extent, along: number, track: number, thumb: number) => number;
+/**
+ * Whether an axis has a scrollbar at all: it can scroll, and under every value
+ * but `always` it has something to scroll.
+ *
+ * An axis whose `overflow` is `hidden` or `clip` cannot be scrolled by a reader,
+ * so it gets no scrollbar whatever `scrollbars` says. That is how a consumer
+ * keeps a horizontal bar off a list that only scrolls down.
+ */
+export declare const hasScrollbar: (mode: Scrollbars, scrollable: boolean, overflows: boolean) => boolean;
+/**
+ * Whether a scrollbar that exists is showing at this moment.
+ *
+ * `auto` and `always` show it the whole time. `scroll` shows it while the
+ * content is moving and for the hide delay after, and while the pointer holds
+ * it. `hover` adds the time the pointer is over the scroll area.
+ */
+export declare const showsScrollbar: (mode: Scrollbars, moment: {
+    active: boolean;
+    held: boolean;
+    hovered: boolean;
+}) => boolean;
+/**
+ * One axis of a box, counted from its start whichever way the line runs: a
+ * right-to-left box counts `scrollLeft` down from zero, so its offset is the
+ * distance from zero.
+ */
+export declare const extentOf: (box: Box, axis: Axis) => Extent;
+/**
+ * Where a pointer is along a track, counted from the track's start: its top,
+ * or its left edge, or its right edge on a right-to-left page.
+ */
+export declare const alongTrack: (pointer: number, track: {
+    bottom: number;
+    left: number;
+    right: number;
+    top: number;
+}, axis: Axis, rtl: boolean) => number;

package/dist/scroll-area/scrollbar.js

@@ -0,0 +1,33 @@
+const clamp = (value, low, high) => Math.min(Math.max(value, low), high);
+export const thumbFraction = ({ client, scroll }) => scroll <= 0 ? 1 : clamp(client / scroll, 0, 1);
+export const scrollFraction = ({ client, offset, scroll }) => {
+    const room = scroll - client;
+    return room <= 0 ? 0 : clamp(offset / room, 0, 1);
+};
+export const scrollPerPixel = (extent, track, thumb) => {
+    const run = track - thumb;
+    return run <= 0 ? 0 : Math.max(0, extent.scroll - extent.client) / run;
+};
+export const offsetAt = (extent, along, track, thumb) => {
+    const run = track - thumb;
+    if (run <= 0) {
+        return 0;
+    }
+    return clamp((along - thumb / 2) / run, 0, 1) * Math.max(0, extent.scroll - extent.client);
+};
+export const hasScrollbar = (mode, scrollable, overflows) => scrollable && (mode === 'always' || overflows);
+export const showsScrollbar = (mode, moment) => {
+    if (mode === 'auto' || mode === 'always') {
+        return true;
+    }
+    return moment.active || moment.held || (mode === 'hover' && moment.hovered);
+};
+export const extentOf = (box, axis) => axis === 'vertical'
+    ? { client: box.clientHeight, offset: box.scrollTop, scroll: box.scrollHeight }
+    : { client: box.clientWidth, offset: Math.abs(box.scrollLeft), scroll: box.scrollWidth };
+export const alongTrack = (pointer, track, axis, rtl) => {
+    if (axis === 'vertical') {
+        return pointer - track.top;
+    }
+    return rtl ? track.right - pointer : pointer - track.left;
+};

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

@@ -48,6 +48,7 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * @event {HelixBeforeCloseEvent} helix-before-close - Fired before the list closes. Cancelable: canceling it keeps the list open and leaves the decision to you.
  * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the list opens. Cancelable: canceling it keeps the list closed and leaves the decision to you.
  * @event {HelixFilterEvent} helix-filter - Fired as the user types in the filter field of a `filterable` select, with the text the list is filtered by. Cancelable: cancel it to leave the list unfiltered and filter the options yourself.
+ * @event {HelixLoadMoreEvent} helix-load-more - Fired once the list is scrolled within a screen of its end, once for each number of options, and not while `loading` is set. Add the next page and set `loading` while you fetch it.
  * @event {Event} input - Fired after the value changes.
  * @event {ToggleEvent} toggle - Fired after the list opens or closes, with `newState` and `oldState`.
  *
@@ -57,6 +58,7 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * @csspart label - The label above the trigger.
  * @csspart listbox - The list inside the panel.
  * @csspart listbox-empty - The text shown when the filter hides every option.
+ * @csspart listbox-error - The inner list's `error` part, shown while its `load-error` is set.
  * @csspart listbox-feedback - The inner list's message that says what is wrong with the value.
  * @csspart listbox-filter-icon - The icon beside the filter field.
  * @csspart listbox-filter-mark - The default icon beside the filter field, shown when none is slotted.
@@ -276,6 +278,19 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * cannot change.
      */
     protected renderIndicator(): TemplateResult;
+    /**
+     * What names the list once it opens: the `label`, the host's `aria-label`,
+     * or the words of what names the host from outside, its `aria-labelledby`
+     * or a `<label>` for it.
+     *
+     * **Words rather than a reference**, because the list is inside another
+     * element's shadow root and neither an IDREF nor the host's labels reach it.
+     * Read as the list renders, which opening it makes happen, so a label
+     * changed while the list is closed is read when it next opens. Without the
+     * last two routes a Select named by a `<label for>` opened onto a listbox
+     * with no name, which the missing-name warning reported.
+     */
+    private get listName();
     /**
      * What names the trigger: the label, then the choice.
      *

package/dist/select/root/select-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, afterLinkFollowed, customElement, HelixFormElement, hostAria, MixinControllerOpen, MixinControllerValue, MixinField, PopoverController, reportValues, typesCharacter, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, customElement, elementById, HelixFormElement, hostAria, MixinControllerOpen, MixinControllerValue, MixinField, PopoverController, reportValues, typesCharacter, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -214,15 +214,15 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
       loading-text=${this.loadingText}
       ?loading=${this.loading}
       part="listbox"
-      exportparts="empty: listbox-empty, feedback: listbox-feedback, filter-icon: listbox-filter-icon,
-        filter-mark: listbox-filter-mark, hint: listbox-hint, items: listbox-items,
-        label: listbox-label, live: listbox-live, loading: listbox-loading, search: listbox-search,
-        search-field: listbox-search-field"
+      exportparts="empty: listbox-empty, error: listbox-error, feedback: listbox-feedback,
+        filter-icon: listbox-filter-icon, filter-mark: listbox-filter-mark, hint: listbox-hint,
+        items: listbox-items, label: listbox-label, live: listbox-live, loading: listbox-loading,
+        search: listbox-search, search-field: listbox-search-field"
       .value=${this.value}
       ?multiple=${this.multiple}
       ?filterable=${this.filterable}
       manual
-      aria-label=${this.label || nothing}
+      aria-label=${this.listName || nothing}
       @keydown=${this.handleListKeydown}
       @helix-before-change=${this.handleChange}
       @change=${this.stopInner}
@@ -240,6 +240,18 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
       </svg>
     </slot>`;
     }
+    get listName() {
+        const own = this.label || this.getAttribute('aria-label');
+        if (own) {
+            return own;
+        }
+        const ids = (this.getAttribute('aria-labelledby') ?? '').split(/\s+/).filter(Boolean);
+        const named = ids.length > 0 ? ids.map((id) => elementById(this, id)) : [...(this.labels ?? [])];
+        return named
+            .map((one) => (one?.textContent ?? '').replace(/\s+/g, ' ').trim())
+            .filter(Boolean)
+            .join(' ');
+    }
     get triggerNames() {
         const outside = (this.internals.labels?.length ?? 0) > 0 && !this.labeled;
         if (this.hasAttribute('aria-labelledby') || outside) {

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

@@ -31,7 +31,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot - The content the skeleton stands in for, which sizes it. Optional.
  *
  * @csspart content - The box around the content, inert while `loading`.
+ * @csspart sheen - The highlight inside the shape, which the styled tier sweeps across it. Empty, and drawn by no rule on this tier.
  * @csspart skeleton - The placeholder shape.
+ *
+ * @cssstate wrapping - The skeleton holds content, an element or words, and takes that content's size. Line breaks and spaces alone are not content.
  */
 export declare class HelixHeadlessSkeleton extends HelixElement {
     /**

package/dist/skeleton/root/skeleton-root.js

@@ -19,6 +19,8 @@ let HelixHeadlessSkeleton = class HelixHeadlessSkeleton extends HelixElement {
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        const wraps = this.wraps;
+        this.toggleState('wrapping', wraps);
         this.internals.ariaBusy = this.loading ? 'true' : null;
         if (this.label) {
             hostAria(this.internals, { label: this.label, role: 'progressbar' });
@@ -26,7 +28,7 @@ let HelixHeadlessSkeleton = class HelixHeadlessSkeleton extends HelixElement {
         }
         else {
             hostAria(this.internals, { label: '', role: '' });
-            this.internals.ariaHidden = this.wraps ? null : 'true';
+            this.internals.ariaHidden = wraps ? null : 'true';
         }
     }
     firstUpdated(changed) {
@@ -36,7 +38,7 @@ let HelixHeadlessSkeleton = class HelixHeadlessSkeleton extends HelixElement {
     render() {
         return html `<span part="content" ?inert=${this.loading}
         ><slot @slotchange=${() => this.requestUpdate()}></slot></span
-      ><span part="skeleton"></span>`;
+      ><span part="skeleton"><span part="sheen"></span></span>`;
     }
 };
 __decorate([

package/dist/skip-link/root/skip-link-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 { customElement, elementById, HelixElement, reportRuntime } from '@fusion.dev/helix-core';
+import { customElement, elementById, HelixElement, plainClick, reportRuntime, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessSkipLink = class HelixHeadlessSkipLink extends HelixElement {
@@ -13,7 +13,7 @@ let HelixHeadlessSkipLink = class HelixHeadlessSkipLink extends HelixElement {
         this.href = '#main';
         this.label = 'Skip to content';
         this.skip = (event) => {
-            if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+            if (!plainClick(event)) {
                 return;
             }
             const target = this.target;

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

@@ -20,7 +20,13 @@ declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion
  *
  * A range with two thumbs is two inputs stacked on one track, because there is
  * no native two-thumb range. Each thumb keeps its own value.
- * `min-steps-between-thumbs` keeps them that many steps apart.
+ * `min-steps-between-thumbs` keeps them that many steps apart, and the readout
+ * joins the two as `range-text` writes them.
+ *
+ * `origin` sets where a single thumb's fill starts: at `min`, at the middle of
+ * the track, or at `max`. A balance or an offset from zero fills from the
+ * middle, as Zag's slider `origin` does. The fill's ends are published as
+ * `--slider-from` and `--slider-to`.
  *
  * `format-options` writes the value with `Intl.NumberFormat` in `locale`, as a
  * currency, a percent or a unit, and `formatter` writes it with a function of
@@ -34,6 +40,20 @@ declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion
  * the first render. HTML does not apply `required` to a range either, so it is
  * not set on the input. It only adds the marker beside the label.
  *
+ * **Keyboard.** Each thumb is one tab stop, and its keys are the native
+ * range's.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Right, Up | Moves the thumb up by `step`. |
+ * | Left, Down | Moves the thumb down by `step`. |
+ * | Page Up, Page Down | Moves the thumb by a larger step. |
+ * | Home, End | Moves the thumb to its lowest or highest value. |
+ *
+ * Each thumb is an `<input type="range">` with `aria-valuetext` where the value
+ * is formatted or worded. A range's thumbs say they stop at each other with
+ * `aria-valuemin` and `aria-valuemax`.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -59,9 +79,9 @@ declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion
  * @csspart output - The current value, shown beside the track.
  *
  * @cssproperty --slider-fraction - The value as a fraction of the range, 0 to 1.
- * @cssproperty --slider-from - Where a range's filled span starts, as a fraction of the track, 0 to 1.
+ * @cssproperty --slider-from - Where the filled span starts, as a fraction of the track, 0 to 1: a range's lower thumb, or a single thumb's `origin`.
  * @cssproperty --slider-marker-at - Where one marker sits, as a percentage of the track.
- * @cssproperty --slider-to - Where a range's filled span ends, as a fraction of the track, 0 to 1.
+ * @cssproperty --slider-to - Where the filled span ends, as a fraction of the track, 0 to 1: a range's upper thumb, or the farther of a single thumb and its `origin`.
  *
  * @cssstate invalid - The slider has an error to show, from the browser's validation or from your `feedback`.
  */
@@ -148,6 +168,12 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
      * rather than a thumb sitting on nothing.
      */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * Where a single thumb's fill starts: `start` at `min`, `center` at the
+     * middle of the track, or `end` at `max`. Absent is `start`. A range fills
+     * between its thumbs and ignores it.
+     */
+    origin?: 'center' | 'end' | 'start';
     /**
      * Adds a second thumb, so the value is a pair.
      *
@@ -156,6 +182,11 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
      * the two, since a range has no single number.
      */
     range: boolean;
+    /**
+     * How the readout joins a range's two values, with `{start}` and `{end}`
+     * filled in. Write it in the page's language, such as `{start} bis {end}`.
+     */
+    rangeText: string;
     /**
      * Shows the chosen value beside the track.
      */
@@ -174,7 +205,8 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
      *
      * Widest rather than current, so the box never changes size at all. Measured
      * off the bounds because that is what the readout can ever say: the longer of
-     * the two ends, twice, plus the four of " to " when both are shown. Negative
+     * the two ends, twice, plus the words `range-text` puts between them when
+     * both are shown. Negative
      * bounds are covered by measuring the rendered string rather than the digits,
      * since the sign is a character like any other.
      *
@@ -238,6 +270,11 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
      * there is no order for this to be on the wrong side of.
      */
     private get fraction();
+    /**
+     * A single thumb's fill: `--slider-fraction`, and under `origin` the span
+     * from the origin to the thumb as `--slider-from` and `--slider-to`.
+     */
+    private get fillStyle();
     /**
      * A value snapped to the step, counted from `min` the way a range counts it.
      *

package/dist/slider/root/slider-root.js

@@ -23,6 +23,7 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         this.minimumLabel = 'minimum';
         this.minStepsBetweenThumbs = 0;
         this.range = false;
+        this.rangeText = '{start} to {end}';
         this.showValue = false;
         this.step = 1;
         this.handleInput = (event) => {
@@ -51,7 +52,9 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
     }
     get reserve() {
         const widest = Math.max(this.said(this.min).length, this.said(this.max).length);
-        return this.range ? widest * 2 + ' to '.length : widest;
+        return this.range
+            ? widest * 2 + fillTemplate(this.rangeText, { end: '', start: '' }).length
+            : widest;
     }
     get precision() {
         return String(this.step).split('.')[1]?.length ?? 0;
@@ -104,6 +107,14 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         }
         return this.along(this.snapped(this.valueAsNumber));
     }
+    get fillStyle() {
+        const fraction = this.fraction;
+        if (!this.origin) {
+            return `--slider-fraction: ${fraction}`;
+        }
+        const at = { center: 0.5, end: 1, start: 0 }[this.origin] ?? 0;
+        return `--slider-fraction: ${fraction}; --slider-from: ${Math.min(at, fraction)}; --slider-to: ${Math.max(at, fraction)}`;
+    }
     snapped(at) {
         if (!(this.step > 0)) {
             return at;
@@ -211,7 +222,8 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
               part="control"
               id=${this.controlId}
               type="range"
-              style="--slider-fraction: ${this.fraction}"
+              style=${this.fillStyle}
+              data-origin=${this.origin ?? nothing}
               min=${this.min}
               max=${this.max}
               step=${this.step}
@@ -241,7 +253,9 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
               for=${this.range ? 'control control-end' : 'control'}
               aria-hidden="true"
               style=${`--_slider-output-reserve: ${this.reserve}ch`}
-              >${this.range ? `${this.said(start)} to ${this.said(end)}` : this.said(this.value)}</output
+              >${this.range
+                ? fillTemplate(this.rangeText, { end: this.said(end), start: this.said(start) })
+                : this.said(this.value)}</output
             >`
             : nothing}
     </div>
@@ -281,9 +295,15 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessSlider.prototype, "orientation", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessSlider.prototype, "origin", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessSlider.prototype, "range", void 0);
+__decorate([
+    property({ attribute: 'range-text' })
+], HelixHeadlessSlider.prototype, "rangeText", void 0);
 __decorate([
     property({ attribute: 'show-value', reflect: true, type: Boolean })
 ], HelixHeadlessSlider.prototype, "showValue", void 0);

package/dist/sparkline/readings.d.ts

@@ -0,0 +1,18 @@
+/** Where the highest and the lowest readings are, by place, or none. */
+export interface Extremes {
+    /** The place of the highest reading, the first where several tie. */
+    high?: number;
+    /** The place of the lowest reading, the first where several tie. */
+    low?: number;
+}
+/**
+ * Where the highest and the lowest readings stand. A blank slot is passed
+ * over, and a list with nothing in it has neither.
+ */
+export declare const extremesOf: (slots: readonly (number | undefined)[]) => Extremes;
+/**
+ * A reading in words, for the readout: the row's name where a table gave one,
+ * the reading as it is written, and where it stands in brackets, such as
+ * "Mon: 12 (3 of 7)". The same order every chart's readout uses.
+ */
+export declare const readingWords: (label: string, text: string, position: string) => string;

package/dist/sparkline/readings.js

@@ -0,0 +1,19 @@
+export const extremesOf = (slots) => {
+    const found = {};
+    slots.forEach((value, at) => {
+        if (value === undefined) {
+            return;
+        }
+        if (found.high === undefined || value > slots[found.high]) {
+            found.high = at;
+        }
+        if (found.low === undefined || value < slots[found.low]) {
+            found.low = at;
+        }
+    });
+    return found;
+};
+export const readingWords = (label, text, position) => {
+    const named = label === '' ? text : text === '' ? label : `${label}: ${text}`;
+    return position === '' ? named : `${named} (${position})`;
+};

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

@@ -1,5 +1,5 @@
-import { type Curve, HelixElement, SourceController } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { ChartPointerController, type Curve, HelixElement, SourceController } from '@fusion.dev/helix-core';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A small chart with no axes that shows the shape of a series beside its number.
  *
@@ -13,8 +13,16 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * are set.
  *
  * Without a `label` the sparkline is decorative and `aria-hidden`, for example
- * beside a stat that already says "Sessions, 1,102". With a `label` it is an
- * image named by that sentence.
+ * beside a stat that already says "Sessions, 1,102". With a `label` it is
+ * named by that sentence and read by key, as every chart is: the drawing takes
+ * focus, the arrow keys walk the readings, Home and End go to the first and
+ * the last, Escape puts the reading away, and the `live` part says each
+ * reading with where it stands, such as "Mon: 12 (3 of 7)".
+ *
+ * A pointer resting on the drawing shows the reading under it: the `cursor`
+ * part marks it and the `readout` part writes it. `marks` adds a mark on the
+ * highest and the lowest reading. A blank cell in a `for` table is a gap in
+ * the line.
  *
  * Place it beside a `Stat`, because a change beside a figure is a second fact,
  * as `Stat`'s own spec says. `Trend` is composed the same way.
@@ -32,8 +40,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @csspart area - The region between the line and the bottom of its range.
  * @csspart bar - One column, drawn when `plot="bar"`.
+ * @csspart cursor - The mark on the reading a pointer or a key rests on, rendered only while there is one. Placed with `inset-inline-start` and `inset-block-start`.
+ * @csspart high - The mark on the highest reading, under `marks="high"`. Placed as `cursor` is.
  * @csspart line - The line's path.
- * @csspart svg - The drawing.
+ * @csspart live - A polite region that says the reading a key moved to, rendered only with a `label`. Hide it visually.
+ * @csspart low - The mark on the lowest reading, under `marks="low"`. Placed as `cursor` is.
+ * @csspart readout - The reading a pointer or a key rests on, as the table or `values` writes it, rendered only while there is one. Placed as `cursor` is.
+ * @csspart svg - The drawing, which takes focus to be read by key where there is a `label`.
  * @csspart terminus - The mark on the last value.
  * @csspart wash-end - The far stop of the area's gradient.
  * @csspart wash-start - The stop of the area's gradient that meets the line.
@@ -91,6 +104,22 @@ export declare class HelixHeadlessSparkline extends HelixElement {
      * than announced without a name.
      */
     label: string;
+    /**
+     * The locale the readout's numbers and positions are written in, such as
+     * `de` for `1.240`.
+     *
+     * Absent uses the runtime's own. A table's cells are shown as the table
+     * writes them, whatever this says.
+     */
+    locale: string;
+    /**
+     * Which readings take a mark of their own: `high`, `low`, or both,
+     * separated by spaces.
+     *
+     * Absent marks none, and the drawing is what it was. Each mark is a part,
+     * placed at its reading, for a stylesheet to draw.
+     */
+    marks: string;
     /**
      * What the readings are drawn as.
      *
@@ -121,6 +150,15 @@ export declare class HelixHeadlessSparkline extends HelixElement {
      * is markup, the same reason `curve` lives here.
      */
     plot?: 'area' | 'bar' | 'line';
+    /**
+     * Where a reading the keys moved to stands among the readings, said after
+     * it. `{position}` and `{count}` are replaced with the numbers, written in
+     * `locale`.
+     *
+     * Set it to the words of the page's language, such as `{position} von
+     * {count}`, or to nothing to say no position.
+     */
+    positionLabel: string;
     /**
      * The numbers, separated by whitespace or by commas.
      *
@@ -131,10 +169,43 @@ export declare class HelixHeadlessSparkline extends HelixElement {
      */
     values: string | readonly number[];
     protected readonly source: SourceController;
+    /**
+     * Finds the reading a pointer or a key rests on, as it does for every
+     * chart, so a sparkline is read the way they are.
+     */
+    readonly pointer: ChartPointerController;
     protected willUpdate(changed: PropertyValues<this>): void;
-    /** The series to draw: the table if there is one, the attribute otherwise. */
-    private points;
+    /**
+     * The series to draw, and how many readings it has room for: the table's
+     * first series over the table's rows if there is one, the attribute
+     * otherwise.
+     *
+     * Over the rows, so a blank cell is a reading with nothing in it and the
+     * line breaks there, as `LineChart` draws one. Joined across, the line
+     * claimed a value the table does not have.
+     */
+    private drawn;
+    /** How many readings there are, which the pointer and the keys walk. */
+    get readings(): number;
+    /**
+     * The reading at a place, in words: the table's cell as it is written, or
+     * the number in `locale`, after the row's name where a table gave one.
+     */
+    private reading;
     protected render(): TemplateResult;
+    /** The marks `marks` asks for, on the highest and the lowest reading. */
+    protected renderMarks(slots: (number | undefined)[], at: (index: number, value: number) => string): TemplateResult | typeof nothing;
+    /**
+     * The reading a pointer or a key rests on: a mark on it and its words
+     * beside it. Hidden from a screen reader, which hears the `live` part.
+     */
+    protected renderReading(slots: (number | undefined)[], at: (index: number, value: number) => string): TemplateResult | typeof nothing;
+    /**
+     * The polite region that says a reading the keys moved to, in words and
+     * with where it stands. Rendered from the first drawing and empty until a
+     * key moves the reading, so it is heard when its words change.
+     */
+    protected renderLive(slots: (number | undefined)[]): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {