@designbasekorea/ui-wc 0.5.5 → 0.5.6

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

@@ -1 +1,402 @@
-const t="designbase-wc-marquee";function isImageItem(t){return"object"==typeof t&&null!==t&&"string"==typeof t.src}class DbMarquee extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.rows=[],this.rowCount=0,this.containerWidth=0,this.gap=24,this.scrollVelocityEnabled=!1,this.rafId=0,this.lastFrameTime=0,this.lastScrollY=0,this.smoothedScrollV=0,this.baseDurationSec=12,this.reduceMotion=!1,this.boundMeasure=()=>this.measure(),this.boundFrame=t=>this.frame(t)}static get observedAttributes(){return["items","direction","duration","speed","size","variant","bordered","pause-on-hover","fade-edges","fade-width","edge-padding","gap","align-y","row-count","row-gap","scroll-velocity","scroll-boost","aria-label"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.reduceMotion="undefined"!=typeof window&&"function"==typeof window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.build(),this.bindResize()),this.updateUI()}disconnectedCallback(){this.resizeObserver?.disconnect(),this.stopScrollEngine(),this.unbindImageListeners()}attributeChangedCallback(){this.built&&this.updateUI()}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const r=this.getAttribute(t);return""===r||"true"===r}parseItems(){try{const t=this.getAttribute("items"),e=t?JSON.parse(t):[];if(Array.isArray(e)&&e.length>0)return e.filter(t=>"string"==typeof t||isImageItem(t))}catch{}const t=Array.from(this.children).filter(t=>!t.hasAttribute("data-wc-internal"));return t.length>0?t.map(t=>t.textContent?.trim()||""):[]}itemToText(t){return isImageItem(t)?t.alt||"":t}build(){this.containerEl=document.createElement("div"),this.srOnlyEl=document.createElement("span"),this.srOnlyEl.className=`${t}__sr-only`,this.rowsEl=document.createElement("div"),this.rowsEl.className=`${t}__rows`,this.containerEl.append(this.srOnlyEl,this.rowsEl),this.append(this.containerEl)}bindResize(){this.resizeObserver=new ResizeObserver(()=>this.measure()),this.containerEl&&this.resizeObserver.observe(this.containerEl)}reconcileRows(e,r){if(this.rowsEl){for(this.rowCount=e;this.rows.length<e;){const e=document.createElement("div");e.className=`${t}__row`;const r=document.createElement("div");r.className=`${t}__track`;const s=document.createElement("div");s.className=`${t}__group`,s.setAttribute("aria-hidden","true"),r.append(s),e.append(r),this.rowsEl.append(e),this.rows.push({rowEl:e,trackEl:r,baseGroupEl:s,baseGroupWidth:0,duplicateCount:0,baseDir:1,x:0,dirState:1})}for(;this.rows.length>e;){const t=this.rows.pop();t?.rowEl.remove()}this.rows.forEach((e,s)=>{e.baseDir=s%2==0?r:-r;const i=e.baseDir<0;e.rowEl.classList.toggle(`${t}__row--right`,i),e.rowEl.style.setProperty("--db-marquee-row-index",String(s))}),this.resizeObserver&&this.rows.forEach(t=>this.resizeObserver?.observe(t.baseGroupEl))}}measure(){this.containerWidth=Math.ceil(this.containerEl?.clientWidth??0),this.rows.forEach(t=>{t.baseGroupWidth=Math.ceil(t.baseGroupEl.scrollWidth??0),t.rowEl.style.setProperty("--db-marquee-shift",`${t.baseGroupWidth+this.gap}px`),this.reconcileDuplicates(t)}),this.syncReadyState()}unbindImageListeners(){this.rows.forEach(t=>{t.baseGroupEl.querySelectorAll("img").forEach(t=>{t.removeEventListener("load",this.boundMeasure),t.removeEventListener("error",this.boundMeasure)})})}bindImageListeners(){this.rows.forEach(t=>{t.baseGroupEl.querySelectorAll("img").forEach(t=>{t.complete||(t.addEventListener("load",this.boundMeasure),t.addEventListener("error",this.boundMeasure))})})}renderItem(e){const r=document.createElement("div");if(r.className=`${t}__item`,isImageItem(e)){r.classList.add(`${t}__item--image`);const s=document.createElement("img");if(s.className=`${t}__image`,s.src=e.src,s.alt=e.alt||"",s.loading="lazy",s.decoding="async",e.height&&(s.style.height=`${e.height}px`),e.href){const i=document.createElement("a");i.className=`${t}__link`,i.href=e.href,i.setAttribute("tabindex","-1"),i.append(s),r.append(i)}else r.append(s);return r}return r.textContent=e,r}renderGroup(e,r){const s=r??document.createElement("div");return s.className=`${t}__group`,s.setAttribute("aria-hidden","true"),s.replaceChildren(...e.map(t=>this.renderItem(t))),s}buildBase(t){this.rows.forEach(e=>{for(this.renderGroup(t,e.baseGroupEl);e.trackEl.children.length>1;)e.trackEl.lastElementChild?.remove();e.duplicateCount=0})}baseImagesReady(t){return Array.from(t.baseGroupEl.querySelectorAll("img")).every(t=>t.complete)}reconcileDuplicates(t){const e=t.baseGroupWidth>0&&this.baseImagesReady(t)?Math.max(1,Math.ceil(2*this.containerWidth/t.baseGroupWidth)):1;let r=t.trackEl.children.length-1;if(r===e)return void(t.duplicateCount=e);const s=this.parseItems();for(;r<e;)t.trackEl.append(this.renderGroup(s)),r+=1;for(;r>e;)t.trackEl.lastElementChild?.remove(),r-=1;t.duplicateCount=e}syncReadyState(){if(!this.containerEl)return;const e=this.rows.length>0&&this.rows.every(t=>t.baseGroupWidth>0);this.containerEl.classList.toggle(`${t}--ready`,e)}startScrollEngine(){this.rafId||this.reduceMotion||(this.lastScrollY="undefined"!=typeof window?window.scrollY:0,this.lastFrameTime=0,this.smoothedScrollV=0,this.rows.forEach(t=>{t.x=0,t.dirState=1}),this.rafId=requestAnimationFrame(this.boundFrame))}stopScrollEngine(){this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=0),this.rows.forEach(t=>{t.trackEl.style.transform=""})}frame(t){if(!this.scrollVelocityEnabled)return void(this.rafId=0);this.lastFrameTime||(this.lastFrameTime=t);const e=Math.min((t-this.lastFrameTime)/1e3,.05);this.lastFrameTime=t;const r="undefined"!=typeof window?window.scrollY:0,s=e>0?(r-this.lastScrollY)/e:0;this.lastScrollY=r;const i=1-Math.exp(-e/.12);this.smoothedScrollV+=(s-this.smoothedScrollV)*i;const a=Math.max(Number(this.getAttribute("scroll-boost")||6),0),o=this.smoothedScrollV/800*(a/6);this.rows.forEach(t=>{const r=t.baseGroupWidth+this.gap;if(r<=0)return;const s=r/this.baseDurationSec;let i=-t.baseDir*s*e;o<0?t.dirState=-1:o>0&&(t.dirState=1),i*=t.dirState,i+=i*Math.abs(o);let a=(t.x+i)%r;a>0&&(a-=r),t.x=a,t.trackEl.style.transform=`translate3d(${a}px, 0, 0)`}),this.rafId=requestAnimationFrame(this.boundFrame)}updateUI(){const e=this.parseItems();if(0===e.length)return this.stopScrollEngine(),void(this.hidden=!0);this.hidden=!1;const r=this.getAttribute("direction")||"left",s="right"===r?-1:1,i=Math.max(Number(this.getAttribute("duration")||12),1),a=Number(this.getAttribute("speed")||1),o=i/(Number.isFinite(a)&&a>0?a:1);this.baseDurationSec=o;const n=this.getAttribute("size")||"m",l=this.getAttribute("variant")||"default",h=this.getAttribute("align-y")||"center",c=this.getBool("fade-edges"),d=Math.max(Number(this.getAttribute("fade-width")||48),0),u=this.getAttribute("edge-padding"),m=null!==u&&""!==u?Math.max(Number(u),0):c?d:0,b=Math.max(Number(this.getAttribute("gap")||24),0);this.gap=b;const p=Math.round(Number(this.getAttribute("row-count")||1)),g=Number.isFinite(p)?Math.min(Math.max(p,1),8):1,E=Math.max(Number(this.getAttribute("row-gap")||12),0),f=this.getBool("scroll-velocity");this.scrollVelocityEnabled=f;const w=this.getBool("pause-on-hover",!0),y=this.hasAttribute("bordered")?this.getBool("bordered"):"outlined"===l,v=this.getAttribute("aria-label")||"Scrolling content";if(this.containerEl&&(this.containerEl.className=[t,`${t}--size-${n}`,`${t}--variant-${l}`,`${t}--align-${h}`,w&&!f&&`${t}--pause-on-hover`,c&&`${t}--fade-edges`,"right"===r&&`${t}--right`,g>1&&`${t}--multi-row`,f&&`${t}--scroll-velocity`,y&&`${t}--bordered`].filter(Boolean).join(" "),this.containerEl.style.setProperty("--db-marquee-duration",`${o}s`),this.containerEl.style.setProperty("--db-marquee-gap",`${b}px`),this.containerEl.style.setProperty("--db-marquee-row-gap",`${E}px`),this.containerEl.style.setProperty("--db-marquee-fade-width",`${d}px`),this.containerEl.style.setProperty("--db-marquee-edge-padding",`${m}px`),this.containerEl.setAttribute("role","region"),this.containerEl.setAttribute("aria-label",v)),this.srOnlyEl){const t=e.map(t=>this.itemToText(t)).filter(Boolean).join(" • ");this.srOnlyEl.textContent=t||v}this.reconcileRows(g,s),this.buildBase(e),this.bindImageListeners(),this.measure(),f?this.startScrollEngine():this.stopScrollEngine()}}customElements.get("db-marquee")||customElements.define("db-marquee",DbMarquee);export{DbMarquee};
+const CLASS = 'designbase-wc-marquee';
+function isImageItem(item) {
+    return typeof item === 'object' && item !== null && typeof item.src === 'string';
+}
+class DbMarquee extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.built = false;
+        this.rows = [];
+        this.rowCount = 0;
+        this.containerWidth = 0;
+        this.gap = 24;
+        // scroll-velocity 상태
+        this.scrollVelocityEnabled = false;
+        this.rafId = 0;
+        this.lastFrameTime = 0;
+        this.lastScrollY = 0;
+        this.smoothedScrollV = 0;
+        this.baseDurationSec = 12;
+        this.reduceMotion = false;
+        this.boundMeasure = () => this.measure();
+        this.boundFrame = (t) => this.frame(t);
+    }
+    static get observedAttributes() {
+        return [
+            'items',
+            'direction',
+            'duration',
+            'speed',
+            'size',
+            'variant',
+            'bordered',
+            'pause-on-hover',
+            'fade-edges',
+            'fade-width',
+            'edge-padding',
+            'gap',
+            'align-y',
+            'row-count',
+            'row-gap',
+            'scroll-velocity',
+            'scroll-boost',
+            'aria-label',
+        ];
+    }
+    connectedCallback() {
+        this.style.display = 'block';
+        if (!this.built) {
+            this.built = true;
+            this.reduceMotion =
+                typeof window !== 'undefined' &&
+                    typeof window.matchMedia === 'function' &&
+                    window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+            this.build();
+            this.bindResize();
+        }
+        this.updateUI();
+    }
+    disconnectedCallback() {
+        this.resizeObserver?.disconnect();
+        this.stopScrollEngine();
+        this.unbindImageListeners();
+    }
+    attributeChangedCallback() {
+        if (!this.built)
+            return;
+        this.updateUI();
+    }
+    getBool(name, fallback = false) {
+        if (!this.hasAttribute(name))
+            return fallback;
+        const value = this.getAttribute(name);
+        return value === '' || value === 'true';
+    }
+    parseItems() {
+        try {
+            const raw = this.getAttribute('items');
+            const parsed = raw ? JSON.parse(raw) : [];
+            if (Array.isArray(parsed) && parsed.length > 0) {
+                return parsed.filter((item) => typeof item === 'string' || isImageItem(item));
+            }
+        }
+        catch {
+            /* fallback to slot */
+        }
+        const slotted = Array.from(this.children).filter((child) => !child.hasAttribute('data-wc-internal'));
+        if (slotted.length > 0)
+            return slotted.map((node) => node.textContent?.trim() || '');
+        return [];
+    }
+    itemToText(item) {
+        return isImageItem(item) ? item.alt || '' : item;
+    }
+    build() {
+        this.containerEl = document.createElement('div');
+        this.srOnlyEl = document.createElement('span');
+        this.srOnlyEl.className = `${CLASS}__sr-only`;
+        this.rowsEl = document.createElement('div');
+        this.rowsEl.className = `${CLASS}__rows`;
+        this.containerEl.append(this.srOnlyEl, this.rowsEl);
+        this.append(this.containerEl);
+    }
+    bindResize() {
+        this.resizeObserver = new ResizeObserver(() => this.measure());
+        if (this.containerEl)
+            this.resizeObserver.observe(this.containerEl);
+    }
+    /** rows 개수에 맞춰 행 DOM을 만들거나 제거한다. */
+    reconcileRows(count, baseDir) {
+        if (!this.rowsEl)
+            return;
+        this.rowCount = count;
+        while (this.rows.length < count) {
+            const rowEl = document.createElement('div');
+            rowEl.className = `${CLASS}__row`;
+            const trackEl = document.createElement('div');
+            trackEl.className = `${CLASS}__track`;
+            const baseGroupEl = document.createElement('div');
+            baseGroupEl.className = `${CLASS}__group`;
+            baseGroupEl.setAttribute('aria-hidden', 'true');
+            trackEl.append(baseGroupEl);
+            rowEl.append(trackEl);
+            this.rowsEl.append(rowEl);
+            this.rows.push({
+                rowEl,
+                trackEl,
+                baseGroupEl,
+                baseGroupWidth: 0,
+                duplicateCount: 0,
+                baseDir: 1,
+                x: 0,
+                dirState: 1,
+            });
+        }
+        while (this.rows.length > count) {
+            const removed = this.rows.pop();
+            removed?.rowEl.remove();
+        }
+        this.rows.forEach((row, index) => {
+            // 홀수 행은 반대 방향으로 흘려 좌/우 교차 효과를 만든다.
+            row.baseDir = index % 2 === 0 ? baseDir : -baseDir;
+            const goesRight = row.baseDir < 0;
+            row.rowEl.classList.toggle(`${CLASS}__row--right`, goesRight);
+            row.rowEl.style.setProperty('--db-marquee-row-index', String(index));
+        });
+        if (this.resizeObserver) {
+            this.rows.forEach((row) => this.resizeObserver?.observe(row.baseGroupEl));
+        }
+    }
+    measure() {
+        this.containerWidth = Math.ceil(this.containerEl?.clientWidth ?? 0);
+        this.rows.forEach((row) => {
+            row.baseGroupWidth = Math.ceil(row.baseGroupEl.scrollWidth ?? 0);
+            row.rowEl.style.setProperty('--db-marquee-shift', `${row.baseGroupWidth + this.gap}px`);
+            this.reconcileDuplicates(row);
+        });
+        this.syncReadyState();
+    }
+    unbindImageListeners() {
+        this.rows.forEach((row) => {
+            row.baseGroupEl.querySelectorAll('img').forEach((img) => {
+                img.removeEventListener('load', this.boundMeasure);
+                img.removeEventListener('error', this.boundMeasure);
+            });
+        });
+    }
+    bindImageListeners() {
+        this.rows.forEach((row) => {
+            row.baseGroupEl.querySelectorAll('img').forEach((img) => {
+                if (img.complete)
+                    return;
+                img.addEventListener('load', this.boundMeasure);
+                img.addEventListener('error', this.boundMeasure);
+            });
+        });
+    }
+    renderItem(entry) {
+        const item = document.createElement('div');
+        item.className = `${CLASS}__item`;
+        if (isImageItem(entry)) {
+            item.classList.add(`${CLASS}__item--image`);
+            const img = document.createElement('img');
+            img.className = `${CLASS}__image`;
+            img.src = entry.src;
+            img.alt = entry.alt || '';
+            img.loading = 'lazy';
+            img.decoding = 'async';
+            if (entry.height)
+                img.style.height = `${entry.height}px`;
+            if (entry.href) {
+                const link = document.createElement('a');
+                link.className = `${CLASS}__link`;
+                link.href = entry.href;
+                link.setAttribute('tabindex', '-1');
+                link.append(img);
+                item.append(link);
+            }
+            else {
+                item.append(img);
+            }
+            return item;
+        }
+        item.textContent = entry;
+        return item;
+    }
+    renderGroup(items, ref) {
+        const group = ref ?? document.createElement('div');
+        group.className = `${CLASS}__group`;
+        group.setAttribute('aria-hidden', 'true');
+        group.replaceChildren(...items.map((text) => this.renderItem(text)));
+        return group;
+    }
+    /**
+     * 각 행의 base 그룹을 items로 다시 만든다 — items/attributes 변경 시에만 실행.
+     * 이미지 노드 재생성으로 인한 재로딩을 막기 위해 measure() 중에는 건드리지 않는다.
+     */
+    buildBase(items) {
+        this.rows.forEach((row) => {
+            this.renderGroup(items, row.baseGroupEl);
+            while (row.trackEl.children.length > 1) {
+                row.trackEl.lastElementChild?.remove();
+            }
+            row.duplicateCount = 0;
+        });
+    }
+    baseImagesReady(row) {
+        return Array.from(row.baseGroupEl.querySelectorAll('img')).every((img) => img.complete);
+    }
+    /** 트랙을 채울 만큼의 복제 그룹 개수를 델타만 조정한다. */
+    reconcileDuplicates(row) {
+        const desired = row.baseGroupWidth > 0 && this.baseImagesReady(row)
+            ? Math.max(1, Math.ceil((this.containerWidth * 2) / row.baseGroupWidth))
+            : 1;
+        let current = row.trackEl.children.length - 1;
+        if (current === desired) {
+            row.duplicateCount = desired;
+            return;
+        }
+        const items = this.parseItems();
+        while (current < desired) {
+            row.trackEl.append(this.renderGroup(items));
+            current += 1;
+        }
+        while (current > desired) {
+            row.trackEl.lastElementChild?.remove();
+            current -= 1;
+        }
+        row.duplicateCount = desired;
+    }
+    syncReadyState() {
+        if (!this.containerEl)
+            return;
+        const ready = this.rows.length > 0 && this.rows.every((row) => row.baseGroupWidth > 0);
+        this.containerEl.classList.toggle(`${CLASS}--ready`, ready);
+    }
+    // ── scroll-velocity 엔진 ──────────────────────────────────────────────
+    startScrollEngine() {
+        if (this.rafId || this.reduceMotion)
+            return;
+        this.lastScrollY = typeof window !== 'undefined' ? window.scrollY : 0;
+        this.lastFrameTime = 0;
+        this.smoothedScrollV = 0;
+        this.rows.forEach((row) => {
+            row.x = 0;
+            row.dirState = 1;
+        });
+        this.rafId = requestAnimationFrame(this.boundFrame);
+    }
+    stopScrollEngine() {
+        if (this.rafId) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = 0;
+        }
+        // CSS 애니메이션으로 복귀할 수 있도록 인라인 transform 제거
+        this.rows.forEach((row) => {
+            row.trackEl.style.transform = '';
+        });
+    }
+    frame(now) {
+        if (!this.scrollVelocityEnabled) {
+            this.rafId = 0;
+            return;
+        }
+        if (!this.lastFrameTime)
+            this.lastFrameTime = now;
+        const dt = Math.min((now - this.lastFrameTime) / 1000, 0.05);
+        this.lastFrameTime = now;
+        // 스크롤 속도(px/s)를 측정하고 지수 감쇠로 부드럽게 만든다.
+        const scrollY = typeof window !== 'undefined' ? window.scrollY : 0;
+        const rawV = dt > 0 ? (scrollY - this.lastScrollY) / dt : 0;
+        this.lastScrollY = scrollY;
+        const smoothing = 1 - Math.exp(-dt / 0.12);
+        this.smoothedScrollV += (rawV - this.smoothedScrollV) * smoothing;
+        const boost = Math.max(Number(this.getAttribute('scroll-boost') || 6), 0);
+        // 스크롤 속도를 배율로 환산(부호 유지). 800px/s ≈ 1.0
+        const velocityFactor = (this.smoothedScrollV / 800) * (boost / 6);
+        this.rows.forEach((row) => {
+            const shift = row.baseGroupWidth + this.gap;
+            if (shift <= 0)
+                return;
+            const pxPerSec = shift / this.baseDurationSec;
+            // 기본 진행: baseDir(+1=왼쪽) → x 감소
+            let moveBy = -row.baseDir * pxPerSec * dt;
+            // 아래로 스크롤(velocityFactor>0)은 기본 방향 유지·가속,
+            // 위로 스크롤(velocityFactor<0)은 진행 방향 반전.
+            if (velocityFactor < 0)
+                row.dirState = -1;
+            else if (velocityFactor > 0)
+                row.dirState = 1;
+            moveBy *= row.dirState;
+            moveBy += moveBy * Math.abs(velocityFactor);
+            // 이음새 없는 루프를 위해 위치를 (-shift, 0] 범위로 정규화한다.
+            let x = (row.x + moveBy) % shift;
+            if (x > 0)
+                x -= shift;
+            row.x = x;
+            row.trackEl.style.transform = `translate3d(${x}px, 0, 0)`;
+        });
+        this.rafId = requestAnimationFrame(this.boundFrame);
+    }
+    updateUI() {
+        const items = this.parseItems();
+        if (items.length === 0) {
+            this.stopScrollEngine();
+            this.hidden = true;
+            return;
+        }
+        this.hidden = false;
+        const direction = this.getAttribute('direction') || 'left';
+        const baseDir = direction === 'right' ? -1 : 1;
+        const duration = Math.max(Number(this.getAttribute('duration') || 12), 1);
+        const speed = Number(this.getAttribute('speed') || 1);
+        const resolvedSpeed = Number.isFinite(speed) && speed > 0 ? speed : 1;
+        const resolvedDuration = duration / resolvedSpeed;
+        this.baseDurationSec = resolvedDuration;
+        const size = this.getAttribute('size') || 'm';
+        const variant = this.getAttribute('variant') || 'default';
+        const alignY = this.getAttribute('align-y') || 'center';
+        const fadeEdges = this.getBool('fade-edges');
+        const fadeWidth = Math.max(Number(this.getAttribute('fade-width') || 48), 0);
+        const edgePaddingRaw = this.getAttribute('edge-padding');
+        const edgePadding = edgePaddingRaw !== null && edgePaddingRaw !== ''
+            ? Math.max(Number(edgePaddingRaw), 0)
+            : fadeEdges
+                ? fadeWidth
+                : 0;
+        const gap = Math.max(Number(this.getAttribute('gap') || 24), 0);
+        this.gap = gap;
+        const rowCountRaw = Math.round(Number(this.getAttribute('row-count') || 1));
+        const rows = Number.isFinite(rowCountRaw) ? Math.min(Math.max(rowCountRaw, 1), 8) : 1;
+        const rowGap = Math.max(Number(this.getAttribute('row-gap') || 12), 0);
+        const scrollVelocity = this.getBool('scroll-velocity');
+        this.scrollVelocityEnabled = scrollVelocity;
+        const pauseOnHover = this.getBool('pause-on-hover', true);
+        const bordered = this.hasAttribute('bordered') ? this.getBool('bordered') : variant === 'outlined';
+        const ariaLabel = this.getAttribute('aria-label') || 'Scrolling content';
+        if (this.containerEl) {
+            this.containerEl.className = [
+                CLASS,
+                `${CLASS}--size-${size}`,
+                `${CLASS}--variant-${variant}`,
+                `${CLASS}--align-${alignY}`,
+                pauseOnHover && !scrollVelocity && `${CLASS}--pause-on-hover`,
+                fadeEdges && `${CLASS}--fade-edges`,
+                direction === 'right' && `${CLASS}--right`,
+                rows > 1 && `${CLASS}--multi-row`,
+                scrollVelocity && `${CLASS}--scroll-velocity`,
+                bordered && `${CLASS}--bordered`,
+            ]
+                .filter(Boolean)
+                .join(' ');
+            this.containerEl.style.setProperty('--db-marquee-duration', `${resolvedDuration}s`);
+            this.containerEl.style.setProperty('--db-marquee-gap', `${gap}px`);
+            this.containerEl.style.setProperty('--db-marquee-row-gap', `${rowGap}px`);
+            this.containerEl.style.setProperty('--db-marquee-fade-width', `${fadeWidth}px`);
+            this.containerEl.style.setProperty('--db-marquee-edge-padding', `${edgePadding}px`);
+            this.containerEl.setAttribute('role', 'region');
+            this.containerEl.setAttribute('aria-label', ariaLabel);
+        }
+        if (this.srOnlyEl) {
+            const srText = items
+                .map((item) => this.itemToText(item))
+                .filter(Boolean)
+                .join(' • ');
+            this.srOnlyEl.textContent = srText || ariaLabel;
+        }
+        this.reconcileRows(rows, baseDir);
+        this.buildBase(items);
+        this.bindImageListeners();
+        this.measure();
+        if (scrollVelocity) {
+            this.startScrollEngine();
+        }
+        else {
+            this.stopScrollEngine();
+        }
+    }
+}
+if (!customElements.get('db-marquee'))
+    customElements.define('db-marquee', DbMarquee);
+
+export { DbMarquee };

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

@@ -1 +1,94 @@
-const e=[1,2,3,4,5,6],t=["xs","s","m","l","xl"];class DbMasonry extends HTMLElement{static get observedAttributes(){return["images","columns","spacing","hover","clickable"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}get images(){try{const e=JSON.parse(this.getAttribute("images")||"[]");return Array.isArray(e)?e.filter(e=>e&&"string"==typeof e.src):[]}catch{return[]}}set images(e){this.setAttribute("images","string"==typeof e?e:JSON.stringify(e))}boolAttr(e,t=!0){if(!this.hasAttribute(e))return t;const s=this.getAttribute(e);return""===s||"true"===s}render(){const s=Number(this.getAttribute("columns")||3),n=e.includes(s)?s:3,i=this.getAttribute("spacing")||"m",a=t.includes(i)?i:"m",r=this.boolAttr("hover",!0),c=this.boolAttr("clickable",!0);this.className=["designbase-wc-masonry",`designbase-wc-masonry--columns-${n}`,`designbase-wc-masonry--spacing-${a}`,r&&"designbase-wc-masonry--hover",c&&"designbase-wc-masonry--clickable"].filter(Boolean).join(" ");const o=document.createDocumentFragment();this.images.forEach((e,t)=>{const s=document.createElement("figure");s.className="designbase-wc-masonry__item";const n=document.createElement("img");if(n.className="designbase-wc-masonry__image",n.src=e.thumbnail||e.src,n.alt=e.alt||e.title||`image-${t+1}`,n.loading="lazy",n.addEventListener("load",()=>{this.dispatchEvent(new CustomEvent("db-image-load",{detail:{image:e,index:t},bubbles:!0,composed:!0}))}),n.addEventListener("error",()=>{this.dispatchEvent(new CustomEvent("db-image-error",{detail:{image:e,index:t},bubbles:!0,composed:!0}))}),s.append(n),e.title||e.description){const t=document.createElement("figcaption");if(t.className="designbase-wc-masonry__overlay",e.title){const s=document.createElement("h3");s.className="designbase-wc-masonry__title",s.textContent=e.title,t.append(s)}if(e.description){const s=document.createElement("p");s.className="designbase-wc-masonry__description",s.textContent=e.description,t.append(s)}s.append(t)}c&&(s.tabIndex=0,s.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-image-click",{detail:{image:e,index:t},bubbles:!0,composed:!0}))})),o.append(s)}),this.replaceChildren(o)}}customElements.get("db-masonry")||customElements.define("db-masonry",DbMasonry);export{DbMasonry};
+const COLUMNS = [1, 2, 3, 4, 5, 6];
+const SPACINGS = ['xs', 's', 'm', 'l', 'xl'];
+class DbMasonry extends HTMLElement {
+    static get observedAttributes() {
+        return ['images', 'columns', 'spacing', 'hover', 'clickable'];
+    }
+    connectedCallback() {
+        this.render();
+    }
+    attributeChangedCallback() {
+        this.render();
+    }
+    get images() {
+        try {
+            const parsed = JSON.parse(this.getAttribute('images') || '[]');
+            return Array.isArray(parsed) ? parsed.filter((item) => item && typeof item.src === 'string') : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    set images(value) {
+        this.setAttribute('images', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    boolAttr(name, fallback = true) {
+        if (!this.hasAttribute(name))
+            return fallback;
+        const value = this.getAttribute(name);
+        return value === '' || value === 'true';
+    }
+    render() {
+        const columnsRaw = Number(this.getAttribute('columns') || 3);
+        const columns = COLUMNS.includes(columnsRaw) ? columnsRaw : 3;
+        const spacing = this.getAttribute('spacing') || 'm';
+        const normalizedSpacing = SPACINGS.includes(spacing) ? spacing : 'm';
+        const hover = this.boolAttr('hover', true);
+        const clickable = this.boolAttr('clickable', true);
+        this.className = [
+            'designbase-wc-masonry',
+            `designbase-wc-masonry--columns-${columns}`,
+            `designbase-wc-masonry--spacing-${normalizedSpacing}`,
+            hover && 'designbase-wc-masonry--hover',
+            clickable && 'designbase-wc-masonry--clickable',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const fragment = document.createDocumentFragment();
+        this.images.forEach((item, index) => {
+            const el = document.createElement('figure');
+            el.className = 'designbase-wc-masonry__item';
+            const img = document.createElement('img');
+            img.className = 'designbase-wc-masonry__image';
+            img.src = item.thumbnail || item.src;
+            img.alt = item.alt || item.title || `image-${index + 1}`;
+            img.loading = 'lazy';
+            img.addEventListener('load', () => {
+                this.dispatchEvent(new CustomEvent('db-image-load', { detail: { image: item, index }, bubbles: true, composed: true }));
+            });
+            img.addEventListener('error', () => {
+                this.dispatchEvent(new CustomEvent('db-image-error', { detail: { image: item, index }, bubbles: true, composed: true }));
+            });
+            el.append(img);
+            if (item.title || item.description) {
+                const overlay = document.createElement('figcaption');
+                overlay.className = 'designbase-wc-masonry__overlay';
+                if (item.title) {
+                    const title = document.createElement('h3');
+                    title.className = 'designbase-wc-masonry__title';
+                    title.textContent = item.title;
+                    overlay.append(title);
+                }
+                if (item.description) {
+                    const desc = document.createElement('p');
+                    desc.className = 'designbase-wc-masonry__description';
+                    desc.textContent = item.description;
+                    overlay.append(desc);
+                }
+                el.append(overlay);
+            }
+            if (clickable) {
+                el.tabIndex = 0;
+                el.addEventListener('click', () => {
+                    this.dispatchEvent(new CustomEvent('db-image-click', { detail: { image: item, index }, bubbles: true, composed: true }));
+                });
+            }
+            fragment.append(el);
+        });
+        this.replaceChildren(fragment);
+    }
+}
+if (!customElements.get('db-masonry'))
+    customElements.define('db-masonry', DbMasonry);
+
+export { DbMasonry };