@designbasekorea/ui-wc 0.5.5 → 0.5.6

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

@@ -1 +1,601 @@
-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};
+const CLASS = 'designbase-wc-animation-text';
+class DbAnimationText extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.timers = [];
+        this.displayText = '';
+        this.isVisible = false;
+        this.isAnimating = false;
+        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() {
+        if (!this.isConnected)
+            return;
+        this.syncFromAttributes();
+        this.setupTrigger();
+    }
+    getText() {
+        return this.getAttribute('text') || this.textContent?.trim() || '';
+    }
+    getRotateTexts() {
+        const raw = this.getAttribute('texts');
+        if (raw) {
+            const list = raw
+                .split(',')
+                .map((s) => s.trim())
+                .filter(Boolean);
+            if (list.length)
+                return list;
+        }
+        const single = this.getText();
+        return single ? [single] : [];
+    }
+    getLongestText() {
+        return this.getRotateTexts().reduce((a, b) => (b.length > a.length ? b : a), '');
+    }
+    getType() {
+        const value = this.getAttribute('type') || 'fade';
+        const allowed = [
+            'typing',
+            'fade',
+            'slide',
+            'bounce',
+            'shake',
+            'glow',
+            'gradient',
+            'wave',
+            'flip',
+            'scale',
+            'decode',
+            'roll',
+            'reveal',
+            'scroll-fill',
+            'text-rotate',
+        ];
+        return allowed.includes(value) ? value : 'fade';
+    }
+    getTrigger() {
+        const value = this.getAttribute('trigger') || 'mount';
+        return ['mount', 'hover', 'click', 'in-view'].includes(value) ? value : 'mount';
+    }
+    ensureStructure() {
+        if (this.ghostEl)
+            return;
+        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', () => {
+            if (this.getTrigger() !== 'hover' || this.hasAttribute('disabled'))
+                return;
+            // roll 은 정적 렌더 + CSS :hover 로만 동작한다. 재렌더 시 transition 이 리셋된다.
+            if (this.getType() === 'roll')
+                return;
+            this.isVisible = true;
+            this.startAnimation();
+            this.syncClasses();
+        });
+        this.addEventListener('mouseleave', () => {
+            if (this.getTrigger() !== 'hover')
+                return;
+            if (this.getType() === 'roll')
+                return;
+            this.isVisible = false;
+            this.isAnimating = false;
+            this.clearTimers();
+            const type = this.getType();
+            if (type === 'typing' || type === 'decode') {
+                this.displayText = this.getText();
+            }
+            this.renderLayer();
+            this.syncClasses();
+        });
+        this.addEventListener('click', () => {
+            if (this.hasAttribute('disabled'))
+                return;
+            if (this.getTrigger() === 'click') {
+                this.isVisible = !this.isVisible;
+                if (this.isVisible)
+                    this.startAnimation();
+                else {
+                    this.isAnimating = false;
+                    this.clearTimers();
+                    const type = this.getType();
+                    if (type === 'typing' || type === 'decode')
+                        this.displayText = this.getText();
+                    this.renderLayer();
+                }
+                this.syncClasses();
+            }
+            if (this.hasAttribute('clickable')) {
+                this.dispatchEvent(new CustomEvent('db-click', { bubbles: true, composed: true }));
+            }
+        });
+    }
+    clearTimers() {
+        this.timers.forEach((id) => window.clearInterval(id));
+        this.timers.forEach((id) => window.clearTimeout(id));
+        this.timers = [];
+    }
+    syncFromAttributes() {
+        const text = this.getText();
+        const type = this.getType();
+        const trigger = this.getTrigger();
+        const speed = Number(this.getAttribute('speed') || 1000);
+        const repeat = Number(this.getAttribute('repeat') || 1);
+        const customColor = this.getAttribute('custom-color');
+        const gradientColors = (this.getAttribute('gradient-colors') || '#667eea,#764ba2').split(',');
+        const waveColors = (this.getAttribute('wave-colors') || '#ff6b6b,#4ecdc4,#45b7d1,#96ceb4,#feca57').split(',');
+        const glowColor = this.getAttribute('glow-color') || '#667eea';
+        this.className = [
+            CLASS,
+            type !== 'typing' && `${CLASS}--${type}`,
+            `${CLASS}--${this.getAttribute('size') || 'm'}`,
+            `${CLASS}--${this.getAttribute('color') || 'primary'}`,
+            `${CLASS}--${this.getAttribute('weight') || 'normal'}`,
+            `${CLASS}--${this.getAttribute('align') || 'left'}`,
+            `${CLASS}--${this.getAttribute('direction') || 'left'}`,
+            this.isVisible && `${CLASS}--visible`,
+            this.isAnimating && `${CLASS}--animating`,
+            (this.hasAttribute('clickable') || trigger === 'click') && `${CLASS}--clickable`,
+            this.hasAttribute('disabled') && `${CLASS}--disabled`,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        this.style.setProperty('--db-animation-speed', `${Number.isFinite(speed) ? speed : 1000}ms`);
+        this.style.setProperty('--db-animation-iteration-count', repeat === 0 ? 'infinite' : String(repeat));
+        if (customColor)
+            this.style.setProperty('--db-text-custom', customColor);
+        this.style.setProperty('--db-wave-colors', waveColors.join(', '));
+        this.style.setProperty('--db-glow-color', glowColor);
+        // 그라디언트 텍스트는 실제 텍스트가 들어있는 레이어(span)에 적용해야 한다.
+        // (host에 background-clip:text를 걸면 자식 레이어 텍스트는 투명하게만 보인다)
+        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');
+        if (this.layerEl) {
+            if (type === 'gradient' && gradientColors.length >= 2) {
+                this.layerEl.style.backgroundImage = `linear-gradient(45deg, ${gradientColors.join(', ')})`;
+            }
+            else {
+                this.layerEl.style.removeProperty('background-image');
+            }
+        }
+        if ((type === 'typing' || type === 'decode') && trigger === 'mount' && !this.isAnimating) {
+            this.displayText = '';
+        }
+        else if (!this.isAnimating) {
+            this.displayText = text;
+        }
+        // typing/decode 는 글자 수가 변하고 roll 은 1줄 높이를 고정해야 하므로
+        // ghost 로 공간을 예약하고 layer 를 절대배치로 겹친다.
+        // 그 외 타입(fade·reveal·scroll-fill 등)은 일반 흐름으로 렌더해
+        // 문장 길이(줄바꿈)에 따라 호스트 높이가 자연스럽게 늘어나도록 한다.
+        const overlay = type === 'typing' || type === 'decode' || type === 'roll' || type === 'text-rotate';
+        const whiteSpace = type === 'roll' || type === 'text-rotate' ? 'nowrap' : overlay ? 'pre-wrap' : '';
+        if (this.ghostEl) {
+            if (overlay) {
+                this.ghostEl.textContent = type === 'text-rotate' ? this.getLongestText() : text;
+                this.ghostEl.style.display = 'inline-block';
+                this.ghostEl.style.whiteSpace = whiteSpace;
+                // 타이핑은 완료 시 텍스트가 폭을 꽉 채워 캐럿이 다음 줄로 밀리지 않도록 여유 확보
+                this.ghostEl.style.paddingRight = type === 'typing' ? '0.25em' : '';
+            }
+            else {
+                this.ghostEl.textContent = '';
+                this.ghostEl.style.display = 'none';
+            }
+        }
+        if (this.layerEl) {
+            this.layerEl.className = [
+                `${CLASS}__layer`,
+                type === 'typing' && `${CLASS}--typing`,
+                this.isAnimating && type === 'typing' && `${CLASS}--animating`,
+            ]
+                .filter(Boolean)
+                .join(' ');
+            if (overlay) {
+                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 = whiteSpace;
+            }
+            else {
+                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(`${CLASS}--visible`, this.isVisible);
+        this.classList.toggle(`${CLASS}--animating`, this.isAnimating);
+    }
+    setupTrigger() {
+        this.clearTimers();
+        this.observer?.disconnect();
+        this.teardownScrollFill();
+        this.rotateObserver?.disconnect();
+        this.rotateObserver = undefined;
+        this.rotateToken++; // 대기 중이던 이전 rotate 예약 무효화
+        const trigger = this.getTrigger();
+        const delay = Number(this.getAttribute('delay') || 0);
+        // scroll-fill 은 스크롤 위치에 연동되므로 별도 핸들러로 처리한다.
+        if (this.getType() === 'scroll-fill') {
+            this.setupScrollFill();
+            return;
+        }
+        // text-rotate 는 타이머로 자동 순환한다.
+        if (this.getType() === 'text-rotate') {
+            this.setupTextRotate();
+            return;
+        }
+        if (trigger === 'mount') {
+            const timer = window.setTimeout(() => {
+                this.isVisible = true;
+                this.syncClasses();
+                this.startAnimation();
+            }, delay);
+            this.timers.push(timer);
+            return;
+        }
+        if (trigger === 'in-view') {
+            this.observer = new IntersectionObserver((entries) => {
+                if (entries[0]?.isIntersecting) {
+                    window.setTimeout(() => {
+                        this.isVisible = true;
+                        this.syncClasses();
+                        this.startAnimation();
+                    }, delay);
+                    this.observer?.disconnect();
+                }
+            });
+            this.observer.observe(this);
+        }
+    }
+    setupTextRotate() {
+        const texts = this.getRotateTexts();
+        if (texts.length <= 1)
+            return; // 순환할 텍스트가 없으면 정적 표시
+        // 재설정마다 토큰을 올려, 폰트 로드 후 뒤늦게 실행되는 이전 예약을 무효화한다.
+        const token = ++this.rotateToken;
+        const start = () => {
+            if (token !== this.rotateToken || !this.isConnected || this.getType() !== 'text-rotate')
+                return;
+            const track = this.layerEl?.querySelector(`.${CLASS}__rotate-track`);
+            if (!track || !track.firstElementChild)
+                return;
+            const items = Array.from(track.children);
+            const duration = Number(this.getAttribute('speed') || 500);
+            const interval = Math.max(duration + 200, Number(this.getAttribute('interval') || 2000));
+            let index = 0;
+            // 줄 높이·폭은 폰트 로드 타이밍에 따라 달라지므로 매번 실측한다.
+            const stepOf = () => items[0].getBoundingClientRect().height;
+            const widthOf = (i) => items[i].getBoundingClientRect().width;
+            // 현재 index 위치로 트랙/호스트를 맞춘다. animate=false 면 즉시(트랜지션 없이) 스냅.
+            const apply = (animate) => {
+                const step = stepOf();
+                if (!step)
+                    return;
+                const ease = 'cubic-bezier(0.22, 1, 0.36, 1)';
+                track.style.transition = animate ? `transform ${duration}ms ${ease}` : 'none';
+                track.style.transform = `translateY(-${index * step}px)`;
+                this.style.transition = animate ? `width ${duration}ms ${ease}` : 'none';
+                this.style.width = `${widthOf(index)}px`;
+            };
+            apply(false);
+            const advance = () => {
+                index += 1;
+                apply(true);
+                if (index === items.length - 1) {
+                    // 마지막 복제본(=첫 항목) 위치 → 트랜지션 종료 후 순간 이동으로 원점 복귀
+                    const reset = window.setTimeout(() => {
+                        index = 0;
+                        apply(false);
+                    }, duration);
+                    this.timers.push(reset);
+                }
+            };
+            const timer = window.setInterval(advance, interval);
+            this.timers.push(timer);
+            // 폰트 로드 등으로 항목 크기가 바뀌면(초기 폴백→웹폰트) 현재 위치를 다시 맞춰
+            // 세로 어긋남·가로 잘림을 보정한다. 최초 observe 콜백(초기 크기)은 건너뛴다.
+            this.rotateObserver?.disconnect();
+            let firstObserve = true;
+            const ro = new ResizeObserver(() => {
+                if (firstObserve) {
+                    firstObserve = false;
+                    return;
+                }
+                apply(false);
+            });
+            ro.observe(items[0]);
+            this.rotateObserver = ro;
+        };
+        // 웹폰트 로드 후 측정을 시도하되, ready 가 조기 resolve 되는 경우는 위 ResizeObserver 가 보정한다.
+        if (typeof document !== 'undefined' && document.fonts) {
+            document.fonts.ready.then(() => window.requestAnimationFrame(start));
+        }
+        else {
+            window.requestAnimationFrame(start);
+        }
+    }
+    setupScrollFill() {
+        this.scrollHandler = () => {
+            if (this.rafId != null)
+                return;
+            this.rafId = window.requestAnimationFrame(() => {
+                this.rafId = undefined;
+                this.updateScrollFill();
+            });
+        };
+        window.addEventListener('scroll', this.scrollHandler, { passive: true });
+        window.addEventListener('resize', this.scrollHandler, { passive: true });
+        this.updateScrollFill();
+    }
+    teardownScrollFill() {
+        if (this.scrollHandler) {
+            window.removeEventListener('scroll', this.scrollHandler);
+            window.removeEventListener('resize', this.scrollHandler);
+            this.scrollHandler = undefined;
+        }
+        if (this.rafId != null) {
+            window.cancelAnimationFrame(this.rafId);
+            this.rafId = undefined;
+        }
+    }
+    updateScrollFill() {
+        if (this.getType() !== 'scroll-fill' || this.wordEls.length === 0)
+            return;
+        const clamp = (v) => Math.max(0, Math.min(1, v));
+        const rect = this.getBoundingClientRect();
+        const vh = window.innerHeight || document.documentElement.clientHeight;
+        // 요소 상단이 뷰포트 85% 지점에 오면 시작, 35% 지점에 오면 완료
+        const start = vh * 0.85;
+        const end = vh * 0.35;
+        const progress = clamp((start - rect.top) / (start - end || 1));
+        const n = this.wordEls.length;
+        const softness = 4; // 몇 단어에 걸쳐 부드럽게 채워질지
+        const minOpacity = 0.18;
+        this.wordEls.forEach((el, i) => {
+            const p = clamp((progress * (n + softness) - i) / softness);
+            el.style.opacity = String(minOpacity + (1 - minOpacity) * p);
+        });
+    }
+    startAnimation() {
+        const type = this.getType();
+        const text = this.getText();
+        this.isAnimating = true;
+        this.syncClasses();
+        this.syncFromAttributes();
+        if (type === 'typing') {
+            this.startTyping(0);
+            return;
+        }
+        if (type === 'decode') {
+            this.startDecoding(0);
+            return;
+        }
+        // reveal 은 --visible 클래스로 CSS stagger 가 재생되므로 재빌드 루프를 타지 않는다.
+        // roll 은 이미 정적으로 렌더되어 있고 CSS :hover 로만 동작하므로 재렌더하지 않는다.
+        if (type === 'reveal' || type === 'scroll-fill' || type === 'roll') {
+            this.displayText = text;
+            if (type !== 'roll')
+                this.renderLayer();
+            this.isAnimating = false;
+            this.syncClasses();
+            return;
+        }
+        this.displayText = text;
+        this.renderLayer();
+        const speed = Number(this.getAttribute('speed') || 1000);
+        const timer = window.setTimeout(() => {
+            this.isAnimating = false;
+            this.syncClasses();
+            this.syncFromAttributes();
+        }, speed);
+        this.timers.push(timer);
+    }
+    startTyping(iteration) {
+        const text = this.getText();
+        const speed = Number(this.getAttribute('speed') || 1000);
+        const repeat = Number(this.getAttribute('repeat') || 1);
+        this.displayText = '';
+        this.renderLayer();
+        let currentIndex = 0;
+        const interval = window.setInterval(() => {
+            if (currentIndex >= text.length) {
+                window.clearInterval(interval);
+                if (repeat === 0 || iteration < repeat - 1) {
+                    const timer = window.setTimeout(() => this.startTyping(iteration + 1), 500);
+                    this.timers.push(timer);
+                }
+                else {
+                    this.isAnimating = false;
+                    this.syncClasses();
+                }
+                return;
+            }
+            this.displayText = text.slice(0, currentIndex + 1);
+            this.renderLayer();
+            currentIndex += 1;
+        }, Math.max(16, speed / Math.max(text.length, 1)));
+        this.timers.push(interval);
+    }
+    startDecoding(iteration) {
+        const text = this.getText();
+        const repeat = Number(this.getAttribute('repeat') || 1);
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+';
+        let iterations = 0;
+        const interval = window.setInterval(() => {
+            this.displayText = text
+                .split('')
+                .map((char, index) => {
+                if (index < iterations)
+                    return text[index];
+                return characters[Math.floor(Math.random() * characters.length)] || char;
+            })
+                .join('');
+            this.renderLayer();
+            if (iterations >= text.length) {
+                window.clearInterval(interval);
+                this.displayText = text;
+                this.renderLayer();
+                if (repeat === 0 || iteration < repeat - 1) {
+                    const timer = window.setTimeout(() => this.startDecoding(iteration + 1), 500);
+                    this.timers.push(timer);
+                }
+                else {
+                    this.isAnimating = false;
+                    this.syncClasses();
+                }
+            }
+            iterations += 1 / 3;
+        }, 30);
+        this.timers.push(interval);
+    }
+    renderLayer() {
+        if (!this.layerEl)
+            return;
+        const type = this.getType();
+        const text = this.getText();
+        const visible = this.isVisible || this.isAnimating;
+        // Reveal / Scroll-fill: 텍스트를 단어 단위 span 으로 렌더한다.
+        // (reveal 은 CSS stagger 애니메이션, scroll-fill 은 스크롤 연동 투명도)
+        if (type === 'reveal' || type === 'scroll-fill') {
+            this.wordEls = [];
+            const frag = document.createDocumentFragment();
+            const tokens = text.split(/(\s+)/);
+            let wordIndex = 0;
+            for (const token of tokens) {
+                if (token === '')
+                    continue;
+                if (/^\s+$/.test(token)) {
+                    frag.appendChild(document.createTextNode(token));
+                    continue;
+                }
+                const span = document.createElement('span');
+                span.className = `${CLASS}__word`;
+                span.textContent = token;
+                if (type === 'reveal')
+                    span.style.animationDelay = `${wordIndex * 0.06}s`;
+                this.wordEls.push(span);
+                frag.appendChild(span);
+                wordIndex += 1;
+            }
+            this.layerEl.replaceChildren(frag);
+            if (type === 'scroll-fill')
+                this.updateScrollFill();
+            return;
+        }
+        // Text-rotate: 여러 텍스트를 세로로 쌓아 일정 간격으로 위로 롤링하며 순환한다.
+        if (type === 'text-rotate') {
+            const texts = this.getRotateTexts();
+            const list = texts.length ? texts : [text];
+            const track = document.createElement('span');
+            track.className = `${CLASS}__rotate-track`;
+            const build = (t) => {
+                const s = document.createElement('span');
+                s.className = `${CLASS}__rotate-item`;
+                s.textContent = t;
+                return s;
+            };
+            list.forEach((t) => track.appendChild(build(t)));
+            // 마지막 → 첫 항목으로 끊김 없이 순환하도록 첫 항목 복제본을 덧붙인다.
+            if (list.length > 1)
+                track.appendChild(build(list[0]));
+            this.layerEl.replaceChildren(track);
+            return;
+        }
+        // Roll: 동일 텍스트 2개를 세로로 쌓고 hover 시 위로 굴려 교체한다.
+        if (type === 'roll') {
+            const track = document.createElement('span');
+            track.className = `${CLASS}__roll-track`;
+            const first = document.createElement('span');
+            first.className = `${CLASS}__roll-item`;
+            first.textContent = text;
+            const second = first.cloneNode(true);
+            track.append(first, second);
+            this.layerEl.replaceChildren(track);
+            return;
+        }
+        // Typing: 타이핑된 부분 텍스트 뒤에 인라인 캐럿을 붙여 텍스트를 따라가게 한다.
+        // 캐럿은 타이핑 중(isAnimating)에만 표시하고, 완료되면 제거한다.
+        if (type === 'typing') {
+            this.layerEl.textContent = this.displayText;
+            if (this.isAnimating) {
+                const caret = document.createElement('span');
+                caret.className = `${CLASS}__caret`;
+                caret.setAttribute('aria-hidden', 'true');
+                this.layerEl.appendChild(caret);
+            }
+            return;
+        }
+        if ((type === 'wave' || type === 'shake') && visible) {
+            this.layerEl.replaceChildren(...text.split('').map((char, index) => {
+                const span = document.createElement('span');
+                span.style.animationDelay = `${index * 0.05}s`;
+                span.style.display = 'inline-block';
+                span.textContent = char === ' ' ? '\u00A0' : char;
+                return span;
+            }));
+            return;
+        }
+        this.layerEl.textContent = this.displayText || (visible ? text : '');
+    }
+}
+if (!customElements.get('db-animation-text')) {
+    customElements.define('db-animation-text', DbAnimationText);
+}
+
+export { DbAnimationText };