@expressivecss/expressive 0.15.0 → 0.16.0

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

@@ -1,18 +1,20 @@
-import { Carousel } from './carousel';
-import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
+import { Component, BaseOptions } from '../core/component';
 export interface TabsOptions extends BaseOptions {
     /**
-     * Transition duration in milliseconds.
-     * @default 300
+     * Indicator transition duration in milliseconds, on an ease-out curve. The
+     * default, null, follows the --md-comp-tabs-indicator-duration and
+     * --md-comp-tabs-indicator-easing spring tokens instead.
+     * @default null
      */
-    duration: number;
+    duration: number | null;
     /**
      * Callback for when a new tab content is shown.
      * @default null
      */
     onShow: (newContent: Element) => void;
     /**
-     * Set to true to enable swipeable tabs.
+     * Set to true to swipe between panels. The panels move into a full-width
+     * scroll-snap track, so touch and trackpad swipes are native scrolling.
      * This also uses the responsiveThreshold option.
      * @default false
      */
@@ -30,56 +32,116 @@ export declare class Tabs extends Component<TabsOptions> {
     _indicator: HTMLElement;
     _tabWidth: number;
     _tabsWidth: number;
-    _tabsCarousel: Carousel;
+    _track: HTMLElement;
+    private _panels;
+    private _scrollTarget;
+    private _scrollTimer;
+    private _trackObserver;
+    private _trackWidth;
     _activeTabLink: HTMLAnchorElement;
     _content: HTMLElement;
     private _originalPanels;
     private _originalLinks;
-    constructor(el: HTMLElement, options: Partial<TabsOptions>);
-    static get defaults(): TabsOptions;
-    /**
-     * Initializes instance of Tabs.
-     * @param el HTML element.
-     * @param options Component options.
-     */
-    static init(el: HTMLElement, options?: Partial<TabsOptions>): Tabs;
     /**
-     * Initializes instances of Tabs.
-     * @param els HTML elements.
-     * @param options Component options.
+     * Whether the page made the strip a tablist. The roles are the author's;
+     * in that mode the component keeps aria-selected and a roving tabindex, and
+     * the arrow keys select as they move, as the ARIA tabs pattern asks.
      */
-    static init(els: InitElements<InitElement>, options?: Partial<TabsOptions>): Tabs[];
-    static getInstance(el: HTMLElement): Tabs;
+    private _tablist;
+    /** The bar's own tabindex as the page wrote it, put back on destroy. */
+    private _barTabindex;
+    /** Re-chooses a tablist's Tab stop when the strip is shown, hidden or resized. */
+    private _stripObserver;
+    constructor(el: HTMLElement, options: Partial<TabsOptions>);
+    private _setupTablist;
+    static get defaults(): TabsOptions;
+    static key: string;
     destroy(): void;
     /**
      * The index of tab that is currently shown.
      */
     get index(): number;
     _setupEventHandlers(): void;
-    _removeEventHandlers(): void;
-    _handleWindowResize: (...args: unknown[]) => void;
+    /**
+     * Left and Right move focus to the next tab, wrapping at the ends, and
+     * Home and End to the first and last; disabled tabs are skipped. In link
+     * tabs focus moves without choosing, and Enter follows the link. In a
+     * tablist the tab that takes focus is selected too, the ARIA pattern's
+     * automatic activation, since a panel here shows at once.
+     */
+    _handleKeydown: (e: KeyboardEvent) => void;
+    /**
+     * In a tablist the tab that takes focus is selected; link tabs wait for
+     * Enter. The page's focus handlers run inside focus(), and one may have
+     * destroyed or replaced the tabs, which then are no longer this instance's.
+     */
+    private _followFocus;
+    private _remeasure;
     _queryTabLinks(): NodeListOf<HTMLAnchorElement>;
     _handleTabClick: (e: MouseEvent) => void;
+    private _select;
+    private _clickSwipeable;
+    private _clickTab;
+    /** Shows the active panel, hides the old one, then reports the change. */
+    private _swapPanels;
     _createIndicator(): void;
     /** Reads both positions before writing either. */
     private _positionIndicator;
     /** The panel a link shows, or null for a `target` link or one without a hash. */
     private _panelFor;
+    /**
+     * The id a hash names. `a.hash` and `location.hash` come back
+     * percent-encoded, so a non-ASCII id would never match without this. A
+     * malformed escape throws, and is then taken as written.
+     */
+    private static _decodeHash;
     /**
      * Which tab is current, for the eye and for assistive technology.
      *
-     * The class alone is a colour. `aria-current` is the part a screen reader
-     * reads, and because tabs are navigation rather than a tablist (rule 2 -
-     * there is no keyboard model here to back a tablist), "current" is exactly
-     * the right word for it. Its *value* changes as the user clicks, which makes
-     * maintaining it the component's job, not the author's - see CONTEXT.md on
+     * The class alone is a colour. Link tabs are navigation, so `aria-current`
+     * is the part a screen reader reads. A strip the page made a tablist reads
+     * `aria-selected` instead, with the keyboard model rule 2 asks of a
+     * composite role. Either value changes as the user picks, which makes
+     * keeping it the component's job, not the author's - see CONTEXT.md on
      * static semantics versus dynamic state. Writing it once in the markup and
      * never moving it left the old tab announcing itself as current.
      */
     private _setActiveTabLink;
+    /** A tablist says selected and keeps one Tab stop; link tabs say current. */
+    private _mark;
+    /**
+     * The tablist's one Tab stop: the selected tab, or the first usable one
+     * when the selected tab is disabled or hidden. The arrow keys skip both,
+     * so a Tab stop on one would leave every other panel out of reach.
+     */
+    private _tabStop;
+    /** Showing or hiding the strip or a tab moves the Tab stop to a usable tab. */
+    private _refreshTabStop;
+    /**
+     * Scrolls an overflowing bar, and only the bar, so the tab is in view.
+     * Measured as a visual offset, so it holds in a right-to-left bar too.
+     */
+    private _reveal;
     _setupActiveTabLink(): void;
     _setupSwipeableTabs(): void;
     _teardownSwipeableTabs(): void;
+    /** Only the shown panel is reachable; the others are off to the side. */
+    private _syncPanels;
+    /** The panel the track is mostly showing. Panels are exactly one track wide. */
+    private _trackIndex;
+    /**
+     * Whether panel `index` fills the track. Compare positions, not rounded
+     * indexes: a scroll still on its way to another panel can already round to
+     * this one. Measured rather than computed from clientWidth, which rounds a
+     * fractional track width, while the mandatory snap lands on the real edge.
+     */
+    private _trackAt;
+    private _scrollToActivePanel;
+    private _waitForScroll;
+    _releaseScrollTarget: () => void;
+    _handleTrackScroll: () => void;
+    private _showPanel;
+    private _notifyShow;
     _setupNormalTabs(): void;
     _setTabsAndTabWidth(): void;
     _calcRightPos(el: any): number;

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

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, InitElement, I18nOptions } from '../core/component';
+import { Component, BaseOptions, I18nOptions } from '../core/component';
 export type Views = 'hours' | 'minutes';
 export interface TimepickerOptions extends BaseOptions {
     /**
@@ -58,12 +58,31 @@ export interface TimepickerOptions extends BaseOptions {
     i18n: Partial<I18nOptions & {
         hours: string;
         minutes: string;
+        seconds: string;
     }>;
     /**
      * Use 12 hour AM/PM clock instead of 24 hour clock.
-     * @default true
+     * @default true, or the clock the input's `lang` uses
      */
     twelveHour: boolean;
+    /**
+     * Add a seconds field after the minutes, and write `HH:MM:SS`. The dial
+     * still sets hours and minutes only.
+     * @default false
+     */
+    showSeconds: boolean;
+    /**
+     * The earliest time a person can choose, as 24-hour `'HH:MM'` or
+     * `'HH:MM:SS'`. Without `showSeconds` it rounds up to a whole minute.
+     * @default null
+     */
+    minTime: string | null;
+    /**
+     * The latest time a person can choose, as 24-hour `'HH:MM'` or
+     * `'HH:MM:SS'`. Without `showSeconds` it rounds down to a whole minute.
+     * @default null
+     */
+    maxTime: string | null;
     /**
      * Vibrate device when dragging clock hand.
      * @default true
@@ -90,7 +109,9 @@ export interface TimepickerOptions extends BaseOptions {
      */
     onCancel: (() => void) | null;
     /**
-     * Display plugin
+     * Display plugin: 'docked' for a popover under the input, or 'modal' for a
+     * dialog with Cancel and Ok. A modal picker writes the input only on Ok,
+     * so it clears `autoSubmit`.
      */
     displayPlugin: string;
     /**
@@ -106,11 +127,15 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     digitalClock: HTMLElement;
     inputHours: HTMLInputElement;
     inputMinutes: HTMLInputElement;
+    /** The seconds field, or null without `showSeconds`. */
+    inputSeconds: HTMLInputElement | null;
     x0: number;
     y0: number;
     moved: boolean;
     /** Which pointer is dragging the clock hand; a second finger is ignored. */
     private _dragPointerId;
+    /** Removes the document listeners of the drag in progress. */
+    private _drag;
     dx: number;
     dy: number;
     /**
@@ -122,6 +147,7 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     minutesView: HTMLElement;
     hours: number;
     minutes: number;
+    seconds: number;
     /** The selected time. */
     time: string;
     /**
@@ -139,7 +165,6 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     private _amBtn;
     private _pmBtn;
     bg: Element;
-    bearing: Element;
     g: Element;
     toggleViewTimer: ReturnType<typeof setTimeout>;
     vibrateTimer: ReturnType<typeof setTimeout>;
@@ -148,32 +173,22 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     private displayPlugin;
     /** Whether the dial (ticks + SVG + AM/PM buttons) has been built yet. */
     private _clockBuilt;
+    /** Whether the pointer last pointed at a value outside the range. */
+    private _handRefused;
+    /** The first and last allowed second of the day. */
+    private _limits;
     constructor(el: HTMLInputElement, options: Partial<TimepickerOptions>);
     static get defaults(): TimepickerOptions;
-    /**
-     * Initializes instance of Timepicker.
-     * @param el HTML element.
-     * @param options Component options.
-     */
-    static init(el: HTMLInputElement, options?: Partial<TimepickerOptions>): Timepicker;
-    /**
-     * Initializes instances of Timepicker.
-     * @param els HTML elements.
-     * @param options Component options.
-     */
-    static init(els: InitElements<HTMLInputElement | InitElement>, options?: Partial<TimepickerOptions>): Timepicker[];
-    static _addLeadingZero(num: number): string;
-    static _createSVGEl(name: string): SVGElement;
-    static getInstance(el: HTMLElement): Timepicker;
+    static key: string;
     destroy(): void;
     _setupEventHandlers(): void;
-    _removeEventHandlers(): void;
-    private _removeDragListeners;
     _handleInputClick: () => void;
     _handleInputKeydown: (e: KeyboardEvent) => void;
     _handleClockClickStart: (e: PointerEvent) => void;
     _handleDocumentClickMove: (e: PointerEvent) => void;
     _handleDocumentClickEnd: (e: PointerEvent) => void;
+    /** Take the value under the hand: move on to the minutes, or submit. */
+    private _chooseHand;
     /**
      * A cancelled pointer is not a completed selection. The browser or the OS
      * took the gesture over, so this only lets go of the drag - it must not run
@@ -181,8 +196,21 @@ export declare class Timepicker extends Component<TimepickerOptions> {
      * and under `autoSubmit` closes the picker on a time the user never chose.
      */
     _handleDocumentClickCancel: (e: PointerEvent) => void;
+    /**
+     * Read `minTime` and `maxTime` as seconds of the day. Without a seconds
+     * field the picker writes whole minutes, so the bounds round inward to a
+     * whole minute: `maxTime` takes in every second of its minute, and the
+     * hidden seconds never clamp.
+     */
+    private _readLimits;
     _insertHTMLIntoDOM(): void;
     _setupVariables(): void;
+    private _removeSecondsField;
+    private _input;
+    /** The units that have a field. */
+    private _units;
+    /** Which unit's field `target` is, if any. */
+    private _unitOf;
     _pickerSetup(): void;
     /**
      * Build the dial, once. Cheap to call repeatedly - every entry point that
@@ -200,6 +228,23 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     _handleAmPmInteraction: (e: HTMLElement) => void;
     _updateAmPmView(): void;
     _updateTimeFromInput(): void;
+    /** Show the time in every field but `except`, which the person is typing in. */
+    private _writeFields;
+    /** After a change to the time: keep it in range and update what depends on it. */
+    private _afterChange;
+    /**
+     * Give each field the allowed range of values, and disable a period with
+     * no allowed time.
+     */
+    private _updateRanges;
+    /** Mark the ticks of a dial view that are outside the range. */
+    private _disableTicks;
+    /** The hour on the 24-hour clock, setting AM or PM on a 12-hour one. */
+    private _setHours24;
+    /** The time as seconds of the day. */
+    private _time;
+    /** Move the time to the nearest allowed time, and say whether it moved. */
+    private _clamp;
     /**
      * Show hours or minutes view on timepicker.
      * @param view The name of the view you want to switch to, 'hours' or 'minutes'.
@@ -208,14 +253,61 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     showView: (view: Views, delay?: number) => void;
     private _cancelClockReset;
     resetClock(delay: any): void;
+    /**
+     * Enter in the hour or minute field commits the typed time. The dial ticks
+     * are pointer targets only, and under `autoSubmit` there is no Ok button,
+     * so without this a keyboard user could type a time but never set it.
+     * Cancelling also keeps Enter from submitting a surrounding form. The
+     * listener's column holds only the fields; AM/PM is a separate column.
+     */
+    _handleDigitalKeydown: (e: KeyboardEvent) => void;
+    /** The lowest and highest value a field can show. */
+    private _bounds;
+    /** The lowest and highest allowed value of a field, given the others. */
+    private _range;
+    /**
+     * The first and last allowed value of a field, given the fields before it,
+     * with hours on the 24-hour clock. An hour is allowed when any second of
+     * it is, and so is a minute.
+     */
+    private _dayRange;
+    /** A field's value with hours on the 24-hour clock. */
+    private _dayValue;
+    /** Whether a field can take `value` within the range. */
+    private _allows;
+    /** The whole number typed in a field, or NaN when the field can't take it. */
+    private _fieldValue;
+    /** Whether a field can show `value` and the range allows it. */
+    private _takes;
+    /** Point the hand at an hour or minute. Seconds have no dial view. */
+    private _moveHand;
+    /**
+     * Up and Down step a field by one, Page Up and Page Down by five, round
+     * the dial: past 59 minutes comes 00. The hand follows hours and minutes.
+     * Hours step round the day, so in 12-hour time passing 12 switches AM and
+     * PM. Minutes and seconds wrap without carrying. With `minTime` or
+     * `maxTime`, a field that is not wholly allowed stops at its last allowed
+     * value instead of wrapping.
+     */
+    private _step;
+    /** A field's value `step` on, with hours on the 24-hour clock. */
+    private _stepValue;
     _inputFromTextField: (event: Event) => void;
     drawClockFromTimeInput(value: any, isHours: any): void;
     setHand(x: any, y: any, roundBy5?: boolean): void;
+    /** The hour at a dial position, 0 to 12 from the top. */
+    private _hourAt;
     setClockAttributes(radian: number, radius: number): void;
     formatHours(): void;
     formatMinutes(): void;
+    formatSeconds(): void;
+    /** Normalize every field, as leaving it would. */
+    private _formatFields;
     setHoursDefault(): void;
     done: (clearValue?: any) => void;
+    /** `HH:MM` for the given hour, or `HH:MM:SS` with a seconds field. */
+    private _clockTime;
+    private _inputValue;
     confirm: () => void;
     cancel: () => void;
     clear: () => void;

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

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
+import { Component, BaseOptions } from '../core/component';
 export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
 export interface TooltipOptions extends BaseOptions {
     /**
@@ -7,7 +7,8 @@ export interface TooltipOptions extends BaseOptions {
      */
     exitDelay: number;
     /**
-     * Delay time before tooltip appears.
+     * Delay time before tooltip appears. Skipped while a tooltip is closing
+     * and for 300ms after its exitDelay ends.
      * @default 0
      */
     enterDelay: number;
@@ -52,6 +53,13 @@ export interface TooltipOptions extends BaseOptions {
      * @default 10
      */
     transitionMovement: number;
+    /**
+     * Open on a click instead of hover and focus. A second click, Escape, a
+     * click elsewhere or focus on another element closes it. On touch a tap
+     * is the click, so the long press is off.
+     * @default false
+     */
+    openOnClick: boolean;
 }
 export declare class Tooltip extends Component<TooltipOptions> {
     /**
@@ -70,30 +78,29 @@ export declare class Tooltip extends Component<TooltipOptions> {
     private _exitDelayTimeout;
     private _enterDelayTimeout;
     private _animationTimeout;
+    private _pressTimeout;
+    private _lingerTimeout;
+    private _outsideTimeout;
+    /** The last click on the trigger or inside the tooltip, which the document listener leaves alone. */
+    private _insideClick;
+    /** When the last touch began or ended, to tell its mouse events from a mouse. */
+    private _lastTouch;
+    /** Whether a long press showed the tooltip, until it closes or a mouse hovers. */
+    private _touchShown;
+    /** Until when a click is the release of a long press, not a tap. */
+    private _swallowClickUntil;
+    private _shown;
     private _originalContent;
     xMovement: number;
     yMovement: number;
     constructor(el: HTMLElement, options: Partial<TooltipOptions>);
     static get defaults(): TooltipOptions;
-    /**
-     * Initializes instance of Tooltip.
-     * @param el HTML element.
-     * @param options Component options.
-     */
-    static init(el: HTMLElement, options?: Partial<TooltipOptions>): Tooltip;
-    /**
-     * Initializes instances of Tooltip.
-     * @param els HTML elements.
-     * @param options Component options.
-     */
-    static init(els: InitElements<InitElement>, options?: Partial<TooltipOptions>): Tooltip[];
-    static getInstance(el: HTMLElement): Tooltip;
+    static key: string;
     destroy(): void;
     _appendTooltipEl(): void;
     _setTooltipContent(tooltipContentEl: HTMLElement): void;
     _updateTooltipContent(): void;
     _setupEventHandlers(): void;
-    _removeEventHandlers(): void;
     /**
      * Show tooltip.
      */
@@ -102,20 +109,49 @@ export declare class Tooltip extends Component<TooltipOptions> {
      * Hide tooltip.
      */
     close: () => void;
+    /** Show at once, without enterDelay, for a request that is its own delay: a long press or a click. */
+    private _showNow;
+    /** Hide at once, without exitDelay, for an explicit dismissal. */
+    private _hideNow;
     _setExitDelayTimeout(): void;
     _setEnterDelayTimeout(isManual: any): void;
     _positionTooltip(): void;
-    _repositionWithinScreen(x: number, y: number, width: number, height: number): {
-        x: number;
-        y: number;
-    };
+    _place(): void;
+    _anchorTooltip(): void;
     _animateIn(): void;
     _animateOut(): void;
     _animate(show: boolean): void;
+    private _reportShown;
     _handleMouseEnter: () => void;
+    /** Whether an event is a touch, noting when, so the mouse events that echo it are ignored. */
+    private _touched;
+    /** Whether an event is a touch for the long press, which a click tooltip does without. */
+    private _longPress;
+    _handlePointerEnter: (e: PointerEvent) => void;
+    /** A touch held for LONG_PRESS shows the tooltip, unless it turns into a scroll first. */
+    _handlePointerDown: (e: PointerEvent) => void;
+    /** The finger lifted: a press too short stays a tap, and a tooltip it showed lingers for TOUCH_LINGER. */
+    _handlePointerEnd: (e: PointerEvent) => void;
+    /**
+     * A click tooltip toggles. Otherwise the click a long press's release sends
+     * would press the button or follow the link, so it is consumed.
+     */
+    _handleClick: (e: MouseEvent) => void;
+    /** A click tooltip toggles on what shows: one open() still holds back for enterDelay shows at once. */
+    private _toggle;
+    _handleTooltipClick: (e: MouseEvent) => void;
+    _handleDocumentClick: (e: MouseEvent) => void;
+    /**
+     * The browser took the touch to scroll: no tooltip opens, not even one
+     * waiting out enterDelay, and one the touch showed closes at once.
+     */
+    _handlePointerCancel: (e: PointerEvent) => void;
+    /** Whether a node is the trigger or the tooltip, or inside either. */
+    private _holds;
     _handleMouseLeave: (event: MouseEvent) => void;
     _handleKeydown: (event: KeyboardEvent) => void;
     _handleFocus: (event: FocusEvent) => void;
     _handleBlur: (event: FocusEvent) => void;
+    private _blurClickTooltip;
     _getAttributeOptions(): Partial<TooltipOptions>;
 }

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

@@ -0,0 +1,106 @@
+import { FormSelect, FormSelectOptions } from './select';
+/** An option and the options that name it as their parent. */
+export interface OptionNode {
+    option: HTMLOptionElement;
+    children: OptionNode[];
+}
+/**
+ * Turns flat options into a tree. An option sits under the first option whose
+ * value its `data-parent` names. It is a root when that is empty, names no
+ * option, or starts a chain of parents that comes back to the option itself;
+ * its own children stay under it. Siblings keep document order.
+ */
+export declare function optionTree(options: HTMLOptionElement[]): OptionNode[];
+export declare class TreeSelect extends FormSelect {
+    /**
+     * The role="tree" list inside the Menu surface. Menu styles the rows of its
+     * <menu> directly, so the tree keeps its rows one list further down.
+     */
+    tree: HTMLUListElement;
+    /** Each branch row and the option it stands for. */
+    private _branches;
+    /** Branch options this disabled, so the form never submits one. */
+    private _disabledBranches;
+    /** While refresh() rebuilds the rows, the values of the branches left open. */
+    private _keepOpen;
+    /** Expansion before the first nonempty query, retained across query edits. */
+    private _searchOpen;
+    /** What typeahead has read so far, and the timer that clears it. */
+    private _typed;
+    private _typedTimer;
+    constructor(el: HTMLSelectElement, options: Partial<FormSelectOptions>);
+    static key: string;
+    _setValueToInput(): void;
+    protected _canSearch(): boolean;
+    protected _searchList(): HTMLUListElement;
+    protected _searchRows(): HTMLElement[];
+    protected _filterSearch(query: string): void;
+    private _matchingRows;
+    private _searchExpansion;
+    protected _searchNavigate(e: KeyboardEvent): void;
+    destroy(): void;
+    /**
+     * Rebuilds the tree from the native options, keeping open each branch whose
+     * value is still there and, while the popup is open, focus on the same row.
+     */
+    refresh(): void;
+    private _restoreOpenFocus;
+    /** The option whose row has focus, if one does. */
+    private _focusedOption;
+    /** The values of the open branches. */
+    private _openValues;
+    /** Focuses the row for `option` again, or the first enabled row once it is gone or disabled, or the field. */
+    private _restoreFocus;
+    /** Names the tree as the field is named: aria-labelledby, then aria-label, then its labels. */
+    private _nameTree;
+    private _labelTree;
+    protected _setupOptionHandlers(): void;
+    protected _buildOptions(): void;
+    /**
+     * A select with no selected option picks its first one, which is often a
+     * branch, and disabling the branch does not move the selection. Unless the
+     * markup selected it, move to the option a form reset would pick now that
+     * branches are disabled: the first enabled leaf, or none. Only on start:
+     * after that a selected branch is one a script chose.
+     */
+    private _leaveImplicitBranch;
+    /** Whether the selection is a branch this disabled, which the markup did not select. */
+    private _browserPickedBranch;
+    private _row;
+    private _branch;
+    private _leaf;
+    private _restoreBranches;
+    private _setExpanded;
+    /** The rows not inside a closed branch, in document order. */
+    _visibleRows(): HTMLElement[];
+    private _enabledRows;
+    _focusRow(row: HTMLElement | null | undefined): void;
+    /** Opens the chosen leaf's branches and focuses it, or the first row a person can choose or open. */
+    protected _focusSelected(): void;
+    /** Opens every branch around `row`. */
+    private _expandTo;
+    /** The branch row holding `row`, never an element outside the tree. */
+    private _parentRow;
+    private _optionOf;
+    private _rowOf;
+    /** Chooses a leaf, or opens or closes a branch. */
+    _activate(row: HTMLElement): void;
+    /** Opens a closed branch, or moves into an open one. */
+    _openOrEnter(row: HTMLElement): void;
+    /** Closes an open branch, or moves to the parent row. */
+    _closeOrLeave(row: HTMLElement): void;
+    /** Opens every branch beside `row`. */
+    _openSiblings(row: HTMLElement): void;
+    /**
+     * Moves to the next row whose text starts with the characters typed in the
+     * last second, as Menu's typeahead does. A repeated search starts on the
+     * focused row, so typing more of its text keeps it.
+     */
+    _typeahead(row: HTMLElement, key: string): void;
+    private _toggle;
+    private _keyFor;
+    /** The key as in a left-to-right tree. */
+    private _logicalKey;
+    private _handleTreeKeydown;
+    private _handleTreeClick;
+}

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

@@ -0,0 +1,56 @@
+import { LineChart, LineChartOptions } from './lineChart';
+export type TreemapChartOptions = LineChartOptions;
+/**
+ * Treemap chart. It reads its <table> like LineChart, but draws each row of
+ * the first value column as a rectangle whose area is its share of the
+ * whole, filling the plot, the largest at the top inline-start corner. Rows
+ * with no positive value draw nothing. Further columns show in the tooltip.
+ *
+ * Call `update()` after changing the table, or start it with `watch` or
+ * `data-watch`.
+ */
+export declare class TreemapChart extends LineChart {
+    /** Each row's positive value, or 0 for a row with no rectangle. */
+    private _values;
+    /** Each row's rectangle, or null. */
+    private _boxes;
+    /** Each drawn row's place as fractions of the plot. */
+    private _places;
+    /** Lays the rectangles out again when the plot changes shape. */
+    private _sizes;
+    protected get _type(): string;
+    /** Area carries the value, so there is no value axis. */
+    protected get _axis(): boolean;
+    protected get _points(): boolean;
+    static key: string;
+    /**
+     * Highlights one row: outlines its rectangle and fills the tooltip, with
+     * the row's share. A row with no rectangle passes to the next one with
+     * one, as when focus asks for the first row. Pass -1 to hide them.
+     */
+    show(index: number): void;
+    /** The first row from `index` on with a rectangle, or -1. */
+    private _drawnFrom;
+    /** Adds the row's share of the whole to its cell in the tooltip, as the pie chart writes it. */
+    private _share;
+    /**
+     * Opens the tooltip from the middle of the row's rectangle toward the
+     * middle of the plot.
+     */
+    protected _place(index: number): void;
+    /** The row whose rectangle is under the pointer, or -1. */
+    protected _indexAt(e: PointerEvent): number;
+    /**
+     * The arrows step through the rows with a rectangle in table order, which
+     * runs in no one direction on screen, so they do not swap in a
+     * right-to-left page. Home and End go to the first and last of them.
+     */
+    protected _keyTarget(key: string): number | undefined;
+    destroy(): void;
+    /** Neither row labels nor a legend: each rectangle carries its name. */
+    protected _guides(): Element[];
+    /** One rectangle per positive row, in table order, placed by _layout(). */
+    protected _draw(): Element;
+    /** Squarifies the positive rows, largest first, equal values in table order, and places their rectangles. */
+    private _layout;
+}