@universal-material/web 3.7.2 → 3.9.0

package/slider/slider.d.ts

@@ -0,0 +1,73 @@
+import { PropertyValues } from '@lit/reactive-element';
+import { HTMLTemplateResult, LitElement } from 'lit';
+type LabelFormat = (value: number) => string;
+export type SliderSize = 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
+/**
+ * Material 3 expressive slider. Single-thumb by default; becomes a range slider
+ * when both `value-start` and `value-end` are set (or `range` is forced).
+ *
+ * @fires input - Dispatched continuously while dragging.
+ * @fires change - Dispatched when the user commits a value change.
+ * @csspart track - The track container.
+ * @csspart track-inactive-start - The inactive segment before the start handle (range mode only).
+ * @csspart track-active - The highlighted segment between (or up to) the thumbs.
+ * @csspart track-inactive-end - The inactive segment after the end handle.
+ * @csspart thumb - The thumb indicator (or the start thumb in range mode).
+ * @csspart thumb-end - The end thumb in range mode.
+ * @csspart value-indicator - The floating value indicator shown in `discrete` mode while dragging.
+ * @csspart stop-indicator - The dot at each end of the slider.
+ */
+export declare class Slider extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static readonly formAssociated = true;
+    protected readonly elementInternals: ElementInternals;
+    constructor();
+    /** Minimum value. */
+    min: number;
+    /** Maximum value. */
+    max: number;
+    /** Step increment. Use `0` for fully continuous values. */
+    step: number;
+    /** Current value (single-thumb mode). */
+    value: number | undefined;
+    /** Start value (range mode). */
+    valueStart: number | undefined;
+    /** End value (range mode). */
+    valueEnd: number | undefined;
+    /**
+     * Forces range mode. Auto-enabled when both `value-start` and `value-end`
+     * are provided.
+     */
+    range: boolean;
+    /** Shows tick marks and a floating value indicator while dragging. */
+    discrete: boolean;
+    /** Shows tick marks without enabling the floating value indicator. */
+    ticks: boolean;
+    /** Disables the slider. */
+    disabled: boolean;
+    /** Form-association name. */
+    name: string;
+    /** Visual size variant. */
+    size: SliderSize;
+    /** Custom formatter for the floating value indicator. */
+    labelFormat: LabelFormat;
+    private _dragging;
+    private _activeThumb;
+    private _hoveredThumb;
+    private readonly _input;
+    private readonly _inputEnd;
+    private readonly _container;
+    get form(): HTMLFormElement | null;
+    protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(): void;
+    protected updated(changed: PropertyValues): void;
+    render(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-slider': Slider;
+    }
+}
+export {};
+//# sourceMappingURL=slider.d.ts.map

package/slider/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/slider/slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AASpE,KAAK,WAAW,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;AAG7C,MAAM,MAAM,UAAU,GAAG,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,CAAC;AAWtF;;;;;;;;;;;;;;GAcG;AACH,qBACa,MAAO,SAAQ,UAAU;;IACpC,OAAgB,MAAM,4BAAwB;IAE9C,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;;IAOtD,qBAAqB;IACO,GAAG,SAAK;IAEpC,qBAAqB;IACO,GAAG,SAAO;IAEtC,2DAA2D;IAC/B,IAAI,SAAK;IAErC,yCAAyC;IACb,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAEtD,gCAAgC;IACsB,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAErF,8BAA8B;IACsB,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAEjF;;;OAGG;IACyC,KAAK,UAAS;IAE1D,sEAAsE;IAC1B,QAAQ,UAAS;IAE7D,sEAAsE;IAC1B,KAAK,UAAS;IAE1D,2BAA2B;IACiB,QAAQ,UAAS;IAE7D,6BAA6B;IACA,IAAI,SAAM;IAEvC,2BAA2B;IACE,IAAI,EAAE,UAAU,CAAiB;IAE9D,yDAAyD;IACzB,WAAW,EAAE,WAAW,CAAoB;IAEnE,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,YAAY,CAAsB;IAC1C,OAAO,CAAC,aAAa,CAAsB;IAEnC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAoB;IACvC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAA2B;IACrD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAe;IAE/D,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;cAEkB,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;cAkBzC,YAAY,IAAI,IAAI;cAIpB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAMhD,MAAM,IAAI,kBAAkB;CA+VtC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,MAAM,CAAC;KACpB;CACF"}

package/slider/slider.js

@@ -0,0 +1,506 @@
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { live } from 'lit/directives/live.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { styles as baseStyles } from '../shared/base.styles.js';
+import { styles } from './slider.styles.js';
+// Px distance from handle center to track-segment edge: handle-width/2 + 6dp handle-gap.
+const SIZE_GAP_PX = {
+    'extra-small': 8, // 4/2 + 6
+    small: 8,
+    medium: 9, // 6/2 + 6
+    large: 9,
+    'extra-large': 10, // 8/2 + 6
+};
+/**
+ * Material 3 expressive slider. Single-thumb by default; becomes a range slider
+ * when both `value-start` and `value-end` are set (or `range` is forced).
+ *
+ * @fires input - Dispatched continuously while dragging.
+ * @fires change - Dispatched when the user commits a value change.
+ * @csspart track - The track container.
+ * @csspart track-inactive-start - The inactive segment before the start handle (range mode only).
+ * @csspart track-active - The highlighted segment between (or up to) the thumbs.
+ * @csspart track-inactive-end - The inactive segment after the end handle.
+ * @csspart thumb - The thumb indicator (or the start thumb in range mode).
+ * @csspart thumb-end - The end thumb in range mode.
+ * @csspart value-indicator - The floating value indicator shown in `discrete` mode while dragging.
+ * @csspart stop-indicator - The dot at each end of the slider.
+ */
+let Slider = class Slider extends LitElement {
+    static { this.styles = [baseStyles, styles]; }
+    static { this.formAssociated = true; }
+    constructor() {
+        super();
+        /** Minimum value. */
+        this.min = 0;
+        /** Maximum value. */
+        this.max = 100;
+        /** Step increment. Use `0` for fully continuous values. */
+        this.step = 1;
+        /**
+         * Forces range mode. Auto-enabled when both `value-start` and `value-end`
+         * are provided.
+         */
+        this.range = false;
+        /** Shows tick marks and a floating value indicator while dragging. */
+        this.discrete = false;
+        /** Shows tick marks without enabling the floating value indicator. */
+        this.ticks = false;
+        /** Disables the slider. */
+        this.disabled = false;
+        /** Form-association name. */
+        this.name = '';
+        /** Visual size variant. */
+        this.size = 'extra-small';
+        /** Custom formatter for the floating value indicator. */
+        this.labelFormat = (v) => String(v);
+        this._dragging = false;
+        this._activeThumb = null;
+        this._hoveredThumb = null;
+        this.#handleContainerPointerDown = (e) => {
+            if (this.disabled)
+                return;
+            // Ignore non-primary buttons.
+            if (e.button !== undefined && e.button !== 0)
+                return;
+            e.preventDefault();
+            const value = this.#pointerToValue(e.clientX);
+            const thumb = this.#closestThumb(value);
+            this.#beginDrag(thumb);
+            this.#setThumbValue(thumb, value);
+            // Intentionally do NOT focus the input on pointer interaction — that would inherit
+            // an active :focus-visible state from prior keyboard navigation and incorrectly show
+            // the focus ring on click. The user must Tab to the slider for keyboard control.
+            try {
+                this._container.setPointerCapture(e.pointerId);
+            }
+            catch { /* */ }
+            this._container.addEventListener('pointermove', this.#handleDragMove);
+            this._container.addEventListener('pointerup', this.#handleDragEnd, { once: true });
+            this._container.addEventListener('pointercancel', this.#handleDragEnd, { once: true });
+        };
+        this.#handleDragMove = (e) => {
+            if (!this._dragging || !this._activeThumb)
+                return;
+            const value = this.#pointerToValue(e.clientX);
+            this.#setThumbValue(this._activeThumb, value);
+        };
+        this.#handleDragEnd = () => {
+            this._container.removeEventListener('pointermove', this.#handleDragMove);
+            this.#endDrag();
+            this.#handleChange();
+        };
+        // Hover tracking — light up the state layer of the thumb nearest the pointer.
+        this.#handleHoverMove = (e) => {
+            if (this.disabled || this._dragging)
+                return;
+            const value = this.#pointerToValue(e.clientX);
+            this._hoveredThumb = this.#closestThumb(value);
+        };
+        this.#handleHoverLeave = () => {
+            if (!this._dragging)
+                this._hoveredThumb = null;
+        };
+        this.#endDrag = () => {
+            this._dragging = false;
+            this._activeThumb = null;
+        };
+        // Keyboard input on the native range inputs still updates the bound value.
+        this.#handleSingleInput = () => {
+            this.value = this._input.valueAsNumber;
+            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        };
+        this.#handleStartInput = () => {
+            this.valueStart = Math.min(this._input.valueAsNumber, this.valueEnd);
+            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        };
+        this.#handleEndInput = () => {
+            this.valueEnd = Math.max(this._inputEnd.valueAsNumber, this.valueStart);
+            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        };
+        this.#handleChange = () => {
+            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+        };
+        this.elementInternals = this.attachInternals();
+    }
+    get form() {
+        return this.elementInternals.form;
+    }
+    willUpdate(changed) {
+        if (changed.has('valueStart') || changed.has('valueEnd')) {
+            if (this.valueStart !== undefined && this.valueEnd !== undefined) {
+                this.range = true;
+            }
+        }
+        if (this.range) {
+            if (this.valueStart === undefined)
+                this.valueStart = this.min;
+            if (this.valueEnd === undefined)
+                this.valueEnd = this.max;
+            if (this.valueStart > this.valueEnd) {
+                [this.valueStart, this.valueEnd] = [this.valueEnd, this.valueStart];
+            }
+        }
+        else if (this.value === undefined) {
+            this.value = (this.max - this.min) / 2 + this.min;
+        }
+    }
+    firstUpdated() {
+        this.#updateFormValue();
+    }
+    updated(changed) {
+        if (changed.has('value') || changed.has('valueStart') || changed.has('valueEnd') || changed.has('name')) {
+            this.#updateFormValue();
+        }
+    }
+    render() {
+        const range = (this.max - this.min) || 1;
+        const startPct = this.range ? this.#pct(this.valueStart) : 0;
+        const endPct = this.range ? this.#pct(this.valueEnd) : this.#pct(this.value);
+        const tickCount = (this.discrete || this.ticks) && this.step > 0 ? Math.floor(range / this.step) + 1 : 0;
+        const gap = SIZE_GAP_PX[this.size];
+        const collapseStart = !this.range || startPct <= 0;
+        const collapseEnd = endPct >= 100;
+        // Handle position formula: walks the same coordinate system as the track segments
+        // and ticks, so a handle at value v sits exactly on the tick at v. The travel range is
+        // (container width − handle width) and the handle's center starts at handle-width/2.
+        const handlePos = (pct) => `calc(${pct / 100} * (100% - var(--_handle-width)) + var(--_handle-width) / 2)`;
+        const activeStart = !this.range
+            ? '0'
+            : (collapseStart ? '0' : `calc(${startPct}% + ${gap}px)`);
+        const activeEnd = collapseEnd ? '0' : `calc(${100 - endPct}% + ${gap}px)`;
+        const activeRadius = this.#activeRadius(collapseStart, collapseEnd);
+        const fullR = 'calc(var(--_track-height) / 2)';
+        const innerR = 'var(--_inner-corner)';
+        const inactiveStartRadius = `${fullR} ${collapseStart ? fullR : innerR} ${collapseStart ? fullR : innerR} ${fullR}`;
+        const inactiveEndRadius = `${collapseEnd ? fullR : innerR} ${fullR} ${fullR} ${collapseEnd ? fullR : innerR}`;
+        return html `
+      <div
+        class="container ${classMap({ dragging: this._dragging, range: this.range, discrete: this.discrete })}"
+        @pointerdown=${this.#handleContainerPointerDown}
+        @pointermove=${this.#handleHoverMove}
+        @pointerleave=${this.#handleHoverLeave}
+      >
+        <div class="track" part="track">
+          ${this.range && !collapseStart
+            ? html `<div
+                class="segment inactive inactive-start"
+                part="track-inactive-start"
+                style=${styleMap({
+                insetInlineStart: '0',
+                insetInlineEnd: `calc(${100 - startPct}% + ${gap}px)`,
+                borderRadius: inactiveStartRadius,
+            })}
+              ></div>`
+            : nothing}
+          <div
+            class="segment active"
+            part="track-active"
+            style=${styleMap({
+            insetInlineStart: activeStart,
+            insetInlineEnd: activeEnd,
+            borderRadius: activeRadius,
+        })}
+          ></div>
+          ${!collapseEnd
+            ? html `<div
+                class="segment inactive inactive-end"
+                part="track-inactive-end"
+                style=${styleMap({
+                insetInlineStart: `calc(${endPct}% + ${gap}px)`,
+                insetInlineEnd: '0',
+                borderRadius: inactiveEndRadius,
+            })}
+              ></div>`
+            : nothing}
+          ${tickCount > 0 ? this.#renderTicks(tickCount, startPct, endPct, gap) : nothing}
+          ${tickCount === 0
+            ? html `<span
+                  class="stop-indicator leading"
+                  part="stop-indicator"
+                  style=${styleMap({
+                backgroundColor: this.range && !collapseStart
+                    ? 'var(--_stop-indicator-inactive-color)'
+                    : 'var(--_stop-indicator-active-color)',
+            })}
+                ></span>
+                <span
+                  class="stop-indicator trailing"
+                  part="stop-indicator"
+                  style=${styleMap({
+                backgroundColor: collapseEnd
+                    ? 'var(--_stop-indicator-active-color)'
+                    : 'var(--_stop-indicator-inactive-color)',
+            })}
+                ></span>`
+            : nothing}
+        </div>
+
+        ${this.range
+            ? html `
+            <input
+              id="input"
+              class="native"
+              type="range"
+              aria-label="Start value"
+              .min=${String(this.min)}
+              .max=${String(this.valueEnd)}
+              step=${this.step || 'any'}
+              .value=${live(String(this.valueStart))}
+              ?disabled=${this.disabled}
+              @input=${this.#handleStartInput}
+              @change=${this.#handleChange}
+            />
+            <input
+              id="input-end"
+              class="native"
+              type="range"
+              aria-label="End value"
+              .min=${String(this.valueStart)}
+              .max=${String(this.max)}
+              step=${this.step || 'any'}
+              .value=${live(String(this.valueEnd))}
+              ?disabled=${this.disabled}
+              @input=${this.#handleEndInput}
+              @change=${this.#handleChange}
+            />
+            <div
+              class=${classMap({
+                thumb: true,
+                'thumb-start': true,
+                'active-thumb': this._activeThumb === 'start',
+                hovered: this._hoveredThumb === 'start',
+            })}
+              part="thumb"
+              style=${styleMap({ insetInlineStart: handlePos(startPct) })}
+            >
+              <span class="focus-ring"></span>
+              ${this.#renderValueIndicator('start', this.valueStart)}
+            </div>
+            <div
+              class=${classMap({
+                thumb: true,
+                'thumb-end': true,
+                'active-thumb': this._activeThumb === 'end',
+                hovered: this._hoveredThumb === 'end',
+            })}
+              part="thumb-end"
+              style=${styleMap({ insetInlineStart: handlePos(endPct) })}
+            >
+              <span class="focus-ring"></span>
+              ${this.#renderValueIndicator('end', this.valueEnd)}
+            </div>
+          `
+            : html `
+            <input
+              id="input"
+              class="native"
+              type="range"
+              aria-label=${this.getAttribute('aria-label') ?? 'Slider'}
+              .min=${String(this.min)}
+              .max=${String(this.max)}
+              step=${this.step || 'any'}
+              .value=${live(String(this.value))}
+              ?disabled=${this.disabled}
+              @input=${this.#handleSingleInput}
+              @change=${this.#handleChange}
+            />
+            <div
+              class=${classMap({
+                thumb: true,
+                'active-thumb': this._activeThumb === 'end',
+                hovered: this._hoveredThumb === 'end',
+            })}
+              part="thumb"
+              style=${styleMap({ insetInlineStart: handlePos(endPct) })}
+            >
+              <span class="focus-ring"></span>
+              ${this.#renderValueIndicator('end', this.value)}
+            </div>
+          `}
+      </div>
+    `;
+    }
+    #activeRadius(collapseStart, collapseEnd) {
+        const fullR = 'calc(var(--_track-height) / 2)';
+        const innerR = 'var(--_inner-corner)';
+        if (this.range) {
+            const sR = collapseStart ? fullR : innerR;
+            const eR = collapseEnd ? fullR : innerR;
+            return `${sR} ${eR} ${eR} ${sR}`;
+        }
+        const eR = collapseEnd ? fullR : innerR;
+        return `${fullR} ${eR} ${eR} ${fullR}`;
+    }
+    #renderTicks(count, startPct, endPct, gapPx) {
+        const ticks = [];
+        const trackWidth = this.offsetWidth || 200;
+        const gapPct = (gapPx / trackWidth) * 100;
+        for (let i = 0; i < count; i++) {
+            const pct = (i / (count - 1)) * 100;
+            const inActive = pct >= startPct && pct <= endPct;
+            const inGap = Math.abs(pct - endPct) < gapPct || (this.range && Math.abs(pct - startPct) < gapPct);
+            ticks.push(html `<span
+        class=${classMap({ tick: true, active: inActive, 'in-gap': inGap })}
+        style=${styleMap({ insetInlineStart: `${pct}%` })}
+      ></span>`);
+        }
+        return html `<div class="ticks">${ticks}</div>`;
+    }
+    #renderValueIndicator(thumb, value) {
+        if (!this.discrete)
+            return nothing;
+        if (!this._dragging || this._activeThumb !== thumb)
+            return nothing;
+        return html `<div class="value-indicator" part="value-indicator">${this.labelFormat(value)}</div>`;
+    }
+    #pct(value) {
+        const range = (this.max - this.min) || 1;
+        return ((value - this.min) / range) * 100;
+    }
+    // Determine slider value from pointer x (clamped to [min, max]).
+    #pointerToValue(clientX) {
+        const rect = this._container.getBoundingClientRect();
+        const padPx = this.#paddingPx();
+        const usableWidth = rect.width - padPx * 2;
+        const local = Math.max(0, Math.min(usableWidth, clientX - rect.left - padPx));
+        const ratio = usableWidth > 0 ? local / usableWidth : 0;
+        const raw = this.min + ratio * (this.max - this.min);
+        return this.#snap(raw);
+    }
+    #snap(value) {
+        if (!this.step || this.step <= 0)
+            return value;
+        const steps = Math.round((value - this.min) / this.step);
+        return Math.max(this.min, Math.min(this.max, this.min + steps * this.step));
+    }
+    #paddingPx() {
+        // Matches container's padding-inline = handle-width/2 (4-8px depending on size).
+        const cs = getComputedStyle(this);
+        const handleW = parseFloat(cs.getPropertyValue('--_handle-width')) || 4;
+        return handleW / 2;
+    }
+    #closestThumb(value) {
+        if (!this.range)
+            return 'end';
+        const startDist = Math.abs(value - (this.valueStart ?? this.min));
+        const endDist = Math.abs(value - (this.valueEnd ?? this.max));
+        // Bias to 'end' when distances tie and pointer is to the right of midpoint,
+        // so clicking past either thumb still moves the natural one.
+        if (startDist === endDist) {
+            const mid = ((this.valueStart ?? this.min) + (this.valueEnd ?? this.max)) / 2;
+            return value < mid ? 'start' : 'end';
+        }
+        return startDist <= endDist ? 'start' : 'end';
+    }
+    #handleContainerPointerDown;
+    #handleDragMove;
+    #handleDragEnd;
+    // Hover tracking — light up the state layer of the thumb nearest the pointer.
+    #handleHoverMove;
+    #handleHoverLeave;
+    #setThumbValue(thumb, value) {
+        if (this.range) {
+            if (thumb === 'start') {
+                this.valueStart = Math.min(value, this.valueEnd);
+            }
+            else {
+                this.valueEnd = Math.max(value, this.valueStart);
+            }
+        }
+        else {
+            this.value = value;
+        }
+        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+    }
+    #beginDrag(thumb) {
+        this._activeThumb = thumb;
+        this._dragging = true;
+        this._hoveredThumb = thumb;
+    }
+    #endDrag;
+    // Keyboard input on the native range inputs still updates the bound value.
+    #handleSingleInput;
+    #handleStartInput;
+    #handleEndInput;
+    #handleChange;
+    #updateFormValue() {
+        if (!this.name) {
+            this.elementInternals.setFormValue(null);
+            return;
+        }
+        if (this.range) {
+            const data = new FormData();
+            data.append(`${this.name}-start`, String(this.valueStart ?? this.min));
+            data.append(`${this.name}-end`, String(this.valueEnd ?? this.max));
+            this.elementInternals.setFormValue(data);
+            return;
+        }
+        this.elementInternals.setFormValue(String(this.value ?? ''));
+    }
+};
+__decorate([
+    property({ type: Number })
+], Slider.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], Slider.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], Slider.prototype, "step", void 0);
+__decorate([
+    property({ type: Number })
+], Slider.prototype, "value", void 0);
+__decorate([
+    property({ type: Number, attribute: 'value-start' })
+], Slider.prototype, "valueStart", void 0);
+__decorate([
+    property({ type: Number, attribute: 'value-end' })
+], Slider.prototype, "valueEnd", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Slider.prototype, "range", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Slider.prototype, "discrete", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Slider.prototype, "ticks", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Slider.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true })
+], Slider.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true })
+], Slider.prototype, "size", void 0);
+__decorate([
+    property({ attribute: false })
+], Slider.prototype, "labelFormat", void 0);
+__decorate([
+    state()
+], Slider.prototype, "_dragging", void 0);
+__decorate([
+    state()
+], Slider.prototype, "_activeThumb", void 0);
+__decorate([
+    state()
+], Slider.prototype, "_hoveredThumb", void 0);
+__decorate([
+    query('#input')
+], Slider.prototype, "_input", void 0);
+__decorate([
+    query('#input-end')
+], Slider.prototype, "_inputEnd", void 0);
+__decorate([
+    query('.container')
+], Slider.prototype, "_container", void 0);
+Slider = __decorate([
+    customElement('u-slider')
+], Slider);
+export { Slider };
+//# sourceMappingURL=slider.js.map

package/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../src/slider/slider.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAO5C,yFAAyF;AACzF,MAAM,WAAW,GAA+B;IAC9C,aAAa,EAAE,CAAC,EAAG,UAAU;IAC7B,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC,EAAU,UAAU;IAC7B,KAAK,EAAE,CAAC;IACR,aAAa,EAAE,EAAE,EAAE,UAAU;CAC9B,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;aACpB,WAAM,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,AAAvB,CAAwB;aAE9B,mBAAc,GAAG,IAAI,AAAP,CAAQ;IAItC;QACE,KAAK,EAAE,CAAC;QAIV,qBAAqB;QACO,QAAG,GAAG,CAAC,CAAC;QAEpC,qBAAqB;QACO,QAAG,GAAG,GAAG,CAAC;QAEtC,2DAA2D;QAC/B,SAAI,GAAG,CAAC,CAAC;QAWrC;;;WAGG;QACyC,UAAK,GAAG,KAAK,CAAC;QAE1D,sEAAsE;QAC1B,aAAQ,GAAG,KAAK,CAAC;QAE7D,sEAAsE;QAC1B,UAAK,GAAG,KAAK,CAAC;QAE1D,2BAA2B;QACiB,aAAQ,GAAG,KAAK,CAAC;QAE7D,6BAA6B;QACA,SAAI,GAAG,EAAE,CAAC;QAEvC,2BAA2B;QACE,SAAI,GAAe,aAAa,CAAC;QAE9D,yDAAyD;QACzB,gBAAW,GAAgB,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAE3D,cAAS,GAAG,KAAK,CAAC;QAClB,iBAAY,GAAiB,IAAI,CAAC;QAClC,kBAAa,GAAiB,IAAI,CAAC;QAkSpD,gCAA2B,GAAG,CAAC,CAAe,EAAE,EAAE;YAChD,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,8BAA8B;YAC9B,IAAI,CAAC,CAAC,MAAM,KAAK,SAAS,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC;gBAAE,OAAO;YACrD,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;YAC9C,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACxC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;YACvB,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;YAClC,mFAAmF;YACnF,qFAAqF;YACrF,iFAAiF;YACjF,IAAI,CAAC;gBAAC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;YAAC,CAAC;YAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC;YACvE,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YACtE,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;YACnF,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;QACzF,CAAC,CAAC;QAEF,oBAAe,GAAG,CAAC,CAAe,EAAE,EAAE;YACpC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,YAAY;gBAAE,OAAO;YAClD,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;YAC9C,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;QAChD,CAAC,CAAC;QAEF,mBAAc,GAAG,GAAG,EAAE;YACpB,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YACzE,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC,CAAC;QAEF,8EAA8E;QAC9E,qBAAgB,GAAG,CAAC,CAAe,EAAE,EAAE;YACrC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS;gBAAE,OAAO;YAC5C,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;YAC9C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACjD,CAAC,CAAC;QAEF,sBAAiB,GAAG,GAAG,EAAE;YACvB,IAAI,CAAC,IAAI,CAAC,SAAS;gBAAE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QACjD,CAAC,CAAC;QAqBF,aAAQ,GAAG,GAAG,EAAE;YACd,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC3B,CAAC,CAAC;QAEF,2EAA2E;QAC3E,uBAAkB,GAAG,GAAG,EAAE;YACxB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;YACvC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC5E,CAAC,CAAC;QAEF,sBAAiB,GAAG,GAAG,EAAE;YACvB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,IAAI,CAAC,QAAS,CAAC,CAAC;YACtE,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC5E,CAAC,CAAC;QAEF,oBAAe,GAAG,GAAG,EAAE;YACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,SAAU,CAAC,aAAa,EAAE,IAAI,CAAC,UAAW,CAAC,CAAC;YAC1E,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC5E,CAAC,CAAC;QAEF,kBAAa,GAAG,GAAG,EAAE;YACnB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC7E,CAAC,CAAC;QApaA,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IACjD,CAAC;IAoDD,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;IACpC,CAAC;IAEkB,UAAU,CAAC,OAAuB;QACnD,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YACzD,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE,CAAC;gBACjE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YACpB,CAAC;QACH,CAAC;QAED,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS;gBAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC;YAC9D,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS;gBAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC;YAC1D,IAAI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACpC,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;YACtE,CAAC;QACH,CAAC;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YACpC,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC;QACpD,CAAC;IACH,CAAC;IAEkB,YAAY;QAC7B,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAEkB,OAAO,CAAC,OAAuB;QAChD,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACzC,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC9D,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAM,CAAC,CAAC;QAC/E,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACzG,MAAM,GAAG,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEnC,MAAM,aAAa,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,QAAQ,IAAI,CAAC,CAAC;QACnD,MAAM,WAAW,GAAG,MAAM,IAAI,GAAG,CAAC;QAElC,kFAAkF;QAClF,uFAAuF;QACvF,qFAAqF;QACrF,MAAM,SAAS,GAAG,CAAC,GAAW,EAAE,EAAE,CAChC,QAAQ,GAAG,GAAG,GAAG,8DAA8D,CAAC;QAElF,MAAM,WAAW,GAAG,CAAC,IAAI,CAAC,KAAK;YAC7B,CAAC,CAAC,GAAG;YACL,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,QAAQ,OAAO,GAAG,KAAK,CAAC,CAAC;QAC5D,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,GAAG,GAAG,MAAM,OAAO,GAAG,KAAK,CAAC;QAC1E,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;QAEpE,MAAM,KAAK,GAAG,gCAAgC,CAAC;QAC/C,MAAM,MAAM,GAAG,sBAAsB,CAAC;QACtC,MAAM,mBAAmB,GAAG,GAAG,KAAK,IAAI,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,IAAI,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,IAAI,KAAK,EAAE,CAAC;QACpH,MAAM,iBAAiB,GAAG,GAAG,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,IAAI,KAAK,IAAI,KAAK,IAAI,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;QAE9G,OAAO,IAAI,CAAA;;2BAEY,QAAQ,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;uBACtF,IAAI,CAAC,2BAA2B;uBAChC,IAAI,CAAC,gBAAgB;wBACpB,IAAI,CAAC,iBAAiB;;;YAGlC,IAAI,CAAC,KAAK,IAAI,CAAC,aAAa;YAC5B,CAAC,CAAC,IAAI,CAAA;;;wBAGM,QAAQ,CAAC;gBACf,gBAAgB,EAAE,GAAG;gBACrB,cAAc,EAAE,QAAQ,GAAG,GAAG,QAAQ,OAAO,GAAG,KAAK;gBACrD,YAAY,EAAE,mBAAmB;aAClC,CAAC;sBACI;YACV,CAAC,CAAC,OAAO;;;;oBAID,QAAQ,CAAC;YACf,gBAAgB,EAAE,WAAW;YAC7B,cAAc,EAAE,SAAS;YACzB,YAAY,EAAE,YAAY;SAC3B,CAAC;;YAEF,CAAC,WAAW;YACZ,CAAC,CAAC,IAAI,CAAA;;;wBAGM,QAAQ,CAAC;gBACf,gBAAgB,EAAE,QAAQ,MAAM,OAAO,GAAG,KAAK;gBAC/C,cAAc,EAAE,GAAG;gBACnB,YAAY,EAAE,iBAAiB;aAChC,CAAC;sBACI;YACV,CAAC,CAAC,OAAO;YACT,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO;YAC7E,SAAS,KAAK,CAAC;YACf,CAAC,CAAC,IAAI,CAAA;;;0BAGQ,QAAQ,CAAC;gBACf,eAAe,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,aAAa;oBAC3C,CAAC,CAAC,uCAAuC;oBACzC,CAAC,CAAC,qCAAqC;aAC1C,CAAC;;;;;0BAKM,QAAQ,CAAC;gBACf,eAAe,EAAE,WAAW;oBAC1B,CAAC,CAAC,qCAAqC;oBACvC,CAAC,CAAC,uCAAuC;aAC5C,CAAC;yBACK;YACb,CAAC,CAAC,OAAO;;;UAGX,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA;;;;;;qBAMK,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;qBAChB,MAAM,CAAC,IAAI,CAAC,QAAS,CAAC;qBACtB,IAAI,CAAC,IAAI,IAAI,KAAK;uBAChB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAW,CAAC,CAAC;0BAC3B,IAAI,CAAC,QAAQ;uBAChB,IAAI,CAAC,iBAAiB;wBACrB,IAAI,CAAC,aAAa;;;;;;;qBAOrB,MAAM,CAAC,IAAI,CAAC,UAAW,CAAC;qBACxB,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;qBAChB,IAAI,CAAC,IAAI,IAAI,KAAK;uBAChB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAS,CAAC,CAAC;0BACzB,IAAI,CAAC,QAAQ;uBAChB,IAAI,CAAC,eAAe;wBACnB,IAAI,CAAC,aAAa;;;sBAGpB,QAAQ,CAAC;gBACf,KAAK,EAAE,IAAI;gBACX,aAAa,EAAE,IAAI;gBACnB,cAAc,EAAE,IAAI,CAAC,YAAY,KAAK,OAAO;gBAC7C,OAAO,EAAE,IAAI,CAAC,aAAa,KAAK,OAAO;aACxC,CAAC;;sBAEM,QAAQ,CAAC,EAAE,gBAAgB,EAAE,SAAS,CAAC,QAAQ,CAAC,EAAE,CAAC;;;gBAGzD,IAAI,CAAC,qBAAqB,CAAC,OAAO,EAAE,IAAI,CAAC,UAAW,CAAC;;;sBAG/C,QAAQ,CAAC;gBACf,KAAK,EAAE,IAAI;gBACX,WAAW,EAAE,IAAI;gBACjB,cAAc,EAAE,IAAI,CAAC,YAAY,KAAK,KAAK;gBAC3C,OAAO,EAAE,IAAI,CAAC,aAAa,KAAK,KAAK;aACtC,CAAC;;sBAEM,QAAQ,CAAC,EAAE,gBAAgB,EAAE,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC;;;gBAGvD,IAAI,CAAC,qBAAqB,CAAC,KAAK,EAAE,IAAI,CAAC,QAAS,CAAC;;WAEtD;YACD,CAAC,CAAC,IAAI,CAAA;;;;;2BAKW,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,QAAQ;qBACjD,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;qBAChB,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;qBAChB,IAAI,CAAC,IAAI,IAAI,KAAK;uBAChB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAM,CAAC,CAAC;0BACtB,IAAI,CAAC,QAAQ;uBAChB,IAAI,CAAC,kBAAkB;wBACtB,IAAI,CAAC,aAAa;;;sBAGpB,QAAQ,CAAC;gBACf,KAAK,EAAE,IAAI;gBACX,cAAc,EAAE,IAAI,CAAC,YAAY,KAAK,KAAK;gBAC3C,OAAO,EAAE,IAAI,CAAC,aAAa,KAAK,KAAK;aACtC,CAAC;;sBAEM,QAAQ,CAAC,EAAE,gBAAgB,EAAE,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC;;;gBAGvD,IAAI,CAAC,qBAAqB,CAAC,KAAK,EAAE,IAAI,CAAC,KAAM,CAAC;;WAEnD;;KAEN,CAAC;IACJ,CAAC;IAED,aAAa,CAAC,aAAsB,EAAE,WAAoB;QACxD,MAAM,KAAK,GAAG,gCAAgC,CAAC;QAC/C,MAAM,MAAM,GAAG,sBAAsB,CAAC;QACtC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,MAAM,EAAE,GAAG,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC;YAC1C,MAAM,EAAE,GAAG,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC;YACxC,OAAO,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC;QACnC,CAAC;QACD,MAAM,EAAE,GAAG,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC;QACxC,OAAO,GAAG,KAAK,IAAI,EAAE,IAAI,EAAE,IAAI,KAAK,EAAE,CAAC;IACzC,CAAC;IAED,YAAY,CAAC,KAAa,EAAE,QAAgB,EAAE,MAAc,EAAE,KAAa;QACzE,MAAM,KAAK,GAAG,EAAE,CAAC;QACjB,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,IAAI,GAAG,CAAC;QAC3C,MAAM,MAAM,GAAG,CAAC,KAAK,GAAG,UAAU,CAAC,GAAG,GAAG,CAAC;QAC1C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;YAC/B,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC;YACpC,MAAM,QAAQ,GAAG,GAAG,IAAI,QAAQ,IAAI,GAAG,IAAI,MAAM,CAAC;YAClD,MAAM,KAAK,GACT,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,MAAM,CAAC,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,QAAQ,CAAC,GAAG,MAAM,CAAC,CAAC;YACvF,KAAK,CAAC,IAAI,CAAC,IAAI,CAAA;gBACL,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;gBAC3D,QAAQ,CAAC,EAAE,gBAAgB,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;eAC1C,CAAC,CAAC;QACb,CAAC;QACD,OAAO,IAAI,CAAA,sBAAsB,KAAK,QAAQ,CAAC;IACjD,CAAC;IAED,qBAAqB,CAAC,KAAY,EAAE,KAAa;QAC/C,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,OAAO,CAAC;QACnC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,KAAK,KAAK;YAAE,OAAO,OAAO,CAAC;QACnE,OAAO,IAAI,CAAA,uDAAuD,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC;IACpG,CAAC;IAED,IAAI,CAAC,KAAa;QAChB,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACzC,OAAO,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC;IAC5C,CAAC;IAED,iEAAiE;IACjE,eAAe,CAAC,OAAe;QAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC;QACrD,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAChC,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC;QAC3C,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,OAAO,GAAG,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC;QAC9E,MAAM,KAAK,GAAG,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;QACxD,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,KAAK,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;QACrD,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACzB,CAAC;IAED,KAAK,CAAC,KAAa;QACjB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC;YAAE,OAAO,KAAK,CAAC;QAC/C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QACzD,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC9E,CAAC;IAED,UAAU;QACR,iFAAiF;QACjF,MAAM,EAAE,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAClC,MAAM,OAAO,GAAG,UAAU,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,IAAI,CAAC,CAAC;QACxE,OAAO,OAAO,GAAG,CAAC,CAAC;IACrB,CAAC;IAED,aAAa,CAAC,KAAa;QACzB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,KAAK,CAAC;QAC9B,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QAClE,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QAC9D,4EAA4E;QAC5E,6DAA6D;QAC7D,IAAI,SAAS,KAAK,OAAO,EAAE,CAAC;YAC1B,MAAM,GAAG,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;YAC9E,OAAO,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;QACvC,CAAC;QACD,OAAO,SAAS,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;IAChD,CAAC;IAED,2BAA2B,CAgBzB;IAEF,eAAe,CAIb;IAEF,cAAc,CAIZ;IAEF,8EAA8E;IAC9E,gBAAgB,CAId;IAEF,iBAAiB,CAEf;IAEF,cAAc,CAAC,KAAY,EAAE,KAAa;QACxC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,KAAK,KAAK,OAAO,EAAE,CAAC;gBACtB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,QAAS,CAAC,CAAC;YACpD,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,UAAW,CAAC,CAAC;YACpD,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,CAAC;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAC5E,CAAC;IAED,UAAU,CAAC,KAAY;QACrB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC;IAED,QAAQ,CAGN;IAEF,2EAA2E;IAC3E,kBAAkB,CAGhB;IAEF,iBAAiB,CAGf;IAEF,eAAe,CAGb;IAEF,aAAa,CAEX;IAEF,gBAAgB;QACd,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YACzC,OAAO;QACT,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,MAAM,IAAI,GAAG,IAAI,QAAQ,EAAE,CAAC;YAC5B,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;YACvE,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;YACnE,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YACzC,OAAO;QACT,CAAC;QACD,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC;IAC/D,CAAC;;AA/a2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCAAS;AAGR;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCAAW;AAGV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAAU;AAGT;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCAA2B;AAGA;IAArD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;0CAAgC;AAGjC;IAAnD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;wCAA8B;AAMrC;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAAe;AAGd;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAAe;AAGd;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAkB;AAGhC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAAW;AAGV;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAAkC;AAG9B;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;2CAA6C;AAE3D;IAAhB,KAAK,EAAE;yCAA2B;AAClB;IAAhB,KAAK,EAAE;4CAA2C;AAClC;IAAhB,KAAK,EAAE;6CAA4C;AAElB;IAAjC,KAAK,CAAC,QAAQ,CAAC;sCAA4C;AACtB;IAArC,KAAK,CAAC,YAAY,CAAC;yCAAsD;AACpC;IAArC,KAAK,CAAC,YAAY,CAAC;0CAA2C;AA5DpD,MAAM;IADlB,aAAa,CAAC,UAAU,CAAC;GACb,MAAM,CA6blB","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './slider.styles.js';\n\ntype LabelFormat = (value: number) => string;\ntype Thumb = 'start' | 'end';\n\nexport type SliderSize = 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';\n\n// Px distance from handle center to track-segment edge: handle-width/2 + 6dp handle-gap.\nconst SIZE_GAP_PX: Record<SliderSize, number> = {\n  'extra-small': 8,  // 4/2 + 6\n  small: 8,\n  medium: 9,         // 6/2 + 6\n  large: 9,\n  'extra-large': 10, // 8/2 + 6\n};\n\n/**\n * Material 3 expressive slider. Single-thumb by default; becomes a range slider\n * when both `value-start` and `value-end` are set (or `range` is forced).\n *\n * @fires input - Dispatched continuously while dragging.\n * @fires change - Dispatched when the user commits a value change.\n * @csspart track - The track container.\n * @csspart track-inactive-start - The inactive segment before the start handle (range mode only).\n * @csspart track-active - The highlighted segment between (or up to) the thumbs.\n * @csspart track-inactive-end - The inactive segment after the end handle.\n * @csspart thumb - The thumb indicator (or the start thumb in range mode).\n * @csspart thumb-end - The end thumb in range mode.\n * @csspart value-indicator - The floating value indicator shown in `discrete` mode while dragging.\n * @csspart stop-indicator - The dot at each end of the slider.\n */\n@customElement('u-slider')\nexport class Slider extends LitElement {\n  static override styles = [baseStyles, styles];\n\n  static readonly formAssociated = true;\n\n  protected readonly elementInternals: ElementInternals;\n\n  constructor() {\n    super();\n    this.elementInternals = this.attachInternals();\n  }\n\n  /** Minimum value. */\n  @property({ type: Number }) min = 0;\n\n  /** Maximum value. */\n  @property({ type: Number }) max = 100;\n\n  /** Step increment. Use `0` for fully continuous values. */\n  @property({ type: Number }) step = 1;\n\n  /** Current value (single-thumb mode). */\n  @property({ type: Number }) value: number | undefined;\n\n  /** Start value (range mode). */\n  @property({ type: Number, attribute: 'value-start' }) valueStart: number | undefined;\n\n  /** End value (range mode). */\n  @property({ type: Number, attribute: 'value-end' }) valueEnd: number | undefined;\n\n  /**\n   * Forces range mode. Auto-enabled when both `value-start` and `value-end`\n   * are provided.\n   */\n  @property({ type: Boolean, reflect: true }) range = false;\n\n  /** Shows tick marks and a floating value indicator while dragging. */\n  @property({ type: Boolean, reflect: true }) discrete = false;\n\n  /** Shows tick marks without enabling the floating value indicator. */\n  @property({ type: Boolean, reflect: true }) ticks = false;\n\n  /** Disables the slider. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Form-association name. */\n  @property({ reflect: true }) name = '';\n\n  /** Visual size variant. */\n  @property({ reflect: true }) size: SliderSize = 'extra-small';\n\n  /** Custom formatter for the floating value indicator. */\n  @property({ attribute: false }) labelFormat: LabelFormat = (v) => String(v);\n\n  @state() private _dragging = false;\n  @state() private _activeThumb: Thumb | null = null;\n  @state() private _hoveredThumb: Thumb | null = null;\n\n  @query('#input') private readonly _input!: HTMLInputElement;\n  @query('#input-end') private readonly _inputEnd!: HTMLInputElement | null;\n  @query('.container') private readonly _container!: HTMLElement;\n\n  get form(): HTMLFormElement | null {\n    return this.elementInternals.form;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    if (changed.has('valueStart') || changed.has('valueEnd')) {\n      if (this.valueStart !== undefined && this.valueEnd !== undefined) {\n        this.range = true;\n      }\n    }\n\n    if (this.range) {\n      if (this.valueStart === undefined) this.valueStart = this.min;\n      if (this.valueEnd === undefined) this.valueEnd = this.max;\n      if (this.valueStart > this.valueEnd) {\n        [this.valueStart, this.valueEnd] = [this.valueEnd, this.valueStart];\n      }\n    } else if (this.value === undefined) {\n      this.value = (this.max - this.min) / 2 + this.min;\n    }\n  }\n\n  protected override firstUpdated(): void {\n    this.#updateFormValue();\n  }\n\n  protected override updated(changed: PropertyValues): void {\n    if (changed.has('value') || changed.has('valueStart') || changed.has('valueEnd') || changed.has('name')) {\n      this.#updateFormValue();\n    }\n  }\n\n  override render(): HTMLTemplateResult {\n    const range = (this.max - this.min) || 1;\n    const startPct = this.range ? this.#pct(this.valueStart!) : 0;\n    const endPct = this.range ? this.#pct(this.valueEnd!) : this.#pct(this.value!);\n    const tickCount = (this.discrete || this.ticks) && this.step > 0 ? Math.floor(range / this.step) + 1 : 0;\n    const gap = SIZE_GAP_PX[this.size];\n\n    const collapseStart = !this.range || startPct <= 0;\n    const collapseEnd = endPct >= 100;\n\n    // Handle position formula: walks the same coordinate system as the track segments\n    // and ticks, so a handle at value v sits exactly on the tick at v. The travel range is\n    // (container width − handle width) and the handle's center starts at handle-width/2.\n    const handlePos = (pct: number) =>\n      `calc(${pct / 100} * (100% - var(--_handle-width)) + var(--_handle-width) / 2)`;\n\n    const activeStart = !this.range\n      ? '0'\n      : (collapseStart ? '0' : `calc(${startPct}% + ${gap}px)`);\n    const activeEnd = collapseEnd ? '0' : `calc(${100 - endPct}% + ${gap}px)`;\n    const activeRadius = this.#activeRadius(collapseStart, collapseEnd);\n\n    const fullR = 'calc(var(--_track-height) / 2)';\n    const innerR = 'var(--_inner-corner)';\n    const inactiveStartRadius = `${fullR} ${collapseStart ? fullR : innerR} ${collapseStart ? fullR : innerR} ${fullR}`;\n    const inactiveEndRadius = `${collapseEnd ? fullR : innerR} ${fullR} ${fullR} ${collapseEnd ? fullR : innerR}`;\n\n    return html`\n      <div\n        class=\"container ${classMap({ dragging: this._dragging, range: this.range, discrete: this.discrete })}\"\n        @pointerdown=${this.#handleContainerPointerDown}\n        @pointermove=${this.#handleHoverMove}\n        @pointerleave=${this.#handleHoverLeave}\n      >\n        <div class=\"track\" part=\"track\">\n          ${this.range && !collapseStart\n            ? html`<div\n                class=\"segment inactive inactive-start\"\n                part=\"track-inactive-start\"\n                style=${styleMap({\n                  insetInlineStart: '0',\n                  insetInlineEnd: `calc(${100 - startPct}% + ${gap}px)`,\n                  borderRadius: inactiveStartRadius,\n                })}\n              ></div>`\n            : nothing}\n          <div\n            class=\"segment active\"\n            part=\"track-active\"\n            style=${styleMap({\n              insetInlineStart: activeStart,\n              insetInlineEnd: activeEnd,\n              borderRadius: activeRadius,\n            })}\n          ></div>\n          ${!collapseEnd\n            ? html`<div\n                class=\"segment inactive inactive-end\"\n                part=\"track-inactive-end\"\n                style=${styleMap({\n                  insetInlineStart: `calc(${endPct}% + ${gap}px)`,\n                  insetInlineEnd: '0',\n                  borderRadius: inactiveEndRadius,\n                })}\n              ></div>`\n            : nothing}\n          ${tickCount > 0 ? this.#renderTicks(tickCount, startPct, endPct, gap) : nothing}\n          ${tickCount === 0\n            ? html`<span\n                  class=\"stop-indicator leading\"\n                  part=\"stop-indicator\"\n                  style=${styleMap({\n                    backgroundColor: this.range && !collapseStart\n                      ? 'var(--_stop-indicator-inactive-color)'\n                      : 'var(--_stop-indicator-active-color)',\n                  })}\n                ></span>\n                <span\n                  class=\"stop-indicator trailing\"\n                  part=\"stop-indicator\"\n                  style=${styleMap({\n                    backgroundColor: collapseEnd\n                      ? 'var(--_stop-indicator-active-color)'\n                      : 'var(--_stop-indicator-inactive-color)',\n                  })}\n                ></span>`\n            : nothing}\n        </div>\n\n        ${this.range\n          ? html`\n            <input\n              id=\"input\"\n              class=\"native\"\n              type=\"range\"\n              aria-label=\"Start value\"\n              .min=${String(this.min)}\n              .max=${String(this.valueEnd!)}\n              step=${this.step || 'any'}\n              .value=${live(String(this.valueStart!))}\n              ?disabled=${this.disabled}\n              @input=${this.#handleStartInput}\n              @change=${this.#handleChange}\n            />\n            <input\n              id=\"input-end\"\n              class=\"native\"\n              type=\"range\"\n              aria-label=\"End value\"\n              .min=${String(this.valueStart!)}\n              .max=${String(this.max)}\n              step=${this.step || 'any'}\n              .value=${live(String(this.valueEnd!))}\n              ?disabled=${this.disabled}\n              @input=${this.#handleEndInput}\n              @change=${this.#handleChange}\n            />\n            <div\n              class=${classMap({\n                thumb: true,\n                'thumb-start': true,\n                'active-thumb': this._activeThumb === 'start',\n                hovered: this._hoveredThumb === 'start',\n              })}\n              part=\"thumb\"\n              style=${styleMap({ insetInlineStart: handlePos(startPct) })}\n            >\n              <span class=\"focus-ring\"></span>\n              ${this.#renderValueIndicator('start', this.valueStart!)}\n            </div>\n            <div\n              class=${classMap({\n                thumb: true,\n                'thumb-end': true,\n                'active-thumb': this._activeThumb === 'end',\n                hovered: this._hoveredThumb === 'end',\n              })}\n              part=\"thumb-end\"\n              style=${styleMap({ insetInlineStart: handlePos(endPct) })}\n            >\n              <span class=\"focus-ring\"></span>\n              ${this.#renderValueIndicator('end', this.valueEnd!)}\n            </div>\n          `\n          : html`\n            <input\n              id=\"input\"\n              class=\"native\"\n              type=\"range\"\n              aria-label=${this.getAttribute('aria-label') ?? 'Slider'}\n              .min=${String(this.min)}\n              .max=${String(this.max)}\n              step=${this.step || 'any'}\n              .value=${live(String(this.value!))}\n              ?disabled=${this.disabled}\n              @input=${this.#handleSingleInput}\n              @change=${this.#handleChange}\n            />\n            <div\n              class=${classMap({\n                thumb: true,\n                'active-thumb': this._activeThumb === 'end',\n                hovered: this._hoveredThumb === 'end',\n              })}\n              part=\"thumb\"\n              style=${styleMap({ insetInlineStart: handlePos(endPct) })}\n            >\n              <span class=\"focus-ring\"></span>\n              ${this.#renderValueIndicator('end', this.value!)}\n            </div>\n          `}\n      </div>\n    `;\n  }\n\n  #activeRadius(collapseStart: boolean, collapseEnd: boolean): string {\n    const fullR = 'calc(var(--_track-height) / 2)';\n    const innerR = 'var(--_inner-corner)';\n    if (this.range) {\n      const sR = collapseStart ? fullR : innerR;\n      const eR = collapseEnd ? fullR : innerR;\n      return `${sR} ${eR} ${eR} ${sR}`;\n    }\n    const eR = collapseEnd ? fullR : innerR;\n    return `${fullR} ${eR} ${eR} ${fullR}`;\n  }\n\n  #renderTicks(count: number, startPct: number, endPct: number, gapPx: number): HTMLTemplateResult {\n    const ticks = [];\n    const trackWidth = this.offsetWidth || 200;\n    const gapPct = (gapPx / trackWidth) * 100;\n    for (let i = 0; i < count; i++) {\n      const pct = (i / (count - 1)) * 100;\n      const inActive = pct >= startPct && pct <= endPct;\n      const inGap =\n        Math.abs(pct - endPct) < gapPct || (this.range && Math.abs(pct - startPct) < gapPct);\n      ticks.push(html`<span\n        class=${classMap({ tick: true, active: inActive, 'in-gap': inGap })}\n        style=${styleMap({ insetInlineStart: `${pct}%` })}\n      ></span>`);\n    }\n    return html`<div class=\"ticks\">${ticks}</div>`;\n  }\n\n  #renderValueIndicator(thumb: Thumb, value: number): HTMLTemplateResult | typeof nothing {\n    if (!this.discrete) return nothing;\n    if (!this._dragging || this._activeThumb !== thumb) return nothing;\n    return html`<div class=\"value-indicator\" part=\"value-indicator\">${this.labelFormat(value)}</div>`;\n  }\n\n  #pct(value: number): number {\n    const range = (this.max - this.min) || 1;\n    return ((value - this.min) / range) * 100;\n  }\n\n  // Determine slider value from pointer x (clamped to [min, max]).\n  #pointerToValue(clientX: number): number {\n    const rect = this._container.getBoundingClientRect();\n    const padPx = this.#paddingPx();\n    const usableWidth = rect.width - padPx * 2;\n    const local = Math.max(0, Math.min(usableWidth, clientX - rect.left - padPx));\n    const ratio = usableWidth > 0 ? local / usableWidth : 0;\n    const raw = this.min + ratio * (this.max - this.min);\n    return this.#snap(raw);\n  }\n\n  #snap(value: number): number {\n    if (!this.step || this.step <= 0) return value;\n    const steps = Math.round((value - this.min) / this.step);\n    return Math.max(this.min, Math.min(this.max, this.min + steps * this.step));\n  }\n\n  #paddingPx(): number {\n    // Matches container's padding-inline = handle-width/2 (4-8px depending on size).\n    const cs = getComputedStyle(this);\n    const handleW = parseFloat(cs.getPropertyValue('--_handle-width')) || 4;\n    return handleW / 2;\n  }\n\n  #closestThumb(value: number): Thumb {\n    if (!this.range) return 'end';\n    const startDist = Math.abs(value - (this.valueStart ?? this.min));\n    const endDist = Math.abs(value - (this.valueEnd ?? this.max));\n    // Bias to 'end' when distances tie and pointer is to the right of midpoint,\n    // so clicking past either thumb still moves the natural one.\n    if (startDist === endDist) {\n      const mid = ((this.valueStart ?? this.min) + (this.valueEnd ?? this.max)) / 2;\n      return value < mid ? 'start' : 'end';\n    }\n    return startDist <= endDist ? 'start' : 'end';\n  }\n\n  #handleContainerPointerDown = (e: PointerEvent) => {\n    if (this.disabled) return;\n    // Ignore non-primary buttons.\n    if (e.button !== undefined && e.button !== 0) return;\n    e.preventDefault();\n    const value = this.#pointerToValue(e.clientX);\n    const thumb = this.#closestThumb(value);\n    this.#beginDrag(thumb);\n    this.#setThumbValue(thumb, value);\n    // Intentionally do NOT focus the input on pointer interaction — that would inherit\n    // an active :focus-visible state from prior keyboard navigation and incorrectly show\n    // the focus ring on click. The user must Tab to the slider for keyboard control.\n    try { this._container.setPointerCapture(e.pointerId); } catch { /* */ }\n    this._container.addEventListener('pointermove', this.#handleDragMove);\n    this._container.addEventListener('pointerup', this.#handleDragEnd, { once: true });\n    this._container.addEventListener('pointercancel', this.#handleDragEnd, { once: true });\n  };\n\n  #handleDragMove = (e: PointerEvent) => {\n    if (!this._dragging || !this._activeThumb) return;\n    const value = this.#pointerToValue(e.clientX);\n    this.#setThumbValue(this._activeThumb, value);\n  };\n\n  #handleDragEnd = () => {\n    this._container.removeEventListener('pointermove', this.#handleDragMove);\n    this.#endDrag();\n    this.#handleChange();\n  };\n\n  // Hover tracking — light up the state layer of the thumb nearest the pointer.\n  #handleHoverMove = (e: PointerEvent) => {\n    if (this.disabled || this._dragging) return;\n    const value = this.#pointerToValue(e.clientX);\n    this._hoveredThumb = this.#closestThumb(value);\n  };\n\n  #handleHoverLeave = () => {\n    if (!this._dragging) this._hoveredThumb = null;\n  };\n\n  #setThumbValue(thumb: Thumb, value: number) {\n    if (this.range) {\n      if (thumb === 'start') {\n        this.valueStart = Math.min(value, this.valueEnd!);\n      } else {\n        this.valueEnd = Math.max(value, this.valueStart!);\n      }\n    } else {\n      this.value = value;\n    }\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n  }\n\n  #beginDrag(thumb: Thumb) {\n    this._activeThumb = thumb;\n    this._dragging = true;\n    this._hoveredThumb = thumb;\n  }\n\n  #endDrag = () => {\n    this._dragging = false;\n    this._activeThumb = null;\n  };\n\n  // Keyboard input on the native range inputs still updates the bound value.\n  #handleSingleInput = () => {\n    this.value = this._input.valueAsNumber;\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n  };\n\n  #handleStartInput = () => {\n    this.valueStart = Math.min(this._input.valueAsNumber, this.valueEnd!);\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n  };\n\n  #handleEndInput = () => {\n    this.valueEnd = Math.max(this._inputEnd!.valueAsNumber, this.valueStart!);\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n  };\n\n  #handleChange = () => {\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n  };\n\n  #updateFormValue() {\n    if (!this.name) {\n      this.elementInternals.setFormValue(null);\n      return;\n    }\n    if (this.range) {\n      const data = new FormData();\n      data.append(`${this.name}-start`, String(this.valueStart ?? this.min));\n      data.append(`${this.name}-end`, String(this.valueEnd ?? this.max));\n      this.elementInternals.setFormValue(data);\n      return;\n    }\n    this.elementInternals.setFormValue(String(this.value ?? ''));\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-slider': Slider;\n  }\n}\n"]}

package/slider/slider.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=slider.styles.d.ts.map

package/slider/slider.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.styles.d.ts","sourceRoot":"","sources":["../../src/slider/slider.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAiSlB,CAAC"}