import { LitElement } from 'lit';
import '../button/button.js';
import '../icon-button/icon-button.js';
import '../../icons/icon-close-google.js';
export declare enum ObcFloatingItemType {
    Regular = "regular",
    Application = "application"
}
export declare enum ObcFloatingItemDirection {
    horizontal = "horizontal",
    vertical = "vertical"
}
export declare enum ObcFloatingItemLineType {
    singleLine = "single-line",
    multiLine = "multi-line"
}
/**
 * `<obc-floating-item>` – A transient toast, inline notification, or floating message component for brief, non-blocking feedback.
 *
 * Appears temporarily to display status updates, confirmations, or alerts, floating above the UI without interrupting the user's workflow. Supports both single-line and multi-line content, optional timestamp, and up to two action buttons.
 * obc-floating-item – transient toast / inline-notification component.
 *
 * ## Features
 *
 * - **Message types:**
 *   - `regular` (default): Standard notification with a single icon.
 *   - `application`: Enhanced visual style with primary and secondary icons.
 * - **Layout directions:**
 *   - `horizontal` (default): Icon and content side-by-side, actions to the right.
 *   - `vertical`: Icon and content stacked, actions below.
 * - **Line length:**
 *   - `single-line` (default): Truncates message and title to one line.
 *   - `multi-line`: Allows longer content, up to 8 lines.
 * - **Timestamp and day chip:**
 *   - Optionally display a time label and day chip for contextual messages.
 * - **Actions:**
 *   - Up to two configurable action buttons (primary and secondary), plus a dismiss/close icon.
 * - **Custom events:**
 *   - Emits events for action and dismiss interactions, so host apps can respond without querying the DOM.
 *
 * ## Usage Guidelines
 *
 * Use `<obc-floating-item>` for brief, transient feedback such as form submissions, status updates, or non-critical alerts. Ideal when you want to confirm an action or notify the user without disrupting their workflow.
 * Avoid using for persistent or critical alerts—use a dialog or alert banner for those cases.
 * Only one floating message should be visible at a time to avoid overwhelming the user.
 * For best results, keep messages concise and actions minimal (Material Design recommends at most one action in a snackbar; use the second action sparingly, e.g., for "Undo").
 *
 * **Keywords:** toast, snackbar, notification, floating message, inline alert, transient feedback
 *
 * ## Slots
 *
 * | Name             | Rendered when…                       | Purpose                          |
 * | ---------------- | ------------------------------------ | -------------------------------- |
 * | `primary-icon`   | always                               | Main icon to represent the message’s category. Use e.g. `<obi-placeholder></obi-placeholder>`. |
 * | `secondary-icon` | `type="application"`                 | Additional icon for application-type messages. |
 * | `title`          | always                               | Title or heading of the message. |
 * | `description`    | always                               | Detailed message text.           |
 * | `time`           | `hasTimestamp`                       | Timestamp label (e.g., "12:45"). |
 * | `day`            | `hasTimestamp && hasDay`             | Day label (e.g., "Mon").         |
 * | `action`         | `action`                             | Label for the primary action button. |
 * | `action2`        | `action && action2`                  | Label for the secondary action button. |
 *
 * ## Events
 *
 * - `action-click` – Fired when the primary action button is clicked.
 * - `action2-click` – Fired when the secondary action button is clicked.
 * - `dismiss-click` – Fired when the close icon is clicked.
 *
 * ## Example
 *
 * ```html
 * <obc-floating-item type="regular" hasTimestamp action>
 *   <div slot="primary-icon"><obi-placeholder></obi-placeholder></div>
 *   <span slot="title">Network Connected</span>
 *   <span slot="description">You are now online.</span>
 *   <span slot="time">14:32</span>
 *   <span slot="action">View</span>
 * </obc-floating-item>
 * ```
 *
 * In this example, the message appears with an icon, title, description, timestamp, and a single action button.
 *
 * ---
 *
 * @slot primary-icon - Main icon to represent the message’s category.
 * @slot secondary-icon - Additional icon for application-type messages.
 * @slot title - Title or heading of the message.
 * @slot description - Detailed message text.
 * @slot time - Timestamp label (e.g., "12:45").
 * @slot day - Day label (e.g., "Mon").
 * @slot action - Label for the primary action button.
 * @slot action2 - Label for the secondary action button.
 * @fires action-click {CustomEvent<void>} Fired when the first action button is clicked.
 * @fires action2-click {CustomEvent<void>} Fired when the second action button is clicked.
 * @fires dismiss-click {CustomEvent<void>} Fired when the close icon is clicked.
 */
export declare class ObcFloatingItem extends LitElement {
    /**
     * Visual style of the message.
     * - `regular` (default): Standard notification with a single icon.
     * - `application`: Enhanced style with primary and secondary icons.
     *
     * Use `application` when you want to visually distinguish system-level or application-specific messages.
     */
    type: ObcFloatingItemType;
    /**
     * Layout direction of the component.
     * - `horizontal` (default): Icon/content/actions arranged side-by-side.
     * - `vertical`: Icon/content stacked, actions below.
     *
     * Choose `vertical` for narrow containers or when space is limited.
     */
    direction: ObcFloatingItemDirection;
    /**
     * Shows a timestamp (slot `time`) when `true`.
     * Enable to display a time label next to the title.
     */
    hasTimestamp: boolean;
    /**
     * Shows a day chip (slot `day`) next to the timestamp when `true`.
     * Only applied when `hasTimestamp` is also `true`.
     * Use to provide additional context for the timestamp.
     */
    hasDay: boolean;
    /**
     * Renders a primary action button (slot `action`) when `true`.
     * Use for the main action the user can take in response to the message.
     */
    action: boolean;
    /**
     * Enables a secondary action button (slot `action2`).
     * Only applied when `action` is also `true`.
     * Use sparingly for secondary actions (e.g., "Undo").
     */
    action2: boolean;
    /**
     * Line wrapping style for the message content.
     * - `single-line` (default): Truncates to one line.
     * - `multi-line`: Allows up to 8 lines of content.
     *
     * Use `multi-line` for longer messages or detailed descriptions.
     */
    lineType: ObcFloatingItemLineType;
    /** Dispatches **action-click** when the first action button is clicked. */
    private onActionClick;
    /** Dispatches **action2-click** when the second action button is clicked. */
    private onAction2Click;
    /** Dispatches **dismiss-click** when the close icon is clicked. */
    private onDismissClick;
    protected render(): import('lit-html').TemplateResult<1>;
    static styles: import('lit').CSSResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'obc-floating-item': ObcFloatingItem;
    }
}
//# sourceMappingURL=floating-item.d.ts.map