@govbr-ds/webcomponents 2.1.2 → 2.2.0

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

@@ -8,19 +8,53 @@ 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 { reportInvalidPropValue } from "../../shared/utils/prop-warning";
+import { resolveAllowedPropValue, resolveNumberPropValue } from "../../shared/utils/props";
 import { createRafBatcher } from "../../shared/utils/raf-batcher";
 import { hasAssignedSlotContent } from "../../shared/utils/slot";
 import { resolveFormValidator, runFormValidator } from "../../shared/utils/validator";
+import { buildGradientCss, interpolateGradientColor, normalizeSteps, parseGradientStops, } from "./slider.utils";
+const SLIDER_ORIENTATIONS = ['horizontal', 'vertical'];
 /**
- * ## Design System
+ * O componente `br-slider` é o controle deslizante do GovBR-DS, desenvolvido para permitir que a pessoa usuária selecione um valor numérico único ou uma faixa contínua de valores dentro de um intervalo delimitado.
  *
- * 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).
+ * ### Para que serve
  *
- * @category Formulários
+ * - **Seleção numérica fluida:** Permite escolher valores deslizando uma alça (thumb) ao longo de uma trilha graduada, com atualização em tempo real.
+ * - **Modo simples e composto (faixa / range):** Suporta uma única alça para valor individual ou duas alças para delimitação de intervalo mínimo e máximo (ex.: faixa de preços, período de anos).
+ * - **Entrada numérica sincronizada:** Oferece campo de entrada numérico integrado opcional para digitação exata com sincronização bidirecional.
+ * - **Acessibilidade WAI-ARIA:** Suporta controle total por teclado (setas direcionais, Page Up, Page Down, Home e End) e comunica valores atuais via `aria-valuenow`.
+ *
+ * ### Quando utilizar
+ *
+ * - **Utilize quando:**
+ *   - O usuário precisar definir grandezas graduais onde a exploração intuitiva seja mais conveniente do que a digitação manual isolada.
+ *   - Para filtros de faixa de valores (ex.: "De R$ 100 até R$ 500").
+ * - **Evite e prefira outro componente quando:**
+ *   - A precisão exata for estritamente necessária e o intervalo for arbitrário (prefira `br-input` numérico).
+ *   - O valor for uma escolha categórica sem escala quantitativa (prefira `br-select` ou `br-radio`).
+ *
+ * ### Estrutura e Slots
+ *
+ * O `br-slider` possui estrutura rica com slots de referência, validação e customização da alça:
+ * - `ref-start`: Slot para customização do rótulo de início da trilha.
+ * - `ref-end`: Slot para customização do rótulo de fim da trilha.
+ * - `feedback`: Slot para mensagens de validação (como `br-message`).
+ * - `thumb-icon`: Slot para ícone personalizado na alça de controle em modo simples.
+ * - `thumb-start-icon`: Slot para ícone na alça inicial em modo composto (`range`).
+ * - `thumb-end-icon`: Slot para ícone na alça final em modo composto (`range`).
+ *
+ * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/slider?tab=designer).
+ *
+
+ * @category Formulários, Seleção
  * @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`.
+ * @slot thumb-icon - Ícone customizado na alça de controle em modo simples.
+ * @slot thumb-start-icon - Ícone customizado na alça inicial em modo composto.
+ * @slot thumb-end-icon - Ícone customizado na alça final em modo composto.
  *
  * @part base - Contêiner principal do slider.
  * @part layout - Contêiner de layout do slider.
@@ -42,6 +76,8 @@ import { resolveFormValidator, runFormValidator } from "../../shared/utils/valid
  * @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.
+ * @part steps - Contêiner das marcações de passos customizados.
+ * @part step - Botão indicador de passo customizado individual.
  */
 export class Slider {
     constructor() {
@@ -59,6 +95,9 @@ export class Slider {
          */
         this.hasRefStart = false;
         this.hasFeedbackSlot = false;
+        this.hasThumbIconSlot = false;
+        this.hasThumbStartIconSlot = false;
+        this.hasThumbEndIconSlot = false;
         this.customValidationMessage = '';
         this.validatorMessage = null;
         this.isValidating = false;
@@ -68,24 +107,26 @@ export class Slider {
          */
         this.customId = generateUniqueId();
         /**
-         * Valor mínimo aceito pelo slider.
+         * Valor mínimo aceito pelo slider. Valores inválidos usam `0`.
          */
         this.min = 0;
         /**
-         * Valor máximo aceito pelo slider.
+         * Valor máximo aceito pelo slider. Deve ser maior que `min`; valores inválidos usam `100` e relações inválidas usam `min + 100`.
          */
         this.max = 100;
         /**
-         * Incremento aplicado a cada passo.
+         * Incremento aplicado a cada passo. Deve ser maior que `0`; valores inválidos usam `1`.
          */
         this.step = 1;
         /**
-         * Valor atual do slider (alça inicial no modo composto).
+         * Valor atual do slider (alça inicial no modo composto). Valores não finitos usam o limite mínimo;
+         * valores fora do intervalo são limitados.
          */
         this.value = 0;
         /**
          * Valor da alça final no modo composto (`range`).
-         * Quando não fornecido em modo composto, assume o valor de `max`.
+         * Quando não fornecido em modo composto, assume o valor de `max`. Valores não finitos usam `max`,
+         * valores fora do intervalo são limitados.
          * @deprecated Use `rangeValue`.
          */
         this.valueEnd = NaN;
@@ -93,11 +134,6 @@ export class Slider {
          * 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`.
@@ -113,8 +149,11 @@ export class Slider {
          */
         this.showLabel = false;
         /**
-         * Exibe campo de entrada numérico sincronizado com a alça.
-         * Quando ativo, a etiqueta de valor não é exibida.
+         * Exibe um `br-input` numérico sincronizado com a alça.
+         * No modo `range`, exibe um campo para o início e outro para o fim; na
+         * orientação horizontal ficam nas extremidades esquerda e direita, e na
+         * vertical ficam acima e abaixo da trilha. Quando ativo, a etiqueta de valor
+         * não é exibida.
          */
         this.showInput = false;
         /**
@@ -132,7 +171,14 @@ export class Slider {
          * Quando ativo, sobrescreve o conteúdo dos slots `ref-start` e `ref-end`.
          */
         this.showBounds = false;
-        this.inputEditing = false;
+        /**
+         * Densidade visual do componente.
+         * Altera exclusivamente as dimensões da alça de controle (thumb).
+         * Valores aceitos: 'small' (16px), 'medium' (20px - padrão), 'large' (24px).
+         * 'high' e 'low' são aceitos como sinônimos de 'small' e 'large'.
+         */
+        this.density = 'medium';
+        this.inputEditing = null;
         this.draggingThumb = 'start';
         this.tickValuesCacheKey = '';
         this.tickValuesCache = [];
@@ -187,31 +233,65 @@ export class Slider {
             dispatchNativeFormEvent(this.el, 'change');
             void this.validate();
         };
-        this.handleInputInput = (event) => {
-            this.inputEditing = true;
-            const parsed = parseFloat(event.target.value);
+        this.handleInputInput = (event, thumb) => {
+            this.inputEditing = thumb;
+            const input = event.currentTarget;
+            const parsed = Number.parseFloat(input.value ?? '');
             if (!Number.isNaN(parsed)) {
-                const next = this.clamp(parsed);
-                if (next !== this.value) {
-                    this.value = next;
-                    this.brDidChangeValue.emit(this.value);
+                const { current, min, max } = this.getInputValueState(thumb);
+                if (parsed >= min && parsed <= max && parsed !== current) {
+                    this.updateValueFromInput(thumb, parsed);
                 }
             }
             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);
+        this.handleInputChange = (event, thumb) => {
+            event.stopPropagation();
+            const input = event.currentTarget;
+            const { current, min, max } = this.getInputValueState(thumb);
+            const parsed = Number.parseFloat(input.value ?? '');
+            const next = Number.isNaN(parsed) ? current : this.snapToStep(this.clamp(parsed, max, min));
+            this.inputEditing = null;
+            if (next !== current)
+                this.updateValueFromInput(thumb, next);
+            input.value = String(next);
             dispatchNativeFormEvent(this.el, 'change');
             void this.validate();
         };
+        this.handleStepClick = (val) => {
+            if (this.isDisabled())
+                return;
+            if (this.range) {
+                const distStart = Math.abs(val - this.value);
+                const distEnd = Math.abs(val - this.valueEnd);
+                if (distStart <= distEnd) {
+                    if (val !== this.value) {
+                        this.value = val;
+                        this.brDidChangeValue.emit(this.value);
+                        this.syncRangeValue();
+                        dispatchNativeFormEvent(this.el, 'input');
+                        dispatchNativeFormEvent(this.el, 'change');
+                        void this.validate();
+                    }
+                }
+                else if (val !== this.valueEnd) {
+                    this.valueEnd = val;
+                    this.brDidChangeValueEnd.emit(this.valueEnd);
+                    this.syncRangeValue();
+                    dispatchNativeFormEvent(this.el, 'input');
+                    dispatchNativeFormEvent(this.el, 'change');
+                    void this.validate();
+                }
+            }
+            else if (val !== this.value) {
+                this.value = val;
+                this.brDidChangeValue.emit(this.value);
+                this.syncRangeValue();
+                dispatchNativeFormEvent(this.el, 'input');
+                dispatchNativeFormEvent(this.el, 'change');
+                void this.validate();
+            }
+        };
     }
     formDisabledCallback(disabled) {
         this.formDisabled = disabled;
@@ -233,16 +313,43 @@ export class Slider {
         if (this.range && !Number.isNaN(end))
             this.valueEnd = end;
     }
+    get effectiveMin() {
+        return resolveNumberPropValue(this.el, 'min', this.min, Number.MIN_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, 0);
+    }
+    get effectiveMax() {
+        const min = this.effectiveMin;
+        const max = resolveNumberPropValue(this.el, 'max', this.max, Number.MIN_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, 100);
+        if (max > min)
+            return max;
+        reportInvalidPropValue(this.el, 'max', this.max, 'O valor deve ser maior que "min".', `Aplicando o fallback ${min + 100}.`);
+        return min + 100;
+    }
+    get effectiveStep() {
+        const step = resolveNumberPropValue(this.el, 'step', this.step, 0, Number.MAX_SAFE_INTEGER, 1);
+        if (step > 0)
+            return step;
+        reportInvalidPropValue(this.el, 'step', this.step, 'O valor deve ser maior que 0.', 'Aplicando o fallback 1.');
+        return 1;
+    }
+    get effectiveValue() {
+        return resolveNumberPropValue(this.el, 'value', this.value, this.effectiveMin, this.effectiveMax, this.effectiveMin);
+    }
+    get effectiveValueEnd() {
+        if (!this.range || Number.isNaN(this.valueEnd))
+            return this.effectiveMax;
+        return resolveNumberPropValue(this.el, 'valueEnd', this.valueEnd, this.effectiveMin, this.effectiveMax, this.effectiveMax);
+    }
     onValueChange(newValue) {
-        const numericMax = this.range && !Number.isNaN(this.valueEnd) ? this.valueEnd : this.max;
-        const clamped = this.clamp(newValue, numericMax);
+        const normalized = this.effectiveValue;
+        const numericMax = this.range ? this.effectiveValueEnd : this.effectiveMax;
+        const clamped = this.clamp(normalized, numericMax);
         if (clamped !== newValue) {
             this.value = clamped;
             return;
         }
         this.elementInternals?.setFormValue(this.getFormValue());
-        if (this.inputEl && !this.inputEditing) {
-            this.inputEl.value = String(clamped);
+        if (this.inputStartEl && this.inputEditing !== 'start') {
+            this.inputStartEl.value = String(clamped);
         }
         this.syncRangeValue();
         this.updateValidity();
@@ -250,28 +357,35 @@ export class Slider {
     onValueEndChange(newValue) {
         if (!this.range)
             return;
-        const clamped = this.clamp(newValue, this.max, this.value);
+        const clamped = this.clamp(this.effectiveValueEnd, this.effectiveMax, this.effectiveValue);
         if (clamped !== newValue) {
             this.valueEnd = clamped;
             return;
         }
         this.elementInternals?.setFormValue(this.getFormValue());
+        if (this.inputEndEl && this.inputEditing !== 'end') {
+            this.inputEndEl.value = String(clamped);
+        }
         this.syncRangeValue();
         this.updateValidity();
     }
     onRangeValueChange(newValue) {
         if (!this.range || !newValue)
             return;
+        if (typeof newValue !== 'object' || !Number.isFinite(newValue.start) || !Number.isFinite(newValue.end)) {
+            reportInvalidPropValue(this.el, 'rangeValue', newValue, 'Informe um objeto com `start` e `end` numéricos finitos.', 'Mantendo o último intervalo efetivo.');
+            this.syncRangeValue();
+            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);
+        this.value = this.effectiveValue;
         if (this.range) {
-            const endVal = Number.isNaN(this.valueEnd) ? this.max : this.valueEnd;
-            this.valueEnd = Math.max(this.value, this.clamp(endVal));
+            this.valueEnd = Math.max(this.value, this.effectiveValueEnd);
         }
         this.elementInternals?.setFormValue(this.getFormValue());
         this.initialValue = this.value;
@@ -280,23 +394,31 @@ export class Slider {
     }
     componentDidLoad() {
         this.hasFeedbackSlot = this.el.querySelector('[slot="feedback"]') !== null;
+        this.hasThumbIconSlot = this.el.querySelector('[slot="thumb-icon"]') !== null;
+        this.hasThumbStartIconSlot = this.el.querySelector('[slot="thumb-start-icon"]') !== null;
+        this.hasThumbEndIconSlot = this.el.querySelector('[slot="thumb-end-icon"]') !== null;
         const root = this.el.shadowRoot;
         if (root) {
+            const slotMap = {
+                'ref-start': (filled) => (this.hasRefStart = filled),
+                'ref-end': (filled) => (this.hasRefEnd = filled),
+                'thumb-icon': (filled) => (this.hasThumbIconSlot = filled),
+                'thumb-start-icon': (filled) => (this.hasThumbStartIconSlot = filled),
+                'thumb-end-icon': (filled) => (this.hasThumbEndIconSlot = filled),
+            };
             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;
-                };
+                const handler = slotMap[slot.name];
+                if (!handler)
+                    return;
+                const update = () => handler(slot.assignedNodes({ flatten: true }).length > 0);
                 update();
                 slot.addEventListener('slotchange', update);
             });
         }
-        if (this.inputEl) {
-            this.inputEl.value = String(this.value);
-        }
+        if (this.inputStartEl)
+            this.inputStartEl.value = String(this.value);
+        if (this.inputEndEl)
+            this.inputEndEl.value = String(this.valueEnd);
         requestAnimationFrame(() => this.setupLabelAutoUpdate());
     }
     componentDidUpdate() {
@@ -347,7 +469,10 @@ export class Slider {
         return getFormValidationState(this.elementInternals);
     }
     get effectiveVertical() {
-        return this.orientation === undefined ? this.vertical : this.orientation === 'vertical';
+        if (this.orientation === undefined)
+            return this.vertical;
+        const orientation = resolveAllowedPropValue(this.el, 'orientation', this.orientation, SLIDER_ORIENTATIONS, 'horizontal');
+        return orientation === 'vertical';
     }
     setupLabelAutoUpdate() {
         const showValueLabel = this.showLabel && !this.showInput;
@@ -423,32 +548,82 @@ export class Slider {
             return;
         this.rangeValue = { start: this.value, end: this.valueEnd };
     }
-    clamp(value, max = this.max, min = this.min) {
+    get normalizedSteps() {
+        return normalizeSteps(this.steps, this.effectiveMin, this.effectiveMax);
+    }
+    get hasGradient() {
+        return (this.gradient === true ||
+            (typeof this.gradient === 'string' && this.gradient !== 'false' && this.gradient.trim() !== ''));
+    }
+    get gradientStops() {
+        return parseGradientStops(this.gradient ?? false);
+    }
+    getGradientColorAt(val) {
+        if (!this.hasGradient)
+            return undefined;
+        const pct = this.percentOf(val);
+        return interpolateGradientColor(this.gradientStops, pct);
+    }
+    getGradientCss(direction) {
+        return buildGradientCss(this.gradientStops, direction);
+    }
+    clamp(value, max = this.effectiveMax, min = this.effectiveMin) {
         return clampNumber(value, min, max, min);
     }
     snapToStep(value) {
-        const stepped = Math.round((value - this.min) / this.step) * this.step + this.min;
+        const steps = this.normalizedSteps;
+        if (steps.length > 0) {
+            let closest = steps[0].value;
+            let minDiff = Math.abs(value - closest);
+            for (const s of steps) {
+                const diff = Math.abs(value - s.value);
+                if (diff < minDiff) {
+                    minDiff = diff;
+                    closest = s.value;
+                }
+            }
+            return this.clamp(closest);
+        }
+        const stepped = Math.round((value - this.effectiveMin) / this.effectiveStep) * this.effectiveStep + this.effectiveMin;
         return this.clamp(Number(stepped.toFixed(10)));
     }
     percent() {
         return this.percentOf(this.value);
     }
     percentOf(val) {
-        if (this.max === this.min)
+        if (this.effectiveMax === this.effectiveMin)
             return 0;
-        return ((val - this.min) / (this.max - this.min)) * 100;
+        return ((val - this.effectiveMin) / (this.effectiveMax - this.effectiveMin)) * 100;
+    }
+    applyGradientToFilledStyle(style, pctStart, span) {
+        if (!this.hasGradient)
+            return;
+        const dir = this.effectiveVertical ? 'to top' : 'to right';
+        style.background = this.getGradientCss(dir);
+        if (span <= 0)
+            return;
+        const bgSize = `${(10000 / span).toFixed(2)}%`;
+        style.backgroundSize = this.effectiveVertical ? `100% ${bgSize}` : `${bgSize} 100%`;
+        if (pctStart > 0) {
+            const bgPos = `${((-pctStart * 100) / span).toFixed(2)}%`;
+            style.backgroundPosition = this.effectiveVertical ? `0% ${bgPos}` : `${bgPos} 0%`;
+        }
     }
     getFilledStyle() {
         if (!this.range) {
             const pct = this.percent();
-            return this.effectiveVertical ? { height: `${pct}%` } : { width: `${pct}%` };
+            const style = this.effectiveVertical ? { height: `${pct}%` } : { width: `${pct}%` };
+            this.applyGradientToFilledStyle(style, 0, pct);
+            return style;
         }
         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}%` };
+        const span = pctEnd - pctStart;
+        const style = this.effectiveVertical
+            ? { bottom: `${pctStart}%`, height: `${span}%` }
+            : { left: `${pctStart}%`, width: `${span}%` };
+        this.applyGradientToFilledStyle(style, pctStart, span);
+        return style;
     }
     getTrackMaskStyle() {
         if (!this.showTicks || !this.getTickValues().length)
@@ -468,18 +643,21 @@ export class Slider {
         return { 'mask-image': gradient, '-webkit-mask-image': gradient };
     }
     getTickValues() {
-        const cacheKey = `${this.min}|${this.max}|${this.step}`;
+        if (this.normalizedSteps.length > 0) {
+            return this.normalizedSteps.map((s) => s.value);
+        }
+        const cacheKey = `${this.effectiveMin}|${this.effectiveMax}|${this.effectiveStep}`;
         if (cacheKey === this.tickValuesCacheKey)
             return this.tickValuesCache;
         this.tickValuesCacheKey = cacheKey;
-        if (this.max <= this.min || this.step <= 0 || !Number.isFinite(this.step)) {
+        if (this.effectiveMax <= this.effectiveMin || this.effectiveStep <= 0 || !Number.isFinite(this.effectiveStep)) {
             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 count = Math.floor((this.effectiveMax - this.effectiveMin) / this.effectiveStep);
+        const hasUnalignedMax = Number((this.effectiveMax - this.effectiveMin) / this.effectiveStep) % 1 !== 0;
         const valueCount = count + 1 + (hasUnalignedMax ? 1 : 0);
-        const getValueAt = (index) => index <= count ? Number((this.min + index * this.step).toFixed(10)) : this.max;
+        const getValueAt = (index) => index <= count ? Number((this.effectiveMin + index * this.effectiveStep).toFixed(10)) : this.effectiveMax;
         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)]);
@@ -495,23 +673,23 @@ export class Slider {
     }
     getValueFromX(clientX, rect = this.trackEl?.getBoundingClientRect()) {
         if (!this.trackEl)
-            return this.min;
+            return this.effectiveMin;
         if (!rect)
-            return this.min;
+            return this.effectiveMin;
         if (rect.width === 0)
-            return this.min;
+            return this.effectiveMin;
         const ratio = clampNumber((clientX - rect.left) / rect.width, 0, 1, 0);
-        return this.min + ratio * (this.max - this.min);
+        return this.effectiveMin + ratio * (this.effectiveMax - this.effectiveMin);
     }
     getValueFromY(clientY, rect = this.trackEl?.getBoundingClientRect()) {
         if (!this.trackEl)
-            return this.min;
+            return this.effectiveMin;
         if (!rect)
-            return this.min;
+            return this.effectiveMin;
         if (rect.height === 0)
-            return this.min;
+            return this.effectiveMin;
         const ratio = clampNumber((rect.bottom - clientY) / rect.height, 0, 1, 0);
-        return this.min + ratio * (this.max - this.min);
+        return this.effectiveMin + ratio * (this.effectiveMax - this.effectiveMin);
     }
     nearerThumb(rawValue) {
         const distToStart = Math.abs(rawValue - this.value);
@@ -537,22 +715,72 @@ export class Slider {
             }
         }
     }
+    getInputValueState(thumb) {
+        const isEnd = thumb === 'end';
+        return {
+            current: isEnd ? this.valueEnd : this.value,
+            min: isEnd ? this.value : this.effectiveMin,
+            max: isEnd ? this.effectiveMax : this.range ? this.valueEnd : this.effectiveMax,
+        };
+    }
+    updateValueFromInput(thumb, value) {
+        if (thumb === 'end') {
+            this.valueEnd = value;
+            this.brDidChangeValueEnd.emit(this.valueEnd);
+            return;
+        }
+        this.value = value;
+        this.brDidChangeValue.emit(this.value);
+    }
+    calculateNextStepValue(key, current, min, max) {
+        const steps = this.normalizedSteps;
+        const currentIndex = steps.findIndex((s) => s.value === current);
+        switch (key) {
+            case 'ArrowRight':
+            case 'ArrowUp': {
+                const nextIdx = currentIndex >= 0 ? Math.min(steps.length - 1, currentIndex + 1) : 0;
+                return this.clamp(steps[nextIdx].value, max, min);
+            }
+            case 'ArrowLeft':
+            case 'ArrowDown': {
+                const prevIdx = currentIndex >= 0 ? Math.max(0, currentIndex - 1) : 0;
+                return this.clamp(steps[prevIdx].value, max, min);
+            }
+            case 'Home':
+                return min;
+            case 'End':
+                return max;
+            case 'PageUp': {
+                const jumpIdx = Math.min(steps.length - 1, (currentIndex >= 0 ? currentIndex : 0) + 2);
+                return this.clamp(steps[jumpIdx].value, max, min);
+            }
+            case 'PageDown': {
+                const jumpIdx = Math.max(0, (currentIndex >= 0 ? currentIndex : 0) - 2);
+                return this.clamp(steps[jumpIdx].value, max, min);
+            }
+            default:
+                return null;
+        }
+    }
     calculateNextSliderValue(key, current, min, max) {
+        if (this.normalizedSteps.length > 0) {
+            return this.calculateNextStepValue(key, current, min, max);
+        }
         switch (key) {
             case 'ArrowRight':
             case 'ArrowUp':
-                return Math.min(max, current + this.step);
+                return Math.min(max, current + this.effectiveStep);
             case 'ArrowLeft':
             case 'ArrowDown':
-                return Math.max(min, current - this.step);
+                return Math.max(min, current - this.effectiveStep);
             case 'Home':
                 return min;
             case 'End':
                 return max;
             case 'PageUp':
-                return Math.min(max, current + this.step * 10);
+                return Math.min(max, current + this.effectiveStep * 10);
             case 'PageDown':
-                return Math.max(min, current - this.step * 10);
+                return Math.max(min, current - this.effectiveStep * 10);
             default:
                 return null;
         }
@@ -561,12 +789,12 @@ export class Slider {
         if (this.isDisabled())
             return;
         const target = event.composedPath?.()[0] || getEventTarget(event);
-        if (target === this.inputEl)
+        if (isEventTargetInside(event, this.inputStartEl) || isEventTargetInside(event, this.inputEndEl))
             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 keyMin = isEnd ? this.value : this.effectiveMin;
+        const keyMax = isEnd ? this.effectiveMax : this.range ? this.valueEnd : this.effectiveMax;
         const next = this.calculateNextSliderValue(event.key, currentValue, keyMin, keyMax);
         if (next === null)
             return;
@@ -602,13 +830,14 @@ export class Slider {
         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 stepMismatch = this.effectiveStep > 0 &&
+            Math.abs((this.value - this.effectiveMin) / this.effectiveStep -
+                Math.round((this.value - this.effectiveMin) / this.effectiveStep)) > 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),
+            rangeOverflow: this.value > this.effectiveMax || (this.range && this.valueEnd > this.effectiveMax),
+            rangeUnderflow: this.value < this.effectiveMin || (this.range && this.valueEnd < this.effectiveMin),
             stepMismatch,
         };
         const message = this.customValidationMessage ||
@@ -643,38 +872,90 @@ export class Slider {
     }
     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) })));
+        const val = isEnd ? this.valueEnd : this.value;
+        const stepMatch = this.normalizedSteps.find((s) => s.value === val);
+        const displayText = stepMatch?.label ?? String(val);
+        const color = this.getGradientColorAt(val);
+        const labelStyle = color ? { backgroundColor: color } : undefined;
+        const arrowStyle = color ? { backgroundColor: color } : undefined;
+        return (h("div", { class: "slider-value-label", part: "value-label", ref: (el) => this.setValueLabelElement(thumb, el), "aria-hidden": "true", style: labelStyle }, displayText, h("span", { class: "slider-value-label-arrow", part: "value-label-arrow", ref: (el) => this.setValueLabelArrowElement(thumb, el), style: arrowStyle })));
     }
     // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: mantém as variantes visuais do thumb em um único ponto.
     renderThumb(thumb, style) {
         const isEnd = thumb === 'end';
+        const iconName = isEnd ? (this.thumbEndIcon ?? this.thumbIcon) : (this.thumbStartIcon ?? this.thumbIcon);
+        const slotName = isEnd ? 'thumb-end-icon' : this.range ? 'thumb-start-icon' : 'thumb-icon';
+        const hasSlot = isEnd
+            ? this.hasThumbEndIconSlot
+            : this.range
+                ? this.hasThumbStartIconSlot
+                : this.hasThumbIconSlot || this.hasThumbStartIconSlot;
+        const hasIcon = Boolean(iconName || hasSlot);
         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
+                'slider-thumb--has-icon': hasIcon,
+            }, 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.effectiveMin), "aria-valuemax": isEnd ? String(this.effectiveMax) : this.range ? String(this.valueEnd) : String(this.effectiveMax), "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 }));
+                : null, style: style }, h("slot", { name: slotName }, iconName && h("br-icon", { iconName: iconName, class: "slider-thumb-icon", "aria-hidden": "true" }))));
     }
     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" }))));
+        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.effectiveMin))), h("span", { class: "ref-end", part: "reference-end" }, this.showBounds && (h("span", { class: "ref-bound", part: "reference-bound" }, this.effectiveMax)), h("slot", { name: "ref-end" }))));
     }
-    renderInput() {
+    setInputElement(thumb, element) {
+        if (thumb === 'end') {
+            this.inputEndEl = element;
+            return;
+        }
+        this.inputStartEl = element;
+    }
+    renderInput(thumb) {
         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
+        const isEnd = thumb === 'end';
+        const value = isEnd ? this.valueEnd : this.value;
+        const min = isEnd ? this.value : this.effectiveMin;
+        const max = isEnd ? this.effectiveMax : this.range ? this.valueEnd : this.effectiveMax;
+        const label = isEnd ? `${this.label ?? 'Valor'} fim` : this.range ? `${this.label ?? 'Valor'} início` : this.label;
+        return (h("div", { class: { 'slider-input-wrapper': true, [`slider-input-wrapper--${thumb}`]: true }, part: "input-wrapper" }, h("br-input", { controlWidth: "80px", density: "small", exportparts: "input", class: "slider-input", type: "number", min: min, max: max, step: this.effectiveStep, disabled: this.isDisabled(), "aria-label": 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 })));
+                : null, value: String(value), ref: (el) => this.setInputElement(thumb, el), onInput: (event) => this.handleInputInput(event, thumb), onChange: (event) => this.handleInputChange(event, thumb), onBlur: () => {
+                this.inputEditing = null;
+            } })));
+    }
+    renderSteps() {
+        return (h("div", { class: "slider-steps", part: "steps", "aria-hidden": "true" }, this.normalizedSteps.map((step) => {
+            const pct = this.percentOf(step.value);
+            const isSelected = this.range
+                ? step.value >= this.value && step.value <= this.valueEnd
+                : step.value === this.value;
+            const posStyle = this.effectiveVertical ? { bottom: `${pct}%` } : { left: `${pct}%` };
+            return (h("button", { type: "button", class: {
+                    'slider-step': true,
+                    'slider-step--active': isSelected,
+                }, part: `step step-${step.value}`, style: posStyle, disabled: this.isDisabled(), tabIndex: -1, onClick: () => this.handleStepClick(step.value) }, step.icon && h("br-icon", { iconName: step.icon, class: "slider-step-icon", "aria-hidden": "true" }), step.label && h("span", { class: "slider-step-label" }, step.label)));
+        })));
     }
     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))));
+        const startColor = this.getGradientColorAt(this.value);
+        const endColor = this.range ? this.getGradientColorAt(this.valueEnd) : undefined;
+        const startThumbStyle = {
+            ...this.getThumbStyle(this.value),
+            ...(startColor ? { backgroundColor: startColor, color: startColor } : {}),
+        };
+        const endThumbStyle = {
+            ...this.getThumbStyle(this.valueEnd),
+            ...(endColor ? { backgroundColor: endColor, color: endColor } : {}),
+        };
+        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', startThumbStyle), this.range && this.renderThumb('end', endThumbStyle)));
     }
     renderTickLabels() {
         const tickValues = this.getTickValues();
@@ -682,7 +963,7 @@ export class Slider {
         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)));
+        return (h(Host, { key: '7c7f82026393c762b721269c20498c85efd9a6b3', style: { opacity: this.isDisabled() ? '1' : undefined } }, this.label && h("div", { key: '2195d6599d5fd68b42d47d3737bb621f2d095c0a', class: "slider-label" }, this.label), h("div", { key: '9e6ac187a1b53d2db04aaa8e60612e5d06e85fa8', class: this.getCssClassMap(), part: "base" }, h("div", { key: 'f001d13512efcf6fab5837261ffd80254888b6fc', class: "slider-layout", part: "layout" }, this.range && this.renderInput('start'), h("div", { key: '7d0975449e6b3d69d4ca9b6e14130e5ef9b3ca72', class: "slider-body", part: "body" }, this.renderTrack(), this.normalizedSteps.length > 0 && this.renderSteps(), this.renderReferences()), this.range ? this.renderInput('end') : this.renderInput('start'))), h("div", { key: '2e72a57e643f887282c9222cefac6a4106e32751', id: `${this.customId}-feedback`, part: "feedback", hidden: !this.hasFeedbackSlot && !this.customValidationMessage && !this.validatorMessage }, h("slot", { key: 'f1e9157b6202558e2e26b550a052cb94b089823d', 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"; }
@@ -769,7 +1050,7 @@ export class Slider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Valor m\u00EDnimo aceito pelo slider."
+                    "text": "Valor m\u00EDnimo aceito pelo slider. Valores inv\u00E1lidos usam `0`."
                 },
                 "getter": false,
                 "setter": false,
@@ -789,7 +1070,7 @@ export class Slider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Valor m\u00E1ximo aceito pelo slider."
+                    "text": "Valor m\u00E1ximo aceito pelo slider. Deve ser maior que `min`; valores inv\u00E1lidos usam `100` e rela\u00E7\u00F5es inv\u00E1lidas usam `min + 100`."
                 },
                 "getter": false,
                 "setter": false,
@@ -809,7 +1090,7 @@ export class Slider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Incremento aplicado a cada passo."
+                    "text": "Incremento aplicado a cada passo. Deve ser maior que `0`; valores inv\u00E1lidos usam `1`."
                 },
                 "getter": false,
                 "setter": false,
@@ -835,8 +1116,11 @@ export class Slider {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Regra s\u00EDncrona ou ass\u00EDncrona aplicada ao n\u00FAmero ou intervalo selecionado."
+                    "tags": [{
+                            "name": "example",
+                            "text": "```js\nconst slider = document.querySelector('br-slider');\nslider.validator = (value) => {\n  const minimum = typeof value === 'number' ? value : value.start;\n  return minimum >= 18 ? null : 'O valor inicial deve ser pelo menos 18';\n};\n```"
+                        }],
+                    "text": "Regra s\u00EDncrona ou ass\u00EDncrona aplicada ao n\u00FAmero ou intervalo selecionado.\nNo modo `range`, recebe um objeto com `start` e `end`."
                 },
                 "getter": false,
                 "setter": false
@@ -853,7 +1137,7 @@ export class Slider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Valor atual do slider (al\u00E7a inicial no modo composto)."
+                    "text": "Valor atual do slider (al\u00E7a inicial no modo composto). Valores n\u00E3o finitos usam o limite m\u00EDnimo;\nvalores fora do intervalo s\u00E3o limitados."
                 },
                 "getter": false,
                 "setter": false,
@@ -876,7 +1160,7 @@ export class Slider {
                             "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`."
+                    "text": "Valor da al\u00E7a final no modo composto (`range`).\nQuando n\u00E3o fornecido em modo composto, assume o valor de `max`. Valores n\u00E3o finitos usam `max`,\nvalores fora do intervalo s\u00E3o limitados."
                 },
                 "getter": false,
                 "setter": false,
@@ -902,8 +1186,11 @@ export class Slider {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Valor estruturado das duas al\u00E7as no modo `range`."
+                    "tags": [{
+                            "name": "example",
+                            "text": "```js\nconst slider = document.querySelector('br-slider');\nslider.range = true;\nslider.rangeValue = { start: 20, end: 80 };\n```"
+                        }],
+                    "text": "Valor estruturado das duas al\u00E7as no modo `range`.\nDeve conter `start` e `end` finitos; valores inv\u00E1lidos mant\u00EAm o \u00FAltimo valor efetivo.\nPasse o objeto por property binding."
                 },
                 "getter": false,
                 "setter": false
@@ -928,33 +1215,6 @@ export class Slider {
                 "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,
@@ -990,7 +1250,7 @@ export class Slider {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Orienta\u00E7\u00E3o can\u00F4nica. Quando informada, tem preced\u00EAncia sobre `vertical`."
+                    "text": "Orienta\u00E7\u00E3o can\u00F4nica. Quando informada, tem preced\u00EAncia sobre `vertical`; valores inv\u00E1lidos usam `horizontal`."
                 },
                 "getter": false,
                 "setter": false,
@@ -1049,7 +1309,7 @@ export class Slider {
                 "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."
+                    "text": "Exibe um `br-input` num\u00E9rico sincronizado com a al\u00E7a.\nNo modo `range`, exibe um campo para o in\u00EDcio e outro para o fim; na\norienta\u00E7\u00E3o horizontal ficam nas extremidades esquerda e direita, e na\nvertical ficam acima e abaixo da trilha. Quando ativo, a etiqueta de valor\nn\u00E3o \u00E9 exibida."
                 },
                 "getter": false,
                 "setter": false,
@@ -1116,6 +1376,141 @@ export class Slider {
                 "reflect": true,
                 "attribute": "show-bounds",
                 "defaultValue": "false"
+            },
+            "density": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SliderDensity",
+                    "resolved": "\"high\" | \"large\" | \"low\" | \"medium\" | \"small\"",
+                    "references": {
+                        "SliderDensity": {
+                            "location": "import",
+                            "path": "./slider.types",
+                            "id": "src/components/slider/slider.types.ts::SliderDensity",
+                            "referenceLocation": "SliderDensity"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Densidade visual do componente.\nAltera exclusivamente as dimens\u00F5es da al\u00E7a de controle (thumb).\nValores aceitos: 'small' (16px), 'medium' (20px - padr\u00E3o), 'large' (24px).\n'high' e 'low' s\u00E3o aceitos como sin\u00F4nimos de 'small' e 'large'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "density",
+                "defaultValue": "'medium'"
+            },
+            "thumbIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Nome do \u00EDcone a ser exibido no interior da al\u00E7a de controle (thumb).\nNo modo `range`, aplica-se a ambas as al\u00E7as caso `thumbStartIcon` ou `thumbEndIcon` n\u00E3o sejam especificados.\nExemplo: 'fa-solid:arrows-left-right', 'fa-solid:circle'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "thumb-icon"
+            },
+            "thumbStartIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Nome do \u00EDcone da al\u00E7a inicial (no modo `range`, al\u00E7a \u00E0 esquerda/inferior)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "thumb-start-icon"
+            },
+            "thumbEndIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Nome do \u00EDcone da al\u00E7a final (no modo `range`, al\u00E7a \u00E0 direita/superior)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "thumb-end-icon"
+            },
+            "gradient": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Habilita gradiente de cores na trilha e sincroniza dinamicamente a cor da al\u00E7a (thumb)\ne da etiqueta de valor (tooltip) com a cor correspondente \u00E0 posi\u00E7\u00E3o atual.\nPode ser um booleano (usa gradiente padr\u00E3o verde -> amarelo -> vermelho)\nou uma string com cores/gradiente customizado (ex.: '#168821, #ffcd07, #e52207' ou 'linear-gradient(...)')."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "gradient"
+            },
+            "steps": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SliderStep[] | string",
+                    "resolved": "SliderStep[] | string",
+                    "references": {
+                        "SliderStep": {
+                            "location": "import",
+                            "path": "./slider.types",
+                            "id": "src/components/slider/slider.types.ts::SliderStep",
+                            "referenceLocation": "SliderStep"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "```html\n<br-slider\n  steps='[{\"value\": 1, \"label\": \"P\u00E9ssimo\", \"icon\": \"fa-solid:face-frown\"}, {\"value\": 5, \"label\": \"Excelente\", \"icon\": \"fa-solid:face-laugh\"}]'\n></br-slider>\n```"
+                        }, {
+                            "name": "example",
+                            "text": "```js\nconst slider = document.querySelector('br-slider');\nslider.steps = [\n  { value: 1, label: 'P\u00E9ssimo', icon: 'fa-solid:face-frown' },\n  { value: 5, label: 'Excelente', icon: 'fa-solid:face-laugh' },\n];\n```"
+                        }],
+                    "text": "Lista de passos customizados para o slider.\nCada passo pode definir `value`, `label` (texto exibido no tooltip e/ou abaixo da trilha)\ne `icon` (nome do \u00EDcone exibido abaixo da marca\u00E7\u00E3o do passo).\nAceita array de objetos `SliderStep[]`, array de strings `string[]`, ou string JSON."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "steps"
             }
         };
     }
@@ -1126,6 +1521,9 @@ export class Slider {
             "hasRefEnd": {},
             "hasRefStart": {},
             "hasFeedbackSlot": {},
+            "hasThumbIconSlot": {},
+            "hasThumbStartIconSlot": {},
+            "hasThumbEndIconSlot": {},
             "customValidationMessage": {},
             "validatorMessage": {},
             "isValidating": {}