@expressivecss/expressive 0.15.0 → 0.16.0

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

@@ -1,4 +1,4 @@
-import { BaseOptions, Component, I18nOptions, InitElements, InitElement } from '../core/component';
+import { BaseOptions, Component, I18nOptions } from '../core/component';
 export interface DateI18nOptions extends I18nOptions {
     previousMonth: string;
     nextMonth: string;
@@ -8,6 +8,12 @@ export interface DateI18nOptions extends I18nOptions {
     weekdaysShort: string[];
     weekdaysAbbrev: string[];
 }
+/**
+ * Reads a date written in a string format with the names it was written
+ * in, so a German "Mär 15, 2026" reads back as Date.parse never would.
+ * Null for text that does not fit the format, or a day the month lacks.
+ */
+export declare function readDate(value: string, format: string, i18n: Partial<DateI18nOptions>): Date | null;
 export interface DatepickerOptions extends BaseOptions {
     /**
      * The date output format for the input field value
@@ -69,7 +75,7 @@ export interface DatepickerOptions extends BaseOptions {
     disableDayFn: ((day: Date) => boolean) | null;
     /**
      * First day of week (0: Sunday, 1: Monday etc).
-     * @default 0
+     * @default 0, or the first day in the input's `lang` where the browser knows it
      */
     firstDay: number;
     /**
@@ -129,7 +135,8 @@ export interface DatepickerOptions extends BaseOptions {
      */
     autoSubmit: boolean;
     /**
-     * Internationalization options.
+     * Internationalization options. With a `lang` on or around the input, the
+     * month and weekday names default to that language's, as Intl writes them.
      */
     i18n: Partial<DateI18nOptions>;
     /**
@@ -172,12 +179,11 @@ export interface DatepickerOptions extends BaseOptions {
     minMonth?: number;
     /** Field used for internal calculations DO NOT CHANGE IT */
     maxMonth?: number;
-    /** Field used for internal calculations DO NOT CHANGE IT */
-    startRange?: Date;
-    /** Field used for internal calculations DO NOT CHANGE IT */
-    endRange?: Date;
     /**
-     * Display plugin
+     * Display plugin: 'docked' for a popover under the input, or 'modal' for a
+     * dialog with Cancel and Ok. A modal picker is always open inside its
+     * dialog and writes the input only on Ok, so it sets `openByDefault` and
+     * clears `autoSubmit`.
      */
     displayPlugin: string;
     /**
@@ -191,7 +197,6 @@ export declare class Datepicker extends Component<DatepickerOptions> {
     multiple: boolean;
     calendarEl: HTMLElement;
     containerEl: HTMLElement;
-    yearTextEl: HTMLElement;
     dateTextEl: HTMLElement;
     endDateEl: HTMLInputElement;
     dateEls: HTMLInputElement[];
@@ -199,7 +204,6 @@ export declare class Datepicker extends Component<DatepickerOptions> {
     date: Date;
     endDate: null | Date;
     dates: Date[];
-    formats: object;
     calendars: [{
         month: number;
         year: number;
@@ -207,8 +211,10 @@ export declare class Datepicker extends Component<DatepickerOptions> {
     private displayPlugin;
     /** What setInputValue last wrote, so reading it back does not depend on the parser. */
     private _writtenInputs;
-    /** Rows renderRow has already checked, so renderBody does not parse them again. */
-    private _checkedRows;
+    private _form;
+    private _resetDates;
+    private _selection;
+    private _resetTimer;
     private footer;
     /** Nesting depth of {@link _batchDraws}; > 0 means draws are being collected. */
     private _drawDepth;
@@ -221,19 +227,8 @@ export declare class Datepicker extends Component<DatepickerOptions> {
     private _focusedDate;
     static _template: string;
     constructor(el: HTMLInputElement, options: Partial<DatepickerOptions>);
+    private _rememberResetDate;
     static get defaults(): DatepickerOptions;
-    /**
-     * Initializes instance of Datepicker.
-     * @param el HTML element.
-     * @param options Component options.
-     */
-    static init(el: HTMLInputElement, options?: Partial<DatepickerOptions>): Datepicker;
-    /**
-     * Initializes instances of Datepicker.
-     * @param els HTML elements.
-     * @param options Component options.
-     */
-    static init(els: InitElements<HTMLInputElement | InitElement>, options?: Partial<DatepickerOptions>): Datepicker[];
     /**
      * Escape a value for interpolation into the calendar markup.
      *
@@ -245,20 +240,21 @@ export declare class Datepicker extends Component<DatepickerOptions> {
      */
     static _escape(value: unknown): string;
     static _isDate(obj: any): boolean;
+    /**
+     * A value read without a custom parser: in the picker's own string format
+     * with its names, or else as an ISO date or by the browser.
+     */
+    private _readDefault;
     private static _parseDate;
     private _parseInput;
-    static _isWeekend(date: any): boolean;
     /**
      * @deprecated as this function has no effect without any return statement or global parameter setter.
      */
     static _setToStartOfDay(date: any): void;
-    static _getDaysInMonth(year: any, month: any): number;
-    static _isLeapYear(year: any): boolean;
     static _compareDates(a: any, b: any): boolean;
-    static _compareWithinRange(day: Date, date: Date, dateEnd: Date): boolean;
-    static _comparePastDate(a: Date, b: Date): boolean;
-    static getInstance(el: HTMLElement): Datepicker;
+    static key: string;
     destroy(): void;
+    private _removeDateOverlay;
     destroySelects(): void;
     _insertHTMLIntoDOM(): void;
     /**
@@ -278,6 +274,7 @@ export declare class Datepicker extends Component<DatepickerOptions> {
      * Sets date from input field.
      */
     setDateFromInput(el: HTMLInputElement): void;
+    private _selectTypedMultiDate;
     /**
      * Set a date on the datepicker.
      * @param date Date to set on the datepicker.
@@ -287,6 +284,20 @@ export declare class Datepicker extends Component<DatepickerOptions> {
      */
     setDate(date?: Date, preventOnSelect?: boolean, isEndDate?: boolean, fromUserInput?: boolean): void;
     validateDate(date: Date): void | Date;
+    /**
+     * The date an input holds. Without a custom parser, Date.parse reads
+     * "05/10/2026" from a dd/mm/yyyy format as 10 May, so reuse the date behind
+     * a value the picker wrote, or behind the value the input resets to.
+     */
+    _dateInInput(el: HTMLInputElement): Date | null;
+    /** The selected date an input shows: its place in `dates` for a multiple selection. */
+    _selectedDateFor(el: HTMLInputElement): Date | null;
+    /** `_isDisabledDay` for a date that may carry a time of day. */
+    _isSelectableDay(date: Date): boolean;
+    /** Whether the calendar shows `day` as disabled: outside the bounds, or refused by an option. */
+    _isDisabledDay(day: Date): boolean;
+    _isOutOfBounds(day: Date): boolean;
+    _isRefusedDay(day: Date): boolean;
     /**
      * Set a single date on the datepicker.
      * @param date Date to set on the datepicker.
@@ -369,6 +380,13 @@ export declare class Datepicker extends Component<DatepickerOptions> {
      */
     private _batchDraws;
     draw(): void;
+    private _formSelect;
+    /**
+     * Picking a year rebuilds both selects under the focus, which is on the old
+     * input or in its menu. The returned callback, run after the redraw, gives
+     * focus to the matching new input if the old one went with the rebuild.
+     */
+    private _selectFocusRestorer;
     /** Tear down the two FormSelects and render the controls from scratch. */
     private _rebuildControls;
     /**
@@ -380,11 +398,12 @@ export declare class Datepicker extends Component<DatepickerOptions> {
     private _renderCalendarTable;
     _setupEventHandlers(): void;
     _setupVariables(): void;
-    _removeEventHandlers(): void;
+    /** A date input's listeners. An input the picker removes keeps them, but no event reaches it then. */
     private _addInputEventHandlers;
-    private _removeInputEventHandlers;
     private _removeDateInput;
     _handleInputClick: (e: any) => void;
+    /** Shows a docked or modal calendar. A modal takes focus from the input, so the selected day gets it. */
+    private _showDisplay;
     _handleInputKeydown: (e: KeyboardEvent) => void;
     private _dayDate;
     private _syncCalendarFocus;
@@ -398,6 +417,11 @@ export declare class Datepicker extends Component<DatepickerOptions> {
     _handleYearChange: (e: any) => void;
     gotoMonth(month: any): void;
     gotoYear(year: any): void;
+    _handleFormReset: (e: Event) => void;
+    private _readBackMultiple;
+    /** A native date input's overlay text follows its value, including an empty one. */
+    private _syncDataDate;
+    private _readBackSingle;
     _handleInputChange: (e: Event) => void;
     renderDayName(opts: any, day: any, abbr?: boolean): any;
     createDateInput(): HTMLInputElement;

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

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, InitElement, Openable } from "../core/component";
+import { Component, BaseOptions } from "../core/component";
 export interface ExpandingCardOptions extends BaseOptions {
     onOpen: (el: Element) => void;
     onClose: (el: Element) => void;
@@ -7,20 +7,18 @@ export declare const EXPANDING_CARD_SELECTOR = "article.expanding-card:has(> dia
 /**
  * Morphs a compact card into a full-screen modal detail surface.
  */
-export declare class ExpandingCard extends Component<ExpandingCardOptions> implements Openable {
+export declare class ExpandingCard extends Component<ExpandingCardOptions> {
     isOpen: boolean;
     private readonly trigger;
     private readonly dialog;
     private readonly closeButton;
     private closeGeneration;
+    private _initialTrigger;
     constructor(el: HTMLElement, options: Partial<ExpandingCardOptions>);
     static get defaults(): ExpandingCardOptions;
-    static init(el: HTMLElement, options?: Partial<ExpandingCardOptions>): ExpandingCard;
-    static init(els: InitElements<InitElement>, options?: Partial<ExpandingCardOptions>): ExpandingCard[];
-    static getInstance(el: HTMLElement): ExpandingCard;
+    static key: string;
     destroy(): void;
     private _setupEventHandlers;
-    private _removeEventHandlers;
     private _handleTriggerKeypress;
     private _handleCancel;
     private _handleNativeClose;

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

@@ -0,0 +1,38 @@
+import { LineChart, LineChartOptions } from './lineChart';
+export type FunnelChartOptions = LineChartOptions;
+/**
+ * Funnel chart. It reads its <table> like LineChart, but draws each row of
+ * the first value column as a stage, top to bottom in table order, as wide
+ * as its value against the largest one and centered on the plot. Further
+ * columns show in the tooltip, which also gives each stage's value as a
+ * percentage of the first row's. The up and down arrows move the tooltip
+ * between rows.
+ *
+ * Call `update()` after changing the table, or start it with `watch` or
+ * `data-watch`.
+ */
+export declare class FunnelChart extends LineChart {
+    protected get _type(): string;
+    protected get _horizontal(): boolean;
+    /** A funnel has no value axis. */
+    protected get _axis(): boolean;
+    protected get _points(): boolean;
+    static key: string;
+    /** Every stage is the first series' color, so the tooltip's swatches all match it. */
+    protected _read(): void;
+    show(index: number): void;
+    /** Writes a row's share after its first value in the tooltip. */
+    private _addShare;
+    /**
+     * A row's value as a percentage of the first row's, in whole percentages
+     * with a tenth below 10%, or '' when either row has no stage.
+     */
+    private _share;
+    /** A funnel has one series of stages, so it has no legend. */
+    protected _legend(): Element[];
+    /**
+     * A row per table row, holding its stage. After update(), each stage
+     * starts from its old width, which CSS reads as --from-width.
+     */
+    protected _draw(): Element;
+}

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

@@ -1,4 +1,3 @@
-import { InitElements, InitElement } from '../core/component';
 import { LineChart, LineChartOptions } from './lineChart';
 export type HeatmapChartOptions = LineChartOptions;
 /**
@@ -6,26 +5,46 @@ export type HeatmapChartOptions = LineChartOptions;
  * as a square of the grid, shaded from the lowest value to the highest, with
  * the row headers beside it and the column headers below. A `data-label` on
  * a header cell replaces its text on the grid; an empty one hides it. The
- * tooltip shows one cell, and the arrow keys move round the grid.
+ * tooltip shows one cell, and the arrow keys move round the grid. With
+ * `data-mid` the scale diverges either side of that value, and with
+ * `data-steps` the shades fall into that many bands.
  *
- * Re-run `HeatmapChart.init(el)` after changing the table.
+ * Call `update()` after changing the table, or start it with `watch` or
+ * `data-watch`.
  */
 export declare class HeatmapChart extends LineChart {
     /** Every cell, row by row. */
     private _cells;
-    /** Each cell's shade from 0 to 1, or null for a gap. */
+    /** Each cell's shade from 0 to 1, or -1 to 1 on a diverging scale, or null for a gap. */
     private _levels;
     /** The text of the lowest and highest cells, for the legend. */
     private _ends;
     /** The shades of the lowest and highest cells, where the legend's gradient runs. */
     private _endLevels;
+    /** The box the cells scroll in, beside the row labels. */
+    private _scroll;
     protected get _type(): string;
-    protected get _key(): string;
-    static init(el: HTMLElement, options?: Partial<HeatmapChartOptions>): HeatmapChart;
-    static init(els: InitElements<InitElement>, options?: Partial<HeatmapChartOptions>): HeatmapChart[];
-    static getInstance(el: HTMLElement): HeatmapChart;
+    /** Color carries the value, so there is no value axis. */
+    protected get _axis(): boolean;
+    static key: string;
+    protected get _count(): number;
+    /** Redraws the grid, scrolled where it was. */
+    update(): void;
     /** Highlights one cell, numbered row by row. Pass -1 to hide the tooltip. */
     show(index: number): void;
+    private _activate;
+    /**
+     * A cell's left, top and width in the plot, past any scrolling of the
+     * grid, and the plot's width. A key can move to a cell scrolled out of a
+     * wide grid, so it scrolls into view first.
+     */
+    private _box;
+    private _measure;
+    /** Keeps the tooltip on its cell as the grid scrolls, and hides it once the cell scrolls out. */
+    private _follow;
+    /** Marks the cell and fills the tooltip beside it, on the side with more room. */
+    private _fill;
+    private _position;
     /** Arrows move the way they point, so left and right swap in RTL. */
     protected _keyTarget(key: string): number | undefined;
     /**
@@ -35,12 +54,24 @@ export declare class HeatmapChart extends LineChart {
      * counts as the nearer cell.
      */
     protected _indexAt(e: PointerEvent): number;
+    /** Whether a point is off the cells, or on cells scrolled out of view under the row labels. */
+    private _off;
     /**
      * The legend: a gradient from the lowest cell's shade to the highest's,
      * labelled with their text. A fixed scale wider than the data shows only
      * the part the data uses.
      */
     protected _guides(): Element[];
+    /** With data-steps, every band's shade from the lowest to the highest; otherwise none. */
+    private _bands;
+    /** The number of bands data-steps asks for, or 0 for a smooth scale. */
+    private get _steps();
+    /**
+     * How a value shades its cell: from 0 at the scale's low end to 1 at its
+     * high end, or with data-mid from -1 to 1 either side of that midpoint,
+     * as far as the further end. With data-steps the shades fall into bands.
+     */
+    private _shade;
     /**
      * A grid of the row headers and cells, row by row, with the column headers
      * below. Each cell's --level shades it in CSS.

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

@@ -0,0 +1,58 @@
+import { Component, BaseOptions } from '../core/component';
+export interface HoverCardOptions extends BaseOptions {
+    /**
+     * How long the pointer or keyboard focus rests on the link before the card shows.
+     * @default 500
+     */
+    enterDelay: number;
+    /**
+     * How long the card stays after the pointer and focus leave the link and the card.
+     * @default 300
+     */
+    exitDelay: number;
+}
+/**
+ * Hover card. A `.hover-card-trigger` link names its card, a `.popover` with
+ * `popover="hint"`, in `aria-details`. The card shows against the link after
+ * `enterDelay` and stays while the pointer or focus is on either.
+ */
+export declare class HoverCard extends Component<HoverCardOptions> {
+    /** The card the link's `aria-details` names, or null when it names none. */
+    cardEl: HTMLElement | null;
+    /** Whether the instance has the card showing. */
+    private _shown;
+    /** What keeps the card wanted: the pointer, keyboard focus, or both. */
+    private _holds;
+    private _timeout;
+    /** The anchor name the card is placed against while this link shows it. */
+    private _anchorName;
+    constructor(el: HTMLElement, options: Partial<HoverCardOptions>);
+    static get defaults(): HoverCardOptions;
+    static key: string;
+    destroy(): void;
+    /**
+     * Show the card now, without enterDelay.
+     */
+    open: () => void;
+    /**
+     * Hide the card now, without exitDelay.
+     */
+    close: () => void;
+    private _hidden;
+    private _anchor;
+    /** Wanted cards show after enterDelay; once nothing holds the card, it hides after exitDelay. */
+    private _schedule;
+    private _hold;
+    private _release;
+    private _handlePointerEnter;
+    private _handlePointerLeave;
+    private _handleLinkFocus;
+    private _handleCardFocus;
+    private _handleFocusOut;
+    /** Escape is listened for only while the card shows. close() removes it, and destroy() through the signal. */
+    private _listenForEscape;
+    private _handleKeydown;
+    /** Keeps Escape from the page and, when focus is in the card, takes it back to the link before the card hides. */
+    private _takeEscape;
+    private _handleToggle;
+}

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

@@ -6,9 +6,15 @@ export { Cards } from "./cards";
 export { ExpandingCard } from "./expandingCard";
 export { Carousel } from "./carousel";
 export { CharacterCounter } from "./characterCounter";
+export { InputMask } from "./inputMask";
+export { ShowMore } from "./showMore";
+export { HoverCard } from "./hoverCard";
+export { CurrencyInput } from "./currencyInput";
+export { Cascader } from "./cascader";
 export { Confetti } from "./confetti";
 export { Particles } from "./particles";
 export { Keypad } from "./keypad";
+export { ColorPicker } from "./colorPicker";
 export { Chips } from "./chips";
 export { CommandPalette } from "./commandPalette";
 export { Questionnaire } from "./questionnaire";
@@ -20,18 +26,27 @@ export { HeatmapChart } from "./heatmapChart";
 export { RadarChart } from "./radarChart";
 export { RadialChart } from "./radialChart";
 export { MixedChart } from "./mixedChart";
+export { ScatterChart } from "./scatterChart";
+export { FunnelChart } from "./funnelChart";
+export { SankeyChart } from "./sankeyChart";
+export { TreemapChart } from "./treemapChart";
 export { Datepicker } from "./datepicker";
 export { Menu } from "./menu";
+export { Menubar } from "./menubar";
 export { MessageScroller } from "./messageScroller";
+export { PullToRefresh } from "./pullToRefresh";
+export { LoadingOverlay } from "./loadingOverlay";
+export { SwipeActions } from "./swipeActions";
 export { RichTextEditor } from "./richTextEditor";
 export { MapView } from "./mapView";
 export { Lightbox } from "./lightbox";
 export { Slider } from "./slider";
 export { ScrollSpy } from "./scrollspy";
+export { BackToTop } from "./backToTop";
 export { FormSelect } from "./select";
+export { TreeSelect } from "./treeSelect";
 export { NavigationRail } from "./navigationRail";
 export { Tabs } from "./tabs";
 export { Timepicker } from "./timepicker";
 export { Snackbar } from "./snackbar";
 export { Tooltip } from "./tooltip";
-export { Slider as Range } from "./slider";

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

@@ -0,0 +1,30 @@
+import { Component, BaseOptions } from '../core/component';
+/**
+ * Input mask. Formats a text field's value to the pattern in its `data-mask`
+ * attribute as people type, paste or compose: `0` takes a digit, `a` a
+ * letter, `*` either, and every other character is a literal the mask writes
+ * itself. The form submits the value as the field shows it.
+ */
+export declare class InputMask extends Component<BaseOptions> {
+    el: HTMLInputElement;
+    static key: string;
+    private _tokens;
+    constructor(el: HTMLInputElement, options: Partial<BaseOptions>);
+    static get defaults(): BaseOptions;
+    private _onInput;
+    /**
+     * Backspace after a literal, or Delete before one, would remove the
+     * literal, which the mask then writes back. It removes the slot character
+     * across the literal instead.
+     */
+    private _onBeforeInput;
+    /** The index among the slot characters to delete when the character `step` from the caret is a literal, or -1. */
+    private _acrossLiteral;
+    /** Removes slot character `index`, puts the caret where it was, and reports the edit as typing would. */
+    private _remove;
+    private _onReset;
+    private _afterReset;
+    private _format;
+    /** Rewrites the value to the mask. Returns where the caret goes, or null when the value already fit. */
+    private _rewrite;
+}

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

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
+import { Component, BaseOptions } from '../core/component';
 export interface KeypadOptions extends BaseOptions {
     /**
      * Called after every key press with the text typed ('7', 'A', ' ') or the
@@ -6,29 +6,61 @@ export interface KeypadOptions extends BaseOptions {
      * @default null
      */
     onKey: ((key: string) => void) | null;
+    /** Text the keypad writes. */
+    i18n: Partial<KeypadI18n>;
+}
+export interface KeypadI18n {
+    /**
+     * The validation message for a field whose keypad-typed value is shorter
+     * than its minlength, which the browser only checks after typing.
+     */
+    tooShort: (minLength: number) => string;
 }
 type Field = HTMLInputElement | HTMLTextAreaElement;
 type Root = Document | ShadowRoot;
 /**
  * Keypad and keyboard. A `.keypad` or `.keyboard` whose `aria-controls`
  * names a text field types into it: a key's `value` is inserted at the caret,
- * and `data-key="Backspace"`, `"Enter"` and `"Shift"` edit, submit and
- * capitalize. The field receives the same `input` event typing would fire.
+ * and `data-key="Backspace"`, `"Enter"`, `"Shift"` and `"CapsLock"` edit,
+ * submit and capitalize. A `data-key="Layer"` key shows the elements whose
+ * `data-layer` matches its `value` and hides the other layers. The field
+ * receives the same `input` event typing would fire.
  */
 export declare class Keypad extends Component<KeypadOptions> {
     /** @internal */
     _root: Root | null;
+    /** Fields this keypad typed into, whose messages it clears on destroy. */
+    private _fields;
     constructor(el: HTMLElement, options: Partial<KeypadOptions>);
+    private _attach;
+    private _waitForInsertion;
+    private _listen;
     static get defaults(): KeypadOptions;
-    static init(el: HTMLElement, options?: Partial<KeypadOptions>): Keypad;
-    static init(els: InitElements<InitElement>, options?: Partial<KeypadOptions>): Keypad[];
-    static getInstance(el: HTMLElement): Keypad;
+    static key: string;
     destroy(): void;
     /** The text field named by `aria-controls`, if there is one. */
     get target(): Field | null;
     private _shared;
     /** @internal */
     _press(key: HTMLButtonElement): void;
+    /** Runs a key and returns what onKey hears: the typed text or the function key's name. */
+    private _act;
+    /** Shift and Caps Lock latch: pressed until pressed again, or for Shift until the next character. */
+    private _latch;
+    /** Shows the layer the key names and hides the others. */
+    private _layer;
+    private _type;
+    /** A character as Shift or Caps Lock writes it. Shift is one-shot: it releases after one character. */
+    private _case;
+    /** The target field, unless it is disabled or read-only. */
+    private get _editable();
+    private _apply;
+    /** Enter submits an input's form and starts a new line in a textarea. */
+    private _enter;
+    /** @internal Lights or clears every key a hardware key matches. */
+    _light(name: string, on: boolean): void;
+    /** @internal A non-empty value shorter than minlength is invalid, as typing would make it. */
+    _checkLength(field: Field): void;
     private _edit;
 }
 export {};

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

@@ -1,4 +1,4 @@
-import { BaseOptions, Component, InitElements, InitElement } from '../core/component';
+import { BaseOptions, Component } from '../core/component';
 export interface LightboxOptions extends BaseOptions {
     /**
      * Transition in duration in milliseconds.
@@ -44,9 +44,6 @@ export declare class Lightbox extends Component<LightboxOptions> {
     originalHeight: number;
     private originInlineStyles;
     private placeholder;
-    /** Ancestors forced to `overflow: visible`, with the inline value to put back. */
-    private _changedAncestorList;
-    private static _overflow;
     private newHeight;
     private newWidth;
     private windowWidth;
@@ -61,35 +58,32 @@ export declare class Lightbox extends Component<LightboxOptions> {
     private _motion;
     private _isOpen;
     private _destroyed;
+    /** Removes the listeners that close an open lightbox. */
+    private _windowEvents;
     private _revision;
+    private _phase;
     constructor(el: HTMLElement, options: Partial<LightboxOptions>);
     static get defaults(): LightboxOptions;
-    /**
-     * Initializes instance of Lightbox.
-     * @param el HTML element.
-     * @param options Component options.
-     */
-    static init(el: HTMLElement, options?: Partial<LightboxOptions>): Lightbox;
-    /**
-     * Initializes instances of Lightbox.
-     * @param els HTML elements.
-     * @param options Component options.
-     */
-    static init(els: InitElements<InitElement>, options?: Partial<LightboxOptions>): Lightbox[];
-    static getInstance(el: HTMLElement): Lightbox;
+    static key: string;
     destroy(): void;
+    private _restoreFocus;
     private _reset;
     private _cancel;
     private _schedule;
     private _handleMotionChange;
     private _setupEventHandlers;
-    private _removeEventHandlers;
     private _handleLightboxKeypress;
     private _handleLightboxToggle;
     private _handleWindowChange;
     private _handleWindowEscape;
-    private _makeAncestorsOverflowVisible;
-    private _offset;
+    private _handleWindowTab;
+    /**
+     * Shows `el` as a manual popover, so it is in the top layer: no ancestor
+     * clips or covers it, and it stacks above what was shown before it.
+     */
+    private _showOnTop;
+    /** The placeholder's document position, where the image rests. */
+    private _restingPlace;
     private _updateVars;
     private _animateImageIn;
     private _animateImageOut;