@ethlete/components 1.0.0-next.74 → 1.0.0-next.76

package/fesm2022/ethlete-components-testing.mjs

@@ -1,526 +1,435 @@
-import { ApplicationRef, signal } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { ReplaySubject, map } from 'rxjs';
-import { OVERLAY_REF, SelectDirective, TabBarDirective } from '@ethlete/components';
-
+import { ApplicationRef, signal } from "@angular/core";
+import { TestBed } from "@angular/core/testing";
+import { ReplaySubject, map } from "rxjs";
+import { OVERLAY_REF, SelectDirective, TabBarDirective } from "@ethlete/components";
 const tick = () => TestBed.inject(ApplicationRef).tick();
 const flushFrames = () => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
-const resetOverlays = () => document.querySelectorAll('.et-overlay-runtime-entry').forEach((entry) => entry.remove());
-/**
- * The newest overlay pane in the document.
- *
- * Overlays render into the document, not into the fixture, and jsdom fires no transition events -
- * so a pane stuck in its leave transition stays reachable. Scope every pane query through here, or
- * a stale pane answers it.
- */
-const latestPane = () => Array.from(document.querySelectorAll('.et-overlay-runtime-pane')).at(-1) ?? null;
+const resetOverlays = () => document.querySelectorAll(".et-overlay-runtime-entry").forEach((entry) => entry.remove());
+const latestPane = () => Array.from(document.querySelectorAll(".et-overlay-runtime-pane")).at(-1) ?? null;
 const hostDirective = (fixture, type) => fixture.debugElement.children[0].injector.get(type);
 const directiveAt = (fixture, type, selector) => {
-    const node = fixture.debugElement.query((candidate) => candidate.nativeElement?.matches?.(selector) ?? false);
-    if (!node)
-        throw new Error(`No element in the fixture matches "${selector}"`);
-    return node.injector.get(type);
+	const node = fixture.debugElement.query((candidate) => candidate.nativeElement?.matches?.(selector) ?? false);
+	if (!node) throw new Error(`No element in the fixture matches "${selector}"`);
+	return node.injector.get(type);
 };
 const hostElement = (fixture) => fixture.debugElement.children[0].nativeElement;
-/**
- * Queries the fixture's root element, narrowing `nativeElement` (typed `any`) to `HTMLElement`
- * once - a generic call directly through `fixture.nativeElement.querySelectorAll<E>(...)` fails
- * with TS2347 and collapses every downstream member access to `{}`.
- */
 const queryAll = (fixture, selector) => Array.from(fixture.nativeElement.querySelectorAll(selector));
-/** Single-result counterpart of {@link queryAll}. */
 const query = (fixture, selector) => fixture.nativeElement.querySelector(selector);
 const pressKey = (target, key, init = {}) => {
-    const event = new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true, ...init });
-    target.dispatchEvent(event);
-    tick();
-    return event;
+	const event = new KeyboardEvent("keydown", {
+		key,
+		bubbles: true,
+		cancelable: true,
+		...init
+	});
+	target.dispatchEvent(event);
+	tick();
+	return event;
 };
 const focusEvent = (target, type) => {
-    target.dispatchEvent(new FocusEvent(type));
-    tick();
+	target.dispatchEvent(new FocusEvent(type));
+	tick();
 };
 const pointerEnter = (target) => {
-    target.dispatchEvent(new PointerEvent('pointerenter', { bubbles: false }));
-    tick();
+	target.dispatchEvent(new PointerEvent("pointerenter", { bubbles: false }));
+	tick();
 };
 const pointerEvent = (target, type, init = {}) => {
-    target.dispatchEvent(new PointerEvent(type, { bubbles: true, ...init }));
-    tick();
+	target.dispatchEvent(new PointerEvent(type, {
+		bubbles: true,
+		...init
+	}));
+	tick();
 };
 const setInputValue = (input, value) => {
-    input.value = value;
-    input.dispatchEvent(new Event('input', { bubbles: true }));
-    tick();
+	input.value = value;
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+	tick();
 };
 const focusField = (field) => {
-    field.focus();
-    field.dispatchEvent(new FocusEvent('focus'));
-    tick();
+	field.focus();
+	field.dispatchEvent(new FocusEvent("focus"));
+	tick();
 };
 const typeInField = (field, text) => {
-    field.focus();
-    setInputValue(field, text);
+	field.focus();
+	setInputValue(field, text);
 };
-/**
- * Types `text` one character at a time, each with its own `input` event and the caret left after
- * the inserted character - what a real keyboard produces. Use it instead of {@link typeInField}
- * whenever the control reads or rewrites the element between keystrokes; a whole-string
- * {@link setInputValue} hides every defect that only appears mid-entry.
- */
 const typeChars = (field, text) => {
-    field.focus();
-    for (const char of text) {
-        const caret = field.selectionStart ?? field.value.length;
-        field.value = field.value.slice(0, caret) + char + field.value.slice(caret);
-        field.setSelectionRange(caret + 1, caret + 1);
-        field.dispatchEvent(new InputEvent('input', { bubbles: true, inputType: 'insertText' }));
-        tick();
-    }
+	field.focus();
+	for (const char of text) {
+		const caret = field.selectionStart ?? field.value.length;
+		field.value = field.value.slice(0, caret) + char + field.value.slice(caret);
+		field.setSelectionRange(caret + 1, caret + 1);
+		field.dispatchEvent(new InputEvent("input", {
+			bubbles: true,
+			inputType: "insertText"
+		}));
+		tick();
+	}
 };
 const blurField = (field) => {
-    field.blur();
-    field.dispatchEvent(new Event('blur'));
-    tick();
+	field.blur();
+	field.dispatchEvent(new Event("blur"));
+	tick();
 };
 const pointerDownOutside = () => {
-    document.body.dispatchEvent(new Event('pointerdown', { bubbles: true }));
-    tick();
+	document.body.dispatchEvent(new Event("pointerdown", { bubbles: true }));
+	tick();
 };
-/** jsdom has no `DataTransfer`, so the clipboard payload is faked onto the event. */
 const pasteInto = (target, payload) => {
-    const event = new Event('paste', { bubbles: true, cancelable: true });
-    const data = typeof payload === 'string' ? { 'text/plain': payload } : payload;
-    Object.defineProperty(event, 'clipboardData', { value: { getData: (type) => data[type] ?? '' } });
-    target.dispatchEvent(event);
-    tick();
+	const event = new Event("paste", {
+		bubbles: true,
+		cancelable: true
+	});
+	const data = typeof payload === "string" ? { "text/plain": payload } : payload;
+	Object.defineProperty(event, "clipboardData", { value: { getData: (type) => data[type] ?? "" } });
+	target.dispatchEvent(event);
+	tick();
 };
 const textOf = (element) => element?.textContent?.trim() ?? null;
-
-/** The host, the directive under test, and queries scoped to the fixture - what every driver needs. */
 const createControlDriver = (fixture, directiveType, { directiveSelector } = {}) => {
-    const control = directiveSelector
-        ? directiveAt(fixture, directiveType, directiveSelector)
-        : hostDirective(fixture, directiveType);
-    const root = fixture.nativeElement;
-    const query = (selector) => root.querySelector(selector);
-    const queryAll = (selector) => Array.from(root.querySelectorAll(selector));
-    return {
-        fixture,
-        host: fixture.componentInstance,
-        control,
-        detectChanges: () => fixture.detectChanges(),
-        tick,
-        element: () => hostElement(fixture),
-        directive: (type, selector) => selector ? directiveAt(fixture, type, selector) : hostDirective(fixture, type),
-        query,
-        queryAll,
-        text: (selector) => query(selector)?.textContent?.trim() ?? null,
-        click: (element) => {
-            element.click();
-            tick();
-        },
-    };
+	const control = directiveSelector ? directiveAt(fixture, directiveType, directiveSelector) : hostDirective(fixture, directiveType);
+	const root = fixture.nativeElement;
+	const query = (selector) => root.querySelector(selector);
+	const queryAll = (selector) => Array.from(root.querySelectorAll(selector));
+	return {
+		fixture,
+		host: fixture.componentInstance,
+		control,
+		detectChanges: () => fixture.detectChanges(),
+		tick,
+		element: () => hostElement(fixture),
+		directive: (type, selector) => selector ? directiveAt(fixture, type, selector) : hostDirective(fixture, type),
+		query,
+		queryAll,
+		text: (selector) => query(selector)?.textContent?.trim() ?? null,
+		click: (element) => {
+			element.click();
+			tick();
+		}
+	};
 };
-
-/**
- * The plumbing every overlay-backed form control driver needs: the host component, the directive,
- * the trigger, the overlay pane, and the open/close dance jsdom needs two frames for.
- */
-const createOverlayControlDriver = (fixture, directiveType, { triggerSelector = '[role="combobox"]', hide, ...controlOptions }) => {
-    const base = createControlDriver(fixture, directiveType, controlOptions);
-    const pane = () => latestPane();
-    const paneEl = (selector) => pane()?.querySelector(selector) ?? null;
-    const paneEls = (selector) => Array.from(pane()?.querySelectorAll(selector) ?? []);
-    const trigger = () => base.query(triggerSelector);
-    const settle = async () => {
-        await flushFrames();
-        tick();
-    };
-    const settleOpen = async () => {
-        await settle();
-        await settle();
-    };
-    return {
-        ...base,
-        settle,
-        trigger,
-        pane,
-        paneEl,
-        paneEls,
-        open: async () => {
-            trigger().click();
-            tick();
-            await settleOpen();
-        },
-        close: async () => {
-            hide(base.control);
-            tick();
-            await settle();
-        },
-        // jsdom fires no transition events, so a leaving pane would linger and shadow the next open
-        closeAndRemovePanes: () => {
-            hide(base.control);
-            tick();
-            resetOverlays();
-            tick();
-        },
-        press: (key) => pressKey(trigger(), key),
-        escape: () => pressKey(document, 'Escape'),
-        pointerDownOutside,
-        clickInPane: (selector) => {
-            paneEl(selector).click();
-            tick();
-        },
-    };
+const createOverlayControlDriver = (fixture, directiveType, { triggerSelector = "[role=\"combobox\"]", hide, ...controlOptions }) => {
+	const base = createControlDriver(fixture, directiveType, controlOptions);
+	const pane = () => latestPane();
+	const paneEl = (selector) => pane()?.querySelector(selector) ?? null;
+	const paneEls = (selector) => Array.from(pane()?.querySelectorAll(selector) ?? []);
+	const trigger = () => base.query(triggerSelector);
+	const settle = async () => {
+		await flushFrames();
+		tick();
+	};
+	const settleOpen = async () => {
+		await settle();
+		await settle();
+	};
+	return {
+		...base,
+		settle,
+		trigger,
+		pane,
+		paneEl,
+		paneEls,
+		open: async () => {
+			trigger().click();
+			tick();
+			await settleOpen();
+		},
+		close: async () => {
+			hide(base.control);
+			tick();
+			await settle();
+		},
+		closeAndRemovePanes: () => {
+			hide(base.control);
+			tick();
+			resetOverlays();
+			tick();
+		},
+		press: (key) => pressKey(trigger(), key),
+		escape: () => pressKey(document, "Escape"),
+		pointerDownOutside,
+		clickInPane: (selector) => {
+			paneEl(selector).click();
+			tick();
+		}
+	};
 };
-
-/**
- * Types masked date/time text one character at a time, with the caret tracking the insertion -
- * what `InputMaskDirective`'s live reformatting needs, unlike a whole-string {@link typeInField}.
- */
 const typeMasked = (field, text) => typeChars(field, text);
-/**
- * Driver for every date-time control that pairs text fields with a picker overlay: date, date
- * range, date-time, time and time range. The picker trigger is matched by its directive, so a test
- * host can put it on any element; the fields are matched by CSS, defaulting to the only `input`.
- */
 const createDatePickerDriver = (fixture, directiveType, options = {}) => {
-    const base = createOverlayControlDriver(fixture, directiveType, {
-        ...options,
-        triggerSelector: '[etdatepickertrigger]',
-        hide: (control) => control.closePicker(),
-    });
-    const dayCell = (label) => base
-        .paneEls('.et-calendar-cell')
-        .find((cell) => textOf(cell) === label && !cell.hasAttribute('data-outside-month')) ?? null;
-    const field = (selector = 'input') => base.query(selector);
-    return {
-        ...base,
-        dayCell,
-        clickDayCell: (label) => {
-            dayCell(label).click();
-            tick();
-        },
-        field,
-        fields: () => base.queryAll('input'),
-        type: (text, selector) => typeInField(field(selector), text),
-        typeMasked: (text, selector) => typeMasked(field(selector), text),
-        typeAndBlur: (text, selector) => {
-            typeInField(field(selector), text);
-            blurField(field(selector));
-        },
-        focusField: (selector) => focusField(field(selector)),
-        blurField: (selector) => blurField(field(selector)),
-        pressInField: (key, selector) => pressKey(field(selector), key),
-    };
+	const base = createOverlayControlDriver(fixture, directiveType, {
+		...options,
+		triggerSelector: "[etdatepickertrigger]",
+		hide: (control) => control.closePicker()
+	});
+	const dayCell = (label) => base.paneEls(".et-calendar-cell").find((cell) => textOf(cell) === label && !cell.hasAttribute("data-outside-month")) ?? null;
+	const field = (selector = "input") => base.query(selector);
+	return {
+		...base,
+		dayCell,
+		clickDayCell: (label) => {
+			dayCell(label).click();
+			tick();
+		},
+		field,
+		fields: () => base.queryAll("input"),
+		type: (text, selector) => typeInField(field(selector), text),
+		typeMasked: (text, selector) => typeMasked(field(selector), text),
+		typeAndBlur: (text, selector) => {
+			typeInField(field(selector), text);
+			blurField(field(selector));
+		},
+		focusField: (selector) => focusField(field(selector)),
+		blurField: (selector) => blurField(field(selector)),
+		pressInField: (key, selector) => pressKey(field(selector), key)
+	};
 };
-
-/**
- * A standalone `OverlayRef` for unit-testing an overlay component without opening it: `close(result)`
- * runs the registered close guards, records the call and emits `beforeClosed` / `afterClosed`
- * (replayed, so a late subscriber still sees the result). Pair it with {@link provideTestOverlayRef}.
- *
- * @example
- * const ref = createTestOverlayRef<ProductResult>();
- * TestBed.configureTestingModule({ providers: [provideTestOverlayRef(ref)] });
- * // … press the component's save button …
- * expect(ref.closeCalls.at(-1)?.result).toEqual({ saved: true });
- */
 const createTestOverlayRef = (config = {}) => {
-    const closeCalls = [];
-    const closeGuards = new Set();
-    const closed = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "closed" }] : /* istanbul ignore next */ []));
-    const busy = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
-    const afterOpened$ = new ReplaySubject(1);
-    const beforeClosed$ = new ReplaySubject(1);
-    const afterClosed$ = new ReplaySubject(1);
-    afterOpened$.next();
-    afterOpened$.complete();
-    const requestClose = (result, source, forced) => {
-        closeCalls.push({ result, source, forced });
-        if (closed())
-            return;
-        const event = { result, source };
-        if (!forced && [...closeGuards].some((guard) => !guard(event)))
-            return;
-        closed.set(true);
-        beforeClosed$.next(event);
-        beforeClosed$.complete();
-        afterClosed$.next(event);
-        afterClosed$.complete();
-    };
-    const mapResult = (subject) => subject.pipe(map((event) => event.result));
-    return {
-        id: config.id ?? 'et-test-overlay',
-        elements: null,
-        config,
-        headerTemplate: signal(null).asReadonly(),
-        layout: signal(null).asReadonly(),
-        componentInstance: () => null,
-        close: (result) => requestClose(result, 'api', false),
-        busy,
-        forceClose: (result, source = 'api') => requestClose(result, source, true),
-        registerCloseGuard: (guard) => {
-            closeGuards.add(guard);
-            return () => closeGuards.delete(guard);
-        },
-        updatePositionStrategy: () => undefined,
-        afterOpened: () => afterOpened$.asObservable(),
-        beforeClosed: () => mapResult(beforeClosed$),
-        beforeClosedEvent: () => beforeClosed$.asObservable(),
-        afterClosed: () => mapResult(afterClosed$),
-        afterClosedEvent: () => afterClosed$.asObservable(),
-        closeCalls,
-        isClosed: closed.asReadonly(),
-    };
+	const closeCalls = [];
+	const closeGuards = /* @__PURE__ */ new Set();
+	const closed = signal(false, ...ngDevMode ? [{ debugName: "closed" }] : /* istanbul ignore next */ []);
+	const busy = signal(false, ...ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []);
+	const afterOpened$ = new ReplaySubject(1);
+	const beforeClosed$ = new ReplaySubject(1);
+	const afterClosed$ = new ReplaySubject(1);
+	afterOpened$.next();
+	afterOpened$.complete();
+	const requestClose = (result, source, forced) => {
+		closeCalls.push({
+			result,
+			source,
+			forced
+		});
+		if (closed()) return;
+		const event = {
+			result,
+			source
+		};
+		if (!forced && [...closeGuards].some((guard) => !guard(event))) return;
+		closed.set(true);
+		beforeClosed$.next(event);
+		beforeClosed$.complete();
+		afterClosed$.next(event);
+		afterClosed$.complete();
+	};
+	const mapResult = (subject) => subject.pipe(map((event) => event.result));
+	return {
+		id: config.id ?? "et-test-overlay",
+		elements: null,
+		config,
+		headerTemplate: signal(null).asReadonly(),
+		layout: signal(null).asReadonly(),
+		componentInstance: () => null,
+		close: (result) => requestClose(result, "api", false),
+		busy,
+		forceClose: (result, source = "api") => requestClose(result, source, true),
+		registerCloseGuard: (guard) => {
+			closeGuards.add(guard);
+			return () => closeGuards.delete(guard);
+		},
+		updatePositionStrategy: () => void 0,
+		afterOpened: () => afterOpened$.asObservable(),
+		beforeClosed: () => mapResult(beforeClosed$),
+		beforeClosedEvent: () => beforeClosed$.asObservable(),
+		afterClosed: () => mapResult(afterClosed$),
+		afterClosedEvent: () => afterClosed$.asObservable(),
+		closeCalls,
+		isClosed: closed.asReadonly()
+	};
 };
-/** Provides `ref` (a fresh {@link createTestOverlayRef} by default) as `OVERLAY_REF`, so `definition.injectRef()` resolves it. */
-const provideTestOverlayRef = (ref = createTestOverlayRef()) => [{ provide: OVERLAY_REF, useValue: ref }];
-
-/**
- * The plumbing every text-field form control driver needs: the host component, the directive, the
- * native field, and the value / focus / key events a user produces on it.
- */
-const createFieldControlDriver = (fixture, directiveType, { fieldSelector = 'input', ...controlOptions } = {}) => {
-    const base = createControlDriver(fixture, directiveType, controlOptions);
-    const field = () => base.query(fieldSelector);
-    return {
-        ...base,
-        field,
-        fieldValue: () => field().value,
-        placeholder: () => field().placeholder,
-        type: (text) => setInputValue(field(), text),
-        /** Types one character at a time - what a keyboard produces, unlike `type`'s single event. */
-        typeChars: (text) => typeChars(field(), text),
-        typeAndBlur: (text) => {
-            setInputValue(field(), text);
-            blurField(field());
-        },
-        focus: () => focusField(field()),
-        blur: () => blurField(field()),
-        press: (key, init = {}) => pressKey(field(), key, init),
-        pointer: pointerEvent,
-    };
+const provideTestOverlayRef = (ref = createTestOverlayRef()) => [{
+	provide: OVERLAY_REF,
+	useValue: ref
+}];
+const createFieldControlDriver = (fixture, directiveType, { fieldSelector = "input", ...controlOptions } = {}) => {
+	const base = createControlDriver(fixture, directiveType, controlOptions);
+	const field = () => base.query(fieldSelector);
+	return {
+		...base,
+		field,
+		fieldValue: () => field().value,
+		placeholder: () => field().placeholder,
+		type: (text) => setInputValue(field(), text),
+		typeChars: (text) => typeChars(field(), text),
+		typeAndBlur: (text) => {
+			setInputValue(field(), text);
+			blurField(field());
+		},
+		focus: () => focusField(field()),
+		blur: () => blurField(field()),
+		press: (key, init = {}) => pressKey(field(), key, init),
+		pointer: pointerEvent
+	};
 };
-
 const createSelectDriver = (fixture, controlOptions = {}) => {
-    const base = createOverlayControlDriver(fixture, SelectDirective, {
-        triggerSelector: '[etselecttrigger], [role="combobox"]',
-        hide: (select) => select.hide(),
-        ...controlOptions,
-    });
-    // a trigger-inline search renders in the fixture, a panel-hosted one in the pane
-    const searchInput = () => (base.query('input[etselectsearch]') ?? base.paneEl('input[etselectsearch]'));
-    const options = () => base.paneEls('[role="option"]');
-    const visibleOptions = () => base.paneEls('[role="option"]:not([data-filtered])');
-    const activeOption = () => base.paneEl('[role="option"][data-active]');
-    const optionByLabel = (label) => visibleOptions().find((option) => textOf(option) === label) ?? null;
-    const chips = () => base.queryAll('et-chip');
-    const chipRemoveButton = (index) => chips()[index].querySelector('.et-chip-remove-button');
-    const optionGroups = () => base.paneEls('[role="group"]');
-    const virtualBody = () => base.paneEl('.et-select-virtual-options');
-    return {
-        ...base,
-        select: base.control,
-        searchInput,
-        valueEl: () => base.query('.et-select-value'),
-        valueText: () => textOf(base.query('.et-select-value')),
-        chips,
-        chipLabels: () => chips().map(textOf),
-        chipRemoveButton,
-        listbox: () => base.paneEl('[role="listbox"]'),
-        paneText: () => textOf(base.pane()),
-        options,
-        visibleOptions,
-        activeOption,
-        activeLabel: () => textOf(activeOption()),
-        optionLabels: () => options().map(textOf),
-        visibleLabels: () => visibleOptions().map(textOf),
-        optionByLabel,
-        optionGroups,
-        groupsHidden: () => optionGroups().map((group) => group.hasAttribute('hidden')),
-        groupOptionCounts: () => optionGroups().map((group) => group.querySelectorAll('[role="option"]').length),
-        groupLabel: (index) => {
-            const labelledBy = optionGroups()[index]?.getAttribute('aria-labelledby');
-            return labelledBy ? textOf(base.paneEl(`#${labelledBy}`)) : null;
-        },
-        virtualPadding: () => ({
-            start: parseFloat(virtualBody().style.paddingBlockStart),
-            end: parseFloat(virtualBody().style.paddingBlockEnd),
-        }),
-        clickOption: (index) => {
-            options()[index].click();
-            tick();
-        },
-        clickOptionByLabel: (label) => {
-            optionByLabel(label).click();
-            tick();
-        },
-        removeChip: (index) => {
-            chipRemoveButton(index).click();
-            tick();
-        },
-        hover: (element) => pointerEnter(element),
-        type: (text) => setInputValue(searchInput(), text),
-        pressInSearch: (key) => pressKey(searchInput(), key),
-        paste: (text) => pasteInto(searchInput(), text),
-    };
+	const base = createOverlayControlDriver(fixture, SelectDirective, {
+		triggerSelector: "[etselecttrigger], [role=\"combobox\"]",
+		hide: (select) => select.hide(),
+		...controlOptions
+	});
+	const searchInput = () => base.query("input[etselectsearch]") ?? base.paneEl("input[etselectsearch]");
+	const options = () => base.paneEls("[role=\"option\"]");
+	const visibleOptions = () => base.paneEls("[role=\"option\"]:not([data-filtered])");
+	const activeOption = () => base.paneEl("[role=\"option\"][data-active]");
+	const optionByLabel = (label) => visibleOptions().find((option) => textOf(option) === label) ?? null;
+	const chips = () => base.queryAll("et-chip");
+	const chipRemoveButton = (index) => chips()[index].querySelector(".et-chip-remove-button");
+	const optionGroups = () => base.paneEls("[role=\"group\"]");
+	const virtualBody = () => base.paneEl(".et-select-virtual-options");
+	return {
+		...base,
+		select: base.control,
+		searchInput,
+		valueEl: () => base.query(".et-select-value"),
+		valueText: () => textOf(base.query(".et-select-value")),
+		chips,
+		chipLabels: () => chips().map(textOf),
+		chipRemoveButton,
+		listbox: () => base.paneEl("[role=\"listbox\"]"),
+		paneText: () => textOf(base.pane()),
+		options,
+		visibleOptions,
+		activeOption,
+		activeLabel: () => textOf(activeOption()),
+		optionLabels: () => options().map(textOf),
+		visibleLabels: () => visibleOptions().map(textOf),
+		optionByLabel,
+		optionGroups,
+		groupsHidden: () => optionGroups().map((group) => group.hasAttribute("hidden")),
+		groupOptionCounts: () => optionGroups().map((group) => group.querySelectorAll("[role=\"option\"]").length),
+		groupLabel: (index) => {
+			const labelledBy = optionGroups()[index]?.getAttribute("aria-labelledby");
+			return labelledBy ? textOf(base.paneEl(`#${labelledBy}`)) : null;
+		},
+		virtualPadding: () => ({
+			start: parseFloat(virtualBody().style.paddingBlockStart),
+			end: parseFloat(virtualBody().style.paddingBlockEnd)
+		}),
+		clickOption: (index) => {
+			options()[index].click();
+			tick();
+		},
+		clickOptionByLabel: (label) => {
+			optionByLabel(label).click();
+			tick();
+		},
+		removeChip: (index) => {
+			chipRemoveButton(index).click();
+			tick();
+		},
+		hover: (element) => pointerEnter(element),
+		type: (text) => setInputValue(searchInput(), text),
+		pressInSearch: (key) => pressKey(searchInput(), key),
+		paste: (text) => pasteInto(searchInput(), text)
+	};
 };
-
-/**
- * Wraps a mounted `[etTabBar]` host with the roving-tabindex vocabulary its keyboard model needs:
- * which trigger is currently the tab stop, and dispatching a key from wherever focus actually is.
- */
 const createTabBarDriver = (fixture, options = {}) => {
-    const { triggerSelector = '[role="tab"]', ...controlOptions } = options;
-    const base = createControlDriver(fixture, TabBarDirective, controlOptions);
-    const triggers = () => base.queryAll(triggerSelector);
-    const trigger = (index) => {
-        const el = triggers()[index];
-        if (!el)
-            throw new Error(`No tab trigger at index ${index}`);
-        return el;
-    };
-    /** The trigger the roving-tabindex model made the tab stop - `tabindex="0"` among the bar's triggers. */
-    const tabbableTrigger = () => triggers().find((el) => el.getAttribute('tabindex') === '0') ?? null;
-    const focusTabbable = () => {
-        const el = tabbableTrigger();
-        if (!el)
-            throw new Error('No tabbable trigger - the roving-tabindex lookup found nothing');
-        el.focus();
-        base.tick();
-    };
-    /** Dispatches `key` from wherever focus currently is, falling back to the roving tab stop. */
-    const press = (key, init) => {
-        const target = document.activeElement ?? tabbableTrigger();
-        if (!target)
-            throw new Error('No focused trigger to dispatch the keydown on');
-        return pressKey(target, key, init);
-    };
-    return {
-        ...base,
-        triggers,
-        trigger,
-        tabbableTrigger,
-        focusTabbable,
-        press,
-        focusedIndex: () => base.control.focusedIndex(),
-        selectedIndex: () => base.control.selectedIndex(),
-    };
+	const { triggerSelector = "[role=\"tab\"]", ...controlOptions } = options;
+	const base = createControlDriver(fixture, TabBarDirective, controlOptions);
+	const triggers = () => base.queryAll(triggerSelector);
+	const trigger = (index) => {
+		const el = triggers()[index];
+		if (!el) throw new Error(`No tab trigger at index ${index}`);
+		return el;
+	};
+	const tabbableTrigger = () => triggers().find((el) => el.getAttribute("tabindex") === "0") ?? null;
+	const focusTabbable = () => {
+		const el = tabbableTrigger();
+		if (!el) throw new Error("No tabbable trigger - the roving-tabindex lookup found nothing");
+		el.focus();
+		base.tick();
+	};
+	const press = (key, init) => {
+		const target = document.activeElement ?? tabbableTrigger();
+		if (!target) throw new Error("No focused trigger to dispatch the keydown on");
+		return pressKey(target, key, init);
+	};
+	return {
+		...base,
+		triggers,
+		trigger,
+		tabbableTrigger,
+		focusTabbable,
+		press,
+		focusedIndex: () => base.control.focusedIndex(),
+		selectedIndex: () => base.control.selectedIndex()
+	};
+};
+var ResizeObserverFake = class {
+	constructor(callback) {}
+	observe() {}
+	unobserve() {}
+	disconnect() {}
+};
+var IntersectionObserverFake = class {
+	constructor(callback) {
+		this.root = null;
+		this.rootMargin = "";
+		this.thresholds = [];
+	}
+	observe() {}
+	unobserve() {}
+	disconnect() {}
+	takeRecords() {
+		return [];
+	}
+};
+var AnimationFake = class extends EventTarget {
+	constructor() {
+		super();
+		this.currentTime = 0;
+		this.playState = "finished";
+		this.onfinish = null;
+		this.oncancel = null;
+		this.settled = false;
+		this.finished = Promise.resolve(this);
+		queueMicrotask(() => this.finish());
+	}
+	cancel() {
+		if (this.settled) return;
+		this.settled = true;
+		this.playState = "idle";
+		this.dispatchEvent(new Event("cancel"));
+		this.oncancel?.();
+	}
+	finish() {
+		if (this.settled) return;
+		this.settled = true;
+		this.playState = "finished";
+		this.dispatchEvent(new Event("finish"));
+		this.onfinish?.();
+	}
+	play() {}
+	pause() {}
+	reverse() {}
+	commitStyles() {}
 };
-
-class ResizeObserverFake {
-    constructor(callback) {
-        void callback;
-    }
-    observe() {
-        return undefined;
-    }
-    unobserve() {
-        return undefined;
-    }
-    disconnect() {
-        return undefined;
-    }
-}
-class IntersectionObserverFake {
-    constructor(callback) {
-        this.root = null;
-        this.rootMargin = '';
-        this.thresholds = [];
-        void callback;
-    }
-    observe() {
-        return undefined;
-    }
-    unobserve() {
-        return undefined;
-    }
-    disconnect() {
-        return undefined;
-    }
-    takeRecords() {
-        return [];
-    }
-}
-class AnimationFake extends EventTarget {
-    constructor() {
-        super();
-        this.currentTime = 0;
-        this.playState = 'finished';
-        this.onfinish = null;
-        this.oncancel = null;
-        // An animation settles once: without the latch a `cancel()` before the queued auto-finish would fire
-        // `oncancel` and then `onfinish`. It is set before notifying, so a handler that re-enters
-        // `cancel()`/`finish()` is a no-op.
-        this.settled = false;
-        this.finished = Promise.resolve(this);
-        queueMicrotask(() => this.finish());
-    }
-    cancel() {
-        if (this.settled)
-            return;
-        this.settled = true;
-        this.playState = 'idle';
-        this.dispatchEvent(new Event('cancel'));
-        this.oncancel?.();
-    }
-    finish() {
-        if (this.settled)
-            return;
-        this.settled = true;
-        this.playState = 'finished';
-        this.dispatchEvent(new Event('finish'));
-        this.onfinish?.();
-    }
-    play() {
-        return undefined;
-    }
-    pause() {
-        return undefined;
-    }
-    reverse() {
-        return undefined;
-    }
-    commitStyles() {
-        return undefined;
-    }
-}
 const fakeMediaQueryList = (query) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: () => undefined,
-    removeListener: () => undefined,
-    addEventListener: () => undefined,
-    removeEventListener: () => undefined,
-    dispatchEvent: () => false,
+	matches: false,
+	media: query,
+	onchange: null,
+	addListener: () => void 0,
+	removeListener: () => void 0,
+	addEventListener: () => void 0,
+	removeEventListener: () => void 0,
+	dispatchEvent: () => false
 });
 const defineMissing = (target, key, value) => {
-    if (Reflect.get(target, key))
-        return;
-    Object.defineProperty(target, key, { configurable: true, value, writable: true });
+	if (Reflect.get(target, key)) return;
+	Object.defineProperty(target, key, {
+		configurable: true,
+		value,
+		writable: true
+	});
 };
-/**
- * Installs the browser APIs jsdom lacks and `@ethlete/components` needs to render: `ResizeObserver`,
- * `IntersectionObserver`, `matchMedia`, `Element.prototype.animate` and `Element.prototype.scroll`. Call it once in a test setup file;
- * an API that already exists is left alone. The fakes never report: observers never fire, no media query
- * matches, and an animation finishes on the next microtask.
- */
 const setupComponentsTestEnvironment = () => {
-    defineMissing(globalThis, 'ResizeObserver', ResizeObserverFake);
-    defineMissing(globalThis, 'IntersectionObserver', IntersectionObserverFake);
-    defineMissing(globalThis, 'matchMedia', fakeMediaQueryList);
-    defineMissing(Element.prototype, 'animate', () => new AnimationFake());
-    defineMissing(Element.prototype, 'scroll', () => undefined);
+	defineMissing(globalThis, "ResizeObserver", ResizeObserverFake);
+	defineMissing(globalThis, "IntersectionObserver", IntersectionObserverFake);
+	defineMissing(globalThis, "matchMedia", fakeMediaQueryList);
+	defineMissing(Element.prototype, "animate", () => new AnimationFake());
+	defineMissing(Element.prototype, "scroll", () => void 0);
 };
-
-/**
- * Generated bundle index. Do not edit.
- */
-
 export { blurField, createControlDriver, createDatePickerDriver, createFieldControlDriver, createOverlayControlDriver, createSelectDriver, createTabBarDriver, createTestOverlayRef, directiveAt, flushFrames, focusEvent, focusField, hostDirective, hostElement, latestPane, pasteInto, pointerDownOutside, pointerEnter, pointerEvent, pressKey, provideTestOverlayRef, query, queryAll, resetOverlays, setInputValue, setupComponentsTestEnvironment, textOf, tick, typeChars, typeInField, typeMasked };
-//# sourceMappingURL=ethlete-components-testing.mjs.map
+
+//# sourceMappingURL=ethlete-components-testing.mjs.map