@designbasekorea/ui-wc 0.8.0 → 0.8.2

package/dist/esm/components/db-progress.js

@@ -1 +1 @@
-const e=["s","m","l"],t=["default","success","warning","danger"],r=["default","minimal"];function createSvgCircle(e,t,r,s,i,a){const c=document.createElementNS("http://www.w3.org/2000/svg","circle");return c.setAttribute("class",e),c.setAttribute("cx",String(t)),c.setAttribute("cy",String(r)),c.setAttribute("r",String(s)),c.setAttribute("stroke-width",String(i)),a&&Object.entries(a).forEach(([e,t])=>c.setAttribute(e,t)),c}class DbProgress extends HTMLElement{constructor(){super(...arguments),this.structureSignature="",this.circumference=0}static get observedAttributes(){return["value","max","size","variant","type","circular-style","show-value","animated","striped","glow","gradient"]}get value(){return Number(this.getAttribute("value")||0)}set value(e){this.setAttribute("value",String(e))}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}render(){const s=Number(this.getAttribute("max")||100),i=Math.min(Math.max(this.value/s*100,0),100),a=this.getAttribute("size")||"m",c=this.getAttribute("variant")||"default",n=this.getAttribute("type")||"linear",u=this.getAttribute("circular-style")||"default",l=e.includes(a)?a:"m",d=t.includes(c)?c:"default",o=r.includes(u)?u:"default",g=this.hasAttribute("show-value");this.className=["designbase-wc-progress",`designbase-wc-progress--size-${l}`,`designbase-wc-progress--variant-${d}`,`designbase-wc-progress--type-${n}`,"circular"===n&&"minimal"===o?"designbase-wc-progress--circular-minimal":"",this.hasAttribute("animated")?"designbase-wc-progress--animated":"",this.hasAttribute("striped")?"designbase-wc-progress--striped":"",this.hasAttribute("gradient")?"designbase-wc-progress--gradient":"",this.hasAttribute("glow")?"designbase-wc-progress--glow":""].filter(Boolean).join(" "),this.setAttribute("role","progressbar"),this.setAttribute("aria-valuemin","0"),this.setAttribute("aria-valuemax",String(s)),this.setAttribute("aria-valuenow",String(this.value));const h=[n,o,l,g?"1":"0"].join("|");h!==this.structureSignature&&(this.structureSignature=h,"circular"===n?this.buildCircular(o,l,g):this.buildLinear(g)),"circular"===n?this.updateCircular(i):this.updateLinear(i)}buildLinear(e){this.circularBarEl=void 0,this.circularValueEl=void 0;const t=document.createElement("div");t.className="designbase-wc-progress__linear";const r=document.createElement("div");r.className="designbase-wc-progress__track";const s=document.createElement("div");if(s.className="designbase-wc-progress__bar",r.append(s),t.append(r),this.barEl=s,e){const e=document.createElement("span");e.className="designbase-wc-progress__value",t.append(e),this.linearValueEl=e}else this.linearValueEl=void 0;this.replaceChildren(t)}updateLinear(e){this.barEl&&(this.barEl.style.width=`${e}%`),this.linearValueEl&&(this.linearValueEl.textContent=`${Math.round(e)}%`)}buildCircular(e,t,r){this.barEl=void 0,this.linearValueEl=void 0;const{svgSize:s,radius:i,strokeWidth:a,center:c}=function getCircularMetrics(e,t){if("minimal"===e)return{svgSize:20,radius:8,strokeWidth:2,center:10};switch(t){case"s":return{svgSize:64,radius:26,strokeWidth:4,center:32};case"l":return{svgSize:160,radius:62,strokeWidth:10,center:80};default:return{svgSize:120,radius:45,strokeWidth:8,center:60}}}(e,t);this.circumference=2*Math.PI*i;const n=document.createElement("div");n.className="designbase-wc-progress__circular";const u=document.createElementNS("http://www.w3.org/2000/svg","svg");u.setAttribute("class","designbase-wc-progress__circular-svg"),u.setAttribute("width",String(s)),u.setAttribute("height",String(s)),u.setAttribute("viewBox",`0 0 ${s} ${s}`),u.setAttribute("aria-hidden","true");const l=createSvgCircle("designbase-wc-progress__circular-bar",c,c,i,a,{"stroke-dasharray":String(this.circumference),"stroke-dashoffset":String(this.circumference),transform:`rotate(-90 ${c} ${c})`});if(this.circularBarEl=l,u.append(createSvgCircle("designbase-wc-progress__circular-track",c,c,i,a),l),n.append(u),r&&"minimal"!==e){const e=document.createElement("span");e.className="designbase-wc-progress__circular-value",n.append(e),this.circularValueEl=e}else this.circularValueEl=void 0;this.replaceChildren(n)}updateCircular(e){if(this.circularBarEl){const t=this.circumference-e/100*this.circumference;this.circularBarEl.setAttribute("stroke-dashoffset",String(t))}this.circularValueEl&&(this.circularValueEl.textContent=`${Math.round(e)}%`)}}customElements.get("db-progress")||customElements.define("db-progress",DbProgress);export{DbProgress};
+import{PROGRESS_SIZES as e,PROGRESS_VARIANTS as t,PROGRESS_CIRCULAR_STYLES as r}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";function createSvgCircle(e,t,r,s,i,a){const c=document.createElementNS("http://www.w3.org/2000/svg","circle");return c.setAttribute("class",e),c.setAttribute("cx",String(t)),c.setAttribute("cy",String(r)),c.setAttribute("r",String(s)),c.setAttribute("stroke-width",String(i)),a&&Object.entries(a).forEach(([e,t])=>c.setAttribute(e,t)),c}class DbProgress extends HTMLElement{constructor(){super(...arguments),this.structureSignature="",this.circumference=0}static get observedAttributes(){return["value","max","size","variant","type","circular-style","show-value","animated","striped","glow","gradient"]}get value(){return Number(this.getAttribute("value")||0)}set value(e){this.setAttribute("value",String(e))}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}render(){const s=Number(this.getAttribute("max")||100),i=Math.min(Math.max(this.value/s*100,0),100),a=this.getAttribute("size")||"m",c=this.getAttribute("variant")||"default",n=this.getAttribute("type")||"linear",u=this.getAttribute("circular-style")||"default",l=e.includes(a)?a:"m",d=t.includes(c)?c:"default",o=r.includes(u)?u:"default",g=this.hasAttribute("show-value");this.className=["designbase-wc-progress",`designbase-wc-progress--size-${l}`,`designbase-wc-progress--variant-${d}`,`designbase-wc-progress--type-${n}`,"circular"===n&&"minimal"===o?"designbase-wc-progress--circular-minimal":"",this.hasAttribute("animated")?"designbase-wc-progress--animated":"",this.hasAttribute("striped")?"designbase-wc-progress--striped":"",this.hasAttribute("gradient")?"designbase-wc-progress--gradient":"",this.hasAttribute("glow")?"designbase-wc-progress--glow":""].filter(Boolean).join(" "),this.setAttribute("role","progressbar"),this.setAttribute("aria-valuemin","0"),this.setAttribute("aria-valuemax",String(s)),this.setAttribute("aria-valuenow",String(this.value));const h=[n,o,l,g?"1":"0"].join("|");h!==this.structureSignature&&(this.structureSignature=h,"circular"===n?this.buildCircular(o,l,g):this.buildLinear(g)),"circular"===n?this.updateCircular(i):this.updateLinear(i)}buildLinear(e){this.circularBarEl=void 0,this.circularValueEl=void 0;const t=document.createElement("div");t.className="designbase-wc-progress__linear";const r=document.createElement("div");r.className="designbase-wc-progress__track";const s=document.createElement("div");if(s.className="designbase-wc-progress__bar",r.append(s),t.append(r),this.barEl=s,e){const e=document.createElement("span");e.className="designbase-wc-progress__value",t.append(e),this.linearValueEl=e}else this.linearValueEl=void 0;this.replaceChildren(t)}updateLinear(e){this.barEl&&(this.barEl.style.width=`${e}%`),this.linearValueEl&&(this.linearValueEl.textContent=`${Math.round(e)}%`)}buildCircular(e,t,r){this.barEl=void 0,this.linearValueEl=void 0;const{svgSize:s,radius:i,strokeWidth:a,center:c}=function getCircularMetrics(e,t){if("minimal"===e)return{svgSize:20,radius:8,strokeWidth:2,center:10};switch(t){case"s":return{svgSize:64,radius:26,strokeWidth:4,center:32};case"l":return{svgSize:160,radius:62,strokeWidth:10,center:80};default:return{svgSize:120,radius:45,strokeWidth:8,center:60}}}(e,t);this.circumference=2*Math.PI*i;const n=document.createElement("div");n.className="designbase-wc-progress__circular";const u=document.createElementNS("http://www.w3.org/2000/svg","svg");u.setAttribute("class","designbase-wc-progress__circular-svg"),u.setAttribute("width",String(s)),u.setAttribute("height",String(s)),u.setAttribute("viewBox",`0 0 ${s} ${s}`),u.setAttribute("aria-hidden","true");const l=createSvgCircle("designbase-wc-progress__circular-bar",c,c,i,a,{"stroke-dasharray":String(this.circumference),"stroke-dashoffset":String(this.circumference),transform:`rotate(-90 ${c} ${c})`});if(this.circularBarEl=l,u.append(createSvgCircle("designbase-wc-progress__circular-track",c,c,i,a),l),n.append(u),r&&"minimal"!==e){const e=document.createElement("span");e.className="designbase-wc-progress__circular-value",n.append(e),this.circularValueEl=e}else this.circularValueEl=void 0;this.replaceChildren(n)}updateCircular(e){if(this.circularBarEl){const t=this.circumference-e/100*this.circumference;this.circularBarEl.setAttribute("stroke-dashoffset",String(t))}this.circularValueEl&&(this.circularValueEl.textContent=`${Math.round(e)}%`)}}customElements.get("db-progress")||customElements.define("db-progress",DbProgress);export{DbProgress};

package/dist/esm/components/db-progressbar.js

@@ -1 +1 @@
-const e=["s","m","l"],t=["default","primary","success","warning","danger"],s=["solid","striped","animated"];class DbProgressbar extends HTMLElement{static get observedAttributes(){return["value","min","max","size","variant","bar-style","show-label","label","label-position","full-width","disabled"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}render(){const a=Number(this.getAttribute("min")||0),r=Number(this.getAttribute("max")||100),i=Number(this.getAttribute("value")||0),n=Math.max(a,Math.min(r,i)),b=r===a?0:(n-a)/(r-a)*100,l=this.getAttribute("size")||"m",d=this.getAttribute("variant")||"default",o=this.getAttribute("bar-style")||"solid",c=this.getAttribute("label-position")||"top",g=this.hasAttribute("show-label"),u=this.getAttribute("label")||(g?`${Math.round(b)}%`:""),m=this.hasAttribute("disabled");this.className=["designbase-wc-progressbar",`designbase-wc-progressbar--${e.includes(l)?l:"m"}`,`designbase-wc-progressbar--${t.includes(d)?d:"default"}`,`designbase-wc-progressbar--${s.includes(o)?o:"solid"}`,this.hasAttribute("full-width")&&"designbase-wc-progressbar--full-width",m&&"designbase-wc-progressbar--disabled",100===b&&"designbase-wc-progressbar--completed"].filter(Boolean).join(" "),this.setAttribute("role","progressbar"),this.setAttribute("aria-valuemin",String(a)),this.setAttribute("aria-valuemax",String(r)),this.setAttribute("aria-valuenow",String(n)),u&&this.setAttribute("aria-label",u),this.replaceChildren();const p=document.createElement("div");if(p.className=`designbase-wc-progressbar__container designbase-wc-progressbar__container--${c}`,u&&"inside"!==c){const e=document.createElement("span");e.className=`designbase-wc-progressbar__label designbase-wc-progressbar__label--${c}`,e.textContent=u,p.append(e)}const h=document.createElement("div");h.className="designbase-wc-progressbar__track";const w=document.createElement("div");if(w.className="designbase-wc-progressbar__fill",w.style.width=`${b}%`,u&&"inside"===c){const e=document.createElement("span");e.className="designbase-wc-progressbar__fill-label",e.textContent=u,w.append(e)}h.append(w),p.append(h),this.append(p)}}customElements.get("db-progressbar")||customElements.define("db-progressbar",DbProgressbar);export{DbProgressbar};
+import{PROGRESS_BAR_SIZES as e,PROGRESS_BAR_VARIANTS as t,PROGRESS_BAR_STYLES as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbProgressbar extends HTMLElement{static get observedAttributes(){return["value","min","max","size","variant","bar-style","show-label","label","label-position","full-width","disabled"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}render(){const r=Number(this.getAttribute("min")||0),a=Number(this.getAttribute("max")||100),i=Number(this.getAttribute("value")||0),n=Math.max(r,Math.min(a,i)),b=a===r?0:(n-r)/(a-r)*100,l=this.getAttribute("size")||"m",o=this.getAttribute("variant")||"default",d=this.getAttribute("bar-style")||"solid",c=this.getAttribute("label-position")||"top",g=this.hasAttribute("show-label"),u=this.getAttribute("label")||(g?`${Math.round(b)}%`:""),m=this.hasAttribute("disabled");this.className=["designbase-wc-progressbar",`designbase-wc-progressbar--${e.includes(l)?l:"m"}`,`designbase-wc-progressbar--${t.includes(o)?o:"default"}`,`designbase-wc-progressbar--${s.includes(d)?d:"solid"}`,this.hasAttribute("full-width")&&"designbase-wc-progressbar--full-width",m&&"designbase-wc-progressbar--disabled",100===b&&"designbase-wc-progressbar--completed"].filter(Boolean).join(" "),this.setAttribute("role","progressbar"),this.setAttribute("aria-valuemin",String(r)),this.setAttribute("aria-valuemax",String(a)),this.setAttribute("aria-valuenow",String(n)),u&&this.setAttribute("aria-label",u),this.replaceChildren();const p=document.createElement("div");if(p.className=`designbase-wc-progressbar__container designbase-wc-progressbar__container--${c}`,u&&"inside"!==c){const e=document.createElement("span");e.className=`designbase-wc-progressbar__label designbase-wc-progressbar__label--${c}`,e.textContent=u,p.append(e)}const h=document.createElement("div");h.className="designbase-wc-progressbar__track";const w=document.createElement("div");if(w.className="designbase-wc-progressbar__fill",w.style.width=`${b}%`,u&&"inside"===c){const e=document.createElement("span");e.className="designbase-wc-progressbar__fill-label",e.textContent=u,w.append(e)}h.append(w),p.append(h),this.append(p)}}customElements.get("db-progressbar")||customElements.define("db-progressbar",DbProgressbar);export{DbProgressbar};

package/dist/esm/components/db-radio.d.ts

@@ -6,6 +6,7 @@ declare class DbRadio extends HTMLElement {
     private dot?;
     private labelEl?;
     private built;
+    private userInteracted;
     get checked(): boolean;
     set checked(value: boolean);
     get disabled(): boolean;

package/dist/esm/components/db-radio.js

@@ -1 +1 @@
-const t=["s","m","l"];class DbRadio extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.handleChange=()=>{if(!this.input||this.disabled||this.readOnly)return;const t=this.input.checked;this.toggleAttribute("checked",t),this.syncVisual(),this.syncClasses(),this.dispatchEvent(new CustomEvent("db-change",{detail:{checked:t,selected:t,value:this.getAttribute("value")||""},bubbles:!0,composed:!0}))}}static get observedAttributes(){return["checked","selected","default-checked","default-selected","size","disabled","readonly","required","name","value","has-label"]}get checked(){return this.input?.checked??(this.hasAttribute("checked")||this.hasAttribute("selected"))}set checked(t){this.toggleAttribute("checked",t),this.input&&(this.input.checked=t,this.syncVisual(),this.syncClasses())}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t),this.input&&(this.input.disabled=t),this.syncClasses()}get readOnly(){return this.hasAttribute("readonly")}set readOnly(t){this.toggleAttribute("readonly",t),this.input&&(this.input.readOnly=t),this.syncClasses()}get required(){return this.hasAttribute("required")}set required(t){this.toggleAttribute("required",t),this.input&&(this.input.required=t)}get size(){return this.getAttribute("size")||"m"}set size(t){this.setAttribute("size",t)}connectedCallback(){this.style.display="contents",this.built||this.build(),this.syncState()}attributeChangedCallback(t){if(this.built)return"checked"===t||"selected"===t?(this.input&&(this.input.checked=this.hasAttribute("checked")||this.hasAttribute("selected")),this.syncVisual(),void this.syncClasses()):void this.syncState()}get hasLabel(){return!this.hasAttribute("has-label")||"false"!==this.getAttribute("has-label")}build(){for(this.root=document.createElement("label"),this.root.className="designbase-wc-radio",this.input=document.createElement("input"),this.input.type="radio",this.input.className="designbase-wc-radio__input",this.visual=document.createElement("span"),this.visual.className="designbase-wc-radio__visual",this.visual.setAttribute("aria-hidden","true"),this.dot=document.createElement("span"),this.dot.className="designbase-wc-radio__dot",this.visual.appendChild(this.dot),this.labelEl=document.createElement("span"),this.labelEl.className="designbase-wc-radio__label";this.firstChild;)this.labelEl.appendChild(this.firstChild);this.root.append(this.input,this.visual,this.labelEl),this.appendChild(this.root),this.input.addEventListener("change",this.handleChange),this.built=!0}syncState(){if(!this.root||!this.input||!this.visual)return;const t=this.hasAttribute("checked")||this.hasAttribute("selected")||!this.hasAttribute("checked")&&!this.hasAttribute("selected")&&(this.hasAttribute("default-checked")||this.hasAttribute("default-selected"));this.input.checked=t,this.input.disabled=this.disabled,this.input.readOnly=this.readOnly,this.input.required=this.required,this.input.name=this.getAttribute("name")||"",this.input.value=this.getAttribute("value")||"",this.hasLabel?this.labelEl?.removeAttribute("hidden"):this.labelEl?.setAttribute("hidden",""),this.syncVisual(),this.syncClasses()}syncVisual(){}syncClasses(){if(!this.root||!this.input)return;const e=t.includes(this.size)?this.size:"m",s=this.hasLabel&&Boolean(this.labelEl?.textContent?.trim());this.root.className=["designbase-wc-radio",`designbase-wc-radio--${e}`,this.input.checked&&"designbase-wc-radio--selected",this.disabled&&"designbase-wc-radio--disabled",this.readOnly&&"designbase-wc-radio--readonly",!s&&"designbase-wc-radio--no-label"].filter(Boolean).join(" ")}}customElements.get("db-radio")||customElements.define("db-radio",DbRadio);export{DbRadio};
+import{RADIO_SIZES as t}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbRadio extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.userInteracted=!1,this.handleChange=()=>{if(!this.input||this.disabled||this.readOnly)return;this.userInteracted=!0;const t=this.input.checked;this.toggleAttribute("checked",t),this.syncVisual(),this.syncClasses(),this.dispatchEvent(new CustomEvent("db-change",{detail:{checked:t,selected:t,value:this.getAttribute("value")||""},bubbles:!0,composed:!0}))}}static get observedAttributes(){return["checked","selected","default-checked","default-selected","size","disabled","readonly","required","name","value","has-label"]}get checked(){return this.input?.checked??(this.hasAttribute("checked")||this.hasAttribute("selected"))}set checked(t){this.toggleAttribute("checked",t),this.input&&(this.input.checked=t,this.syncVisual(),this.syncClasses())}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t),this.input&&(this.input.disabled=t),this.syncClasses()}get readOnly(){return this.hasAttribute("readonly")}set readOnly(t){this.toggleAttribute("readonly",t),this.input&&(this.input.readOnly=t),this.syncClasses()}get required(){return this.hasAttribute("required")}set required(t){this.toggleAttribute("required",t),this.input&&(this.input.required=t)}get size(){return this.getAttribute("size")||"m"}set size(t){this.setAttribute("size",t)}connectedCallback(){this.style.display="contents",this.built||this.build(),this.syncState()}attributeChangedCallback(t){if(this.built)return"checked"===t||"selected"===t?(this.input&&(this.input.checked=this.hasAttribute("checked")||this.hasAttribute("selected")),this.syncVisual(),void this.syncClasses()):void this.syncState()}get hasLabel(){return!this.hasAttribute("has-label")||"false"!==this.getAttribute("has-label")}build(){for(this.root=document.createElement("label"),this.root.className="designbase-wc-radio",this.input=document.createElement("input"),this.input.type="radio",this.input.className="designbase-wc-radio__input",this.visual=document.createElement("span"),this.visual.className="designbase-wc-radio__visual",this.visual.setAttribute("aria-hidden","true"),this.dot=document.createElement("span"),this.dot.className="designbase-wc-radio__dot",this.visual.appendChild(this.dot),this.labelEl=document.createElement("span"),this.labelEl.className="designbase-wc-radio__label";this.firstChild;)this.labelEl.appendChild(this.firstChild);this.root.append(this.input,this.visual,this.labelEl),this.appendChild(this.root),this.input.addEventListener("change",this.handleChange),this.built=!0}syncState(){if(!this.root||!this.input||!this.visual)return;const t=this.hasAttribute("checked")||this.hasAttribute("selected")||!this.userInteracted&&(this.hasAttribute("default-checked")||this.hasAttribute("default-selected"));this.input.checked=t,this.input.disabled=this.disabled,this.input.readOnly=this.readOnly,this.input.required=this.required,this.input.name=this.getAttribute("name")||"",this.input.value=this.getAttribute("value")||"",this.hasLabel?this.labelEl?.removeAttribute("hidden"):this.labelEl?.setAttribute("hidden",""),this.syncVisual(),this.syncClasses()}syncVisual(){}syncClasses(){if(!this.root||!this.input)return;const e=t.includes(this.size)?this.size:"m",s=this.hasLabel&&Boolean(this.labelEl?.textContent?.trim());this.root.className=["designbase-wc-radio",`designbase-wc-radio--${e}`,this.input.checked&&"designbase-wc-radio--selected",this.disabled&&"designbase-wc-radio--disabled",this.readOnly&&"designbase-wc-radio--readonly",!s&&"designbase-wc-radio--no-label"].filter(Boolean).join(" ")}}customElements.get("db-radio")||customElements.define("db-radio",DbRadio);export{DbRadio};

package/dist/esm/components/db-range-slider.d.ts

@@ -1,7 +1,3 @@
-/**
- * RangeSlider Web Component
- * packages/ui RangeSlider.tsx와 DOM·동작·스타일 1:1 동기화
- */
 declare class DbRangeSlider extends HTMLElement {
     static get observedAttributes(): string[];
     private built;
@@ -57,6 +53,10 @@ declare class DbRangeSlider extends HTMLElement {
     private getTrackPercent;
     private handleThumbPointerDown;
     private handleTrackClick;
+    /**
+     * 포인터 이동을 프레임당 1회로 병합한다. preventDefault 를 쓰지 않으므로 안전하다. (PERF-RAF)
+     * 메서드가 아니라 필드로 선언해야 rafThrottle 로 감쌀 수 있다.
+     */
     private handlePointerMove;
     private handlePointerUp;
     private setThumbActive;
@@ -67,5 +67,10 @@ declare class DbRangeSlider extends HTMLElement {
     private dispatchValueChange;
     private dispatchRangeChange;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-range-slider': DbRangeSlider;
+    }
+}
 
 export { DbRangeSlider };

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

@@ -1 +1 @@
-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=s?"top":r,n=this.hasAttribute("show-marks")&&this.parseMarks().length>0&&Object.keys(this.parseMarkLabels()).length>0,h=[t,`${t}--${e}`,`${t}--${i}`,`${t}--value-${a}`,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`:"",n?`${t}--has-mark-labels`:""].filter(Boolean);if(this.className=h.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};
+import{rafThrottle as t}from"../core/dom.js";const e="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,this.handlePointerMove=t(t=>{if(!this.isDragging||!this.isInteractive())return;const e=this.getTrackPercent(t.clientX,t.clientY),i=this.percentToValue(e);this.applyDragValue(i)})}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(e),this.headerEl=document.createElement("div"),this.headerEl.className=`${e}__header`,this.labelEl=document.createElement("span"),this.labelEl.className=`${e}__label`,this.valuesEl=document.createElement("div"),this.valuesEl.className=`${e}__values`,this.containerEl=document.createElement("div"),this.containerEl.className=`${e}__container`,this.containerEl.setAttribute("role","slider"),this.containerEl.setAttribute("tabindex","0"),this.trackEl=document.createElement("div"),this.trackEl.className=`${e}__track`,this.fillEl=document.createElement("div"),this.fillEl.className=`${e}__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 t=this.getAttribute("size")||"m",i=this.getAttribute("variant")||"default",s=this.hasAttribute("range"),r=this.getValuePosition(),a=s?"top":r,n=this.hasAttribute("show-marks")&&this.parseMarks().length>0&&Object.keys(this.parseMarkLabels()).length>0,h=[e,`${e}--${t}`,`${e}--${i}`,`${e}--value-${a}`,this.shouldShowLabel()?`${e}--has-label`:"",this.hasAttribute("disabled")?`${e}--disabled`:"",this.hasAttribute("readonly")?`${e}--readonly`:"",this.hasAttribute("full-width")?`${e}--full-width`:"",this.hasAttribute("vertical")?`${e}--vertical`:"",this.hasAttribute("show-thumb-tooltip")?`${e}--show-tooltip`:"",s?`${e}--range`:"",n?`${e}--has-mark-labels`:""].filter(Boolean);if(this.className=h.join(" "),this.trackEl){const t=[`${e}__track`];this.hasAttribute("disabled")&&t.push(`${e}__track--disabled`),this.hasAttribute("readonly")&&t.push(`${e}__track--readonly`),this.trackEl.className=t.join(" ")}}syncStructure(){if(!this.valuesEl||!this.trackEl||!this.fillEl)return;const t=this.hasAttribute("show-value"),i=this.hasAttribute("range"),s=this.hasAttribute("show-marks");if(this.valuesEl.innerHTML="",this.valuesEl.hidden=!t,t)if(i){const t=document.createElement("span");t.className=`${e}__value ${e}__value--min`;const i=document.createElement("span");i.className=`${e}__value-separator`,i.textContent="~",i.setAttribute("aria-hidden","true");const s=document.createElement("span");s.className=`${e}__value ${e}__value--max`,this.valuesEl.append(t,i,s)}else{const t=document.createElement("span");t.className=`${e}__value ${e}__value--single`,this.valuesEl.appendChild(t)}if(this.thumbEls.forEach(t=>t.remove()),this.thumbEls=[],this.trackEl.querySelectorAll(`.${e}__mark`).forEach(t=>t.remove()),s){const t=this.parseMarks();if(t.length>0){const i=this.parseMarkLabels();t.forEach(t=>{const s=document.createElement("div");if(s.className=`${e}__mark`,s.setAttribute("aria-hidden","true"),this.isMarkActive(t)&&s.classList.add(`${e}__mark--active`),this.hasAttribute("vertical")?s.style.bottom=`${this.valueToPercent(t)}%`:s.style.left=`${this.valueToPercent(t)}%`,void 0!==i[t]){const r=document.createElement("span");r.className=`${e}__mark-label`,r.textContent=i[t],s.appendChild(r)}this.trackEl.insertBefore(s,this.fillEl)})}}const r=i?2:1,a=this.hasAttribute("disabled")||this.hasAttribute("readonly");for(let t=0;t<r;t++){const s=document.createElement("div");s.className=`${e}__thumb`,s.setAttribute("role","slider"),s.setAttribute("draggable","false"),s.setAttribute("tabindex",a?"-1":"0");const r=i?0===t?"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=`${e}__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 t=this.hasAttribute("range"),i=this.getNumberAttr("min",0),s=this.getNumberAttr("max",100);if(t){const[t,r]=this.currentRange,a=this.valueToPercent(t),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(t))),this.thumbEls[1]&&(this.setThumbPosition(this.thumbEls[1],n),this.thumbEls[1].setAttribute("aria-valuemin",String(t)),this.thumbEls[1].setAttribute("aria-valuemax",String(s)),this.thumbEls[1].setAttribute("aria-valuenow",String(r)));const h=this.valuesEl?.querySelector(`.${e}__value--min`),l=this.valuesEl?.querySelector(`.${e}__value--max`);h&&(h.textContent=this.formatValue(t)),l&&(l.textContent=this.formatValue(r))}else{const t=this.valueToPercent(this.currentValue);this.hasAttribute("vertical")?(this.fillEl.style.left="",this.fillEl.style.width="",this.fillEl.style.bottom="0",this.fillEl.style.height=`${t}%`):(this.fillEl.style.bottom="",this.fillEl.style.height="",this.fillEl.style.left="0",this.fillEl.style.width=`${t}%`),this.thumbEls[0]&&(this.setThumbPosition(this.thumbEls[0],t),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(`.${e}__value--single`);r&&(r.textContent=this.formatValue(this.currentValue))}this.syncThumbTooltips(),this.trackEl?.querySelectorAll(`.${e}__mark`).forEach(t=>{const i=t instanceof HTMLElement?parseFloat(t.style.left):NaN,s=t instanceof HTMLElement?parseFloat(t.style.bottom):NaN,r=Number.isFinite(i)?i:s;if(!Number.isFinite(r))return;const a=this.percentToValue(r);t.classList.toggle(`${e}__mark--active`,this.isMarkActive(a))})}syncThumbTooltips(){const t=this.hasAttribute("range"),i=this.hasAttribute("show-thumb-tooltip");this.thumbEls.forEach((s,r)=>{const a=s.querySelector(`.${e}__thumb-tooltip`);if(!a)return;if(!i)return void(a.hidden=!0);a.hidden=!1;const n=t?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(t){if(!this.isInteractive()||!this.trackEl)return;if(t.target.closest(`.${e}__thumb`))return;const i=this.getTrackPercent(t.clientX,t.clientY),s=this.percentToValue(i);this.commitValueAtPosition(s)}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(t,i){if(this.hasAttribute("range")){const s=this.thumbEls["min"===t?0:1];return void s?.classList.toggle(`${e}__thumb--active`,i)}this.thumbEls[0]?.classList.toggle(`${e}__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};

package/dist/esm/components/db-rating.js

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l"],s=["default","minimal","card","inline","large"],i=["stars","number","both","reviews","detailed"],r=["star","number","percentage","text"],a=["primary","secondary","success","warning","error","custom"];class DbRating extends HTMLElement{constructor(){super(...arguments),this.hoverValue=null,this.starsEl=null,this.handlePointerMove=e=>{if(!this.isInteractive()||!this.getBooleanAttr("hover-effect",!0))return;const t=e.target?.closest(".designbase-wc-rating__star");if(!t||!this.contains(t))return;const s=Number(t.dataset.index);if(!Number.isFinite(s))return;const i=this.getNumberAttr("max-value",5),r=this.getPointerValue(s,e.clientX,t,i);this.hoverValue!==r&&(this.hoverValue=r,this.classList.toggle("designbase-wc-rating--hovering",!0),this.refreshStars(),this.dispatchEvent(new CustomEvent("db-hover",{detail:{value:r},bubbles:!0,composed:!0})))},this.handlePointerLeave=()=>{null!==this.hoverValue&&(this.hoverValue=null,this.classList.remove("designbase-wc-rating--hovering"),this.refreshStars())},this.handleClick=e=>{if(!this.isInteractive())return;const t=e.target?.closest(".designbase-wc-rating__star");if(!t||!this.contains(t))return;e.preventDefault();const s=Number(t.dataset.index);if(!Number.isFinite(s))return;const i=this.getNumberAttr("max-value",5),r=this.getPointerValue(s,e.clientX,t,i);this.hoverValue=null,this.classList.remove("designbase-wc-rating--hovering"),this.setAttribute("value",String(r)),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:r},bubbles:!0,composed:!0})),this.render()}}static get observedAttributes(){return["value","max-value","size","variant","type","display","review-count","rating-text","review-text","allow-half","readonly","disabled","clickable","color","custom-color","animated","hover-effect"]}connectedCallback(){this.addEventListener("mousemove",this.handlePointerMove),this.addEventListener("mouseleave",this.handlePointerLeave),this.addEventListener("click",this.handleClick),this.render()}disconnectedCallback(){this.removeEventListener("mousemove",this.handlePointerMove),this.removeEventListener("mouseleave",this.handlePointerLeave),this.removeEventListener("click",this.handleClick)}attributeChangedCallback(){this.isConnected&&this.render()}getNumberAttr(e,t){const s=this.getAttribute(e);if(null===s||""===s)return t;const i=Number(s);return Number.isFinite(i)?i:t}getBooleanAttr(e,t=!1){if(!this.hasAttribute(e))return t;const s=this.getAttribute(e);return""===s||"true"===s}getOption(e,t,s){const i=this.getAttribute(e);return i&&t.includes(i)?i:s}normalizeSize(e){return"xs"===e||"s"===e?"s":"xl"===e||"l"===e?"l":"m"===e?"m":this.getOption("size",t,"m")}getStarIconSize(){const e=this.normalizeSize(this.getAttribute("size"));return"s"===e?16:"l"===e?24:20}supportsHalfSteps(){return this.getBooleanAttr("allow-half")||this.getBooleanAttr("clickable")}isInteractive(){return this.getBooleanAttr("clickable")&&!this.getBooleanAttr("readonly")&&!this.getBooleanAttr("disabled")}getStarFill(e,t,s){const i=e+1;return t>=i?1:s&&t>=i-.5?.5:0}getPointerValue(e,t,s,i){const r=s.getBoundingClientRect();let a;return a=this.supportsHalfSteps()&&t-r.left<r.width/2?e+.5:e+1,a/5*i}formatRating(e,t,s,i){const r=e/t*5;return"percentage"===s?`${Math.round(e/t*100)}%`:"number"===s?i?r.toFixed(1):String(Math.round(r)):"text"===s?r>=4.5?"매우 좋음":r>=3?"보통":"낮음":`${r.toFixed(1)}/5`}updateStarElement(t,s,i,r,a){t.className=["designbase-wc-rating__star",0===s&&"designbase-wc-rating__star--empty",s>0&&a&&"designbase-wc-rating__star--hover-preview",r&&"designbase-wc-rating__star--clickable",this.getBooleanAttr("animated")&&"designbase-wc-rating__star--animated"].filter(Boolean).join(" "),t.dataset.index=String(i);const n=1===s?"star-filled":.5===s?"star-half":"star",l=this.getStarIconSize(),o=t.querySelector("svg");o?.getAttribute("data-designbase-icon")===n&&o.getAttribute("width")===String(l)||t.replaceChildren(e(n,l))}refreshStars(){if(!this.starsEl)return;const e=this.getNumberAttr("value",0),t=this.getNumberAttr("max-value",5),s=this.getBooleanAttr("allow-half",!1),i=this.getBooleanAttr("hover-effect",!0),r=null!==this.hoverValue&&i,a=(r?this.hoverValue:e)/t*5,n=this.isInteractive(),l=s||r,o=Array.from(this.starsEl.querySelectorAll(":scope > .designbase-wc-rating__star"));for(let e=0;e<5;e+=1){const t=this.getStarFill(e,a,l),s=r&&t>0,i=o[e]??document.createElement("span");i.setAttribute("aria-hidden","true"),this.updateStarElement(i,t,e,n,s),o[e]||this.starsEl.append(i)}for(let e=o.length-1;e>=5;e-=1)o[e]?.remove()}render(){const e=this.getNumberAttr("value",0),t=this.getNumberAttr("max-value",5),n=this.normalizeSize(this.getAttribute("size")),l=this.getOption("variant",s,"default"),o=this.getOption("type",r,"star"),c=this.getOption("display",i,"stars"),h=this.getOption("color",a,"primary"),g=this.getNumberAttr("review-count",0),u=this.getBooleanAttr("allow-half",!1),d=this.getBooleanAttr("readonly",!1),m=this.getBooleanAttr("disabled",!1),b=this.getBooleanAttr("clickable",!1),v=this.getBooleanAttr("hover-effect",!0),p=null!==this.hoverValue&&v;this.className=["designbase-wc-rating",`designbase-wc-rating--size-${n}`,`designbase-wc-rating--variant-${l}`,`designbase-wc-rating--type-${o}`,`designbase-wc-rating--display-${c}`,`designbase-wc-rating--color-${h}`,d&&"designbase-wc-rating--readonly",m&&"designbase-wc-rating--disabled",b&&"designbase-wc-rating--clickable",this.getBooleanAttr("animated")&&"designbase-wc-rating--animated",p&&"designbase-wc-rating--hovering"].filter(Boolean).join(" ");const f=this.getAttribute("custom-color");"custom"===h&&f?this.style.setProperty("--rating-color",f):this.style.removeProperty("--rating-color");let w=this.querySelector(':scope > [role="img"]');w||(w=document.createElement("div"),this.replaceChildren(w)),w.setAttribute("role","img"),w.setAttribute("aria-label",`rating ${this.formatRating(e,t,o,u)}`);if("stars"===c||"both"===c||"detailed"===c){const e=w.querySelectorAll(":scope > .designbase-wc-rating__stars");e.forEach((e,t)=>{t>0&&e.remove()});const t=e[0];t?this.starsEl=t:(this.starsEl=document.createElement("div"),this.starsEl.className="designbase-wc-rating__stars",w.prepend(this.starsEl)),this.refreshStars()}else this.starsEl&&(this.starsEl.remove(),this.starsEl=null);const A=this.getAttribute("rating-text")||this.formatRating(e,t,o,u);let E=w.querySelector(".designbase-wc-rating__number-container");if("number"===c||"both"===c){if(!E){E=document.createElement("div"),E.className="designbase-wc-rating__number-container";const e=document.createElement("span");e.className="designbase-wc-rating__number",E.append(e),w.append(E)}const e=E.querySelector(".designbase-wc-rating__number");e&&(e.textContent=A)}else E?.remove();let _=w.querySelector(".designbase-wc-rating__review-count");if("reviews"===c||"detailed"===c){const e=this.getAttribute("review-text")||(g>0?`${g.toLocaleString()} 리뷰`:"");e?(_||(_=document.createElement("span"),_.className="designbase-wc-rating__review-count",w.append(_)),_.textContent=e):_?.remove()}else _?.remove()}}customElements.get("db-rating")||customElements.define("db-rating",DbRating);export{DbRating};
+import{createDbIcon as e}from"./db-icons.js";import{rafThrottle as t}from"../core/dom.js";const s=["s","m","l"],i=["default","minimal","card","inline","large"],r=["stars","number","both","reviews","detailed"],a=["star","number","percentage","text"],n=["primary","secondary","success","warning","error","custom"];class DbRating extends HTMLElement{constructor(){super(...arguments),this.hoverValue=null,this.starsEl=null,this.handlePointerMove=t(e=>{if(!this.isInteractive()||!this.getBooleanAttr("hover-effect",!0))return;const t=e.target?.closest(".designbase-wc-rating__star");if(!t||!this.contains(t))return;const s=Number(t.dataset.index);if(!Number.isFinite(s))return;const i=this.getNumberAttr("max-value",5),r=this.getPointerValue(s,e.clientX,t,i);this.hoverValue!==r&&(this.hoverValue=r,this.classList.toggle("designbase-wc-rating--hovering",!0),this.refreshStars(),this.dispatchEvent(new CustomEvent("db-hover",{detail:{value:r},bubbles:!0,composed:!0})))}),this.handlePointerLeave=()=>{null!==this.hoverValue&&(this.hoverValue=null,this.classList.remove("designbase-wc-rating--hovering"),this.refreshStars())},this.handleClick=e=>{if(!this.isInteractive())return;const t=e.target?.closest(".designbase-wc-rating__star");if(!t||!this.contains(t))return;e.preventDefault();const s=Number(t.dataset.index);if(!Number.isFinite(s))return;const i=this.getNumberAttr("max-value",5),r=this.getPointerValue(s,e.clientX,t,i);this.hoverValue=null,this.classList.remove("designbase-wc-rating--hovering"),this.setAttribute("value",String(r)),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:r},bubbles:!0,composed:!0})),this.render()}}static get observedAttributes(){return["value","max-value","size","variant","type","display","review-count","rating-text","review-text","allow-half","readonly","disabled","clickable","color","custom-color","animated","hover-effect"]}connectedCallback(){this.addEventListener("mousemove",this.handlePointerMove),this.addEventListener("mouseleave",this.handlePointerLeave),this.addEventListener("click",this.handleClick),this.render()}disconnectedCallback(){this.removeEventListener("mousemove",this.handlePointerMove),this.removeEventListener("mouseleave",this.handlePointerLeave),this.removeEventListener("click",this.handleClick)}attributeChangedCallback(){this.isConnected&&this.render()}getNumberAttr(e,t){const s=this.getAttribute(e);if(null===s||""===s)return t;const i=Number(s);return Number.isFinite(i)?i:t}getBooleanAttr(e,t=!1){if(!this.hasAttribute(e))return t;const s=this.getAttribute(e);return""===s||"true"===s}getOption(e,t,s){const i=this.getAttribute(e);return i&&t.includes(i)?i:s}normalizeSize(e){return"xs"===e||"s"===e?"s":"xl"===e||"l"===e?"l":"m"===e?"m":this.getOption("size",s,"m")}getStarIconSize(){const e=this.normalizeSize(this.getAttribute("size"));return"s"===e?16:"l"===e?24:20}supportsHalfSteps(){return this.getBooleanAttr("allow-half")||this.getBooleanAttr("clickable")}isInteractive(){return this.getBooleanAttr("clickable")&&!this.getBooleanAttr("readonly")&&!this.getBooleanAttr("disabled")}getStarFill(e,t,s){const i=e+1;return t>=i?1:s&&t>=i-.5?.5:0}getPointerValue(e,t,s,i){const r=s.getBoundingClientRect();let a;return a=this.supportsHalfSteps()&&t-r.left<r.width/2?e+.5:e+1,a/5*i}formatRating(e,t,s,i){const r=e/t*5;return"percentage"===s?`${Math.round(e/t*100)}%`:"number"===s?i?r.toFixed(1):String(Math.round(r)):"text"===s?r>=4.5?"매우 좋음":r>=3?"보통":"낮음":`${r.toFixed(1)}/5`}updateStarElement(t,s,i,r,a){t.className=["designbase-wc-rating__star",0===s&&"designbase-wc-rating__star--empty",s>0&&a&&"designbase-wc-rating__star--hover-preview",r&&"designbase-wc-rating__star--clickable",this.getBooleanAttr("animated")&&"designbase-wc-rating__star--animated"].filter(Boolean).join(" "),t.dataset.index=String(i);const n=1===s?"star-filled":.5===s?"star-half":"star",l=this.getStarIconSize(),o=t.querySelector("svg");o?.getAttribute("data-designbase-icon")===n&&o.getAttribute("width")===String(l)||t.replaceChildren(e(n,l))}refreshStars(){if(!this.starsEl)return;const e=this.getNumberAttr("value",0),t=this.getNumberAttr("max-value",5),s=this.getBooleanAttr("allow-half",!1),i=this.getBooleanAttr("hover-effect",!0),r=null!==this.hoverValue&&i,a=(r?this.hoverValue:e)/t*5,n=this.isInteractive(),l=s||r,o=Array.from(this.starsEl.querySelectorAll(":scope > .designbase-wc-rating__star"));for(let e=0;e<5;e+=1){const t=this.getStarFill(e,a,l),s=r&&t>0,i=o[e]??document.createElement("span");i.setAttribute("aria-hidden","true"),this.updateStarElement(i,t,e,n,s),o[e]||this.starsEl.append(i)}for(let e=o.length-1;e>=5;e-=1)o[e]?.remove()}render(){const e=this.getNumberAttr("value",0),t=this.getNumberAttr("max-value",5),s=this.normalizeSize(this.getAttribute("size")),l=this.getOption("variant",i,"default"),o=this.getOption("type",a,"star"),c=this.getOption("display",r,"stars"),h=this.getOption("color",n,"primary"),g=this.getNumberAttr("review-count",0),u=this.getBooleanAttr("allow-half",!1),d=this.getBooleanAttr("readonly",!1),m=this.getBooleanAttr("disabled",!1),b=this.getBooleanAttr("clickable",!1),v=this.getBooleanAttr("hover-effect",!0),p=null!==this.hoverValue&&v;this.className=["designbase-wc-rating",`designbase-wc-rating--size-${s}`,`designbase-wc-rating--variant-${l}`,`designbase-wc-rating--type-${o}`,`designbase-wc-rating--display-${c}`,`designbase-wc-rating--color-${h}`,d&&"designbase-wc-rating--readonly",m&&"designbase-wc-rating--disabled",b&&"designbase-wc-rating--clickable",this.getBooleanAttr("animated")&&"designbase-wc-rating--animated",p&&"designbase-wc-rating--hovering"].filter(Boolean).join(" ");const f=this.getAttribute("custom-color");"custom"===h&&f?this.style.setProperty("--rating-color",f):this.style.removeProperty("--rating-color");let w=this.querySelector(':scope > [role="img"]');w||(w=document.createElement("div"),this.replaceChildren(w)),w.setAttribute("role","img"),w.setAttribute("aria-label",`rating ${this.formatRating(e,t,o,u)}`);if("stars"===c||"both"===c||"detailed"===c){const e=w.querySelectorAll(":scope > .designbase-wc-rating__stars");e.forEach((e,t)=>{t>0&&e.remove()});const t=e[0];t?this.starsEl=t:(this.starsEl=document.createElement("div"),this.starsEl.className="designbase-wc-rating__stars",w.prepend(this.starsEl)),this.refreshStars()}else this.starsEl&&(this.starsEl.remove(),this.starsEl=null);const A=this.getAttribute("rating-text")||this.formatRating(e,t,o,u);let E=w.querySelector(".designbase-wc-rating__number-container");if("number"===c||"both"===c){if(!E){E=document.createElement("div"),E.className="designbase-wc-rating__number-container";const e=document.createElement("span");e.className="designbase-wc-rating__number",E.append(e),w.append(E)}const e=E.querySelector(".designbase-wc-rating__number");e&&(e.textContent=A)}else E?.remove();let _=w.querySelector(".designbase-wc-rating__review-count");if("reviews"===c||"detailed"===c){const e=this.getAttribute("review-text")||(g>0?`${g.toLocaleString()} 리뷰`:"");e?(_||(_=document.createElement("span"),_.className="designbase-wc-rating__review-count",w.append(_)),_.textContent=e):_?.remove()}else _?.remove()}}customElements.get("db-rating")||customElements.define("db-rating",DbRating);export{DbRating};

package/dist/esm/components/db-resizable-panels.d.ts

@@ -9,8 +9,17 @@ declare class DbResizablePanels extends HTMLElement {
     private startSize;
     private startPos;
     private currentSize;
+    /** 포인터 이동을 프레임당 1회로 병합하기 위한 핸들 (PERF-RAF) */
+    private rafId;
+    private pendingPoint;
     static get observedAttributes(): string[];
     connectedCallback(): void;
+    /**
+     * 드래그 중에 엘리먼트가 DOM 에서 제거되면 mouseup/touchend 가 오지 않아
+     * document 리스너가 영원히 남는다. 여기서 확실히 걷어낸다. (PERF-CLEANUP)
+     */
+    disconnectedCallback(): void;
+    private detachDragListeners;
     attributeChangedCallback(): void;
     private getBool;
     private getNumber;
@@ -24,6 +33,11 @@ declare class DbResizablePanels extends HTMLElement {
     private onTouchStart;
     private startResize;
     private onMouseMove;
+    /**
+     * pointer 이동마다 레이아웃을 다시 계산하면 프레임을 넘겨 버린다.
+     * 마지막 좌표만 남겨 두고 다음 프레임에 한 번만 반영한다.
+     */
+    private scheduleResize;
     private onTouchMove;
     private applyResize;
     private onMouseUp;

package/dist/esm/components/db-resizable-panels.js

@@ -1 +1 @@
-const e=["both","horizontal","vertical"],t=["bottom-right","bottom-left","top-right","top-left","right","bottom"];class DbResizablePanels extends HTMLElement{constructor(){super(...arguments),this.isResizing=!1,this.startSize={width:0,height:0},this.startPos={x:0,y:0},this.currentSize={width:0,height:0},this.onMouseDown=e=>{e.preventDefault(),this.startResize(e.clientX,e.clientY),document.addEventListener("mousemove",this.onMouseMove),document.addEventListener("mouseup",this.onMouseUp)},this.onTouchStart=e=>{e.preventDefault();const t=e.touches[0];this.startResize(t.clientX,t.clientY),document.addEventListener("touchmove",this.onTouchMove,{passive:!1}),document.addEventListener("touchend",this.onTouchEnd)},this.onMouseMove=e=>{this.applyResize(e.clientX,e.clientY)},this.onTouchMove=e=>{e.preventDefault();const t=e.touches[0];this.applyResize(t.clientX,t.clientY)},this.onMouseUp=()=>{this.endResize(),document.removeEventListener("mousemove",this.onMouseMove),document.removeEventListener("mouseup",this.onMouseUp)},this.onTouchEnd=()=>{this.endResize(),document.removeEventListener("touchmove",this.onTouchMove),document.removeEventListener("touchend",this.onTouchEnd)}}static get observedAttributes(){return["initial-width","initial-height","min-width","min-height","max-width","max-height","direction","handle-position","handle-size","handle-color","handle-hover-color","snap-to-grid","show-guides","show-size-indicator","show-constraints","show-border","shadow","background-color","border-radius"]}connectedCallback(){this.ensureStructure(),this.initializeSize(),this.render()}attributeChangedCallback(){this.render()}getBool(e,t=!1){if(!this.hasAttribute(e))return t;const i=this.getAttribute(e);return""===i||"true"===i}getNumber(e,t){const i=Number(this.getAttribute(e)??t);return Number.isFinite(i)?i:t}getDirection(){const t=this.getAttribute("direction");return t&&e.includes(t)?t:"both"}getHandlePosition(){const e=this.getAttribute("handle-position");return e&&t.includes(e)?e:"bottom-right"}initializeSize(){const e=this.parentElement?.getBoundingClientRect();if(!e)return;const t=this.getAttribute("initial-width")||"100%",i=this.getAttribute("initial-height")||"100%";this.currentSize={width:"string"==typeof t&&t.endsWith("%")?e.width*Number(t.replace("%",""))/100:Number(t)||e.width,height:"string"==typeof i&&i.endsWith("%")?e.height*Number(i.replace("%",""))/100:Number(i)||e.height}}getMinSize(){return{width:this.getNumber("min-width",200),height:this.getNumber("min-height",150)}}getMaxSize(){const e=this.parentElement?.getBoundingClientRect();if(!e)return{width:Number.POSITIVE_INFINITY,height:Number.POSITIVE_INFINITY};const t=this.getAttribute("max-width")||"100vw",i=this.getAttribute("max-height")||"100vh",toSize=(e,t,i)=>{if("100vw"===e||"100vh"===e)return t;if("100%"===e)return i;const s=Number(e);return Number.isFinite(s)?s:Number.POSITIVE_INFINITY};return{width:toSize(t,window.innerWidth,e.width),height:toSize(i,window.innerHeight,e.height)}}ensureStructure(){if(this.container)return;this.container=document.createElement("div"),this.container.className="designbase-wc-resizable-panels",this.guidesEl=document.createElement("div"),this.guidesEl.className="designbase-wc-resizable-panels__guides";const e=document.createElement("div");e.className="designbase-wc-resizable-panels__guide designbase-wc-resizable-panels__guide--horizontal";const t=document.createElement("div");t.className="designbase-wc-resizable-panels__guide designbase-wc-resizable-panels__guide--vertical",this.guidesEl.append(e,t),this.sizeIndicatorEl=document.createElement("div"),this.sizeIndicatorEl.className="designbase-wc-resizable-panels__size-indicator",this.constraintsEl=document.createElement("div"),this.constraintsEl.className="designbase-wc-resizable-panels__constraints",this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-resizable-panels__content",this.handleEl=document.createElement("div"),this.handleEl.className="designbase-wc-resizable-panels__handle",this.handleEl.addEventListener("mousedown",this.onMouseDown),this.handleEl.addEventListener("touchstart",this.onTouchStart,{passive:!1}),this.container.append(this.guidesEl,this.sizeIndicatorEl,this.constraintsEl,this.contentEl,this.handleEl),this.replaceChildren(this.container)}startResize(e,t){this.isResizing=!0,this.startSize={...this.currentSize},this.startPos={x:e,y:t},this.dispatchEvent(new CustomEvent("db-resize-start",{detail:this.currentSize,bubbles:!0,composed:!0})),this.render()}applyResize(e,t){if(!this.isResizing)return;const i=e-this.startPos.x,s=t-this.startPos.y,n=this.getDirection();let h=this.startSize.width,r=this.startSize.height;"both"!==n&&"horizontal"!==n||(h+=i),"both"!==n&&"vertical"!==n||(r+=s);const o=this.getNumber("snap-to-grid",0);o>0&&(h=Math.round(h/o)*o,r=Math.round(r/o)*o);const a=this.getMinSize(),l=this.getMaxSize();h=Math.max(a.width,Math.min(l.width,h)),r=Math.max(a.height,Math.min(l.height,r)),this.currentSize={width:h,height:r},this.dispatchEvent(new CustomEvent("db-resize",{detail:this.currentSize,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-size-change",{detail:this.currentSize,bubbles:!0,composed:!0})),this.render()}endResize(){this.isResizing&&(this.isResizing=!1,this.dispatchEvent(new CustomEvent("db-resize-end",{detail:this.currentSize,bubbles:!0,composed:!0})),this.render())}renderHandleStyle(){if(!this.handleEl)return;const e=this.getDirection(),t=this.getHandlePosition(),i=this.getAttribute("handle-color"),s=this.getAttribute("handle-hover-color");i?this.handleEl.style.setProperty("--db-resize-handle-color",i):this.handleEl.style.removeProperty("--db-resize-handle-color"),s?this.handleEl.style.setProperty("--db-resize-handle-hover-color",s):this.handleEl.style.removeProperty("--db-resize-handle-hover-color"),this.handleEl.style.top="",this.handleEl.style.right="",this.handleEl.style.bottom="",this.handleEl.style.left="",this.handleEl.style.transform="",this.handleEl.style.width="",this.handleEl.style.height="",this.handleEl.style.backgroundColor="",this.handleEl.onmouseenter=null,this.handleEl.onmouseleave=null;let n=`corner-${t}`;"vertical"===e?n="edge-bottom":"horizontal"===e&&(n="edge-right"),this.handleEl.className=`designbase-wc-resizable-panels__handle designbase-wc-resizable-panels__handle--${n}`,this.handleEl.setAttribute("role","separator"),this.handleEl.setAttribute("aria-label","크기 조절"),this.handleEl.replaceChildren()}render(){if(this.ensureStructure(),!(this.container&&this.contentEl&&this.guidesEl&&this.sizeIndicatorEl&&this.constraintsEl))return;const e=["designbase-wc-resizable-panels",this.isResizing&&"designbase-wc-resizable-panels--resizing",this.getBool("show-border",!0)&&"designbase-wc-resizable-panels--border",this.getBool("shadow",!0)&&"designbase-wc-resizable-panels--shadow"].filter(Boolean).join(" ");this.container.className=e,this.container.style.width=`${this.currentSize.width}px`,this.container.style.height=`${this.currentSize.height}px`;const t=this.getAttribute("background-color");this.container.style.backgroundColor=t||"";const i=this.getAttribute("border-radius")||"8px";if(this.container.style.borderRadius=/^\d+$/.test(i)?`${i}px`:i,0===this.contentEl.children.length){const e=Array.from(this.childNodes).filter(e=>e!==this.container);this.contentEl.append(...e)}if(this.guidesEl.style.display=this.getBool("show-guides",!0)&&this.isResizing?"":"none",this.sizeIndicatorEl.style.display=this.getBool("show-size-indicator",!0)&&this.isResizing?"":"none",this.sizeIndicatorEl.textContent=`${Math.round(this.currentSize.width)} × ${Math.round(this.currentSize.height)}`,this.constraintsEl.style.display=this.getBool("show-constraints",!0)&&this.isResizing?"":"none",this.constraintsEl.replaceChildren(),"none"!==this.constraintsEl.style.display){const e=this.getMinSize(),t=this.getMaxSize();this.currentSize.width<=e.width&&this.constraintsEl.append(this.makeConstraint("최소 너비 도달","min")),this.currentSize.height<=e.height&&this.constraintsEl.append(this.makeConstraint("최소 높이 도달","min")),this.currentSize.width>=t.width&&this.constraintsEl.append(this.makeConstraint("최대 너비 도달","max")),this.currentSize.height>=t.height&&this.constraintsEl.append(this.makeConstraint("최대 높이 도달","max"))}this.renderHandleStyle()}makeConstraint(e,t){const i=document.createElement("div");return i.className=`designbase-wc-resizable-panels__constraint designbase-wc-resizable-panels__constraint--${t}`,i.textContent=e,i}}customElements.get("db-resizable-panels")||customElements.define("db-resizable-panels",DbResizablePanels);export{DbResizablePanels};
+const e=["both","horizontal","vertical"],t=["bottom-right","bottom-left","top-right","top-left","right","bottom"];class DbResizablePanels extends HTMLElement{constructor(){super(...arguments),this.isResizing=!1,this.startSize={width:0,height:0},this.startPos={x:0,y:0},this.currentSize={width:0,height:0},this.rafId=0,this.pendingPoint=null,this.onMouseDown=e=>{e.preventDefault(),this.startResize(e.clientX,e.clientY),document.addEventListener("mousemove",this.onMouseMove),document.addEventListener("mouseup",this.onMouseUp)},this.onTouchStart=e=>{e.preventDefault();const t=e.touches[0];this.startResize(t.clientX,t.clientY),document.addEventListener("touchmove",this.onTouchMove,{passive:!1}),document.addEventListener("touchend",this.onTouchEnd)},this.onMouseMove=e=>{this.scheduleResize(e.clientX,e.clientY)},this.onTouchMove=e=>{e.preventDefault();const t=e.touches[0];this.scheduleResize(t.clientX,t.clientY)},this.onMouseUp=()=>{this.endResize(),document.removeEventListener("mousemove",this.onMouseMove),document.removeEventListener("mouseup",this.onMouseUp)},this.onTouchEnd=()=>{this.endResize(),document.removeEventListener("touchmove",this.onTouchMove),document.removeEventListener("touchend",this.onTouchEnd)}}static get observedAttributes(){return["initial-width","initial-height","min-width","min-height","max-width","max-height","direction","handle-position","handle-size","handle-color","handle-hover-color","snap-to-grid","show-guides","show-size-indicator","show-constraints","show-border","shadow","background-color","border-radius"]}connectedCallback(){this.ensureStructure(),this.initializeSize(),this.render()}disconnectedCallback(){this.detachDragListeners(),this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=0)}detachDragListeners(){document.removeEventListener("mousemove",this.onMouseMove),document.removeEventListener("mouseup",this.onMouseUp),document.removeEventListener("touchmove",this.onTouchMove),document.removeEventListener("touchend",this.onTouchEnd)}attributeChangedCallback(){this.render()}getBool(e,t=!1){if(!this.hasAttribute(e))return t;const i=this.getAttribute(e);return""===i||"true"===i}getNumber(e,t){const i=Number(this.getAttribute(e)??t);return Number.isFinite(i)?i:t}getDirection(){const t=this.getAttribute("direction");return t&&e.includes(t)?t:"both"}getHandlePosition(){const e=this.getAttribute("handle-position");return e&&t.includes(e)?e:"bottom-right"}initializeSize(){const e=this.parentElement?.getBoundingClientRect();if(!e)return;const t=this.getAttribute("initial-width")||"100%",i=this.getAttribute("initial-height")||"100%";this.currentSize={width:"string"==typeof t&&t.endsWith("%")?e.width*Number(t.replace("%",""))/100:Number(t)||e.width,height:"string"==typeof i&&i.endsWith("%")?e.height*Number(i.replace("%",""))/100:Number(i)||e.height}}getMinSize(){return{width:this.getNumber("min-width",200),height:this.getNumber("min-height",150)}}getMaxSize(){const e=this.parentElement?.getBoundingClientRect();if(!e)return{width:Number.POSITIVE_INFINITY,height:Number.POSITIVE_INFINITY};const t=this.getAttribute("max-width")||"100vw",i=this.getAttribute("max-height")||"100vh",toSize=(e,t,i)=>{if("100vw"===e||"100vh"===e)return t;if("100%"===e)return i;const s=Number(e);return Number.isFinite(s)?s:Number.POSITIVE_INFINITY};return{width:toSize(t,window.innerWidth,e.width),height:toSize(i,window.innerHeight,e.height)}}ensureStructure(){if(this.container)return;this.container=document.createElement("div"),this.container.className="designbase-wc-resizable-panels",this.guidesEl=document.createElement("div"),this.guidesEl.className="designbase-wc-resizable-panels__guides";const e=document.createElement("div");e.className="designbase-wc-resizable-panels__guide designbase-wc-resizable-panels__guide--horizontal";const t=document.createElement("div");t.className="designbase-wc-resizable-panels__guide designbase-wc-resizable-panels__guide--vertical",this.guidesEl.append(e,t),this.sizeIndicatorEl=document.createElement("div"),this.sizeIndicatorEl.className="designbase-wc-resizable-panels__size-indicator",this.constraintsEl=document.createElement("div"),this.constraintsEl.className="designbase-wc-resizable-panels__constraints",this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-resizable-panels__content",this.handleEl=document.createElement("div"),this.handleEl.className="designbase-wc-resizable-panels__handle",this.handleEl.addEventListener("mousedown",this.onMouseDown),this.handleEl.addEventListener("touchstart",this.onTouchStart,{passive:!1}),this.container.append(this.guidesEl,this.sizeIndicatorEl,this.constraintsEl,this.contentEl,this.handleEl),this.replaceChildren(this.container)}startResize(e,t){this.isResizing=!0,this.startSize={...this.currentSize},this.startPos={x:e,y:t},this.dispatchEvent(new CustomEvent("db-resize-start",{detail:this.currentSize,bubbles:!0,composed:!0})),this.render()}scheduleResize(e,t){this.pendingPoint={x:e,y:t},this.rafId||(this.rafId=requestAnimationFrame(()=>{this.rafId=0;const e=this.pendingPoint;this.pendingPoint=null,e&&this.applyResize(e.x,e.y)}))}applyResize(e,t){if(!this.isResizing)return;const i=e-this.startPos.x,s=t-this.startPos.y,n=this.getDirection();let h=this.startSize.width,r=this.startSize.height;"both"!==n&&"horizontal"!==n||(h+=i),"both"!==n&&"vertical"!==n||(r+=s);const o=this.getNumber("snap-to-grid",0);o>0&&(h=Math.round(h/o)*o,r=Math.round(r/o)*o);const a=this.getMinSize(),l=this.getMaxSize();h=Math.max(a.width,Math.min(l.width,h)),r=Math.max(a.height,Math.min(l.height,r)),this.currentSize={width:h,height:r},this.dispatchEvent(new CustomEvent("db-resize",{detail:this.currentSize,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-size-change",{detail:this.currentSize,bubbles:!0,composed:!0})),this.render()}endResize(){this.isResizing&&(this.isResizing=!1,this.dispatchEvent(new CustomEvent("db-resize-end",{detail:this.currentSize,bubbles:!0,composed:!0})),this.render())}renderHandleStyle(){if(!this.handleEl)return;const e=this.getDirection(),t=this.getHandlePosition(),i=this.getAttribute("handle-color"),s=this.getAttribute("handle-hover-color");i?this.handleEl.style.setProperty("--db-resize-handle-color",i):this.handleEl.style.removeProperty("--db-resize-handle-color"),s?this.handleEl.style.setProperty("--db-resize-handle-hover-color",s):this.handleEl.style.removeProperty("--db-resize-handle-hover-color"),this.handleEl.style.top="",this.handleEl.style.right="",this.handleEl.style.bottom="",this.handleEl.style.left="",this.handleEl.style.transform="",this.handleEl.style.width="",this.handleEl.style.height="",this.handleEl.style.backgroundColor="",this.handleEl.onmouseenter=null,this.handleEl.onmouseleave=null;let n=`corner-${t}`;"vertical"===e?n="edge-bottom":"horizontal"===e&&(n="edge-right"),this.handleEl.className=`designbase-wc-resizable-panels__handle designbase-wc-resizable-panels__handle--${n}`,this.handleEl.setAttribute("role","separator"),this.handleEl.setAttribute("aria-label","크기 조절"),this.handleEl.replaceChildren()}render(){if(this.ensureStructure(),!(this.container&&this.contentEl&&this.guidesEl&&this.sizeIndicatorEl&&this.constraintsEl))return;const e=["designbase-wc-resizable-panels",this.isResizing&&"designbase-wc-resizable-panels--resizing",this.getBool("show-border",!0)&&"designbase-wc-resizable-panels--border",this.getBool("shadow",!0)&&"designbase-wc-resizable-panels--shadow"].filter(Boolean).join(" ");this.container.className=e,this.container.style.width=`${this.currentSize.width}px`,this.container.style.height=`${this.currentSize.height}px`;const t=this.getAttribute("background-color");this.container.style.backgroundColor=t||"";const i=this.getAttribute("border-radius")||"8px";if(this.container.style.borderRadius=/^\d+$/.test(i)?`${i}px`:i,0===this.contentEl.children.length){const e=Array.from(this.childNodes).filter(e=>e!==this.container);this.contentEl.append(...e)}if(this.guidesEl.style.display=this.getBool("show-guides",!0)&&this.isResizing?"":"none",this.sizeIndicatorEl.style.display=this.getBool("show-size-indicator",!0)&&this.isResizing?"":"none",this.sizeIndicatorEl.textContent=`${Math.round(this.currentSize.width)} × ${Math.round(this.currentSize.height)}`,this.constraintsEl.style.display=this.getBool("show-constraints",!0)&&this.isResizing?"":"none",this.constraintsEl.replaceChildren(),"none"!==this.constraintsEl.style.display){const e=this.getMinSize(),t=this.getMaxSize();this.currentSize.width<=e.width&&this.constraintsEl.append(this.makeConstraint("최소 너비 도달","min")),this.currentSize.height<=e.height&&this.constraintsEl.append(this.makeConstraint("최소 높이 도달","min")),this.currentSize.width>=t.width&&this.constraintsEl.append(this.makeConstraint("최대 너비 도달","max")),this.currentSize.height>=t.height&&this.constraintsEl.append(this.makeConstraint("최대 높이 도달","max"))}this.renderHandleStyle()}makeConstraint(e,t){const i=document.createElement("div");return i.className=`designbase-wc-resizable-panels__constraint designbase-wc-resizable-panels__constraint--${t}`,i.textContent=e,i}}customElements.get("db-resizable-panels")||customElements.define("db-resizable-panels",DbResizablePanels);export{DbResizablePanels};

package/dist/esm/components/db-search-bar.js

@@ -1 +1 @@
-import{getDbComponentIconSize as e,createDbIcon as t}from"./db-icons.js";const s=["s","m","l"],a=["vertical","horizontal"];class DbSearchBar extends HTMLElement{constructor(){super(...arguments),this.recentSearches=[],this.isFocused=!1,this.currentSuggestion=0,this.scrollParents=[]}static get observedAttributes(){return["value","default-value","placeholder","size","appearance","disabled","readonly","full-width","show-shortcut","shortcut-label","enable-recent-searches","recent-searches-key","recent-searches-layout","suggested-searches","suggestion-rolling-interval","categories","selected-category","search-results","empty-state-message"]}getResolvedSize(){const e=this.getAttribute("size")||"m";return s.includes(e)?e:"m"}getIconPx(){return e(this.getResolvedSize())}syncIcons(){const e=this.getIconPx();this.querySelector(".designbase-wc-search-bar__search-icon")?.replaceChildren(t("search",e)),this.clearButton?.replaceChildren(t("close",e))}hasInputValue(){return Boolean((this.input?.value??this.getAttribute("value")??"").trim())}get value(){return this.input?.value??this.getAttribute("value")??""}set value(e){this.setAttribute("value",e),this.input&&(this.input.value=e)}connectedCallback(){this.loadRecentSearches(),this.render(),this.bindGlobalShortcut()}disconnectedCallback(){this.clearSuggestionInterval(),this.unbindGlobalShortcut(),this.detachDropdownPortal(),this.blurTimer&&clearTimeout(this.blurTimer)}attributeChangedCallback(e){if(this.isConnected)return"value"===e&&this.input?(this.input.value=this.getAttribute("value")||"",this.syncValueState(),this.syncPlaceholder(),this.updateDropdown(),void this.syncSuggestionRolling()):"disabled"===e||"readonly"===e||"placeholder"===e||"show-shortcut"===e||"shortcut-label"===e||"selected-category"===e||"search-results"===e||"empty-state-message"===e||"suggested-searches"===e?(this.syncAttributes(),this.syncPlaceholder(),this.updateDropdown(),void this.syncSuggestionRolling()):"enable-recent-searches"===e||"recent-searches-key"===e?(this.loadRecentSearches(),void this.updateDropdown()):void("categories"!==e&&"recent-searches-layout"!==e?this.render():this.updateDropdown())}focus(){this.input?.focus()}parseJsonArray(e){try{const t=JSON.parse(this.getAttribute(e)||"[]");return Array.isArray(t)?t:[]}catch{return[]}}getRecentSearchesKey(){return this.getAttribute("recent-searches-key")||"searchbar-recent-searches"}loadRecentSearches(){if(this.hasAttribute("enable-recent-searches"))try{const e=localStorage.getItem(this.getRecentSearchesKey());this.recentSearches=e?JSON.parse(e):[],Array.isArray(this.recentSearches)||(this.recentSearches=[])}catch{this.recentSearches=[]}else this.recentSearches=[]}saveRecentSearches(){try{localStorage.setItem(this.getRecentSearchesKey(),JSON.stringify(this.recentSearches))}catch{}}clearSuggestionInterval(){this.suggestionInterval&&(clearInterval(this.suggestionInterval),this.suggestionInterval=void 0)}syncSuggestionRolling(){this.clearSuggestionInterval();const e=this.parseJsonArray("suggested-searches"),t=this.hasInputValue(),s=Number(this.getAttribute("suggestion-rolling-interval")||5e3);e.length>0&&!t&&(this.suggestionInterval=setInterval(()=>{this.currentSuggestion=(this.currentSuggestion+1)%e.length,this.syncPlaceholder(),this.updateDropdown()},s))}syncPlaceholder(){if(!this.input)return;const e=this.parseJsonArray("suggested-searches"),t=this.hasInputValue(),s=this.getAttribute("placeholder")||"검색...";e.length>0&&!t?this.input.placeholder=e[this.currentSuggestion]||s:this.input.placeholder=s}syncValueState(){const e=this.hasInputValue();this.classList.toggle("designbase-wc-search-bar--has-value",e),this.clearButton&&(this.clearButton.hidden=!e||this.hasAttribute("disabled")||this.hasAttribute("readonly")),this.shortcutBadge&&(this.shortcutBadge.hidden=!this.hasAttribute("show-shortcut")||e||this.hasAttribute("disabled")||this.hasAttribute("readonly")),this.syncIcons()}syncAttributes(){const e=this.getAttribute("size")||"m",t=this.hasAttribute("disabled"),a=this.hasAttribute("readonly"),n=this.hasAttribute("show-shortcut");this.className=["designbase-wc-search-bar",`designbase-wc-search-bar--${s.includes(e)?e:"m"}`,"pill"===this.getAttribute("appearance")&&"designbase-wc-search-bar--appearance-pill",t&&"designbase-wc-search-bar--disabled",a&&"designbase-wc-search-bar--readonly",this.hasAttribute("full-width")&&"designbase-wc-search-bar--full-width",Boolean(this.hasInputValue())&&"designbase-wc-search-bar--has-value"].filter(Boolean).join(" "),this.input&&(this.input.disabled=t,this.input.readOnly=a),this.shortcutBadge&&(this.shortcutBadge.hidden=!n||this.hasInputValue()||t||a,this.shortcutBadge.textContent=this.getAttribute("shortcut-label")||"⌘K"),this.syncValueState()}bindGlobalShortcut(){this.unbindGlobalShortcut(),!this.hasAttribute("show-shortcut")||this.hasAttribute("disabled")||this.hasAttribute("readonly")||(this.globalKeyHandler=e=>{const t=e.metaKey||e.ctrlKey;let s="k";const a=(this.getAttribute("shortcut-label")||"⌘K").slice(-1).toLowerCase();a&&(s=a),t&&e.key.toLowerCase()===s&&(e.preventDefault(),this.focus())},window.addEventListener("keydown",this.globalKeyHandler))}unbindGlobalShortcut(){this.globalKeyHandler&&(window.removeEventListener("keydown",this.globalKeyHandler),this.globalKeyHandler=void 0)}positionDropdown(){if(!this.dropdown||this.dropdown.hidden)return;const e=this.getBoundingClientRect(),t=this.input?.getBoundingClientRect(),s=t??e;this.dropdown.style.top=`${s.bottom+4}px`,this.dropdown.style.left=`${e.left}px`,this.dropdown.style.width=`${e.width}px`,this.dropdown.style.right="auto"}bindRepositionListeners(){if(this.repositionHandler)return;this.repositionHandler=()=>{requestAnimationFrame(()=>this.positionDropdown())},window.addEventListener("scroll",this.repositionHandler,!0),window.addEventListener("resize",this.repositionHandler),this.scrollParents=[];let e=this.parentElement;for(;e&&e!==document.body;){const t=getComputedStyle(e),s=/(auto|scroll|overlay)/.test(t.overflowY),a=/(auto|scroll|overlay)/.test(t.overflow);(s||a)&&e.scrollHeight>e.clientHeight&&(e.addEventListener("scroll",this.repositionHandler,{passive:!0}),this.scrollParents.push(e)),e=e.parentElement}}unbindRepositionListeners(){this.repositionHandler&&(window.removeEventListener("scroll",this.repositionHandler,!0),window.removeEventListener("resize",this.repositionHandler),this.scrollParents.forEach(e=>e.removeEventListener("scroll",this.repositionHandler)),this.scrollParents=[],this.repositionHandler=void 0)}attachDropdownPortal(){this.dropdown&&!this.dropdown.hidden&&(this.dropdown.classList.add("designbase-wc-search-bar__dropdown--portal"),this.dropdown.parentElement!==document.body&&document.body.append(this.dropdown),requestAnimationFrame(()=>this.positionDropdown()),this.repositionHandler||this.bindRepositionListeners())}detachDropdownPortal(){this.unbindRepositionListeners(),this.dropdown&&(this.dropdown.classList.remove("designbase-wc-search-bar__dropdown--portal"),this.dropdown.style.top="",this.dropdown.style.left="",this.dropdown.style.width="",this.dropdown.style.right="",this.dropdown.parentElement===document.body&&this.isConnected&&this.append(this.dropdown))}shouldShowDropdown(){const e=this.hasInputValue(),t=this.parseJsonArray("categories"),s=this.parseJsonArray("suggested-searches"),a=this.getAttribute("search-results"),n=this.getAttribute("empty-state-message");return this.isFocused&&(t.length>0||this.hasAttribute("enable-recent-searches")&&this.recentSearches.length>0&&!e||s.length>0&&!e||null!==a&&e||Boolean(n)&&!e&&(!this.hasAttribute("enable-recent-searches")||0===this.recentSearches.length)&&0===s.length)}formatSearchResult(e){if("string"==typeof e||"number"==typeof e)return String(e);if(e&&"object"==typeof e){const t=e;if("string"==typeof t.title)return t.title;if("string"==typeof t.label)return t.label}return String(e)}handleSearch(e){const t=(e??this.value).trim();t&&(this.dispatchEvent(new CustomEvent("db-search",{detail:{value:t},bubbles:!0,composed:!0})),this.hasAttribute("enable-recent-searches")&&(this.recentSearches=[t,...this.recentSearches.filter(e=>e!==t)].slice(0,10),this.saveRecentSearches(),this.updateDropdown()))}updateDropdown(){if(!this.dropdown)return;const s=this.shouldShowDropdown();if(this.dropdown.hidden=!s,this.classList.toggle("designbase-wc-search-bar--dropdown-open",s),!s)return this.dropdown.replaceChildren(),void this.detachDropdownPortal();this.dropdown.replaceChildren();const n=this.hasInputValue(),r=this.parseJsonArray("categories"),i=this.parseJsonArray("suggested-searches"),o=this.getAttribute("selected-category")||"",c=this.parseJsonArray("search-results"),h=this.getAttribute("empty-state-message"),d=a.includes(this.getAttribute("recent-searches-layout")||"vertical")&&this.getAttribute("recent-searches-layout")||"vertical";if(r.length>0){const e=document.createElement("div");e.className="designbase-wc-search-bar__categories",r.forEach(t=>{const s=document.createElement("db-chip");s.setAttribute("label",t),s.setAttribute("size","s"),s.setAttribute("variant",t===o?"primary":"default"),s.setAttribute("clickable",""),s.addEventListener("mousedown",e=>{e.preventDefault(),this.setAttribute("selected-category",t),this.dispatchEvent(new CustomEvent("db-category-change",{detail:{category:t},bubbles:!0,composed:!0})),this.updateDropdown()}),e.append(s)}),this.dropdown.append(e)}if(n&&this.hasAttribute("search-results")){const e=document.createElement("div");if(e.className="designbase-wc-search-bar__results",c.length>0){const t=document.createElement("ul");t.className="designbase-wc-search-bar__results-list",c.forEach((e,s)=>{const a=document.createElement("li");a.className="designbase-wc-search-bar__result-item",a.textContent=this.formatSearchResult(e),a.addEventListener("mousedown",t=>{t.preventDefault(),this.isFocused=!1,this.updateDropdown(),this.dispatchEvent(new CustomEvent("db-search-result-click",{detail:{result:e,index:s},bubbles:!0,composed:!0}))}),t.append(a)}),e.append(t)}else{const t=document.createElement("div");t.className="designbase-wc-search-bar__results-empty",t.textContent="검색 결과가 없습니다.",e.append(t)}return this.dropdown.append(e),void this.attachDropdownPortal()}if(this.hasAttribute("enable-recent-searches")&&!n&&this.recentSearches.length>0){const s=document.createElement("div");s.className=`designbase-wc-search-bar__recent-searches designbase-wc-search-bar__recent-searches--${d}`;const a=document.createElement("div");a.className="designbase-wc-search-bar__recent-header";const n=document.createElement("span");n.className="designbase-wc-search-bar__recent-title",n.textContent="최근 검색어";const r=document.createElement("button");r.type="button",r.className="designbase-wc-search-bar__clear-all-button",r.setAttribute("aria-label","모든 최근 검색어 삭제"),r.textContent="전체 삭제",r.addEventListener("mousedown",e=>{e.preventDefault(),this.recentSearches=[];try{localStorage.removeItem(this.getRecentSearchesKey())}catch{}this.updateDropdown()}),a.append(n,r);const i=document.createElement("div");i.className="designbase-wc-search-bar__recent-list",this.recentSearches.forEach(s=>{const a=document.createElement("div");a.className="designbase-wc-search-bar__recent-item";const n=document.createElement("button");n.type="button",n.className="designbase-wc-search-bar__recent-search-button",n.textContent=s,n.addEventListener("mousedown",e=>{if(e.preventDefault(),!this.input)return;this.input.value=s,this.setAttribute("value",s),this.syncValueState(),this.syncPlaceholder(),this.handleSearch(s);const t={value:s};this.dispatchEvent(new CustomEvent("db-input",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:t,bubbles:!0,composed:!0})),this.isFocused=!1,this.updateDropdown()});const r=document.createElement("button");r.type="button",r.className="designbase-wc-search-bar__recent-remove-button",r.setAttribute("aria-label",`${s} 삭제`),r.append(t("close",e("s"))),r.addEventListener("mousedown",e=>{e.preventDefault(),this.recentSearches=this.recentSearches.filter(e=>e!==s),this.saveRecentSearches(),this.updateDropdown()}),a.append(n,r),i.append(a)}),s.append(a,i),this.dropdown.append(s)}if(i.length>0&&!n){const e=document.createElement("div");e.className="designbase-wc-search-bar__suggestions";const t=document.createElement("div");t.className="designbase-wc-search-bar__suggestions-header";const s=document.createElement("span");s.className="designbase-wc-search-bar__suggestions-title",s.textContent="추천 검색어",t.append(s);const a=document.createElement("div");a.className="designbase-wc-search-bar__suggestions-list",i.forEach((e,t)=>{const s=document.createElement("button");s.type="button",s.className=["designbase-wc-search-bar__suggestion-item",t===this.currentSuggestion&&"designbase-wc-search-bar__suggestion-item--active"].filter(Boolean).join(" "),s.textContent=e,s.addEventListener("mousedown",t=>{if(t.preventDefault(),!this.input)return;this.clearSuggestionInterval(),this.input.value=e,this.setAttribute("value",e),this.syncValueState(),this.syncPlaceholder(),this.handleSearch(e);const s={value:e};this.dispatchEvent(new CustomEvent("db-input",{detail:s,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:s,bubbles:!0,composed:!0})),this.isFocused=!1,this.updateDropdown()}),a.append(s)}),e.append(t,a),this.dropdown.append(e)}if(h&&!n&&(!this.hasAttribute("enable-recent-searches")||0===this.recentSearches.length)&&0===i.length){const e=document.createElement("div");e.className="designbase-wc-search-bar__empty-state",e.textContent=h,this.dropdown.append(e)}this.attachDropdownPortal()}render(){const e=this.getAttribute("size")||"m",a=this.hasAttribute("disabled"),n=this.hasAttribute("readonly"),r=this.hasAttribute("full-width"),i=this.hasAttribute("show-shortcut"),o=this.getAttribute("value")??this.getAttribute("default-value")??"",c=Boolean(o.trim()),h=this.getIconPx();this.className=["designbase-wc-search-bar",`designbase-wc-search-bar--${s.includes(e)?e:"m"}`,"pill"===this.getAttribute("appearance")&&"designbase-wc-search-bar--appearance-pill",a&&"designbase-wc-search-bar--disabled",n&&"designbase-wc-search-bar--readonly",r&&"designbase-wc-search-bar--full-width",c&&"designbase-wc-search-bar--has-value",this.shouldShowDropdown()&&"designbase-wc-search-bar--dropdown-open"].filter(Boolean).join(" "),this.setAttribute("role","search"),this.clearSuggestionInterval(),this.detachDropdownPortal(),this.replaceChildren();const d=document.createElement("div");d.className="designbase-wc-search-bar__container";const l=document.createElement("div");l.className="designbase-wc-search-bar__search-icon",l.setAttribute("aria-hidden","true"),l.append(t("search",h));const u=document.createElement("input");if(u.type="text",u.className="designbase-wc-search-bar__input",u.value=o,u.disabled=a,u.readOnly=n,u.setAttribute("aria-label","검색어 입력"),this.input=u,i){const t=document.createElement("db-badge");t.className="designbase-wc-search-bar__shortcut-badge",t.setAttribute("size","l"===e?"m":"s"),t.setAttribute("variant","secondary"),t.setAttribute("badge-style","text"),t.setAttribute("aria-hidden","true"),t.textContent=this.getAttribute("shortcut-label")||"⌘K",t.hidden=c||a||n,this.shortcutBadge=t,d.append(l,u,t)}else d.append(l,u);const b=document.createElement("button");b.type="button",b.className="designbase-wc-search-bar__clear-button",b.setAttribute("aria-label","검색어 지우기"),b.hidden=!c||a||n,b.append(t("close",h)),this.clearButton=b,d.append(b);const p=document.createElement("div");p.className="designbase-wc-search-bar__dropdown",p.hidden=!0,p.addEventListener("mousedown",e=>{e.preventDefault()}),this.dropdown=p,u.addEventListener("input",()=>{this.setAttribute("value",u.value),this.syncValueState(),this.syncPlaceholder(),this.updateDropdown(),this.syncSuggestionRolling();const e={value:u.value};this.dispatchEvent(new CustomEvent("db-input",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:e,bubbles:!0,composed:!0}))}),u.addEventListener("keydown",e=>{"Enter"===e.key&&this.handleSearch()}),u.addEventListener("focus",()=>{this.isFocused=!0,this.updateDropdown(),this.dispatchEvent(new CustomEvent("db-focus",{bubbles:!0,composed:!0}))}),u.addEventListener("blur",()=>{this.isFocused=!1,this.blurTimer&&clearTimeout(this.blurTimer),this.updateDropdown(),this.dispatchEvent(new CustomEvent("db-blur",{bubbles:!0,composed:!0}))}),b.addEventListener("click",()=>{u.value="",this.setAttribute("value",""),this.syncValueState(),this.syncPlaceholder(),this.updateDropdown(),this.syncSuggestionRolling(),u.focus(),this.dispatchEvent(new CustomEvent("db-clear",{bubbles:!0,composed:!0}));const e={value:""};this.dispatchEvent(new CustomEvent("db-input",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:e,bubbles:!0,composed:!0}))}),this.append(d,p),this.syncIcons(),this.syncPlaceholder(),this.syncSuggestionRolling(),this.bindGlobalShortcut(),this.updateDropdown()}}customElements.get("db-search-bar")||customElements.define("db-search-bar",DbSearchBar);export{DbSearchBar};
+import{getDbComponentIconSize as e,createDbIcon as t}from"./db-icons.js";import{SEARCH_BAR_SIZES as s,SEARCH_BAR_RECENT_LAYOUTS as a}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbSearchBar extends HTMLElement{constructor(){super(...arguments),this.recentSearches=[],this.isFocused=!1,this.currentSuggestion=0,this.scrollParents=[]}static get observedAttributes(){return["value","default-value","placeholder","size","appearance","disabled","readonly","full-width","show-shortcut","shortcut-label","enable-recent-searches","recent-searches-key","recent-searches-layout","suggested-searches","suggestion-rolling-interval","categories","selected-category","search-results","empty-state-message"]}getResolvedSize(){const e=this.getAttribute("size")||"m";return s.includes(e)?e:"m"}getIconPx(){return e(this.getResolvedSize())}syncIcons(){const e=this.getIconPx();this.querySelector(".designbase-wc-search-bar__search-icon")?.replaceChildren(t("search",e)),this.clearButton?.replaceChildren(t("close",e))}hasInputValue(){return Boolean((this.input?.value??this.getAttribute("value")??"").trim())}get value(){return this.input?.value??this.getAttribute("value")??""}set value(e){this.setAttribute("value",e),this.input&&(this.input.value=e)}connectedCallback(){this.loadRecentSearches(),this.render(),this.bindGlobalShortcut()}disconnectedCallback(){this.clearSuggestionInterval(),this.unbindGlobalShortcut(),this.detachDropdownPortal(),this.blurTimer&&clearTimeout(this.blurTimer)}attributeChangedCallback(e){if(this.isConnected)return"value"===e&&this.input?(this.input.value=this.getAttribute("value")||"",this.syncValueState(),this.syncPlaceholder(),this.updateDropdown(),void this.syncSuggestionRolling()):"disabled"===e||"readonly"===e||"placeholder"===e||"show-shortcut"===e||"shortcut-label"===e||"selected-category"===e||"search-results"===e||"empty-state-message"===e||"suggested-searches"===e?(this.syncAttributes(),this.syncPlaceholder(),this.updateDropdown(),void this.syncSuggestionRolling()):"enable-recent-searches"===e||"recent-searches-key"===e?(this.loadRecentSearches(),void this.updateDropdown()):void("categories"!==e&&"recent-searches-layout"!==e?this.render():this.updateDropdown())}focus(){this.input?.focus()}parseJsonArray(e){try{const t=JSON.parse(this.getAttribute(e)||"[]");return Array.isArray(t)?t:[]}catch{return[]}}getRecentSearchesKey(){return this.getAttribute("recent-searches-key")||"searchbar-recent-searches"}loadRecentSearches(){if(this.hasAttribute("enable-recent-searches"))try{const e=localStorage.getItem(this.getRecentSearchesKey());this.recentSearches=e?JSON.parse(e):[],Array.isArray(this.recentSearches)||(this.recentSearches=[])}catch{this.recentSearches=[]}else this.recentSearches=[]}saveRecentSearches(){try{localStorage.setItem(this.getRecentSearchesKey(),JSON.stringify(this.recentSearches))}catch{}}clearSuggestionInterval(){this.suggestionInterval&&(clearInterval(this.suggestionInterval),this.suggestionInterval=void 0)}syncSuggestionRolling(){this.clearSuggestionInterval();const e=this.parseJsonArray("suggested-searches"),t=this.hasInputValue(),s=Number(this.getAttribute("suggestion-rolling-interval")||5e3);e.length>0&&!t&&(this.suggestionInterval=setInterval(()=>{this.currentSuggestion=(this.currentSuggestion+1)%e.length,this.syncPlaceholder(),this.updateDropdown()},s))}syncPlaceholder(){if(!this.input)return;const e=this.parseJsonArray("suggested-searches"),t=this.hasInputValue(),s=this.getAttribute("placeholder")||"검색...";e.length>0&&!t?this.input.placeholder=e[this.currentSuggestion]||s:this.input.placeholder=s}syncValueState(){const e=this.hasInputValue();this.classList.toggle("designbase-wc-search-bar--has-value",e),this.clearButton&&(this.clearButton.hidden=!e||this.hasAttribute("disabled")||this.hasAttribute("readonly")),this.shortcutBadge&&(this.shortcutBadge.hidden=!this.hasAttribute("show-shortcut")||e||this.hasAttribute("disabled")||this.hasAttribute("readonly")),this.syncIcons()}syncAttributes(){const e=this.getAttribute("size")||"m",t=this.hasAttribute("disabled"),a=this.hasAttribute("readonly"),n=this.hasAttribute("show-shortcut");this.className=["designbase-wc-search-bar",`designbase-wc-search-bar--${s.includes(e)?e:"m"}`,"pill"===this.getAttribute("appearance")&&"designbase-wc-search-bar--appearance-pill",t&&"designbase-wc-search-bar--disabled",a&&"designbase-wc-search-bar--readonly",this.hasAttribute("full-width")&&"designbase-wc-search-bar--full-width",Boolean(this.hasInputValue())&&"designbase-wc-search-bar--has-value"].filter(Boolean).join(" "),this.input&&(this.input.disabled=t,this.input.readOnly=a),this.shortcutBadge&&(this.shortcutBadge.hidden=!n||this.hasInputValue()||t||a,this.shortcutBadge.textContent=this.getAttribute("shortcut-label")||"⌘K"),this.syncValueState()}bindGlobalShortcut(){this.unbindGlobalShortcut(),!this.hasAttribute("show-shortcut")||this.hasAttribute("disabled")||this.hasAttribute("readonly")||(this.globalKeyHandler=e=>{const t=e.metaKey||e.ctrlKey;let s="k";const a=(this.getAttribute("shortcut-label")||"⌘K").slice(-1).toLowerCase();a&&(s=a),t&&e.key.toLowerCase()===s&&(e.preventDefault(),this.focus())},window.addEventListener("keydown",this.globalKeyHandler))}unbindGlobalShortcut(){this.globalKeyHandler&&(window.removeEventListener("keydown",this.globalKeyHandler),this.globalKeyHandler=void 0)}positionDropdown(){if(!this.dropdown||this.dropdown.hidden)return;const e=this.getBoundingClientRect(),t=this.input?.getBoundingClientRect(),s=t??e;this.dropdown.style.top=`${s.bottom+4}px`,this.dropdown.style.left=`${e.left}px`,this.dropdown.style.width=`${e.width}px`,this.dropdown.style.right="auto"}bindRepositionListeners(){if(this.repositionHandler)return;this.repositionHandler=()=>{requestAnimationFrame(()=>this.positionDropdown())},window.addEventListener("scroll",this.repositionHandler,{capture:!0,passive:!0}),window.addEventListener("resize",this.repositionHandler),this.scrollParents=[];let e=this.parentElement;for(;e&&e!==document.body;){const t=getComputedStyle(e),s=/(auto|scroll|overlay)/.test(t.overflowY),a=/(auto|scroll|overlay)/.test(t.overflow);(s||a)&&e.scrollHeight>e.clientHeight&&(e.addEventListener("scroll",this.repositionHandler,{passive:!0}),this.scrollParents.push(e)),e=e.parentElement}}unbindRepositionListeners(){this.repositionHandler&&(window.removeEventListener("scroll",this.repositionHandler,!0),window.removeEventListener("resize",this.repositionHandler),this.scrollParents.forEach(e=>e.removeEventListener("scroll",this.repositionHandler)),this.scrollParents=[],this.repositionHandler=void 0)}attachDropdownPortal(){this.dropdown&&!this.dropdown.hidden&&(this.dropdown.classList.add("designbase-wc-search-bar__dropdown--portal"),this.dropdown.parentElement!==document.body&&document.body.append(this.dropdown),requestAnimationFrame(()=>this.positionDropdown()),this.repositionHandler||this.bindRepositionListeners())}detachDropdownPortal(){this.unbindRepositionListeners(),this.dropdown&&(this.dropdown.classList.remove("designbase-wc-search-bar__dropdown--portal"),this.dropdown.style.top="",this.dropdown.style.left="",this.dropdown.style.width="",this.dropdown.style.right="",this.dropdown.parentElement===document.body&&this.isConnected&&this.append(this.dropdown))}shouldShowDropdown(){const e=this.hasInputValue(),t=this.parseJsonArray("categories"),s=this.parseJsonArray("suggested-searches"),a=this.getAttribute("search-results"),n=this.getAttribute("empty-state-message");return this.isFocused&&(t.length>0||this.hasAttribute("enable-recent-searches")&&this.recentSearches.length>0&&!e||s.length>0&&!e||null!==a&&e||Boolean(n)&&!e&&(!this.hasAttribute("enable-recent-searches")||0===this.recentSearches.length)&&0===s.length)}formatSearchResult(e){if("string"==typeof e||"number"==typeof e)return String(e);if(e&&"object"==typeof e){const t=e;if("string"==typeof t.title)return t.title;if("string"==typeof t.label)return t.label}return String(e)}handleSearch(e){const t=(e??this.value).trim();t&&(this.dispatchEvent(new CustomEvent("db-search",{detail:{value:t},bubbles:!0,composed:!0})),this.hasAttribute("enable-recent-searches")&&(this.recentSearches=[t,...this.recentSearches.filter(e=>e!==t)].slice(0,10),this.saveRecentSearches(),this.updateDropdown()))}updateDropdown(){if(!this.dropdown)return;const s=this.shouldShowDropdown();if(this.dropdown.hidden=!s,this.classList.toggle("designbase-wc-search-bar--dropdown-open",s),!s)return this.dropdown.replaceChildren(),void this.detachDropdownPortal();this.dropdown.replaceChildren();const n=this.hasInputValue(),r=this.parseJsonArray("categories"),i=this.parseJsonArray("suggested-searches"),o=this.getAttribute("selected-category")||"",c=this.parseJsonArray("search-results"),h=this.getAttribute("empty-state-message"),d=a.includes(this.getAttribute("recent-searches-layout")||"vertical")&&this.getAttribute("recent-searches-layout")||"vertical";if(r.length>0){const e=document.createElement("div");e.className="designbase-wc-search-bar__categories",r.forEach(t=>{const s=document.createElement("db-chip");s.setAttribute("label",t),s.setAttribute("size","s"),s.setAttribute("variant",t===o?"primary":"default"),s.setAttribute("clickable",""),s.addEventListener("mousedown",e=>{e.preventDefault(),this.setAttribute("selected-category",t),this.dispatchEvent(new CustomEvent("db-category-change",{detail:{category:t},bubbles:!0,composed:!0})),this.updateDropdown()}),e.append(s)}),this.dropdown.append(e)}if(n&&this.hasAttribute("search-results")){const e=document.createElement("div");if(e.className="designbase-wc-search-bar__results",c.length>0){const t=document.createElement("ul");t.className="designbase-wc-search-bar__results-list",c.forEach((e,s)=>{const a=document.createElement("li");a.className="designbase-wc-search-bar__result-item",a.textContent=this.formatSearchResult(e),a.addEventListener("mousedown",t=>{t.preventDefault(),this.isFocused=!1,this.updateDropdown(),this.dispatchEvent(new CustomEvent("db-search-result-click",{detail:{result:e,index:s},bubbles:!0,composed:!0}))}),t.append(a)}),e.append(t)}else{const t=document.createElement("div");t.className="designbase-wc-search-bar__results-empty",t.textContent="검색 결과가 없습니다.",e.append(t)}return this.dropdown.append(e),void this.attachDropdownPortal()}if(this.hasAttribute("enable-recent-searches")&&!n&&this.recentSearches.length>0){const s=document.createElement("div");s.className=`designbase-wc-search-bar__recent-searches designbase-wc-search-bar__recent-searches--${d}`;const a=document.createElement("div");a.className="designbase-wc-search-bar__recent-header";const n=document.createElement("span");n.className="designbase-wc-search-bar__recent-title",n.textContent="최근 검색어";const r=document.createElement("button");r.type="button",r.className="designbase-wc-search-bar__clear-all-button",r.setAttribute("aria-label","모든 최근 검색어 삭제"),r.textContent="전체 삭제",r.addEventListener("mousedown",e=>{e.preventDefault(),this.recentSearches=[];try{localStorage.removeItem(this.getRecentSearchesKey())}catch{}this.updateDropdown()}),a.append(n,r);const i=document.createElement("div");i.className="designbase-wc-search-bar__recent-list",this.recentSearches.forEach(s=>{const a=document.createElement("div");a.className="designbase-wc-search-bar__recent-item";const n=document.createElement("button");n.type="button",n.className="designbase-wc-search-bar__recent-search-button",n.textContent=s,n.addEventListener("mousedown",e=>{if(e.preventDefault(),!this.input)return;this.input.value=s,this.setAttribute("value",s),this.syncValueState(),this.syncPlaceholder(),this.handleSearch(s);const t={value:s};this.dispatchEvent(new CustomEvent("db-input",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:t,bubbles:!0,composed:!0})),this.isFocused=!1,this.updateDropdown()});const r=document.createElement("button");r.type="button",r.className="designbase-wc-search-bar__recent-remove-button",r.setAttribute("aria-label",`${s} 삭제`),r.append(t("close",e("s"))),r.addEventListener("mousedown",e=>{e.preventDefault(),this.recentSearches=this.recentSearches.filter(e=>e!==s),this.saveRecentSearches(),this.updateDropdown()}),a.append(n,r),i.append(a)}),s.append(a,i),this.dropdown.append(s)}if(i.length>0&&!n){const e=document.createElement("div");e.className="designbase-wc-search-bar__suggestions";const t=document.createElement("div");t.className="designbase-wc-search-bar__suggestions-header";const s=document.createElement("span");s.className="designbase-wc-search-bar__suggestions-title",s.textContent="추천 검색어",t.append(s);const a=document.createElement("div");a.className="designbase-wc-search-bar__suggestions-list",i.forEach((e,t)=>{const s=document.createElement("button");s.type="button",s.className=["designbase-wc-search-bar__suggestion-item",t===this.currentSuggestion&&"designbase-wc-search-bar__suggestion-item--active"].filter(Boolean).join(" "),s.textContent=e,s.addEventListener("mousedown",t=>{if(t.preventDefault(),!this.input)return;this.clearSuggestionInterval(),this.input.value=e,this.setAttribute("value",e),this.syncValueState(),this.syncPlaceholder(),this.handleSearch(e);const s={value:e};this.dispatchEvent(new CustomEvent("db-input",{detail:s,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:s,bubbles:!0,composed:!0})),this.isFocused=!1,this.updateDropdown()}),a.append(s)}),e.append(t,a),this.dropdown.append(e)}if(h&&!n&&(!this.hasAttribute("enable-recent-searches")||0===this.recentSearches.length)&&0===i.length){const e=document.createElement("div");e.className="designbase-wc-search-bar__empty-state",e.textContent=h,this.dropdown.append(e)}this.attachDropdownPortal()}render(){const e=this.getAttribute("size")||"m",a=this.hasAttribute("disabled"),n=this.hasAttribute("readonly"),r=this.hasAttribute("full-width"),i=this.hasAttribute("show-shortcut"),o=this.getAttribute("value")??this.getAttribute("default-value")??"",c=Boolean(o.trim()),h=this.getIconPx();this.className=["designbase-wc-search-bar",`designbase-wc-search-bar--${s.includes(e)?e:"m"}`,"pill"===this.getAttribute("appearance")&&"designbase-wc-search-bar--appearance-pill",a&&"designbase-wc-search-bar--disabled",n&&"designbase-wc-search-bar--readonly",r&&"designbase-wc-search-bar--full-width",c&&"designbase-wc-search-bar--has-value",this.shouldShowDropdown()&&"designbase-wc-search-bar--dropdown-open"].filter(Boolean).join(" "),this.setAttribute("role","search"),this.clearSuggestionInterval(),this.detachDropdownPortal(),this.replaceChildren();const d=document.createElement("div");d.className="designbase-wc-search-bar__container";const l=document.createElement("div");l.className="designbase-wc-search-bar__search-icon",l.setAttribute("aria-hidden","true"),l.append(t("search",h));const u=document.createElement("input");if(u.type="text",u.className="designbase-wc-search-bar__input",u.value=o,u.disabled=a,u.readOnly=n,u.setAttribute("aria-label","검색어 입력"),this.input=u,i){const t=document.createElement("db-badge");t.className="designbase-wc-search-bar__shortcut-badge",t.setAttribute("size","l"===e?"m":"s"),t.setAttribute("variant","secondary"),t.setAttribute("type","text"),t.setAttribute("aria-hidden","true"),t.textContent=this.getAttribute("shortcut-label")||"⌘K",t.hidden=c||a||n,this.shortcutBadge=t,d.append(l,u,t)}else d.append(l,u);const b=document.createElement("button");b.type="button",b.className="designbase-wc-search-bar__clear-button",b.setAttribute("aria-label","검색어 지우기"),b.hidden=!c||a||n,b.append(t("close",h)),this.clearButton=b,d.append(b);const p=document.createElement("div");p.className="designbase-wc-search-bar__dropdown",p.hidden=!0,p.addEventListener("mousedown",e=>{e.preventDefault()}),this.dropdown=p,u.addEventListener("input",()=>{this.setAttribute("value",u.value),this.syncValueState(),this.syncPlaceholder(),this.updateDropdown(),this.syncSuggestionRolling();const e={value:u.value};this.dispatchEvent(new CustomEvent("db-input",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:e,bubbles:!0,composed:!0}))}),u.addEventListener("keydown",e=>{"Enter"===e.key&&this.handleSearch()}),u.addEventListener("focus",()=>{this.isFocused=!0,this.updateDropdown(),this.dispatchEvent(new CustomEvent("db-focus",{bubbles:!0,composed:!0}))}),u.addEventListener("blur",()=>{this.isFocused=!1,this.blurTimer&&clearTimeout(this.blurTimer),this.updateDropdown(),this.dispatchEvent(new CustomEvent("db-blur",{bubbles:!0,composed:!0}))}),b.addEventListener("click",()=>{u.value="",this.setAttribute("value",""),this.syncValueState(),this.syncPlaceholder(),this.updateDropdown(),this.syncSuggestionRolling(),u.focus(),this.dispatchEvent(new CustomEvent("db-clear",{bubbles:!0,composed:!0}));const e={value:""};this.dispatchEvent(new CustomEvent("db-input",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:e,bubbles:!0,composed:!0}))}),this.append(d,p),this.syncIcons(),this.syncPlaceholder(),this.syncSuggestionRolling(),this.bindGlobalShortcut(),this.updateDropdown()}}customElements.get("db-search-bar")||customElements.define("db-search-bar",DbSearchBar);export{DbSearchBar};

package/dist/esm/components/db-section-cta.js

@@ -1 +1 @@
-import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const e="designbase-wc-section-cta";class DbSectionCta extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["title","headline","subtitle","description","badge","buttons","variant","theme","align","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parseBadge(){try{const t=this.getAttribute("badge");return t?JSON.parse(t):null}catch{return null}}parseButtons(){try{const t=JSON.parse(this.getAttribute("buttons")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}build(){this.wrapEl=document.createElement("div"),this.wrapEl.className=`${e}__inner`,this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header",this.badgeEl=document.createElement("db-badge"),this.badgeEl.className="designbase-wc-section-block-header__badge",this.badgeEl.hidden=!0,this.headlineEl=document.createElement("h2"),this.headlineEl.className="designbase-wc-section-block-header__headline",this.subtitleEl=document.createElement("p"),this.subtitleEl.className="designbase-wc-section-block-header__subtitle",this.descriptionEl=document.createElement("p"),this.descriptionEl.className="designbase-wc-section-block-header__description",this.headerEl.append(this.badgeEl,this.headlineEl,this.subtitleEl,this.descriptionEl),this.actionsEl=document.createElement("div"),this.actionsEl.className=`${e}__actions`,this.wrapEl.append(this.headerEl,this.actionsEl),this.append(this.wrapEl)}updateUI(){const i=this.getAttribute("headline")||this.getAttribute("title")||"",s=this.getAttribute("subtitle")||"",a=this.getAttribute("description")||"",n=this.getAttribute("variant")||"default",l=this.getAttribute("theme")||"gradient",h=this.getAttribute("align")||"center",d=this.getAttribute("content-padding")||"l",r=this.parseBadge(),c=this.parseButtons();this.className=[e,`${e}--${n}`,`${e}--${l}`,`${e}--${h}`,`${e}--padding-${d}`].join(" "),t(this,e),this.headerEl&&(this.headerEl.className=["designbase-wc-section-block-header",`designbase-wc-section-block-header--${h}`,`${e}__header`].join(" ")),this.badgeEl&&(r?.text?(this.badgeEl.hidden=!1,this.badgeEl.style.display="",this.badgeEl.setAttribute("variant",r.variant||"primary"),this.badgeEl.setAttribute("badge-style",r.style||"text"),this.badgeEl.setAttribute("size",r.size||"m"),this.badgeEl.textContent=r.text):(this.badgeEl.hidden=!0,this.badgeEl.style.display="none",this.badgeEl.textContent="")),this.headlineEl&&(this.headlineEl.textContent=i,this.headlineEl.hidden=!i),this.subtitleEl&&(this.subtitleEl.textContent=s,this.subtitleEl.hidden=!s),this.descriptionEl&&(this.descriptionEl.textContent=a,this.descriptionEl.hidden=!a),this.actionsEl&&(this.actionsEl.replaceChildren(),c.forEach((t,e)=>{const i=document.createElement("db-button");i.setAttribute("variant",t.variant||(0===e?"primary":"tertiary")),i.setAttribute("size",t.size||"m"),t.href&&i.setAttribute("href",t.href),i.textContent=t.text,this.actionsEl.append(i)}),this.actionsEl.hidden=0===c.length)}}customElements.get("db-section-cta")||customElements.define("db-section-cta",DbSectionCta);export{DbSectionCta};
+import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const e="designbase-wc-section-cta";class DbSectionCta extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["title","headline","subtitle","description","badge","buttons","variant","theme","align","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parseBadge(){try{const t=this.getAttribute("badge");return t?JSON.parse(t):null}catch{return null}}parseButtons(){try{const t=JSON.parse(this.getAttribute("buttons")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}build(){this.wrapEl=document.createElement("div"),this.wrapEl.className=`${e}__inner`,this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header",this.badgeEl=document.createElement("db-badge"),this.badgeEl.className="designbase-wc-section-block-header__badge",this.badgeEl.hidden=!0,this.headlineEl=document.createElement("h2"),this.headlineEl.className="designbase-wc-section-block-header__headline",this.subtitleEl=document.createElement("p"),this.subtitleEl.className="designbase-wc-section-block-header__subtitle",this.descriptionEl=document.createElement("p"),this.descriptionEl.className="designbase-wc-section-block-header__description",this.headerEl.append(this.badgeEl,this.headlineEl,this.subtitleEl,this.descriptionEl),this.actionsEl=document.createElement("div"),this.actionsEl.className=`${e}__actions`,this.wrapEl.append(this.headerEl,this.actionsEl),this.append(this.wrapEl)}updateUI(){const i=this.getAttribute("headline")||this.getAttribute("title")||"",s=this.getAttribute("subtitle")||"",a=this.getAttribute("description")||"",n=this.getAttribute("variant")||"default",l=this.getAttribute("theme")||"gradient",h=this.getAttribute("align")||"center",d=this.getAttribute("content-padding")||"l",r=this.parseBadge(),c=this.parseButtons();this.className=[e,`${e}--${n}`,`${e}--${l}`,`${e}--${h}`,`${e}--padding-${d}`].join(" "),t(this,e),this.headerEl&&(this.headerEl.className=["designbase-wc-section-block-header",`designbase-wc-section-block-header--${h}`,`${e}__header`].join(" ")),this.badgeEl&&(r?.text?(this.badgeEl.hidden=!1,this.badgeEl.style.display="",this.badgeEl.setAttribute("variant",r.variant||"primary"),this.badgeEl.setAttribute("type",r.style||"text"),this.badgeEl.setAttribute("size",r.size||"m"),this.badgeEl.textContent=r.text):(this.badgeEl.hidden=!0,this.badgeEl.style.display="none",this.badgeEl.textContent="")),this.headlineEl&&(this.headlineEl.textContent=i,this.headlineEl.hidden=!i),this.subtitleEl&&(this.subtitleEl.textContent=s,this.subtitleEl.hidden=!s),this.descriptionEl&&(this.descriptionEl.textContent=a,this.descriptionEl.hidden=!a),this.actionsEl&&(this.actionsEl.replaceChildren(),c.forEach((t,e)=>{const i=document.createElement("db-button");i.setAttribute("variant",t.variant||(0===e?"primary":"tertiary")),i.setAttribute("size",t.size||"m"),t.href&&i.setAttribute("href",t.href),i.textContent=t.text,this.actionsEl.append(i)}),this.actionsEl.hidden=0===c.length)}}customElements.get("db-section-cta")||customElements.define("db-section-cta",DbSectionCta);export{DbSectionCta};

package/dist/esm/components/db-section-feature.js

@@ -1 +1 @@
-import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const e="designbase-wc-section-feature";class DbSectionFeature extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["headline","subtitle","description","badge","image","image-alt","media-position","actions","tinted","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parseBadge(){try{const t=this.getAttribute("badge");return t?JSON.parse(t):null}catch{return null}}get actions(){return this.parseActions()}set actions(t){this.setAttribute("actions","string"==typeof t?t:JSON.stringify(t))}parseActions(){try{const t=JSON.parse(this.getAttribute("actions")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${e}__inner`;const t=document.createElement("div");t.className=`${e}__content`,this.contentEl=t,this.headlineEl=document.createElement("h2"),this.headlineEl.className=`${e}__headline`,this.subtitleEl=document.createElement("p"),this.subtitleEl.className=`${e}__subtitle`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${e}__description`,this.actionsEl=document.createElement("div"),this.actionsEl.className=`${e}__actions`,t.append(this.headlineEl,this.subtitleEl,this.descriptionEl,this.actionsEl),this.mediaEl=document.createElement("div"),this.mediaEl.className=`${e}__media`,this.imageEl=document.createElement("img"),this.imageEl.className=`${e}__image`,this.mediaEl.append(this.imageEl),this.innerEl.append(t,this.mediaEl),this.append(this.innerEl)}updateUI(){const i=this.getAttribute("headline")||"",s=this.getAttribute("subtitle")||"",n=this.getAttribute("description")||"",a=this.getAttribute("image")||"",l=this.getAttribute("image-alt")||i||"feature",h=this.getAttribute("media-position")||"right",d=this.getAttribute("content-padding")||"l",r=this.hasAttribute("tinted"),c=this.parseBadge(),o=this.parseActions();if(this.className=[e,`${e}--media-${h}`,`${e}--padding-${d}`,r&&`${e}--tinted`].filter(Boolean).join(" "),t(this,e),this.contentEl&&this.headlineEl){const t=c?.text?.trim();t?(this.badgeEl||(this.badgeEl=document.createElement("db-badge"),this.badgeEl.className=`${e}__badge`),this.badgeEl.setAttribute("variant",c.variant||"primary"),this.badgeEl.setAttribute("badge-style",c.style||"text"),this.badgeEl.setAttribute("size",c.size||"m"),this.badgeEl.textContent=t,this.badgeEl.isConnected||this.contentEl.insertBefore(this.badgeEl,this.headlineEl)):this.badgeEl&&this.badgeEl.remove()}this.headlineEl&&(this.headlineEl.textContent=i),this.subtitleEl&&(this.subtitleEl.textContent=s,this.subtitleEl.hidden=!s),this.descriptionEl&&(this.descriptionEl.textContent=n,this.descriptionEl.hidden=!n),this.mediaEl&&this.imageEl&&(a?(this.mediaEl.hidden=!1,this.imageEl.src=a,this.imageEl.alt=l):this.mediaEl.hidden=!0),this.actionsEl&&(this.actionsEl.replaceChildren(),o.length>0?(o.forEach(t=>{const e=document.createElement("db-button");e.setAttribute("variant",t.variant||"primary"),e.setAttribute("size",t.size||"m"),t.href&&e.setAttribute("href",t.href),e.textContent=t.label,e.addEventListener("click",e=>{e.stopPropagation(),this.dispatchEvent(new CustomEvent("db-action",{detail:{action:t},bubbles:!0,composed:!0}))}),this.actionsEl.append(e)}),this.actionsEl.hidden=!1):this.actionsEl.hidden=!0)}}customElements.get("db-section-feature")||customElements.define("db-section-feature",DbSectionFeature);export{DbSectionFeature};
+import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const e="designbase-wc-section-feature";class DbSectionFeature extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["headline","subtitle","description","badge","image","image-alt","media-position","actions","tinted","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parseBadge(){try{const t=this.getAttribute("badge");return t?JSON.parse(t):null}catch{return null}}get actions(){return this.parseActions()}set actions(t){this.setAttribute("actions","string"==typeof t?t:JSON.stringify(t))}parseActions(){try{const t=JSON.parse(this.getAttribute("actions")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${e}__inner`;const t=document.createElement("div");t.className=`${e}__content`,this.contentEl=t,this.headlineEl=document.createElement("h2"),this.headlineEl.className=`${e}__headline`,this.subtitleEl=document.createElement("p"),this.subtitleEl.className=`${e}__subtitle`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${e}__description`,this.actionsEl=document.createElement("div"),this.actionsEl.className=`${e}__actions`,t.append(this.headlineEl,this.subtitleEl,this.descriptionEl,this.actionsEl),this.mediaEl=document.createElement("div"),this.mediaEl.className=`${e}__media`,this.imageEl=document.createElement("img"),this.imageEl.className=`${e}__image`,this.mediaEl.append(this.imageEl),this.innerEl.append(t,this.mediaEl),this.append(this.innerEl)}updateUI(){const i=this.getAttribute("headline")||"",s=this.getAttribute("subtitle")||"",n=this.getAttribute("description")||"",a=this.getAttribute("image")||"",l=this.getAttribute("image-alt")||i||"feature",h=this.getAttribute("media-position")||"right",d=this.getAttribute("content-padding")||"l",r=this.hasAttribute("tinted"),c=this.parseBadge(),o=this.parseActions();if(this.className=[e,`${e}--media-${h}`,`${e}--padding-${d}`,r&&`${e}--tinted`].filter(Boolean).join(" "),t(this,e),this.contentEl&&this.headlineEl){const t=c?.text?.trim();t?(this.badgeEl||(this.badgeEl=document.createElement("db-badge"),this.badgeEl.className=`${e}__badge`),this.badgeEl.setAttribute("variant",c.variant||"primary"),this.badgeEl.setAttribute("type",c.style||"text"),this.badgeEl.setAttribute("size",c.size||"m"),this.badgeEl.textContent=t,this.badgeEl.isConnected||this.contentEl.insertBefore(this.badgeEl,this.headlineEl)):this.badgeEl&&this.badgeEl.remove()}this.headlineEl&&(this.headlineEl.textContent=i),this.subtitleEl&&(this.subtitleEl.textContent=s,this.subtitleEl.hidden=!s),this.descriptionEl&&(this.descriptionEl.textContent=n,this.descriptionEl.hidden=!n),this.mediaEl&&this.imageEl&&(a?(this.mediaEl.hidden=!1,this.imageEl.src=a,this.imageEl.alt=l):this.mediaEl.hidden=!0),this.actionsEl&&(this.actionsEl.replaceChildren(),o.length>0?(o.forEach(t=>{const e=document.createElement("db-button");e.setAttribute("variant",t.variant||"primary"),e.setAttribute("size",t.size||"m"),t.href&&e.setAttribute("href",t.href),e.textContent=t.label,e.addEventListener("click",e=>{e.stopPropagation(),this.dispatchEvent(new CustomEvent("db-action",{detail:{action:t},bubbles:!0,composed:!0}))}),this.actionsEl.append(e)}),this.actionsEl.hidden=!1):this.actionsEl.hidden=!0)}}customElements.get("db-section-feature")||customElements.define("db-section-feature",DbSectionFeature);export{DbSectionFeature};

package/dist/esm/components/db-section-pricing.js

@@ -1 +1 @@
-import{applySectionBlockHeader as e}from"./section-block-header-utils.js";import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const i="designbase-wc-section-pricing";class DbSectionPricing extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["headline","subtitle","description","badge","plans","columns","align","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parsePlans(){try{const e=JSON.parse(this.getAttribute("plans")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBadge(){try{const e=this.getAttribute("badge");return e?JSON.parse(e):null}catch{return null}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${i}__inner`,this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header",this.headerEl.innerHTML='\n            <db-badge class="designbase-wc-section-block-header__badge" hidden></db-badge>\n            <h2 class="designbase-wc-section-block-header__headline"></h2>\n            <p class="designbase-wc-section-block-header__subtitle"></p>\n            <p class="designbase-wc-section-block-header__description"></p>\n        ',this.gridEl=document.createElement("div"),this.gridEl.className=`${i}__grid`,this.innerEl.append(this.headerEl,this.gridEl),this.append(this.innerEl)}updateUI(){const n=this.getAttribute("headline")||"요금제",s=this.getAttribute("subtitle")||"",a=this.getAttribute("description")||"",c=this.getAttribute("columns")||"3",r=this.getAttribute("content-padding")||"l",l=this.getAttribute("align")||"center",d=this.parseBadge(),o=this.parsePlans();this.className=[i,`${i}--cols-${c}`,`${i}--padding-${r}`].join(" "),t(this,i),this.headerEl&&e(this.headerEl,{headline:n,subtitle:s,description:a,badge:d,align:l}),this.gridEl&&(this.gridEl.replaceChildren(),o.forEach(e=>{const t=document.createElement("article");t.className=[`${i}__plan-card`,e.highlighted?`${i}__plan-card--highlighted`:""].filter(Boolean).join(" ");const n=document.createElement("div");if(n.className=`${i}__plan-body`,e.badge){const t=document.createElement("db-badge");t.setAttribute("variant","primary"),t.setAttribute("badge-style","filled"),t.setAttribute("size","s"),t.className=`${i}__plan-badge`,t.textContent=e.badge,n.append(t)}const s=document.createElement("h3");s.className=`${i}__plan-name`,s.textContent=e.name;const a=document.createElement("div");a.className=`${i}__price-row`;const c=document.createElement("span");if(c.className=`${i}__price`,c.textContent=e.price,a.append(c),e.period){const t=document.createElement("span");t.className=`${i}__period`,t.textContent=`/ ${e.period}`,a.append(t)}if(n.append(s,a),e.description){const t=document.createElement("p");t.className=`${i}__plan-description`,t.textContent=e.description,n.append(t)}const r=document.createElement("ul");r.className=`${i}__features`,e.features.forEach(e=>{const t=document.createElement("li");t.textContent=e,r.append(t)}),n.append(r);const l=document.createElement("div");l.className=`${i}__plan-footer`;const d=document.createElement("db-button");d.className=`${i}__cta`,d.setAttribute("variant",e.cta.variant||(e.highlighted?"primary":"tertiary")),d.setAttribute("size","m"),d.setAttribute("full-width",""),e.cta.href&&d.setAttribute("href",e.cta.href),d.textContent=e.cta.label,l.append(d),t.append(n,l),this.gridEl.append(t)}))}}customElements.get("db-section-pricing")||customElements.define("db-section-pricing",DbSectionPricing);export{DbSectionPricing};
+import{applySectionBlockHeader as e}from"./section-block-header-utils.js";import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const i="designbase-wc-section-pricing";class DbSectionPricing extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["headline","subtitle","description","badge","plans","columns","align","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parsePlans(){try{const e=JSON.parse(this.getAttribute("plans")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBadge(){try{const e=this.getAttribute("badge");return e?JSON.parse(e):null}catch{return null}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${i}__inner`,this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header",this.headerEl.innerHTML='\n            <db-badge class="designbase-wc-section-block-header__badge" hidden></db-badge>\n            <h2 class="designbase-wc-section-block-header__headline"></h2>\n            <p class="designbase-wc-section-block-header__subtitle"></p>\n            <p class="designbase-wc-section-block-header__description"></p>\n        ',this.gridEl=document.createElement("div"),this.gridEl.className=`${i}__grid`,this.innerEl.append(this.headerEl,this.gridEl),this.append(this.innerEl)}updateUI(){const n=this.getAttribute("headline")||"요금제",s=this.getAttribute("subtitle")||"",a=this.getAttribute("description")||"",c=this.getAttribute("columns")||"3",r=this.getAttribute("content-padding")||"l",l=this.getAttribute("align")||"center",d=this.parseBadge(),o=this.parsePlans();this.className=[i,`${i}--cols-${c}`,`${i}--padding-${r}`].join(" "),t(this,i),this.headerEl&&e(this.headerEl,{headline:n,subtitle:s,description:a,badge:d,align:l}),this.gridEl&&(this.gridEl.replaceChildren(),o.forEach(e=>{const t=document.createElement("article");t.className=[`${i}__plan-card`,e.highlighted?`${i}__plan-card--highlighted`:""].filter(Boolean).join(" ");const n=document.createElement("div");if(n.className=`${i}__plan-body`,e.badge){const t=document.createElement("db-badge");t.setAttribute("variant","primary"),t.setAttribute("type","filled"),t.setAttribute("size","s"),t.className=`${i}__plan-badge`,t.textContent=e.badge,n.append(t)}const s=document.createElement("h3");s.className=`${i}__plan-name`,s.textContent=e.name;const a=document.createElement("div");a.className=`${i}__price-row`;const c=document.createElement("span");if(c.className=`${i}__price`,c.textContent=e.price,a.append(c),e.period){const t=document.createElement("span");t.className=`${i}__period`,t.textContent=`/ ${e.period}`,a.append(t)}if(n.append(s,a),e.description){const t=document.createElement("p");t.className=`${i}__plan-description`,t.textContent=e.description,n.append(t)}const r=document.createElement("ul");r.className=`${i}__features`,e.features.forEach(e=>{const t=document.createElement("li");t.textContent=e,r.append(t)}),n.append(r);const l=document.createElement("div");l.className=`${i}__plan-footer`;const d=document.createElement("db-button");d.className=`${i}__cta`,d.setAttribute("variant",e.cta.variant||(e.highlighted?"primary":"tertiary")),d.setAttribute("size","m"),d.setAttribute("full-width",""),e.cta.href&&d.setAttribute("href",e.cta.href),d.textContent=e.cta.label,l.append(d),t.append(n,l),this.gridEl.append(t)}))}}customElements.get("db-section-pricing")||customElements.define("db-section-pricing",DbSectionPricing);export{DbSectionPricing};

package/dist/esm/components/db-section.js

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l"];class DbSection extends HTMLElement{constructor(){super(...arguments),this.contentId=`db-section-${Math.random().toString(36).slice(2,9)}`,this.internalExpanded=!0,this.internalTabId="",this.handleToggle=()=>{if(!this.isCollapsible())return;const e=!this.isExpanded();this.hasAttribute("expanded")||(this.internalExpanded=e),this.dispatchEvent(new CustomEvent("db-expanded-change",{bubbles:!0,composed:!0,detail:{expanded:e}})),this.hasAttribute("expanded")||(this.syncHostClasses(),this.syncCollapsibleState())},this.handleTabChange=e=>{const t=e.detail,s=t?.id??this.parseTabs()[t?.index??0]?.id??String(t?.index??0);this.internalTabId=s,this.tabsEl?.setAttribute("selected-id",s),this.dispatchEvent(new CustomEvent("db-tab-change",{bubbles:!0,composed:!0,detail:{tabId:s}}))}}static get observedAttributes(){return["title","subtitle","description","size","collapsible","default-expanded","expanded","no-padding","full-width","full-height","overflow-visible","tabs","selected-tab-id","default-selected-tab-id"]}connectedCallback(){this.internalExpanded="false"!==this.getAttribute("default-expanded"),this.syncDefaultTab(),this.ensureStructure(),this.sync(),this.observer=new MutationObserver(()=>this.sync()),this.observer.observe(this,{childList:!0})}disconnectedCallback(){this.observer?.disconnect()}attributeChangedCallback(e){if(this.isConnected){if("default-expanded"!==e||this.hasAttribute("expanded")||(this.internalExpanded="false"!==this.getAttribute("default-expanded")),"default-selected-tab-id"!==e&&"tabs"!==e||this.syncDefaultTab(),"selected-tab-id"===e){const e=this.getAttribute("selected-tab-id");e&&(this.internalTabId=e)}this.sync()}}syncDefaultTab(){if(this.internalTabId)return;const e=this.parseTabs(),t=this.getAttribute("default-selected-tab-id")||"";this.internalTabId=t||e[0]?.id||""}parseTabs(){try{const e=JSON.parse(this.getAttribute("tabs")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}getActiveTabId(){const e=this.getAttribute("selected-tab-id");return e&&this.internalTabId&&e!==this.internalTabId?this.internalTabId:e||this.internalTabId||this.tabsEl?.getAttribute("selected-id")||""}hasHeaderTabs(){return this.parseTabs().length>0&&!this.isCollapsible()}isCollapsible(){return this.hasAttribute("collapsible")}isExpanded(){return!this.isCollapsible()||(this.hasAttribute("expanded")?"false"!==this.getAttribute("expanded"):this.internalExpanded)}isUserNode(e){return!e.hasAttribute("data-wc-internal")}collectSlotted(e){const t=Array.from(this.querySelectorAll(`:scope > [slot="${e}"]`)).filter(this.isUserNode);if(t.length)return t;if("actions"===e&&this.actionsHostEl)return Array.from(this.actionsHostEl.children);if("footer"===e&&this.footerEl)return Array.from(this.footerEl.children);if("header"===e){const e=this.headerEl?.querySelector(".designbase-wc-section__header-main");return e?Array.from(e.children):[]}if("description"===e){const e=this.headerEl?.querySelector(".designbase-wc-section__description"),t=e?.firstElementChild;return t?[t]:[]}return[]}collectContentNodes(){const e=Array.from(this.children).filter(e=>{if(!this.isUserNode(e))return!1;const t=e.getAttribute("slot");return!t||"default"===t});return e.length?e:this.contentEl?Array.from(this.contentEl.children):[]}ensureStructure(){this.headerEl||(this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section__header",this.headerEl.setAttribute("data-wc-internal","")),this.bodyEl||(this.bodyEl=document.createElement("div"),this.bodyEl.className="designbase-wc-section__body",this.bodyEl.id=this.contentId,this.bodyEl.setAttribute("data-wc-internal",""),this.bodyInnerEl=document.createElement("div"),this.bodyInnerEl.className="designbase-wc-section__body-inner",this.bodyInnerEl.setAttribute("data-wc-internal",""),this.bodyEl.append(this.bodyInnerEl)),this.contentEl||(this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-section__content",this.contentEl.setAttribute("data-wc-internal","")),this.footerEl||(this.footerEl=document.createElement("div"),this.footerEl.className="designbase-wc-section__footer",this.footerEl.setAttribute("data-wc-internal","")),this.headerEl.isConnected||this.append(this.headerEl)}mountBody(){const e=this.collectContentNodes(),t=this.collectSlotted("footer");if(this.contentEl.replaceChildren(...e),this.footerEl.replaceChildren(...t),this.footerEl.hidden=0===t.length,this.isCollapsible())return this.bodyInnerEl.replaceChildren(this.contentEl,this.footerEl),void(this.bodyEl.isConnected||this.append(this.bodyEl));this.bodyEl?.remove(),this.contentEl.isConnected||this.append(this.contentEl),t.length?this.footerEl.isConnected||this.append(this.footerEl):this.footerEl.remove()}getChevronSize(){const e=this.getAttribute("size")||"m";return"s"===e?16:"l"===e?24:20}createTitleArea(){const e=this.getAttribute("title"),t=this.getAttribute("subtitle"),s=this.getAttribute("description"),i=this.collectSlotted("description")[0];if(!(e||t||s||i))return null;const n=document.createElement("div");if(n.className="designbase-wc-section__title-area",e){const t=document.createElement("h2");t.className="designbase-wc-section__title",t.textContent=e,n.append(t)}if(t){const e=document.createElement("h3");e.className="designbase-wc-section__subtitle",e.textContent=t,n.append(e)}if(i){const e=document.createElement("p");e.className="designbase-wc-section__description",e.append(i),n.append(e)}else if(s){const e=document.createElement("p");e.className="designbase-wc-section__description",e.textContent=s,n.append(e)}return n}createChevron(){const t=document.createElement("span");return t.className="designbase-wc-section__chevron",t.setAttribute("aria-hidden","true"),t.append(e("chevron-down",this.getChevronSize())),t}renderHeader(){if(!this.headerEl)return;const e=this.collectSlotted("header")[0],t=this.collectSlotted("actions"),s=this.createTitleArea(),i=this.hasHeaderTabs(),n=Boolean(e||s||t.length);if(this.headerEl.replaceChildren(),this.headerEl.hidden=!n&&!i,this.headerEl.classList.toggle("designbase-wc-section__header--with-tabs",i),!n&&!i)return;if(this.isCollapsible()){if(e){const t=document.createElement("button");t.type="button",t.className="designbase-wc-section__header-trigger",t.setAttribute("aria-expanded",String(this.isExpanded())),t.setAttribute("aria-controls",this.contentId),t.addEventListener("click",this.handleToggle);const s=document.createElement("div");s.className="designbase-wc-section__header-main",s.append(e),t.append(s,this.createChevron()),this.headerEl.append(t)}else{const e=document.createElement("button");e.type="button",e.className="designbase-wc-section__header-trigger",e.setAttribute("aria-expanded",String(this.isExpanded())),e.setAttribute("aria-controls",this.contentId),e.addEventListener("click",this.handleToggle),s&&e.append(s),e.append(this.createChevron()),this.headerEl.append(e),t.length&&(this.actionsHostEl=document.createElement("div"),this.actionsHostEl.className="designbase-wc-section__actions",this.actionsHostEl.addEventListener("click",e=>e.stopPropagation()),t.forEach(e=>this.actionsHostEl.append(e)),this.headerEl.append(this.actionsHostEl))}return}const appendHeaderMain=i=>{e?i.append(e):(s&&i.append(s),t.length&&(this.actionsHostEl=document.createElement("div"),this.actionsHostEl.className="designbase-wc-section__actions",t.forEach(e=>this.actionsHostEl.append(e)),i.append(this.actionsHostEl)))};if(i){const e=document.createElement("div");e.className="designbase-wc-section__header-row",appendHeaderMain(e),this.headerEl.append(e);const t=document.createElement("div");return t.className="designbase-wc-section__header-tabs",this.tabsEl||(this.tabsEl=document.createElement("db-tabs"),this.tabsEl.setAttribute("size","m"),this.tabsEl.addEventListener("db-change",this.handleTabChange)),this.tabsEl.setAttribute("items",JSON.stringify(this.parseTabs())),this.tabsEl.setAttribute("selected-id",this.getActiveTabId()),t.append(this.tabsEl),void this.headerEl.append(t)}appendHeaderMain(this.headerEl)}syncHostClasses(){const e=this.getAttribute("size")||"m",s=t.includes(e)?e:"m",i=this.isExpanded();this.className=["designbase-wc-section",`designbase-wc-section--size-${s}`,this.hasAttribute("no-padding")&&"designbase-wc-section--no-padding",this.hasHeaderTabs()&&"designbase-wc-section--has-header-tabs",this.hasAttribute("full-width")&&"designbase-wc-section--full-width",this.hasAttribute("full-height")&&"designbase-wc-section--full-height",this.hasAttribute("overflow-visible")&&"designbase-wc-section--overflow-visible",this.isCollapsible()&&"designbase-wc-section--collapsible",this.isCollapsible()&&i&&"designbase-wc-section--expanded",this.isCollapsible()&&!i&&"designbase-wc-section--collapsed"].filter(Boolean).join(" ")}syncCollapsibleState(){if(!this.isCollapsible()||!this.bodyEl)return;const e=this.isExpanded();this.bodyEl.setAttribute("aria-hidden",String(!e));const t=this.headerEl?.querySelector(".designbase-wc-section__header-trigger");t?.setAttribute("aria-expanded",String(e))}sync(){this.ensureStructure(),this.syncHostClasses(),this.renderHeader(),this.mountBody(),this.syncCollapsibleState()}}customElements.get("db-section")||customElements.define("db-section",DbSection);export{DbSection};
+import{createDbIcon as e}from"./db-icons.js";import{dbUid as t}from"../core/uid.js";import{SECTION_SIZES as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbSection extends HTMLElement{constructor(){super(...arguments),this.contentId=t("db-section"),this.internalExpanded=!0,this.internalTabId="",this.handleToggle=()=>{if(!this.isCollapsible())return;const e=!this.isExpanded();this.hasAttribute("expanded")||(this.internalExpanded=e),this.dispatchEvent(new CustomEvent("db-expanded-change",{bubbles:!0,composed:!0,detail:{expanded:e}})),this.hasAttribute("expanded")||(this.syncHostClasses(),this.syncCollapsibleState())},this.handleTabChange=e=>{const t=e.detail,s=t?.id??this.parseTabs()[t?.index??0]?.id??String(t?.index??0);this.internalTabId=s,this.tabsEl?.setAttribute("selected-id",s),this.dispatchEvent(new CustomEvent("db-tab-change",{bubbles:!0,composed:!0,detail:{tabId:s}}))}}static get observedAttributes(){return["title","subtitle","description","size","collapsible","default-expanded","expanded","no-padding","full-width","full-height","overflow-visible","tabs","selected-tab-id","default-selected-tab-id"]}connectedCallback(){this.internalExpanded="false"!==this.getAttribute("default-expanded"),this.syncDefaultTab(),this.ensureStructure(),this.sync(),this.observer=new MutationObserver(()=>this.sync()),this.observer.observe(this,{childList:!0})}disconnectedCallback(){this.observer?.disconnect()}attributeChangedCallback(e){if(this.isConnected){if("default-expanded"!==e||this.hasAttribute("expanded")||(this.internalExpanded="false"!==this.getAttribute("default-expanded")),"default-selected-tab-id"!==e&&"tabs"!==e||this.syncDefaultTab(),"selected-tab-id"===e){const e=this.getAttribute("selected-tab-id");e&&(this.internalTabId=e)}this.sync()}}syncDefaultTab(){if(this.internalTabId)return;const e=this.parseTabs(),t=this.getAttribute("default-selected-tab-id")||"";this.internalTabId=t||e[0]?.id||""}parseTabs(){try{const e=JSON.parse(this.getAttribute("tabs")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}getActiveTabId(){const e=this.getAttribute("selected-tab-id");return e&&this.internalTabId&&e!==this.internalTabId?this.internalTabId:e||this.internalTabId||this.tabsEl?.getAttribute("selected-id")||""}hasHeaderTabs(){return this.parseTabs().length>0&&!this.isCollapsible()}isCollapsible(){return this.hasAttribute("collapsible")}isExpanded(){return!this.isCollapsible()||(this.hasAttribute("expanded")?"false"!==this.getAttribute("expanded"):this.internalExpanded)}isUserNode(e){return!e.hasAttribute("data-wc-internal")}collectSlotted(e){const t=Array.from(this.querySelectorAll(`:scope > [slot="${e}"]`)).filter(this.isUserNode);if(t.length)return t;if("actions"===e&&this.actionsHostEl)return Array.from(this.actionsHostEl.children);if("footer"===e&&this.footerEl)return Array.from(this.footerEl.children);if("header"===e){const e=this.headerEl?.querySelector(".designbase-wc-section__header-main");return e?Array.from(e.children):[]}if("description"===e){const e=this.headerEl?.querySelector(".designbase-wc-section__description"),t=e?.firstElementChild;return t?[t]:[]}return[]}collectContentNodes(){const e=Array.from(this.children).filter(e=>{if(!this.isUserNode(e))return!1;const t=e.getAttribute("slot");return!t||"default"===t});return e.length?e:this.contentEl?Array.from(this.contentEl.children):[]}ensureStructure(){this.headerEl||(this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section__header",this.headerEl.setAttribute("data-wc-internal","")),this.bodyEl||(this.bodyEl=document.createElement("div"),this.bodyEl.className="designbase-wc-section__body",this.bodyEl.id=this.contentId,this.bodyEl.setAttribute("data-wc-internal",""),this.bodyInnerEl=document.createElement("div"),this.bodyInnerEl.className="designbase-wc-section__body-inner",this.bodyInnerEl.setAttribute("data-wc-internal",""),this.bodyEl.append(this.bodyInnerEl)),this.contentEl||(this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-section__content",this.contentEl.setAttribute("data-wc-internal","")),this.footerEl||(this.footerEl=document.createElement("div"),this.footerEl.className="designbase-wc-section__footer",this.footerEl.setAttribute("data-wc-internal","")),this.headerEl.isConnected||this.append(this.headerEl)}mountBody(){const e=this.collectContentNodes(),t=this.collectSlotted("footer");if(this.contentEl.replaceChildren(...e),this.footerEl.replaceChildren(...t),this.footerEl.hidden=0===t.length,this.isCollapsible())return this.bodyInnerEl.replaceChildren(this.contentEl,this.footerEl),void(this.bodyEl.isConnected||this.append(this.bodyEl));this.bodyEl?.remove(),this.contentEl.isConnected||this.append(this.contentEl),t.length?this.footerEl.isConnected||this.append(this.footerEl):this.footerEl.remove()}getChevronSize(){const e=this.getAttribute("size")||"m";return"s"===e?16:"l"===e?24:20}createTitleArea(){const e=this.getAttribute("title"),t=this.getAttribute("subtitle"),s=this.getAttribute("description"),i=this.collectSlotted("description")[0];if(!(e||t||s||i))return null;const n=document.createElement("div");if(n.className="designbase-wc-section__title-area",e){const t=document.createElement("h2");t.className="designbase-wc-section__title",t.textContent=e,n.append(t)}if(t){const e=document.createElement("h3");e.className="designbase-wc-section__subtitle",e.textContent=t,n.append(e)}if(i){const e=document.createElement("p");e.className="designbase-wc-section__description",e.append(i),n.append(e)}else if(s){const e=document.createElement("p");e.className="designbase-wc-section__description",e.textContent=s,n.append(e)}return n}createChevron(){const t=document.createElement("span");return t.className="designbase-wc-section__chevron",t.setAttribute("aria-hidden","true"),t.append(e("chevron-down",this.getChevronSize())),t}renderHeader(){if(!this.headerEl)return;const e=this.collectSlotted("header")[0],t=this.collectSlotted("actions"),s=this.createTitleArea(),i=this.hasHeaderTabs(),n=Boolean(e||s||t.length);if(this.headerEl.replaceChildren(),this.headerEl.hidden=!n&&!i,this.headerEl.classList.toggle("designbase-wc-section__header--with-tabs",i),!n&&!i)return;if(this.isCollapsible()){if(e){const t=document.createElement("button");t.type="button",t.className="designbase-wc-section__header-trigger",t.setAttribute("aria-expanded",String(this.isExpanded())),t.setAttribute("aria-controls",this.contentId),t.addEventListener("click",this.handleToggle);const s=document.createElement("div");s.className="designbase-wc-section__header-main",s.append(e),t.append(s,this.createChevron()),this.headerEl.append(t)}else{const e=document.createElement("button");e.type="button",e.className="designbase-wc-section__header-trigger",e.setAttribute("aria-expanded",String(this.isExpanded())),e.setAttribute("aria-controls",this.contentId),e.addEventListener("click",this.handleToggle),s&&e.append(s),e.append(this.createChevron()),this.headerEl.append(e),t.length&&(this.actionsHostEl=document.createElement("div"),this.actionsHostEl.className="designbase-wc-section__actions",this.actionsHostEl.addEventListener("click",e=>e.stopPropagation()),t.forEach(e=>this.actionsHostEl.append(e)),this.headerEl.append(this.actionsHostEl))}return}const appendHeaderMain=i=>{e?i.append(e):(s&&i.append(s),t.length&&(this.actionsHostEl=document.createElement("div"),this.actionsHostEl.className="designbase-wc-section__actions",t.forEach(e=>this.actionsHostEl.append(e)),i.append(this.actionsHostEl)))};if(i){const e=document.createElement("div");e.className="designbase-wc-section__header-row",appendHeaderMain(e),this.headerEl.append(e);const t=document.createElement("div");return t.className="designbase-wc-section__header-tabs",this.tabsEl||(this.tabsEl=document.createElement("db-tabs"),this.tabsEl.setAttribute("size","m"),this.tabsEl.addEventListener("db-change",this.handleTabChange)),this.tabsEl.setAttribute("items",JSON.stringify(this.parseTabs())),this.tabsEl.setAttribute("selected-id",this.getActiveTabId()),t.append(this.tabsEl),void this.headerEl.append(t)}appendHeaderMain(this.headerEl)}syncHostClasses(){const e=this.getAttribute("size")||"m",t=s.includes(e)?e:"m",i=this.isExpanded();this.className=["designbase-wc-section",`designbase-wc-section--size-${t}`,this.hasAttribute("no-padding")&&"designbase-wc-section--no-padding",this.hasHeaderTabs()&&"designbase-wc-section--has-header-tabs",this.hasAttribute("full-width")&&"designbase-wc-section--full-width",this.hasAttribute("full-height")&&"designbase-wc-section--full-height",this.hasAttribute("overflow-visible")&&"designbase-wc-section--overflow-visible",this.isCollapsible()&&"designbase-wc-section--collapsible",this.isCollapsible()&&i&&"designbase-wc-section--expanded",this.isCollapsible()&&!i&&"designbase-wc-section--collapsed"].filter(Boolean).join(" ")}syncCollapsibleState(){if(!this.isCollapsible()||!this.bodyEl)return;const e=this.isExpanded();this.bodyEl.setAttribute("aria-hidden",String(!e));const t=this.headerEl?.querySelector(".designbase-wc-section__header-trigger");t?.setAttribute("aria-expanded",String(e))}sync(){this.ensureStructure(),this.syncHostClasses(),this.renderHeader(),this.mountBody(),this.syncCollapsibleState()}}customElements.get("db-section")||customElements.define("db-section",DbSection);export{DbSection};

package/dist/esm/components/db-segment-control.js

@@ -1 +1 @@
-const e="designbase-wc-segment-control",t={bar:'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="12" width="4" height="8"/><rect x="10" y="8" width="4" height="12"/><rect x="17" y="4" width="4" height="16"/></svg>',line:'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 16 9 10 14 13 20 6"/></svg>',pie:'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v10l8.66 5"/><circle cx="12" cy="12" r="10"/></svg>',donut:'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3"/></svg>',radar:'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 20 8 17 20 7 20 4 8"/></svg>'};class DbSegmentControl extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.indicatorEl=null,this.segmentButtons=[],this.focusedIndex=-1,this.boundKeyDown=e=>this.handleKeyDown(e),this.boundResize=()=>this.updateIndicator(),this.resizeObserver=null}static get observedAttributes(){return["options","value","default-value","size","variant","appearance","full-width","disabled"]}connectedCallback(){this.built||(this.built=!0),this.render(),this.addEventListener("keydown",this.boundKeyDown),window.addEventListener("resize",this.boundResize),this.resizeObserver=new ResizeObserver(()=>this.updateIndicator()),this.resizeObserver.observe(this)}disconnectedCallback(){this.removeEventListener("keydown",this.boundKeyDown),window.removeEventListener("resize",this.boundResize),this.resizeObserver?.disconnect(),this.resizeObserver=null}attributeChangedCallback(e){this.built&&("value"!==e?this.render():this.updateSelection())}get options(){return this.parseOptions(this.getAttribute("options"))}set options(e){const t="string"==typeof e?e:JSON.stringify(e);this.getAttribute("options")!==t&&this.setAttribute("options",t)}get value(){return this.getAttribute("value")||this.getAttribute("default-value")||this.options[0]?.value||""}set value(e){this.setAttribute("value",e)}parseOptions(e){if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}}render(){const i=this.getAttribute("size")||"m",s=this.getAttribute("variant")||"default",n=this.getAttribute("appearance")||"default",r=this.hasAttribute("disabled"),o=this.options,a=this.value;this.className=[e,`${e}--${i}`,`${e}--${s}`,"pill"===n&&`${e}--appearance-pill`,"rounded"===n&&`${e}--appearance-rounded`,this.hasAttribute("full-width")&&`${e}--full-width`,r&&`${e}--disabled`].filter(Boolean).join(" "),this.setAttribute("role","tablist"),this.setAttribute("aria-label","세그먼트 컨트롤"),this.replaceChildren(),this.segmentButtons=[],o.forEach((i,n)=>{const o=i.value===a,l=Boolean(r||i.disabled),d=document.createElement("button");if(d.type="button",d.className=[`${e}__segment`,o&&`${e}__segment--selected`,l&&`${e}__segment--disabled`].filter(Boolean).join(" "),d.setAttribute("role","tab"),d.setAttribute("aria-selected",String(o)),d.setAttribute("aria-disabled",String(l)),d.setAttribute("tabindex",o?"0":"-1"),d.disabled=l,i.icon&&t[i.icon]){const s=document.createElement("span");s.className=`${e}__segment-icon`,s.innerHTML=t[i.icon],d.appendChild(s)}const h=document.createElement("span");h.className=`${e}__segment-label`,h.textContent=i.label,"icon-only"===s&&h.setAttribute("aria-label",i.label),d.appendChild(h),d.addEventListener("click",()=>this.select(i.value)),d.addEventListener("focus",()=>{this.focusedIndex=n,d.classList.add(`${e}__segment--focused`)}),d.addEventListener("blur",()=>{this.focusedIndex=-1,d.classList.remove(`${e}__segment--focused`)}),this.appendChild(d),this.segmentButtons.push(d)}),this.indicatorEl=document.createElement("div"),this.indicatorEl.className=`${e}__indicator`,this.appendChild(this.indicatorEl),this.updateSelection()}updateSelection(){const t=this.options,i=this.value,s=t.findIndex(e=>e.value===i);this.segmentButtons.forEach((s,n)=>{const r=t[n],o=r?.value===i;s.classList.toggle(`${e}__segment--selected`,o),s.setAttribute("aria-selected",String(o)),s.setAttribute("tabindex",o?"0":"-1")}),this.indicatorEl&&t.length>0&&s>=0&&requestAnimationFrame(()=>this.updateIndicator())}updateIndicator(){const e=this.options.findIndex(e=>e.value===this.value),t=this.segmentButtons[e];this.indicatorEl&&t&&(this.indicatorEl.style.width=`${t.offsetWidth}px`,this.indicatorEl.style.transform=`translateX(${t.offsetLeft}px)`)}select(e){if(this.hasAttribute("disabled"))return;const t=this.options.find(t=>t.value===e);t&&!t.disabled&&(this.setAttribute("value",e),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:e},bubbles:!0,composed:!0})))}handleKeyDown(e){if(this.hasAttribute("disabled"))return;const t=this.options,i=t.findIndex(e=>e.value===this.value);if(-1===i)return;let s=i;switch(e.key){case"ArrowLeft":e.preventDefault(),s=i>0?i-1:t.length-1;break;case"ArrowRight":e.preventDefault(),s=i<t.length-1?i+1:0;break;case"Home":e.preventDefault(),s=0;break;case"End":e.preventDefault(),s=t.length-1;break;case"Enter":case" ":return e.preventDefault(),void this.select(t[s]?.value??this.value);default:return}for(;s!==i;){const i=t[s];if(i&&!i.disabled){this.segmentButtons[s]?.focus();break}s="ArrowLeft"===e.key||"Home"===e.key?s>0?s-1:t.length-1:s<t.length-1?s+1:0}}}customElements.get("db-segment-control")||customElements.define("db-segment-control",DbSegmentControl);export{DbSegmentControl};
+const e="designbase-wc-segment-control",t={bar:'<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="12" width="4" height="8"/><rect x="10" y="8" width="4" height="12"/><rect x="17" y="4" width="4" height="16"/></svg>',line:'<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 16 9 10 14 13 20 6"/></svg>',pie:'<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v10l8.66 5"/><circle cx="12" cy="12" r="10"/></svg>',donut:'<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3"/></svg>',radar:'<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 20 8 17 20 7 20 4 8"/></svg>'};class DbSegmentControl extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.indicatorEl=null,this.segmentButtons=[],this.focusedIndex=-1,this.boundKeyDown=e=>this.handleKeyDown(e),this.boundResize=()=>this.updateIndicator(),this.resizeObserver=null}static get observedAttributes(){return["options","value","default-value","size","variant","appearance","full-width","disabled"]}connectedCallback(){this.built||(this.built=!0),this.render(),this.addEventListener("keydown",this.boundKeyDown),window.addEventListener("resize",this.boundResize),this.resizeObserver=new ResizeObserver(()=>this.updateIndicator()),this.resizeObserver.observe(this)}disconnectedCallback(){this.removeEventListener("keydown",this.boundKeyDown),window.removeEventListener("resize",this.boundResize),this.resizeObserver?.disconnect(),this.resizeObserver=null}attributeChangedCallback(e){this.built&&("value"!==e?this.render():this.updateSelection())}get options(){return this.parseOptions(this.getAttribute("options"))}set options(e){const t="string"==typeof e?e:JSON.stringify(e);this.getAttribute("options")!==t&&this.setAttribute("options",t)}get value(){return this.getAttribute("value")||this.getAttribute("default-value")||this.options[0]?.value||""}set value(e){this.setAttribute("value",e)}parseOptions(e){if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}}render(){const i=this.getAttribute("size")||"m",s=this.getAttribute("variant")||"default",n=this.getAttribute("appearance")||"default",r=this.hasAttribute("disabled"),a=this.options,o=this.value;this.className=[e,`${e}--${i}`,`${e}--${s}`,"pill"===n&&`${e}--appearance-pill`,"rounded"===n&&`${e}--appearance-rounded`,this.hasAttribute("full-width")&&`${e}--full-width`,r&&`${e}--disabled`].filter(Boolean).join(" "),this.setAttribute("role","tablist"),this.setAttribute("aria-label","세그먼트 컨트롤"),this.replaceChildren(),this.segmentButtons=[],a.forEach((i,n)=>{const a=i.value===o,l=Boolean(r||i.disabled),d=document.createElement("button");if(d.type="button",d.className=[`${e}__segment`,a&&`${e}__segment--selected`,l&&`${e}__segment--disabled`].filter(Boolean).join(" "),d.setAttribute("role","tab"),d.setAttribute("aria-selected",String(a)),d.setAttribute("aria-disabled",String(l)),d.setAttribute("tabindex",a?"0":"-1"),d.disabled=l,i.icon&&t[i.icon]){const s=document.createElement("span");s.className=`${e}__segment-icon`,s.innerHTML=t[i.icon],d.appendChild(s)}const h=document.createElement("span");h.className=`${e}__segment-label`,h.textContent=i.label,"icon-only"===s&&h.setAttribute("aria-label",i.label),d.appendChild(h),d.addEventListener("click",()=>this.select(i.value)),d.addEventListener("focus",()=>{this.focusedIndex=n,d.classList.add(`${e}__segment--focused`)}),d.addEventListener("blur",()=>{this.focusedIndex=-1,d.classList.remove(`${e}__segment--focused`)}),this.appendChild(d),this.segmentButtons.push(d)}),this.indicatorEl=document.createElement("div"),this.indicatorEl.className=`${e}__indicator`,this.appendChild(this.indicatorEl),this.updateSelection()}updateSelection(){const t=this.options,i=this.value,s=t.findIndex(e=>e.value===i);this.segmentButtons.forEach((s,n)=>{const r=t[n],a=r?.value===i;s.classList.toggle(`${e}__segment--selected`,a),s.setAttribute("aria-selected",String(a)),s.setAttribute("tabindex",a?"0":"-1")}),this.indicatorEl&&t.length>0&&s>=0&&requestAnimationFrame(()=>this.updateIndicator())}updateIndicator(){const e=this.options.findIndex(e=>e.value===this.value),t=this.segmentButtons[e];this.indicatorEl&&t&&(this.indicatorEl.style.width=`${t.offsetWidth}px`,this.indicatorEl.style.transform=`translateX(${t.offsetLeft}px)`)}select(e){if(this.hasAttribute("disabled"))return;const t=this.options.find(t=>t.value===e);t&&!t.disabled&&(this.setAttribute("value",e),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:e},bubbles:!0,composed:!0})))}handleKeyDown(e){if(this.hasAttribute("disabled"))return;const t=this.options,i=t.findIndex(e=>e.value===this.value);if(-1===i)return;let s=i;switch(e.key){case"ArrowLeft":e.preventDefault(),s=i>0?i-1:t.length-1;break;case"ArrowRight":e.preventDefault(),s=i<t.length-1?i+1:0;break;case"Home":e.preventDefault(),s=0;break;case"End":e.preventDefault(),s=t.length-1;break;case"Enter":case" ":return e.preventDefault(),void this.select(t[s]?.value??this.value);default:return}for(;s!==i;){const i=t[s];if(i&&!i.disabled){this.segmentButtons[s]?.focus();break}s="ArrowLeft"===e.key||"Home"===e.key?s>0?s-1:t.length-1:s<t.length-1?s+1:0}}}customElements.get("db-segment-control")||customElements.define("db-segment-control",DbSegmentControl);export{DbSegmentControl};