@designbasekorea/ui-wc 0.5.5 → 0.5.6

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

@@ -1 +1,179 @@
-import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const e="designbase-wc-section-feature";class DbSectionFeature extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["headline","subtitle","description","badge","image","image-alt","media-position","actions","tinted","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}}get actions(){return this.parseActions()}set actions(t){this.setAttribute("actions","string"==typeof t?t:JSON.stringify(t))}parseActions(){try{const t=JSON.parse(this.getAttribute("actions")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${e}__inner`;const t=document.createElement("div");t.className=`${e}__content`,this.contentEl=t,this.headlineEl=document.createElement("h2"),this.headlineEl.className=`${e}__headline`,this.subtitleEl=document.createElement("p"),this.subtitleEl.className=`${e}__subtitle`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${e}__description`,this.actionsEl=document.createElement("div"),this.actionsEl.className=`${e}__actions`,t.append(this.headlineEl,this.subtitleEl,this.descriptionEl,this.actionsEl),this.mediaEl=document.createElement("div"),this.mediaEl.className=`${e}__media`,this.imageEl=document.createElement("img"),this.imageEl.className=`${e}__image`,this.mediaEl.append(this.imageEl),this.innerEl.append(t,this.mediaEl),this.append(this.innerEl)}updateUI(){const i=this.getAttribute("headline")||"",s=this.getAttribute("subtitle")||"",n=this.getAttribute("description")||"",a=this.getAttribute("image")||"",l=this.getAttribute("image-alt")||i||"feature",h=this.getAttribute("media-position")||"right",d=this.getAttribute("content-padding")||"l",r=this.hasAttribute("tinted"),c=this.parseBadge(),o=this.parseActions();if(this.className=[e,`${e}--media-${h}`,`${e}--padding-${d}`,r&&`${e}--tinted`].filter(Boolean).join(" "),t(this,e),this.contentEl&&this.headlineEl){const t=c?.text?.trim();t?(this.badgeEl||(this.badgeEl=document.createElement("db-badge"),this.badgeEl.className=`${e}__badge`),this.badgeEl.setAttribute("variant",c.variant||"primary"),this.badgeEl.setAttribute("badge-style",c.style||"text"),this.badgeEl.setAttribute("size",c.size||"m"),this.badgeEl.textContent=t,this.badgeEl.isConnected||this.contentEl.insertBefore(this.badgeEl,this.headlineEl)):this.badgeEl&&this.badgeEl.remove()}this.headlineEl&&(this.headlineEl.textContent=i),this.subtitleEl&&(this.subtitleEl.textContent=s,this.subtitleEl.hidden=!s),this.descriptionEl&&(this.descriptionEl.textContent=n,this.descriptionEl.hidden=!n),this.mediaEl&&this.imageEl&&(a?(this.mediaEl.hidden=!1,this.imageEl.src=a,this.imageEl.alt=l):this.mediaEl.hidden=!0),this.actionsEl&&(this.actionsEl.replaceChildren(),o.length>0?(o.forEach(t=>{const e=document.createElement("db-button");e.setAttribute("variant",t.variant||"primary"),e.setAttribute("size",t.size||"m"),t.href&&e.setAttribute("href",t.href),e.textContent=t.label,e.addEventListener("click",e=>{e.stopPropagation(),this.dispatchEvent(new CustomEvent("db-action",{detail:{action:t},bubbles:!0,composed:!0}))}),this.actionsEl.append(e)}),this.actionsEl.hidden=!1):this.actionsEl.hidden=!0)}}customElements.get("db-section-feature")||customElements.define("db-section-feature",DbSectionFeature);export{DbSectionFeature};
+import { syncMarketingBlockHost } from './marketing-block-host-utils.js';
+
+const CLASS = 'designbase-wc-section-feature';
+class DbSectionFeature extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.built = false;
+    }
+    static get observedAttributes() {
+        return [
+            'headline',
+            'subtitle',
+            'description',
+            'badge',
+            'image',
+            'image-alt',
+            'media-position',
+            'actions',
+            'tinted',
+            '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;
+        }
+    }
+    get actions() {
+        return this.parseActions();
+    }
+    set actions(value) {
+        this.setAttribute('actions', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    parseActions() {
+        try {
+            const parsed = JSON.parse(this.getAttribute('actions') || '[]');
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    build() {
+        this.innerEl = document.createElement('div');
+        this.innerEl.className = `${CLASS}__inner`;
+        const content = document.createElement('div');
+        content.className = `${CLASS}__content`;
+        this.contentEl = content;
+        this.headlineEl = document.createElement('h2');
+        this.headlineEl.className = `${CLASS}__headline`;
+        this.subtitleEl = document.createElement('p');
+        this.subtitleEl.className = `${CLASS}__subtitle`;
+        this.descriptionEl = document.createElement('p');
+        this.descriptionEl.className = `${CLASS}__description`;
+        this.actionsEl = document.createElement('div');
+        this.actionsEl.className = `${CLASS}__actions`;
+        content.append(this.headlineEl, this.subtitleEl, this.descriptionEl, this.actionsEl);
+        this.mediaEl = document.createElement('div');
+        this.mediaEl.className = `${CLASS}__media`;
+        this.imageEl = document.createElement('img');
+        this.imageEl.className = `${CLASS}__image`;
+        this.mediaEl.append(this.imageEl);
+        this.innerEl.append(content, this.mediaEl);
+        this.append(this.innerEl);
+    }
+    updateUI() {
+        const headline = this.getAttribute('headline') || '';
+        const subtitle = this.getAttribute('subtitle') || '';
+        const description = this.getAttribute('description') || '';
+        const image = this.getAttribute('image') || '';
+        const imageAlt = this.getAttribute('image-alt') || headline || 'feature';
+        const mediaPosition = this.getAttribute('media-position') || 'right';
+        const contentPadding = this.getAttribute('content-padding') || 'l';
+        const tinted = this.hasAttribute('tinted');
+        const badge = this.parseBadge();
+        const actions = this.parseActions();
+        this.className = [
+            CLASS,
+            `${CLASS}--media-${mediaPosition}`,
+            `${CLASS}--padding-${contentPadding}`,
+            tinted && `${CLASS}--tinted`,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        syncMarketingBlockHost(this, CLASS);
+        if (this.contentEl && this.headlineEl) {
+            const badgeText = badge?.text?.trim();
+            if (badgeText) {
+                if (!this.badgeEl) {
+                    this.badgeEl = document.createElement('db-badge');
+                    this.badgeEl.className = `${CLASS}__badge`;
+                }
+                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 = badgeText;
+                if (!this.badgeEl.isConnected) {
+                    this.contentEl.insertBefore(this.badgeEl, this.headlineEl);
+                }
+            }
+            else if (this.badgeEl) {
+                this.badgeEl.remove();
+            }
+        }
+        if (this.headlineEl)
+            this.headlineEl.textContent = 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.mediaEl && this.imageEl) {
+            if (image) {
+                this.mediaEl.hidden = false;
+                this.imageEl.src = image;
+                this.imageEl.alt = imageAlt;
+            }
+            else {
+                this.mediaEl.hidden = true;
+            }
+        }
+        if (this.actionsEl) {
+            this.actionsEl.replaceChildren();
+            if (actions.length > 0) {
+                actions.forEach((action) => {
+                    const button = document.createElement('db-button');
+                    button.setAttribute('variant', action.variant || 'primary');
+                    button.setAttribute('size', action.size || 'm');
+                    if (action.href)
+                        button.setAttribute('href', action.href);
+                    button.textContent = action.label;
+                    button.addEventListener('click', (event) => {
+                        event.stopPropagation();
+                        this.dispatchEvent(new CustomEvent('db-action', {
+                            detail: { action },
+                            bubbles: true,
+                            composed: true,
+                        }));
+                    });
+                    this.actionsEl.append(button);
+                });
+                this.actionsEl.hidden = false;
+            }
+            else {
+                this.actionsEl.hidden = true;
+            }
+        }
+    }
+}
+if (!customElements.get('db-section-feature'))
+    customElements.define('db-section-feature', DbSectionFeature);
+
+export { DbSectionFeature };

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

@@ -1 +1,243 @@
-const t="designbase-wc-section-hero";class DbSectionHero extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["title","subtitle","description","background-image","background-video","overlay-color","overlay-opacity","buttons","variant","theme","alignment","animated","full-height","min-height","max-height","content-max-width"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}get buttons(){return this.parseButtons()}set buttons(t){this.setAttribute("buttons","string"==typeof t?t:JSON.stringify(t))}parseButtons(){try{const t=JSON.parse(this.getAttribute("buttons")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}build(){this.backgroundVideoEl=document.createElement("video"),this.backgroundVideoEl.className=`${t}__background-video`,this.backgroundVideoEl.autoplay=!0,this.backgroundVideoEl.muted=!0,this.backgroundVideoEl.loop=!0,this.backgroundVideoEl.playsInline=!0,this.backgroundVideoEl.hidden=!0,this.backgroundImageEl=document.createElement("div"),this.backgroundImageEl.className=`${t}__background-image`,this.backgroundImageEl.hidden=!0,this.overlayEl=document.createElement("div"),this.overlayEl.className=`${t}__overlay`,this.overlayEl.hidden=!0;const e=document.createElement("div");e.className=`${t}__container`;const i=document.createElement("div");i.className=`${t}__content`,this.titleEl=document.createElement("h1"),this.titleEl.className=`${t}__title`,this.subtitleEl=document.createElement("p"),this.subtitleEl.className=`${t}__subtitle`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${t}__description`,this.buttonsEl=document.createElement("div"),this.buttonsEl.className=`${t}__buttons`,i.append(this.titleEl,this.subtitleEl,this.descriptionEl,this.buttonsEl),e.append(i),this.append(this.backgroundVideoEl,this.backgroundImageEl,this.overlayEl,e)}updateUI(){const e=this.getAttribute("title")||"",i=this.getAttribute("subtitle")||"",s=this.getAttribute("description")||"",n=this.getAttribute("background-image")||"",a=this.getAttribute("background-video")||"",o=this.getAttribute("overlay-color")||"",r=Number(this.getAttribute("overlay-opacity")||.5),l=this.getAttribute("variant")||"default",d=this.getAttribute("theme")||"light",c=this.getAttribute("alignment")||"left",h=this.hasAttribute("animated"),u=this.hasAttribute("full-height"),b=this.getAttribute("min-height"),g=this.getAttribute("max-height"),m=this.getAttribute("content-max-width"),E=this.parseButtons(),p=Boolean(n||a),y="dark"===d||"gradient"===d||p&&("overlay"===l||"image"===d);this.className=[t,`${t}--variant-${l}`,`${t}--theme-${d}`,`${t}--alignment-${c}`,h&&`${t}--animated`,u&&`${t}--full-height`,y&&`${t}--on-media`].filter(Boolean).join(" "),this.style.minHeight=b||"",this.style.maxHeight=g||"",this.titleEl&&(this.titleEl.textContent=e),this.subtitleEl&&(this.subtitleEl.textContent=i,this.subtitleEl.hidden=!i),this.descriptionEl&&(this.descriptionEl.textContent=s,this.descriptionEl.hidden=!s);const k=this.querySelector(`.${t}__content`);if(k&&(m?k.style.maxWidth=/^\d+$/.test(m)?`${m}px`:m:k.style.removeProperty("max-width")),this.backgroundVideoEl)if(a){this.backgroundVideoEl.hidden=!1,this.backgroundVideoEl.replaceChildren();const t=document.createElement("source");t.src=a,t.type="video/mp4",this.backgroundVideoEl.append(t)}else this.backgroundVideoEl.hidden=!0;this.backgroundImageEl&&(n?(this.backgroundImageEl.hidden=!1,this.backgroundImageEl.style.backgroundImage=`url(${n})`,this.backgroundImageEl.style.backgroundSize="cover",this.backgroundImageEl.style.backgroundPosition="center",this.backgroundImageEl.style.backgroundRepeat="no-repeat"):this.backgroundImageEl.hidden=!0),this.overlayEl&&(p?(this.overlayEl.hidden=!1,o?(this.overlayEl.style.background=o,this.overlayEl.style.opacity=String(r)):(this.overlayEl.style.background=`linear-gradient(180deg, rgba(0, 0, 0, ${.35*r}) 0%, rgba(0, 0, 0, ${r}) 100%)`,this.overlayEl.style.opacity="1")):this.overlayEl.hidden=!0),this.buttonsEl&&(this.buttonsEl.replaceChildren(),E.length>0?(E.forEach(e=>{const i=document.createElement("db-button");if(i.setAttribute("variant",function mapButtonVariant(t){return"outline"===t?"tertiary":"ghost"===t?"ghost":"secondary"===t?"secondary":"tertiary"===t?"tertiary":"primary"}(e.variant)),i.setAttribute("size",e.size||"m"),e.href&&i.setAttribute("href",e.href),e.external&&(i.setAttribute("target","_blank"),i.setAttribute("rel","noopener noreferrer")),e.startIcon)i.setAttribute("start-icon",e.startIcon),i.textContent=e.text;else if(e.icon){const s=document.createElement("span");s.className=`${t}__button-content`;const n=document.createElement("span");n.className=`${t}__button-icon`,n.setAttribute("aria-hidden","true"),n.textContent=e.icon;const a=document.createElement("span");a.textContent=e.text,s.append(n,a),i.append(s)}else i.textContent=e.text;i.addEventListener("click",t=>{t.stopPropagation(),this.dispatchEvent(new CustomEvent("db-button-click",{detail:{button:e},bubbles:!0,composed:!0}))}),this.buttonsEl.append(i)}),this.buttonsEl.hidden=!1):this.buttonsEl.hidden=!0)}}customElements.get("db-section-hero")||customElements.define("db-section-hero",DbSectionHero);export{DbSectionHero};
+const CLASS = 'designbase-wc-section-hero';
+function mapButtonVariant(variant) {
+    if (variant === 'outline')
+        return 'tertiary';
+    if (variant === 'ghost')
+        return 'ghost';
+    if (variant === 'secondary')
+        return 'secondary';
+    if (variant === 'tertiary')
+        return 'tertiary';
+    return 'primary';
+}
+class DbSectionHero extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.built = false;
+    }
+    static get observedAttributes() {
+        return [
+            'title',
+            'subtitle',
+            'description',
+            'background-image',
+            'background-video',
+            'overlay-color',
+            'overlay-opacity',
+            'buttons',
+            'variant',
+            'theme',
+            'alignment',
+            'animated',
+            'full-height',
+            'min-height',
+            'max-height',
+            'content-max-width',
+        ];
+    }
+    connectedCallback() {
+        this.style.display = 'block';
+        if (!this.built) {
+            this.built = true;
+            this.build();
+        }
+        this.updateUI();
+    }
+    attributeChangedCallback() {
+        if (!this.built)
+            return;
+        this.updateUI();
+    }
+    get buttons() {
+        return this.parseButtons();
+    }
+    set buttons(value) {
+        this.setAttribute('buttons', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    parseButtons() {
+        try {
+            const parsed = JSON.parse(this.getAttribute('buttons') || '[]');
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    build() {
+        this.backgroundVideoEl = document.createElement('video');
+        this.backgroundVideoEl.className = `${CLASS}__background-video`;
+        this.backgroundVideoEl.autoplay = true;
+        this.backgroundVideoEl.muted = true;
+        this.backgroundVideoEl.loop = true;
+        this.backgroundVideoEl.playsInline = true;
+        this.backgroundVideoEl.hidden = true;
+        this.backgroundImageEl = document.createElement('div');
+        this.backgroundImageEl.className = `${CLASS}__background-image`;
+        this.backgroundImageEl.hidden = true;
+        this.overlayEl = document.createElement('div');
+        this.overlayEl.className = `${CLASS}__overlay`;
+        this.overlayEl.hidden = true;
+        const container = document.createElement('div');
+        container.className = `${CLASS}__container`;
+        const content = document.createElement('div');
+        content.className = `${CLASS}__content`;
+        this.titleEl = document.createElement('h1');
+        this.titleEl.className = `${CLASS}__title`;
+        this.subtitleEl = document.createElement('p');
+        this.subtitleEl.className = `${CLASS}__subtitle`;
+        this.descriptionEl = document.createElement('p');
+        this.descriptionEl.className = `${CLASS}__description`;
+        this.buttonsEl = document.createElement('div');
+        this.buttonsEl.className = `${CLASS}__buttons`;
+        content.append(this.titleEl, this.subtitleEl, this.descriptionEl, this.buttonsEl);
+        container.append(content);
+        this.append(this.backgroundVideoEl, this.backgroundImageEl, this.overlayEl, container);
+    }
+    updateUI() {
+        const title = this.getAttribute('title') || '';
+        const subtitle = this.getAttribute('subtitle') || '';
+        const description = this.getAttribute('description') || '';
+        const backgroundImage = this.getAttribute('background-image') || '';
+        const backgroundVideo = this.getAttribute('background-video') || '';
+        const overlayColor = this.getAttribute('overlay-color') || '';
+        const overlayOpacity = Number(this.getAttribute('overlay-opacity') || 0.5);
+        const variant = this.getAttribute('variant') || 'default';
+        const theme = this.getAttribute('theme') || 'light';
+        const alignment = this.getAttribute('alignment') || 'left';
+        const animated = this.hasAttribute('animated');
+        const fullHeight = this.hasAttribute('full-height');
+        const minHeight = this.getAttribute('min-height');
+        const maxHeight = this.getAttribute('max-height');
+        const contentMaxWidth = this.getAttribute('content-max-width');
+        const buttons = this.parseButtons();
+        const hasMediaBackground = Boolean(backgroundImage || backgroundVideo);
+        const isOnMedia = theme === 'dark' ||
+            theme === 'gradient' ||
+            (hasMediaBackground && (variant === 'overlay' || theme === 'image'));
+        this.className = [
+            CLASS,
+            `${CLASS}--variant-${variant}`,
+            `${CLASS}--theme-${theme}`,
+            `${CLASS}--alignment-${alignment}`,
+            animated && `${CLASS}--animated`,
+            fullHeight && `${CLASS}--full-height`,
+            isOnMedia && `${CLASS}--on-media`,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        this.style.minHeight = minHeight || '';
+        this.style.maxHeight = maxHeight || '';
+        if (this.titleEl)
+            this.titleEl.textContent = title;
+        if (this.subtitleEl) {
+            this.subtitleEl.textContent = subtitle;
+            this.subtitleEl.hidden = !subtitle;
+        }
+        if (this.descriptionEl) {
+            this.descriptionEl.textContent = description;
+            this.descriptionEl.hidden = !description;
+        }
+        const content = this.querySelector(`.${CLASS}__content`);
+        if (content) {
+            if (contentMaxWidth) {
+                content.style.maxWidth = /^\d+$/.test(contentMaxWidth) ? `${contentMaxWidth}px` : contentMaxWidth;
+            }
+            else {
+                content.style.removeProperty('max-width');
+            }
+        }
+        if (this.backgroundVideoEl) {
+            if (backgroundVideo) {
+                this.backgroundVideoEl.hidden = false;
+                this.backgroundVideoEl.replaceChildren();
+                const source = document.createElement('source');
+                source.src = backgroundVideo;
+                source.type = 'video/mp4';
+                this.backgroundVideoEl.append(source);
+            }
+            else {
+                this.backgroundVideoEl.hidden = true;
+            }
+        }
+        if (this.backgroundImageEl) {
+            if (backgroundImage) {
+                this.backgroundImageEl.hidden = false;
+                this.backgroundImageEl.style.backgroundImage = `url(${backgroundImage})`;
+                this.backgroundImageEl.style.backgroundSize = 'cover';
+                this.backgroundImageEl.style.backgroundPosition = 'center';
+                this.backgroundImageEl.style.backgroundRepeat = 'no-repeat';
+            }
+            else {
+                this.backgroundImageEl.hidden = true;
+            }
+        }
+        if (this.overlayEl) {
+            if (hasMediaBackground) {
+                this.overlayEl.hidden = false;
+                if (overlayColor) {
+                    this.overlayEl.style.background = overlayColor;
+                    this.overlayEl.style.opacity = String(overlayOpacity);
+                }
+                else {
+                    this.overlayEl.style.background = `linear-gradient(180deg, rgba(0, 0, 0, ${overlayOpacity * 0.35}) 0%, rgba(0, 0, 0, ${overlayOpacity}) 100%)`;
+                    this.overlayEl.style.opacity = '1';
+                }
+            }
+            else {
+                this.overlayEl.hidden = true;
+            }
+        }
+        if (this.buttonsEl) {
+            this.buttonsEl.replaceChildren();
+            if (buttons.length > 0) {
+                buttons.forEach((button) => {
+                    const el = document.createElement('db-button');
+                    el.setAttribute('variant', mapButtonVariant(button.variant));
+                    el.setAttribute('size', button.size || 'm');
+                    if (button.href)
+                        el.setAttribute('href', button.href);
+                    if (button.external) {
+                        el.setAttribute('target', '_blank');
+                        el.setAttribute('rel', 'noopener noreferrer');
+                    }
+                    if (button.startIcon) {
+                        el.setAttribute('start-icon', button.startIcon);
+                        el.textContent = button.text;
+                    }
+                    else if (button.icon) {
+                        const content = document.createElement('span');
+                        content.className = `${CLASS}__button-content`;
+                        const iconSpan = document.createElement('span');
+                        iconSpan.className = `${CLASS}__button-icon`;
+                        iconSpan.setAttribute('aria-hidden', 'true');
+                        iconSpan.textContent = button.icon;
+                        const textSpan = document.createElement('span');
+                        textSpan.textContent = button.text;
+                        content.append(iconSpan, textSpan);
+                        el.append(content);
+                    }
+                    else {
+                        el.textContent = button.text;
+                    }
+                    el.addEventListener('click', (event) => {
+                        event.stopPropagation();
+                        this.dispatchEvent(new CustomEvent('db-button-click', {
+                            detail: { button },
+                            bubbles: true,
+                            composed: true,
+                        }));
+                    });
+                    this.buttonsEl.append(el);
+                });
+                this.buttonsEl.hidden = false;
+            }
+            else {
+                this.buttonsEl.hidden = true;
+            }
+        }
+    }
+}
+if (!customElements.get('db-section-hero'))
+    customElements.define('db-section-hero', DbSectionHero);
+
+export { DbSectionHero };

package/dist/esm/components/db-section-logo-cloud.js

@@ -1 +1,138 @@
-import{applySectionBlockHeader as e}from"./section-block-header-utils.js";import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const s="designbase-wc-section-logo-cloud";class DbSectionLogoCloud extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["headline","subtitle","description","badge","logos","variant","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()}parseLogos(){try{const e=JSON.parse(this.getAttribute("logos")||"[]");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.contentEl=document.createElement("div"),this.innerEl.append(this.headerEl,this.contentEl),this.append(this.innerEl)}updateUI(){const i=this.getAttribute("headline")||"함께하는 파트너",n=this.getAttribute("subtitle")||"",a=this.getAttribute("description")||"",l=this.getAttribute("variant")||"grid",r=this.getAttribute("content-padding")||"m",c=this.getAttribute("align")||"center",o=this.parseBadge(),d=this.parseLogos();if(this.className=[s,`${s}--${l}`,`${s}--padding-${r}`].join(" "),t(this,s),this.headerEl&&e(this.headerEl,{headline:i,subtitle:n,description:a,badge:o,align:c}),this.contentEl){if(this.contentEl.replaceChildren(),"marquee"===l){this.contentEl.className=`${s}__marquee`;const e=document.createElement("db-marquee");return e.setAttribute("items",JSON.stringify(d.map(e=>e.label??e.alt))),void this.contentEl.append(e)}this.contentEl.className=`${s}__grid`,d.forEach(e=>{const t=document.createElement(e.href?"a":"div");if(t.className=`${s}__item`,e.href&&t instanceof HTMLAnchorElement&&(t.href=e.href,t.target="_blank",t.rel="noopener noreferrer"),e.src){const i=document.createElement("img");i.src=e.src,i.alt=e.alt,i.className=`${s}__image`,t.append(i)}else{const i=document.createElement("span");i.className=`${s}__label`,i.textContent=e.label??e.alt,t.append(i)}this.contentEl.append(t)})}}}customElements.get("db-section-logo-cloud")||customElements.define("db-section-logo-cloud",DbSectionLogoCloud);export{DbSectionLogoCloud};
+import { applySectionBlockHeader } from './section-block-header-utils.js';
+import { syncMarketingBlockHost } from './marketing-block-host-utils.js';
+
+const CLASS = 'designbase-wc-section-logo-cloud';
+class DbSectionLogoCloud extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.built = false;
+    }
+    static get observedAttributes() {
+        return [
+            'headline',
+            'subtitle',
+            'description',
+            'badge',
+            'logos',
+            'variant',
+            '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();
+    }
+    parseLogos() {
+        try {
+            const parsed = JSON.parse(this.getAttribute('logos') || '[]');
+            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.contentEl = document.createElement('div');
+        this.innerEl.append(this.headerEl, this.contentEl);
+        this.append(this.innerEl);
+    }
+    updateUI() {
+        const headline = this.getAttribute('headline') || '함께하는 파트너';
+        const subtitle = this.getAttribute('subtitle') || '';
+        const description = this.getAttribute('description') || '';
+        const variant = this.getAttribute('variant') || 'grid';
+        const contentPadding = this.getAttribute('content-padding') || 'm';
+        const align = this.getAttribute('align') || 'center';
+        const badge = this.parseBadge();
+        const logos = this.parseLogos();
+        this.className = [
+            CLASS,
+            `${CLASS}--${variant}`,
+            `${CLASS}--padding-${contentPadding}`,
+        ].join(' ');
+        syncMarketingBlockHost(this, CLASS);
+        if (this.headerEl) {
+            applySectionBlockHeader(this.headerEl, {
+                headline,
+                subtitle,
+                description,
+                badge,
+                align,
+            });
+        }
+        if (!this.contentEl)
+            return;
+        this.contentEl.replaceChildren();
+        if (variant === 'marquee') {
+            this.contentEl.className = `${CLASS}__marquee`;
+            const marquee = document.createElement('db-marquee');
+            marquee.setAttribute('items', JSON.stringify(logos.map((l) => l.label ?? l.alt)));
+            this.contentEl.append(marquee);
+            return;
+        }
+        this.contentEl.className = `${CLASS}__grid`;
+        logos.forEach((logo) => {
+            const item = document.createElement(logo.href ? 'a' : 'div');
+            item.className = `${CLASS}__item`;
+            if (logo.href && item instanceof HTMLAnchorElement) {
+                item.href = logo.href;
+                item.target = '_blank';
+                item.rel = 'noopener noreferrer';
+            }
+            if (logo.src) {
+                const img = document.createElement('img');
+                img.src = logo.src;
+                img.alt = logo.alt;
+                img.className = `${CLASS}__image`;
+                item.append(img);
+            }
+            else {
+                const label = document.createElement('span');
+                label.className = `${CLASS}__label`;
+                label.textContent = logo.label ?? logo.alt;
+                item.append(label);
+            }
+            this.contentEl.append(item);
+        });
+    }
+}
+if (!customElements.get('db-section-logo-cloud')) {
+    customElements.define('db-section-logo-cloud', DbSectionLogoCloud);
+}
+
+export { DbSectionLogoCloud };