import { CustomElement } from '../../Abstracts/CustomElement';
/**
 * Layout - An abstract foundation for layout container components that arrange child elements.
 *
 * @description
 * The LayoutElement provides the base functionality for layout containers that organize and
 * arrange child elements within a defined structure. This element monitors slotted child items,
 * detects when the collection changes, and automatically applies an 'empty' attribute when
 * no children are present, enabling empty-state styling. It serves as the foundation for
 * concrete layout implementations such as stacks, grids, flows, wraps, masonry layouts, or
 * any component responsible for positioning and arranging child elements. The element provides
 * lifecycle hooks for reacting to item changes and establishes a consistent pattern for
 * layout-based components throughout the design system.
 *
 * @name Layout
 * @category Layouts
 *
 * @slot - Default slot for child elements to be arranged by the layout
 *
 * @fires changed {PropertyChangedEvent} - Fired when any property changes
 * @fires connected {ConnectedEvent} - Fired when the element is connected to the DOM
 *
 * @example
 * Extending for a custom stack layout:
 * ```typescript
 * class StackElement extends LayoutElement {
 *   protected override onItemsChanged(): void {
 *     super.onItemsChanged();
 *     this.applyStackLayout();
 *   }
 *
 *   private applyStackLayout(): void {
 *     this.items.forEach((item, index) => {
 *       item.style.order = index.toString();
 *     });
 *   }
 * }
 * ```
 *
 * @example
 * Accessing layout items:
 * ```typescript
 * const layout = document.querySelector('my-layout');
 * console.log('Number of items:', layout.items.length);
 * layout.items.forEach((item, index) => {
 *   console.log(`Item ${index}:`, item);
 * });
 * ```
 *
 * @example
 * Reacting to layout changes:
 * ```typescript
 * class GridElement extends LayoutElement {
 *   protected override onItemsChanged(): void {
 *     super.onItemsChanged();
 *     const columns = Math.ceil(Math.sqrt(this.items.length));
 *     this.style.gridTemplateColumns = `repeat(${columns}, 1fr)`;
 *   }
 * }
 * ```
 *
 * @example
 * Styling empty state:
 * ```css
 * my-layout[empty] {
 *   display: flex;
 *   align-items: center;
 *   justify-content: center;
 * }
 *
 * my-layout[empty]::before {
 *   content: "No items to display";
 *   color: var(--text-muted);
 * }
 * ```
 *
 * @public
 * @abstract
 */
export declare class LayoutElement extends CustomElement {
    private _slotChangeSubscription;
    private _slot;
    /**
     * @public
     */
    constructor();
    /**
     * Returns the `is` property.
     * The `is` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is(): string;
    /**
     * Gets or sets the `items` property.
     *
     * @public
     * @readonly
     */
    get items(): Array<HTMLElement>;
    /**
     * @public
     * @override
     */
    disconnectedCallback(): void;
    /**
     * @protected
     * @override
     */
    protected onApplyTemplate(): void;
    /**
     * @protected
     * @virtual
     */
    protected onItemsChanged(): void;
}
//# sourceMappingURL=LayoutElement.d.ts.map