import { IEventEmitter, IEventListenerSubscription } from '@breadstone/mosaik-elements';
import { LitElement, type PropertyDeclaration } from 'lit';
import { CSSResultGroup } from '../../../Dom/Css';
import type { IPropertyChangedEventDetail } from '../../events';
import { FlowDirection } from '../../Types/FlowDirection';
import type { IConnectedCallback } from './Interfaces/IConnectedCallback';
import type { IDisconnectedCallback } from './Interfaces/IDisconnectedCallback';
/**
 * Custom Element - The foundational base class for all Mosaik web components.
 *
 * @description
 * CustomElement extends LitElement and provides the core infrastructure for all Mosaik components.
 * It establishes fundamental patterns including lifecycle management, event handling, style adoption,
 * internationalization (i18n) support, and template part querying. This abstract class serves as the
 * root of the component hierarchy and provides essential features like custom style injection via
 * shadow DOM, automatic event subscription cleanup, property change tracking, and bidirectional text
 * support. All Mosaik components inherit from this base class either directly or through specialized
 * intermediate base classes.
 *
 * @name CustomElement
 * @category Abstract Elements
 *
 * @slot style - Custom styles injection slot for shadow DOM styling escape hatch
 *
 * @fires connected {ConnectedEvent} - Emitted when the element is connected to the DOM
 * @fires disconnected {DisconnectedEvent} - Emitted when the element is disconnected from the DOM
 * @fires changed {PropertyChangedEvent} - Emitted when any attribute changes before update
 *
 * @example
 * Extending CustomElement to create a new component:
 * ```typescript
 * export class MyElement extends CustomElement {
 *   constructor() {
 *     super();
 *   }
 *   protected override render() {
 *     return html`<div>My Component</div>`;
 *   }
 * }
 * ```
 *
 * @example
 * Injecting custom styles via the style slot:
 * ```html
 * <mosaik-card>
 *   <style slot="style">
 *     .title { color: purple; font-size: 2rem; }
 *   </style>
 *   <h3 class="title">Custom Title</h3>
 * </mosaik-card>
 * ```
 *
 * @example
 * Using lifecycle events:
 * ```typescript
 * element.connected.on(() => {
 *   console.log('Element connected to DOM');
 * });
 * element.changed.on(({ propertyName, oldValue, newValue }) => {
 *   console.log(`Property ${propertyName} changed from ${oldValue} to ${newValue}`);
 * });
 * ```
 *
 * @example
 * Querying template parts:
 * ```typescript
 * protected override onApplyTemplate(): void {
 *   const header = this.getTemplatePart<HTMLElement>('header');
 *   const items = this.getTemplateParts<HTMLElement>('item');
 * }
 * ```
 *
 * @abstract
 * @public
 */
export declare class CustomElement extends LitElement implements IConnectedCallback, IDisconnectedCallback {
    /**
     * The slot name used for custom styles injection.
     * Users can inject custom styles via `<style slot="style">...</style>`.
     *
     * @public
     * @readonly
     */
    static get CUSTOM_STYLES_SLOT(): string;
    private readonly _connected;
    private readonly _disconnected;
    private readonly _changed;
    private readonly _subscriptions;
    private _dir;
    private _lang;
    /**
     * Constructs a new instance of the `CustomElement` class.
     *
     * @public
     */
    constructor();
    /**
     * The dir property indicates the directionality of the element's text.
     *
     * Supported values are:
     * - `ltr`: Left-to-Right text direction (e.g. English, German)
     * - `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)
     * - `auto`: Automatically determine direction based on content (default)
     *
     * @public
     * @override
     * @attr dir
     */
    get dir(): FlowDirection;
    set dir(value: FlowDirection);
    /**
     * The lang property indicates the language of the element's content.
     *
     * @public
     * @override
     * @attr lang
     */
    get lang(): string;
    set lang(value: string);
    /**
     * Called when the element is connected to the DOM.
     * Provides reference to `IEventEmitter` as event argument.
     *
     * @public
     * @hidden
     * @eventProperty
     * @readonly
     */
    get connected(): IEventEmitter;
    /**
     * Called when the element is disconnected from the DOM.
     * Provides reference to `IEventEmitter` as event argument.
     *
     * @public
     * @hidden
     * @eventProperty
     * @readonly
     */
    get disconnected(): IEventEmitter;
    /**
     * Called when the element will be updated.
     * Provides reference to `IEventEmitter` as event argument.
     *
     * @public
     * @hidden
     * @eventProperty
     * @readonly
     */
    get changed(): IEventEmitter<IPropertyChangedEventDetail>;
    /**
     * @public
     * @override
     * @hidden
     */
    connectedCallback(): void;
    /**
     * @public
     * @override
     * @hidden
     */
    disconnectedCallback(): void;
    /**
     * @public
     * @override
     * @hidden
     */
    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
    /**
     * Adopts the specified styles.
     *
     * @public
     * @hidden
     * @param styles - The styles to adopt.
     */
    adoptStyle(styles: CSSResultGroup): void;
    /**
     * Adds an event listener.
     * The listener will be removed when the element is disconnected from the DOM.
     *
     * @public
     * @hidden
     */
    on<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]) => unknown, options?: boolean | AddEventListenerOptions): IEventListenerSubscription;
    /**
     * Removes an event listener.
     *
     * @public
     * @hidden
     */
    off(subscription: IEventListenerSubscription): void;
    /**
     * @hidden
     */
    off<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]) => unknown): void;
    /**
     * Emits a custom event with more convenient defaults.
     *
     * @public
     * @hidden
     */
    emit<TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail>): boolean;
    /**
     * @hidden
     */
    emit<TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventInit<TDetail>): boolean;
    /**
     * @public
     * @override
     * @hidden
     */
    requestUpdate(name?: keyof this, oldValue?: unknown, options?: PropertyDeclaration): void;
    /**
     * @protected
     * @override
     */
    protected firstUpdated(changedProperties: Map<keyof this, unknown>): void;
    /**
     * @protected
     * @override
     */
    protected update(changedProperties: Map<keyof this, unknown>): void;
    /**
     * @protected
     * @override
     */
    protected willUpdate(changedProperties: Map<keyof this, unknown>): void;
    /**
     * A method that will be called when the element template is applied.
     * In this method are the element children available.
     *
     * @protected
     * @virtual
     */
    protected onApplyTemplate(): void;
    /**
     * Adopts custom styles from the light DOM into the shadow DOM.
     *
     * This method enables the "styling escape hatch" pattern, allowing developers
     * to inject custom styles into a component's shadow DOM via a slotted style element:
     *
     * @example
     * ```html
     * <mosaik-card>
     *   <style slot="custom-styles">
     *     .title { color: purple; font-size: 2rem; }
     *   </style>
     *   <h3 class="title">Custom Title</h3>
     * </mosaik-card>
     * ```
     *
     * @remarks
     * - Only `<style>` elements with `slot="custom-styles"` are processed.
     * - Uses `textContent` instead of `innerHTML` to prevent XSS attacks.
     * - Styles are adopted via `CSSStyleSheet` API for optimal performance.
     * - The style element remains in the light DOM but its content is adopted.
     * - This method is called automatically during `firstUpdated`.
     * - Custom styles are appended after component styles, allowing overrides.
     *
     * @protected
     */
    protected adoptCustomStyles(): void;
    /**
     * Returns the template part with the specified name.
     * The template child is a child element with the `part` attribute.
     *
     * @protected
     *
     * @param name - a part name.
     * @param mode - a part match mode.
     */
    protected getTemplatePart<TElement extends Element = Element>(name: string, mode?: PartMatchMode): TElement;
    /**
     * Returns the template parts with the specified name.
     * The template parts are elements with the `part` attribute.
     * If the name is empty, all template parts will be returned.
     *
     * @protected
     *
     * @param name - a part name.
     */
    protected getTemplateParts<TElement extends Element = Element>(name: string): Array<TElement>;
    /**
     * Returns all template parts.
     *
     * @protected
     */
    protected getAllTemplateParts(): Array<Element>;
    /**
     * Renders the element.
     *
     * @protected
     * @virtual
     */
    protected render(): unknown;
    /**
     * @private
     */
    private registerSubscription;
    /**
     * @private
     */
    private unregisterSubscription;
}
/**
 * Unpacks the detail type from a CustomEvent type.
 * If the type is not a CustomEvent, defaults to unknown.
 *
 * @private
 */
type UnpackCustomEvent<T> = T extends CustomEvent<infer U> ? U : unknown;
/**
 * Defines the supported matching modes for the `part` attribute.
 *
 * The modes directly correspond to standard CSS attribute selectors
 * and therefore behave exactly the same as in CSS.
 *
 * Supported matching modes:
 *
 * - `exact`:
 *   Matches elements whose `part` attribute value is exactly equal to `partName`.
 *   CSS equivalent: `[part="root"]`
 *
 * - `token`:
 *   Matches elements whose `part` attribute contains `partName` as a
 *   whitespace-separated token.
 *   CSS equivalent: `[part~="root"]`
 *
 * - `prefix`:
 *   Matches elements whose `part` attribute value starts with `partName`.
 *   CSS equivalent: `[part^="root"]`
 *
 * - `suffix`:
 *   Matches elements whose `part` attribute value ends with `partName`.
 *   CSS equivalent: `[part$="root"]`
 *
 * - `contains`:
 *   Matches elements whose `part` attribute value contains `partName`
 *   as a substring.
 *   CSS equivalent: `[part*="root"]`
 *
 * - `exists`:
 *   Matches all elements that define a `part` attribute, regardless of value.
 *   CSS equivalent: `[part]`
 *
 * @private
 */
type PartMatchMode = 'exact' | 'token' | 'prefix' | 'suffix' | 'contains' | 'exists';
export {};
//# sourceMappingURL=CustomElement.d.ts.map