import { CustomElement } from '../../Abstracts/CustomElement';
import type { IRegionElementProps } from './IRegionElementProps';
declare const RegionElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
/**
 * Region - A container component that manages multiple view definitions with exclusive activation and lazy instantiation.
 *
 * @description
 * The Region component manages the lifecycle of views within it, ensuring only one view is instantiated and
 * rendered at a time. Views are lazily instantiated when activated and cleanly destroyed when deactivated,
 * providing efficient memory usage and proper lifecycle management for complex multi-view layouts. Perfect
 * for wizards, steppers, tabbed interfaces, or any scenario requiring mutually exclusive view states without
 * manual DOM manipulation. Supports programmatic view activation and emits events on view transitions.
 *
 * @name Region
 * @element mosaik-region
 * @category Grouping
 *
 * @slot - Contains mosaik-region-view definitions to be managed by the region
 *
 * @csspart host - The container element that renders the active view's content
 *
 * @fires activeChanged {CustomEvent<{active: string, previous?: string}>} - Fired when the active view changes
 *
 * @dependency {RegionViewElement} - View definition component for defining individual views
 *
 * @example
 * Basic wizard with three steps:
 * ```html
 * <mosaik-region id="wizard" active="step1">
 *   <mosaik-region-view name="step1" default>
 *     <div>Welcome to Step 1</div>
 *   </mosaik-region-view>
 *   <mosaik-region-view name="step2">
 *     <div>Proceed to Step 2</div>
 *   </mosaik-region-view>
 *   <mosaik-region-view name="step3">
 *     <div>Final Step</div>
 *   </mosaik-region-view>
 * </mosaik-region>
 *
 * <script>
 *   const region = document.getElementById('wizard');
 *   region.activate('step2'); // Switch to step 2
 * </script>
 * ```
 *
 * @example
 * Tabbed interface with navigation:
 * ```html
 * <mosaik-button-group>
 *   <mosaik-button label="Overview" onclick="document.querySelector('#tabs').activate('overview')"></mosaik-button>
 *   <mosaik-button label="Details" onclick="document.querySelector('#tabs').activate('details')"></mosaik-button>
 *   <mosaik-button label="Settings" onclick="document.querySelector('#tabs').activate('settings')"></mosaik-button>
 * </mosaik-button-group>
 *
 * <mosaik-region id="tabs" active="overview">
 *   <mosaik-region-view name="overview" default>
 *     <my-overview-component></my-overview-component>
 *   </mosaik-region-view>
 *   <mosaik-region-view name="details">
 *     <my-details-component></my-details-component>
 *   </mosaik-region-view>
 *   <mosaik-region-view name="settings">
 *     <my-settings-component></my-settings-component>
 *   </mosaik-region-view>
 * </mosaik-region>
 * ```
 *
 * @example
 * Form stepper with validation:
 * ```html
 * <mosaik-region id="formStepper">
 *   <mosaik-region-view name="personal" default>
 *     <h3>Personal Information</h3>
 *     <form><!-- personal details --></form>
 *   </mosaik-region-view>
 *   <mosaik-region-view name="address">
 *     <h3>Address Details</h3>
 *     <form><!-- address fields --></form>
 *   </mosaik-region-view>
 *   <mosaik-region-view name="review">
 *     <h3>Review & Submit</h3>
 *     <div><!-- summary --></div>
 *   </mosaik-region-view>
 * </mosaik-region>
 * ```
 *
 * @example
 * Event handling for view changes:
 * ```html
 * <mosaik-region id="eventRegion">
 *   <mosaik-region-view name="view1" default>View 1 Content</mosaik-region-view>
 *   <mosaik-region-view name="view2">View 2 Content</mosaik-region-view>
 * </mosaik-region>
 *
 * <script>
 *   const region = document.getElementById('eventRegion');
 *   region.addEventListener('activeChanged', (e) => {
 *     console.log(`Changed from ${e.detail.previous} to ${e.detail.active}`);
 *   });
 * </script>
 * ```
 *
 * @public
 */
export declare class RegionElement extends RegionElement_base implements IRegionElementProps {
    private readonly _viewDefinitions;
    private _active;
    private _currentActiveName;
    private _isInitialized;
    /**
     * @public
     */
    constructor();
    /**
     * Returns the `is` property.
     * The `is` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is(): string;
    /**
     * The name of the currently active view.
     *
     * @public
     */
    get active(): string;
    set active(value: string);
    /**
     * @public
     * @override
     */
    connectedCallback(): void;
    /**
     * @public
     * @override
     */
    firstUpdated(changedProperties: Map<keyof this, unknown>): void;
    /**
     * @public
     * @override
     */
    updated(changedProperties: Map<string | number | symbol, unknown>): void;
    /**
     * Activates a view by name.
     *
     * @param name - The name of the view to activate
     * @public
     */
    activate(name: string): void;
    /**
     * Collects all mosaik-region-view children and builds the view definitions map.
     *
     * @private
     */
    private collectViewDefinitions;
    /**
     * Determines the initial active view based on the active attribute, default attribute, or first view.
     *
     * @private
     */
    private determineInitialActive;
    /**
     * Toggles the active state on child RegionViewElements.
     * Sets `active` on the matching view and removes it from all others.
     *
     * @private
     */
    private renderActiveView;
    /**
     * Dispatches the active-changed event.
     *
     * @param previousActive - The previously active view name
     * @private
     */
    private dispatchActiveChangedEvent;
}
/**
 * @public
 */
export declare namespace RegionElement {
    type Props = IRegionElementProps;
}
/**
 * @public
 */
declare global {
    interface HTMLElementTagNameMap {
        'mosaik-region': RegionElement;
    }
}
export {};
//# sourceMappingURL=RegionElement.d.ts.map