import { LitElement } from 'lit';
import '../../icons/icon-chevron-double-right-google.js';
export type ObcSlideButtonSlideEvent = CustomEvent<{
    completed: boolean;
}>;
/**
 * `<obc-slide-button>` – A slide-to-confirm button that requires users to drag the button to the end of a track to trigger an action.
 *
 * Appears as a horizontal button with a draggable handle. The user must slide the handle to the right to complete the action, helping prevent accidental activations. Commonly used for critical or irreversible actions where explicit user intent is required (e.g., "Delete", "Confirm", "Unlock").
 *
 * ---
 *
 * ### Features
 * - **Slide-to-activate interaction:** Requires a deliberate sliding gesture to trigger the action, reducing accidental clicks.
 * - **Disabled state:** Can be disabled to prevent interaction (`disabled` property).
 * - **Leading icon (optional):** Supports a leading icon via the `leading-icon` slot, controlled by the `hasLeadingIcon` property.
 * - **Custom label:** Label text is provided via the `label` slot.
 * - **Auto-disable option:** When `autoDisable` is true, the button disables itself after a successful slide, preventing repeated actions.
 * - **Hug content:** The `hugContent` property allows the button to shrink to fit its content, rather than stretching to full width.
 * - **Visual feedback:** Provides animated feedback when sliding and snapping back if not completed.
 * - **Trailing icon:** Always displays a trailing double-chevron icon to indicate sliding direction.
 *
 * ---
 *
 * ### Usage Guidelines
 * Use `obc-slide-button` for actions that require extra confirmation or where accidental activation could have significant consequences. Typical scenarios include confirming deletions, submitting irreversible forms, or unlocking sensitive features. Avoid using for routine or low-risk actions where a standard button suffices.
 *
 * - The sliding gesture provides a clear affordance for intentional actions.
 * - If you want the button to automatically disable after use (e.g., to prevent double submissions), set `autoDisable` to true.
 * - For best usability, keep the label concise and action-oriented (e.g., "Slide to confirm", "Slide to delete").
 * - The leading icon is optional and can be omitted for a simpler appearance.
 * - The button will snap back if the slide is not completed past the threshold.
 * - Only one slide button should be used for a given action to avoid confusion.
 *
 * **TODO(designer):** Confirm if there are recommended minimum/maximum label lengths or if there are accessibility guidelines for color contrast and drag affordance.
 *
 * ---
 *
 * ### Slots
 *
 * | Slot Name      | Renders When...        | Purpose                                      |
 * | -------------- | --------------------- | --------------------------------------------- |
 * | leading-icon   | `hasLeadingIcon` true | Icon at the start of the button (optional)    |
 * | label          | Always                 | Main label text for the button                |
 *
 * ---
 *
 * ### Properties and Attributes
 * - `disabled` (boolean): Disables the button and prevents interaction. When true, the button is visually muted and cannot be slid.
 * - `hasLeadingIcon` (boolean): Controls whether the leading icon slot is shown. Set to false to hide the icon area.
 * - `hugContent` (boolean): If true, the button shrinks to fit its content instead of stretching to full width.
 * - `autoDisable` (boolean): When true, the button automatically disables itself after a successful slide action.
 *
 * ---
 *
 * ### Events
 * - `slide` – Fired when the slide action is completed (i.e., the handle is dragged past the threshold). The event detail contains `{completed: true}`.
 *
 * ---
 *
 * ### Example
 *
 * ```html
 * <obc-slide-button autoDisable>
 *   <obi-placeholder slot="leading-icon"></obi-placeholder>
 *   <span slot="label">Slide to confirm</span>
 * </obc-slide-button>
 * ```
 * In this example, the button displays a leading icon and a label. After sliding to the end, it disables itself automatically.
 *
 * @slot leading-icon - The icon to display at the start of the button content (shown when `hasLeadingIcon` is true).
 * @slot label - The label text to display in the button.
 * @fires slide {ObcSlideButtonSlideEvent} - Emitted when the slide action is completed.
 */
export declare class ObcSlideButton extends LitElement {
    /**
     * Whether the slide button is disabled. When true, the button cannot be interacted with and appears visually muted.
     */
    disabled: boolean;
    /**
     * Whether to show the leading icon slot. Set to true to show the icon area at the start of the button.
     */
    hasLeadingIcon: boolean;
    /**
     * Whether the button should hug its content. When true, the button width shrinks to fit its content instead of stretching to fill the container.
     */
    hugContent: boolean;
    /**
     * Whether to automatically disable the button after a successful slide. When true, the button disables itself after the slide action completes.
     */
    autoDisable: boolean;
    private dragging;
    private animatingBack;
    private dragStartX;
    private dragCurrentX;
    private dragOffset;
    private trackWidth;
    private buttonWidth;
    private slideThreshold;
    private buttonRef?;
    private visualContainerRef?;
    private onDragStart;
    private onDragMove;
    private onDragEnd;
    private getButtonStyle;
    firstUpdated(): void;
    render(): import('lit-html').TemplateResult<1>;
    static styles: import('lit').CSSResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'obc-slide-button': ObcSlideButton;
    }
}
//# sourceMappingURL=slide-button.d.ts.map