@designbasekorea/ui-wc 0.5.5 → 0.5.6

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

@@ -1 +1,455 @@
-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};
+import { createDbIcon } from './db-icons.js';
+
+const CLASS = 'designbase-wc-ad-banner';
+const DEFAULT_TITLES = {
+    hero: '지금 바로 시작하세요',
+    topbar: '🎉 신규 가입 시 10,000원 적립금 증정!',
+    card: '프리미엄 멤버십',
+    floating: '오늘만 특가!',
+};
+const DEFAULT_SUBTITLES = {
+    hero: '최대 50% 할인된 가격으로 프리미엄 서비스를 경험해보세요. 기간 한정 특별 혜택!',
+    topbar: '오늘 하루만 특별 혜택',
+    card: '무제한 서비스 이용권을 특별가에 만나보세요',
+    floating: '장바구니에 담긴 상품 추가 20% 할인',
+};
+const DEFAULT_CTA = {
+    hero: '자세히 보기',
+    topbar: '지금 가입하기',
+    card: '알아보기',
+    floating: '할인받기',
+};
+const TYPE_ICONS = {
+    hero: 'star',
+    topbar: 'trending-up',
+    card: 'star-filled',
+    floating: 'cart',
+};
+const VARIANT_SCHEMES = {
+    primary: 'primary',
+    secondary: 'secondary',
+    success: 'success',
+    warning: 'warning',
+    error: 'error',
+};
+class DbAdBanner extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.built = false;
+        this.visible = true;
+        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';
+        if (!this.built) {
+            this.built = true;
+            this.build();
+        }
+        this.updateUI();
+    }
+    disconnectedCallback() {
+        this.stopAutoClose();
+    }
+    attributeChangedCallback(name) {
+        if (!this.built)
+            return;
+        if (name === 'open') {
+            this.visible = this.getAttribute('open') !== 'false';
+        }
+        this.updateUI();
+    }
+    getBool(name, fallback = false) {
+        if (!this.hasAttribute(name))
+            return fallback;
+        const value = this.getAttribute(name);
+        return value === '' || value === 'true';
+    }
+    getType() {
+        const type = this.getAttribute('type') || 'hero';
+        return ['hero', 'topbar', 'card', 'floating'].includes(type) ? type : 'hero';
+    }
+    getVariant() {
+        const variant = this.getAttribute('variant') || 'primary';
+        return ['primary', 'secondary', 'success', 'warning', 'error'].includes(variant)
+            ? variant
+            : 'primary';
+    }
+    getSize() {
+        const size = this.getAttribute('size') || 'm';
+        return ['s', 'm', 'l'].includes(size) ? size : 'm';
+    }
+    ctaButtonSize(type, size) {
+        if (type === 'card')
+            return 's';
+        if (type === 'floating')
+            return size === 's' ? 's' : 'm';
+        return size;
+    }
+    build() {
+        this.rootEl = document.createElement('div');
+        this.contentEl = document.createElement('div');
+        this.contentEl.className = `${CLASS}__content`;
+        this.closeBtn = document.createElement('button');
+        this.closeBtn.type = 'button';
+        this.closeBtn.className = `${CLASS}__close`;
+        this.closeBtn.setAttribute('aria-label', '닫기');
+        this.closeBtn.append(createDbIcon('close', 16));
+        this.closeBtn.addEventListener('click', (event) => {
+            event.stopPropagation();
+            this.handleClose();
+        });
+        this.imageEl = document.createElement('img');
+        this.imageEl.className = `${CLASS}__image`;
+        this.imageEl.loading = 'lazy';
+        const mainEl = document.createElement('div');
+        mainEl.className = `${CLASS}__main`;
+        this.mainEl = mainEl;
+        this.iconEl = document.createElement('div');
+        this.iconEl.className = `${CLASS}__icon`;
+        this.labelEl = document.createElement('span');
+        this.labelEl.className = `${CLASS}__label`;
+        this.labelEl.textContent = '특별 이벤트';
+        this.badgeEl = document.createElement('span');
+        this.badgeEl.className = `${CLASS}__badge`;
+        this.badgeEl.textContent = 'HOT DEAL';
+        this.titleEl = document.createElement('h2');
+        this.titleEl.className = `${CLASS}__title`;
+        this.subtitleEl = document.createElement('p');
+        this.subtitleEl.className = `${CLASS}__subtitle`;
+        const textEl = document.createElement('div');
+        textEl.className = `${CLASS}__text`;
+        this.textEl = textEl;
+        this.countdownWrapEl = document.createElement('div');
+        this.countdownWrapEl.className = `${CLASS}__countdown`;
+        textEl.append(this.titleEl, this.subtitleEl);
+        this.actionsEl = document.createElement('div');
+        this.actionsEl.className = `${CLASS}__actions`;
+        this.ctaEl = document.createElement('db-button');
+        this.ctaEl.className = `${CLASS}__cta`;
+        this.ctaEl.setAttribute('variant', 'primary');
+        this.ctaEl.setAttribute('end-icon', 'arrow-right');
+        this.ctaEl.addEventListener('click', (event) => {
+            event.stopPropagation();
+            this.dispatchEvent(new CustomEvent('db-cta-click', { bubbles: true, composed: true }));
+        });
+        this.actionsEl.append(this.ctaEl);
+        mainEl.append(textEl, this.actionsEl);
+        this.progressEl = document.createElement('div');
+        this.progressEl.className = `${CLASS}__progress`;
+        this.progressBarEl = document.createElement('div');
+        this.progressBarEl.className = `${CLASS}__progress-bar`;
+        this.progressEl.append(this.progressBarEl);
+        this.contentEl.append(this.closeBtn, mainEl, this.progressEl);
+        this.rootEl.append(this.contentEl);
+        this.append(this.rootEl);
+        // topbar 는 전체가 링크처럼 동작 (href 없을 때도 db-cta-click 발행)
+        this.contentEl.addEventListener('click', (event) => {
+            if (this.getType() !== 'topbar')
+                return;
+            if (event.target?.closest(`.${CLASS}__close`))
+                return;
+            this.dispatchEvent(new CustomEvent('db-cta-click', { bubbles: true, composed: true }));
+        });
+    }
+    handleClose() {
+        this.visible = false;
+        this.style.display = 'none';
+        this.setAttribute('open', 'false');
+        this.stopAutoClose();
+        this.dispatchEvent(new CustomEvent('db-close', { bubbles: true, composed: true }));
+    }
+    stopAutoClose() {
+        if (this.autoCloseTimer) {
+            window.clearInterval(this.autoCloseTimer);
+            this.autoCloseTimer = undefined;
+        }
+    }
+    startAutoClose(delay) {
+        this.stopAutoClose();
+        this.progress = 100;
+        this.autoCloseTimer = window.setInterval(() => {
+            this.progress -= 100 / (delay / 100);
+            if (this.progressBarEl) {
+                this.progressBarEl.style.width = `${Math.max(this.progress, 0)}%`;
+            }
+            if (this.progress <= 0) {
+                this.handleClose();
+            }
+        }, 100);
+    }
+    getBackground() {
+        const explicit = this.getAttribute('background');
+        if (explicit && ['solid', 'gradient', 'animation', 'grid'].includes(explicit)) {
+            return explicit;
+        }
+        return this.getBool('use-random-gradient') ? 'gradient' : 'solid';
+    }
+    ensureAnimBg() {
+        if (!this.animBgEl) {
+            const wrap = document.createElement('div');
+            wrap.className = `${CLASS}__backdrop`;
+            const inner = document.createElement('db-animation-background');
+            inner.className = `${CLASS}__anim-bg`;
+            inner.setAttribute('width', '100%');
+            inner.setAttribute('height', '100%');
+            wrap.append(inner);
+            this.animBgEl = wrap;
+            this.animBgInner = inner;
+        }
+        return this.animBgEl;
+    }
+    ensureGridBg() {
+        if (!this.gridBgEl) {
+            const wrap = document.createElement('div');
+            wrap.className = `${CLASS}__backdrop`;
+            const inner = document.createElement('db-grid-background');
+            inner.className = `${CLASS}__grid-bg`;
+            inner.setAttribute('width', '100%');
+            inner.setAttribute('height', '100%');
+            wrap.append(inner);
+            this.gridBgEl = wrap;
+            this.gridBgInner = inner;
+        }
+        return this.gridBgEl;
+    }
+    /** 이전 배경 모드의 백드롭 엘리먼트를 정리한다. */
+    clearBackdrop(keep) {
+        if (keep !== 'gradient' && this.gradientEl) {
+            this.gradientEl.remove();
+            this.gradientEl = undefined;
+        }
+        if (keep !== 'animation' && this.animBgEl) {
+            this.animBgEl.remove();
+            this.animBgEl = undefined;
+            this.animBgInner = undefined;
+        }
+        if (keep !== 'grid' && this.gridBgEl) {
+            this.gridBgEl.remove();
+            this.gridBgEl = undefined;
+            this.gridBgInner = undefined;
+        }
+    }
+    renderBackground(background, variant) {
+        if (!this.rootEl || !this.contentEl)
+            return;
+        this.clearBackdrop(background);
+        if (background === 'gradient') {
+            if (!this.gradientEl) {
+                this.gradientEl = document.createElement('db-random-gradient');
+                this.gradientEl.className = `${CLASS}__gradient-bg`;
+                this.gradientEl.setAttribute('height', '100%');
+                this.gradientEl.setAttribute('width', '100%');
+            }
+            const gradientTone = this.getAttribute('gradient-tone') || 'vivid';
+            const gradientAnimated = !this.hasAttribute('gradient-animated') || this.getAttribute('gradient-animated') !== 'false';
+            this.gradientEl.setAttribute('scheme', this.getAttribute('gradient-scheme') || VARIANT_SCHEMES[variant]);
+            this.gradientEl.setAttribute('tone', gradientTone);
+            this.gradientEl.setAttribute('animated', gradientAnimated ? 'true' : 'false');
+            if (this.gradientEl.parentElement !== this.rootEl) {
+                this.rootEl.replaceChildren(this.gradientEl);
+            }
+            if (this.contentEl.parentElement !== this.gradientEl) {
+                this.gradientEl.append(this.contentEl);
+            }
+            return;
+        }
+        // solid / animation / grid → 백드롭은 절대 위치 형제, 콘텐츠는 그 위에
+        const layers = [];
+        if (background === 'animation') {
+            const wrap = this.ensureAnimBg();
+            this.animBgInner?.setAttribute('type', this.getAttribute('animation-type') || 'graphite');
+            this.animBgInner?.setAttribute('theme', 'dark');
+            layers.push(wrap);
+        }
+        else if (background === 'grid') {
+            const wrap = 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', '');
+            layers.push(wrap);
+        }
+        // 구조가 이미 올바르면 재삽입하지 않는다 (백드롭 캔버스 애니메이션 재시작 방지)
+        const desired = [...layers, this.contentEl];
+        const current = Array.from(this.rootEl.children);
+        const same = current.length === desired.length && desired.every((node, i) => current[i] === node);
+        if (!same) {
+            this.rootEl.replaceChildren(...desired);
+        }
+    }
+    /** 장식 아이콘은 card 타입에서만 사용한다. */
+    syncIcon(type) {
+        if (!this.mainEl || !this.textEl || !this.iconEl)
+            return;
+        if (type !== 'card') {
+            this.iconEl.remove();
+            return;
+        }
+        this.iconEl.replaceChildren(createDbIcon(TYPE_ICONS.card, 32));
+        if (this.iconEl.parentElement !== this.mainEl) {
+            this.mainEl.insertBefore(this.iconEl, this.textEl);
+        }
+    }
+    /** floating 타입에서만 텍스트 상단에 배지 칩을 노출한다. */
+    syncBadge(type) {
+        if (!this.textEl || !this.badgeEl)
+            return;
+        if (type !== 'floating') {
+            this.badgeEl.remove();
+            return;
+        }
+        if (this.badgeEl.parentElement !== this.textEl) {
+            this.textEl.insertBefore(this.badgeEl, this.textEl.firstChild);
+        }
+    }
+    /** floating 타입에서 배너 이미지를 콘텐츠 상단(패딩 밖)에 렌더한다. */
+    syncImage(type, src) {
+        if (!this.contentEl || !this.imageEl || !this.mainEl)
+            return;
+        if (type !== 'floating' || !src) {
+            this.imageEl.remove();
+            return;
+        }
+        this.imageEl.src = src;
+        this.imageEl.alt = this.getAttribute('image-alt') || '';
+        if (this.imageEl.parentElement !== this.contentEl) {
+            this.contentEl.insertBefore(this.imageEl, this.mainEl);
+        }
+    }
+    /** topbar 타입에서 href 가 있으면 전체를 덮는 링크 오버레이를 렌더한다. */
+    syncLink(type, href) {
+        if (!this.contentEl)
+            return;
+        if (type !== 'topbar' || !href) {
+            this.linkEl?.remove();
+            return;
+        }
+        if (!this.linkEl) {
+            this.linkEl = document.createElement('a');
+            this.linkEl.className = `${CLASS}__link`;
+        }
+        this.linkEl.setAttribute('href', href);
+        const target = this.getAttribute('target');
+        if (target)
+            this.linkEl.setAttribute('target', target);
+        else
+            this.linkEl.removeAttribute('target');
+        this.linkEl.setAttribute('aria-label', this.titleEl?.textContent || '배너 링크');
+        if (this.linkEl.parentElement !== this.contentEl) {
+            this.contentEl.append(this.linkEl);
+        }
+    }
+    /** show-countdown + end-date 가 있을 때만 카운트다운을 마운트한다. */
+    syncCountdown(show, endDate) {
+        if (!this.textEl || !this.countdownWrapEl)
+            return;
+        if (!show || !endDate) {
+            this.countdownWrapEl.remove();
+            return;
+        }
+        if (!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', endDate);
+        if (this.countdownWrapEl.parentElement !== this.textEl) {
+            this.textEl.append(this.countdownWrapEl);
+        }
+    }
+    updateUI() {
+        if (!this.visible || this.getAttribute('open') === 'false') {
+            this.style.display = 'none';
+            return;
+        }
+        this.style.display = 'block';
+        const type = this.getType();
+        const variant = this.getVariant();
+        const size = this.getSize();
+        const title = this.getAttribute('title') || DEFAULT_TITLES[type];
+        const subtitle = this.getAttribute('subtitle') || DEFAULT_SUBTITLES[type];
+        const ctaText = this.getAttribute('cta-text') || DEFAULT_CTA[type];
+        const autoClose = this.getBool('auto-close');
+        const closeDelay = Math.max(Number(this.getAttribute('close-delay') || 5000), 1000);
+        const background = this.getBackground();
+        const gradientTone = this.getAttribute('gradient-tone') || 'vivid';
+        const showCountdown = this.getBool('show-countdown');
+        const countdownEndDate = this.getAttribute('countdown-end-date');
+        if (this.rootEl) {
+            this.rootEl.className = [
+                CLASS,
+                `${CLASS}--type-${type}`,
+                `${CLASS}--variant-${variant}`,
+                `${CLASS}--size-${size}`,
+                `${CLASS}--bg-${background}`,
+                autoClose && `${CLASS}--auto-close`,
+                background === 'gradient' && `${CLASS}--with-gradient`,
+                background === 'gradient' && gradientTone === 'light' && `${CLASS}--gradient-light`,
+            ]
+                .filter(Boolean)
+                .join(' ');
+        }
+        this.renderBackground(background, variant);
+        this.syncIcon(type);
+        this.syncBadge(type);
+        this.syncImage(type, this.getAttribute('image'));
+        this.syncLink(type, this.getAttribute('href'));
+        if (this.titleEl)
+            this.titleEl.textContent = title;
+        if (this.subtitleEl)
+            this.subtitleEl.textContent = subtitle;
+        this.syncCountdown(showCountdown, countdownEndDate);
+        // topbar 는 전체가 링크이므로 CTA 버튼을 숨긴다.
+        if (this.actionsEl)
+            this.actionsEl.hidden = type === 'topbar';
+        if (this.ctaEl) {
+            this.ctaEl.textContent = ctaText;
+            this.ctaEl.setAttribute('size', this.ctaButtonSize(type, size));
+            if (type === 'floating')
+                this.ctaEl.setAttribute('full-width', '');
+            else
+                this.ctaEl.removeAttribute('full-width');
+        }
+        if (this.progressEl)
+            this.progressEl.hidden = !autoClose;
+        if (this.progressBarEl && autoClose) {
+            this.progressBarEl.style.width = `${this.progress}%`;
+        }
+        this.stopAutoClose();
+        if (autoClose)
+            this.startAutoClose(closeDelay);
+    }
+}
+if (!customElements.get('db-ad-banner'))
+    customElements.define('db-ad-banner', DbAdBanner);
+
+export { DbAdBanner };

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

@@ -1 +1,149 @@
-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};
+import './db-button.js';
+import { createDbIcon } from './db-icons.js';
+
+const CLASS = '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(variant) {
+        if (variant === 'success')
+            return 'circle-checked';
+        if (variant === 'warning')
+            return 'warning-filled';
+        if (variant === 'danger')
+            return 'error-filled';
+        return 'info-filled';
+    }
+    parseActionButtons() {
+        const raw = this.getAttribute('action-buttons');
+        if (!raw)
+            return [];
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    render() {
+        const variant = this.getAttribute('variant') || 'default';
+        const size = this.getAttribute('size') || 'm';
+        const showIcon = this.getAttribute('show-icon') !== 'false';
+        const closable = this.getAttribute('closable') !== 'false';
+        const title = this.getAttribute('title')?.trim() || '';
+        const messageAttr = this.getAttribute('message')?.trim() || '';
+        const actionLabel = this.getAttribute('action-label');
+        const actionVariant = this.getAttribute('action-variant') || 'tertiary';
+        const actionButtons = this.parseActionButtons();
+        const hasMessage = Boolean(messageAttr);
+        const hasTitle = Boolean(title);
+        const isSingleLine = (hasTitle && !hasMessage) || (!hasTitle && hasMessage);
+        const actions = actionButtons.length > 0
+            ? actionButtons
+            : actionLabel
+                ? [{ label: actionLabel, variant: actionVariant }]
+                : [];
+        this.className = [
+            CLASS,
+            `${CLASS}--${variant}`,
+            `${CLASS}--${size}`,
+            showIcon && `${CLASS}--with-icon`,
+            closable && `${CLASS}--closable`,
+            isSingleLine && `${CLASS}--text-single`,
+            actions.length > 0 && `${CLASS}--has-actions`,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        this.setAttribute('role', 'alert');
+        this.setAttribute('aria-live', 'polite');
+        this.querySelector(`.${CLASS}__content`)?.remove();
+        this.querySelector(`.${CLASS}__actions`)?.remove();
+        Array.from(this.childNodes).forEach((node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                node.remove();
+            }
+        });
+        const content = document.createElement('div');
+        content.className = `${CLASS}__content`;
+        if (showIcon) {
+            const icon = document.createElement('div');
+            icon.className = `${CLASS}__icon`;
+            icon.append(createDbIcon(this.getIconName(variant), size === 's' ? 16 : size === 'l' ? 24 : 20));
+            content.append(icon);
+        }
+        const body = document.createElement('div');
+        body.className = `${CLASS}__body`;
+        if (hasTitle) {
+            const heading = document.createElement('div');
+            heading.className = `${CLASS}__title`;
+            heading.textContent = title;
+            body.append(heading);
+        }
+        if (hasMessage) {
+            const text = document.createElement('div');
+            text.className = `${CLASS}__message`;
+            text.textContent = messageAttr;
+            body.append(text);
+        }
+        content.append(body);
+        if (actions.length > 0) {
+            const actionsEl = document.createElement('div');
+            actionsEl.className = `${CLASS}__actions`;
+            const buttonsWrap = document.createElement('div');
+            buttonsWrap.className = `${CLASS}__action-buttons`;
+            actions.forEach((action, index) => {
+                const button = document.createElement('db-button');
+                button.setAttribute('variant', action.variant || 'tertiary');
+                button.setAttribute('size', action.size || size);
+                button.textContent = action.label;
+                if (action.disabled)
+                    button.setAttribute('disabled', '');
+                button.addEventListener('db-click', () => {
+                    this.dispatchEvent(new CustomEvent('db-action', {
+                        bubbles: true,
+                        composed: true,
+                        detail: { index, label: action.label },
+                    }));
+                });
+                buttonsWrap.append(button);
+            });
+            actionsEl.append(buttonsWrap);
+            content.append(actionsEl);
+        }
+        if (closable) {
+            const close = document.createElement('button');
+            close.type = 'button';
+            close.className = `${CLASS}__close`;
+            close.setAttribute('aria-label', '알림 닫기');
+            close.append(createDbIcon('close', 20));
+            close.addEventListener('click', () => {
+                this.hidden = true;
+                this.dispatchEvent(new CustomEvent('db-close', { bubbles: true, composed: true }));
+            });
+            content.append(close);
+        }
+        this.replaceChildren(content);
+    }
+}
+if (!customElements.get('db-alert'))
+    customElements.define('db-alert', DbAlert);
+
+export { DbAlert };