domma-js 0.56.0 → 0.58.0

package/assets/types/generated/src/components/modal.d.ts

@@ -0,0 +1,339 @@
+/**
+ * A new modal in the shared dialog container.
+ * @param {ModalOptions} [options]
+ * @returns {Modal}
+ */
+export function createModal(options?: ModalOptions): Modal;
+/**
+ * Open a new modal and resolve with the id of the button that closed it
+ * (null when it was closed another way - X, backdrop or Escape).
+ * @param {ModalOptions} [options]
+ * @returns {Promise<string|null>}
+ */
+export function showModal(options?: ModalOptions): Promise<string | null>;
+/**
+ * A footer button.
+ * @typedef {object} ModalButton
+ * @property {string} [id] - Passed to onButtonClick (default `btn-<index>`)
+ * @property {string} [text='Button'] - Label
+ * @property {string} [variant='secondary'] - Adds `btn-<variant>`
+ * @property {string} [className] - Extra classes
+ * @property {boolean} [close=true] - false keeps the modal open after the click
+ * @property {(modal: ModalInstance, event: MouseEvent) => void} [onClick]
+ */
+/**
+ * @typedef {object} ModalOptions
+ * @property {boolean} [backdrop=true] - Show backdrop overlay
+ * @property {boolean} [backdropClose=true] - Close modal when clicking backdrop
+ * @property {boolean} [keyboard=true] - Close modal on Escape key
+ * @property {boolean} [closeOnEscape=true] - Same as `keyboard`; either false keeps Escape from closing
+ * @property {import('../elements.js').AnimationType|false} [animation='fade'] - Animation type
+ * @property {number} [animationDuration=300] - Animation duration in ms
+ * @property {boolean} [closeButton=true] - Show close button
+ * @property {'small'|'sm'|'medium'|'md'|'large'|'lg'|'xl'|'xlarge'|'full'|(string & {})} [size='medium'] - A named size or any CSS width (the factory's default is 'large')
+ * @property {boolean} [centered=true] - Centre vertically (false: near the top)
+ * @property {boolean} [scrollable=false] - Scroll the body inside a capped height
+ * @property {string} [title] - Title text
+ * @property {string|Node} [content] - Body content (factory mode): HTML (sanitised unless `safe: false`) or a Node
+ * @property {string} [footer] - Footer text
+ * @property {ModalButton[]} [buttons] - Footer buttons (the factory's default is one Close button)
+ * @property {boolean} [safe=true] - false: content is trusted HTML (not sanitised)
+ * @property {string} [className] - Extra classes on the dialog
+ * @property {string} [headerClass] - Extra classes on the header
+ * @property {string} [bodyClass] - Extra classes on the body
+ * @property {string} [footerClass] - Extra classes on the footer
+ * @property {boolean} [focus=true] - Focus the dialog on open
+ * @property {boolean} [trapFocus=true] - Keep Tab inside while open (default true; false without a backdrop unless given)
+ * @property {boolean} [returnFocus=true] - Put focus back where it was on close
+ * @property {boolean} [visible=false] - Open at once
+ * @property {((modal: ModalInstance) => void)|null} [onOpen] - When opening starts
+ * @property {((modal: ModalInstance) => void)|null} [onOpened] - After open animation completes
+ * @property {((modal: ModalInstance) => void)|null} [onClose] - When closing starts
+ * @property {((modal: ModalInstance) => void)|null} [onClosed] - After close animation completes
+ * @property {((modal: ModalInstance) => boolean|void)|null} [onBeforeOpen] - Return false to refuse the open
+ * @property {((modal: ModalInstance) => boolean|void)|null} [onBeforeClose] - Return false to refuse the close
+ * @property {((buttonId: string, modal: ModalInstance) => void)|null} [onButtonClick] - A footer button was clicked
+ */
+/** @typedef {Modal} ModalInstance */
+export class Modal extends Component {
+    static defaults: {
+        backdrop: boolean;
+        backdropClose: boolean;
+        keyboard: boolean;
+        closeOnEscape: boolean;
+        animation: string;
+        animationDuration: number;
+        closeButton: boolean;
+        size: string;
+        centered: boolean;
+        scrollable: boolean;
+        title: string;
+        content: string;
+        footer: string;
+        buttons: any[];
+        safe: boolean;
+        className: string;
+        headerClass: string;
+        bodyClass: string;
+        footerClass: string;
+        focus: boolean;
+        trapFocus: boolean;
+        returnFocus: boolean;
+        visible: boolean;
+        onOpen: any;
+        onOpened: any;
+        onClose: any;
+        onClosed: any;
+        onBeforeOpen: any;
+        onBeforeClose: any;
+        onButtonClick: any;
+    };
+    /**
+     * @param {import('./shared.js').ComponentTarget} selector - the element to make a modal; null makes one
+     * @param {ModalOptions} [options]
+     */
+    constructor(selector: import("./shared.js").ComponentTarget, options?: ModalOptions);
+    _factoryMade: boolean;
+    _isOpen: boolean;
+    _timers: any[];
+    _restoreFocus: Element;
+    _given: ModalOptions;
+    _init(): void;
+    _authored: boolean;
+    _host: HTMLElement | HTMLDivElement;
+    _addedClasses: string[];
+    _addedAttrs: any[];
+    /** Whether this open traps focus: on by default, except over a page left usable (no backdrop). */
+    _wantsTrap(): boolean;
+    _startTrap(): void;
+    _trap: FocusTrap;
+    /** Options the caller passed, without the defaults. */
+    _givenOptions(): ModalOptions;
+    _render(): void;
+    _backdrop: HTMLDivElement;
+    _dialog: HTMLDivElement;
+    _titleEl: HTMLHeadingElement;
+    _header: HTMLDivElement;
+    _body: HTMLDivElement;
+    _footer: HTMLDivElement;
+    _footerText: HTMLSpanElement;
+    _renderButtons(): void;
+    _bind(): void;
+    _downOnBackdrop: boolean;
+    /** A node is ours unless it sits inside another modal nested in this one. */
+    _ownsNode(node: any): boolean;
+    _later(fn: any, ms: any): void;
+    _clearTimers(): void;
+    _duration(): number;
+    /**
+     * Open the modal.
+     * @returns {this}
+     */
+    open(): this;
+    /**
+     * Close the modal (a `beforeclose` handler can refuse).
+     * @returns {this}
+     */
+    close(): this;
+    /**
+     * Toggle modal visibility.
+     * @returns {this}
+     */
+    toggle(): this;
+    /**
+     * Whether the modal is open.
+     * @returns {boolean}
+     */
+    isOpen(): boolean;
+    /**
+     * Permanent alias: delegates to open() by name, so a replaced open() is honoured.
+     * @returns {this}
+     */
+    show(...args: any[]): this;
+    /**
+     * Permanent alias: delegates to close() by name.
+     * @returns {this}
+     */
+    hide(...args: any[]): this;
+    /**
+     * Replace the title; empty hides it.
+     * @param {string|null} title
+     * @returns {this}
+     */
+    setTitle(title: string | null): this;
+    /**
+     * Replace the body content (the element's children other than a footer slot).
+     * A string is HTML, sanitised unless `{safe: false}`; a Node is appended.
+     * @param {string|Node|null} content
+     * @param {{safe?: boolean}} [opts]
+     * @returns {this}
+     */
+    setContent(content: string | Node | null, opts?: {
+        safe?: boolean;
+    }): this;
+    /**
+     * Replace the footer buttons.
+     * @param {ModalButton[]|null} buttons
+     * @returns {this}
+     */
+    setButtons(buttons: ModalButton[] | null): this;
+    _applyOptions(): void;
+    _destroyed: boolean;
+    /**
+     * Permanent alias of destroy().
+     * @returns {void}
+     */
+    remove(...args: any[]): void;
+}
+export default Modal;
+/**
+ * A footer button.
+ */
+export type ModalButton = {
+    /**
+     * - Passed to onButtonClick (default `btn-<index>`)
+     */
+    id?: string;
+    /**
+     * - Label
+     */
+    text?: string;
+    /**
+     * - Adds `btn-<variant>`
+     */
+    variant?: string;
+    /**
+     * - Extra classes
+     */
+    className?: string;
+    /**
+     * - false keeps the modal open after the click
+     */
+    close?: boolean;
+    onClick?: (modal: ModalInstance, event: MouseEvent) => void;
+};
+export type ModalOptions = {
+    /**
+     * - Show backdrop overlay
+     */
+    backdrop?: boolean;
+    /**
+     * - Close modal when clicking backdrop
+     */
+    backdropClose?: boolean;
+    /**
+     * - Close modal on Escape key
+     */
+    keyboard?: boolean;
+    /**
+     * - Same as `keyboard`; either false keeps Escape from closing
+     */
+    closeOnEscape?: boolean;
+    /**
+     * - Animation type
+     */
+    animation?: import("../elements.js").AnimationType | false;
+    /**
+     * - Animation duration in ms
+     */
+    animationDuration?: number;
+    /**
+     * - Show close button
+     */
+    closeButton?: boolean;
+    /**
+     * - A named size or any CSS width (the factory's default is 'large')
+     */
+    size?: "small" | "sm" | "medium" | "md" | "large" | "lg" | "xl" | "xlarge" | "full" | (string & {});
+    /**
+     * - Centre vertically (false: near the top)
+     */
+    centered?: boolean;
+    /**
+     * - Scroll the body inside a capped height
+     */
+    scrollable?: boolean;
+    /**
+     * - Title text
+     */
+    title?: string;
+    /**
+     * - Body content (factory mode): HTML (sanitised unless `safe: false`) or a Node
+     */
+    content?: string | Node;
+    /**
+     * - Footer text
+     */
+    footer?: string;
+    /**
+     * - Footer buttons (the factory's default is one Close button)
+     */
+    buttons?: ModalButton[];
+    /**
+     * - false: content is trusted HTML (not sanitised)
+     */
+    safe?: boolean;
+    /**
+     * - Extra classes on the dialog
+     */
+    className?: string;
+    /**
+     * - Extra classes on the header
+     */
+    headerClass?: string;
+    /**
+     * - Extra classes on the body
+     */
+    bodyClass?: string;
+    /**
+     * - Extra classes on the footer
+     */
+    footerClass?: string;
+    /**
+     * - Focus the dialog on open
+     */
+    focus?: boolean;
+    /**
+     * - Keep Tab inside while open (default true; false without a backdrop unless given)
+     */
+    trapFocus?: boolean;
+    /**
+     * - Put focus back where it was on close
+     */
+    returnFocus?: boolean;
+    /**
+     * - Open at once
+     */
+    visible?: boolean;
+    /**
+     * - When opening starts
+     */
+    onOpen?: ((modal: ModalInstance) => void) | null;
+    /**
+     * - After open animation completes
+     */
+    onOpened?: ((modal: ModalInstance) => void) | null;
+    /**
+     * - When closing starts
+     */
+    onClose?: ((modal: ModalInstance) => void) | null;
+    /**
+     * - After close animation completes
+     */
+    onClosed?: ((modal: ModalInstance) => void) | null;
+    /**
+     * - Return false to refuse the open
+     */
+    onBeforeOpen?: ((modal: ModalInstance) => boolean | void) | null;
+    /**
+     * - Return false to refuse the close
+     */
+    onBeforeClose?: ((modal: ModalInstance) => boolean | void) | null;
+    /**
+     * - A footer button was clicked
+     */
+    onButtonClick?: ((buttonId: string, modal: ModalInstance) => void) | null;
+};
+export type ModalInstance = Modal;
+import Component from '../component.js';
+import FocusTrap from './focus-trap.js';

package/assets/types/generated/src/components/range-slider.d.ts

@@ -0,0 +1,267 @@
+/**
+ * E.rangeSlider: one instance per element; a second call updates it.
+ * @param {Element} el
+ * @param {RangeSliderOptions} [options]
+ * @returns {RangeSlider}
+ */
+export function rangeSliderFor(el: Element, options?: RangeSliderOptions): RangeSlider;
+/** A number, or [low, high] with `range: true`. @typedef {number|[number, number]} RangeSliderValue */
+/**
+ * @typedef {object} RangeSliderMark
+ * @property {number} value
+ * @property {string} [label]
+ */
+/**
+ * @typedef {object} RangeSliderOptions
+ * @property {number} [min] Default: the input's min, else 0
+ * @property {number} [max] Default: the input's max, else 100
+ * @property {number|'any'} [step] Default: the input's step, else 1
+ * @property {RangeSliderValue|string|null} [value] A number, or [low, high] / "low,high" with range: true
+ * @property {boolean} [range] Two thumbs; two inputs, sharing `name` unless `names` is given
+ * @property {'horizontal'|'vertical'} [orientation]
+ * @property {boolean|number|number[]} [ticks] true = every step, n = every n units, or the values to draw at
+ * @property {boolean} [tickLabels] Label the ticks (always on for an array)
+ * @property {((value: number, where: 'tick'|'mark'|'tooltip'|'aria') => string)|null} [labels] Formats the value for ticks, marks, the tooltip and aria-valuetext
+ * @property {((value: number, where: 'tick'|'mark'|'tooltip'|'aria') => string)|null} [format] Read when `labels` is not set
+ * @property {'always'|'hover'|'never'} [tooltip] Default 'hover' (also shown on focus and while dragging)
+ * @property {RangeSliderMark[]|null} [marks]
+ * @property {boolean} [disabled]
+ * @property {string|null} [name]
+ * @property {[string, string]|null} [names] [lowName, highName] for range: true
+ * @property {number} [minDistance] range: true - the closest the thumbs may come
+ * @property {boolean|null} [rtl] null = follow the page's direction
+ * @property {string|null} [ariaLabel]
+ * @property {[string, string]|null} [ariaLabels]
+ * @property {string} [className]
+ * @property {((value: RangeSliderValue) => void)|null} [onInput] While dragging, and on each key press
+ * @property {((value: RangeSliderValue) => void)|null} [onChange] When the value is committed
+ * @property {((next: RangeSliderValue, current: RangeSliderValue) => boolean|void)|null} [onBeforeChange] Return false to refuse a move
+ */
+/** @typedef {RangeSlider} RangeSliderInstance */
+export class RangeSlider extends Component {
+    /** @type {RangeSliderOptions} */
+    static defaults: RangeSliderOptions;
+    /**
+     * Options not given are read from the input's own attributes, as a plain range input would.
+     * @param {*} element
+     * @param {RangeSliderOptions} [options]
+     * @returns {RangeSliderOptions}
+     */
+    static fromInput(element: any, options?: RangeSliderOptions): RangeSliderOptions;
+    /**
+     * @param {string|Element|null} element - an <input type="range"> or a container
+     * @param {RangeSliderOptions} [options]
+     */
+    constructor(element: string | Element | null, options?: RangeSliderOptions);
+    _isInput: boolean;
+    _made: any[];
+    _hooked: any[];
+    _dispatching: boolean;
+    _drag: {
+        index: number;
+        pointerId: any;
+        start: number[];
+    };
+    _timers: any[];
+    _values: number[];
+    get _min(): number;
+    get _max(): number;
+    /** The step used to snap values; null for step 'any'. */
+    get _step(): number;
+    /** The step the arrow keys move by. */
+    get _keyStep(): number;
+    /** Snap to the step grid (counted from min, as a native range input does) and clamp. */
+    _snap(v: any): number;
+    get _minDistance(): number;
+    /** Snap, order and space a candidate value (a number, [a, b] or "a,b"). */
+    _normalise(value: any): number[];
+    _initialValues(): number[];
+    _format(value: any, where: any): string;
+    _pct(v: any): number;
+    get _vertical(): boolean;
+    get _rtl(): boolean;
+    _setupInputs(): void;
+    _inputs: HTMLElement[];
+    _restore: {
+        name: string;
+        hidden: boolean;
+        tabindex: string;
+        ariaHidden: string;
+        min: string;
+        max: string;
+        step: string;
+        disabled: string;
+    };
+    _syncInputAttrs(): void;
+    /**
+     * Code (or M.bind, which writes `input.value`) setting a value programmatically fires
+     * no event, so the drawn slider would never move. The instance gets its own `value`
+     * property that writes through to the native one and then redraws. Removed on destroy.
+     */
+    _hookValues(): void;
+    /** Push the current values into the real inputs. */
+    _writeInputs(): void;
+    _writing: boolean;
+    /** Read the inputs back after something outside changed them. */
+    _fromInputs(): void;
+    _bindInputs(): void;
+    _labels: any[];
+    _labelText(): any;
+    _render(): void;
+    _ticksEl: HTMLDivElement;
+    _marksEl: HTMLDivElement;
+    _thumbs: any[] | HTMLDivElement[];
+    _fillEl: HTMLDivElement;
+    _track: HTMLDivElement;
+    _root: HTMLDivElement;
+    /** Values a tick is drawn at. */
+    _tickValues(): number[];
+    _place(el: any, pct: any): void;
+    _renderTicks(root: any): HTMLDivElement;
+    _renderMarks(root: any): HTMLDivElement;
+    /** Move the thumbs and fill to the current values and update the ARIA. */
+    _paint(): void;
+    _applyDisabled(): void;
+    _bindRoot(): void;
+    _rootHandlers: any[] | (string | HTMLDivElement | ((e: any) => void))[][];
+    _unbindRoot(): void;
+    /** The value under a pointer. */
+    _valueAt(e: any): number;
+    /** Which thumb a press at `value` moves: the one pressed, else the nearer. */
+    _pickThumb(e: any, value: any): number;
+    _onPointerDown(e: any): void;
+    _onPointerMove(e: any): void;
+    _onPointerUp(e: any, cancelled?: boolean): void;
+    _onKeyDown(e: any): void;
+    _same(values: any): any;
+    /** The public value shape for an array of values. */
+    _shape(values: any): any;
+    /**
+     * Move one thumb towards `value`, held off the other thumb by minDistance.
+     * @returns {boolean} whether the value changed
+     */
+    _propose(index: any, value: any): boolean;
+    /** Set values, redraw, and tell the input and listeners about it. */
+    _apply(values: any, index: any, phase: any): void;
+    _commit(index: any): void;
+    /**
+     * A native event on a real input, flagged so our own sync listener ignores it. The DOM
+     * event goes first: a form listening on change sees the input, then the component's
+     * own change (which Forma uses to store the [low, high] pair) has the last word.
+     */
+    _dispatch(input: any, type: any): void;
+    /**
+     * The value: a number, or [low, high] with `range: true`.
+     * @returns {RangeSliderValue}
+     */
+    getValue(): RangeSliderValue;
+    /**
+     * Set the value. Fires beforechange (cancelable), the inputs' native input and change
+     * events, then input and change - unless `{silent: true}`, which only moves it.
+     * @param {RangeSliderValue|number[]|string} value - a number, [low, high] or "low,high"
+     * @param {{silent?: boolean}} [opts]
+     * @returns {this}
+     */
+    setValue(value: RangeSliderValue | number[] | string, opts?: {
+        silent?: boolean;
+    }): this;
+    /**
+     * Change the bounds. The value is pulled inside them; if that moves it, input and
+     * change fire (without beforechange - the bounds are not the user's to refuse).
+     * @param {number} min
+     * @param {number} max
+     * @returns {this}
+     */
+    setRange(min: number, max: number): this;
+    /** @returns {this} */
+    enable(): this;
+    /** @returns {this} */
+    disable(): this;
+    /** @returns {boolean} */
+    isDisabled(): boolean;
+    _applyOptions(): void;
+}
+export default RangeSlider;
+/**
+ * A number, or [low, high] with `range: true`.
+ */
+export type RangeSliderValue = number | [number, number];
+export type RangeSliderMark = {
+    value: number;
+    label?: string;
+};
+export type RangeSliderOptions = {
+    /**
+     * Default: the input's min, else 0
+     */
+    min?: number;
+    /**
+     * Default: the input's max, else 100
+     */
+    max?: number;
+    /**
+     * Default: the input's step, else 1
+     */
+    step?: number | "any";
+    /**
+     * A number, or [low, high] / "low,high" with range: true
+     */
+    value?: RangeSliderValue | string | null;
+    /**
+     * Two thumbs; two inputs, sharing `name` unless `names` is given
+     */
+    range?: boolean;
+    orientation?: "horizontal" | "vertical";
+    /**
+     * true = every step, n = every n units, or the values to draw at
+     */
+    ticks?: boolean | number | number[];
+    /**
+     * Label the ticks (always on for an array)
+     */
+    tickLabels?: boolean;
+    /**
+     * Formats the value for ticks, marks, the tooltip and aria-valuetext
+     */
+    labels?: ((value: number, where: "tick" | "mark" | "tooltip" | "aria") => string) | null;
+    /**
+     * Read when `labels` is not set
+     */
+    format?: ((value: number, where: "tick" | "mark" | "tooltip" | "aria") => string) | null;
+    /**
+     * Default 'hover' (also shown on focus and while dragging)
+     */
+    tooltip?: "always" | "hover" | "never";
+    marks?: RangeSliderMark[] | null;
+    disabled?: boolean;
+    name?: string | null;
+    /**
+     * [lowName, highName] for range: true
+     */
+    names?: [string, string] | null;
+    /**
+     * range: true - the closest the thumbs may come
+     */
+    minDistance?: number;
+    /**
+     * null = follow the page's direction
+     */
+    rtl?: boolean | null;
+    ariaLabel?: string | null;
+    ariaLabels?: [string, string] | null;
+    className?: string;
+    /**
+     * While dragging, and on each key press
+     */
+    onInput?: ((value: RangeSliderValue) => void) | null;
+    /**
+     * When the value is committed
+     */
+    onChange?: ((value: RangeSliderValue) => void) | null;
+    /**
+     * Return false to refuse a move
+     */
+    onBeforeChange?: ((next: RangeSliderValue, current: RangeSliderValue) => boolean | void) | null;
+};
+export type RangeSliderInstance = RangeSlider;
+import Component from '../component.js';

package/assets/types/generated/src/components/shared.d.ts

@@ -0,0 +1,91 @@
+/**
+ * What a component accepts as its host: a CSS selector, an element, or a Domma/jQuery-like
+ * collection (its first element is used).
+ * @typedef {string|Element|ArrayLike<Element>|null|undefined} ComponentTarget
+ */
+/**
+ * An element from a selector, an element, or a Domma/jQuery-like collection.
+ * @param {ComponentTarget} target
+ * @returns {HTMLElement|null}
+ */
+export function resolveElement(target: ComponentTarget): HTMLElement | null;
+/**
+ * Every element a selector matches (one for an element).
+ * @param {ComponentTarget} target
+ * @returns {HTMLElement[]}
+ */
+export function resolveAll(target: ComponentTarget): HTMLElement[];
+/**
+ * A boolean option that may have arrived as a string ('false' from an attribute, or
+ * from a caller who worked around the old wrappers dropping a boolean false).
+ * @param {*} value
+ * @param {boolean} [fallback]
+ * @returns {boolean}
+ */
+export function flag(value: any, fallback?: boolean): boolean;
+/**
+ * A number option that may be a string; anything unparseable gives the fallback.
+ * @param {*} value
+ * @param {number} [fallback]
+ * @returns {number}
+ */
+export function num(value: any, fallback?: number): number;
+/**
+ * Put content into an element. Strings are HTML, sanitised the way `$().html()` does
+ * (DOMPurify, or escaped without it) unless `{safe: false}`; Nodes are appended.
+ * @param {Element} el
+ * @param {string|Node|null} content
+ * @param {{safe?: boolean, text?: boolean}} [opts] - `text: true` writes a string as text
+ */
+export function fill(el: Element, content: string | Node | null, opts?: {
+    safe?: boolean;
+    text?: boolean;
+}): void;
+/**
+ * Scan new markup for `data-icon` placeholders when the icon module is loaded.
+ * @param {Element|null|undefined} el
+ */
+export function scanIcons(el: Element | null | undefined): void;
+/**
+ * A page-unique id with a prefix.
+ * @param {string} prefix
+ * @returns {string}
+ */
+export function uniqueId(prefix: string): string;
+/**
+ * Give the first of several instances a non-enumerable `all()` that returns every
+ * one, so `E.tooltip('.many')` initialises each match and still returns an instance.
+ * @template {object} T
+ * @param {T[]} list
+ * @returns {(T & {all(): T[]})|null}
+ */
+export function firstWithAll<T extends unknown>(list: T[]): (T & {
+    all(): T[];
+}) | null;
+/**
+ * The component of this kind already on an element, given any new options - so calling
+ * E.card(el) twice updates one card instead of stacking a second set of listeners on it.
+ * @param {Element} el
+ * @param {string} name - componentName
+ * @param {Record<string, any>} [options]
+ * @returns {any}
+ */
+export function reuse(el: Element, name: string, options?: Record<string, any>): any;
+/** Whether the user asked for less motion. */
+export function reducedMotion(): boolean;
+/**
+ * Lift a popup that lives on <body> above whatever stacking layer its trigger sits in.
+ * A date picker or dropdown opened from inside a slideover (z-index 9999) or a modal
+ * would otherwise draw underneath it, because its own stylesheet z-index (1000-1080)
+ * is only meant to beat ordinary page content. Sets an inline z-index only when the
+ * trigger's layer is higher than the popup's own; clears it otherwise.
+ * @param {Element} trigger - the element the popup belongs to
+ * @param {HTMLElement} popup - the popup, appended to <body>
+ * @returns {void}
+ */
+export function layerAbove(trigger: Element, popup: HTMLElement): void;
+/**
+ * What a component accepts as its host: a CSS selector, an element, or a Domma/jQuery-like
+ * collection (its first element is used).
+ */
+export type ComponentTarget = string | Element | ArrayLike<Element> | null | undefined;