@expressivecss/expressive 0.15.0 → 0.17.0

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;
+    /** The row's share of the whole, written as the pie chart writes it. */
+    protected _share(row: number): string;
+    /**
+     * 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;
+}

package/dist/types/core/component.d.ts

@@ -5,24 +5,39 @@ export interface BaseOptions {
 }
 export type InitElement = HTMLElement | Element;
 export type InitElements<T extends InitElement> = NodeListOf<T> | HTMLCollectionOf<T>;
-type ComponentConstructor<T extends Component<O>, O extends BaseOptions> = {
-    new (el: HTMLElement, options: Partial<O>): T;
+/** Any component class; `init` reads its element, options and instance types. */
+type ComponentClass = (new (el: never, options: never) => Component<BaseOptions>) & {
+    key: string;
 };
-type ComponentType<C extends Component<O>, O extends BaseOptions> = ComponentConstructor<C, O> & typeof Component<O>;
+/** The element a component class is constructed on. */
+type ElementOf<C extends ComponentClass> = C extends new (el: infer E, options: never) => unknown ? E : never;
+/** The options `init` accepts for a component class. */
+type InitOptions<C extends ComponentClass> = Partial<InstanceType<C>['options']>;
 export interface I18nOptions {
     cancel: string;
     clear: string;
     done: string;
 }
-export interface Openable {
-    isOpen: boolean;
-    open(): void;
-    close(): void;
+/** What {@link Component._notify} passes on, and when it stops. */
+export interface NotifyOptions {
+    args?: unknown[];
+    detail?: unknown;
+    current?: () => boolean;
 }
+/**
+ * `options` without its keys set to `undefined`, so those keep their
+ * defaults: `{ i18n: { tooShort: t.missing } }` must not erase a message.
+ */
+export declare const defined: <T extends object>(options: T) => T;
 /**
  * Base class implementation for Expressive components.
  */
 export declare class Component<O extends BaseOptions> {
+    /**
+     * The element property that holds an instance, `Expressive_<Name>`, so page
+     * code can read `el.Expressive_Tabs` as well as call `Tabs.getInstance(el)`.
+     */
+    static key: string;
     /**
      * The DOM element the plugin was initialized with.
      */
@@ -31,42 +46,51 @@ export declare class Component<O extends BaseOptions> {
      * The options the instance was initialized with.
      */
     options: O;
+    /** Aborted by destroy(), which removes every listener added with its signal. */
+    protected _events: AbortController;
     /**
-     * Constructs component instance and set everything up.
+     * Destroys any instance already on `el`, then spreads `options` over the
+     * class defaults, and `options.i18n` over the default strings, so passing
+     * one string keeps the rest. A subclass passes options it reads from
+     * markup in `options`.
      */
-    constructor(el: HTMLElement, options: Partial<O>, classDef: ComponentType<Component<O>, O>);
+    constructor(el: HTMLElement, options: Partial<O>);
     /**
-     * Initializes component instance.
+     * Initializes an instance of the class it is called on.
      * @param el HTML element.
      * @param options Component options.
-     * @param classDef Class definition.
-     */
-    protected static init<I extends HTMLElement, O extends BaseOptions, C extends Component<O>>(el: I, options: O, classDef: ComponentType<C, O>): C;
-    /**
-     * Initializes component instances.
-     * @param els HTML elements.
-     * @param options Component options.
-     * @param classDef Class definition.
      */
-    protected static init<I extends InitElement, O extends BaseOptions, C extends Component<O>>(els: InitElements<I>, options: Partial<O>, classDef: ComponentType<C, O>): C[];
+    static init<C extends ComponentClass>(this: C, el: ElementOf<C>, options?: InitOptions<C>): InstanceType<C>;
     /**
-     * Initializes component instances.
+     * Initializes an instance of the class it is called on for each element.
      * @param els HTML elements.
      * @param options Component options.
-     * @param classDef Class definition.
      */
-    protected static init<I extends InitElement, O extends BaseOptions, C extends Component<O>>(els: I | InitElements<I>, options: Partial<O>, classDef: ComponentType<C, O>): C | C[];
+    static init<C extends ComponentClass>(this: C, els: InitElements<InitElement>, options?: InitOptions<C>): InstanceType<C>[];
     /**
      * @returns default options for component instance.
      */
     static get defaults(): BaseOptions;
     /**
-     * Retrieves component instance for the given element.
+     * Retrieves the instance of the class it is called on for the given element,
+     * or undefined before init and after destroy.
      * @param el Associated HTML Element.
      */
-    static getInstance(el: HTMLElement): Component<BaseOptions>;
+    static getInstance<C extends ComponentClass>(this: C, el: Element): InstanceType<C> | undefined;
+    /**
+     * Runs an `on…` option callback, then fires `expressive:<type>` from the
+     * element, so pages can listen instead of passing options. The callback gets
+     * `args` (the element by default) and the event carries `detail`.
+     *
+     * A callback or listener may close, reopen or destroy the component. Pass
+     * `current` to tell whether the state `type` names still holds; the event
+     * is skipped once it does not, or once the instance is destroyed, and the
+     * result says whether to carry on.
+     */
+    protected _notify(type: string, callback?: ((...args: never[]) => unknown) | null, { args, detail, current }?: NotifyOptions): boolean;
     /**
-     * Destroy plugin instance and teardown.
+     * Destroy plugin instance and teardown. A subclass tears down its own state
+     * and calls this to remove its listeners and release the element.
      */
     destroy(): void;
 }

package/dist/types/core/formControl.d.ts

@@ -0,0 +1,21 @@
+/**
+ * A form-associated element that wraps a text input and submits for it, so
+ * the browser handles the field's values, reset, validity and disabled state.
+ * Chips and Cascader each define one under their own tag.
+ */
+export interface FormControl extends HTMLElement {
+    readonly internals: ElementInternals;
+    /** Called for a form reset no listener canceled, in the same task. */
+    onFormReset: (() => void) | null;
+}
+/** Whether the browser has form-associated custom elements. jsdom does not. */
+export declare const formAssociated: () => boolean;
+/**
+ * Wraps `input` in a `tag` control that takes its name. `display: contents`
+ * lays the input out as a child of the field still. The control follows the
+ * input's disabled and form attributes, and `onChange` runs after the input's
+ * disabled, readonly or form attribute changes.
+ */
+export declare function wrapInControl(tag: string, input: HTMLInputElement, onChange: () => void): FormControl;
+/** Unwraps the control, with whatever else went in it, and gives `input` its name back. */
+export declare function unwrapControl(control: FormControl, input: HTMLInputElement): void;

package/dist/types/core/imageURL.d.ts

@@ -0,0 +1,2 @@
+/** Accept image URLs without allowing arbitrary URL schemes. */
+export declare function imageURL(value: string | null | undefined, base: string): string | undefined;

package/dist/types/core/spring.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Springs solved at run time. The CSS springs are sampled at build time
+ * into linear() easings that always start from rest, so motion that is
+ * interrupted restarts. A spring solved here starts from where something
+ * is, at the speed it has, as M3's springs do: mass 1, a damping ratio and
+ * a stiffness.
+ */
+export interface Spring {
+    damping: number;
+    stiffness: number;
+}
+/**
+ * The spring's path from `from` to `to`, released at `velocity` in units
+ * per millisecond, as one value a frame until it settles on `to`.
+ */
+export declare function springPath(from: number, to: number, velocity: number, spring: Spring): number[];
+/** The spring a CSS token names, from its -damping and -stiffness tokens, or null without them. */
+export declare function springToken(el: Element, name: string): Spring | null;
+/** Plays a path on one property, `write` turning each value into CSS. */
+export declare function animatePath(el: Element, property: string, path: number[], write: (value: number) => string): Animation;

package/dist/types/core/utils.d.ts

@@ -1,32 +1,68 @@
-/** The part of a `DOMRect` the positioning helpers below actually read. */
-type Bounding = Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>;
-/** Which edges of a container a box has crossed. */
-type Edges = {
-    top: boolean;
-    right: boolean;
-    bottom: boolean;
-    left: boolean;
-};
+/** Sets an attribute, or removes it for null, as when restoring a value read with getAttribute. */
+export declare function restoreAttribute(el: Element, name: string, value: string | null): void;
+/**
+ * Reads text as one number, which currency or percent signs, grouping commas
+ * and a typographic minus may surround, or null for anything else. Charts and
+ * data tables read their cells with it.
+ */
+export declare function numberValue(raw: string): number | null;
+/**
+ * Where a field listens for its form's events. Neither formdata nor reset
+ * leaves a shadow root, so a field in one listens there. Otherwise the
+ * document, so the listener follows the field into another form.
+ */
+export declare function formEventScope(el: Element): Document | ShadowRoot;
+/**
+ * Runs `restored` after a reset of the field's form. The form restores its
+ * fields after the reset event, so it waits a task. It skips a cancelled
+ * reset, and a field whose listeners `signal` has removed since.
+ *
+ * It listens on the field's root, which hears a form the field moves into
+ * later, and on the form itself, which still hears it after the form moves
+ * into a shadow root. Reset does not leave a shadow root. The returned
+ * function binds both again, for a field that moved into another root;
+ * listeners already bound are not added twice.
+ */
+export declare function afterFormReset(el: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, restored: () => void, signal: AbortSignal): () => void;
+/**
+ * Runs `restored(form)` a task after any form in the document resets, once
+ * the form has restored its fields, unless the reset was cancelled. For
+ * document-level behaviors; a component bound to one field uses afterFormReset.
+ */
+export declare function afterAnyFormReset(restored: (form: HTMLFormElement) => void): void;
+/** The focused element, followed down through open shadow roots. */
+export declare function deepActiveElement(root: Document | ShadowRoot): Element | null;
+/**
+ * Fills a picker's footer: a Clear button, hidden unless `showClearBtn`,
+ * then Cancel and Done unless the picker writes its value without them.
+ */
+export declare function pickerFooter(footer: HTMLElement, { i18n, showClearBtn, autoSubmit }: {
+    i18n: Partial<Record<'clear' | 'cancel' | 'done', string>>;
+    showClearBtn: boolean;
+    autoSubmit: boolean;
+}, clearClass: string, onClear: () => void, onConfirm: () => void, onCancel: () => void): void;
+/**
+ * An AbortController from the window `node` is in. Its signal removes
+ * listeners added there, and jsdom rejects a signal from another window.
+ */
+export declare function controllerFor(node: Node): AbortController;
+/** An SVG element with its attributes. */
+export declare function svgNode(name: string, attributes?: Record<string, string>): SVGElement;
 /**
  * Class with utilitary functions for global usage.
  */
 export declare class Utils {
     /**
-     * Key maps. One `KeyboardEvent.key` value each: the second entries these used
-     * to carry (`Esc`, `Up`, `Del`, ...) were IE and Edge Legacy spellings, and
-     * the support baseline excludes both.
-     */
-    static keys: {
-        TAB: string;
-        ENTER: string;
-        ESC: string;
-        BACKSPACE: string;
-        ARROW_UP: string;
-        ARROW_DOWN: string;
-        ARROW_LEFT: string;
-        ARROW_RIGHT: string;
-        DELETE: string;
-    };
+     * Whether a keydown belongs to an IME composition, such as the Enter that
+     * confirms a candidate. Safari reports `isComposing` false for that Enter,
+     * so keyCode 229 covers it.
+     */
+    static isComposing(e: KeyboardEvent): boolean;
+    /**
+     * `handler`, skipped for every key of an IME composition: while the user
+     * picks a candidate, Enter, the arrows and Escape belong to the IME.
+     */
+    static ignoringComposition(handler: (e: KeyboardEvent) => void): (e: KeyboardEvent) => void;
     /**
      * Run `callback` once the document is parsed.
      *
@@ -36,6 +72,11 @@ export declare class Utils {
      * both orders.
      */
     static onDocumentReady(callback: () => void): void;
+    /**
+     * The language an element is written in, from the nearest `lang`, or
+     * undefined without one or for a tag the browser does not know.
+     */
+    static locale(el: Element): string | undefined;
     /**
      * Generates a unique string identifier. Every caller prefixes the result and
      * uses it as an element id, and a UUID is valid in that position.
@@ -71,70 +112,80 @@ export declare class Utils {
      */
     static getElementById(el: Node, id: string): HTMLElement;
     /**
-     * Checks for exceeded edges
-     * @param container Container element.
-     * @param bounding Bounding rect.
-     * @param offset Element offset.
-     */
-    static checkWithinContainer(container: HTMLElement, bounding: Bounding, offset: number): Edges;
-    /**
-     * Checks if element can be aligned in multiple directions.
-     * @param el Element to be inspected.
-     * @param container Container element.
-     * @param bounding Bounding rect.
-     * @param offset Element offset.
-     */
-    static checkPossibleAlignments(el: HTMLElement, container: HTMLElement, bounding: Bounding, offset: number): {
-        top: boolean;
-        right: boolean;
-        bottom: boolean;
-        left: boolean;
-        spaceOnTop: number;
-        spaceOnRight: number;
-        spaceOnBottom: number;
-        spaceOnLeft: number;
-    };
+     * `querySelector` against the tree `el` lives in, then the document, so a
+     * selector option finds an element in the same shadow root and still finds
+     * one outside it, such as `body`.
+     */
+    static querySelector(el: Node, selector: string): HTMLElement | null;
     /**
-     * Retrieves target element id from trigger.
-     * @param trigger Trigger element.
+     * Adds or removes one name in an element's inline `anchor-name` list. A
+     * trigger can anchor a Tooltip and a Menu at once, and writing the whole
+     * property let the last writer, or the first to be destroyed, wipe the other.
      */
-    static getIdFromTrigger(trigger: HTMLElement): string;
+    static setAnchorName(el: HTMLElement, name: string, on: boolean): void;
     /**
-     * Retrieves document scroll postion from top.
+     * Fires `expressive:<type>` from `el`. It bubbles and crosses shadow roots,
+     * so a page can listen on the element, an ancestor or the document. A
+     * `cancelable` event returns false once a listener calls preventDefault().
      */
-    static getDocumentScrollTop(): number;
+    static emit(el: Element, type: string, detail?: unknown, cancelable?: boolean): boolean;
     /**
-     * Retrieves document scroll postion from left.
+     * The element an event really started on, for a listener on the document.
+     * There `event.target` is retargeted to the shadow host, so delegation that
+     * reads it never sees anything inside an open shadow root. A closed root
+     * keeps its inside private and still yields the host.
      */
-    static getDocumentScrollLeft(): number;
+    static eventTarget(event: Event): Element | null;
+    /** Whether a key was pressed without Alt, Ctrl or Meta, which belong to the browser and the system. */
+    static plainKey(e: KeyboardEvent): boolean;
+    /** Where a key moves from `index` among `count` items: by `steps`, or to an end for Home and End. NaN for any other key. */
+    static _keyIndex(key: string, index: number, count: number, steps: Record<string, number>): number;
     /**
-     * Trailing-edge throttle: run `func` now, then at most once per `wait` ms
-     * with the most recent arguments.
-     *
-     * This used to carry its underscore ancestor's whole configuration - leading
-     * and trailing switches, a result passthrough - and both call sites are
-     * resize handlers passing nothing but a function and a delay.
-     *
-     * Assign the return value once. `x = Utils.throttle(fn, 200)` is right;
-     * wrapping it in an arrow builds a fresh closure per event and never calls
-     * it, which is how resize handling was dead in three components.
+     * The item a key moves focus to, from the focused one among `items`: by
+     * the offset `steps` gives the key, or to the first or last for Home and
+     * End. Disabled items are skipped. Undefined for other keys, for a key
+     * with a modifier, when focus is on none of the items, and past either end
+     * unless `wrap`.
      */
-    static throttle(func: (...args: unknown[]) => void, wait: number): (...args: unknown[]) => void;
+    static focusTarget(items: HTMLElement[], e: KeyboardEvent, steps: Record<string, number>, wrap?: boolean): HTMLElement | undefined;
     /**
-     * Renders confirm/close buttons with callback function
+     * Whether focus is on or inside any of `els`, read from each element's own
+     * root. A document listener cannot tell from `composedPath()` when the
+     * element sits in a closed shadow root, but the element's root still knows
+     * what has focus.
      */
-    static createConfirmationContainer(container: HTMLElement, confirmText: string, cancelText: string, onConfirm: (Function: object) => void, onCancel: (Function: object) => void): void;
+    static focusIsIn(...els: (Element | null | undefined)[]): boolean;
     /**
-     * Renders a button with optional callback function
+     * `closest()` for a document listener: the nearest element on the event's
+     * composed path that matches `selector`. Unlike `eventTarget(e).closest()`
+     * it climbs out of shadow roots too, so a press on a shadow-root icon inside
+     * a light-DOM button still finds the button.
      */
-    static createButton(container: HTMLElement, text: string, className?: string[], visibility?: boolean, callback?: (Function: object) => void): void;
-    static _setAbsolutePosition(origin: HTMLElement, container: HTMLElement, position: string, margin: number, transitionMovement: number, align?: string): {
+    static closestInPath<T extends Element = Element>(event: Event, selector: string): T | null;
+    /**
+     * Retrieves target element id from trigger.
+     * @param trigger Trigger element.
+     */
+    static getIdFromTrigger(trigger: HTMLElement): string;
+    /**
+     * Writes document coordinates as `top`/`left` on an absolutely positioned
+     * element. A static body uses document coordinates; positioned parents,
+     * such as a shadow host, use their padding edge, including borders and
+     * local scrolling.
+     */
+    static _placeInOffsetParent(el: HTMLElement, coordinates: {
         x: number;
         y: number;
-    };
+    }): void;
+    /**
+     * Moves document coordinates so a `width` by `height` box stays in the
+     * viewport. A box past the left or top edge, or within `offset` of it,
+     * starts `offset` in; a box past the right or bottom edge, or within
+     * `offset` of it, ends at that edge. `offset` is the margin plus the slide
+     * distance, or minus it for right alignment.
+     */
     static _repositionWithinScreen(x: number, y: number, width: number, height: number, margin: number, transitionMovement: number, align: string): {
         x: number;
         y: number;
     };
 }
-export {};

package/dist/types/modular.d.ts

@@ -1,11 +1,21 @@
 export * from './components';
 export { Dialogs } from './behaviors/dialogs';
+export type { ConfirmOptions } from './behaviors/dialogs';
 export { BottomSheets } from './behaviors/bottomSheets';
 export { SideSheets } from './behaviors/sideSheets';
 export { Forms } from './behaviors/forms';
+export { Copy } from './behaviors/copy';
+export { Theme } from './behaviors/theme';
+export { PaneResize } from './behaviors/paneResize';
+export { ImageCompare } from './behaviors/imageCompare';
+export { Tour } from './behaviors/tour';
+export { Sortable } from './behaviors/sortable';
+export { Lists } from './behaviors/lists';
+export { DataTables } from './behaviors/dataTables';
+export { TransferList } from './behaviors/transferList';
 export { AutoInit } from './components/registry';
 export type { AutoInitOptions } from './components/registry';
-export declare const version = "0.15.0";
+export declare const version = "0.17.0";
 export type * from './components/autocomplete';
 export type * from './components/appBar';
 export type * from './components/buttons';
@@ -13,8 +23,12 @@ export type * from './components/buttonGroup';
 export type * from './components/cards';
 export type * from './components/expandingCard';
 export type * from './components/carousel';
+export type * from './components/confetti';
+export type * from './components/particles';
+export type * from './components/keypad';
 export type * from './components/characterCounter';
 export type * from './components/chips';
+export type * from './components/cascader';
 export type * from './components/lineChart';
 export type * from './components/columnChart';
 export type * from './components/barChart';
@@ -23,13 +37,31 @@ export type * from './components/heatmapChart';
 export type * from './components/radarChart';
 export type * from './components/radialChart';
 export type * from './components/mixedChart';
+export type * from './components/scatterChart';
+export type * from './components/funnelChart';
+export type * from './components/sankeyChart';
+export type * from './components/treemapChart';
+export type * from './components/pullToRefresh';
+export type * from './components/loadingOverlay';
+export type * from './components/backToTop';
+export type * from './components/swipeActions';
+export type * from './components/inputMask';
+export type * from './components/showMore';
+export type * from './components/hoverCard';
+export type * from './components/currencyInput';
+export type * from './components/commandPalette';
 export type * from './components/questionnaire';
 export type * from './components/datepicker';
 export type * from './components/menu';
+export type * from './components/menubar';
+export type * from './components/messageScroller';
+export type * from './components/richTextEditor';
+export type * from './components/mapView';
 export type * from './components/lightbox';
 export type * from './components/slider';
 export type * from './components/scrollspy';
 export type * from './components/select';
+export type * from './components/treeSelect';
 export type * from './components/navigationRail';
 export type * from './components/tabs';
 export type * from './components/timepicker';

package/dist/types/plugins/dockedDisplayPlugin.d.ts

@@ -21,22 +21,24 @@ export declare class DockedDisplayPlugin {
     private readonly container;
     private options;
     private visible;
+    /**
+     * Elements whose clicks count as inside, beside the container: the element
+     * the container docks to, and any other control that opens it, such as a
+     * date range's end input. A click on one of those must not close it.
+     */
+    readonly triggers: HTMLElement[];
     constructor(el: HTMLElement, container: HTMLElement, options: Partial<DockedDisplayPluginOptions>);
     private _handleDocumentClick;
-    private get _transition();
+    /** Eases the container to `y` pixels down and to `opacity`. */
+    private _animate;
+    /** Places the container below the element, kept on screen. */
+    private _place;
     /**
      * Tears the plugin down. While shown, the document listener holds a
      * reference to this instance - and through it the whole picker subtree - so
      * the owning component must call this from its own destroy().
      */
     destroy: () => void;
-    /**
-     * Initializes instance of DockedDisplayPlugin
-     * @param el HTMLElement to position to
-     * @param container HTMLElement to be positioned
-     * @param options Plugin options
-     */
-    static init(el: HTMLElement, container: HTMLElement, options?: Partial<DockedDisplayPluginOptions>): DockedDisplayPlugin;
     show: () => void;
     hide: () => void;
 }

package/dist/types/plugins/modalDisplayPlugin.d.ts

@@ -0,0 +1,39 @@
+import { DockedDisplayPlugin, DockedDisplayPluginOptions } from './dockedDisplayPlugin';
+/**
+ * Shows a picker in a modal <dialog>, which the dialog styles draw as a
+ * basic dialog over a scrim. The browser keeps focus inside it. Escape or a
+ * press on the scrim closes it, and the picker hears that as Cancel; the
+ * picker closes it itself through hide() on Ok or Cancel. Focus goes back
+ * to the field that opened it.
+ */
+export declare class ModalDisplayPlugin {
+    /** The fields that open the dialog, as DockedDisplayPlugin keeps them. */
+    readonly triggers: HTMLElement[];
+    private readonly dialog;
+    private readonly onDismiss;
+    /** Whether the picker, not the user, is closing the dialog. */
+    private _settled;
+    private _opener;
+    /** Whether the press that ends in the next click started on the scrim. */
+    private _downOnScrim;
+    constructor(el: HTMLElement, container: HTMLElement, onDismiss: () => void);
+    private _handlePointerDown;
+    /**
+     * The picker fills the dialog, so a press on the dialog itself is on the
+     * scrim. A drag that starts on the picker, such as the timepicker hand,
+     * and ends on the scrim also clicks the dialog, so both ends must be there.
+     */
+    private _handleClick;
+    private _handleClose;
+    destroy: () => void;
+    show: () => void;
+    hide: () => void;
+}
+export type DisplayPlugin = DockedDisplayPlugin | ModalDisplayPlugin;
+/**
+ * The display plugin a picker's `displayPlugin` option names: 'docked',
+ * 'modal', or none for an inline picker. `onDismiss` is the picker's Cancel.
+ */
+export declare function createDisplayPlugin(type: string | null, el: HTMLElement, container: HTMLElement, options: Partial<DockedDisplayPluginOptions>, onDismiss: () => void): DisplayPlugin | undefined;
+/** Ok and Cancel close a modal picker; a docked one stays until a click outside. */
+export declare function hideModal(plugin: DisplayPlugin | undefined): void;