@expressivecss/expressive 0.14.1 → 0.16.0

package/dist/types/components/lineChart.d.ts

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
+import { Component, BaseOptions } from '../core/component';
 export interface LineChartOptions extends BaseOptions {
     /**
      * Lowest value on the y axis. Defaults to the data minimum less 10% of
@@ -11,14 +11,61 @@ export interface LineChartOptions extends BaseOptions {
      * the range. Overridden by `data-max` on the chart.
      */
     max: number | null;
+    /**
+     * Redraws the chart whenever its table changes, once for the edits a
+     * script makes in one run, so page script need not call `update()`.
+     * `data-watch` on the chart turns it on too. Read when the chart starts.
+     */
+    watch: boolean;
 }
 export declare const COLORS = 4;
-/** An SVG element with its attributes. */
-export declare function svgNode(name: string, attributes?: Record<string, string>): SVGElement;
+/**
+ * The legend of a pie or radial chart: an item per row, colored as
+ * `colors[i]` when that is set, holding a span for each of `rows[i]`.
+ */
+export declare function rowLegend(className: string, colors: (string | undefined)[], rows: string[][]): HTMLUListElement;
+/** A point at a turn clockwise from the top and a distance from the middle, as "x,y". */
+export declare function polarPoint(turn: number, r: number): string;
+/** A series' color number, for its `data-series`. */
+export declare const seriesColor: (i: number) => string;
+/**
+ * The timing of the paths' motion after update(), from the chart's motion
+ * tokens, as the columns' CSS transition reads them. Null for a zero
+ * duration, which SVG would take as indefinite and hold the old shape.
+ * ponytail: a curve that overshoots is not a valid SVG spline, so the
+ * paths then skip their motion; a linear() token gets the standard curve.
+ */
+export declare function pace(el: Element): {
+    dur: string;
+    keySplines: string;
+};
+/**
+ * Moves a path from the path data `from` to its own. SVG animation rather
+ * than a CSS transition, since WebKit cannot transition the d property.
+ */
+export declare function morph(path: SVGElement, from: string, timing: Pace): void;
+/** The paths' motion timing. */
+type Pace = NonNullable<ReturnType<typeof pace>>;
+/** A round step that cuts `span` into at most `parts` pieces. */
+export declare function niceStep(span: number, parts?: number): number;
+/** The multiples of `step` from `low` to `high`, without float error. */
+export declare function steps(low: number, high: number, step: number): number[];
+/** A number format in the element's language, or the browser's for an invalid lang attribute. */
+export declare function numberFormat(el: Element, options: Intl.NumberFormatOptions): Intl.NumberFormat;
+/** A y scale's ends, and with .axis the values its labels mark. */
+export interface ChartScale {
+    min: number;
+    max: number;
+    ticks: number[];
+}
 export interface Series {
     name: string;
     /** Header cell classes, such as `dashed`. */
     className: string;
+    /** The series' column in the table, from 1, which tells apart two of one name. */
+    column: number;
+    /** The `data-series` color number, by its column, so hiding a series shifts none. */
+    color: string;
     /** Cell text, shown in the tooltip as the author formatted it. */
     text: string[];
     values: (number | null)[];
@@ -31,13 +78,35 @@ export interface Series {
     base?: (number | null)[];
     /** The series' y scale: a value's distance down the plot, in percent. */
     y: (value: number) => number;
+    scale: ChartScale;
+    /**
+     * The currency, percent or spacing around the first number written as
+     * cell text, such as ['$', ''], which the axis labels repeat.
+     */
+    affix: [string, string];
 }
+/**
+ * Reads a cell as a number. `data-value` wins over the text, which may carry
+ * currency or percent signs, grouping commas and a typographic minus around
+ * one number. Anything else, such as "(1,200)" or "3–5", is a gap rather
+ * than a guess.
+ */
+export declare function cellValue(cell: Element | undefined): number | null;
+/** Reads text as one number, as cellValue does, or null. */
+export declare function numberValue(raw: string): number | null;
+/** An axis label: the tick in `format`, with the column's signs after any minus. */
+export declare function tickText(format: Intl.NumberFormat, tick: number, [prefix, suffix]: [string, string]): string;
+/** The currency, percent and spacing around a cell's number, as [prefix, suffix]. */
+export declare function signs(text: string): [string, string];
+/** The signs around the first value a column spells out in its text. */
+export declare function affix(cells: (Element | undefined)[]): [string, string];
 /**
  * Line chart. The data is the chart's <table>; this class draws it as an SVG
  * with x labels, a legend for more than one series, and a cursor and tooltip
  * that follow the pointer or the arrow keys. Styling is CSS.
  *
- * Re-run `LineChart.init(el)` after changing the table.
+ * Call `update()` after changing the table, or start it with `watch` or
+ * `data-watch`.
  */
 export declare class LineChart extends Component<LineChartOptions> {
     /** The values' x positions and series, read from the table. */
@@ -46,6 +115,19 @@ export declare class LineChart extends Component<LineChartOptions> {
     /** The highlighted row, or -1. */
     activeIndex: number;
     private _generated;
+    /** Watches the row labels' width, to thin them on a narrow chart. */
+    private _labelSizes;
+    /** With `watch`, redraws the chart when its table changes. */
+    private _tableWatch;
+    /** Every series in the table, shown or not, as the legend lists them. */
+    protected _all: Series[];
+    /**
+     * During update(), the series drawn before it, which the new marks move
+     * from. Empty otherwise, and when the reader prefers less motion.
+     */
+    protected _before: Series[];
+    /** The columns of the series a .toggle legend hid, kept through update(). */
+    private _hidden;
     /** The table's header cells and body rows, as read. */
     protected _header: HTMLTableCellElement[];
     protected _rows: HTMLTableRowElement[];
@@ -60,6 +142,10 @@ export declare class LineChart extends Component<LineChartOptions> {
     protected _reversed: boolean;
     /** The class prefix of the generated parts; ColumnChart reuses this class. */
     protected get _type(): string;
+    /** The column the series start at; a scatter chart's first value column is its x axis. */
+    protected get _seriesFrom(): number;
+    /** The column the series end before, as slice() takes it; a bubble chart's last column holds sizes. */
+    protected get _seriesTo(): number | undefined;
     /** Whether the y axis always includes zero, as columns grow from it. */
     protected get _fromZero(): boolean;
     /**
@@ -72,15 +158,34 @@ export declare class LineChart extends Component<LineChartOptions> {
      * arrows then step round it, wrapping from the last row to the first.
      */
     protected get _circular(): boolean;
+    /** Whether .axis labels the value scale, which a sparkline never does. */
+    protected get _axis(): boolean;
     /** Whether the cursor marks each series with a point. */
     protected get _points(): boolean;
-    protected get _key(): string;
+    /** How many rows `show()` can highlight. */
+    protected get _count(): number;
     constructor(el: HTMLElement, options: Partial<LineChartOptions>);
+    /**
+     * Observes the table as it is now, and the chart for a table added or
+     * replaced. Reconnecting drops the changes already queued, which the
+     * caller has just drawn.
+     */
+    private _watch;
+    /** Reads the table and draws it, when it has data. */
+    private _build;
+    /** Whether the pointer and keys pick rows, which a sparkline's do not. */
+    private get _interactive();
+    /** Lets the pointer and keys pick rows on the plot. */
+    private _listen;
     static get defaults(): LineChartOptions;
-    static init(el: HTMLElement, options?: Partial<LineChartOptions>): LineChart;
-    static init(els: InitElements<InitElement>, options?: Partial<LineChartOptions>): LineChart[];
-    static getInstance(el: HTMLElement): LineChart;
+    static key: string;
     destroy(): void;
+    /**
+     * Redraws the chart from its table as it is now. Focus stays on the chart,
+     * on the same legend button when one had it, and the highlighted row stays
+     * where the table still has it.
+     */
+    update(): void;
     /**
      * Highlights one row: moves the cursor and fills the tooltip.
      * Pass -1 to hide them. Does nothing for a chart without data.
@@ -91,7 +196,22 @@ export declare class LineChart extends Component<LineChartOptions> {
      * tooltip opening back over the plot past the middle.
      */
     protected _place(index: number): void;
-    private _read;
+    protected _read(): void;
+    /**
+     * The series to draw, arranged: those the legend has not hidden, or none
+     * without data. When the ones shown hold no data, as after the table
+     * changed, the hidden ones come back, so the legend never hides the only
+     * data there is.
+     */
+    private _shown;
+    /** Turns the values read into what is drawn: with .stacked, running totals. */
+    protected _arrange(series: Series[]): void;
+    /**
+     * Stacks each series on the ones before it: its tops become running
+     * totals and its base the total below. A gap leaves the total unknown, so
+     * the series above break there too.
+     */
+    protected _stack(series: Series[]): void;
     /** A number from one of the chart's data attributes, or null. */
     protected _number(name: string): number;
     /**
@@ -99,6 +219,13 @@ export declare class LineChart extends Component<LineChartOptions> {
      * are set, and gives it to each series.
      */
     protected _scale(series: Series[], min: number | null, max: number | null, fromZero?: boolean): (value: number) => number;
+    /**
+     * With .axis, widens each end the chart chose to a round step and lists
+     * the steps for the labels. An end set by the author stays where it is.
+     */
+    protected _fit(min: number, max: number, [fixedMin, fixedMax]: readonly boolean[]): ChartScale;
+    /** Gives the series a scale and the y function it draws with. */
+    protected _apply(series: Series[], scale: ChartScale): (value: number) => number;
     /** Each row sits in the middle of an equal band, beside its label. */
     private _x;
     private _render;
@@ -109,10 +236,48 @@ export declare class LineChart extends Component<LineChartOptions> {
     protected _total(className: string): HTMLElement | null;
     /** The parts below the plot: the row labels and the legend. */
     protected _guides(): Element[];
-    /** The series legend, for more than one series. */
+    /**
+     * Thins the column labels in container whenever its width changes. A bar
+     * chart's labels run down instead, and no labels leaves nothing to watch.
+     */
+    protected _observeLabels(container: HTMLElement, items: Element[]): void;
+    /**
+     * With .axis, the value labels, behind the marks: the start scale's with
+     * a grid line at each, and a mixed chart's end scale on the far side.
+     */
+    protected _axes(): Element[];
+    /** One scale's labels, each placed by --at, its value's distance down the plot. */
+    private _valueAxis;
+    /**
+     * The series legend, for more than one series. With .toggle each item is
+     * a button that shows or hides its series, and the scale refits.
+     */
     protected _legend(): Element[];
+    /** A button that shows or hides a series, though never the last one shown. */
+    private _toggle;
     /** Draws the series, which fill the plot. */
     protected _draw(drawn?: Series[]): Element;
+    /**
+     * After update(), the shape each series moves from: where it was drawn,
+     * and for a row it had no value at, its base. That is the plot bottom,
+     * or in a stack where the series below starts, so the stack stays joined.
+     */
+    private _starts;
+    /** Where a series drew each row before update(), or its base for a row it had no value at. */
+    private _was;
+    /** Where a stacked area's base runs: the series below, or the plot bottom when zero is off the scale. */
+    private _baseY;
+    /**
+     * A series' paths, with its rows at `top` and a stacked area's base at
+     * `base`. The line is smooth, or with .straight straight, and a gap in the
+     * data breaks it into runs.
+     */
+    private _shape;
+    /**
+     * One series' group: its line, the fill under it, and with .points a dot
+     * at each value. After update() each path moves from its `from` shape.
+     */
+    private _line;
     private _onPointerMove;
     /** The row under the pointer, or -1. */
     protected _indexAt(e: PointerEvent): number;
@@ -132,3 +297,4 @@ export declare class LineChart extends Component<LineChartOptions> {
     protected _keyTarget(key: string): number | undefined;
     private _onKeyDown;
 }
+export {};

package/dist/types/components/loadingOverlay.d.ts

@@ -0,0 +1,42 @@
+import { Component, BaseOptions } from '../core/component';
+/** What the status region announces. */
+export interface LoadingOverlayI18nOptions {
+    /** Announced when the region becomes busy. */
+    loading: string;
+    /** Announced when it clears. */
+    loaded: string;
+}
+export interface LoadingOverlayOptions extends BaseOptions {
+    /** What the status region announces when the region becomes busy and when it clears. */
+    i18n: Partial<LoadingOverlayI18nOptions>;
+}
+/**
+ * Loading overlay. While the page sets `aria-busy="true"` on the region, the
+ * region is inert, so nothing inside it takes a click, a tap or keyboard
+ * focus, and the stylesheet shows a scrim and the author's loading indicator
+ * over it. The page clears the region by removing the attribute or setting it
+ * to anything else; there is no method for either.
+ *
+ * Inert content leaves the accessibility tree, the indicator's status
+ * included, so the start and the finish are announced from a status region
+ * the script adds after the region.
+ */
+export declare class LoadingOverlay extends Component<LoadingOverlayOptions> {
+    static key: string;
+    private _status;
+    private _observer;
+    private _busy;
+    /** The region's own `inert`, put back when it clears. */
+    private _wasInert;
+    /** The element inside the region that had focus when it became busy. */
+    private _focus;
+    constructor(el: HTMLElement, options: Partial<LoadingOverlayOptions>);
+    static get defaults(): LoadingOverlayOptions;
+    destroy(): void;
+    /** Follows `aria-busy`. Other values than "true" clear, as ARIA treats them. */
+    private _sync;
+    private _start;
+    private _clear;
+    /** The deferred first announcement, unless the region cleared or the instance went first. */
+    private _announceStart;
+}

package/dist/types/components/mapView.d.ts

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
+import { Component, BaseOptions } from '../core/component';
 /** `[longitude, latitude]`, MapLibre's order. */
 export type LngLat = [number, number];
 /**
@@ -78,8 +78,10 @@ export interface MapClusterOptions {
  * Each marker sits at its `data-lng-lat`. A marker button with
  * `aria-controls` opens the `.map-popup` it names; a popup with its own
  * `data-lng-lat` and no marker opens at init. Buttons in `.map-controls`
- * run their `data-action`: `zoom-in`, `zoom-out`, `compass`, `locate` or
- * `fullscreen`. Routes, arcs and clusters are data, so they are added from
+ * run their `data-action`: `zoom-in`, `zoom-out`, `compass`, `locate`,
+ * `fullscreen` or `pan-up`, `pan-down`, `pan-left` and `pan-right`. A
+ * `data-draggable` marker moves without a drag too: a tap picks it up and
+ * the next tap on the map drops it, and the arrow keys nudge it. Routes, arcs and clusters are data, so they are added from
  * script. The default style follows the page's light or dark theme, and
  * line and cluster colors come from the theme.
  *
@@ -98,25 +100,16 @@ export declare class MapView extends Component<MapViewOptions> {
     private _styleReady;
     private _dark;
     private _location;
-    private _media;
     private _observer;
     private _zoomIn;
     private _zoomOut;
+    private _picked;
+    private _dragged;
+    private _restore;
+    private _actions;
     constructor(el: HTMLElement, options: Partial<MapViewOptions>);
     static get defaults(): MapViewOptions;
-    /**
-     * Initializes instance of MapView.
-     * @param el HTML element.
-     * @param options Component options.
-     */
-    static init(el: HTMLElement, options?: Partial<MapViewOptions>): MapView;
-    /**
-     * Initializes instances of MapView.
-     * @param els HTML elements.
-     * @param options Component options.
-     */
-    static init(els: InitElements<InitElement>, options?: Partial<MapViewOptions>): MapView[];
-    static getInstance(el: HTMLElement): MapView;
+    static key: string;
     destroy(): void;
     /** Draws a line through `[longitude, latitude]` points. Replaces an overlay with the same id. */
     addRoute(id: string, coordinates: LngLat[], options?: MapLineOptions): void;
@@ -133,6 +126,20 @@ export declare class MapView extends Component<MapViewOptions> {
     private _line;
     private _draw;
     private _addMarker;
+    /** A marker moved: its `data-lng-lat` holds the new place, and it fires `change`. */
+    private _moved;
+    private _makeMovable;
+    /** Takes back the attributes `_makeMovable()` added. Destroy removes its listeners. */
+    private _releaseMarkers;
+    /** The arrow keys move a focused draggable marker 10px, and the map stays put. */
+    private _nudge;
+    /** Picks a marker up, or puts down the one already picked up. */
+    private _pick;
+    private _tapMarker;
+    private _tapMovable;
+    /** A third of the map's width or height in a direction. */
+    private _pan;
+    private _toggleFullscreen;
     private _popup;
     private _toggle;
     private _buttons;
@@ -147,5 +154,7 @@ export declare class MapView extends Component<MapViewOptions> {
     private _handleFullscreen;
     private _handleClick;
     private _handleMapClick;
+    private _drop;
     private _handleKeydown;
+    private _escape;
 }

package/dist/types/components/menu.d.ts

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, InitElement, Openable } from '../core/component';
+import { Component, BaseOptions } from '../core/component';
 export interface MenuOptions extends BaseOptions {
     /**
      * Defines the edge the menu is aligned to.
@@ -30,6 +30,12 @@ export interface MenuOptions extends BaseOptions {
      * @default false
      */
     coverTrigger: boolean;
+    /**
+     * The side of the trigger the menu opens on when there is room, such as
+     * 'top' for a trigger in a bottom bar. It flips when there is not.
+     * @default 'bottom'
+     */
+    placement: 'bottom' | 'top';
     /**
      * If true, close menu on item click.
      * @default true
@@ -83,7 +89,7 @@ export interface MenuOptions extends BaseOptions {
      */
     onItemClick: (el: HTMLLIElement) => void;
 }
-export declare class Menu extends Component<MenuOptions> implements Openable {
+export declare class Menu extends Component<MenuOptions> {
     static _menus: Menu[];
     /** ID of the menu element. */
     id: string;
@@ -100,8 +106,13 @@ export declare class Menu extends Component<MenuOptions> implements Openable {
     filterTimeout: ReturnType<typeof setTimeout>;
     private _pendingTimers;
     private _transition;
+    /** Removes the listeners an open menu adds. */
+    private _openEvents;
     private _originalInert;
     private _menuClickTargets;
+    private _spaceActivation;
+    /** Whether the pointer opened the menu, so opening leaves focus where it was. */
+    private _openedByHover;
     /**
      * Viewport point the open context menu belongs to. Null outside a
      * right-click, so a keyboard or programmatic open uses the region's corner
@@ -112,33 +123,28 @@ export declare class Menu extends Component<MenuOptions> implements Openable {
     private _contextReturn;
     constructor(el: HTMLElement, options: Partial<MenuOptions>);
     static get defaults(): MenuOptions;
-    /**
-     * Initializes instance of Menu.
-     * @param el HTML element.
-     * @param options Component options.
-     */
-    static init(el: HTMLElement, options?: Partial<MenuOptions>): Menu;
-    /**
-     * Initializes instances of Menu.
-     * @param els HTML elements.
-     * @param options Component options.
-     */
-    static init(els: InitElements<InitElement>, options?: Partial<MenuOptions>): Menu[];
-    static getInstance(el: HTMLElement): Menu;
+    static key: string;
     destroy(): void;
     _setupEventHandlers(): void;
-    _removeEventHandlers(): void;
     _setupTemporaryEventHandlers(): void;
-    _removeTemporaryEventHandlers(): void;
     _handleContextMenu: (e: MouseEvent) => void;
     _handleDocumentContextMenu: (e: MouseEvent) => void;
     _handleClick: (e: MouseEvent) => void;
     _handleMouseEnter: () => void;
     _handleMouseLeave: (e: MouseEvent) => void;
     _handleDocumentClick: (e: MouseEvent) => void;
+    _handleDocumentKeydown: (e: KeyboardEvent) => void;
     _handleTriggerKeydown: (e: KeyboardEvent) => void;
+    _handleMenuPointerdown: () => void;
     _handleDocumentTouchmove: (e: TouchEvent) => void;
     _handleMenuClick: (e: MouseEvent) => void;
+    private _activateItem;
+    private _toggleChecked;
+    private _checkRadio;
+    private _isCheckboxRow;
+    private _closesOnClick;
+    private _keepsOpen;
+    private _closeAfterEnter;
     private _setupAccessibility;
     private _isSubmenuTriggerClick;
     private _setupSubmenus;
@@ -146,6 +152,7 @@ export declare class Menu extends Component<MenuOptions> implements Openable {
     private _syncSubmenuAria;
     private _handleSubmenuAlign;
     private _alignSubmenu;
+    private _closeSubmenu;
     private _closeSubmenus;
     private _containingSubmenu;
     private _focusedRow;
@@ -153,14 +160,27 @@ export declare class Menu extends Component<MenuOptions> implements Openable {
     _handleWindowResize: () => void;
     _resetFilterQuery: () => void;
     private _restoreInert;
+    private _clearActive;
     private _focusRow;
     _resetMenuStyles(): void;
     _resetMenuPositioningStyles(): void;
-    _moveMenuToElement(containerEl?: HTMLElement): void;
+    _moveMenuToElement(): void;
     _makeMenuFocusable(): void;
+    /**
+     * Moves focus for Up, Down, Home or End among the list's focusable rows,
+     * without wrapping, and says whether the key was one of those.
+     */
+    private _moveFocus;
+    /** The list's rows that take focus, in document order. */
+    private _rows;
     private _focusInitialItem;
     _focusFocusedItem(): void;
-    _getMenuPosition(closestOverflowParent: HTMLElement): {
+    /**
+     * Whether a measured menu opens upward: when there is no room below, or
+     * when placement 'top' asks for it and there is room above.
+     */
+    private _opensUp;
+    _getMenuPosition(): {
         x: number;
         y: number;
         verticalAlignment: string;
@@ -172,15 +192,33 @@ export declare class Menu extends Component<MenuOptions> implements Openable {
     private _clearPendingTimers;
     _animateIn(): void;
     _animateOut(): void;
-    private _getClosestAncestor;
     _placeMenu(): void;
+    /**
+     * The side an anchored menu opens on: the one asked for when the whole
+     * menu fits there, or else the roomier one. The anchored height is capped
+     * to its side, so a menu that would only shrink never sets off the
+     * flip-block fallback, and the choice is made here.
+     */
+    private _side;
+    private _reanchorFrame;
+    private _anchorMenu;
+    /**
+     * At most once a frame while the menu is open and something outside it
+     * scrolls, an anchored menu chooses its side again and a measured one
+     * follows its trigger, keeping its own scroll position. A context menu
+     * stays where it opened, and the menu's own scrolling moves nothing.
+     */
+    private _reanchor;
+    private _stopReanchoring;
+    /** The anchored menu's side, the edge it starts from and its growth origin. */
+    private _placeAnchored;
+    private _placeByCoordinates;
     /** Where a context menu opens without a pointer: the region's start corner. */
     private _regionCorner;
     /**
      * Places a context menu with its start corner on the point, flipping to
      * the other side of the point where it would not fit. The bounds are the
-     * viewport, narrowed to a scrolling or clipping ancestor the menu sits in;
-     * a menu taller than them gets their height and scrolls.
+     * viewport; a menu taller than it gets its height and scrolls.
      *
      * The menu rests at left/top 0 of its containing block, so its rect is the
      * offset to subtract - the same trick _getMenuPosition uses. It is measured
@@ -188,6 +226,7 @@ export declare class Menu extends Component<MenuOptions> implements Openable {
      */
     private _placeMenuAtPoint;
     private _setExpanded;
+    private get _canOpen();
     /**
      * Open menu.
      */

package/dist/types/components/menubar.d.ts

@@ -0,0 +1,37 @@
+import { Component, BaseOptions } from '../core/component';
+import { MenuOptions } from './menu';
+export interface MenubarOptions extends BaseOptions {
+    /**
+     * Options for each item's Menu. The defaults size the menus to their
+     * content and open them below the bar.
+     * @default { constrainWidth: false, coverTrigger: false }
+     */
+    menuOptions: Partial<MenuOptions>;
+}
+/**
+ * Menubar. An application's row of menus, such as File, Edit and View. A
+ * `.menubar` holds `.menu-trigger` buttons whose `data-target` menus are
+ * ordinary Menus; this adds the ARIA menubar contract around them. The bar
+ * is `role="menubar"` and each button a `menuitem`, with one tab stop that
+ * follows focus. Left and Right move between items, wrapping, and Home and
+ * End go to the first and last; with a menu open, Left and Right close it
+ * and open the neighbour's, unless the focused row opens or closes a
+ * submenu. Down, Up, Enter and Space open a menu, and Escape closes it,
+ * through Menu itself.
+ */
+export declare class Menubar extends Component<MenubarOptions> {
+    private _added;
+    constructor(el: HTMLElement, options: Partial<MenubarOptions>);
+    static get defaults(): MenubarOptions;
+    static key: string;
+    destroy(): void;
+    private get _items();
+    /** Sets an attribute the author left out, remembering it for destroy(). */
+    private _setAttribute;
+    private _step;
+    /** Focuses the first enabled item after `index` in the `step` direction, wrapping. */
+    private _focusItem;
+    private _onFocusin;
+    private _onBarKeydown;
+    private _onMenuKeydown;
+}

package/dist/types/components/messageScroller.d.ts

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
+import { Component, BaseOptions } from '../core/component';
 export interface MessageScrollerOptions extends BaseOptions {
     /**
      * If true, the viewport follows new content while the reader is at the
@@ -56,19 +56,7 @@ export declare class MessageScroller extends Component<MessageScrollerOptions> {
     private _mutationObserver;
     constructor(el: HTMLElement, options: Partial<MessageScrollerOptions>);
     static get defaults(): MessageScrollerOptions;
-    /**
-     * Initializes instance of MessageScroller.
-     * @param el HTML element.
-     * @param options Component options.
-     */
-    static init(el: HTMLElement, options?: Partial<MessageScrollerOptions>): MessageScroller;
-    /**
-     * Initializes instances of MessageScroller.
-     * @param els HTML elements.
-     * @param options Component options.
-     */
-    static init(els: InitElements<InitElement>, options?: Partial<MessageScrollerOptions>): MessageScroller[];
-    static getInstance(el: HTMLElement): MessageScroller;
+    static key: string;
     destroy(): void;
     /** Scrolls to the latest message and resumes following. */
     scrollToEnd(): void;

package/dist/types/components/mixedChart.d.ts

@@ -1,4 +1,3 @@
-import { InitElements, InitElement } from '../core/component';
 import { ColumnChart } from './columnChart';
 import { LineChartOptions, Series } from './lineChart';
 export type MixedChartOptions = LineChartOptions;
@@ -8,18 +7,28 @@ export type MixedChartOptions = LineChartOptions;
  * line with a fill under it, and anything else as a line. Series with
  * `end` are drawn against a second scale, set by `data-end-min` and
  * `data-end-max`, so values of different sizes or units share the plot.
+ * With `stacked` the columns stack; `points` and `straight` apply to the
+ * lines as in LineChart.
  *
- * Re-run `MixedChart.init(el)` after changing the table.
+ * Call `update()` after changing the table, or start it with `watch` or
+ * `data-watch`.
  */
 export declare class MixedChart extends ColumnChart {
     protected get _type(): string;
-    protected get _key(): string;
     protected get _points(): boolean;
-    static init(el: HTMLElement, options?: Partial<MixedChartOptions>): MixedChart;
-    static init(els: InitElements<InitElement>, options?: Partial<MixedChartOptions>): MixedChart[];
-    static getInstance(el: HTMLElement): MixedChart;
+    static key: string;
+    /**
+     * With .stacked, the columns on each scale stack on the ones before them;
+     * the lines and areas keep their own values.
+     */
+    protected _stack(series: Series[]): void;
     /** The start scale, then the end scale; each includes zero if it has columns. */
     protected _scale(series: Series[], min: number | null, max: number | null): (value: number) => number;
+    /**
+     * With .axis, widens the end scale to as many round steps as the start
+     * scale has, so its labels fall on the start scale's grid lines.
+     */
+    private _align;
     /** Columns behind, then the lines and areas over them. */
     protected _draw(): Element;
 }