@designbasekorea/ui-wc 0.5.3 → 0.5.6

package/dist/esm/components/db-section-pricing.js

@@ -1 +1,166 @@
-import{applySectionBlockHeader as e}from"./section-block-header-utils.js";import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const i="designbase-wc-section-pricing";class DbSectionPricing extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["headline","subtitle","description","badge","plans","columns","align","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parsePlans(){try{const e=JSON.parse(this.getAttribute("plans")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBadge(){try{const e=this.getAttribute("badge");return e?JSON.parse(e):null}catch{return null}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${i}__inner`,this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header",this.headerEl.innerHTML='\n            <db-badge class="designbase-wc-section-block-header__badge" hidden></db-badge>\n            <h2 class="designbase-wc-section-block-header__headline"></h2>\n            <p class="designbase-wc-section-block-header__subtitle"></p>\n            <p class="designbase-wc-section-block-header__description"></p>\n        ',this.gridEl=document.createElement("div"),this.gridEl.className=`${i}__grid`,this.innerEl.append(this.headerEl,this.gridEl),this.append(this.innerEl)}updateUI(){const n=this.getAttribute("headline")||"요금제",s=this.getAttribute("subtitle")||"",a=this.getAttribute("description")||"",c=this.getAttribute("columns")||"3",r=this.getAttribute("content-padding")||"l",l=this.getAttribute("align")||"center",d=this.parseBadge(),o=this.parsePlans();this.className=[i,`${i}--cols-${c}`,`${i}--padding-${r}`].join(" "),t(this,i),this.headerEl&&e(this.headerEl,{headline:n,subtitle:s,description:a,badge:d,align:l}),this.gridEl&&(this.gridEl.replaceChildren(),o.forEach(e=>{const t=document.createElement("article");t.className=[`${i}__plan-card`,e.highlighted?`${i}__plan-card--highlighted`:""].filter(Boolean).join(" ");const n=document.createElement("div");if(n.className=`${i}__plan-body`,e.badge){const t=document.createElement("db-badge");t.setAttribute("variant","primary"),t.setAttribute("badge-style","filled"),t.setAttribute("size","s"),t.className=`${i}__plan-badge`,t.textContent=e.badge,n.append(t)}const s=document.createElement("h3");s.className=`${i}__plan-name`,s.textContent=e.name;const a=document.createElement("div");a.className=`${i}__price-row`;const c=document.createElement("span");if(c.className=`${i}__price`,c.textContent=e.price,a.append(c),e.period){const t=document.createElement("span");t.className=`${i}__period`,t.textContent=`/ ${e.period}`,a.append(t)}if(n.append(s,a),e.description){const t=document.createElement("p");t.className=`${i}__plan-description`,t.textContent=e.description,n.append(t)}const r=document.createElement("ul");r.className=`${i}__features`,e.features.forEach(e=>{const t=document.createElement("li");t.textContent=e,r.append(t)}),n.append(r);const l=document.createElement("div");l.className=`${i}__plan-footer`;const d=document.createElement("db-button");d.className=`${i}__cta`,d.setAttribute("variant",e.cta.variant||(e.highlighted?"primary":"tertiary")),d.setAttribute("size","m"),d.setAttribute("full-width",""),e.cta.href&&d.setAttribute("href",e.cta.href),d.textContent=e.cta.label,l.append(d),t.append(n,l),this.gridEl.append(t)}))}}customElements.get("db-section-pricing")||customElements.define("db-section-pricing",DbSectionPricing);export{DbSectionPricing};
+import { applySectionBlockHeader } from './section-block-header-utils.js';
+import { syncMarketingBlockHost } from './marketing-block-host-utils.js';
+
+const CLASS = 'designbase-wc-section-pricing';
+class DbSectionPricing extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.built = false;
+    }
+    static get observedAttributes() {
+        return [
+            'headline',
+            'subtitle',
+            'description',
+            'badge',
+            'plans',
+            'columns',
+            'align',
+            'content-padding',
+            'size',
+            'full-width',
+            'full-height',
+            'overflow-visible',
+        ];
+    }
+    connectedCallback() {
+        this.style.display = 'block';
+        if (!this.built) {
+            this.built = true;
+            this.build();
+        }
+        this.updateUI();
+    }
+    attributeChangedCallback() {
+        if (!this.built)
+            return;
+        this.updateUI();
+    }
+    parsePlans() {
+        try {
+            const parsed = JSON.parse(this.getAttribute('plans') || '[]');
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    parseBadge() {
+        try {
+            const raw = this.getAttribute('badge');
+            if (!raw)
+                return null;
+            return JSON.parse(raw);
+        }
+        catch {
+            return null;
+        }
+    }
+    build() {
+        this.innerEl = document.createElement('div');
+        this.innerEl.className = `${CLASS}__inner`;
+        this.headerEl = document.createElement('div');
+        this.headerEl.className = 'designbase-wc-section-block-header';
+        this.headerEl.innerHTML = `
+            <db-badge class="designbase-wc-section-block-header__badge" hidden></db-badge>
+            <h2 class="designbase-wc-section-block-header__headline"></h2>
+            <p class="designbase-wc-section-block-header__subtitle"></p>
+            <p class="designbase-wc-section-block-header__description"></p>
+        `;
+        this.gridEl = document.createElement('div');
+        this.gridEl.className = `${CLASS}__grid`;
+        this.innerEl.append(this.headerEl, this.gridEl);
+        this.append(this.innerEl);
+    }
+    updateUI() {
+        const headline = this.getAttribute('headline') || '요금제';
+        const subtitle = this.getAttribute('subtitle') || '';
+        const description = this.getAttribute('description') || '';
+        const columns = this.getAttribute('columns') || '3';
+        const contentPadding = this.getAttribute('content-padding') || 'l';
+        const align = this.getAttribute('align') || 'center';
+        const badge = this.parseBadge();
+        const plans = this.parsePlans();
+        this.className = [CLASS, `${CLASS}--cols-${columns}`, `${CLASS}--padding-${contentPadding}`].join(' ');
+        syncMarketingBlockHost(this, CLASS);
+        if (this.headerEl) {
+            applySectionBlockHeader(this.headerEl, {
+                headline,
+                subtitle,
+                description,
+                badge,
+                align,
+            });
+        }
+        if (!this.gridEl)
+            return;
+        this.gridEl.replaceChildren();
+        plans.forEach((plan) => {
+            const card = document.createElement('article');
+            card.className = [
+                `${CLASS}__plan-card`,
+                plan.highlighted ? `${CLASS}__plan-card--highlighted` : '',
+            ]
+                .filter(Boolean)
+                .join(' ');
+            const body = document.createElement('div');
+            body.className = `${CLASS}__plan-body`;
+            if (plan.badge) {
+                const planBadge = document.createElement('db-badge');
+                planBadge.setAttribute('variant', 'primary');
+                planBadge.setAttribute('badge-style', 'filled');
+                planBadge.setAttribute('size', 's');
+                planBadge.className = `${CLASS}__plan-badge`;
+                planBadge.textContent = plan.badge;
+                body.append(planBadge);
+            }
+            const name = document.createElement('h3');
+            name.className = `${CLASS}__plan-name`;
+            name.textContent = plan.name;
+            const priceRow = document.createElement('div');
+            priceRow.className = `${CLASS}__price-row`;
+            const price = document.createElement('span');
+            price.className = `${CLASS}__price`;
+            price.textContent = plan.price;
+            priceRow.append(price);
+            if (plan.period) {
+                const period = document.createElement('span');
+                period.className = `${CLASS}__period`;
+                period.textContent = `/ ${plan.period}`;
+                priceRow.append(period);
+            }
+            body.append(name, priceRow);
+            if (plan.description) {
+                const planDesc = document.createElement('p');
+                planDesc.className = `${CLASS}__plan-description`;
+                planDesc.textContent = plan.description;
+                body.append(planDesc);
+            }
+            const features = document.createElement('ul');
+            features.className = `${CLASS}__features`;
+            plan.features.forEach((feature) => {
+                const li = document.createElement('li');
+                li.textContent = feature;
+                features.append(li);
+            });
+            body.append(features);
+            const footer = document.createElement('div');
+            footer.className = `${CLASS}__plan-footer`;
+            const cta = document.createElement('db-button');
+            cta.className = `${CLASS}__cta`;
+            cta.setAttribute('variant', plan.cta.variant || (plan.highlighted ? 'primary' : 'tertiary'));
+            cta.setAttribute('size', 'm');
+            cta.setAttribute('full-width', '');
+            if (plan.cta.href)
+                cta.setAttribute('href', plan.cta.href);
+            cta.textContent = plan.cta.label;
+            footer.append(cta);
+            card.append(body, footer);
+            this.gridEl.append(card);
+        });
+    }
+}
+if (!customElements.get('db-section-pricing'))
+    customElements.define('db-section-pricing', DbSectionPricing);
+
+export { DbSectionPricing };

package/dist/esm/components/db-section-stats.js

@@ -1 +1,129 @@
-import{applySectionBlockHeader as t}from"./section-block-header-utils.js";import{syncMarketingBlockHost as e}from"./marketing-block-host-utils.js";const i="designbase-wc-section-stats";class DbSectionStats extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["headline","subtitle","description","badge","items","columns","tinted","align","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parseItems(){try{const t=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}parseBadge(){try{const t=this.getAttribute("badge");return t?JSON.parse(t):null}catch{return null}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${i}__inner`,this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header",this.headerEl.innerHTML='\n            <db-badge class="designbase-wc-section-block-header__badge" hidden></db-badge>\n            <h2 class="designbase-wc-section-block-header__headline"></h2>\n            <p class="designbase-wc-section-block-header__subtitle"></p>\n            <p class="designbase-wc-section-block-header__description"></p>\n        ',this.gridEl=document.createElement("div"),this.gridEl.className=`${i}__grid`,this.innerEl.append(this.headerEl,this.gridEl),this.append(this.innerEl)}updateUI(){const s=this.getAttribute("headline")||"",n=this.getAttribute("subtitle")||"",a=this.getAttribute("description")||"",r=this.getAttribute("columns")||"4",l=this.getAttribute("content-padding")||"l",d=this.getAttribute("align")||"center",c=this.hasAttribute("tinted"),h=this.parseBadge(),o=this.parseItems();if(this.className=[i,`${i}--cols-${r}`,`${i}--padding-${l}`,c&&`${i}--tinted`].filter(Boolean).join(" "),e(this,i),this.headerEl){const e=s||n||a||h?.text;this.headerEl.hidden=!e,t(this.headerEl,{headline:s,subtitle:n,description:a,badge:h,align:d})}this.gridEl&&(this.gridEl.replaceChildren(),o.forEach(t=>{const e=document.createElement("db-stat");e.setAttribute("value",String(t.value)),e.setAttribute("label",t.label),e.setAttribute("variant","minimal"),e.setAttribute("layout","vertical"),e.setAttribute("size","l"),t.description&&(e.setAttribute("description",t.description),e.setAttribute("show-description","")),e.className=`${i}__stat`,this.gridEl.append(e)}))}}customElements.get("db-section-stats")||customElements.define("db-section-stats",DbSectionStats);export{DbSectionStats};
+import { applySectionBlockHeader } from './section-block-header-utils.js';
+import { syncMarketingBlockHost } from './marketing-block-host-utils.js';
+
+const CLASS = 'designbase-wc-section-stats';
+class DbSectionStats extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.built = false;
+    }
+    static get observedAttributes() {
+        return [
+            'headline',
+            'subtitle',
+            'description',
+            'badge',
+            'items',
+            'columns',
+            'tinted',
+            'align',
+            'content-padding',
+            'size',
+            'full-width',
+            'full-height',
+            'overflow-visible',
+        ];
+    }
+    connectedCallback() {
+        this.style.display = 'block';
+        if (!this.built) {
+            this.built = true;
+            this.build();
+        }
+        this.updateUI();
+    }
+    attributeChangedCallback() {
+        if (!this.built)
+            return;
+        this.updateUI();
+    }
+    parseItems() {
+        try {
+            const parsed = JSON.parse(this.getAttribute('items') || '[]');
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    parseBadge() {
+        try {
+            const raw = this.getAttribute('badge');
+            if (!raw)
+                return null;
+            return JSON.parse(raw);
+        }
+        catch {
+            return null;
+        }
+    }
+    build() {
+        this.innerEl = document.createElement('div');
+        this.innerEl.className = `${CLASS}__inner`;
+        this.headerEl = document.createElement('div');
+        this.headerEl.className = 'designbase-wc-section-block-header';
+        this.headerEl.innerHTML = `
+            <db-badge class="designbase-wc-section-block-header__badge" hidden></db-badge>
+            <h2 class="designbase-wc-section-block-header__headline"></h2>
+            <p class="designbase-wc-section-block-header__subtitle"></p>
+            <p class="designbase-wc-section-block-header__description"></p>
+        `;
+        this.gridEl = document.createElement('div');
+        this.gridEl.className = `${CLASS}__grid`;
+        this.innerEl.append(this.headerEl, this.gridEl);
+        this.append(this.innerEl);
+    }
+    updateUI() {
+        const headline = this.getAttribute('headline') || '';
+        const subtitle = this.getAttribute('subtitle') || '';
+        const description = this.getAttribute('description') || '';
+        const columns = this.getAttribute('columns') || '4';
+        const contentPadding = this.getAttribute('content-padding') || 'l';
+        const align = this.getAttribute('align') || 'center';
+        const tinted = this.hasAttribute('tinted');
+        const badge = this.parseBadge();
+        const items = this.parseItems();
+        headline || subtitle || description || badge?.text;
+        this.className = [
+            CLASS,
+            `${CLASS}--cols-${columns}`,
+            `${CLASS}--padding-${contentPadding}`,
+            tinted && `${CLASS}--tinted`,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        syncMarketingBlockHost(this, CLASS);
+        if (this.headerEl) {
+            const hasHeader = headline || subtitle || description || badge?.text;
+            this.headerEl.hidden = !hasHeader;
+            applySectionBlockHeader(this.headerEl, {
+                headline,
+                subtitle,
+                description,
+                badge,
+                align,
+            });
+        }
+        if (!this.gridEl)
+            return;
+        this.gridEl.replaceChildren();
+        items.forEach((item) => {
+            const stat = document.createElement('db-stat');
+            stat.setAttribute('value', String(item.value));
+            stat.setAttribute('label', item.label);
+            stat.setAttribute('variant', 'minimal');
+            stat.setAttribute('layout', 'vertical');
+            stat.setAttribute('size', 'l');
+            if (item.description) {
+                stat.setAttribute('description', item.description);
+                stat.setAttribute('show-description', '');
+            }
+            stat.className = `${CLASS}__stat`;
+            this.gridEl.append(stat);
+        });
+    }
+}
+if (!customElements.get('db-section-stats'))
+    customElements.define('db-section-stats', DbSectionStats);
+
+export { DbSectionStats };

package/dist/esm/components/db-section-testimonials.js

@@ -1 +1,252 @@
-import{createDbIcon as e}from"./db-icons.js";import{applySectionBlockHeader as t}from"./section-block-header-utils.js";import{syncMarketingBlockHost as s}from"./marketing-block-host-utils.js";const i="designbase-wc-section-testimonials";class DbSectionTestimonials extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.carouselIndex=0}static get observedAttributes(){return["headline","subtitle","description","badge","items","variant","columns","align","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}disconnectedCallback(){this.resizeObserver?.disconnect(),this.resizeObserver=void 0}attributeChangedCallback(){this.built&&(this.carouselIndex=0,this.updateUI())}parseItems(){try{const e=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBadge(){try{const e=this.getAttribute("badge");return e?JSON.parse(e):null}catch{return null}}buildHeader(e){this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header";const t=document.createElement("db-badge");t.className="designbase-wc-section-block-header__badge",t.hidden=!0,t.dataset.role="badge";const s=document.createElement("h2");s.className="designbase-wc-section-block-header__headline",s.dataset.role="headline";const i=document.createElement("p");i.className="designbase-wc-section-block-header__subtitle",i.dataset.role="subtitle";const a=document.createElement("p");a.className="designbase-wc-section-block-header__description",a.dataset.role="description",this.headerEl.append(t,s,i,a),e.append(this.headerEl)}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${i}__inner`,this.buildHeader(this.innerEl),this.contentEl=document.createElement("div"),this.contentEl.className=`${i}__grid`,this.innerEl.append(this.contentEl),this.append(this.innerEl)}createTestimonialEl(e){const t=document.createElement("db-testimonial");return t.setAttribute("variant","card"),t.setAttribute("quote",e.quote),t.setAttribute("author",e.author),e.role&&t.setAttribute("role",e.role),e.company&&t.setAttribute("company",e.company),e.avatar&&t.setAttribute("avatar",e.avatar),null!=e.rating&&t.setAttribute("rating",String(e.rating)),t.setAttribute("align","center"),t}updateHeader(){this.headerEl&&t(this.headerEl,{headline:this.getAttribute("headline")||"고객 후기",subtitle:this.getAttribute("subtitle")||"",description:this.getAttribute("description")||"",badge:this.parseBadge(),align:this.getAttribute("align")||"center"})}clampCarouselIndex(e){e<=0?this.carouselIndex=0:(this.carouselIndex>=e&&(this.carouselIndex=0),this.carouselIndex<0&&(this.carouselIndex=0))}updateCarouselTransform(){if(!this.carouselViewport||!this.carouselTrack)return;const e=this.carouselViewport.clientWidth;this.carouselTrack.style.transform=`translate3d(-${this.carouselIndex*e}px, 0, 0)`,this.carouselIndicator&&this.carouselIndicator.setAttribute("current",String(this.carouselIndex))}goToCarouselSlide(e,t){t<=0||(this.carouselIndex=Math.max(0,Math.min(e,t-1)),this.updateCarouselTransform())}renderGrid(e){this.contentEl&&(this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.carouselViewport=void 0,this.carouselTrack=void 0,this.carouselIndicator=void 0,this.contentEl.className=`${i}__grid`,this.contentEl.replaceChildren(),e.forEach(e=>{this.contentEl.append(this.createTestimonialEl(e))}))}renderCarousel(t){if(!this.contentEl)return;if(this.contentEl.replaceChildren(),this.contentEl.className=`${i}__carousel`,this.clampCarouselIndex(t.length),0===t.length)return;const s=document.createElement("div");s.className=`${i}__carousel-viewport`;const a=document.createElement("div");if(a.className=`${i}__carousel-track`,t.forEach(e=>{const t=document.createElement("div");t.className=`${i}__carousel-slide`,t.append(this.createTestimonialEl(e)),a.append(t)}),s.append(a),this.carouselViewport=s,this.carouselTrack=a,t.length>1){const a=document.createElement("button");a.type="button",a.className=`${i}__carousel-nav ${i}__carousel-nav--prev`,a.setAttribute("aria-label","이전 후기"),a.append(e("chevron-left",20)),a.addEventListener("click",()=>{const e=this.carouselIndex-1;this.goToCarouselSlide(e<0?t.length-1:e,t.length)});const r=document.createElement("button");r.type="button",r.className=`${i}__carousel-nav ${i}__carousel-nav--next`,r.setAttribute("aria-label","다음 후기"),r.append(e("chevron-right",20)),r.addEventListener("click",()=>{const e=this.carouselIndex+1;this.goToCarouselSlide(e>=t.length?0:e,t.length)}),s.append(a,r);const n=document.createElement("div");n.className=`${i}__carousel-controls`;const l=document.createElement("db-indicator");l.className=`${i}__carousel-indicator`,l.setAttribute("current",String(this.carouselIndex)),l.setAttribute("total",String(t.length)),l.setAttribute("type","dots"),l.setAttribute("size","s"),l.setAttribute("clickable",""),l.addEventListener("db-step-click",e=>{const s=e;this.goToCarouselSlide(s.detail.index,t.length)}),this.carouselIndicator=l,n.append(l),this.contentEl.append(s,n)}else this.contentEl.append(s);this.resizeObserver?.disconnect(),this.resizeObserver=new ResizeObserver(()=>this.updateCarouselTransform()),this.resizeObserver.observe(s),requestAnimationFrame(()=>this.updateCarouselTransform())}updateUI(){const e=this.getAttribute("variant")||"grid",t=this.getAttribute("columns")||"3",a=this.getAttribute("content-padding")||"l",r=this.parseItems();this.className=[i,`${i}--${e}`,`${i}--cols-${t}`,`${i}--padding-${a}`].join(" "),s(this,i),this.updateHeader(),"carousel"===e?this.renderCarousel(r):this.renderGrid(r)}}customElements.get("db-section-testimonials")||customElements.define("db-section-testimonials",DbSectionTestimonials);export{DbSectionTestimonials};
+import { createDbIcon } from './db-icons.js';
+import { applySectionBlockHeader } from './section-block-header-utils.js';
+import { syncMarketingBlockHost } from './marketing-block-host-utils.js';
+
+const CLASS = 'designbase-wc-section-testimonials';
+class DbSectionTestimonials extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.built = false;
+        this.carouselIndex = 0;
+    }
+    static get observedAttributes() {
+        return [
+            'headline',
+            'subtitle',
+            'description',
+            'badge',
+            'items',
+            'variant',
+            'columns',
+            'align',
+            'content-padding',
+            'size',
+            'full-width',
+            'full-height',
+            'overflow-visible',
+        ];
+    }
+    connectedCallback() {
+        this.style.display = 'block';
+        if (!this.built) {
+            this.built = true;
+            this.build();
+        }
+        this.updateUI();
+    }
+    disconnectedCallback() {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
+    }
+    attributeChangedCallback() {
+        if (!this.built)
+            return;
+        this.carouselIndex = 0;
+        this.updateUI();
+    }
+    parseItems() {
+        try {
+            const parsed = JSON.parse(this.getAttribute('items') || '[]');
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    parseBadge() {
+        try {
+            const raw = this.getAttribute('badge');
+            if (!raw)
+                return null;
+            return JSON.parse(raw);
+        }
+        catch {
+            return null;
+        }
+    }
+    buildHeader(parent) {
+        this.headerEl = document.createElement('div');
+        this.headerEl.className = 'designbase-wc-section-block-header';
+        const badge = document.createElement('db-badge');
+        badge.className = 'designbase-wc-section-block-header__badge';
+        badge.hidden = true;
+        badge.dataset.role = 'badge';
+        const headline = document.createElement('h2');
+        headline.className = 'designbase-wc-section-block-header__headline';
+        headline.dataset.role = 'headline';
+        const subtitle = document.createElement('p');
+        subtitle.className = 'designbase-wc-section-block-header__subtitle';
+        subtitle.dataset.role = 'subtitle';
+        const description = document.createElement('p');
+        description.className = 'designbase-wc-section-block-header__description';
+        description.dataset.role = 'description';
+        this.headerEl.append(badge, headline, subtitle, description);
+        parent.append(this.headerEl);
+    }
+    build() {
+        this.innerEl = document.createElement('div');
+        this.innerEl.className = `${CLASS}__inner`;
+        this.buildHeader(this.innerEl);
+        this.contentEl = document.createElement('div');
+        this.contentEl.className = `${CLASS}__grid`;
+        this.innerEl.append(this.contentEl);
+        this.append(this.innerEl);
+    }
+    createTestimonialEl(item) {
+        const el = document.createElement('db-testimonial');
+        el.setAttribute('variant', 'card');
+        el.setAttribute('quote', item.quote);
+        el.setAttribute('author', item.author);
+        if (item.role)
+            el.setAttribute('role', item.role);
+        if (item.company)
+            el.setAttribute('company', item.company);
+        if (item.avatar)
+            el.setAttribute('avatar', item.avatar);
+        if (item.rating != null)
+            el.setAttribute('rating', String(item.rating));
+        el.setAttribute('align', 'center');
+        return el;
+    }
+    updateHeader() {
+        if (!this.headerEl)
+            return;
+        applySectionBlockHeader(this.headerEl, {
+            headline: this.getAttribute('headline') || '고객 후기',
+            subtitle: this.getAttribute('subtitle') || '',
+            description: this.getAttribute('description') || '',
+            badge: this.parseBadge(),
+            align: this.getAttribute('align') || 'center',
+        });
+    }
+    clampCarouselIndex(count) {
+        if (count <= 0) {
+            this.carouselIndex = 0;
+            return;
+        }
+        if (this.carouselIndex >= count)
+            this.carouselIndex = 0;
+        if (this.carouselIndex < 0)
+            this.carouselIndex = 0;
+    }
+    updateCarouselTransform() {
+        if (!this.carouselViewport || !this.carouselTrack)
+            return;
+        const width = this.carouselViewport.clientWidth;
+        this.carouselTrack.style.transform = `translate3d(-${this.carouselIndex * width}px, 0, 0)`;
+        if (this.carouselIndicator) {
+            this.carouselIndicator.setAttribute('current', String(this.carouselIndex));
+        }
+    }
+    goToCarouselSlide(index, count) {
+        if (count <= 0)
+            return;
+        this.carouselIndex = Math.max(0, Math.min(index, count - 1));
+        this.updateCarouselTransform();
+    }
+    renderGrid(items) {
+        if (!this.contentEl)
+            return;
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
+        this.carouselViewport = undefined;
+        this.carouselTrack = undefined;
+        this.carouselIndicator = undefined;
+        this.contentEl.className = `${CLASS}__grid`;
+        this.contentEl.replaceChildren();
+        items.forEach((item) => {
+            this.contentEl.append(this.createTestimonialEl(item));
+        });
+    }
+    renderCarousel(items) {
+        if (!this.contentEl)
+            return;
+        this.contentEl.replaceChildren();
+        this.contentEl.className = `${CLASS}__carousel`;
+        this.clampCarouselIndex(items.length);
+        if (items.length === 0)
+            return;
+        const viewport = document.createElement('div');
+        viewport.className = `${CLASS}__carousel-viewport`;
+        const track = document.createElement('div');
+        track.className = `${CLASS}__carousel-track`;
+        items.forEach((item) => {
+            const slide = document.createElement('div');
+            slide.className = `${CLASS}__carousel-slide`;
+            slide.append(this.createTestimonialEl(item));
+            track.append(slide);
+        });
+        viewport.append(track);
+        this.carouselViewport = viewport;
+        this.carouselTrack = track;
+        if (items.length > 1) {
+            const prev = document.createElement('button');
+            prev.type = 'button';
+            prev.className = `${CLASS}__carousel-nav ${CLASS}__carousel-nav--prev`;
+            prev.setAttribute('aria-label', '이전 후기');
+            prev.append(createDbIcon('chevron-left', 20));
+            prev.addEventListener('click', () => {
+                const next = this.carouselIndex - 1;
+                this.goToCarouselSlide(next < 0 ? items.length - 1 : next, items.length);
+            });
+            const next = document.createElement('button');
+            next.type = 'button';
+            next.className = `${CLASS}__carousel-nav ${CLASS}__carousel-nav--next`;
+            next.setAttribute('aria-label', '다음 후기');
+            next.append(createDbIcon('chevron-right', 20));
+            next.addEventListener('click', () => {
+                const nextIndex = this.carouselIndex + 1;
+                this.goToCarouselSlide(nextIndex >= items.length ? 0 : nextIndex, items.length);
+            });
+            viewport.append(prev, next);
+            const controls = document.createElement('div');
+            controls.className = `${CLASS}__carousel-controls`;
+            const indicator = document.createElement('db-indicator');
+            indicator.className = `${CLASS}__carousel-indicator`;
+            indicator.setAttribute('current', String(this.carouselIndex));
+            indicator.setAttribute('total', String(items.length));
+            indicator.setAttribute('type', 'dots');
+            indicator.setAttribute('size', 's');
+            indicator.setAttribute('clickable', '');
+            indicator.addEventListener('db-step-click', ((event) => {
+                const customEvent = event;
+                this.goToCarouselSlide(customEvent.detail.index, items.length);
+            }));
+            this.carouselIndicator = indicator;
+            controls.append(indicator);
+            this.contentEl.append(viewport, controls);
+        }
+        else {
+            this.contentEl.append(viewport);
+        }
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = new ResizeObserver(() => this.updateCarouselTransform());
+        this.resizeObserver.observe(viewport);
+        requestAnimationFrame(() => this.updateCarouselTransform());
+    }
+    updateUI() {
+        const variant = this.getAttribute('variant') || 'grid';
+        const columns = this.getAttribute('columns') || '3';
+        const contentPadding = this.getAttribute('content-padding') || 'l';
+        const items = this.parseItems();
+        this.className = [
+            CLASS,
+            `${CLASS}--${variant}`,
+            `${CLASS}--cols-${columns}`,
+            `${CLASS}--padding-${contentPadding}`,
+        ].join(' ');
+        syncMarketingBlockHost(this, CLASS);
+        this.updateHeader();
+        if (variant === 'carousel') {
+            this.renderCarousel(items);
+        }
+        else {
+            this.renderGrid(items);
+        }
+    }
+}
+if (!customElements.get('db-section-testimonials')) {
+    customElements.define('db-section-testimonials', DbSectionTestimonials);
+}
+
+export { DbSectionTestimonials };