@expressivecss/expressive 0.15.0 → 0.17.0

package/dist/types/behaviors/forms.d.ts

@@ -1,17 +1,60 @@
 export declare class Forms {
     /**
-     * Checks if the label has validation and apply
-     * the correct class and styles
+     * Validates a `.validate` field: marks it `invalid` and `aria-invalid`
+     * when it fails its constraints or `data-length`, and clears both when it
+     * passes. An empty optional field never fails. The field is described by
+     * its `[data-error]` supporting text, so the error the CSS shows there is
+     * read with it.
+     * Marked drop-zone file inputs also validate type/size rules and synchronize their
+     * native custom validity and zone-level error text, without emitting events.
      * @param textfield
      */
     static validateField(textfield: HTMLInputElement): void;
+    private static _markInvalid;
+    /** Whether a field fails its constraints or is longer than `data-length`. */
+    private static _fails;
+    /** An empty field that is not required, and holds no half-typed number or date, never fails. */
+    private static _blankOptional;
+    /** Adds the field's `[data-error]` supporting text to its aria-describedby. */
+    private static _describeByError;
+    private static _idOf;
+    /** Adds an id to a field's aria-describedby once, after the page's own. */
+    private static _addDescription;
     /**
      * Resizes the given TextArea after updating the
      *  value content dynamically.
      * @param e EventTarget
      */
     static textareaAutoResize(e: EventTarget): void;
+    private static _measureTextarea;
     private static _initialized;
+    private static _fileErrors;
+    private static _fileSelections;
+    private static _validatedFile;
+    private static _rejectedTypes;
+    private static _validateFiles;
+    private static _checkFiles;
+    private static _fileFailure;
+    private static _typeFailure;
+    private static _sizeFailure;
+    private static _fileSizeMessage;
+    private static _countFailure;
+    private static _fileCountMessage;
+    private static _clearFileError;
+    private static _setFileError;
+    private static _fileTypeMessage;
+    private static _fileError;
+    private static _showFileError;
+    private static _onFileInput;
+    private static _updateDropZone;
+    private static _validateDropZone;
+    private static _reportFileRejection;
+    private static _newFileSelection;
+    private static _bindShadowForm;
+    private static _resetFileInput;
+    private static _resetFileList;
+    private static _resetFileValidity;
+    private static _afterReset;
     /**
      * Safe to call more than once: the root entry calls it on import, and a page
      * that also loads the modular entry may call it again.
@@ -23,13 +66,36 @@ export declare class Forms {
      * state, so there is no generated text to translate.
      */
     static togglePassword(e: MouseEvent): void;
+    /**
+     * A [data-step="up"] or [data-step="down"] button in a .field steps the
+     * field's number input as the arrow keys would, within min, max and step,
+     * and fires input and change if the value moved. A disabled, read-only or step="any" input
+     * is left alone; stepUp() would throw on step="any".
+     */
+    static stepNumber(e: MouseEvent): void;
     /**
      * A revealed password goes back to type="password" when its form is
      * submitted or reset, so it is never sent or autofilled as plain text and
-     * a reset field does not stay revealed. A reset form also drops the file
-     * lists it would otherwise leave showing: reset fires no change event.
+     * a reset field does not stay revealed. Reset fires no input or change
+     * event, so a reset form also drops its file lists, `.validate` errors and
+     * error summary, and fits each auto-resizing textarea to its restored text.
+     * That cleanup waits for the native reset and respects later cancellation.
      */
     static resetFormExtras(e: Event): void;
+    /**
+     * Error summary. A `novalidate` form holding a `.error-summary` is checked
+     * when it is submitted. While any field is invalid the submit stops, as it
+     * would natively, and the summary's list gets one link per invalid field,
+     * "Label: browser message", before the summary is shown and focused. A
+     * valid submit hides it again. A submitter with `formnovalidate` skips the
+     * check.
+     */
+    static summarizeErrors(e: SubmitEvent): void;
+    /**
+     * A summary link focuses its field instead of only scrolling to it. An
+     * enhanced select passes that focus on to its generated input itself.
+     */
+    static focusSummaryField(e: MouseEvent): void;
     /**
      * The native file input covers its .drop-zone, so the browser already takes
      * a dropped file. This only shows the drag: the input is the topmost

package/dist/types/behaviors/imageCompare.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Image compare. Keeps `--md-comp-image-compare-position` on each
+ * `.image-compare` in step with its range input, so the divider and the
+ * revealed image follow the value. Listens on the document, so compares added
+ * later follow too once moved, and a form reset moves them back.
+ * `ImageCompare.sync(el)` sets one at once.
+ */
+export declare class ImageCompare {
+    private static _initialized;
+    static Init(): void;
+    /** Moves the divider of a compare to its range's current value. */
+    static sync(range: HTMLInputElement): void;
+}

package/dist/types/behaviors/lists.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Keys for lists of actionable rows. In a `.list` whose rows are each a
+ * single link or button, Up and Down move focus to the row before or after,
+ * and Home and End to the first and last, skipping disabled rows. Every row
+ * stays a Tab stop and keeps its own role, so the keys are a shortcut on
+ * top of native navigation rather than a listbox. Radio rows already move
+ * with the arrows, and other lists are left alone.
+ */
+export declare class Lists {
+    static Init(): void;
+    private static _onKeydown;
+}

package/dist/types/behaviors/paneResize.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Resizable panes. A `<button class="drag-handle">` between the two panes of a
+ * list-detail or supporting layout resizes the pane whose width is a token:
+ * the list pane, or the supporting pane. Dragging moves the boundary; Left and
+ * Right move it 16px (64px with Shift); Home and End jump to the narrowest
+ * and widest; a click, Enter or Space steps through narrow, middle and wide,
+ * the single-pointer alternative to dragging. The other pane keeps at least
+ * `--md-comp-pane-primary-min-width`.
+ *
+ * The width is written as `--md-comp-pane-list-width` or
+ * `--md-comp-pane-supporting-width` on the container's style.
+ */
+export declare class PaneResize {
+    private static _dragged;
+    static Init(): void;
+    /** The current width of the handle's resizable pane, or null for a handle outside a supported layout. */
+    static width(handle: Element): number | null;
+    /** Sets the resizable pane's width, clamped to what the layout can hold. */
+    static setWidth(handle: Element, width: number): void;
+    private static _token;
+    /** The pane the handle resizes: the list or supporting pane beside it. */
+    private static _pane;
+    private static _bounds;
+    /** True when the resizable pane sits physically left of the handle, so moving right widens it. */
+    private static _paneIsLeft;
+    private static _onPointerDown;
+    private static _onClick;
+    private static _onKeyDown;
+}

package/dist/types/behaviors/sheetDrag.d.ts

@@ -15,6 +15,12 @@ export interface SheetDragConfig {
     axis: 'x' | 'y';
     /** The custom property carrying the live drag offset. */
     property: string;
+    /**
+     * The sheet's motion easing token; `-duration` names its duration. While
+     * both are the default spatial spring's, a snap-back solves that spring
+     * at run time; an override keeps the CSS transition it asks for.
+     */
+    motion: string;
     /**
      * `1` when the sheet dismisses toward increasing coordinates (downward, or
      * rightward for an end-docked side sheet), `-1` when it dismisses toward
@@ -32,7 +38,19 @@ export interface SheetDragConfig {
     onPress?: () => void;
     /** Called when a drag ends, with whether the pointer actually moved. */
     onRelease?: (dragged: boolean) => void;
+    /**
+     * Called when a drag that moved ends on an open sheet, before it can
+     * dismiss, with how far the pointer travelled along the axis (either way,
+     * unlike the dismissing shift) and its flick velocity. Returns whether the
+     * drag did something else, such as resizing the sheet, so it does not also
+     * dismiss it.
+     */
+    release?: (dialog: HTMLDialogElement, delta: number, velocity: number) => boolean;
 }
+/** Past this the sheet dismisses rather than snapping back, in pixels. */
+export declare const DISMISS_DISTANCE = 96;
+/** Past this a flick dismisses whatever the distance, in pixels per millisecond. */
+export declare const DISMISS_VELOCITY = 0.5;
 /**
  * Register one sheet kind's drag handlers on the document. Called once per kind
  * at import time; there is nothing to tear down.

package/dist/types/behaviors/sideSheets.d.ts

@@ -1,5 +1,5 @@
 /**
- * Drag-to-dismiss for side sheets (`dialog.side-sheet` / `.right` / `.left`).
+ * Drag-to-dismiss for side sheets (`dialog.side-sheet`).
  *
  * Grab the header or the inner 24dp edge and drag toward the docked side.
  * Past 96dp, or a flick, closes. Light-dismiss on the scrim stays with

package/dist/types/behaviors/sortable.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Sortable lists. In a `.sortable` list, an item moves by dragging its
+ * `.drag-handle`, or with a `[data-move="up"]` or `[data-move="down"]` button
+ * inside it. The buttons are the keyboard path and the single-pointer
+ * alternative to dragging, so every sortable list needs them; they can sit in
+ * the row or in a menu. Escape during a drag puts the item back.
+ *
+ * After each move the list fires a bubbling `change` event whose `detail`
+ * holds `{ item, from, to }` (zero-based), and a polite live region beside the
+ * list announces the new position. `Sortable.i18n.moved` holds that text.
+ */
+export declare class Sortable {
+    static i18n: {
+        moved: string;
+    };
+    private static _drag;
+    private static _regions;
+    static Init(): void;
+    /** Moves an item to a zero-based position in its list, then announces it and fires `change`. */
+    static move(item: HTMLElement, to: number): void;
+    private static _done;
+    private static _onClick;
+    private static _onPointerDown;
+    private static _onPointerMove;
+    private static _onPointerEnd;
+    private static _onKeyDown;
+    private static _finish;
+}

package/dist/types/behaviors/theme.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Theme switch. A click on `[data-theme-set="light|dark|auto"]` writes the
+ * `theme` attribute on the root element and saves the choice in
+ * `localStorage` under `theme`. Every theme control then reports whether its
+ * value is current: `aria-checked` on menu item and radio roles,
+ * `aria-pressed` on anything else.
+ *
+ * Restoring the saved choice is still the page's inline `<head>` script: the
+ * bundle loads after first paint, so restoring here would flash the wrong
+ * scheme. Init only marks the controls already in the page.
+ */
+export declare class Theme {
+    private static _initialized;
+    static Init(): void;
+    /** The current theme: the root's `theme` attribute, or `auto` without one. */
+    static get(): string;
+    /** Applies and saves a theme, then marks the controls. Unknown values are ignored. */
+    static set(theme: string): void;
+    /** Marks every theme control in `root` as current or not. Call it after rendering new controls. */
+    static sync(root?: ParentNode): void;
+    private static _onClick;
+}

package/dist/types/behaviors/tour.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Product tour. A `.tour` is a `popover="manual"` card holding one `<section>`
+ * per step; each section's `data-tour-target` names the id of the element it
+ * explains. The card shows one step at a time beside its target, which gets a
+ * highlight ring and scrolls into view. Steps whose target is missing or
+ * hidden are skipped.
+ *
+ * `[data-tour-start="tour-id"]` starts a tour; inside it, `[data-tour-back]`,
+ * `[data-tour-next]`, `[data-tour-done]` and `[data-tour-close]` move through
+ * it or end it, and Escape ends it. Back hides on the first step, Next on the
+ * last, Done everywhere else. Ending hides the card (its `toggle` event says
+ * so) and returns focus to whatever had it before the tour.
+ */
+export declare class Tour {
+    static i18n: {
+        progress: string;
+    };
+    private static _initialized;
+    static Init(): void;
+    /** Opens the tour at a step. Does nothing when no step has a visible target. */
+    static start(tour: HTMLElement, index?: number): void;
+    /** Where focus returns at the end: the first start's focus, kept across restarts. */
+    private static _opener;
+    /** Shows the card, and reports the start of a tour that was not running. */
+    private static _show;
+    /** Shows step `index` of a running tour. */
+    static go(tour: HTMLElement, index: number): void;
+    /**
+     * Ends a running tour and returns focus to where it was. `completed` says
+     * the user finished it, as the done button does, rather than dismissed it.
+     */
+    static end(tour: HTMLElement, completed?: boolean): void;
+    private static _target;
+    private static _release;
+    private static _onClick;
+}

package/dist/types/behaviors/transferList.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Transfer lists. A `.transfer-list` holds a `.transfer-available` and a
+ * `.transfer-chosen` list of checkbox rows, with `[data-transfer]` buttons
+ * between them. `add` and `remove` move the checked rows to the other list,
+ * `add-all` and `remove-all` every row, skipping rows whose box is disabled.
+ * Moved rows arrive unchecked. The chosen list keeps the order rows arrived
+ * in; a row moved back returns to its slot in the order the lists had before
+ * the first move. A form reset puts every row back there.
+ *
+ * After each move the container fires a bubbling `expressive:transfer` event
+ * whose `detail` is `{ rows, from, to }`, and a polite live region beside it
+ * announces the move. `TransferList.i18n.moved` holds that text.
+ *
+ * The checkboxes carry no name. When the form builds its data, each row of
+ * the chosen list adds its checkbox value under the container's `data-name`,
+ * in the chosen list's order. The listeners are on the document, so a list
+ * added later needs no call, but a form inside a shadow root gets no entries.
+ */
+export declare class TransferList {
+    static i18n: {
+        moved: string;
+    };
+    private static _starts;
+    private static _regions;
+    static Init(): void;
+    private static _onClick;
+    private static _move;
+    /** The row checkboxes of one of a container's lists, in order. Only a row's own label counts, so a list nested in a row keeps its boxes. */
+    private static _boxes;
+    /** Keeps the rows of both lists as they stand before a container's first move. */
+    private static _record;
+    /**
+     * The row a moved row goes before. In the available list that is the first
+     * row that came after it before the first move; elsewhere, or for a row the
+     * page added since, none, so it goes last.
+     */
+    private static _slot;
+    /** The first row of `list` that started after position `index`. Walks siblings, so a move-all stays cheap. */
+    private static _firstAfter;
+    private static _announce;
+    /** A list's `aria-label`, or the text of the elements its `aria-labelledby` names. */
+    private static _name;
+    private static _onFormData;
+    /**
+     * Whether a chosen row submits. A disabled fieldset leaves it out, as it
+     * does its own fields outside the first legend. A row's own disabled box
+     * only keeps the row in place, so it still submits.
+     */
+    private static _submits;
+    private static _onReset;
+    /** Puts every row a container had before its first move back in its list and order. */
+    private static _restore;
+}

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

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
+import { Component, BaseOptions } from '../core/component';
 /**
  * Collapse medium/large flexible app bars on scroll, and open the related
  * search view when the search field in a search app bar is selected.
@@ -11,16 +11,15 @@ export declare class AppBar extends Component<BaseOptions> {
     private _sentinel;
     private _input;
     private _view;
-    private _searchOpen;
+    private _restore;
     constructor(el: HTMLElement, options: Partial<BaseOptions>);
     static get defaults(): BaseOptions;
-    static init(el: HTMLElement, options?: Partial<BaseOptions>): AppBar;
-    static init(els: InitElements<InitElement>, options?: Partial<BaseOptions>): AppBar[];
-    static getInstance(el: HTMLElement): AppBar;
+    static key: string;
     destroy(): void;
     private _setupCollapse;
     private _onIntersect;
     private _setupSearch;
-    private _onSearchViewClose;
     private _onSearchFocus;
+    private _onSearchKeydown;
+    private _openSearch;
 }

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

@@ -1,5 +1,5 @@
 import { Menu, MenuOptions } from './menu';
-import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
+import { Component, BaseOptions } from '../core/component';
 export interface AutocompleteData {
     /**
      * A primitive value that can be converted to string.
@@ -19,6 +19,18 @@ export interface AutocompleteData {
      * Optional attributes which describes the option.
      */
     description?: string;
+    /**
+     * Shows the entry dimmed and keeps every selection path from choosing or
+     * removing it. The arrow keys skip it, and the result count leaves it out.
+     * The `selected` option and `setMenuItems()` can still select it.
+     */
+    disabled?: boolean;
+    /**
+     * Lists the entry under this heading. Entries with the same group gather
+     * where the group first appears in the results; entries without one stay
+     * outside every group.
+     */
+    group?: string;
 }
 export interface AutocompleteOptions extends BaseOptions {
     i18n: Partial<{
@@ -26,6 +38,7 @@ export interface AutocompleteOptions extends BaseOptions {
         noResults: string;
         results: (count: number) => string;
         selected: (count: number) => string;
+        create: (text: string) => string;
     }>;
     /**
      * Data object defining autocomplete options with
@@ -51,13 +64,39 @@ export interface AutocompleteOptions extends BaseOptions {
      * @default '300px'
      */
     maxMenuHeight: string;
+    /** Maximum rendered suggestions. Infinity preserves the complete list. @default Infinity */
+    maxResults: number;
     /**
      * Function is called when the input text is altered and data can also be loaded asynchronously.
      * If the results are collected the items in the list can be updated via the function setMenuItems(collectedItems).
      * @param text Searched text.
      * @param autocomplete Current autocomplete instance.
+     * @param signal Aborted when a newer search starts or the autocomplete is
+     * destroyed. Pass it to `fetch()` so a slow, stale response never replaces
+     * newer results.
+     */
+    onSearch: (text: string, autocomplete: Autocomplete, signal: AbortSignal) => void;
+    /**
+     * Milliseconds to wait after typing pauses before calling `onSearch`, so
+     * remote data is fetched once per pause rather than once per key. A search
+     * on focus never waits. `0` searches on every input.
+     * @default 0
+     */
+    searchDelay: number;
+    /**
+     * Ends the list in an "Add" row when the typed text matches no suggestion
+     * exactly. Choosing the row calls `onCreate` and fires `expressive:create`;
+     * the selection does not change.
+     * @default false
+     */
+    allowCreate: boolean;
+    /**
+     * Called when the person chooses the "Add" row.
+     * @param text The typed text, trimmed.
+     * @param autocomplete Current autocomplete instance.
+     * @default null
      */
-    onSearch: (text: string, autocomplete: Autocomplete) => void;
+    onCreate: (text: string, autocomplete: Autocomplete) => void;
     /**
      * If true will render the key from each item directly as HTML.
      * User input MUST be properly sanitized first.
@@ -78,6 +117,11 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
     el: HTMLInputElement;
     /** If the autocomplete is open. */
     isOpen: boolean;
+    /**
+     * Whether the user left or dismissed the field since the last search, so
+     * late results must not reopen it. A field nobody has focused yet counts.
+     */
+    private _left;
     /** Number of matching autocomplete options. */
     count: number;
     /** Index of the current selected option. */
@@ -85,8 +129,17 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
     private oldVal;
     private $active;
     private _openTimer;
+    /** Aborts the running search when a newer one starts. */
+    private _searchAbort;
+    /** The search waiting for typing to pause. */
+    private _searchTimer;
+    private _selection;
+    /** The selection the field started with, which a form reset restores. */
+    private _startingSelection;
     private _statusInfo;
     private _announcer;
+    /** The last search returned no suggestions. A text change clears it until the next one returns. */
+    private _noResults;
     /**
      * The active entry, for both the eye and the screen reader. The class alone
      * was invisible to assistive technology; aria-activedescendant on the input
@@ -102,24 +155,11 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
     container: HTMLElement;
     /** Instance of the menu plugin for this autocomplete. */
     menu: Menu;
-    static _keydown: boolean;
     selectedValues: AutocompleteData[];
     menuItems: AutocompleteData[];
     constructor(el: HTMLInputElement, options: Partial<AutocompleteOptions>);
     static get defaults(): AutocompleteOptions;
-    /**
-     * Initializes instance of Autocomplete.
-     * @param el HTML element.
-     * @param options Component options.
-     */
-    static init(el: HTMLInputElement, options?: Partial<AutocompleteOptions>): Autocomplete;
-    /**
-     * Initializes instances of Autocomplete.
-     * @param els HTML elements.
-     * @param options Component options.
-     */
-    static init(els: InitElements<HTMLInputElement | InitElement>, options?: Partial<AutocompleteOptions>): Autocomplete[];
-    static getInstance(el: HTMLElement): Autocomplete;
+    static key: string;
     /**
      * The three-dot loading indicator, parsed once and cloned thereafter.
      *
@@ -131,25 +171,65 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
     private static _loadingIndicator;
     destroy(): void;
     _setupEventHandlers(): void;
-    _removeEventHandlers(): void;
+    /** The form restored the input's text. The selection follows it, with no change event, as a native reset fires none. */
+    private _handleReset;
     _setupMenu(): void;
     _removeMenu(): void;
     _handleInputBlur: () => void;
-    _handleInputKeyup: () => void;
     _handleInput: () => void;
     _handleInputFocus: () => void;
-    _inputChangeDetection: (value: string) => void;
+    _inputChangeDetection: (value: string, typed?: boolean) => void;
+    /**
+     * Searches for text of at least `minLength` characters. Shorter text drops
+     * the pending and running searches and the old results: it used to reach
+     * onSearch too, so a remote search fetched on every first keystroke.
+     */
+    private _startSearch;
+    /** Searches now, or once typing pauses for `searchDelay`. Focus never waits. */
+    private _queueSearch;
+    private _cancelPendingSearch;
+    /** Starts a search and aborts the one before, whose response is now stale. */
+    private _search;
     _handleInputKeydown: (e: KeyboardEvent) => void;
+    private _dismiss;
     _handleInputClick: () => void;
     _handleContainerPointerDown: (e: PointerEvent) => void;
     _handleContainerPointerUp: () => void;
+    _handleInertRowPress: (e: MouseEvent) => void;
+    /** The rows that can be chosen. The no-results row and disabled rows are not. */
+    private _options;
     _resetCurrentElementPosition(): void;
     _resetAutocomplete(): void;
     _highlightPartialText(input: string, label: string): string[];
-    _createMenuItem(entry: AutocompleteData): HTMLLIElement;
+    _createMenuItem(entry: AutocompleteData, selectedIds?: Set<string | number>): HTMLLIElement;
+    /** Menu already ignores a click on an aria-disabled row. */
+    private static _markDisabled;
+    _createLabel(entry: AutocompleteData): HTMLDivElement;
+    _highlightHTML(div: HTMLElement, label: string, inputText: string): void;
+    _highlightText(div: HTMLElement, parts: string[]): void;
+    private _visibleEntries;
     _renderMenu(): void;
+    /** The list a row goes in: the listbox, or its group's list, made where the group first appears. */
+    private _groupList;
+    /**
+     * A labelled group of options, as the APG grouped listbox nests it. The
+     * heading is not an option, so the arrow keys and the count pass over it.
+     * Its name is set as text: only an entry's own `text` may be HTML.
+     */
+    private _createGroup;
+    /** The typed text to offer as a new value, or '' when the option is off, the text is short or a suggestion matches it. */
+    private _createText;
+    /** The "Add" row. Its label is what the person typed, so it is set as text, never as HTML. */
+    private _createRow;
+    /**
+     * Shows sighted users the `i18n.noResults` that the live region announces.
+     * Screen readers already hear that, and a listbox may only own options, so
+     * the row is hidden from them.
+     */
+    private _createNoResultsRow;
     _setStatusLoading(): void;
     private _announce;
+    /** Announces the entries a person can choose. Disabled ones are shown, not counted. */
     private _resultsMessage;
     _updateSelectedInfo(): void;
     _refreshInputText(): void;
@@ -169,6 +249,11 @@ export declare class Autocomplete extends Component<AutocompleteOptions> {
      * @param open Option to conditionally open menu
      */
     setMenuItems(menuItems: AutocompleteData[], selected?: number[] | string[], open?: boolean): void;
+    private _toggleOption;
+    private _selectSingle;
+    /** Commits a row chosen by Enter or a click. */
+    private _choose;
+    private _create;
     /**
      * Select a specific autocomplete option via id-property.
      * @param id The id of a data-entry.

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

@@ -0,0 +1,36 @@
+import { Component, BaseOptions } from '../core/component';
+export interface BackToTopOptions extends BaseOptions {
+    /**
+     * How far the window scrolls before the link shows, as a CSS length from
+     * the top of the page. Viewport units follow window resizes.
+     * @default '100vh'
+     */
+    threshold: string;
+}
+/**
+ * Back-to-top link. The link stays inert, so hidden, until the window has
+ * scrolled past `threshold`. Activating it scrolls to the top and focuses
+ * the element its `href` names, or the body.
+ *
+ * Observation is IntersectionObserver on a sentinel at the threshold, as in
+ * AppBar, so a scroll tick reads no layout.
+ */
+export declare class BackToTop extends Component<BackToTopOptions> {
+    private _observer;
+    private _sentinel;
+    private _temporary;
+    private _blur;
+    private _above;
+    constructor(el: HTMLElement, options: Partial<BackToTopOptions>);
+    static get defaults(): BackToTopOptions;
+    static key: string;
+    destroy(): void;
+    private _setThreshold;
+    private _onIntersect;
+    private _update;
+    private _onClick;
+    private _target;
+    private _focus;
+    private _focused;
+    private _clearTabindex;
+}

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

@@ -1,4 +1,3 @@
-import { InitElements, InitElement } from '../core/component';
 import { ColumnChart, ColumnChartOptions } from './columnChart';
 export type BarChartOptions = ColumnChartOptions;
 /**
@@ -6,15 +5,13 @@ export type BarChartOptions = ColumnChartOptions;
  * a band of bars that grow from zero along the inline axis, with its label
  * beside it. The up and down arrows move the tooltip between rows.
  *
- * Re-run `BarChart.init(el)` after changing the table.
+ * Call `update()` after changing the table, or start it with `watch` or
+ * `data-watch`.
  */
 export declare class BarChart extends ColumnChart {
     protected get _type(): string;
-    protected get _key(): string;
     protected get _horizontal(): boolean;
-    static init(el: HTMLElement, options?: Partial<BarChartOptions>): BarChart;
-    static init(els: InitElements<InitElement>, options?: Partial<BarChartOptions>): BarChart[];
-    static getInstance(el: HTMLElement): BarChart;
+    static key: string;
     /**
      * The column chart's spans; CSS reads their --top and --bottom across the
      * plot. With .values, a copy of the bars without their clipping holds each

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

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, InitElement } from "../core/component";
+import { Component, BaseOptions } from "../core/component";
 export interface ButtonGroupOptions extends BaseOptions {
 }
 /**
@@ -16,9 +16,7 @@ export declare class ButtonGroup extends Component<ButtonGroupOptions> {
     private _activeItem;
     constructor(el: HTMLElement, options?: Partial<ButtonGroupOptions>);
     static get defaults(): ButtonGroupOptions;
-    static init(el: HTMLElement, options?: Partial<ButtonGroupOptions>): ButtonGroup;
-    static init(els: InitElements<InitElement>, options?: Partial<ButtonGroupOptions>): ButtonGroup[];
-    static getInstance(el: HTMLElement): ButtonGroup;
+    static key: string;
     destroy(): void;
     private get _selectionMode();
     private get _items();