@designbasekorea/ui-wc 0.2.1 → 0.3.0

package/dist/esm/components/db-image-list.js

@@ -0,0 +1 @@
+const e=["grid","list","gallery","carousel"],t=["1","2","3","4","5","6"],i=["xs","s","m","l","xl"];class DbImageList extends HTMLElement{constructor(){super(...arguments),this.lightboxEl=null,this.selectedIndex=null}static get observedAttributes(){return["images","layout","columns","spacing","ratio","fit","rounded","shadow","hover","clickable","lightbox","loading","responsive"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}parseImages(){const e=this.getAttribute("images");if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}}mapRoundedAttr(){const e=this.getAttribute("rounded");if(e&&"false"!==e)return"true"===e||""===e?"m":e}createImageItem(e,t){const i=document.createElement("div");i.className="designbase-wc-image-list__item";const s=document.createElement("db-image");s.className="designbase-wc-image-list__image",s.setAttribute("src",e.thumbnail||e.src),s.setAttribute("alt",e.alt||e.title||`이미지 ${t+1}`),s.setAttribute("ratio",this.getAttribute("ratio")||"16:9"),s.setAttribute("fit",this.getAttribute("fit")||"cover"),s.setAttribute("loading",this.getAttribute("loading")||"lazy"),s.setAttribute("full-width","");const a=this.mapRoundedAttr();a&&s.setAttribute("rounded",a);const n=this.getAttribute("shadow");if(n&&"false"!==n&&s.setAttribute("shadow","true"===n?"":n),"false"!==this.getAttribute("hover")&&s.setAttribute("hover",""),e.thumbnail&&e.thumbnail!==e.src&&s.setAttribute("fallback-src",e.src),s.addEventListener("db-load",()=>{this.dispatchEvent(new CustomEvent("db-image-load",{bubbles:!0,composed:!0,detail:{image:e,index:t}}))}),s.addEventListener("db-error",()=>{this.dispatchEvent(new CustomEvent("db-image-error",{bubbles:!0,composed:!0,detail:{image:e,index:t}}))}),i.append(s),e.title||e.description){const t=document.createElement("div");if(t.className="designbase-wc-image-list__overlay",e.title){const i=document.createElement("h3");i.className="designbase-wc-image-list__title",i.textContent=e.title,t.append(i)}if(e.description){const i=document.createElement("p");i.className="designbase-wc-image-list__description",i.textContent=e.description,t.append(i)}i.append(t)}if(e.metadata?.date||e.metadata?.size){const t=document.createElement("div");if(t.className="designbase-wc-image-list__metadata",e.metadata.date){const i=document.createElement("span");i.className="designbase-wc-image-list__date",i.textContent=e.metadata.date,t.append(i)}if(e.metadata.size){const i=document.createElement("span");i.className="designbase-wc-image-list__size",i.textContent=e.metadata.size,t.append(i)}i.append(t)}return"false"!==this.getAttribute("clickable")&&i.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-image-click",{bubbles:!0,composed:!0,detail:{image:e,index:t}})),"false"!==this.getAttribute("lightbox")&&this.openLightbox(t)}),i}openLightbox(e){this.selectedIndex=e,this.lightboxEl||(this.lightboxEl=document.createElement("db-lightbox"),this.lightboxEl.addEventListener("db-close",()=>{this.selectedIndex=null,this.lightboxEl?.removeAttribute("open")}),this.lightboxEl.addEventListener("db-image-change",e=>{const t=e.detail;"number"==typeof t?.index&&(this.selectedIndex=t.index)}),this.append(this.lightboxEl));const t=this.parseImages();this.lightboxEl.setAttribute("images",JSON.stringify(t.map((e,t)=>({id:e.id||`image-${t}`,src:e.src,alt:e.alt||e.title||"",title:e.title,description:e.description,thumbnail:e.thumbnail})))),this.lightboxEl.setAttribute("current-index",String(e)),this.lightboxEl.setAttribute("open","")}render(){const s=this.parseImages(),a=this.getAttribute("layout")||"grid",n=this.getAttribute("columns")||"3",l=this.getAttribute("spacing")||"m",d="false"!==this.getAttribute("responsive");this.className=["designbase-wc-image-list",`designbase-wc-image-list--${e.includes(a)?a:"grid"}`,`designbase-wc-image-list--columns-${t.includes(n)?n:"3"}`,`designbase-wc-image-list--spacing-${i.includes(l)?l:"m"}`,d&&"designbase-wc-image-list--responsive","false"!==this.getAttribute("clickable")&&"designbase-wc-image-list--clickable","false"!==this.getAttribute("hover")&&"designbase-wc-image-list--hover"].filter(Boolean).join(" ");const r=this.lightboxEl;if(this.replaceChildren(),"carousel"===a){const e=document.createElement("div");e.className="designbase-wc-image-list__carousel",s.forEach((t,i)=>{const s=document.createElement("div");s.className="designbase-wc-image-list__carousel-item",s.append(this.createImageItem(t,i)),e.append(s)}),this.append(e)}else s.forEach((e,t)=>{this.append(this.createImageItem(e,t))});r&&(this.lightboxEl=r,this.append(r),null!==this.selectedIndex&&(r.setAttribute("current-index",String(this.selectedIndex)),r.setAttribute("open","")))}}customElements.get("db-image-list")||customElements.define("db-image-list",DbImageList);export{DbImageList};

package/dist/esm/components/db-image-placeholder.d.ts

@@ -0,0 +1,16 @@
+declare class DbImagePlaceholder extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private handleClick;
+    private handleKeyDown;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-image-placeholder': DbImagePlaceholder;
+    }
+}
+
+export { DbImagePlaceholder };

package/dist/esm/components/db-image-placeholder.js

@@ -0,0 +1 @@
+class DbImagePlaceholder extends HTMLElement{constructor(){super(...arguments),this.handleClick=()=>{this.hasAttribute("clickable")&&this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))},this.handleKeyDown=e=>{this.hasAttribute("clickable")&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleClick()))}}static get observedAttributes(){return["label","show-label","pattern-size","pattern-color","background-color","width","height","aspect-ratio","hover-effect","clickable"]}connectedCallback(){this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.render()}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(){this.render()}render(){const e=this.getAttribute("label")||"",t=this.hasAttribute("show-label"),i=Number(this.getAttribute("pattern-size")||20),s=this.getAttribute("pattern-color")||"#f3f3f3",a=this.getAttribute("background-color")||"#e7e7e7",l=this.getAttribute("width")||"100%",r=this.getAttribute("height")||"",c=this.getAttribute("aspect-ratio")||"",h=this.hasAttribute("hover-effect"),n=this.hasAttribute("clickable");this.className=["designbase-wc-image-placeholder",h&&"designbase-wc-image-placeholder--hover",n&&"designbase-wc-image-placeholder--clickable"].filter(Boolean).join(" "),this.style.width=l,this.style.height=r,this.style.aspectRatio=c,n?(this.setAttribute("role","button"),this.setAttribute("tabindex","0")):(this.removeAttribute("role"),this.removeAttribute("tabindex")),this.replaceChildren();const o=document.createElement("div");if(o.className="designbase-wc-image-placeholder__pattern",o.style.setProperty("--db-placeholder-bg",a),o.style.setProperty("--db-placeholder-pattern",s),o.style.setProperty("--db-placeholder-size",`${i}px`),o.style.setProperty("--db-placeholder-half-size",i/2+"px"),this.append(o),t&&e){const t=document.createElement("div");t.className="designbase-wc-image-placeholder__label-wrap";const i=document.createElement("span");i.className="designbase-wc-image-placeholder__label",i.textContent=e,t.append(i),this.append(t)}}}customElements.get("db-image-placeholder")||customElements.define("db-image-placeholder",DbImagePlaceholder);export{DbImagePlaceholder};

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

@@ -0,0 +1,34 @@
+declare class DbImage extends HTMLElement {
+    private imageState;
+    private currentSrc;
+    private showPlaceholder;
+    private imgEl;
+    private placeholderEl;
+    private errorEl;
+    private initialized;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private resetFromAttributes;
+    private getRoundedClass;
+    private getShadowClass;
+    private getRatioClass;
+    private applyContainerStyle;
+    private handleLoad;
+    private handleError;
+    private handleClick;
+    private handleKeyDown;
+    private ensureStructure;
+    private updateImageSource;
+    private updatePlaceholderContent;
+    private updateErrorContent;
+    private syncVisualState;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-image': DbImage;
+    }
+}
+
+export { DbImage };

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

@@ -0,0 +1 @@
+import{createDbIcon as e}from"./db-icons.js";const t=["1:1","16:9","4:3","3:2","3:4","2:1","auto"],i=["cover","contain","fill","none","scale-down"],s=["lazy","eager"],a=["skeleton","blur","none"],l=["s","m","l","full"],r=["s","m","l"];class DbImage extends HTMLElement{constructor(){super(...arguments),this.imageState="loading",this.currentSrc="",this.showPlaceholder=!1,this.imgEl=null,this.placeholderEl=null,this.errorEl=null,this.initialized=!1,this.handleLoad=()=>{"loaded"!==this.imageState&&(this.imageState="loaded",this.showPlaceholder=!1,this.syncVisualState(),this.dispatchEvent(new CustomEvent("db-load",{bubbles:!0,composed:!0})))},this.handleError=()=>{const e=this.getAttribute("fallback-src")||"";if(e&&this.currentSrc!==e)return this.currentSrc=e,this.imageState="loading",this.updateImageSource(),void this.syncVisualState();this.imageState="error",this.showPlaceholder=!1,this.syncVisualState(),this.dispatchEvent(new CustomEvent("db-error",{bubbles:!0,composed:!0}))},this.handleClick=()=>{this.hasAttribute("clickable")&&this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))},this.handleKeyDown=e=>{this.hasAttribute("clickable")&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleClick()))}}static get observedAttributes(){return["src","alt","ratio","fit","loading","fallback-src","placeholder","rounded","width","height","max-width","max-height","full-width","full-height","shadow","hover","clickable"]}connectedCallback(){this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.resetFromAttributes(),this.ensureStructure(),this.syncVisualState()}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(e,t,i){if(t!==i||"src"===e){if("src"===e){const e=i||"";if(e!==this.currentSrc){this.currentSrc=e,this.imageState="loading";const t=this.getAttribute("placeholder")||"none";this.showPlaceholder="none"!==t,this.updateImageSource()}}"placeholder"===e&&(this.showPlaceholder="none"!==(i||"none")&&"loading"===this.imageState),this.ensureStructure(),this.syncVisualState()}else this.syncVisualState()}resetFromAttributes(){this.currentSrc=this.getAttribute("src")||"";const e=this.getAttribute("placeholder")||"none";this.showPlaceholder="none"!==e,this.imageState="loading"}getRoundedClass(){const e=this.getAttribute("rounded");return e?"true"===e||""===e?"designbase-wc-image--rounded":"s"===e?"designbase-wc-image--rounded-sm":"m"===e?"designbase-wc-image--rounded-md":"l"===e?"designbase-wc-image--rounded-lg":l.includes(e)?"full"===e?"designbase-wc-image--rounded-full":`designbase-wc-image--rounded-${e}`:"":""}getShadowClass(){const e=this.getAttribute("shadow");return e?"true"===e||""===e?"designbase-wc-image--shadow":r.includes(e)?`designbase-wc-image--shadow-${e}`:"":""}getRatioClass(){const e=this.getAttribute("ratio")||"auto";return"auto"===e?"designbase-wc-image--ratio-auto":t.includes(e)?`designbase-wc-image--ratio-${e.replace(":","-")}`:"designbase-wc-image--ratio-auto"}applyContainerStyle(){const e=this.style,t=this.hasAttribute("full-width"),i=this.hasAttribute("full-height"),s=this.getAttribute("width"),a=this.getAttribute("height"),l=this.getAttribute("max-width"),r=this.getAttribute("max-height");e.width=t?"100%":s||"",e.height=i?"100%":a||"",e.maxWidth=l||"",e.maxHeight=r||""}ensureStructure(){if(!this.initialized){this.placeholderEl=document.createElement("div"),this.placeholderEl.className="designbase-wc-image__placeholder",this.errorEl=document.createElement("div"),this.errorEl.className="designbase-wc-image__error",this.errorEl.append(e("gallery",20));const t=document.createElement("span");t.className="designbase-wc-image__error-text",this.errorEl.append(t),this.imgEl=document.createElement("img"),this.imgEl.className="designbase-wc-image__img",this.imgEl.draggable=!1,this.imgEl.addEventListener("load",this.handleLoad),this.imgEl.addEventListener("error",this.handleError),this.append(this.placeholderEl,this.errorEl,this.imgEl),this.initialized=!0}this.updateImageSource(),this.updatePlaceholderContent(),this.updateErrorContent()}updateImageSource(){if(!this.imgEl)return;const e=this.getAttribute("alt")||"",t=this.getAttribute("loading")||"lazy",i=s.includes(t)?t:"lazy";this.imgEl.alt=e,this.imgEl.loading=i;const a=this.currentSrc;if(!a)return void this.imgEl.removeAttribute("src");const l=new URL(a,window.location.href).href;this.imgEl.src!==l?this.imgEl.src=a:this.imgEl.complete&&this.imgEl.naturalWidth>0&&"loading"===this.imageState&&this.handleLoad()}updatePlaceholderContent(){if(!this.placeholderEl)return;const e=this.getAttribute("placeholder")||"none",t=a.includes(e)?e:"none";if(this.placeholderEl.className=["designbase-wc-image__placeholder",`designbase-wc-image__placeholder--${t}`].join(" "),this.placeholderEl.replaceChildren(),"skeleton"===t){const e=document.createElement("div");e.className="designbase-wc-image__skeleton",this.placeholderEl.append(e)}if("blur"===t){const e=document.createElement("div");e.className="designbase-wc-image__blur",this.placeholderEl.append(e)}}updateErrorContent(){if(!this.errorEl)return;const e=this.errorEl.querySelector(".designbase-wc-image__error-text");e&&(e.textContent=this.getAttribute("alt")||"이미지를 불러올 수 없습니다")}syncVisualState(){const e=this.getAttribute("fit")||"cover",t=i.includes(e)?e:"cover",s=this.hasAttribute("clickable"),a=this.hasAttribute("hover");if(this.className=["designbase-wc-image",this.getRatioClass(),`designbase-wc-image--fit-${t}`,this.getRoundedClass(),this.getShadowClass(),a&&"designbase-wc-image--hover",this.hasAttribute("full-width")&&"designbase-wc-image--full-width",this.hasAttribute("full-height")&&"designbase-wc-image--full-height",s&&"designbase-wc-image--clickable","loading"===this.imageState&&"designbase-wc-image--loading","error"===this.imageState&&"designbase-wc-image--error"].filter(Boolean).join(" "),this.applyContainerStyle(),s?(this.setAttribute("role","button"),this.setAttribute("tabindex","0")):(this.removeAttribute("role"),this.removeAttribute("tabindex")),this.placeholderEl){const e=this.showPlaceholder&&"loading"===this.imageState;this.placeholderEl.classList.toggle("designbase-wc-image__placeholder--visible",e),this.placeholderEl.hidden=!e}if(this.errorEl){const e="error"===this.imageState;this.errorEl.hidden=!e}if(this.imgEl){const e=Boolean(this.currentSrc)&&"error"!==this.imageState;this.imgEl.hidden=!e,this.imgEl.classList.toggle("designbase-wc-image__img--loaded","loaded"===this.imageState),this.imgEl.classList.toggle("designbase-wc-image__img--error","error"===this.imageState)}}}customElements.get("db-image")||customElements.define("db-image",DbImage);export{DbImage};

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

@@ -0,0 +1,58 @@
+declare class DbIndicator extends HTMLElement {
+    static get observedAttributes(): string[];
+    private timerFrame;
+    private progress;
+    private pausedProgress;
+    private activeStep;
+    private isPlayingInternal;
+    get total(): number;
+    set total(value: number);
+    private normalizeStep;
+    private get isCurrentControlled();
+    private get isPlayingControlled();
+    private get resolvedCurrent();
+    private get resolvedPlaying();
+    get indicatorType(): string;
+    get size(): string;
+    set size(value: string);
+    get direction(): string;
+    set direction(value: string);
+    get numberBackground(): boolean;
+    set numberBackground(value: boolean);
+    get playback(): boolean;
+    set playback(value: boolean);
+    get clickable(): boolean;
+    set clickable(value: boolean);
+    get timer(): boolean;
+    set timer(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private resetProgress;
+    private emitChange;
+    private goToStep;
+    private startTimer;
+    private updateTimerVisuals;
+    private syncRootClasses;
+    private syncPlaybackButton;
+    private renderDotRing;
+    private renderStep;
+    private renderDots;
+    private renderPlaybackButton;
+    private renderNumbers;
+    private renderSlide;
+    private renderScaleFill;
+    private renderLine;
+    private renderDotLine;
+    private fillRatio;
+    private renderFill;
+    private renderContent;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-indicator': DbIndicator;
+    }
+}
+
+export { DbIndicator };

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

@@ -0,0 +1 @@
+import{createDbIcon as t}from"./db-icons.js";const e=["dots","numbers","line","dot-line","slide","fill","combined"],i=["s","m","l"],s=["horizontal","vertical"];class DbIndicator extends HTMLElement{constructor(){super(...arguments),this.timerFrame=0,this.progress=0,this.pausedProgress=0,this.activeStep=0,this.isPlayingInternal=!1}static get observedAttributes(){return["total","current","default-current","indicator-type","type","size","direction","number-background","playback","clickable","timer","timer-duration","auto-roll","playing","default-playing","playback-disabled"]}get total(){return Math.max(1,Number(this.getAttribute("total")||1))}set total(t){this.setAttribute("total",String(t))}normalizeStep(t){const e=this.total;return(t%e+e)%e}get isCurrentControlled(){return this.hasAttribute("current")}get isPlayingControlled(){return this.hasAttribute("playing")}get resolvedCurrent(){return this.isCurrentControlled?this.normalizeStep(Number(this.getAttribute("current")||0)):this.activeStep}get resolvedPlaying(){return!!this.isPlayingControlled||this.isPlayingInternal}get indicatorType(){const t=this.getAttribute("indicator-type")||this.getAttribute("type")||"dots";return e.includes(t)?t:"dots"}get size(){const t=this.getAttribute("size")||"m";return i.includes(t)?t:"m"}set size(t){this.setAttribute("size",t)}get direction(){const t=this.getAttribute("direction")||"horizontal";return s.includes(t)?t:"horizontal"}set direction(t){this.setAttribute("direction",t)}get numberBackground(){return this.hasAttribute("number-background")}set numberBackground(t){this.toggleAttribute("number-background",Boolean(t))}get playback(){return this.hasAttribute("playback")}set playback(t){this.toggleAttribute("playback",Boolean(t))}get clickable(){return this.hasAttribute("clickable")}set clickable(t){this.toggleAttribute("clickable",Boolean(t))}get timer(){return this.hasAttribute("timer")}set timer(t){this.toggleAttribute("timer",Boolean(t))}connectedCallback(){this.activeStep=this.normalizeStep(Number(this.getAttribute("default-current")||0)),this.isPlayingInternal=this.hasAttribute("default-playing"),this.render(),this.startTimer()}disconnectedCallback(){cancelAnimationFrame(this.timerFrame)}attributeChangedCallback(t){if(this.isConnected){if("current"===t&&this.isCurrentControlled)return this.resetProgress(),this.render(),void this.startTimer();if("playing"===t)return this.resolvedPlaying||(this.pausedProgress=this.progress),this.syncRootClasses(),this.syncPlaybackButton(),void this.startTimer();if("default-current"===t&&!this.isCurrentControlled)return this.activeStep=this.normalizeStep(Number(this.getAttribute("default-current")||0)),this.resetProgress(),this.render(),void this.startTimer();if("default-playing"===t&&!this.isPlayingControlled)return this.isPlayingInternal=this.hasAttribute("default-playing"),this.syncRootClasses(),this.syncPlaybackButton(),void this.startTimer();if("timer"===t||"timer-duration"===t||"auto-roll"===t)return this.resetProgress(),this.render(),void this.startTimer();this.render(),this.startTimer()}}resetProgress(){this.pausedProgress=0,this.progress=0}emitChange(t){const e={current:t,index:t};this.dispatchEvent(new CustomEvent("db-change",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-current-change",{detail:e,bubbles:!0,composed:!0}))}goToStep(t){const e=this.normalizeStep(t);this.isCurrentControlled||(this.activeStep=e,this.resetProgress(),this.render(),this.startTimer()),this.emitChange(e)}startTimer(){if(cancelAnimationFrame(this.timerFrame),!this.timer||!this.resolvedPlaying||!this.isConnected)return;const t=Number(this.getAttribute("timer-duration")||3e3),e=Date.now()-this.pausedProgress*t,tick=()=>{const i=Date.now()-e,s=Math.min(i/t,1);this.progress=s,this.pausedProgress=s,this.updateTimerVisuals(),s<1?this.timerFrame=requestAnimationFrame(tick):(this.dispatchEvent(new CustomEvent("db-timer-complete",{detail:{step:this.resolvedCurrent},bubbles:!0,composed:!0})),this.resetProgress(),"false"===this.getAttribute("auto-roll")?this.render():this.goToStep(this.resolvedCurrent+1))};this.timerFrame=requestAnimationFrame(tick)}updateTimerVisuals(){this.querySelectorAll(".designbase-wc-indicator__line-fill, .designbase-wc-indicator__track-fill, .designbase-wc-indicator__dot-line-fill").forEach(t=>{t.style.transform="vertical"===this.direction?`scaleY(${this.progress})`:`scaleX(${this.progress})`});const t=this.querySelector(".designbase-wc-indicator__track-progress");if(t){const e=100*this.fillRatio()+"%";"vertical"===this.direction?t.style.height=e:t.style.width=e}const e=this.querySelector(".designbase-wc-indicator__dot-ring-progress");if(e){const t=15.9155,i=2*Math.PI*t;e.setAttribute("stroke-dashoffset",String(i*(1-this.progress)))}}syncRootClasses(){const t=this.indicatorType;this.className=["designbase-wc-indicator",`designbase-wc-indicator--${t}`,"combined"===t&&"designbase-wc-indicator--dots",`designbase-wc-indicator--${this.size}`,`designbase-wc-indicator--${this.direction}`,this.clickable&&"designbase-wc-indicator--clickable",this.timer&&!this.resolvedPlaying&&"designbase-wc-indicator--paused"].filter(Boolean).join(" ")}syncPlaybackButton(){const e=this.querySelector(".designbase-wc-indicator__playback-button");e&&(e.disabled=this.hasAttribute("playback-disabled"),e.setAttribute("aria-label",this.resolvedPlaying?"일시정지":"재생"),e.replaceChildren(t(this.resolvedPlaying?"pause":"play")))}renderDotRing(){const t=15.9155,e=2*Math.PI*t,i=document.createElement("span");i.className="designbase-wc-indicator__dot-ring",i.setAttribute("aria-hidden","true");const s=document.createElementNS("http://www.w3.org/2000/svg","svg");s.setAttribute("class","designbase-wc-indicator__dot-ring-svg"),s.setAttribute("viewBox","0 0 36 36");const r=document.createElementNS("http://www.w3.org/2000/svg","circle");r.setAttribute("class","designbase-wc-indicator__dot-ring-bg"),r.setAttribute("cx","18"),r.setAttribute("cy","18"),r.setAttribute("r",String(t)),r.setAttribute("fill","none");const n=document.createElementNS("http://www.w3.org/2000/svg","circle");return n.setAttribute("class","designbase-wc-indicator__dot-ring-progress"),n.setAttribute("cx","18"),n.setAttribute("cy","18"),n.setAttribute("r",String(t)),n.setAttribute("fill","none"),n.setAttribute("stroke-dasharray",String(e)),n.setAttribute("stroke-dashoffset",String(e*(1-this.progress))),n.setAttribute("stroke-linecap","round"),s.append(r,n),i.append(s),i}renderStep(t,e,i){const s=t===this.resolvedCurrent,r=this.clickable?document.createElement("button"):document.createElement("span");return r.className=e,this.clickable&&r instanceof HTMLButtonElement?(r.type="button",r.setAttribute("aria-label",`${t+1}단계`),s&&r.setAttribute("aria-current","step"),r.addEventListener("click",()=>{this.goToStep(t),this.dispatchEvent(new CustomEvent("db-step-click",{detail:{current:t,index:t},bubbles:!0,composed:!0}))})):s||r.setAttribute("aria-hidden","true"),i&&r.append(i),r}renderDots(){const t=document.createDocumentFragment(),e=this.indicatorType,i="combined"===e?"dots":e,s=this.timer,r=this.resolvedPlaying,n=this.resolvedCurrent;this.direction;const a=this.total;if("dots"!==i)return t;for(let e=0;e<a;e+=1){const i=e===n,a=s&&i&&r,o=document.createElement("span");o.className="designbase-wc-indicator__dot-core";const c=document.createDocumentFragment();c.append(o),s&&i&&(a||this.progress>0)&&c.append(this.renderDotRing()),t.append(this.renderStep(e,["designbase-wc-indicator__dot",i&&"designbase-wc-indicator__dot--active"].filter(Boolean).join(" "),c))}return t}renderPlaybackButton(){const e=document.createElement("button");return e.type="button",e.className="designbase-wc-indicator__playback-button",e.disabled=this.hasAttribute("playback-disabled"),e.setAttribute("aria-label",this.resolvedPlaying?"일시정지":"재생"),e.append(t(this.resolvedPlaying?"pause":"play")),e.addEventListener("click",()=>{if(this.hasAttribute("playback-disabled"))return;const t=!this.resolvedPlaying;this.isPlayingControlled?t?this.setAttribute("playing",""):(this.removeAttribute("playing"),this.pausedProgress=this.progress):(this.isPlayingInternal=t,t||(this.pausedProgress=this.progress)),this.syncRootClasses(),this.syncPlaybackButton(),this.startTimer(),this.dispatchEvent(new CustomEvent("db-playing-change",{detail:{playing:t},bubbles:!0,composed:!0}))}),e}renderNumbers(){const t=document.createElement("div");t.className=["designbase-wc-indicator__numbers",this.numberBackground&&"designbase-wc-indicator__numbers--bg"].filter(Boolean).join(" ");const e=document.createElement("span");e.className="designbase-wc-indicator__current",e.textContent=String(this.resolvedCurrent+1);const i=document.createElement("span");i.className="designbase-wc-indicator__separator",i.textContent="/";const s=document.createElement("span");return s.className="designbase-wc-indicator__total",s.textContent=String(this.total),t.append(e,i,s),t}renderSlide(){const t=this.direction,e=this.resolvedCurrent,i=document.createElement("div");i.className="designbase-wc-indicator__track";const s=document.createElement("div");s.className="designbase-wc-indicator__track-thumb";const r=100/this.total;if("vertical"===t?(s.style.height=`${r}%`,s.style.transform=`translateY(${100*e}%)`):(s.style.width=`${r}%`,s.style.transform=`translateX(${100*e}%)`),this.timer&&this.resolvedPlaying){const e=document.createElement("div");e.className="designbase-wc-indicator__track-fill",e.style.transform="vertical"===t?`scaleY(${this.progress})`:`scaleX(${this.progress})`,s.append(e)}return i.append(s),i}renderScaleFill(t){const e=document.createElement("span");return e.className=t,e.style.transform="vertical"===this.direction?`scaleY(${this.progress})`:`scaleX(${this.progress})`,e}renderLine(){const t=document.createDocumentFragment(),e=this.timer,i=this.resolvedPlaying,s=this.resolvedCurrent;for(let r=0;r<this.total;r+=1){const n=r===s,a=e&&n&&i?this.renderScaleFill("designbase-wc-indicator__line-fill"):void 0;t.append(this.renderStep(r,["designbase-wc-indicator__line-segment",n&&!e&&"designbase-wc-indicator__line-segment--active",n&&e&&"designbase-wc-indicator__line-segment--current"].filter(Boolean).join(" "),a))}return t}renderDotLine(){const t=document.createDocumentFragment(),e=this.timer,i=this.resolvedPlaying,s=this.resolvedCurrent;for(let r=0;r<this.total;r+=1){const n=r===s,a=e&&n&&i?this.renderScaleFill("designbase-wc-indicator__dot-line-fill"):void 0;t.append(this.renderStep(r,["designbase-wc-indicator__dot-line-item",n&&!e&&"designbase-wc-indicator__dot-line-item--active",n&&e&&"designbase-wc-indicator__dot-line-item--current"].filter(Boolean).join(" "),a))}return t}fillRatio(){const t=this.resolvedCurrent,e=t/this.total,i=1/this.total;return this.timer&&this.resolvedPlaying?Math.min(e+i*this.progress,1):(t+1)/this.total}renderFill(){const t=document.createElement("div");t.className="designbase-wc-indicator__track";const e=document.createElement("div");e.className="designbase-wc-indicator__track-progress";const i=100*this.fillRatio()+"%";return"vertical"===this.direction?e.style.height=i:e.style.width=i,t.append(e),t}renderContent(){const t="combined"===this.indicatorType?"dots":this.indicatorType;return"numbers"===t?this.renderNumbers():"slide"===t?this.renderSlide():"fill"===t?this.renderFill():"line"===t?this.renderLine():"dot-line"===t?this.renderDotLine():this.renderDots()}render(){const t=this.indicatorType,e=this.resolvedCurrent,i=this.total;this.syncRootClasses(),this.setAttribute("role","progressbar"),this.setAttribute("aria-valuemin","1"),this.setAttribute("aria-valuemax",String(i)),this.setAttribute("aria-valuenow",String(e+1)),this.replaceChildren();if("combined"===t||this.playback){const t=document.createElement("div");return t.className="designbase-wc-indicator__steps",t.append(this.renderContent()),void this.append(t,this.renderPlaybackButton())}this.append(this.renderContent())}}customElements.get("db-indicator")||customElements.define("db-indicator",DbIndicator);export{DbIndicator};

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

@@ -0,0 +1,51 @@
+declare class DbInput extends HTMLElement {
+    static get observedAttributes(): string[];
+    private input?;
+    private passwordVisible;
+    private isFocused;
+    private touched;
+    private isScrubbing;
+    private detachScrub?;
+    get value(): string;
+    set value(value: string);
+    get type(): string;
+    set type(value: string);
+    get size(): string;
+    set size(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get readOnly(): boolean;
+    set readOnly(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    focus(): void;
+    private get passwordMinLength();
+    private get validationVisibility();
+    private get validateOnBlur();
+    private get isValidationEnabled();
+    private getIconSize;
+    private resolveIconName;
+    private resolveStartIcon;
+    private getCurrentValue;
+    private render;
+    private mountIcons;
+    private shouldShowPasswordValidation;
+    private renderValidationMarkup;
+    private updateDynamicUI;
+    private applyScrubValue;
+    private handleInput;
+    private handleChange;
+    private handleFocus;
+    private handleBlur;
+    private handlePasswordToggle;
+    private handleSearchClear;
+    private escape;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-input': DbInput;
+    }
+}
+
+export { DbInput };

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

@@ -0,0 +1 @@
+import{getDbComponentIconSize as t,createDbIcon as e}from"./db-icons.js";import{getPasswordValidation as s}from"./input-validation.js";import{attachNumberScrub as i,readNumericAttribute as n}from"./number-scrub.js";const a=["text","email","password","url","search","tel","number"],r=["s","m","l"],l=new Set(["arrow-bar-left","arrow-bar-right","caret-down-filled","chevron-down","chevron-left","chevron-right","circle-checked","close","error-filled","edit","hide","info-filled","lock","mail","plus","search","share-alt","show","sparkle","trash","user","warning-filled"]);class DbInput extends HTMLElement{constructor(){super(...arguments),this.passwordVisible=!1,this.isFocused=!1,this.touched=!1,this.isScrubbing=!1,this.handleInput=t=>{t.stopPropagation();const e=t.target;this.updateDynamicUI(),this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-input",{detail:{value:e.value,nativeEvent:t},bubbles:!0,composed:!0}))},this.handleChange=t=>{t.stopPropagation();const e=t.target;this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:e.value,nativeEvent:t},bubbles:!0,composed:!0}))},this.handleFocus=t=>{this.isFocused=!0,this.updateDynamicUI(),this.dispatchEvent(new CustomEvent("db-focus",{detail:{nativeEvent:t},bubbles:!0,composed:!0}))},this.handleBlur=t=>{this.isFocused=!1,this.touched=!0,this.updateDynamicUI(),this.dispatchEvent(new CustomEvent("db-blur",{detail:{nativeEvent:t},bubbles:!0,composed:!0}))},this.handlePasswordToggle=()=>{this.passwordVisible=!this.passwordVisible,this.render()},this.handleSearchClear=()=>{this.input&&(this.input.value="",this.setAttribute("value",""),this.input.focus(),this.updateDynamicUI(),this.dispatchEvent(new CustomEvent("db-input",{detail:{value:"",nativeEvent:null},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-clear",{bubbles:!0,composed:!0})))}}static get observedAttributes(){return["type","label","placeholder","value","default-value","size","disabled","readonly","required","error","error-message","helper-text","full-width","name","start-icon","end-icon","validate","validation-visibility","validate-on-blur","password-min-length","scrubbable","scrub-step","scrub-sensitivity","min","max","step"]}get value(){return this.input?.value??this.getAttribute("value")??""}set value(t){this.setAttribute("value",t),this.input&&(this.input.value=t),this.updateDynamicUI()}get type(){return this.getAttribute("type")||"text"}set type(t){this.setAttribute("type",t)}get size(){return this.getAttribute("size")||"m"}set size(t){this.setAttribute("size",t)}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}get readOnly(){return this.hasAttribute("readonly")}set readOnly(t){this.toggleAttribute("readonly",t)}connectedCallback(){this.render()}disconnectedCallback(){this.detachScrub?.(),this.detachScrub=void 0}attributeChangedCallback(t){if("value"!==t||!this.isScrubbing){if("value"===t&&this.input){const t=this.getAttribute("value")??"";return this.input.value!==t&&(this.input.value=t),void this.updateDynamicUI()}this.render()}}focus(){this.input?.focus()}get passwordMinLength(){return Number(this.getAttribute("password-min-length")||8)}get validationVisibility(){return this.getAttribute("validation-visibility")||"focus"}get validateOnBlur(){return!this.hasAttribute("validate-on-blur")||"false"!==this.getAttribute("validate-on-blur")}get isValidationEnabled(){return this.hasAttribute("validate")}getIconSize(){return t(this.size)}resolveIconName(t){const e=this.getAttribute(t);if(e&&l.has(e))return e}resolveStartIcon(){const t=this.resolveIconName("start-icon");return t||("search"===this.type?"search":void 0)}getCurrentValue(){return this.input?.value??this.getAttribute("value")??this.getAttribute("default-value")??""}render(){const t=this.getCurrentValue(),e=a.includes(this.type)?this.type:"text",s="search"===e,l="password"===e,u=l&&this.passwordVisible||s?"text":e,d=this.getAttribute("label")||"",h=this.getAttribute("helper-text")||"",c=this.getAttribute("error-message")||"",o=this.hasAttribute("error"),b=this.resolveStartIcon(),p=this.resolveIconName("end-icon");this.classList.add("designbase-wc-input"),r.forEach(t=>this.classList.remove(`designbase-wc-input--${t}`)),this.classList.add(`designbase-wc-input--${r.includes(this.size)?this.size:"m"}`),this.classList.toggle("designbase-wc-input--error",o),this.classList.toggle("designbase-wc-input--disabled",this.disabled),this.classList.toggle("designbase-wc-input--readonly",this.readOnly),this.classList.toggle("designbase-wc-input--full-width",this.hasAttribute("full-width")),this.classList.toggle("designbase-wc-input--with-start-icon",Boolean(b));const g=s&&t.length>0&&!this.disabled&&!this.readOnly;this.classList.toggle("designbase-wc-input--with-end-icon",Boolean(p&&!l&&!s)||l||g),this.classList.toggle("designbase-wc-input--with-password-toggle",l),this.classList.toggle("designbase-wc-input--with-search-clear",g);const v=this.hasAttribute("scrubbable")&&"number"===e&&!this.disabled&&!this.readOnly;this.classList.toggle("designbase-wc-input--scrubbable",v),this.classList.toggle("designbase-wc-input--scrubbing",this.isScrubbing);const w=this.getAttribute("id")||`db-input-${Math.random().toString(36).slice(2)}`;this.hasAttribute("id")||this.setAttribute("id",w);const m=`${w}-field`,_=`${w}-helper`,y=`${w}-error`,$=`${w}-validation`,A=this.getAttribute("min"),E=this.getAttribute("max"),S=this.getAttribute("step");this.innerHTML=`\n            ${d?`<label class="designbase-wc-input__label" for="${m}">${this.escape(d)}${this.hasAttribute("required")?'<span aria-hidden="true"> *</span>':""}</label>`:""}\n            <span class="designbase-wc-input__wrapper">\n                ${b?'<span class="designbase-wc-input__start-icon" aria-hidden="true"></span>':""}\n                <input\n                    id="${m}"\n                    class="designbase-wc-input__field"\n                    type="${u}"\n                    value="${this.escape(t)}"\n                    placeholder="${this.escape(this.getAttribute("placeholder")||"")}"\n                    ${s?'role="searchbox"':""}\n                    ${this.getAttribute("name")?`name="${this.escape(this.getAttribute("name")||"")}"`:""}\n                    ${this.disabled?"disabled":""}\n                    ${this.readOnly?"readonly":""}\n                    ${this.hasAttribute("required")?"required":""}\n                    ${null!==A?`min="${this.escape(A)}"`:""}\n                    ${null!==E?`max="${this.escape(E)}"`:""}\n                    ${null!==S?`step="${this.escape(S)}"`:""}\n                    aria-invalid="${String(o)}"\n                />\n                ${l?`<button type="button" class="designbase-wc-input__password-toggle" ${this.disabled?"disabled":""} aria-label="${this.passwordVisible?"비밀번호 숨기기":"비밀번호 보기"}"></button>`:""}\n                ${s?'<button type="button" class="designbase-wc-input__clear-button" hidden aria-label="검색어 지우기"></button>':""}\n                ${!p||l||s?"":'<span class="designbase-wc-input__end-icon" aria-hidden="true"></span>'}\n            </span>\n            ${this.isValidationEnabled&&l?`<div class="designbase-wc-input__validation-slot" id="${$}"></div>`:""}\n            ${h&&!o?`<p id="${_}" class="designbase-wc-input__helper-text">${this.escape(h)}</p>`:""}\n            ${o&&c?`<p id="${y}" class="designbase-wc-input__error-message">${this.escape(c)}</p>`:""}\n        `,this.mountIcons(b,!p||l||s?void 0:p,l),this.input=this.querySelector("input")||void 0,this.input&&(this.input.value=t,this.input.addEventListener("input",this.handleInput),this.input.addEventListener("change",this.handleChange),this.input.addEventListener("focus",this.handleFocus),this.input.addEventListener("blur",this.handleBlur)),this.querySelector(".designbase-wc-input__password-toggle")?.addEventListener("click",this.handlePasswordToggle),this.querySelector(".designbase-wc-input__clear-button")?.addEventListener("click",this.handleSearchClear),this.detachScrub?.(),this.detachScrub=void 0,v&&this.input&&(this.detachScrub=i(this.input,{isEnabled:()=>this.hasAttribute("scrubbable")&&"number"===this.type,isInteractive:()=>!this.disabled&&!this.readOnly,getValue:()=>this.getCurrentValue(),getStep:()=>n(this,"scrub-step")??n(this,"step")??1,getMin:()=>n(this,"min"),getMax:()=>n(this,"max"),getSensitivity:()=>n(this,"scrub-sensitivity")??4,onValueChange:t=>this.applyScrubValue(t),onScrubStateChange:t=>{this.isScrubbing=t,this.classList.toggle("designbase-wc-input--scrubbing",t),!t&&this.input&&this.dispatchEvent(new CustomEvent("db-change",{detail:{value:this.input.value,nativeEvent:null},bubbles:!0,composed:!0}))}})),this.updateDynamicUI()}mountIcons(t,s,i=!1){const n=this.getIconSize();if(t){const s=this.querySelector(".designbase-wc-input__start-icon");s?.replaceChildren(e(t,n))}if(s){const t=this.querySelector(".designbase-wc-input__end-icon");t?.replaceChildren(e(s,n))}if(i){const t=this.querySelector(".designbase-wc-input__password-toggle");t?.replaceChildren(e(this.passwordVisible?"hide":"show",n))}const a=this.querySelector(".designbase-wc-input__clear-button");a?.replaceChildren(e("close",n))}shouldShowPasswordValidation(t){return!(!this.isValidationEnabled||"password"!==this.type)&&("never"!==this.validationVisibility&&("always"===this.validationVisibility||(this.isFocused||t.length>0)))}renderValidationMarkup(t){const e=s(t,this.passwordMinLength),i=Array.from({length:4},(t,s)=>`<span class="designbase-wc-input__password-strength-segment${s<e.score?` designbase-wc-input__password-strength-segment--${e.level}`:""}"></span>`).join(""),n=e.requirements.map(t=>`<li class="designbase-wc-input__password-requirement${t.met?" designbase-wc-input__password-requirement--met":""}">${t.met?'<span class="designbase-wc-input__password-requirement-icon" aria-hidden="true"></span>':'<span class="designbase-wc-input__password-requirement-icon" aria-hidden="true"><span class="designbase-wc-input__password-requirement-dot"></span></span>'}<span class="designbase-wc-input__password-requirement-label">${this.escape(t.label)}</span></li>`).join("");return`\n            <div class="designbase-wc-input__validation" aria-live="polite">\n                <div class="designbase-wc-input__password-strength">\n                    <div class="designbase-wc-input__password-strength-bar" role="progressbar" aria-valuemin="0" aria-valuemax="4" aria-valuenow="${e.score}" aria-label="비밀번호 강도">${i}</div>\n                    <span class="designbase-wc-input__password-strength-label designbase-wc-input__password-strength-label--${e.level}">${e.levelLabel}</span>\n                </div>\n                <ul class="designbase-wc-input__password-requirements">${n}</ul>\n            </div>\n        `}updateDynamicUI(){const t=this.getCurrentValue(),s="search"===this.type&&t.length>0&&!this.disabled&&!this.readOnly;this.classList.toggle("designbase-wc-input--with-search-clear",s);const i=this.querySelector(".designbase-wc-input__clear-button");i&&(i.hidden=!s,i.replaceChildren(e("close",this.getIconSize())));const n=this.querySelector(".designbase-wc-input__validation-slot");if(n&&(this.shouldShowPasswordValidation(t)?(n.innerHTML=this.renderValidationMarkup(t),n.querySelectorAll(".designbase-wc-input__password-requirement--met .designbase-wc-input__password-requirement-icon").forEach(t=>{t.replaceChildren(e("circle-checked",12))})):n.innerHTML=""),this.input){const e=`${this.getAttribute("id")}-helper`,s=`${this.getAttribute("id")}-error`,i=`${this.getAttribute("id")}-validation`,n=this.getAttribute("helper-text")||"",a=this.getAttribute("error-message")||"",r=this.hasAttribute("error"),l=[n&&!r?e:"",this.shouldShowPasswordValidation(t)?i:"",r&&a?s:""].filter(Boolean).join(" ")||void 0;l?this.input.setAttribute("aria-describedby",l):this.input.removeAttribute("aria-describedby")}}applyScrubValue(t){this.input&&(this.input.value=t,this.setAttribute("value",t),this.updateDynamicUI(),this.dispatchEvent(new CustomEvent("db-input",{detail:{value:t,nativeEvent:null},bubbles:!0,composed:!0})))}escape(t){return t.replace(/[&<>"']/g,t=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[t]||t))}}customElements.get("db-input")||customElements.define("db-input",DbInput);export{DbInput};

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

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

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

@@ -0,0 +1 @@
+class DbLabel extends HTMLElement{static get observedAttributes(){return["label","html-for","id","size","required","disabled","error"]}connectedCallback(){this.sync()}attributeChangedCallback(){this.sync()}sync(){const e=this.getAttribute("size")||"s",t=this.hasAttribute("required"),s=this.hasAttribute("disabled"),l=this.hasAttribute("error"),a=this.getAttribute("html-for"),i=this.getAttribute("id"),r=this.getAttribute("label");this.className=["designbase-wc-label",`designbase-wc-label--${e}`,s&&"designbase-wc-label--disabled",l&&"designbase-wc-label--error"].filter(Boolean).join(" ");let b=this.querySelector(":scope > label.designbase-wc-label__text");if(null!==r&&""!==r)b||(this.replaceChildren(),b=document.createElement("label"),b.className="designbase-wc-label__text",this.append(b)),b.textContent=r;else if(!b&&this.childNodes.length>0){b=document.createElement("label"),b.className="designbase-wc-label__text";Array.from(this.childNodes).forEach(e=>b.append(e)),this.append(b)}if(b&&(a?b.htmlFor=a:b.removeAttribute("for"),i?b.id=i:b.removeAttribute("id"),b.querySelector(".designbase-wc-label__required")?.remove(),t)){const e=document.createElement("span");e.className="designbase-wc-label__required",e.textContent="*",b.append(e)}}}customElements.get("db-label")||customElements.define("db-label",DbLabel);export{DbLabel};

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

@@ -0,0 +1,53 @@
+interface DbLightboxImage {
+    id: string;
+    src: string;
+    alt?: string;
+    title?: string;
+    description?: string;
+    thumbnail?: string;
+}
+declare class DbLightbox extends HTMLElement {
+    private portalEl;
+    private imageEl;
+    private loadingEl;
+    private errorEl;
+    private counterBadge;
+    private prevNav;
+    private nextNav;
+    private currentIndex;
+    private imageLoaded;
+    private imageError;
+    private keydownHandler;
+    private boundSrc;
+    private thumbnailSignature;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, newValue: string | null): void;
+    get open(): boolean;
+    set open(value: boolean);
+    private parseImages;
+    private getCurrentImage;
+    private resetImageState;
+    private close;
+    private goTo;
+    private createIconButton;
+    private buildPortal;
+    private handleImageLoad;
+    private handleImageError;
+    private syncImageLayers;
+    private updateThumbnails;
+    private loadCurrentImage;
+    private refreshView;
+    private mount;
+    private unmount;
+    private syncOpenState;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-lightbox': DbLightbox;
+    }
+}
+
+export { DbLightbox };
+export type { DbLightboxImage };

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

@@ -0,0 +1 @@
+import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l","xl"];class DbLightbox extends HTMLElement{constructor(){super(...arguments),this.portalEl=null,this.imageEl=null,this.loadingEl=null,this.errorEl=null,this.counterBadge=null,this.prevNav=null,this.nextNav=null,this.currentIndex=0,this.imageLoaded=!1,this.imageError=!1,this.keydownHandler=null,this.boundSrc="",this.thumbnailSignature="",this.handleImageLoad=()=>{this.imageLoaded=!0,this.imageError=!1,this.syncImageLayers()},this.handleImageError=()=>{this.imageLoaded=!1,this.imageError=!0,this.syncImageLayers()}}static get observedAttributes(){return["images","current-index","size","open","enable-keyboard","show-thumbnails","show-counter","show-close-button","show-navigation-buttons","show-toolbar","close-on-backdrop-click","close-on-escape"]}connectedCallback(){this.classList.add("designbase-wc-lightbox-host"),this.syncOpenState()}disconnectedCallback(){this.unmount()}attributeChangedCallback(e,t,s){if("current-index"===e)return this.currentIndex=Number(s||0),this.resetImageState(),void(this.open&&this.refreshView());"open"!==e?"images"===e&&this.open&&this.refreshView():this.syncOpenState()}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}parseImages(){const e=this.getAttribute("images");if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}}getCurrentImage(){return this.parseImages()[this.currentIndex]||null}resetImageState(){this.imageLoaded=!1,this.imageError=!1,this.boundSrc=""}close(){this.open=!1,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}goTo(e){const t=this.parseImages();if(!t.length)return;const s=(e%t.length+t.length)%t.length;s!==this.currentIndex&&(this.currentIndex=s,this.setAttribute("current-index",String(s)),this.resetImageState(),this.refreshView(),this.dispatchEvent(new CustomEvent("db-image-change",{bubbles:!0,composed:!0,detail:{index:s}})))}createIconButton(e,t,s,i,n={}){const a=document.createElement("db-button");return a.className=e,a.setAttribute("variant",n.variant||"ghost"),a.setAttribute("size",n.size||"m"),a.setAttribute("icon-only",""),a.setAttribute("start-icon",t),a.setAttribute("aria-label",s),n.radius&&a.setAttribute("radius",n.radius),a.addEventListener("db-click",i),a}buildPortal(){const s=this.getAttribute("size")||"l",i=t.includes(s)?s:"l",n=document.createElement("div");n.className=`designbase-wc-lightbox designbase-wc-lightbox--size-${i}`,n.setAttribute("data-wc-internal","");const a=document.createElement("div");a.className="designbase-wc-lightbox__overlay";const r=document.createElement("div");r.className="designbase-wc-lightbox__modal";const o=document.createElement("div");o.className="designbase-wc-lightbox__header";const l=document.createElement("div");l.className="designbase-wc-lightbox__title";const h=document.createElement("h3");h.className="designbase-wc-lightbox__title-text";const c=document.createElement("db-badge");c.className="designbase-wc-lightbox__counter",c.setAttribute("size","s"),c.setAttribute("variant","secondary"),c.setAttribute("badge-style","text"),l.append(h,c);const d=document.createElement("div");d.className="designbase-wc-lightbox__header-actions","false"!==this.getAttribute("show-close-button")&&d.append(this.createIconButton("designbase-wc-lightbox__close-button","close","닫기",()=>this.close())),o.append(l,d);const g=document.createElement("div");g.className="designbase-wc-lightbox__content",this.prevNav=this.createIconButton("designbase-wc-lightbox__nav-button designbase-wc-lightbox__nav-button--prev","chevron-left","이전 이미지",()=>this.goTo(this.currentIndex-1),{radius:"pill",size:"l"}),this.nextNav=this.createIconButton("designbase-wc-lightbox__nav-button designbase-wc-lightbox__nav-button--next","chevron-right","다음 이미지",()=>this.goTo(this.currentIndex+1),{radius:"pill",size:"l"});const u=document.createElement("div");u.className="designbase-wc-lightbox__image-container",this.errorEl=document.createElement("div"),this.errorEl.className="designbase-wc-lightbox__error",this.errorEl.hidden=!0;const b=e("gallery",24);b.classList.add("designbase-wc-lightbox__error-icon"),this.errorEl.append(b);const m=document.createElement("p");m.className="designbase-wc-lightbox__error-text",m.textContent="이미지를 불러올 수 없습니다",this.errorEl.append(m),this.loadingEl=document.createElement("div"),this.loadingEl.className="designbase-wc-lightbox__loading";const p=document.createElement("db-spinner");p.setAttribute("type","circular"),p.setAttribute("size","m"),p.setAttribute("show-label",""),p.setAttribute("label","이미지 로딩 중..."),this.loadingEl.append(p),this.imageEl=document.createElement("img"),this.imageEl.className="designbase-wc-lightbox__image",this.imageEl.draggable=!1,this.imageEl.addEventListener("load",this.handleImageLoad),this.imageEl.addEventListener("error",this.handleImageError),u.append(this.errorEl,this.loadingEl,this.imageEl);const E=document.createElement("div");E.className="designbase-wc-lightbox__description";const x=document.createElement("p");x.className="designbase-wc-lightbox__description-text",E.append(x),"false"!==this.getAttribute("show-navigation-buttons")&&g.append(this.prevNav,this.nextNav),g.append(u,E);const w=document.createElement("div");w.className="designbase-wc-lightbox__thumbnails";const v=document.createElement("div");return v.className="designbase-wc-lightbox__thumbnails-container",w.append(v),r.append(o,g,w),a.append(r),n.append(a),a.addEventListener("click",e=>{e.target===a&&"false"!==this.getAttribute("close-on-backdrop-click")&&this.close()}),this.portalEl=n,this.counterBadge=c,n}syncImageLayers(){this.imageEl&&this.loadingEl&&this.errorEl&&(this.imageEl.classList.toggle("designbase-wc-lightbox__image--loaded",this.imageLoaded),this.loadingEl.hidden=this.imageLoaded||this.imageError,this.errorEl.hidden=!this.imageError,this.imageEl.hidden=this.imageError)}updateThumbnails(){if(!this.portalEl)return;const e=this.portalEl.querySelector(".designbase-wc-lightbox__thumbnails-container"),t=this.portalEl.querySelector(".designbase-wc-lightbox__thumbnails");if(!e||!t)return;const s=this.parseImages(),i="false"!==this.getAttribute("show-thumbnails")&&s.length>1;if(t.hidden=!i,!i)return e.replaceChildren(),void(this.thumbnailSignature="");const n=s.map(e=>e.thumbnail||e.src).join("|");n!==this.thumbnailSignature||e.childElementCount!==s.length?(this.thumbnailSignature=n,e.replaceChildren(),s.forEach((t,s)=>{const i=document.createElement("button");i.type="button",i.className=["designbase-wc-lightbox__thumbnail",s===this.currentIndex&&"designbase-wc-lightbox__thumbnail--active"].filter(Boolean).join(" "),i.title=t.title||`이미지 ${s+1}`,i.setAttribute("aria-label",t.alt||t.title||`이미지 ${s+1}`),i.setAttribute("aria-current",s===this.currentIndex?"true":"false");const n=document.createElement("img");n.className="designbase-wc-lightbox__thumbnail-image",n.src=t.thumbnail||t.src,n.alt="",n.draggable=!1,n.loading="lazy",n.decoding="async",i.append(n),i.addEventListener("click",()=>this.goTo(s)),e.append(i)})):Array.from(e.children).forEach((e,t)=>{const s=e,i=t===this.currentIndex;s.classList.toggle("designbase-wc-lightbox__thumbnail--active",i),s.setAttribute("aria-current",i?"true":"false")})}loadCurrentImage(){if(!this.imageEl)return;const e=this.getCurrentImage();if(!e?.src)return this.imageEl.removeAttribute("src"),this.resetImageState(),void this.syncImageLayers();this.boundSrc!==e.src&&(this.boundSrc=e.src,this.resetImageState(),this.imageEl.src=e.src,this.imageEl.alt=e.alt||e.title||`이미지 ${this.currentIndex+1}`,this.syncImageLayers(),this.imageEl.complete&&this.imageEl.naturalWidth>0&&this.handleImageLoad())}refreshView(){if(!this.portalEl)return;const e=this.getCurrentImage(),t=this.parseImages(),s=this.portalEl.querySelector(".designbase-wc-lightbox__title-text"),i=this.portalEl.querySelector(".designbase-wc-lightbox__description-text"),n=this.portalEl.querySelector(".designbase-wc-lightbox__description");if(s&&(s.textContent=e?.title||"",s.hidden=!e?.title),this.counterBadge){const e="false"!==this.getAttribute("show-counter")&&t.length>1?`${this.currentIndex+1} / ${t.length}`:"";this.counterBadge.textContent=e,this.counterBadge.hidden=!e}n&&i&&(i.textContent=e?.description||"",n.hidden=!e?.description);const a="false"!==this.getAttribute("show-navigation-buttons")&&t.length>1;this.prevNav&&(this.prevNav.hidden=!a),this.nextNav&&(this.nextNav.hidden=!a),this.loadCurrentImage(),this.updateThumbnails()}mount(){this.portalEl||(this.portalEl=this.buildPortal()),this.portalEl.isConnected||document.body.append(this.portalEl),document.body.style.overflow="hidden",this.keydownHandler||(this.keydownHandler=e=>{this.open&&"false"!==this.getAttribute("enable-keyboard")&&("Escape"===e.key&&"false"!==this.getAttribute("close-on-escape")&&(e.preventDefault(),this.close()),"ArrowLeft"===e.key&&this.goTo(this.currentIndex-1),"ArrowRight"===e.key&&this.goTo(this.currentIndex+1))},document.addEventListener("keydown",this.keydownHandler)),this.currentIndex=Number(this.getAttribute("current-index")||0),this.refreshView()}unmount(){this.portalEl?.remove(),document.body.style.overflow="",this.keydownHandler&&(document.removeEventListener("keydown",this.keydownHandler),this.keydownHandler=null)}syncOpenState(){this.open?this.mount():this.unmount()}}customElements.get("db-lightbox")||customElements.define("db-lightbox",DbLightbox);export{DbLightbox};

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

@@ -0,0 +1,46 @@
+interface DbListItemData {
+    id: string;
+    title: string;
+    description?: string;
+    badge?: string | {
+        text: string;
+        variant?: string;
+        style?: string;
+    };
+    icon?: string;
+    image?: string;
+    disabled?: boolean;
+    selected?: boolean;
+    meta?: {
+        label: string;
+        value: string;
+    }[];
+}
+declare class DbList extends HTMLElement {
+    static get observedAttributes(): string[];
+    private groupName;
+    get items(): DbListItemData[];
+    set items(value: DbListItemData[] | string);
+    get selectedItems(): string[];
+    set selectedItems(value: string[] | string);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private flag;
+    private controlSize;
+    private parseBadge;
+    private isSelected;
+    private setSelection;
+    private toggleSelection;
+    private syncSelectionState;
+    private createSelectControl;
+    private createBadge;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-list': DbList;
+    }
+}
+
+export { DbList };
+export type { DbListItemData };

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

@@ -0,0 +1 @@
+import{createDbIcon as e}from"./db-icons.js";class DbList extends HTMLElement{constructor(){super(...arguments),this.groupName=`db-list-${Math.random().toString(36).slice(2,9)}`}static get observedAttributes(){return["items","size","variant","layout","spacing","selectable","multiple","selected-items","empty-message","show-description","show-arrow","show-badge","loading","loading-count"]}get items(){try{return JSON.parse(this.getAttribute("items")||"[]")}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get selectedItems(){const e=this.getAttribute("selected-items")||"[]";try{const t=JSON.parse(e);return Array.isArray(t)?t.map(String):[]}catch{return[]}}set selectedItems(e){this.setAttribute("selected-items","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.render()}attributeChangedCallback(e){this.isConnected&&("selected-items"!==e?this.render():this.syncSelectionState())}flag(e,t=!0){return this.hasAttribute(e)?"false"!==this.getAttribute(e):t}controlSize(){return"l"===(this.getAttribute("size")||"m")?"m":"s"}parseBadge(e){return e?"string"==typeof e?{text:e,variant:"primary",style:"text"}:{text:e.text,variant:e.variant||"primary",style:e.style||"text"}:null}isSelected(e){return e.selected||this.selectedItems.includes(e.id)}setSelection(e){const t=JSON.stringify(e);this.getAttribute("selected-items")!==t?(this.setAttribute("selected-items",t),this.syncSelectionState(),this.dispatchEvent(new CustomEvent("db-select",{detail:{selectedItems:e},bubbles:!0,composed:!0}))):this.syncSelectionState()}toggleSelection(e){const t=this.hasAttribute("multiple"),s=this.selectedItems;let i;i=t?s.includes(e)?s.filter(t=>t!==e):[...s,e]:s.includes(e)?[]:[e],this.setSelection(i)}syncSelectionState(){const e=new Set(this.selectedItems);this.querySelectorAll(":scope > .designbase-wc-list__item").forEach(t=>{const s=t.dataset.itemId;if(!s)return;const i=e.has(s);t.classList.toggle("designbase-wc-list__item--selected",i),t.setAttribute("aria-selected",String(i));const n=t.querySelector("db-checkbox, db-radio");n&&(i?n.setAttribute("checked",""):n.removeAttribute("checked"))})}createSelectControl(e,t){const s=document.createElement("div");s.className="designbase-wc-list__item-select";const i=document.createElement(t?"db-checkbox":"db-radio");return i.setAttribute("has-label","false"),i.setAttribute("size",this.controlSize()),i.setAttribute("value",e.id),t||i.setAttribute("name",this.groupName),this.isSelected(e)&&i.setAttribute("checked",""),e.disabled&&i.setAttribute("disabled",""),i.addEventListener("click",e=>e.stopPropagation()),i.addEventListener("db-change",t=>{t.stopPropagation(),e.disabled||this.toggleSelection(e.id)}),s.append(i),s}createBadge(e){const t=document.createElement("db-badge");return t.setAttribute("size","s"),t.setAttribute("variant",e.variant),t.setAttribute("badge-style",e.style),"number"===e.style?t.setAttribute("count",e.text):t.textContent=e.text,t}render(){const t=this.getAttribute("size")||"m",s=this.getAttribute("variant")||"navigation",i=this.getAttribute("layout")||"vertical",n=this.getAttribute("spacing")||"s",a=this.hasAttribute("selectable"),c=this.hasAttribute("multiple"),l=this.hasAttribute("loading"),d=Number(this.getAttribute("loading-count")||3),r=this.flag("show-description",!1),o=this.flag("show-arrow",!0),m=this.flag("show-badge",!0),b=this.items,g="s"===t?16:"l"===t?24:20;if(this.className=["designbase-wc-list",`designbase-wc-list--size-${t}`,`designbase-wc-list--variant-${s}`,`designbase-wc-list--layout-${i}`,`designbase-wc-list--spacing-${n}`,a&&"designbase-wc-list--selectable",c&&"designbase-wc-list--multiple",l&&"designbase-wc-list--loading"].filter(Boolean).join(" "),this.replaceChildren(),l)for(let e=0;e<d;e+=1){const e=document.createElement("div");e.className="designbase-wc-list__item designbase-wc-list__item--loading",e.innerHTML='\n                    <div class="designbase-wc-list__item-skeleton">\n                        <div class="designbase-wc-list__item-skeleton-icon"></div>\n                        <div class="designbase-wc-list__item-skeleton-content">\n                            <div class="designbase-wc-list__item-skeleton-title"></div>\n                            <div class="designbase-wc-list__item-skeleton-description"></div>\n                        </div>\n                    </div>\n                ',this.append(e)}else{if(0===b.length){const e=document.createElement("div");return e.className="designbase-wc-list__empty",e.textContent=this.getAttribute("empty-message")||"항목이 없습니다.",void this.append(e)}b.forEach((l,d)=>{const b=this.isSelected(l),u=r&&Boolean(l.description),h=Boolean(l.meta?.length),p=this.parseBadge(l.badge),_=Boolean(m&&p||o),w=document.createElement("div");if(w.className=["designbase-wc-list__item",`designbase-wc-list__item--size-${t}`,`designbase-wc-list__item--variant-${s}`,`designbase-wc-list__item--layout-${i}`,`designbase-wc-list__item--spacing-${n}`,b&&"designbase-wc-list__item--selected",l.disabled&&"designbase-wc-list__item--disabled",(a||!l.disabled)&&"designbase-wc-list__item--clickable",l.icon&&"designbase-wc-list__item--with-leading",(u||h)&&"designbase-wc-list__item--with-secondary",_&&"designbase-wc-list__item--with-trailing"].filter(Boolean).join(" "),w.dataset.itemId=l.id,w.tabIndex=l.disabled?-1:0,a&&w.setAttribute("aria-selected",String(b)),a&&w.append(this.createSelectControl(l,c)),l.icon){const t=document.createElement("div");t.className="designbase-wc-list__item-icon",t.append(e(l.icon,g)),w.append(t)}else if(l.image){const e=document.createElement("div");e.className="designbase-wc-list__item-image";const t=document.createElement("img");t.src=l.image,t.alt=l.title,e.append(t),w.append(e)}const v=document.createElement("div");v.className="designbase-wc-list__item-content";const A=document.createElement("div");A.className="designbase-wc-list__item-header";const y=document.createElement("h4");if(y.className="designbase-wc-list__item-title",y.textContent=l.title,A.append(y),v.append(A),u){const e=document.createElement("p");e.className="designbase-wc-list__item-description",e.textContent=l.description||"",v.append(e)}if(h&&l.meta){const e=document.createElement("div");e.className="designbase-wc-list__item-meta",l.meta.forEach(t=>{const s=document.createElement("div");s.className="designbase-wc-list__item-meta-item";const i=document.createElement("span");i.className="designbase-wc-list__item-meta-label",i.textContent=`${t.label}:`;const n=document.createElement("span");n.className="designbase-wc-list__item-meta-value",n.textContent=t.value,s.append(i,n),e.append(s)}),v.append(e)}if(w.append(v),_){const t=document.createElement("div");if(t.className="designbase-wc-list__item-trailing",m&&p&&t.append(this.createBadge(p)),o){const s=document.createElement("div");s.className="designbase-wc-list__item-arrow",s.setAttribute("aria-hidden","true"),s.append(e("chevron-right",16)),t.append(s)}w.append(t)}const handleActivate=()=>{l.disabled||(this.dispatchEvent(new CustomEvent("db-item-click",{detail:{item:l,index:d},bubbles:!0,composed:!0})),a&&this.toggleSelection(l.id))};w.addEventListener("click",handleActivate),w.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),handleActivate())}),this.append(w)})}}}customElements.get("db-list")||customElements.define("db-list",DbList);export{DbList};

package/dist/esm/components/db-logo-svg.js

@@ -0,0 +1 @@
+const t={xs:{width:96,height:20,markSize:19},s:{width:125,height:26,markSize:25},m:{width:193,height:40,markSize:38},l:{width:256,height:53,markSize:50},xl:{width:320,height:66,markSize:63}};function getLogoDimensions(e){return t[e]||t.m}function getLogoColor(t){if("original"===t)return;const e={light:"#ffffff",dark:"#000000",default:"var(--db-text-primary)",primary:"var(--db-brand-primary)",secondary:"var(--db-text-secondary)",white:"#ffffff"};return e[t]??e.default}function createDesignBaseLogoSvg(t,e,i,r){const n=document.createElementNS("http://www.w3.org/2000/svg","svg");n.setAttribute("width",String(t)),n.setAttribute("height",String(e)),n.setAttribute("viewBox","0 0 386 40"),n.setAttribute("fill","none"),n.setAttribute("xmlns","http://www.w3.org/2000/svg"),n.setAttribute("aria-label","DesignBase Logo"),r&&n.setAttribute("class",r);const s=document.createElementNS("http://www.w3.org/2000/svg","g");return s.setAttribute("fill",i||"#000000"),s.innerHTML='\n<polygon points="58.4,23.6 77.3,23.6 77.3,16.2 58.4,16.2 58.4,7.7 79.4,7.7 79.4,0.4 49.5,0.4 49.5,39.6 80,39.6 80,32.3 58.4,32.3"/>\n<path d="M95.6,10.8c0-2.1,2-3.2,5-3.2s8.1,1.6,12.2,4l3.4-7.3c-4.5-2.8-9.6-4.2-14.9-4.2c-9.1,0-15.2,4.5-15.2,11.6 c0,13.9,20.9,9.6,20.9,17c0,2.4-2.2,3.8-5.8,3.8c-4.2,0-9.9-2.3-13.9-5.9l-3.5,7.2c4.9,4,11,6.2,17.3,6.2c8.7,0,15.4-4.1,15.4-11.8 C116.5,13.9,95.6,18,95.6,10.8z"/>\n<rect x="122.7" y="0.4" width="8.8" height="39.2"/>\n<path d="M158.8,7.8c4,0.1,7.8,1.7,10.8,4.4l5-6.3c-4.4-3.7-10-5.7-15.7-5.7c-12.2,0-21.4,8.5-21.4,19.9s9,20,20.9,20 c5.7-0.1,11.2-1.9,15.9-5.1V19.8h-7.6v10.3c-2.4,1.3-5,2-7.7,2.1h-0.4c-6.7-0.1-12.1-5.6-12-12.3v-0.4 C146.7,13,152.2,7.7,158.8,7.8z"/>\n<polygon points="209.1,25.6 190.1,0.4 182,0.4 182,39.6 190.5,39.6 190.5,14.5 209.5,39.6 217.5,39.6 217.5,0.4 209.1,0.4"/>\n<path d="M263.3,18.8c4-0.9,6.9-4.5,6.8-8.6c0-6-5.4-9.8-14-9.8h-24.5v6.5l6.4,1v31.8h18.7c9.1,0,14.8-4.2,14.8-10.9 C271.7,23.8,268.2,19.5,263.3,18.8z M246.9,7.6h8.7c3.4-0.1,5.4,1.5,5.4,4.2s-2,4.4-5.4,4.4h-8.7V7.6z M255.7,32.4h-8.7v-9.3h8.7 c4.1,0,6.7,1.7,6.7,4.5C262.4,30.6,259.8,32.4,255.7,32.4z"/>\n<path d="M290.5,0.4l-17,39.2h9.1l3.1-7.6h18.2l3,7.6h9.5L299.6,0.4H290.5z M288.6,24.9l6.2-15.2l6.2,15.2L288.6,24.9z"/>\n<path d="M328.9,10.8c0-2.1,2-3.2,5-3.2s8.1,1.6,12.2,4l3.4-7.3C345,1.4,339.9,0,334.6,0c-9.1,0-15.2,4.5-15.2,11.6 c0,13.9,20.9,9.6,20.9,17c0,2.4-2.2,3.8-5.8,3.8c-4.1,0-9.9-2.3-13.9-5.9l-3.5,7.2c4.9,4,11,6.2,17.3,6.2c8.7,0,15.4-4.1,15.4-11.8 C349.8,13.9,328.9,18,328.9,10.8z"/>\n<polygon points="364.4,32.3 364.4,23.6 383.3,23.6 383.3,16.2 364.4,16.2 364.4,7.7 385.4,7.7 385.4,0.4 355.5,0.4 355.5,39.6 386,39.6 386,32.3"/>\n<path d="M23.1,0.4H0v6.5l6.5,1v31.8h16.3c12.4,0,21-8.1,21-19.6S35.2,0.4,23.1,0.4z M34.7,20.1c0,7.2-4.8,12.1-11.4,12.1h-8V7.8H23 C29.8,7.8,34.8,12.8,34.7,20.1L34.7,20.1z"/>\n',n.append(s),n}function createDesignBaseLogoMarkSvg(t,e,i){const r=.95*t,n=t,s=document.createElementNS("http://www.w3.org/2000/svg","svg");s.setAttribute("width",String(r)),s.setAttribute("height",String(n)),s.setAttribute("viewBox","0 0 95 100"),s.setAttribute("fill","none"),s.setAttribute("xmlns","http://www.w3.org/2000/svg"),s.setAttribute("aria-label","DesignBase Mark"),i&&s.setAttribute("class",i);const o=document.createElementNS("http://www.w3.org/2000/svg","path");return o.setAttribute("fill",e||"#000000"),o.setAttribute("d","M45,0H0V8l10,2V90L0,92v8H45A50,50,0,0,0,45,0ZM43.12,90H20V10H38.33a15,15,0,0,1,0,30H30.11V50h13a20,20,0,0,1,0,40ZM71.4,80A30,30,0,0,0,55.83,42.83,24.93,24.93,0,0,0,60.27,13,40,40,0,0,1,71.4,80Z"),s.append(o),s}export{createDesignBaseLogoMarkSvg,createDesignBaseLogoSvg,getLogoColor,getLogoDimensions};

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

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

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

@@ -0,0 +1 @@
+import{createDesignBaseLogoSvg as e,createDesignBaseLogoMarkSvg as t,getLogoDimensions as s,getLogoColor as i}from"./db-logo-svg.js";class DbLogo extends HTMLElement{static get observedAttributes(){return["type","text","src","alt","size","variant","clickable","href","target","full-width"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}handleClick(e){(this.hasAttribute("clickable")||this.getAttribute("href"))&&(e.preventDefault(),this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0})))}renderLogoContent(n){const a=this.getAttribute("type")||"designbase",o=this.getAttribute("text")||"Logo",r=this.getAttribute("src"),l=this.getAttribute("alt")||o,c=this.getAttribute("size")||"m",d=this.getAttribute("variant")||"original",{width:g,height:b,markSize:h}=s(c),u=i(d);if("designbase"===a){const t=document.createElement("div");return t.className="designbase-wc-logo__svg",t.append(e(g,b,u)),void n.append(t)}if("designbase-mark"===a){const e=document.createElement("div");return e.className="designbase-wc-logo__svg",e.append(t(h,u)),void n.append(e)}if(r){const e=document.createElement("img");return e.className="designbase-wc-logo__image",e.src=r,e.alt=l,void n.append(e)}const m=document.createElement("span");m.className="designbase-wc-logo__text",m.textContent=o,n.append(m)}render(){const e=this.getAttribute("type")||"designbase",t=this.getAttribute("size")||"m",s=this.getAttribute("variant")||"original",i=this.hasAttribute("clickable")||Boolean(this.getAttribute("href")),n=this.hasAttribute("full-width"),a=this.getAttribute("href"),o=this.getAttribute("target")||"_self";this.className="",this.replaceChildren();const r=document.createElement("div");if(r.className=["designbase-wc-logo",`designbase-wc-logo--${t}`,s?`designbase-wc-logo--${s}`:"",i?"designbase-wc-logo--clickable":"",n?"designbase-wc-logo--full-width":"","custom"!==e?"designbase-wc-logo--svg":""].filter(Boolean).join(" "),i&&(r.addEventListener("click",e=>this.handleClick(e)),a||r.setAttribute("role","button"),r.setAttribute("tabindex","0"),r.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleClick(e))})),this.renderLogoContent(r),a){const e=document.createElement("a");return e.className="designbase-wc-logo__link",e.href=a,e.target=o,"_blank"===o&&(e.rel="noopener noreferrer"),e.append(r),void this.append(e)}this.append(r)}}customElements.get("db-logo")||customElements.define("db-logo",DbLogo);export{DbLogo};

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

@@ -0,0 +1,20 @@
+declare class DbLottie extends HTMLElement {
+    private container?;
+    private animation?;
+    private loadToken;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private getBool;
+    private getSizeStyle;
+    private destroyAnimation;
+    private renderAnimation;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-lottie': DbLottie;
+    }
+}
+
+export { DbLottie };

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

@@ -0,0 +1 @@
+const t="designbase-wc-lottie";class DbLottie extends HTMLElement{constructor(){super(...arguments),this.loadToken=0}static get observedAttributes(){return["src","animation-data","loop","autoplay","speed","width","height","renderer"]}connectedCallback(){this.style.display="inline-block",this.renderAnimation()}disconnectedCallback(){this.destroyAnimation(),this.container?.remove(),this.container=void 0}attributeChangedCallback(){this.isConnected&&this.renderAnimation()}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const i=this.getAttribute(t);return""===i||"true"===i}getSizeStyle(t){if(!t)return;const e=Number(t);return Number.isFinite(e)?`${e}px`:t}destroyAnimation(){this.animation?.destroy(),this.animation=void 0}async renderAnimation(){const e=++this.loadToken;this.destroyAnimation(),this.container?this.container.replaceChildren():(this.container=document.createElement("div"),this.container.className=`${t}__container`,this.appendChild(this.container));const i=this.getSizeStyle(this.getAttribute("width")),n=this.getSizeStyle(this.getAttribute("height"));if(i&&(this.style.width=i),n&&(this.style.height=n),e!==this.loadToken||!this.container)return;const o=this.getBool("loop",!0),s=!this.hasAttribute("autoplay")||this.getBool("autoplay",!0),a=Number(this.getAttribute("speed")||1),r=this.getAttribute("renderer")||"svg";let h;const c=this.getAttribute("animation-data");if(c)try{h=JSON.parse(c)}catch{h=void 0}const d=this.getAttribute("src");if(!h&&!d){const e=document.createElement("div");return e.className=`${t}__fallback`,e.textContent="src 또는 animation-data 속성이 필요합니다.",void this.container.appendChild(e)}const l=await import("lottie-web"),u=l.default??l;e===this.loadToken&&this.container&&(this.animation=u.loadAnimation({container:this.container,renderer:r,loop:o,autoplay:s,...h?{animationData:h}:{path:d}}),Number.isFinite(a)&&a>0&&this.animation.setSpeed(a))}}customElements.get("db-lottie")||customElements.define("db-lottie",DbLottie);export{DbLottie};

package/dist/esm/components/db-markdown-editor.d.ts

@@ -0,0 +1,53 @@
+declare class DbMarkdownEditor extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private internalValue;
+    private currentMode;
+    private isFocused;
+    private wordCount;
+    private lineCount;
+    private lastSaved;
+    private isSaving;
+    private autoSaveTimer?;
+    private textareaEl?;
+    private previewEl?;
+    private codeViewEl?;
+    private editPanelEl?;
+    private previewPanelEl?;
+    private codePanelEl?;
+    private contentEl?;
+    private toolbarEl?;
+    private statusEl?;
+    private wordCountEl?;
+    private lineCountEl?;
+    private lastSavedEl?;
+    private savingEl?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    get value(): string;
+    set value(next: string);
+    private getBool;
+    private syncFromAttributes;
+    private updateRootClasses;
+    private markdownToHtml;
+    private updatePreview;
+    private updateCodeView;
+    private updateCounts;
+    private updateStatus;
+    private emitChange;
+    private insertText;
+    private getDefaultToolbarActions;
+    private renderToolbar;
+    private renderMode;
+    private setupAutoSave;
+    private handleKeyDown;
+    private build;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-markdown-editor': DbMarkdownEditor;
+    }
+}
+
+export { DbMarkdownEditor };

package/dist/esm/components/db-markdown-editor.js

@@ -0,0 +1 @@
+import{createDbIcon as t}from"./db-icons.js";const e="designbase-wc-markdown-editor";class DbMarkdownEditor extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.internalValue="",this.currentMode="preview",this.isFocused=!1,this.wordCount=0,this.lineCount=0,this.lastSaved=null,this.isSaving=!1,this.handleKeyDown=t=>{if(this.getBool("disabled")||this.getBool("readonly"))return;const{ctrlKey:e,shiftKey:i,key:s}=t;e&&"b"===s?(t.preventDefault(),this.insertText("**","**","**")):e&&"i"===s?(t.preventDefault(),this.insertText("*","*","*")):e&&"k"===s?(t.preventDefault(),this.insertText("[","](",")")):e&&"`"===s?(t.preventDefault(),this.insertText("`","`","`")):e&&i&&"S"===s?(t.preventDefault(),this.insertText("~~","~~","~~")):"Tab"===s&&(t.preventDefault(),this.insertText("    ","",""))}}static get observedAttributes(){return["size","variant","mode","theme","value","placeholder","min-height","max-height","auto-height","readonly","disabled","show-toolbar","show-status","show-word-count","show-line-count","auto-save","auto-save-interval","file-upload"]}connectedCallback(){this.built||(this.built=!0,this.build()),this.syncFromAttributes(),this.renderMode(),this.updateCounts(),this.updateStatus(),this.setupAutoSave()}disconnectedCallback(){this.autoSaveTimer&&window.clearInterval(this.autoSaveTimer)}attributeChangedCallback(t){if(this.built){if("value"===t&&this.textareaEl)return this.internalValue=this.getAttribute("value")||"",this.textareaEl.value=this.internalValue,this.updatePreview(),this.updateCodeView(),void this.updateCounts();if("mode"===t)return this.currentMode=this.getAttribute("mode")||"preview",void this.renderMode();"auto-save"!==t&&"auto-save-interval"!==t||this.setupAutoSave(),this.updateRootClasses()}}get value(){return this.internalValue}set value(t){this.internalValue=t,this.setAttribute("value",t),this.textareaEl&&(this.textareaEl.value=t),this.updatePreview(),this.updateCodeView(),this.updateCounts()}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const i=this.getAttribute(t);return""===i||"true"===i}syncFromAttributes(){if(this.internalValue=this.getAttribute("value")||"",this.currentMode=this.getAttribute("mode")||"preview",this.textareaEl){this.textareaEl.value=this.internalValue,this.textareaEl.placeholder=this.getAttribute("placeholder")||"마크다운을 입력하세요...",this.textareaEl.readOnly=this.getBool("readonly"),this.textareaEl.disabled=this.getBool("disabled");const t=Number(this.getAttribute("min-height")||200),e=Number(this.getAttribute("max-height")||600),i=this.getBool("auto-height");this.textareaEl.style.minHeight=i?"auto":`${t}px`,this.textareaEl.style.maxHeight=i?"none":`${e}px`}this.updateRootClasses(),this.updatePreview(),this.updateCodeView()}updateRootClasses(){const t=this.getAttribute("size")||"m",i=this.getAttribute("variant")||"default",s=this.getAttribute("theme")||"light";this.className=[e,`${e}--size-${t}`,`${e}--variant-${i}`,`${e}--mode-${this.currentMode}`,`${e}--theme-${s}`,this.isFocused&&`${e}--focused`,this.getBool("disabled")&&`${e}--disabled`,this.getBool("readonly")&&`${e}--readonly`].filter(Boolean).join(" ")}markdownToHtml(t){return t.replace(/^### (.*$)/gim,"<h3>$1</h3>").replace(/^## (.*$)/gim,"<h2>$1</h2>").replace(/^# (.*$)/gim,"<h1>$1</h1>").replace(/\*\*(.*)\*\*/gim,"<strong>$1</strong>").replace(/\*(.*)\*/gim,"<em>$1</em>").replace(/~~(.*)~~/gim,"<del>$1</del>").replace(/`(.*)`/gim,"<code>$1</code>").replace(/\[([^\]]+)\]\(([^)]+)\)/gim,'<a href="$2">$1</a>').replace(/!\[([^\]]*)\]\(([^)]+)\)/gim,'<img alt="$1" src="$2" />').replace(/^> (.*$)/gim,"<blockquote>$1</blockquote>").replace(/^- (.*$)/gim,"<ul><li>$1</li></ul>").replace(/^(\d+)\. (.*$)/gim,"<ol><li>$2</li></ol>").replace(/\n/gim,"<br />")}updatePreview(){this.previewEl&&(this.previewEl.innerHTML=this.markdownToHtml(this.internalValue))}updateCodeView(){if(this.codeViewEl){const t=this.codeViewEl.querySelector("code");t&&(t.textContent=this.internalValue)}}updateCounts(){this.wordCount=this.internalValue.trim()?this.internalValue.trim().split(/\s+/).length:0,this.lineCount=this.internalValue?this.internalValue.split("\n").length:0,this.wordCountEl&&(this.wordCountEl.textContent=`단어: ${this.wordCount}`),this.lineCountEl&&(this.lineCountEl.textContent=`라인: ${this.lineCount}`)}updateStatus(){if(!this.statusEl)return;const t=this.getBool("show-status",!0);this.statusEl.hidden=!t,this.wordCountEl&&(this.wordCountEl.hidden=!this.getBool("show-word-count",!0)),this.lineCountEl&&(this.lineCountEl.hidden=!this.getBool("show-line-count",!0)),this.lastSavedEl&&(this.lastSavedEl.hidden=!this.lastSaved,this.lastSaved&&(this.lastSavedEl.textContent=`저장됨: ${this.lastSaved.toLocaleTimeString()}`)),this.savingEl&&(this.savingEl.hidden=!this.isSaving)}emitChange(){this.dispatchEvent(new CustomEvent("db-change",{detail:{value:this.internalValue},bubbles:!0,composed:!0}))}insertText(t,e="",i=""){if(!this.textareaEl||this.getBool("disabled")||this.getBool("readonly"))return;const{selectionStart:s,selectionEnd:a}=this.textareaEl,l=this.internalValue.substring(s,a),n=e+(l||t)+i,o=this.internalValue.substring(0,s)+n+this.internalValue.substring(a);this.internalValue=o,this.textareaEl.value=o,this.emitChange(),this.updatePreview(),this.updateCodeView(),this.updateCounts();const r=s+e.length+(l?l.length:t.length);window.setTimeout(()=>{this.textareaEl&&(this.textareaEl.setSelectionRange(r,r),this.textareaEl.focus())},0)}getDefaultToolbarActions(){return[{id:"bold",label:"B",tooltip:"굵게 (Ctrl+B)",shortcut:"Ctrl+B",action:()=>this.insertText("**","**","**")},{id:"italic",label:"I",tooltip:"기울임 (Ctrl+I)",shortcut:"Ctrl+I",action:()=>this.insertText("*","*","*")},{id:"strikethrough",label:"S",tooltip:"취소선 (Ctrl+Shift+S)",shortcut:"Ctrl+Shift+S",action:()=>this.insertText("~~","~~","~~")},{id:"separator1",label:"|",separator:!0,action:()=>{}},{id:"heading1",label:"H1",tooltip:"제목 1",action:()=>this.insertText("# ","","")},{id:"heading2",label:"H2",tooltip:"제목 2",action:()=>this.insertText("## ","","")},{id:"heading3",label:"H3",tooltip:"제목 3",action:()=>this.insertText("### ","","")},{id:"separator2",label:"|",separator:!0,action:()=>{}},{id:"link",label:"",icon:"share-alt",tooltip:"링크 (Ctrl+K)",shortcut:"Ctrl+K",action:()=>this.insertText("[","](",")")},{id:"image",label:"",icon:"video",tooltip:"이미지",action:()=>this.insertText("![","](",")")},{id:"code",label:"",icon:"code",tooltip:"인라인 코드 (Ctrl+`)",shortcut:"Ctrl+`",action:()=>this.insertText("`","`","`")},{id:"codeBlock",label:"```",tooltip:"코드 블록",action:()=>this.insertText("\n```\n","","\n```\n")},{id:"separator3",label:"|",separator:!0,action:()=>{}},{id:"list",label:"•",tooltip:"순서 없는 목록",action:()=>this.insertText("- ","","")},{id:"orderedList",label:"1.",tooltip:"순서 있는 목록",action:()=>this.insertText("1. ","","")},{id:"quote",label:'"',tooltip:"인용구",action:()=>this.insertText("> ","","")},{id:"separator4",label:"|",separator:!0,action:()=>{}},{id:"table",label:"⊞",tooltip:"테이블",action:()=>this.insertText("\n| 헤더1 | 헤더2 | 헤더3 |\n|-------|-------|-------|\n| 셀1   | 셀2   | 셀3   |\n","","")},{id:"horizontalRule",label:"—",tooltip:"수평선",action:()=>this.insertText("\n---\n","","")}]}renderToolbar(){if(!this.toolbarEl)return;const i=this.getBool("show-toolbar",!0);this.toolbarEl.hidden=!i,this.toolbarEl.replaceChildren();const s=document.createElement("div");s.className=`${e}__mode-buttons`;[{mode:"edit",icon:"write",title:"편집 모드"},{mode:"preview",icon:"show",title:"미리보기 모드"},{mode:"split",icon:"hide",title:"분할 모드"},{mode:"code",icon:"code",title:"코드 보기"}].forEach(({mode:i,icon:a,title:l})=>{const n=document.createElement("button");n.type="button",n.className=`${e}__mode-button${this.currentMode===i?` ${e}__mode-button--active`:""}`,n.title=l,n.append(t(a,16)),n.addEventListener("click",()=>{this.currentMode=i,this.updateRootClasses(),this.renderMode(),this.renderToolbar()}),s.append(n)}),this.toolbarEl.append(s);const a=document.createElement("div");if(a.className=`${e}__toolbar-separator`,this.toolbarEl.append(a),"code"!==this.currentMode&&(this.getDefaultToolbarActions().forEach(i=>{const s=document.createElement("button");if(s.type="button",s.className=`${e}__toolbar-item`,s.disabled=this.getBool("disabled"),i.tooltip&&(s.title=i.tooltip),i.icon)s.append(t(i.icon,16));else if("bold"===i.id){const t=document.createElement("strong");t.textContent=i.label,s.append(t)}else if("italic"===i.id){const t=document.createElement("em");t.textContent=i.label,s.append(t)}else if("strikethrough"===i.id){const t=document.createElement("span");t.style.textDecoration="line-through",t.textContent=i.label,s.append(t)}else s.textContent=i.label;if(i.shortcut){const t=document.createElement("span");t.className=`${e}__toolbar-shortcut`,t.textContent=i.shortcut,s.append(t)}s.addEventListener("click",i.action),this.toolbarEl?.append(s)}),this.getBool("file-upload"))){const i=document.createElement("label");i.className=`${e}__file-upload`;const s=document.createElement("input");s.type="file",s.accept="image/*",s.hidden=!0,s.addEventListener("change",async()=>{const t=s.files?.[0];if(!t)return;const e=new CustomEvent("db-file-upload",{detail:{file:t},bubbles:!0,composed:!0,cancelable:!0});if(this.dispatchEvent(e),!e.defaultPrevented){const e=URL.createObjectURL(t);this.insertText(`![${t.name}](${e})`)}s.value=""}),i.append(s,t("upload",16)),this.toolbarEl.append(i)}}renderMode(){if(!this.editPanelEl||!this.previewPanelEl||!this.codePanelEl)return;const t="edit"===this.currentMode||"split"===this.currentMode,e="preview"===this.currentMode||"split"===this.currentMode,i="code"===this.currentMode;this.editPanelEl.hidden=!t,this.previewPanelEl.hidden=!e,this.codePanelEl.hidden=!i,this.updateRootClasses(),this.renderToolbar()}setupAutoSave(){if(this.autoSaveTimer&&window.clearInterval(this.autoSaveTimer),!this.getBool("auto-save"))return;const t=Number(this.getAttribute("auto-save-interval")||3e4);this.autoSaveTimer=window.setInterval(()=>{const t=this.getAttribute("value")||"";this.internalValue&&this.internalValue!==t&&(this.isSaving=!0,this.updateStatus(),this.dispatchEvent(new CustomEvent("db-save",{detail:{value:this.internalValue},bubbles:!0,composed:!0})),this.isSaving=!1,this.lastSaved=new Date,this.updateStatus())},t)}build(){this.toolbarEl=document.createElement("div"),this.toolbarEl.className=`${e}__toolbar`,this.contentEl=document.createElement("div"),this.contentEl.className=`${e}__content`,this.editPanelEl=document.createElement("div"),this.editPanelEl.className=`${e}__edit-panel`,this.textareaEl=document.createElement("textarea"),this.textareaEl.className=`${e}__textarea`,this.textareaEl.addEventListener("input",()=>{this.internalValue=this.textareaEl?.value||"",this.emitChange(),this.updatePreview(),this.updateCodeView(),this.updateCounts()}),this.textareaEl.addEventListener("focus",()=>{this.isFocused=!0,this.updateRootClasses(),this.dispatchEvent(new CustomEvent("db-focus",{bubbles:!0,composed:!0}))}),this.textareaEl.addEventListener("blur",()=>{this.isFocused=!1,this.updateRootClasses(),this.dispatchEvent(new CustomEvent("db-blur",{bubbles:!0,composed:!0}))}),this.textareaEl.addEventListener("keydown",this.handleKeyDown),this.editPanelEl.append(this.textareaEl),this.previewPanelEl=document.createElement("div"),this.previewPanelEl.className=`${e}__preview-panel`,this.previewEl=document.createElement("div"),this.previewEl.className=`${e}__preview`,this.previewPanelEl.append(this.previewEl),this.codePanelEl=document.createElement("div"),this.codePanelEl.className=`${e}__code-panel`,this.codeViewEl=document.createElement("pre"),this.codeViewEl.className=`${e}__code-view`;const t=document.createElement("code");this.codeViewEl.append(t),this.codePanelEl.append(this.codeViewEl),this.contentEl.append(this.editPanelEl,this.previewPanelEl,this.codePanelEl),this.statusEl=document.createElement("div"),this.statusEl.className=`${e}__status`,this.wordCountEl=document.createElement("span"),this.wordCountEl.className=`${e}__word-count`,this.lineCountEl=document.createElement("span"),this.lineCountEl.className=`${e}__line-count`,this.lastSavedEl=document.createElement("span"),this.lastSavedEl.className=`${e}__last-saved`,this.savingEl=document.createElement("span"),this.savingEl.className=`${e}__saving`,this.savingEl.textContent="저장 중...",this.statusEl.append(this.wordCountEl,this.lineCountEl,this.lastSavedEl,this.savingEl),this.append(this.toolbarEl,this.contentEl,this.statusEl)}}customElements.get("db-markdown-editor")||customElements.define("db-markdown-editor",DbMarkdownEditor);export{DbMarkdownEditor};