@designbasekorea/ui-wc 0.5.6 → 0.6.0

package/dist/esm/components/db-range-slider.js

@@ -1,811 +1 @@
-/**
- * RangeSlider Web Component
- * packages/ui RangeSlider.tsx와 DOM·동작·스타일 1:1 동기화
- */
-const CLASS = 'designbase-wc-range-slider';
-class DbRangeSlider extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.built = false;
-        this.headerEl = null;
-        this.labelEl = null;
-        this.valuesEl = null;
-        this.containerEl = null;
-        this.trackEl = null;
-        this.fillEl = null;
-        this.thumbEls = [];
-        this.currentValue = 50;
-        this.currentRange = [25, 75];
-        this.isDragging = false;
-        this.activeThumb = null;
-        this.boundTrackClick = (e) => this.handleTrackClick(e);
-        this.boundPointerMove = (e) => this.handlePointerMove(e);
-        this.boundPointerUp = () => this.handlePointerUp();
-        this.boundContainerKeyDown = (e) => this.handleKeyDown(e);
-        this.eventsBound = false;
-    }
-    static get observedAttributes() {
-        return [
-            'value',
-            'range',
-            'min',
-            'max',
-            'step',
-            'size',
-            'variant',
-            'show-value',
-            'show-label',
-            'label',
-            'value-position',
-            'value-fixed',
-            'show-thumb-tooltip',
-            'show-marks',
-            'marks',
-            'mark-labels',
-            'disabled',
-            'readonly',
-            'full-width',
-            'vertical',
-        ];
-    }
-    connectedCallback() {
-        if (!this.built) {
-            this.build();
-            this.built = true;
-        }
-        this.readAttributeValues();
-        this.syncClasses();
-        this.syncDomOrder();
-        this.syncStructure();
-        this.syncVisuals();
-        this.syncA11y();
-        this.bindEvents();
-    }
-    disconnectedCallback() {
-        this.unbindEvents();
-    }
-    attributeChangedCallback(name) {
-        if (!this.built)
-            return;
-        this.readAttributeValues();
-        this.syncClasses();
-        if (this.isStructuralAttribute(name)) {
-            this.syncDomOrder();
-            this.syncStructure();
-        }
-        this.syncVisuals();
-        this.syncA11y();
-    }
-    isStructuralAttribute(name) {
-        return [
-            'range',
-            'show-value',
-            'show-label',
-            'label',
-            'value-position',
-            'show-marks',
-            'marks',
-            'mark-labels',
-            'vertical',
-        ].includes(name);
-    }
-    get value() {
-        return this.currentValue;
-    }
-    set value(v) {
-        this.currentValue = this.clamp(v);
-        this.setAttribute('value', String(this.currentValue));
-        this.syncVisuals();
-    }
-    get range() {
-        if (!this.hasAttribute('range'))
-            return undefined;
-        return [...this.currentRange];
-    }
-    set range(v) {
-        if (v === undefined || v === null) {
-            this.removeAttribute('range');
-            if (this.built) {
-                this.syncStructure();
-                this.syncVisuals();
-            }
-            return;
-        }
-        const parsed = this.normalizeRangeInput(v);
-        if (!parsed)
-            return;
-        const sorted = [Math.min(parsed[0], parsed[1]), Math.max(parsed[0], parsed[1])];
-        this.currentRange = [
-            this.clamp(sorted[0]),
-            this.clamp(sorted[1]),
-        ];
-        const nextAttr = `${this.currentRange[0]},${this.currentRange[1]}`;
-        if (this.getAttribute('range') !== nextAttr) {
-            this.setAttribute('range', nextAttr);
-        }
-        if (this.built) {
-            this.syncVisuals();
-        }
-    }
-    build() {
-        this.classList.add(CLASS);
-        this.headerEl = document.createElement('div');
-        this.headerEl.className = `${CLASS}__header`;
-        this.labelEl = document.createElement('span');
-        this.labelEl.className = `${CLASS}__label`;
-        this.valuesEl = document.createElement('div');
-        this.valuesEl.className = `${CLASS}__values`;
-        this.containerEl = document.createElement('div');
-        this.containerEl.className = `${CLASS}__container`;
-        this.containerEl.setAttribute('role', 'slider');
-        this.containerEl.setAttribute('tabindex', '0');
-        this.trackEl = document.createElement('div');
-        this.trackEl.className = `${CLASS}__track`;
-        this.fillEl = document.createElement('div');
-        this.fillEl.className = `${CLASS}__fill`;
-        this.trackEl.appendChild(this.fillEl);
-        this.containerEl.appendChild(this.trackEl);
-    }
-    getValuePosition() {
-        const attr = this.getAttribute('value-position');
-        if (attr)
-            return attr;
-        // 기본값: 레이블이 있으면 top(레이블 좌 · 값 우), 없으면 right(트랙 우측 인라인)
-        return this.shouldShowLabel() ? 'top' : 'right';
-    }
-    shouldShowLabel() {
-        return this.hasAttribute('show-label') && Boolean(this.getAttribute('label')?.trim());
-    }
-    formatValue(value) {
-        const fixed = this.getAttribute('value-fixed');
-        if (fixed !== null && fixed !== '') {
-            const digits = Number(fixed);
-            if (Number.isFinite(digits))
-                return value.toFixed(digits);
-        }
-        return String(value);
-    }
-    syncDomOrder() {
-        if (!this.headerEl || !this.valuesEl || !this.containerEl)
-            return;
-        const valuePosition = this.getValuePosition();
-        const showLabel = this.shouldShowLabel();
-        const showValue = this.hasAttribute('show-value');
-        const isRange = this.hasAttribute('range');
-        this.replaceChildren();
-        if (this.labelEl) {
-            this.labelEl.textContent = this.getAttribute('label')?.trim() || '';
-        }
-        // 레이블 좌 · 값 우 헤더 — range이거나 value-position=top인 경우
-        if (isRange || valuePosition === 'top') {
-            this.headerEl.replaceChildren();
-            if (showLabel && this.labelEl)
-                this.headerEl.appendChild(this.labelEl);
-            if (showValue)
-                this.headerEl.appendChild(this.valuesEl);
-            if (this.headerEl.childElementCount > 0)
-                this.append(this.headerEl);
-            this.append(this.containerEl);
-            return;
-        }
-        // bottom — 레이블(상단) · 트랙 · 값(하단)
-        if (valuePosition === 'bottom') {
-            if (showLabel && this.labelEl) {
-                this.headerEl.replaceChildren(this.labelEl);
-                this.append(this.headerEl);
-            }
-            this.append(this.containerEl);
-            if (showValue)
-                this.append(this.valuesEl);
-            return;
-        }
-        // left · right — [값 | 트랙] 인라인 (CSS order로 좌우 결정)
-        if (showValue) {
-            this.append(this.valuesEl, this.containerEl);
-            return;
-        }
-        this.append(this.containerEl);
-    }
-    bindEvents() {
-        if (this.eventsBound)
-            return;
-        this.trackEl?.addEventListener('click', this.boundTrackClick);
-        this.containerEl?.addEventListener('keydown', this.boundContainerKeyDown);
-        this.eventsBound = true;
-    }
-    unbindEvents() {
-        if (!this.eventsBound)
-            return;
-        this.trackEl?.removeEventListener('click', this.boundTrackClick);
-        this.containerEl?.removeEventListener('keydown', this.boundContainerKeyDown);
-        document.removeEventListener('pointermove', this.boundPointerMove);
-        document.removeEventListener('pointerup', this.boundPointerUp);
-        this.eventsBound = false;
-    }
-    readAttributeValues() {
-        const min = this.getNumberAttr('min', 0);
-        const max = this.getNumberAttr('max', 100);
-        const step = this.getNumberAttr('step', 1);
-        if (this.hasAttribute('range')) {
-            const parsed = this.parseRangeAttr(this.getAttribute('range'));
-            if (parsed) {
-                this.currentRange = [
-                    this.clamp(parsed[0], min, max, step),
-                    this.clamp(parsed[1], min, max, step),
-                ];
-            }
-            else if (!this.currentRange.every(Number.isFinite)) {
-                this.currentRange = [25, 75];
-            }
-        }
-        else {
-            this.currentValue = this.clamp(this.getNumberAttr('value', 50), min, max, step);
-        }
-    }
-    syncClasses() {
-        const size = (this.getAttribute('size') || 'm');
-        const variant = (this.getAttribute('variant') || 'default');
-        const isRange = this.hasAttribute('range');
-        const valuePosition = this.getValuePosition();
-        const effectiveValuePosition = isRange ? 'top' : valuePosition;
-        const classTokens = [
-            CLASS,
-            `${CLASS}--${size}`,
-            `${CLASS}--${variant}`,
-            `${CLASS}--value-${effectiveValuePosition}`,
-            this.shouldShowLabel() ? `${CLASS}--has-label` : '',
-            this.hasAttribute('disabled') ? `${CLASS}--disabled` : '',
-            this.hasAttribute('readonly') ? `${CLASS}--readonly` : '',
-            this.hasAttribute('full-width') ? `${CLASS}--full-width` : '',
-            this.hasAttribute('vertical') ? `${CLASS}--vertical` : '',
-            this.hasAttribute('show-thumb-tooltip') ? `${CLASS}--show-tooltip` : '',
-            isRange ? `${CLASS}--range` : '',
-        ].filter(Boolean);
-        this.className = classTokens.join(' ');
-        if (this.trackEl) {
-            const trackClasses = [`${CLASS}__track`];
-            if (this.hasAttribute('disabled'))
-                trackClasses.push(`${CLASS}__track--disabled`);
-            if (this.hasAttribute('readonly'))
-                trackClasses.push(`${CLASS}__track--readonly`);
-            this.trackEl.className = trackClasses.join(' ');
-        }
-    }
-    syncStructure() {
-        if (!this.valuesEl || !this.trackEl || !this.fillEl)
-            return;
-        const showValue = this.hasAttribute('show-value');
-        const isRange = this.hasAttribute('range');
-        const showMarks = this.hasAttribute('show-marks');
-        this.valuesEl.innerHTML = '';
-        this.valuesEl.hidden = !showValue;
-        if (showValue) {
-            if (isRange) {
-                const minSpan = document.createElement('span');
-                minSpan.className = `${CLASS}__value ${CLASS}__value--min`;
-                const sep = document.createElement('span');
-                sep.className = `${CLASS}__value-separator`;
-                sep.textContent = '~';
-                sep.setAttribute('aria-hidden', 'true');
-                const maxSpan = document.createElement('span');
-                maxSpan.className = `${CLASS}__value ${CLASS}__value--max`;
-                this.valuesEl.append(minSpan, sep, maxSpan);
-            }
-            else {
-                const span = document.createElement('span');
-                span.className = `${CLASS}__value ${CLASS}__value--single`;
-                this.valuesEl.appendChild(span);
-            }
-        }
-        this.thumbEls.forEach((el) => el.remove());
-        this.thumbEls = [];
-        this.trackEl.querySelectorAll(`.${CLASS}__mark`).forEach((el) => el.remove());
-        if (showMarks) {
-            const marks = this.parseMarks();
-            if (marks.length > 0) {
-                const labels = this.parseMarkLabels();
-                marks.forEach((mark) => {
-                    const markEl = document.createElement('div');
-                    markEl.className = `${CLASS}__mark`;
-                    markEl.setAttribute('aria-hidden', 'true');
-                    if (this.isMarkActive(mark)) {
-                        markEl.classList.add(`${CLASS}__mark--active`);
-                    }
-                    if (this.hasAttribute('vertical')) {
-                        markEl.style.bottom = `${this.valueToPercent(mark)}%`;
-                    }
-                    else {
-                        markEl.style.left = `${this.valueToPercent(mark)}%`;
-                    }
-                    if (labels[mark] !== undefined) {
-                        const labelEl = document.createElement('span');
-                        labelEl.className = `${CLASS}__mark-label`;
-                        labelEl.textContent = labels[mark];
-                        markEl.appendChild(labelEl);
-                    }
-                    this.trackEl.insertBefore(markEl, this.fillEl);
-                });
-            }
-        }
-        const thumbCount = isRange ? 2 : 1;
-        const disabled = this.hasAttribute('disabled') || this.hasAttribute('readonly');
-        for (let i = 0; i < thumbCount; i++) {
-            const thumb = document.createElement('div');
-            thumb.className = `${CLASS}__thumb`;
-            thumb.setAttribute('role', 'slider');
-            thumb.setAttribute('draggable', 'false');
-            thumb.setAttribute('tabindex', disabled ? '-1' : '0');
-            const thumbType = isRange
-                ? (i === 0 ? 'min' : 'max')
-                : 'single';
-            if (isRange) {
-                thumb.dataset.thumb = thumbType;
-            }
-            thumb.addEventListener('pointerdown', (e) => this.handleThumbPointerDown(e, thumbType));
-            thumb.addEventListener('keydown', (e) => this.handleKeyDown(e, thumbType));
-            const tooltip = document.createElement('span');
-            tooltip.className = `${CLASS}__thumb-tooltip`;
-            tooltip.setAttribute('aria-hidden', 'true');
-            tooltip.hidden = true;
-            thumb.appendChild(tooltip);
-            this.trackEl.appendChild(thumb);
-            this.thumbEls.push(thumb);
-        }
-    }
-    isMarkActive(mark) {
-        if (this.hasAttribute('range')) {
-            const [lo, hi] = this.currentRange;
-            return mark >= lo && mark <= hi;
-        }
-        return mark <= this.currentValue;
-    }
-    syncVisuals() {
-        if (!this.fillEl)
-            return;
-        const isRange = this.hasAttribute('range');
-        const min = this.getNumberAttr('min', 0);
-        const max = this.getNumberAttr('max', 100);
-        if (isRange) {
-            const [lo, hi] = this.currentRange;
-            const loPct = this.valueToPercent(lo);
-            const hiPct = this.valueToPercent(hi);
-            if (this.hasAttribute('vertical')) {
-                this.fillEl.style.left = '';
-                this.fillEl.style.width = '';
-                this.fillEl.style.bottom = `${loPct}%`;
-                this.fillEl.style.height = `${hiPct - loPct}%`;
-            }
-            else {
-                this.fillEl.style.bottom = '';
-                this.fillEl.style.height = '';
-                this.fillEl.style.left = `${loPct}%`;
-                this.fillEl.style.width = `${hiPct - loPct}%`;
-            }
-            if (this.thumbEls[0]) {
-                this.setThumbPosition(this.thumbEls[0], loPct);
-                this.thumbEls[0].setAttribute('aria-valuemin', String(min));
-                this.thumbEls[0].setAttribute('aria-valuemax', String(hi));
-                this.thumbEls[0].setAttribute('aria-valuenow', String(lo));
-            }
-            if (this.thumbEls[1]) {
-                this.setThumbPosition(this.thumbEls[1], hiPct);
-                this.thumbEls[1].setAttribute('aria-valuemin', String(lo));
-                this.thumbEls[1].setAttribute('aria-valuemax', String(max));
-                this.thumbEls[1].setAttribute('aria-valuenow', String(hi));
-            }
-            const minVal = this.valuesEl?.querySelector(`.${CLASS}__value--min`);
-            const maxVal = this.valuesEl?.querySelector(`.${CLASS}__value--max`);
-            if (minVal)
-                minVal.textContent = this.formatValue(lo);
-            if (maxVal)
-                maxVal.textContent = this.formatValue(hi);
-        }
-        else {
-            const pct = this.valueToPercent(this.currentValue);
-            if (this.hasAttribute('vertical')) {
-                this.fillEl.style.left = '';
-                this.fillEl.style.width = '';
-                this.fillEl.style.bottom = '0';
-                this.fillEl.style.height = `${pct}%`;
-            }
-            else {
-                this.fillEl.style.bottom = '';
-                this.fillEl.style.height = '';
-                this.fillEl.style.left = '0';
-                this.fillEl.style.width = `${pct}%`;
-            }
-            if (this.thumbEls[0]) {
-                this.setThumbPosition(this.thumbEls[0], pct);
-                this.thumbEls[0].setAttribute('aria-valuemin', String(min));
-                this.thumbEls[0].setAttribute('aria-valuemax', String(max));
-                this.thumbEls[0].setAttribute('aria-valuenow', String(this.currentValue));
-            }
-            const singleVal = this.valuesEl?.querySelector(`.${CLASS}__value--single`);
-            if (singleVal)
-                singleVal.textContent = this.formatValue(this.currentValue);
-        }
-        this.syncThumbTooltips();
-        this.trackEl?.querySelectorAll(`.${CLASS}__mark`).forEach((markEl) => {
-            const left = markEl instanceof HTMLElement ? parseFloat(markEl.style.left) : NaN;
-            const bottom = markEl instanceof HTMLElement ? parseFloat(markEl.style.bottom) : NaN;
-            const percent = Number.isFinite(left) ? left : bottom;
-            if (!Number.isFinite(percent))
-                return;
-            const markValue = this.percentToValue(percent);
-            markEl.classList.toggle(`${CLASS}__mark--active`, this.isMarkActive(markValue));
-        });
-    }
-    syncThumbTooltips() {
-        const isRange = this.hasAttribute('range');
-        const show = this.hasAttribute('show-thumb-tooltip');
-        this.thumbEls.forEach((thumb, index) => {
-            const tooltip = thumb.querySelector(`.${CLASS}__thumb-tooltip`);
-            if (!tooltip)
-                return;
-            if (!show) {
-                tooltip.hidden = true;
-                return;
-            }
-            // 표시 여부는 CSS(hover/focus/active)가 담당하고, 텍스트만 항상 갱신한다.
-            tooltip.hidden = false;
-            const value = isRange
-                ? index === 0
-                    ? this.currentRange[0]
-                    : this.currentRange[1]
-                : this.currentValue;
-            tooltip.textContent = this.formatValue(value);
-        });
-    }
-    syncA11y() {
-        if (!this.containerEl)
-            return;
-        const min = this.getNumberAttr('min', 0);
-        const max = this.getNumberAttr('max', 100);
-        const isRange = this.hasAttribute('range');
-        const disabled = this.hasAttribute('disabled');
-        const readonly = this.hasAttribute('readonly');
-        this.containerEl.setAttribute('aria-valuemin', String(min));
-        this.containerEl.setAttribute('aria-valuemax', String(max));
-        this.containerEl.setAttribute('aria-valuenow', String(isRange ? this.currentRange[0] : this.currentValue));
-        this.containerEl.setAttribute('aria-valuetext', isRange
-            ? `${this.currentRange[0]} to ${this.currentRange[1]}`
-            : String(this.currentValue));
-        this.containerEl.setAttribute('aria-disabled', String(disabled));
-        this.containerEl.setAttribute('aria-readonly', String(readonly));
-        this.containerEl.setAttribute('tabindex', disabled || readonly ? '-1' : '0');
-    }
-    setThumbPosition(thumb, percent) {
-        if (this.hasAttribute('vertical')) {
-            thumb.style.left = '';
-            thumb.style.bottom = `${percent}%`;
-        }
-        else {
-            thumb.style.bottom = '';
-            thumb.style.left = `${percent}%`;
-        }
-    }
-    valueToPercent(value) {
-        const min = this.getNumberAttr('min', 0);
-        const max = this.getNumberAttr('max', 100);
-        if (max === min)
-            return 0;
-        return ((value - min) / (max - min)) * 100;
-    }
-    percentToValue(percent) {
-        const min = this.getNumberAttr('min', 0);
-        const max = this.getNumberAttr('max', 100);
-        const step = this.getNumberAttr('step', 1);
-        const raw = min + (percent / 100) * (max - min);
-        return this.snapToStep(raw, min, max, step);
-    }
-    snapToStep(value, min, max, step) {
-        const stepped = Math.round(value / step) * step;
-        return Math.min(max, Math.max(min, stepped));
-    }
-    clamp(value, min = this.getNumberAttr('min', 0), max = this.getNumberAttr('max', 100), step = this.getNumberAttr('step', 1)) {
-        return this.snapToStep(Math.min(max, Math.max(min, value)), min, max, step);
-    }
-    getNumberAttr(name, fallback) {
-        const raw = this.getAttribute(name);
-        if (raw === null || raw === '')
-            return fallback;
-        const n = Number(raw);
-        return Number.isFinite(n) ? n : fallback;
-    }
-    normalizeRangeInput(value) {
-        if (typeof value === 'string') {
-            return this.parseRangeAttr(value);
-        }
-        if (!Array.isArray(value) || value.length < 2)
-            return null;
-        const a = Number(value[0]);
-        const b = Number(value[1]);
-        if (!Number.isFinite(a) || !Number.isFinite(b))
-            return null;
-        return [a, b];
-    }
-    parseRangeAttr(raw) {
-        if (!raw)
-            return null;
-        if (raw.startsWith('[')) {
-            try {
-                const parsed = JSON.parse(raw);
-                if (Array.isArray(parsed) && parsed.length === 2) {
-                    const a = Number(parsed[0]);
-                    const b = Number(parsed[1]);
-                    if (Number.isFinite(a) && Number.isFinite(b))
-                        return [a, b];
-                }
-            }
-            catch {
-                return null;
-            }
-            return null;
-        }
-        const parts = raw.split(',').map((s) => Number(s.trim()));
-        if (parts.length !== 2 || parts.some((n) => !Number.isFinite(n)))
-            return null;
-        return [parts[0], parts[1]];
-    }
-    parseMarks() {
-        const raw = this.getAttribute('marks');
-        if (!raw)
-            return [];
-        if (raw.startsWith('[')) {
-            try {
-                const parsed = JSON.parse(raw);
-                if (Array.isArray(parsed)) {
-                    return parsed
-                        .map((n) => Number(n))
-                        .filter((n) => Number.isFinite(n));
-                }
-            }
-            catch {
-                return [];
-            }
-            return [];
-        }
-        return raw
-            .split(',')
-            .map((s) => Number(s.trim()))
-            .filter((n) => Number.isFinite(n));
-    }
-    parseMarkLabels() {
-        const raw = this.getAttribute('mark-labels');
-        if (!raw)
-            return {};
-        try {
-            const parsed = JSON.parse(raw);
-            const result = {};
-            Object.entries(parsed).forEach(([k, v]) => {
-                result[Number(k)] = v;
-            });
-            return result;
-        }
-        catch {
-            return {};
-        }
-    }
-    isInteractive() {
-        return !this.hasAttribute('disabled') && !this.hasAttribute('readonly');
-    }
-    getTrackPercent(clientX, clientY) {
-        if (!this.trackEl)
-            return 0;
-        const rect = this.trackEl.getBoundingClientRect();
-        if (this.hasAttribute('vertical')) {
-            const y = Math.max(rect.top, Math.min(rect.bottom, clientY));
-            return ((rect.bottom - y) / rect.height) * 100;
-        }
-        const x = Math.max(rect.left, Math.min(rect.right, clientX));
-        return ((x - rect.left) / rect.width) * 100;
-    }
-    handleThumbPointerDown(e, thumb) {
-        if (!this.isInteractive())
-            return;
-        e.preventDefault();
-        this.isDragging = true;
-        this.activeThumb = thumb;
-        this.setThumbActive(thumb, true);
-        document.addEventListener('pointermove', this.boundPointerMove);
-        document.addEventListener('pointerup', this.boundPointerUp);
-    }
-    handleTrackClick(e) {
-        if (!this.isInteractive() || !this.trackEl)
-            return;
-        if (e.target.closest(`.${CLASS}__thumb`))
-            return;
-        const percent = this.getTrackPercent(e.clientX, e.clientY);
-        const value = this.percentToValue(percent);
-        this.commitValueAtPosition(value);
-    }
-    handlePointerMove(e) {
-        if (!this.isDragging || !this.isInteractive())
-            return;
-        const percent = this.getTrackPercent(e.clientX, e.clientY);
-        const value = this.percentToValue(percent);
-        this.applyDragValue(value);
-    }
-    handlePointerUp() {
-        if (!this.isDragging)
-            return;
-        if (this.activeThumb) {
-            this.setThumbActive(this.activeThumb, false);
-        }
-        this.isDragging = false;
-        this.activeThumb = null;
-        document.removeEventListener('pointermove', this.boundPointerMove);
-        document.removeEventListener('pointerup', this.boundPointerUp);
-        this.syncThumbTooltips();
-        if (this.hasAttribute('range')) {
-            this.setAttribute('range', `${this.currentRange[0]},${this.currentRange[1]}`);
-        }
-        else {
-            this.setAttribute('value', String(this.currentValue));
-        }
-        this.syncA11y();
-    }
-    setThumbActive(thumb, active) {
-        if (this.hasAttribute('range')) {
-            const el = this.thumbEls[thumb === 'min' ? 0 : 1];
-            el?.classList.toggle(`${CLASS}__thumb--active`, active);
-            return;
-        }
-        this.thumbEls[0]?.classList.toggle(`${CLASS}__thumb--active`, active);
-    }
-    applyDragValue(value) {
-        const next = this.clamp(value);
-        if (this.hasAttribute('range')) {
-            const [lo, hi] = this.currentRange;
-            if (this.activeThumb === 'min') {
-                this.currentRange = [Math.min(next, hi), hi];
-            }
-            else if (this.activeThumb === 'max') {
-                this.currentRange = [lo, Math.max(next, lo)];
-            }
-            else {
-                const distMin = Math.abs(next - lo);
-                const distMax = Math.abs(next - hi);
-                if (distMin <= distMax) {
-                    this.currentRange = [Math.min(next, hi), hi];
-                    this.activeThumb = 'min';
-                }
-                else {
-                    this.currentRange = [lo, Math.max(next, lo)];
-                    this.activeThumb = 'max';
-                }
-            }
-            this.syncVisuals();
-            this.dispatchRangeChange();
-        }
-        else {
-            this.currentValue = next;
-            this.syncVisuals();
-            this.syncA11y();
-            this.dispatchValueChange();
-        }
-    }
-    commitValueAtPosition(value) {
-        const next = this.clamp(value);
-        if (this.hasAttribute('range')) {
-            const [lo, hi] = this.currentRange;
-            const distMin = Math.abs(next - lo);
-            const distMax = Math.abs(next - hi);
-            if (distMin <= distMax) {
-                this.currentRange = [Math.min(next, hi), hi];
-            }
-            else {
-                this.currentRange = [lo, Math.max(next, lo)];
-            }
-            this.setAttribute('range', `${this.currentRange[0]},${this.currentRange[1]}`);
-            this.syncVisuals();
-            this.dispatchRangeChange();
-        }
-        else {
-            this.currentValue = next;
-            this.setAttribute('value', String(this.currentValue));
-            this.syncVisuals();
-            this.syncA11y();
-            this.dispatchValueChange();
-        }
-    }
-    handleKeyDown(e, thumb = 'single') {
-        if (!this.isInteractive())
-            return;
-        const step = this.getNumberAttr('step', 1);
-        const min = this.getNumberAttr('min', 0);
-        const max = this.getNumberAttr('max', 100);
-        let newValue;
-        if (this.hasAttribute('range') && thumb !== 'single') {
-            const currentThumbValue = thumb === 'min'
-                ? this.currentRange[0]
-                : this.currentRange[1];
-            switch (e.key) {
-                case 'ArrowLeft':
-                case 'ArrowDown':
-                    newValue = this.clamp(currentThumbValue - step, min, max);
-                    break;
-                case 'ArrowRight':
-                case 'ArrowUp':
-                    newValue = this.clamp(currentThumbValue + step, min, max);
-                    break;
-                case 'Home':
-                    newValue = min;
-                    break;
-                case 'End':
-                    newValue = max;
-                    break;
-                default:
-                    return;
-            }
-            const next = [...this.currentRange];
-            if (thumb === 'min') {
-                next[0] = newValue;
-            }
-            else {
-                next[1] = newValue;
-            }
-            if (next[0] > next[1])
-                return;
-            e.preventDefault();
-            this.currentRange = next;
-            this.afterKeyboard();
-            return;
-        }
-        if (this.hasAttribute('range'))
-            return;
-        switch (e.key) {
-            case 'ArrowLeft':
-            case 'ArrowDown':
-                newValue = this.clamp(this.currentValue - step, min, max);
-                break;
-            case 'ArrowRight':
-            case 'ArrowUp':
-                newValue = this.clamp(this.currentValue + step, min, max);
-                break;
-            case 'Home':
-                newValue = min;
-                break;
-            case 'End':
-                newValue = max;
-                break;
-            default:
-                return;
-        }
-        e.preventDefault();
-        this.currentValue = newValue;
-        this.afterKeyboard();
-    }
-    afterKeyboard() {
-        if (this.hasAttribute('range')) {
-            this.setAttribute('range', `${this.currentRange[0]},${this.currentRange[1]}`);
-            this.syncVisuals();
-            this.dispatchRangeChange();
-        }
-        else {
-            this.setAttribute('value', String(this.currentValue));
-            this.syncVisuals();
-            this.syncA11y();
-            this.dispatchValueChange();
-        }
-    }
-    dispatchValueChange() {
-        this.dispatchEvent(new CustomEvent('db-change', {
-            bubbles: true,
-            composed: true,
-            detail: { value: this.currentValue },
-        }));
-    }
-    dispatchRangeChange() {
-        this.dispatchEvent(new CustomEvent('db-change', {
-            bubbles: true,
-            composed: true,
-            detail: { range: [...this.currentRange] },
-        }));
-    }
-}
-if (!customElements.get('db-range-slider')) {
-    customElements.define('db-range-slider', DbRangeSlider);
-}
-
-export { DbRangeSlider };
+const t="designbase-wc-range-slider";class DbRangeSlider extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.headerEl=null,this.labelEl=null,this.valuesEl=null,this.containerEl=null,this.trackEl=null,this.fillEl=null,this.thumbEls=[],this.currentValue=50,this.currentRange=[25,75],this.isDragging=!1,this.activeThumb=null,this.boundTrackClick=t=>this.handleTrackClick(t),this.boundPointerMove=t=>this.handlePointerMove(t),this.boundPointerUp=()=>this.handlePointerUp(),this.boundContainerKeyDown=t=>this.handleKeyDown(t),this.eventsBound=!1}static get observedAttributes(){return["value","range","min","max","step","size","variant","show-value","show-label","label","value-position","value-fixed","show-thumb-tooltip","show-marks","marks","mark-labels","disabled","readonly","full-width","vertical"]}connectedCallback(){this.built||(this.build(),this.built=!0),this.readAttributeValues(),this.syncClasses(),this.syncDomOrder(),this.syncStructure(),this.syncVisuals(),this.syncA11y(),this.bindEvents()}disconnectedCallback(){this.unbindEvents()}attributeChangedCallback(t){this.built&&(this.readAttributeValues(),this.syncClasses(),this.isStructuralAttribute(t)&&(this.syncDomOrder(),this.syncStructure()),this.syncVisuals(),this.syncA11y())}isStructuralAttribute(t){return["range","show-value","show-label","label","value-position","show-marks","marks","mark-labels","vertical"].includes(t)}get value(){return this.currentValue}set value(t){this.currentValue=this.clamp(t),this.setAttribute("value",String(this.currentValue)),this.syncVisuals()}get range(){if(this.hasAttribute("range"))return[...this.currentRange]}set range(t){if(null==t)return this.removeAttribute("range"),void(this.built&&(this.syncStructure(),this.syncVisuals()));const e=this.normalizeRangeInput(t);if(!e)return;const i=[Math.min(e[0],e[1]),Math.max(e[0],e[1])];this.currentRange=[this.clamp(i[0]),this.clamp(i[1])];const s=`${this.currentRange[0]},${this.currentRange[1]}`;this.getAttribute("range")!==s&&this.setAttribute("range",s),this.built&&this.syncVisuals()}build(){this.classList.add(t),this.headerEl=document.createElement("div"),this.headerEl.className=`${t}__header`,this.labelEl=document.createElement("span"),this.labelEl.className=`${t}__label`,this.valuesEl=document.createElement("div"),this.valuesEl.className=`${t}__values`,this.containerEl=document.createElement("div"),this.containerEl.className=`${t}__container`,this.containerEl.setAttribute("role","slider"),this.containerEl.setAttribute("tabindex","0"),this.trackEl=document.createElement("div"),this.trackEl.className=`${t}__track`,this.fillEl=document.createElement("div"),this.fillEl.className=`${t}__fill`,this.trackEl.appendChild(this.fillEl),this.containerEl.appendChild(this.trackEl)}getValuePosition(){const t=this.getAttribute("value-position");return t||(this.shouldShowLabel()?"top":"right")}shouldShowLabel(){return this.hasAttribute("show-label")&&Boolean(this.getAttribute("label")?.trim())}formatValue(t){const e=this.getAttribute("value-fixed");if(null!==e&&""!==e){const i=Number(e);if(Number.isFinite(i))return t.toFixed(i)}return String(t)}syncDomOrder(){if(!this.headerEl||!this.valuesEl||!this.containerEl)return;const t=this.getValuePosition(),e=this.shouldShowLabel(),i=this.hasAttribute("show-value"),s=this.hasAttribute("range");return this.replaceChildren(),this.labelEl&&(this.labelEl.textContent=this.getAttribute("label")?.trim()||""),s||"top"===t?(this.headerEl.replaceChildren(),e&&this.labelEl&&this.headerEl.appendChild(this.labelEl),i&&this.headerEl.appendChild(this.valuesEl),this.headerEl.childElementCount>0&&this.append(this.headerEl),void this.append(this.containerEl)):"bottom"===t?(e&&this.labelEl&&(this.headerEl.replaceChildren(this.labelEl),this.append(this.headerEl)),this.append(this.containerEl),void(i&&this.append(this.valuesEl))):void(i?this.append(this.valuesEl,this.containerEl):this.append(this.containerEl))}bindEvents(){this.eventsBound||(this.trackEl?.addEventListener("click",this.boundTrackClick),this.containerEl?.addEventListener("keydown",this.boundContainerKeyDown),this.eventsBound=!0)}unbindEvents(){this.eventsBound&&(this.trackEl?.removeEventListener("click",this.boundTrackClick),this.containerEl?.removeEventListener("keydown",this.boundContainerKeyDown),document.removeEventListener("pointermove",this.boundPointerMove),document.removeEventListener("pointerup",this.boundPointerUp),this.eventsBound=!1)}readAttributeValues(){const t=this.getNumberAttr("min",0),e=this.getNumberAttr("max",100),i=this.getNumberAttr("step",1);if(this.hasAttribute("range")){const s=this.parseRangeAttr(this.getAttribute("range"));s?this.currentRange=[this.clamp(s[0],t,e,i),this.clamp(s[1],t,e,i)]:this.currentRange.every(Number.isFinite)||(this.currentRange=[25,75])}else this.currentValue=this.clamp(this.getNumberAttr("value",50),t,e,i)}syncClasses(){const e=this.getAttribute("size")||"m",i=this.getAttribute("variant")||"default",s=this.hasAttribute("range"),r=this.getValuePosition(),a=[t,`${t}--${e}`,`${t}--${i}`,`${t}--value-${s?"top":r}`,this.shouldShowLabel()?`${t}--has-label`:"",this.hasAttribute("disabled")?`${t}--disabled`:"",this.hasAttribute("readonly")?`${t}--readonly`:"",this.hasAttribute("full-width")?`${t}--full-width`:"",this.hasAttribute("vertical")?`${t}--vertical`:"",this.hasAttribute("show-thumb-tooltip")?`${t}--show-tooltip`:"",s?`${t}--range`:""].filter(Boolean);if(this.className=a.join(" "),this.trackEl){const e=[`${t}__track`];this.hasAttribute("disabled")&&e.push(`${t}__track--disabled`),this.hasAttribute("readonly")&&e.push(`${t}__track--readonly`),this.trackEl.className=e.join(" ")}}syncStructure(){if(!this.valuesEl||!this.trackEl||!this.fillEl)return;const e=this.hasAttribute("show-value"),i=this.hasAttribute("range"),s=this.hasAttribute("show-marks");if(this.valuesEl.innerHTML="",this.valuesEl.hidden=!e,e)if(i){const e=document.createElement("span");e.className=`${t}__value ${t}__value--min`;const i=document.createElement("span");i.className=`${t}__value-separator`,i.textContent="~",i.setAttribute("aria-hidden","true");const s=document.createElement("span");s.className=`${t}__value ${t}__value--max`,this.valuesEl.append(e,i,s)}else{const e=document.createElement("span");e.className=`${t}__value ${t}__value--single`,this.valuesEl.appendChild(e)}if(this.thumbEls.forEach(t=>t.remove()),this.thumbEls=[],this.trackEl.querySelectorAll(`.${t}__mark`).forEach(t=>t.remove()),s){const e=this.parseMarks();if(e.length>0){const i=this.parseMarkLabels();e.forEach(e=>{const s=document.createElement("div");if(s.className=`${t}__mark`,s.setAttribute("aria-hidden","true"),this.isMarkActive(e)&&s.classList.add(`${t}__mark--active`),this.hasAttribute("vertical")?s.style.bottom=`${this.valueToPercent(e)}%`:s.style.left=`${this.valueToPercent(e)}%`,void 0!==i[e]){const r=document.createElement("span");r.className=`${t}__mark-label`,r.textContent=i[e],s.appendChild(r)}this.trackEl.insertBefore(s,this.fillEl)})}}const r=i?2:1,a=this.hasAttribute("disabled")||this.hasAttribute("readonly");for(let e=0;e<r;e++){const s=document.createElement("div");s.className=`${t}__thumb`,s.setAttribute("role","slider"),s.setAttribute("draggable","false"),s.setAttribute("tabindex",a?"-1":"0");const r=i?0===e?"min":"max":"single";i&&(s.dataset.thumb=r),s.addEventListener("pointerdown",t=>this.handleThumbPointerDown(t,r)),s.addEventListener("keydown",t=>this.handleKeyDown(t,r));const n=document.createElement("span");n.className=`${t}__thumb-tooltip`,n.setAttribute("aria-hidden","true"),n.hidden=!0,s.appendChild(n),this.trackEl.appendChild(s),this.thumbEls.push(s)}}isMarkActive(t){if(this.hasAttribute("range")){const[e,i]=this.currentRange;return t>=e&&t<=i}return t<=this.currentValue}syncVisuals(){if(!this.fillEl)return;const e=this.hasAttribute("range"),i=this.getNumberAttr("min",0),s=this.getNumberAttr("max",100);if(e){const[e,r]=this.currentRange,a=this.valueToPercent(e),n=this.valueToPercent(r);this.hasAttribute("vertical")?(this.fillEl.style.left="",this.fillEl.style.width="",this.fillEl.style.bottom=`${a}%`,this.fillEl.style.height=n-a+"%"):(this.fillEl.style.bottom="",this.fillEl.style.height="",this.fillEl.style.left=`${a}%`,this.fillEl.style.width=n-a+"%"),this.thumbEls[0]&&(this.setThumbPosition(this.thumbEls[0],a),this.thumbEls[0].setAttribute("aria-valuemin",String(i)),this.thumbEls[0].setAttribute("aria-valuemax",String(r)),this.thumbEls[0].setAttribute("aria-valuenow",String(e))),this.thumbEls[1]&&(this.setThumbPosition(this.thumbEls[1],n),this.thumbEls[1].setAttribute("aria-valuemin",String(e)),this.thumbEls[1].setAttribute("aria-valuemax",String(s)),this.thumbEls[1].setAttribute("aria-valuenow",String(r)));const h=this.valuesEl?.querySelector(`.${t}__value--min`),l=this.valuesEl?.querySelector(`.${t}__value--max`);h&&(h.textContent=this.formatValue(e)),l&&(l.textContent=this.formatValue(r))}else{const e=this.valueToPercent(this.currentValue);this.hasAttribute("vertical")?(this.fillEl.style.left="",this.fillEl.style.width="",this.fillEl.style.bottom="0",this.fillEl.style.height=`${e}%`):(this.fillEl.style.bottom="",this.fillEl.style.height="",this.fillEl.style.left="0",this.fillEl.style.width=`${e}%`),this.thumbEls[0]&&(this.setThumbPosition(this.thumbEls[0],e),this.thumbEls[0].setAttribute("aria-valuemin",String(i)),this.thumbEls[0].setAttribute("aria-valuemax",String(s)),this.thumbEls[0].setAttribute("aria-valuenow",String(this.currentValue)));const r=this.valuesEl?.querySelector(`.${t}__value--single`);r&&(r.textContent=this.formatValue(this.currentValue))}this.syncThumbTooltips(),this.trackEl?.querySelectorAll(`.${t}__mark`).forEach(e=>{const i=e instanceof HTMLElement?parseFloat(e.style.left):NaN,s=e instanceof HTMLElement?parseFloat(e.style.bottom):NaN,r=Number.isFinite(i)?i:s;if(!Number.isFinite(r))return;const a=this.percentToValue(r);e.classList.toggle(`${t}__mark--active`,this.isMarkActive(a))})}syncThumbTooltips(){const e=this.hasAttribute("range"),i=this.hasAttribute("show-thumb-tooltip");this.thumbEls.forEach((s,r)=>{const a=s.querySelector(`.${t}__thumb-tooltip`);if(!a)return;if(!i)return void(a.hidden=!0);a.hidden=!1;const n=e?0===r?this.currentRange[0]:this.currentRange[1]:this.currentValue;a.textContent=this.formatValue(n)})}syncA11y(){if(!this.containerEl)return;const t=this.getNumberAttr("min",0),e=this.getNumberAttr("max",100),i=this.hasAttribute("range"),s=this.hasAttribute("disabled"),r=this.hasAttribute("readonly");this.containerEl.setAttribute("aria-valuemin",String(t)),this.containerEl.setAttribute("aria-valuemax",String(e)),this.containerEl.setAttribute("aria-valuenow",String(i?this.currentRange[0]:this.currentValue)),this.containerEl.setAttribute("aria-valuetext",i?`${this.currentRange[0]} to ${this.currentRange[1]}`:String(this.currentValue)),this.containerEl.setAttribute("aria-disabled",String(s)),this.containerEl.setAttribute("aria-readonly",String(r)),this.containerEl.setAttribute("tabindex",s||r?"-1":"0")}setThumbPosition(t,e){this.hasAttribute("vertical")?(t.style.left="",t.style.bottom=`${e}%`):(t.style.bottom="",t.style.left=`${e}%`)}valueToPercent(t){const e=this.getNumberAttr("min",0),i=this.getNumberAttr("max",100);return i===e?0:(t-e)/(i-e)*100}percentToValue(t){const e=this.getNumberAttr("min",0),i=this.getNumberAttr("max",100),s=this.getNumberAttr("step",1),r=e+t/100*(i-e);return this.snapToStep(r,e,i,s)}snapToStep(t,e,i,s){const r=Math.round(t/s)*s;return Math.min(i,Math.max(e,r))}clamp(t,e=this.getNumberAttr("min",0),i=this.getNumberAttr("max",100),s=this.getNumberAttr("step",1)){return this.snapToStep(Math.min(i,Math.max(e,t)),e,i,s)}getNumberAttr(t,e){const i=this.getAttribute(t);if(null===i||""===i)return e;const s=Number(i);return Number.isFinite(s)?s:e}normalizeRangeInput(t){if("string"==typeof t)return this.parseRangeAttr(t);if(!Array.isArray(t)||t.length<2)return null;const e=Number(t[0]),i=Number(t[1]);return Number.isFinite(e)&&Number.isFinite(i)?[e,i]:null}parseRangeAttr(t){if(!t)return null;if(t.startsWith("[")){try{const e=JSON.parse(t);if(Array.isArray(e)&&2===e.length){const t=Number(e[0]),i=Number(e[1]);if(Number.isFinite(t)&&Number.isFinite(i))return[t,i]}}catch{return null}return null}const e=t.split(",").map(t=>Number(t.trim()));return 2!==e.length||e.some(t=>!Number.isFinite(t))?null:[e[0],e[1]]}parseMarks(){const t=this.getAttribute("marks");if(!t)return[];if(t.startsWith("[")){try{const e=JSON.parse(t);if(Array.isArray(e))return e.map(t=>Number(t)).filter(t=>Number.isFinite(t))}catch{return[]}return[]}return t.split(",").map(t=>Number(t.trim())).filter(t=>Number.isFinite(t))}parseMarkLabels(){const t=this.getAttribute("mark-labels");if(!t)return{};try{const e=JSON.parse(t),i={};return Object.entries(e).forEach(([t,e])=>{i[Number(t)]=e}),i}catch{return{}}}isInteractive(){return!this.hasAttribute("disabled")&&!this.hasAttribute("readonly")}getTrackPercent(t,e){if(!this.trackEl)return 0;const i=this.trackEl.getBoundingClientRect();if(this.hasAttribute("vertical")){const t=Math.max(i.top,Math.min(i.bottom,e));return(i.bottom-t)/i.height*100}return(Math.max(i.left,Math.min(i.right,t))-i.left)/i.width*100}handleThumbPointerDown(t,e){this.isInteractive()&&(t.preventDefault(),this.isDragging=!0,this.activeThumb=e,this.setThumbActive(e,!0),document.addEventListener("pointermove",this.boundPointerMove),document.addEventListener("pointerup",this.boundPointerUp))}handleTrackClick(e){if(!this.isInteractive()||!this.trackEl)return;if(e.target.closest(`.${t}__thumb`))return;const i=this.getTrackPercent(e.clientX,e.clientY),s=this.percentToValue(i);this.commitValueAtPosition(s)}handlePointerMove(t){if(!this.isDragging||!this.isInteractive())return;const e=this.getTrackPercent(t.clientX,t.clientY),i=this.percentToValue(e);this.applyDragValue(i)}handlePointerUp(){this.isDragging&&(this.activeThumb&&this.setThumbActive(this.activeThumb,!1),this.isDragging=!1,this.activeThumb=null,document.removeEventListener("pointermove",this.boundPointerMove),document.removeEventListener("pointerup",this.boundPointerUp),this.syncThumbTooltips(),this.hasAttribute("range")?this.setAttribute("range",`${this.currentRange[0]},${this.currentRange[1]}`):this.setAttribute("value",String(this.currentValue)),this.syncA11y())}setThumbActive(e,i){if(this.hasAttribute("range")){const s=this.thumbEls["min"===e?0:1];return void s?.classList.toggle(`${t}__thumb--active`,i)}this.thumbEls[0]?.classList.toggle(`${t}__thumb--active`,i)}applyDragValue(t){const e=this.clamp(t);if(this.hasAttribute("range")){const[t,i]=this.currentRange;if("min"===this.activeThumb)this.currentRange=[Math.min(e,i),i];else if("max"===this.activeThumb)this.currentRange=[t,Math.max(e,t)];else{Math.abs(e-t)<=Math.abs(e-i)?(this.currentRange=[Math.min(e,i),i],this.activeThumb="min"):(this.currentRange=[t,Math.max(e,t)],this.activeThumb="max")}this.syncVisuals(),this.dispatchRangeChange()}else this.currentValue=e,this.syncVisuals(),this.syncA11y(),this.dispatchValueChange()}commitValueAtPosition(t){const e=this.clamp(t);if(this.hasAttribute("range")){const[t,i]=this.currentRange,s=Math.abs(e-t),r=Math.abs(e-i);this.currentRange=s<=r?[Math.min(e,i),i]:[t,Math.max(e,t)],this.setAttribute("range",`${this.currentRange[0]},${this.currentRange[1]}`),this.syncVisuals(),this.dispatchRangeChange()}else this.currentValue=e,this.setAttribute("value",String(this.currentValue)),this.syncVisuals(),this.syncA11y(),this.dispatchValueChange()}handleKeyDown(t,e="single"){if(!this.isInteractive())return;const i=this.getNumberAttr("step",1),s=this.getNumberAttr("min",0),r=this.getNumberAttr("max",100);let a;if(this.hasAttribute("range")&&"single"!==e){const n="min"===e?this.currentRange[0]:this.currentRange[1];switch(t.key){case"ArrowLeft":case"ArrowDown":a=this.clamp(n-i,s,r);break;case"ArrowRight":case"ArrowUp":a=this.clamp(n+i,s,r);break;case"Home":a=s;break;case"End":a=r;break;default:return}const h=[...this.currentRange];if("min"===e?h[0]=a:h[1]=a,h[0]>h[1])return;return t.preventDefault(),this.currentRange=h,void this.afterKeyboard()}if(!this.hasAttribute("range")){switch(t.key){case"ArrowLeft":case"ArrowDown":a=this.clamp(this.currentValue-i,s,r);break;case"ArrowRight":case"ArrowUp":a=this.clamp(this.currentValue+i,s,r);break;case"Home":a=s;break;case"End":a=r;break;default:return}t.preventDefault(),this.currentValue=a,this.afterKeyboard()}}afterKeyboard(){this.hasAttribute("range")?(this.setAttribute("range",`${this.currentRange[0]},${this.currentRange[1]}`),this.syncVisuals(),this.dispatchRangeChange()):(this.setAttribute("value",String(this.currentValue)),this.syncVisuals(),this.syncA11y(),this.dispatchValueChange())}dispatchValueChange(){this.dispatchEvent(new CustomEvent("db-change",{bubbles:!0,composed:!0,detail:{value:this.currentValue}}))}dispatchRangeChange(){this.dispatchEvent(new CustomEvent("db-change",{bubbles:!0,composed:!0,detail:{range:[...this.currentRange]}}))}}customElements.get("db-range-slider")||customElements.define("db-range-slider",DbRangeSlider);export{DbRangeSlider};