@designbasekorea/ui-wc 0.5.3 → 0.5.6

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

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