import { FlowCoreMap } from '@emuanalytics/flow-rdf-core';
import * as lit_html from 'lit-html';
import * as lit from 'lit';
import { LitElement, CSSResultGroup, ReactiveController, ReactiveControllerHost, TemplateResult, PropertyValueMap } from 'lit';
import * as chartjs_chart_matrix from 'chartjs-chart-matrix';
import * as chart_js from 'chart.js';
import { ChartComponentLike, Chart, ChartTypeRegistry, ChartOptions, ChartData, Plugin } from 'chart.js';
export { Chart as ChartJs } from 'chart.js';

type FlowAfterCollapseEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-after-collapse': FlowAfterCollapseEvent;
    }
}

type FlowAfterExpandEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-after-expand': FlowAfterExpandEvent;
    }
}

type FlowAfterHideEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-after-hide': FlowAfterHideEvent;
    }
}

type FlowAfterShowEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-after-show': FlowAfterShowEvent;
    }
}

type FlowApplyEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-apply': FlowApplyEvent;
    }
}

type FlowBlurEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-blur': FlowBlurEvent;
    }
}

type FlowCancelEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-cancel': FlowCancelEvent;
    }
}

type FlowChangeEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-change': FlowChangeEvent;
    }
}

type FlowClearEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-clear': FlowClearEvent;
    }
}

type FlowCloseEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-close': FlowCloseEvent;
    }
}

type FlowCollapseEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-collapse': FlowCollapseEvent;
    }
}

type FlowCollapseTreeEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-collapse-tree': FlowCollapseTreeEvent;
    }
}

type FlowDragEvent = CustomEvent<{
    x: number;
    y: number;
}>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-drag': FlowDragEvent;
    }
}

type FlowDragDropEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-drag-drop': FlowDragDropEvent;
    }
}

type FlowDragEndEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-drag-end': FlowDragEndEvent;
    }
}

type FlowDragOverEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-drag-over': FlowDragOverEvent;
    }
}

type FlowDragStartEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-drag-start': FlowDragStartEvent;
    }
}

type FlowErrorEvent = CustomEvent<{
    status?: number;
}>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-error': FlowErrorEvent;
    }
}

type FlowExpandEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-expand': FlowExpandEvent;
    }
}

type FlowExpandTreeEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-expand-tree': FlowExpandTreeEvent;
    }
}

type FlowFinishEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-finish': FlowFinishEvent;
    }
}

type FlowFocusEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-focus': FlowFocusEvent;
    }
}

type FlowHideEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-hide': FlowHideEvent;
    }
}

type FlowHoverEvent = CustomEvent<{
    phase: 'start' | 'move' | 'end';
    value: number;
}>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-hover': FlowHoverEvent;
    }
}

type FlowInitialFocusEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-initial-focus': FlowInitialFocusEvent;
    }
}

type FlowInputEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-input': FlowInputEvent;
    }
}

type FlowInvalidEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-invalid': FlowInvalidEvent;
    }
}

type FlowLazyChangeEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-lazy-change': FlowLazyChangeEvent;
    }
}

type FlowLazyLoadEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-lazy-load': FlowLazyLoadEvent;
    }
}

type FlowLoadEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-load': FlowLoadEvent;
    }
}

type FlowMapLoadEvent = CustomEvent<{
    map: FlowCoreMap;
}>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-map-load': FlowMapLoadEvent;
    }
}

type FlowMutationEvent = CustomEvent<{
    mutationList: MutationRecord[];
}>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-mutation': FlowMutationEvent;
    }
}

type FlowPanelToggleEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-panel-toggle': FlowPanelToggleEvent;
    }
}

type FlowRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-remove': FlowRemoveEvent;
    }
}

type FlowRepositionEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-reposition': FlowRepositionEvent;
    }
}

type FlowRequestCloseEvent = CustomEvent<{
    source: 'close-button' | 'keyboard' | 'overlay';
}>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-request-close': FlowRequestCloseEvent;
    }
}

type FlowResizeEvent = CustomEvent<{
    entries: ResizeObserverEntry[];
}>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-resize': FlowResizeEvent;
    }
}

type EventTypeRequiresDetail<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? never : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail'] ? never : T : never : never;
type EventTypeDoesNotRequireDetail<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? T : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail'] ? T : never : T : T;
type EventTypesWithRequiredDetail = {
    [EventType in keyof GlobalEventHandlersEventMap as EventTypeRequiresDetail<EventType>]: true;
};
type EventTypesWithoutRequiredDetail = {
    [EventType in keyof GlobalEventHandlersEventMap as EventTypeDoesNotRequireDetail<EventType>]: true;
};
type WithRequired<T, K extends keyof T> = T & {
    [P in K]-?: T[P];
};
type SlEventInit<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']> : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail'] ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']> : WithRequired<CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>, 'detail'> : CustomEventInit : CustomEventInit;
type GetCustomEventType<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<unknown> ? GlobalEventHandlersEventMap[T] : CustomEvent<unknown> : CustomEvent<unknown>;
declare class FlowRdfElement extends LitElement {
    dir: string;
    lang: string;
    /** Emits a custom event with more convenient defaults. */
    emit<T extends string & keyof EventTypesWithoutRequiredDetail>(name: EventTypeDoesNotRequireDetail<T>, options?: SlEventInit<T> | undefined): GetCustomEventType<T>;
    emit<T extends string & keyof EventTypesWithRequiredDetail>(name: EventTypeRequiresDetail<T>, options: SlEventInit<T>): GetCustomEventType<T>;
    static define(name: string, elementConstructor?: typeof FlowRdfElement, options?: ElementDefinitionOptions): void;
}
declare abstract class FlowRdfFormControl extends FlowRdfElement {
    static FLOW_UI_FORM_CONTROL_CLASS: string;
    class: string;
    /** The controls's size. */
    size: string;
    /** Indicates that the control should display a divider */
    divider: boolean;
    handleClassChange(): void;
    connectedCallback(): void;
    name: string;
    value: unknown;
    disabled?: boolean;
    defaultValue?: unknown;
    defaultChecked?: boolean;
    form?: string;
    pattern?: string;
    min?: number | string | Date;
    max?: number | string | Date;
    step?: number | 'any';
    required?: boolean;
    minlength?: number;
    maxlength?: number;
    abstract get validity(): ValidityState;
    abstract get validationMessage(): string;
    abstract checkValidity(): boolean;
    abstract getForm(): HTMLFormElement | null;
    abstract reportValidity(): boolean;
    abstract setCustomValidity(message: string): void;
    renderDivider(): lit_html.TemplateResult<1>;
}

/**
 *
 *
 * @tagname flow-ui-icon
 * @summary Icons are symbols that can be used to represent various options within an application.
 * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/icon
 * @status stable
 * @since 2.0
 *
 * @event flow-ui-load - Emitted when the icon has loaded.
 * @event flow-ui-error - Emitted when the icon fails to load due to an error.
 *
 * @csspart svg - The internal SVG element.
 */
declare class FlowUiIcon extends FlowRdfElement {
    static styles: CSSResultGroup;
    /** Given a URL, this function returns the resulting SVG element or an appropriate error symbol. */
    private static resolveIcon;
    private svg;
    /** The name of the icon to draw. Available names depend on the icon library being used. */
    name?: string;
    /**
     * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
     * can result in XSS attacks.
     */
    src?: string;
    /**
     * An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and
     * ignored by assistive devices.
     */
    label: string;
    /** The name of a registered custom icon library. */
    library: string;
    connectedCallback(): void;
    firstUpdated(): void;
    disconnectedCallback(): void;
    private getUrl;
    /**
     * @internal
     */
    handleLabelChange(): void;
    /**
     * @internal
     */
    setIcon(): Promise<void>;
    render(): SVGElement | null;
}

/**
 * @tagname flow-ui-menu-item
 * @summary Menu items provide options for the user to pick from in a menu.
 *
 * @dependency flow-ui-icon
 *
 * @slot - The menu item's label.
 * @slot prefix - Used to prepend an icon or similar element to the menu item.
 * @slot suffix - Used to append an icon or similar element to the menu item.
 *
 * @csspart base - The component's base wrapper.
 * @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.
 * @csspart prefix - The prefix container.
 * @csspart label - The menu item label.
 * @csspart suffix - The suffix container.
 * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
 */
declare class FlowUiMenuItem extends FlowRdfElement {
    static styles: CSSResultGroup;
    private cachedTextLabel;
    /** @internal */
    defaultSlot: HTMLSlotElement;
    /** @internal */
    menuItem: HTMLElement;
    /** The type of menu item to render. To use `checked`, this value must be set to `checkbox` or `radio`. */
    type: 'normal' | 'checkbox' | 'radio';
    /** Draws the item in a checked state. */
    checked: boolean;
    /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
    value: string;
    /** Draws the menu item in a disabled state, preventing selection. */
    disabled: boolean;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private handleDefaultSlotChange;
    private handleHostClick;
    /** @internal */
    handleCheckedChange(): void;
    /** @internal */
    handleDisabledChange(): void;
    /** @internal */
    handleTypeChange(): void;
    /** @internal Returns a text label based on the contents of the menu item's default slot. */
    getTextLabel(): string;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-menu-item': FlowUiMenuItem;
    }
}

type FlowSelectEvent = CustomEvent<{
    item: FlowUiMenuItem;
}>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-select': FlowSelectEvent;
    }
}

type FlowShowEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-show': FlowShowEvent;
    }
}

/**
 * @tagname flow-ui-carousel-item
 * @summary A carousel item represent a slide within a [carousel](./flow-ui-carousel).
 *
 * @since 2.0
 * @status experimental
 *
 * @slot - The carousel item's content..
 *
 * @cssproperty --aspect-ratio - The slide's aspect ratio. Inherited from the carousel by default.
 *
 */
declare class FlowUiCarouselItem extends FlowRdfElement {
    static styles: CSSResultGroup;
    /** @internal */
    static isCarouselItem(node: Node): boolean;
    connectedCallback(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-carousel-item': FlowUiCarouselItem;
    }
}

type FlowSlideChange = CustomEvent<{
    index: number;
    slide: FlowUiCarouselItem;
}>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-slide-change': FlowSlideChange;
    }
}

type FlowStartEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-start': FlowStartEvent;
    }
}

type FlowTabHideEvent = CustomEvent<{
    name: string;
}>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-tab-hide': FlowTabHideEvent;
    }
}

type FlowTabShowEvent = CustomEvent<{
    name: string;
}>;
declare global {
    interface GlobalEventHandlersEventMap {
        'flow-ui-tab-show': FlowTabShowEvent;
    }
}

declare module '@shoelace-style/animations' {
  export type Animation = Keyframe[];
  export const animations: Animation[];
  export const easings: { [key: string]: string };
  export const bounce: Animation;
  export const flash: Animation;
  export const headShake: Animation;
  export const heartBeat: Animation;
  export const jello: Animation;
  export const pulse: Animation;
  export const rubberBand: Animation;
  export const shake: Animation;
  export const shakeX: Animation;
  export const shakeY: Animation;
  export const swing: Animation;
  export const tada: Animation;
  export const wobble: Animation;
  export const backInDown: Animation;
  export const backInLeft: Animation;
  export const backInRight: Animation;
  export const backInUp: Animation;
  export const backOutDown: Animation;
  export const backOutLeft: Animation;
  export const backOutRight: Animation;
  export const backOutUp: Animation;
  export const bounceIn: Animation;
  export const bounceInDown: Animation;
  export const bounceInLeft: Animation;
  export const bounceInRight: Animation;
  export const bounceInUp: Animation;
  export const bounceOut: Animation;
  export const bounceOutDown: Animation;
  export const bounceOutLeft: Animation;
  export const bounceOutRight: Animation;
  export const bounceOutUp: Animation;
  export const fadeIn: Animation;
  export const fadeInBottomLeft: Animation;
  export const fadeInBottomRight: Animation;
  export const fadeInDown: Animation;
  export const fadeInDownBig: Animation;
  export const fadeInLeft: Animation;
  export const fadeInLeftBig: Animation;
  export const fadeInRight: Animation;
  export const fadeInRightBig: Animation;
  export const fadeInTopLeft: Animation;
  export const fadeInTopRight: Animation;
  export const fadeInUp: Animation;
  export const fadeInUpBig: Animation;
  export const fadeOut: Animation;
  export const fadeOutBottomLeft: Animation;
  export const fadeOutBottomRight: Animation;
  export const fadeOutDown: Animation;
  export const fadeOutDownBig: Animation;
  export const fadeOutLeft: Animation;
  export const fadeOutLeftBig: Animation;
  export const fadeOutRight: Animation;
  export const fadeOutRightBig: Animation;
  export const fadeOutTopLeft: Animation;
  export const fadeOutTopRight: Animation;
  export const fadeOutUp: Animation;
  export const fadeOutUpBig: Animation;
  export const flip: Animation;
  export const flipInX: Animation;
  export const flipInY: Animation;
  export const flipOutX: Animation;
  export const flipOutY: Animation;
  export const lightSpeedInLeft: Animation;
  export const lightSpeedInRight: Animation;
  export const lightSpeedOutLeft: Animation;
  export const lightSpeedOutRight: Animation;
  export const rotateIn: Animation;
  export const rotateInDownLeft: Animation;
  export const rotateInDownRight: Animation;
  export const rotateInUpLeft: Animation;
  export const rotateInUpRight: Animation;
  export const rotateOut: Animation;
  export const rotateOutDownLeft: Animation;
  export const rotateOutDownRight: Animation;
  export const rotateOutUpLeft: Animation;
  export const rotateOutUpRight: Animation;
  export const slideInDown: Animation;
  export const slideInLeft: Animation;
  export const slideInRight: Animation;
  export const slideInUp: Animation;
  export const slideOutDown: Animation;
  export const slideOutLeft: Animation;
  export const slideOutRight: Animation;
  export const slideOutUp: Animation;
  export const hinge: Animation;
  export const jackInTheBox: Animation;
  export const rollIn: Animation;
  export const rollOut: Animation;
  export const zoomIn: Animation;
  export const zoomInDown: Animation;
  export const zoomInLeft: Animation;
  export const zoomInRight: Animation;
  export const zoomInUp: Animation;
  export const zoomOut: Animation;
  export const zoomOutDown: Animation;
  export const zoomOutLeft: Animation;
  export const zoomOutRight: Animation;
  export const zoomOutUp: Animation;
}

/**
 * Returns a list of all supported animation names.
 *
 * Supply the required animation as the `name` property of the
 * `<flow-ui-animation>` component.
 */
declare function getAnimationNames(): string[];
/**
 * Returns a list of all supported easing method names.
 *
 * Supply the required easing method as the `easing` property of the
 * `<flow-ui-animation>` component.
 */
declare function getEasingNames(): string[];

/**
 * @internal
 *
 * Registers standard Chart.js components and plugins,
 * and sets default options.
 */
declare function initializeChartJs(): void;
declare function registerChartComponent(...components: ChartComponentLike[]): void;

interface BaseColorStopOptions {
    type: string;
    label?: string;
}
interface StringColorStopOptions {
    type: 'string';
}
interface NumberColorStopOptions {
    type: 'number';
    min?: number;
    max?: number;
    step?: number;
    units?: string;
}
interface SelectColorStopOptions {
    type: 'select';
    options: Array<string | {
        value: string;
        name?: string;
    }>;
}
type ColorStopOptions = StringColorStopOptions | NumberColorStopOptions | SelectColorStopOptions;
interface ColorStopValue {
    value: string | number;
    color: string;
    options?: {
        regex: boolean;
        caseSensitive: boolean;
    };
}
interface BaseColorMapperField {
    name?: string;
    field: string;
}
interface StringColorMapperField extends StringColorStopOptions, BaseColorMapperField {
    type: 'string';
}
interface NumberColorMapperField extends NumberColorStopOptions, BaseColorMapperField {
    type: 'number';
}
interface SelectColorMapperField extends SelectColorStopOptions, BaseColorMapperField {
    type: 'select';
}
type ColorMapperField = StringColorMapperField | NumberColorMapperField | SelectColorMapperField;
interface ColorMapperOptions {
    fields: Record<string, ColorMapperField>;
}
interface ColorMapperValue {
    mode: 'fixed' | 'data-driven';
    field: string | undefined;
    type?: 'string' | 'number' | 'select';
    defaultColor?: string;
    colorStops: ColorStopValue[];
}

declare function colorMapperValueToMaplibreExpression(value: ColorMapperValue): string;
declare function escapeMaplibreString(value: string): string;

/**
 *
 * The following code shows how to import FontAwesome SVG icons from the `flow-rdf-ui/icons` package and add them to the
 * default icon library.
 * ```js
 * // Import and register icons
 * import {fasHouse, fasGear, fasUser} from '@emuanalytics/flow-rdf-ui/icons';
 * import {addIcons} from '@emuanalytics/flow-rdf-ui';
 * addIcons({fasHouse, fasGear, fasUser});
 * ```
 *
 * Icons are registered under their camelCase name **and** kebab-case name.
 * Once registered, they can be used in the following way:
 *
 * ```html
 * <flow-ui-icon name="fas-house"></flow-ui-icon>
 * ```
 *
 * Note that missing or mis-spelled icons will be displayed as <flow-ui-icon name="unknown"></flow-ui-icon>.
 *
 * For a list of available icons, see the [FontAwesome icon gallery](https://fontawesome.com/search?o=r&m=free).
 */
declare const addIcons: (icons: {
    [name: string]: string;
}) => void;

type IconLibraryResolver = (name: string) => string;
type IconLibraryMutator = (svg: SVGElement) => void;
/**
 *
 * Use this function to add a custom icon library to the registry or override an existing one.
 * Provide a resolver function that returns the URL of the icon based on its name.
 * Optionally, provide a mutator function that modifies the SVG element of the icon.
 *
 * Two icon libraries are included by default:
 * - `system` (System icons used by `flow-rdf-ui` components)
 * - `default` (FontAwesome 6.4.2)
 *
 * To use a custom icon library, set the `library` property of the `<flow-ui-icon>` component
 * to the registered name of the library. If omitted, the `default` library is used.
 *
 * ```typescript
 * // Register FontAwesome icon library using SVGs from Flo.w CDN
 * registerIconLibrary('fa', {
 *   resolver: (name) => {
 *     const filename = name.replace(/^fa[rbs]-/, '');
 *     let folder = 'regular';
 *     if (name.substring(0, 4) === 'fas-') folder = 'solid';
 *     if (name.substring(0, 4) === 'fab-') folder = 'brands';
 *     return `https://flow-cdn.emu-analytics.net/icons/fontawesome-6.4.2/${folder}/${filename}.svg`;
 *   },
 *   mutator: (svg) => svg.setAttribute('fill', 'currentColor')
 * });
 * ```
 *
 * ```html
 * <flow-ui-icon library="fa" name="fas-house"></flow-ui-icon>
 * ```
 *
 * @param name The name of the custom icon library.
 * @param options The icon library resolver and optional mutator.
 * @param options.resolver A function that returns the URL of given icon.
 * @param options.mutator An optional function that mutates the SVG element of the icon.
 */
declare function registerIconLibrary(name: string, options: {
    resolver: IconLibraryResolver;
    mutator?: IconLibraryMutator;
}): void;
/**
 * Removes a custom icon library from the registry.
 */
declare function unregisterIconLibrary(name: string): void;

/**
 * Set the default locale used by date/time-sensitive components including
 * `<flow-ui-calendar>`, `<flow-ui-date-time-picker>` and `<flow-ui-timer>`.
 *
 * The default locale is can be overridden by setting the `locale` attribute
 * of date/time-sensitive components.
 *
 * @param locale Locale code (e.g. `'en'`, `'en-US'`, `'es-ES'`)
 */
declare function setDefaultLocale(locale: string): void;
/**
 * Set the default timezone used by date/time-sensitive components including
 * `<flow-ui-calendar>`, `<flow-ui-date-time-picker>` and `<flow-ui-timer>`.
 *
 * The default timezone is can be overridden by setting the `timezone` attribute
 * of date/time-sensitive components.
 *
 * @param timezone Timezone (e.g. `'Europe/London'`, `'America/New_York'`)
 */
declare function setDefaultTimeZone(timezone: string): void;

type FunctionParams<T> = T extends (...args: infer U) => string ? U : [];
interface Translation$1 {
    $code: string;
    $name: string;
    $dir: 'ltr' | 'rtl';
}
interface DefaultTranslation extends Translation$1 {
    $code: string;
    $name: string;
    $dir: 'ltr' | 'rtl';
    [key: string]: any;
}
interface ExistsOptions {
    lang: string;
    includeFallback: boolean;
}
/** Registers one or more translations */
declare function registerTranslation(...translation: Translation$1[]): void;
/** @internal */
declare class LocalizeController$1<UserTranslation extends Translation$1 = DefaultTranslation> implements ReactiveController {
    host: ReactiveControllerHost & HTMLElement;
    constructor(host: ReactiveControllerHost & HTMLElement);
    hostConnected(): void;
    hostDisconnected(): void;
    /**
     * Gets the host element's directionality as determined by the `dir` attribute. The return value is transformed to
     * lowercase.
     */
    dir(): string;
    /**
     * Gets the host element's language as determined by the `lang` attribute. The return value is transformed to
     * lowercase.
     */
    lang(): string;
    private getTranslationData;
    /** Determines if the specified term exists, optionally checking the fallback translation. */
    exists<K extends keyof UserTranslation>(key: K, options: Partial<ExistsOptions>): boolean;
    /** Outputs a translated term. */
    term<K extends keyof UserTranslation>(key: K, ...args: FunctionParams<UserTranslation[K]>): string;
    /** Outputs a localized date in the specified format. */
    date(dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions): string;
    /** Outputs a localized number in the specified format. */
    number(numberToFormat: number | string, options?: Intl.NumberFormatOptions): string;
    /** Outputs a localized time in relative format. */
    relativeTime(value: number, unit: Intl.RelativeTimeFormatUnit, options?: Intl.RelativeTimeFormatOptions): string;
}

/** @internal */
declare class LocalizeController extends LocalizeController$1<Translation> {
}

interface Translation extends Translation$1 {
    $code: string;
    $name: string;
    $dir: 'ltr' | 'rtl';
    carousel: string;
    clearEntry: string;
    close: string;
    copy: string;
    currentValue: string;
    goToSlide: (slide: number, count: number) => string;
    hidePassword: string;
    loading: string;
    nextSlide: string;
    numOptionsSelected: (num: number) => string;
    previousSlide: string;
    progress: string;
    remove: string;
    resize: string;
    scrollToEnd: string;
    scrollToStart: string;
    selectAColorFromTheScreen: string;
    showPassword: string;
    slideNum: (slide: number) => string;
    toggleColorFormat: string;
}

interface VirtualElement {
    getBoundingClientRect: () => DOMRect;
    contextElement?: Element;
}
/**
 * @tagname flow-ui-popup
 * @summary Popup is a utility that lets you declaratively anchor "popup" containers to another element.

 * @event flow-ui-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive
 *  operations in your listener or consider debouncing it.
 *
 * @slot - The popup's content.
 * @slot anchor - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the
 *  `anchor` attribute or property instead.
 *
 * @csspart arrow - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are
 *  assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and
 *  maybe a border or box shadow.
 * @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.
 * @csspart hover-bridge - The hover bridge element. Only available when the `hover-bridge` option is enabled.
 *
 * @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`
 *  attribute is used.
 * @cssproperty [--arrow-color] - The color of the arrow.
 * @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the
 *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
 *  available when using `auto-size`.
 * @cssproperty [--auto-size-available-height] - A read-only custom property that determines the amount of height the
 *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
 *  available when using `auto-size`.
 */
declare class FlowUiPopup extends FlowRdfElement {
    static styles: CSSResultGroup;
    private anchorEl;
    private cleanup;
    /** @internal A reference to the internal popup container. Useful for animating and styling the popup with JavaScript. */
    popup: HTMLElement;
    private arrowEl;
    /**
     * The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor
     * element `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the
     * `anchor` slot instead.
     */
    anchor: Element | string | VirtualElement;
    /**
     * Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn
     * down and the popup will be hidden.
     */
    active: boolean;
    /**
     * The preferred placement of the popup. Note that the actual placement will vary as configured to keep the
     * panel inside of the viewport.
     */
    placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
    /**
     * Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is
     * clipped, using a `fixed` position strategy can often workaround it.
     */
    strategy: 'absolute' | 'fixed';
    /** The distance in pixels from which to offset the panel away from its anchor. */
    distance: number;
    /** The distance in pixels from which to offset the panel along its anchor. */
    skidding: number;
    /**
     * Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and
     * `--arrow-color` custom properties. For additional customizations, you can also target the arrow using
     * `::part(arrow)` in your stylesheet.
     */
    arrow: boolean;
    /**
     * The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the
     * anchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will
     * align the arrow to the start, end, or center of the popover instead.
     */
    arrowPlacement: 'start' | 'end' | 'center' | 'anchor';
    /**
     * The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,
     * this will prevent it from overflowing the corners.
     */
    arrowPadding: number;
    /**
     * When set, placement of the popup will flip to the opposite site to keep it in view. You can use
     * `flipFallbackPlacements` to further configure how the fallback placement is determined.
     */
    flip: boolean;
    /**
     * If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a
     * string of any number of placements separated by a space, e.g. "top bottom left". If no placement fits, the flip
     * fallback strategy will be used instead.
     * */
    flipFallbackPlacements: string;
    /**
     * When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether
     * the popup should be positioned using the best available fit based on available space or as it was initially
     * preferred.
     */
    flipFallbackStrategy: 'best-fit' | 'initial';
    /**
     * The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By
     * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can
     * change the boundary by passing a reference to one or more elements to this property.
     */
    flipBoundary: Element | Element[];
    /** The amount of padding, in pixels, to exceed before the flip behavior will occur. */
    flipPadding: number;
    /** Moves the popup along the axis to keep it in view when clipped. */
    shift: boolean;
    /**
     * The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By
     * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can
     * change the boundary by passing a reference to one or more elements to this property.
     */
    shiftBoundary: Element | Element[];
    /** The amount of padding, in pixels, to exceed before the shift behavior will occur. */
    shiftPadding: number;
    /** When set, this will cause the popup to automatically resize itself to prevent it from overflowing. */
    autoSize: 'horizontal' | 'vertical' | 'both';
    /** Syncs the popup's width or height to that of the anchor element. */
    sync: 'width' | 'height' | 'both';
    /**
     * The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By
     * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can
     * change the boundary by passing a reference to one or more elements to this property.
     */
    autoSizeBoundary: Element | Element[];
    /** The amount of padding, in pixels, to exceed before the auto-size behavior will occur. */
    autoSizePadding: number;
    /**
     * When a gap exists between the anchor and the popup element, this option will add a "hover bridge" that fills the
     * gap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane
     * because the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is
     * active.
     */
    hoverBridge: boolean;
    connectedCallback(): Promise<void>;
    disconnectedCallback(): void;
    /** @internal */
    updated(changedProps: Map<string, unknown>): Promise<void>;
    private handleAnchorChange;
    private start;
    private stop;
    /** Forces the popup to recalculate and reposition itself. */
    reposition(): void;
    private updateHoverBridge;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-popup': FlowUiPopup;
    }
}

/**
 * @tagname flow-ui-tooltip
 * @summary Tooltips display additional information based on a specific action.
 *
 * @dependency flow-ui-popup
 *
 * @slot - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.
 * @slot content - The content to render in the tooltip. Alternatively, you can use the `content` attribute.
 *
 * @event flow-ui-show - Emitted when the tooltip begins to show.
 * @event flow-ui-after-show - Emitted after the tooltip has shown and all animations are complete.
 * @event flow-ui-hide - Emitted when the tooltip begins to hide.
 * @event flow-ui-after-hide - Emitted after the tooltip has hidden and all animations are complete.
 *
 * @csspart base - The component's base wrapper, an `<flow-ui-popup>` element.
 * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
 * @csspart base__arrow - The popup's exported `arrow` part. Use this to target the tooltip's arrow.
 * @csspart body - The tooltip's body where its content is rendered.
 *
 * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
 * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.
 * @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.
 *
 * @animation tooltip.show - The animation to use when showing the tooltip.
 * @animation tooltip.hide - The animation to use when hiding the tooltip.
 */
declare class FlowUiTooltip extends FlowRdfElement {
    static styles: CSSResultGroup;
    private hoverTimeout;
    private readonly localize;
    /** @internal */
    defaultSlot: HTMLSlotElement;
    /** @internal */
    body: HTMLElement;
    /** @internal */
    popup: FlowUiPopup;
    /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
    content: string;
    /**
     * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
     * inside of the viewport.
     */
    placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
    /** Disables the tooltip so it won't show when triggered. */
    disabled: boolean;
    /** The distance in pixels from which to offset the tooltip away from its target. */
    distance: number;
    /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
    open: boolean;
    /** The distance in pixels from which to offset the tooltip along its target. */
    skidding: number;
    /**
     * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
     * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
     * programmatically.
     */
    trigger: string;
    /**
     * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
     * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
     * scenarios.
     */
    hoist: boolean;
    connectedCallback(): void;
    firstUpdated(): void;
    disconnectedCallback(): void;
    private handleBlur;
    private handleClick;
    private handleFocus;
    private handleKeyDown;
    private handleMouseOver;
    private handleMouseOut;
    private hasTrigger;
    /** @internal */
    handleOpenChange(): Promise<void>;
    /** @internal */
    handleOptionsChange(): Promise<void>;
    /** @internal */
    handleDisabledChange(): void;
    /** Shows the tooltip. */
    show(): Promise<void>;
    /** Hides the tooltip */
    hide(): Promise<void>;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-tooltip': FlowUiTooltip;
    }
}

/**
 * @tagname flow-ui-icon-button
 * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
 * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/icon-button
 * @status stable
 * @since 2.0
 *
 * @dependency flow-ui-icon
 * @dependency flow-ui-tooltip
 *
 * @event flow-ui-blur - Emitted when the icon button loses focus.
 * @event flow-ui-focus - Emitted when the icon button gains focus.
 *
 * @slot tooltip - The tooltip content to display when the user hovers over the icon button. Alternatively, you can use the `tooltip` attribute.
 *
 * @csspart base - The component's base wrapper.
 */
declare class FlowUiIconButton extends FlowRdfElement {
    static styles: CSSResultGroup;
    private readonly hasSlotController;
    private tooltipAnimating;
    /** @internal */
    button: HTMLButtonElement | HTMLLinkElement;
    /** @internal */
    tooltipElem: FlowUiTooltip;
    /** @internal */
    confirmButton: HTMLButtonElement;
    private hasFocus;
    /** The name of the icon to draw. Available names depend on the icon library being used. */
    name?: string;
    /** The name of a registered custom icon library. */
    library?: string;
    /**
     * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
     * can result in XSS attacks.
     */
    src?: string;
    /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
    href?: string;
    /** Tells the browser where to open the link. Only used when `href` is set. */
    target?: '_blank' | '_parent' | '_self' | '_top';
    /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */
    download?: string;
    /**
     * A description that gets read by assistive devices. For optimal accessibility, you should always include a label
     * that describes what the icon button does.
     */
    label: string;
    /**
     * Tooltip text that gets displayed when the user hovers over the icon button. If you need to display HTML, use the
     * `tooltip` slot instead.
     */
    tooltip: string;
    /**
     * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
     * inside of the viewport.
     */
    tooltipPlacement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
    /** The distance in pixels from which to offset the tooltip away from the icon button. */
    tooltipDistance: number;
    /** The distance in pixels from which to offset the tooltip along the icon button. */
    tooltipSkidding: number;
    /** Disables the button. */
    disabled: boolean;
    /**
     * Confirmation text that gets displayed in a tooltip when the user clicks the icon button.
     *  If you need to display HTML, use the `confirm` slot instead.
     */
    confirm: string;
    connectedCallback(): void;
    private handleBlur;
    private handleFocus;
    protected handleClick(event: MouseEvent): void;
    /** Simulates a click on the icon button. */
    click(): void;
    /** Sets focus on the icon button. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the icon button. */
    blur(): void;
    /** Hide the confirmation tooltip if it is showing */
    hideConfirm(): void;
    /** Show the confirmation tooltip */
    showConfirm(): void;
    private handleConfirmClick;
    private renderWithTooltip;
    private renderWithConfirmation;
    render(): TemplateResult;
}

type NoUnion<T, U = T> = T extends U ? ([U] extends [T] ? T : never) : never;
/**
 * @tagname flow-ui-query-builder
 * @summary Query builder component
 *
 * @dependency flow-ui-input
 * @dependency flow-ui-select
 * @dependency flow-ui-option
 * @dependency flow-ui-checkbox
 * @dependency flow-ui-icon-button
 * @dependency flow-ui-tool-button
 * @dependency flow-ui-date-time-picker
 * @dependency flow-ui-tooltip
 *
 * @event flow-ui-input - Emitted when the control's value changes.
 * @event flow-ui-change - Emitted when the control's value changes.
 * @event flow-ui-select - Emitted when a custom menu item is selected.
 * @event flow-ui-remove - Emitted when the user attempts to remove a rule or ruleset. Calling `event.preventDefault()` will cancel the removal.
 * @event flow-ui-clear - Emitted when the user clears all rules from the tool menu.
 * @event flow-ui-apply - Emitted when the user presses 'Enter' twice in the same value input control.
 *
 * @slot label - The component's label. Alternatively, you can use the `label` attribute.
 * @slot help-text - Text that describes how to use the component. Alternatively, you can use the `help-text` attribute.
 */
declare class FlowUiQueryBuilder extends FlowRdfElement {
    static styles: CSSResultGroup;
    private static fieldDefinitions;
    private _value;
    private enterKeyElement;
    /**
     * Register a custom field definition.
     *
     * A field definition is used to add support for a custom field type. A field type comprises:
     *
     * - a field `type` string
     * - a `template` function that returns the template for the field's value control
     * - an array of `operators` that are valid for the field
     *
     * @param type
     * @param fieldDefinition
     */
    static registerFieldDefinition<T extends FlowQueryBuilderFieldType>(type: T, fieldDefinition: FlowQueryBuilderFieldDefinition<NoUnion<T>>): void;
    private readonly hasSlotController;
    /** @internal - add form control class */
    class: string;
    /** The query builder's value object. */
    value: FlowQueryBuilderRuleSet;
    /** The query builder's configuration object. */
    config: FlowQueryBuilderConfig;
    /** The query builder's size. */
    size: 'small' | 'medium' | 'large';
    /** Disables the select control. */
    disabled: boolean;
    /** The query builders's label. If you need to display HTML, use the `label` slot instead. */
    label: string;
    /** The query builders's help text. If you need to display HTML, use the `help-text` slot instead. */
    helpText: string;
    /** Display tree connector lines between query rules */
    treeLines: boolean;
    /** @internal */
    subQueryBuilder: boolean;
    /** Display control borders */
    borders: boolean;
    connectedCallback(): void;
    /** @internal */
    handleClassChange(): void;
    /** @internal */
    handleValueChange(): void;
    private valueTemplateForRule;
    private getDefault;
    private handleAddRule;
    /**
     * Handles removal of a rule set (displayed by a sub-query builder) in response to a remove event.
     *
     * @param ev
     * @param index
     */
    private handleRemoveRule;
    private handleSubQueryValueChange;
    private handleFieldChanged;
    private handleOperatorChanged;
    private handleConditionChange;
    private handleRuleMenuSelect;
    handleValueKeyDown(ev: KeyboardEvent): void;
    private handleToolbarMenuSelect;
    private emitValueChange;
    private operatorsForField;
    private defaultOperatorsForFieldType;
    private toolbarTemplate;
    private ruleTemplate;
    private ruleValueTemplate;
    private subQueryBuilderTemplate;
    private emptyRulesetTemplate;
    render(): lit_html.TemplateResult<1>;
}

/**
 * An abstract logical expression used to represent a user-defined query or filter.
 *
 * A rule set consists of one or more rules, where each rule is a single logical expression
 * of the form `<field> <operator> <value>` (for example, `name == 'John'`). A rule set combines
 * its rules using a condition, which can be either `and` or `or`. Rule sets can be nested to
 * create complex queries.
 *
 * Rule sets are typically created by the end-user using the [Query Builder](/flow-rdf-ui/web-components/flow-ui-query-builder) UI component.
 */
interface FlowQueryBuilderRuleSet {
    /** The combining condition for rules in this rule set (`and` or `or`). */
    condition: string;
    /** One or more rules or rule sets to combine into a logical expression.*/
    rules: Array<FlowQueryBuilderRuleSet | FlowQueryBuilderRule>;
}
/**
 * A single abstract logical expression. Combined into a {@link FlowQueryBuilderRuleSet} to represent a user-defined query or filter.
 *
 * A rule is a single logical expression of the form `<field> <operator> <value>` (for example, `name == 'John'`).
 *
 * Supported operators are:
 *
 * - `=`: `<field>` exactly equals `<value>`.
 * - `!=`: `<field>` does not equal `<value>`.
 * - `<`: `<field>` less than `<value>`.
 * - `<=`: `<field>` less than or equal to `<value>`.
 * - `>`: `<field>` greater than `<value>`.
 * - `>=`: `<field>` greater than or equal to `<value>`.
 * - `in`: `<field>` in list of values. `<value>` is an array. (select-type fields only)
 * - `!in`: `<field>` not in list of values. `<value>` is an array. (select-type fields only)
 * - `contains`: `<field>` contains substring `<value>`. (string fields only)
 * - `!contains`: `<field>` does not contain substring `<value>`. (string fields only)
 * - `like`: `<field>` matches a wildcard pattern `<value>`. (string fields only)
 * - `!like`: `<field>` does not matched a wildcard pattern `<value>`. (string fields only)
 * - `regex`: `<field>` matches a regular expression pattern `<value>`. (string fields only)
 * - `!regex`: `<field>` does not match a regular expression pattern `<value>`. (string fields only)
 *
 * Wildcard patterns use `*` to match any sequence of characters and `?` to match any single character.
 *
 * Regular expressions use the JavaScript regular expression syntax.
 *
 * The string-matching operators are case-sensitive by default. Specify `caseInsensitive: true` in the {@link FlowQueryBuilderStringField} field definition to use case-insensitive matching.
 *
 */
interface FlowQueryBuilderRule<ValueType = any> {
    /** Field identifier. */
    field?: string;
    /** Rule value. */
    value?: ValueType;
    /** Rule operator. */
    operator?: string;
    /** Set to `false` to disable a rule without removing it from its parent ruleset. */
    enabled?: boolean;
}
/**
 * An individual option for a select-type Query Builder field.
 */
interface FlowQueryBuilderOption {
    /** Display name of the value. */
    name: string;
    /** Option identifier. */
    value: string;
}
/** The set of field definitions comprising a {@link FlowQueryBuilderConfig} definition. */
interface FlowQueryBuilderFieldMap {
    [key: string]: FlowQueryBuilderField;
}
/**
 * Base interface for a Query Builder field definition. The field definition specifies how to display
 * a field in the Query Builder UI and how to convert the user-entered value to a concrete filter expression.
 *
 * The following field types are supported:
 *
 * - `string`: A text field, displayed as an input box. Supports string-matching operators.
 * - `number`: A numeric field, displayed as an numeric input box with stepper controls. Supports numeric comparison operators.
 * - `date`: A date field, displayed as a date picker. Supports numeric comparison operators.
 * - `time`: A time field, displayed as a time picker. Supports numeric comparison operators.
 * - `datetime`: A date-time field, displayed as a date-time picker. Supports numeric comparison operators.
 * - `select`: A select field, displayed as a dropdown list. Supports `in` and `!in` operators.
 *
 * In addition, all field types support equality operators (`=`, `!=`).
 *
 * @typeParam ValueType - The underlying type of the field value.
 */
interface FlowQueryBuilderFieldBase<ValueType = any> {
    /** Display name for the field. */
    name: string;
    /** Field type: `string`, `number`, `datetime`, `date`, `time`, `select`. */
    type: string;
    /** @internal */
    value?: ValueType;
    /** Set to `true` to allow the field to be `null`. */
    nullable?: boolean;
    /** Optionally override supported operators for the field. */
    operators?: string[];
    /** Default value for the field: static value or value-producing function. */
    defaultValue?: ValueType | (() => ValueType);
    /** Default operator for the field. */
    defaultOperator?: string;
    /** Optional function to convert the user-entered value before applying a rule set converter. */
    convertValue?: (value: ValueType) => any;
    /** Optional validator function to validate the user-entered value. */
    validator?: (rule: FlowQueryBuilderRule<ValueType>) => string;
}
/**
 * Field definition for a string-type Query Builder field.
 */
interface FlowQueryBuilderStringField extends FlowQueryBuilderFieldBase<string> {
    type: 'string';
    /** Set to `true` to perform case-insensitive matching for `like` and `regex` operators. */
    caseInsensitive?: boolean;
}
/**
 * Field definition for a number-type Query Builder field.
 */
interface FlowQueryBuilderNumberField extends FlowQueryBuilderFieldBase<number> {
    type: 'number';
    /** Minimum allowed value for the field. */
    min?: number;
    /** Maximum allowed value for the field. */
    max?: number;
    /** Step size used by the field stepper controls. */
    step?: number;
}
/**
 * Base interface for date/time-type Query Builder fields.
 *
 * Note that the underlying value type for date/time fields is an ISO 8601 string.
 */
interface FlowQueryBuilderDateTimeFieldBase extends FlowQueryBuilderFieldBase<string> {
    /** Luxon date format for display of the field value. */
    dateFormat?: string | (() => string);
    /** Time zone specifier for display of the field value. */
    timezone?: string | (() => string);
    /** Locale code for display of the field value. */
    locale?: string | (() => string);
}
/**
 * Field definition for a datetime-type Query Builder field.
 */ interface FlowQueryBuilderDateTimeField extends FlowQueryBuilderDateTimeFieldBase {
    type: 'datetime';
}
/**
 * Field definition for a date-type Query Builder field.
 */
interface FlowQueryBuilderDateField extends FlowQueryBuilderDateTimeFieldBase {
    type: 'date';
}
/**
 * Field definition for a time-type Query Builder field.
 */
interface FlowQueryBuilderTimeField extends FlowQueryBuilderDateTimeFieldBase {
    type: 'time';
}
/**
 * Field definition for a select-type Query Builder field.
 *
 * The underlying value type for select fields is a string (single-select) or an array of strings (multi-select).
 * When the `in` or `!in` operator is selected, the field acts as a multi-select field. For other operators,
 * the field acts as a single-select field.
 *
 */
interface FlowQueryBuilderSelectField extends FlowQueryBuilderFieldBase<string | string[]> {
    type: 'select';
    /** The selectable options for the field. */
    options?: FlowQueryBuilderOption[];
}
/**
 * Map of field type names to field definitions for expansion of type parameters.
 */
interface FlowQueryBuilderFieldTypeMap {
    string: FlowQueryBuilderStringField;
    number: FlowQueryBuilderNumberField;
    datetime: FlowQueryBuilderDateTimeField;
    date: FlowQueryBuilderDateField;
    time: FlowQueryBuilderTimeField;
    select: FlowQueryBuilderSelectField;
}
type FlowQueryBuilderFieldType = keyof FlowQueryBuilderFieldTypeMap;
/**
 * The set of field types supported by the Query Builder. See {@link FlowQueryBuilderFieldBase}.
 */
type FlowQueryBuilderField = FlowQueryBuilderFieldTypeMap[keyof FlowQueryBuilderFieldTypeMap];
type FlowQueryBuilderTemplateFn<FieldType extends FlowQueryBuilderFieldType> = (rule: FlowQueryBuilderRule<FlowQueryBuilderFieldTypeMap[FieldType]['value']>, field: FlowQueryBuilderFieldTypeMap[FieldType], qb: FlowUiQueryBuilder, update: () => void) => TemplateResult;
/**
 * Configuration for a [Query Builder](/flow-rdf-ui/web-components/flow-ui-query-builder) instance.
 *
 * The configuration specifies the set of fields available,
 * how to display those fields in the Query Builder UI, and how to convert the user-defined query to a concrete filter expression.
 */
interface FlowQueryBuilderConfig {
    fields: FlowQueryBuilderFieldMap;
}
interface FlowQueryBuilderFieldDefinition<Field extends FlowQueryBuilderFieldType> {
    operators: string[];
    template: FlowQueryBuilderTemplateFn<Field>;
}
/**
 * Options common to all Query Builder converters. These options are used to modify how a Query Builder
 * ruleset is converted to one of the supported concrete filter implementations:
 *
 * - Flo.w query definition - {@link flowQueryConverter}
 * - JavaScript filter function - {@link javascriptFilterConverter}
 * - Map layer filter - {@link mapLayerFilterConverter}
 */
interface FlowQueryBuilderConverterOptions {
    /** Subset of fields defined in the query ruleset to include in the converted result. */
    includeFields?: string[];
    /** Subset of fields defined in the query ruleset to exclude from the converted result. */
    excludeFields?: string[];
    /** Map of fields to rename in the converted result. */
    renameFields?: Record<string, string>;
    /** Set to `true` to throw an exception on error. By default, the problematic Query Builder field is ignored. */
    throwOnError?: boolean;
}
type FlowQueryBuilderConverter<R = any> = (ruleSet: FlowQueryBuilderRuleSet, config: FlowQueryBuilderConfig, options?: FlowQueryBuilderConverterOptions) => R;

/**
 * Recursively applies filters to the supplied {@link FlowQueryBuilderRuleSet}
 * returning a new rule set.
 *
 * This is used to sanitize user queries before they are executed by removing
 * excluded fields or including only the specified fields.
 *
 * Note that `includeFields` takes precedence over `excludeFields`.
 *
 * ```ts
 * const ruleSet = {
 *   condition: 'and',
 *   rules: [ { field: 'a', ... }, { field: 'b', ... }, { field: 'c', ... } ]
 * };
 *
 * const filteredRuleSet = filterRuleSet(ruleSet, { excludeFields: ['b', 'c'] });
 * ```
 *
 * @param ruleset Rule set to filter
 * @param options Filter rules
 * @param options.excludeFields Fields to exclude from the {@link FlowQueryBuilderRuleSet}
 * @param options.includeFields Fields to include in the {@link FlowQueryBuilderRuleSet}
 */
declare function filterRuleSet(ruleset: FlowQueryBuilderRuleSet, options: {
    excludeFields?: string[];
    includeFields?: string[];
}): FlowQueryBuilderRuleSet;
/**
 * Recursively renames fields in the supplied {@link FlowQueryBuilderRuleSet}
 * returning a new rule set.
 *
 * This can be used to sanitize user queries before they are executed.
 *
 * ```ts
 * const ruleSet = {
 *   condition: 'and',
 *   rules: [ { field: 'a', ... }, { field: 'b', ... }, ... } ]
 * };
 *
 * const renamedRuleSet = renameRuleSetFields(ruleSet, { a: 'renamedA' });
 *
 * // renamedRuleSet = {
 * //   condition: 'and',
 * //   rules: [ { field: 'renamedA', ... }, { field: 'b', ... }, ... } ]
 * // };
 *
 * ```
 *
 * @param ruleset Rule set to rename.
 * @param replacements Set of field name replacements.
 * @returns A new {@link FlowQueryBuilderRuleSet} with renamed fields.
 */
declare function renameRuleSetFields(ruleset: FlowQueryBuilderRuleSet, replacements: Record<string, string>): FlowQueryBuilderRuleSet;
/**
 * Recursively applies a tranform function to the supplied {@link FlowQueryBuilderRuleSet} returning a new rule set.
 *
 * The transform function should expect a single `FlowQueryBuilderRule` and return:
 *
 * - the same rule unmodified or modified in place
 * - `undefined` to exclude the rule from the rule set
 *
 * This can be used to modify and sanitize rule sets before they are used to perform queries.
 *
 * @param ruleSet Query builder rule set to transform.
 * @param transformFn Transform function
 * @returns A new {@link FlowQueryBuilderRuleSet} with transformed rules.
 */
declare function transformRuleSet(ruleSet: FlowQueryBuilderRuleSet, transformFn: (rule: FlowQueryBuilderRule) => FlowQueryBuilderRule | undefined, clone?: boolean): FlowQueryBuilderRuleSet;
/**
 * Recursively count the number of active rules in the supplied {@link FlowQueryBuilderRuleSet}.
 *
 * An 'active' rules is defined as having a valid field and being enabled.
 *
 * @param ruleSet Query builder rule set to count.
 * @returns The number of active rules in the rule set.
 */
declare function countRuleSet(ruleset: FlowQueryBuilderRuleSet): number;
/**
 * Helper function to determine if the supplied argument is a {@link FlowQueryBuilderRule}
 */
declare const isRule: (r: unknown) => r is FlowQueryBuilderRule;
/**
 * Helper function to determine if the supplied argument is a {@link FlowQueryBuilderRuleSet}
 */
declare const isRuleSet: (r: unknown) => r is FlowQueryBuilderRuleSet;
/**
 * Helper function to determine if the supplied argument is a {@link FlowQueryBuilderRule} or {@link FlowQueryBuilderRuleSet}
 */
declare const isRuleOrRuleset: (r: unknown) => r is FlowQueryBuilderRule | FlowQueryBuilderRuleSet;

declare const converter$2: FlowQueryBuilderConverter;

declare class JavaScriptFilterError extends Error {
    constructor(msg: string);
}
/**
 * A JavaScript function that implements the logical expression defined by a user-specified {@link FlowQueryBuilderRuleSet}. The function
 * accepts a data object as an argument and returns a boolean result indicating whether the data object matches the rule set.
 *
 * The filter function is typically created by using the {@link javascriptFilterConverter} converter function, prior to applying
 * the filter to a collection of data objects returned from a dataset query.
 *
 * The filter function has an additional `expression` property that contains the generated JavaScript expression for debugging purposes.
 *
 * @typeParam TData The type of the data object to be filtered.
 */
type JavaScriptFilterFn<TData = object> = ((data: TData) => boolean) & {
    /** The generated filter expression (for debugging purposes). */
    expression: string;
};
/**
 * A Query Builder converter that generates a JavaScript filter function from a user-specified {@link FlowQueryBuilderRuleSet}.
 *
 * The generated filter function accepts a data object as an argument and returns a boolean result indicating whether the data object
 * matches the rule set.
 *
 * This converter is typically used to apply a user-defined filter produced by the [Query Builder](/flow-rdf-ui/web-components/flow-ui-query-builder) component to a collection of data objects returned
 * from a Flo.w reactive query. The filter is applied client-side as an alternative to server-side filtering using the {@link flowQueryConverter} converter.
 *
 * See [Examples](#filtering-reactive-query-results) for example usage.
 *
 *
 * ### The generated filter function
 *
 * The abstract logical expression defined by the Query Builder ruleset is compiled into a safe and efficient JavaScript function that is designed
 * to be passed to the Array.filter method. To view the generated JavaScript expression for debugging purposes, inspect the `expression` property
 * of the returned filter function. Note that the generated expression makes use of two internal helper functions: `get(prop, data)` to retrieve a
 *  sanitized property from the data object, and `regex(regex, value, caseInsensitive)` to compile, cache and evaluate regular expressions.
 *
 * Optionally, specify a type parameter when calling {@link javascriptFilterConverter} to strongly type the `data` parameter of the resulting filter function.
 *
 * @param ruleset Flo.w Query Builder ruleset to convert
 * @param config Flo.w Query Builder field configuration
 * @param options Converter options
 *
 * @typeParam TData The type of the data object to be filtered. Optionally specify to strongly type the returned filter function.
 *
 * @returns A function that accepts a data object and returns a boolean result indicating whether the data object matches the ruleset
 *
 * @example
### Basic usage
```typescript
// Query Builder field configuration
const config = {
  fields: {
    name: {name: 'Area Name', type: 'string', caseInsensitive: true },
    no2: {name: 'NO₂ (ppm)', type: 'number' };
  }
};

// Query Builder ruleset
const ruleset = {
  "condition": "and",
  "rules": [
    {
      "enabled": true,
      "operator": "like",
      "value": "bar*",
      "field": "name"
    },
    {
      "enabled": true,
      "operator": ">",
      "value": 20,
      "field": "no2"
    }
  ]
}

const filterFn = javascriptFilterConverter(ruleset, config);
filterFn.expression; // -> 'return (regex("^bar.*$", get("name", data), true)) && (get("no2", data) > 20);'

const data = [...]; // Array of data objects
const filteredData = data.filter(filterFn);
```

@example
### Filtering reactive query results

The filter is applied to the results of a Flo.w reactive query in a computed property. The computed property will be re-evaluated whenever
the query results or the filter ruleset changes.

The computed property can be bound to a map data source to display the filtered results on a map.

```typescript
// Reactive state store
class AppState extends StateStore {
  ...

  // User-defined Query Builder ruleset bound to Query Builder component
  @observable.ref
  queryBuilderRuleSet: FlowQueryBuilderRuleSet = { condition: 'and', rules: [] };

  // Reactive query
  airQualityQuery = query<FeatureCollection<Geometry>>(() => {

    const queryDefinition: QueryDefinition = {
      datasetId: 'airquality',
      format: 'geojson'
    };

    return queryDefinition;
  });

  // Application of client-side filter to query results
  @computed
  get filteredAirQuality() {
    // Bail out if results not yet retrieved
    if (!this.airQualityQuery.results) {
      return null;
    }

    // Apply javascript filter to features
    const filterFn = javascriptFilterConverter(this.queryBuilderRuleSet, queryBuilderConfig);
    const filteredFeatures = this.airQualityQuery.results.features.filter((f) => filterFn(f.properties));

    // Note: return a new FeatureCollection rather than mutating query results in-place
    return featureCollection(filteredFeatures);
  }
}
```
*/
declare const converter$1: <TData = object>(ruleset: FlowQueryBuilderRuleSet, config: FlowQueryBuilderConfig, options?: FlowQueryBuilderConverterOptions) => JavaScriptFilterFn<TData>;

declare const converter: FlowQueryBuilderConverter<string | undefined>;

/**
 * Call this function to register all Flo.w RDF UI custom elements.
 *
 * Alternatively, you can register each required custom element individually
 * using the `define` method of the custom element class as shown below:
 *
 * ```typescript
 * // Selectively register the `<flow-ui-alert>` custom element
 * import { FlowAlert } from '@emuanalytics/flow-rdf-ui';
 * FlowAlert.define('flow-ui-alert');
 * ```
 *
 * This function is called automatically when using the `flow-rdf-angular`
 * support library.
 *
 * @returns A promise that resolves when all custom elements have been defined.
 */
declare function registerComponents(): Promise<void>;

/**
 * Initializes the the `flow-rdf-ui` library.
 *
 * This function is called automatically when using the `flow-rdf-angular`
 * support library.
 */
declare function initialize(): void;

/**
 * @tagname flow-ui-alert
 * @summary Alerts are used to display important messages inline or as toast notifications.
 *
 * @dependency flow-ui-icon-button
 *
 * @slot - The alert's main content.
 * @slot icon - An icon to show in the alert. Works best with `<flow-ui-icon>`.
 *
 * @event flow-ui-show - Emitted when the alert opens.
 * @event flow-ui-after-show - Emitted after the alert opens and all animations are complete.
 * @event flow-ui-hide - Emitted when the alert closes.
 * @event flow-ui-after-hide - Emitted after the alert closes and all animations are complete.
 *
 * @csspart base - The component's base wrapper.
 * @csspart icon - The container that wraps the optional icon.
 * @csspart message - The container that wraps the alert's main content.
 * @csspart close-button - The close button, an `<flow-ui-icon-button>`.
 * @csspart close-button__base - The close button's exported `base` part.
 *
 * @animation alert.show - The animation to use when showing the alert.
 * @animation alert.hide - The animation to use when hiding the alert.
 */
declare class FlowUiAlert extends FlowRdfElement {
    static styles: CSSResultGroup;
    private autoHideTimeout;
    private readonly hasSlotController;
    private readonly localize;
    private base;
    /**
     * Set to `true` to display the alert. You can also
     * use the `show()` and `hide()` methods.
     */
    open: boolean;
    /** Enables a close button that allows the user to dismiss the alert. */
    closable: boolean;
    /** The alert's theme variant. */
    variant: 'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger';
    /**
     * The length of time (in ms) that the alert will show itself before closing. If the user interacts with
     * the alert before it closes (e.g. by moving the mouse over it), the timer will restart.
     */
    duration: number;
    connectedCallback(): void;
    firstUpdated(): void;
    private restartAutoHide;
    private handleCloseClick;
    private handleMouseMove;
    /** @internal */
    handleOpenChange(): Promise<void>;
    /** @internal */
    handleDurationChange(): void;
    /** Shows the alert. */
    show(): Promise<void>;
    /** Hides the alert */
    hide(): Promise<void>;
    /**
     * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
     * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
     * calling this method again. The returned promise will resolve after the alert is hidden.
     */
    toast(): Promise<void>;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-alert': FlowUiAlert;
    }
}

/**
 * @tagname flow-ui-animation
 * @summary Animate elements declaratively with over 100 animation presets. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
 *
 * @event flow-ui-cancel - Emitted when the animation is canceled.
 * @event flow-ui-finish - Emitted when the animation finishes.
 * @event flow-ui-start - Emitted when the animation starts or restarts.
 *
 * @slot - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To
 *  animate multiple elements, either wrap them in a single container or use multiple `<flow-ui-animation>` elements.
 */
declare class FlowUiAnimation extends FlowRdfElement {
    static styles: CSSResultGroup;
    private animation?;
    private hasStarted;
    private defaultSlot;
    /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop.
     * Use `getAnimationNames()` to retrieve a list of available animations.
     */
    name: string;
    /**
     * Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when
     * the animation finishes or gets canceled.
     */
    play: boolean;
    /** The number of milliseconds to delay the start of the animation. */
    delay: number;
    /**
     * Determines the direction of playback as well as the behavior when reaching the end of an iteration.
     * [Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)
     */
    direction: PlaybackDirection;
    /** The number of milliseconds each iteration of the animation takes to complete. */
    duration: number;
    /**
     * The easing function to use for the animation. This can be a Shoelace easing function or a custom easing function
     * such as `cubic-bezier(0, 1, .76, 1.14)`.
     */
    easing: string;
    /** The number of milliseconds to delay after the active period of an animation sequence. */
    endDelay: number;
    /** Sets how the animation applies styles to its target before and after its execution. */
    fill: FillMode;
    /** The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops. */
    iterations: number;
    /** The offset at which to start the animation, usually between 0 (start) and 1 (end). */
    iterationStart: number;
    /** The keyframes to use for the animation. If this is set, `name` will be ignored. */
    keyframes?: Keyframe[];
    /**
     * Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this
     * to `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This
     * value can be changed without causing the animation to restart.
     */
    playbackRate: number;
    /** Gets and sets the current animation time. */
    get currentTime(): CSSNumberish;
    set currentTime(time: number);
    connectedCallback(): void;
    disconnectedCallback(): void;
    private handleAnimationFinish;
    private handleAnimationCancel;
    private handleSlotChange;
    private createAnimation;
    private destroyAnimation;
    /** @internal */
    handleAnimationChange(): void;
    /** @internal */
    handlePlayChange(): boolean;
    /** @internal */
    handlePlaybackRateChange(): void;
    /** Clears all keyframe effects caused by this animation and aborts its playback. */
    cancel(): void;
    /** Sets the playback time to the end of the animation corresponding to the current playback direction. */
    finish(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-animation': FlowUiAnimation;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-icon': FlowUiIcon;
    }
}

/**
 * @tagname flow-ui-autocomplete
 * @summary The Autocomplete is a Text input enhanced by a panel of suggested options.
 *
 * @dependency flow-ui-popup
 * @dependency flow-ui-icon
 *
 * @slot - The listbox options. Must be `<flow-option>` elements. You can use `<flow-divider>` to group items visually.
 * @slot label - The input's label. Alternatively, you can use the `label` attribute.
 * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
 * @slot suffix - Used to append a presentational icon or similar element to the combobox.
 * @slot clear-icon - An icon to use in lieu of the default clear icon.
 * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
 *
 * @event flow-ui-input - Emitted when the display value changes.
 * @event flow-ui-change - Emitted when the input value changes.
 * @event flow-ui-focus - Emitted when the input is focused.
 * @event flow-ui-blur - Emitted when the input is blurred.
 * @event flow-ui-show - Emitted when the dropdown is shown.
 * @event flow-ui-after-show - Emitted when the dropdown is shown.
 * @event flow-ui-hide - Emitted when the dropdown is hidden.
 * @event flow-ui-after-hide - Emitted when the dropdown is hidden.
 * @event flow-ui-invalid - Emitted when the input is invalid.
 * @event flow-ui-valid - Emitted when the input is valid.
 * @event flow-ui-validate - Emitted when the input is validated.
 * @event flow-ui-validate-complete - Emitted when the input is validated and the validity state is updated.
 * @event flow-ui-validate-error - Emitted when the input is validated and an error occurs.
 * @event flow-ui-validate-success - Emitted when the input is validated and no errors occur.
 *
 * @csspart form-control - The form control that wraps the label, input, and help text.
 * @csspart form-control-label - The label's wrapper.
 * @csspart form-control-input - The select's wrapper.
 * @csspart form-control-help-text - The help text's wrapper.
 * @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
 * @csspart prefix - The container that wraps the prefix slot.
 * @csspart suffix - The container that wraps the suffix slot.
 * @csspart display-input - The element that displays the selected option's label, an `<input>` element.
 * @csspart listbox - The listbox container where options are slotted.
 * @csspart clear-button - The clear button.
 */
declare class FlowUiAutocomplete extends FlowRdfFormControl {
    static styles: CSSResultGroup;
    static dependencies: {
        'flow-ui-popup': typeof FlowUiPopup;
        'flow-ui-icon': typeof FlowUiIcon;
    };
    private readonly hasSlotController;
    private readonly localize;
    /** @internal Last time when the mousedown event was fired */
    private mouseDownAt;
    private debouncedInput;
    private pendingChangeEvent;
    private pendingInputEvent;
    private hasOptions;
    private readonly formControlController;
    /** The autocomplete's size */
    size: 'small' | 'medium' | 'large';
    /** Draws a filled autocomplete input */
    filled: boolean;
    /** Draws a pill-style autocomplete input with rounded edges */
    pill: boolean;
    /** The autocomplete input's label. If you need to display HTML, use the `help-text` slot instead */
    label: string;
    /** The autocomplete input's help text. If you need to display HTML, use the `help-text` slot instead */
    helpText: string;
    /** The autocomplete input's placeholder text */
    placeholder: string;
    /** Disables the autocomplete */
    disabled: boolean;
    /**
     * The "form owner" to associate the button with. If omitted, the closest containing form will be used instead. The
     * value of this attribute must be an id of a form in the same document or shadow root as the button.
     */
    form: string;
    /** Makes the autocomplete a required field */
    required: boolean;
    /** Display the autocomplete in the 'inline' form control style */
    inline: boolean;
    /** Indicates that the control should display a divider */
    divider: boolean;
    /**
     * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
     * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
     */
    hoist: boolean;
    /**
     * The preferred placement of the autocomplete's menu. Note that the actual placement may vary as needed to keep the listbox
     * inside of the viewport.
     */
    placement: 'top' | 'bottom';
    /** Current value of the control, selected from one of the valid options available */
    value: string;
    /**
     * Function for determining the `displayValue` for a given `value`.
     * By default, it will show the `value` itself.
     */
    displayWith: ((value: string) => string) | ((value: string) => Promise<string>);
    /** Debounce delay */
    debounceDelay: number;
    /** Show the option to clear input */
    clearable: boolean;
    /** Clear the value when the autocomplete is focused on */
    clearOnFocus: boolean;
    /** Current value displayed by the control; this can be what the user is typing or the label of the selected option */
    private inputText;
    /** @internal Is the listbox open or not */
    private open;
    private selectedOption;
    private currentOption;
    /** @internal Is the component in focus or not */
    hasFocus: boolean;
    private input;
    private popup;
    connectedCallback(): void;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Gets the validity state object.*/
    get validity(): ValidityState;
    /** Gets the validation message. */
    get validationMessage(): string;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(_: string): void;
    /** @internal Gets an array of all <flow-ui-option> elements */
    private getAllOptions;
    /** @internal Gets the first <flow-ui-option> element */
    private getFirstOption;
    /**
     * @internal
     * Un-highlights currently highlighted option
     * and highlights the given option
     */
    private setCurrentOption;
    /**
     * @internal
     * Unselects currently selected option
     * and selects the given option
     */
    private setSelectedOption;
    /**
     * @internal
     * Sets the value of the control.
     * Should trigger {@link handleValueChange} when value is set.
     * By default, it will emit a `flow-ui-change` event.
     *
     * @param value - The value to set.
     * @param emitChangeEvent - A change event will be emitted if true.
     */
    private setValue;
    /** @internal Updates the debounced input emitter if `{@link debounceDelay} is changed. */
    updateDebounceDelay(): void;
    /** @internal Handle the `flow-ui-input` event from the input box. */
    private handleInput;
    /** @internal Handle the `flow-ui-change` event from the input box */
    private handleInputChange;
    /** @internal Handle `flow-ui-focus` event from the input box. */
    private handleInputFocus;
    /** @internal Handle `flow-ui-focus` event from the input box. */
    private handleInputBlur;
    handleClearClick(event: MouseEvent): void;
    /** @internal Handle the `mousedown` event from the clear button */
    handleClearMouseDown(event: MouseEvent): Promise<void>;
    /** @internal Handle option selection when an option is clicked on */
    private handleListboxClick;
    /** @internal Handle mouse and keyboard events in the document, outside the control. */
    private handleDocumentEvent;
    /** @internal */
    private handleKeyDown;
    /** @internal Add event listeners to the document when the dropdown is opened. */
    private addListenersForDropdown;
    /** @internal Remove event listeners from the document when the dropdown is closed. */
    private removeListenersForDropdown;
    /** @internal Handles changes in the default slot */
    private handleDefaultSlotChange;
    /** @internal Toggles listbox based on focus and options in the default slot. */
    toggleListbox(): void;
    /**
     * @internal
     * Syncs the {@link displayValue} by applying {@link displayWith} based on the current {@link value}.
     */
    private syncDisplayValue;
    /** @internal */
    handleValueChange(oldValue: string, value: string): Promise<void>;
    /** Focuses on the control */
    focus(): void;
    /** Blurs from the control. */
    blur(): void;
    /** Shows the listbox. */
    show(): Promise<void>;
    /** Hides the listbox. */
    hide(): Promise<void>;
    /** Gets the current value of the text input */
    getInputText(): string;
    /** @internal */
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-autocomplete': FlowUiAutocomplete;
    }
}

/**
 * @tagname flow-ui-avatar
 * @summary Avatars are used to represent a person or object.

 * @dependency flow-ui-icon
 *
 * @slot icon - The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.
 *
 * @csspart base - The component's base wrapper.
 * @csspart icon - The container that wraps the avatar's icon.
 * @csspart initials - The container that wraps the avatar's initials.
 * @csspart image - The avatar image. Only shown when the `image` attribute is set.
 *
 * @cssproperty --size - The size of the avatar.
 */
declare class FlowUiAvatar extends FlowRdfElement {
    static styles: CSSResultGroup;
    private hasError;
    /** The image source to use for the avatar. */
    image: string;
    /** A label to use to describe the avatar to assistive devices. */
    label: string;
    /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
    initials: string;
    /** Indicates how the browser should load the image. */
    loading: 'eager' | 'lazy';
    /** The shape of the avatar. */
    shape: 'circle' | 'square' | 'rounded';
    /** @internal */
    handleImageChange(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-avatar': FlowUiAvatar;
    }
}

/**
 * @tagname flow-ui-badge
 * @summary Badges are used to draw attention and display statuses or counts.
 *
 * @slot - The badge's content.
 *
 * @csspart base - The component's base wrapper.
 */
declare class FlowUiBadge extends FlowRdfElement {
    static styles: CSSResultGroup;
    /** The badge's theme variant. */
    variant: 'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger';
    /** The badge size. */
    size: 'small' | 'medium' | 'large';
    /** Draws a pill-style badge with rounded edges. */
    pill: boolean;
    /** Makes the badge pulsate to draw attention. */
    pulse: boolean;
    connectedCallback(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-badge': FlowUiBadge;
    }
}

/**
 * @tagname flow-ui-base-control
 * @summary Inputs collect data from the user.
 * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/input
 * @status stable
 * @since 2.0
 *
 * @dependency flow-ui-icon
 * @dependency flow-ui-icon-button
 *
 * @slot label - The input's label. Alternatively, you can use the `label` attribute.
 * @slot prefix - Used to prepend a presentational icon or similar element to the input.
 * @slot suffix - Used to append a presentational icon or similar element to the input.
 * @slot clear-icon - An icon to use in lieu of the default clear icon.
 * @slot show-password-icon - An icon to use in lieu of the default show password icon.
 * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
 * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
 *
 * @event flow-ui-blur - Emitted when the control loses focus.
 * @event flow-ui-change - Emitted when an alteration to the control's value is committed by the user.
 * @event flow-ui-clear - Emitted when the clear button is activated.
 * @event flow-ui-focus - Emitted when the control gains focus.
 * @event flow-ui-input - Emitted when the control receives input.
 * @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart form-control - The form control that wraps the label, input, and help text.
 * @csspart form-control-label - The label's wrapper.
 * @csspart form-control-input - The input's wrapper.
 * @csspart form-control-help-text - The help text's wrapper.
 * @csspart base - The component's base wrapper.
 * @csspart input - The internal `<input>` control.
 * @csspart prefix - The container that wraps the prefix.
 * @csspart clear-button - The clear button.
 * @csspart password-toggle-button - The password toggle button.
 * @csspart suffix - The container that wraps the suffix.
 */
declare class FlowUiBaseControl extends FlowRdfFormControl {
    static styles: CSSResultGroup;
    private readonly formControlController;
    private readonly hasSlotController;
    /** @internal */
    input: HTMLInputElement;
    private hasFocus;
    /** The input's size. */
    size: 'small' | 'medium' | 'large';
    /** Draws a filled input. */
    filled: boolean;
    /** Draws a pill-style input with rounded edges. */
    pill: boolean;
    /** The input's label. If you need to display HTML, use the `label` slot instead. */
    label: string;
    /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
    helpText: string;
    /** Disables the input. */
    disabled: boolean;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /** Makes the input a required field. */
    required: boolean;
    /**
     * Display the input in the 'inline' form control style.
     */
    inline: boolean;
    /** Indicates that the control should display a divider */
    divider: boolean;
    connectedCallback(): void;
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    firstUpdated(): void;
    private handleBlur;
    private handleFocus;
    /** @internal */
    handleDisabledChange(): void;
    /** Sets focus on the input. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the input. */
    blur(): void;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message: string): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-base-control': FlowUiBaseControl;
    }
}

/**
 * @tagname flow-ui-breadcrumb-item
 * @summary Breadcrumb Items are used inside [breadcrumbs](./flow-ui-breadcrumb) to represent different links.

 * @slot - The breadcrumb item's label.
 * @slot prefix - An optional prefix, usually an icon or icon button.
 * @slot suffix - An optional suffix, usually an icon or icon button.
 * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If
 * you want to change it for all items in the group, set the separator on `<flow-ui-breadcrumb>` instead.
 *
 * @csspart base - The component's base wrapper.
 * @csspart label - The breadcrumb item's label.
 * @csspart prefix - The container that wraps the prefix.
 * @csspart suffix - The container that wraps the suffix.
 * @csspart separator - The container that wraps the separator.
 */
declare class FlowUiBreadcrumbItem extends FlowRdfElement {
    static styles: CSSResultGroup;
    private readonly hasSlotController;
    /**
     * Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered
     * internally. When unset, a button will be rendered instead.
     */
    href?: string;
    /** Tells the browser where to open the link. Only used when `href` is set. */
    target?: '_blank' | '_parent' | '_self' | '_top';
    /** The `rel` attribute to use on the link. Only used when `href` is set. */
    rel: string;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-breadcrumb-item': FlowUiBreadcrumbItem;
    }
}

/**
 * @tagname flow-ui-breadcrumb
 * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
 *
 * @slot - One or more breadcrumb items to display.
 * @slot separator - The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.
 *
 * @dependency flow-ui-icon
 *
 * @csspart base - The component's base wrapper.
 */
declare class FlowUiBreadcrumb extends FlowRdfElement {
    static styles: CSSResultGroup;
    private readonly localize;
    private separatorDir;
    private defaultSlot;
    private separatorSlot;
    /**
     * The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
     * screen readers and other assistive devices to provide more context for users.
     */
    label: string;
    private getSeparator;
    private handleSlotChange;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-breadcrumb': FlowUiBreadcrumb;
    }
}

/**
 * @tagname flow-ui-progress-ring
 * @summary Progress rings are used to show the progress of a determinate operation in a circular fashion.
 *
 * @slot label - A label to show inside the ring.
 *
 * @csspart base - The component's base wrapper.
 * @csspart label - The progress ring label.
 *
 * @cssproperty --size - The diameter of the progress ring (cannot be a percentage).
 * @cssproperty --track-width - The width of the track.
 * @cssproperty --track-color - The color of the track.
 * @cssproperty --indicator-width - The width of the indicator. Defaults to the track width.
 * @cssproperty --indicator-color - The color of the indicator.
 * @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes.
 */
declare class FlowUiProgressRing extends FlowRdfElement {
    static styles: CSSResultGroup;
    private readonly localize;
    /** A custom label for assistive devices. */
    label: string;
    /** The current progress as a percentage, 0 to 100. */
    value: number;
    /** If the progress animation is indeterminate */
    indeterminate: boolean;
    /** The progress ring's theme variant */
    variant: 'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger';
    /** The progress ring's size */
    size: 'small' | 'medium' | 'large';
    connectedCallback(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-progress-ring': FlowUiProgressRing;
    }
}

/**
 * @tagname flow-ui-busy-overlay
 * @summary Busy overlay is used to indicate that a component which displays data is being currently updated.
 *
 * @dependency flow-ui-progress-ring
 *
 * @slot - The component to overlay with when busy.
 * @slot busy-animation - The indeterminate custom loading animation to display when busy.
 *
 * @cssproperty --transition-delay - The delay after which the overlay is shown.
 * @cssproperty --transition-duration - The duration of the overlay's fade-in/out transition.
 * @cssproperty --progress-ring-size - The size of the default progress ring loading animation.
 * @cssproperty --progress-ring-track-width - The width of the default progress ring's track.
 * @cssproperty --progress-ring-track-color - The color of the default progress ring's track.
 * @cssproperty --overlay-background-color - The background color of the overlay.
 */
declare class FlowUiBusyOverlay extends FlowRdfElement {
    static styles: CSSResultGroup;
    busy: boolean;
    /** The default loading animation's theme variant. */
    variant: 'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger';
    /** Size of the loading animation */
    size: 'small' | 'medium' | 'large';
    /** To overlay the parent element */
    overlayParent: boolean;
    connectedCallback(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-busy-overlay': FlowUiBusyOverlay;
    }
}

/**
 * @tagname flow-ui-button-group
 * @summary Button groups can be used to group related buttons into sections.
 *
 * @slot - One or more `<flow-ui-button>` elements to display in the button group.
 *
 * @csspart base - The component's base wrapper.
 */
declare class FlowUiButtonGroup extends FlowRdfElement {
    static styles: CSSResultGroup;
    /** @internal */
    defaultSlot: HTMLSlotElement;
    /** @internal  */
    disableRole: boolean;
    /** Text label for assistive devices. */
    label: string;
    /**
     * Use vertical layout for the button group.
     */
    vertical: boolean;
    connectedCallback(): void;
    /** @internal */
    handleVerticalChange(): Promise<void>;
    private handleFocus;
    private handleBlur;
    private handleMouseOver;
    private handleMouseOut;
    private handleSlotChange;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-button-group': FlowUiButtonGroup;
    }
}

/**
 * @tagname flow-ui-button
 * @summary Buttons represent actions that are available to the user.
 *
 * @dependency flow-ui-icon
 * @dependency flow-ui-progress-ring
 *
 * @event flow-ui-blur - Emitted when the button loses focus.
 * @event flow-ui-focus - Emitted when the button gains focus.
 * @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @slot - The button's label.
 * @slot prefix - A presentational prefix icon or similar element.
 * @slot suffix - A presentational suffix icon or similar element.
 *
 * @csspart base - The component's base wrapper.
 * @csspart prefix - The container that wraps the prefix.
 * @csspart label - The button's label.
 * @csspart suffix - The container that wraps the suffix.
 * @csspart caret - The button's caret icon, an `<flow-ui-icon>` element.
 */
declare class FlowUiButton extends FlowRdfFormControl {
    static styles: CSSResultGroup;
    private readonly formControlController;
    private readonly hasSlotController;
    private readonly localize;
    /** @internal */
    button: HTMLButtonElement | HTMLLinkElement;
    private hasFocus;
    label: string;
    /** The button's theme variant. */
    variant: 'default' | 'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text';
    /** The button's size. */
    size: 'small' | 'medium' | 'large';
    /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */
    caret: boolean;
    /** Disables the button. */
    disabled: boolean;
    /** Draws the button in a loading state. */
    loading: boolean;
    /** Draws an outlined button. */
    outline: boolean;
    /** Draws a pill-style button with rounded edges. */
    pill: boolean;
    /**
     * Draws a circular FAB. When this attribute is present, the button expects a single `<flow-ui-icon>` in the
     * default slot.
     */
    fabCircle: boolean;
    /**
     * Draws a square FAB. When this attribute is present, the button expects a single `<flow-ui-icon>` in the
     * default slot.
     */
    fabSquare: boolean;
    /**
     * The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native
     * `<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.
     */
    type: 'button' | 'submit' | 'reset';
    /**
     * The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.
     * This attribute is ignored when `href` is present.
     */
    name: string;
    /**
     * The value of the button, submitted as a pair with the button's name as part of the form data, but only when this
     * button is the submitter. This attribute is ignored when `href` is present.
     */
    value: string;
    /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
    href: string;
    /** Tells the browser where to open the link. Only used when `href` is present. */
    target: '_blank' | '_parent' | '_self' | '_top';
    /**
     * When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the
     * default is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a
     * specific tab/window, this will prevent that from working correctly. You can remove or change the default value by
     * setting the attribute to an empty string or a value of your choice, respectively.
     */
    rel: string;
    /** Tells the browser to download the linked file as this filename. Only used when `href` is present. */
    download?: string;
    /**
     * The "form owner" to associate the button with. If omitted, the closest containing form will be used instead. The
     * value of this attribute must be an id of a form in the same document or shadow root as the button.
     */
    form: string;
    /** Used to override the form owner's `action` attribute. */
    formAction: string;
    /** Used to override the form owner's `enctype` attribute.  */
    formEnctype: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
    /** Used to override the form owner's `method` attribute.  */
    formMethod: 'post' | 'get';
    /** Used to override the form owner's `novalidate` attribute. */
    formNoValidate: boolean;
    /** Used to override the form owner's `target` attribute. */
    formTarget: '_self' | '_blank' | '_parent' | '_top' | string;
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    connectedCallback(): void;
    disconnectedCallback(): void;
    firstUpdated(): void;
    private handleBlur;
    private handleFocus;
    private handleClick;
    private handleHostClick;
    private handleInvalid;
    private isButton;
    private isLink;
    /** @internal */
    handleDisabledChange(): void;
    /** Simulates a click on the button. */
    click(): void;
    /** Sets focus on the button. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the button. */
    blur(): void;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message: string): void;
    render(): lit_html.TemplateResult;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-button': FlowUiButton;
    }
}

/**
 * @tagname flow-ui-calendar
 * @summary A calendar component for selecting dates and times.
 *
 * @dependency flow-ui-icon-button
 * @dependency flow-ui-input
 * @dependency flow-ui-select
 * @dependency flow-ui-option
 *
 * @event flow-ui-input - Emitted when the calendar value changes.
 * @event flow-ui-change - Emitted when the calendar value changes.
 *
 * @csspart base - The component's base wrapper.
 *
 * @cssproperty --width - The width of the calendar in CSS units. Set automatically if `size` is set.
 * @cssproperty --font-size - The font size of the calendar. Set automatically if `size` is set.
 * @cssproperty --day-font-size - The font size of the day labels. Set automatically if `size` is set.
 *
 */
declare class FlowUiCalendar extends FlowRdfElement {
    static styles: CSSResultGroup;
    private _monthSelect;
    private _yearSelect;
    private _displayDate;
    private _selectedDate?;
    /** The value of the control. (ISO8601 date/time string) */
    value: string;
    /** Select whether to show date only, time only or both date and time. */
    displayMode: 'date' | 'time' | 'datetime';
    /** Set the timezone for display. If not set the default timezone will be used. (TZ name e.g. `'Europe/London'`) */
    timezone?: string;
    /** Set the locale for display. If not set the default locale will be used. (e.g `'en-GB'`) */
    locale?: string;
    /** Set the size of the calendar. */
    size: 'small' | 'medium' | 'large';
    connectedCallback(): void;
    disconnectedCallback(): void;
    /** @internal */
    handleValueChange(): void;
    /** @internal */
    handleTimezoneChange(): void;
    private dateClicked;
    private stepDisplayDate;
    /**
     * Generate a list of years for the year select dropdown
     */
    private yearOptionsForDate;
    private makeDate;
    private updateValue;
    private handleHeaderSelectChange;
    private handleTimeChange;
    private calendarHeaderTemplate;
    private dayOfWeekGridTemplate;
    private dayGridTemplate;
    private timeTemplate;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-calendar': FlowUiCalendar;
    }
}

/**
 * @tagname flow-ui-card
 * @summary Cards can be used to group related subjects in a container.
 *
 *
 * @slot - The card's main content.
 * @slot header - An optional header for the card.
 * @slot footer - An optional footer for the card.
 * @slot image - An optional image to render at the start of the card.
 *
 * @csspart base - The component's base wrapper.
 * @csspart image - The container that wraps the card's image.
 * @csspart header - The container that wraps the card's header.
 * @csspart body - The container that wraps the card's main content.
 * @csspart footer - The container that wraps the card's footer.
 *
 * @cssproperty --border-color - The card's border color, including borders that occur inside the card.
 * @cssproperty --border-radius - The border radius for the card's edges.
 * @cssproperty --border-width - The width of the card's borders.
 * @cssproperty --padding - The padding to use for the card's sections.
 */
declare class FlowUiCard extends FlowRdfElement {
    static styles: CSSResultGroup;
    private readonly hasSlotController;
    title: string;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-card': FlowUiCard;
    }
}

/**
 * @tagname flow-ui-carousel
 * @summary Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
 *
 * @since 2.2
 * @status experimental
 *
 * @dependency flow-ui-icon
 *
 * @event {{ index: number, slide: FlowCarouselItem }} flow-ui-slide-change - Emitted when the active slide changes.
 *
 * @slot - The carousel's main content, one or more `<flow-ui-carousel-item>` elements.
 * @slot next-icon - Optional next icon to use instead of the default. Works best with `<flow-ui-icon>`.
 * @slot previous-icon - Optional previous icon to use instead of the default. Works best with `<flow-ui-icon>`.
 *
 * @csspart base - The carousel's internal wrapper.
 * @csspart scroll-container - The scroll container that wraps the slides.
 * @csspart pagination - The pagination indicators wrapper.
 * @csspart pagination-item - The pagination indicator.
 * @csspart pagination-item--active - Applied when the item is active.
 * @csspart navigation - The navigation wrapper.
 * @csspart navigation-button - The navigation button.
 * @csspart navigation-button--previous - Applied to the previous button.
 * @csspart navigation-button--next - Applied to the next button.
 *
 * @cssproperty --slide-gap - The space between each slide.
 * @cssproperty --aspect-ratio - The aspect ratio of each slide.
 * @cssproperty --scroll-hint - The amount of padding to apply to the scroll area, allowing adjacent slides to become
 *  partially visible as a scroll hint.
 */
declare class FlowUiCarousel extends FlowRdfElement {
    static styles: CSSResultGroup;
    /** Set to `true` to allow the user to navigate the carousel in the same direction indefinitely. */
    loop: boolean;
    /** Set to `true` to show the carousel's navigation. */
    navigation: boolean;
    /** Set to `true` to show the carousel's pagination indicators. */
    pagination: boolean;
    /** Set to `true` to automatically advance the carousel.  */
    autoplay: boolean;
    /** Specifies the amount of time (in ms) between each automatic scroll.  */
    autoplayInterval: number;
    /** Specifies how many slides should be shown at a given time.  */
    slidesPerPage: number;
    /**
     * Specifies the number of slides the carousel will advance when scrolling, useful when specifying a `slides-per-page`
     * greater than one.
     */
    slidesPerMove: number;
    /** Specifies the orientation in which the carousel will lay out.  */
    orientation: 'horizontal' | 'vertical';
    /** When set, it is possible to scroll through the slides by dragging them with the mouse. */
    mouseDragging: boolean;
    /** @internal */
    defaultSlot: HTMLSlotElement;
    /** @internal */
    scrollContainer: HTMLElement;
    /** @internal */
    paginationContainer: HTMLElement;
    private activeSlide;
    private autoplayController;
    private scrollController;
    private readonly slides;
    private intersectionObserver;
    private readonly intersectionObserverEntries;
    private readonly localize;
    private mutationObserver;
    connectedCallback(): void;
    disconnectedCallback(): void;
    protected firstUpdated(): void;
    private getPageCount;
    private getCurrentPage;
    private getSlides;
    private handleKeyDown;
    private handleScrollEnd;
    private handleSlotChange;
    /** @internal */
    initializeSlides(): void;
    /** @internal */
    handelSlideChange(): void;
    /** @internal */
    handleSlidesPerMoveChange(): void;
    /** @internal */
    handleAutoplayChange(): void;
    /** @internal */
    handleMouseDraggingChange(): void;
    /**
     * Move the carousel backward by `slides-per-move` slides.
     *
     * @param behavior - The behavior used for scrolling.
     */
    previous(behavior?: ScrollBehavior): void;
    /**
     * Move the carousel forward by `slides-per-move` slides.
     *
     * @param behavior - The behavior used for scrolling.
     */
    next(behavior?: ScrollBehavior): void;
    /**
     * Scrolls the carousel to the slide specified by `index`.
     *
     * @param index - The slide index.
     * @param behavior - The behavior used for scrolling.
     */
    goToSlide(index: number, behavior?: ScrollBehavior): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-carousel': FlowUiCarousel;
    }
}

/**
 * The chart component is a container for [Chart.js](https://www.chartjs.org/) charts. The component
 * supplies additional Flow RDF UI features including:
 *
 * - Consistent theming with other flow-rdf-ui components.
 * - Additional plugins and charts types for commonly-used charts.
 * @tagname flow-ui-chart
 * @summary The chart component displays Chart.js charts.
 *
 * @slot title - The chart's title. Alternatively, you can use the `title` attribute.
 *
 * @cssproperty --background-color - Chart background color (applied as the background color of the base container).
 * @cssproperty --text-color - General text color (titles etc.)
 * @cssproperty --axis-color - Color of the axis lines.
 * @cssproperty --x-axis-color - Color of the x-axis lines. (defaults to `--axis-color`)
 * @cssproperty --y-axis-color - Color of the y-axis lines. (defaults to `--axis-color`)
 * @cssproperty --axis-grid-color - Color of the axis grid lines.
 * @cssproperty --x-axis-grid-color - Color of the x-axis grid lines. (defaults to `--axis-grid-color`)
 * @cssproperty --y-axis-grid-color - Color of the y-axis grid lines. (defaults to `--axis-grid-color`)
 * @cssproperty --axis-label-color - Color of the axis labels.
 * @cssproperty --x-axis-label-color - Color of the x-axis labels. (defaults to `--axis-label-color`)
 * @cssproperty --y-axis-label-color - Color of the y-axis labels. (defaults to `--axis-label-color`)
 * @cssproperty --tick-label-color - Color of the tick labels.
 * @cssproperty --x-tick-label-color - Color of the x-axis tick labels. (defaults to `--tick-label-color`)
 * @cssproperty --y-tick-label-color - Color of the y-axis tick labels. (defaults to `--tick-label-color`)
 * @cssproperty --dataset-stroke-color-n - Color of the stroke for dataset n (where n = 0-9).
 * @cssproperty --dataset-fill-color-n - Color of the fill for dataset n (where n = 0-9).
 *
 * @cssproperty --header-padding - Chart header padding.
 * @cssproperty --header-height - Chart header height.
 * @cssproperty --header-font-size - Chart header font size.
 * @cssproperty --header-color - Chart header text color.
 *
 * @csspart header - The header container of the chart.
 * @csspart title - The chart title placed in the header.
 */
declare class FlowUiChart extends FlowRdfElement {
    static styles: CSSResultGroup;
    private readonly hasSlotController;
    private _chartRef;
    private _chart;
    /** The Chart.js chart instance. */
    get chart(): Chart<keyof ChartTypeRegistry, (number | chart_js.Point | [number, number] | chart_js.BubbleDataPoint | chartjs_chart_matrix.MatrixDataPoint | null)[], unknown>;
    /** A label displayed in the chart's header. If you need to display HTML, use the `label` slot instead. */
    title: string;
    /** The Chart.js chart type (e.g `line`, `bar` or a custom type). */
    type: string;
    /** The Chart.js `options` object. */
    options: ChartOptions;
    /** The Chart.js `data` object */
    data: ChartData;
    /** List of extra plugins to use for this chart. */
    plugins: Plugin[];
    /** Trigger a repaint of the chart. */
    repaint(): void;
    connectedCallback(): Promise<void>;
    disconnectedCallback(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-chart': FlowUiChart;
    }
}

interface FormControlControllerOptions {
    /** A function that returns the form containing the form control. */
    form: (input: FlowRdfFormControl) => HTMLFormElement | null;
    /** A function that returns the form control's name, which will be submitted with the form data. */
    name: (input: FlowRdfFormControl) => string;
    /** A function that returns the form control's current value. */
    value: (input: FlowRdfFormControl) => unknown | unknown[];
    /** A function that returns the form control's default value. */
    defaultValue: (input: FlowRdfFormControl) => unknown | unknown[];
    /** A function that returns the form control's current disabled state. If disabled, the value won't be submitted. */
    disabled: (input: FlowRdfFormControl) => boolean;
    /**
     * A function that maps to the form control's reportValidity() function. When the control is invalid, this will
     * prevent submission and trigger the browser's constraint violation warning.
     */
    reportValidity: (input: FlowRdfFormControl) => boolean;
    /** A function that sets the form control's value */
    setValue: (input: FlowRdfFormControl, value: unknown) => void;
    /**
     * An array of event names to listen to. When all events in the list are emitted, the control will receive validity
     * states such as user-valid and user-invalid.user interacted validity states. */
    assumeInteractionOn: string[];
}
/** A reactive controller to allow form controls to participate in form submission, validation, etc. */
declare class FormControlController implements ReactiveController {
    host: FlowRdfFormControl & ReactiveControllerHost;
    form?: HTMLFormElement | null;
    options: FormControlControllerOptions;
    constructor(host: ReactiveControllerHost & FlowRdfFormControl, options?: Partial<FormControlControllerOptions>);
    hostConnected(): void;
    hostDisconnected(): void;
    hostUpdated(): void;
    private attachForm;
    private detachForm;
    private handleFormData;
    private handleFormSubmit;
    private handleFormReset;
    private handleInteraction;
    private reportFormValidity;
    private setUserInteracted;
    private doAction;
    /** Returns the associated `<form>` element, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Resets the form, restoring all the control to their default value */
    reset(submitter?: HTMLInputElement | FlowUiButton): void;
    /** Submits the form, triggering validation and form data injection. */
    submit(submitter?: HTMLInputElement | FlowUiButton): void;
    /**
     * Synchronously sets the form control's validity. Call this when you know the future validity but need to update
     * the host element immediately, i.e. before Lit updates the component in the next update.
     */
    setValidity(isValid: boolean): void;
    /**
     * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
     * that affects constraint validation changes so the component receives the correct validity states.
     */
    updateValidity(): void;
    /**
     * Dispatches a non-bubbling, cancelable custom event of type `flow-ui-invalid`.
     * If the `flow-ui-invalid` event will be cancelled then the original `invalid`
     * event (which may have been passed as argument) will also be cancelled.
     * If no original `invalid` event has been passed then the `flow-ui-invalid`
     * event will be cancelled before being dispatched.
     */
    emitInvalidEvent(originalInvalidEvent?: Event): void;
}

/**
 * @tagname flow-ui-checkbox-group
 * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
 *
 * @dependency flow-ui-button-group
 *
 * @slot - The default slot where `<flow-ui-radio>` or `<flow-ui-tool-button>` elements are placed.
 * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`
 *  attribute.
 *
 * @event flow-ui-change - Emitted when the radio group's selected value changes.
 * @event flow-ui-input - Emitted when the radio group receives user input.
 * @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart form-control - The form control that wraps the label, input, and help text.
 * @csspart form-control-label - The label's wrapper.
 * @csspart form-control-input - The input's wrapper.
 * @csspart form-control-help-text - The help text's wrapper.
 * @csspart button-group - The button group that wraps radio buttons.
 * @csspart button-group__base - The button group's `base` part.
 */
declare class FlowUiCheckboxGroup extends FlowRdfFormControl {
    static styles: CSSResultGroup;
    protected readonly formControlController: FormControlController;
    private readonly hasSlotController;
    private customValidityMessage;
    private validationTimeout;
    /** @internal */
    defaultSlot: HTMLSlotElement;
    /** @internal */
    validationInput: HTMLInputElement;
    private errorMessage;
    /** @internal */
    defaultValue: string[];
    /**
     * The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
     * instead.
     */
    label: string;
    /** The checkbox groups's help text. If you need to display HTML, use the `help-text` slot instead. */
    helpText: string;
    /** The name of the checkbox group, submitted as a name/value pair with form data. */
    name: string;
    value: string[];
    /** The radio group's size. This size will be applied to all child checkboxes. */
    size: 'small' | 'medium' | 'large';
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /** Ensures a child radio is checked before allowing the containing form to submit. */
    required: boolean;
    /** Display the radio using a reversed style with left-aligned label. */
    reverse: boolean;
    /** Indicates that the control should display a divider */
    divider: boolean;
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    connectedCallback(): void;
    firstUpdated(): void;
    private getAllCheckboxes;
    private handleCheckboxClick;
    private handleLabelClick;
    private handleInvalid;
    private syncCheckboxes;
    private updateCheckedState;
    /** @internal */
    handleStyleChange(): void;
    /** @internal */
    handleValueChange(): void;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message?: string): void;
    /** Stop propagation of flow-ui-input and flow-ui-change from child checkboxes */
    handleChildEvents(event: Event): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-checkbox-group': FlowUiCheckboxGroup;
    }
}

/**
 * @tagname flow-ui-checkbox
 * @summary Checkboxes allow the user to toggle an option on or off.

 * @dependency flow-ui-icon
 *
 * @slot - The checkbox's label.
 *
 * @event flow-ui-blur - Emitted when the checkbox loses focus.
 * @event flow-ui-change - Emitted when the checked state changes.
 * @event flow-ui-focus - Emitted when the checkbox gains focus.
 * @event flow-ui-input - Emitted when the checkbox receives input.
 * @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart base - The component's base wrapper.
 * @csspart control - The square container that wraps the checkbox's checked state.
 * @csspart control--checked - Matches the control part when the checkbox is checked.
 * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.
 * @csspart checked-icon - The checked icon, an `<flow-ui-icon>` element.
 * @csspart indeterminate-icon - The indeterminate icon, an `<flow-ui-icon>` element.
 * @csspart label - The container that wraps the checkbox's label.
 */
declare class FlowUiCheckbox extends FlowRdfFormControl {
    static styles: CSSResultGroup;
    private readonly hasSlotController;
    private readonly formControlController;
    private input;
    private hasFocus;
    /** @internal */
    label: string;
    /** The name of the checkbox, submitted as a name/value pair with form data. */
    name: string;
    /** The current value of the checkbox. */
    value: string;
    /** The checkbox's size. */
    size: 'small' | 'medium' | 'large';
    /** Disables the checkbox. */
    disabled: boolean;
    /** Draws the checkbox in a checked state. */
    checked: boolean;
    /**
     * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
     * all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
     */
    indeterminate: boolean;
    /** The default value of the form control. Primarily used for resetting the form control. */
    defaultChecked: boolean;
    /** Display the checkbox using a reversed style with left-aligned label. */
    reverse: boolean;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /** Makes the checkbox a required field. */
    required: boolean;
    connectedCallback(): void;
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    firstUpdated(): void;
    private handleClick;
    private handleBlur;
    private handleInput;
    private handleInvalid;
    private handleFocus;
    /** @internal  */
    handleDisabledChange(): void;
    /** @internal  */
    handleStateChange(): void;
    /** Simulates a click on the checkbox. */
    click(): void;
    /** Sets focus on the checkbox. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the checkbox. */
    blur(): void;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /**
     * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
     * the custom validation message, call this method with an empty string.
     */
    setCustomValidity(message: string): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-checkbox': FlowUiCheckbox;
    }
}

/**
 * @tagname flow-ui-color-mapper
 * @summary A component for defining mappings between data values and colors.
 *
 * @event flow-ui-change - Fired when the color mapper's value changes.
 *
 * @dependency flow-ui-color-picker
 * @dependency flow-ui-color-stop
 * @dependency flow-ui-dialog
 * @dependency flow-ui-button
 * @dependency flow-ui-radio-group
 * @dependency flow-ui-radio
 * @dependency flow-ui-select
 * @dependency flow-ui-option
 * @dependency flow-ui-icon-button
 *
 *
 */
declare class FlowUiColorMapper extends FlowRdfElement {
    static styles: CSSResultGroup;
    private currentField?;
    private readonly hasSlotController;
    private modeRadioGroup;
    private fixedColorPicker;
    private fieldSelect;
    private infoDialog;
    /** @internal - add form control class */
    class: string;
    /** The color mapper configuration specifying available fields. */
    options: ColorMapperOptions;
    /** The current value of the color mapper. */
    value: ColorMapperValue;
    /** The size of the color mapper component. */
    size: 'small' | 'medium' | 'large';
    /** @internal */
    defaultColorStop: boolean;
    /**
     * One or more predefined color swatches to display as presets in the color picker. Can include any format the color
     * picker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a
     * semicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.
     */
    swatches: string | string[];
    connectedCallback(): void;
    /** @internal - ensure form class is always present */
    handleClassChange(): void;
    private handleFixedPickerClick;
    private handleChange;
    private emitChange;
    private handleColorStopRemove;
    private getAllColorStops;
    private getColorStopPlaceholder;
    private fixedColorTemplate;
    private dataDrivenColorTemplate;
    private colorStopsTemplate;
    private infoDialogTemplate;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-color-mapper': FlowUiColorMapper;
    }
}

/**
 * @tagname flow-ui-menu
 * @summary Menus provide a list of options for the user to choose from.

 * @slot - The menu's content, including menu items, menu labels, and dividers.
 *
 * @event {CustomEvent<{item: FlowMenuItem}>} flow-ui-select - Emitted when a menu item is selected.
 */
declare class FlowUiMenu extends FlowRdfElement {
    static styles: CSSResultGroup;
    /** @internal */
    defaultSlot: HTMLSlotElement;
    connectedCallback(): void;
    private handleClick;
    private handleKeyDown;
    private handleMouseDown;
    private handleSlotChange;
    private isMenuItem;
    /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
    getAllItems(): FlowUiMenuItem[];
    /**
     * @internal Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index.
     * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item.
     */
    getCurrentItem(): FlowUiMenuItem | undefined;
    /**
     * @internal Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and
     * `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.
     */
    setCurrentItem(item: FlowUiMenuItem): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-menu': FlowUiMenu;
    }
}

/**
 * @tagname flow-ui-dropdown
 * @summary Dropdowns expose additional content that "drops down" in a panel.
 *
 * @dependency flow-ui-popup
 *
 * @slot - The dropdown's main content.
 * @slot trigger - The dropdown's trigger, usually a `<flow-ui-button>` element.
 *
 * @event flow-ui-show - Emitted when the dropdown opens.
 * @event flow-ui-after-show - Emitted after the dropdown opens and all animations are complete.
 * @event flow-ui-hide - Emitted when the dropdown closes.
 * @event flow-ui-after-hide - Emitted after the dropdown closes and all animations are complete.
 *
 * @csspart base - The component's base wrapper, an `<flow-ui-popup>` element.
 * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
 * @csspart trigger - The container that wraps the trigger.
 * @csspart panel - The panel that gets shown when the dropdown is open.
 *
 * @animation dropdown.show - The animation to use when showing the dropdown.
 * @animation dropdown.hide - The animation to use when hiding the dropdown.
 */
declare class FlowUiDropdown extends FlowRdfElement {
    static styles: CSSResultGroup;
    static dependencies: {
        'flow-ui-popup': typeof FlowUiPopup;
    };
    /** @internal */
    popup: FlowUiPopup;
    /** @internal */
    trigger: HTMLSlotElement;
    /** @internal */
    panel: HTMLSlotElement;
    private readonly localize;
    private closeWatcher;
    /**
     * Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
     * can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.
     */
    open: boolean;
    /**
     * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
     * inside of the viewport.
     */
    placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
    /** Disables the dropdown so the panel will not open. */
    disabled: boolean;
    /**
     * By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for
     * dropdowns that allow for multiple interactions.
     */
    stayOpenOnSelect: boolean;
    /**
     * The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other
     * components that use a dropdown internally.
     */
    containingElement?: HTMLElement;
    /** The distance in pixels from which to offset the panel away from its trigger. */
    distance: number;
    /** The distance in pixels from which to offset the panel along its trigger. */
    skidding: number;
    /**
     * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
     * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
     */
    hoist: boolean;
    /**
     * Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and
     * `--arrow-color` custom properties. For additional customizations, you can also target the arrow using
     * `::part(arrow)` in your stylesheet.
     */
    arrow: boolean;
    /**
     * The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the
     * anchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will
     * align the arrow to the start, end, or center of the popover instead.
     */
    arrowPlacement: 'start' | 'end' | 'center' | 'anchor';
    /**
     * The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,
     * this will prevent it from overflowing the corners.
     */
    arrowPadding: number;
    /**
     * Syncs the popup width or height to that of the trigger element.
     */
    sync: 'width' | 'height' | 'both' | undefined;
    connectedCallback(): void;
    firstUpdated(): void;
    disconnectedCallback(): void;
    /** @internal */
    focusOnTrigger(): void;
    /** @internal */
    getMenu(): FlowUiMenu | undefined;
    private handleKeyDown;
    private handleDocumentKeyDown;
    private handleDocumentMouseDown;
    private handlePanelSelect;
    /** @internal */
    handleTriggerClick(): void;
    /** @internal */
    handleTriggerKeyDown(event: KeyboardEvent): Promise<void>;
    /** @internal */
    handleTriggerKeyUp(event: KeyboardEvent): void;
    /** @internal */
    handleTriggerSlotChange(): void;
    /** @internal */
    updateAccessibleTrigger(): void;
    /** Shows the dropdown panel. */
    show(): Promise<void>;
    /** Hides the dropdown panel */
    hide(): Promise<void>;
    /**
     * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
     * is activated.
     */
    reposition(): void;
    /** @internal */
    addOpenListeners(): void;
    /** @internal */
    removeOpenListeners(): void;
    /** @internal */
    handleOpenChange(): Promise<void>;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-dropdown': FlowUiDropdown;
    }
}

/**
 * @tagname flow-ui-input
 * @summary Inputs collect data from the user.
 * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/input
 * @status stable
 * @since 2.0
 *
 * @dependency flow-ui-icon
 * @dependency flow-ui-icon-button
 *
 * @slot label - The input's label. Alternatively, you can use the `label` attribute.
 * @slot prefix - Used to prepend a presentational icon or similar element to the input.
 * @slot suffix - Used to append a presentational icon or similar element to the input.
 * @slot clear-icon - An icon to use in lieu of the default clear icon.
 * @slot show-password-icon - An icon to use in lieu of the default show password icon.
 * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
 * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
 *
 * @event flow-ui-blur - Emitted when the control loses focus.
 * @event flow-ui-change - Emitted when an alteration to the control's value is committed by the user.
 * @event flow-ui-clear - Emitted when the clear button is activated.
 * @event flow-ui-focus - Emitted when the control gains focus.
 * @event flow-ui-input - Emitted when the control receives input.
 * @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart form-control - The form control that wraps the label, input, and help text.
 * @csspart form-control-label - The label's wrapper.
 * @csspart form-control-input - The input's wrapper.
 * @csspart form-control-help-text - The help text's wrapper.
 * @csspart base - The component's base wrapper.
 * @csspart input - The internal `<input>` control.
 * @csspart prefix - The container that wraps the prefix.
 * @csspart clear-button - The clear button.
 * @csspart password-toggle-button - The password toggle button.
 * @csspart suffix - The container that wraps the suffix.
 */
declare class FlowUiInput extends FlowRdfFormControl {
    static styles: CSSResultGroup;
    private readonly formControlController;
    private readonly hasSlotController;
    private readonly localize;
    private _numberFormatter;
    /** @internal */
    input: HTMLInputElement;
    private hasFocus;
    /** @internal */
    title: string;
    /**
     * The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults
     * to `text`.
     */
    type: 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';
    /** The name of the input, submitted as a name/value pair with form data. */
    name: string;
    /** The current value of the input, submitted as a name/value pair with form data. */
    value: string;
    /** The default value of the form control. Primarily used for resetting the form control. */
    defaultValue: string;
    /** The input's size. */
    size: 'small' | 'medium' | 'large';
    /** Draws a filled input. */
    filled: boolean;
    /** Draws a pill-style input with rounded edges. */
    pill: boolean;
    /** The input's label. If you need to display HTML, use the `label` slot instead. */
    label: string;
    /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
    helpText: string;
    /** Adds a clear button when the input is not empty. */
    clearable: boolean;
    /** Disables the input. */
    disabled: boolean;
    /** Placeholder text to show as a hint when the input is empty. */
    placeholder: string;
    /** Number format to use for input controls with `type="number"`. (D3 format string) */
    format: string;
    /** Makes the input readonly. */
    readonly: boolean;
    /** Adds a button to toggle the password's visibility. Only applies to password types. */
    passwordToggle: boolean;
    /** Determines whether or not the password is currently visible. Only applies to password input types. */
    passwordVisible: boolean;
    /** Hides the increment/decrement step buttons for number inputs. */
    noStepButtons: boolean;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /** Makes the input a required field. */
    required: boolean;
    /** A regular expression pattern to validate input against. */
    pattern: string;
    /** The minimum length of input that will be considered valid. */
    minlength: number;
    /** The maximum length of input that will be considered valid. */
    maxlength: number;
    /** The input's minimum value. Only applies to date and number input types. */
    min: number | string;
    /** The input's maximum value. Only applies to date and number input types. */
    max: number | string;
    /**
     * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
     * implied, allowing any numeric value. Only applies to date and number input types.
     */
    step: number | 'any';
    /** Controls whether and how text input is automatically capitalized as it is entered by the user. */
    autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
    /** Indicates whether the browser's autocorrect feature is on or off. */
    autocorrect: 'off' | 'on';
    /**
     * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
     * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
     */
    autocomplete: string;
    /** Indicates that the input should receive focus on page load. */
    autofocus: boolean;
    /** Used to customize the label or icon of the Enter key on virtual keyboards. */
    enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
    /** Enables spell checking on the input. */
    spellcheck: boolean;
    /**
     * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
     * keyboard on supportive devices.
     */
    inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
    /**
     * Display the input in the 'inline' form control style.
     */
    inline: boolean;
    /** Indicates that the control should display a divider */
    divider: boolean;
    connectedCallback(): void;
    /** @internal */
    handleFormatChange(): void;
    /** Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. */
    get valueAsDate(): Date | null;
    set valueAsDate(newValue: Date | null);
    /** Gets or sets the current value as a number. Returns `NaN` if the value can't be converted. */
    get valueAsNumber(): number;
    set valueAsNumber(newValue: number);
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    firstUpdated(): void;
    private handleBlur;
    private handleChange;
    private handleClearClick;
    private handleFocus;
    private handleInput;
    private handleInvalid;
    private handleKeyDown;
    private handlePasswordToggle;
    /** @internal */
    handleDisabledChange(): void;
    /** @internal */
    handleStepChange(): void;
    /** @internal */
    handleValueChange(): Promise<void>;
    /** Sets focus on the input. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the input. */
    blur(): void;
    /** Selects all the text in the input. */
    select(): void;
    /** Sets the start and end positions of the text selection (0-based). */
    setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none'): void;
    /** Replaces a range of text with a new string. */
    setRangeText(replacement: string, start?: number, end?: number, selectMode?: 'select' | 'start' | 'end' | 'preserve'): void;
    /** Displays the browser picker for an input element (only works if the browser supports it for the input type). */
    showPicker(): void;
    /** Increments the value of a numeric input type by the value of the step attribute. */
    stepUp(): void;
    /** Decrements the value of a numeric input type by the value of the step attribute. */
    stepDown(): void;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message: string): void;
    private fromDisplayValue;
    private toDisplayValue;
    /** Value to use for input sizer in inline mode */
    private toSizeValue;
    private clampValue;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-input': FlowUiInput;
    }
}

/**
 * @tagname flow-ui-color-picker
 * @summary Color pickers allow the user to select a color.

 * @dependency flow-ui-button
 * @dependency flow-ui-button-group
 * @dependency flow-ui-dropdown
 * @dependency flow-ui-input
 * @dependency flow-ui-visually-hidden
 *
 * @slot label - The color picker's form label. Alternatively, you can use the `label` attribute.
 *
 * @event flow-ui-blur - Emitted when the color picker loses focus.
 * @event flow-ui-change - Emitted when the color picker's value changes.
 * @event flow-ui-focus - Emitted when the color picker receives focus.
 * @event flow-ui-input - Emitted when the color picker receives input.
 * @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart base - The component's base wrapper.
 * @csspart trigger - The color picker's dropdown trigger.
 * @csspart swatches - The container that holds the swatches.
 * @csspart swatch - Each individual swatch.
 * @csspart grid - The color grid.
 * @csspart grid-handle - The color grid's handle.
 * @csspart slider - Hue and opacity sliders.
 * @csspart slider-handle - Hue and opacity slider handles.
 * @csspart hue-slider - The hue slider.
 * @csspart hue-slider-handle - The hue slider's handle.
 * @csspart opacity-slider - The opacity slider.
 * @csspart opacity-slider-handle - The opacity slider's handle.
 * @csspart preview - The preview color.
 * @csspart input - The text input.
 * @csspart eye-dropper-button - The eye dropper button.
 * @csspart eye-dropper-button__base - The eye dropper button's exported `button` part.
 * @csspart eye-dropper-button__prefix - The eye dropper button's exported `prefix` part.
 * @csspart eye-dropper-button__label - The eye dropper button's exported `label` part.
 * @csspart eye-dropper-button__suffix - The eye dropper button's exported `suffix` part.
 * @csspart eye-dropper-button__caret - The eye dropper button's exported `caret` part.
 * @csspart format-button - The format button.
 * @csspart format-button__base - The format button's exported `button` part.
 * @csspart format-button__prefix - The format button's exported `prefix` part.
 * @csspart format-button__label - The format button's exported `label` part.
 * @csspart format-button__suffix - The format button's exported `suffix` part.
 * @csspart format-button__caret - The format button's exported `caret` part.
 *
 * @cssproperty --grid-width - The width of the color grid.
 * @cssproperty --grid-height - The height of the color grid.
 * @cssproperty --grid-handle-size - The size of the color grid's handle.
 * @cssproperty --slider-height - The height of the hue and alpha sliders.
 * @cssproperty --slider-handle-size - The diameter of the slider's handle.
 * @cssproperty --swatch-size - The size of each predefined color swatch.
 */
declare class FlowUiColorPicker extends FlowRdfFormControl {
    static styles: CSSResultGroup;
    private readonly formControlController;
    private isSafeValue;
    private readonly localize;
    private base;
    private input;
    private dropdown;
    private previewButton;
    private trigger;
    private hasFocus;
    private isDraggingGridHandle;
    private isEmpty;
    private inputValue;
    private hue;
    private saturation;
    private brightness;
    private alpha;
    /**
     * The current value of the color picker. The value's format will vary based the `format` attribute. To get the value
     * in a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form
     * data.
     */
    value: string;
    /** The default value of the form control. Primarily used for resetting the form control. */
    defaultValue: string;
    /**
     * The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to
     * display HTML, you can use the `label` slot` instead.
     */
    label: string;
    /**
     * The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color
     * picker will accept user input in any format (including CSS color names) and convert it to the desired format.
     */
    format: 'hex' | 'rgb' | 'hsl' | 'hsv';
    /** Renders the color picker inline rather than in a dropdown. */
    inline: boolean;
    /** Determines the size of the color picker's trigger. This has no effect on inline color pickers. */
    size: 'small' | 'medium' | 'large';
    /** Removes the button that lets users toggle between format.   */
    noFormatToggle: boolean;
    /** The name of the form control, submitted as a name/value pair with form data. */
    name: string;
    /** Disables the color picker. */
    disabled: boolean;
    /**
     * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
     * inside of the viewport.
     */
    placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
    /** The distance in pixels from which to offset the panel away from its trigger. */
    distance: number;
    /** The distance in pixels from which to offset the panel along its trigger. */
    skidding: number;
    /**
     * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
     * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
     */
    hoist: boolean;
    /** Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA. */
    opacity: boolean;
    /** By default, values are lowercase. With this attribute, values will be uppercase instead. */
    uppercase: boolean;
    /**
     * One or more predefined color swatches to display as presets in the color picker. Can include any format the color
     * picker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a
     * semicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.
     */
    swatches: string | string[];
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /** Makes the color picker a required field. */
    required: boolean;
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    connectedCallback(): void;
    disconnectedCallback(): void;
    firstUpdated(): void;
    private handleCopy;
    private handleFocusIn;
    private handleFocusOut;
    private handleFormatToggle;
    private handleAlphaDrag;
    private handleHueDrag;
    private handleGridDrag;
    private handleAlphaKeyDown;
    private handleHueKeyDown;
    private handleGridKeyDown;
    private handleInputChange;
    private handleInputInput;
    private handleInputKeyDown;
    private handleInputInvalid;
    private handleTouchMove;
    private parseColor;
    private setColor;
    private setLetterCase;
    private syncValues;
    private handleAfterHide;
    private handleEyeDropper;
    private selectSwatch;
    /** Generates a hex string from HSV values. Hue must be 0-360. All other arguments must be 0-100. */
    private getHexString;
    private stopNestedEventPropagation;
    /** @internal */
    handleFormatChange(): void;
    /** @internal  */
    handleOpacityChange(): void;
    /** @internal  */
    handleValueChange(oldValue: string | undefined, newValue: string): void;
    /** Sets focus on the color picker. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the color picker. */
    blur(): void;
    /** Returns the current value as a string in the specified format. */
    getFormattedValue(format?: 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva'): string;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message: string): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-color-picker': FlowUiColorPicker;
    }
}

/**
 * @tagname flow-ui-color-stop
 * @summary A single color stop used by the `flow-ui-color-mapper` component.
 *
 * @dependency flow-ui-color-picker
 * @dependency flow-ui-input
 * @dependency flow-ui-option
 * @dependency flow-ui-select
 * @dependency flow-ui-tool-button
 * @dependency flow-ui-tool-button-group
 * @dependency flow-ui-icon-button
 *
 */
declare class FlowUiColorStop extends FlowRdfFormControl {
    static styles: CSSResultGroup;
    private readonly formControlController;
    private input;
    private picker;
    private textOptions;
    /** The name of the color stop, submitted as a name/value pair with form data. */
    name: string;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /** Makes the color stop as a required field. */
    required: boolean;
    /** The color stop options object. */
    options: ColorStopOptions;
    /** The current value of the color stop component. */
    value: ColorStopValue;
    /** The size of the color stop component. */
    size: 'small' | 'medium' | 'large';
    /**
     * Set to `true` to display a placeholder color stop that
     * allows the user to add a new color stop.
     */
    placeholder: boolean;
    /**
     * Set to `true` to display a fixed color stop that allows the user
     * to select a fixed color in a color mapping.
     */
    fixed?: string;
    /**
     * One or more predefined color swatches to display as presets in the color picker. Can include any format the color
     * picker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a
     * semicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.
     */
    swatches: string | string[];
    connectedCallback(): void;
    /** Gets the validity state object. */
    get validity(): ValidityState;
    /** Gets the validation message. */
    get validationMessage(): "" | "Invalid regular expression";
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message: string): void;
    private handleRemove;
    private handleChange;
    private emitChange;
    private validate;
    private textInputTemplate;
    private numberInputTemplate;
    private fixedInputTemplate;
    private selectInputTemplate;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-color-stop': FlowUiColorStop;
    }
}

/**
 * @tagname flow-ui-tag
 * @summary Tags are used as labels to organize things or to indicate a selection.
 *
 * @dependency flow-ui-icon-button
 *
 * @slot - The tag's content.
 *
 * @event flow-ui-remove - Emitted when the remove button is activated.
 *
 * @csspart base - The component's base wrapper.
 * @csspart content - The tag's content.
 * @csspart remove-button - The tag's remove button, an `<flow-ui-icon-button>`.
 * @csspart remove-button__base - The remove button's exported `base` part.
 */
declare class FlowUiTag extends FlowRdfElement {
    static styles: CSSResultGroup;
    static dependencies: {
        'flow-icon-button': typeof FlowUiIconButton;
    };
    private readonly localize;
    /** The tag's theme variant. */
    variant: 'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text';
    /** The tag's size. */
    size: 'small' | 'medium' | 'large';
    /** Draws a pill-style tag with rounded edges. */
    pill: boolean;
    /** Makes the tag removable and shows a remove button. */
    removable: boolean;
    connectedCallback(): void;
    private handleRemoveClick;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-tag': FlowUiTag;
    }
}

/**
 * @tagname flow-ui-date-time-picker
 * @summary Date time pickers allow users to select a date and time from a calendar and clock interface.
 *
 * @dependency flow-ui-icon
 * @dependency flow-ui-popup
 * @dependency flow-ui-calendar
 *
 * @slot label - The input's label. Alternatively, you can use the `label` attribute.
 * @slot prefix - Used to prepend a presentational icon or similar element to the picker.
 * @slot clear-icon - An icon to use in lieu of the default clear icon.
 * @slot mode-icon - An icon to use in lieu of the default mode icon.
 * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
 *
 * @event flow-ui-change - Emitted when the control's value changes.
 * @event flow-ui-clear - Emitted when the control's value is cleared.
 * @event flow-ui-input - Emitted when the control receives input.
 * @event flow-ui-focus - Emitted when the control gains focus.
 * @event flow-ui-blur - Emitted when the control loses focus.
 * @event flow-ui-show - Emitted when calendar opens.
 * @event flow-ui-after-show - Emitted after the calendar opens and all animations are complete.
 * @event flow-ui-hide - Emitted when the calendar closes.
 * @event flow-ui-after-hide - Emitted after the calendar closes and all animations are complete.
 * @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart form-control - The form control that wraps the label, input, and help text.
 * @csspart form-control-label - The label's wrapper.
 * @csspart form-control-help-text - The help text's wrapper.
 * @csspart combobox - The container the wraps the prefix, mode-icon, combobox, and clear icon.
 * @csspart prefix - The container that wraps the prefix slot.
 * @csspart display-input - The element that displays the selected date/time, an `<input>` element.
 * @csspart clear-button - The clear button.
 * @csspart mode-icon - The mode icon, a `<flow-ui-icon>` element.
 */
declare class FlowUiDateTimePicker extends FlowRdfFormControl {
    static styles: CSSResultGroup;
    private readonly formControlController;
    private readonly hasSlotController;
    private readonly localize;
    private popup;
    private displayInput;
    private valueInput;
    private calendarContainer;
    private hasFocus;
    private displayLabel;
    /** The name of the date/time picker, submitted as a name/value pair with form data. */
    name: string;
    /** The current value of the date/time picker. (ISO8601 date/time string) */
    value: string;
    /** Select whether to show date only, time only or both date and time. */
    displayMode: 'date' | 'time' | 'datetime';
    /** Specify the display format using a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens). */
    format: string;
    /** Set the timezone for display. If not set the default timezone will be used. (TZ name e.g. `'Europe/London'`) */
    timezone?: string;
    /** Set the locale for display. If not set the default locale will be used. (e.g `'en-GB'`) */
    locale?: string;
    /** The default value of the form control. Primarily used for resetting the form control. */
    defaultValue: string;
    /** The date/time picker's size. */
    size: 'small' | 'medium' | 'large';
    /** Placeholder text to show as a hint when the date/time picker is empty. */
    placeholder: string;
    /** Disables the date/time picker control. */
    disabled: boolean;
    /** Adds a clear button when the date/time picker is not empty. */
    clearable: boolean;
    /**
     * Indicates whether or not the calendar is open. You can toggle this attribute to show and hide the calendar, or you can
     * use the `show()` and `hide()` methods.
     */
    open: boolean;
    /**
     * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
     * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
     */
    hoist: boolean;
    /** Draws a filled select. */
    filled: boolean;
    /** Draws a pill-style select with rounded edges. */
    pill: boolean;
    /** The select's label. If you need to display HTML, use the `label` slot instead. */
    label: string;
    /**
     * The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox
     * inside of the viewport.
     */
    placement: 'top' | 'top-end' | 'top-start' | 'bottom' | 'bottom-end' | 'bottom-start';
    /** The select's help text. If you need to display HTML, use the `help-text` slot instead. */
    helpText: string;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /** The select's required attribute. */
    required: boolean;
    /**
     * Display the control in the 'inline' form control style.
     */
    inline: boolean;
    /** Indicates that the control should display a divider */
    divider: boolean;
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    connectedCallback(): void;
    private addOpenListeners;
    private removeOpenListeners;
    /** @internal */
    updateDisplayLabel(): void;
    private handleFocus;
    private handleBlur;
    private handleDocumentFocusIn;
    private handleDocumentKeyDown;
    private handleDocumentMouseDown;
    private handleLabelClick;
    private handleComboboxMouseDown;
    private handleComboboxKeyDown;
    private handleClearClick;
    private handleClearMouseDown;
    private handleCalendarChange;
    private handleInvalid;
    /** @internal */
    handleDisabledChange(): void;
    /** @internal */
    handleValueChange(): void;
    /** @internal */
    handleOpenChange(): Promise<void>;
    /** Shows the calendar. */
    show(): Promise<void>;
    /** Hides the calendar. */
    hide(): Promise<void>;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message: string): void;
    /** Sets focus on the control. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the control. */
    blur(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-date-time-picker': FlowUiDateTimePicker;
    }
}

/**
 * @tagname flow-ui-details
 * @summary Details show a brief summary and expand to show additional content.

 * @dependency flow-ui-icon
 *
 * @slot - The details' main content.
 * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.
 * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<flow-ui-icon>`.
 * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<flow-ui-icon>`.
 *
 * @event flow-ui-show - Emitted when the details opens.
 * @event flow-ui-after-show - Emitted after the details opens and all animations are complete.
 * @event flow-ui-hide - Emitted when the details closes.
 * @event flow-ui-after-hide - Emitted after the details closes and all animations are complete.
 *
 * @csspart base - The component's base wrapper.
 * @csspart header - The header that wraps both the summary and the expand/collapse icon.
 * @csspart summary - The container that wraps the summary.
 * @csspart summary-icon - The container that wraps the expand/collapse icons.
 * @csspart content - The details content.
 *
 * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
 * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
 */
declare class FlowUiDetails extends FlowRdfElement {
    static styles: CSSResultGroup;
    private readonly localize;
    /** @internal */
    details: HTMLElement;
    /** @internal */
    header: HTMLElement;
    /** @internal */
    body: HTMLElement;
    /** @internal */
    expandIconSlot: HTMLSlotElement;
    /**
     * Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
     * can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.
     */
    open: boolean;
    /** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */
    summary: string;
    /** Disables the details so it can't be toggled. */
    disabled: boolean;
    connectedCallback(): void;
    firstUpdated(): void;
    private handleSummaryClick;
    private handleSummaryKeyDown;
    /** @internal */
    handleOpenChange(): Promise<void>;
    /** Shows the details. */
    show(): Promise<void>;
    /** Hides the details */
    hide(): Promise<void>;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-details': FlowUiDetails;
    }
}

/**
 * @tagname flow-ui-tab
 * @summary Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
 *
 * @dependency flow-ui-icon-button
 *
 * @slot - The tab's label.
 *
 * @event flow-ui-close - Emitted when the tab is closable and the close button is activated.
 *
 * @csspart base - The component's base wrapper.
 * @csspart close-button - The close button, an `<flow-ui-icon-button>`.
 * @csspart close-button__base - The close button's exported `base` part.
 */
declare class FlowUiTab extends FlowRdfElement {
    static styles: CSSResultGroup;
    private readonly localize;
    private readonly hasSlotController;
    private readonly attrId;
    private readonly componentId;
    /** @internal */
    tab: HTMLElement;
    /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
    panel: string;
    /** Draws the tab in an active state. */
    active: boolean;
    /** Display tab icon only. Label text is displayed as a tooltip */
    iconOnly: boolean;
    /** Makes the tab closable and shows a close button. */
    closable: boolean;
    /** Disables the tab and prevents selection. */
    disabled: boolean;
    /** Full title of tab  */
    label: string;
    /** @internal
     * The placement of the tabs. This is set by the parent tab group.
     * */
    placement: 'top' | 'bottom' | 'start' | 'end';
    /**
     * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
     * inside of the viewport.
     */
    tooltipPlacement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
    /** The distance in pixels from which to offset the tooltip away from the icon button. */
    tooltipDistance: number;
    /** The distance in pixels from which to offset the tooltip along the icon button. */
    tooltipSkidding: number;
    tabGroup?: FlowUiTabGroup;
    connectedCallback(): void;
    private handleCloseClick;
    /** @internal */
    handleActiveChange(): void;
    /** @internal */
    handleDisabledChange(): void;
    /** Sets focus to the tab. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the tab. */
    blur(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-tab': FlowUiTab;
    }
}

/**
 * @tagname flow-ui-tab-group
 * @summary Tab groups organize content into a container that shows one section at a time.
 *
 * @dependency flow-ui-icon-button
 *
 * @slot - Used for grouping tab panels in the tab group. Must be `<flow-ui-tab-panel>` elements.
 * @slot nav - Used for grouping tabs in the tab group. Must be `<flow-ui-tab>` elements.
 *
 * @event {{ name: String }} flow-ui-tab-show - Emitted when a tab is shown.
 * @event {{ name: String }} flow-ui-tab-hide - Emitted when a tab is hidden.
 *
 * @csspart base - The component's base wrapper.
 * @csspart nav - The tab group's navigation container where tabs are slotted in.
 * @csspart tabs - The container that wraps the tabs.
 * @csspart active-tab-indicator - The line that highlights the currently selected tab.
 * @csspart body - The tab group's body where tab panels are slotted in.
 * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<flow-ui-icon-button>`.
 * @csspart scroll-button--start - The starting scroll button.
 * @csspart scroll-button--end - The ending scroll button.
 * @csspart scroll-button__base - The scroll button's exported `base` part.
 *
 * @cssproperty --indicator-color - The color of the active tab indicator.
 * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
 * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
 */
declare class FlowUiTabGroup extends FlowRdfElement {
    static styles: CSSResultGroup;
    private readonly localize;
    private readonly hasSlotController;
    private _activeTab?;
    private mutationObserver;
    private resizeObserver;
    private tabs;
    private panels;
    /** @internal */
    tabGroup: HTMLElement;
    /** @internal */
    body: HTMLSlotElement;
    /** @internal */
    nav: HTMLElement;
    /** @internal */
    indicator: HTMLElement;
    private hasScrollControls;
    /** The placement of the tabs. */
    placement: 'top' | 'bottom' | 'start' | 'end';
    /**
     * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
     * manual, the tab will receive focus but will not show until the user presses spacebar or enter.
     */
    activation: 'auto' | 'manual';
    /** Disables the scroll arrows that appear when tabs overflow. */
    noScrollControls: boolean;
    /** Set to `true` to allow parent split-view pane to be automatically opened and closed when tabs are clicked.  */
    controlSplitView: boolean;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private getAllTabs;
    get activeTab(): FlowUiTab | undefined;
    private getAllPanels;
    private handleClick;
    private handleKeyDown;
    private handleScrollToStart;
    private handleScrollToEnd;
    private isHorizontal;
    private setActiveTab;
    private setAriaLabels;
    private repositionIndicator;
    private syncTabsAndPanels;
    /** @internal */
    updateScrollControls(): void;
    /** @internal */
    syncIndicator(): void;
    /** Shows the specified tab panel. */
    show(panel: string): void;
    render(): lit_html.TemplateResult<1>;
}

/**
 * @tagname flow-ui-dialog
 * @summary Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.

 * @dependency flow-ui-icon-button
 *
 * @slot - The dialog's main content.
 * @slot title - The dialog's title text. Alternatively, you can use the `title` attribute.
 * @slot header-actions - Optional actions to add to the header. Works best with `<flow-ui-icon-button>`.
 * @slot footer - The dialog's footer, usually one or more buttons representing various options.
 *
 * @event flow-ui-show - Emitted when the dialog opens.
 * @event flow-ui-after-show - Emitted after the dialog opens and all animations are complete.
 * @event flow-ui-hide - Emitted when the dialog closes.
 * @event flow-ui-after-hide - Emitted after the dialog closes and all animations are complete.
 * @event flow-ui-initial-focus - Emitted when the dialog opens and is ready to receive focus. Calling
 *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
 * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} flow-ui-request-close - Emitted when the user attempts to
 *   close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling
 *   `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in
 *   destructive behavior such as data loss.
 *
 * @event {{ name: String }} flow-ui-tab-show - Emitted when a tab is shown.
 * @event {{ name: String }} flow-ui-tab-hide - Emitted when a tab is hidden.
 *
 * @csspart base - The component's base wrapper.
 * @csspart overlay - The overlay that covers the screen behind the dialog.
 * @csspart panel - The dialog's panel (where the dialog and its content are rendered).
 * @csspart header - The dialog's header. This element wraps the title and header actions.
 * @csspart header-actions - Optional actions to add to the header. Works best with `<flow-ui-icon-button>`.
 * @csspart title - The dialog's title text.
 * @csspart close-button - The close button, an `<flow-ui-icon-button>`.
 * @csspart close-button__base - The close button's exported `base` part.
 * @csspart body - The dialog's body.
 * @csspart footer - The dialog's footer.
 *
 * @csspart tab-group__nav - The tab group's navigation container where tabs are slotted in.
 * @csspart tab-group__tabs - The container that wraps the tabs.
 * @csspart tab-group__active-tab-indicator - The line that highlights the currently selected tab.
 * @csspart tab-group__body - The tab group's body where tab panels are slotted in.
 *
 * @cssproperty --width - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
 * @cssproperty --header-spacing - The amount of padding to use for the header.
 * @cssproperty --body-spacing - The amount of padding to use for the body.
 * @cssproperty --footer-spacing - The amount of padding to use for the footer.
 *
 * @animation dialog.show - The animation to use when showing the dialog.
 * @animation dialog.hide - The animation to use when hiding the dialog.
 * @animation dialog.denyClose - The animation to use when a request to close the dialog is denied.
 * @animation dialog.overlay.show - The animation to use when showing the dialog's overlay.
 * @animation dialog.overlay.hide - The animation to use when hiding the dialog's overlay.
 */
declare class FlowUiDialog extends FlowRdfElement {
    static styles: CSSResultGroup;
    private readonly hasSlotController;
    private readonly localize;
    private modal;
    private originalTrigger;
    /** @internal */
    dialog: HTMLElement;
    /** @internal */
    panel: HTMLElement;
    /** @internal */
    overlay: HTMLElement;
    /** The embedded tab group in a tabbed-style dialog */
    tabGroup: FlowUiTabGroup;
    /**
     * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
     * use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.
     */
    open: boolean;
    /**
     * The dialog's title text. If you need to display HTML, use the `title` slot instead.
     */
    title: string;
    /**
     * Disables the header. This will also remove the default close button, so please ensure you provide an easy,
     * accessible way for users to dismiss the dialog.
     */
    noHeader: boolean;
    /** Display a tabbed-style settings dialog. */
    tabbed: boolean;
    connectedCallback(): void;
    firstUpdated(): void;
    disconnectedCallback(): void;
    private requestClose;
    private addOpenListeners;
    private removeOpenListeners;
    private handleDocumentKeyDown;
    /** @internal */
    handleOpenChange(): Promise<void>;
    /** Shows the dialog. */
    show(): Promise<void>;
    /** Hides the dialog */
    hide(): Promise<void>;
    private handleTabShow;
    private syncTabbedDialog;
    private handleChildHide;
    renderHeader(slot?: string): lit_html.TemplateResult<1>;
    renderTabContainer(): lit_html.TemplateResult<1>;
    renderDefaultContainer(): lit_html.TemplateResult<1>;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-dialog': FlowUiDialog;
    }
}

/**
 * @tagname flow-ui-divider
 * @summary Dividers are used to visually separate or group elements.
 *
 * @cssproperty --color - The color of the divider.
 * @cssproperty --width - The width of the divider.
 * @cssproperty --spacing - The spacing of the divider.
 */
declare class FlowUiDivider extends FlowRdfElement {
    static styles: CSSResultGroup;
    /** Draws the divider in a vertical orientation. */
    vertical: boolean;
    connectedCallback(): void;
    /** @internal */
    handleVerticalChange(): void;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-divider': FlowUiDivider;
    }
}

/**
 * @tagname flow-ui-drawer
 * @summary Drawers slide in from a container to expose additional options and information.
 *
 * @dependency flow-ui-icon-button
 *
 * @slot - The drawer's main content.
 * @slot label - The drawer's label. Alternatively, you can use the `label` attribute.
 * @slot header-actions - Optional actions to add to the header. Works best with `<flow-ui-icon-button>`.
 * @slot footer - The drawer's footer, usually one or more buttons representing various options.
 *
 * @event flow-ui-show - Emitted when the drawer opens.
 * @event flow-ui-after-show - Emitted after the drawer opens and all animations are complete.
 * @event flow-ui-hide - Emitted when the drawer closes.
 * @event flow-ui-after-hide - Emitted after the drawer closes and all animations are complete.
 * @event flow-ui-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling
 *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
 * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} flow-ui-request-close - Emitted when the user attempts to
 *   close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling
 *   `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in
 *   destructive behavior such as data loss.
 *
 * @csspart base - The component's base wrapper.
 * @csspart overlay - The overlay that covers the screen behind the drawer.
 * @csspart panel - The drawer's panel (where the drawer and its content are rendered).
 * @csspart header - The drawer's header. This element wraps the title and header actions.
 * @csspart header-actions - Optional actions to add to the header. Works best with `<flow-ui-icon-button>`.
 * @csspart title - The drawer's title.
 * @csspart close-button - The close button, an `<flow-ui-icon-button>`.
 * @csspart close-button__base - The close button's exported `base` part.
 * @csspart body - The drawer's body.
 * @csspart footer - The drawer's footer.
 *
 * @cssproperty --size - The preferred size of the drawer. This will be applied to the drawer's width or height
 *   depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.
 * @cssproperty --header-spacing - The amount of padding to use for the header.
 * @cssproperty --body-spacing - The amount of padding to use for the body.
 * @cssproperty --footer-spacing - The amount of padding to use for the footer.
 *
 * @animation drawer.showTop - The animation to use when showing a drawer with `top` placement.
 * @animation drawer.showEnd - The animation to use when showing a drawer with `end` placement.
 * @animation drawer.showBottom - The animation to use when showing a drawer with `bottom` placement.
 * @animation drawer.showStart - The animation to use when showing a drawer with `start` placement.
 * @animation drawer.hideTop - The animation to use when hiding a drawer with `top` placement.
 * @animation drawer.hideEnd - The animation to use when hiding a drawer with `end` placement.
 * @animation drawer.hideBottom - The animation to use when hiding a drawer with `bottom` placement.
 * @animation drawer.hideStart - The animation to use when hiding a drawer with `start` placement.
 * @animation drawer.denyClose - The animation to use when a request to close the drawer is denied.
 * @animation drawer.overlay.show - The animation to use when showing the drawer's overlay.
 * @animation drawer.overlay.hide - The animation to use when hiding the drawer's overlay.
 */
declare class FlowUiDrawer extends FlowRdfElement {
    static styles: CSSResultGroup;
    private readonly hasSlotController;
    private readonly localize;
    private modal;
    private originalTrigger;
    /** @internal */
    drawer: HTMLElement;
    /** @internal */
    panel: HTMLElement;
    /** @internal */
    overlay: HTMLElement;
    /**
     * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
     * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.
     */
    open: boolean;
    /**
     * The drawer's label as displayed in the header. You should always include a relevant label even when using
     * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.
     */
    label: string;
    /** The direction from which the drawer will open. */
    placement: 'top' | 'end' | 'bottom' | 'start';
    /**
     * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
     * its parent element, set this attribute and add `position: relative` to the parent.
     */
    contained: boolean;
    /**
     * Removes the header. This will also remove the default close button, so please ensure you provide an easy,
     * accessible way for users to dismiss the drawer.
     */
    noHeader: boolean;
    connectedCallback(): void;
    firstUpdated(): void;
    disconnectedCallback(): void;
    private requestClose;
    private addOpenListeners;
    private removeOpenListeners;
    private handleDocumentKeyDown;
    /** @internal */
    handleOpenChange(): Promise<void>;
    /** @internal */
    handleNoModalChange(): void;
    /** Shows the drawer. */
    show(): Promise<void>;
    /** Hides the drawer */
    hide(): Promise<void>;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-drawer': FlowUiDrawer;
    }
}

/**
 * @tagname flow-ui-form-group
 * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
 *
 * @dependency flow-ui-button-group
 *
 * @slot - The default slot where `<flow-ui-radio>` or `<flow-ui-tool-button>` elements are placed.
 * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`
 *  attribute.
 *
 * @csspart form-control - The form control that wraps the label, input, and help text.
 * @csspart form-control-label - The label's wrapper.
 * @csspart form-control-input - The input's wrapper.
 * @csspart form-control-help-text - The help text's wrapper.
 * @csspart button-group - The button group that wraps radio buttons.
 * @csspart button-group__base - The button group's `base` part.
 */
declare class FlowUiFormGroup extends FlowRdfElement {
    static styles: CSSResultGroup;
    private readonly hasSlotController;
    /** @internal */
    defaultSlot: HTMLSlotElement;
    /** @internal - add form control class */
    class: string;
    /**
     * The form group's label. If you need to display HTML, use the `label` slot instead.
     */
    label: string;
    /** The form group's size. Child form controls will automatically be set to the selected size. */
    size: 'small' | 'medium' | 'large';
    /** The form groups's help text. If you need to display HTML, use the `help-text` slot instead. */
    helpText: string;
    /** Set to `true` to display form group borders.  */
    borders: boolean;
    /** The form group's theme variant. */
    variant: 'default' | 'warning' | 'danger';
    connectedCallback(): void;
    /** @internal */
    handleClassChange(): void;
    /** @internal */
    handleStyleChange(): void;
    private syncControls;
    private getAllControls;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-form-group': FlowUiFormGroup;
    }
}

/**
 * @tagname flow-ui-gauge
 * @summary Gauges are used to display a single value with an optional icon and heading.
 *
 * @dependency flow-ui-icon
 * @dependency flow-ui-icon-button
 * @dependency flow-ui-dialog
 * @dependency flow-ui-button
 *
 * @slot title - The gauge's title. Alternatively, you can use the `title` attribute.
 * @slot value - The gauge's value. Alternatively, you can use the `value` attribute.
 * @slot unit - Alternatively, you can use the `unit` attribute.
 * @slot info - The content to display in the gauge's info dialog. If this is set then an info button will be displayed in the gauge's header.
 *
 * @csspart base - The component's base wrapper.
 * @csspart header - The gauge's header.
 * @csspart header-icon - The icon in the gauge's header.
 * @csspart title - The title text in the gauge's header.
 * @csspart info-button - The info button in the gauge's header (if info dialog configured).
 */
declare class FlowUiGauge extends FlowRdfElement {
    static styles: CSSResultGroup;
    private readonly hasSlotController;
    private _formatter;
    private _infoDialog;
    /** The gauge title displayed in the header. Alternatively, use the `title` slot to enhance the label with HTML markup. */
    title: string;
    /** The units of the gauge value. */
    units: string;
    /** The value to display in the gauge. */
    value: string | number;
    /** The icon to display in the gauge header. */
    icon: string;
    /** The icon library to use for the icon. Uses default library if not specified. */
    iconLibrary: string;
    /** The [D3 format](https://d3js.org/d3-format#locale_format) to use when displaying numeric values. */
    format: string;
    connectedCallback(): void;
    disconnectedCallback(): void;
    /** @internal */
    handleFormatChange(): void;
    private showInfoDialog;
    private hideInfoDialog;
    private headerIconTemplate;
    private infoButtonTemplate;
    private infoDialogTemplate;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-gauge': FlowUiGauge;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-icon-button': FlowUiIconButton;
    }
}

/**
 * @tagname flow-ui-list-item
 * @summary A list item. Use with `<flow-ui-list>` to create selectable, editable, and reorderable lists.
 *
 * @dependency flow-ui-input
 * @dependency flow-ui-icon
 * @dependency flow-ui-menu
 * @dependency flow-ui-menu-item
 *
 * @slot prefix - The list item's prefix content.
 * @slot suffix - The list item's suffix content.
 * @slot menu - Specify custom menu items to add to the list item's menu.
 *
 * @event flow-ui-change - Emitted when the list item is renamed.
 * @event flow-ui-remove - Emitted when the list item is removed. Calling `event.preventDefault()` will cancel the removal.
 * @event flow-ui-select - Emitted when a menu item is selected.
 *
 * @event flow-ui-blur - Emitted when the control loses focus.
 * @event flow-ui-focus - Emitted when the control gains focus.
 *
 * @csspart base - The component's base wrapper.
 * @csspart input - The list item's flow-ui-input control.
 * @csspart prefix - The container that wraps the prefix.
 * @csspart suffix - The container that wraps the suffix.
 * @csspart reorder-icon - The list item's reorder icon.
 * @csspart menu-button - The list item's menu-button.
 *
 */
declare class FlowUiListItem extends FlowRdfElement {
    static styles: CSSResultGroup;
    private readonly hasSlotController;
    /** @internal */
    protected hasFocus: boolean;
    /** @internal */
    input: FlowUiInput;
    /** The label text for the list item. */
    label: string;
    /** The 'edit' menu item text. (default: 'Edit') */
    editMenuName: string;
    /** The list item input control's placeholder text. */
    placeholder: string;
    /** The tracking value (id) for the list item. */
    value: string;
    checked: boolean;
    /** Set to enable renaming of the list item text. */
    editable: boolean;
    /** Set to reordering of the list item. */
    reorder: boolean;
    /** Set to enable removing the list item. */
    removable: boolean;
    /** Set to enable removing the list item. */
    disabled: boolean;
    /** @internal Set to enable selection support for this list item. */
    selectable: boolean;
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    /** @deprecated Use `edit` instead */
    rename(): void;
    edit(): void;
    /** @internal */
    handleCheckedChange(): void;
    private addEventListeners;
    private removeEventListeners;
    private handleBlur;
    private handleFocus;
    private handleMenuSelect;
    private handleInputEvents;
    private handleReorderPointerDown;
    private handleReorderPointerUp;
    private handleDragStart;
    private handleDragOver;
    private handleDragEnd;
    private handleDrop;
    renderMenu(): lit_html.TemplateResult<1>;
    render(): lit_html.TemplateResult<1>;
}

/**
 * @tagname flow-ui-list
 * @summary A list of items that can be edited and reordered.
 *
 * @dependency flow-ui-list-item
 *
 * @event flow-ui-change - Emitted when a list item is renamed **or**  a list item is selected (selectable lists only).
 * @event flow-ui-input - Emitted when a list item is selected (selectable lists only).
 *
 * @event flow-ui-remove - Emitted when a list item is removed.
 * @event flow-ui-drag-start - Emitted when the user starts dragging to reorder list items.
 * @event flow-ui-drag-drop - Emitted when the user drops a list item to reorder it.
 * @event flow-ui-drag-end - Emitted when the drag-drop operation has finished or been cancelled.
 *
 * @csspart base - The component's base wrapper.
 *
 */
declare class FlowUiList extends FlowRdfElement {
    static styles: CSSResultGroup;
    private draggedItem;
    private draggedOverItem;
    /** The current selected list item. (selectable lists only) */
    value: string;
    /** Set to enable radio-button-style selection of list items. */
    selectable: boolean;
    /** Set to enable renaming of the list item text. */
    editable: boolean;
    /** Set to reordering of the list item. */
    reorder: boolean;
    /** Set to enable removing the list item. */
    removable: boolean;
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    get listItems(): FlowUiListItem[];
    /** @internal */
    handleStyleChange(): void;
    /** @internal */
    handleValueChange(): void;
    private handleItemClick;
    private handleKeyDown;
    private syncItems;
    private updateCheckedItem;
    private handleDragStart;
    private handleDragOver;
    private handleDrop;
    private handleDragEnd;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-list': FlowUiList;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-list-item': FlowUiListItem;
    }
}

/**
 * This component wraps a `FlowCoreMap` instance from the flow-rdf-core library and
 * provides access to its API.
 *
 * The `map` property provides direct access to the underlying `FlowCoreMap` instance.
 *
 * The `initialized` property provides a promise that resolves to the `FlowCoreMap` once
 * it has been initialized and is the safest way to access the map API.
 *
 * Convenience properties are provided for setting the base style, center, zoom, bearing, and pitch
 * of the map. These properties can be set to update the map or the `FlowCoreMap` API can be used directly.
 *
 *
 * @tagname flow-ui-map
 * @summary Display a Flo.w map.
 *
 * @event {CustomEvent<{ map: FlowCoreMap }>} flow-ui-map-load - Dispatched when the map is first initialized and has completed loading.
 * The Flo.w Core map instance can be retrieved from the event `detail` property.
 *
 * @csspart base - The base element of the component.
 * @csspart busy-indicator - The busy indicator flow-ui-progress-bar.
 * @csspart control-container - The map control containers.
 * @csspart control-container--top-left - The top left control container element.
 * @csspart control-container--top-right - The top right control container element.
 * @csspart control-container--bottom-left - The bottom left control container element.
 * @csspart control-container--bottom-right - The bottom right control container element.
 *
 */
declare class FlowUiMap extends FlowRdfElement {
    static styles: CSSResultGroup;
    private _map?;
    private _initialized;
    private _resolveInitialized;
    private _pendingCenter?;
    private _pendingBaseStyle?;
    private _mapLoading;
    /**
     * The map ID. If not provided, a unique ID will be generated.
     */
    mapId: string;
    /**
     * The base style of the map.
     */
    baseStyle: string;
    /**
     * The center of the map specified as a longitude and latitude pair.
     *
     * Alternatively, use the `setCenter` method to update the center of the map
     * with animation options.
     */
    center: [number, number];
    /**
     * The zoom level of the map.
     *
     * Alternatively, use the `setCenter` method to update the center of the map
     * with animation options.
     */
    zoom: number;
    /**
     * The bearing of the map.
     *
     * Alternatively, use the `setCenter` method to update the center of the map
     * with animation options.
     */
    bearing: number;
    /**
     * The pitch of the map.
     *
     * Alternatively, use the `setCenter` method to update the center of the map
     * with animation options.
     */
    pitch: number;
    /**
     * Set to `true` to show a busy indicator on the map.
     *
     * Note that the busy indicator will also be automatically be shown when the map
     * is loading data.
     */
    busy: boolean;
    /**
     * Set to `true` to apply `fixed` positioning to the map canvas.
     *
     * The map canvas will break out of its `flow-map` container to fill the entire viewport.
     * This allows side bars to be opened and closed smoothly without having to re-render the map.
     *
     * Note that the `flow-map` container will still be positioned as normal, providing a visible
     * window onto the full map.
     *
     * Use the `visibleBounds` property to retrieve the visible bounds of the map in map coordinates.
     */
    fixed: boolean;
    /**
     * Set the bearing snap threshold in degrees. Set to 0 to disable bearing snapping.
     */
    bearingSnap: number;
    /**
     * Set fade duration in milliseconds for the label collision fade-in/fade-out animation.
     */
    fadeDuration: number;
    /**
     * The underlying core FlowCoreMap instance. Note that this is
     * `undefined` until the map has been initialized.
     */
    get map(): FlowCoreMap | undefined;
    /**
     * A promise that resolves to a map instance when the map has been initialized.
     *
     * This is the safest way to retrieve the underlying core FlowCoreMap instance before
     * using its API.
     */
    get initialized(): Promise<FlowCoreMap>;
    constructor();
    /** @internal */
    handleCenterChange(): void;
    /** @internal */
    handleBaseStyleChange(): void;
    connectedCallback(): Promise<void>;
    disconnectedCallback(): void;
    private initializeMap;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-map': FlowUiMap;
    }
}

/**
 * @tagname flow-ui-menu-label
 * @summary Menu labels are used to describe a group of menu items.
 *
 * @slot - The menu label's content.
 *
 * @csspart base - The component's base wrapper.
 */
declare class FlowUiMenuLabel extends FlowRdfElement {
    static styles: CSSResultGroup;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-menu-label': FlowUiMenuLabel;
    }
}

/**
 * @tagname flow-ui-mutation-observer
 * @summary The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
 *
 * @event {{ mutationList: MutationRecord[] }} flow-ui-mutation - Emitted when a mutation occurs.
 *
 * @slot - The content to watch for mutations.
 */
declare class FlowUiMutationObserver extends FlowRdfElement {
    static styles: CSSResultGroup;
    private mutationObserver;
    /**
     * Watches for changes to attributes. To watch only specific attributes, separate them by a space, e.g.
     * `attr="class id title"`. To watch all attributes, use `*`.
     */
    attr: string;
    /** Indicates whether or not the attribute's previous value should be recorded when monitoring changes. */
    attrOldValue: boolean;
    /** Watches for changes to the character data contained within the node. */
    charData: boolean;
    /** Indicates whether or not the previous value of the node's text should be recorded. */
    charDataOldValue: boolean;
    /** Watches for the addition or removal of new child nodes. */
    childList: boolean;
    /** Disables the observer. */
    disabled: boolean;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private handleMutation;
    private startObserver;
    private stopObserver;
    /** @internal */
    handleDisabledChange(): void;
    /** @internal */
    handleChange(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-mutation-observer': FlowUiMutationObserver;
    }
}

/**
 * @tagname flow-ui-option
 * @summary Options define the selectable items within various form controls such as [select](/components/select).
 *
 * @dependency flow-ui-icon
 *
 * @slot - The option's label.
 * @slot prefix - Used to prepend an icon or similar element to the menu item.
 * @slot suffix - Used to append an icon or similar element to the menu item.
 *
 * @csspart checked-icon - The checked icon, a `<flow-ui-icon>` element.
 * @csspart base - The component's base wrapper.
 * @csspart label - The option's label.
 * @csspart prefix - The container that wraps the prefix.
 * @csspart suffix - The container that wraps the suffix.
 */
declare class FlowUiOption extends FlowRdfElement {
    static styles: CSSResultGroup;
    static dependencies: {
        'flow-ui-icon': typeof FlowUiIcon;
    };
    private cachedTextLabel;
    private readonly localize;
    /** @internal */
    defaultSlot: HTMLSlotElement;
    /** @internal */
    current: boolean;
    /** @internal */
    selected: boolean;
    /** @internal */
    hasHover: boolean;
    /**
     * The option's value. When selected, the containing form control will receive this value. The value must be unique
     * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
     * multiple values.
     */
    value: string;
    /** Draws the option in a disabled state, preventing selection. */
    disabled: boolean;
    /** The options's size. */
    size: 'small' | 'medium' | 'large';
    connectedCallback(): void;
    private handleDefaultSlotChange;
    private handleMouseEnter;
    private handleMouseLeave;
    /** @internal */
    handleDisabledChange(): void;
    /** @internal */
    handleSelectedChange(): void;
    /** @internal */
    handleValueChange(): void;
    /** @internal Returns a plain text label based on the option's content. */
    getTextLabel(): string;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-option': FlowUiOption;
    }
}

/**
 * @tagname flow-ui-panel-header
 * @summary A panel header provides a label, optional accessory controls and expand/collapse behavior for panels.
 *
 * @dependency flow-ui-split-view-toggle-button
 *
 * @slot title - The panel header's title content. Alternatively, use the `title` attribute for plain text.
 * @slot prefix - The panel header's prefix content.
 * @slot suffix - The panel header's suffix content.
 * @slot expand-icon - Specify an alternative `<flow-ui-icon>` to use for the expand icon.
 * @slot collapse-icon - Specify an alternative `<flow-ui-icon>` to use for the collapse icon.
 *
 * @event flow-ui-collapse - Emitted when the header is collapsed by UI interaction.
 * @event flow-ui-expand - Emitted when the header is expanded by UI interaction.
 *
 * @csspart base - The component's base wrapper.
 * @csspart title - The container that wraps the title.
 * @csspart prefix - The container that wraps the prefix.
 * @csspart suffix - The container that wraps the suffix.
 * @csspart toggle-icon - The container that wraps the expand/collapse icon.
 *
 *
 * @cssproperty padding - The padding around the header. Defaults to `--flow-ui-panel-header-padding`.
 * @cssproperty header-height - The height of the header. Defaults to `--flow-ui-panel-header-height`.
 * @cssproperty background-color - The background color of the header. Defaults to `--flow-ui-panel-header-background-color`.
 * @cssproperty color - The text color of the header. Defaults to `--flow-ui-panel-header-color`.
 * @cssproperty accessory-color - The color of the accessory controls. Defaults to `--flow-ui-panel-header-accessory-color`.
 */
declare class FlowUiPanelHeader extends FlowRdfElement {
    static styles: CSSResultGroup;
    private readonly hasSlotController;
    private header;
    private toggleButton;
    /**
     * Indicates whether or not the header is open or closed. Toggle this attribute to expand or collapse the header.
     * Alternatively, call the `expand()` and `collapse()` methods.
     */
    closed: boolean;
    /** The header title. Use the `title` slot instead to display HTML. */
    title: string;
    /** Set to `true` to hide the panel expand/collapse button. */
    fixed: boolean;
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    private handleHeaderClick;
    private handleAccessoryClick;
    private handleToggleClick;
    private handleHeaderKeyDown;
    private handleExpandCollapse;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-panel-header': FlowUiPanelHeader;
    }
}

/**
 * @tagname flow-ui-panel
 * @summary Panels are use with split-views to create resizable areas.
 *
 * @cssproperty --padding - Padding to add to the panel when the `padding` attribute is set. Defaults to `--flow-ui-spacing-small`.
 */
declare class FlowUiPanel extends FlowRdfElement {
    static styles: CSSResultGroup;
    formElements: Array<HTMLElement>;
    /**
     * Indicates whether the panel is open or closed.
     */
    closed: boolean;
    /**
     * Indicates whether the panel is scrollable. By default overflow is hidden.
     */
    scrollable: boolean;
    /**
     * Indicates whether the panel body has padding.
     */
    padding: boolean;
    connectedCallback(): void;
    disconnectedCallback(): void;
    /** Open the panel */
    expand(emitEvent?: boolean): Promise<void>;
    /** Close the panel */
    collapse(emitEvent?: boolean): Promise<void>;
    private handleSlotChange;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-panel': FlowUiPanel;
    }
}

/**
 * @tagname flow-ui-progress-bar
 * @summary Progress bars are used to show the status of an ongoing operation.
 *
 * @slot - A label to show inside the progress indicator.
 *
 * @csspart base - The component's base wrapper.
 * @csspart indicator - The progress bar's indicator.
 * @csspart label - The progress bar's label.
 *
 * @cssproperty --track-height - The progress bar's thickness (same as the indicator's thickness).
 * @cssproperty --track-color - The color of the track.
 * @cssproperty --indicator-color - The color of the indicator.
 */
declare class FlowUiProgressBar extends FlowRdfElement {
    static styles: CSSResultGroup;
    private readonly localize;
    /** A custom label for assistive devices. */
    label: string;
    /** The current progress as a percentage, 0 to 100. */
    value: number;
    /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
    indeterminate: boolean;
    /** The progress bar's theme variant */
    variant: 'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger';
    connectedCallback(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-progress-bar': FlowUiProgressBar;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-query-builder': FlowUiQueryBuilder;
    }
}

/**
 * @tagname flow-ui-radio-group
 * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
 *
 * @dependency flow-ui-button-group
 *
 * @slot - The default slot where `<flow-ui-radio>` or `<flow-ui-tool-button>` elements are placed.
 * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`
 *  attribute.
 *
 * @event flow-ui-change - Emitted when the radio group's selected value changes.
 * @event flow-ui-input - Emitted when the radio group receives user input.
 * @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart form-control - The form control that wraps the label, input, and help text.
 * @csspart form-control-label - The label's wrapper.
 * @csspart form-control-input - The input's wrapper.
 * @csspart form-control-help-text - The help text's wrapper.
 * @csspart button-group - The button group that wraps radio buttons.
 * @csspart button-group__base - The button group's `base` part.
 */
declare class FlowUiRadioGroup extends FlowRdfFormControl {
    static styles: CSSResultGroup;
    protected readonly formControlController: FormControlController;
    private readonly hasSlotController;
    private customValidityMessage;
    private validationTimeout;
    /** @internal */
    defaultSlot: HTMLSlotElement;
    /** @internal */
    validationInput: HTMLInputElement;
    private errorMessage;
    /** @internal */
    defaultValue: string;
    /**
     * The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
     * instead.
     */
    label: string;
    /** The radio groups's help text. If you need to display HTML, use the `help-text` slot instead. */
    helpText: string;
    /** The name of the radio group, submitted as a name/value pair with form data. */
    name: string;
    /** The current value of the radio group, submitted as a name/value pair with form data. */
    value: string;
    /** The radio group's size. This size will be applied to all child radios and radio buttons. */
    size: 'small' | 'medium' | 'large';
    /** Display the radios using a reversed style with left-aligned labels. */
    reverse: boolean;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /** Ensures a child radio is checked before allowing the containing form to submit. */
    required: boolean;
    /** @internal Indicates that a divider should be displayed below the control. */
    divider: boolean;
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    connectedCallback(): void;
    firstUpdated(): void;
    private getAllRadios;
    private handleRadioClick;
    private handleKeyDown;
    private handleLabelClick;
    private handleInvalid;
    private syncRadios;
    private updateCheckedRadio;
    /** @internal */
    handleStyleChange(): void;
    /** @internal */
    handleValueChange(): void;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message?: string): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-radio-group': FlowUiRadioGroup;
    }
}

/**
 *
 * @tagname flow-ui-radio
 * @summary Radios allow the user to select a single option from a group.
 *
 * @dependency flow-ui-icon
 *
 * @slot - The radio's label.
 *
 * @event flow-ui-blur - Emitted when the control loses focus.
 * @event flow-ui-focus - Emitted when the control gains focus.
 *
 * @csspart base - The component's base wrapper.
 * @csspart control - The circular container that wraps the radio's checked state.
 * @csspart control--checked - The radio control when the radio is checked.
 * @csspart checked-icon - The checked icon, an `<flow-ui-icon>` element.
 * @csspart label - The container that wraps the radio's label.
 */
declare class FlowUiRadio extends FlowRdfElement {
    static styles: CSSResultGroup;
    /** @internal */
    checked: boolean;
    /** @internal */
    protected hasFocus: boolean;
    /** The radio's value. When selected, the radio group will receive this value. */
    value: string;
    /**
     * The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
     * attribute can typically be omitted.
     */
    size: 'small' | 'medium' | 'large';
    /** The radio's variant color. */
    variant: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
    /** Disables the radio. */
    disabled: boolean;
    /** Display the radio using a reversed style with left-aligned label. */
    reverse: boolean;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private addEventListeners;
    private removeEventListeners;
    private handleBlur;
    private handleClick;
    private handleFocus;
    private setInitialAttributes;
    /** @internal */
    handleCheckedChange(): void;
    /** @internal */
    handleDisabledChange(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-radio': FlowUiRadio;
    }
}

/**
 * @tagname flow-ui-range
 * @summary Ranges allow the user to select a single value within a given range using a slider.
 *
 * @slot label - The range's label. Alternatively, you can use the `label` attribute.
 * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
 *
 * @event flow-ui-blur - Emitted when the control loses focus.
 * @event flow-ui-change - Emitted when an alteration to the control's value is committed by the user.
 * @event flow-ui-focus - Emitted when the control gains focus.
 * @event flow-ui-input - Emitted when the control receives input.
 * @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart form-control - The form control that wraps the label, input, and help text.
 * @csspart form-control-label - The label's wrapper.
 * @csspart form-control-input - The range's wrapper.
 * @csspart form-control-help-text - The help text's wrapper.
 * @csspart base - The component's base wrapper.
 * @csspart number-input - The range's number input control.
 *
 * @cssproperty --thumb-size - The size of the thumb.
 * @cssproperty --track-color-active - The color of the portion of the track that represents the current value.
 * @cssproperty --track-color-inactive - The of the portion of the track that represents the remaining value.
 * @cssproperty --track-height - The height of the track.
 * @cssproperty --track-active-offset - The point of origin of the active track.
 */
declare class FlowUiRange extends FlowRdfFormControl {
    static styles: CSSResultGroup;
    private readonly formControlController;
    private readonly hasSlotController;
    private readonly localize;
    private resizeObserver;
    /** @internal */
    input: HTMLInputElement;
    /** @internal */
    numberInput: HTMLInputElement;
    private hasFocus;
    /** @internal */
    title: string;
    /** The name of the range, submitted as a name/value pair with form data. */
    name: string;
    /** The current value of the range, submitted as a name/value pair with form data. */
    value: number;
    /** The input's size. */
    size: 'small' | 'medium' | 'large';
    /** The range's label. If you need to display HTML, use the `label` slot instead. */
    label: string;
    /** The range's help text. If you need to display HTML, use the help-text slot instead. */
    helpText: string;
    /** Disables the range. */
    disabled: boolean;
    /** The minimum acceptable value of the range. */
    min: number;
    /** The maximum acceptable value of the range. */
    max: number;
    /** The interval at which the range will increase and decrease. */
    step: number;
    /** Number format to use for numeric display. (D3 format string) */
    format: string;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /** The default value of the form control. Primarily used for resetting the form control. */
    defaultValue: number;
    /**
     * Display the control in the 'inline' form control style.
     */
    inline: boolean;
    /** @internal Indicates that a divider should be displayed below the control. */
    divider: boolean;
    noInput: boolean;
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private handleRangeChange;
    private handleRangeInput;
    private handleNumberChange;
    private handleBlur;
    private handleFocus;
    private handleThumbDragStart;
    private handleThumbDragEnd;
    private syncProgress;
    /** @internal */
    handleValueChange(): void;
    /** @internal */
    handleDisabledChange(): void;
    /** @internal */
    syncRange(): void;
    private handleRangeInvalid;
    /** Sets focus on the range. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the range. */
    blur(): void;
    /** Increments the value of the range by the value of the step attribute. */
    stepUp(): void;
    /** Decrements the value of the range by the value of the step attribute. */
    stepDown(): void;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message: string): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-range': FlowUiRange;
    }
}

/**
 * @tagname flow-ui-resize-observer
 * @summary The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
 *
 * @slot - One or more elements to watch for resizing.
 *
 * @event {CustomEvent<{entries: ResizeObserverEntry[]}>} flow-ui-resize - Emitted when the element is resized.
 */
declare class FlowUiResizeObserver extends FlowRdfElement {
    static styles: CSSResultGroup;
    private resizeObserver;
    private observedElements;
    /** Disables the observer. */
    disabled: boolean;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private handleSlotChange;
    private startObserver;
    private stopObserver;
    /** @internal */
    handleDisabledChange(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-resize-observer': FlowUiResizeObserver;
    }
}

/**
 * @internal Hide for now
 *
 * @tagname flow-ui-scroll-view
 * @summary Scroll views provide a scrollable area for content.
 */
declare class FlowUiScrollView extends FlowRdfElement {
    static styles: CSSResultGroup;
    private _scrollHost;
    private _scrollViewport;
    private _overlayScrollbars?;
    private readonly _componentId;
    mode?: 'native' | 'overlay';
    overflowX?: 'hidden' | 'scroll' | 'visible' | 'visible-hidden' | 'visible-scroll';
    overflowY?: 'hidden' | 'scroll' | 'visible' | 'visible-hidden' | 'visible-scroll';
    autoHide?: 'never' | 'scroll' | 'leave' | 'move';
    autoHideDelay?: number;
    autoHideSuspend?: boolean;
    connectedCallback(): void;
    firstUpdated(): void;
    updateScrollBars(): void;
    updated(_changedProperties: Map<string, unknown>): void;
    disconnectedCallback(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-scroll-view': FlowUiScrollView;
    }
}

/**
 * @tagname flow-ui-select
 * @summary Selects allow you to choose items from a menu of predefined options.
 * @documentation https://shoelace.style/components/select
 * @status stable
 * @since 2.0
 *
 * @dependency flow-icon
 * @dependency flow-popup
 * @dependency flow-tag
 *
 * @slot - The listbox options. Must be `<flow-option>` elements. You can use `<flow-divider>` to group items visually.
 * @slot label - The input's label. Alternatively, you can use the `label` attribute.
 * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
 * @slot suffix - Used to append a presentational icon or similar element to the combobox.
 * @slot clear-icon - An icon to use in lieu of the default clear icon.
 * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
 * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
 *
 * @event flow-ui-change - Emitted when the control's value changes.
 * @event flow-ui-clear - Emitted when the control's value is cleared.
 * @event flow-ui-input - Emitted when the control receives input.
 * @event flow-ui-focus - Emitted when the control gains focus.
 * @event flow-ui-blur - Emitted when the control loses focus.
 * @event flow-ui-show - Emitted when the select's menu opens.
 * @event flow-ui-after-show - Emitted after the select's menu opens and all animations are complete.
 * @event flow-ui-hide - Emitted when the select's menu closes.
 * @event flow-ui-after-hide - Emitted after the select's menu closes and all animations are complete.
 * @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart form-control - The form control that wraps the label, input, and help text.
 * @csspart form-control-label - The label's wrapper.
 * @csspart form-control-input - The select's wrapper.
 * @csspart form-control-help-text - The help text's wrapper.
 * @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
 * @csspart prefix - The container that wraps the prefix slot.
 * @csspart suffix - The container that wraps the suffix slot.
 * @csspart display-input - The element that displays the selected option's label, an `<input>` element.
 * @csspart listbox - The listbox container where options are slotted.
 * @csspart tags - The container that houses option tags when `multiselect` is used.
 * @csspart tag - The individual tags that represent each multiselect option.
 * @csspart tag__base - The tag's base part.
 * @csspart tag__content - The tag's content part.
 * @csspart tag__remove-button - The tag's remove button.
 * @csspart tag__remove-button__base - The tag's remove button base part.
 * @csspart clear-button - The clear button.
 * @csspart expand-icon - The container that wraps the expand icon.
 */
declare class FlowUiSelect extends FlowRdfFormControl {
    static styles: CSSResultGroup;
    static dependencies: {
        'flow-icon': typeof FlowUiIcon;
        'flow-popup': typeof FlowUiPopup;
        'flow-tag': typeof FlowUiTag;
    };
    private readonly formControlController;
    private readonly hasSlotController;
    private readonly localize;
    private typeToSelectString;
    private typeToSelectTimeout;
    private closeWatcher;
    private mutationObserver;
    private mouseDownAt;
    private popup;
    private displayInput;
    private valueInput;
    private listbox;
    private hasFocus;
    private displayLabel;
    private currentOption;
    private selectedOptions;
    /** The name of the select, submitted as a name/value pair with form data. */
    name: string;
    /**
     * The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the
     * value attribute will be a space-delimited list of values based on the options selected, and the value property will
     * be an array. **For this reason, values must not contain spaces.**
     */
    value: string | string[];
    /** The default value of the form control. Primarily used for resetting the form control. */
    defaultValue: string | string[];
    /** The select's size. */
    size: 'small' | 'medium' | 'large';
    /** Placeholder text to show as a hint when the select is empty. */
    placeholder: string;
    /** Allows more than one option to be selected. */
    multiple: boolean;
    /**
     * The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to
     * indicate the number of additional items that are selected. Set to 0 to remove the limit.
     */
    maxOptionsVisible: number;
    /** Disables the select control. */
    disabled: boolean;
    /** Adds a clear button when the select is not empty. */
    clearable: boolean;
    /**
     * Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can
     * use the `show()` and `hide()` methods and this attribute will reflect the select's open state.
     */
    open: boolean;
    /** Draws a filled input. */
    filled: boolean;
    /**
     * Display the select in the 'inline' form control style.
     */
    inline: boolean;
    /**
     * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
     * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
     */
    hoist: boolean;
    /** Draws a pill-style select with rounded edges. */
    pill: boolean;
    /** The select's label. If you need to display HTML, use the `label` slot instead. */
    label: string;
    /**
     * The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox
     * inside of the viewport.
     */
    placement: 'top' | 'bottom';
    sync: 'width' | 'none';
    /** The select's help text. If you need to display HTML, use the `help-text` slot instead. */
    helpText: string;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /** The select's required attribute. */
    required: boolean;
    /** @internal Indicates that a divider should be displayed below the control. */
    divider: boolean;
    /**
     * A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second
     * is the current tag's index.  The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at
     * the specified value.
     */
    getTag: (option: FlowUiOption, index: number) => TemplateResult | string | HTMLElement;
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private addOpenListeners;
    private removeOpenListeners;
    private handleFocus;
    private handleBlur;
    private handleDocumentFocusIn;
    private handleDocumentKeyDown;
    private handleDocumentMouseDown;
    private handleLabelClick;
    private handleComboboxMouseDown;
    private handleComboboxKeyDown;
    private handleClearClick;
    private handleClearMouseDown;
    private handleOptionClick;
    private handleDefaultSlotChange;
    private handleTagRemove;
    private getAllOptions;
    private getFirstOption;
    private setCurrentOption;
    private setSelectedOptions;
    private toggleOptionSelection;
    private selectionChanged;
    protected get tags(): TemplateResult<1>[];
    private handleInvalid;
    /** @internal */
    handleDisabledChange(): void;
    /** @internal */
    handleValueChange(): void;
    /** @internal */
    handleSizeChange(): void;
    /** @internal */
    handleOpenChange(): Promise<void>;
    private syncOptions;
    /** Shows the listbox. */
    show(): Promise<void>;
    /** Hides the listbox. */
    hide(): Promise<void>;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message: string): void;
    /** Sets focus on the control. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the control. */
    blur(): void;
    render(): TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-select': FlowUiSelect;
    }
}

/**
 * @tagname flow-ui-split-view-divider
 * @summary Split-view dividers are used internally by split-views to create resizable areas.
 */
declare class FlowUiSplitViewDivider extends FlowRdfElement {
    static styles: CSSResultGroup;
    private dragCanceller;
    /** Disables user interaction with the split pane divider. */
    disabled: boolean;
    /** Draws the divider for vertically-arranged panes */
    vertical: boolean;
    connectedCallback(): void;
    disconnectedCallback(): void;
    /** @internal */
    cancelDrag(): void;
    private handleDrag;
    private closestElement;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-split-view-divider': FlowUiSplitViewDivider;
    }
}

/**
 * @tagname flow-ui-split-view-pane
 * @summary Split-view panes are used with split-views to create resizable areas.
 */
declare class FlowUiSplitViewPane extends FlowRdfElement {
    static styles: CSSResultGroup;
    private readonly attrId;
    private readonly componentId;
    private dividerComponent?;
    /** Set to `true` for vertically-arranged panes. */
    vertical: boolean;
    /** Set the initial size of the split pane in CSS px or % units */
    size: string;
    /** Set the minimum size of the split pane in CSS px or % units */
    minSize: string;
    /** Set the maximum size of the split pane in CSS px or % units */
    maxSize: string;
    /** Set the closed size split pane in CSS px or % units */
    closedSize: string;
    /**
     * Indicates if the split-view pane is open or closed.
     */
    closed: boolean;
    /**
     * Indicates if the split-view pane has a divider.
     */
    divider: boolean;
    /**
     * Indicates if the split-view pane is hidden.
     */
    hidden: boolean;
    connectedCallback(): void;
    disconnectedCallback(): void;
    /** @internal */
    cancelDrag(): void;
    /** Open the split pane. */
    expand(emitEvent?: boolean): Promise<void>;
    /** Close the split pane. */
    collapse(emitEvent?: boolean): Promise<void>;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-split-view-pane': FlowUiSplitViewPane;
    }
}

/**
 * @tagname flow-ui-split-view-toggle-button
 * @summary Use a split panel toggle button to control a parent panel's open/closed state
 */
declare class FlowUiSplitViewToggleButton extends FlowUiIconButton {
    static styles: lit.CSSResultGroup[];
    private parentPane;
    private parentPanelObserver;
    /**
     * The icon to use for the button.
     */
    name?: string | undefined;
    /** The icon library to use for the button icon. */
    library?: string | undefined;
    /**
     * Set to control the open/closed state of the parent split pane.
     */
    closed: boolean;
    connectedCallback(): void;
    disconnectedCallback(): void;
    toggle(emitEvents?: boolean): void;
    protected handleClick(event: MouseEvent): void;
    private closestElement;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-split-view-toggle-button': FlowUiSplitViewToggleButton;
    }
}

/**
 * @tagname flow-ui-split-view
 * @summary Split-views contain two or more split-view panes to create resizable areas.
 */
declare class FlowUiSplitView extends FlowRdfElement {
    private _panelLayouts;
    static styles: CSSResultGroup;
    private _panels;
    private dragTargetPanel?;
    private mutationObserver;
    private resizeObserver;
    private animatingPanelIndex?;
    /** @internal */
    panelSlot: HTMLSlotElement;
    /** @internal */
    splitView: HTMLElement;
    /** Disable drag-to-close behaviour. */
    noDragClose: boolean;
    /** The pane positions in CSS size units */
    positions: string[];
    /** Set to `true` for vertically-arranged panes. By default, panes are layed out horizontally. */
    vertical: boolean;
    /** @internal */
    dragging: boolean;
    connectedCallback(): void;
    disconnectedCallback(): void;
    render(): lit_html.TemplateResult<1>;
    private actualPanelSize;
    /**
     * Grow panels starting from startIndex in specified direction by resizing panels
     * up to their maximum size and (optionally) opening panels.
     *
     * @param startIndex panel index to start growing from
     * @param direction 1 (right/down) or -1 (left/up)
     * @param caOpen whether panels can be opened to grow space
     * @param amount Number of pixels to grow by
     * @param dryRun if true, don't actually row panels, just calculate the amount that can be grown
     */
    private growPanels;
    private handleCollapseExpand;
    /**
     * This is called repeatedly as the user drags a panel divider.
     *
     * @param event
     *
     */
    private handleDrag;
    private handleDragEnd;
    private handleDragStart;
    private handlePointerLeave;
    private handleTransitionEnd;
    private isPanel;
    private layoutPanels;
    private layoutAutoPanels;
    private resizePanels;
    /**
     * Shrink panels starting from startIndex in specified direction by resizing panels
     * down to their minimum size and (optionally) closing panels.
     *
     * @param startIndex panel index to start shrinking from
     * @param direction 1 (right/down) or -1 (left/up)
     * @param canClose whether panels can be closed to make space
     * @param amount Number of pixels to shrink by
     * @param dryRun if true, don't actually shrink panels, just calculate the amount that can be shrunk
     */
    private shrinkPanels;
    private sizeToPixels;
    private handlePanelAdded;
    private handlePanelRemoved;
    private updatePanelInfo;
    private panelLayoutsKey;
    private savePanelLayouts;
    private restorePanelLayouts;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-split-view': FlowUiSplitView;
    }
}

/**
 * @tagname flow-ui-stepper-panel
 * @summary Stepper panels provide a single page in a stepper to guide users through a series of steps.
 */
declare class FlowUiStepperPanel extends FlowRdfElement {
    static styles: CSSResultGroup;
    private readonly attrId;
    private readonly componentId;
    /** The tab panel's name. */
    name: string;
    /** The stepper panel's sub-title. */
    subTitle: string;
    /** When true, the stepper panel will be shown. */
    active: boolean;
    /** When true, the stepper panel is marked as complete */
    complete: boolean;
    connectedCallback(): void;
    /** @internal */
    handleStateChange(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-stepper-panel': FlowUiStepperPanel;
    }
}

/**
 * @tagname flow-ui-stepper
 * @summary Steppers are used to guide users through a series of steps in a wizard-like UI.
 */
declare class FlowUiStepper extends FlowRdfElement {
    static styles: CSSResultGroup;
    private bodySlot;
    private headerScrollContainer;
    private readonly attrId;
    private readonly componentId;
    private activePanel?;
    private mutationObserver;
    private panels;
    connectedCallback(): void;
    /** Mark the specified panel as `complete` */
    setComplete(panelName: string, complete?: boolean): void;
    show(panelName: string): void;
    private syncPanels;
    private getAllPanels;
    private setActivePanel;
    private renderHeaderItem;
    private renderHeader;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-stepper': FlowUiStepper;
    }
}

/**
 * @tagname flow-ui-switch
 * @summary Switches allow the user to toggle an option on or off.
 *
 * @slot - The switch's label.
 *
 * @event flow-ui-blur - Emitted when the control loses focus.
 * @event flow-ui-change - Emitted when the control's checked state changes.
 * @event flow-ui-input - Emitted when the control receives input.
 * @event flow-ui-focus - Emitted when the control gains focus.
 * @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart base - The component's base wrapper.
 * @csspart control - The control that houses the switch's thumb.
 * @csspart thumb - The switch's thumb.
 * @csspart label - The switch's label.
 *
 * @cssproperty --width - The width of the switch.
 * @cssproperty --height - The height of the switch.
 * @cssproperty --thumb-size - The size of the thumb.
 */
declare class FlowUiSwitch extends FlowRdfFormControl {
    static styles: CSSResultGroup;
    private readonly formControlController;
    private readonly hasSlotController;
    private input;
    private hasFocus;
    /** @internal */
    label: string;
    /** The name of the switch, submitted as a name/value pair with form data. */
    name: string;
    /** The current value of the switch, submitted as a name/value pair with form data. */
    value: string;
    /** The switch's size. */
    size: 'small' | 'medium' | 'large';
    /** Disables the switch. */
    disabled: boolean;
    /** Draws the switch in a checked state. */
    checked: boolean;
    /** The default value of the form control. Primarily used for resetting the form control. */
    defaultChecked: boolean;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /** Makes the switch a required field. */
    required: boolean;
    /** The select's help text. If you need to display HTML, use the `help-text` slot instead. */
    helpText: string;
    /** Indicates that the control should display a divider */
    divider: boolean;
    connectedCallback(): void;
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    firstUpdated(): void;
    private handleBlur;
    private handleInput;
    private handleInvalid;
    private handleClick;
    private handleFocus;
    private handleKeyDown;
    /** @internal */
    handleCheckedChange(): void;
    /** @internal */
    handleDisabledChange(): void;
    /** Simulates a click on the switch. */
    click(): void;
    /** Sets focus on the switch. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the switch. */
    blur(): void;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message: string): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-switch': FlowUiSwitch;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-tab-group': FlowUiTabGroup;
    }
}

/**
 * @tagname flow-ui-tab-panel
 * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.

 *
 * @slot - The tab panel's content.
 *
 * @csspart base - The component's base wrapper.
 *
 * @cssproperty --padding - The tab panel's padding.
 */
declare class FlowUiTabPanel extends FlowRdfElement {
    static styles: CSSResultGroup;
    private readonly attrId;
    private readonly componentId;
    /** The tab panel's name. */
    name: string;
    /** When true, the tab panel will be shown. */
    active: boolean;
    /**
     * Indicates whether the panel is scrollable. By default overflow is hidden.
     */
    scrollable: boolean;
    /**
     * Indicates whether the panel body has padding.
     */
    padding: boolean;
    connectedCallback(): void;
    /** @internal */
    handleActiveChange(): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-tab-panel': FlowUiTabPanel;
    }
}

/**
 * @tagname flow-ui-textarea
 * @summary Textareas collect data from the user and allow multiple lines of text.
 *
 * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
 * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
 *
 * @event flow-ui-blur - Emitted when the control loses focus.
 * @event flow-ui-change - Emitted when an alteration to the control's value is committed by the user.
 * @event flow-ui-focus - Emitted when the control gains focus.
 * @event flow-ui-input - Emitted when the control receives input.
 * @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart form-control - The form control that wraps the label, input, and help text.
 * @csspart form-control-label - The label's wrapper.
 * @csspart form-control-input - The input's wrapper.
 * @csspart form-control-help-text - The help text's wrapper.
 * @csspart base - The component's base wrapper.
 * @csspart textarea - The internal `<textarea>` control.
 */
declare class FlowUiTextarea extends FlowRdfFormControl {
    static styles: CSSResultGroup;
    private readonly formControlController;
    private readonly hasSlotController;
    private resizeObserver;
    /** @internal */
    input: HTMLTextAreaElement;
    private hasFocus;
    /** @internal */
    title: string;
    /** The name of the textarea, submitted as a name/value pair with form data. */
    name: string;
    /** The current value of the textarea, submitted as a name/value pair with form data. */
    value: string;
    /** The textarea's size. */
    size: 'small' | 'medium' | 'large';
    /** Draws a filled textarea. */
    filled: boolean;
    /** The textarea's label. If you need to display HTML, use the `label` slot instead. */
    label: string;
    /** The textarea's help text. If you need to display HTML, use the `help-text` slot instead. */
    helpText: string;
    /** Placeholder text to show as a hint when the input is empty. */
    placeholder: string;
    /** The number of rows to display by default. */
    rows: number;
    /** Controls how the textarea can be resized. */
    resize: 'none' | 'vertical' | 'auto';
    /** Disables the textarea. */
    disabled: boolean;
    /** Makes the textarea readonly. */
    readonly: boolean;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /** Makes the textarea a required field. */
    required: boolean;
    /** The minimum length of input that will be considered valid. */
    minlength: number;
    /** The maximum length of input that will be considered valid. */
    maxlength: number;
    /** Controls whether and how text input is automatically capitalized as it is entered by the user. */
    autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
    /** Indicates whether the browser's autocorrect feature is on or off. */
    autocorrect: string;
    /**
     * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
     * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
     */
    autocomplete: string;
    /** Indicates that the input should receive focus on page load. */
    autofocus: boolean;
    /** Used to customize the label or icon of the Enter key on virtual keyboards. */
    enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
    /** Enables spell checking on the textarea. */
    spellcheck: boolean;
    /**
     * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
     * keyboard on supportive devices.
     */
    inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
    /** The default value of the form control. Primarily used for resetting the form control. */
    defaultValue: string;
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    connectedCallback(): void;
    firstUpdated(): void;
    disconnectedCallback(): void;
    private handleBlur;
    private handleChange;
    private handleFocus;
    private handleInput;
    private handleInvalid;
    private setTextareaHeight;
    /** @internal */
    handleDisabledChange(): void;
    /** @internal */
    handleRowsChange(): void;
    /** @internal */
    handleValueChange(): Promise<void>;
    /** Sets focus on the textarea. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the textarea. */
    blur(): void;
    /** Selects all the text in the textarea. */
    select(): void;
    /** Gets or sets the textarea's scroll position. */
    scrollPosition(position?: {
        top?: number;
        left?: number;
    }): {
        top: number;
        left: number;
    } | undefined;
    /** Sets the start and end positions of the text selection (0-based). */
    setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none'): void;
    /** Replaces a range of text with a new string. */
    setRangeText(replacement: string, start?: number, end?: number, selectMode?: 'select' | 'start' | 'end' | 'preserve'): void;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message: string): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-textarea': FlowUiTextarea;
    }
}

/**
 * The timer component is the primary time control for Flo.w time-based visualizations. The current timer value is typically bound to a reactive state property
 * so that reactive queries and computed state will be re-evaluated when the timer changes.
 *
 * The timer value is an ISO8601 date/time string.
 *
 * The timer operates in two modes:
 *
 * - running - the timer is set to 'real time' and updates every second.
 * - paused - the timer is set to a specific time and does not update automatically.
 *
 * Selecting a date/time with the timer step controls or the popup calendar will set the timer to paused mode.
 * Clicking the play button switches the timer to 'real time' running mode.
 * The mode can also be set programmatically using the `running` attribute.
 *
 * @tagname flow-ui-timer
 * @summary The timer component is the primary time control for Flo.w time-based visualizations.
 *
 * @event flow-ui-change - Emitted when the control's value changes.
 * @event flow-ui-input - Emitted when the control receives input.
 */
declare class FlowUiTimer extends FlowRdfElement {
    static styles: CSSResultGroup;
    private ticker;
    private tickerSubscription;
    private minorStepDuration;
    private majorStepDuration;
    private dropdown;
    private calendar;
    private _displayDateTime;
    /**
     * The value of the timer. (ISO8601 date/time string)
     */
    value: string;
    /**
     * The timezone to use for display. (IANA timezone string).
     * If not set, the timezone will be the browser's local timezone.
     */
    timezone?: string;
    /**
     * The locale to use for display. (IETF BCP 47 language tag).
     * If not set, the locale will be the browser's default locale.
     */
    locale?: string;
    /**
     * Set to `true` to start the timer running.
     */
    running: boolean;
    /**
     * The date format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).
     */
    dateFormat: string;
    /**
     * The day format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).
     */
    dayFormat: string;
    /**
     * The time format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).
     */
    timeFormat: string;
    /**
     * The timezone format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).
     */
    zoneFormat: string;
    /**
     * The major step size to use for the timer step controls.
     */
    majorStep: string;
    /**
     * The minor step size to use for the timer step controls.
     */
    minorStep: string;
    /**
     * The timer update interval.
     */
    updateInterval: string;
    /**
     * Set to `true` to hide the timezone display.
     */
    hideZone: boolean;
    /**
     * The placement of the calendar popup relative to the timer control.
     */
    placement: 'top' | 'top-end' | 'top-start' | 'bottom' | 'bottom-start' | 'bottom-end';
    connectedCallback(): void;
    disconnectedCallback(): void;
    /** @internal */
    updateDisplayValue(): void;
    /** @internal */
    updateParsedSteps(): void;
    /** @internal */
    updateUpdateInterval(): void;
    /** @internal */
    updateRunning(): void;
    private setDisplayDateTime;
    private handleDateTimeKeyDown;
    private handleCalendarChange;
    private handlePlayPauseClicked;
    private handleStepClicked;
    private debouncedEmitChange;
    private formattedDisplayDateTime;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-timer': FlowUiTimer;
    }
}

/**
 * @tagname flow-ui-tool-button-group
 * @summary Tool buttons groups are used to build toolbars from [tool buttons](./flow-ui-tool-button).
 *
 * @event flow-ui-change - Emitted when the control's value changes.
 * @event flow-ui-input - Emitted when the control receives input.
 */
declare class FlowUiToolButtonGroup extends FlowRdfFormControl {
    static styles: CSSResultGroup;
    /** @internal */
    protected readonly formControlController: FormControlController;
    private customValidityMessage;
    private validationTimeout;
    private validationInput;
    private errorMessage;
    /**
     * The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
     * instead.
     */
    label: string;
    /** The name of the tool button group, submitted as a name/value pair with form data. */
    name: string;
    /**
     * The current value of the tool button group, submitted as a name/value pair with form data. When `checkbox` mode is enabled, the
     * value will be a space-delimited list of values based on the checked tool buttons.
     */
    value: string | string[];
    /** The radio group's size. This size will be applied to all child radios and radio buttons. */
    size: 'x-small' | 'small' | 'medium' | 'large';
    /** Draws pill-style tool buttons. This style will be applied to all child tool buttons. */
    pill: boolean;
    /** Draws outline-style tool buttons. This style will be applied to all child tool buttons. */
    outline: boolean;
    variant: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /**
     * Use vertical layout for the radio group.
     */
    vertical: boolean;
    mode: 'radio' | 'checkbox';
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    connectedCallback(): void;
    firstUpdated(): void;
    private getAllToolButtons;
    private handleButtonClick;
    private handleKeyDown;
    private handleInvalid;
    private syncButtons;
    private updateCheckedButtons;
    /** @internal */
    handleSizeChange(): void;
    /** @internal */
    handleOutlineChange(): void;
    /** @internal */
    handleVariantChange(): void;
    /** @internal */
    handlePillChange(): void;
    /** @internal */
    handleValueChange(): void;
    /** @internal */
    updateTabbableState(): void;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message?: string): void;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-tool-button-group': FlowUiToolButtonGroup;
    }
}

/**
 * @tagname flow-ui-tool-button
 * @summary Tool buttons are used to build [toolbars](./flow-ui-tool-button-group). They can be used to toggle a state or perform an action.
 *
 * @dependency flow-ui-icon
 * @dependency flow-ui-tooltip
 *
 * @slot prefix - A presentational prefix icon or similar element.
 * @slot suffix - A presentational suffix icon or similar element.
 * @slot icon - The tool button's icon.
 * @slot tooltip - The tool button's tooltip content.
 *
 * @csspart base - The component's base wrapper.
 * @csspart button - The button element.
 * @csspart button--checked - The button element when checked.
 * @csspart tooltip - The tooltip element.
 * @csspart prefix - The prefix slot.
 * @csspart suffix - The suffix slot.
 * @csspart label-wrapper - The wrapper that contains the icon and label.
 * @csspart icon - The icon slot. Alternatively, you can use the `icon` attribute.
 * @csspart label - The button label.

 */
declare class FlowUiToolButton extends FlowRdfElement {
    static styles: CSSResultGroup;
    private readonly hasSlotController;
    /** @internal */
    input: HTMLInputElement;
    /** @internal */
    hiddenInput: HTMLInputElement;
    protected hasFocus: boolean;
    /**
     * @internal The radio button's checked state. This is exposed as an "internal" attribute so we can reflect it, making
     * it easier to style in button groups.
     */
    checked: boolean;
    /** The radio's value. When selected, the radio group will receive this value. */
    value: string;
    /** Disables the radio button. */
    disabled: boolean;
    /**
     * The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so
     * this attribute can typically be omitted.
     */
    size: 'x-small' | 'small' | 'medium' | 'large';
    /** Draws a pill-style radio button with rounded edges. */
    pill: boolean;
    /** Draws an tool button with with an outline. */
    outline: boolean;
    /**
     * Tooltip text that gets displayed when the user hovers over the button. If you need to display HTML, use the
     * `tooltip` slot instead.
     */
    tooltip: string;
    /**
     * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
     * inside of the viewport.
     */
    tooltipPlacement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
    /** The distance in pixels from which to offset the tooltip away from the button. */
    tooltipDistance: number;
    /** The distance in pixels from which to offset the tooltip along the button. */
    tooltipSkidding: number;
    /**
     * Specify an icon by name to display above the tool button label. Available names depend on the icon library being used.
     */
    icon?: string;
    /**
     * Specify an external SVG file to display as an icon above the tool button label.
     */
    iconSrc?: string;
    /**
     * The name of a registered custom icon library.
     */
    iconLibrary: string;
    variant: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
    connectedCallback(): void;
    private handleBlur;
    private handleClick;
    private handleFocus;
    /** @internal */
    handleDisabledChange(): void;
    /** Sets focus on the radio button. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the radio button. */
    blur(): void;
    private renderWithTooltip;
    render(): TemplateResult;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-tool-button': FlowUiToolButton;
    }
}

/**
 * @tagname flow-ui-tree-item
 * @summary A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).
 *
 * @dependency flow-ui-checkbox
 * @dependency flow-ui-icon
 * @dependency flow-ui-progress-ring
 *
 * @event flow-ui-expand - Emitted when the tree item expands.
 * @event flow-ui-after-expand - Emitted after the tree item expands and all animations are complete.
 * @event flow-ui-collapse - Emitted when the tree item collapses.
 * @event flow-ui-after-collapse - Emitted after the tree item collapses and all animations are complete.
 * @event flow-ui-lazy-change - Emitted when the tree item's lazy state changes.
 * @event flow-ui-lazy-load - Emitted when a lazy item is selected. Use this event to asynchronously load data and append
 *  items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading
 *  state and update the tree.
 *
 * @slot - The default slot.
 * @slot expand-icon - The icon to show when the tree item is expanded.
 * @slot collapse-icon - The icon to show when the tree item is collapsed.
 *
 * @csspart base - The component's base wrapper.
 * @csspart item - The tree item's container. This element wraps everything except slotted tree item children.
 * @csspart item--disabled - Applied when the tree item is disabled.
 * @csspart item--expanded - Applied when the tree item is expanded.
 * @csspart item--indeterminate - Applied when the selection is indeterminate.
 * @csspart item--selected - Applied when the tree item is selected.
 * @csspart indentation - The tree item's indentation container.
 * @csspart expand-button - The container that wraps the tree item's expand button and spinner.
 * @csspart label - The tree item's label.
 * @csspart children - The container that wraps the tree item's nested children.
 * @csspart checkbox - The checkbox that shows when using multiselect.
 * @csspart checkbox__base - The checkbox's exported `base` part.
 * @csspart checkbox__control - The checkbox's exported `control` part.
 * @csspart checkbox__control--checked - The checkbox's exported `control--checked` part.
 * @csspart checkbox__control--indeterminate - The checkbox's exported `control--indeterminate` part.
 * @csspart checkbox__checked-icon - The checkbox's exported `checked-icon` part.
 * @csspart checkbox__indeterminate-icon - The checkbox's exported `indeterminate-icon` part.
 * @csspart checkbox__label - The checkbox's exported `label` part.
 */
declare class FlowUiTreeItem extends FlowRdfElement {
    static styles: CSSResultGroup;
    /** @internal */
    static isTreeItem(node: Node): boolean;
    private readonly localize;
    /** @internal */
    indeterminate: boolean;
    /** @internal */
    isLeaf: boolean;
    /** @internal */
    loading: boolean;
    /** @internal */
    selectable: boolean;
    /**
     * The tree-items's value. When selected, the containing tree control will receive this value. The value must be unique
     * from other tree-items in the same tree. Values may not contain spaces, as spaces are used as delimiters when listing
     * multiple values.
     */
    value: string;
    /** Expands the tree item. */
    expanded: boolean;
    /** Draws the tree item in a selected state. */
    selected: boolean;
    /** Disables the tree item. */
    disabled: boolean;
    /** Enables lazy loading behavior. */
    lazy: boolean;
    /** The select's size. */
    size: 'small' | 'medium' | 'large';
    /** Set to `true` to visually hide the tree item. */
    hidden: boolean;
    /** @internal */
    defaultSlot: HTMLSlotElement;
    /** @internal */
    childrenSlot: HTMLSlotElement;
    /** @internal */
    itemElement: HTMLDivElement;
    /** @internal */
    childrenContainer: HTMLDivElement;
    /** @internal */
    expandButtonSlot: HTMLSlotElement;
    connectedCallback(): void;
    firstUpdated(): void;
    /** @internal */
    handleValueChange(): void;
    private animateCollapse;
    private isNestedItem;
    private handleChildrenSlotChange;
    protected willUpdate(changedProperties: PropertyValueMap<FlowUiTreeItem> | Map<PropertyKey, unknown>): void;
    private animateExpand;
    /** @internal */
    handleLoadingChange(): void;
    /** @internal */
    handleDisabledChange(): void;
    /** @internal */
    handleSelectedChange(): void;
    /** @internal */
    handleExpandedChange(): void;
    /** @internal */
    handleExpandAnimation(): void;
    /** @internal */
    handleLazyChange(): void;
    /** Gets all the nested tree items in this node. */
    getChildrenItems({ includeDisabled }?: {
        includeDisabled?: boolean;
    }): FlowUiTreeItem[];
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-tree-item': FlowUiTreeItem;
    }
}

/**
 * @tagname flow-ui-tree
 * @summary Trees allow you to display a hierarchical list of selectable [tree items](./flow-ui-tree-item). Items with children can be expanded and collapsed as desired by the user.
 *
 * @event flow-ui-input - Emitted when a tree item is selected or deselected.
 * @event flow-ui-change - Emitted when a tree item is selected or deselected.
 *
 * @slot - The default slot.
 * @slot expand-icon - The icon to show when the tree item is expanded. Works best with `<flow-ui-icon>`.
 * @slot collapse-icon - The icon to show when the tree item is collapsed. Works best with `<flow-ui-icon>`.
 *
 * @csspart base - The component's base wrapper.
 *
 * @cssproperty [--indent-size=var(--flow-ui-spacing-medium)] - The size of the indentation for nested items.
 * @cssproperty [--indent-guide-color=var(--flow-ui-color-neutral-200)] - The color of the indentation line.
 * @cssproperty [--indent-guide-offset=0] - The amount of vertical spacing to leave between the top and bottom of the
 *  indentation line's starting position.
 * @cssproperty [--indent-guide-style=solid] - The style of the indentation line, e.g. solid, dotted, dashed.
 * @cssproperty [--indent-guide-width=0] - The width of the indentation line.
 */
declare class FlowUiTree extends FlowRdfElement {
    static styles: CSSResultGroup;
    private expandedIconSlot;
    private collapsedIconSlot;
    /** @internal - add form control class */
    class: string;
    /**
     * The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the
     * value attribute will be a space-delimited list of values based on the options selected, and the value property will
     * be an array. **For this reason, values must not contain spaces.**
     */
    value: string[];
    /**
     * The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple
     * displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected.
     */
    selectionMode: 'single' | 'multiple' | 'leaf';
    /** The select's size. */
    size: 'small' | 'medium' | 'large';
    private lastFocusedItem;
    private readonly localize;
    private mutationObserver;
    private clickTarget;
    connectedCallback(): Promise<void>;
    disconnectedCallback(): void;
    /** @internal - ensure form control class is always present */
    handleClassChange(): void;
    private getExpandButtonIcon;
    private initTreeItem;
    private handleTreeChanged;
    /** @internal */
    handleSizeChange(): void;
    private syncTreeItems;
    private selectItem;
    private getAllTreeItems;
    private focusItem;
    private handleKeyDown;
    private handleClick;
    private handleMouseDown;
    private handleFocusOut;
    private handleFocusIn;
    private handleHostExpandCollapse;
    private handleSlotChange;
    /** @internal */
    handleSelectionChange(): Promise<void>;
    /** @internal */
    handleValueChange(previousValue: string[]): void;
    /** @internal Returns the list of tree items that are selected in the tree. */
    get selectedItems(): FlowUiTreeItem[];
    /** @internal Gets focusable tree items in the tree. */
    getFocusableItems(): FlowUiTreeItem[];
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-tree': FlowUiTree;
    }
}

/**
 * @tagname flow-ui-visually-hidden
 * @summary The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
 *
 * @slot - The content to be visually hidden.
 */
declare class FlowUiVisuallyHidden extends FlowRdfElement {
    static styles: CSSResultGroup;
    render(): lit_html.TemplateResult<1>;
}

declare global {
    interface HTMLElementTagNameMap {
        'flow-ui-visually-hidden': FlowUiVisuallyHidden;
    }
}

export { type BaseColorMapperField, type BaseColorStopOptions, type ColorMapperField, type ColorMapperOptions, type ColorMapperValue, type ColorStopOptions, type ColorStopValue, type FlowQueryBuilderConfig, type FlowQueryBuilderConverter, type FlowQueryBuilderConverterOptions, type FlowQueryBuilderDateField, type FlowQueryBuilderDateTimeField, type FlowQueryBuilderDateTimeFieldBase, type FlowQueryBuilderField, type FlowQueryBuilderFieldBase, type FlowQueryBuilderFieldDefinition, type FlowQueryBuilderFieldMap, type FlowQueryBuilderFieldType, type FlowQueryBuilderFieldTypeMap, type FlowQueryBuilderNumberField, type FlowQueryBuilderOption, type FlowQueryBuilderRule, type FlowQueryBuilderRuleSet, type FlowQueryBuilderSelectField, type FlowQueryBuilderStringField, type FlowQueryBuilderTemplateFn, type FlowQueryBuilderTimeField, type FlowAfterCollapseEvent as FlowUiAfterCollapseEvent, type FlowAfterExpandEvent as FlowUiAfterExpandEvent, type FlowAfterHideEvent as FlowUiAfterHideEvent, type FlowAfterShowEvent as FlowUiAfterShowEvent, FlowUiAlert, FlowUiAnimation, type FlowApplyEvent as FlowUiApplyEvent, FlowUiAutocomplete, FlowUiAvatar, FlowUiBadge, FlowUiBaseControl, type FlowBlurEvent as FlowUiBlurEvent, FlowUiBreadcrumb, FlowUiBreadcrumbItem, FlowUiBusyOverlay, FlowUiButton, FlowUiButtonGroup, FlowUiCalendar, type FlowCancelEvent as FlowUiCancelEvent, FlowUiCard, FlowUiCarousel, FlowUiCarouselItem, type FlowChangeEvent as FlowUiChangeEvent, FlowUiChart, FlowUiCheckbox, FlowUiCheckboxGroup, type FlowClearEvent as FlowUiClearEvent, type FlowCloseEvent as FlowUiCloseEvent, type FlowCollapseEvent as FlowUiCollapseEvent, type FlowCollapseTreeEvent as FlowUiCollapseSplitViewEvent, FlowUiColorMapper, FlowUiColorPicker, FlowUiColorStop, FlowUiDateTimePicker, FlowUiDetails, FlowUiDialog, FlowUiDivider, type FlowDragDropEvent as FlowUiDragDrop, type FlowDragEndEvent as FlowUiDragEndEvent, type FlowDragEvent as FlowUiDragEvent, type FlowDragOverEvent as FlowUiDragOverEvent, type FlowDragStartEvent as FlowUiDragStartEvent, FlowUiDrawer, FlowUiDropdown, type FlowErrorEvent as FlowUiErrorEvent, type FlowExpandEvent as FlowUiExpandEvent, type FlowExpandTreeEvent as FlowUiExpandSplitViewEvent, type FlowFinishEvent as FlowUiFinishEvent, type FlowFocusEvent as FlowUiFocusEvent, FlowUiFormGroup, FlowUiGauge, type FlowHideEvent as FlowUiHideEvent, type FlowHoverEvent as FlowUiHoverEvent, FlowUiIcon, FlowUiIconButton, type FlowInitialFocusEvent as FlowUiInitialFocusEvent, FlowUiInput, type FlowInputEvent as FlowUiInputEvent, type FlowInvalidEvent as FlowUiInvalidEvent, type FlowLazyChangeEvent as FlowUiLazyChangeEvent, type FlowLazyLoadEvent as FlowUiLazyLoadEvent, FlowUiList, FlowUiListItem, type FlowLoadEvent as FlowUiLoadEvent, FlowUiMap, type FlowMapLoadEvent as FlowUiMapLoadEvent, FlowUiMenu, FlowUiMenuItem, FlowUiMenuLabel, type FlowMutationEvent as FlowUiMutationEvent, FlowUiMutationObserver, FlowUiOption, FlowUiPanel, FlowUiPanelHeader, type FlowPanelToggleEvent as FlowUiPanelToggleEvent, FlowUiPopup, FlowUiProgressBar, FlowUiProgressRing, FlowUiQueryBuilder, FlowUiRadio, FlowUiRadioGroup, FlowUiRange, type FlowRemoveEvent as FlowUiRemoveEvent, type FlowRepositionEvent as FlowUiRepositionEvent, type FlowRequestCloseEvent as FlowUiRequestCloseEvent, type FlowResizeEvent as FlowUiResizeEvent, FlowUiResizeObserver, FlowUiScrollView, FlowUiSelect, type FlowSelectEvent as FlowUiSelectEvent, type FlowShowEvent as FlowUiShowEvent, type FlowSlideChange as FlowUiSlideChange, FlowUiSplitView, FlowUiSplitViewDivider, FlowUiSplitViewPane, FlowUiSplitViewToggleButton, type FlowStartEvent as FlowUiStartEvent, FlowUiStepper, FlowUiStepperPanel, FlowUiSwitch, FlowUiTab, FlowUiTabGroup, type FlowTabHideEvent as FlowUiTabHideEvent, FlowUiTabPanel, type FlowTabShowEvent as FlowUiTabShowEvent, FlowUiTag, FlowUiTextarea, FlowUiTimer, FlowUiToolButton, FlowUiToolButtonGroup, FlowUiTooltip, FlowUiTree, FlowUiTreeItem, FlowUiVisuallyHidden, JavaScriptFilterError, type JavaScriptFilterFn, LocalizeController, type NumberColorMapperField, type NumberColorStopOptions, type SelectColorMapperField, type SelectColorStopOptions, type StringColorMapperField, type StringColorStopOptions, type Translation, addIcons, colorMapperValueToMaplibreExpression, countRuleSet, escapeMaplibreString, filterRuleSet, converter$2 as flowQueryConverter, getAnimationNames, getEasingNames, initialize, initializeChartJs, isRule, isRuleOrRuleset, isRuleSet, converter$1 as javascriptFilterConverter, converter as mapLayerFilterConverter, registerChartComponent, registerComponents, registerIconLibrary, registerTranslation, renameRuleSetFields, setDefaultLocale, setDefaultTimeZone, transformRuleSet, unregisterIconLibrary };