@designbasekorea/ui-wc 0.2.1 → 0.3.0

package/dist/esm/components/db-ad-banner.d.ts

@@ -0,0 +1,66 @@
+declare class DbAdBanner extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private visible;
+    private progress;
+    private autoCloseTimer?;
+    private rootEl?;
+    private gradientEl?;
+    private animBgEl?;
+    private animBgInner?;
+    private gridBgEl?;
+    private gridBgInner?;
+    private contentEl?;
+    private mainEl?;
+    private textEl?;
+    private closeBtn?;
+    private imageEl?;
+    private linkEl?;
+    private iconEl?;
+    private labelEl?;
+    private badgeEl?;
+    private titleEl?;
+    private subtitleEl?;
+    private countdownWrapEl?;
+    private countdownEl?;
+    private actionsEl?;
+    private ctaEl?;
+    private progressEl?;
+    private progressBarEl?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private getBool;
+    private getType;
+    private getVariant;
+    private getSize;
+    private ctaButtonSize;
+    private build;
+    private handleClose;
+    private stopAutoClose;
+    private startAutoClose;
+    private getBackground;
+    private ensureAnimBg;
+    private ensureGridBg;
+    /** 이전 배경 모드의 백드롭 엘리먼트를 정리한다. */
+    private clearBackdrop;
+    private renderBackground;
+    /** 장식 아이콘은 card 타입에서만 사용한다. */
+    private syncIcon;
+    /** floating 타입에서만 텍스트 상단에 배지 칩을 노출한다. */
+    private syncBadge;
+    /** floating 타입에서 배너 이미지를 콘텐츠 상단(패딩 밖)에 렌더한다. */
+    private syncImage;
+    /** topbar 타입에서 href 가 있으면 전체를 덮는 링크 오버레이를 렌더한다. */
+    private syncLink;
+    /** show-countdown + end-date 가 있을 때만 카운트다운을 마운트한다. */
+    private syncCountdown;
+    private updateUI;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ad-banner': DbAdBanner;
+    }
+}
+
+export { DbAdBanner };

package/dist/esm/components/db-ad-banner.js

@@ -0,0 +1 @@
+import{createDbIcon as t}from"./db-icons.js";const e="designbase-wc-ad-banner",i={hero:"지금 바로 시작하세요",topbar:"🎉 신규 가입 시 10,000원 적립금 증정!",card:"프리미엄 멤버십",floating:"오늘만 특가!"},s={hero:"최대 50% 할인된 가격으로 프리미엄 서비스를 경험해보세요. 기간 한정 특별 혜택!",topbar:"오늘 하루만 특별 혜택",card:"무제한 서비스 이용권을 특별가에 만나보세요",floating:"장바구니에 담긴 상품 추가 20% 할인"},n={hero:"자세히 보기",topbar:"지금 가입하기",card:"알아보기",floating:"할인받기"},r="star-filled",a={primary:"primary",secondary:"secondary",success:"success",warning:"warning",error:"error"};class DbAdBanner extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.visible=!0,this.progress=100}static get observedAttributes(){return["type","variant","size","title","subtitle","cta-text","image","image-alt","href","target","auto-close","close-delay","background","animation-type","grid-type","use-random-gradient","gradient-scheme","gradient-tone","gradient-animated","countdown-end-date","show-countdown","open"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}disconnectedCallback(){this.stopAutoClose()}attributeChangedCallback(t){this.built&&("open"===t&&(this.visible="false"!==this.getAttribute("open")),this.updateUI())}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const i=this.getAttribute(t);return""===i||"true"===i}getType(){const t=this.getAttribute("type")||"hero";return["hero","topbar","card","floating"].includes(t)?t:"hero"}getVariant(){const t=this.getAttribute("variant")||"primary";return["primary","secondary","success","warning","error"].includes(t)?t:"primary"}getSize(){const t=this.getAttribute("size")||"m";return["s","m","l"].includes(t)?t:"m"}ctaButtonSize(t,e){return"card"===t?"s":"floating"===t?"s"===e?"s":"m":e}build(){this.rootEl=document.createElement("div"),this.contentEl=document.createElement("div"),this.contentEl.className=`${e}__content`,this.closeBtn=document.createElement("button"),this.closeBtn.type="button",this.closeBtn.className=`${e}__close`,this.closeBtn.setAttribute("aria-label","닫기"),this.closeBtn.append(t("close",16)),this.closeBtn.addEventListener("click",t=>{t.stopPropagation(),this.handleClose()}),this.imageEl=document.createElement("img"),this.imageEl.className=`${e}__image`,this.imageEl.loading="lazy";const i=document.createElement("div");i.className=`${e}__main`,this.mainEl=i,this.iconEl=document.createElement("div"),this.iconEl.className=`${e}__icon`,this.labelEl=document.createElement("span"),this.labelEl.className=`${e}__label`,this.labelEl.textContent="특별 이벤트",this.badgeEl=document.createElement("span"),this.badgeEl.className=`${e}__badge`,this.badgeEl.textContent="HOT DEAL",this.titleEl=document.createElement("h2"),this.titleEl.className=`${e}__title`,this.subtitleEl=document.createElement("p"),this.subtitleEl.className=`${e}__subtitle`;const s=document.createElement("div");s.className=`${e}__text`,this.textEl=s,this.countdownWrapEl=document.createElement("div"),this.countdownWrapEl.className=`${e}__countdown`,s.append(this.titleEl,this.subtitleEl),this.actionsEl=document.createElement("div"),this.actionsEl.className=`${e}__actions`,this.ctaEl=document.createElement("db-button"),this.ctaEl.className=`${e}__cta`,this.ctaEl.setAttribute("variant","primary"),this.ctaEl.setAttribute("end-icon","arrow-right"),this.ctaEl.addEventListener("click",t=>{t.stopPropagation(),this.dispatchEvent(new CustomEvent("db-cta-click",{bubbles:!0,composed:!0}))}),this.actionsEl.append(this.ctaEl),i.append(s,this.actionsEl),this.progressEl=document.createElement("div"),this.progressEl.className=`${e}__progress`,this.progressBarEl=document.createElement("div"),this.progressBarEl.className=`${e}__progress-bar`,this.progressEl.append(this.progressBarEl),this.contentEl.append(this.closeBtn,i,this.progressEl),this.rootEl.append(this.contentEl),this.append(this.rootEl),this.contentEl.addEventListener("click",t=>{"topbar"===this.getType()&&(t.target?.closest(`.${e}__close`)||this.dispatchEvent(new CustomEvent("db-cta-click",{bubbles:!0,composed:!0})))})}handleClose(){this.visible=!1,this.style.display="none",this.setAttribute("open","false"),this.stopAutoClose(),this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}stopAutoClose(){this.autoCloseTimer&&(window.clearInterval(this.autoCloseTimer),this.autoCloseTimer=void 0)}startAutoClose(t){this.stopAutoClose(),this.progress=100,this.autoCloseTimer=window.setInterval(()=>{this.progress-=100/(t/100),this.progressBarEl&&(this.progressBarEl.style.width=`${Math.max(this.progress,0)}%`),this.progress<=0&&this.handleClose()},100)}getBackground(){const t=this.getAttribute("background");return t&&["solid","gradient","animation","grid"].includes(t)?t:this.getBool("use-random-gradient")?"gradient":"solid"}ensureAnimBg(){if(!this.animBgEl){const t=document.createElement("div");t.className=`${e}__backdrop`;const i=document.createElement("db-animation-background");i.className=`${e}__anim-bg`,i.setAttribute("width","100%"),i.setAttribute("height","100%"),t.append(i),this.animBgEl=t,this.animBgInner=i}return this.animBgEl}ensureGridBg(){if(!this.gridBgEl){const t=document.createElement("div");t.className=`${e}__backdrop`;const i=document.createElement("db-grid-background");i.className=`${e}__grid-bg`,i.setAttribute("width","100%"),i.setAttribute("height","100%"),t.append(i),this.gridBgEl=t,this.gridBgInner=i}return this.gridBgEl}clearBackdrop(t){"gradient"!==t&&this.gradientEl&&(this.gradientEl.remove(),this.gradientEl=void 0),"animation"!==t&&this.animBgEl&&(this.animBgEl.remove(),this.animBgEl=void 0,this.animBgInner=void 0),"grid"!==t&&this.gridBgEl&&(this.gridBgEl.remove(),this.gridBgEl=void 0,this.gridBgInner=void 0)}renderBackground(t,i){if(!this.rootEl||!this.contentEl)return;if(this.clearBackdrop(t),"gradient"===t){this.gradientEl||(this.gradientEl=document.createElement("db-random-gradient"),this.gradientEl.className=`${e}__gradient-bg`,this.gradientEl.setAttribute("height","100%"),this.gradientEl.setAttribute("width","100%"));const t=this.getAttribute("gradient-tone")||"vivid",s=!this.hasAttribute("gradient-animated")||"false"!==this.getAttribute("gradient-animated");return this.gradientEl.setAttribute("scheme",this.getAttribute("gradient-scheme")||a[i]),this.gradientEl.setAttribute("tone",t),this.gradientEl.setAttribute("animated",s?"true":"false"),this.gradientEl.parentElement!==this.rootEl&&this.rootEl.replaceChildren(this.gradientEl),void(this.contentEl.parentElement!==this.gradientEl&&this.gradientEl.append(this.contentEl))}const s=[];if("animation"===t){const t=this.ensureAnimBg();this.animBgInner?.setAttribute("type",this.getAttribute("animation-type")||"graphite"),this.animBgInner?.setAttribute("theme","dark"),s.push(t)}else if("grid"===t){const t=this.ensureGridBg();this.gridBgInner?.setAttribute("type",this.getAttribute("grid-type")||"lines"),this.gridBgInner?.setAttribute("color","var(--db-text-inverse-primary)"),this.gridBgInner?.setAttribute("opacity","0.18"),this.gridBgInner?.setAttribute("fade","vignette"),this.gridBgInner?.setAttribute("animated",""),s.push(t)}const n=[...s,this.contentEl],r=Array.from(this.rootEl.children);r.length===n.length&&n.every((t,e)=>r[e]===t)||this.rootEl.replaceChildren(...n)}syncIcon(e){this.mainEl&&this.textEl&&this.iconEl&&("card"===e?(this.iconEl.replaceChildren(t(r,32)),this.iconEl.parentElement!==this.mainEl&&this.mainEl.insertBefore(this.iconEl,this.textEl)):this.iconEl.remove())}syncBadge(t){this.textEl&&this.badgeEl&&("floating"===t?this.badgeEl.parentElement!==this.textEl&&this.textEl.insertBefore(this.badgeEl,this.textEl.firstChild):this.badgeEl.remove())}syncImage(t,e){this.contentEl&&this.imageEl&&this.mainEl&&("floating"===t&&e?(this.imageEl.src=e,this.imageEl.alt=this.getAttribute("image-alt")||"",this.imageEl.parentElement!==this.contentEl&&this.contentEl.insertBefore(this.imageEl,this.mainEl)):this.imageEl.remove())}syncLink(t,i){if(!this.contentEl)return;if("topbar"!==t||!i)return void this.linkEl?.remove();this.linkEl||(this.linkEl=document.createElement("a"),this.linkEl.className=`${e}__link`),this.linkEl.setAttribute("href",i);const s=this.getAttribute("target");s?this.linkEl.setAttribute("target",s):this.linkEl.removeAttribute("target"),this.linkEl.setAttribute("aria-label",this.titleEl?.textContent||"배너 링크"),this.linkEl.parentElement!==this.contentEl&&this.contentEl.append(this.linkEl)}syncCountdown(t,e){this.textEl&&this.countdownWrapEl&&(t&&e?(this.countdownEl||(this.countdownEl=document.createElement("db-countdown"),this.countdownEl.setAttribute("size","s"),this.countdownEl.setAttribute("variant","compact"),this.countdownEl.setAttribute("show-labels","false"),this.countdownWrapEl.replaceChildren(this.countdownEl)),this.countdownEl.setAttribute("end-date",e),this.countdownWrapEl.parentElement!==this.textEl&&this.textEl.append(this.countdownWrapEl)):this.countdownWrapEl.remove())}updateUI(){if(!this.visible||"false"===this.getAttribute("open"))return void(this.style.display="none");this.style.display="block";const t=this.getType(),r=this.getVariant(),a=this.getSize(),l=this.getAttribute("title")||i[t],o=this.getAttribute("subtitle")||s[t],h=this.getAttribute("cta-text")||n[t],c=this.getBool("auto-close"),d=Math.max(Number(this.getAttribute("close-delay")||5e3),1e3),g=this.getBackground(),E=this.getAttribute("gradient-tone")||"vivid",u=this.getBool("show-countdown"),m=this.getAttribute("countdown-end-date");this.rootEl&&(this.rootEl.className=[e,`${e}--type-${t}`,`${e}--variant-${r}`,`${e}--size-${a}`,`${e}--bg-${g}`,c&&`${e}--auto-close`,"gradient"===g&&`${e}--with-gradient`,"gradient"===g&&"light"===E&&`${e}--gradient-light`].filter(Boolean).join(" ")),this.renderBackground(g,r),this.syncIcon(t),this.syncBadge(t),this.syncImage(t,this.getAttribute("image")),this.syncLink(t,this.getAttribute("href")),this.titleEl&&(this.titleEl.textContent=l),this.subtitleEl&&(this.subtitleEl.textContent=o),this.syncCountdown(u,m),this.actionsEl&&(this.actionsEl.hidden="topbar"===t),this.ctaEl&&(this.ctaEl.textContent=h,this.ctaEl.setAttribute("size",this.ctaButtonSize(t,a)),"floating"===t?this.ctaEl.setAttribute("full-width",""):this.ctaEl.removeAttribute("full-width")),this.progressEl&&(this.progressEl.hidden=!c),this.progressBarEl&&c&&(this.progressBarEl.style.width=`${this.progress}%`),this.stopAutoClose(),c&&this.startAutoClose(d)}}customElements.get("db-ad-banner")||customElements.define("db-ad-banner",DbAdBanner);export{DbAdBanner};

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

@@ -0,0 +1,24 @@
+import './db-button.js';
+
+interface DbAlertAction {
+    label: string;
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'danger';
+    size?: 's' | 'm' | 'l';
+    disabled?: boolean;
+}
+declare class DbAlert extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private getIconName;
+    private parseActionButtons;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-alert': DbAlert;
+    }
+}
+
+export { DbAlert };
+export type { DbAlertAction };

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

@@ -0,0 +1 @@
+import"./db-button.js";import{createDbIcon as t}from"./db-icons.js";const e="designbase-wc-alert";class DbAlert extends HTMLElement{static get observedAttributes(){return["title","message","variant","size","show-icon","closable","action-label","action-variant","action-buttons"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}getIconName(t){return"success"===t?"circle-checked":"warning"===t?"warning-filled":"danger"===t?"error-filled":"info-filled"}parseActionButtons(){const t=this.getAttribute("action-buttons");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}render(){const n=this.getAttribute("variant")||"default",s=this.getAttribute("size")||"m",a="false"!==this.getAttribute("show-icon"),i="false"!==this.getAttribute("closable"),r=this.getAttribute("title")?.trim()||"",o=this.getAttribute("message")?.trim()||"",c=this.getAttribute("action-label"),l=this.getAttribute("action-variant")||"tertiary",d=this.parseActionButtons(),b=Boolean(o),m=Boolean(r),u=m&&!b||!m&&b,h=d.length>0?d:c?[{label:c,variant:l}]:[];this.className=[e,`${e}--${n}`,`${e}--${s}`,a&&`${e}--with-icon`,i&&`${e}--closable`,u&&`${e}--text-single`,h.length>0&&`${e}--has-actions`].filter(Boolean).join(" "),this.setAttribute("role","alert"),this.setAttribute("aria-live","polite"),this.querySelector(`.${e}__content`)?.remove(),this.querySelector(`.${e}__actions`)?.remove(),Array.from(this.childNodes).forEach(t=>{t.nodeType===Node.TEXT_NODE&&t.remove()});const p=document.createElement("div");if(p.className=`${e}__content`,a){const a=document.createElement("div");a.className=`${e}__icon`,a.append(t(this.getIconName(n),"s"===s?16:"l"===s?24:20)),p.append(a)}const g=document.createElement("div");if(g.className=`${e}__body`,m){const t=document.createElement("div");t.className=`${e}__title`,t.textContent=r,g.append(t)}if(b){const t=document.createElement("div");t.className=`${e}__message`,t.textContent=o,g.append(t)}if(p.append(g),h.length>0){const t=document.createElement("div");t.className=`${e}__actions`;const n=document.createElement("div");n.className=`${e}__action-buttons`,h.forEach((t,e)=>{const a=document.createElement("db-button");a.setAttribute("variant",t.variant||"tertiary"),a.setAttribute("size",t.size||s),a.textContent=t.label,t.disabled&&a.setAttribute("disabled",""),a.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-action",{bubbles:!0,composed:!0,detail:{index:e,label:t.label}}))}),n.append(a)}),t.append(n),p.append(t)}if(i){const n=document.createElement("button");n.type="button",n.className=`${e}__close`,n.setAttribute("aria-label","알림 닫기"),n.append(t("close",20)),n.addEventListener("click",()=>{this.hidden=!0,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}),p.append(n)}this.replaceChildren(p)}}customElements.get("db-alert")||customElements.define("db-alert",DbAlert);export{DbAlert};

package/dist/esm/components/db-animation-background.d.ts

@@ -0,0 +1,41 @@
+declare class DbAnimationBackground extends HTMLElement {
+    private layersEl?;
+    private contentEl?;
+    private controlsRootEl?;
+    private panelEl?;
+    private panelOpen;
+    private layerHandle?;
+    private clickHandler?;
+    private mountedType?;
+    private controlInputs;
+    private syncingControls;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private getBool;
+    private getSizeStyle;
+    private getConfig;
+    private teardownLayers;
+    private remountLayers;
+    private canLiveUpdate;
+    private applyConfig;
+    private syncClickable;
+    private render;
+    private ensureControlsShell;
+    private syncControlsVisibility;
+    private syncPanelState;
+    private createIconButton;
+    private rebuildControlInputs;
+    private createControlField;
+    private commitControlValue;
+    private syncControlInputs;
+    private renderColorInputs;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-animation-background': DbAnimationBackground;
+    }
+}
+
+export { DbAnimationBackground };

package/dist/esm/components/db-animation-background.js

@@ -0,0 +1 @@
+import{parseAnimationBackgroundConfig as t,mountAnimationLayers as e,applyContainerStyles as s,syncLuminaOverlays as n,ANIMATION_BACKGROUND_CLASS as i}from"./animation-background/layers.js";import{getControlsForType as o,resetControlsToDefaults as l,getControlSliderBounds as r,controlSliderToAttr as a,writeControlAttribute as c,readControlValue as d,controlAttrToSlider as h}from"./animation-background/controls.js";import{isGraphitePresetId as u,getGraphitePreset as p}from"./animation-background/graphite-presets.js";import{createDbIcon as m}from"./db-icons.js";const b=i,g=["particles","stars","snow","flowers","confetti","mesh-flow","fluid","radiant","ethereal","graphite"],y=["mesh-flow","fluid","radiant","ethereal"];class DbAnimationBackground extends HTMLElement{constructor(){super(...arguments),this.panelOpen=!1,this.controlInputs=new Map,this.syncingControls=!1}static get observedAttributes(){return["type","theme","intensity","blur","speed","direction","colors","width","height","border-radius","opacity","blend-mode","particle-count","particle-size","star-count","star-size","wind","clickable","disabled","noise","show-vignette","preset","zoom","show-controls","shader-speed","shader-intensity","warp"]}connectedCallback(){this.style.display="block",this.render()}disconnectedCallback(){this.teardownLayers(),this.clickHandler&&(this.removeEventListener("click",this.clickHandler),this.clickHandler=void 0)}attributeChangedCallback(t,e,s){this.isConnected&&e!==s&&("show-controls"!==t?this.syncingControls||("type"===t&&this.getBool("show-controls",!1)&&this.rebuildControlInputs(),this.applyConfig(),this.getBool("show-controls",!1)&&this.syncControlInputs()):this.syncControlsVisibility())}getBool(t,e=!1){return this.hasAttribute(t)?"false"!==this.getAttribute(t):e}getSizeStyle(t){if(!t)return;const e=Number(t);return Number.isFinite(e)?`${e}px`:t}getConfig(){return t(this)}teardownLayers(){this.layerHandle?.destroy?.(),this.layerHandle=void 0,this.mountedType=void 0,this.layersEl&&this.layersEl.replaceChildren()}remountLayers(t){this.layersEl&&(this.teardownLayers(),this.layerHandle=e(this.layersEl,t),this.mountedType=t.type)}canLiveUpdate(t){return this.mountedType===t.type&&g.includes(t.type)&&"function"==typeof this.layerHandle?.update}applyConfig(){const t=this.getConfig();this.className=[b,`${b}--${t.type}`,t.clickable&&!t.disabled&&`${b}--clickable`,t.disabled&&`${b}--disabled`,this.getBool("show-controls",!1)&&`${b}--show-controls`].filter(Boolean).join(" "),s(this,t);const e=this.getSizeStyle(this.getAttribute("width")),i=this.getSizeStyle(this.getAttribute("height")),o=this.getSizeStyle(this.getAttribute("border-radius"));e&&(this.style.width=e),i&&(this.style.height=i),o&&(this.style.borderRadius=o),this.style.opacity="",this.layersEl&&(this.layersEl.style.opacity=String(t.opacity));const l=this.getAttribute("blend-mode");if(l&&(this.style.mixBlendMode=l),t.disabled)return this.teardownLayers(),void this.syncClickable(t);this.canLiveUpdate(t)?(this.layerHandle?.update?.(t),this.layersEl&&y.includes(t.type)&&n(this.layersEl,t.noise,t.showVignette)):this.remountLayers(t),this.syncClickable(t)}syncClickable(t){this.clickHandler&&(this.removeEventListener("click",this.clickHandler),this.clickHandler=void 0),t.clickable&&!t.disabled&&(this.clickHandler=()=>{this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))},this.addEventListener("click",this.clickHandler))}render(){if(!this.layersEl){this.layersEl=document.createElement("div"),this.layersEl.className=`${b}__layers`,Object.assign(this.layersEl.style,{position:"absolute",inset:"0",width:"100%",height:"100%",zIndex:"0"}),this.contentEl=document.createElement("div"),this.contentEl.className=`${b}__content`,Object.assign(this.contentEl.style,{position:"relative",zIndex:"10",width:"100%",height:"100%"});const t=document.createElement("slot");this.contentEl.appendChild(t),this.append(this.layersEl,this.contentEl)}this.ensureControlsShell(),this.applyConfig(),this.syncControlsVisibility()}ensureControlsShell(){if(this.controlsRootEl)return;const t=document.createElement("div");t.className=`${b}__controls-root`,t.hidden=!0;const e=this.createIconButton("settings","컨트롤 열기",()=>{this.panelOpen=!this.panelOpen,this.syncPanelState()});e.setAttribute("variant","secondary"),e.className=`${b}__controls-gear`;const s=document.createElement("div");s.className=`${b}__controls-panel`,s.setAttribute("role","dialog"),s.hidden=!0,s.addEventListener("click",t=>t.stopPropagation());const n=document.createElement("div");n.className=`${b}__controls-head`;const i=document.createElement("span");i.className=`${b}__controls-title`,i.append(m("settings",14),document.createTextNode(" Controls"));const r=this.createIconButton("refresh","기본값으로 초기화",()=>{const t=this.getConfig(),e=o(t.type);if(this.syncingControls=!0,l(this,e),"graphite"===t.type){const t=p("graphite");this.setAttribute("zoom",String(t.scale)),this.setAttribute("colors",JSON.stringify(t.colors))}this.syncingControls=!1,this.applyConfig(),this.syncControlInputs()});r.className=`${b}__controls-icon-btn`,n.append(i,r),s.append(n),t.append(e,s),this.appendChild(t),this.controlsRootEl=t,this.panelEl=s}syncControlsVisibility(){if(!this.controlsRootEl)return;const t=this.getBool("show-controls",!1);this.controlsRootEl.hidden=!t,t?this.rebuildControlInputs():(this.panelOpen=!1,this.syncPanelState())}syncPanelState(){if(!this.controlsRootEl||!this.panelEl)return;const t=this.controlsRootEl.querySelector(`.${b}__controls-gear`);t&&(t.dataset.open=this.panelOpen?"true":"false",t.setAttribute("aria-expanded",this.panelOpen?"true":"false")),this.panelEl.hidden=!this.panelOpen}createIconButton(t,e,s){const n=document.createElement("db-button");return n.setAttribute("variant","tertiary"),n.setAttribute("size","s"),n.setAttribute("icon-only",""),n.setAttribute("start-icon",t),n.setAttribute("aria-label",e),n.addEventListener("click",t=>{t.stopPropagation(),s()}),n}rebuildControlInputs(){if(!this.panelEl)return;this.panelEl.querySelectorAll(`.${b}__controls-field`).forEach(t=>t.remove()),this.controlInputs.clear();const t=this.getConfig(),e=o(t.type),s=this.panelEl.querySelector(`.${b}__controls-title`);s&&(s.lastChild?.remove(),s.append(document.createTextNode(` ${t.type}`))),e.forEach(t=>{const e=this.createControlField(t);this.panelEl?.appendChild(e)}),this.syncControlInputs()}createControlField(t){const e=document.createElement("div");if(e.className=`${b}__controls-field`,e.dataset.attr=t.attr,"range"===t.kind){const s=r(t),n=document.createElement("db-range-slider");return n.className=`${b}__controls-range`,n.setAttribute("size","s"),n.setAttribute("full-width",""),n.setAttribute("show-label",""),n.setAttribute("label",t.label),n.setAttribute("show-value",""),n.setAttribute("value-position","top"),n.setAttribute("show-thumb-tooltip",""),n.setAttribute("min",String(s.min)),n.setAttribute("max",String(s.max)),n.setAttribute("step",String(s.step)),null!=s.fixed&&n.setAttribute("value-fixed",String(s.fixed)),n.addEventListener("db-change",e=>{const s=e.detail;null!=s.value&&this.commitControlValue(t,a(t,s.value))}),e.appendChild(n),this.controlInputs.set(t.attr,n),e}if("select"===t.kind){const s=document.createElement("div");s.className=`${b}__controls-label`,s.textContent=t.label;const n=t.options??[];if(n.length>4){const i=document.createElement("db-select");i.className=`${b}__controls-select`,i.setAttribute("size","s"),i.setAttribute("full-width",""),i.setAttribute("options",JSON.stringify(n.map(t=>({value:t,label:t})))),i.addEventListener("db-change",e=>{const s=e.detail;null!=s.value&&this.commitControlValue(t,s.value)}),e.append(s,i),this.controlInputs.set(t.attr,i)}else{const i=document.createElement("db-segment-control");i.className=`${b}__controls-seg`,i.setAttribute("size","s"),i.setAttribute("full-width",""),i.setAttribute("options",JSON.stringify(n.map(t=>({value:t,label:t})))),i.addEventListener("db-change",e=>{const s=e.detail;null!=s.value&&this.commitControlValue(t,s.value)}),e.append(s,i),this.controlInputs.set(t.attr,i)}return e}if("toggle"===t.kind){const s=document.createElement("div");s.className=`${b}__controls-toggle`;const n=document.createElement("span");n.textContent=t.label;const i=document.createElement("db-toggle");return i.setAttribute("size","s"),i.addEventListener("db-change",e=>{const s=e.detail;this.commitControlValue(t,Boolean(s.checked))}),s.append(n,i),e.appendChild(s),this.controlInputs.set(t.attr,i),e}const s=document.createElement("div");s.className=`${b}__controls-label`,s.textContent=t.label;const n=document.createElement("div");return n.className=`${b}__controls-colors`,e.append(s,n),this.controlInputs.set(t.attr,n),e}commitControlValue(t,e){if(this.syncingControls=!0,c(this,t,e),"preset"===t.attr&&"graphite"===this.getConfig().type&&"string"==typeof e&&u(e)){const t=p(e);this.setAttribute("zoom",String(t.scale)),this.setAttribute("colors",JSON.stringify(t.colors))}this.syncingControls=!1,this.applyConfig()}syncControlInputs(){o(this.getConfig().type).forEach(t=>{const e=d(this,t),s=this.controlInputs.get(t.attr);if(s)if("range"===t.kind&&function isRangeSlider(t){return"DB-RANGE-SLIDER"===t.tagName}(s)){const n=Number(e);s.setAttribute("value",String(h(t,n)))}else if("select"===t.kind)s.setAttribute("value",String(e));else if("toggle"===t.kind){Boolean(e)?s.setAttribute("checked",""):s.removeAttribute("checked")}else"colors"===t.kind&&this.renderColorInputs(s,t,e)})}renderColorInputs(t,e,s){const n=[...s];t.replaceChildren();const commitStructuralChange=s=>{this.commitControlValue(e,s),this.renderColorInputs(t,e,s)};if(n.forEach((s,i)=>{const o=document.createElement("div");o.className=`${b}__controls-color`;const l=document.createElement("db-color-picker");if(l.className=`${b}__controls-color-picker`,l.setAttribute("size","s"),l.setAttribute("full-width",""),l.setAttribute("show-alpha","false"),l.setAttribute("show-eyedropper","false"),l.setAttribute("value",s),l.addEventListener("db-change",t=>{const s=t.detail,o=s?.value;"string"==typeof o&&o&&(n[i]=o,this.commitControlValue(e,[...n]))}),o.appendChild(l),n.length>1){const t=this.createIconButton("trash","색상 제거",()=>{commitStructuralChange(n.filter((t,e)=>e!==i))});t.className=`${b}__controls-color-remove`,o.appendChild(t)}t.appendChild(o)}),n.length<8){const e=this.createIconButton("plus","색상 추가",()=>{commitStructuralChange([...n,n[n.length-1]??"#ffffff"])});e.className=`${b}__controls-color-add`,t.appendChild(e)}}}customElements.get("db-animation-background")||customElements.define("db-animation-background",DbAnimationBackground);export{DbAnimationBackground};

package/dist/esm/components/db-animation-text.d.ts

@@ -0,0 +1,43 @@
+declare class DbAnimationText extends HTMLElement {
+    private ghostEl?;
+    private layerEl?;
+    private observer?;
+    private timers;
+    private displayText;
+    private isVisible;
+    private isAnimating;
+    private wordEls;
+    private scrollHandler?;
+    private rafId?;
+    private rotateToken;
+    private rotateObserver?;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private getText;
+    private getRotateTexts;
+    private getLongestText;
+    private getType;
+    private getTrigger;
+    private ensureStructure;
+    private clearTimers;
+    private syncFromAttributes;
+    private syncClasses;
+    private setupTrigger;
+    private setupTextRotate;
+    private setupScrollFill;
+    private teardownScrollFill;
+    private updateScrollFill;
+    private startAnimation;
+    private startTyping;
+    private startDecoding;
+    private renderLayer;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-animation-text': DbAnimationText;
+    }
+}
+
+export { DbAnimationText };

package/dist/esm/components/db-animation-text.js

@@ -0,0 +1 @@
+const t="designbase-wc-animation-text";class DbAnimationText extends HTMLElement{constructor(){super(...arguments),this.timers=[],this.displayText="",this.isVisible=!1,this.isAnimating=!1,this.wordEls=[],this.rotateToken=0}static get observedAttributes(){return["text","texts","interval","trigger","type","speed","repeat","delay","direction","size","color","custom-color","weight","align","gradient-colors","wave-colors","glow-color","clickable","disabled"]}connectedCallback(){this.style.display="inline-block",this.ensureStructure(),this.syncFromAttributes(),this.setupTrigger()}disconnectedCallback(){this.clearTimers(),this.observer?.disconnect(),this.teardownScrollFill(),this.rotateObserver?.disconnect()}attributeChangedCallback(){this.isConnected&&(this.syncFromAttributes(),this.setupTrigger())}getText(){return this.getAttribute("text")||this.textContent?.trim()||""}getRotateTexts(){const t=this.getAttribute("texts");if(t){const e=t.split(",").map(t=>t.trim()).filter(Boolean);if(e.length)return e}const e=this.getText();return e?[e]:[]}getLongestText(){return this.getRotateTexts().reduce((t,e)=>e.length>t.length?e:t,"")}getType(){const t=this.getAttribute("type")||"fade";return["typing","fade","slide","bounce","shake","glow","gradient","wave","flip","scale","decode","roll","reveal","scroll-fill","text-rotate"].includes(t)?t:"fade"}getTrigger(){const t=this.getAttribute("trigger")||"mount";return["mount","hover","click","in-view"].includes(t)?t:"mount"}ensureStructure(){this.ghostEl||(this.ghostEl=document.createElement("span"),this.ghostEl.setAttribute("aria-hidden","true"),this.ghostEl.style.visibility="hidden",this.ghostEl.style.pointerEvents="none",this.ghostEl.style.userSelect="none",this.layerEl=document.createElement("span"),this.layerEl.style.position="absolute",this.layerEl.style.top="0",this.layerEl.style.left="0",this.append(this.ghostEl,this.layerEl),this.addEventListener("mouseenter",()=>{"hover"!==this.getTrigger()||this.hasAttribute("disabled")||"roll"!==this.getType()&&(this.isVisible=!0,this.startAnimation(),this.syncClasses())}),this.addEventListener("mouseleave",()=>{if("hover"!==this.getTrigger())return;if("roll"===this.getType())return;this.isVisible=!1,this.isAnimating=!1,this.clearTimers();const t=this.getType();"typing"!==t&&"decode"!==t||(this.displayText=this.getText()),this.renderLayer(),this.syncClasses()}),this.addEventListener("click",()=>{if(!this.hasAttribute("disabled")){if("click"===this.getTrigger()){if(this.isVisible=!this.isVisible,this.isVisible)this.startAnimation();else{this.isAnimating=!1,this.clearTimers();const t=this.getType();"typing"!==t&&"decode"!==t||(this.displayText=this.getText()),this.renderLayer()}this.syncClasses()}this.hasAttribute("clickable")&&this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))}}))}clearTimers(){this.timers.forEach(t=>window.clearInterval(t)),this.timers.forEach(t=>window.clearTimeout(t)),this.timers=[]}syncFromAttributes(){const e=this.getText(),i=this.getType(),s=this.getTrigger(),r=Number(this.getAttribute("speed")||1e3),n=Number(this.getAttribute("repeat")||1),l=this.getAttribute("custom-color"),o=(this.getAttribute("gradient-colors")||"#667eea,#764ba2").split(","),a=(this.getAttribute("wave-colors")||"#ff6b6b,#4ecdc4,#45b7d1,#96ceb4,#feca57").split(","),h=this.getAttribute("glow-color")||"#667eea";this.className=[t,"typing"!==i&&`${t}--${i}`,`${t}--${this.getAttribute("size")||"m"}`,`${t}--${this.getAttribute("color")||"primary"}`,`${t}--${this.getAttribute("weight")||"normal"}`,`${t}--${this.getAttribute("align")||"left"}`,`${t}--${this.getAttribute("direction")||"left"}`,this.isVisible&&`${t}--visible`,this.isAnimating&&`${t}--animating`,(this.hasAttribute("clickable")||"click"===s)&&`${t}--clickable`,this.hasAttribute("disabled")&&`${t}--disabled`].filter(Boolean).join(" "),this.style.setProperty("--db-animation-speed",`${Number.isFinite(r)?r:1e3}ms`),this.style.setProperty("--db-animation-iteration-count",0===n?"infinite":String(n)),l&&this.style.setProperty("--db-text-custom",l),this.style.setProperty("--db-wave-colors",a.join(", ")),this.style.setProperty("--db-glow-color",h),this.style.removeProperty("background"),this.style.removeProperty("background-size"),this.style.removeProperty("-webkit-background-clip"),this.style.removeProperty("-webkit-text-fill-color"),this.style.removeProperty("background-clip"),this.layerEl&&("gradient"===i&&o.length>=2?this.layerEl.style.backgroundImage=`linear-gradient(45deg, ${o.join(", ")})`:this.layerEl.style.removeProperty("background-image")),"typing"!==i&&"decode"!==i||"mount"!==s||this.isAnimating?this.isAnimating||(this.displayText=e):this.displayText="";const c="typing"===i||"decode"===i||"roll"===i||"text-rotate"===i,d="roll"===i||"text-rotate"===i?"nowrap":c?"pre-wrap":"";this.ghostEl&&(c?(this.ghostEl.textContent="text-rotate"===i?this.getLongestText():e,this.ghostEl.style.display="inline-block",this.ghostEl.style.whiteSpace=d,this.ghostEl.style.paddingRight="typing"===i?"0.25em":""):(this.ghostEl.textContent="",this.ghostEl.style.display="none")),this.layerEl&&(this.layerEl.className=[`${t}__layer`,"typing"===i&&`${t}--typing`,this.isAnimating&&"typing"===i&&`${t}--animating`].filter(Boolean).join(" "),c?(this.layerEl.style.position="absolute",this.layerEl.style.top="0",this.layerEl.style.left="0",this.layerEl.style.width="100%",this.layerEl.style.height="100%",this.layerEl.style.whiteSpace=d):(this.layerEl.style.position="static",this.layerEl.style.removeProperty("top"),this.layerEl.style.removeProperty("left"),this.layerEl.style.width="auto",this.layerEl.style.height="auto",this.layerEl.style.whiteSpace="")),this.renderLayer()}syncClasses(){this.classList.toggle(`${t}--visible`,this.isVisible),this.classList.toggle(`${t}--animating`,this.isAnimating)}setupTrigger(){this.clearTimers(),this.observer?.disconnect(),this.teardownScrollFill(),this.rotateObserver?.disconnect(),this.rotateObserver=void 0,this.rotateToken++;const t=this.getTrigger(),e=Number(this.getAttribute("delay")||0);if("scroll-fill"!==this.getType())if("text-rotate"!==this.getType()){if("mount"===t){const t=window.setTimeout(()=>{this.isVisible=!0,this.syncClasses(),this.startAnimation()},e);return void this.timers.push(t)}"in-view"===t&&(this.observer=new IntersectionObserver(t=>{t[0]?.isIntersecting&&(window.setTimeout(()=>{this.isVisible=!0,this.syncClasses(),this.startAnimation()},e),this.observer?.disconnect())}),this.observer.observe(this))}else this.setupTextRotate();else this.setupScrollFill()}setupTextRotate(){if(this.getRotateTexts().length<=1)return;const e=++this.rotateToken,start=()=>{if(e!==this.rotateToken||!this.isConnected||"text-rotate"!==this.getType())return;const i=this.layerEl?.querySelector(`.${t}__rotate-track`);if(!i||!i.firstElementChild)return;const s=Array.from(i.children),r=Number(this.getAttribute("speed")||500),n=Math.max(r+200,Number(this.getAttribute("interval")||2e3));let l=0;const apply=t=>{const e=s[0].getBoundingClientRect().height;if(!e)return;const n="cubic-bezier(0.22, 1, 0.36, 1)";var o;i.style.transition=t?`transform ${r}ms ${n}`:"none",i.style.transform=`translateY(-${l*e}px)`,this.style.transition=t?`width ${r}ms ${n}`:"none",this.style.width=`${o=l,s[o].getBoundingClientRect().width}px`};apply(!1);const o=window.setInterval(()=>{if(l+=1,apply(!0),l===s.length-1){const t=window.setTimeout(()=>{l=0,apply(!1)},r);this.timers.push(t)}},n);this.timers.push(o),this.rotateObserver?.disconnect();let a=!0;const h=new ResizeObserver(()=>{a?a=!1:apply(!1)});h.observe(s[0]),this.rotateObserver=h};"undefined"!=typeof document&&document.fonts?document.fonts.ready.then(()=>window.requestAnimationFrame(start)):window.requestAnimationFrame(start)}setupScrollFill(){this.scrollHandler=()=>{null==this.rafId&&(this.rafId=window.requestAnimationFrame(()=>{this.rafId=void 0,this.updateScrollFill()}))},window.addEventListener("scroll",this.scrollHandler,{passive:!0}),window.addEventListener("resize",this.scrollHandler,{passive:!0}),this.updateScrollFill()}teardownScrollFill(){this.scrollHandler&&(window.removeEventListener("scroll",this.scrollHandler),window.removeEventListener("resize",this.scrollHandler),this.scrollHandler=void 0),null!=this.rafId&&(window.cancelAnimationFrame(this.rafId),this.rafId=void 0)}updateScrollFill(){if("scroll-fill"!==this.getType()||0===this.wordEls.length)return;const clamp=t=>Math.max(0,Math.min(1,t)),t=this.getBoundingClientRect(),e=window.innerHeight||document.documentElement.clientHeight,i=.85*e,s=.35*e,r=clamp((i-t.top)/(i-s||1)),n=this.wordEls.length;this.wordEls.forEach((t,e)=>{const i=clamp((r*(n+4)-e)/4);t.style.opacity=String(.18+(1-.18)*i)})}startAnimation(){const t=this.getType(),e=this.getText();if(this.isAnimating=!0,this.syncClasses(),this.syncFromAttributes(),"typing"===t)return void this.startTyping(0);if("decode"===t)return void this.startDecoding(0);if("reveal"===t||"scroll-fill"===t||"roll"===t)return this.displayText=e,"roll"!==t&&this.renderLayer(),this.isAnimating=!1,void this.syncClasses();this.displayText=e,this.renderLayer();const i=Number(this.getAttribute("speed")||1e3),s=window.setTimeout(()=>{this.isAnimating=!1,this.syncClasses(),this.syncFromAttributes()},i);this.timers.push(s)}startTyping(t){const e=this.getText(),i=Number(this.getAttribute("speed")||1e3),s=Number(this.getAttribute("repeat")||1);this.displayText="",this.renderLayer();let r=0;const n=window.setInterval(()=>{if(r>=e.length)if(window.clearInterval(n),0===s||t<s-1){const e=window.setTimeout(()=>this.startTyping(t+1),500);this.timers.push(e)}else this.isAnimating=!1,this.syncClasses();else this.displayText=e.slice(0,r+1),this.renderLayer(),r+=1},Math.max(16,i/Math.max(e.length,1)));this.timers.push(n)}startDecoding(t){const e=this.getText(),i=Number(this.getAttribute("repeat")||1),s="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+";let r=0;const n=window.setInterval(()=>{if(this.displayText=e.split("").map((t,i)=>i<r?e[i]:s[Math.floor(74*Math.random())]||t).join(""),this.renderLayer(),r>=e.length)if(window.clearInterval(n),this.displayText=e,this.renderLayer(),0===i||t<i-1){const e=window.setTimeout(()=>this.startDecoding(t+1),500);this.timers.push(e)}else this.isAnimating=!1,this.syncClasses();r+=1/3},30);this.timers.push(n)}renderLayer(){if(!this.layerEl)return;const e=this.getType(),i=this.getText(),s=this.isVisible||this.isAnimating;if("reveal"===e||"scroll-fill"===e){this.wordEls=[];const s=document.createDocumentFragment(),r=i.split(/(\s+)/);let n=0;for(const i of r){if(""===i)continue;if(/^\s+$/.test(i)){s.appendChild(document.createTextNode(i));continue}const r=document.createElement("span");r.className=`${t}__word`,r.textContent=i,"reveal"===e&&(r.style.animationDelay=.06*n+"s"),this.wordEls.push(r),s.appendChild(r),n+=1}return this.layerEl.replaceChildren(s),void("scroll-fill"===e&&this.updateScrollFill())}if("text-rotate"===e){const e=this.getRotateTexts(),s=e.length?e:[i],r=document.createElement("span");r.className=`${t}__rotate-track`;const build=e=>{const i=document.createElement("span");return i.className=`${t}__rotate-item`,i.textContent=e,i};return s.forEach(t=>r.appendChild(build(t))),s.length>1&&r.appendChild(build(s[0])),void this.layerEl.replaceChildren(r)}if("roll"===e){const e=document.createElement("span");e.className=`${t}__roll-track`;const s=document.createElement("span");s.className=`${t}__roll-item`,s.textContent=i;const r=s.cloneNode(!0);return e.append(s,r),void this.layerEl.replaceChildren(e)}if("typing"!==e)"wave"!==e&&"shake"!==e||!s?this.layerEl.textContent=this.displayText||(s?i:""):this.layerEl.replaceChildren(...i.split("").map((t,e)=>{const i=document.createElement("span");return i.style.animationDelay=.05*e+"s",i.style.display="inline-block",i.textContent=" "===t?" ":t,i}));else if(this.layerEl.textContent=this.displayText,this.isAnimating){const e=document.createElement("span");e.className=`${t}__caret`,e.setAttribute("aria-hidden","true"),this.layerEl.appendChild(e)}}}customElements.get("db-animation-text")||customElements.define("db-animation-text",DbAnimationText);export{DbAnimationText};

package/dist/esm/components/db-app-badge.d.ts

@@ -0,0 +1,20 @@
+declare class DbAppBadge extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private labelEl?;
+    private storeEl?;
+    private iconWrapEl?;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private getStore;
+    private getIconSize;
+    private build;
+    private updateUI;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-app-badge': DbAppBadge;
+    }
+}
+
+export { DbAppBadge };

package/dist/esm/components/db-app-badge.js

@@ -0,0 +1 @@
+import{createDbIcon as t}from"./db-icons.js";const e="designbase-wc-app-badge",s={"app-store":{label:"다운로드",storeName:"App Store"},"google-play":{label:"다운로드",storeName:"Google Play"}};class DbAppBadge extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["store","href","label","store-name","size","theme"]}connectedCallback(){this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}getStore(){return"google-play"===(this.getAttribute("store")||"app-store")?"google-play":"app-store"}getIconSize(){const t=this.getAttribute("size")||"m";return"s"===t?18:"l"===t?24:20}build(){this.iconWrapEl=document.createElement("span"),this.iconWrapEl.className=`${e}__icon`,this.iconWrapEl.setAttribute("aria-hidden","true");const t=document.createElement("span");t.className=`${e}__text`,this.labelEl=document.createElement("span"),this.labelEl.className=`${e}__label`,this.storeEl=document.createElement("span"),this.storeEl.className=`${e}__store`,t.append(this.labelEl,this.storeEl),this.append(this.iconWrapEl,t),this.addEventListener("click",t=>{this.getAttribute("href")||this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0,detail:{event:t}}))})}updateUI(){const i=this.getStore(),a=s[i],l=this.getAttribute("size")||"m",r=this.getAttribute("theme")||"dark",o=this.getAttribute("label")||a.label,n=this.getAttribute("store-name")||a.storeName,p=this.getAttribute("href");this.className=[e,`${e}--${l}`,`${e}--${r}`,`${e}--${i}`].join(" "),p?(this.setAttribute("role","link"),this.tabIndex=0,this.onclick=()=>window.open(p,"_blank","noopener,noreferrer")):(this.setAttribute("role","button"),this.tabIndex=0),this.iconWrapEl&&this.iconWrapEl.replaceChildren(t("app-store"===i?"apple":"play-store",this.getIconSize())),this.labelEl&&(this.labelEl.textContent=o),this.storeEl&&(this.storeEl.textContent=n)}}customElements.get("db-app-badge")||customElements.define("db-app-badge",DbAppBadge);export{DbAppBadge};

package/dist/esm/components/db-audio-player.d.ts

@@ -0,0 +1,82 @@
+declare class DbAudioPlayer extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private audioEl?;
+    private progressEl?;
+    private progressBarEl?;
+    private progressHandleEl?;
+    private playButtonEl?;
+    private volumeInputEl?;
+    private settingsMenuEl?;
+    private timeCurrentEl?;
+    private timeDurationEl?;
+    private titleEl?;
+    private artistEl?;
+    private albumEl?;
+    private albumImgEl?;
+    private albumPlaceholderEl?;
+    private playlistTracksEl?;
+    private isPlaying;
+    private isMuted;
+    private volume;
+    private currentTime;
+    private duration;
+    private showSettingsMenu;
+    private playbackRate;
+    private currentRepeatMode;
+    private isShuffle;
+    private isLoading;
+    private error;
+    private playlistIndex;
+    private shuffledPlaylist;
+    private boundKeyDown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private getBool;
+    private getPlaylist;
+    private getPlaybackRates;
+    private getIconSize;
+    private getCurrentTrack;
+    private refreshShuffledPlaylist;
+    private formatTime;
+    private syncFromAttributes;
+    private loadCurrentTrack;
+    private bindAudioEvents;
+    private handleEnded;
+    private setPlaylistIndex;
+    private togglePlay;
+    private toggleMute;
+    private toggleRepeatMode;
+    private toggleShuffle;
+    private handlePlaybackRateChange;
+    private handleKeyDown;
+    private iconButton;
+    private build;
+    private get leftControls();
+    private get rightControls();
+    private get controlsEl();
+    private get timeEl();
+    private get volumeWrap();
+    private get settingsEl();
+    private get playlistEl();
+    private get rateSelect();
+    private get volumePercent();
+    private get muteButton();
+    private updateTrackInfo;
+    private updateProgress;
+    private updateTime;
+    private updateVolumeUI;
+    private updateSettingsMenu;
+    private rebuildControlButtons;
+    private rebuildPlaylist;
+    private updatePlaylistActive;
+    private updateUI;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-audio-player': DbAudioPlayer;
+    }
+}
+
+export { DbAudioPlayer };

package/dist/esm/components/db-audio-player.js

@@ -0,0 +1 @@
+import{createDbIcon as t}from"./db-icons.js";const e="designbase-wc-audio-player";class DbAudioPlayer extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.isPlaying=!1,this.isMuted=!1,this.volume=1,this.currentTime=0,this.duration=0,this.showSettingsMenu=!1,this.playbackRate=1,this.currentRepeatMode="none",this.isShuffle=!1,this.isLoading=!1,this.error=null,this.playlistIndex=0,this.shuffledPlaylist=[],this.boundKeyDown=t=>this.handleKeyDown(t)}static get observedAttributes(){return["src","title","artist","album","album-art","size","variant","theme","auto-play","loop","muted","show-controls","enable-keyboard","show-progress","show-time","show-volume","show-settings","playlist","current-index","playback-rates","default-playback-rate","repeat-mode","shuffle"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build(),this.bindAudioEvents()),this.syncFromAttributes(),this.updateUI(),this.getBool("enable-keyboard",!0)&&document.addEventListener("keydown",this.boundKeyDown)}disconnectedCallback(){document.removeEventListener("keydown",this.boundKeyDown)}attributeChangedCallback(t){if(this.built){if("current-index"===t)return this.playlistIndex=Number(this.getAttribute("current-index")||0),void this.loadCurrentTrack();"repeat-mode"===t&&(this.currentRepeatMode=this.getAttribute("repeat-mode")||"none"),"shuffle"===t&&(this.isShuffle=this.getBool("shuffle"),this.refreshShuffledPlaylist()),"default-playback-rate"===t&&(this.playbackRate=Number(this.getAttribute("default-playback-rate")||1),this.audioEl&&(this.audioEl.playbackRate=this.playbackRate)),this.updateUI()}}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const s=this.getAttribute(t);return""===s||"true"===s}getPlaylist(){try{const t=this.getAttribute("playlist"),e=t?JSON.parse(t):[];return Array.isArray(e)?e:[]}catch{return[]}}getPlaybackRates(){try{const t=this.getAttribute("playback-rates"),e=t?JSON.parse(t):[.5,.75,1,1.25,1.5,2];return Array.isArray(e)&&e.length>0?e:[.5,.75,1,1.25,1.5,2]}catch{return[.5,.75,1,1.25,1.5,2]}}getIconSize(){const t=this.getAttribute("size")||"m";return"s"===t?16:"l"===t?24:"xl"===t?32:20}getCurrentTrack(){const t=this.getPlaylist();if(t.length>0){return t[this.isShuffle&&this.shuffledPlaylist.length>0?this.shuffledPlaylist[this.playlistIndex]??this.playlistIndex:this.playlistIndex]||t[0]}return{src:this.getAttribute("src")||"",title:this.getAttribute("title")||void 0,artist:this.getAttribute("artist")||void 0,album:this.getAttribute("album")||void 0,albumArt:this.getAttribute("album-art")||void 0}}refreshShuffledPlaylist(){const t=this.getPlaylist();if(t.length>0&&this.isShuffle){const e=Array.from({length:t.length},(t,e)=>e);this.shuffledPlaylist=[...e].sort(()=>Math.random()-.5)}else this.shuffledPlaylist=[]}formatTime(t){return`${Math.floor(t/60)}:${Math.floor(t%60).toString().padStart(2,"0")}`}syncFromAttributes(){this.playlistIndex=Number(this.getAttribute("current-index")||0),this.currentRepeatMode=this.getAttribute("repeat-mode")||"none",this.isShuffle=this.getBool("shuffle"),this.playbackRate=Number(this.getAttribute("default-playback-rate")||1),this.isMuted=this.getBool("muted"),this.volume=this.isMuted?0:1,this.refreshShuffledPlaylist(),this.loadCurrentTrack()}loadCurrentTrack(){if(!this.audioEl)return;const t=this.getCurrentTrack(),e=t?.src||this.getAttribute("src")||"";this.audioEl.src!==e&&e&&(this.audioEl.src=e,this.audioEl.load()),this.updateTrackInfo(),this.updatePlaylistActive()}bindAudioEvents(){const t=this.audioEl;t&&(t.addEventListener("play",()=>{this.isPlaying=!0,this.dispatchEvent(new CustomEvent("db-play",{bubbles:!0,composed:!0})),this.updateUI()}),t.addEventListener("pause",()=>{this.isPlaying=!1,this.dispatchEvent(new CustomEvent("db-pause",{bubbles:!0,composed:!0})),this.updateUI()}),t.addEventListener("timeupdate",()=>{this.currentTime=t.currentTime,this.duration=t.duration||0,this.dispatchEvent(new CustomEvent("db-time-update",{detail:{currentTime:this.currentTime,duration:this.duration},bubbles:!0,composed:!0})),this.updateProgress(),this.updateTime()}),t.addEventListener("volumechange",()=>{this.volume=t.volume,this.isMuted=t.muted,this.dispatchEvent(new CustomEvent("db-volume-change",{detail:{volume:this.volume},bubbles:!0,composed:!0})),this.updateVolumeUI()}),t.addEventListener("ended",()=>this.handleEnded()),t.addEventListener("error",()=>{this.error="오디오를 재생할 수 없습니다.",this.dispatchEvent(new CustomEvent("db-error",{detail:{error:this.error},bubbles:!0,composed:!0})),this.updateUI()}),t.addEventListener("loadstart",()=>{this.isLoading=!0,this.error=null,this.updateUI()}),t.addEventListener("canplay",()=>{this.isLoading=!1,this.updateUI()}))}handleEnded(){this.isPlaying=!1,this.dispatchEvent(new CustomEvent("db-ended",{bubbles:!0,composed:!0}));const t=this.getPlaylist();if(t.length>0){if("one"===this.currentRepeatMode)this.audioEl&&(this.audioEl.currentTime=0,this.audioEl.play());else if("all"===this.currentRepeatMode||this.playlistIndex<t.length-1){const e=this.playlistIndex+1;e<t.length?this.setPlaylistIndex(e):"all"===this.currentRepeatMode&&this.setPlaylistIndex(0)}}else this.getBool("loop")&&this.audioEl&&(this.audioEl.currentTime=0,this.audioEl.play());this.updateUI()}setPlaylistIndex(t){this.playlistIndex=t,this.dispatchEvent(new CustomEvent("db-playlist-change",{detail:{index:t},bubbles:!0,composed:!0})),this.loadCurrentTrack(),this.audioEl&&this.audioEl.play()}togglePlay(){this.audioEl&&(this.isPlaying?this.audioEl.pause():this.audioEl.play())}toggleMute(){this.audioEl&&(this.audioEl.muted=!this.isMuted)}toggleRepeatMode(){const t=["none","one","all"],e=t[(t.indexOf(this.currentRepeatMode)+1)%t.length];this.currentRepeatMode=e,this.dispatchEvent(new CustomEvent("db-repeat-mode-change",{detail:{mode:e},bubbles:!0,composed:!0})),this.updateUI()}toggleShuffle(){this.isShuffle=!this.isShuffle,this.refreshShuffledPlaylist(),this.dispatchEvent(new CustomEvent("db-shuffle-change",{detail:{shuffle:this.isShuffle},bubbles:!0,composed:!0})),this.updateUI()}handlePlaybackRateChange(t){this.audioEl&&(this.audioEl.playbackRate=t,this.playbackRate=t,this.dispatchEvent(new CustomEvent("db-playback-rate-change",{detail:{rate:t},bubbles:!0,composed:!0})))}handleKeyDown(t){if(this.audioEl&&this.getBool("enable-keyboard",!0))switch(t.code){case"Space":t.preventDefault(),this.togglePlay();break;case"ArrowLeft":t.preventDefault(),this.audioEl.currentTime=Math.max(0,this.currentTime-10);break;case"ArrowRight":t.preventDefault(),this.audioEl.currentTime=Math.min(this.duration,this.currentTime+10);break;case"ArrowUp":t.preventDefault(),this.audioEl.volume=Math.min(1,this.volume+.1),this.audioEl.muted=!1;break;case"ArrowDown":t.preventDefault(),this.audioEl.volume=Math.max(0,this.volume-.1),this.audioEl.muted=0===this.audioEl.volume;break;case"KeyM":t.preventDefault(),this.toggleMute();break;case"KeyR":t.preventDefault(),this.toggleRepeatMode();break;case"KeyS":t.preventDefault(),this.toggleShuffle()}}iconButton(s,i,l){const a=document.createElement("button");return a.type="button",a.className=`${e}__control-button`,a.append(t(s,this.getIconSize())),l?.disabled&&(a.disabled=!0),l?.data&&Object.entries(l.data).forEach(([t,e])=>a.setAttribute(`data-${t}`,e)),a.addEventListener("click",i),a}build(){const t=this.getAttribute("size")||"m",s=this.getAttribute("variant")||"default",i=this.getAttribute("theme")||"auto";this.className=[e,`${e}--size-${t}`,`${e}--variant-${s}`,`${e}--theme-${i}`].join(" "),this.audioEl=document.createElement("audio"),this.audioEl.preload="metadata",this.audioEl.hidden=!0;const l=document.createElement("div");l.className=`${e}__loading`;const a=document.createElement("div");a.className=`${e}__spinner`,l.append(a);const n=document.createElement("div");n.className=`${e}__error`;const o=document.createElement("p");o.textContent="오디오를 재생할 수 없습니다.";const r=document.createElement("button");r.type="button",r.textContent="다시 시도",r.addEventListener("click",()=>window.location.reload()),n.append(o,r);const h=document.createElement("div");h.className=`${e}__album-art`,this.albumImgEl=document.createElement("img"),this.albumImgEl.addEventListener("error",()=>{this.albumImgEl&&(this.albumImgEl.style.display="none"),this.albumPlaceholderEl?.classList.remove("album-placeholder")}),this.albumPlaceholderEl=document.createElement("div"),this.albumPlaceholderEl.className="album-placeholder",this.albumPlaceholderEl.textContent="🎵",h.append(this.albumImgEl,this.albumPlaceholderEl);const u=document.createElement("div");u.className=`${e}__main`;const d=document.createElement("div");d.className=`${e}__info`,this.titleEl=document.createElement("div"),this.titleEl.className=`${e}__title`,this.artistEl=document.createElement("div"),this.artistEl.className=`${e}__artist`,this.albumEl=document.createElement("div"),this.albumEl.className=`${e}__album`,d.append(this.titleEl,this.artistEl,this.albumEl),this.progressEl=document.createElement("div"),this.progressEl.className=`${e}__progress`,this.progressBarEl=document.createElement("div"),this.progressBarEl.className=`${e}__progress-bar`,this.progressHandleEl=document.createElement("div"),this.progressHandleEl.className=`${e}__progress-handle`,this.progressEl.append(this.progressBarEl,this.progressHandleEl),this.progressEl.addEventListener("click",t=>{if(!this.audioEl||!this.progressEl)return;const e=this.progressEl.getBoundingClientRect(),s=(t.clientX-e.left)/e.width;this.audioEl.currentTime=s*(this.duration||0)});const c=document.createElement("div");c.className=`${e}__controls`;const m=document.createElement("div");m.className=`${e}__left-controls`;const p=document.createElement("div");p.className=`${e}__center-controls`;const E=document.createElement("div");E.className=`${e}__right-controls`,this.playButtonEl=document.createElement("button"),this.playButtonEl.type="button",this.playButtonEl.className=`${e}__play-button`,this.playButtonEl.addEventListener("click",()=>this.togglePlay()),p.append(this.playButtonEl),c.append(m,p,E);const g=document.createElement("div");g.className=`${e}__bottom-controls`;const b=document.createElement("div");b.className=`${e}__left-bottom`;const y=document.createElement("div");y.className=`${e}__right-bottom`;const v=document.createElement("div");v.className=`${e}__time`,this.timeCurrentEl=document.createElement("span");const f=document.createElement("span");f.textContent="/",this.timeDurationEl=document.createElement("span"),v.append(this.timeCurrentEl,f,this.timeDurationEl),b.append(v);const _=document.createElement("div");_.className=`${e}__volume`;const k=this.iconButton(this.isMuted||0===this.volume?"mute-filled":"volume-up",()=>this.toggleMute());k.title=this.isMuted||0===this.volume?"음소거 해제":"음소거";const C=document.createElement("div");C.className=`${e}__volume-slider`;const I=document.createElement("div");I.className="volume-label";const $=document.createElement("span");$.textContent="🔊";const P=document.createElement("span");I.append($,P),this.volumeInputEl=document.createElement("input"),this.volumeInputEl.type="range",this.volumeInputEl.min="0",this.volumeInputEl.max="1",this.volumeInputEl.step="0.1",this.volumeInputEl.addEventListener("input",()=>{if(!this.audioEl||!this.volumeInputEl)return;const t=parseFloat(this.volumeInputEl.value);this.audioEl.volume=t,this.audioEl.muted=0===t}),C.append(I,this.volumeInputEl),_.append(k,C);const A=document.createElement("div");A.className=`${e}__settings`;const x=this.iconButton("settings",()=>{this.showSettingsMenu=!this.showSettingsMenu,this.updateSettingsMenu()});this.settingsMenuEl=document.createElement("div"),this.settingsMenuEl.className=`${e}__settings-menu`,this.settingsMenuEl.hidden=!0;const M=document.createElement("div");M.className=`${e}__setting-group`;const w=document.createElement("label");w.textContent="재생 속도";const B=document.createElement("select");B.addEventListener("change",()=>this.handlePlaybackRateChange(parseFloat(B.value))),M.append(w,B),this.settingsMenuEl.append(M),A.append(x,this.settingsMenuEl),y.append(_,A),g.append(b,y),u.append(d,this.progressEl,c,g);const N=document.createElement("div");N.className=`${e}__playlist`,N.hidden=!0;const T=document.createElement("h4");T.textContent="플레이리스트",this.playlistTracksEl=document.createElement("div"),this.playlistTracksEl.className=`${e}__playlist-tracks`,N.append(T,this.playlistTracksEl),this.append(this.audioEl,l,n,h,u,N),this._leftControls=m,this._rightControls=E,this._controls=c,this._time=v,this._volumeWrap=_,this._settings=A,this._playlist=N,this._rateSelect=B,this._volumePercent=P,this._muteButton=k}get leftControls(){return this._leftControls}get rightControls(){return this._rightControls}get controlsEl(){return this._controls}get timeEl(){return this._time}get volumeWrap(){return this._volumeWrap}get settingsEl(){return this._settings}get playlistEl(){return this._playlist}get rateSelect(){return this._rateSelect}get volumePercent(){return this._volumePercent}get muteButton(){return this._muteButton}updateTrackInfo(){const t=this.getCurrentTrack();this.titleEl&&(this.titleEl.textContent=t?.title||"Unknown Track"),this.artistEl&&(this.artistEl.textContent=t?.artist||"Unknown Artist"),this.albumEl&&(t?.album?(this.albumEl.textContent=t.album,this.albumEl.hidden=!1):this.albumEl.hidden=!0),this.albumImgEl&&this.albumPlaceholderEl&&(t?.albumArt?(this.albumImgEl.src=t.albumArt,this.albumImgEl.alt=t.title||"Album Art",this.albumImgEl.style.display=""):(this.albumImgEl.removeAttribute("src"),this.albumImgEl.style.display="none"),this.albumPlaceholderEl.className="album-placeholder")}updateProgress(){const t=this.duration>0?this.currentTime/this.duration*100:0;this.progressBarEl&&(this.progressBarEl.style.width=`${t}%`),this.progressHandleEl&&(this.progressHandleEl.style.left=`${t}%`,this.progressHandleEl.style.transform=t<=0?"translate(0, -50%)":t>=100?"translate(-100%, -50%)":"translate(-50%, -50%)")}updateTime(){this.timeCurrentEl&&(this.timeCurrentEl.textContent=this.formatTime(this.currentTime)),this.timeDurationEl&&(this.timeDurationEl.textContent=this.formatTime(this.duration))}updateVolumeUI(){this.volumeInputEl&&(this.volumeInputEl.value=String(this.volume)),this.volumePercent&&(this.volumePercent.textContent=`${Math.round(100*this.volume)}%`),this.muteButton&&(this.muteButton.replaceChildren(t(this.isMuted||0===this.volume?"mute-filled":"volume-up",this.getIconSize())),this.muteButton.title=this.isMuted||0===this.volume?"음소거 해제":"음소거")}updateSettingsMenu(){this.settingsMenuEl&&(this.settingsMenuEl.hidden=!this.showSettingsMenu)}rebuildControlButtons(){const e=this.getPlaylist(),s=1.2*this.getIconSize();this.leftControls.replaceChildren(),this.rightControls.replaceChildren(),e.length>0&&this.leftControls.append(this.iconButton("refresh",()=>this.toggleShuffle(),{data:{shuffle:"true"}})),this.leftControls.append(this.iconButton("chevron-left",()=>{if(e.length>0){const t=this.playlistIndex-1;t>=0&&this.setPlaylistIndex(t)}else this.audioEl&&(this.audioEl.currentTime=0)},{disabled:e.length>0&&0===this.playlistIndex})),this.playButtonEl&&this.playButtonEl.replaceChildren(t(this.isPlaying?"pause":"play",s)),this.rightControls.append(this.iconButton("chevron-right",()=>{if(e.length>0){const t=this.playlistIndex+1;t<e.length&&this.setPlaylistIndex(t)}},{disabled:e.length>0&&this.playlistIndex===e.length-1})),e.length>0&&this.rightControls.append(this.iconButton("repeat",()=>this.toggleRepeatMode(),{data:{repeat:"true"}}))}rebuildPlaylist(){if(!this.playlistTracksEl)return;const t=this.getPlaylist(),s=this.getAttribute("variant")||"default";this.playlistEl.hidden=!("full"===s&&t.length>0),this.playlistTracksEl.replaceChildren(),t.forEach((t,s)=>{const i=document.createElement("div");if(i.className=`${e}__playlist-track${s===this.playlistIndex?` ${e}__playlist-track--active`:""}`,i.addEventListener("click",()=>this.setPlaylistIndex(s)),t.albumArt){const e=document.createElement("img");e.src=t.albumArt,e.alt=t.title||"Album Art",i.append(e)}const l=document.createElement("div");l.className=`${e}__playlist-track-info`;const a=document.createElement("div");a.className=`${e}__playlist-track-title`,a.textContent=t.title||"Unknown Track";const n=document.createElement("div");n.className=`${e}__playlist-track-artist`,n.textContent=t.artist||"Unknown Artist",l.append(a,n),i.append(l),this.playlistTracksEl?.append(i)})}updatePlaylistActive(){this.playlistTracksEl&&Array.from(this.playlistTracksEl.children).forEach((t,s)=>{t.classList.toggle(`${e}__playlist-track--active`,s===this.playlistIndex)})}updateUI(){const t=this.getAttribute("size")||"m",s=this.getAttribute("variant")||"default",i=this.getAttribute("theme")||"auto",l=this.getBool("show-controls",!0),a=this.getBool("show-progress",!0),n=this.getBool("show-time",!0),o=this.getBool("show-volume",!0),r=this.getBool("show-settings",!1);this.className=[e,`${e}--size-${t}`,`${e}--variant-${s}`,`${e}--theme-${i}`,this.isPlaying&&`${e}--playing`,!this.isPlaying&&`${e}--paused`,this.isMuted&&`${e}--muted`,this.isLoading&&`${e}--loading`,this.error&&`${e}--error`,this.isShuffle&&`${e}--shuffle`,`${e}--repeat-${this.currentRepeatMode}`].filter(Boolean).join(" "),this.audioEl&&(this.audioEl.autoplay=this.getBool("auto-play"),this.audioEl.loop=this.getBool("loop"),this.audioEl.muted=this.getBool("muted"),this.audioEl.playbackRate=this.playbackRate),this.progressEl&&(this.progressEl.hidden=!a),this.controlsEl&&(this.controlsEl.hidden=!l),this.timeEl&&(this.timeEl.hidden=!n),this.volumeWrap&&(this.volumeWrap.hidden=!o),this.settingsEl&&(this.settingsEl.hidden=!r),this.rateSelect.replaceChildren(...this.getPlaybackRates().map(t=>{const e=document.createElement("option");return e.value=String(t),e.textContent=`${t}x`,t===this.playbackRate&&(e.selected=!0),e})),this.rebuildControlButtons(),this.updateTrackInfo(),this.updateProgress(),this.updateTime(),this.updateVolumeUI(),this.updateSettingsMenu(),this.rebuildPlaylist()}}customElements.get("db-audio-player")||customElements.define("db-audio-player",DbAudioPlayer);export{DbAudioPlayer};

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

@@ -0,0 +1,18 @@
+declare class DbAvatar extends HTMLElement {
+    static get observedAttributes(): string[];
+    private imageFailed;
+    private imageLoaded;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private handleClick;
+    private handleKeyDown;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-avatar': DbAvatar;
+    }
+}
+
+export { DbAvatar };

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

@@ -0,0 +1 @@
+import{createDbIcon as t}from"./db-icons.js";const e=["xs","s","m","l","xl","2xl"],a=["default","primary","success","warning","danger","info"],s=["online","offline","away","busy"],i=["#E3F2FD","#F3E5F5","#E8F5E8","#FFF3E0","#FCE4EC","#E0F2F1","#FFF8E1","#F1F8E9","#E8EAF6","#FFEBEE"],n=["#1976D2","#7B1FA2","#388E3C","#F57C00","#C2185B","#00796B","#F9A825","#689F38","#3F51B5","#D32F2F"];class DbAvatar extends HTMLElement{constructor(){super(...arguments),this.imageFailed=!1,this.imageLoaded=!1,this.handleClick=()=>{!this.hasAttribute("disabled")&&this.hasAttribute("clickable")&&this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))},this.handleKeyDown=t=>{this.hasAttribute("clickable")&&!this.hasAttribute("disabled")&&("Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.handleClick()))}}static get observedAttributes(){return["src","alt","initials","size","variant","status","disabled","clickable","badge","badge-max-count","badge-variant","badge-style","badge-text"]}connectedCallback(){this.render(),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(t){"src"===t&&(this.imageFailed=!1,this.imageLoaded=!1),this.render()}render(){const r=e.includes(this.getAttribute("size")||"m")&&this.getAttribute("size")||"m",d=a.includes(this.getAttribute("variant")||"default")&&this.getAttribute("variant")||"default",l=this.hasAttribute("disabled"),c=this.hasAttribute("clickable"),o=this.getAttribute("src"),b=this.getAttribute("initials")||"",h=Boolean(o&&!this.imageFailed),u=h&&!this.imageLoaded;if(this.className=["designbase-wc-avatar",`designbase-wc-avatar--${r}`,`designbase-wc-avatar--${d}`,c&&"designbase-wc-avatar--clickable",l&&"designbase-wc-avatar--disabled",u&&"designbase-wc-avatar--loading"].filter(Boolean).join(" "),c&&!l?(this.setAttribute("role","button"),this.tabIndex=0):(this.removeAttribute("role"),this.removeAttribute("tabindex")),this.toggleAttribute("aria-disabled",l),this.replaceChildren(),u){const t=document.createElement("div");t.className="designbase-wc-avatar__loading";const e=document.createElement("div");e.className="designbase-wc-avatar__skeleton",t.append(e),this.append(t)}if(h){const t=document.createElement("img");t.className="designbase-wc-avatar__image",t.src=o,t.alt=this.getAttribute("alt")||"아바타 이미지",t.loading="lazy",t.addEventListener("load",()=>{this.imageLoaded=!0,this.classList.remove("designbase-wc-avatar--loading"),this.querySelector(".designbase-wc-avatar__loading")?.remove()}),t.addEventListener("error",()=>{this.imageFailed=!0,this.imageLoaded=!1,this.render()}),this.append(t)}else if(b){const t=document.createElement("div");if(t.className="designbase-wc-avatar__initials","default"===d){const e=function initialsColor(t){let e=0;for(let a=0;a<t.length;a++)e=t.charCodeAt(a)+((e<<5)-e);const a=Math.abs(e)%i.length;return{backgroundColor:i[a],color:n[a]}}(b);t.style.backgroundColor=e.backgroundColor,t.style.color=e.color}t.textContent=b.charAt(0).toUpperCase(),this.append(t)}else{const e=document.createElement("div");e.className="designbase-wc-avatar__icon",e.append(t("user",function iconSize(t){return"xs"===t?12:"s"===t?16:"m"===t?20:"l"===t?24:"xl"===t?32:40}(r))),this.append(e)}const g=this.getAttribute("status")||"";if(s.includes(g)){const t=document.createElement("span");t.className=`designbase-wc-avatar__status designbase-wc-avatar__status--${g}`,this.append(t)}if(this.hasAttribute("badge")){const t=document.createElement("div");t.className="designbase-wc-avatar__badge";const e=document.createElement("db-badge");e.setAttribute("count",this.getAttribute("badge")||"0");const a=this.getAttribute("badge-style")||"number";e.setAttribute("badge-style",a),this.hasAttribute("badge-max-count")&&e.setAttribute("max-count",this.getAttribute("badge-max-count")),e.setAttribute("variant",this.getAttribute("badge-variant")||"danger"),this.hasAttribute("badge-text")&&(e.textContent=this.getAttribute("badge-text"));const s="xl"===r||"2xl"===r?"m":"s";e.setAttribute("size",s),t.append(e),this.append(t)}}}customElements.get("db-avatar")||customElements.define("db-avatar",DbAvatar);export{DbAvatar};

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

@@ -0,0 +1,24 @@
+declare class DbBackdrop extends HTMLElement {
+    static get observedAttributes(): string[];
+    private portal?;
+    private keyHandler;
+    get open(): boolean;
+    set open(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private isOpen;
+    private syncOpenState;
+    private collectChildren;
+    private attachListeners;
+    private detachListeners;
+    private handlePortalClick;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-backdrop': DbBackdrop;
+    }
+}
+
+export { DbBackdrop };

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

@@ -0,0 +1 @@
+const t=["fade","slide","zoom","none"];class DbBackdrop extends HTMLElement{constructor(){super(...arguments),this.keyHandler=null,this.handlePortalClick=t=>{t.target===this.portal&&"true"!==this.getAttribute("disable-backdrop-click")&&(this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0})))}}static get observedAttributes(){return["open","blur","opacity","blur-amount","animation","animation-duration","z-index","background-color","disable-backdrop-click","disable-escape-key-down"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(t){t?this.setAttribute("open",""):this.removeAttribute("open")}connectedCallback(){this.style.display="contents",this.syncOpenState()}disconnectedCallback(){this.detachListeners(),this.portal?.remove(),this.portal=void 0,document.body.style.overflow=""}attributeChangedCallback(){this.isConnected&&this.syncOpenState()}isOpen(){return this.open}syncOpenState(){this.isOpen()?this.render():(document.body.style.overflow="",this.detachListeners(),this.portal?.remove())}collectChildren(){return Array.from(this.children).filter(t=>!t.hasAttribute("data-wc-internal"))}attachListeners(){this.keyHandler||(this.keyHandler=t=>{"Escape"===t.key&&"true"!==this.getAttribute("disable-escape-key-down")&&(this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0})))},document.addEventListener("keydown",this.keyHandler))}detachListeners(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null)}render(){if(!this.isOpen())return void this.syncOpenState();const e=this.hasAttribute("blur"),s=this.getAttribute("opacity")||"0.5",i=this.getAttribute("blur-amount")||"4",r=t.includes(this.getAttribute("animation")||"fade")&&this.getAttribute("animation")||"fade",o=this.getAttribute("animation-duration")||"300",n=this.getAttribute("z-index")||"1000",a=this.getAttribute("background-color"),d=this.collectChildren();document.body.style.overflow="hidden",this.attachListeners(),this.portal||(this.portal=document.createElement("div"),this.portal.setAttribute("data-wc-internal",""),this.portal.addEventListener("click",this.handlePortalClick)),this.portal.className=["designbase-wc-backdrop",`designbase-wc-backdrop--${r}`,"designbase-wc-backdrop--open",e?"designbase-wc-backdrop--blur":""].filter(Boolean).join(" "),this.portal.setAttribute("role","presentation"),this.portal.setAttribute("aria-hidden","false"),this.portal.style.setProperty("--backdrop-opacity",s),this.portal.style.setProperty("--backdrop-blur-amount",`${i}px`),this.portal.style.setProperty("--backdrop-animation-duration",`${o}ms`),this.portal.style.setProperty("--backdrop-z-index",n),a?this.portal.style.backgroundColor=a:this.portal.style.removeProperty("background-color"),this.portal.replaceChildren(...d),this.portal.isConnected||document.body.append(this.portal)}}customElements.get("db-backdrop")||customElements.define("db-backdrop",DbBackdrop);export{DbBackdrop};

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

@@ -0,0 +1,27 @@
+declare class DbBadge extends HTMLElement {
+    static get observedAttributes(): string[];
+    get variant(): string;
+    set variant(value: string);
+    get size(): string;
+    set size(value: string);
+    get badgeStyle(): string;
+    set badgeStyle(value: string);
+    get count(): number | undefined;
+    set count(value: number | undefined);
+    get maxCount(): number;
+    set maxCount(value: number);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, _newValue: string | null): void;
+    private syncAttributes;
+    private syncContent;
+    private syncEnum;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-badge': DbBadge;
+    }
+}
+
+export { DbBadge };

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

@@ -0,0 +1 @@
+const t="designbase-wc-badge",e=["primary","secondary","info","success","warning","danger"],s=["s","m","l"],i=["dot","number","text","outlined"];class DbBadge extends HTMLElement{static get observedAttributes(){return["variant","size","badge-style","count","max-count","disabled"]}get variant(){return this.getAttribute("variant")||"primary"}set variant(t){this.setAttribute("variant",t)}get size(){return this.getAttribute("size")||"m"}set size(t){this.setAttribute("size",t)}get badgeStyle(){return this.getAttribute("badge-style")||"text"}set badgeStyle(t){this.setAttribute("badge-style",t)}get count(){const t=this.getAttribute("count");return null===t?void 0:Number(t)}set count(t){void 0===t?this.removeAttribute("count"):this.setAttribute("count",String(t))}get maxCount(){return Number(this.getAttribute("max-count")||99)}set maxCount(t){this.setAttribute("max-count",String(t))}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}connectedCallback(){this.syncAttributes()}attributeChangedCallback(t,e,s){"count"!==t&&"max-count"!==t&&"badge-style"!==t||this.syncContent(),this.syncAttributes()}syncAttributes(){this.classList.add(t),this.setAttribute("aria-disabled",String(this.disabled)),this.syncEnum("variant",this.variant,e),this.syncEnum("size",this.size,s),this.syncEnum("style",this.badgeStyle,i),this.classList.toggle(`${t}--disabled`,this.disabled),this.syncContent()}syncContent(){"number"!==this.badgeStyle||void 0===this.count?"dot"===this.badgeStyle&&(this.textContent=""):this.textContent=this.count>this.maxCount?`${this.maxCount}+`:String(this.count)}syncEnum(e,s,i){i.forEach(e=>this.classList.remove(`${t}--${e}`)),i.includes(s)?this.classList.add(`${t}--${s}`):"style"===e&&this.classList.add(`${t}--text`)}}customElements.get("db-badge")||customElements.define("db-badge",DbBadge);export{DbBadge};

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

@@ -0,0 +1,28 @@
+interface DbBannerAction {
+    text: string;
+    href?: string;
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+    size?: 's' | 'm' | 'l' | 'sm' | 'md' | 'lg';
+    external?: boolean;
+    icon?: string;
+    iconOnly?: boolean;
+}
+declare class DbBanner extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private parseActions;
+    private getIconSize;
+    private getActionIconSize;
+    private resolveIconName;
+    private createActionControl;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-banner': DbBanner;
+    }
+}
+
+export { DbBanner };
+export type { DbBannerAction };

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

@@ -0,0 +1 @@
+import{createDbIcon as e}from"./db-icons.js";const t={primary:"primary",secondary:"secondary",outline:"tertiary",ghost:"ghost"},n={s:"s",sm:"s",m:"m",md:"m",l:"l",lg:"l"};class DbBanner extends HTMLElement{static get observedAttributes(){return["title","description","icon","image","image-alt","actions","size","variant","background-image"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}parseActions(){const e=this.getAttribute("actions");if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}}getIconSize(e){return"s"===e?16:"l"===e?24:20}getActionIconSize(e){return"s"===e?16:"l"===e?20:18}resolveIconName(e){if(e)return e in{close:1,"info-filled":1}?e:void 0}createActionControl(t,n,a,s){const i=this.resolveIconName(t.icon),r=Boolean(t.iconOnly&&i);if(t.href){const n=document.createElement("a");return n.className=`designbase-wc-button designbase-wc-button--${a} designbase-wc-button--${s}`,r&&n.classList.add("designbase-wc-button--icon-only"),n.href=t.href,n.setAttribute("aria-label",t.text),r&&i?n.append(e(i,this.getActionIconSize(s))):n.textContent=t.text,t.external&&(n.target="_blank",n.rel="noopener noreferrer"),n}const c=document.createElement("db-button");return c.setAttribute("variant",a),c.setAttribute("size",s),r?(c.setAttribute("icon-only",""),c.setAttribute("aria-label",t.text),i&&c.append(e(i,this.getActionIconSize(s)))):c.textContent=t.text,(e=>{e.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-action",{bubbles:!0,composed:!0,detail:{index:n,action:t}}))})})(c),c}render(){const a=this.getAttribute("title")||"",s=this.getAttribute("description")||"",i=this.getAttribute("icon"),r=this.getAttribute("image"),c=this.getAttribute("image-alt")||a||"Banner image",o=this.getAttribute("size")||"m",d=this.getAttribute("variant")||"primary",b=this.getAttribute("background-image"),l=this.parseActions();if(this.className=`designbase-wc-banner designbase-wc-banner--${o} designbase-wc-banner--${d}`,this.replaceChildren(),"image"===d&&b){const e=document.createElement("div");e.className="designbase-wc-banner__background",e.style.backgroundImage=`url(${b})`,e.style.backgroundSize="cover",e.style.backgroundPosition="center",e.style.backgroundRepeat="no-repeat",this.append(e);const t=document.createElement("div");t.className="designbase-wc-banner__overlay",this.append(t)}const m=document.createElement("div");if(m.className="designbase-wc-banner__container",i){const t=document.createElement("div");t.className="designbase-wc-banner__icon",t.append(e(i,this.getIconSize(o))),m.append(t)}if(r){const e=document.createElement("div");e.className="designbase-wc-banner__image";const t=document.createElement("img");t.src=r,t.alt=c,e.append(t),m.append(e)}const g=document.createElement("div");if(g.className="designbase-wc-banner__content",a){const e=document.createElement("h3");e.className="designbase-wc-banner__title",e.textContent=a,g.append(e)}if(s){const e=document.createElement("p");e.className="designbase-wc-banner__description",e.textContent=s,g.append(e)}if(m.append(g),l.length>0){const e=document.createElement("div");e.className="designbase-wc-banner__actions",l.forEach((a,s)=>{const i=t[a.variant||"primary"]||"primary",r=n[a.size||"sm"]||"s";e.append(this.createActionControl(a,s,i,r))}),m.append(e)}this.append(m)}}customElements.get("db-banner")||customElements.define("db-banner",DbBanner);export{DbBanner};

package/dist/esm/components/db-bottom-navigation.d.ts

@@ -0,0 +1,29 @@
+interface DbBottomNavigationItem {
+    id: string;
+    icon: string;
+    activeIcon?: string;
+    label: string;
+    isActive?: boolean;
+    disabled?: boolean;
+    badge?: string | number;
+    badgeColor?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+}
+declare class DbBottomNavigation extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    get items(): DbBottomNavigationItem[];
+    set items(value: DbBottomNavigationItem[] | string);
+    private parseItems;
+    private iconSize;
+    private syncHostClasses;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-bottom-navigation': DbBottomNavigation;
+    }
+}
+
+export { DbBottomNavigation };
+export type { DbBottomNavigationItem };

package/dist/esm/components/db-bottom-navigation.js

@@ -0,0 +1 @@
+import{createDbIcon as t}from"./db-icons.js";const e=["s","m","l"],i=["default","glass","transparent"];class DbBottomNavigation extends HTMLElement{static get observedAttributes(){return["items","active-item-id","size","background-color","fixed"]}connectedCallback(){this.render()}attributeChangedCallback(){this.isConnected&&this.render()}get items(){return this.parseItems()}set items(t){this.setAttribute("items","string"==typeof t?t:JSON.stringify(t))}parseItems(){try{const t=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}iconSize(t){return"s"===t?20:"l"===t?28:24}syncHostClasses(){const t=this.getAttribute("size")||"m",a=e.includes(t)?t:"m",n=this.getAttribute("background-color")||"default",s=i.includes(n)?n:"default";this.className=["designbase-wc-bottom-navigation",`designbase-wc-bottom-navigation--${a}`,`designbase-wc-bottom-navigation--${s}`,"false"!==this.getAttribute("fixed")&&"designbase-wc-bottom-navigation--fixed"].filter(Boolean).join(" ")}render(){this.syncHostClasses(),this.setAttribute("role","navigation"),this.setAttribute("aria-label","하단 네비게이션");const e=this.parseItems(),i=this.getAttribute("active-item-id")||"",a=this.getAttribute("size")||"m",n=this.iconSize(a);let s=this.querySelector(".designbase-wc-bottom-navigation__container");s?s.replaceChildren():(s=document.createElement("div"),s.className="designbase-wc-bottom-navigation__container",this.replaceChildren(s)),e.forEach(e=>{const a=i===e.id||Boolean(e.isActive),o=function resolveIcon(t){if(t)return t}(a&&e.activeIcon?e.activeIcon:e.icon),r=document.createElement("button");r.type="button",r.className=["designbase-wc-bottom-navigation__item",a&&"designbase-wc-bottom-navigation__item--active",e.disabled&&"designbase-wc-bottom-navigation__item--disabled"].filter(Boolean).join(" "),r.disabled=Boolean(e.disabled),r.setAttribute("aria-label",e.label),a&&r.setAttribute("aria-current","page");const c=document.createElement("div");c.className="designbase-wc-bottom-navigation__item-content";const d=document.createElement("div");if(d.className="designbase-wc-bottom-navigation__icon-wrapper",o){const e=t(o,n);e.classList.add("designbase-wc-bottom-navigation__icon"),d.append(e)}if(void 0!==e.badge&&""!==e.badge){const t=document.createElement("db-badge");t.className="designbase-wc-bottom-navigation__badge",t.setAttribute("size","s"),t.setAttribute("variant",function mapBadgeVariant(t){return"error"===t?"danger":"warning"===t?"warning":"success"===t?"success":"info"===t?"info":"primary"===t?"primary":"secondary"}(e.badgeColor)),t.setAttribute("badge-style","number"),t.setAttribute("count",String(e.badge)),d.append(t)}const b=document.createElement("span");b.className="designbase-wc-bottom-navigation__label",b.textContent=e.label,c.append(d,b),r.append(c),r.addEventListener("click",()=>{e.disabled||this.dispatchEvent(new CustomEvent("db-item-click",{bubbles:!0,composed:!0,detail:{item:e}}))}),s.append(r)})}}customElements.get("db-bottom-navigation")||customElements.define("db-bottom-navigation",DbBottomNavigation);export{DbBottomNavigation};