@fusion.dev/helix-headless 0.145.0 → 0.147.0

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, 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('');
         }
     }
@@ -214,15 +273,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 || this.getAttribute('aria-label') || nothing}
+      aria-label=${this.listName || this.listLabel || nothing}
       @keydown=${this.handleListKeydown}
       @helix-before-change=${this.handleChange}
       @change=${this.stopInner}
@@ -240,6 +299,9 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
       </svg>
     </slot>`;
     }
+    get listName() {
+        return hostWords(this, this.label);
+    }
     get triggerNames() {
         const outside = (this.internals.labels?.length ?? 0) > 0 && !this.labeled;
         if (this.hasAttribute('aria-labelledby') || outside) {
@@ -258,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}
@@ -282,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);
@@ -294,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/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

@@ -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.
@@ -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
@@ -57,11 +77,14 @@ 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 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 +171,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,12 +185,24 @@ 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.
      */
     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.
      *
@@ -174,7 +215,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 +280,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.
      *
@@ -270,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

@@ -23,8 +23,10 @@ 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.tooltip = false;
         this.handleInput = (event) => {
             event.stopPropagation();
             const control = event.target;
@@ -51,7 +53,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 +108,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;
@@ -170,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
@@ -201,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}
@@ -211,7 +240,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}
@@ -235,13 +265,16 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
                   >`)}
             </div>`
             : nothing}
+      ${this.renderTooltips(start, end)}
       ${this.showValue
             ? html `<output
               part="output"
               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,15 +314,24 @@ __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);
 __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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,36 @@
+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),
+    });
+};