@govbr-ds/webcomponents 2.1.3 → 2.3.0

package/dist/cjs/br-slider.cjs.entry.js

@@ -4,17 +4,194 @@
  */
 'use strict';
 
-var index = require('./index-CRdcutym.js');
-var floatingUi_dom = require('./floating-ui.dom-BUSTaaxR.js');
-var clamp = require('./clamp-Co_hWptd.js');
+var index = require('./index-Bc30P_6z.js');
+var floatingUi_dom = require('./floating-ui.dom-wzdGZjyG.js');
+var props = require('./props-D8dybmr0.js');
 var event = require('./event-CmVdNHxl.js');
-var validator = require('./validator-CTCajtT9.js');
-var id = require('./id-CjRFMzf6.js');
+var validator = require('./validator-GkkueMOx.js');
+var id = require('./id-DE4jSi-L.js');
+var propWarning = require('./prop-warning-xvEHQz8H.js');
 var rafBatcher = require('./raf-batcher-yc87a4dS.js');
 var slot = require('./slot-DAllytTj.js');
 
-const sliderCss = () => `*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media (min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown>.br-notification{left:auto;right:0}.dropdown .br-item{--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--color-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);--item-padding-y:var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--grid-margin:var(--grid-portrait-margin);--grid-maxwidth:var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter:var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media (min-width: 576px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}.col-sm-4{flex-basis:33.3333333333%;max-width:33.3333333333%}}@media (min-width: 992px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media (min-width: 1280px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-desktop-margin)}.row{--grid-gutter:var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}.col-lg-3{flex-basis:25%;max-width:25%}}@media (min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tv-margin)}.row{--grid-gutter:var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media (min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media (min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half)}a:focus{outline:none}a.focus-visible,a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media (min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background:var(--background);--table-color:var(--color);--table-border-color:var(--gray-20);--table-border-style:solid;--table-border-width:1px;--table-hover:var(--color-rgb);--table-padding:var(--spacing-scale-3x);--table-font-weight:var(--font-weight-medium);--table-th-background:var(--background-alternative);--table-th-font-weight:var(--font-weight-semi-bold);--table-row-size:var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.help{font-size:var(--font-size-scale-base)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}:host{--slider-thumb-size:var(--spacing-scale-2xh, 20px);--slider-thumb-half:10px;display:block;width:100%}:host .br-slider{padding:var(--slider-thumb-half) 0;-webkit-user-select:none;user-select:none;touch-action:none}:host .br-slider.disabled .slider-track{cursor:not-allowed}:host .br-slider.disabled .slider-filled-track{background-color:var(--gray-30, #aaa)}:host .br-slider.disabled .slider-thumb{background-color:var(--pure-0, #fff);box-shadow:inset 0 0 0 1px var(--gray-40, #888);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%23636363' stroke-width='1.5'/%3E%3Cpath d='M6.34 17.66L17.66 6.34' stroke='%23636363' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-size:80%;background-position:center;background-repeat:no-repeat;cursor:not-allowed}:host .br-slider.disabled .slider-thumb:hover{box-shadow:none}:host .br-slider.disabled .slider-thumb:focus-visible{outline:none;box-shadow:none}:host .br-slider.disabled .slider-refs{opacity:var(--disabled, 0.45)}:host .br-slider.disabled .slider-input{cursor:not-allowed;pointer-events:none;opacity:var(--disabled, 0.45)}:host .slider-layout{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-scale-2x, 16px)}:host .slider-body{flex:1;display:flex;flex-direction:column;gap:var(--spacing-scale-half, 4px)}:host .slider-track{position:relative;width:100%;height:4px;border-radius:2px;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}.br-slider.dragging :host .slider-track{cursor:grabbing}:host .slider-tick-labels{position:absolute;inset:0;pointer-events:none}:host .slider-tick-label{position:absolute;top:calc(100% + 4px);transform:translateX(-50%);white-space:nowrap;font-size:var(--font-size-scale-down-01, 12px)}:host .slider-track-visual{position:absolute;inset:0;background-color:var(--gray-20, #ccc);border-radius:2px;overflow:hidden}:host .slider-filled-track{position:absolute;top:0;left:0;height:100%;background-color:var(--blue-warm-vivid-50);border-radius:2px}:host .slider-thumb{position:absolute;top:50%;width:var(--slider-thumb-size);height:var(--slider-thumb-size);background-color:var(--blue-warm-vivid-50);border-radius:50%;cursor:pointer;transform:translate(-50%, -50%);outline:none;z-index:1;transition:box-shadow .15s ease}:host .slider-thumb:hover{box-shadow:0 0 0 8px rgba(19,81,180,.16)}:host .slider-thumb:active,:host .slider-thumb.slider-thumb--active{box-shadow:0 0 0 8px rgba(19,81,180,.45);cursor:grabbing}:host .slider-thumb:focus-visible{z-index:2;box-shadow:0 0 0 3px var(--focus-color, var(--gold-vivid-20, #ffbe2e));outline:none}:host .slider-value-label{position:fixed;z-index:var(--z-index-layer-1);top:0;left:0;background:var(--blue-warm-vivid-50);color:#fff;padding:2px 8px;border-radius:4px;font-size:var(--font-size-scale-down-01, 12px);font-weight:var(--font-weight-semi-bold, 600);white-space:nowrap;pointer-events:none;line-height:1.5}:host .slider-value-label-arrow{position:absolute;width:8px;height:8px;background:var(--blue-warm-vivid-50);transform:rotate(45deg);pointer-events:none;z-index:-1}:host .slider-refs{display:flex;flex-direction:row;justify-content:space-between;align-items:center;color:var(--gray-80);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular)}:host .slider-refs--hidden{display:none}:host .slider-refs .ref-start,:host .slider-refs .ref-end{display:flex;align-items:center;gap:var(--spacing-scale-half, 4px)}:host .slider-refs .ref-bound{font-weight:var(--font-weight-semi-bold, 600)}:host .slider-refs ::slotted(*){color:var(--gray-80);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular)}:host .slider-input-wrapper{flex-shrink:0}:host .slider-input{width:64px;padding:4px 8px;border:1px solid var(--gray-40, #888);border-radius:4px;font-size:var(--font-size-scale-base, 16px);text-align:center;color:var(--gray-80);background:rgba(0,0,0,0);outline:none;appearance:textfield}:host .slider-input:focus{border-color:var(--blue-warm-vivid-50);box-shadow:0 0 0 2px rgba(0,123,255,.2)}:host .slider-input::-webkit-inner-spin-button,:host .slider-input::-webkit-outer-spin-button{appearance:none;margin:0}:host([density=small]){--slider-thumb-size:var(--spacing-scale-2x, 16px);--slider-thumb-half:8px}:host([density=large]){--slider-thumb-size:var(--spacing-scale-3x, 24px);--slider-thumb-half:12px}:host([vertical]),:host([orientation=vertical]){width:auto;height:200px}:host([vertical]) .br-slider,:host([orientation=vertical]) .br-slider{padding:0 var(--slider-thumb-half);height:100%}:host([vertical]) .slider-layout,:host([orientation=vertical]) .slider-layout{flex-direction:column;align-items:flex-start;height:100%;gap:var(--spacing-scale-2x, 16px)}:host([vertical]) .slider-body,:host([orientation=vertical]) .slider-body{flex:1;flex-direction:row;min-height:0;gap:var(--spacing-scale-half, 4px)}:host([vertical]) .slider-track,:host([orientation=vertical]) .slider-track{width:4px;height:100%;flex-shrink:0}:host([vertical]) .slider-tick-label,:host([orientation=vertical]) .slider-tick-label{top:auto;left:calc(100% + 8px);transform:translateY(50%)}:host([vertical]) .slider-filled-track,:host([orientation=vertical]) .slider-filled-track{top:auto;bottom:0;left:0;width:100%;height:0}:host([vertical]) .slider-thumb,:host([orientation=vertical]) .slider-thumb{top:auto;left:50%;bottom:0;transform:translate(-50%, 50%)}:host([vertical]) .slider-refs,:host([orientation=vertical]) .slider-refs{flex-direction:column-reverse;justify-content:space-between;align-items:flex-start;height:100%}:host([vertical]) .slider-input-wrapper,:host([orientation=vertical]) .slider-input-wrapper{align-self:center}:host([vertical][show-input]),:host([orientation=vertical][show-input]){height:auto;min-height:200px}@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}`;
+const NAMED_COLORS = {
+    black: [0, 0, 0],
+    white: [255, 255, 255],
+    red: [229, 34, 7],
+    green: [22, 136, 33],
+    blue: [19, 81, 180],
+    yellow: [255, 205, 7],
+    orange: [255, 140, 0],
+    gray: [136, 136, 136],
+    grey: [136, 136, 136],
+};
+/**
+ * Converte string de cor (hex, rgb ou cor nomeada) em tupla [r, g, b].
+ */
+function parseColor(raw) {
+    const str = raw.trim().toLowerCase();
+    if (NAMED_COLORS[str])
+        return NAMED_COLORS[str];
+    if (str.startsWith('#')) {
+        const hex = str.slice(1);
+        if (hex.length === 3) {
+            const r = Number.parseInt(hex[0] + hex[0], 16);
+            const g = Number.parseInt(hex[1] + hex[1], 16);
+            const b = Number.parseInt(hex[2] + hex[2], 16);
+            if (!Number.isNaN(r) && !Number.isNaN(g) && !Number.isNaN(b))
+                return [r, g, b];
+        }
+        else if (hex.length === 6) {
+            const r = Number.parseInt(hex.slice(0, 2), 16);
+            const g = Number.parseInt(hex.slice(2, 4), 16);
+            const b = Number.parseInt(hex.slice(4, 6), 16);
+            if (!Number.isNaN(r) && !Number.isNaN(g) && !Number.isNaN(b))
+                return [r, g, b];
+        }
+    }
+    const rgbMatch = str.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+    if (rgbMatch) {
+        const r = Number.parseInt(rgbMatch[1], 10);
+        const g = Number.parseInt(rgbMatch[2], 10);
+        const b = Number.parseInt(rgbMatch[3], 10);
+        return [r, g, b];
+    }
+    return null;
+}
+/**
+ * Normaliza paradas de cor para interpolação dinâmica.
+ */
+function parseGradientStops(gradient) {
+    // Gradiente padrão semântico: verde -> amarelo -> vermelho
+    const defaultStops = [
+        { r: 22, g: 136, b: 33, pos: 0 },
+        { r: 255, g: 205, b: 7, pos: 50 },
+        { r: 229, g: 34, b: 7, pos: 100 },
+    ];
+    if (gradient === true || gradient === '' || gradient === 'true') {
+        return defaultStops;
+    }
+    if (typeof gradient !== 'string') {
+        return defaultStops;
+    }
+    let cleaned = gradient.trim();
+    const linearMatch = cleaned.match(/linear-gradient\s*\((.*)\)/i);
+    if (linearMatch) {
+        cleaned = linearMatch[1];
+        // Remove direção inicial se houver (ex: "to right,")
+        cleaned = cleaned.replace(/^(to\s+[a-z\s]+|\d+deg)\s*,\s*/i, '');
+    }
+    // Divide por vírgulas preservando rgb(...)
+    const rawParts = cleaned.split(/,(?![^(]*\))/);
+    const stops = [];
+    for (const part of rawParts) {
+        const trimmed = part.trim();
+        if (!trimmed)
+            continue;
+        const posMatch = trimmed.match(/\s+(\d+(?:\.\d+)?)\s*%\s*$/);
+        const pos = posMatch ? Number.parseFloat(posMatch[1]) : undefined;
+        const colorStr = posMatch ? trimmed.slice(0, posMatch.index).trim() : trimmed;
+        const rgb = parseColor(colorStr);
+        if (rgb) {
+            stops.push({ rgb, pos });
+        }
+    }
+    if (stops.length < 2)
+        return defaultStops;
+    return stops.map((item, index) => ({
+        r: item.rgb[0],
+        g: item.rgb[1],
+        b: item.rgb[2],
+        pos: item.pos !== undefined ? item.pos : (index / (stops.length - 1)) * 100,
+    }));
+}
+/**
+ * Calcula a cor interpolada em uma determinada porcentagem (0 a 100).
+ */
+function interpolateGradientColor(stops, percent) {
+    if (!stops.length)
+        return 'rgb(19, 81, 180)';
+    const clamped = Math.max(0, Math.min(100, percent));
+    if (clamped <= stops[0].pos) {
+        return `rgb(${stops[0].r}, ${stops[0].g}, ${stops[0].b})`;
+    }
+    if (clamped >= stops[stops.length - 1].pos) {
+        const last = stops[stops.length - 1];
+        return `rgb(${last.r}, ${last.g}, ${last.b})`;
+    }
+    for (let i = 0; i < stops.length - 1; i++) {
+        const s1 = stops[i];
+        const s2 = stops[i + 1];
+        if (clamped >= s1.pos && clamped <= s2.pos) {
+            const range = s2.pos - s1.pos;
+            const factor = range === 0 ? 0 : (clamped - s1.pos) / range;
+            const r = Math.round(s1.r + (s2.r - s1.r) * factor);
+            const g = Math.round(s1.g + (s2.g - s1.g) * factor);
+            const b = Math.round(s1.b + (s2.b - s1.b) * factor);
+            return `rgb(${r}, ${g}, ${b})`;
+        }
+    }
+    const last = stops[stops.length - 1];
+    return `rgb(${last.r}, ${last.g}, ${last.b})`;
+}
+/**
+ * Converte paradas de cor em string linear-gradient CSS.
+ */
+function buildGradientCss(stops, direction) {
+    const parts = stops.map((s) => `rgb(${s.r}, ${s.g}, ${s.b}) ${s.pos.toFixed(1)}%`);
+    return `linear-gradient(${direction}, ${parts.join(', ')})`;
+}
+function parseStepItem(item) {
+    if (typeof item !== 'object' || item === null || !('value' in item))
+        return null;
+    const stepObj = item;
+    return {
+        value: Number(stepObj.value),
+        label: stepObj.label !== undefined ? String(stepObj.label) : undefined,
+        icon: stepObj.icon !== undefined ? String(stepObj.icon) : undefined,
+        ariaLabel: stepObj.ariaLabel !== undefined ? String(stepObj.ariaLabel) : undefined,
+    };
+}
+function parseStringSteps(items, min, max) {
+    const count = items.length;
+    const stepDiff = count > 1 ? (max - min) / (count - 1) : 0;
+    return items.map((item, index) => ({
+        value: Number((min + index * stepDiff).toFixed(4)),
+        label: String(item),
+    }));
+}
+/**
+ * Normaliza a propriedade `steps` (array de objetos, array de strings ou JSON string).
+ */
+function normalizeSteps(raw, min, max) {
+    if (!raw)
+        return [];
+    let parsed = raw;
+    if (typeof raw === 'string') {
+        try {
+            parsed = JSON.parse(raw);
+        }
+        catch {
+            return [];
+        }
+    }
+    if (!Array.isArray(parsed) || parsed.length === 0)
+        return [];
+    if (typeof parsed[0] === 'string') {
+        return parseStringSteps(parsed, min, max);
+    }
+    const result = [];
+    for (const item of parsed) {
+        const parsedItem = parseStepItem(item);
+        if (parsedItem)
+            result.push(parsedItem);
+    }
+    return result.sort((a, b) => a.value - b.value);
+}
 
+const sliderCss = () => `*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media (min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown>.br-notification{left:auto;right:0}.dropdown .br-item{--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--color-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);--item-padding-y:var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--grid-margin:var(--grid-portrait-margin);--grid-maxwidth:var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter:var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media (min-width: 576px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}.col-sm-4{flex-basis:33.3333333333%;max-width:33.3333333333%}}@media (min-width: 992px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media (min-width: 1280px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-desktop-margin)}.row{--grid-gutter:var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}.col-lg-3{flex-basis:25%;max-width:25%}}@media (min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tv-margin)}.row{--grid-gutter:var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-out{animation-timing-function:cubic-bezier(0, 0, 0.58, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.fast{animation-duration:var(--duration-fast)}.slow{animation-duration:var(--duration-slow)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media (min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}fieldset[disabled]{opacity:1}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media (min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half)}a:focus{outline:none}a.focus-visible,a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media (min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background:var(--background);--table-color:var(--color);--table-border-color:var(--gray-20);--table-border-style:solid;--table-border-width:1px;--table-hover:var(--color-rgb);--table-padding:var(--spacing-scale-3x);--table-font-weight:var(--font-weight-medium);--table-th-background:var(--background-alternative);--table-th-font-weight:var(--font-weight-semi-bold);--table-row-size:var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}pre,.pre{background:var(--gray-5);margin:var(--spacing-scale-2x) 0 var(--spacing-scale-4x);padding:var(--spacing-scale-2x)}pre code,.pre code{display:inline;padding:0}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}@media (prefers-reduced-motion: reduce){:host,:host::before,:host::after,:host *,:host *::before,:host *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}}:host-context([data-wbc-reduced-motion=true])::before,:host-context([data-wbc-reduced-motion=true])::after,:host-context([data-wbc-reduced-motion=true]) *,:host-context([data-wbc-reduced-motion=true]) *::before,:host-context([data-wbc-reduced-motion=true]) *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}:host{--slider-thumb-size:var(--spacing-scale-2xh, 20px);--slider-thumb-half:10px;display:block;width:100%}:host([density=small]),:host([density=high]){--slider-thumb-size:var(--spacing-scale-2x, 16px);--slider-thumb-half:8px}:host([density=medium]){--slider-thumb-size:var(--spacing-scale-2xh, 20px);--slider-thumb-half:10px}:host([density=large]),:host([density=low]){--slider-thumb-size:var(--spacing-scale-3x, 24px);--slider-thumb-half:12px}:host .br-slider{padding:var(--slider-thumb-half) 0;-webkit-user-select:none;user-select:none;touch-action:none}:host .br-slider.disabled .slider-track{cursor:not-allowed}:host .br-slider.disabled .slider-filled-track{background-color:var(--gray-30, #aaa)}:host .br-slider.disabled .slider-thumb{cursor:not-allowed}:host .br-slider.disabled .slider-thumb.slider-thumb--has-icon{background-color:rgba(0,0,0,0) !important;color:var(--gray-60, #717171)}:host .br-slider.disabled .slider-thumb:hover{box-shadow:none}:host .br-slider.disabled .slider-thumb:focus-visible{outline:none;box-shadow:none}:host .br-slider.disabled .slider-refs{opacity:var(--disabled, 0.45)}:host .br-slider.disabled .slider-input{cursor:not-allowed;pointer-events:none;opacity:var(--disabled, 0.45)}:host .slider-label{color:var(--gray-80);display:block;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-scale-half, 4px)}:host .slider-layout{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-scale-2x, 16px)}:host .slider-body{flex:1;display:flex;flex-direction:column;gap:var(--spacing-scale-half, 4px)}:host .slider-track{position:relative;width:100%;height:4px;border-radius:2px;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}.br-slider.dragging :host .slider-track{cursor:grabbing}:host .slider-tick-labels{position:absolute;inset:0;pointer-events:none}:host .slider-tick-label{position:absolute;top:calc(100% + 4px);transform:translateX(-50%);white-space:nowrap;font-size:var(--font-size-scale-down-01, 12px)}:host .slider-track-visual{position:absolute;inset:0;background-color:var(--gray-20, #ccc);border-radius:2px;overflow:hidden}:host .slider-filled-track{position:absolute;top:0;left:0;height:100%;background-color:var(--blue-warm-vivid-50);border-radius:2px}:host .slider-thumb{position:absolute;top:50%;width:var(--slider-thumb-size);height:var(--slider-thumb-size);background-color:var(--blue-warm-vivid-50);border-radius:50%;cursor:pointer;transform:translate(-50%, -50%);outline:none;z-index:1;display:inline-flex;align-items:center;justify-content:center;color:var(--blue-warm-vivid-50)}:host .slider-thumb .slider-thumb-icon,:host .slider-thumb ::slotted([slot^=thumb]){color:var(--pure-0, #fff);font-size:calc(var(--slider-thumb-size)*.55);width:calc(var(--slider-thumb-size)*.55);height:calc(var(--slider-thumb-size)*.55);pointer-events:none;display:inline-flex;align-items:center;justify-content:center}:host .slider-thumb.slider-thumb--has-icon{background-color:rgba(0,0,0,0) !important;border:none}:host .slider-thumb.slider-thumb--has-icon .slider-thumb-icon,:host .slider-thumb.slider-thumb--has-icon ::slotted([slot^=thumb]){color:inherit;font-size:var(--slider-thumb-size);width:var(--slider-thumb-size);height:var(--slider-thumb-size)}:host .slider-thumb{transition:none}@media (prefers-reduced-motion: no-preference){:host .slider-thumb{transition:box-shadow var(--duration-very-fast, 100ms) var(--animation-ease, ease)}}:host .slider-thumb:hover{box-shadow:0 0 0 8px rgba(19,81,180,.16)}:host .slider-thumb:active,:host .slider-thumb.slider-thumb--active{box-shadow:0 0 0 8px rgba(19,81,180,.45);cursor:grabbing}:host .slider-thumb:focus-visible{z-index:2;box-shadow:0 0 0 3px var(--focus-color, var(--gold-vivid-20, #ffbe2e));outline:none}:host .slider-value-label{position:fixed;z-index:var(--z-index-layer-1);top:0;left:0;background:var(--blue-warm-vivid-50);color:#fff;padding:2px 8px;border-radius:4px;font-size:var(--font-size-scale-down-01, 12px);font-weight:var(--font-weight-semi-bold, 600);white-space:nowrap;pointer-events:none;line-height:1.5}:host .slider-value-label-arrow{position:absolute;width:8px;height:8px;background:var(--blue-warm-vivid-50);transform:rotate(45deg);pointer-events:none;z-index:-1}:host .slider-refs{display:flex;flex-direction:row;justify-content:space-between;align-items:center;color:var(--gray-80);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular)}:host .slider-refs--hidden{display:none}:host .slider-refs .ref-start,:host .slider-refs .ref-end{display:flex;align-items:center;gap:var(--spacing-scale-half, 4px)}:host .slider-refs .ref-bound{font-weight:var(--font-weight-semi-bold, 600)}:host .slider-refs ::slotted(*){color:var(--gray-80);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular)}:host .slider-steps{position:relative;width:100%;min-height:24px;margin-top:var(--spacing-scale-half, 4px)}:host .slider-step{position:absolute;top:0;transform:translateX(-50%);background:rgba(0,0,0,0);border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;color:var(--gray-60, #636363);transition:none}@media (prefers-reduced-motion: no-preference){:host .slider-step{transition:color var(--duration-fast, 200ms) var(--animation-ease, ease),transform var(--duration-fast, 200ms) var(--animation-ease, ease)}}:host .slider-step:hover:not(:disabled){color:var(--blue-warm-vivid-50);transform:translateX(-50%) scale(1.15)}:host .slider-step--active{color:var(--blue-warm-vivid-50)}:host .slider-step:disabled{cursor:not-allowed;opacity:var(--disabled, 0.45)}:host .slider-step .slider-step-icon{font-size:20px;width:20px;height:20px}:host .slider-step .slider-step-label{font-size:var(--font-size-scale-down-01, 12px);white-space:nowrap}:host .slider-input-wrapper{display:flex;flex-shrink:0}:host br-input.slider-input{display:block;margin-bottom:0;width:80px}:host([disabled]){opacity:1 !important}:host([vertical]),:host([orientation=vertical]){width:fit-content;height:200px}:host([vertical]) .br-slider,:host([orientation=vertical]) .br-slider{padding:0 var(--slider-thumb-half);height:100%}:host([vertical]) .slider-layout,:host([orientation=vertical]) .slider-layout{flex-direction:column;align-items:flex-start;height:100%;gap:var(--spacing-scale-2x, 16px)}:host([vertical]) .slider-body,:host([orientation=vertical]) .slider-body{flex:1;flex-direction:row;min-height:0;gap:var(--spacing-scale-2x, 16px)}:host([vertical]) .slider-track,:host([orientation=vertical]) .slider-track{width:4px;height:100%;flex-shrink:0}:host([vertical]) .slider-tick-label,:host([orientation=vertical]) .slider-tick-label{top:auto;left:calc(100% + 8px);transform:translateY(50%)}:host([vertical]) .slider-filled-track,:host([orientation=vertical]) .slider-filled-track{top:auto;bottom:0;left:0;width:100%;height:0}:host([vertical]) .slider-thumb,:host([orientation=vertical]) .slider-thumb{top:auto;left:50%;bottom:0;transform:translate(-50%, 50%)}:host([vertical]) .slider-refs,:host([orientation=vertical]) .slider-refs{flex-direction:column-reverse;justify-content:space-between;align-items:flex-start;height:100%}:host([vertical]) .slider-steps,:host([orientation=vertical]) .slider-steps{position:relative;width:24px;height:100%;margin-top:0;margin-left:var(--spacing-scale-half, 4px)}:host([vertical]) .slider-steps .slider-step,:host([orientation=vertical]) .slider-steps .slider-step{top:auto;left:0;transform:translateY(50%)}:host([vertical]) .slider-steps .slider-step:hover:not(:disabled),:host([orientation=vertical]) .slider-steps .slider-step:hover:not(:disabled){transform:translateY(50%) scale(1.15)}:host([vertical]) .slider-input-wrapper,:host([orientation=vertical]) .slider-input-wrapper{align-self:center}:host([vertical][show-input]) .slider-layout,:host([orientation=vertical][show-input]) .slider-layout{position:relative}:host([vertical][show-input]) .slider-body,:host([orientation=vertical][show-input]) .slider-body{box-sizing:border-box;padding-top:calc(var(--spacing-scale-4x, 32px) + var(--spacing-scale-2x, 16px))}:host([vertical][show-input]) .slider-input-wrapper,:host([orientation=vertical][show-input]) .slider-input-wrapper{position:absolute;left:50%;transform:translateX(-50%)}:host([vertical][show-input]) .slider-input-wrapper--start,:host([orientation=vertical][show-input]) .slider-input-wrapper--start{top:0}:host([vertical][show-input]) .slider-input-wrapper--end,:host([orientation=vertical][show-input]) .slider-input-wrapper--end{bottom:0}:host([vertical][show-input][range]) .slider-body,:host([orientation=vertical][show-input][range]) .slider-body{padding-bottom:calc(var(--spacing-scale-4x, 32px) + var(--spacing-scale-2x, 16px))}`;
+
+const SLIDER_ORIENTATIONS = ['horizontal', 'vertical'];
 const Slider = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -42,6 +219,9 @@ const Slider = class {
          */
         this.hasRefStart = false;
         this.hasFeedbackSlot = false;
+        this.hasThumbIconSlot = false;
+        this.hasThumbStartIconSlot = false;
+        this.hasThumbEndIconSlot = false;
         this.customValidationMessage = '';
         this.validatorMessage = null;
         this.isValidating = false;
@@ -51,24 +231,26 @@ const Slider = class {
          */
         this.customId = id.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;
@@ -76,11 +258,6 @@ const Slider = class {
          * 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`.
@@ -96,8 +273,11 @@ const Slider = class {
          */
         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;
         /**
@@ -115,7 +295,14 @@ const Slider = class {
          * 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 = [];
@@ -170,31 +357,65 @@ const Slider = class {
             event.dispatchNativeFormEvent(this.el, 'change');
             void this.validate();
         };
-        this.handleInputInput = (event$1) => {
-            this.inputEditing = true;
-            const parsed = parseFloat(event$1.target.value);
+        this.handleInputInput = (event$1, thumb) => {
+            this.inputEditing = thumb;
+            const input = event$1.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);
                 }
             }
             event.redispatchNativeFormEvent(this.el, event$1, 'input');
         };
-        this.handleInputBlur = (event$1) => {
-            this.inputEditing = false;
-            const raw = event$1.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$1.target.value = String(this.value);
+        this.handleInputChange = (event$1, thumb) => {
+            event$1.stopPropagation();
+            const input = event$1.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);
             event.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();
+                        event.dispatchNativeFormEvent(this.el, 'input');
+                        event.dispatchNativeFormEvent(this.el, 'change');
+                        void this.validate();
+                    }
+                }
+                else if (val !== this.valueEnd) {
+                    this.valueEnd = val;
+                    this.brDidChangeValueEnd.emit(this.valueEnd);
+                    this.syncRangeValue();
+                    event.dispatchNativeFormEvent(this.el, 'input');
+                    event.dispatchNativeFormEvent(this.el, 'change');
+                    void this.validate();
+                }
+            }
+            else if (val !== this.value) {
+                this.value = val;
+                this.brDidChangeValue.emit(this.value);
+                this.syncRangeValue();
+                event.dispatchNativeFormEvent(this.el, 'input');
+                event.dispatchNativeFormEvent(this.el, 'change');
+                void this.validate();
+            }
+        };
     }
     formDisabledCallback(disabled) {
         this.formDisabled = disabled;
@@ -216,16 +437,43 @@ const Slider = class {
         if (this.range && !Number.isNaN(end))
             this.valueEnd = end;
     }
+    get effectiveMin() {
+        return props.resolveNumberPropValue(this.el, 'min', this.min, Number.MIN_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, 0);
+    }
+    get effectiveMax() {
+        const min = this.effectiveMin;
+        const max = props.resolveNumberPropValue(this.el, 'max', this.max, Number.MIN_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, 100);
+        if (max > min)
+            return max;
+        propWarning.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 = props.resolveNumberPropValue(this.el, 'step', this.step, 0, Number.MAX_SAFE_INTEGER, 1);
+        if (step > 0)
+            return step;
+        propWarning.reportInvalidPropValue(this.el, 'step', this.step, 'O valor deve ser maior que 0.', 'Aplicando o fallback 1.');
+        return 1;
+    }
+    get effectiveValue() {
+        return props.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 props.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();
@@ -233,28 +481,35 @@ const Slider = class {
     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)) {
+            propWarning.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;
@@ -263,23 +518,31 @@ const Slider = class {
     }
     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() {
@@ -330,7 +593,10 @@ const Slider = class {
         return validator.getFormValidationState(this.elementInternals);
     }
     get effectiveVertical() {
-        return this.orientation === undefined ? this.vertical : this.orientation === 'vertical';
+        if (this.orientation === undefined)
+            return this.vertical;
+        const orientation = props.resolveAllowedPropValue(this.el, 'orientation', this.orientation, SLIDER_ORIENTATIONS, 'horizontal');
+        return orientation === 'vertical';
     }
     setupLabelAutoUpdate() {
         const showValueLabel = this.showLabel && !this.showInput;
@@ -406,32 +672,82 @@ const Slider = class {
             return;
         this.rangeValue = { start: this.value, end: this.valueEnd };
     }
-    clamp(value, max = this.max, min = this.min) {
-        return clamp.clampNumber(value, min, max, 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 props.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)
@@ -451,18 +767,21 @@ const Slider = class {
         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)]);
@@ -478,23 +797,23 @@ const Slider = class {
     }
     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;
-        const ratio = clamp.clampNumber((clientX - rect.left) / rect.width, 0, 1, 0);
-        return this.min + ratio * (this.max - this.min);
+            return this.effectiveMin;
+        const ratio = props.clampNumber((clientX - rect.left) / rect.width, 0, 1, 0);
+        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;
-        const ratio = clamp.clampNumber((rect.bottom - clientY) / rect.height, 0, 1, 0);
-        return this.min + ratio * (this.max - this.min);
+            return this.effectiveMin;
+        const ratio = props.clampNumber((rect.bottom - clientY) / rect.height, 0, 1, 0);
+        return this.effectiveMin + ratio * (this.effectiveMax - this.effectiveMin);
     }
     nearerThumb(rawValue) {
         const distToStart = Math.abs(rawValue - this.value);
@@ -520,22 +839,72 @@ const Slider = class {
             }
         }
     }
+    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;
         }
@@ -544,12 +913,12 @@ const Slider = class {
         if (this.isDisabled())
             return;
         const target = event$1.composedPath?.()[0] || event.getEventTarget(event$1);
-        if (target === this.inputEl)
+        if (event.isEventTargetInside(event$1, this.inputStartEl) || event.isEventTargetInside(event$1, 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$1.key, currentValue, keyMin, keyMax);
         if (next === null)
             return;
@@ -585,13 +954,14 @@ const Slider = class {
         return validator.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 ||
@@ -626,38 +996,90 @@ const Slider = class {
     }
     renderValueLabel(thumb) {
         const isEnd = thumb === 'end';
-        return (index.h("div", { class: "slider-value-label", part: "value-label", ref: (el) => this.setValueLabelElement(thumb, el), "aria-hidden": "true" }, isEnd ? this.valueEnd : this.value, index.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 (index.h("div", { class: "slider-value-label", part: "value-label", ref: (el) => this.setValueLabelElement(thumb, el), "aria-hidden": "true", style: labelStyle }, displayText, index.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 (index.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 }, index.h("slot", { name: slotName }, iconName && index.h("br-icon", { iconName: iconName, class: "slider-thumb-icon", "aria-hidden": "true" }))));
     }
     renderReferences() {
         const hasRefs = this.hasRefStart || this.hasRefEnd || this.showBounds;
-        return (index.h("div", { class: { 'slider-refs': true, 'slider-refs--hidden': !hasRefs }, part: "references" }, index.h("span", { class: "ref-start", part: "reference-start" }, index.h("slot", { name: "ref-start" }), this.showBounds && (index.h("span", { class: "ref-bound", part: "reference-bound" }, this.min))), index.h("span", { class: "ref-end", part: "reference-end" }, this.showBounds && (index.h("span", { class: "ref-bound", part: "reference-bound" }, this.max)), index.h("slot", { name: "ref-end" }))));
+        return (index.h("div", { class: { 'slider-refs': true, 'slider-refs--hidden': !hasRefs }, part: "references" }, index.h("span", { class: "ref-start", part: "reference-start" }, index.h("slot", { name: "ref-start" }), this.showBounds && (index.h("span", { class: "ref-bound", part: "reference-bound" }, this.effectiveMin))), index.h("span", { class: "ref-end", part: "reference-end" }, this.showBounds && (index.h("span", { class: "ref-bound", part: "reference-bound" }, this.effectiveMax)), index.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 (index.h("div", { class: "slider-input-wrapper", part: "input-wrapper" }, index.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 (index.h("div", { class: { 'slider-input-wrapper': true, [`slider-input-wrapper--${thumb}`]: true }, part: "input-wrapper" }, index.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 (index.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 (index.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 && index.h("br-icon", { iconName: step.icon, class: "slider-step-icon", "aria-hidden": "true" }), step.label && index.h("span", { class: "slider-step-label" }, step.label)));
+        })));
     }
     renderTrack() {
         const trackMask = this.getTrackMaskStyle();
-        return (index.h("div", { class: "slider-track", part: "track", ref: (el) => (this.trackEl = el), onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp }, index.h("div", { class: "slider-track-visual", part: "track-visual", style: trackMask }, index.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 (index.h("div", { class: "slider-track", part: "track", ref: (el) => (this.trackEl = el), onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp }, index.h("div", { class: "slider-track-visual", part: "track-visual", style: trackMask }, index.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();
@@ -665,7 +1087,7 @@ const Slider = class {
         return (index.h("div", { class: "slider-tick-labels", part: "tick-labels", "aria-hidden": "true" }, intermediateTicks.map((value) => (index.h("span", { class: "slider-tick-label", part: "tick-label", style: this.effectiveVertical ? { bottom: `${this.percentOf(value)}%` } : { left: `${this.percentOf(value)}%` } }, value)))));
     }
     render() {
-        return (index.h(index.Host, { key: '26be711ad91a867e82e35d10e86508aa5af68557' }, index.h("div", { key: '906052510af8d3a323ea8274b339ba264b745e25', class: this.getCssClassMap(), part: "base" }, index.h("div", { key: '323ee79d4a4fc4d81e4a1b43c8fa6298d0f92916', class: "slider-layout", part: "layout" }, index.h("div", { key: '113e5114161144af0466997b47108eb0e053af8e', class: "slider-body", part: "body" }, this.renderTrack(), this.renderReferences()), this.renderInput())), index.h("div", { key: 'b8ce4c3cae026492ad1db1e03f5709988b42a13e', id: `${this.customId}-feedback`, part: "feedback", hidden: !this.hasFeedbackSlot && !this.customValidationMessage && !this.validatorMessage }, index.h("slot", { key: 'e2564e6830476cb3d495807f4b15d600f5c7146e', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = slot.hasAssignedSlotContent(event.currentTarget)) }), !this.hasFeedbackSlot && (this.customValidationMessage || this.validatorMessage) ? (index.h("br-message", { state: "danger", message: this.customValidationMessage || this.validatorMessage })) : null)));
+        return (index.h(index.Host, { key: '7c7f82026393c762b721269c20498c85efd9a6b3', style: { opacity: this.isDisabled() ? '1' : undefined } }, this.label && index.h("div", { key: '2195d6599d5fd68b42d47d3737bb621f2d095c0a', class: "slider-label" }, this.label), index.h("div", { key: '9e6ac187a1b53d2db04aaa8e60612e5d06e85fa8', class: this.getCssClassMap(), part: "base" }, index.h("div", { key: 'f001d13512efcf6fab5837261ffd80254888b6fc', class: "slider-layout", part: "layout" }, this.range && this.renderInput('start'), index.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'))), index.h("div", { key: '2e72a57e643f887282c9222cefac6a4106e32751', id: `${this.customId}-feedback`, part: "feedback", hidden: !this.hasFeedbackSlot && !this.customValidationMessage && !this.validatorMessage }, index.h("slot", { key: 'f1e9157b6202558e2e26b550a052cb94b089823d', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = slot.hasAssignedSlotContent(event.currentTarget)) }), !this.hasFeedbackSlot && (this.customValidationMessage || this.validatorMessage) ? (index.h("br-message", { state: "danger", message: this.customValidationMessage || this.validatorMessage })) : null)));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }