@designbasekorea/ui-wc 0.2.1 → 0.3.0

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

@@ -0,0 +1 @@
+const e=["top","bottom","left","right","top-start","top-end","bottom-start","bottom-end","left-start","left-end","right-start","right-end"],t=["click","hover","focus","manual"];class DbPopover extends HTMLElement{constructor(){super(...arguments),this.onDocMouseDown=null,this.onDocKeyDown=null,this.onExternalTriggerClick=null,this.handleTriggerClick=e=>{"click"===this.resolvedTrigger()&&(e.preventDefault(),e.stopPropagation(),this.setOpen(!this.isOpen()))},this.handleTriggerMouseEnter=()=>{"hover"===this.resolvedTrigger()&&this.scheduleOpen()},this.handleTriggerMouseLeave=()=>{"hover"===this.resolvedTrigger()&&this.scheduleClose()},this.handleTriggerFocus=()=>{"focus"===this.resolvedTrigger()&&this.scheduleOpen()},this.handleTriggerBlur=()=>{"focus"===this.resolvedTrigger()&&this.scheduleClose()},this.handleReposition=()=>{this.isOpen()&&(this.repositionRaf&&cancelAnimationFrame(this.repositionRaf),this.repositionRaf=requestAnimationFrame(()=>{this.positionPanel(),this.repositionRaf=void 0}))}}static get observedAttributes(){return["open","placement","position","title","content","size","variant","trigger","delay","hide-delay","always-show","disabled","max-width","show-arrow","close-on-outside-click","close-on-escape","trigger-id"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}connectedCallback(){this.classList.add("designbase-wc-popover-host"),this.hasAttribute("placement")||this.hasAttribute("position")||this.setAttribute("placement","top"),this.render(),this.childObserver=new MutationObserver(()=>this.render()),this.childObserver.observe(this,{childList:!0}),this.bindExternalTrigger(),this.attachGlobalListeners(),this.syncOpenFromAttributes()}disconnectedCallback(){this.childObserver?.disconnect(),this.clearTimers(),this.repositionRaf&&cancelAnimationFrame(this.repositionRaf),this.unbindExternalTrigger(),this.detachGlobalListeners(),this.removePanel()}attributeChangedCallback(e){this.isConnected&&("trigger-id"===e&&(this.unbindExternalTrigger(),this.bindExternalTrigger()),"open"!==e&&"always-show"!==e&&"disabled"!==e?("content"===e&&this.bodyEl&&(this.bodyEl.textContent=this.getAttribute("content")||""),this.isOpen()&&(this.updatePanelMetadata(),requestAnimationFrame(()=>this.positionPanel()))):this.syncOpenFromAttributes())}resolvedPlacement(){const t=this.getAttribute("position")||this.getAttribute("placement")||"top";return e.includes(t)?t:"top"}resolvedTrigger(){const e=this.getAttribute("trigger")||"click";return t.includes(e)?e:"click"}isControlled(){return this.hasAttribute("open")}isOpen(){return!this.hasAttribute("disabled")&&(!!this.hasAttribute("always-show")||(this.isControlled()?"false"!==this.getAttribute("open"):this.panel?.classList.contains("designbase-wc-popover--visible")??!1))}setOpen(e){this.hasAttribute("disabled")||this.hasAttribute("always-show")||(this.isControlled()?e?this.setAttribute("open",""):this.removeAttribute("open"):e?this.showPanel():this.hidePanel(),this.dispatchEvent(new CustomEvent("db-open-change",{bubbles:!0,composed:!0,detail:{open:e}})),e||this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0})))}syncOpenFromAttributes(){this.hasAttribute("always-show")?this.showPanel():this.isControlled()&&("false"!==this.getAttribute("open")?this.showPanel():this.hidePanel())}clearTimers(){this.showTimer&&clearTimeout(this.showTimer),this.hideTimer&&clearTimeout(this.hideTimer),this.showTimer=void 0,this.hideTimer=void 0}groupOf(e){return e.startsWith("top")?"top":e.startsWith("bottom")?"bottom":e.startsWith("left")?"left":"right"}collectTriggerChildren(){const isInternalNode=e=>e.hasAttribute("data-wc-internal")||e===this.triggerWrap,e=Array.from(this.children).filter(e=>!isInternalNode(e));return e.length>0?e:Array.from(this.triggerWrap?.children||[])}ensureTriggerWrap(){this.triggerWrap||(this.triggerWrap=document.createElement("span"),this.triggerWrap.className="designbase-wc-popover__trigger",this.triggerWrap.setAttribute("data-wc-internal",""),this.triggerWrap.tabIndex=0,this.triggerWrap.addEventListener("click",this.handleTriggerClick),this.triggerWrap.addEventListener("mouseenter",this.handleTriggerMouseEnter),this.triggerWrap.addEventListener("mouseleave",this.handleTriggerMouseLeave),this.triggerWrap.addEventListener("focus",this.handleTriggerFocus),this.triggerWrap.addEventListener("blur",this.handleTriggerBlur))}mountTriggerChildren(e){this.triggerWrap&&e.forEach(e=>{e.parentElement!==this.triggerWrap&&this.triggerWrap.append(e)})}collectBodyChildren(){return Array.from(this.querySelectorAll('[slot="content"]'))}bindExternalTrigger(){const e=this.getAttribute("trigger-id");e&&(this.triggerEl=document.getElementById(e),this.triggerEl&&(this.onExternalTriggerClick=()=>{"click"===this.resolvedTrigger()&&this.setOpen(!this.isOpen())},this.triggerEl.addEventListener("click",this.onExternalTriggerClick)))}unbindExternalTrigger(){this.triggerEl&&this.onExternalTriggerClick&&this.triggerEl.removeEventListener("click",this.onExternalTriggerClick),this.triggerEl=null,this.onExternalTriggerClick=null}attachGlobalListeners(){this.onDocMouseDown=e=>{if(!this.isOpen()||"false"===this.getAttribute("close-on-outside-click"))return;const t=e.target;this.panel?.contains(t)||this.triggerWrap?.contains(t)||this.triggerEl?.contains(t)||this.setOpen(!1)},this.onDocKeyDown=e=>{"Escape"===e.key&&this.isOpen()&&"false"!==this.getAttribute("close-on-escape")&&this.setOpen(!1)},document.addEventListener("mousedown",this.onDocMouseDown),document.addEventListener("keydown",this.onDocKeyDown)}detachGlobalListeners(){this.onDocMouseDown&&document.removeEventListener("mousedown",this.onDocMouseDown),this.onDocKeyDown&&document.removeEventListener("keydown",this.onDocKeyDown),this.onDocMouseDown=null,this.onDocKeyDown=null}scheduleOpen(){this.clearTimers();const e="hover"===this.resolvedTrigger()?Math.max(0,Number(this.getAttribute("delay")||0)):0;this.showTimer=setTimeout(()=>this.showPanel(),e)}scheduleClose(){this.clearTimers();const e="hover"===this.resolvedTrigger()?Math.max(0,Number(this.getAttribute("hide-delay")||80)):0;this.hideTimer=setTimeout(()=>this.setOpen(!1),e)}getTriggerRect(){const e=this.triggerEl||this.triggerWrap;return e?.getBoundingClientRect()}flipPlacementIfNeeded(e,t,i){const s=window.innerHeight,r=window.innerWidth,o=this.groupOf(e),n=t.top-i.height-8>=8,a=t.bottom+8+i.height<=s-8,h=t.left-i.width-8>=8,l=t.right+8+i.width<=r-8;return"top"===o&&!n&&a?e.replace(/^top/,"bottom"):"bottom"===o&&!a&&n?e.replace(/^bottom/,"top"):"left"===o&&!h&&l?e.replace(/^left/,"right"):"right"===o&&!l&&h?e.replace(/^right/,"left"):e}applyCoords(e,t,i){let s=0,r=0,o=0,n=0;const a=i.height,h=i.width,l=16;switch(e){case"top":s=t.top-i.height-8,r=t.left+t.width/2-i.width/2,o=a-5,n=h/2-5;break;case"top-start":s=t.top-i.height-8,r=t.left,o=a-5,n=11;break;case"top-end":s=t.top-i.height-8,r=t.right-i.width,o=a-5,n=h-l-5;break;case"bottom":s=t.bottom+8,r=t.left+t.width/2-i.width/2,o=-5,n=h/2-5;break;case"bottom-start":s=t.bottom+8,r=t.left,o=-5,n=11;break;case"bottom-end":s=t.bottom+8,r=t.right-i.width,o=-5,n=h-l-5;break;case"left":s=t.top+t.height/2-i.height/2,r=t.left-i.width-8,o=a/2-5,n=h-5;break;case"left-start":s=t.top,r=t.left-i.width-8,o=11,n=h-5;break;case"left-end":s=t.bottom-i.height,r=t.left-i.width-8,o=a-l-5,n=h-5;break;case"right":s=t.top+t.height/2-i.height/2,r=t.right+8,o=a/2-5,n=-5;break;case"right-start":s=t.top,r=t.right+8,o=11,n=-5;break;case"right-end":s=t.bottom-i.height,r=t.right+8,o=a-l-5,n=-5}const d=window.innerWidth,c=window.innerHeight;return r<8&&(r=8),r+i.width>d-8&&(r=d-i.width-8),s<8&&(s=8),s+i.height>c-8&&(s=c-i.height-8),{top:s,left:r,aTop:o,aLeft:n,placement:e}}positionPanel(){if(!this.panel)return;const t=this.getTriggerRect();if(!t)return;const i=Number(this.getAttribute("max-width")||300);this.panel.style.maxWidth=`${i}px`,this.panel.offsetHeight;const s=this.panel.getBoundingClientRect(),r=this.resolvedPlacement(),o=this.flipPlacementIfNeeded(r,t,s),{top:n,left:a,aTop:h,aLeft:l}=this.applyCoords(o,t,s);this.panel.style.top=`${n}px`,this.panel.style.left=`${a}px`,this.panel.dataset.placementGroup=this.groupOf(o),e.forEach(e=>{this.panel.classList.toggle(`designbase-wc-popover--${e}`,e===o)}),this.arrowEl&&(this.arrowEl.className=`designbase-wc-popover__arrow designbase-wc-popover__arrow--${o}`,this.arrowEl.style.top=`${h}px`,this.arrowEl.style.left=`${l}px`)}revealPanel(){this.panel&&(this.panel.classList.remove("designbase-wc-popover--visible"),this.positionPanel(),this.panel.offsetHeight,this.positionPanel(),this.panel.classList.add("designbase-wc-popover--visible"))}updatePanelMetadata(){if(!this.panel)return;const e=this.getAttribute("size")||"m",t=this.getAttribute("variant")||"default",i=this.resolvedPlacement();this.panel.className=["designbase-wc-popover",`designbase-wc-popover--${e}`,`designbase-wc-popover--${t}`,`designbase-wc-popover--${i}`,this.isOpen()?"designbase-wc-popover--visible":"",this.hasAttribute("disabled")?"designbase-wc-popover--disabled":""].filter(Boolean).join(" ")}ensurePanel(){if(this.panel)return;const e=document.createElement("div");e.className="designbase-wc-popover",e.setAttribute("data-wc-internal",""),e.setAttribute("role","dialog"),e.setAttribute("aria-modal","false"),e.style.position="fixed",e.style.zIndex="9999";const t=document.createElement("div");t.className="designbase-wc-popover__content";const i=document.createElement("div");i.className="designbase-wc-popover__header";const s=document.createElement("h3");s.className="designbase-wc-popover__title";const r=document.createElement("db-button");r.className="designbase-wc-popover__close-button",r.setAttribute("variant","ghost"),r.setAttribute("size","s"),r.setAttribute("icon-only",""),r.setAttribute("start-icon","close"),r.setAttribute("aria-label","팝오버 닫기"),r.addEventListener("db-click",e=>{e.stopPropagation(),this.setOpen(!1)}),i.append(s,r),this.bodyEl=document.createElement("div"),this.bodyEl.className="designbase-wc-popover__body",t.append(i,this.bodyEl),e.append(t),"false"!==this.getAttribute("show-arrow")&&(this.arrowEl=document.createElement("div"),this.arrowEl.className=`designbase-wc-popover__arrow designbase-wc-popover__arrow--${this.resolvedPlacement()}`,e.append(this.arrowEl)),this.panel=e,this.panel.querySelector(".designbase-wc-popover__title").textContent=this.getAttribute("title")||"",this.panel.querySelector(".designbase-wc-popover__title").hidden=!this.getAttribute("title"),document.body.append(e),e.addEventListener("mouseenter",()=>{"hover"===this.resolvedTrigger()&&this.clearTimers()}),e.addEventListener("mouseleave",()=>{"hover"===this.resolvedTrigger()&&this.scheduleClose()})}showPanel(){if(this.hasAttribute("disabled"))return;this.ensurePanel(),this.updatePanelMetadata();const e=this.collectBodyChildren();e.length>0?this.bodyEl.replaceChildren(...e.map(e=>e.cloneNode(!0))):this.bodyEl.textContent=this.getAttribute("content")||"";const t=this.panel.querySelector(".designbase-wc-popover__title");t.textContent=this.getAttribute("title")||"",t.hidden=!this.getAttribute("title"),requestAnimationFrame(()=>{this.revealPanel(),window.addEventListener("scroll",this.handleReposition,!0),window.addEventListener("resize",this.handleReposition)})}hidePanel(){this.panel?.classList.remove("designbase-wc-popover--visible"),window.removeEventListener("scroll",this.handleReposition,!0),window.removeEventListener("resize",this.handleReposition),this.hasAttribute("always-show")||this.removePanel()}removePanel(){this.panel?.remove(),this.panel=void 0,this.bodyEl=void 0,this.arrowEl=void 0}render(){this.ensureTriggerWrap();const e=this.collectTriggerChildren();this.mountTriggerChildren(e);const t=Boolean(this.getAttribute("trigger-id"));this.triggerWrap&&(e.length>0||!t?this.triggerWrap.parentElement!==this&&this.append(this.triggerWrap):this.triggerWrap.parentElement===this&&this.triggerWrap.remove()),this.hasAttribute("always-show")&&this.showPanel()}}customElements.get("db-popover")||customElements.define("db-popover",DbPopover);export{DbPopover};

package/dist/esm/components/db-progress-step.d.ts

@@ -0,0 +1,28 @@
+interface DbProgressStepItemData {
+    id: string;
+    title: string;
+    description?: string;
+    status?: 'pending' | 'active' | 'completed' | 'error';
+    timestamp?: string;
+    disabled?: boolean;
+}
+declare class DbProgressStep extends HTMLElement {
+    static get observedAttributes(): string[];
+    get items(): DbProgressStepItemData[];
+    set items(value: DbProgressStepItemData[] | string);
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private resolveStatus;
+    private iconSize;
+    private renderIndicatorContent;
+    private handleStepClick;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-progress-step': DbProgressStep;
+    }
+}
+
+export { DbProgressStep };
+export type { DbProgressStepItemData };

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

@@ -0,0 +1 @@
+import{createDbIcon as e}from"./db-icons.js";class DbProgressStep extends HTMLElement{static get observedAttributes(){return["items","size","layout","current-step","clickable","full-width","disabled"]}get items(){try{return JSON.parse(this.getAttribute("items")||"[]")}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}resolveStatus(e,t){const s=t.status??"pending";if("pending"!==s)return s;const n=Number(this.getAttribute("current-step")||0);return e<n?"completed":e===n?"active":"pending"}iconSize(e){return"s"===e?12:"l"===e?20:16}renderIndicatorContent(t,s,n){const i=document.createElement("div");if(i.className="designbase-wc-progress-step__icon","completed"===t)i.append(e("done",this.iconSize(n)));else if("error"===t)i.append(e("warning-filled",this.iconSize(n)));else{const e=document.createElement("span");e.className="designbase-wc-progress-step__number",e.textContent=String(s+1),i.append(e)}return i}handleStepClick(e,t){const s=this.hasAttribute("disabled"),n=this.hasAttribute("clickable");s||e.disabled||!n||this.dispatchEvent(new CustomEvent("db-step-click",{detail:{item:e,index:t},bubbles:!0,composed:!0}))}render(){const e=this.getAttribute("size")||"m",t=this.getAttribute("layout")||"horizontal",s=this.hasAttribute("clickable"),n=this.hasAttribute("disabled"),i=this.items;this.className=["designbase-wc-progress-step",`designbase-wc-progress-step--${e}`,`designbase-wc-progress-step--${t}`,s&&"designbase-wc-progress-step--clickable",this.hasAttribute("full-width")&&"designbase-wc-progress-step--full-width",n&&"designbase-wc-progress-step--disabled"].filter(Boolean).join(" "),this.replaceChildren(),i.forEach((t,r)=>{const a=this.resolveStatus(r,t),c=r===i.length-1,d=s&&!n&&!t.disabled,o="completed"===(r>0?this.resolveStatus(r-1,i[r-1]):"pending")?"completed":a,p=document.createElement("div");p.className=["designbase-wc-progress-step__item",`designbase-wc-progress-step__item--${a}`,d&&"designbase-wc-progress-step__item--clickable",t.disabled&&"designbase-wc-progress-step__item--disabled"].filter(Boolean).join(" ");const l=document.createElement("div");l.className="designbase-wc-progress-step__indicator-container";const m=document.createElement("div");if(m.className="designbase-wc-progress-step__indicator",d?(m.tabIndex=0,m.setAttribute("role","button"),m.setAttribute("aria-label",`${t.title} 단계로 이동`),m.addEventListener("click",()=>this.handleStepClick(t,r)),m.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleStepClick(t,r))})):m.tabIndex=-1,"active"===a){const e=document.createElement("div");e.className="designbase-wc-progress-step__pulse",m.append(e)}if(m.append(this.renderIndicatorContent(a,r,e)),l.append(m),!c){const e=document.createElement("div");e.className=["designbase-wc-progress-step__connector",`designbase-wc-progress-step__connector--${o}`].join(" "),l.append(e)}p.append(l);const b=document.createElement("div");b.className="designbase-wc-progress-step__content";const g=document.createElement("div");g.className="designbase-wc-progress-step__header";const u=document.createElement("h3");if(u.className="designbase-wc-progress-step__title",u.textContent=t.title,g.append(u),b.append(g),t.description){const e=document.createElement("p");e.className="designbase-wc-progress-step__description",e.textContent=t.description,b.append(e)}if(t.timestamp){const e=document.createElement("span");e.className="designbase-wc-progress-step__timestamp",e.textContent=t.timestamp,b.append(e)}p.append(b),this.append(p)})}}customElements.get("db-progress-step")||customElements.define("db-progress-step",DbProgressStep);export{DbProgressStep};

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

@@ -0,0 +1,25 @@
+declare class DbProgress extends HTMLElement {
+    static get observedAttributes(): string[];
+    private structureSignature;
+    private barEl?;
+    private linearValueEl?;
+    private circularBarEl?;
+    private circularValueEl?;
+    private circumference;
+    get value(): number;
+    set value(value: number);
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private render;
+    private buildLinear;
+    private updateLinear;
+    private buildCircular;
+    private updateCircular;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-progress': DbProgress;
+    }
+}
+
+export { DbProgress };

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

@@ -0,0 +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};

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

@@ -0,0 +1,13 @@
+declare class DbProgressbar extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-progressbar': DbProgressbar;
+    }
+}
+
+export { DbProgressbar };

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

@@ -0,0 +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};

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

@@ -0,0 +1,34 @@
+declare class DbRadio extends HTMLElement {
+    static get observedAttributes(): string[];
+    private root?;
+    private input?;
+    private visual?;
+    private dot?;
+    private labelEl?;
+    private built;
+    get checked(): boolean;
+    set checked(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get readOnly(): boolean;
+    set readOnly(value: boolean);
+    get required(): boolean;
+    set required(value: boolean);
+    get size(): string;
+    set size(value: string);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private get hasLabel();
+    private build;
+    private handleChange;
+    private syncState;
+    private syncVisual;
+    private syncClasses;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-radio': DbRadio;
+    }
+}
+
+export { DbRadio };

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

@@ -0,0 +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};

package/dist/esm/components/db-random-gradient.d.ts

@@ -0,0 +1,24 @@
+declare class DbRandomGradient extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private backgroundEl?;
+    private overlayEl?;
+    private contentEl?;
+    private animationTimer?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private getBool;
+    private build;
+    private stopAnimation;
+    private applyGradient;
+    private syncContent;
+    private updateUI;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-random-gradient': DbRandomGradient;
+    }
+}
+
+export { DbRandomGradient };

package/dist/esm/components/db-random-gradient.js

@@ -0,0 +1 @@
+import{createRandomGradientStyle as t,COLOR_PALETTES as e}from"./random-gradient-palettes.js";const i="designbase-wc-random-gradient";class DbRandomGradient extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["scheme","tone","width","height","blur","color-count","animated","animation-duration","overlay","overlay-opacity"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}disconnectedCallback(){this.stopAnimation()}attributeChangedCallback(){this.built&&this.updateUI()}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const i=this.getAttribute(t);return""===i||"true"===i}build(){this.backgroundEl=document.createElement("div"),this.backgroundEl.className=`${i}__background`,this.overlayEl=document.createElement("div"),this.overlayEl.className=`${i}__overlay`,this.contentEl=document.createElement("div"),this.contentEl.className=`${i}__content`,this.append(this.backgroundEl,this.overlayEl,this.contentEl)}stopAnimation(){this.animationTimer&&(window.clearInterval(this.animationTimer),this.animationTimer=void 0)}applyGradient(){const e=this.getAttribute("scheme")||"primary",i=this.getAttribute("tone")||"vivid",n=Number(this.getAttribute("color-count")||4),a=Number(this.getAttribute("blur")||80),s=this.getBool("animated"),r=Number(this.getAttribute("animation-duration")||10),o=t(e,i,n,a,s,r);this.backgroundEl&&Object.assign(this.backgroundEl.style,o)}syncContent(){if(!this.contentEl)return;Array.from(this.childNodes).filter(t=>t!==this.backgroundEl&&t!==this.overlayEl&&t!==this.contentEl&&!(t instanceof HTMLElement&&t.hasAttribute("data-wc-internal"))).forEach(t=>this.contentEl.append(t)),this.contentEl.hidden=0===this.contentEl.childNodes.length}updateUI(){const t=this.getAttribute("scheme")||"primary",n=this.getAttribute("tone")||"vivid",a=this.getAttribute("width")||"100%",s=this.getAttribute("height")||"600px",r=!this.hasAttribute("overlay")||"false"!==this.getAttribute("overlay"),o=Number(this.getAttribute("overlay-opacity")||.2),l=this.getBool("animated");if(this.className=[i,l&&`${i}--animated`,r&&`${i}--with-overlay`].filter(Boolean).join(" "),this.style.width=/^\d+$/.test(a)?`${a}px`:a,this.style.height=/^\d+$/.test(s)?`${s}px`:s,this.overlayEl&&(this.overlayEl.hidden=!r,r)){const i=e[t][n];Object.assign(this.overlayEl.style,{background:`linear-gradient(45deg, ${i[0]}, ${i[1]})`,opacity:String(o)})}if(this.stopAnimation(),this.applyGradient(),l){const t=Number(this.getAttribute("animation-duration")||10);this.animationTimer=window.setInterval(()=>this.applyGradient(),1e3*t)}this.syncContent()}}customElements.get("db-random-gradient")||customElements.define("db-random-gradient",DbRandomGradient);export{DbRandomGradient};

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

@@ -0,0 +1,71 @@
+/**
+ * RangeSlider Web Component
+ * packages/ui RangeSlider.tsx와 DOM·동작·스타일 1:1 동기화
+ */
+declare class DbRangeSlider extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private headerEl;
+    private labelEl;
+    private valuesEl;
+    private containerEl;
+    private trackEl;
+    private fillEl;
+    private thumbEls;
+    private currentValue;
+    private currentRange;
+    private isDragging;
+    private activeThumb;
+    private boundTrackClick;
+    private boundPointerMove;
+    private boundPointerUp;
+    private boundContainerKeyDown;
+    private eventsBound;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private isStructuralAttribute;
+    get value(): number;
+    set value(v: number);
+    get range(): [number, number] | undefined;
+    set range(v: [number, number] | string | undefined);
+    private build;
+    private getValuePosition;
+    private shouldShowLabel;
+    private formatValue;
+    private syncDomOrder;
+    private bindEvents;
+    private unbindEvents;
+    private readAttributeValues;
+    private syncClasses;
+    private syncStructure;
+    private isMarkActive;
+    private syncVisuals;
+    private syncThumbTooltips;
+    private syncA11y;
+    private setThumbPosition;
+    private valueToPercent;
+    private percentToValue;
+    private snapToStep;
+    private clamp;
+    private getNumberAttr;
+    private normalizeRangeInput;
+    private parseRangeAttr;
+    private parseMarks;
+    private parseMarkLabels;
+    private isInteractive;
+    private getTrackPercent;
+    private handleThumbPointerDown;
+    private handleTrackClick;
+    private handlePointerMove;
+    private handlePointerUp;
+    private setThumbActive;
+    private applyDragValue;
+    private commitValueAtPosition;
+    private handleKeyDown;
+    private afterKeyboard;
+    private dispatchValueChange;
+    private dispatchRangeChange;
+}
+
+export { DbRangeSlider };

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

@@ -0,0 +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=[t,`${t}--${e}`,`${t}--${i}`,`${t}--value-${s?"top":r}`,this.shouldShowLabel()?`${t}--has-label`:"",this.hasAttribute("disabled")?`${t}--disabled`:"",this.hasAttribute("readonly")?`${t}--readonly`:"",this.hasAttribute("full-width")?`${t}--full-width`:"",this.hasAttribute("vertical")?`${t}--vertical`:"",this.hasAttribute("show-thumb-tooltip")?`${t}--show-tooltip`:"",s?`${t}--range`:""].filter(Boolean);if(this.className=a.join(" "),this.trackEl){const e=[`${t}__track`];this.hasAttribute("disabled")&&e.push(`${t}__track--disabled`),this.hasAttribute("readonly")&&e.push(`${t}__track--readonly`),this.trackEl.className=e.join(" ")}}syncStructure(){if(!this.valuesEl||!this.trackEl||!this.fillEl)return;const e=this.hasAttribute("show-value"),i=this.hasAttribute("range"),s=this.hasAttribute("show-marks");if(this.valuesEl.innerHTML="",this.valuesEl.hidden=!e,e)if(i){const e=document.createElement("span");e.className=`${t}__value ${t}__value--min`;const i=document.createElement("span");i.className=`${t}__value-separator`,i.textContent="~",i.setAttribute("aria-hidden","true");const s=document.createElement("span");s.className=`${t}__value ${t}__value--max`,this.valuesEl.append(e,i,s)}else{const e=document.createElement("span");e.className=`${t}__value ${t}__value--single`,this.valuesEl.appendChild(e)}if(this.thumbEls.forEach(t=>t.remove()),this.thumbEls=[],this.trackEl.querySelectorAll(`.${t}__mark`).forEach(t=>t.remove()),s){const e=this.parseMarks();if(e.length>0){const i=this.parseMarkLabels();e.forEach(e=>{const s=document.createElement("div");if(s.className=`${t}__mark`,s.setAttribute("aria-hidden","true"),this.isMarkActive(e)&&s.classList.add(`${t}__mark--active`),this.hasAttribute("vertical")?s.style.bottom=`${this.valueToPercent(e)}%`:s.style.left=`${this.valueToPercent(e)}%`,void 0!==i[e]){const r=document.createElement("span");r.className=`${t}__mark-label`,r.textContent=i[e],s.appendChild(r)}this.trackEl.insertBefore(s,this.fillEl)})}}const r=i?2:1,a=this.hasAttribute("disabled")||this.hasAttribute("readonly");for(let e=0;e<r;e++){const s=document.createElement("div");s.className=`${t}__thumb`,s.setAttribute("role","slider"),s.setAttribute("draggable","false"),s.setAttribute("tabindex",a?"-1":"0");const r=i?0===e?"min":"max":"single";i&&(s.dataset.thumb=r),s.addEventListener("pointerdown",t=>this.handleThumbPointerDown(t,r)),s.addEventListener("keydown",t=>this.handleKeyDown(t,r));const n=document.createElement("span");n.className=`${t}__thumb-tooltip`,n.setAttribute("aria-hidden","true"),n.hidden=!0,s.appendChild(n),this.trackEl.appendChild(s),this.thumbEls.push(s)}}isMarkActive(t){if(this.hasAttribute("range")){const[e,i]=this.currentRange;return t>=e&&t<=i}return t<=this.currentValue}syncVisuals(){if(!this.fillEl)return;const e=this.hasAttribute("range"),i=this.getNumberAttr("min",0),s=this.getNumberAttr("max",100);if(e){const[e,r]=this.currentRange,a=this.valueToPercent(e),n=this.valueToPercent(r);this.hasAttribute("vertical")?(this.fillEl.style.left="",this.fillEl.style.width="",this.fillEl.style.bottom=`${a}%`,this.fillEl.style.height=n-a+"%"):(this.fillEl.style.bottom="",this.fillEl.style.height="",this.fillEl.style.left=`${a}%`,this.fillEl.style.width=n-a+"%"),this.thumbEls[0]&&(this.setThumbPosition(this.thumbEls[0],a),this.thumbEls[0].setAttribute("aria-valuemin",String(i)),this.thumbEls[0].setAttribute("aria-valuemax",String(r)),this.thumbEls[0].setAttribute("aria-valuenow",String(e))),this.thumbEls[1]&&(this.setThumbPosition(this.thumbEls[1],n),this.thumbEls[1].setAttribute("aria-valuemin",String(e)),this.thumbEls[1].setAttribute("aria-valuemax",String(s)),this.thumbEls[1].setAttribute("aria-valuenow",String(r)));const h=this.valuesEl?.querySelector(`.${t}__value--min`),l=this.valuesEl?.querySelector(`.${t}__value--max`);h&&(h.textContent=this.formatValue(e)),l&&(l.textContent=this.formatValue(r))}else{const e=this.valueToPercent(this.currentValue);this.hasAttribute("vertical")?(this.fillEl.style.left="",this.fillEl.style.width="",this.fillEl.style.bottom="0",this.fillEl.style.height=`${e}%`):(this.fillEl.style.bottom="",this.fillEl.style.height="",this.fillEl.style.left="0",this.fillEl.style.width=`${e}%`),this.thumbEls[0]&&(this.setThumbPosition(this.thumbEls[0],e),this.thumbEls[0].setAttribute("aria-valuemin",String(i)),this.thumbEls[0].setAttribute("aria-valuemax",String(s)),this.thumbEls[0].setAttribute("aria-valuenow",String(this.currentValue)));const r=this.valuesEl?.querySelector(`.${t}__value--single`);r&&(r.textContent=this.formatValue(this.currentValue))}this.syncThumbTooltips(),this.trackEl?.querySelectorAll(`.${t}__mark`).forEach(e=>{const i=e instanceof HTMLElement?parseFloat(e.style.left):NaN,s=e instanceof HTMLElement?parseFloat(e.style.bottom):NaN,r=Number.isFinite(i)?i:s;if(!Number.isFinite(r))return;const a=this.percentToValue(r);e.classList.toggle(`${t}__mark--active`,this.isMarkActive(a))})}syncThumbTooltips(){const e=this.hasAttribute("range"),i=this.hasAttribute("show-thumb-tooltip");this.thumbEls.forEach((s,r)=>{const a=s.querySelector(`.${t}__thumb-tooltip`);if(!a)return;if(!i)return void(a.hidden=!0);a.hidden=!1;const n=e?0===r?this.currentRange[0]:this.currentRange[1]:this.currentValue;a.textContent=this.formatValue(n)})}syncA11y(){if(!this.containerEl)return;const t=this.getNumberAttr("min",0),e=this.getNumberAttr("max",100),i=this.hasAttribute("range"),s=this.hasAttribute("disabled"),r=this.hasAttribute("readonly");this.containerEl.setAttribute("aria-valuemin",String(t)),this.containerEl.setAttribute("aria-valuemax",String(e)),this.containerEl.setAttribute("aria-valuenow",String(i?this.currentRange[0]:this.currentValue)),this.containerEl.setAttribute("aria-valuetext",i?`${this.currentRange[0]} to ${this.currentRange[1]}`:String(this.currentValue)),this.containerEl.setAttribute("aria-disabled",String(s)),this.containerEl.setAttribute("aria-readonly",String(r)),this.containerEl.setAttribute("tabindex",s||r?"-1":"0")}setThumbPosition(t,e){this.hasAttribute("vertical")?(t.style.left="",t.style.bottom=`${e}%`):(t.style.bottom="",t.style.left=`${e}%`)}valueToPercent(t){const e=this.getNumberAttr("min",0),i=this.getNumberAttr("max",100);return i===e?0:(t-e)/(i-e)*100}percentToValue(t){const e=this.getNumberAttr("min",0),i=this.getNumberAttr("max",100),s=this.getNumberAttr("step",1),r=e+t/100*(i-e);return this.snapToStep(r,e,i,s)}snapToStep(t,e,i,s){const r=Math.round(t/s)*s;return Math.min(i,Math.max(e,r))}clamp(t,e=this.getNumberAttr("min",0),i=this.getNumberAttr("max",100),s=this.getNumberAttr("step",1)){return this.snapToStep(Math.min(i,Math.max(e,t)),e,i,s)}getNumberAttr(t,e){const i=this.getAttribute(t);if(null===i||""===i)return e;const s=Number(i);return Number.isFinite(s)?s:e}normalizeRangeInput(t){if("string"==typeof t)return this.parseRangeAttr(t);if(!Array.isArray(t)||t.length<2)return null;const e=Number(t[0]),i=Number(t[1]);return Number.isFinite(e)&&Number.isFinite(i)?[e,i]:null}parseRangeAttr(t){if(!t)return null;if(t.startsWith("[")){try{const e=JSON.parse(t);if(Array.isArray(e)&&2===e.length){const t=Number(e[0]),i=Number(e[1]);if(Number.isFinite(t)&&Number.isFinite(i))return[t,i]}}catch{return null}return null}const e=t.split(",").map(t=>Number(t.trim()));return 2!==e.length||e.some(t=>!Number.isFinite(t))?null:[e[0],e[1]]}parseMarks(){const t=this.getAttribute("marks");if(!t)return[];if(t.startsWith("[")){try{const e=JSON.parse(t);if(Array.isArray(e))return e.map(t=>Number(t)).filter(t=>Number.isFinite(t))}catch{return[]}return[]}return t.split(",").map(t=>Number(t.trim())).filter(t=>Number.isFinite(t))}parseMarkLabels(){const t=this.getAttribute("mark-labels");if(!t)return{};try{const e=JSON.parse(t),i={};return Object.entries(e).forEach(([t,e])=>{i[Number(t)]=e}),i}catch{return{}}}isInteractive(){return!this.hasAttribute("disabled")&&!this.hasAttribute("readonly")}getTrackPercent(t,e){if(!this.trackEl)return 0;const i=this.trackEl.getBoundingClientRect();if(this.hasAttribute("vertical")){const t=Math.max(i.top,Math.min(i.bottom,e));return(i.bottom-t)/i.height*100}return(Math.max(i.left,Math.min(i.right,t))-i.left)/i.width*100}handleThumbPointerDown(t,e){this.isInteractive()&&(t.preventDefault(),this.isDragging=!0,this.activeThumb=e,this.setThumbActive(e,!0),document.addEventListener("pointermove",this.boundPointerMove),document.addEventListener("pointerup",this.boundPointerUp))}handleTrackClick(e){if(!this.isInteractive()||!this.trackEl)return;if(e.target.closest(`.${t}__thumb`))return;const i=this.getTrackPercent(e.clientX,e.clientY),s=this.percentToValue(i);this.commitValueAtPosition(s)}handlePointerMove(t){if(!this.isDragging||!this.isInteractive())return;const e=this.getTrackPercent(t.clientX,t.clientY),i=this.percentToValue(e);this.applyDragValue(i)}handlePointerUp(){this.isDragging&&(this.activeThumb&&this.setThumbActive(this.activeThumb,!1),this.isDragging=!1,this.activeThumb=null,document.removeEventListener("pointermove",this.boundPointerMove),document.removeEventListener("pointerup",this.boundPointerUp),this.syncThumbTooltips(),this.hasAttribute("range")?this.setAttribute("range",`${this.currentRange[0]},${this.currentRange[1]}`):this.setAttribute("value",String(this.currentValue)),this.syncA11y())}setThumbActive(e,i){if(this.hasAttribute("range")){const s=this.thumbEls["min"===e?0:1];return void s?.classList.toggle(`${t}__thumb--active`,i)}this.thumbEls[0]?.classList.toggle(`${t}__thumb--active`,i)}applyDragValue(t){const e=this.clamp(t);if(this.hasAttribute("range")){const[t,i]=this.currentRange;if("min"===this.activeThumb)this.currentRange=[Math.min(e,i),i];else if("max"===this.activeThumb)this.currentRange=[t,Math.max(e,t)];else{Math.abs(e-t)<=Math.abs(e-i)?(this.currentRange=[Math.min(e,i),i],this.activeThumb="min"):(this.currentRange=[t,Math.max(e,t)],this.activeThumb="max")}this.syncVisuals(),this.dispatchRangeChange()}else this.currentValue=e,this.syncVisuals(),this.syncA11y(),this.dispatchValueChange()}commitValueAtPosition(t){const e=this.clamp(t);if(this.hasAttribute("range")){const[t,i]=this.currentRange,s=Math.abs(e-t),r=Math.abs(e-i);this.currentRange=s<=r?[Math.min(e,i),i]:[t,Math.max(e,t)],this.setAttribute("range",`${this.currentRange[0]},${this.currentRange[1]}`),this.syncVisuals(),this.dispatchRangeChange()}else this.currentValue=e,this.setAttribute("value",String(this.currentValue)),this.syncVisuals(),this.syncA11y(),this.dispatchValueChange()}handleKeyDown(t,e="single"){if(!this.isInteractive())return;const i=this.getNumberAttr("step",1),s=this.getNumberAttr("min",0),r=this.getNumberAttr("max",100);let a;if(this.hasAttribute("range")&&"single"!==e){const n="min"===e?this.currentRange[0]:this.currentRange[1];switch(t.key){case"ArrowLeft":case"ArrowDown":a=this.clamp(n-i,s,r);break;case"ArrowRight":case"ArrowUp":a=this.clamp(n+i,s,r);break;case"Home":a=s;break;case"End":a=r;break;default:return}const h=[...this.currentRange];if("min"===e?h[0]=a:h[1]=a,h[0]>h[1])return;return t.preventDefault(),this.currentRange=h,void this.afterKeyboard()}if(!this.hasAttribute("range")){switch(t.key){case"ArrowLeft":case"ArrowDown":a=this.clamp(this.currentValue-i,s,r);break;case"ArrowRight":case"ArrowUp":a=this.clamp(this.currentValue+i,s,r);break;case"Home":a=s;break;case"End":a=r;break;default:return}t.preventDefault(),this.currentValue=a,this.afterKeyboard()}}afterKeyboard(){this.hasAttribute("range")?(this.setAttribute("range",`${this.currentRange[0]},${this.currentRange[1]}`),this.syncVisuals(),this.dispatchRangeChange()):(this.setAttribute("value",String(this.currentValue)),this.syncVisuals(),this.syncA11y(),this.dispatchValueChange())}dispatchValueChange(){this.dispatchEvent(new CustomEvent("db-change",{bubbles:!0,composed:!0,detail:{value:this.currentValue}}))}dispatchRangeChange(){this.dispatchEvent(new CustomEvent("db-change",{bubbles:!0,composed:!0,detail:{range:[...this.currentRange]}}))}}customElements.get("db-range-slider")||customElements.define("db-range-slider",DbRangeSlider);export{DbRangeSlider};

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

@@ -0,0 +1,31 @@
+declare class DbRating extends HTMLElement {
+    private hoverValue;
+    private starsEl;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private getNumberAttr;
+    private getBooleanAttr;
+    private getOption;
+    private normalizeSize;
+    private getStarIconSize;
+    private supportsHalfSteps;
+    private isInteractive;
+    private getStarFill;
+    private getPointerValue;
+    private formatRating;
+    private updateStarElement;
+    private refreshStars;
+    private handlePointerMove;
+    private handlePointerLeave;
+    private handleClick;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-rating': DbRating;
+    }
+}
+
+export { DbRating };

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

@@ -0,0 +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};

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

@@ -0,0 +1,38 @@
+type DbReorderItem = {
+    id: string;
+    content: string;
+    disabled?: boolean;
+    selected?: boolean;
+};
+declare class DbReorder extends HTMLElement {
+    private draggedIndex;
+    private dropIndex;
+    static get observedAttributes(): string[];
+    get items(): DbReorderItem[];
+    set items(value: DbReorderItem[] | string);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private getBool;
+    private getOption;
+    private emitReorder;
+    private getItemElements;
+    private updateDragClasses;
+    private getAdjustedDropIndex;
+    private isValidDropIndex;
+    private getDropIndexFromPointer;
+    private getDropIndexFromContainerPointer;
+    private commitDrop;
+    private handleContainerDragOver;
+    private handleContainerDrop;
+    private setDropIndex;
+    private resetDragState;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-reorder': DbReorder;
+    }
+}
+
+export { DbReorder };

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

@@ -0,0 +1 @@
+import{createDbIcon as e}from"./db-icons.js";const t=["default","bordered","filled","minimal"],r=["s","m","l"],s=["vertical","horizontal"];class DbReorder extends HTMLElement{constructor(){super(...arguments),this.draggedIndex=-1,this.dropIndex=-1,this.handleContainerDragOver=e=>{if(this.draggedIndex<0)return;const t=e.target;if(t instanceof Element&&t.closest(".designbase-wc-reorder__item"))return;e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move");const r=this.getDropIndexFromContainerPointer(e);this.setDropIndex(this.isValidDropIndex(r)?r:-1)},this.handleContainerDrop=e=>{if(this.draggedIndex<0)return;const t=e.target;if(t instanceof Element&&t.closest(".designbase-wc-reorder__item"))return;e.preventDefault();const r=this.dropIndex>=0?this.dropIndex:this.getDropIndexFromContainerPointer(e);this.commitDrop(r)}}static get observedAttributes(){return["items","variant","size","orientation","selectable","multi-select","show-drag-handle","show-drag-icon","full-width","disabled"]}get items(){try{const e=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.addEventListener("dragover",this.handleContainerDragOver),this.addEventListener("drop",this.handleContainerDrop),this.render()}disconnectedCallback(){this.removeEventListener("dragover",this.handleContainerDragOver),this.removeEventListener("drop",this.handleContainerDrop)}attributeChangedCallback(){this.render()}getBool(e,t=!1){if(!this.hasAttribute(e))return t;const r=this.getAttribute(e);return""===r||"true"===r}getOption(e,t,r){const s=this.getAttribute(e);return s&&t.includes(s)?s:r}emitReorder(e){this.items=e,this.dispatchEvent(new CustomEvent("db-reorder",{detail:{items:e},bubbles:!0,composed:!0}))}getItemElements(){return Array.from(this.children).filter(e=>e instanceof HTMLElement&&e.classList.contains("designbase-wc-reorder__item"))}updateDragClasses(){const e=this.getOption("orientation",s,"vertical"),t=this.draggedIndex>=0,r=this.items.length,i=t&&this.isValidDropIndex(this.dropIndex);this.classList.toggle("designbase-wc-reorder--dragging",t),this.getItemElements().forEach((s,d)=>{const n=t&&this.draggedIndex===d,o=i&&this.dropIndex===d,a=i&&this.dropIndex===r&&d===r-1,g=o||a;s.classList.toggle("designbase-wc-reorder__item--dragged",n),s.classList.toggle("designbase-wc-reorder__item--drag-over",g),s.classList.toggle("designbase-wc-reorder__item--drag-down",o&&"vertical"===e),s.classList.toggle("designbase-wc-reorder__item--drag-up",a&&"vertical"===e),s.classList.toggle("designbase-wc-reorder__item--drag-right",o&&"horizontal"===e),s.classList.toggle("designbase-wc-reorder__item--drag-left",a&&"horizontal"===e)})}getAdjustedDropIndex(e=this.dropIndex){return this.draggedIndex<0||e<0?-1:e>this.draggedIndex?e-1:e}isValidDropIndex(e=this.dropIndex){const t=this.getAdjustedDropIndex(e);return t>=0&&t!==this.draggedIndex}getDropIndexFromPointer(e,t,r,s){const i=t.getBoundingClientRect();return("horizontal"===s?e.clientX-i.left:e.clientY-i.top)<("horizontal"===s?i.width/2:i.height/2)?r:r+1}getDropIndexFromContainerPointer(e){const t=this.getOption("orientation",s,"vertical"),r=this.getItemElements();if(0===r.length)return-1;const i="horizontal"===t?e.clientX:e.clientY;for(let e=0;e<r.length;e+=1){const s=r[e].getBoundingClientRect();if(i<("horizontal"===t?s.left:s.top)+("horizontal"===t?s.width:s.height)/2)return e}return r.length}commitDrop(e){const t=this.getAdjustedDropIndex(e);if(this.draggedIndex<0||t<0||t===this.draggedIndex)return void this.resetDragState();const r=[...this.items],[s]=r.splice(this.draggedIndex,1);r.splice(t,0,s),this.draggedIndex=-1,this.dropIndex=-1,this.emitReorder(r)}setDropIndex(e){this.dropIndex!==e&&(this.dropIndex=e,this.updateDragClasses())}resetDragState(){this.draggedIndex=-1,this.dropIndex=-1,this.updateDragClasses()}render(){const i=this.getOption("variant",t,"default"),d=this.getOption("size",r,"m"),n=this.getOption("orientation",s,"vertical"),o=this.getBool("disabled"),a=this.getBool("selectable"),g=this.getBool("multi-select"),l=this.getBool("show-drag-handle",!0),c=this.getBool("show-drag-icon",!0);this.className=["designbase-wc-reorder",`designbase-wc-reorder--${i}`,`designbase-wc-reorder--${d}`,`designbase-wc-reorder--${n}`,this.getBool("full-width")&&"designbase-wc-reorder--full-width",o&&"designbase-wc-reorder--disabled",a&&"designbase-wc-reorder--selectable"].filter(Boolean).join(" ");const h=document.createDocumentFragment();this.items.forEach((t,r)=>{const s=document.createElement("div"),i=o||!!t.disabled,m=this.draggedIndex===r,p=this.draggedIndex>=0&&this.isValidDropIndex(this.dropIndex),b=p&&this.dropIndex===r,u=p&&this.dropIndex===this.items.length&&r===this.items.length-1,x=b||u;if(s.className=["designbase-wc-reorder__item",t.selected&&"designbase-wc-reorder__item--selected",m&&"designbase-wc-reorder__item--dragged",i&&"designbase-wc-reorder__item--disabled",x&&"designbase-wc-reorder__item--drag-over",b&&"vertical"===n&&"designbase-wc-reorder__item--drag-down",u&&"vertical"===n&&"designbase-wc-reorder__item--drag-up",b&&"horizontal"===n&&"designbase-wc-reorder__item--drag-right",u&&"horizontal"===n&&"designbase-wc-reorder__item--drag-left"].filter(Boolean).join(" "),s.draggable=!i,s.addEventListener("dragstart",e=>{i||(this.draggedIndex=r,this.dropIndex=-1,e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",t.id)),this.updateDragClasses())}),s.addEventListener("dragover",e=>{if(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move"),this.draggedIndex<0)return void this.setDropIndex(-1);const t=this.getDropIndexFromPointer(e,s,r,n);this.setDropIndex(this.isValidDropIndex(t)?t:-1)}),s.addEventListener("dragleave",e=>{const t=s.getBoundingClientRect(),r=e.clientX-t.left,i=e.clientY-t.top;(r<0||r>t.width||i<0||i>t.height)&&this.setDropIndex(-1)}),s.addEventListener("drop",e=>{e.preventDefault();const t=this.dropIndex>=0?this.dropIndex:this.getDropIndexFromPointer(e,s,r,n);this.commitDrop(t)}),s.addEventListener("dragend",()=>{this.resetDragState()}),l&&!i){const t=document.createElement("div");if(t.className="designbase-wc-reorder__drag-handle",t.setAttribute("aria-hidden","true"),c){const r="horizontal"===n?"grip-horizontal":"grip-vertical",s="s"===d?14:"l"===d?18:16;t.append(e(r,s))}else t.textContent="≡";s.append(t)}if(a){const e=document.createElement("div");e.className="designbase-wc-reorder__checkbox";const r=document.createElement("input");r.type=g?"checkbox":"radio",r.checked=!!t.selected,r.disabled=i,r.className="designbase-wc-reorder__checkbox-input",r.addEventListener("change",()=>{const e=this.items.map(e=>e.id!==t.id?g?e:{...e,selected:!1}:{...e,selected:!g||!e.selected});this.items=e,this.dispatchEvent(new CustomEvent("db-select",{detail:{items:e.filter(e=>e.selected)},bubbles:!0,composed:!0})),this.render()}),e.append(r),s.append(e)}const I=document.createElement("div");I.className="designbase-wc-reorder__content",I.textContent=t.content,s.append(I),h.append(s)}),this.replaceChildren(h)}}customElements.get("db-reorder")||customElements.define("db-reorder",DbReorder);export{DbReorder};

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

@@ -0,0 +1,42 @@
+declare class DbResizablePanels extends HTMLElement {
+    private container?;
+    private contentEl?;
+    private guidesEl?;
+    private sizeIndicatorEl?;
+    private constraintsEl?;
+    private handleEl?;
+    private isResizing;
+    private startSize;
+    private startPos;
+    private currentSize;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private getBool;
+    private getNumber;
+    private getDirection;
+    private getHandlePosition;
+    private initializeSize;
+    private getMinSize;
+    private getMaxSize;
+    private ensureStructure;
+    private onMouseDown;
+    private onTouchStart;
+    private startResize;
+    private onMouseMove;
+    private onTouchMove;
+    private applyResize;
+    private onMouseUp;
+    private onTouchEnd;
+    private endResize;
+    private renderHandleStyle;
+    private render;
+    private makeConstraint;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-resizable-panels': DbResizablePanels;
+    }
+}
+
+export { DbResizablePanels };

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

@@ -0,0 +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};

package/dist/esm/components/db-scroll-area.d.ts

@@ -0,0 +1,23 @@
+declare class DbScrollArea extends HTMLElement {
+    static get observedAttributes(): string[];
+    private contentEl?;
+    private resizeObserver?;
+    private observer?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private ensureStructure;
+    private collectContentNodes;
+    private syncChildren;
+    private toCssSize;
+    private syncScrollState;
+    private syncViewportSize;
+    private sync;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-scroll-area': DbScrollArea;
+    }
+}
+
+export { DbScrollArea };

package/dist/esm/components/db-scroll-area.js

@@ -0,0 +1 @@
+const t=["vertical","horizontal","both"],e=["auto","thin","none"];class DbScrollArea extends HTMLElement{static get observedAttributes(){return["direction","scrollbar-style","max-height","max-width","min-height","min-width","full-width","full-height","always-show-scrollbar","scrollbar-color","scrollbar-track-color"]}connectedCallback(){this.ensureStructure(),this.sync(),this.resizeObserver=new ResizeObserver(()=>{this.syncViewportSize(),this.syncScrollState()}),this.resizeObserver.observe(this),this.contentEl&&this.resizeObserver.observe(this.contentEl),this.observer=new MutationObserver(()=>this.syncChildren()),this.observer.observe(this,{childList:!0,subtree:!0})}disconnectedCallback(){this.resizeObserver?.disconnect(),this.observer?.disconnect()}attributeChangedCallback(){this.isConnected&&this.sync()}ensureStructure(){this.contentEl||(this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-scroll-area__content",this.contentEl.setAttribute("data-wc-internal","")),this.contentEl.isConnected||this.append(this.contentEl)}collectContentNodes(){return Array.from(this.children).filter(t=>t!==this.contentEl&&!t.hasAttribute("data-wc-internal"))}syncChildren(){const t=this.collectContentNodes();t.length&&this.contentEl?.append(...t),this.syncScrollState()}toCssSize(t){if(!t)return;if(t.includes("px")||t.includes("%")||t.includes("vh")||t.includes("rem"))return t;const e=Number(t);return Number.isFinite(e)?`${e}px`:t}syncScrollState(){const t=this.contentEl;if(!t)return;const e=t.scrollHeight>t.clientHeight,s=t.scrollWidth>t.clientWidth;this.classList.toggle("designbase-wc-scroll-area--has-vertical",e),this.classList.toggle("designbase-wc-scroll-area--has-horizontal",s)}syncViewportSize(){if(!this.contentEl)return;const t=this.toCssSize(this.getAttribute("max-height"))||this.style.maxHeight||void 0,e=this.toCssSize(this.getAttribute("max-width"))||this.style.maxWidth||void 0,s=this.toCssSize(this.getAttribute("min-height"))||this.style.minHeight||void 0,i=this.toCssSize(this.getAttribute("min-width"))||this.style.minWidth||void 0;this.contentEl.style.maxHeight=t||"",this.contentEl.style.maxWidth=e||"",this.contentEl.style.minHeight=s||"",this.contentEl.style.minWidth=i||""}sync(){this.ensureStructure();const s=this.getAttribute("direction")||"vertical",i=this.getAttribute("scrollbar-style")||"auto",r=t.includes(s)?s:"vertical",l=e.includes(i)?i:"auto";this.className=["designbase-wc-scroll-area",`designbase-wc-scroll-area--direction-${r}`,`designbase-wc-scroll-area--scrollbar-${l}`,this.hasAttribute("full-width")&&"designbase-wc-scroll-area--full-width",this.hasAttribute("full-height")&&"designbase-wc-scroll-area--full-height",this.hasAttribute("always-show-scrollbar")&&"designbase-wc-scroll-area--always-show"].filter(Boolean).join(" ");const c=this.getAttribute("scrollbar-color"),n=this.getAttribute("scrollbar-track-color");c?this.style.setProperty("--scrollbar-color",c):this.style.removeProperty("--scrollbar-color"),n?this.style.setProperty("--scrollbar-track-color",n):this.style.removeProperty("--scrollbar-track-color"),this.syncViewportSize(),this.syncChildren()}}customElements.get("db-scroll-area")||customElements.define("db-scroll-area",DbScrollArea);export{DbScrollArea};

package/dist/esm/components/db-search-bar.d.ts

@@ -0,0 +1,53 @@
+declare class DbSearchBar extends HTMLElement {
+    static get observedAttributes(): string[];
+    private input?;
+    private clearButton?;
+    private shortcutBadge?;
+    private dropdown?;
+    private recentSearches;
+    private isFocused;
+    private currentSuggestion;
+    private suggestionInterval?;
+    private blurTimer?;
+    private globalKeyHandler?;
+    private repositionHandler?;
+    private scrollParents;
+    private getResolvedSize;
+    private getIconPx;
+    private syncIcons;
+    private hasInputValue;
+    get value(): string;
+    set value(nextValue: string);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    focus(): void;
+    private parseJsonArray;
+    private getRecentSearchesKey;
+    private loadRecentSearches;
+    private saveRecentSearches;
+    private clearSuggestionInterval;
+    private syncSuggestionRolling;
+    private syncPlaceholder;
+    private syncValueState;
+    private syncAttributes;
+    private bindGlobalShortcut;
+    private unbindGlobalShortcut;
+    private positionDropdown;
+    private bindRepositionListeners;
+    private unbindRepositionListeners;
+    private attachDropdownPortal;
+    private detachDropdownPortal;
+    private shouldShowDropdown;
+    private formatSearchResult;
+    private handleSearch;
+    private updateDropdown;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-search-bar': DbSearchBar;
+    }
+}
+
+export { DbSearchBar };