import { LitElement } from 'lit';
import '../../icons/icon-arrow-right-google.js';
/**
 * The visual variant for the start-stop switch when checked.
 * - `normal`: Standard blue appearance (default)
 * - `running`: Green appearance indicating motor/process is running
 * - `loading`: Light blue appearance indicating a pending/loading state
 */
export declare enum StartStopSwitchVariant {
    normal = "normal",
    running = "running",
    loading = "loading"
}
/**
 * The possible sizes for the start-stop switch.
 * - `regular`: Standard size with 32px track height
 * - `large`: Larger size with 48px track height
 */
export declare enum StartStopSwitchSize {
    regular = "regular",
    large = "large"
}
export type ObcStartStopSwitchChangeEvent = CustomEvent<{
    checked: boolean;
}>;
/**
 * `<obc-start-stop-switch>` – A two-state draggable toggle switch for significant binary actions like start/stop or enable/disable.
 *
 * This switch provides a visually distinct, draggable toggle for binary actions where both states need to be explicitly labeled and reinforced. Unlike a simple on/off toggle, it displays both the current state label and an action label on the draggable thumb, making it ideal for consequential actions where user awareness is critical.
 *
 * ### Features
 * - **Drag-to-toggle interaction:** Users must drag the thumb across the track to change state (90% threshold required). This deliberate interaction prevents accidental toggles.
 * - **Dual state labels:** Displays both a state label (e.g., "Running", "Stopped") and an action label on the thumb (e.g., "Start", "Stop").
 * - **Visual variants:**
 *   - `normal`: Standard blue appearance when checked (default)
 *   - `running`: Green appearance indicating an active process (e.g., motor running)
 *   - `loading`: Light blue appearance indicating a pending/transitional state
 * - **Size options:** `regular` (32px track height) or `large` (48px track height, matching touch target).
 * - **Alert frame:** Optional red border to indicate alarm or critical state.
 * - **Description text:** Optional text below the switch for additional context.
 * - **Animated transitions:** Smooth CSS transitions for thumb movement and state changes.
 *
 * ### Usage Guidelines
 * Use `<obc-start-stop-switch>` when you need a prominent control for toggling between two mutually exclusive states where:
 * - Both states should be explicitly labeled (not just "on/off")
 * - The action has significant consequences (starting a motor, enabling a system)
 * - Accidental activation should be prevented through deliberate drag interaction
 *
 * Avoid using this component for simple preferences or settings where a standard `<obc-switch>` or checkbox would suffice. This component is best suited for operational controls where the user must be aware of both the current state and the action they're about to take.
 *
 * **Related components:** For simple binary toggles without labels, use `<obc-switch>`. For grouped selections, use `<obc-radio>` or `<obc-checkbox>`.
 *
 * ### Slots
 * | Slot Name                 | Renders When...      | Purpose                                                    |
 * |---------------------------|----------------------|------------------------------------------------------------|
 * | checked-state-icon        | Always (if provided) | Icon displayed in the checked state area.                  |
 * | unchecked-state-icon      | Always (if provided) | Icon displayed in the unchecked state area.                |
 * | checked-state-label       | Always               | Label shown when switch is in checked position.            |
 * | unchecked-state-label     | Always               | Label shown when switch is in unchecked position.          |
 * | to-checked-action-label   | When unchecked       | Action label on thumb prompting user to activate.          |
 * | to-unchecked-action-label | When checked         | Action label on thumb prompting user to deactivate.        |
 *
 * ### Events
 * - `change` – Fired when the switch state changes after a successful drag. The event detail contains `{checked: boolean}` indicating the new state.
 *
 * ### Best Practices
 * - Keep labels concise (1-2 words) to fit within the track width.
 * - Use meaningful action verbs: "Start/Stop", "Enable/Disable", "Request/Release".
 * - Use the `running` variant to indicate an actively running process.
 * - Use the `loading` variant during async operations before transitioning to `running` or `normal`.
 * - Consider using `hasAlert` when the switch controls a critical system in alarm state.
 *
 * ### Example
 * ```html
 * <obc-start-stop-switch checked variant="running">
 *   <div slot="checked-state-icon"><obi-placeholder></obi-placeholder></div>
 *   <div slot="checked-state-label">Running</div>
 *   <div slot="unchecked-state-label">Stopped</div>
 *   <div slot="to-checked-action-label">Start</div>
 *   <div slot="to-unchecked-action-label">Stop</div>
 * </obc-start-stop-switch>
 * ```
 *
 * @slot checked-state-icon - Icon displayed in the checked (active) state area.
 * @slot unchecked-state-icon - Icon displayed in the unchecked (inactive) state area.
 * @slot checked-state-label - Label for the checked state (e.g., "Running", "Enabled").
 * @slot unchecked-state-label - Label for the unchecked state (e.g., "Stopped", "Disabled").
 * @slot to-checked-action-label - Action label on thumb when unchecked (e.g., "Start", "Enable").
 * @slot to-unchecked-action-label - Action label on thumb when checked (e.g., "Stop", "Disable").
 * @fires change {ObcStartStopSwitchChangeEvent} - Emitted when the switch is toggled via drag interaction.
 */
export declare class ObcStartStopSwitch extends LitElement {
    /**
     * Whether the switch is in the checked (active) state.
     * When checked, the thumb is on the right side.
     * When unchecked, the thumb is on the left side.
     *
     * Defaults to `false`.
     */
    checked: boolean;
    /**
     * The visual variant for the switch when checked.
     * - `normal`: Standard blue appearance (default)
     * - `running`: Green appearance indicating motor/process is running
     * - `loading`: Light blue appearance indicating a pending/loading state
     *
     * If `true`, the content of the `checked-state-icon` slot will be displayed when checked.
     */
    showUncheckedStateIcon: boolean;
    /**
     * This only affects the visual style, not the switch position.
     *
     * Defaults to `'normal'`.
     */
    variant: StartStopSwitchVariant;
    /**
     * The size of the switch.
     *
     * If `true`, the content of the `unchecked-state-icon` slot will be displayed when unchecked.
     */
    showCheckedStateIcon: boolean;
    /**
     * - `regular`: Standard size with 32px track height
     * - `large`: Larger size with 48px track height
     *
     * Defaults to `'regular'`.
     */
    size: StartStopSwitchSize;
    /**
     * Whether the switch is disabled.
     *
     * When disabled, the switch cannot be interacted with and displays a muted appearance.
     * In the disabled state, the thumb is hidden and only the state label is shown.
     *
     * Defaults to `false`.
     */
    disabled: boolean;
    /**
     * Whether to show an alert frame around the switch.
     *
     * When true, displays a red alert border around the switch to indicate
     * an alarm or critical state.
     *
     * Defaults to `false`.
     */
    hasAlert: boolean;
    /**
     * Whether to show the description below the switch.
     *
     * When true, displays the description text below the switch track.
     * The component's minimum height is maintained at the touch target size.
     *
     * Defaults to `false`.
     */
    hasDescription: boolean;
    /**
     * Description text displayed below the switch when `hasDescription` is true.
     *
     * Use this to provide additional context about the switch's purpose or current state.
     *
     * Defaults to `'Action description'`.
     */
    description: string;
    private dragging;
    private tmpChecked;
    private dragStartX;
    private dragCurrentX;
    private dragOffset;
    private trackWidth;
    private buttonWidth;
    private resizeObserver?;
    private buttonRef?;
    private trackRef?;
    private onDragStart;
    private onDragMove;
    private onDragEnd;
    private dispatchChangeEvent;
    private getButtonStyle;
    firstUpdated(): void;
    updated(changedProperties: Map<string, unknown>): void;
    disconnectedCallback(): void;
    render(): import('lit-html').TemplateResult<1>;
    static styles: import('lit').CSSResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'obc-start-stop-switch': ObcStartStopSwitch;
    }
}
//# sourceMappingURL=start-stop-switch.d.ts.map