@telesign/boreal-web-components 0.1.0-alpha.4 → 0.1.0-alpha.6

package/dist/collection/components/forms/bds-slider/bds-slider.js

@@ -0,0 +1,847 @@
+import { h, Host } from "@stencil/core";
+import { SLIDER_TOOLTIP, SLIDER_TYPE, } from "./types";
+import { formAssociatedMixin } from "../../../mixins/index";
+import { Mixin } from "@stencil/core/internal";
+import { setFormValue } from "../../../utils/index";
+import { parseValues, resolveValues, serializeFormValue } from "./helpers/parseValues";
+import { SliderDOMController, SliderService } from "./helpers";
+/**
+ * Slider component for selecting a numeric value or a range of values.
+ *
+ * @summary An accessible, single or multi-handle range slider built on HTML `<input type="range">`.
+ * Supports discrete tick marks, tooltips, disabled state, and N-handle multi-value mode
+ * with automatic collision prevention between handles.
+ *
+ * @property {number}          min      - Minimum selectable value. Defaults to `0`.
+ * @property {number}          max      - Maximum selectable value. Defaults to `100`.
+ * @property {number}          step     - Step size for each increment/decrement. Defaults to `1`.
+ * @property {number[]} value   - Current value(s). A single number for one handle;
+ *                                        an array for multi-handle mode. Defaults to `0`.
+ * @property {boolean}         disabled - Disables interaction with the slider. Defaults to `false`.
+ * @property {boolean}         discrete - Shows tick marks at each step position along the track. Defaults to `false`.
+ * @property {string}          tooltip  - Controls tooltip visibility: `"never"`, or `"focus"`. Defaults to `"focus"`.
+ *
+ * @method getValues - Returns the current value(s) as `number | number[]`.
+ * @method setValues - Programmatically sets the slider value(s).
+ */
+export class BdsSlider extends Mixin(formAssociatedMixin) {
+    constructor() {
+        this.blockClass = 'bds-slider';
+        /** Active input elements, one per handle */
+        this.inputEls = [];
+        /** Active tooltip elements, one per handle */
+        this.tooltipEls = [];
+        // ---------------------------------------------------------------------------
+        // Props
+        // ---------------------------------------------------------------------------
+        /** Minimum selectable value. Defaults to `0`. */
+        this.min = 0;
+        /** Maximum selectable value. Defaults to `100`. */
+        this.max = 100;
+        /** Slider type that defines the slider behavior. Defaults to `single`. */
+        this.type = SLIDER_TYPE.SINGLE;
+        /** Label for the slider. Defaults to `""`. */
+        this.label = '';
+        /**
+         * Step size for each increment/decrement.
+         * Must be a positive number. Defaults to `1`.
+         */
+        this.step = 1;
+        /**
+         * Shows the min and max values of the slider.
+         * Defaults to `false`.
+         */
+        this.showLimits = false;
+        /**
+         * Current value(s) of the slider.
+         * Accepts `number`, `number[]`, or a JSON string for HTML vanilla usage.
+         * - Single handle: `50` or `"50"`
+         * - Multi-handle:  `[10, 50, 80]` or `"[10, 50, 80]"`
+         * - Defaults to `0`.
+         */
+        this.value = [0];
+        /** Disables the slider, preventing all user interaction. Defaults to `false`. */
+        this.disabled = false;
+        /** Name of the form control, submitted as a key in the form data. */
+        this.name = '';
+        /**
+         * JSON string array of handle values that should be individually disabled.
+         * Each number must match a value present in the `value` prop.
+         * Accepts `number`, `number[]`, or JSON string: `"[5, 30]"`.
+         * Defaults to `"[]"`.
+         */
+        this.disabledHandlers = '[]';
+        /**
+         * When `true`, renders discrete tick marks along the track
+         * at every step position between `min` and `max`.
+         * Defaults to `false`.
+         */
+        this.discrete = false;
+        /**
+         * Controls tooltip visibility on each handle.
+         * - `"never"`  — tooltip is hidden.
+         * - `"focus"`  — tooltip appears only when the handle is active/focused.
+         * Defa ults to `"focus"`.
+         */
+        this.tooltip = SLIDER_TOOLTIP.FOCUS;
+        // ---------------------------------------------------------------------------
+        // State
+        // ---------------------------------------------------------------------------
+        /** Internal mirror of `disabled`, kept in sync via `@Watch`. */
+        this.isDisabled = false;
+        /** Internal mirror of `discrete`, kept in sync via `@Watch`. */
+        this.isDiscrete = false;
+        /**
+         * Internal mirror of `values` normalized to `number[]`.
+         * All internal logic reads from here; never from `values` directly.
+         * Updated via `parseValues()` whenever `values` prop changes.
+         */
+        this.internalValues = [0];
+        this.handleClick = (event) => {
+            const target = event.target;
+            this.bdsClick.emit({ target, value: [...this.internalValues] });
+        };
+        super();
+    }
+    // ---------------------------------------------------------------------------
+    // Watchers
+    // ---------------------------------------------------------------------------
+    onDisabledChange(next) {
+        this.isDisabled = next;
+        this.syncDOMUpdates();
+    }
+    onDisabledHandlersChange() {
+        this.syncDOMUpdates();
+    }
+    onValueChange(next) {
+        this.internalValues = this.resolveValues(next);
+        this.syncDOMUpdates();
+    }
+    onConfigChange() {
+        this.isDiscrete = this.discrete;
+        this.internalValues = this.resolveValues(this.value);
+        this.buildAdapter();
+        this.syncDOMUpdates();
+    }
+    onRangeChange() {
+        this.buildAdapter();
+        this.syncDOMUpdates();
+    }
+    // ---------------------------------------------------------------------------
+    // Form-associated callbacks
+    // ---------------------------------------------------------------------------
+    formAssociatedCallback() {
+        this.syncFormValue();
+    }
+    formResetCallback() {
+        const initial = this.resolveValues(this.value);
+        this.updateValues(initial, false);
+        this.syncDOMUpdates();
+        this.emitChange(initial);
+    }
+    formStateRestoreCallback(state, _mode) {
+        if (typeof state !== 'string')
+            return;
+        const parsed = state
+            .split(',')
+            .map(value => parseFloat(value))
+            .filter(value => !Number.isNaN(value));
+        if (parsed.length === 0)
+            return;
+        this.updateValues(parsed, false);
+        this.syncDOMUpdates();
+        setFormValue(this.internals, state);
+    }
+    syncFormValue() {
+        setFormValue(this.internals, serializeFormValue(this.internalValues));
+    }
+    // ---------------------------------------------------------------------------
+    // Public methods
+    // ---------------------------------------------------------------------------
+    /**
+     * Returns the current value(s) of the slider.
+     * - Single-handle → `number`
+     * - Multi-handle  → `number[]`
+     */
+    async getValues() {
+        return [...this.internalValues];
+    }
+    /**
+     * Programmatically sets the slider value(s).
+     * @param next - A single `number` or an array of `number[]` matching the number of handles.
+     */
+    async setValues(next) {
+        const parsed = this.resolveValues(next);
+        this.updateValues(parsed, false);
+        this.syncDOMUpdates();
+        this.syncFormValue();
+        this.emitChange(parsed);
+    }
+    // ---------------------------------------------------------------------------
+    // Private — slider lifecycle
+    // ---------------------------------------------------------------------------
+    buildAdapter() {
+        this.service = new SliderService({
+            min: Number(this.min),
+            max: Number(this.max),
+            step: Number(this.step),
+            type: this.type,
+            value: this.internalValues,
+            disabledHandlers: parseValues(this.disabledHandlers, []),
+            discrete: this.isDiscrete,
+            disabled: this.isDisabled,
+            name: String(this.name ?? ''),
+        });
+    }
+    syncDOMUpdates() {
+        this.syncInputsToValues();
+        this.updateProgress();
+        this.syncTooltips();
+    }
+    // ---------------------------------------------------------------------------
+    // Private — helpers
+    // ---------------------------------------------------------------------------
+    handleInputEvent(handleIndex, event) {
+        const input = event?.target;
+        const targetInput = input ?? this.inputEls[handleIndex];
+        if (targetInput === undefined)
+            return;
+        let value = this.service.snapToStep(parseFloat(targetInput.value));
+        const nextValues = [...this.internalValues];
+        nextValues[handleIndex] = value;
+        const corrected = this.service.applyCollision(nextValues, handleIndex);
+        value = corrected[handleIndex] ?? value;
+        this.internalValues = corrected;
+        SliderDOMController.updateInputValue(targetInput, value);
+        this.updateProgress();
+        this.syncTooltip(handleIndex, value);
+        this.syncFormValue();
+    }
+    handleChangeEvent(handleIndex, event) {
+        this.handleInputEvent(handleIndex, event);
+        if (this.isDisabled)
+            return;
+        this.emitChange([...this.internalValues]);
+    }
+    onHandleFocus(handleIndex) {
+        SliderDOMController.addTooltipsStates(this.tooltipEls[handleIndex], this.blockClass);
+    }
+    onHandleBlur(handleIndex) {
+        SliderDOMController.removeTooltipsStates(this.tooltipEls[handleIndex], this.blockClass);
+    }
+    onHandleInactive(handleIndex) {
+        const input = this.inputEls[handleIndex];
+        SliderDOMController.removeTooltipsStates(input, this.blockClass);
+        input.blur();
+    }
+    syncInputsToValues() {
+        SliderDOMController.syncTooltips(this.internalValues, this.inputEls);
+    }
+    updateProgress() {
+        if (this.connectEl === undefined || this.service === undefined)
+            return;
+        const segment = this.service.getConnectSegment(this.internalValues);
+        SliderDOMController.moveConnect(this.connectEl, segment);
+    }
+    syncTooltip(handleIndex, value) {
+        const tooltip = this.tooltipEls[handleIndex];
+        if (tooltip === undefined)
+            return;
+        tooltip.textContent = String(value);
+        tooltip.style.left = `${this.getThumbPosition(value)}px`;
+    }
+    syncTooltips() {
+        this.internalValues.forEach((value, index) => {
+            this.syncTooltip(index, value);
+        });
+    }
+    resolveValues(raw) {
+        const service = this.service;
+        return resolveValues(raw, this.min, this.max, this.type).map(value => service.clamp(value));
+    }
+    updateValues(next, shouldEmit = true) {
+        this.internalValues = next;
+        if (shouldEmit) {
+            this.emitChange(next);
+        }
+    }
+    emitChange(values) {
+        if (this.isDisabled)
+            return;
+        const payload = { value: values };
+        this.bdsChange.emit(payload);
+        this.valueChange.emit(values);
+        this.syncFormValue();
+    }
+    isHandleDisabled(value) {
+        const disabledValues = parseValues(this.disabledHandlers, []);
+        return this.isDisabled || disabledValues.includes(value);
+    }
+    getPipPositions() {
+        if (this.service === undefined)
+            return [];
+        return this.service.getPipPositions();
+    }
+    /**
+     * Returns the CSS modifier class map for the slider component.
+     *
+     * Includes visual state modifiers such as disabled,
+     * discrete mode, and tooltip behavior.
+     */
+    get classMap() {
+        const blockClass = 'bds-slider';
+        return {
+            [blockClass]: true,
+            [`${blockClass}--disabled`]: this.isDisabled,
+            [`${blockClass}--discrete`]: this.isDiscrete,
+            [`${blockClass}--label`]: Boolean(this.label.trim()),
+            [`${blockClass}--tooltip`]: Boolean(this.tooltip) && this.tooltip !== SLIDER_TOOLTIP.NEVER && this.isDisabled === false,
+            [`${blockClass}--tooltip-never`]: this.tooltip === SLIDER_TOOLTIP.NEVER,
+            [`${blockClass}--tooltip-focus`]: this.tooltip === SLIDER_TOOLTIP.FOCUS,
+        };
+    }
+    // ---------------------------------------------------------------------------
+    // Private — Render helpers
+    // ---------------------------------------------------------------------------
+    getThumbPosition(value) {
+        if (this.trackEl === undefined || this.service === undefined)
+            return 0;
+        const trackWidth = this.trackEl.getBoundingClientRect().width;
+        const thumbSize = parseFloat(getComputedStyle(this.el).getPropertyValue('--handle-size')) || 16;
+        return this.service.getThumbCSSPosition(value, trackWidth, thumbSize);
+    }
+    getThumbCSSPosition(percent) {
+        return SliderDOMController.getThumbCSSPosition(percent);
+    }
+    renderInput(handleIndex, value) {
+        const isDisabled = this.isHandleDisabled(value);
+        return (h("input", { class: `${this.blockClass}__input`, type: "range", min: this.min, max: this.max, step: this.step, value: value, disabled: isDisabled, "data-handle": handleIndex, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": value, "aria-disabled": isDisabled ? 'true' : undefined, "aria-describedby": `bds-slider-tooltip-${handleIndex}`, onInput: event => this.handleInputEvent(handleIndex, event), onChange: event => this.handleChangeEvent(handleIndex, event), onFocus: () => this.onHandleFocus(handleIndex), onBlur: () => this.onHandleBlur(handleIndex), onPointerUp: () => this.onHandleInactive(handleIndex), ref: el => {
+                if (el !== undefined) {
+                    this.inputEls[handleIndex] = el;
+                }
+            } }));
+    }
+    renderMinMax() {
+        if (this.showLimits === false)
+            return null;
+        return (h("div", { class: `${this.blockClass}__limits` }, h("bds-typography", { variant: "helper" }, this.min), h("bds-typography", { variant: "helper" }, this.max)));
+    }
+    handleTrackClick(event) {
+        if (this.isDisabled || this.trackEl === undefined)
+            return;
+        const target = event.target;
+        if (target.classList.contains(`${this.blockClass}__input`))
+            return;
+        const rect = this.trackEl.getBoundingClientRect();
+        const percent = Math.min(Math.max((event.clientX - rect.left) / rect.width, 0), 1);
+        const rawValue = Number(this.min) + percent * (Number(this.max) - Number(this.min));
+        const value = this.service.snapToStep(rawValue);
+        const nextValues = [...this.internalValues];
+        if (this.type === SLIDER_TYPE.SINGLE) {
+            if (this.isHandleDisabled(nextValues[0]))
+                return;
+            nextValues[0] = value;
+            this.internalValues = nextValues;
+        }
+        else {
+            const [minValue, maxValue] = nextValues;
+            const distanceToMin = Math.abs(value - minValue);
+            const distanceToMax = Math.abs(value - maxValue);
+            const targetHandle = distanceToMin <= distanceToMax ? 0 : 1;
+            if (this.isHandleDisabled(nextValues[targetHandle]))
+                return;
+            nextValues[targetHandle] = value;
+            this.internalValues = this.service.applyCollision(nextValues, targetHandle);
+        }
+        this.syncDOMUpdates();
+        this.emitChange([...this.internalValues]);
+    }
+    renderTooltip(handleIndex, value) {
+        if (this.tooltip === SLIDER_TOOLTIP.NEVER)
+            return null;
+        return (h("div", { id: `bds-slider-tooltip-${handleIndex}`, class: {
+                [`${this.blockClass}__tooltip`]: true,
+                [`${this.blockClass}__tooltip--${this.tooltip}`]: true,
+            }, role: "tooltip", onClick: event => {
+                event.stopPropagation();
+            }, style: {
+                left: `${this.service?.toPercent(value) ?? 0}%`,
+            }, ref: el => {
+                if (el !== undefined) {
+                    this.tooltipEls[handleIndex] = el;
+                }
+            } }, value));
+    }
+    renderPips() {
+        if (!this.isDiscrete)
+            return null;
+        return (h("div", { class: `${this.blockClass}__pips` }, this.getPipPositions().map((percent, index) => (h("div", { key: `pip-${index}`, class: `${this.blockClass}__pip`, style: { left: this.getThumbCSSPosition(percent) } })))));
+    }
+    renderLabel() {
+        if (this.label.trim() === '' || this.label === undefined)
+            return null;
+        return (h("bds-typography", { class: `${this.blockClass}__label`, htmlFor: this.el.id, variant: "label" }, this.label));
+    }
+    // ---------------------------------------------------------------------------
+    // Lifecycle
+    // ---------------------------------------------------------------------------
+    componentWillLoad() {
+        this.isDisabled = this.disabled;
+        this.isDiscrete = this.discrete;
+        this.buildAdapter();
+        this.internalValues = this.resolveValues(this.value);
+    }
+    componentDidLoad() {
+        this.syncDOMUpdates();
+    }
+    componentDidUpdate() {
+        this.syncDOMUpdates();
+    }
+    disconnectedCallback() {
+        this.inputEls = [];
+        this.tooltipEls = [];
+    }
+    // ---------------------------------------------------------------------------
+    // Render
+    // ---------------------------------------------------------------------------
+    render() {
+        return (h(Host, { key: 'd883f67c2dfc80f8b97f2d7394b99ad6c30798fa', class: this.classMap, "aria-disabled": this.isDisabled ? 'true' : undefined, onClick: this.handleClick }, this.renderLabel(), h("div", { key: '2704c76fbc751029ca89519950dfb90c3294d5e7', class: `${this.blockClass}__wrapper`, onClick: event => this.handleTrackClick(event) }, h("div", { key: 'db67ea023a4f200069e68e02281539378e9e39db', class: `${this.blockClass}__track-base`, ref: el => {
+                if (el !== undefined)
+                    this.trackEl = el;
+            } }), h("div", { key: '02163060bb531de138aae3ad1a4e7f221e7c127f', class: `${this.blockClass}__connect`, ref: el => {
+                if (el !== undefined)
+                    this.connectEl = el;
+            } }), this.renderPips(), this.internalValues.map((value, index) => this.renderInput(index, value)), this.internalValues.map((value, index) => this.renderTooltip(index, value))), this.renderMinMax()));
+    }
+    static get is() { return "bds-slider"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-slider.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-slider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum selectable value. Defaults to `0`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "min",
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum selectable value. Defaults to `100`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "max",
+                "defaultValue": "100"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SliderType",
+                    "resolved": "\"range\" | \"single\"",
+                    "references": {
+                        "SliderType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/forms/bds-slider/types/index.ts::SliderType",
+                            "referenceLocation": "SliderType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Slider type that defines the slider behavior. Defaults to `single`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "SLIDER_TYPE.SINGLE"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the slider. Defaults to `\"\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Step size for each increment/decrement.\nMust be a positive number. Defaults to `1`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "step",
+                "defaultValue": "1"
+            },
+            "showLimits": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the min and max values of the slider.\nDefaults to `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-limits",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SliderRawValue",
+                    "resolved": "number[] | string",
+                    "references": {
+                        "SliderRawValue": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/forms/bds-slider/types/index.ts::SliderRawValue",
+                            "referenceLocation": "SliderRawValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value(s) of the slider.\nAccepts `number`, `number[]`, or a JSON string for HTML vanilla usage.\n- Single handle: `50` or `\"50\"`\n- Multi-handle:  `[10, 50, 80]` or `\"[10, 50, 80]\"`\n- Defaults to `0`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "[0]"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the slider, preventing all user interaction. Defaults to `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the form control, submitted as a key in the form data."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "disabledHandlers": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SliderRawValue",
+                    "resolved": "number[] | string",
+                    "references": {
+                        "SliderRawValue": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/forms/bds-slider/types/index.ts::SliderRawValue",
+                            "referenceLocation": "SliderRawValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "JSON string array of handle values that should be individually disabled.\nEach number must match a value present in the `value` prop.\nAccepts `number`, `number[]`, or JSON string: `\"[5, 30]\"`.\nDefaults to `\"[]\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled-handlers",
+                "defaultValue": "'[]'"
+            },
+            "discrete": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When `true`, renders discrete tick marks along the track\nat every step position between `min` and `max`.\nDefaults to `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "discrete",
+                "defaultValue": "false"
+            },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SliderTooltipType",
+                    "resolved": "\"focus\" | \"never\"",
+                    "references": {
+                        "SliderTooltipType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/forms/bds-slider/types/index.ts::SliderTooltipType",
+                            "referenceLocation": "SliderTooltipType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls tooltip visibility on each handle.\n- `\"never\"`  \u2014 tooltip is hidden.\n- `\"focus\"`  \u2014 tooltip appears only when the handle is active/focused.\nDefa ults to `\"focus\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "tooltip",
+                "defaultValue": "SLIDER_TOOLTIP.FOCUS"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isDisabled": {},
+            "isDiscrete": {},
+            "internalValues": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bdsChange",
+                "name": "bdsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever the slider value(s) change due to user interaction.\nPayload: `{ value: number }` for single handle, `{ value: number[] }` for multi-handle."
+                },
+                "complexType": {
+                    "original": "SliderChangeDetail",
+                    "resolved": "SliderChangeDetail",
+                    "references": {
+                        "SliderChangeDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/forms/bds-slider/types/index.ts::SliderChangeDetail",
+                            "referenceLocation": "SliderChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Native-style alias of `bdsChange`. Emitted simultaneously.\nPayload: `{ value: number[] }` for multi-handle."
+                },
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                }
+            }, {
+                "method": "bdsClick",
+                "name": "bdsClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user clicks on the slider.\nPayload: `{ target: HTMLElement }` and `{ value: number[] }` for multi-handle."
+                },
+                "complexType": {
+                    "original": "{ target: HTMLElement; value: number[] }",
+                    "resolved": "{ target: HTMLElement; value: number[]; }",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getValues": {
+                "complexType": {
+                    "signature": "() => Promise<number[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number[]>"
+                },
+                "docs": {
+                    "text": "Returns the current value(s) of the slider.\n- Single-handle \u2192 `number`\n- Multi-handle  \u2192 `number[]`",
+                    "tags": []
+                }
+            },
+            "setValues": {
+                "complexType": {
+                    "signature": "(next: SliderRawValue) => Promise<void>",
+                    "parameters": [{
+                            "name": "next",
+                            "type": "string | number[]",
+                            "docs": "- A single `number` or an array of `number[]` matching the number of handles."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "SliderRawValue": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/forms/bds-slider/types/index.ts::SliderRawValue",
+                            "referenceLocation": "SliderRawValue"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically sets the slider value(s).",
+                    "tags": [{
+                            "name": "param",
+                            "text": "next - A single `number` or an array of `number[]` matching the number of handles."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "onDisabledChange"
+            }, {
+                "propName": "disabledHandlers",
+                "methodName": "onDisabledHandlersChange"
+            }, {
+                "propName": "value",
+                "methodName": "onValueChange"
+            }, {
+                "propName": "type",
+                "methodName": "onConfigChange"
+            }, {
+                "propName": "discrete",
+                "methodName": "onConfigChange"
+            }, {
+                "propName": "min",
+                "methodName": "onRangeChange"
+            }, {
+                "propName": "max",
+                "methodName": "onRangeChange"
+            }, {
+                "propName": "step",
+                "methodName": "onRangeChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}