@designbasekorea/ui-wc 0.5.6 → 0.6.1

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

@@ -1,402 +1 @@
-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 };
+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};

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

@@ -1,94 +1 @@
-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 };
+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};