@designbasekorea/ui-wc 0.5.3 → 0.5.6

package/dist/esm/components/db-section-app-download.js

@@ -1 +1,101 @@
-import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const e="designbase-wc-section-app-download";class DbSectionAppDownload extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["title","description","stores","align","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()}get stores(){return this.parseStores()}set stores(t){this.setAttribute("stores","string"==typeof t?t:JSON.stringify(t))}parseStores(){try{const t=JSON.parse(this.getAttribute("stores")||"[]");if(Array.isArray(t)&&t.length>0)return t}catch{}return[{store:"app-store",href:"#"},{store:"google-play",href:"#"}]}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${e}__inner`,this.titleEl=document.createElement("h2"),this.titleEl.className=`${e}__title`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${e}__description`,this.badgesEl=document.createElement("div"),this.badgesEl.className=`${e}__badges`,this.innerEl.append(this.titleEl,this.descriptionEl,this.badgesEl),this.append(this.innerEl)}updateUI(){const s=this.getAttribute("title")||"지금 바로 시작하세요",i=this.getAttribute("description")||"앱을 다운로드하고 바로 이용해 보세요.",r=this.getAttribute("align")||"center",l=this.parseStores();this.className=[e,`${e}--${r}`].join(" "),t(this,e),this.titleEl&&(this.titleEl.textContent=s),this.descriptionEl&&(this.descriptionEl.textContent=i,this.descriptionEl.hidden=!i),this.badgesEl&&(this.badgesEl.replaceChildren(),l.forEach(t=>{const e=document.createElement("db-app-badge");e.setAttribute("store",t.store),e.setAttribute("size",t.size||"m"),e.setAttribute("theme",t.theme||"dark"),t.href&&e.setAttribute("href",t.href),t.label&&e.setAttribute("label",t.label),t.storeName&&e.setAttribute("store-name",t.storeName),this.badgesEl.append(e)}))}}customElements.get("db-section-app-download")||customElements.define("db-section-app-download",DbSectionAppDownload);export{DbSectionAppDownload};
+import { syncMarketingBlockHost } from './marketing-block-host-utils.js';
+
+const CLASS = 'designbase-wc-section-app-download';
+class DbSectionAppDownload extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.built = false;
+    }
+    static get observedAttributes() {
+        return [
+            'title',
+            'description',
+            'stores',
+            'align',
+            '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();
+    }
+    get stores() {
+        return this.parseStores();
+    }
+    set stores(value) {
+        this.setAttribute('stores', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    parseStores() {
+        try {
+            const parsed = JSON.parse(this.getAttribute('stores') || '[]');
+            if (Array.isArray(parsed) && parsed.length > 0)
+                return parsed;
+        }
+        catch {
+            /* use default */
+        }
+        return [
+            { store: 'app-store', href: '#' },
+            { store: 'google-play', href: '#' },
+        ];
+    }
+    build() {
+        this.innerEl = document.createElement('div');
+        this.innerEl.className = `${CLASS}__inner`;
+        this.titleEl = document.createElement('h2');
+        this.titleEl.className = `${CLASS}__title`;
+        this.descriptionEl = document.createElement('p');
+        this.descriptionEl.className = `${CLASS}__description`;
+        this.badgesEl = document.createElement('div');
+        this.badgesEl.className = `${CLASS}__badges`;
+        this.innerEl.append(this.titleEl, this.descriptionEl, this.badgesEl);
+        this.append(this.innerEl);
+    }
+    updateUI() {
+        const title = this.getAttribute('title') || '지금 바로 시작하세요';
+        const description = this.getAttribute('description') || '앱을 다운로드하고 바로 이용해 보세요.';
+        const align = this.getAttribute('align') || 'center';
+        const stores = this.parseStores();
+        this.className = [CLASS, `${CLASS}--${align}`].join(' ');
+        syncMarketingBlockHost(this, CLASS);
+        if (this.titleEl)
+            this.titleEl.textContent = title;
+        if (this.descriptionEl) {
+            this.descriptionEl.textContent = description;
+            this.descriptionEl.hidden = !description;
+        }
+        if (this.badgesEl) {
+            this.badgesEl.replaceChildren();
+            stores.forEach((store) => {
+                const badge = document.createElement('db-app-badge');
+                badge.setAttribute('store', store.store);
+                badge.setAttribute('size', store.size || 'm');
+                badge.setAttribute('theme', store.theme || 'dark');
+                if (store.href)
+                    badge.setAttribute('href', store.href);
+                if (store.label)
+                    badge.setAttribute('label', store.label);
+                if (store.storeName)
+                    badge.setAttribute('store-name', store.storeName);
+                this.badgesEl.append(badge);
+            });
+        }
+    }
+}
+if (!customElements.get('db-section-app-download')) {
+    customElements.define('db-section-app-download', DbSectionAppDownload);
+}
+
+export { DbSectionAppDownload };

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

@@ -1 +1,102 @@
-import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const i="designbase-wc-section-contact",e="contact@designbase.co.kr";class DbSectionContact extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["title","description","action","align","accent","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()}parseAction(){try{const t=this.getAttribute("action");if(t)return JSON.parse(t)}catch{}return{label:e,href:`mailto:${e}`}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${i}__inner`,this.titleEl=document.createElement("h2"),this.titleEl.className=`${i}__title`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${i}__description`,this.actionEl=document.createElement("db-button"),this.actionEl.className=`${i}__action`,this.actionEl.setAttribute("variant","primary"),this.actionEl.setAttribute("size","m"),this.actionEl.setAttribute("radius","pill"),this.actionEl.setAttribute("start-icon","mail"),this.actionEl.addEventListener("click",t=>{t.stopPropagation(),this.dispatchEvent(new CustomEvent("db-action",{detail:{action:this.parseAction()},bubbles:!0,composed:!0}))}),this.innerEl.append(this.titleEl,this.descriptionEl,this.actionEl),this.append(this.innerEl)}updateUI(){const e=this.getAttribute("title")||"문의하기",s=this.getAttribute("description")||"궁금한 점이 있으시면 언제든지 연락주세요.",n=this.getAttribute("align")||"center",c=this.getAttribute("content-padding")||"l",a=!this.hasAttribute("accent")||"false"!==this.getAttribute("accent"),l=this.parseAction();this.className=[i,`${i}--${n}`,`${i}--padding-${c}`,a&&`${i}--accent`].filter(Boolean).join(" "),t(this,i),this.titleEl&&(this.titleEl.textContent=e),this.descriptionEl&&(this.descriptionEl.textContent=s,this.descriptionEl.hidden=!s),this.actionEl&&(this.actionEl.textContent=l.label,l.href?this.actionEl.setAttribute("href",l.href):this.actionEl.removeAttribute("href"))}}customElements.get("db-section-contact")||customElements.define("db-section-contact",DbSectionContact);export{DbSectionContact};
+import { syncMarketingBlockHost } from './marketing-block-host-utils.js';
+
+const CLASS = 'designbase-wc-section-contact';
+const DEFAULT_EMAIL = 'contact@designbase.co.kr';
+class DbSectionContact extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.built = false;
+    }
+    static get observedAttributes() {
+        return [
+            'title',
+            'description',
+            'action',
+            'align',
+            'accent',
+            '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();
+    }
+    parseAction() {
+        try {
+            const raw = this.getAttribute('action');
+            if (raw)
+                return JSON.parse(raw);
+        }
+        catch {
+            /* use default */
+        }
+        return { label: DEFAULT_EMAIL, href: `mailto:${DEFAULT_EMAIL}` };
+    }
+    build() {
+        this.innerEl = document.createElement('div');
+        this.innerEl.className = `${CLASS}__inner`;
+        this.titleEl = document.createElement('h2');
+        this.titleEl.className = `${CLASS}__title`;
+        this.descriptionEl = document.createElement('p');
+        this.descriptionEl.className = `${CLASS}__description`;
+        this.actionEl = document.createElement('db-button');
+        this.actionEl.className = `${CLASS}__action`;
+        this.actionEl.setAttribute('variant', 'primary');
+        this.actionEl.setAttribute('size', 'm');
+        this.actionEl.setAttribute('radius', 'pill');
+        this.actionEl.setAttribute('start-icon', 'mail');
+        this.actionEl.addEventListener('click', (event) => {
+            event.stopPropagation();
+            this.dispatchEvent(new CustomEvent('db-action', { detail: { action: this.parseAction() }, bubbles: true, composed: true }));
+        });
+        this.innerEl.append(this.titleEl, this.descriptionEl, this.actionEl);
+        this.append(this.innerEl);
+    }
+    updateUI() {
+        const title = this.getAttribute('title') || '문의하기';
+        const description = this.getAttribute('description') || '궁금한 점이 있으시면 언제든지 연락주세요.';
+        const align = this.getAttribute('align') || 'center';
+        const contentPadding = this.getAttribute('content-padding') || 'l';
+        const accent = !this.hasAttribute('accent') || this.getAttribute('accent') !== 'false';
+        const action = this.parseAction();
+        this.className = [
+            CLASS,
+            `${CLASS}--${align}`,
+            `${CLASS}--padding-${contentPadding}`,
+            accent && `${CLASS}--accent`,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        syncMarketingBlockHost(this, CLASS);
+        if (this.titleEl)
+            this.titleEl.textContent = title;
+        if (this.descriptionEl) {
+            this.descriptionEl.textContent = description;
+            this.descriptionEl.hidden = !description;
+        }
+        if (this.actionEl) {
+            this.actionEl.textContent = action.label;
+            if (action.href)
+                this.actionEl.setAttribute('href', action.href);
+            else
+                this.actionEl.removeAttribute('href');
+        }
+    }
+}
+if (!customElements.get('db-section-contact'))
+    customElements.define('db-section-contact', DbSectionContact);
+
+export { DbSectionContact };

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

@@ -1 +1,150 @@
-import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const e="designbase-wc-section-cta";class DbSectionCta extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["title","headline","subtitle","description","badge","buttons","variant","theme","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()}parseBadge(){try{const t=this.getAttribute("badge");return t?JSON.parse(t):null}catch{return null}}parseButtons(){try{const t=JSON.parse(this.getAttribute("buttons")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}build(){this.wrapEl=document.createElement("div"),this.wrapEl.className=`${e}__inner`,this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header",this.badgeEl=document.createElement("db-badge"),this.badgeEl.className="designbase-wc-section-block-header__badge",this.badgeEl.hidden=!0,this.headlineEl=document.createElement("h2"),this.headlineEl.className="designbase-wc-section-block-header__headline",this.subtitleEl=document.createElement("p"),this.subtitleEl.className="designbase-wc-section-block-header__subtitle",this.descriptionEl=document.createElement("p"),this.descriptionEl.className="designbase-wc-section-block-header__description",this.headerEl.append(this.badgeEl,this.headlineEl,this.subtitleEl,this.descriptionEl),this.actionsEl=document.createElement("div"),this.actionsEl.className=`${e}__actions`,this.wrapEl.append(this.headerEl,this.actionsEl),this.append(this.wrapEl)}updateUI(){const i=this.getAttribute("headline")||this.getAttribute("title")||"",s=this.getAttribute("subtitle")||"",a=this.getAttribute("description")||"",n=this.getAttribute("variant")||"default",l=this.getAttribute("theme")||"gradient",h=this.getAttribute("align")||"center",d=this.getAttribute("content-padding")||"l",r=this.parseBadge(),c=this.parseButtons();this.className=[e,`${e}--${n}`,`${e}--${l}`,`${e}--${h}`,`${e}--padding-${d}`].join(" "),t(this,e),this.headerEl&&(this.headerEl.className=["designbase-wc-section-block-header",`designbase-wc-section-block-header--${h}`,`${e}__header`].join(" ")),this.badgeEl&&(r?.text?(this.badgeEl.hidden=!1,this.badgeEl.style.display="",this.badgeEl.setAttribute("variant",r.variant||"primary"),this.badgeEl.setAttribute("badge-style",r.style||"text"),this.badgeEl.setAttribute("size",r.size||"m"),this.badgeEl.textContent=r.text):(this.badgeEl.hidden=!0,this.badgeEl.style.display="none",this.badgeEl.textContent="")),this.headlineEl&&(this.headlineEl.textContent=i,this.headlineEl.hidden=!i),this.subtitleEl&&(this.subtitleEl.textContent=s,this.subtitleEl.hidden=!s),this.descriptionEl&&(this.descriptionEl.textContent=a,this.descriptionEl.hidden=!a),this.actionsEl&&(this.actionsEl.replaceChildren(),c.forEach((t,e)=>{const i=document.createElement("db-button");i.setAttribute("variant",t.variant||(0===e?"primary":"tertiary")),i.setAttribute("size",t.size||"m"),t.href&&i.setAttribute("href",t.href),i.textContent=t.text,this.actionsEl.append(i)}),this.actionsEl.hidden=0===c.length)}}customElements.get("db-section-cta")||customElements.define("db-section-cta",DbSectionCta);export{DbSectionCta};
+import { syncMarketingBlockHost } from './marketing-block-host-utils.js';
+
+const CLASS = 'designbase-wc-section-cta';
+class DbSectionCta extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.built = false;
+    }
+    static get observedAttributes() {
+        return [
+            'title',
+            'headline',
+            'subtitle',
+            'description',
+            'badge',
+            'buttons',
+            'variant',
+            'theme',
+            '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();
+    }
+    parseBadge() {
+        try {
+            const raw = this.getAttribute('badge');
+            if (!raw)
+                return null;
+            return JSON.parse(raw);
+        }
+        catch {
+            return null;
+        }
+    }
+    parseButtons() {
+        try {
+            const parsed = JSON.parse(this.getAttribute('buttons') || '[]');
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    build() {
+        this.wrapEl = document.createElement('div');
+        this.wrapEl.className = `${CLASS}__inner`;
+        this.headerEl = document.createElement('div');
+        this.headerEl.className = 'designbase-wc-section-block-header';
+        this.badgeEl = document.createElement('db-badge');
+        this.badgeEl.className = 'designbase-wc-section-block-header__badge';
+        this.badgeEl.hidden = true;
+        this.headlineEl = document.createElement('h2');
+        this.headlineEl.className = 'designbase-wc-section-block-header__headline';
+        this.subtitleEl = document.createElement('p');
+        this.subtitleEl.className = 'designbase-wc-section-block-header__subtitle';
+        this.descriptionEl = document.createElement('p');
+        this.descriptionEl.className = 'designbase-wc-section-block-header__description';
+        this.headerEl.append(this.badgeEl, this.headlineEl, this.subtitleEl, this.descriptionEl);
+        this.actionsEl = document.createElement('div');
+        this.actionsEl.className = `${CLASS}__actions`;
+        this.wrapEl.append(this.headerEl, this.actionsEl);
+        this.append(this.wrapEl);
+    }
+    updateUI() {
+        const headline = this.getAttribute('headline') || this.getAttribute('title') || '';
+        const subtitle = this.getAttribute('subtitle') || '';
+        const description = this.getAttribute('description') || '';
+        const variant = this.getAttribute('variant') || 'default';
+        const theme = this.getAttribute('theme') || 'gradient';
+        const align = this.getAttribute('align') || 'center';
+        const contentPadding = this.getAttribute('content-padding') || 'l';
+        const badge = this.parseBadge();
+        const buttons = this.parseButtons();
+        this.className = [
+            CLASS,
+            `${CLASS}--${variant}`,
+            `${CLASS}--${theme}`,
+            `${CLASS}--${align}`,
+            `${CLASS}--padding-${contentPadding}`,
+        ].join(' ');
+        syncMarketingBlockHost(this, CLASS);
+        if (this.headerEl) {
+            this.headerEl.className = [
+                'designbase-wc-section-block-header',
+                `designbase-wc-section-block-header--${align}`,
+                `${CLASS}__header`,
+            ].join(' ');
+        }
+        if (this.badgeEl) {
+            if (badge?.text) {
+                this.badgeEl.hidden = false;
+                this.badgeEl.style.display = '';
+                this.badgeEl.setAttribute('variant', badge.variant || 'primary');
+                this.badgeEl.setAttribute('badge-style', badge.style || 'text');
+                this.badgeEl.setAttribute('size', badge.size || 'm');
+                this.badgeEl.textContent = badge.text;
+            }
+            else {
+                this.badgeEl.hidden = true;
+                this.badgeEl.style.display = 'none';
+                this.badgeEl.textContent = '';
+            }
+        }
+        if (this.headlineEl) {
+            this.headlineEl.textContent = headline;
+            this.headlineEl.hidden = !headline;
+        }
+        if (this.subtitleEl) {
+            this.subtitleEl.textContent = subtitle;
+            this.subtitleEl.hidden = !subtitle;
+        }
+        if (this.descriptionEl) {
+            this.descriptionEl.textContent = description;
+            this.descriptionEl.hidden = !description;
+        }
+        if (this.actionsEl) {
+            this.actionsEl.replaceChildren();
+            buttons.forEach((button, index) => {
+                const el = document.createElement('db-button');
+                el.setAttribute('variant', button.variant || (index === 0 ? 'primary' : 'tertiary'));
+                el.setAttribute('size', button.size || 'm');
+                if (button.href)
+                    el.setAttribute('href', button.href);
+                el.textContent = button.text;
+                this.actionsEl.append(el);
+            });
+            this.actionsEl.hidden = buttons.length === 0;
+        }
+    }
+}
+if (!customElements.get('db-section-cta'))
+    customElements.define('db-section-cta', DbSectionCta);
+
+export { DbSectionCta };

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

@@ -1 +1,120 @@
-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-faq";class DbSectionFaq extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["headline","subtitle","description","badge","items","allow-multiple","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.accordionEl=document.createElement("db-accordion"),this.accordionEl.className=`${i}__accordion`,this.innerEl.append(this.headerEl,this.accordionEl),this.append(this.innerEl)}updateUI(){const s=this.getAttribute("headline")||"자주 묻는 질문",n=this.getAttribute("subtitle")||"",a=this.getAttribute("description")||"",l=this.getAttribute("content-padding")||"l",r=this.getAttribute("align")||"center",c=this.hasAttribute("allow-multiple"),d=this.parseBadge(),o=this.parseItems();if(this.className=[i,`${i}--padding-${l}`].join(" "),e(this,i),this.headerEl&&t(this.headerEl,{headline:s,subtitle:n,description:a,badge:d,align:r}),!this.accordionEl)return;const h=o.map(t=>({id:t.id,title:t.question,content:t.answer,itemType:"question"}));this.accordionEl.setAttribute("items",JSON.stringify(h)),this.accordionEl.setAttribute("variant","separated"),this.accordionEl.setAttribute("size","m"),this.accordionEl.setAttribute("default-item-type","question"),c?(this.accordionEl.setAttribute("allow-multiple",""),this.accordionEl.setAttribute("expand-mode","multiple")):(this.accordionEl.removeAttribute("allow-multiple"),this.accordionEl.setAttribute("expand-mode","single"))}}customElements.get("db-section-faq")||customElements.define("db-section-faq",DbSectionFaq);export{DbSectionFaq};
+import { applySectionBlockHeader } from './section-block-header-utils.js';
+import { syncMarketingBlockHost } from './marketing-block-host-utils.js';
+
+const CLASS = 'designbase-wc-section-faq';
+class DbSectionFaq extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.built = false;
+    }
+    static get observedAttributes() {
+        return [
+            'headline',
+            'subtitle',
+            'description',
+            'badge',
+            'items',
+            'allow-multiple',
+            '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.accordionEl = document.createElement('db-accordion');
+        this.accordionEl.className = `${CLASS}__accordion`;
+        this.innerEl.append(this.headerEl, this.accordionEl);
+        this.append(this.innerEl);
+    }
+    updateUI() {
+        const headline = this.getAttribute('headline') || '자주 묻는 질문';
+        const subtitle = this.getAttribute('subtitle') || '';
+        const description = this.getAttribute('description') || '';
+        const contentPadding = this.getAttribute('content-padding') || 'l';
+        const align = this.getAttribute('align') || 'center';
+        const allowMultiple = this.hasAttribute('allow-multiple');
+        const badge = this.parseBadge();
+        const items = this.parseItems();
+        this.className = [CLASS, `${CLASS}--padding-${contentPadding}`].join(' ');
+        syncMarketingBlockHost(this, CLASS);
+        if (this.headerEl) {
+            applySectionBlockHeader(this.headerEl, {
+                headline,
+                subtitle,
+                description,
+                badge,
+                align,
+            });
+        }
+        if (!this.accordionEl)
+            return;
+        const accordionItems = items.map((item) => ({
+            id: item.id,
+            title: item.question,
+            content: item.answer,
+            itemType: 'question',
+        }));
+        this.accordionEl.setAttribute('items', JSON.stringify(accordionItems));
+        this.accordionEl.setAttribute('variant', 'separated');
+        this.accordionEl.setAttribute('size', 'm');
+        this.accordionEl.setAttribute('default-item-type', 'question');
+        if (allowMultiple) {
+            this.accordionEl.setAttribute('allow-multiple', '');
+            this.accordionEl.setAttribute('expand-mode', 'multiple');
+        }
+        else {
+            this.accordionEl.removeAttribute('allow-multiple');
+            this.accordionEl.setAttribute('expand-mode', 'single');
+        }
+    }
+}
+if (!customElements.get('db-section-faq'))
+    customElements.define('db-section-faq', DbSectionFaq);
+
+export { DbSectionFaq };

package/dist/esm/components/db-section-feature-grid.js

@@ -1 +1,137 @@
-import{createDbIcon as e}from"./db-icons.js";import{applySectionBlockHeader as t}from"./section-block-header-utils.js";import{syncMarketingBlockHost as i}from"./marketing-block-host-utils.js";const s="designbase-wc-section-feature-grid",n={sparkles:"sparkle",rocket:"package",shield:"award",chart:"trending-up",users:"user",bolt:"bulb"};class DbSectionFeatureGrid 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 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}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${s}__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=`${s}__grid`,this.innerEl.append(this.headerEl,this.gridEl),this.append(this.innerEl)}updateUI(){const a=this.getAttribute("headline")||"주요 기능",r=this.getAttribute("subtitle")||"",d=this.getAttribute("description")||"",l=this.getAttribute("columns")||"3",c=this.getAttribute("content-padding")||"l",o=this.getAttribute("align")||"center",h=this.hasAttribute("tinted"),u=this.parseBadge(),b=this.parseItems();this.className=[s,`${s}--cols-${l}`,`${s}--padding-${c}`,h&&`${s}--tinted`].filter(Boolean).join(" "),i(this,s),this.headerEl&&t(this.headerEl,{headline:a,subtitle:r,description:d,badge:u,align:o}),this.gridEl&&(this.gridEl.replaceChildren(),b.forEach(t=>{const i=document.createElement("article");i.className=`${s}__card`;const a=document.createElement("div");a.className=`${s}__card-icon`,a.append(e(n[t.iconName||"sparkles"]||"sparkle",24));const r=document.createElement("h3");r.className=`${s}__card-title`,r.textContent=t.title;const d=document.createElement("p");d.className=`${s}__card-description`,d.textContent=t.description,i.append(a,r,d),this.gridEl.append(i)}))}}customElements.get("db-section-feature-grid")||customElements.define("db-section-feature-grid",DbSectionFeatureGrid);export{DbSectionFeatureGrid};
+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-feature-grid';
+const ICON_ATTR_MAP = {
+    sparkles: 'sparkle',
+    rocket: 'package',
+    shield: 'award',
+    chart: 'trending-up',
+    users: 'user',
+    bolt: 'bulb',
+};
+class DbSectionFeatureGrid 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') || '3';
+        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();
+        this.className = [
+            CLASS,
+            `${CLASS}--cols-${columns}`,
+            `${CLASS}--padding-${contentPadding}`,
+            tinted && `${CLASS}--tinted`,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        syncMarketingBlockHost(this, CLASS);
+        if (this.headerEl) {
+            applySectionBlockHeader(this.headerEl, {
+                headline,
+                subtitle,
+                description,
+                badge,
+                align,
+            });
+        }
+        if (!this.gridEl)
+            return;
+        this.gridEl.replaceChildren();
+        items.forEach((item) => {
+            const card = document.createElement('article');
+            card.className = `${CLASS}__card`;
+            const iconWrap = document.createElement('div');
+            iconWrap.className = `${CLASS}__card-icon`;
+            iconWrap.append(createDbIcon(ICON_ATTR_MAP[item.iconName || 'sparkles'] || 'sparkle', 24));
+            const title = document.createElement('h3');
+            title.className = `${CLASS}__card-title`;
+            title.textContent = item.title;
+            const desc = document.createElement('p');
+            desc.className = `${CLASS}__card-description`;
+            desc.textContent = item.description;
+            card.append(iconWrap, title, desc);
+            this.gridEl.append(card);
+        });
+    }
+}
+if (!customElements.get('db-section-feature-grid')) {
+    customElements.define('db-section-feature-grid', DbSectionFeatureGrid);
+}
+
+export { DbSectionFeatureGrid };