@govbr-ds/webcomponents 2.1.0 → 2.1.2

package/dist/collection/components/slider/slider.js

@@ -0,0 +1,1324 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { arrow, autoUpdate, computePosition, flip, hide, offset, shift } from "@floating-ui/dom";
+import { Host, h } from "@stencil/core";
+import { clampNumber } from "../../shared/utils/clamp";
+import { dispatchNativeFormEvent, getEventTarget, isEventTargetInside, redispatchNativeFormEvent, } from "../../shared/utils/event";
+import { getFormValidationState, isFormControlDisabled, setFormValidity, } from "../../shared/utils/form";
+import { generateUniqueId } from "../../shared/utils/id";
+import { createRafBatcher } from "../../shared/utils/raf-batcher";
+import { hasAssignedSlotContent } from "../../shared/utils/slot";
+import { resolveFormValidator, runFormValidator } from "../../shared/utils/validator";
+/**
+ * ## Design System
+ *
+ * Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/slider?tab=designer).
+ *
+ * @category Formulários
+ * @status stable
+ * @slot ref-start - Conteúdo exibido como referência inicial abaixo da trilha.
+ * @slot ref-end - Conteúdo exibido como referência final abaixo da trilha.
+ * @slot feedback - Mensagem de validação, normalmente um `br-message`.
+ *
+ * @part base - Contêiner principal do slider.
+ * @part layout - Contêiner de layout do slider.
+ * @part body - Área que agrupa trilha e referências.
+ * @part track - Área interativa da trilha.
+ * @part track-visual - Trilha visual do slider.
+ * @part tick-labels - Contêiner das etiquetas das marcações.
+ * @part tick-label - Etiqueta de uma marcação intermediária.
+ * @part filled-track - Trecho preenchido da trilha.
+ * @part value-label - Etiqueta com o valor da alça.
+ * @part value-label-arrow - Seta da etiqueta de valor.
+ * @part thumb - Alça de controle do slider.
+ * @part thumb-start - Alça inicial do slider.
+ * @part thumb-end - Alça final do slider em modo composto.
+ * @part references - Contêiner das referências inicial e final.
+ * @part reference-start - Referência inicial.
+ * @part reference-end - Referência final.
+ * @part reference-bound - Valor fixo de limite renderizado por `show-bounds`.
+ * @part input-wrapper - Contêiner do campo numérico.
+ * @part input - Campo numérico sincronizado com o slider.
+ * @part feedback - Contêiner da mensagem de validação.
+ */
+export class Slider {
+    constructor() {
+        /**
+         * Indica se alguma alça está sendo arrastada.
+         */
+        this.dragging = false;
+        this.formDisabled = false;
+        /**
+         * Indica se o slot `ref-end` possui conteúdo.
+         */
+        this.hasRefEnd = false;
+        /**
+         * Indica se o slot `ref-start` possui conteúdo.
+         */
+        this.hasRefStart = false;
+        this.hasFeedbackSlot = false;
+        this.customValidationMessage = '';
+        this.validatorMessage = null;
+        this.isValidating = false;
+        /**
+         * Identificador único.
+         * Caso não seja fornecido, um ID gerado automaticamente será usado.
+         */
+        this.customId = generateUniqueId();
+        /**
+         * Valor mínimo aceito pelo slider.
+         */
+        this.min = 0;
+        /**
+         * Valor máximo aceito pelo slider.
+         */
+        this.max = 100;
+        /**
+         * Incremento aplicado a cada passo.
+         */
+        this.step = 1;
+        /**
+         * Valor atual do slider (alça inicial no modo composto).
+         */
+        this.value = 0;
+        /**
+         * Valor da alça final no modo composto (`range`).
+         * Quando não fornecido em modo composto, assume o valor de `max`.
+         * @deprecated Use `rangeValue`.
+         */
+        this.valueEnd = NaN;
+        /**
+         * Desativa o slider, tornando-o não interativo.
+         */
+        this.disabled = false;
+        /**
+         * Densidade da alça de controle.
+         * `small` = 16px (desktop compacto), `medium` = 20px (desktop padrão), `large` = 24px (mobile).
+         */
+        this.density = 'medium';
+        /**
+         * Exibe o slider na orientação vertical.
+         * @deprecated Use `orientation`.
+         */
+        this.vertical = false;
+        /**
+         * Ativa o modo composto com duas alças para seleção de faixa.
+         */
+        this.range = false;
+        /**
+         * Exibe etiqueta com o valor atual acima da alça (horizontal) ou à esquerda (vertical).
+         * Ignorado quando `show-input` está ativo.
+         */
+        this.showLabel = false;
+        /**
+         * Exibe campo de entrada numérico sincronizado com a alça.
+         * Quando ativo, a etiqueta de valor não é exibida.
+         */
+        this.showInput = false;
+        /**
+         * Exibe gradações na trilha como pequenos espaços que indicam os steps disponíveis,
+         * forçando a alça de controle a saltar entre os valores predefinidos e
+         * impossibilitando a seleção de valores aleatórios.
+         */
+        this.showTicks = false;
+        /** Exibe os valores das marcações derivadas de `min`, `max` e `step`. */
+        this.showTickLabels = false;
+        /**
+         * Exibe os limites nas referências inicial e final: `min` no início e `max` no fim
+         * (limites fixos), tanto em modo simples quanto em modo composto (`range`). O valor
+         * selecionado por cada alça é exibido na etiqueta (`show-label`), não nas referências.
+         * Quando ativo, sobrescreve o conteúdo dos slots `ref-start` e `ref-end`.
+         */
+        this.showBounds = false;
+        this.inputEditing = false;
+        this.draggingThumb = 'start';
+        this.tickValuesCacheKey = '';
+        this.tickValuesCache = [];
+        this.initialValue = 0;
+        this.initialValueEnd = Number.NaN;
+        this.validationRunId = 0;
+        this.dragRect = null;
+        this.pointerBatch = createRafBatcher((rawValue) => this.applyUpdate(rawValue));
+        this.handlePointerDown = (event) => {
+            if (this.isDisabled())
+                return;
+            event.preventDefault();
+            this.dragRect = this.trackEl?.getBoundingClientRect() ?? null;
+            const rawValue = this.effectiveVertical
+                ? this.getValueFromY(event.clientY, this.dragRect)
+                : this.getValueFromX(event.clientX, this.dragRect);
+            if (this.range) {
+                if (isEventTargetInside(event, this.thumbEndEl)) {
+                    this.draggingThumb = 'end';
+                }
+                else if (isEventTargetInside(event, this.thumbStartEl)) {
+                    this.draggingThumb = 'start';
+                }
+                else {
+                    this.draggingThumb = this.nearerThumb(rawValue);
+                }
+            }
+            else {
+                this.draggingThumb = 'start';
+            }
+            this.dragging = true;
+            this.trackEl?.setPointerCapture(event.pointerId);
+            this.applyUpdate(rawValue);
+            const thumbEl = this.draggingThumb === 'end' ? this.thumbEndEl : this.thumbStartEl;
+            thumbEl?.focus();
+        };
+        this.handlePointerMove = (event) => {
+            if (!this.dragging || this.isDisabled())
+                return;
+            const rawValue = this.effectiveVertical
+                ? this.getValueFromY(event.clientY, this.dragRect)
+                : this.getValueFromX(event.clientX, this.dragRect);
+            this.pointerBatch.schedule(rawValue);
+        };
+        this.handlePointerUp = (event) => {
+            if (!this.dragging)
+                return;
+            this.pointerBatch.flush();
+            this.dragging = false;
+            this.dragRect = null;
+            this.trackEl?.releasePointerCapture(event.pointerId);
+            dispatchNativeFormEvent(this.el, 'change');
+            void this.validate();
+        };
+        this.handleInputInput = (event) => {
+            this.inputEditing = true;
+            const parsed = parseFloat(event.target.value);
+            if (!Number.isNaN(parsed)) {
+                const next = this.clamp(parsed);
+                if (next !== this.value) {
+                    this.value = next;
+                    this.brDidChangeValue.emit(this.value);
+                }
+            }
+            redispatchNativeFormEvent(this.el, event, 'input');
+        };
+        this.handleInputBlur = (event) => {
+            this.inputEditing = false;
+            const raw = event.target.value;
+            const parsed = parseFloat(raw);
+            const next = Number.isNaN(parsed) ? this.value : this.snapToStep(this.clamp(parsed));
+            if (next !== this.value) {
+                this.value = next;
+                this.brDidChangeValue.emit(this.value);
+            }
+            event.target.value = String(this.value);
+            dispatchNativeFormEvent(this.el, 'change');
+            void this.validate();
+        };
+    }
+    formDisabledCallback(disabled) {
+        this.formDisabled = disabled;
+    }
+    formResetCallback() {
+        this.customValidationMessage = '';
+        this.validatorMessage = null;
+        this.validationRunId++;
+        this.value = this.initialValue;
+        this.valueEnd = this.initialValueEnd;
+        this.updateValidity();
+    }
+    formStateRestoreCallback(state) {
+        const [start, end] = String(state ?? '')
+            .split(',')
+            .map(Number);
+        if (!Number.isNaN(start))
+            this.value = start;
+        if (this.range && !Number.isNaN(end))
+            this.valueEnd = end;
+    }
+    onValueChange(newValue) {
+        const numericMax = this.range && !Number.isNaN(this.valueEnd) ? this.valueEnd : this.max;
+        const clamped = this.clamp(newValue, numericMax);
+        if (clamped !== newValue) {
+            this.value = clamped;
+            return;
+        }
+        this.elementInternals?.setFormValue(this.getFormValue());
+        if (this.inputEl && !this.inputEditing) {
+            this.inputEl.value = String(clamped);
+        }
+        this.syncRangeValue();
+        this.updateValidity();
+    }
+    onValueEndChange(newValue) {
+        if (!this.range)
+            return;
+        const clamped = this.clamp(newValue, this.max, this.value);
+        if (clamped !== newValue) {
+            this.valueEnd = clamped;
+            return;
+        }
+        this.elementInternals?.setFormValue(this.getFormValue());
+        this.syncRangeValue();
+        this.updateValidity();
+    }
+    onRangeValueChange(newValue) {
+        if (!this.range || !newValue)
+            return;
+        if (newValue.start !== this.value)
+            this.value = newValue.start;
+        if (newValue.end !== this.valueEnd)
+            this.valueEnd = newValue.end;
+    }
+    componentWillLoad() {
+        this.value = this.clamp(this.value);
+        if (this.range) {
+            const endVal = Number.isNaN(this.valueEnd) ? this.max : this.valueEnd;
+            this.valueEnd = Math.max(this.value, this.clamp(endVal));
+        }
+        this.elementInternals?.setFormValue(this.getFormValue());
+        this.initialValue = this.value;
+        this.initialValueEnd = this.valueEnd;
+        this.updateValidity();
+    }
+    componentDidLoad() {
+        this.hasFeedbackSlot = this.el.querySelector('[slot="feedback"]') !== null;
+        const root = this.el.shadowRoot;
+        if (root) {
+            root.querySelectorAll('slot[name]').forEach((slot) => {
+                const update = () => {
+                    const filled = slot.assignedNodes({ flatten: true }).length > 0;
+                    if (slot.name === 'ref-start')
+                        this.hasRefStart = filled;
+                    else if (slot.name === 'ref-end')
+                        this.hasRefEnd = filled;
+                };
+                update();
+                slot.addEventListener('slotchange', update);
+            });
+        }
+        if (this.inputEl) {
+            this.inputEl.value = String(this.value);
+        }
+        requestAnimationFrame(() => this.setupLabelAutoUpdate());
+    }
+    componentDidUpdate() {
+        void this.positionLabels();
+    }
+    disconnectedCallback() {
+        this.pointerBatch.cancel();
+        this.dragRect = null;
+        this.cleanupLabelStart?.();
+        this.cleanupLabelEnd?.();
+    }
+    /** Retorna se o slider atende às constraints configuradas. */
+    async checkValidity() {
+        return this.elementInternals?.checkValidity?.() ?? true;
+    }
+    /** Valida e solicita ao navegador a apresentação do erro atual. */
+    async reportValidity() {
+        return this.elementInternals?.reportValidity?.() ?? true;
+    }
+    /** Define ou limpa uma mensagem de validade customizada. */
+    async setCustomValidity(message) {
+        this.customValidationMessage = message;
+        this.updateValidity();
+    }
+    /** Executa o validator do slider e retorna se o valor atual é válido. */
+    async validate() {
+        const validator = resolveFormValidator(this.validator);
+        if (!validator || this.isDisabled())
+            return this.checkValidity();
+        const runId = ++this.validationRunId;
+        this.isValidating = true;
+        this.validatorMessage = null;
+        this.updateValidity();
+        this.brSliderValidationChange.emit({ validating: true, valid: null, message: null });
+        const value = this.range ? { start: this.value, end: this.valueEnd } : this.value;
+        const message = await runFormValidator(validator, value);
+        if (runId !== this.validationRunId)
+            return false;
+        this.validatorMessage = message;
+        this.isValidating = false;
+        this.updateValidity();
+        const valid = message === null && (await this.checkValidity());
+        this.brSliderValidationChange.emit({ validating: false, valid, message });
+        return valid;
+    }
+    /** Retorna um snapshot serializável da Constraint Validation API. */
+    async getValidationState() {
+        return getFormValidationState(this.elementInternals);
+    }
+    get effectiveVertical() {
+        return this.orientation === undefined ? this.vertical : this.orientation === 'vertical';
+    }
+    setupLabelAutoUpdate() {
+        const showValueLabel = this.showLabel && !this.showInput;
+        if (!showValueLabel)
+            return;
+        this.cleanupLabelStart?.();
+        if (this.thumbStartEl && this.valueLabelStartEl) {
+            const t = this.thumbStartEl;
+            const l = this.valueLabelStartEl;
+            const a = this.arrowStartEl;
+            this.cleanupLabelStart = autoUpdate(t, l, () => void this.positionSingleLabel(t, l, a));
+        }
+        this.cleanupLabelEnd?.();
+        if (this.range && this.thumbEndEl && this.valueLabelEndEl) {
+            const t = this.thumbEndEl;
+            const l = this.valueLabelEndEl;
+            const a = this.arrowEndEl;
+            this.cleanupLabelEnd = autoUpdate(t, l, () => void this.positionSingleLabel(t, l, a));
+        }
+    }
+    async positionLabels() {
+        const showValueLabel = this.showLabel && !this.showInput;
+        if (!showValueLabel)
+            return;
+        if (this.thumbStartEl && this.valueLabelStartEl) {
+            await this.positionSingleLabel(this.thumbStartEl, this.valueLabelStartEl, this.arrowStartEl);
+        }
+        if (this.range && this.thumbEndEl && this.valueLabelEndEl) {
+            await this.positionSingleLabel(this.thumbEndEl, this.valueLabelEndEl, this.arrowEndEl);
+        }
+    }
+    async positionSingleLabel(thumb, label, arrowEl) {
+        const placement = this.effectiveVertical ? 'left' : 'top';
+        const thumbRect = thumb.getBoundingClientRect();
+        const gapOffset = (this.effectiveVertical ? thumbRect.width : thumbRect.height) / 2 + 4;
+        const { x, y, placement: finalPlacement, middlewareData, } = await computePosition(thumb, label, {
+            placement,
+            strategy: 'fixed',
+            middleware: [
+                offset(gapOffset),
+                flip(),
+                shift({ padding: 8 }),
+                hide(),
+                ...(arrowEl ? [arrow({ element: arrowEl })] : []),
+            ],
+        });
+        const referenceHidden = middlewareData.hide?.referenceHidden ?? false;
+        Object.assign(label.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+            visibility: referenceHidden ? 'hidden' : 'visible',
+        });
+        label.setAttribute('data-placement', finalPlacement);
+        if (arrowEl && middlewareData.arrow) {
+            const { x: ax, y: ay } = middlewareData.arrow;
+            const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[finalPlacement.split('-')[0]];
+            Object.assign(arrowEl.style, {
+                left: ax != null ? `${ax}px` : '',
+                top: ay != null ? `${ay}px` : '',
+                right: '',
+                bottom: '',
+                [staticSide]: '-4px',
+            });
+        }
+    }
+    getFormValue() {
+        return this.range ? `${this.value},${this.valueEnd}` : String(this.value);
+    }
+    syncRangeValue() {
+        if (!this.range || Number.isNaN(this.valueEnd))
+            return;
+        if (this.rangeValue?.start === this.value && this.rangeValue.end === this.valueEnd)
+            return;
+        this.rangeValue = { start: this.value, end: this.valueEnd };
+    }
+    clamp(value, max = this.max, min = this.min) {
+        return clampNumber(value, min, max, min);
+    }
+    snapToStep(value) {
+        const stepped = Math.round((value - this.min) / this.step) * this.step + this.min;
+        return this.clamp(Number(stepped.toFixed(10)));
+    }
+    percent() {
+        return this.percentOf(this.value);
+    }
+    percentOf(val) {
+        if (this.max === this.min)
+            return 0;
+        return ((val - this.min) / (this.max - this.min)) * 100;
+    }
+    getFilledStyle() {
+        if (!this.range) {
+            const pct = this.percent();
+            return this.effectiveVertical ? { height: `${pct}%` } : { width: `${pct}%` };
+        }
+        const pctStart = this.percent();
+        const pctEnd = this.percentOf(this.valueEnd);
+        if (this.effectiveVertical) {
+            return { bottom: `${pctStart}%`, height: `${pctEnd - pctStart}%` };
+        }
+        return { left: `${pctStart}%`, width: `${pctEnd - pctStart}%` };
+    }
+    getTrackMaskStyle() {
+        if (!this.showTicks || !this.getTickValues().length)
+            return undefined;
+        const dir = this.effectiveVertical ? 'to top' : 'to right';
+        const half = 1.5;
+        const stops = ['black 0%'];
+        for (const val of this.getTickValues()) {
+            const pct = this.percentOf(val);
+            stops.push(`black calc(${pct}% - ${half}px)`);
+            stops.push(`transparent calc(${pct}% - ${half}px)`);
+            stops.push(`transparent calc(${pct}% + ${half}px)`);
+            stops.push(`black calc(${pct}% + ${half}px)`);
+        }
+        stops.push('black 100%');
+        const gradient = `linear-gradient(${dir}, ${stops.join(', ')})`;
+        return { 'mask-image': gradient, '-webkit-mask-image': gradient };
+    }
+    getTickValues() {
+        const cacheKey = `${this.min}|${this.max}|${this.step}`;
+        if (cacheKey === this.tickValuesCacheKey)
+            return this.tickValuesCache;
+        this.tickValuesCacheKey = cacheKey;
+        if (this.max <= this.min || this.step <= 0 || !Number.isFinite(this.step)) {
+            this.tickValuesCache = [];
+            return this.tickValuesCache;
+        }
+        const count = Math.floor((this.max - this.min) / this.step);
+        const hasUnalignedMax = Number((this.max - this.min) / this.step) % 1 !== 0;
+        const valueCount = count + 1 + (hasUnalignedMax ? 1 : 0);
+        const getValueAt = (index) => index <= count ? Number((this.min + index * this.step).toFixed(10)) : this.max;
+        if (valueCount > Slider.MAX_VISUAL_TICKS) {
+            // ponytail: limita somente o DOM visual; os valores selecionáveis permanecem ilimitados.
+            const sampled = new Set([getValueAt(0), getValueAt(valueCount - 1)]);
+            for (let index = 1; index < Slider.MAX_VISUAL_TICKS - 1; index++) {
+                sampled.add(getValueAt(Math.round((index * (valueCount - 1)) / (Slider.MAX_VISUAL_TICKS - 1))));
+            }
+            this.tickValuesCache = [...sampled].sort((a, b) => a - b);
+        }
+        else {
+            this.tickValuesCache = Array.from({ length: valueCount }, (_, index) => getValueAt(index));
+        }
+        return this.tickValuesCache;
+    }
+    getValueFromX(clientX, rect = this.trackEl?.getBoundingClientRect()) {
+        if (!this.trackEl)
+            return this.min;
+        if (!rect)
+            return this.min;
+        if (rect.width === 0)
+            return this.min;
+        const ratio = clampNumber((clientX - rect.left) / rect.width, 0, 1, 0);
+        return this.min + ratio * (this.max - this.min);
+    }
+    getValueFromY(clientY, rect = this.trackEl?.getBoundingClientRect()) {
+        if (!this.trackEl)
+            return this.min;
+        if (!rect)
+            return this.min;
+        if (rect.height === 0)
+            return this.min;
+        const ratio = clampNumber((rect.bottom - clientY) / rect.height, 0, 1, 0);
+        return this.min + ratio * (this.max - this.min);
+    }
+    nearerThumb(rawValue) {
+        const distToStart = Math.abs(rawValue - this.value);
+        const distToEnd = Math.abs(rawValue - this.valueEnd);
+        return distToStart <= distToEnd ? 'start' : 'end';
+    }
+    applyUpdate(rawValue) {
+        if (this.draggingThumb === 'end') {
+            const next = Math.max(this.value, this.snapToStep(rawValue));
+            if (next !== this.valueEnd) {
+                this.valueEnd = next;
+                this.brDidChangeValueEnd.emit(this.valueEnd);
+                dispatchNativeFormEvent(this.el, 'input');
+            }
+        }
+        else {
+            const raw = this.snapToStep(rawValue);
+            const next = this.range ? Math.min(this.valueEnd, raw) : raw;
+            if (next !== this.value) {
+                this.value = next;
+                this.brDidChangeValue.emit(this.value);
+                dispatchNativeFormEvent(this.el, 'input');
+            }
+        }
+    }
+    calculateNextSliderValue(key, current, min, max) {
+        switch (key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                return Math.min(max, current + this.step);
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                return Math.max(min, current - this.step);
+            case 'Home':
+                return min;
+            case 'End':
+                return max;
+            case 'PageUp':
+                return Math.min(max, current + this.step * 10);
+            case 'PageDown':
+                return Math.max(min, current - this.step * 10);
+            default:
+                return null;
+        }
+    }
+    handleKeyDown(event) {
+        if (this.isDisabled())
+            return;
+        const target = event.composedPath?.()[0] || getEventTarget(event);
+        if (target === this.inputEl)
+            return;
+        const isEnd = this.range && target === this.thumbEndEl;
+        const currentValue = isEnd ? this.valueEnd : this.value;
+        const keyMin = isEnd ? this.value : this.min;
+        const keyMax = isEnd ? this.max : this.range ? this.valueEnd : this.max;
+        const next = this.calculateNextSliderValue(event.key, currentValue, keyMin, keyMax);
+        if (next === null)
+            return;
+        event.preventDefault();
+        if (isEnd) {
+            if (next !== this.valueEnd) {
+                this.valueEnd = next;
+                this.brDidChangeValueEnd.emit(this.valueEnd);
+                dispatchNativeFormEvent(this.el, 'input');
+                dispatchNativeFormEvent(this.el, 'change');
+                void this.validate();
+            }
+        }
+        else if (next !== this.value) {
+            this.value = next;
+            this.brDidChangeValue.emit(this.value);
+            dispatchNativeFormEvent(this.el, 'input');
+            dispatchNativeFormEvent(this.el, 'change');
+            void this.validate();
+        }
+    }
+    getCssClassMap() {
+        return {
+            'br-slider': true,
+            dragging: this.dragging,
+            disabled: this.isDisabled(),
+        };
+    }
+    shouldShowValueLabel() {
+        return this.showLabel && !this.showInput;
+    }
+    isDisabled() {
+        return isFormControlDisabled(this.disabled, this.formDisabled);
+    }
+    updateValidity() {
+        const stepMismatch = this.step > 0 &&
+            Math.abs((this.value - this.min) / this.step - Math.round((this.value - this.min) / this.step)) > 1e-9;
+        const invalidRange = this.range && this.value > this.valueEnd;
+        const flags = {
+            customError: this.customValidationMessage !== '' || Boolean(this.validatorMessage) || invalidRange,
+            rangeOverflow: this.value > this.max || (this.range && this.valueEnd > this.max),
+            rangeUnderflow: this.value < this.min || (this.range && this.valueEnd < this.min),
+            stepMismatch,
+        };
+        const message = this.customValidationMessage ||
+            this.validatorMessage ||
+            (invalidRange ? 'O início do intervalo deve anteceder o fim.' : '');
+        setFormValidity(this.elementInternals, flags, message, this.thumbStartEl);
+    }
+    getThumbStyle(value) {
+        const percent = this.percentOf(value);
+        return this.effectiveVertical ? { bottom: `${percent}%` } : { left: `${percent}%` };
+    }
+    setValueLabelElement(thumb, el) {
+        if (thumb === 'end') {
+            this.valueLabelEndEl = el;
+            return;
+        }
+        this.valueLabelStartEl = el;
+    }
+    setValueLabelArrowElement(thumb, el) {
+        if (thumb === 'end') {
+            this.arrowEndEl = el;
+            return;
+        }
+        this.arrowStartEl = el;
+    }
+    setThumbElement(thumb, el) {
+        if (thumb === 'end') {
+            this.thumbEndEl = el;
+            return;
+        }
+        this.thumbStartEl = el;
+    }
+    renderValueLabel(thumb) {
+        const isEnd = thumb === 'end';
+        return (h("div", { class: "slider-value-label", part: "value-label", ref: (el) => this.setValueLabelElement(thumb, el), "aria-hidden": "true" }, isEnd ? this.valueEnd : this.value, h("span", { class: "slider-value-label-arrow", part: "value-label-arrow", ref: (el) => this.setValueLabelArrowElement(thumb, el) })));
+    }
+    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: mantém as variantes visuais do thumb em um único ponto.
+    renderThumb(thumb, style) {
+        const isEnd = thumb === 'end';
+        return (h("div", { class: {
+                'slider-thumb': true,
+                'slider-thumb--start': !isEnd,
+                'slider-thumb--end': isEnd,
+                'slider-thumb--active': this.dragging && this.draggingThumb === thumb,
+            }, part: `thumb thumb-${thumb}`, ref: (el) => this.setThumbElement(thumb, el), id: isEnd ? `${this.customId}-end` : this.customId, role: "slider", tabIndex: this.isDisabled() ? -1 : 0, "aria-valuemin": isEnd ? String(this.value) : String(this.min), "aria-valuemax": isEnd ? String(this.max) : this.range ? String(this.valueEnd) : String(this.max), "aria-valuenow": isEnd ? String(this.valueEnd) : String(this.value), "aria-disabled": this.isDisabled() ? 'true' : 'false', "aria-label": isEnd ? `${this.label ?? ''} fim`.trim() : this.range ? `${this.label ?? ''} início`.trim() : this.label, "aria-orientation": this.effectiveVertical ? 'vertical' : 'horizontal', "aria-busy": this.isValidating ? 'true' : null, "aria-describedby": this.hasFeedbackSlot || this.customValidationMessage || this.validatorMessage
+                ? `${this.customId}-feedback`
+                : null, "aria-errormessage": this.customValidationMessage || this.validatorMessage || this.hasFeedbackSlot
+                ? `${this.customId}-feedback`
+                : null, style: style }));
+    }
+    renderReferences() {
+        const hasRefs = this.hasRefStart || this.hasRefEnd || this.showBounds;
+        return (h("div", { class: { 'slider-refs': true, 'slider-refs--hidden': !hasRefs }, part: "references" }, h("span", { class: "ref-start", part: "reference-start" }, h("slot", { name: "ref-start" }), this.showBounds && (h("span", { class: "ref-bound", part: "reference-bound" }, this.min))), h("span", { class: "ref-end", part: "reference-end" }, this.showBounds && (h("span", { class: "ref-bound", part: "reference-bound" }, this.max)), h("slot", { name: "ref-end" }))));
+    }
+    renderInput() {
+        if (!this.showInput)
+            return undefined;
+        return (h("div", { class: "slider-input-wrapper", part: "input-wrapper" }, h("input", { type: "number", class: "slider-input", part: "input", ref: (el) => (this.inputEl = el), min: this.min, max: this.max, step: this.step, disabled: this.isDisabled(), "aria-label": this.label, "aria-describedby": this.hasFeedbackSlot || this.customValidationMessage || this.validatorMessage
+                ? `${this.customId}-feedback`
+                : null, "aria-errormessage": this.customValidationMessage || this.validatorMessage || this.hasFeedbackSlot
+                ? `${this.customId}-feedback`
+                : null, onInput: this.handleInputInput, onBlur: this.handleInputBlur })));
+    }
+    renderTrack() {
+        const trackMask = this.getTrackMaskStyle();
+        return (h("div", { class: "slider-track", part: "track", ref: (el) => (this.trackEl = el), onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp }, h("div", { class: "slider-track-visual", part: "track-visual", style: trackMask }, h("div", { class: "slider-filled-track", part: "filled-track", style: this.getFilledStyle() })), this.showTicks && this.showTickLabels && this.renderTickLabels(), this.shouldShowValueLabel() && this.renderValueLabel('start'), this.shouldShowValueLabel() && this.range && this.renderValueLabel('end'), this.renderThumb('start', this.getThumbStyle(this.value)), this.range && this.renderThumb('end', this.getThumbStyle(this.valueEnd))));
+    }
+    renderTickLabels() {
+        const tickValues = this.getTickValues();
+        const intermediateTicks = tickValues.slice(1, -1);
+        return (h("div", { class: "slider-tick-labels", part: "tick-labels", "aria-hidden": "true" }, intermediateTicks.map((value) => (h("span", { class: "slider-tick-label", part: "tick-label", style: this.effectiveVertical ? { bottom: `${this.percentOf(value)}%` } : { left: `${this.percentOf(value)}%` } }, value)))));
+    }
+    render() {
+        return (h(Host, { key: '26be711ad91a867e82e35d10e86508aa5af68557' }, h("div", { key: '906052510af8d3a323ea8274b339ba264b745e25', class: this.getCssClassMap(), part: "base" }, h("div", { key: '323ee79d4a4fc4d81e4a1b43c8fa6298d0f92916', class: "slider-layout", part: "layout" }, h("div", { key: '113e5114161144af0466997b47108eb0e053af8e', class: "slider-body", part: "body" }, this.renderTrack(), this.renderReferences()), this.renderInput())), h("div", { key: 'b8ce4c3cae026492ad1db1e03f5709988b42a13e', id: `${this.customId}-feedback`, part: "feedback", hidden: !this.hasFeedbackSlot && !this.customValidationMessage && !this.validatorMessage }, h("slot", { key: 'e2564e6830476cb3d495807f4b15d600f5c7146e', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }), !this.hasFeedbackSlot && (this.customValidationMessage || this.validatorMessage) ? (h("br-message", { state: "danger", message: this.customValidationMessage || this.validatorMessage })) : null)));
+    }
+    static get is() { return "br-slider"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["slider.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["slider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identificador \u00FAnico.\nCaso n\u00E3o seja fornecido, um ID gerado automaticamente ser\u00E1 usado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "custom-id",
+                "defaultValue": "generateUniqueId()"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nome do campo, utilizado em formul\u00E1rios nativos (`<form>`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto descritivo associado ao slider para acessibilidade."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor m\u00EDnimo aceito pelo slider."
+                },
+                "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": "Valor m\u00E1ximo aceito pelo slider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "max",
+                "defaultValue": "100"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Incremento aplicado a cada passo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "step",
+                "defaultValue": "1"
+            },
+            "validator": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SliderValidator",
+                    "resolved": "(value: number | SliderRangeValue) => string | Promise<string>",
+                    "references": {
+                        "SliderValidator": {
+                            "location": "import",
+                            "path": "./slider.types",
+                            "id": "src/components/slider/slider.types.ts::SliderValidator",
+                            "referenceLocation": "SliderValidator"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Regra s\u00EDncrona ou ass\u00EDncrona aplicada ao n\u00FAmero ou intervalo selecionado."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor atual do slider (al\u00E7a inicial no modo composto)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "valueEnd": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `rangeValue`."
+                        }],
+                    "text": "Valor da al\u00E7a final no modo composto (`range`).\nQuando n\u00E3o fornecido em modo composto, assume o valor de `max`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value-end",
+                "defaultValue": "NaN"
+            },
+            "rangeValue": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "SliderRangeValue",
+                    "resolved": "{ start: number; end: number; }",
+                    "references": {
+                        "SliderRangeValue": {
+                            "location": "import",
+                            "path": "./slider.types",
+                            "id": "src/components/slider/slider.types.ts::SliderRangeValue",
+                            "referenceLocation": "SliderRangeValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor estruturado das duas al\u00E7as no modo `range`."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Desativa o slider, tornando-o n\u00E3o interativo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "density": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SliderDensity",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "SliderDensity": {
+                            "location": "import",
+                            "path": "./slider.types",
+                            "id": "src/components/slider/slider.types.ts::SliderDensity",
+                            "referenceLocation": "SliderDensity"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Densidade da al\u00E7a de controle.\n`small` = 16px (desktop compacto), `medium` = 20px (desktop padr\u00E3o), `large` = 24px (mobile)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "density",
+                "defaultValue": "'medium'"
+            },
+            "vertical": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `orientation`."
+                        }],
+                    "text": "Exibe o slider na orienta\u00E7\u00E3o vertical."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "vertical",
+                "defaultValue": "false"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Orienta\u00E7\u00E3o can\u00F4nica. Quando informada, tem preced\u00EAncia sobre `vertical`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation"
+            },
+            "range": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ativa o modo composto com duas al\u00E7as para sele\u00E7\u00E3o de faixa."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "range",
+                "defaultValue": "false"
+            },
+            "showLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Exibe etiqueta com o valor atual acima da al\u00E7a (horizontal) ou \u00E0 esquerda (vertical).\nIgnorado quando `show-input` est\u00E1 ativo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-label",
+                "defaultValue": "false"
+            },
+            "showInput": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Exibe campo de entrada num\u00E9rico sincronizado com a al\u00E7a.\nQuando ativo, a etiqueta de valor n\u00E3o \u00E9 exibida."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-input",
+                "defaultValue": "false"
+            },
+            "showTicks": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Exibe grada\u00E7\u00F5es na trilha como pequenos espa\u00E7os que indicam os steps dispon\u00EDveis,\nfor\u00E7ando a al\u00E7a de controle a saltar entre os valores predefinidos e\nimpossibilitando a sele\u00E7\u00E3o de valores aleat\u00F3rios."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-ticks",
+                "defaultValue": "false"
+            },
+            "showTickLabels": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Exibe os valores das marca\u00E7\u00F5es derivadas de `min`, `max` e `step`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-tick-labels",
+                "defaultValue": "false"
+            },
+            "showBounds": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Exibe os limites nas refer\u00EAncias inicial e final: `min` no in\u00EDcio e `max` no fim\n(limites fixos), tanto em modo simples quanto em modo composto (`range`). O valor\nselecionado por cada al\u00E7a \u00E9 exibido na etiqueta (`show-label`), n\u00E3o nas refer\u00EAncias.\nQuando ativo, sobrescreve o conte\u00FAdo dos slots `ref-start` e `ref-end`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-bounds",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "dragging": {},
+            "formDisabled": {},
+            "hasRefEnd": {},
+            "hasRefStart": {},
+            "hasFeedbackSlot": {},
+            "customValidationMessage": {},
+            "validatorMessage": {},
+            "isValidating": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brDidChangeValue",
+                "name": "brDidChangeValue",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use o evento nativo `input`."
+                        }],
+                    "text": "Disparado ap\u00F3s altera\u00E7\u00E3o do valor da al\u00E7a inicial."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "brDidChangeValueEnd",
+                "name": "brDidChangeValueEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use o evento nativo `input` e leia `event.target.rangeValue`."
+                        }],
+                    "text": "Disparado ap\u00F3s altera\u00E7\u00E3o do valor da al\u00E7a final (modo composto)."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "brSliderValidationChange",
+                "name": "brSliderValidationChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido ao iniciar e concluir a valida\u00E7\u00E3o customizada."
+                },
+                "complexType": {
+                    "original": "FormValidationChangeDetail",
+                    "resolved": "FormValidationChangeDetail",
+                    "references": {
+                        "FormValidationChangeDetail": {
+                            "location": "import",
+                            "path": "../../shared/utils/validator",
+                            "id": "src/shared/utils/validator.ts::FormValidationChangeDetail",
+                            "referenceLocation": "FormValidationChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Retorna se o slider atende \u00E0s constraints configuradas.",
+                    "tags": []
+                }
+            },
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Valida e solicita ao navegador a apresenta\u00E7\u00E3o do erro atual.",
+                    "tags": []
+                }
+            },
+            "setCustomValidity": {
+                "complexType": {
+                    "signature": "(message: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "message",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Define ou limpa uma mensagem de validade customizada.",
+                    "tags": []
+                }
+            },
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "SliderRangeValue": {
+                            "location": "import",
+                            "path": "./slider.types",
+                            "id": "src/components/slider/slider.types.ts::SliderRangeValue",
+                            "referenceLocation": "SliderRangeValue"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Executa o validator do slider e retorna se o valor atual \u00E9 v\u00E1lido.",
+                    "tags": []
+                }
+            },
+            "getValidationState": {
+                "complexType": {
+                    "signature": "() => Promise<FormValidationState>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FormValidationState": {
+                            "location": "import",
+                            "path": "../../shared/utils/form",
+                            "id": "src/shared/utils/form.ts::FormValidationState",
+                            "referenceLocation": "FormValidationState"
+                        }
+                    },
+                    "return": "Promise<FormValidationState>"
+                },
+                "docs": {
+                    "text": "Retorna um snapshot serializ\u00E1vel da Constraint Validation API.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }, {
+                "propName": "valueEnd",
+                "methodName": "onValueEndChange"
+            }, {
+                "propName": "rangeValue",
+                "methodName": "onRangeValueChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "elementInternals"; }
+}
+Slider.MAX_VISUAL_TICKS = 200;