@fusion.dev/helix-core 0.205.2 → 0.207.0

package/dist/controllers/aria-forward-controller/aria-forward-controller.js

@@ -1,5 +1,6 @@
 import { auditName } from '@fusion.dev/helix-core/audits/name';
 import { elementById } from '../../utils/element-by-id/element-by-id.js';
+import { labelsOf } from '../../utils/labels-of/labels-of.js';
 import { nameText } from '../../utils/name-text/name-text.js';
 const RELATIONSHIPS = [
     ['aria-describedby', 'ariaDescribedByElements'],
@@ -38,16 +39,14 @@ export class AriaForwardController {
         if (!this.forwarded.has('aria-labelledby') && target.hasAttribute('aria-labelledby')) {
             return true;
         }
-        const own = target.labels;
-        return [...(own ?? [])].some((label) => nameText(label).trim() !== '');
+        return labelsOf(target).some((label) => nameText(label).trim() !== '');
     }
     hostLabels(target) {
-        const labels = this.host.labels;
-        const named = this.named ? this.named() : this.namedByItself(target);
-        if (!labels || labels.length === 0 || named) {
+        const labels = labelsOf(this.host);
+        if (labels.length === 0 || (this.named ? this.named() : this.namedByItself(target))) {
             return [];
         }
-        return [...labels].filter((label) => label instanceof HTMLElement);
+        return labels.filter((label) => label instanceof HTMLElement);
     }
     forward() {
         const target = this.target();

package/dist/controllers/category-axis-controller/category-axis-controller.d.ts

@@ -0,0 +1,75 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import { type Category, type PlacedLabel } from '../../utils/category-labels/category-labels.js';
+/** What the controller needs of its host: a Lit element and where it drew itself. */
+export interface CategoryAxisHost extends ReactiveControllerHost, HTMLElement {
+    /**
+     * Where the chart drew itself, which is where the `labels` part is looked for.
+     */
+    readonly renderRoot: DocumentFragment | HTMLElement;
+}
+/**
+ * Measures a chart's category axis and says which of its names fit.
+ *
+ * **A controller because the answer moves with the box.** `placeLabels` is
+ * the arithmetic; what it needs is the axis' length and every name's length
+ * on it, and both change without the chart changing: a card resized, a font
+ * that finished loading. So the `labels` part is watched with a
+ * `ResizeObserver`, a name's font is read from a drawn name, and the host is
+ * asked to update when either moves.
+ *
+ * **Measured on a canvas in the name's own font**, so a name is measured
+ * without being built: an axis of 10,000 readings measures the few dozen names
+ * that are candidates to be drawn, and builds only the ones that are. The
+ * widths are held by name until the font changes.
+ *
+ * **The first update is unmeasured**, the box not having been laid out yet,
+ * and draws every name up to `UNMEASURED_LABELS`. The observer's first report
+ * comes after that layout and before the frame is painted, so the frame shows
+ * the measured axis.
+ *
+ * **The box it watches never changes size because of what it draws.** Along
+ * the line of text that is the `labels` part, whose width is the plot's and
+ * whose height is one line whichever names are in it. Down the side, as a
+ * horizontal bar chart's names are, the names set the part's width, so the
+ * host is watched there and the part's height is read when it reports.
+ * Watching a box the update resizes is a loop the browser reports as an error.
+ */
+export declare class CategoryAxisController implements ReactiveController {
+    private readonly host;
+    private readonly along;
+    private sizes;
+    /** The `labels` part the observer last saw, so a new one is watched. */
+    private labels;
+    /** The axis' length in pixels, or 0 while it has not been measured. */
+    private length;
+    private setting;
+    /** Each name's length in the current font, by its text. */
+    private widths;
+    private held;
+    constructor(host: CategoryAxisHost, along?: () => 'block' | 'inline');
+    /**
+     * The axis' length in pixels, or 0 before it is measured, which is the
+     * plot's length along it: a chart draws a line of more readings than it has
+     * pixels with only the points those pixels show. See `columnPoints`.
+     */
+    get measured(): number;
+    /**
+     * The names to draw for these readings, placed along the axis.
+     *
+     * Held while the readings, the axis and the font are the ones it was worked
+     * out for, so a render the pointer asks for costs nothing here. The
+     * readings are compared by identity, which is how a chart holds its rows
+     * between edits.
+     */
+    place(categories: readonly Category[]): PlacedLabel[];
+    /** The axis and its names in pixels, or nothing while either cannot be measured. */
+    private lengths;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /** Watches the `labels` part the update drew, where it is a new one. */
+    hostUpdated(): void;
+    /** Reads the axis' length and its names' font, and asks for an update where either moved. */
+    private readonly measure;
+    /** A font finished loading, so every name is measured again in it. */
+    private readonly refont;
+}

package/dist/controllers/category-axis-controller/category-axis-controller.js

@@ -0,0 +1,128 @@
+import { placeLabels, } from '../../utils/category-labels/category-labels.js';
+let pen;
+const penOf = () => {
+    if (pen === undefined) {
+        try {
+            pen =
+                typeof document === 'undefined' ? null : document.createElement('canvas').getContext('2d');
+        }
+        catch {
+            pen = null;
+        }
+    }
+    return pen;
+};
+const cased = (text, transform) => transform === 'uppercase'
+    ? text.toUpperCase()
+    : transform === 'lowercase'
+        ? text.toLowerCase()
+        : transform === 'capitalize'
+            ? text.replace(/(^|\s)(\S)/g, (_, space, letter) => space + letter.toUpperCase())
+            : text;
+export class CategoryAxisController {
+    constructor(host, along = () => 'inline') {
+        this.labels = null;
+        this.length = 0;
+        this.widths = new Map();
+        this.measure = () => {
+            const labels = this.labels;
+            const name = labels?.querySelector('[part~="label"]');
+            if (!labels || !name) {
+                return;
+            }
+            const box = labels.getBoundingClientRect();
+            const length = this.along() === 'block' ? box.height : box.width;
+            const style = getComputedStyle(name);
+            const size = Number.parseFloat(style.fontSize) || 0;
+            const spacing = Number.parseFloat(style.letterSpacing) || 0;
+            const font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+            const setting = this.setting;
+            const same = setting?.font === font &&
+                setting.spacing === spacing &&
+                setting.transform === style.textTransform;
+            if (!same) {
+                this.setting = { font, gap: size / 2, size, spacing, transform: style.textTransform };
+                this.widths.clear();
+            }
+            if (!same || length !== this.length) {
+                this.length = length;
+                this.host.requestUpdate();
+            }
+        };
+        this.refont = () => {
+            this.widths.clear();
+            this.setting = this.setting && { ...this.setting };
+            this.host.requestUpdate();
+        };
+        this.host = host;
+        this.along = along;
+        host.addController(this);
+    }
+    get measured() {
+        return this.length;
+    }
+    place(categories) {
+        const held = this.held;
+        if (held &&
+            held.categories === categories &&
+            held.length === this.length &&
+            held.setting === this.setting) {
+            return held.placed;
+        }
+        if (held?.categories !== categories) {
+            this.widths.clear();
+        }
+        const placed = placeLabels(categories, this.lengths(categories));
+        this.held = { categories, length: this.length, placed, setting: this.setting };
+        return placed;
+    }
+    lengths(categories) {
+        const setting = this.setting;
+        const pen = penOf();
+        if (this.length <= 0 || !setting || !pen) {
+            return undefined;
+        }
+        if (this.along() === 'block') {
+            return { gap: setting.size / 8, length: this.length, name: () => setting.size };
+        }
+        return {
+            gap: setting.gap,
+            length: this.length,
+            name: (at) => {
+                const text = categories[at]?.label ?? '';
+                let width = this.widths.get(text);
+                if (width === undefined) {
+                    pen.font = setting.font;
+                    width =
+                        pen.measureText(cased(text, setting.transform)).width + setting.spacing * text.length;
+                    this.widths.set(text, width);
+                }
+                return width;
+            },
+        };
+    }
+    hostConnected() {
+        globalThis.document?.fonts?.addEventListener?.('loadingdone', this.refont);
+    }
+    hostDisconnected() {
+        globalThis.document?.fonts?.removeEventListener?.('loadingdone', this.refont);
+        this.sizes?.disconnect();
+        this.sizes = undefined;
+        this.labels = null;
+    }
+    hostUpdated() {
+        const labels = this.host.renderRoot.querySelector('[part="labels"]');
+        if (labels === this.labels) {
+            return;
+        }
+        this.labels = labels;
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this.sizes ??= new ResizeObserver(this.measure);
+        this.sizes.disconnect();
+        if (labels) {
+            this.sizes.observe(this.along() === 'block' ? this.host : labels);
+        }
+    }
+}

package/dist/controllers/source-controller/source-controller.d.ts

@@ -63,6 +63,8 @@ export declare class SourceController implements ReactiveController {
      * table, and `for` naming another one.
      */
     private version;
+    /** The last `data` checked for a table's shape, and whether it had it. */
+    private checked;
     private heldRows;
     private heldSeries;
     constructor(host: SourceHost);

package/dist/controllers/source-controller/source-controller.js

@@ -29,7 +29,10 @@ export class SourceController {
         if (host.data === undefined || typeof host.closest !== 'function' || this.hydrating) {
             return undefined;
         }
-        if (!isChartData(host.data)) {
+        if (this.checked?.data !== host.data) {
+            this.checked = { data: host.data, fits: isChartData(host.data) };
+        }
+        if (!this.checked.fits) {
             auditData(host);
             return undefined;
         }
@@ -63,7 +66,7 @@ export class SourceController {
             : null;
     }
     get series() {
-        this.heldSeries = this.parsed(this.heldSeries, (table, data) => table ? readSeries(table) : data ? seriesFromData(data, wordsLocale(this.host)) : []);
+        this.heldSeries = this.parsed(this.heldSeries, (table, data) => table ? readSeries(table) : data ? seriesFromData(data) : []);
         return this.heldSeries.value;
     }
     get rows() {

package/dist/controllers/virtualize-controller/virtualize-controller.d.ts

@@ -496,6 +496,15 @@ export declare class VirtualizeController implements ReactiveController {
      *
      * Once per controller, because a warning per frame is one people filter out
      * and this one has to be believed the day it is right.
+     *
+     * **The usual cause is a scrolling box with no height of its own.** Its
+     * `clientHeight` is then a function of the rows just drawn, so measuring
+     * moves what is being measured and the two never agree. The other is rows
+     * that report no height, such as a row drawn with `display: contents`, which
+     * is a fault in the component that draws them. The message names the
+     * element and the part the box is, which is what a consumer's stylesheet
+     * reaches: the report prints only the message, and a class name or "the
+     * container" told a reader nothing they could select.
      */
     private report;
 }

package/dist/controllers/virtualize-controller/virtualize-controller.js

@@ -451,16 +451,18 @@ export class VirtualizeController {
         }
         this.warned = true;
         const host = this.host;
+        const tag = typeof host.localName === 'string' ? host.localName : undefined;
+        const part = this.options.container()?.getAttribute('part')?.split(' ')[0];
         reportRuntime({
             kind: 'unsettled-window',
-            message: `VirtualizeController: the window did not settle in ${UNSTABLE} passes, so it is holding ` +
-                'the last one. That happens when the scrolling box has no height of its own: its ' +
-                '`clientHeight` is then a function of the rows just drawn, so measuring moves what is ' +
-                'being measured and the two never agree. Give the container a block size and an ' +
-                'overflow, which is what the styled tier does and what a headless consumer has to. ' +
-                'It also happens when the rows report no height, such as a row drawn with ' +
-                '`display: contents`, which is a fault in the component that draws them.',
-            tag: typeof host.localName === 'string' ? host.localName : undefined,
+            message: tag && part
+                ? `The number of rows that fit in the \`${part}\` part of <${tag}> did not settle, which ` +
+                    'usually means the part has no block size of its own. ' +
+                    `Give ${tag}::part(${part}) a block size and an overflow.`
+                : `The number of rows that fit in ${tag ? `<${tag}>` : 'a windowed list'} did not settle, ` +
+                    'which usually means the box they scroll in has no block size of its own. Give that ' +
+                    'box a block size and an overflow.',
+            tag,
         });
     }
 }

package/dist/helix-element/helix-element.js

@@ -1,14 +1,11 @@
 import { LitElement, unsafeCSS } from 'lit';
-import { auditReactProps } from '@fusion.dev/helix-core/audits/react';
 import { measuring, reportRender } from '../utils/report-render/report-render.js';
 import { noteVersion, reportUsage } from '../utils/report-usage/report-usage.js';
-import { applyReactProperties, bindReactHandler, reactPropsOf } from './react-bridge.js';
+import { applyReactProperties, bindReactHandler, lookForReact } from './react-bridge.js';
 const BOX_SIZING = '*,::before,::after{box-sizing:border-box}';
 const HIDDEN = ":host([hidden]:not([hidden='until-found'])){display:none}";
 const SETTLED = ':host(:not(:state(settled))),:host(:not(:state(settled))) *{transition:none!important}';
 const BASE = unsafeCSS(BOX_SIZING + HIDDEN + SETTLED);
-const LOOK_EVERY = 16;
-const LOOK_FOR = 96;
 export class HelixElement extends LitElement {
     static { this.tier = 'helix-headless-'; }
     tag(name) {
@@ -112,26 +109,11 @@ export class HelixElement extends LitElement {
     firstUpdated(changed) {
         super.firstUpdated(changed);
         reportUsage(this);
-        let applied = applyReactProperties(this);
+        const applied = applyReactProperties(this);
         requestAnimationFrame(() => {
             this.toggleState('settled', true);
             this.resolveSettled();
-            let waited = 0;
-            const look = () => {
-                const props = reactPropsOf(this);
-                if (props === undefined) {
-                    if (waited < LOOK_FOR) {
-                        waited += LOOK_EVERY;
-                        setTimeout(look, LOOK_EVERY);
-                    }
-                    return;
-                }
-                if (!applied) {
-                    applied = applyReactProperties(this);
-                }
-                auditReactProps(this, props);
-            };
-            look();
+            lookForReact(this, applied);
         });
     }
 }

package/dist/helix-element/react-bridge.d.ts

@@ -1,6 +1,23 @@
 import type { LitElement } from 'lit';
 /** The props React is holding for a node, if React is holding any. */
 export declare const reactPropsOf: (node: EventTarget) => Record<string, unknown> | undefined;
+/**
+ * Looks for React's props a frame after an element's first update, and goes
+ * on looking for `LOOK_FOR` where they have not arrived.
+ *
+ * **The ordering this is for**: a definition evaluated with the client bundle
+ * upgrades before React hydrates, so `firstUpdated` found no bag to read and
+ * there may be none for a frame or two yet. `applied` says whether that first
+ * look assigned the properties already.
+ *
+ * **Audited here as well as at dispatch, in a development build, and this is
+ * the half that catches the real mistake.** From inside `dispatchEvent` alone,
+ * an element holding a handler prop and sending nothing is never looked at,
+ * and a prop on the wrong element is exactly the case where that element has
+ * no reason to dispatch. Once per element either way: the audit holds its own
+ * set.
+ */
+export declare const lookForReact: (host: LitElement, applied: boolean) => void;
 /**
  * The prop React would be holding for this event, if it is holding one.
  *

package/dist/helix-element/react-bridge.js

@@ -13,6 +13,60 @@ export const reactPropsOf = (node) => {
     reactPropsKey = found;
     return stash[found];
 };
+const REACT_LISTENING = '_reactListening';
+const REACT_EVENTS = '__reactEvents$';
+const reactOnPage = (node) => Object.keys(node.ownerDocument ?? node).some((key) => key.startsWith(REACT_LISTENING) || key.startsWith(REACT_EVENTS));
+const LOOK_EVERY = 16;
+const LOOK_FOR = 96;
+const looking = [];
+let ticks = 0;
+let booked = false;
+const take = (host, applied) => {
+    const props = reactPropsOf(host);
+    if (props === undefined) {
+        return false;
+    }
+    if (!applied) {
+        applyReactProperties(host);
+    }
+    auditReactProps(host, props);
+    return true;
+};
+const tick = () => {
+    booked = false;
+    ticks += 1;
+    const now = performance.now();
+    let page;
+    let react = false;
+    let kept = 0;
+    for (const one of looking) {
+        const own = one.host.ownerDocument ?? one.host;
+        if (own !== page) {
+            page = own;
+            react = reactOnPage(one.host);
+        }
+        const done = (react && take(one.host, false)) ||
+            (ticks - one.after >= LOOK_FOR / LOOK_EVERY && now - one.since >= LOOK_FOR);
+        if (!done) {
+            looking[kept] = one;
+            kept += 1;
+        }
+    }
+    looking.length = kept;
+    book();
+};
+const book = () => {
+    if (!booked && looking.length > 0) {
+        booked = true;
+        setTimeout(tick, LOOK_EVERY);
+    }
+};
+export const lookForReact = (host, applied) => {
+    if (!(reactOnPage(host) && take(host, applied))) {
+        looking.push({ after: ticks, host, since: performance.now() });
+        book();
+    }
+};
 const REACT_WIRES = new Set(['scroll', 'scrollend']);
 export const reactPropFor = (event) => {
     if (event.type.includes('-')) {

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { auditNesting } from '@fusion.dev/helix-core/audits/nesting';
 export { auditServed } from '@fusion.dev/helix-core/audits/served';
 export { AriaForwardController, type AriaForwardOptions, } from './controllers/aria-forward-controller/aria-forward-controller.js';
 export { ArrivalController, type ArrivalOptions, } from './controllers/arrival-controller/arrival-controller.js';
+export { CategoryAxisController, type CategoryAxisHost, } from './controllers/category-axis-controller/category-axis-controller.js';
 export { ChartPointerController, type ChartPointerHost, type ReadingHeard, } from './controllers/chart-pointer-controller/chart-pointer-controller.js';
 export { ChildrenController } from './controllers/children-controller/children-controller.js';
 export { CommandController, type CommandOptions, HelixFallbackCommandEvent, supportsInvokers, } from './controllers/command-controller/command-controller.js';
@@ -43,7 +44,7 @@ export { HelixElement, whenHydrated } from './helix-element/helix-element.js';
 export { MIRROR_RULE, SCROLLER_RULE, SPOKEN_RULE, VIRTUAL_RULE, } from './helix-element/mark-rules.js';
 export { HelixFormElement } from './helix-form-element/helix-form-element.js';
 export { HelixFormElementBase } from './helix-form-element/helix-form-element-base.js';
-export { MixinChartSource, type MixinChartSourceInterface, PALETTE, PLOT_HEIGHT, PLOT_WIDTH, POSITION_LABEL, seriesIndex, seriesNames, } from './mixins/mixin-chart-source/mixin-chart-source.js';
+export { MixinChartSource, type MixinChartSourceInterface, PALETTE, PLOT_HEIGHT, PLOT_WIDTH, POSITION_LABEL, READINGS_PAGE, seriesIndex, seriesNames, } from './mixins/mixin-chart-source/mixin-chart-source.js';
 export { MixinChartStatus, type MixinChartStatusInterface, } from './mixins/mixin-chart-status/mixin-chart-status.js';
 export { type CollectionElement, MixinCollection, } from './mixins/mixin-collection/mixin-collection.js';
 export { MixinControllerActive, type MixinControllerActiveInterface, } from './mixins/mixin-controller-active/mixin-controller-active.js';
@@ -66,6 +67,7 @@ export { type DrawAutofillOptions, drawAutofill, } from './utils/autofill-select
 export { type BoxAxisText, type BoxLabel, type BoxLabelSizes, type BoxPlace, boxLabels, type SeenPlace, } from './utils/box-labels/box-labels.js';
 export { addDays, addMonths, type Barring, barredBy, type CalendarParts, type CalendarView, calendarLocale, type DateCalendar, localToday, MONTH_CALENDARS, type MonthCalendar, type MonthSystem, monthOf, monthOut, monthSystem, type PeriodCell, type PeriodPage, periodCells, periodKey, periodMove, sameMonth, todayIn, weekendOf, weekStartOf, YEARS_SHOWN, yearOut, yearPageOf, } from './utils/calendar/calendar.js';
 export { capturePointer } from './utils/capture-pointer/capture-pointer.js';
+export { type AxisLengths, type Category, type PlacedLabel, placeLabels, UNMEASURED_LABELS, } from './utils/category-labels/category-labels.js';
 export { centerInView } from './utils/center-in-view/center-in-view.js';
 export { ariaChord, type ChordPress, chordParts, matchesChord, printableChord, selectsAll, } from './utils/chord/chord.js';
 export { type KeyNames, keyNames } from './utils/chord/key-names.js';
@@ -73,6 +75,7 @@ export { chosenValues } from './utils/chosen-values/chosen-values.js';
 export { clamp } from './utils/clamp/clamp.js';
 export { clockLocale, dayPeriod, type HourCycle, isTwelveHour, nearestTime, offeredTimes, type TimeFault, type TimeRules, timeBarred, timeFault, wheelParts, wholeHour, } from './utils/clock/clock.js';
 export { closestInstance } from './utils/closest-instance/closest-instance.js';
+export { closestName } from './utils/closest-name/closest-name.js';
 export { type ColorWords, colorName, hueName } from './utils/color-name/color-name.js';
 export { columnStep } from './utils/column-step/column-step.js';
 export { contextBudget, type Holder, LIVE, pageBudget, } from './utils/context-budget/context-budget.js';
@@ -103,18 +106,21 @@ export { headingIn, headingsIn } from './utils/heading-in/heading-in.js';
 export { headingLevel } from './utils/heading-level/heading-level.js';
 export { type HostAria, hostAria } from './utils/host-aria/host-aria.js';
 export { hostWords } from './utils/host-words/host-words.js';
+export { howToRegister, type Unregistered } from './utils/how-to-register/how-to-register.js';
 export { defaultButton, submitImplicitly, submits, submitsOnEnter, } from './utils/implicit-submit/implicit-submit.js';
 export { type DisableableItem, forgetDisabled, inheritDisabled, } from './utils/inherit-disabled/inherit-disabled.js';
 export { inlineStep } from './utils/inline-step/inline-step.js';
 export { isRtl } from './utils/is-rtl/is-rtl.js';
 export { keyClaimed } from './utils/key-claimed/key-claimed.js';
-export { type Curve, linePath, type Point } from './utils/line-path/line-path.js';
+export { labelsOf } from './utils/labels-of/labels-of.js';
+export { type Curve, columnPoints, linePath, type Point } from './utils/line-path/line-path.js';
 export { type EndInSight, endInSight } from './utils/load-more/load-more.js';
 export { localeOf, runtimeLocale } from './utils/locale-of/locale-of.js';
 export { markRegion, type RegionOptions } from './utils/mark-region/mark-region.js';
 export { copiesOf, type MediaCopy, sameCopies, } from './utils/media-copy/media-copy.js';
 export { nameText } from './utils/name-text/name-text.js';
 export { nearest } from './utils/nearest/nearest.js';
+export { numberConverter, timeConverter } from './utils/number-converter/number-converter.js';
 export { formatNumber, formatPercent, parseNumber, readingText, } from './utils/number-format/number-format.js';
 export { onUnlessFalse } from './utils/on-unless-false/on-unless-false.js';
 export { applyOwnRule, type OwnRule } from './utils/own-rule/own-rule.js';

package/dist/index.js

@@ -4,6 +4,7 @@ export { auditNesting } from '@fusion.dev/helix-core/audits/nesting';
 export { auditServed } from '@fusion.dev/helix-core/audits/served';
 export { AriaForwardController, } from './controllers/aria-forward-controller/aria-forward-controller.js';
 export { ArrivalController, } from './controllers/arrival-controller/arrival-controller.js';
+export { CategoryAxisController, } from './controllers/category-axis-controller/category-axis-controller.js';
 export { ChartPointerController, } from './controllers/chart-pointer-controller/chart-pointer-controller.js';
 export { ChildrenController } from './controllers/children-controller/children-controller.js';
 export { CommandController, HelixFallbackCommandEvent, supportsInvokers, } from './controllers/command-controller/command-controller.js';
@@ -43,7 +44,7 @@ export { HelixElement, whenHydrated } from './helix-element/helix-element.js';
 export { MIRROR_RULE, SCROLLER_RULE, SPOKEN_RULE, VIRTUAL_RULE, } from './helix-element/mark-rules.js';
 export { HelixFormElement } from './helix-form-element/helix-form-element.js';
 export { HelixFormElementBase } from './helix-form-element/helix-form-element-base.js';
-export { MixinChartSource, PALETTE, PLOT_HEIGHT, PLOT_WIDTH, POSITION_LABEL, seriesIndex, seriesNames, } from './mixins/mixin-chart-source/mixin-chart-source.js';
+export { MixinChartSource, PALETTE, PLOT_HEIGHT, PLOT_WIDTH, POSITION_LABEL, READINGS_PAGE, seriesIndex, seriesNames, } from './mixins/mixin-chart-source/mixin-chart-source.js';
 export { MixinChartStatus, } from './mixins/mixin-chart-status/mixin-chart-status.js';
 export { MixinCollection, } from './mixins/mixin-collection/mixin-collection.js';
 export { MixinControllerActive, } from './mixins/mixin-controller-active/mixin-controller-active.js';
@@ -66,6 +67,7 @@ export { drawAutofill, } from './utils/autofill-select/autofill-select.js';
 export { boxLabels, } from './utils/box-labels/box-labels.js';
 export { addDays, addMonths, barredBy, calendarLocale, localToday, MONTH_CALENDARS, monthOf, monthOut, monthSystem, periodCells, periodKey, periodMove, sameMonth, todayIn, weekendOf, weekStartOf, YEARS_SHOWN, yearOut, yearPageOf, } from './utils/calendar/calendar.js';
 export { capturePointer } from './utils/capture-pointer/capture-pointer.js';
+export { placeLabels, UNMEASURED_LABELS, } from './utils/category-labels/category-labels.js';
 export { centerInView } from './utils/center-in-view/center-in-view.js';
 export { ariaChord, chordParts, matchesChord, printableChord, selectsAll, } from './utils/chord/chord.js';
 export { keyNames } from './utils/chord/key-names.js';
@@ -73,6 +75,7 @@ export { chosenValues } from './utils/chosen-values/chosen-values.js';
 export { clamp } from './utils/clamp/clamp.js';
 export { clockLocale, dayPeriod, isTwelveHour, nearestTime, offeredTimes, timeBarred, timeFault, wheelParts, wholeHour, } from './utils/clock/clock.js';
 export { closestInstance } from './utils/closest-instance/closest-instance.js';
+export { closestName } from './utils/closest-name/closest-name.js';
 export { colorName, hueName } from './utils/color-name/color-name.js';
 export { columnStep } from './utils/column-step/column-step.js';
 export { contextBudget, LIVE, pageBudget, } from './utils/context-budget/context-budget.js';
@@ -103,18 +106,21 @@ export { headingIn, headingsIn } from './utils/heading-in/heading-in.js';
 export { headingLevel } from './utils/heading-level/heading-level.js';
 export { hostAria } from './utils/host-aria/host-aria.js';
 export { hostWords } from './utils/host-words/host-words.js';
+export { howToRegister } from './utils/how-to-register/how-to-register.js';
 export { defaultButton, submitImplicitly, submits, submitsOnEnter, } from './utils/implicit-submit/implicit-submit.js';
 export { forgetDisabled, inheritDisabled, } from './utils/inherit-disabled/inherit-disabled.js';
 export { inlineStep } from './utils/inline-step/inline-step.js';
 export { isRtl } from './utils/is-rtl/is-rtl.js';
 export { keyClaimed } from './utils/key-claimed/key-claimed.js';
-export { linePath } from './utils/line-path/line-path.js';
+export { labelsOf } from './utils/labels-of/labels-of.js';
+export { columnPoints, linePath } from './utils/line-path/line-path.js';
 export { endInSight } from './utils/load-more/load-more.js';
 export { localeOf, runtimeLocale } from './utils/locale-of/locale-of.js';
 export { markRegion } from './utils/mark-region/mark-region.js';
 export { copiesOf, sameCopies, } from './utils/media-copy/media-copy.js';
 export { nameText } from './utils/name-text/name-text.js';
 export { nearest } from './utils/nearest/nearest.js';
+export { numberConverter, timeConverter } from './utils/number-converter/number-converter.js';
 export { formatNumber, formatPercent, parseNumber, readingText, } from './utils/number-format/number-format.js';
 export { onUnlessFalse } from './utils/on-unless-false/on-unless-false.js';
 export { applyOwnRule } from './utils/own-rule/own-rule.js';

package/dist/mixins/mixin-chart-source/mixin-chart-source.d.ts

@@ -143,6 +143,11 @@ export declare class MixinChartSourceInterface {
      * cells are shown as the table writes them, whatever this says.
      */
     locale: string;
+    /**
+     * The name of the button that shows the next page of readings in the table
+     * drawn from `data`, which holds a page at a time past `READINGS_PAGE`.
+     */
+    nextReadingsLabel: string;
     /**
      * Where a reading the keys moved to stands among the readings, said after
      * it. `{position}` and `{count}` are replaced with the numbers, written in
@@ -152,6 +157,17 @@ export declare class MixinChartSourceInterface {
      * {count}`, or to nothing to say no position.
      */
     positionLabel: string;
+    /**
+     * The name of the button that shows the previous page of readings in the
+     * table drawn from `data`.
+     */
+    previousReadingsLabel: string;
+    /**
+     * Which readings the page of the table drawn from `data` holds, said beside
+     * its buttons and as each page arrives. `{first}`, `{last}` and `{count}`
+     * are replaced with the numbers, written in `locale`.
+     */
+    readingsLabel: string;
     /**
      * Whether the readings have been looked for: false on the server and while
      * hydrating, where no table is resolved and no data is read.
@@ -209,6 +225,18 @@ export declare class MixinChartSourceInterface {
      */
     protected renderTable(): TemplateResult | typeof nothing;
 }
+/**
+ * How many readings the table drawn from `data` holds at once.
+ *
+ * **A table of every reading cost four elements a reading**, so a chart of
+ * 10,000 readings built 40,000 nodes before its first frame and rebuilt them
+ * on every new set of data, and a screen reader was handed a table it would
+ * take an afternoon to read. Past this many the table holds a page of them,
+ * says which, and takes buttons to the next and the previous page, which a
+ * screen reader presses as it reads. The keys on the plot still walk every
+ * reading.
+ */
+export declare const READINGS_PAGE = 200;
 /**
  * The words a chart says a reading's place in by default, such as "2 of 12":
  * every chart's `position-label`, and Sparkline's, which is no chart source.