import { LitElement } from 'lit';
import '../button/button.js';
/**
 * Enum representing the available visual variants for the Toggletip component.
 *
 * @remarks
 * Use these variants to adjust both the appearance and semantic meaning of a toggletip:
 * - `normal`: Standard appearance for general information.
 * - `raised`: Elevated style with a subtle shadow for emphasis.
 * - `enhanced`: More pronounced styling for critical highlights.
 * - `eco-feedback`: Soft, eco-themed styling ideal for sustainability messages.
 * - `caution`: Warning-style appearance to signal potential issues.
 * - `warning`: Strong alert styling for higher-severity notifications.
 * - `alarm`: High-impact styling for urgent or critical alerts.
 */
export declare enum ToggletipVariant {
    normal = "normal",
    raised = "raised",
    enhanced = "enhanced",
    ecoFeedback = "eco-feedback",
    caution = "caution",
    warning = "warning",
    alarm = "alarm"
}
/**
 * `<obc-toggletip>` – A contextual message component for displaying inline notes, feedback, or alerts anchored to a UI element.
 *
 * The toggletip provides brief, focused information or actions related to a specific UI context, often appearing as a floating panel with an arrow pointing to its trigger. It supports a range of visual variants for different semantic meanings, from neutral information to critical alerts.
 *
 * Appears above the interface to deliver context-sensitive guidance, warnings, or actions without disrupting the main workflow. Commonly used for tooltips with rich content, inline help, or actionable notifications.
 *
 * ## Features
 *
 * - **Variants for semantic meaning:**
 *   - `normal` (default): Standard informational note.
 *   - `raised`: Elevated importance with a dark header for emphasis.
 *   - `enhanced`: For primary or enhanced information requiring user attention.
 *   - `eco-feedback`: Positive or environmental feedback.
 *   - `caution`: Indicates caution or minor issues.
 *   - `warning`: Highlights warnings or potential problems.
 *   - `alarm`: Signals critical or urgent conditions.
 * - **Customizable layout:**
 *   - Optional header (title container) and description.
 *   - Optional content area for custom elements or rich content.
 *   - Optional action buttons (primary and secondary).
 *   - Leading and trailing icon slots for visual context.
 *   - Adjustable width via `customWidth` property.
 * - **Icon logic:**
 *   - Leading icon is shown by default and adapts to the variant (e.g., warning, alarm, eco-feedback).
 *   - Trailing icon slot for additional context or actions.
 * - **Responsive and accessible:**
 *   - Content adapts to available space.
 *   - All sections (header, description, content, actions) can be toggled independently.
 * - **Events:**
 *   - `primary-action`: Fired when the primary action button is clicked.
 *   - `secondary-action`: Fired when the secondary action button is clicked.
 *
 * ## Usage Guidelines
 *
 * Use `obc-toggletip` to provide contextual information, warnings, or actions related to a specific UI element or state. Ideal for:
 * - Explaining the purpose or status of a control.
 * - Delivering inline feedback or guidance.
 * - Presenting warnings, cautions, or critical alerts in context.
 * - Offering quick actions related to the message.
 *
 * Avoid using for persistent or global alerts—use a banner or dialog for those cases. For simple tooltips with only text, a lightweight tooltip component may be more appropriate.
 *
 * **TODO(designer):** Confirm if there are recommended maximum lengths for title/description, and if both action buttons should always be shown together or if one is preferred as primary.
 *
 * ## Slots
 *
 * | Slot Name      | Renders When...              | Purpose                                               |
 * | -------------- | --------------------------- | ----------------------------------------------------- |
 * | leading-icon   | `hasLeadingIcon` is true    | Main icon representing the message type or context.   |
 * | trailing-icon  | `hasTrailingIcon` is true   | Additional icon for secondary context or actions.     |
 * | content        | `hasContent` is true        | Custom content area for rich or interactive elements. |
 *
 * ## Properties and Configuration
 *
 * - `variant`: Controls the visual style and semantic meaning (see Features above for all options).
 * - `title`: Sets the header text (shown if `hasTitleContainer` is true).
 * - `description`: Sets the main message text (shown if `hasDescription` is true).
 * - `hasTitleContainer`, `hasDescription`, `hasContent`, `hasActions`: Toggle visibility of each section.
 * - `hasLeadingIcon`, `hasTrailingIcon`: Toggle visibility of icon slots.
 * - `primaryButtonLabel`, `secondaryButtonLabel`: Set labels for action buttons (shown if `hasActions` is true).
 * - `customWidth`: Sets a custom width for the toggletip (in pixels).
 *
 * ## Events
 *
 * - `primary-action`: Fired when the primary action button is clicked. Event detail contains `{ label: string }`.
 * - `secondary-action`: Fired when the secondary action button is clicked. Event detail contains `{ label: string }`.
 *
 * ## Best Practices and Constraints
 *
 * - Use the variant that best matches the message's intent (e.g., `alarm` for critical, `eco-feedback` for positive).
 * - Keep messages concise and focused on the immediate context.
 * - Only show both action buttons if both are necessary; otherwise, prefer a single primary action.
 * - The toggletip should point to its related UI element and not obscure important content.
 * - For accessibility, ensure the toggletip is reachable via keyboard and screen reader.
 *
 * ## Example
 *
 * ```html
 * <obc-toggletip
 *   variant="warning"
 *   title="Unsaved Changes"
 *   description="You have unsaved edits. Save before leaving."
 *   hasActions
 *   primaryButtonLabel="Save"
 *   secondaryButtonLabel="Discard"
 *   @primary-action="${(e) => console.log('Primary clicked:', e.detail)}"
 *   @secondary-action="${(e) => console.log('Secondary clicked:', e.detail)}"
 * >
 *   <obi-warning slot="leading-icon"></obi-warning>
 *   <obi-close slot="trailing-icon"></obi-close>
 *   <div slot="content">Additional details or controls can go here.</div>
 * </obc-toggletip>
 * ```
 *
 * @slot leading-icon - Main icon representing the message type or context (shown when `hasLeadingIcon` is true)
 * @slot trailing-icon - Additional icon for secondary context or actions (shown when `hasTrailingIcon` is true)
 * @slot content - Custom content area for rich or interactive elements (shown when `hasContent` is true)
 *
 * @fires {CustomEvent} primary-action - Fired when the primary action button is clicked
 * @fires {CustomEvent} secondary-action - Fired when the secondary action button is clicked
 */
export declare class ObcToggletip extends LitElement {
    /**
     * Visual style and semantic meaning of the toggletip.
     *
     * - `normal` (default): Standard informational toggletip.
     * - `raised`: Elevated importance with dark header.
     * - `enhanced`: Used for enhanced or primary information.
     * - `eco-feedback`: Environmental or positive feedback messaging.
     * - `caution`: Indicates caution or minor issues.
     * - `warning`: Highlights warnings or potential problems.
     * - `alarm`: Signals critical or urgent conditions.
     */
    variant: ToggletipVariant;
    /**
     * Title text displayed in the header.
     */
    title: string;
    /**
     * Description text shown in the content area.
     */
    description: string | undefined;
    /**
     * If true, shows the content slot area.
     * Use the `content` slot to provide custom content.
     */
    hasContent: boolean;
    /**
     * If true, shows the action buttons container.
     * Both primary and secondary buttons are shown if labels are provided.
     * TODO(designer): Should both buttons always be shown, or is one preferred as primary?
     */
    hasActions: boolean;
    /**
     * If true, shows the leading icon in the header.
     * The icon adapts to the current `variant` by default, or can be overridden via the `leading-icon` slot.
     */
    hasLeadingIcon: boolean;
    /**
     * If true, shows the trailing icon in the header.
     * Use the `trailing-icon` slot to provide a custom icon.
     */
    hasTrailingIcon: boolean;
    /**
     * Sets a custom width for the toggletip in pixels.
     * If not set, defaults to 400px.
     */
    customWidth?: number;
    /**
     * Label for the primary action button.
     * Only shown if `hasActions` is true.
     */
    primaryButtonLabel: string;
    /**
     * Label for the secondary action button.
     * Only shown if `hasActions` is true.
     */
    secondaryButtonLabel: string;
    /**
     * Handles primary button click and dispatches custom event
     */
    private handlePrimaryAction;
    /**
     * Handles secondary button click and dispatches custom event
     */
    private handleSecondaryAction;
    private renderLeadingIcon;
    render(): import('lit-html').TemplateResult<1>;
    static styles: import('lit').CSSResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'obc-toggletip': ObcToggletip;
    }
}
//# sourceMappingURL=toggletip.d.ts.map