import { LitElement } from 'lit';
/**
 * `<obc-progress-indicator-dots>` – A visual step indicator component that displays a horizontal row of dots to represent progress through a sequence of steps (also known as a stepper, pagination indicator, or progress dots).
 *
 * This component visually communicates the user's current position within a multi-step process, such as onboarding flows, carousels, or paginated content. The active step is highlighted, while inactive steps are shown as neutral dots. The number of steps and the current step are configurable.
 *
 * ### Features
 * - **Step Count:** Displays a configurable number of steps as dots (minimum 1).
 * - **Active Step Highlight:** Clearly indicates the current/active step.
 * - **Fullwidth Option:** Can stretch to fill the container width or remain compact.
 * - **Responsive Layout:** Dots are spaced evenly and adapt to available space.
 * - **Accessible State:** The active step is visually distinct for clarity.
 *
 * ### Usage Guidelines
 * Use `obc-progress-indicator-dots` to show progress through a linear, discrete process where each step is equally weighted (such as onboarding, multi-page forms, or image carousels). It is best suited for scenarios where users need a quick visual reference of their progress and the total number of steps.
 *
 * - Ideal for wizard-style flows, paginated content, or navigation between sequential screens.
 * - Not intended for displaying progress percentages or indeterminate progress—use a linear or circular progress bar for those cases.
 * - Avoid using for processes with more steps than can be comfortably displayed as dots (e.g., more than 7–10).
 * - **TODO(designer):** Confirm if there are recommended maximum/minimum step counts or accessibility guidelines for color contrast.
 *
 * ### Properties
 * - `totalSteps` (number): Sets the total number of steps/dots to display (minimum 1; default: 5).
 * - `currentStep` (number): Indicates the currently active step (1-based index; default: 1). Values outside the valid range are clamped.
 * - `fullwidth` (boolean): If true, the indicator stretches to fill the container width; otherwise, it uses a compact layout (default: false).
 *
 * ### Best Practices
 * - Ensure `currentStep` is always within the range of 1 to `totalSteps` for accurate highlighting.
 * - For accessibility, pair with descriptive labels or ARIA attributes as needed (not included by default).
 * - Use in conjunction with navigation controls (e.g., Next/Previous buttons) to allow users to move between steps.
 *
 * ### Example:
 * ```html
 * <obc-progress-indicator-dots totalSteps="4" currentStep="2" fullwidth></obc-progress-indicator-dots>
 * ```
 *
 * /**
 * @slot - (none) This component does not use content slots.
 */
export declare class ObcProgressIndicatorDots extends LitElement {
    /**
     * Sets the total number of steps/dots to display.
     * Must be at least 1. Defaults to 5.
     */
    totalSteps: number;
    /**
     * Indicates the currently active step (1-based index).
     * Values outside the valid range are clamped to [1, totalSteps].
     * Defaults to 1.
     */
    currentStep: number;
    /**
     * If true, the indicator stretches to fill the container width.
     * If false, uses a compact layout sized to its content.
     * Defaults to false.
     */
    fullwidth: boolean;
    private get validCurrentStep();
    private get validTotalSteps();
    private renderDots;
    render(): import('lit-html').TemplateResult<1>;
    static styles: import('lit').CSSResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'obc-progress-indicator-dots': ObcProgressIndicatorDots;
    }
}
//# sourceMappingURL=progress-indicator-dots.d.ts.map