@tylertech/forge 3.0.0-next.5 → 3.0.0-next.7

package/esm/ripple/forge-ripple.js

@@ -9,6 +9,10 @@ export class ForgeRipple extends MDCRipple {
     handleFocus() {
         this.foundation.handleFocus();
     }
+    /** Manually trigger focus deactivation. */
+    handleBlur() {
+        this.foundation.handleBlur();
+    }
     /** Executes the ripple animation. */
     animate() {
         this.foundation.animateActivation(); // MDC does not expose this method, using `any` to access it.

package/esm/ripple/ripple.js

@@ -15,16 +15,16 @@ import { RippleFoundation } from './ripple-foundation';
  * @tag forge-ripple
  */
 let RippleComponent = class RippleComponent extends BaseComponent {
-    constructor() {
-        super();
-        this._foundation = new RippleFoundation(new RippleAdapter(this));
-    }
     static get observedAttributes() {
         return [
             RIPPLE_CONSTANTS.attributes.TARGET,
             RIPPLE_CONSTANTS.attributes.UNBOUNDED
         ];
     }
+    constructor() {
+        super();
+        this._foundation = new RippleFoundation(new RippleAdapter(this));
+    }
     connectedCallback() {
         this._foundation.initialize();
     }

package/esm/select/core/base-select-constants.d.ts

@@ -4,10 +4,10 @@
  * License: Apache-2.0
  */
 import { IListDropdownOption, IListDropdownOptionGroup } from '../../list-dropdown/list-dropdown-constants';
-export declare type SelectOptionBuilder = (option: ISelectOption, parentElement: HTMLElement) => HTMLElement;
-export declare type SelectSelectedTextBuilder = (selectedOptions: IListDropdownOption[]) => string;
-export declare type SelectOptionListenerDestructor = () => void;
-export declare type SelectBeforeValueChangeCallback<T> = (value: T | T[]) => boolean | Promise<boolean>;
+export type SelectOptionBuilder = (option: ISelectOption, parentElement: HTMLElement) => HTMLElement;
+export type SelectSelectedTextBuilder = (selectedOptions: IListDropdownOption[]) => string;
+export type SelectOptionListenerDestructor = () => void;
+export type SelectBeforeValueChangeCallback<T> = (value: T | T[]) => boolean | Promise<boolean>;
 export interface ISelectOption extends IListDropdownOption {
 }
 export interface ISelectOptionGroup extends IListDropdownOptionGroup {

package/esm/select/option/option.js

@@ -15,10 +15,6 @@ import { OptionFoundation } from './option-foundation';
  * @tag forge-option
  */
 let OptionComponent = class OptionComponent extends BaseComponent {
-    constructor() {
-        super();
-        this._foundation = new OptionFoundation(new OptionAdapter(this));
-    }
     static get observedAttributes() {
         return [
             OPTION_CONSTANTS.attributes.VALUE,
@@ -34,6 +30,10 @@ let OptionComponent = class OptionComponent extends BaseComponent {
             OPTION_CONSTANTS.attributes.TRAILING_ICON_TYPE
         ];
     }
+    constructor() {
+        super();
+        this._foundation = new OptionFoundation(new OptionAdapter(this));
+    }
     initializedCallback() {
         if (!this.hasAttribute('role')) {
             this.setAttribute('role', 'option');

package/esm/select/option-group/option-group.js

@@ -13,14 +13,14 @@ import { OPTION_GROUP_CONSTANTS } from './option-group-constants';
  * @tag forge-option-group
  */
 let OptionGroupComponent = class OptionGroupComponent extends BaseComponent {
-    constructor() {
-        super();
-    }
     static get observedAttributes() {
         return [
             OPTION_GROUP_CONSTANTS.attributes.LABEL
         ];
     }
+    constructor() {
+        super();
+    }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
             case OPTION_GROUP_CONSTANTS.attributes.LABEL:

package/esm/select/select/select-adapter.d.ts

@@ -8,7 +8,7 @@ import { IFloatingLabel } from '../../floating-label/floating-label';
 import { ISelectComponent } from './select';
 import { IBaseSelectAdapter, BaseSelectAdapter } from '../core';
 import { IListDropdownConfig } from '../../list-dropdown/list-dropdown-constants';
-export declare type OptionListenerDestructor = () => void;
+export type OptionListenerDestructor = () => void;
 export interface ISelectAdapter extends IBaseSelectAdapter {
     initializeFloatingLabel(): IFloatingLabel;
     initializeLabel(): void;

package/esm/select/select-component-delegate.d.ts

@@ -6,7 +6,7 @@
 import { IBaseComponentDelegateConfig } from '../core/delegates/base-component-delegate';
 import { FormFieldComponentDelegate, IFormFieldComponentDelegateOptions } from '../core/delegates/form-field-component-delegate';
 import { ISelectComponent } from './select/select';
-export declare type SelectComponentDelegateProps = Partial<ISelectComponent>;
+export type SelectComponentDelegateProps = Partial<ISelectComponent>;
 export interface ISelectComponentDelegateOptions extends IFormFieldComponentDelegateOptions {
     helperText?: string;
 }

package/esm/slider/slider-adapter.d.ts

@@ -0,0 +1,95 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
+import { ISliderComponent } from '../slider';
+export interface ISliderState {
+    startFraction: number;
+    endFraction: number;
+    tickCount: number;
+}
+export interface ISliderAdapter extends IBaseAdapter {
+    initialize(): void;
+    destroy(): void;
+    addInputListener(type: keyof HTMLElementEventMap, listener: EventListener): void;
+    update(state: ISliderState): void;
+    updateLabels(labelStart: string, labelEnd: string): void;
+    updateHandleLayering(): void;
+    tryHoverStartHandle(coords: {
+        x: number;
+        y: number;
+    }): void;
+    tryHoverEndHandle(coords: {
+        x: number;
+        y: number;
+    }): void;
+    tryBlurStartHandle(): void;
+    tryBlurEndHandle(): void;
+    tryDetectOverlap(): void;
+    leaveHandleContainer(): void;
+    syncInputValues(valueStart: number, valueEnd: number): void;
+    setRange(value: boolean): void;
+    setTickmarks(value: boolean): void;
+    setStep(step: number): void;
+    setMin(value: number): void;
+    setMax(value: number): void;
+    setDisabled(value: boolean): void;
+    setReadonly(value: boolean): void;
+    toggleLabels(value: boolean): void;
+    setStartAriaLabel(value: string | null): void;
+    setEndAriaLabel(value: string | null): void;
+}
+export declare class SliderAdapter extends BaseAdapter<ISliderComponent> {
+    private readonly _rootElement;
+    private readonly _trackElement;
+    private readonly _handleContainerElement;
+    private readonly _endInputElement;
+    private readonly _endHandleElement;
+    private readonly _endHandleThumbElement;
+    private readonly _endHandleRippleSurfaceElement;
+    private _endLabelContentElement;
+    private _startInputElement;
+    private _startHandleElement;
+    private _startHandleThumbElement;
+    private _startHandleRippleSurfaceElement;
+    private _startLabelContentElement;
+    private _startHandleRipple;
+    private _endHandleRipple;
+    private _ripplesInitialized;
+    constructor(component: ISliderComponent);
+    initialize(): void;
+    destroy(): void;
+    addInputListener(type: keyof HTMLElementEventMap, listener: EventListener): void;
+    update({ startFraction, endFraction, tickCount }: ISliderState): void;
+    updateLabels(labelStart: string, labelEnd: string): void;
+    updateHandleLayering(): void;
+    tryHoverStartHandle(coords: {
+        x: number;
+        y: number;
+    }): void;
+    tryHoverEndHandle(coords: {
+        x: number;
+        y: number;
+    }): void;
+    tryBlurStartHandle(): void;
+    tryBlurEndHandle(): void;
+    tryDetectOverlap(): void;
+    leaveHandleContainer(): void;
+    syncInputValues(valueStart: number, valueEnd: number): void;
+    setRange(value: boolean): void;
+    setTickmarks(value: boolean): void;
+    setStep(step: number): void;
+    setMin(value: number): void;
+    setMax(value: number): void;
+    setDisabled(value: boolean): void;
+    setReadonly(value: boolean): void;
+    toggleLabels(value: boolean): void;
+    setStartAriaLabel(value: string | null): void;
+    setEndAriaLabel(value: string | null): void;
+    private _getInputs;
+    private _deferRippleInitialization;
+    private _tryInitializeEndHandleRipple;
+    private _tryInitializeStartHandleRipple;
+}

package/esm/slider/slider-adapter.js

@@ -0,0 +1,238 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement, toggleAttribute, toggleClass } from '@tylertech/forge-core';
+import { BaseAdapter } from '../core/base/base-adapter';
+import { elementsOverlapping, isPointerOverElement, userInteractionListener } from '../core/utils/utils';
+import { SLIDER_CONSTANTS } from './slider-constants';
+import { SliderHandleRipple } from './slider-handle-ripple';
+import { createLabel, createStartHandleElement, createStartInputElement } from './slider-utils';
+export class SliderAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._ripplesInitialized = false;
+        this._rootElement = getShadowElement(component, SLIDER_CONSTANTS.selectors.ROOT);
+        this._trackElement = getShadowElement(component, SLIDER_CONSTANTS.selectors.TRACK);
+        this._handleContainerElement = getShadowElement(component, SLIDER_CONSTANTS.selectors.HANDLE_CONTAINER);
+        this._endInputElement = getShadowElement(component, SLIDER_CONSTANTS.selectors.END_INPUT);
+        this._endHandleElement = getShadowElement(component, SLIDER_CONSTANTS.selectors.END_HANDLE);
+        this._endHandleThumbElement = getShadowElement(component, SLIDER_CONSTANTS.selectors.END_HANDLE_THUMB);
+        this._endHandleRippleSurfaceElement = getShadowElement(component, SLIDER_CONSTANTS.selectors.END_RIPPLE_SURFACE);
+        this._endLabelContentElement = getShadowElement(component, SLIDER_CONSTANTS.selectors.END_LABEL_CONTENT);
+    }
+    initialize() {
+        this._deferRippleInitialization();
+    }
+    destroy() {
+        var _a, _b;
+        (_a = this._startHandleRipple) === null || _a === void 0 ? void 0 : _a.destroy();
+        this._startHandleRipple = undefined;
+        (_b = this._endHandleRipple) === null || _b === void 0 ? void 0 : _b.destroy();
+        this._endHandleRipple = undefined;
+        this._ripplesInitialized = false;
+    }
+    addInputListener(type, listener) {
+        const inputs = this._getInputs();
+        inputs.forEach(input => input.addEventListener(type, listener));
+    }
+    update({ startFraction, endFraction, tickCount }) {
+        this._rootElement.style.setProperty(SLIDER_CONSTANTS.cssCustomProperties.START_FRACTION, String(startFraction));
+        this._rootElement.style.setProperty(SLIDER_CONSTANTS.cssCustomProperties.END_FRACTION, String(endFraction));
+        this._rootElement.style.setProperty(SLIDER_CONSTANTS.cssCustomProperties.TICK_COUNT, String(tickCount));
+    }
+    updateLabels(labelStart, labelEnd) {
+        var _a;
+        if (this._startLabelContentElement) {
+            this._startLabelContentElement.textContent = labelStart;
+        }
+        if (this._endLabelContentElement) {
+            this._endLabelContentElement.textContent = labelEnd;
+        }
+        (_a = this._startInputElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-valuetext', labelStart);
+        this._endInputElement.setAttribute('aria-valuetext', labelEnd);
+    }
+    updateHandleLayering() {
+        const isEndFocused = this._endInputElement.matches(':focus');
+        if (this._startHandleElement) {
+            toggleClass(this._startHandleElement, !isEndFocused, SLIDER_CONSTANTS.classes.ON_TOP);
+        }
+        toggleClass(this._endHandleElement, isEndFocused, SLIDER_CONSTANTS.classes.ON_TOP);
+    }
+    tryHoverStartHandle(coords) {
+        var _a, _b, _c, _d;
+        if (!this._component.disabled) {
+            (_a = this._startHandleRipple) === null || _a === void 0 ? void 0 : _a.emulateFocus();
+        }
+        if (this._startHandleThumbElement && isPointerOverElement(coords, this._startHandleThumbElement)) {
+            this._handleContainerElement.classList.add(SLIDER_CONSTANTS.classes.HOVER);
+            (_b = this._startHandleElement) === null || _b === void 0 ? void 0 : _b.classList.add(SLIDER_CONSTANTS.classes.HOVER);
+        }
+        else if (!((_c = this._startInputElement) === null || _c === void 0 ? void 0 : _c.matches(':focus'))) {
+            this._handleContainerElement.classList.remove(SLIDER_CONSTANTS.classes.HOVER);
+            (_d = this._startHandleElement) === null || _d === void 0 ? void 0 : _d.classList.remove(SLIDER_CONSTANTS.classes.HOVER);
+        }
+    }
+    tryHoverEndHandle(coords) {
+        var _a;
+        if (!this._component.disabled) {
+            (_a = this._endHandleRipple) === null || _a === void 0 ? void 0 : _a.emulateFocus();
+        }
+        if (isPointerOverElement(coords, this._endHandleThumbElement)) {
+            this._handleContainerElement.classList.add(SLIDER_CONSTANTS.classes.HOVER);
+            this._endHandleThumbElement.classList.add(SLIDER_CONSTANTS.classes.HOVER);
+        }
+        else if (!this._endInputElement.matches(':focus')) {
+            this._handleContainerElement.classList.remove(SLIDER_CONSTANTS.classes.HOVER);
+            this._endHandleThumbElement.classList.remove(SLIDER_CONSTANTS.classes.HOVER);
+        }
+    }
+    tryBlurStartHandle() {
+        var _a, _b;
+        if (!((_a = this._startInputElement) === null || _a === void 0 ? void 0 : _a.matches(':focus'))) {
+            (_b = this._startHandleRipple) === null || _b === void 0 ? void 0 : _b.emulateBlur();
+        }
+    }
+    tryBlurEndHandle() {
+        var _a;
+        if (!this._endInputElement.matches(':focus')) {
+            (_a = this._endHandleRipple) === null || _a === void 0 ? void 0 : _a.emulateBlur();
+        }
+    }
+    tryDetectOverlap() {
+        if (this._startHandleElement) {
+            const isOverlapping = elementsOverlapping(this._startHandleElement, this._endHandleElement);
+            toggleClass(this._endHandleElement, isOverlapping, SLIDER_CONSTANTS.classes.OVERLAPPING);
+            toggleClass(this._startHandleElement, isOverlapping, SLIDER_CONSTANTS.classes.OVERLAPPING);
+        }
+    }
+    leaveHandleContainer() {
+        this._handleContainerElement.classList.remove(SLIDER_CONSTANTS.classes.HOVER);
+    }
+    syncInputValues(valueStart, valueEnd) {
+        if (this._startInputElement) {
+            this._startInputElement.valueAsNumber = valueStart;
+        }
+        this._endInputElement.valueAsNumber = valueEnd;
+        if (this._startInputElement) {
+            const data = new FormData();
+            data.append(this._component.nameStart, String(valueStart));
+            data.append(this._component.nameEnd, String(valueEnd));
+            this._component.internals.setFormValue(data);
+        }
+        else {
+            this._component.internals.setFormValue(String(valueEnd));
+        }
+    }
+    setRange(value) {
+        var _a, _b, _c;
+        this._rootElement.classList.toggle(SLIDER_CONSTANTS.classes.RANGE, value);
+        if (value) {
+            // Create start input
+            this._startInputElement = createStartInputElement(this._component);
+            this._rootElement.insertAdjacentElement('afterbegin', this._startInputElement);
+            // Ensure the end input is updated to the valueEnd property value now that we are in range mode
+            this._endInputElement.valueAsNumber = this._component.valueEnd;
+            // Create start handle
+            const thumbLabel = this._startInputElement.value;
+            this._startHandleElement = createStartHandleElement(thumbLabel);
+            this._handleContainerElement.insertAdjacentElement('afterbegin', this._startHandleElement);
+            this._startHandleThumbElement = getShadowElement(this._component, SLIDER_CONSTANTS.selectors.START_HANDLE_THUMB);
+            this._startHandleRippleSurfaceElement = getShadowElement(this._component, SLIDER_CONSTANTS.selectors.START_RIPPLE_SURFACE);
+            this._startLabelContentElement = getShadowElement(this._component, SLIDER_CONSTANTS.selectors.START_LABEL_CONTENT);
+            // Initialize start handle ripple if the end handle ripple has already been initialized
+            if (this._ripplesInitialized) {
+                this._tryInitializeStartHandleRipple();
+            }
+        }
+        else {
+            (_a = this._startInputElement) === null || _a === void 0 ? void 0 : _a.remove();
+            (_b = this._startHandleElement) === null || _b === void 0 ? void 0 : _b.remove();
+            (_c = this._startHandleRipple) === null || _c === void 0 ? void 0 : _c.destroy();
+            this._startHandleRipple = undefined;
+            this._startInputElement = undefined;
+            this._startHandleElement = undefined;
+            this._startHandleThumbElement = undefined;
+            this._startHandleRippleSurfaceElement = undefined;
+            this._startLabelContentElement = undefined;
+        }
+    }
+    setTickmarks(value) {
+        this._trackElement.classList.toggle(SLIDER_CONSTANTS.classes.TICKMARKS, value);
+    }
+    setStep(step) {
+        const inputs = this._getInputs();
+        inputs.forEach(input => input.step = String(step));
+    }
+    setMin(value) {
+        const inputs = this._getInputs();
+        inputs.forEach(input => input.min = String(value));
+    }
+    setMax(value) {
+        const inputs = this._getInputs();
+        inputs.forEach(input => input.max = String(value));
+    }
+    setDisabled(value) {
+        const inputs = this._getInputs();
+        inputs.forEach(input => input.disabled = value);
+    }
+    setReadonly(value) {
+        const inputs = this._getInputs();
+        inputs.forEach(input => input.readOnly = value);
+    }
+    toggleLabels(value) {
+        var _a;
+        const labels = this._rootElement.querySelectorAll(SLIDER_CONSTANTS.selectors.LABEL);
+        labels.forEach(label => label.remove());
+        this._endLabelContentElement = undefined;
+        this._startLabelContentElement = undefined;
+        if (value) {
+            const endLabelEl = createLabel(this._endInputElement.value);
+            this._endHandleElement.insertAdjacentElement('beforeend', endLabelEl);
+            this._endLabelContentElement = getShadowElement(this._component, SLIDER_CONSTANTS.selectors.END_LABEL_CONTENT);
+            if (this._startInputElement) {
+                const startLabelEl = createLabel(this._startInputElement.value);
+                (_a = this._startHandleElement) === null || _a === void 0 ? void 0 : _a.insertAdjacentElement('beforeend', startLabelEl);
+                this._startLabelContentElement = getShadowElement(this._component, SLIDER_CONSTANTS.selectors.START_LABEL_CONTENT);
+            }
+        }
+    }
+    setStartAriaLabel(value) {
+        if (this._startInputElement) {
+            toggleAttribute(this._startInputElement, !!value, 'aria-label', value);
+        }
+    }
+    setEndAriaLabel(value) {
+        toggleAttribute(this._endInputElement, !!value, 'aria-label', value);
+    }
+    _getInputs() {
+        const inputs = [];
+        if (this._startInputElement) {
+            inputs.push(this._startInputElement);
+        }
+        return [...inputs, this._endInputElement];
+    }
+    async _deferRippleInitialization() {
+        const type = await userInteractionListener(this._rootElement);
+        this._ripplesInitialized = true;
+        this._tryInitializeEndHandleRipple(type);
+        this._tryInitializeStartHandleRipple(type);
+    }
+    _tryInitializeEndHandleRipple(type) {
+        this._endHandleRipple = new SliderHandleRipple(this._endHandleRippleSurfaceElement, this._endInputElement);
+        if (type === 'focusin' && this._endInputElement.matches(':focus')) {
+            this._endHandleRipple.emulateFocus();
+        }
+    }
+    _tryInitializeStartHandleRipple(type) {
+        var _a;
+        if (this._startHandleRipple || !this._startInputElement || !this._startHandleRippleSurfaceElement) {
+            return;
+        }
+        this._startHandleRipple = new SliderHandleRipple(this._startHandleRippleSurfaceElement, this._startInputElement);
+        if (type === 'focusin' && ((_a = this._startInputElement) === null || _a === void 0 ? void 0 : _a.matches(':focus'))) {
+            this._startHandleRipple.emulateFocus();
+        }
+    }
+}

package/esm/slider/slider-component-delegate.d.ts

@@ -6,8 +6,8 @@
 import { FormFieldComponentDelegate, IFormFieldComponentDelegateOptions } from '../core';
 import { IBaseComponentDelegateConfig } from '../core/delegates/base-component-delegate';
 import { ISliderComponent } from '../slider';
-import { ISliderChangeEventData } from './slider-constants';
-export declare type SliderComponentDelegateProps = Partial<ISliderComponent>;
+import { ISliderRangeEventData } from './slider-constants';
+export type SliderComponentDelegateProps = Partial<ISliderComponent>;
 export interface ISliderComponentDelegateOptions extends IFormFieldComponentDelegateOptions {
 }
 export interface ISliderComponentDelegateConfig extends IBaseComponentDelegateConfig<ISliderComponent, ISliderComponentDelegateOptions> {
@@ -18,9 +18,25 @@ export declare class SliderComponentDelegate extends FormFieldComponentDelegate<
     set value(value: number);
     get valueStart(): number;
     set valueStart(value: number);
+    get valueEnd(): number;
+    set valueEnd(value: number);
     get disabled(): boolean;
     set disabled(value: boolean);
-    onChange(listener: (value: ISliderChangeEventData) => void): void;
+    get min(): number;
+    set min(value: number);
+    get max(): number;
+    set max(value: number);
+    get step(): number;
+    get range(): boolean;
+    set range(value: boolean);
+    get tickmarks(): boolean;
+    set tickmarks(value: boolean);
+    get labeled(): boolean;
+    set labeled(value: boolean);
+    get labelBuilder(): (value: number, which?: 'start' | 'end') => string;
+    set labelBuilder(value: (value: number, which?: 'start' | 'end') => string);
+    onInput(listener: (value: number | ISliderRangeEventData) => void): void;
+    onChange(listener: (value: number | ISliderRangeEventData) => void): void;
     onFocus(listener: (evt: Event) => void): void;
     onBlur(listener: (evt: Event) => void): void;
     protected _build(): ISliderComponent;

package/esm/slider/slider-component-delegate.js

@@ -21,12 +21,60 @@ export class SliderComponentDelegate extends FormFieldComponentDelegate {
     set valueStart(value) {
         this._element.valueStart = value;
     }
+    get valueEnd() {
+        return this._element.valueEnd;
+    }
+    set valueEnd(value) {
+        this._element.valueEnd = value;
+    }
     get disabled() {
         return this._element.disabled;
     }
     set disabled(value) {
         this._element.disabled = value;
     }
+    get min() {
+        return this._element.min;
+    }
+    set min(value) {
+        this._element.min = value;
+    }
+    get max() {
+        return this._element.max;
+    }
+    set max(value) {
+        this._element.max = value;
+    }
+    get step() {
+        return this._element.step;
+    }
+    get range() {
+        return this._element.range;
+    }
+    set range(value) {
+        this._element.range = value;
+    }
+    get tickmarks() {
+        return this._element.tickmarks;
+    }
+    set tickmarks(value) {
+        this._element.tickmarks = value;
+    }
+    get labeled() {
+        return this._element.labeled;
+    }
+    set labeled(value) {
+        this._element.labeled = value;
+    }
+    get labelBuilder() {
+        return this._element.labelBuilder;
+    }
+    set labelBuilder(value) {
+        this._element.labelBuilder = value;
+    }
+    onInput(listener) {
+        this._element.addEventListener('forge-slider-input', ({ detail }) => listener(detail));
+    }
     onChange(listener) {
         this._element.addEventListener('forge-slider-change', ({ detail }) => listener(detail));
     }

package/esm/slider/slider-constants.d.ts

@@ -6,36 +6,75 @@
 export declare const SLIDER_CONSTANTS: {
     elementName: "forge-slider";
     attributes: {
-        TYPE: string;
+        ARIA_LABEL: string;
+        ARIA_LABEL_START: string;
+        ARIA_LABEL_END: string;
         VALUE: string;
         VALUE_START: string;
+        VALUE_END: string;
+        LABEL: string;
+        LABEL_START: string;
+        LABEL_END: string;
         MIN: string;
         MAX: string;
         STEP: string;
+        TICKMARKS: string;
+        LABELED: string;
+        RANGE: string;
         DISABLED: string;
-        COLOR: string;
+        READONLY: string;
     };
     selectors: {
         ROOT: string;
-        THUMB: string;
-        THUMB_START: string;
-        VALUE_INPUT: string;
-        VALUE_INPUT_START: string;
-        TRACK_CONTAINER: string;
-        TRACK_ACTIVE_FILL: string;
+        TRACK: string;
+        HANDLE_CONTAINER: string;
+        START_INPUT: string;
+        END_INPUT: string;
+        START_HANDLE: string;
+        START_HANDLE_THUMB: string;
+        END_HANDLE: string;
+        END_HANDLE_THUMB: string;
+        START_LABEL: string;
+        START_LABEL_CONTENT: string;
+        END_LABEL: string;
+        END_LABEL_CONTENT: string;
+        START_RIPPLE_SURFACE: string;
+        END_RIPPLE_SURFACE: string;
+        LABEL: string;
+        INPUT: string;
+    };
+    classes: {
+        RANGE: string;
+        TICKMARKS: string;
+        ON_TOP: string;
+        OVERLAPPING: string;
+        HOVER: string;
+        HANDLE: string;
+        HANDLE_RIPPLE: string;
+        HANDLE_THUMB: string;
+        HANDLE_START: string;
+        HANDLE_LABEL: string;
+        LABEL: string;
+        LABEL_CONTENT: string;
     };
     events: {
-        MDC_INPUT: string;
-        MDC_CHANGE: string;
-        FORGE_INPUT: string;
-        FORGE_CHANGE: string;
+        INPUT: string;
+        CHANGE: string;
+    };
+    numbers: {
+        DEFAULT_STEP: number;
+        DEFAULT_VALUE: number;
+        DEFAULT_START_VALUE: number;
+        DEFAULT_END_VALUE: number;
+    };
+    cssCustomProperties: {
+        START_FRACTION: string;
+        END_FRACTION: string;
+        TICK_COUNT: string;
     };
 };
-export interface ISliderInputEventData {
-    value?: number;
-    valueStart?: number;
-    valueEnd?: number;
-}
-export interface ISliderChangeEventData extends ISliderInputEventData {
+export interface ISliderRangeEventData {
+    valueStart: number;
+    valueEnd: number;
 }
-export declare type SliderType = 'continuous' | 'discrete' | 'discrete-markers' | 'continuous-range' | 'discrete-range' | 'discrete-range-markers';
+export type SliderLabelBuilder = (value: number, which?: 'start' | 'end') => string;