@govbr-ds/webcomponents 2.1.0 → 2.1.2

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

@@ -0,0 +1,685 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-C2RBydfd.js';
+import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, h as hide, b as arrow } from './floating-ui.dom-DIK54tTj.js';
+import { c as clampNumber } from './clamp-gvnfuTjd.js';
+import { i as isEventTargetInside, d as dispatchNativeFormEvent, r as redispatchNativeFormEvent, a as getEventTarget } from './event-DFN_so7I.js';
+import { r as resolveFormValidator, a as runFormValidator, g as getFormValidationState, i as isFormControlDisabled, c as setFormValidity } from './validator-D3tVP32U.js';
+import { g as generateUniqueId } from './id-BkS6ujyf.js';
+import { c as createRafBatcher } from './raf-batcher-cF3ia5e9.js';
+import { a as hasAssignedSlotContent } from './slot-BIG-yees.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))}}@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))}}@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 Slider = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.brDidChangeValue = createEvent(this, "brDidChangeValue", 7);
+        this.brDidChangeValueEnd = createEvent(this, "brDidChangeValueEnd", 7);
+        this.brSliderValidationChange = createEvent(this, "brSliderValidationChange", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.elementInternals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.elementInternals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.elementInternals;
+        }
+        /**
+         * Indica se alguma alça está sendo arrastada.
+         */
+        this.dragging = false;
+        this.formDisabled = false;
+        /**
+         * Indica se o slot `ref-end` possui conteúdo.
+         */
+        this.hasRefEnd = false;
+        /**
+         * Indica se o slot `ref-start` possui conteúdo.
+         */
+        this.hasRefStart = false;
+        this.hasFeedbackSlot = false;
+        this.customValidationMessage = '';
+        this.validatorMessage = null;
+        this.isValidating = false;
+        /**
+         * Identificador único.
+         * Caso não seja fornecido, um ID gerado automaticamente será usado.
+         */
+        this.customId = generateUniqueId();
+        /**
+         * Valor mínimo aceito pelo slider.
+         */
+        this.min = 0;
+        /**
+         * Valor máximo aceito pelo slider.
+         */
+        this.max = 100;
+        /**
+         * Incremento aplicado a cada passo.
+         */
+        this.step = 1;
+        /**
+         * Valor atual do slider (alça inicial no modo composto).
+         */
+        this.value = 0;
+        /**
+         * Valor da alça final no modo composto (`range`).
+         * Quando não fornecido em modo composto, assume o valor de `max`.
+         * @deprecated Use `rangeValue`.
+         */
+        this.valueEnd = NaN;
+        /**
+         * Desativa o slider, tornando-o não interativo.
+         */
+        this.disabled = false;
+        /**
+         * Densidade da alça de controle.
+         * `small` = 16px (desktop compacto), `medium` = 20px (desktop padrão), `large` = 24px (mobile).
+         */
+        this.density = 'medium';
+        /**
+         * Exibe o slider na orientação vertical.
+         * @deprecated Use `orientation`.
+         */
+        this.vertical = false;
+        /**
+         * Ativa o modo composto com duas alças para seleção de faixa.
+         */
+        this.range = false;
+        /**
+         * Exibe etiqueta com o valor atual acima da alça (horizontal) ou à esquerda (vertical).
+         * Ignorado quando `show-input` está ativo.
+         */
+        this.showLabel = false;
+        /**
+         * Exibe campo de entrada numérico sincronizado com a alça.
+         * Quando ativo, a etiqueta de valor não é exibida.
+         */
+        this.showInput = false;
+        /**
+         * Exibe gradações na trilha como pequenos espaços que indicam os steps disponíveis,
+         * forçando a alça de controle a saltar entre os valores predefinidos e
+         * impossibilitando a seleção de valores aleatórios.
+         */
+        this.showTicks = false;
+        /** Exibe os valores das marcações derivadas de `min`, `max` e `step`. */
+        this.showTickLabels = false;
+        /**
+         * Exibe os limites nas referências inicial e final: `min` no início e `max` no fim
+         * (limites fixos), tanto em modo simples quanto em modo composto (`range`). O valor
+         * selecionado por cada alça é exibido na etiqueta (`show-label`), não nas referências.
+         * Quando ativo, sobrescreve o conteúdo dos slots `ref-start` e `ref-end`.
+         */
+        this.showBounds = false;
+        this.inputEditing = false;
+        this.draggingThumb = 'start';
+        this.tickValuesCacheKey = '';
+        this.tickValuesCache = [];
+        this.initialValue = 0;
+        this.initialValueEnd = Number.NaN;
+        this.validationRunId = 0;
+        this.dragRect = null;
+        this.pointerBatch = createRafBatcher((rawValue) => this.applyUpdate(rawValue));
+        this.handlePointerDown = (event) => {
+            if (this.isDisabled())
+                return;
+            event.preventDefault();
+            this.dragRect = this.trackEl?.getBoundingClientRect() ?? null;
+            const rawValue = this.effectiveVertical
+                ? this.getValueFromY(event.clientY, this.dragRect)
+                : this.getValueFromX(event.clientX, this.dragRect);
+            if (this.range) {
+                if (isEventTargetInside(event, this.thumbEndEl)) {
+                    this.draggingThumb = 'end';
+                }
+                else if (isEventTargetInside(event, this.thumbStartEl)) {
+                    this.draggingThumb = 'start';
+                }
+                else {
+                    this.draggingThumb = this.nearerThumb(rawValue);
+                }
+            }
+            else {
+                this.draggingThumb = 'start';
+            }
+            this.dragging = true;
+            this.trackEl?.setPointerCapture(event.pointerId);
+            this.applyUpdate(rawValue);
+            const thumbEl = this.draggingThumb === 'end' ? this.thumbEndEl : this.thumbStartEl;
+            thumbEl?.focus();
+        };
+        this.handlePointerMove = (event) => {
+            if (!this.dragging || this.isDisabled())
+                return;
+            const rawValue = this.effectiveVertical
+                ? this.getValueFromY(event.clientY, this.dragRect)
+                : this.getValueFromX(event.clientX, this.dragRect);
+            this.pointerBatch.schedule(rawValue);
+        };
+        this.handlePointerUp = (event) => {
+            if (!this.dragging)
+                return;
+            this.pointerBatch.flush();
+            this.dragging = false;
+            this.dragRect = null;
+            this.trackEl?.releasePointerCapture(event.pointerId);
+            dispatchNativeFormEvent(this.el, 'change');
+            void this.validate();
+        };
+        this.handleInputInput = (event) => {
+            this.inputEditing = true;
+            const parsed = parseFloat(event.target.value);
+            if (!Number.isNaN(parsed)) {
+                const next = this.clamp(parsed);
+                if (next !== this.value) {
+                    this.value = next;
+                    this.brDidChangeValue.emit(this.value);
+                }
+            }
+            redispatchNativeFormEvent(this.el, event, 'input');
+        };
+        this.handleInputBlur = (event) => {
+            this.inputEditing = false;
+            const raw = event.target.value;
+            const parsed = parseFloat(raw);
+            const next = Number.isNaN(parsed) ? this.value : this.snapToStep(this.clamp(parsed));
+            if (next !== this.value) {
+                this.value = next;
+                this.brDidChangeValue.emit(this.value);
+            }
+            event.target.value = String(this.value);
+            dispatchNativeFormEvent(this.el, 'change');
+            void this.validate();
+        };
+    }
+    formDisabledCallback(disabled) {
+        this.formDisabled = disabled;
+    }
+    formResetCallback() {
+        this.customValidationMessage = '';
+        this.validatorMessage = null;
+        this.validationRunId++;
+        this.value = this.initialValue;
+        this.valueEnd = this.initialValueEnd;
+        this.updateValidity();
+    }
+    formStateRestoreCallback(state) {
+        const [start, end] = String(state ?? '')
+            .split(',')
+            .map(Number);
+        if (!Number.isNaN(start))
+            this.value = start;
+        if (this.range && !Number.isNaN(end))
+            this.valueEnd = end;
+    }
+    onValueChange(newValue) {
+        const numericMax = this.range && !Number.isNaN(this.valueEnd) ? this.valueEnd : this.max;
+        const clamped = this.clamp(newValue, numericMax);
+        if (clamped !== newValue) {
+            this.value = clamped;
+            return;
+        }
+        this.elementInternals?.setFormValue(this.getFormValue());
+        if (this.inputEl && !this.inputEditing) {
+            this.inputEl.value = String(clamped);
+        }
+        this.syncRangeValue();
+        this.updateValidity();
+    }
+    onValueEndChange(newValue) {
+        if (!this.range)
+            return;
+        const clamped = this.clamp(newValue, this.max, this.value);
+        if (clamped !== newValue) {
+            this.valueEnd = clamped;
+            return;
+        }
+        this.elementInternals?.setFormValue(this.getFormValue());
+        this.syncRangeValue();
+        this.updateValidity();
+    }
+    onRangeValueChange(newValue) {
+        if (!this.range || !newValue)
+            return;
+        if (newValue.start !== this.value)
+            this.value = newValue.start;
+        if (newValue.end !== this.valueEnd)
+            this.valueEnd = newValue.end;
+    }
+    componentWillLoad() {
+        this.value = this.clamp(this.value);
+        if (this.range) {
+            const endVal = Number.isNaN(this.valueEnd) ? this.max : this.valueEnd;
+            this.valueEnd = Math.max(this.value, this.clamp(endVal));
+        }
+        this.elementInternals?.setFormValue(this.getFormValue());
+        this.initialValue = this.value;
+        this.initialValueEnd = this.valueEnd;
+        this.updateValidity();
+    }
+    componentDidLoad() {
+        this.hasFeedbackSlot = this.el.querySelector('[slot="feedback"]') !== null;
+        const root = this.el.shadowRoot;
+        if (root) {
+            root.querySelectorAll('slot[name]').forEach((slot) => {
+                const update = () => {
+                    const filled = slot.assignedNodes({ flatten: true }).length > 0;
+                    if (slot.name === 'ref-start')
+                        this.hasRefStart = filled;
+                    else if (slot.name === 'ref-end')
+                        this.hasRefEnd = filled;
+                };
+                update();
+                slot.addEventListener('slotchange', update);
+            });
+        }
+        if (this.inputEl) {
+            this.inputEl.value = String(this.value);
+        }
+        requestAnimationFrame(() => this.setupLabelAutoUpdate());
+    }
+    componentDidUpdate() {
+        void this.positionLabels();
+    }
+    disconnectedCallback() {
+        this.pointerBatch.cancel();
+        this.dragRect = null;
+        this.cleanupLabelStart?.();
+        this.cleanupLabelEnd?.();
+    }
+    /** Retorna se o slider atende às constraints configuradas. */
+    async checkValidity() {
+        return this.elementInternals?.checkValidity?.() ?? true;
+    }
+    /** Valida e solicita ao navegador a apresentação do erro atual. */
+    async reportValidity() {
+        return this.elementInternals?.reportValidity?.() ?? true;
+    }
+    /** Define ou limpa uma mensagem de validade customizada. */
+    async setCustomValidity(message) {
+        this.customValidationMessage = message;
+        this.updateValidity();
+    }
+    /** Executa o validator do slider e retorna se o valor atual é válido. */
+    async validate() {
+        const validator = resolveFormValidator(this.validator);
+        if (!validator || this.isDisabled())
+            return this.checkValidity();
+        const runId = ++this.validationRunId;
+        this.isValidating = true;
+        this.validatorMessage = null;
+        this.updateValidity();
+        this.brSliderValidationChange.emit({ validating: true, valid: null, message: null });
+        const value = this.range ? { start: this.value, end: this.valueEnd } : this.value;
+        const message = await runFormValidator(validator, value);
+        if (runId !== this.validationRunId)
+            return false;
+        this.validatorMessage = message;
+        this.isValidating = false;
+        this.updateValidity();
+        const valid = message === null && (await this.checkValidity());
+        this.brSliderValidationChange.emit({ validating: false, valid, message });
+        return valid;
+    }
+    /** Retorna um snapshot serializável da Constraint Validation API. */
+    async getValidationState() {
+        return getFormValidationState(this.elementInternals);
+    }
+    get effectiveVertical() {
+        return this.orientation === undefined ? this.vertical : this.orientation === 'vertical';
+    }
+    setupLabelAutoUpdate() {
+        const showValueLabel = this.showLabel && !this.showInput;
+        if (!showValueLabel)
+            return;
+        this.cleanupLabelStart?.();
+        if (this.thumbStartEl && this.valueLabelStartEl) {
+            const t = this.thumbStartEl;
+            const l = this.valueLabelStartEl;
+            const a = this.arrowStartEl;
+            this.cleanupLabelStart = autoUpdate(t, l, () => void this.positionSingleLabel(t, l, a));
+        }
+        this.cleanupLabelEnd?.();
+        if (this.range && this.thumbEndEl && this.valueLabelEndEl) {
+            const t = this.thumbEndEl;
+            const l = this.valueLabelEndEl;
+            const a = this.arrowEndEl;
+            this.cleanupLabelEnd = autoUpdate(t, l, () => void this.positionSingleLabel(t, l, a));
+        }
+    }
+    async positionLabels() {
+        const showValueLabel = this.showLabel && !this.showInput;
+        if (!showValueLabel)
+            return;
+        if (this.thumbStartEl && this.valueLabelStartEl) {
+            await this.positionSingleLabel(this.thumbStartEl, this.valueLabelStartEl, this.arrowStartEl);
+        }
+        if (this.range && this.thumbEndEl && this.valueLabelEndEl) {
+            await this.positionSingleLabel(this.thumbEndEl, this.valueLabelEndEl, this.arrowEndEl);
+        }
+    }
+    async positionSingleLabel(thumb, label, arrowEl) {
+        const placement = this.effectiveVertical ? 'left' : 'top';
+        const thumbRect = thumb.getBoundingClientRect();
+        const gapOffset = (this.effectiveVertical ? thumbRect.width : thumbRect.height) / 2 + 4;
+        const { x, y, placement: finalPlacement, middlewareData, } = await computePosition(thumb, label, {
+            placement,
+            strategy: 'fixed',
+            middleware: [
+                offset(gapOffset),
+                flip(),
+                shift({ padding: 8 }),
+                hide(),
+                ...(arrowEl ? [arrow({ element: arrowEl })] : []),
+            ],
+        });
+        const referenceHidden = middlewareData.hide?.referenceHidden ?? false;
+        Object.assign(label.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+            visibility: referenceHidden ? 'hidden' : 'visible',
+        });
+        label.setAttribute('data-placement', finalPlacement);
+        if (arrowEl && middlewareData.arrow) {
+            const { x: ax, y: ay } = middlewareData.arrow;
+            const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[finalPlacement.split('-')[0]];
+            Object.assign(arrowEl.style, {
+                left: ax != null ? `${ax}px` : '',
+                top: ay != null ? `${ay}px` : '',
+                right: '',
+                bottom: '',
+                [staticSide]: '-4px',
+            });
+        }
+    }
+    getFormValue() {
+        return this.range ? `${this.value},${this.valueEnd}` : String(this.value);
+    }
+    syncRangeValue() {
+        if (!this.range || Number.isNaN(this.valueEnd))
+            return;
+        if (this.rangeValue?.start === this.value && this.rangeValue.end === this.valueEnd)
+            return;
+        this.rangeValue = { start: this.value, end: this.valueEnd };
+    }
+    clamp(value, max = this.max, min = this.min) {
+        return clampNumber(value, min, max, min);
+    }
+    snapToStep(value) {
+        const stepped = Math.round((value - this.min) / this.step) * this.step + this.min;
+        return this.clamp(Number(stepped.toFixed(10)));
+    }
+    percent() {
+        return this.percentOf(this.value);
+    }
+    percentOf(val) {
+        if (this.max === this.min)
+            return 0;
+        return ((val - this.min) / (this.max - this.min)) * 100;
+    }
+    getFilledStyle() {
+        if (!this.range) {
+            const pct = this.percent();
+            return this.effectiveVertical ? { height: `${pct}%` } : { width: `${pct}%` };
+        }
+        const pctStart = this.percent();
+        const pctEnd = this.percentOf(this.valueEnd);
+        if (this.effectiveVertical) {
+            return { bottom: `${pctStart}%`, height: `${pctEnd - pctStart}%` };
+        }
+        return { left: `${pctStart}%`, width: `${pctEnd - pctStart}%` };
+    }
+    getTrackMaskStyle() {
+        if (!this.showTicks || !this.getTickValues().length)
+            return undefined;
+        const dir = this.effectiveVertical ? 'to top' : 'to right';
+        const half = 1.5;
+        const stops = ['black 0%'];
+        for (const val of this.getTickValues()) {
+            const pct = this.percentOf(val);
+            stops.push(`black calc(${pct}% - ${half}px)`);
+            stops.push(`transparent calc(${pct}% - ${half}px)`);
+            stops.push(`transparent calc(${pct}% + ${half}px)`);
+            stops.push(`black calc(${pct}% + ${half}px)`);
+        }
+        stops.push('black 100%');
+        const gradient = `linear-gradient(${dir}, ${stops.join(', ')})`;
+        return { 'mask-image': gradient, '-webkit-mask-image': gradient };
+    }
+    getTickValues() {
+        const cacheKey = `${this.min}|${this.max}|${this.step}`;
+        if (cacheKey === this.tickValuesCacheKey)
+            return this.tickValuesCache;
+        this.tickValuesCacheKey = cacheKey;
+        if (this.max <= this.min || this.step <= 0 || !Number.isFinite(this.step)) {
+            this.tickValuesCache = [];
+            return this.tickValuesCache;
+        }
+        const count = Math.floor((this.max - this.min) / this.step);
+        const hasUnalignedMax = Number((this.max - this.min) / this.step) % 1 !== 0;
+        const valueCount = count + 1 + (hasUnalignedMax ? 1 : 0);
+        const getValueAt = (index) => index <= count ? Number((this.min + index * this.step).toFixed(10)) : this.max;
+        if (valueCount > Slider.MAX_VISUAL_TICKS) {
+            // ponytail: limita somente o DOM visual; os valores selecionáveis permanecem ilimitados.
+            const sampled = new Set([getValueAt(0), getValueAt(valueCount - 1)]);
+            for (let index = 1; index < Slider.MAX_VISUAL_TICKS - 1; index++) {
+                sampled.add(getValueAt(Math.round((index * (valueCount - 1)) / (Slider.MAX_VISUAL_TICKS - 1))));
+            }
+            this.tickValuesCache = [...sampled].sort((a, b) => a - b);
+        }
+        else {
+            this.tickValuesCache = Array.from({ length: valueCount }, (_, index) => getValueAt(index));
+        }
+        return this.tickValuesCache;
+    }
+    getValueFromX(clientX, rect = this.trackEl?.getBoundingClientRect()) {
+        if (!this.trackEl)
+            return this.min;
+        if (!rect)
+            return this.min;
+        if (rect.width === 0)
+            return this.min;
+        const ratio = clampNumber((clientX - rect.left) / rect.width, 0, 1, 0);
+        return this.min + ratio * (this.max - this.min);
+    }
+    getValueFromY(clientY, rect = this.trackEl?.getBoundingClientRect()) {
+        if (!this.trackEl)
+            return this.min;
+        if (!rect)
+            return this.min;
+        if (rect.height === 0)
+            return this.min;
+        const ratio = clampNumber((rect.bottom - clientY) / rect.height, 0, 1, 0);
+        return this.min + ratio * (this.max - this.min);
+    }
+    nearerThumb(rawValue) {
+        const distToStart = Math.abs(rawValue - this.value);
+        const distToEnd = Math.abs(rawValue - this.valueEnd);
+        return distToStart <= distToEnd ? 'start' : 'end';
+    }
+    applyUpdate(rawValue) {
+        if (this.draggingThumb === 'end') {
+            const next = Math.max(this.value, this.snapToStep(rawValue));
+            if (next !== this.valueEnd) {
+                this.valueEnd = next;
+                this.brDidChangeValueEnd.emit(this.valueEnd);
+                dispatchNativeFormEvent(this.el, 'input');
+            }
+        }
+        else {
+            const raw = this.snapToStep(rawValue);
+            const next = this.range ? Math.min(this.valueEnd, raw) : raw;
+            if (next !== this.value) {
+                this.value = next;
+                this.brDidChangeValue.emit(this.value);
+                dispatchNativeFormEvent(this.el, 'input');
+            }
+        }
+    }
+    calculateNextSliderValue(key, current, min, max) {
+        switch (key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                return Math.min(max, current + this.step);
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                return Math.max(min, current - this.step);
+            case 'Home':
+                return min;
+            case 'End':
+                return max;
+            case 'PageUp':
+                return Math.min(max, current + this.step * 10);
+            case 'PageDown':
+                return Math.max(min, current - this.step * 10);
+            default:
+                return null;
+        }
+    }
+    handleKeyDown(event) {
+        if (this.isDisabled())
+            return;
+        const target = event.composedPath?.()[0] || getEventTarget(event);
+        if (target === this.inputEl)
+            return;
+        const isEnd = this.range && target === this.thumbEndEl;
+        const currentValue = isEnd ? this.valueEnd : this.value;
+        const keyMin = isEnd ? this.value : this.min;
+        const keyMax = isEnd ? this.max : this.range ? this.valueEnd : this.max;
+        const next = this.calculateNextSliderValue(event.key, currentValue, keyMin, keyMax);
+        if (next === null)
+            return;
+        event.preventDefault();
+        if (isEnd) {
+            if (next !== this.valueEnd) {
+                this.valueEnd = next;
+                this.brDidChangeValueEnd.emit(this.valueEnd);
+                dispatchNativeFormEvent(this.el, 'input');
+                dispatchNativeFormEvent(this.el, 'change');
+                void this.validate();
+            }
+        }
+        else if (next !== this.value) {
+            this.value = next;
+            this.brDidChangeValue.emit(this.value);
+            dispatchNativeFormEvent(this.el, 'input');
+            dispatchNativeFormEvent(this.el, 'change');
+            void this.validate();
+        }
+    }
+    getCssClassMap() {
+        return {
+            'br-slider': true,
+            dragging: this.dragging,
+            disabled: this.isDisabled(),
+        };
+    }
+    shouldShowValueLabel() {
+        return this.showLabel && !this.showInput;
+    }
+    isDisabled() {
+        return isFormControlDisabled(this.disabled, this.formDisabled);
+    }
+    updateValidity() {
+        const stepMismatch = this.step > 0 &&
+            Math.abs((this.value - this.min) / this.step - Math.round((this.value - this.min) / this.step)) > 1e-9;
+        const invalidRange = this.range && this.value > this.valueEnd;
+        const flags = {
+            customError: this.customValidationMessage !== '' || Boolean(this.validatorMessage) || invalidRange,
+            rangeOverflow: this.value > this.max || (this.range && this.valueEnd > this.max),
+            rangeUnderflow: this.value < this.min || (this.range && this.valueEnd < this.min),
+            stepMismatch,
+        };
+        const message = this.customValidationMessage ||
+            this.validatorMessage ||
+            (invalidRange ? 'O início do intervalo deve anteceder o fim.' : '');
+        setFormValidity(this.elementInternals, flags, message, this.thumbStartEl);
+    }
+    getThumbStyle(value) {
+        const percent = this.percentOf(value);
+        return this.effectiveVertical ? { bottom: `${percent}%` } : { left: `${percent}%` };
+    }
+    setValueLabelElement(thumb, el) {
+        if (thumb === 'end') {
+            this.valueLabelEndEl = el;
+            return;
+        }
+        this.valueLabelStartEl = el;
+    }
+    setValueLabelArrowElement(thumb, el) {
+        if (thumb === 'end') {
+            this.arrowEndEl = el;
+            return;
+        }
+        this.arrowStartEl = el;
+    }
+    setThumbElement(thumb, el) {
+        if (thumb === 'end') {
+            this.thumbEndEl = el;
+            return;
+        }
+        this.thumbStartEl = el;
+    }
+    renderValueLabel(thumb) {
+        const isEnd = thumb === 'end';
+        return (h("div", { class: "slider-value-label", part: "value-label", ref: (el) => this.setValueLabelElement(thumb, el), "aria-hidden": "true" }, isEnd ? this.valueEnd : this.value, h("span", { class: "slider-value-label-arrow", part: "value-label-arrow", ref: (el) => this.setValueLabelArrowElement(thumb, el) })));
+    }
+    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: mantém as variantes visuais do thumb em um único ponto.
+    renderThumb(thumb, style) {
+        const isEnd = thumb === 'end';
+        return (h("div", { class: {
+                'slider-thumb': true,
+                'slider-thumb--start': !isEnd,
+                'slider-thumb--end': isEnd,
+                'slider-thumb--active': this.dragging && this.draggingThumb === thumb,
+            }, part: `thumb thumb-${thumb}`, ref: (el) => this.setThumbElement(thumb, el), id: isEnd ? `${this.customId}-end` : this.customId, role: "slider", tabIndex: this.isDisabled() ? -1 : 0, "aria-valuemin": isEnd ? String(this.value) : String(this.min), "aria-valuemax": isEnd ? String(this.max) : this.range ? String(this.valueEnd) : String(this.max), "aria-valuenow": isEnd ? String(this.valueEnd) : String(this.value), "aria-disabled": this.isDisabled() ? 'true' : 'false', "aria-label": isEnd ? `${this.label ?? ''} fim`.trim() : this.range ? `${this.label ?? ''} início`.trim() : this.label, "aria-orientation": this.effectiveVertical ? 'vertical' : 'horizontal', "aria-busy": this.isValidating ? 'true' : null, "aria-describedby": this.hasFeedbackSlot || this.customValidationMessage || this.validatorMessage
+                ? `${this.customId}-feedback`
+                : null, "aria-errormessage": this.customValidationMessage || this.validatorMessage || this.hasFeedbackSlot
+                ? `${this.customId}-feedback`
+                : null, style: style }));
+    }
+    renderReferences() {
+        const hasRefs = this.hasRefStart || this.hasRefEnd || this.showBounds;
+        return (h("div", { class: { 'slider-refs': true, 'slider-refs--hidden': !hasRefs }, part: "references" }, h("span", { class: "ref-start", part: "reference-start" }, h("slot", { name: "ref-start" }), this.showBounds && (h("span", { class: "ref-bound", part: "reference-bound" }, this.min))), h("span", { class: "ref-end", part: "reference-end" }, this.showBounds && (h("span", { class: "ref-bound", part: "reference-bound" }, this.max)), h("slot", { name: "ref-end" }))));
+    }
+    renderInput() {
+        if (!this.showInput)
+            return undefined;
+        return (h("div", { class: "slider-input-wrapper", part: "input-wrapper" }, h("input", { type: "number", class: "slider-input", part: "input", ref: (el) => (this.inputEl = el), min: this.min, max: this.max, step: this.step, disabled: this.isDisabled(), "aria-label": this.label, "aria-describedby": this.hasFeedbackSlot || this.customValidationMessage || this.validatorMessage
+                ? `${this.customId}-feedback`
+                : null, "aria-errormessage": this.customValidationMessage || this.validatorMessage || this.hasFeedbackSlot
+                ? `${this.customId}-feedback`
+                : null, onInput: this.handleInputInput, onBlur: this.handleInputBlur })));
+    }
+    renderTrack() {
+        const trackMask = this.getTrackMaskStyle();
+        return (h("div", { class: "slider-track", part: "track", ref: (el) => (this.trackEl = el), onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp }, h("div", { class: "slider-track-visual", part: "track-visual", style: trackMask }, h("div", { class: "slider-filled-track", part: "filled-track", style: this.getFilledStyle() })), this.showTicks && this.showTickLabels && this.renderTickLabels(), this.shouldShowValueLabel() && this.renderValueLabel('start'), this.shouldShowValueLabel() && this.range && this.renderValueLabel('end'), this.renderThumb('start', this.getThumbStyle(this.value)), this.range && this.renderThumb('end', this.getThumbStyle(this.valueEnd))));
+    }
+    renderTickLabels() {
+        const tickValues = this.getTickValues();
+        const intermediateTicks = tickValues.slice(1, -1);
+        return (h("div", { class: "slider-tick-labels", part: "tick-labels", "aria-hidden": "true" }, intermediateTicks.map((value) => (h("span", { class: "slider-tick-label", part: "tick-label", style: this.effectiveVertical ? { bottom: `${this.percentOf(value)}%` } : { left: `${this.percentOf(value)}%` } }, value)))));
+    }
+    render() {
+        return (h(Host, { key: '26be711ad91a867e82e35d10e86508aa5af68557' }, h("div", { key: '906052510af8d3a323ea8274b339ba264b745e25', class: this.getCssClassMap(), part: "base" }, h("div", { key: '323ee79d4a4fc4d81e4a1b43c8fa6298d0f92916', class: "slider-layout", part: "layout" }, h("div", { key: '113e5114161144af0466997b47108eb0e053af8e', class: "slider-body", part: "body" }, this.renderTrack(), this.renderReferences()), this.renderInput())), h("div", { key: 'b8ce4c3cae026492ad1db1e03f5709988b42a13e', id: `${this.customId}-feedback`, part: "feedback", hidden: !this.hasFeedbackSlot && !this.customValidationMessage && !this.validatorMessage }, h("slot", { key: 'e2564e6830476cb3d495807f4b15d600f5c7146e', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }), !this.hasFeedbackSlot && (this.customValidationMessage || this.validatorMessage) ? (h("br-message", { state: "danger", message: this.customValidationMessage || this.validatorMessage })) : null)));
+    }
+    static get formAssociated() { return true; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }],
+        "valueEnd": [{
+                "onValueEndChange": 0
+            }],
+        "rangeValue": [{
+                "onRangeValueChange": 0
+            }]
+    }; }
+};
+Slider.MAX_VISUAL_TICKS = 200;
+Slider.style = sliderCss();
+
+export { Slider as br_slider };