@sandlada/mdc/build/components/slider/internal/base-slider.d.ts

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

/**
 * @license
 * Copyright 2023 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 *
 * [Modified By Kai-Orion & Sandlada]
 *
 * Copyright 2026 Kai-Orion & Sandlada
 * SPDX-License-Identifier: MIT
 *
 * @link
 * https://github.com/material-components/material-web/blob/main/slider/internal/slider.ts
 */
import { LitElement, type PropertyValues } from 'lit';
import { createValidator, getValidityAnchor } from '../../../utils/behaviors/constraint-validation';
import { SliderValidator } from '../../../utils/behaviors/validators/slider-validator';
import { getFormState, getFormValue } from '../../../utils/form/form-associated';
export interface IMDCSliderAttributes {
    min: number;
    max: number;
    value?: number;
    valueStart?: number;
    valueEnd?: number;
    valueLabel: string;
    valueLabelStart: string;
    valueLabelEnd: string;
    ariaLabelStart: string;
    ariaLabelEnd: string;
    ariaValueTextStart: string;
    ariaValueTextEnd: string;
    step: number;
    ticks: boolean;
    labeled: boolean;
    range: boolean;
    nameStart: string;
    nameEnd: string;
}
declare const BaseSlider_base: Omit<typeof LitElement, "prototype"> & (new () => LitElement & import("../../../utils/behaviors/element-internals").WithElementInternals & import("../../../utils/form/form-associated").FormAssociated & import("../../../utils/behaviors/constraint-validation").ConstraintValidation & IMDCSliderAttributes);
export declare class BaseSlider extends BaseSlider_base {
    static shadowRootOptions: ShadowRootInit;
    disabled: boolean;
    name: string;
    private readonly inputStart;
    private readonly handleStart;
    private readonly rippleStart;
    private readonly inputEnd;
    private readonly handleEnd;
    private readonly rippleEnd;
    protected handleStartHover: boolean;
    protected handleEndHover: boolean;
    private startOnTop;
    private handlesOverlapping;
    protected renderValueStart?: number;
    protected renderValueEnd?: number;
    protected get renderAriaLabelStart(): string;
    protected get renderAriaValueTextStart(): string;
    protected get renderAriaLabelEnd(): string;
    protected get renderAriaValueTextEnd(): string;
    private ripplePointerId;
    private isRedispatchingEvent;
    private action?;
    constructor();
    focus(): void;
    protected willUpdate(changed: PropertyValues): void;
    protected updated(changed: PropertyValues): void;
    protected render(): import("lit-html").TemplateResult<1>;
    protected renderTrack(): import("lit-html").TemplateResult<1>;
    protected renderLabel(value: string): import("lit-html").TemplateResult<1>;
    protected renderHandle({ start, hover, label, }: {
        start: boolean;
        hover: boolean;
        label: string;
    }): import("lit-html").TemplateResult<1>;
    protected renderInput({ start, value, ariaLabel, ariaValueText, ariaMin, ariaMax, }: {
        start: boolean;
        value?: number;
        ariaLabel: string;
        ariaValueText: string;
        ariaMin: number;
        ariaMax: number;
    }): import("lit-html").TemplateResult<1>;
    private toggleRippleHover;
    protected handleFocus(event: Event): void;
    private startAction;
    private finishAction;
    protected handleKeydown(event: KeyboardEvent): void;
    protected handleKeyup(event: KeyboardEvent): void;
    protected handleDown(event: PointerEvent): void;
    protected handleUp(event: PointerEvent): Promise<void>;
    /**
     * The move handler tracks handle hovering to facilitate proper ripple
     * behavior on the slider handle. This is needed because user interaction with
     * the native input is leveraged to position the handle. Because the separate
     * displayed handle element has pointer events disabled (to allow interaction
     * with the input) and the input's handle is a pseudo-element, neither can be
     * the ripple's interactive element. Therefore the input is the ripple's
     * interactive element and has a `ripple` directive; however the ripple
     * is gated on the handle being hovered. In addition, because the ripple
     * hover state is being specially handled, it must be triggered independent
     * of the directive. This is done based on the hover state when the
     * slider is updated.
     */
    protected handleMove(event: PointerEvent): void;
    protected handleEnter(event: PointerEvent): void;
    protected handleLeave(): void;
    private updateOnTop;
    private needsClamping;
    private isActionFlipped;
    private flipAction;
    private clampAction;
    protected handleInput(event: InputEvent): void;
    protected handleChange(event: Event): void;
    [getFormValue](): string | FormData;
    formResetCallback(): void;
    formStateRestoreCallback(state: string | Array<[string, string]> | null): void;
    [createValidator](): SliderValidator;
    [getValidityAnchor](): this;
    [getFormState](): string | FormData;
}
export {};
//# sourceMappingURL=base-slider.d.ts.map