import { TemporalMixinInterface } from "../elements/EFTemporal.js";
import { ControllableInterface } from "./Controllable.js";
import { FocusContext } from "./focusContext.js";
import * as _$lit from "lit";
import { LitElement, PropertyValueMap } from "lit";

//#region src/gui/EFControls.d.ts
/**
 * EFControls provides a way to control an ef-preview element that is not a direct ancestor.
 * It bridges the contexts from a target preview element to its children controls.
 *
 * Usage:
 * ```html
 * <ef-preview id="my-preview">...</ef-preview>
 *
 * <ef-controls target="my-preview">
 *   <ef-toggle-play>
 *     <button slot="play">Play</button>
 *     <button slot="pause">Pause</button>
 *   </ef-toggle-play>
 *   <ef-scrubber></ef-scrubber>
 *   <ef-time-display></ef-time-display>
 * </ef-controls>
 * ```
 */
declare class EFControls extends LitElement {
  #private;
  static styles: _$lit.CSSResult;
  createRenderRoot(): this;
  /**
   * The ID of the ef-preview element to control
   */
  target: string;
  /**
   * The target element (set by TargetController)
   */
  targetElement: ControllableInterface | null;
  playing: boolean;
  loop: boolean;
  currentTimeMs: number;
  durationMs: number;
  targetTemporal: TemporalMixinInterface | null;
  focusedElement?: HTMLElement;
  focusContext: FocusContext;
  updated(changedProperties: PropertyValueMap<this>): void;
  disconnectedCallback(): void;
}
declare global {
  interface HTMLElementTagNameMap {
    "ef-controls": EFControls;
  }
}
//#endregion
export { EFControls };
//# sourceMappingURL=EFControls.d.ts.map