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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethlete/components",
-  "version": "1.0.0-next.75",
+  "version": "1.0.0-next.76",
   "repository": {
     "type": "git",
     "url": "https://github.com/ethlete-io/ethdk",
@@ -38,7 +38,7 @@
     "@ethlete/query": "^6.0.0-beta.8",
     "@ethlete/types": "^2.0.0-beta.4",
     "@floating-ui/dom": "^1.6.0",
-    "@nx/devkit": "^23.0.0",
+    "@nx/devkit": "^24.0.0",
     "date-fns": "^4.0.0",
     "rxjs": "^7.8.0"
   },

package/src/lib/forms/form-field/form-field-control-suffix-styles.component.css

@@ -27,8 +27,14 @@
       inset: -4px;
       border-radius: 50%;
       background: transparent;
-      transition: background-color 150ms ease;
       pointer-events: none;
+
+      /* Hover-only: a tap's :active transition ends on this pseudo-element in the frame the button
+         starts to leave, and Angular's animate.leave takes that transitionend (its target is the
+         button) as the end of the fade-out and removes the button at once. */
+      @media (hover: hover) {
+        transition: background-color 150ms ease;
+      }
     }
 
     /* Ends halfway into the gap, so a neighbouring picker trigger's own hit area keeps the other half. */
@@ -103,6 +109,9 @@
       content: '';
       position: absolute;
       inset: -14px;
+      inset-inline-end: calc(
+        -1 * min(14px, var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))
+      );
     }
 
     .et-icon {

package/src/lib/overlay/strategies/sheet-styles.component.css

@@ -47,6 +47,24 @@
        is used deliberately: sheets keep `overflow: hidden` to clip their rounded corners, and an
        element's own box-shadow is not clipped by its own overflow — a child/`::after` would be. */
       box-shadow: 0 50px 0 0 var(--_et-overlay-overshoot-fill);
+
+      /* `translate` and `scale` compose with the `transform` that the enter, leave and drag
+       animations write, so the stack never fights them. */
+      transform-origin: top center;
+      transition:
+        translate 400ms var(--ease-out-5),
+        scale 400ms var(--ease-out-5);
+
+      @supports (transition-timing-function: linear(0, 1)) {
+        transition:
+          translate 400ms var(--ease-spring-1),
+          scale 400ms var(--ease-spring-1);
+      }
+
+      &.et-overlay--stacked {
+        translate: 0 -10px;
+        scale: 0.92;
+      }
     }
 
     &.et-overlay--top-sheet {
@@ -136,6 +154,7 @@
       &.et-overlay--top-sheet,
       &.et-overlay--left-sheet,
       &.et-overlay--right-sheet {
+        &,
         &.et-animation-enter-active,
         &.et-animation-leave-active {
           transition-duration: 0ms;

package/types/ethlete-components-testing.d.ts

@@ -1,82 +1,78 @@
-import * as _angular_core from '@angular/core';
-import { Type, Provider } from '@angular/core';
-import { ComponentFixture } from '@angular/core/testing';
-import { OverlayRuntimeCloseSource } from '@ethlete/core';
-import { OverlayRef, OverlayConfig, SelectDirective, TabBarDirective } from '@ethlete/components';
-
-type ControlDriverOptions = {
-    /** Matches the element carrying the directive, when the host template nests it. */
-    directiveSelector?: string;
+import { Provider, Type } from "@angular/core";
+import { ComponentFixture } from "@angular/core/testing";
+import { OverlayRuntimeCloseSource } from "@ethlete/core";
+import { OverlayConfig, OverlayRef, SelectDirective, TabBarDirective } from "@ethlete/components";
+export type ControlDriverOptions = {
+  /** Matches the element carrying the directive, when the host template nests it. */
+  directiveSelector?: string;
 };
 /** The host, the directive under test, and queries scoped to the fixture - what every driver needs. */
-declare const createControlDriver: <T, D>(fixture: ComponentFixture<T>, directiveType: Type<D>, { directiveSelector }?: ControlDriverOptions) => {
-    fixture: ComponentFixture<T>;
-    host: T;
-    control: D;
-    detectChanges: () => void;
-    tick: () => void;
-    element: () => HTMLElement;
-    directive: <X>(type: Type<X>, selector?: string) => X;
-    query: <E extends HTMLElement = HTMLElement>(selector: string) => E | null;
-    queryAll: <E extends HTMLElement = HTMLElement>(selector: string) => E[];
-    text: (selector: string) => string | null;
-    click: (element: HTMLElement) => void;
+export declare const createControlDriver: <T, D>(fixture: ComponentFixture<T>, directiveType: Type<D>, { directiveSelector }?: ControlDriverOptions) => {
+  fixture: ComponentFixture<T>;
+  host: T;
+  control: D;
+  detectChanges: () => void;
+  tick: () => void;
+  element: () => HTMLElement;
+  directive: <X>(type: Type<X>, selector?: string) => X;
+  query: <E extends HTMLElement = HTMLElement>(selector: string) => E | null;
+  queryAll: <E extends HTMLElement = HTMLElement>(selector: string) => E[];
+  text: (selector: string) => string | null;
+  click: (element: HTMLElement) => void;
 };
-
 /**
  * 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}.
  */
-declare const typeMasked: (field: HTMLInputElement, text: string) => void;
+export declare const typeMasked: (field: HTMLInputElement, text: string) => void;
 /**
  * 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`.
  */
-declare const createDatePickerDriver: <T, D extends {
-    closePicker: () => void;
+export declare const createDatePickerDriver: <T, D extends {
+  closePicker: () => void;
 }>(fixture: ComponentFixture<T>, directiveType: Type<D>, options?: ControlDriverOptions) => {
-    dayCell: (label: string) => HTMLButtonElement | null;
-    clickDayCell: (label: string) => void;
-    field: (selector?: string) => HTMLInputElement;
-    fields: () => HTMLInputElement[];
-    type: (text: string, selector?: string) => void;
-    typeMasked: (text: string, selector?: string) => void;
-    typeAndBlur: (text: string, selector?: string) => void;
-    focusField: (selector?: string) => void;
-    blurField: (selector?: string) => void;
-    pressInField: (key: string, selector?: string) => KeyboardEvent;
-    settle: () => Promise<void>;
-    trigger: <E extends HTMLElement = HTMLElement>() => E;
-    pane: () => HTMLElement | null;
-    paneEl: <E extends HTMLElement = HTMLElement>(selector: string) => E | null;
-    paneEls: <E extends HTMLElement = HTMLElement>(selector: string) => E[];
-    open: () => Promise<void>;
-    close: () => Promise<void>;
-    closeAndRemovePanes: () => void;
-    press: (key: string) => KeyboardEvent;
-    escape: () => KeyboardEvent;
-    pointerDownOutside: () => void;
-    clickInPane: (selector: string) => void;
-    fixture: ComponentFixture<T>;
-    host: T;
-    control: D;
-    detectChanges: () => void;
-    tick: () => void;
-    element: () => HTMLElement;
-    directive: <X>(type: Type<X>, selector?: string) => X;
-    query: <E extends HTMLElement = HTMLElement>(selector: string) => E | null;
-    queryAll: <E extends HTMLElement = HTMLElement>(selector: string) => E[];
-    text: (selector: string) => string | null;
-    click: (element: HTMLElement) => void;
+  dayCell: (label: string) => HTMLButtonElement | null;
+  clickDayCell: (label: string) => void;
+  field: (selector?: string) => HTMLInputElement;
+  fields: () => HTMLInputElement[];
+  type: (text: string, selector?: string) => void;
+  typeMasked: (text: string, selector?: string) => void;
+  typeAndBlur: (text: string, selector?: string) => void;
+  focusField: (selector?: string) => void;
+  blurField: (selector?: string) => void;
+  pressInField: (key: string, selector?: string) => KeyboardEvent;
+  settle: () => Promise<void>;
+  trigger: <E extends HTMLElement = HTMLElement>() => E;
+  pane: () => HTMLElement | null;
+  paneEl: <E extends HTMLElement = HTMLElement>(selector: string) => E | null;
+  paneEls: <E extends HTMLElement = HTMLElement>(selector: string) => E[];
+  open: () => Promise<void>;
+  close: () => Promise<void>;
+  closeAndRemovePanes: () => void;
+  press: (key: string) => KeyboardEvent;
+  escape: () => KeyboardEvent;
+  pointerDownOutside: () => void;
+  clickInPane: (selector: string) => void;
+  fixture: ComponentFixture<T>;
+  host: T;
+  control: D;
+  detectChanges: () => void;
+  tick: () => void;
+  element: () => HTMLElement;
+  directive: <X>(type: Type<X>, selector?: string) => X;
+  query: <E extends HTMLElement = HTMLElement>(selector: string) => E | null;
+  queryAll: <E extends HTMLElement = HTMLElement>(selector: string) => E[];
+  text: (selector: string) => string | null;
+  click: (element: HTMLElement) => void;
 };
-type DatePickerDriver<T, D extends {
-    closePicker: () => void;
+export type DatePickerDriver<T, D extends {
+  closePicker: () => void;
 }> = ReturnType<typeof createDatePickerDriver<T, D>>;
-
-declare const tick: () => void;
-declare const flushFrames: () => Promise<void>;
-declare const resetOverlays: () => void;
+export declare const tick: () => void;
+export declare const flushFrames: () => Promise<void>;
+export declare const resetOverlays: () => void;
 /**
  * The newest overlay pane in the document.
  *
@@ -84,48 +80,47 @@ declare const resetOverlays: () => void;
  * so a pane stuck in its leave transition stays reachable. Scope every pane query through here, or
  * a stale pane answers it.
  */
-declare const latestPane: () => HTMLElement | null;
-declare const hostDirective: <T>(fixture: ComponentFixture<unknown>, type: Type<T>) => T;
-declare const directiveAt: <T>(fixture: ComponentFixture<unknown>, type: Type<T>, selector: string) => T;
-declare const hostElement: (fixture: ComponentFixture<unknown>) => HTMLElement;
+export declare const latestPane: () => HTMLElement | null;
+export declare const hostDirective: <T>(fixture: ComponentFixture<unknown>, type: Type<T>) => T;
+export declare const directiveAt: <T>(fixture: ComponentFixture<unknown>, type: Type<T>, selector: string) => T;
+export declare const hostElement: (fixture: ComponentFixture<unknown>) => HTMLElement;
 /**
  * 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 `{}`.
  */
-declare const queryAll: <E extends Element = HTMLElement>(fixture: ComponentFixture<unknown>, selector: string) => E[];
+export declare const queryAll: <E extends Element = HTMLElement>(fixture: ComponentFixture<unknown>, selector: string) => E[];
 /** Single-result counterpart of {@link queryAll}. */
-declare const query: <E extends Element = HTMLElement>(fixture: ComponentFixture<unknown>, selector: string) => E | null;
-declare const pressKey: (target: EventTarget, key: string, init?: KeyboardEventInit) => KeyboardEvent;
-declare const focusEvent: (target: EventTarget, type: "focus" | "blur") => void;
-declare const pointerEnter: (target: EventTarget) => void;
-declare const pointerEvent: (target: EventTarget, type: string, init?: PointerEventInit) => void;
-declare const setInputValue: (input: HTMLInputElement, value: string) => void;
-declare const focusField: (field: HTMLInputElement) => void;
-declare const typeInField: (field: HTMLInputElement, text: string) => void;
+export declare const query: <E extends Element = HTMLElement>(fixture: ComponentFixture<unknown>, selector: string) => E | null;
+export declare const pressKey: (target: EventTarget, key: string, init?: KeyboardEventInit) => KeyboardEvent;
+export declare const focusEvent: (target: EventTarget, type: "focus" | "blur") => void;
+export declare const pointerEnter: (target: EventTarget) => void;
+export declare const pointerEvent: (target: EventTarget, type: string, init?: PointerEventInit) => void;
+export declare const setInputValue: (input: HTMLInputElement, value: string) => void;
+export declare const focusField: (field: HTMLInputElement) => void;
+export declare const typeInField: (field: HTMLInputElement, text: string) => void;
 /**
  * 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.
  */
-declare const typeChars: (field: HTMLInputElement, text: string) => void;
-declare const blurField: (field: HTMLInputElement) => void;
-declare const pointerDownOutside: () => void;
-type ClipboardPayload = Readonly<Record<string, string>>;
+export declare const typeChars: (field: HTMLInputElement, text: string) => void;
+export declare const blurField: (field: HTMLInputElement) => void;
+export declare const pointerDownOutside: () => void;
+export type ClipboardPayload = Readonly<Record<string, string>>;
 /** jsdom has no `DataTransfer`, so the clipboard payload is faked onto the event. */
-declare const pasteInto: (target: EventTarget, payload: ClipboardPayload | string) => void;
-declare const textOf: (element: Element | null | undefined) => string | null;
-
-type TestOverlayRef<TComponent extends object = object, TResult = unknown> = OverlayRef<TComponent, TResult> & {
-    /** Every `close()` / `forceClose()` call, in order, including ones a close guard vetoed. */
-    readonly closeCalls: readonly {
-        result: TResult | undefined;
-        source: OverlayRuntimeCloseSource;
-        forced: boolean;
-    }[];
-    /** Whether a close got past the close guards. */
-    readonly isClosed: () => boolean;
+export declare const pasteInto: (target: EventTarget, payload: ClipboardPayload | string) => void;
+export declare const textOf: (element: Element | null | undefined) => string | null;
+export type TestOverlayRef<TComponent extends object = object, TResult = unknown> = OverlayRef<TComponent, TResult> & {
+  /** Every `close()` / `forceClose()` call, in order, including ones a close guard vetoed. */
+  readonly closeCalls: readonly {
+    result: TResult | undefined;
+    source: OverlayRuntimeCloseSource;
+    forced: boolean;
+  }[];
+  /** Whether a close got past the close guards. */
+  readonly isClosed: () => boolean;
 };
 /**
  * A standalone `OverlayRef` for unit-testing an overlay component without opening it: `close(result)`
@@ -138,174 +133,166 @@ type TestOverlayRef<TComponent extends object = object, TResult = unknown> = Ove
  * // … press the component's save button …
  * expect(ref.closeCalls.at(-1)?.result).toEqual({ saved: true });
  */
-declare const createTestOverlayRef: <TResult = unknown, TComponent extends object = object>(config?: OverlayConfig) => TestOverlayRef<TComponent, TResult>;
+export declare const createTestOverlayRef: <TResult = unknown, TComponent extends object = object>(config?: OverlayConfig) => TestOverlayRef<TComponent, TResult>;
 /** Provides `ref` (a fresh {@link createTestOverlayRef} by default) as `OVERLAY_REF`, so `definition.injectRef()` resolves it. */
-declare const provideTestOverlayRef: <TResult = unknown>(ref?: TestOverlayRef<object, TResult>) => Provider[];
-
-type FieldControlDriverOptions = ControlDriverOptions & {
-    /** Matches the editable field, when it is not the host's only `input`. */
-    fieldSelector?: string;
+export declare const provideTestOverlayRef: <TResult = unknown>(ref?: TestOverlayRef<object, TResult>) => Provider[];
+export type FieldControlDriverOptions = ControlDriverOptions & {
+  /** Matches the editable field, when it is not the host's only `input`. */
+  fieldSelector?: string;
 };
 /**
  * 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.
  */
-declare const createFieldControlDriver: <T, D>(fixture: ComponentFixture<T>, directiveType: Type<D>, { fieldSelector, ...controlOptions }?: FieldControlDriverOptions) => {
-    field: () => HTMLInputElement;
-    fieldValue: () => string;
-    placeholder: () => string;
-    type: (text: string) => void;
-    /** Types one character at a time - what a keyboard produces, unlike `type`'s single event. */
-    typeChars: (text: string) => void;
-    typeAndBlur: (text: string) => void;
-    focus: () => void;
-    blur: () => void;
-    press: (key: string, init?: KeyboardEventInit) => KeyboardEvent;
-    pointer: (target: EventTarget, type: string, init?: PointerEventInit) => void;
-    fixture: ComponentFixture<T>;
-    host: T;
-    control: D;
-    detectChanges: () => void;
-    tick: () => void;
-    element: () => HTMLElement;
-    directive: <X>(type: Type<X>, selector?: string) => X;
-    query: <E extends HTMLElement = HTMLElement>(selector: string) => E | null;
-    queryAll: <E extends HTMLElement = HTMLElement>(selector: string) => E[];
-    text: (selector: string) => string | null;
-    click: (element: HTMLElement) => void;
+export declare const createFieldControlDriver: <T, D>(fixture: ComponentFixture<T>, directiveType: Type<D>, { fieldSelector, ...controlOptions }?: FieldControlDriverOptions) => {
+  field: () => HTMLInputElement;
+  fieldValue: () => string;
+  placeholder: () => string;
+  type: (text: string) => void;
+  /** Types one character at a time - what a keyboard produces, unlike `type`'s single event. */
+  typeChars: (text: string) => void;
+  typeAndBlur: (text: string) => void;
+  focus: () => void;
+  blur: () => void;
+  press: (key: string, init?: KeyboardEventInit) => KeyboardEvent;
+  pointer: (target: EventTarget, type: string, init?: PointerEventInit) => void;
+  fixture: ComponentFixture<T>;
+  host: T;
+  control: D;
+  detectChanges: () => void;
+  tick: () => void;
+  element: () => HTMLElement;
+  directive: <X>(type: Type<X>, selector?: string) => X;
+  query: <E extends HTMLElement = HTMLElement>(selector: string) => E | null;
+  queryAll: <E extends HTMLElement = HTMLElement>(selector: string) => E[];
+  text: (selector: string) => string | null;
+  click: (element: HTMLElement) => void;
 };
-type FieldControlDriver<T, D> = ReturnType<typeof createFieldControlDriver<T, D>>;
-
-type OverlayControlDriverOptions<D> = ControlDriverOptions & {
-    /** The element the user clicks to open the overlay. */
-    triggerSelector?: string;
-    /** How this control closes its overlay from code. */
-    hide: (control: D) => void;
+export type FieldControlDriver<T, D> = ReturnType<typeof createFieldControlDriver<T, D>>;
+export type OverlayControlDriverOptions<D> = ControlDriverOptions & {
+  /** The element the user clicks to open the overlay. */
+  triggerSelector?: string;
+  /** How this control closes its overlay from code. */
+  hide: (control: D) => void;
 };
 /**
  * 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.
  */
-declare const createOverlayControlDriver: <T, D>(fixture: ComponentFixture<T>, directiveType: Type<D>, { triggerSelector, hide, ...controlOptions }: OverlayControlDriverOptions<D>) => {
-    settle: () => Promise<void>;
-    trigger: <E extends HTMLElement = HTMLElement>() => E;
-    pane: () => HTMLElement | null;
-    paneEl: <E extends HTMLElement = HTMLElement>(selector: string) => E | null;
-    paneEls: <E extends HTMLElement = HTMLElement>(selector: string) => E[];
-    open: () => Promise<void>;
-    close: () => Promise<void>;
-    closeAndRemovePanes: () => void;
-    press: (key: string) => KeyboardEvent;
-    escape: () => KeyboardEvent;
-    pointerDownOutside: () => void;
-    clickInPane: (selector: string) => void;
-    fixture: ComponentFixture<T>;
-    host: T;
-    control: D;
-    detectChanges: () => void;
-    tick: () => void;
-    element: () => HTMLElement;
-    directive: <X>(type: Type<X>, selector?: string) => X;
-    query: <E extends HTMLElement = HTMLElement>(selector: string) => E | null;
-    queryAll: <E extends HTMLElement = HTMLElement>(selector: string) => E[];
-    text: (selector: string) => string | null;
-    click: (element: HTMLElement) => void;
+export declare const createOverlayControlDriver: <T, D>(fixture: ComponentFixture<T>, directiveType: Type<D>, { triggerSelector, hide, ...controlOptions }: OverlayControlDriverOptions<D>) => {
+  settle: () => Promise<void>;
+  trigger: <E extends HTMLElement = HTMLElement>() => E;
+  pane: () => HTMLElement | null;
+  paneEl: <E extends HTMLElement = HTMLElement>(selector: string) => E | null;
+  paneEls: <E extends HTMLElement = HTMLElement>(selector: string) => E[];
+  open: () => Promise<void>;
+  close: () => Promise<void>;
+  closeAndRemovePanes: () => void;
+  press: (key: string) => KeyboardEvent;
+  escape: () => KeyboardEvent;
+  pointerDownOutside: () => void;
+  clickInPane: (selector: string) => void;
+  fixture: ComponentFixture<T>;
+  host: T;
+  control: D;
+  detectChanges: () => void;
+  tick: () => void;
+  element: () => HTMLElement;
+  directive: <X>(type: Type<X>, selector?: string) => X;
+  query: <E extends HTMLElement = HTMLElement>(selector: string) => E | null;
+  queryAll: <E extends HTMLElement = HTMLElement>(selector: string) => E[];
+  text: (selector: string) => string | null;
+  click: (element: HTMLElement) => void;
 };
-
-declare const createSelectDriver: <T>(fixture: ComponentFixture<T>, controlOptions?: ControlDriverOptions) => {
-    select: SelectDirective<unknown>;
-    searchInput: () => HTMLInputElement;
-    valueEl: () => HTMLElement | null;
-    valueText: () => string | null;
-    chips: () => HTMLElement[];
-    chipLabels: () => (string | null)[];
-    chipRemoveButton: (index: number) => HTMLElement | null;
-    listbox: () => HTMLElement | null;
-    paneText: () => string | null;
-    options: () => HTMLElement[];
-    visibleOptions: () => HTMLElement[];
-    activeOption: () => HTMLElement | null;
-    activeLabel: () => string | null;
-    optionLabels: () => (string | null)[];
-    visibleLabels: () => (string | null)[];
-    optionByLabel: (label: string) => HTMLElement | null;
-    optionGroups: () => HTMLElement[];
-    groupsHidden: () => boolean[];
-    groupOptionCounts: () => number[];
-    groupLabel: (index: number) => string | null;
-    virtualPadding: () => {
-        start: number;
-        end: number;
-    };
-    clickOption: (index: number) => void;
-    clickOptionByLabel: (label: string) => void;
-    removeChip: (index: number) => void;
-    hover: (element: HTMLElement) => void;
-    type: (text: string) => void;
-    pressInSearch: (key: string) => KeyboardEvent;
-    paste: (text: string) => void;
-    settle: () => Promise<void>;
-    trigger: <E extends HTMLElement = HTMLElement>() => E;
-    pane: () => HTMLElement | null;
-    paneEl: <E extends HTMLElement = HTMLElement>(selector: string) => E | null;
-    paneEls: <E extends HTMLElement = HTMLElement>(selector: string) => E[];
-    open: () => Promise<void>;
-    close: () => Promise<void>;
-    closeAndRemovePanes: () => void;
-    press: (key: string) => KeyboardEvent;
-    escape: () => KeyboardEvent;
-    pointerDownOutside: () => void;
-    clickInPane: (selector: string) => void;
-    fixture: ComponentFixture<T>;
-    host: T;
-    control: SelectDirective<unknown>;
-    detectChanges: () => void;
-    tick: () => void;
-    element: () => HTMLElement;
-    directive: <X>(type: _angular_core.Type<X>, selector?: string) => X;
-    query: <E extends HTMLElement = HTMLElement>(selector: string) => E | null;
-    queryAll: <E extends HTMLElement = HTMLElement>(selector: string) => E[];
-    text: (selector: string) => string | null;
-    click: (element: HTMLElement) => void;
+export declare const createSelectDriver: <T>(fixture: ComponentFixture<T>, controlOptions?: ControlDriverOptions) => {
+  select: SelectDirective<unknown>;
+  searchInput: () => HTMLInputElement;
+  valueEl: () => HTMLElement | null;
+  valueText: () => string | null;
+  chips: () => HTMLElement[];
+  chipLabels: () => (string | null)[];
+  chipRemoveButton: (index: number) => HTMLElement | null;
+  listbox: () => HTMLElement | null;
+  paneText: () => string | null;
+  options: () => HTMLElement[];
+  visibleOptions: () => HTMLElement[];
+  activeOption: () => HTMLElement | null;
+  activeLabel: () => string | null;
+  optionLabels: () => (string | null)[];
+  visibleLabels: () => (string | null)[];
+  optionByLabel: (label: string) => HTMLElement | null;
+  optionGroups: () => HTMLElement[];
+  groupsHidden: () => boolean[];
+  groupOptionCounts: () => number[];
+  groupLabel: (index: number) => string | null;
+  virtualPadding: () => {
+    start: number;
+    end: number;
+  };
+  clickOption: (index: number) => void;
+  clickOptionByLabel: (label: string) => void;
+  removeChip: (index: number) => void;
+  hover: (element: HTMLElement) => void;
+  type: (text: string) => void;
+  pressInSearch: (key: string) => KeyboardEvent;
+  paste: (text: string) => void;
+  settle: () => Promise<void>;
+  trigger: <E extends HTMLElement = HTMLElement>() => E;
+  pane: () => HTMLElement | null;
+  paneEl: <E extends HTMLElement = HTMLElement>(selector: string) => E | null;
+  paneEls: <E extends HTMLElement = HTMLElement>(selector: string) => E[];
+  open: () => Promise<void>;
+  close: () => Promise<void>;
+  closeAndRemovePanes: () => void;
+  press: (key: string) => KeyboardEvent;
+  escape: () => KeyboardEvent;
+  pointerDownOutside: () => void;
+  clickInPane: (selector: string) => void;
+  fixture: ComponentFixture<T>;
+  host: T;
+  control: SelectDirective<unknown>;
+  detectChanges: () => void;
+  tick: () => void;
+  element: () => HTMLElement;
+  directive: <X>(type: import("@angular/core").Type<X>, selector?: string) => X;
+  query: <E extends HTMLElement = HTMLElement>(selector: string) => E | null;
+  queryAll: <E extends HTMLElement = HTMLElement>(selector: string) => E[];
+  text: (selector: string) => string | null;
+  click: (element: HTMLElement) => void;
 };
-type SelectDriver<T> = ReturnType<typeof createSelectDriver<T>>;
-
-type TabBarDriverOptions = ControlDriverOptions & {
-    /** Matches every trigger inside the bar. Defaults to the role every `TabBarTriggerDirective` host carries. */
-    triggerSelector?: string;
+export type SelectDriver<T> = ReturnType<typeof createSelectDriver<T>>;
+export type TabBarDriverOptions = ControlDriverOptions & {
+  /** Matches every trigger inside the bar. Defaults to the role every `TabBarTriggerDirective` host carries. */
+  triggerSelector?: string;
 };
 /**
  * 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.
  */
-declare const createTabBarDriver: <T>(fixture: ComponentFixture<T>, options?: TabBarDriverOptions) => {
-    triggers: () => HTMLButtonElement[];
-    trigger: (index: number) => HTMLButtonElement;
-    tabbableTrigger: () => HTMLButtonElement | null;
-    focusTabbable: () => void;
-    press: (key: string, init?: KeyboardEventInit) => KeyboardEvent;
-    focusedIndex: () => number;
-    selectedIndex: () => number;
-    fixture: ComponentFixture<T>;
-    host: T;
-    control: TabBarDirective;
-    detectChanges: () => void;
-    tick: () => void;
-    element: () => HTMLElement;
-    directive: <X>(type: _angular_core.Type<X>, selector?: string) => X;
-    query: <E extends HTMLElement = HTMLElement>(selector: string) => E | null;
-    queryAll: <E extends HTMLElement = HTMLElement>(selector: string) => E[];
-    text: (selector: string) => string | null;
-    click: (element: HTMLElement) => void;
+export declare const createTabBarDriver: <T>(fixture: ComponentFixture<T>, options?: TabBarDriverOptions) => {
+  triggers: () => HTMLButtonElement[];
+  trigger: (index: number) => HTMLButtonElement;
+  tabbableTrigger: () => HTMLButtonElement | null;
+  focusTabbable: () => void;
+  press: (key: string, init?: KeyboardEventInit) => KeyboardEvent;
+  focusedIndex: () => number;
+  selectedIndex: () => number;
+  fixture: ComponentFixture<T>;
+  host: T;
+  control: TabBarDirective;
+  detectChanges: () => void;
+  tick: () => void;
+  element: () => HTMLElement;
+  directive: <X>(type: import("@angular/core").Type<X>, selector?: string) => X;
+  query: <E extends HTMLElement = HTMLElement>(selector: string) => E | null;
+  queryAll: <E extends HTMLElement = HTMLElement>(selector: string) => E[];
+  text: (selector: string) => string | null;
+  click: (element: HTMLElement) => void;
 };
-
 /**
  * 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.
  */
-declare const setupComponentsTestEnvironment: () => void;
-
-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 };
-export type { ClipboardPayload, ControlDriverOptions, DatePickerDriver, FieldControlDriver, FieldControlDriverOptions, OverlayControlDriverOptions, SelectDriver, TabBarDriverOptions, TestOverlayRef };
+export declare const setupComponentsTestEnvironment: () => void;