@fusion.dev/helix-headless 0.145.0 → 0.146.0

package/dist/scroll-area/scrollbar-controller.js

@@ -0,0 +1,172 @@
+import { capturePointer, DelayController, isRtl } from '@fusion.dev/helix-core';
+import { alongTrack, extentOf, hasScrollbar, offsetAt, scrollFraction, scrollPerPixel, showsScrollbar, thumbFraction, } from './scrollbar.js';
+const SETTLE = 100;
+export class ScrollbarController {
+    constructor(host, options) {
+        this.active = false;
+        this.hovered = false;
+        this.over = false;
+        this.heldEnd = false;
+        this.handleVerticalDown = (event) => {
+            this.grab(event, 'vertical');
+        };
+        this.handleHorizontalDown = (event) => {
+            this.grab(event, 'horizontal');
+        };
+        this.handleDragMove = (event) => {
+            const drag = this.drag;
+            const box = this.options.box();
+            if (!drag || !box) {
+                return;
+            }
+            const pointer = drag.axis === 'vertical' ? event.clientY : event.clientX;
+            this.scrollAlong(box, drag.axis, drag.from + (pointer - drag.pointer) * drag.sign * drag.perPixel);
+        };
+        this.handleDragEnd = () => {
+            if (!this.drag) {
+                return;
+            }
+            this.drag = undefined;
+            if (this.heldEnd) {
+                this.settle.start(SETTLE, () => {
+                    if (this.heldEnd) {
+                        this.heldEnd = false;
+                        this.options.scrollEnd();
+                    }
+                });
+            }
+            this.wake();
+            this.host.requestUpdate();
+        };
+        this.handleBarEnter = () => {
+            this.set('over', true);
+        };
+        this.handleBarLeave = () => {
+            this.set('over', false);
+            this.wake();
+        };
+        this.handleEnter = () => {
+            this.set('hovered', true);
+        };
+        this.handleLeave = () => {
+            this.set('hovered', false);
+            if (this.options.mode() === 'hover') {
+                this.wake();
+            }
+        };
+        this.host = host;
+        this.options = options;
+        this.hide = new DelayController(host, { renders: false });
+        this.settle = new DelayController(host, { renders: false });
+        host.addController(this);
+    }
+    hostConnected() {
+        this.host.addEventListener('pointerenter', this.handleEnter);
+        this.host.addEventListener('pointerleave', this.handleLeave);
+    }
+    hostDisconnected() {
+        this.host.removeEventListener('pointerenter', this.handleEnter);
+        this.host.removeEventListener('pointerleave', this.handleLeave);
+        this.drag = undefined;
+        this.heldEnd = false;
+        this.active = false;
+        this.hovered = false;
+        this.over = false;
+    }
+    get dragging() {
+        return this.drag !== undefined;
+    }
+    get shown() {
+        const mode = this.options.mode();
+        return mode
+            ? showsScrollbar(mode, {
+                active: this.active,
+                held: this.over || this.drag !== undefined,
+                hovered: this.hovered,
+            })
+            : false;
+    }
+    read(box) {
+        const mode = this.options.mode() ?? 'auto';
+        const style = getComputedStyle(box);
+        const bar = (axis, overflow) => {
+            const extent = extentOf(box, axis);
+            return {
+                along: scrollFraction(extent),
+                drawn: hasScrollbar(mode, !['clip', 'hidden', 'visible'].includes(overflow), extent.offset > 1 || extent.client < extent.scroll - 1),
+                thumb: thumbFraction(extent),
+            };
+        };
+        const next = {
+            horizontal: bar('horizontal', style.overflowX),
+            vertical: bar('vertical', style.overflowY),
+        };
+        if (JSON.stringify(next) !== JSON.stringify(this.bars)) {
+            this.bars = next;
+            this.host.requestUpdate();
+        }
+    }
+    wake() {
+        const mode = this.options.mode();
+        if (mode !== 'scroll' && mode !== 'hover') {
+            return;
+        }
+        this.set('active', true);
+        this.hide.start(this.options.hideDelay(), () => {
+            this.set('active', false);
+        });
+    }
+    holdsScrollEnd() {
+        if (this.drag) {
+            this.heldEnd = true;
+            return true;
+        }
+        if (this.heldEnd) {
+            this.heldEnd = false;
+            this.settle.cancel();
+        }
+        return false;
+    }
+    set(key, value) {
+        if (this[key] !== value) {
+            this[key] = value;
+            this.host.requestUpdate();
+        }
+    }
+    scrollAlong(box, axis, offset) {
+        box.scrollTo(axis === 'vertical'
+            ? { behavior: 'instant', top: offset }
+            : { behavior: 'instant', left: isRtl(box) ? -offset : offset });
+    }
+    grab(event, axis) {
+        const box = this.options.box();
+        const bar = event.currentTarget;
+        const thumb = bar.querySelector('[part~="thumb"]');
+        if (event.button !== 0 || !box || !thumb) {
+            return;
+        }
+        event.preventDefault();
+        const vertical = axis === 'vertical';
+        const rtl = !vertical && isRtl(box);
+        const track = bar.getBoundingClientRect();
+        const held = thumb.getBoundingClientRect();
+        const length = vertical ? track.height : track.width;
+        const size = vertical ? held.height : held.width;
+        const extent = extentOf(box, axis);
+        const pointer = vertical ? event.clientY : event.clientX;
+        let from = extent.offset;
+        if (!thumb.contains(event.target)) {
+            from = offsetAt(extent, alongTrack(pointer, track, axis, rtl), length, size);
+            this.scrollAlong(box, axis, from);
+        }
+        this.drag = {
+            axis,
+            from,
+            perPixel: scrollPerPixel(extent, length, size),
+            pointer,
+            sign: rtl ? -1 : 1,
+        };
+        capturePointer(bar, event.pointerId);
+        this.host.requestUpdate();
+    }
+}

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

@@ -8,6 +8,17 @@
  */
 /** 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`. */
@@ -63,3 +74,19 @@ export declare const showsScrollbar: (mode: Scrollbars, moment: {
     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

@@ -22,3 +22,12 @@ export const showsScrollbar = (mode, moment) => {
     }
     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 || this.getAttribute('aria-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})`;
+};