@vunset/vue 0.0.0-stage → 1.0.0-rc.2

package/dist/shared/align-item-with-trigger.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Placing a dropdown so the chosen option sits on top of the trigger, the way a
+ * native macOS `<select>` does. The list scrolls itself into the right place,
+ * so the option you are looking at does not move when the popup opens.
+ *
+ * The geometry is a pure function of a handful of measurements, kept separate
+ * from the DOM so it can be reasoned about — and tested — without a layout
+ * engine.
+ */
+export interface AlignGeometry {
+    /** Usable viewport height. */
+    viewportHeight: number;
+    /** Trigger's distance from the top of the viewport. */
+    triggerTop: number;
+    triggerHeight: number;
+    /** The popup's height with nothing constraining the list. */
+    fullHeight: number;
+    /** The scrollable content's full height. */
+    contentHeight: number;
+    /** Distance from the popup's top edge to the list's top edge. */
+    listOffsetTop: number;
+    /** Center of the target option, measured from the top of the content. */
+    itemCenterFromContentTop: number;
+    /** The option's own height. The whole of it has to stay inside the list. */
+    itemHeight: number;
+    /**
+     * The tallest the list may be by the stylesheet's reckoning, or `Infinity`.
+     * An aligned popup shrinks to fit this rather than overriding it.
+     */
+    listMaxHeightLimit: number;
+    /** Space kept between the popup and the viewport edges. */
+    margin: number;
+    /** Below this, a dropdown that covers its trigger is worse than one beside it. */
+    minHeight: number;
+    /** How close the trigger may be to a viewport edge before this is abandoned. */
+    edgeThreshold: number;
+}
+export interface AlignResult {
+    /** Where to put the popup's top edge, in viewport coordinates. */
+    top: number;
+    /** The popup's height. */
+    height: number;
+    /** What the list may grow to before it scrolls. */
+    listMaxHeight: number;
+    /** How far to scroll the list so the option lands on the trigger. */
+    scrollTop: number;
+    /** Vertical origin for an enter animation, as a percentage of the popup. */
+    originRatio: number;
+}
+/**
+ * Works out where the popup goes, or returns `null` to say it should not be
+ * tried at all.
+ *
+ * Two situations make it worse than an ordinary dropdown, and both bail out
+ * rather than producing something cramped: a trigger already hard against the
+ * top or bottom of the viewport, which leaves the list nowhere to extend, and
+ * too little height to show a useful number of options.
+ */
+export declare function computeItemAlignment(geometry: AlignGeometry): AlignResult | null;
+export interface AlignElements {
+    trigger: HTMLElement;
+    positioner: HTMLElement;
+    popup: HTMLElement;
+    list: HTMLElement;
+    item: HTMLElement;
+    /** The part of the trigger showing the current value, for horizontal alignment. */
+    value?: HTMLElement | null;
+    /** The list's own cap, if it has one. Read instead of the stylesheet's. */
+    maxHeight?: string;
+}
+export interface AlignPlacement extends AlignResult {
+    left: number;
+}
+export declare const ALIGN_MARGIN = 8;
+export declare const ALIGN_MIN_HEIGHT = 100;
+export declare const ALIGN_EDGE_THRESHOLD = 20;
+/**
+ * Measures the live elements and returns where the popup should go.
+ *
+ * The list's `max-height` is lifted while measuring, because the popup's
+ * natural height is the thing being measured and a stylesheet cap would hide
+ * it. The caller sets the final value from the result.
+ */
+export declare function measureItemAlignment(elements: AlignElements): AlignPlacement | null;

package/dist/shared/align-item-with-trigger.js

@@ -0,0 +1,109 @@
+//#region src/shared/align-item-with-trigger.ts
+var clamp = (value, min, max) => Math.min(Math.max(value, min), Math.max(min, max));
+/**
+* Works out where the popup goes, or returns `null` to say it should not be
+* tried at all.
+*
+* Two situations make it worse than an ordinary dropdown, and both bail out
+* rather than producing something cramped: a trigger already hard against the
+* top or bottom of the viewport, which leaves the list nowhere to extend, and
+* too little height to show a useful number of options.
+*/
+function computeItemAlignment(geometry) {
+	const { viewportHeight, triggerTop, triggerHeight, fullHeight, contentHeight, listOffsetTop, itemCenterFromContentTop, itemHeight, listMaxHeightLimit, margin, minHeight, edgeThreshold } = geometry;
+	if (triggerTop < edgeThreshold || triggerTop + triggerHeight > viewportHeight - edgeThreshold) return null;
+	const topLimit = margin;
+	const bottomLimit = viewportHeight - margin;
+	const available = bottomLimit - topLimit;
+	const chrome = fullHeight - contentHeight;
+	const triggerCenter = triggerTop + triggerHeight / 2;
+	const natural = listOffsetTop + itemCenterFromContentTop;
+	const itemTop = itemCenterFromContentTop - itemHeight / 2;
+	const itemBottom = itemCenterFromContentTop + itemHeight / 2;
+	/**
+	* How far the list may scroll, given a popup of `height`.
+	*
+	* The lower bound is the part that matters and the part that is easy to miss:
+	* the option has to end up **inside** the list's visible window. The last
+	* option of a long list can only be shown by scrolling to the end, so the
+	* scroll is forced, and the popup has to be placed around that rather than
+	* the other way about.
+	*/
+	const scrollFloor = (listMaxHeight) => Math.max(0, itemBottom - listMaxHeight, topLimit - triggerCenter + natural);
+	let height = Math.min(fullHeight, listMaxHeightLimit + chrome, available);
+	for (let pass = 0; pass < 2; pass += 1) {
+		const floor = scrollFloor(Math.max(0, height - chrome));
+		height = Math.min(height, fullHeight - floor, bottomLimit - triggerCenter + natural - floor);
+	}
+	if (height < Math.min(fullHeight, minHeight)) return null;
+	const listMaxHeight = Math.max(0, height - chrome);
+	const maxScroll = Math.max(0, contentHeight - listMaxHeight);
+	const scrollLo = scrollFloor(listMaxHeight);
+	const scrollHi = Math.min(maxScroll, itemTop, bottomLimit - height - triggerCenter + natural);
+	if (scrollLo > scrollHi) return null;
+	const scrollTop = clamp(itemCenterFromContentTop - listMaxHeight / 2, scrollLo, scrollHi);
+	const offsetInPopup = natural - scrollTop;
+	const top = triggerCenter - offsetInPopup;
+	const originRatio = height > 0 ? clamp(offsetInPopup / height * 100, 0, 100) : 50;
+	return {
+		top,
+		height,
+		listMaxHeight,
+		scrollTop,
+		originRatio
+	};
+}
+/**
+* Measures the live elements and returns where the popup should go.
+*
+* The list's `max-height` is lifted while measuring, because the popup's
+* natural height is the thing being measured and a stylesheet cap would hide
+* it. The caller sets the final value from the result.
+*/
+function measureItemAlignment(elements) {
+	const { trigger, positioner, popup, list, item, value, maxHeight } = elements;
+	const previousMaxHeight = list.style.maxHeight;
+	list.style.removeProperty("max-height");
+	if (maxHeight) list.style.maxHeight = maxHeight;
+	const authoredMaxHeight = parseFloat(getComputedStyle(list).maxHeight);
+	const listMaxHeightLimit = Number.isFinite(authoredMaxHeight) ? authoredMaxHeight : Infinity;
+	list.style.maxHeight = "none";
+	try {
+		const triggerRect = trigger.getBoundingClientRect();
+		const popupRect = popup.getBoundingClientRect();
+		const listRect = list.getBoundingClientRect();
+		const itemRect = item.getBoundingClientRect();
+		const result = computeItemAlignment({
+			viewportHeight: document.documentElement.clientHeight,
+			triggerTop: triggerRect.top,
+			triggerHeight: triggerRect.height,
+			fullHeight: popupRect.height,
+			contentHeight: list.scrollHeight,
+			listOffsetTop: listRect.top - popupRect.top,
+			itemCenterFromContentTop: itemRect.top - listRect.top + list.scrollTop + itemRect.height / 2,
+			itemHeight: itemRect.height,
+			listMaxHeightLimit,
+			margin: 8,
+			minHeight: 100,
+			edgeThreshold: 20
+		});
+		if (!result) return null;
+		const positionerRect = positioner.getBoundingClientRect();
+		let left = triggerRect.left;
+		if (value) {
+			const valueRect = value.getBoundingClientRect();
+			const itemTextLeft = itemRect.left + (parseFloat(getComputedStyle(item).paddingLeft) || 0);
+			left = positionerRect.left + (valueRect.left - itemTextLeft);
+		}
+		const viewportWidth = document.documentElement.clientWidth;
+		left = clamp(left, 8, viewportWidth - 8 - positionerRect.width);
+		return {
+			...result,
+			left
+		};
+	} finally {
+		list.style.maxHeight = previousMaxHeight;
+	}
+}
+//#endregion
+export { computeItemAlignment, measureItemAlignment };

package/dist/shared/animations.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Resolves once every CSS animation and transition running on `element` has
+ * settled, or immediately if none are.
+ */
+export declare function waitForAnimationsToFinish(element: HTMLElement, signal?: AbortSignal): Promise<void>;
+export declare function hasAnimation(element: HTMLElement): boolean;

package/dist/shared/animations.js

@@ -0,0 +1,35 @@
+//#region src/shared/animations.ts
+/**
+* Resolves once every CSS animation and transition running on `element` has
+* settled, or immediately if none are.
+*/
+function waitForAnimationsToFinish(element, signal) {
+	return new Promise((resolve) => {
+		if (signal?.aborted) {
+			resolve();
+			return;
+		}
+		requestAnimationFrame(() => {
+			if (signal?.aborted) {
+				resolve();
+				return;
+			}
+			const animations = (element.getAnimations?.({ subtree: true }) ?? []).filter((animation) => animation.playState !== "paused" && animation.effect?.getComputedTiming().iterations !== Infinity);
+			if (animations.length === 0) {
+				resolve();
+				return;
+			}
+			let settled = false;
+			const finish = () => {
+				if (!settled) {
+					settled = true;
+					resolve();
+				}
+			};
+			signal?.addEventListener("abort", finish, { once: true });
+			Promise.allSettled(animations.map((animation) => animation.finished)).then(finish);
+		});
+	});
+}
+//#endregion
+export { waitForAnimationsToFinish };

package/dist/shared/context.d.ts

@@ -0,0 +1,7 @@
+import { type InjectionKey } from 'vue';
+export declare function createContext<T>(name: string): {
+    key: InjectionKey<T>;
+    provideContext: (value: T) => T;
+    useContext: () => T;
+    useOptionalContext: () => T | null;
+};

package/dist/shared/context.js

@@ -0,0 +1,25 @@
+import { inject, provide } from "vue";
+//#region src/shared/context.ts
+function createContext(name) {
+	const key = Symbol(name);
+	function provideContext(value) {
+		provide(key, value);
+		return value;
+	}
+	function useContext() {
+		const context = inject(key, null);
+		if (context === null) throw new Error(`${name} context is missing. It must be used within its Root component.`);
+		return context;
+	}
+	function useOptionalContext() {
+		return inject(key, null);
+	}
+	return {
+		key,
+		provideContext,
+		useContext,
+		useOptionalContext
+	};
+}
+//#endregion
+export { createContext };

package/dist/shared/data-attrs.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Per-key overrides for how state becomes attributes. Return `null` to omit.
+ *
+ * @example
+ * { checked: (on) => (on ? { 'data-checked': '' } : { 'data-unchecked': '' }) }
+ */
+export type DataAttrsMapping<State> = {
+    [K in keyof State]?: (value: State[K]) => Record<string, string | undefined> | null;
+};
+/** Turns a state object into the `data-*` attributes used as styling hooks. */
+export declare function dataAttrs<State extends Record<string, any>>(state: State, mapping?: DataAttrsMapping<State>): Record<string, string>;

package/dist/shared/data-attrs.js

@@ -0,0 +1,14 @@
+//#region src/shared/data-attrs.ts
+/** Turns a state object into the `data-*` attributes used as styling hooks. */
+function dataAttrs(state, mapping = {}) {
+	const attrs = Object.keys(state).flatMap((key) => {
+		const value = state[key];
+		const custom = Object.hasOwn(mapping, key) ? mapping[key] : void 0;
+		if (custom) return Object.entries(custom(value) ?? {});
+		if (!value) return [];
+		return [[`data-${key.toLowerCase()}`, value === true ? "" : String(value)]];
+	});
+	return Object.fromEntries(attrs.filter((attr) => attr[1] !== void 0));
+}
+//#endregion
+export { dataAttrs };

package/dist/shared/dismiss-stack.d.ts

@@ -0,0 +1,14 @@
+export type DismissReason = 'escape-key' | 'outside-press' | 'focus-out';
+export interface DismissLayer {
+    /** Elements that count as "inside" this layer. */
+    elements: () => (HTMLElement | null)[];
+    dismiss: (reason: DismissReason) => void;
+    escapeKey: () => boolean;
+    outsidePress: () => boolean;
+    /** Whether this layer covers everything beneath it. */
+    modal: () => boolean;
+}
+export declare function pushDismissLayer(layer: DismissLayer): () => void;
+/** Whether an event along `path` landed inside an open layer, its portaled popup included. */
+export declare function isInsideDismissLayer(path: EventTarget[]): boolean;
+export declare function isTopLayer(layer: DismissLayer): boolean;

package/dist/shared/dismiss-stack.js

@@ -0,0 +1,52 @@
+//#region src/shared/dismiss-stack.ts
+/** Open dismissable layers, outermost first. */
+var stack = [];
+var listening = false;
+function contains(layer, target) {
+	return layer.elements().some((el) => el?.contains(target));
+}
+function onKeydown(event) {
+	if (event.key !== "Escape" || stack.length === 0) return;
+	const top = stack[stack.length - 1];
+	if (!top.escapeKey()) return;
+	event.stopPropagation();
+	top.dismiss("escape-key");
+}
+function onPointerDown(event) {
+	const target = event.target;
+	if (!target || !target.isConnected) return;
+	for (let i = stack.length - 1; i >= 0; i -= 1) {
+		const layer = stack[i];
+		if (contains(layer, target)) break;
+		if (!layer.outsidePress()) break;
+		layer.dismiss("outside-press");
+		if (layer.modal()) break;
+	}
+}
+function sync() {
+	const shouldListen = stack.length > 0;
+	if (shouldListen === listening) return;
+	listening = shouldListen;
+	if (shouldListen) {
+		document.addEventListener("keydown", onKeydown, true);
+		document.addEventListener("pointerdown", onPointerDown, true);
+	} else {
+		document.removeEventListener("keydown", onKeydown, true);
+		document.removeEventListener("pointerdown", onPointerDown, true);
+	}
+}
+function pushDismissLayer(layer) {
+	stack.push(layer);
+	sync();
+	return () => {
+		const index = stack.indexOf(layer);
+		if (index !== -1) stack.splice(index, 1);
+		sync();
+	};
+}
+/** Whether an event along `path` landed inside an open layer, its portaled popup included. */
+function isInsideDismissLayer(path) {
+	return stack.some((layer) => layer.elements().some((el) => !!el && path.includes(el)));
+}
+//#endregion
+export { isInsideDismissLayer, pushDismissLayer };

package/dist/shared/dispatch-click-with-modifiers.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Forwards a click from a custom control to its hidden native input, or turns a
+ * key press into the click it stands for, preserving the modifier keys so that
+ * behaviors keyed off them (for example a middle/ctrl-click on an enclosing
+ * link) stay consistent.
+ */
+export declare function dispatchClickWithModifiers(target: HTMLElement, source: MouseEvent | KeyboardEvent, options?: {
+    bubbles?: boolean;
+}): void;

package/dist/shared/dispatch-click-with-modifiers.js

@@ -0,0 +1,22 @@
+//#region src/shared/dispatch-click-with-modifiers.ts
+/**
+* Forwards a click from a custom control to its hidden native input, or turns a
+* key press into the click it stands for, preserving the modifier keys so that
+* behaviors keyed off them (for example a middle/ctrl-click on an enclosing
+* link) stay consistent.
+*/
+function dispatchClickWithModifiers(target, source, options = {}) {
+	const clickEvent = new MouseEvent("click", {
+		bubbles: options.bubbles ?? false,
+		cancelable: true,
+		composed: true,
+		altKey: source.altKey,
+		ctrlKey: source.ctrlKey,
+		metaKey: source.metaKey,
+		shiftKey: source.shiftKey,
+		button: "button" in source ? source.button : 0
+	});
+	target.dispatchEvent(clickEvent);
+}
+//#endregion
+export { dispatchClickWithModifiers };

package/dist/shared/element-of.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The element a template ref points at. A ref on a part rendered `as="child"`
+ * around a component whose root is a fragment (a popover, with its trigger and
+ * a portal) is the fragment's opening marker, a text node: the element is the
+ * first one after it.
+ */
+export declare function elementOf(ref: unknown): HTMLElement | null;

package/dist/shared/element-of.js

@@ -0,0 +1,14 @@
+//#region src/shared/element-of.ts
+/**
+* The element a template ref points at. A ref on a part rendered `as="child"`
+* around a component whose root is a fragment (a popover, with its trigger and
+* a portal) is the fragment's opening marker, a text node: the element is the
+* first one after it.
+*/
+function elementOf(ref) {
+	let node = ref && typeof ref === "object" && "$el" in ref ? ref.$el : ref;
+	while (node && !(node instanceof Element)) node = node.nextSibling;
+	return node ?? null;
+}
+//#endregion
+export { elementOf };

package/dist/shared/focus.d.ts

@@ -0,0 +1,6 @@
+/** Elements inside `container` that can currently receive keyboard focus, in tab order. */
+export declare function getTabbableElements(container: HTMLElement): HTMLElement[];
+/** Focus never scrolls the page here. */
+export declare function focusFirst(container: HTMLElement): void;
+/** Scrolls `container` just enough to reveal `item`, and nothing else. */
+export declare function scrollIntoViewWithin(item: HTMLElement, container: HTMLElement | null): void;

package/dist/shared/focus.js

@@ -0,0 +1,35 @@
+//#region src/shared/focus.ts
+var FOCUSABLE_SELECTOR = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled]):not([type=\"hidden\"])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])",
+	"[contenteditable=\"true\"]"
+].join(",");
+/** Elements inside `container` that can currently receive keyboard focus, in tab order. */
+function getTabbableElements(container) {
+	return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el) => el.offsetParent !== null && !el.hasAttribute("hidden") && el.getAttribute("aria-hidden") !== "true");
+}
+/** Focus never scrolls the page here. */
+function focusFirst(container) {
+	const tabbable = getTabbableElements(container);
+	const first = tabbable.find((el) => el.hasAttribute("autofocus")) ?? tabbable[0];
+	if (first) {
+		first.focus({ preventScroll: true });
+		return;
+	}
+	if (container.getAttribute("tabindex") === null) container.setAttribute("tabindex", "-1");
+	container.focus({ preventScroll: true });
+}
+/** Scrolls `container` just enough to reveal `item`, and nothing else. */
+function scrollIntoViewWithin(item, container) {
+	if (!container || container.scrollHeight <= container.clientHeight) return;
+	const itemBox = item.getBoundingClientRect();
+	const containerBox = container.getBoundingClientRect();
+	if (itemBox.top < containerBox.top) container.scrollTop -= containerBox.top - itemBox.top;
+	else if (itemBox.bottom > containerBox.bottom) container.scrollTop += itemBox.bottom - containerBox.bottom;
+}
+//#endregion
+export { focusFirst, getTabbableElements, scrollIntoViewWithin };

package/dist/shared/icons.d.ts

@@ -0,0 +1,38 @@
+import { type InlineSvg } from '@vunset/utils';
+export type InlineIcons = Record<string, () => Promise<string>>;
+export interface ConfigureIconsOptions {
+    /** Where the sprite is served from. @default '/sprite.svg' */
+    sprite?: string;
+    /** The folder, already globbed. See {@link InlineIcons}. */
+    inline?: InlineIcons;
+}
+/**
+ * Tells `Icon` where the icons are. Call it once, wherever the app starts.
+ *
+ * ```ts
+ * configureIcons({
+ *   sprite: '/sprite.svg',
+ *   inline: import.meta.glob('./assets/icons/*.svg', { query: '?raw', import: 'default' }),
+ * });
+ * ```
+ */
+export declare function configureIcons(options: ConfigureIconsOptions): void;
+export declare function iconSprite(): string;
+/**
+ * Icons a library ships, under the app's: a name the app's `inline` folder has
+ * wins. Markup, not loaders, so they draw in the render that asks for them.
+ *
+ * ```ts
+ * registerDefaultIcons({ close: '<svg viewBox="0 0 16 16">…</svg>' });
+ * ```
+ */
+export declare function registerDefaultIcons(icons: Record<string, string>): void;
+/** A default icon, parsed; `undefined` when the defaults have no such name. */
+export declare function defaultIcon(name: string): InlineSvg | null | undefined;
+/** Whether the app's inline icons or the defaults have `name`. A sprite isn't asked: it can't say. */
+export declare function hasIcon(name: string): boolean;
+export declare function findInlineIcon(name: string): (() => Promise<string>) | undefined;
+/** The parsed file, shared by every icon of that name. `undefined` when there is no such file. */
+export declare function loadInlineIcon(name: string): Promise<InlineSvg | null> | undefined;
+/** The parsed file, when an earlier icon has already loaded it. */
+export declare function loadedInlineIcon(name: string): InlineSvg | null | undefined;

package/dist/shared/icons.js

@@ -0,0 +1,86 @@
+import { parseInlineSvg } from "@vunset/utils";
+//#region src/shared/icons.ts
+var sprite = "/sprite.svg";
+var inlineIcons = {};
+var found = /* @__PURE__ */ new Map();
+var parsed = /* @__PURE__ */ new Map();
+var loaded = /* @__PURE__ */ new Map();
+var defaults = /* @__PURE__ */ new Map();
+var defaultsParsed = /* @__PURE__ */ new Map();
+/**
+* Tells `Icon` where the icons are. Call it once, wherever the app starts.
+*
+* ```ts
+* configureIcons({
+*   sprite: '/sprite.svg',
+*   inline: import.meta.glob('./assets/icons/*.svg', { query: '?raw', import: 'default' }),
+* });
+* ```
+*/
+function configureIcons(options) {
+	if (options.sprite !== void 0) sprite = options.sprite;
+	if (options.inline !== void 0) {
+		inlineIcons = options.inline;
+		found.clear();
+		parsed.clear();
+		loaded.clear();
+	}
+}
+function iconSprite() {
+	return sprite;
+}
+/**
+* Icons a library ships, under the app's: a name the app's `inline` folder has
+* wins. Markup, not loaders, so they draw in the render that asks for them.
+*
+* ```ts
+* registerDefaultIcons({ close: '<svg viewBox="0 0 16 16">…</svg>' });
+* ```
+*/
+function registerDefaultIcons(icons) {
+	for (const [name, markup] of Object.entries(icons)) {
+		defaults.set(name, markup);
+		defaultsParsed.delete(name);
+	}
+}
+/** A default icon, parsed; `undefined` when the defaults have no such name. */
+function defaultIcon(name) {
+	const markup = defaults.get(name);
+	if (markup === void 0) return void 0;
+	if (!defaultsParsed.has(name)) defaultsParsed.set(name, parseInlineSvg(markup));
+	return defaultsParsed.get(name);
+}
+/** Whether the app's inline icons or the defaults have `name`. A sprite isn't asked: it can't say. */
+function hasIcon(name) {
+	return findInlineIcon(name) !== void 0 || defaults.has(name);
+}
+function findInlineIcon(name) {
+	if (!found.has(name)) {
+		const target = `${name}.svg`;
+		const entry = Object.entries(inlineIcons).find(([path]) => path === target || path.endsWith(`/${target}`));
+		found.set(name, entry?.[1]);
+	}
+	return found.get(name);
+}
+/** The parsed file, shared by every icon of that name. `undefined` when there is no such file. */
+function loadInlineIcon(name) {
+	const load = findInlineIcon(name);
+	if (!load) return void 0;
+	let entry = parsed.get(name);
+	if (!entry) {
+		entry = load().then((markup) => {
+			const svg = parseInlineSvg(markup);
+			loaded.set(name, svg);
+			return svg;
+		});
+		entry.catch(() => parsed.delete(name));
+		parsed.set(name, entry);
+	}
+	return entry;
+}
+/** The parsed file, when an earlier icon has already loaded it. */
+function loadedInlineIcon(name) {
+	return loaded.get(name);
+}
+//#endregion
+export { configureIcons, defaultIcon, findInlineIcon, hasIcon, iconSprite, loadInlineIcon, loadedInlineIcon, registerDefaultIcons };

package/dist/shared/input-filter.d.ts

@@ -0,0 +1,40 @@
+/**
+ * What may be typed into a control.
+ *
+ * - A **string** is a regular expression source, anchored for you, so
+ *   `'[0-9]*'` reads like the `pattern` attribute but applies to every
+ *   intermediate value rather than the finished one.
+ * - A **RegExp** is tested against the whole prospective value.
+ * - A **function** receives the prospective value and the current one.
+ */
+export type FieldFilter = string | RegExp | ((next: string, previous: string) => boolean);
+/**
+ * Turns a filter into a predicate over the prospective value.
+ *
+ * Returns `null` for a source that will not compile, so a typo in a filter
+ * leaves the control usable instead of rejecting every keystroke.
+ */
+export declare function toFilterPredicate(filter: FieldFilter): ((next: string, previous: string) => boolean) | null;
+/** The text an insertion is about to add, or `null` when it cannot be read. */
+export declare function insertedText(event: InputEvent): string | null;
+/**
+ * The value the control would hold if the insertion went ahead.
+ *
+ * Returns `null` when the element exposes no selection — `number`, `email` and
+ * `date` inputs among others — in which case only the inserted text itself can
+ * be judged.
+ */
+export declare function prospectiveValue(element: HTMLInputElement, inserted: string): string | null;
+/** Digits, an optional leading sign and at most one decimal point. */
+export declare const NUMERIC: RegExp;
+/** The same without the sign, for a control whose `min` rules negatives out. */
+export declare const NON_NEGATIVE_NUMERIC: RegExp;
+/**
+ * Whether a typed number breaks `min`, `max` or `step`, as a native number
+ * input would judge it. A half-typed `-` or `.` is no number yet, so it passes.
+ */
+export declare function outOfRange(value: string, limits: {
+    min?: number | string;
+    max?: number | string;
+    step?: number | string;
+}): boolean;