@designbasekorea/ui-wc 0.5.5 → 0.5.6

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

@@ -1 +1,811 @@
-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};
+/**
+ * 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 };