import { LitElement, type PropertyValues } from 'lit';
import '../icon/Icon.js';
import './Widget.css';
export interface WidgetProps {
    heading?: string;
    collapsible?: boolean;
    collapsed?: boolean;
    fullscreenable?: boolean;
}
declare const Widget_base: (new (...args: any[]) => import("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
/**
 * A widget component for displaying content with header, body, and footer sections.
 *
 * ## Architecture: Light DOM + Manager Pattern
 *
 * This component uses **Light DOM** (no Shadow Root) with the **Manager Pattern**:
 * - User-provided children are physically moved into internal containers
 * - Movement is based on `slot` attributes (pseudo-slots)
 * - The `onFind` utility automatically redistributes dynamically-added content
 *
 * ### Node Redistribution Rules
 * - `slot="controls"` → Moved to header actions area (before system buttons)
 * - `slot="footer"` → Moved to footer container
 * - *(no slot)* → Moved to body container (default)
 *
 * ## Features
 *
 * - **Collapsible**: Optional chevron toggle to hide/show body and footer
 * - **Fullscreen**: Optional maximize button for fullscreen mode via `:state(fullscreen)` custom state
 * - **Dynamic Content**: `onFind` handles content added after initialization
 * - **Accessible**: Full ARIA support and keyboard navigation
 * - **Themeable**: CSS custom properties for colors and spacing
 *
 * ## Accessibility
 *
 * - **Collapse toggle**: `aria-expanded`, `aria-controls`, `aria-label`
 * - **Fullscreen toggle**: `aria-pressed`, `aria-label`
 * - **Body region**: `role="region"`, `aria-labelledby` linking to heading
 * - **Tab order**: Natural flow via physical DOM placement
 * - **Collapsed content**: Hidden via `inert` attribute and CSS grid collapse
 *
 * @element btu-widget
 *
 * @fires {CustomEvent} btu-widget-ready - Fired after first render and redistribution
 * @fires {CustomEvent<{collapsed: boolean}>} btu-widget-collapse-changed - Fired when collapsed state changes
 * @fires {CustomEvent<{fullscreen: boolean}>} btu-widget-fullscreen-changed - Fired when fullscreen state changes
 *
 * @cssprop --widget-background - Body and footer background color (default: --btu-theme-white)
 * @cssprop --widget-border - Widget border and dividers (default: 1px solid gray-200)
 * @cssprop --widget-border-color - Color of header bottom divider (default: gray-200)
 * @cssprop --header-background - Header background color (default: transparent)
 *
 * @cssstate collapsed - Applied when the widget is collapsed, targetable via :state(collapsed)
 * @cssstate fullscreen - Applied when the widget is in fullscreen mode, targetable via :state(fullscreen)
 *
 * @slot - Default pseudo-slot: elements without slot attribute are moved to body
 * @slot controls - Pseudo-slot: buttons/actions moved to header actions area
 * @slot footer - Pseudo-slot: content moved to footer container
 *
 * @example
 * ```html
 * <!-- Basic usage with heading property -->
 * <btu-widget heading="My Widget">
 *   <button slot="controls">Action</button>
 *   <div>Main body content</div>
 * </btu-widget>
 * ```
 */
export default class Widget extends Widget_base {
    private static _idCounter;
    private _internals;
    protected createRenderRoot(): HTMLElement | DocumentFragment;
    /**
     * Heading text displayed in the header.
     * @attr
     */
    heading: string;
    /**
     * Whether the widget can be collapsed/expanded.
     * When true, a chevron toggle button appears in the header.
     * @attr
     */
    collapsible: boolean;
    /**
     * Whether the widget is currently collapsed.
     * When true, body and footer are hidden. Implies collapsible.
     * @attr
     */
    collapsed: boolean;
    /**
     * Whether the widget can enter fullscreen mode.
     * When true, a fullscreen toggle button appears in the header.
     * @attr
     */
    fullscreenable: boolean;
    private _isFullscreen;
    private _collapseTooltip;
    private _fullscreenTooltip;
    /**
     * Whether the widget is currently in fullscreen mode (read-only).
     * Use `btu-widget-fullscreen-changed` event to react to changes.
     */
    get isFullscreen(): boolean;
    /** @internal */
    private _instanceId;
    /** @internal */
    private bodyId;
    /** @internal */
    private dialogId;
    /** @internal */
    private _dialog?;
    /** @internal */
    private _dialogCloseHandler?;
    /** @internal - Light-dismiss handler bound to this instance */
    private _lightDismissHandler?;
    willUpdate(changed: PropertyValues): void;
    connectedCallback(): void;
    disconnectedCallback(): void;
    firstUpdated(): void;
    /**
     * Toggles the collapsed state of the widget.
     * Emits 'btu-widget-collapse-changed' event with collapsed state.
     * @internal
     */
    private handleToggle;
    /**
     * Toggles the fullscreen state of the widget using native dialog element.
     * Moves the content wrapper into the dialog on fullscreen, back out on exit.
     * Uses dialog.showModal() for proper modal behavior with backdrop.
     * Uses View Transition API for smooth fullscreen animation.
     * Emits 'btu-widget-fullscreen-changed' event with fullscreen state.
     * @internal
     */
    private handleFullscreen;
    /**
     * Sets up the dialog element and event listeners.
     * @internal
     */
    private _setupDialog;
    /**
     * Restores widget state from LocalStorage if id is set.
     * Only restores if no explicit collapsed attribute is present on the element.
     *
     * Attribute Precedence:
     * - If collapsed attribute is explicitly present in HTML: Use that value (ignore LocalStorage)
     * - If collapsed attribute is absent: Restore from LocalStorage
     *
     * @internal
     */
    private _restoreState;
    /**
     * Persists widget state to LocalStorage if id is set.
     *
     * @internal
     */
    private _persistState;
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'btu-widget': Widget;
    }
}
export {};
//# sourceMappingURL=Widget.d.ts.map