@expressivecss/expressive 0.15.0 → 0.17.0

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

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
+import { Component, BaseOptions, InitElement, InitElements } from '../core/component';
 /** `[longitude, latitude]`, MapLibre's order. */
 export type LngLat = [number, number];
 /**
@@ -6,22 +6,117 @@ export type LngLat = [number, number];
  * the published types do not depend on MapLibre.
  */
 export interface MapLibre {
-    Map: new (options: object) => any;
-    Marker: new (options: object) => any;
-    Popup: new (options: object) => any;
+    Map: new (options: MapInit) => MapInstance;
+    Marker: new (options: object) => MapMarker;
+    Popup: new (options: object) => MapPopup;
+}
+/**
+ * What `new Map()` gets. Only the container is declared; the style, center,
+ * zoom and `mapOptions` ride along, and MapLibre types them itself.
+ */
+export interface MapInit {
+    container: HTMLElement;
+}
+/** A point on the map, as MapLibre hands it back. */
+export interface MapLngLat {
+    lng: number;
+    lat: number;
+}
+/** A map click, with the DOM event behind it and, on a layer, the features hit. */
+export interface MapMouseEvent {
+    originalEvent: MouseEvent;
+    lngLat: MapLngLat;
+    features?: Array<{
+        properties: Record<string, unknown>;
+        geometry: {
+            coordinates: LngLat;
+        };
+    }>;
+}
+export interface MapMarker {
+    getElement(): HTMLElement;
+    getLngLat(): MapLngLat;
+    setLngLat(at: LngLat | MapLngLat): this;
+    addTo(map: MapInstance): this;
+    on(event: 'dragstart' | 'dragend', callback: () => void): unknown;
+    remove(): unknown;
+}
+export interface MapPopup {
+    getElement(): HTMLElement | undefined;
+    setDOMContent(content: Node): this;
+    setLngLat(at: LngLat | MapLngLat): this;
+    addTo(map: MapInstance): this;
+    isOpen(): boolean;
+    on(event: 'open' | 'close', callback: () => void): unknown;
+    remove(): unknown;
+}
+/** A style layer, as `getStyle()` lists them. */
+export interface MapLayer {
+    id: string;
+    source?: string;
+    layout?: Record<string, unknown>;
+}
+/** A source, as `getSource()` returns it. */
+export interface MapSource {
+    type: string;
+}
+/** A clustered GeoJSON source, which is what `addClusters()` registers. */
+export interface MapClusterSource extends MapSource {
+    getClusterExpansionZoom(clusterId: unknown): Promise<number>;
+}
+/** The parts of a `maplibre-gl` `Map` this component calls. */
+export interface MapInstance {
+    on(event: string, listener: (e: MapMouseEvent) => void): unknown;
+    on(event: string, layer: string, listener: (e: MapMouseEvent) => void): unknown;
+    off(event: string, layer: string, listener: (e: MapMouseEvent) => void): unknown;
+    remove(): void;
+    zoomIn(): unknown;
+    zoomOut(): unknown;
+    resetNorthPitch(): unknown;
+    getZoom(): number;
+    getMinZoom(): number;
+    getMaxZoom(): number;
+    getBearing(): number;
+    getCanvas(): HTMLCanvasElement;
+    getStyle(): {
+        glyphs?: string;
+        layers: MapLayer[];
+    };
+    setStyle(style: string | object | null, options?: {
+        diff?: boolean;
+    }): unknown;
+    getSource(id: string): MapSource | undefined;
+    addSource(id: string, source: object): unknown;
+    removeSource(id: string): unknown;
+    addLayer(layer: object): unknown;
+    removeLayer(id: string): unknown;
+    project(at: MapLngLat): {
+        x: number;
+        y: number;
+    };
+    unproject(point: [number, number]): MapLngLat;
+    panBy(offset: [number, number]): unknown;
+    flyTo(options: {
+        center: LngLat;
+        zoom: number;
+    }): unknown;
+    easeTo(options: {
+        center: LngLat;
+        zoom: number;
+    }): unknown;
 }
 /** A style for each color scheme. The map follows the page's theme. */
 export interface MapThemedStyle {
     light: string | object;
     dark: string | object;
 }
-export interface MapViewOptions extends BaseOptions {
+export interface MapViewOptions<L extends MapLibre = MapLibre> extends BaseOptions {
     /**
      * The `maplibre-gl` module. ExpressiveCSS does not bundle MapLibre, so the
      * page imports it and passes it in.
      * @default null
      */
-    maplibregl: MapLibre | null;
+    maplibregl: L | null;
     /**
      * A MapLibre style URL or object, or `{ light, dark }` to follow the theme.
      * @default OpenFreeMap Positron and Dark
@@ -78,19 +173,24 @@ 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.
  *
  * The class is `MapView` rather than `Map` so importing it does not shadow
  * JavaScript's `Map`.
  */
-export declare class MapView extends Component<MapViewOptions> {
-    /** The MapLibre map. */
-    map: any;
+export declare class MapView<L extends MapLibre = MapLibre> extends Component<MapViewOptions<L>> {
+    /**
+     * The MapLibre map, with the full type of the `maplibregl` passed to the
+     * constructor; `init()` and `getInstance()` see the `MapInstance` subset.
+     */
+    map: InstanceType<L['Map']> | null;
     /** The MapLibre markers made from `.map-marker` children, in order. */
-    markers: any[];
+    markers: MapMarker[];
     private _children;
     private _popups;
     private _markerPopups;
@@ -98,25 +198,20 @@ export declare class MapView extends Component<MapViewOptions> {
     private _styleReady;
     private _dark;
     private _location;
-    private _media;
     private _observer;
     private _zoomIn;
     private _zoomOut;
-    constructor(el: HTMLElement, options: Partial<MapViewOptions>);
+    private _picked;
+    private _dragged;
+    private _restore;
+    private _actions;
+    /** Initializes a map, typed by the `maplibregl` passed in. */
+    static init<L extends MapLibre>(this: typeof MapView, el: HTMLElement, options?: Partial<MapViewOptions<L>>): MapView<L>;
+    /** Initializes a map on each element, typed by the `maplibregl` passed in. */
+    static init<L extends MapLibre>(this: typeof MapView, els: InitElements<InitElement>, options?: Partial<MapViewOptions<L>>): MapView<L>[];
+    constructor(el: HTMLElement, options: Partial<MapViewOptions<L>>);
     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 +228,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 +256,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
@@ -110,35 +121,35 @@ export declare class Menu extends Component<MenuOptions> implements Openable {
     private _contextPoint;
     /** What had focus when a context menu opened; focus goes back there. */
     private _contextReturn;
+    /** Each attribute setup wrote, with the value it had before, for destroy(). */
+    private _originalAttributes;
+    /** Where the menu was before it moved next to the trigger. */
+    private _originalPlace;
     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;
+    private static _inOpenTrigger;
     _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;
@@ -154,14 +165,36 @@ 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;
+    /** Keeps the value an attribute had before setup first changed it, which destroy() puts back. */
+    private _keepAttribute;
+    private _setAttribute;
+    /**
+     * Puts back the attributes setup wrote and the menu where it was, so a
+     * destroyed trigger is no longer announced as a menu button. The place is
+     * only used while it is still in the page.
+     */
+    private _restoreSetup;
     _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;
@@ -173,15 +206,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
@@ -189,6 +240,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;
 }

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

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
+import { Component, BaseOptions } from '../core/component';
 export interface NavigationRailOptions extends BaseOptions {
     /**
      * Called before the rail expands.
@@ -20,17 +20,19 @@ export interface NavigationRailOptions extends BaseOptions {
 /**
  * Navigation rail. Layout is CSS (collapsed / .expanded). This class
  * toggles that class from the menu button, closes a compact overlay on
- * Escape or a scrim tap, and keeps aria-expanded in sync.
+ * Escape or a scrim tap, and keeps aria-expanded in sync. A destination's
+ * .navigation-rail-panel is a native popover; this class also opens it on
+ * mouse hover.
  */
 export declare class NavigationRail extends Component<NavigationRailOptions> {
     isExpanded: boolean;
     private _toggle;
     private _mql;
+    private _hoverPanel;
+    private _hoverTimer;
     constructor(el: HTMLElement, options: Partial<NavigationRailOptions>);
     static get defaults(): NavigationRailOptions;
-    static init(el: HTMLElement, options?: Partial<NavigationRailOptions>): NavigationRail;
-    static init(els: InitElements<InitElement>, options?: Partial<NavigationRailOptions>): NavigationRail[];
-    static getInstance(el: HTMLElement): NavigationRail;
+    static key: string;
     destroy(): void;
     /**
      * Expands the rail. On compact windows the overlay (scrim) is CSS.
@@ -48,6 +50,15 @@ export declare class NavigationRail extends Component<NavigationRailOptions> {
     private _isCompact;
     private _isModal;
     private _sync;
+    /** The side panel of the enabled destination around `target`, if any. */
+    private _panelAt;
+    private _hoverOpen;
+    private _hoverClose;
+    private _onPointerOver;
+    private _onPointerLeave;
+    private _pinPanel;
     private _onClick;
+    private _escapePanel;
+    private _isScrimClick;
     private _onKeyDown;
 }

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

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
+import { Component, BaseOptions } from '../core/component';
 export interface ParticlesOptions extends BaseOptions {
     /**
      * Number of particles.
@@ -50,22 +50,39 @@ export declare class Particles extends Component<ParticlesOptions> {
     private _particles;
     private _width;
     private _height;
+    /** The device pixel ratio the buffer was sized for, which painting scales by. */
+    private _dpr;
     private _frame;
     private _last;
     private _mouse;
     private _still;
+    private _visible;
+    private _motion;
+    private _theme;
     private _resizeObserver;
     private _visibility;
     constructor(el: HTMLElement, options: Partial<ParticlesOptions>);
     static get defaults(): ParticlesOptions;
-    static init(el: HTMLElement, options?: Partial<ParticlesOptions>): Particles;
-    static init(els: InitElements<InitElement>, options?: Partial<ParticlesOptions>): Particles[];
-    static getInstance(el: HTMLElement): Particles;
+    static key: string;
     destroy(): void;
+    private _animate;
+    private _onMotion;
+    private _repaint;
     private _start;
     private _stop;
     private _onPointerMove;
-    private _reset;
+    /** Matches the pixel buffer to the canvas box, which clears it. */
+    private _fit;
+    /** Scatters a new set of particles. */
+    private _scatter;
+    /**
+     * Refits the buffer and moves each particle with the box, so a drag that
+     * resizes the canvas every frame keeps the same dots. It used to scatter a
+     * new set each time. A box that had no size has no positions to keep.
+     * Refitting clears the buffer, and the observer runs after this frame's
+     * draw, so a moving canvas is painted here too or it shows blank.
+     */
+    private _resize;
     private _particle;
     private _draw;
     private _paint;

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

@@ -1,13 +1,16 @@
-import { InitElements, InitElement } from '../core/component';
 import { LineChart, LineChartOptions } from './lineChart';
 export type PieChartOptions = LineChartOptions;
 /**
  * Pie chart. It reads its <table> like LineChart, but draws each row of the
  * first value column as a slice of the whole, clockwise from the top, with
  * a legend of every row and its share. With `.donut`, a <tfoot> row is the
- * total in the middle. Further columns show in the tooltip.
+ * total in the middle. Further columns show in the tooltip. With
+ * `data-other`, rows under that percentage of the whole become one row,
+ * last, named by `data-other-label` ("Other" by default); the table keeps
+ * every row.
  *
- * Re-run `PieChart.init(el)` after changing the table.
+ * Call `update()` after changing the table, or start it with `watch` or
+ * `data-watch`.
  */
 export declare class PieChart extends LineChart {
     /** Each row's start and end, as fractions of a turn clockwise from the top. */
@@ -18,18 +21,35 @@ export declare class PieChart extends LineChart {
     /** Percent formatters by fraction digits, rebuilt once per legend. */
     private _percents;
     protected get _type(): string;
-    protected get _key(): string;
+    /** A pie has no value axis. */
+    protected get _axis(): boolean;
     protected get _points(): boolean;
     protected get _circular(): boolean;
-    static init(el: HTMLElement, options?: Partial<PieChartOptions>): PieChart;
-    static init(els: InitElements<InitElement>, options?: Partial<PieChartOptions>): PieChart[];
-    static getInstance(el: HTMLElement): PieChart;
+    protected _read(): void;
+    /**
+     * The group's sum written like its cells: with their signs, and to their
+     * decimals, or compact when data-value stands behind text such as "$38M".
+     */
+    private _written;
+    private _precision;
+    /**
+     * Which rows data-other groups: those with a value under that percentage
+     * of the whole. Null when it groups nothing, as one small row is clearer
+     * by its own name.
+     */
+    private _small;
+    static key: string;
     show(index: number): void;
     /** CSS places the tooltip on the slice's middle from --turn. */
     protected _place(index: number): void;
     /** The row's share of the whole as a percentage, or '' for none. */
-    private _share;
-    private _percent;
+    protected _share(index: number): string;
+    /**
+     * Each slice's row name outside it, on the slice's middle, with a leader
+     * line back to the slice. Names on the right half run rightwards and those
+     * on the left run leftwards.
+     */
+    private _names;
     /** The legend: every row with its color, its cell and its share. */
     protected _guides(): Element[];
     /** The row under the pointer by its angle from the middle, or -1 off the slices. */
@@ -40,4 +60,8 @@ export declare class PieChart extends LineChart {
      * total are HTML over it.
      */
     protected _draw(): Element;
+    /** The .values shares on the slices and the .labels names outside them. */
+    private _texts;
+    /** Each slice's share on it, except on slices too thin to hold it. */
+    private _values;
 }