@fusion.dev/helix-headless 0.146.0 → 0.147.0

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

@@ -73,6 +73,9 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * @csspart trigger - The closed control, which shows the chosen value.
  * @csspart value - The chosen option's text inside the trigger.
  *
+ * @cssproperty --floating-anchor-inline-size - The trigger's width, written on the panel while it is open, as in `min-inline-size: var(--floating-anchor-inline-size)`. Read it; a value set here is written over.
+ * @cssproperty --floating-available-block-size - The room between the panel and the edge of the screen it opens toward, written on the panel while it is open. Read it; a value set here is written over.
+ *
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  * @cssstate open - While the list is open.
  */
@@ -89,6 +92,29 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * the filtering, the empty state and the keyboard.
      */
     filterable: boolean;
+    /**
+     * Whether the trigger holds its group's tab stop.
+     *
+     * A toolbar keeps one tab stop across its controls, and writing `tabindex`
+     * onto this element would change markup the consumer rendered, which a React
+     * consumer's hydration reports. A toolbar sets this property instead, and
+     * the stop moves on the trigger inside the shadow root, as Button's does.
+     *
+     * No attribute, because it is coordination between elements rather than
+     * anything a consumer sets.
+     */
+    focusable: boolean;
+    /**
+     * The open list's name where nothing names the Select, read by screen
+     * readers. The list has no visible name.
+     *
+     * A Select named by `label`, `aria-label`, `aria-labelledby` or a `<label>`
+     * gives its list that name, and this is not used. Unnamed, the Select is
+     * reported once by the missing-name warning, and its list is not reported a
+     * second time for a name the page never wrote: the list is this element's,
+     * and so is the fallback. Combobox calls its list the same.
+     */
+    listLabel: string;
     /**
      * Whether the options are still loading.
      *
@@ -109,6 +135,18 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * Shown on the trigger while nothing is chosen.
      */
     placeholder: string;
+    /**
+     * Where the list opens: `floating`, under the trigger and above it where
+     * there is no room, or `item-aligned`, over the trigger with the chosen
+     * option where the trigger is, as a native select does on macOS and Radix
+     * Select does by default.
+     *
+     * Over the trigger, a reader's eye stays on the answer as the list opens
+     * round it, and a short move reaches the options either side. Near an edge
+     * of the screen the list moves to stay on it, so the option may sit beside
+     * the trigger rather than on it. It follows the page as it scrolls.
+     */
+    position: 'floating' | 'item-aligned';
     /**
      * What the trigger shows for the chosen options: a function given them, in
      * the order they appear, that returns text, an element or a Lit template.
@@ -215,8 +253,26 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
     private readonly handleLinkFollowed;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Puts the open list over the trigger, with the option it opened on where
+     * the trigger is, for `position="item-aligned"`.
+     *
+     * Measured once the list has drawn and scrolled to that option, and again as
+     * the page scrolls or the window changes size. The offset of the option in
+     * the list is read from the boxes on screen and divided by the list's scale,
+     * since a styled list opens from a little under full size. Written as the
+     * floating controller writes a position, so the same entrance runs and the
+     * controller takes it back on close.
+     */
+    private readonly alignOver;
+    /** The option the open list was put over the trigger by. */
+    private alignedTo;
+    /** Stops following the page, once the list over the trigger closes. */
+    private stopAligning;
     /** Opens the list with the highlight where the opening key says. */
     private openAt;
+    /** Puts focus on the trigger, which is what a toolbar moving its stop here asks. */
+    focus(options?: FocusOptions): void;
     /** Closes the list and puts focus back where it came from. */
     private close;
     private readonly handleChange;
@@ -279,9 +335,9 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      */
     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.
+     * What names the list once it opens, read through core's `hostWords` in
+     * the order a browser names the host: its `aria-labelledby`, its
+     * `aria-label`, the `label`, then 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.

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, elementById, HelixFormElement, hostAria, MixinControllerOpen, MixinControllerValue, MixinField, PopoverController, reportValues, typesCharacter, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, customElement, HelixFormElement, hostAria, hostWords, isRtl, 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';
@@ -12,6 +12,7 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
 import { optionsAmong } from '../../option/root/option-root.js';
 import '../../listbox/index.js';
+import { over } from '../align.js';
 let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(MixinControllerValue(MixinField(HelixFormElement))) {
     constructor() {
         super(...arguments);
@@ -24,10 +25,13 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         });
         this.emptyText = 'No matches';
         this.filterable = false;
+        this.focusable = true;
+        this.listLabel = 'Options';
         this.loading = false;
         this.loadingText = 'Loading';
         this.multiple = false;
         this.placeholder = 'Choose';
+        this.position = 'floating';
         this.panel = new PopoverController(this, {
             anchor: () => this.partNamed('trigger'),
             boundary: () => [
@@ -37,6 +41,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
             offset: () => 4,
             onDismiss: () => this.close(),
             open: () => this.open,
+            place: () => this.position !== 'item-aligned',
             placement: 'bottom-start',
             surface: () => this.partNamed('surface'),
         });
@@ -46,6 +51,45 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         this.handleLinkFollowed = (event) => {
             afterLinkFollowed(event, () => this.requestOpen(false));
         };
+        this.alignOver = () => {
+            const surface = this.partNamed('surface');
+            const trigger = this.partNamed('trigger');
+            if (!this.open || this.position !== 'item-aligned' || !surface || !trigger) {
+                return;
+            }
+            const margin = 8;
+            const at = trigger.getBoundingClientRect();
+            surface.style.setProperty('--floating-anchor-inline-size', `${Math.round(at.width)}px`);
+            surface.style.setProperty('--floating-available-block-size', `${Math.max(0, window.innerHeight - margin * 2)}px`);
+            const shown = optionsAmong(this.knownChildren).filter((option) => !option.hidden);
+            this.alignedTo ??= shown.find((one) => one.active) ?? this.chosenOptions[0] ?? shown[0];
+            const option = this.alignedTo;
+            const box = surface.getBoundingClientRect();
+            const scale = surface.offsetHeight > 0 ? box.height / surface.offsetHeight : 1;
+            const row = option?.getBoundingClientRect();
+            const { left, top } = over({
+                margin,
+                option: row
+                    ? { height: row.height / scale, top: (row.top - box.top) / scale }
+                    : { height: 0, top: 0 },
+                panel: { height: surface.offsetHeight, width: surface.offsetWidth },
+                rtl: isRtl(this),
+                trigger: at,
+                viewport: { height: window.innerHeight, width: window.innerWidth },
+            });
+            for (const [edge, value] of [
+                ['bottom', 'auto'],
+                ['left', '0'],
+                ['right', 'auto'],
+                ['top', '0'],
+            ]) {
+                surface.style.setProperty(edge, value, 'important');
+            }
+            surface.style.position = 'fixed';
+            surface.style.translate = `${left}px ${top}px`;
+            surface.setAttribute('data-placed', '');
+        };
+        this.alignedTo = undefined;
         this.handleChange = (event) => {
             const next = event.detail.value;
             if (!this.requestValue(next)) {
@@ -138,16 +182,24 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.stopAligning();
         this.removeEventListener('helix-select', this.handleLinkFollowed);
         for (const watcher of this.watchers) {
             watcher.disconnect();
         }
         this.watchers = [];
     }
+    stopAligning() {
+        window.removeEventListener('resize', this.alignOver);
+        window.removeEventListener('scroll', this.alignOver, { capture: true });
+    }
     openAt(where) {
         this.opening = where;
         this.requestOpen(true);
     }
+    focus(options) {
+        this.partNamed('trigger')?.focus(options);
+    }
     close() {
         if (!this.open) {
             return;
@@ -202,9 +254,16 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
                 this.listbox?.highlight(this.opening);
                 this.opening = 'selected';
                 this.listbox?.focus();
+                if (this.position === 'item-aligned') {
+                    this.alignedTo = undefined;
+                    void this.listbox?.updateComplete.then(() => this.alignOver());
+                    window.addEventListener('resize', this.alignOver);
+                    window.addEventListener('scroll', this.alignOver, { capture: true, passive: true });
+                }
             }
         }
         else {
+            this.stopAligning();
             this.listbox?.requestFilter('');
         }
     }
@@ -222,7 +281,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
       ?multiple=${this.multiple}
       ?filterable=${this.filterable}
       manual
-      aria-label=${this.listName || nothing}
+      aria-label=${this.listName || this.listLabel || nothing}
       @keydown=${this.handleListKeydown}
       @helix-before-change=${this.handleChange}
       @change=${this.stopInner}
@@ -241,16 +300,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
     </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(' ');
+        return hostWords(this, this.label);
     }
     get triggerNames() {
         const outside = (this.internals.labels?.length ?? 0) > 0 && !this.labeled;
@@ -270,6 +320,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         aria-expanded=${this.open ? 'true' : 'false'}
         aria-describedby=${this.describedBy ?? nothing}
         aria-invalid=${this.invalidity ?? nothing}
+        tabindex=${this.focusable ? nothing : '-1'}
         ?disabled=${this.isDisabled}
         @click=${() => this.toggleOpen()}
         @keydown=${this.handleTriggerKeydown}
@@ -294,6 +345,12 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessSelect.prototype, "filterable", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessSelect.prototype, "focusable", void 0);
+__decorate([
+    property({ attribute: 'list-label' })
+], HelixHeadlessSelect.prototype, "listLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessSelect.prototype, "loading", void 0);
@@ -306,6 +363,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessSelect.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], HelixHeadlessSelect.prototype, "position", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessSelect.prototype, "valueContent", void 0);

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

@@ -1,5 +1,5 @@
 import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A value chosen from a range by dragging.
@@ -77,7 +77,10 @@ declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion
  * @csspart marker-label - The value a mark stands at, when `marker-labels` is set.
  * @csspart markers - The row of marks along the track.
  * @csspart output - The current value, shown beside the track.
+ * @csspart tooltip - One thumb's value in a bubble beside it, under `tooltip`. It carries `data-thumb` on a range, `start` or `end`, and `--slider-at`, where its thumb is as a fraction of the track.
+ * @csspart tooltips - The layer over the track that holds the bubbles, under `tooltip`.
  *
+ * @cssproperty --slider-at - Where a bubble's thumb is, as a fraction of the track, 0 to 1. Set on each `tooltip` part.
  * @cssproperty --slider-fraction - The value as a fraction of the range, 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.
@@ -193,6 +196,13 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
     showValue: boolean;
     /** How far one press of an arrow key moves the thumb. */
     step: number;
+    /**
+     * Whether each thumb shows its value in a bubble beside it, as Web
+     * Awesome's `with-tooltip`. The styled slider shows the bubbles while the
+     * slider is under the pointer or holds focus. They repeat what each thumb
+     * already reports, so a screen reader skips them.
+     */
+    tooltip: boolean;
     /**
      * How many characters the readout has to be able to hold, widest case.
      *
@@ -307,6 +317,13 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
      * such as `{value} degrees`. Empty announces the number alone.
      */
     valueText: string;
+    /**
+     * A bubble for each thumb, under `tooltip`, saying its value where it is.
+     * After the thumbs, so a stylesheet can reach a bubble from a focused
+     * thumb, and hidden from the accessibility tree for the reason the readout
+     * is: each thumb already reports its value.
+     */
+    protected renderTooltips(start: number, end: number): TemplateResult | typeof nothing;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -26,6 +26,7 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         this.rangeText = '{start} to {end}';
         this.showValue = false;
         this.step = 1;
+        this.tooltip = false;
         this.handleInput = (event) => {
             event.stopPropagation();
             const control = event.target;
@@ -181,6 +182,22 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         super.updated(changed);
         this.sync();
     }
+    renderTooltips(start, end) {
+        if (!this.tooltip) {
+            return nothing;
+        }
+        const bubble = (fraction, text, thumb) => html `<span part="tooltip" data-thumb=${thumb ?? nothing} style="--slider-at: ${fraction}"
+        >${text}</span
+      >`;
+        return html `<div part="tooltips" aria-hidden="true">
+      ${this.range
+            ? [
+                bubble(this.along(start), this.said(start), 'start'),
+                bubble(this.along(end), this.said(end), 'end'),
+            ]
+            : bubble(this.fraction, this.said(this.value))}
+    </div>`;
+    }
     render() {
         const [start, end] = this.bounds;
         const thumb = (which, at) => html `<input
@@ -212,6 +229,7 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
       part="field"
       data-markers=${this.markerValues.length > 0 ? '' : nothing}
       data-range=${this.range ? '' : nothing}
+      data-tooltip=${this.tooltip ? '' : nothing}
       style="--slider-fraction: ${this.fraction}; --slider-from: ${this.along(start)}; --slider-to: ${this.along(end)}"
     >
       ${this.range ? thumb('start', start) : nothing}
@@ -247,6 +265,7 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
                   >`)}
             </div>`
             : nothing}
+      ${this.renderTooltips(start, end)}
       ${this.showValue
             ? html `<output
               part="output"
@@ -310,6 +329,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessSlider.prototype, "step", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessSlider.prototype, "tooltip", void 0);
 __decorate([
     property({ attribute: 'value-text' })
 ], HelixHeadlessSlider.prototype, "valueText", void 0);

package/dist/sparkline/readings.d.ts

@@ -1,18 +1,36 @@
-/** 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;
+import { type Point } from '@fusion.dev/helix-core';
 /**
  * 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;
+/**
+ * The readings in their places: `count` slots, each holding the value read at
+ * that place, or nothing where the place is blank. A point outside the places
+ * is left out.
+ */
+export declare const slotsOf: (points: readonly {
+    at: number;
+    value: number;
+}[], count: number) => (number | undefined)[];
+/** One unbroken stretch of the line: its drawn path and the points it runs through. */
+export interface Run {
+    /** The path the line draws through the points. */
+    path: string;
+    /** The points, in drawing coordinates. */
+    run: readonly Point[];
+}
+/**
+ * Each run of the line closed down to `floor`, the path the wash fills: the
+ * run's own path, then down from its last point, across and back up to its
+ * first. Empty where there are no runs.
+ */
+export declare const areaPath: (runs: readonly Run[], floor: number) => string;
+/**
+ * What the readings come to, in `template`: `{first}` and `{last}` for the
+ * first and the last reading, `{high}` and `{low}` for the highest and the
+ * lowest, each written by `write`. Empty where there are fewer than two
+ * readings, which make no trend.
+ */
+export declare const overviewWords: (template: string, slots: readonly (number | undefined)[], write: (at: number) => string) => string;

package/dist/sparkline/readings.js

@@ -1,19 +1,36 @@
-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;
-};
+import { extremesOf, fillTemplate } from '@fusion.dev/helix-core';
 export const readingWords = (label, text, position) => {
     const named = label === '' ? text : text === '' ? label : `${label}: ${text}`;
     return position === '' ? named : `${named} (${position})`;
 };
+export const slotsOf = (points, count) => {
+    const slots = Array.from({ length: count }, () => undefined);
+    for (const point of points) {
+        if (point.at >= 0 && point.at < count) {
+            slots[point.at] = point.value;
+        }
+    }
+    return slots;
+};
+export const areaPath = (runs, floor) => runs
+    .map((one) => {
+    const first = one.run[0];
+    const last = one.run.at(-1);
+    return `${one.path}L${last[0]},${floor}L${first[0]},${floor}Z`;
+})
+    .join('');
+export const overviewWords = (template, slots, write) => {
+    const placed = slots.flatMap((value, at) => (value === undefined ? [] : [at]));
+    const first = placed[0];
+    const last = placed.at(-1);
+    const { high, low } = extremesOf(slots);
+    if (placed.length < 2 || first === undefined || last === undefined) {
+        return '';
+    }
+    return fillTemplate(template, {
+        first: write(first),
+        high: write(high),
+        last: write(last),
+        low: write(low),
+    });
+};

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

@@ -1,4 +1,4 @@
-import { ChartPointerController, type Curve, HelixElement, SourceController } from '@fusion.dev/helix-core';
+import { ChartPointerController, type Curve, HelixElement, type Series, 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.
@@ -19,10 +19,16 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * 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 named sparkline describes itself.** Beside its name, a screen reader
+ * hears what the readings come to, the first and the last, the highest and
+ * the lowest, in `overview-label`: "From 12 to 20, highest 30, lowest 8". An
+ * `aria-label` on the element names it as `label` does.
+ *
  * 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.
+ * highest and the lowest reading, and `range` draws a band between two values,
+ * such as a normal range. A blank cell in a `for` table is a gap in the line,
+ * and a reading alone between two blanks is a `lone` mark.
  *
  * 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.
@@ -44,7 +50,10 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @csspart high - The mark on the highest reading, under `marks="high"`. Placed as `cursor` is.
  * @csspart line - The line's path.
  * @csspart live - A polite region that says the reading a key moved to, rendered only with a `label`. Hide it visually.
+ * @csspart lone - The mark on a reading no line reaches, with a blank or an end on each side. Placed as `cursor` is.
  * @csspart low - The mark on the lowest reading, under `marks="low"`. Placed as `cursor` is.
+ * @csspart overview - What the readings come to, in `overview-label`, which describes the drawing. Rendered `hidden` with a name, since it is read through the description and not shown.
+ * @csspart range - The band between the two values of `range`, drawn behind the line.
  * @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.
@@ -120,6 +129,15 @@ export declare class HelixHeadlessSparkline extends HelixElement {
      * placed at its reading, for a stylesheet to draw.
      */
     marks: string;
+    /**
+     * What the readings come to, said after the name: `{first}` and `{last}`
+     * for the first and the last reading, `{high}` and `{low}` for the highest
+     * and the lowest, each written as the readout writes it.
+     *
+     * Set it to the words of the page's language, or to nothing to say no
+     * more than the name. Said only where the sparkline is named.
+     */
+    overviewLabel: string;
     /**
      * What the readings are drawn as.
      *
@@ -159,6 +177,14 @@ export declare class HelixHeadlessSparkline extends HelixElement {
      * {count}`, or to nothing to say no position.
      */
     positionLabel: string;
+    /**
+     * Two values a band is drawn between, behind the line, separated by a
+     * space: `range="60 100"` marks a normal range.
+     *
+     * The scale stretches to hold the band where the readings do not reach it.
+     * Absent draws none.
+     */
+    range: string;
     /**
      * The numbers, separated by whitespace or by commas.
      *
@@ -174,6 +200,17 @@ export declare class HelixHeadlessSparkline extends HelixElement {
      * chart, so a sparkline is read the way they are.
      */
     readonly pointer: ChartPointerController;
+    /**
+     * Hears an `aria-label` written on the sparkline, which no property mirrors,
+     * because it names the drawing as `label` does, as on every chart.
+     */
+    static get observedAttributes(): string[];
+    /** Called by the browser when an observed attribute changes; a new `aria-label` renames the drawing. */
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    /** The drawing's name: an `aria-label` written on the sparkline, then `label`. */
+    get named(): string;
+    /** The two values of `range`, lower first, or none. */
+    private get band();
     protected willUpdate(changed: PropertyValues<this>): void;
     /**
      * The series to draw, and how many readings it has room for: the table's
@@ -193,6 +230,12 @@ export declare class HelixHeadlessSparkline extends HelixElement {
      */
     private reading;
     protected render(): TemplateResult;
+    /**
+     * A mark on each reading with a blank on either side, which no line can
+     * reach, so a line and an area show it as `LineChart` does. Not on a bar
+     * plot, whose column already shows it.
+     */
+    protected renderLone(series: Series | undefined, at: (index: number, value: number) => string): TemplateResult | typeof nothing;
     /** 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;
     /**