@designbasekorea/ui-wc 0.5.3 → 0.5.6

package/dist/esm/components/db-floating-action-button.js

@@ -1 +1,139 @@
-import{createDbIcon as t}from"./db-icons.js";const e=["s","m","l"],i=["primary","secondary","tertiary"],s={s:12,m:16,l:20},n={s:"xs",m:"s",l:"m"};class DbFloatingActionButton extends HTMLElement{constructor(){super(...arguments),this.handleClick=t=>{if(this.disabled||this.loading)return t.preventDefault(),void t.stopPropagation();this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))}}static get observedAttributes(){return["size","variant","icon","loading","disabled","aria-label"]}get size(){const t=this.getAttribute("size")||"m";return e.includes(t)?t:"m"}set size(t){this.setAttribute("size",t)}get variant(){const t=this.getAttribute("variant")||"primary";return i.includes(t)?t:"primary"}set variant(t){this.setAttribute("variant",t)}get loading(){return this.hasAttribute("loading")}set loading(t){this.toggleAttribute("loading",Boolean(t))}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",Boolean(t))}connectedCallback(){"button"!==this.getAttribute("role")&&this.setAttribute("role","button"),this.hasAttribute("type")||this.setAttribute("type","button"),this.addEventListener("click",this.handleClick),this.sync()}disconnectedCallback(){this.removeEventListener("click",this.handleClick)}attributeChangedCallback(){this.isConnected&&this.sync()}resolveIconName(t){if(!t)return;return t in{plus:1,search:1,settings:1,edit:1,close:1}?t:void 0}sync(){this.className=["designbase-wc-fab",`designbase-wc-fab--${this.size}`,`designbase-wc-fab--${this.variant}`,this.disabled&&"designbase-wc-fab--disabled",this.loading&&"designbase-wc-fab--loading"].filter(Boolean).join(" ");const e=this.getAttribute("aria-label")||"Floating action button";this.getAttribute("aria-label")!==e&&this.setAttribute("aria-label",e);const i=String(this.loading);this.getAttribute("aria-busy")!==i&&this.setAttribute("aria-busy",i);const a=String(this.disabled||this.loading);this.getAttribute("aria-disabled")!==a&&this.setAttribute("aria-disabled",a);let r=this.querySelector(":scope > .designbase-wc-fab__icon");if(r||(r=document.createElement("div"),r.className="designbase-wc-fab__icon",this.append(r)),r.replaceChildren(),this.loading){const t=document.createElement("span");return t.className=`designbase-wc-spinner designbase-wc-spinner--circular designbase-wc-spinner--${n[this.size]}`,t.setAttribute("aria-hidden","true"),t.innerHTML='<svg class="designbase-wc-spinner__circular" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle class="designbase-wc-spinner__circular-track" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"></circle><circle class="designbase-wc-spinner__circular-indicator" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"></circle></svg>',void r.append(t)}const c=this.getAttribute("icon"),o=this.resolveIconName(c);if(o)return void r.append(t(o,s[this.size]));const l=Array.from(this.children).find(t=>t!==r&&!t.hasAttribute("data-wc-internal"));l&&!l.isConnected&&r.append(l)}}customElements.get("db-floating-action-button")||customElements.define("db-floating-action-button",DbFloatingActionButton);export{DbFloatingActionButton};
+import { createDbIcon } from './db-icons.js';
+
+const SIZES = ['s', 'm', 'l'];
+const VARIANTS = ['primary', 'secondary', 'tertiary'];
+const CIRCULAR_SPINNER_HTML = '<svg class="designbase-wc-spinner__circular" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle class="designbase-wc-spinner__circular-track" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"></circle><circle class="designbase-wc-spinner__circular-indicator" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"></circle></svg>';
+const ICON_SIZE = {
+    s: 12,
+    m: 16,
+    l: 20,
+};
+const SPINNER_SIZE = {
+    s: 'xs',
+    m: 's',
+    l: 'm',
+};
+class DbFloatingActionButton extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.handleClick = (event) => {
+            if (this.disabled || this.loading) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            this.dispatchEvent(new CustomEvent('db-click', { bubbles: true, composed: true }));
+        };
+    }
+    static get observedAttributes() {
+        return ['size', 'variant', 'icon', 'loading', 'disabled', 'aria-label'];
+    }
+    get size() {
+        const raw = this.getAttribute('size') || 'm';
+        return SIZES.includes(raw) ? raw : 'm';
+    }
+    set size(value) {
+        this.setAttribute('size', value);
+    }
+    get variant() {
+        const raw = this.getAttribute('variant') || 'primary';
+        return VARIANTS.includes(raw) ? raw : 'primary';
+    }
+    set variant(value) {
+        this.setAttribute('variant', value);
+    }
+    get loading() {
+        return this.hasAttribute('loading');
+    }
+    set loading(value) {
+        this.toggleAttribute('loading', Boolean(value));
+    }
+    get disabled() {
+        return this.hasAttribute('disabled');
+    }
+    set disabled(value) {
+        this.toggleAttribute('disabled', Boolean(value));
+    }
+    connectedCallback() {
+        if (this.getAttribute('role') !== 'button') {
+            this.setAttribute('role', 'button');
+        }
+        if (!this.hasAttribute('type')) {
+            this.setAttribute('type', 'button');
+        }
+        this.addEventListener('click', this.handleClick);
+        this.sync();
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this.handleClick);
+    }
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.sync();
+    }
+    resolveIconName(icon) {
+        if (!icon)
+            return undefined;
+        const known = {
+            plus: 1,
+            search: 1,
+            settings: 1,
+            edit: 1,
+            close: 1,
+        };
+        return icon in known ? icon : undefined;
+    }
+    sync() {
+        this.className = [
+            'designbase-wc-fab',
+            `designbase-wc-fab--${this.size}`,
+            `designbase-wc-fab--${this.variant}`,
+            this.disabled && 'designbase-wc-fab--disabled',
+            this.loading && 'designbase-wc-fab--loading',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const label = this.getAttribute('aria-label') || 'Floating action button';
+        if (this.getAttribute('aria-label') !== label) {
+            this.setAttribute('aria-label', label);
+        }
+        const busy = String(this.loading);
+        if (this.getAttribute('aria-busy') !== busy) {
+            this.setAttribute('aria-busy', busy);
+        }
+        const ariaDisabled = String(this.disabled || this.loading);
+        if (this.getAttribute('aria-disabled') !== ariaDisabled) {
+            this.setAttribute('aria-disabled', ariaDisabled);
+        }
+        let iconHost = this.querySelector(':scope > .designbase-wc-fab__icon');
+        if (!iconHost) {
+            iconHost = document.createElement('div');
+            iconHost.className = 'designbase-wc-fab__icon';
+            this.append(iconHost);
+        }
+        iconHost.replaceChildren();
+        if (this.loading) {
+            const spinner = document.createElement('span');
+            spinner.className = `designbase-wc-spinner designbase-wc-spinner--circular designbase-wc-spinner--${SPINNER_SIZE[this.size]}`;
+            spinner.setAttribute('aria-hidden', 'true');
+            spinner.innerHTML = CIRCULAR_SPINNER_HTML;
+            iconHost.append(spinner);
+            return;
+        }
+        const iconAttr = this.getAttribute('icon');
+        const iconName = this.resolveIconName(iconAttr);
+        if (iconName) {
+            iconHost.append(createDbIcon(iconName, ICON_SIZE[this.size]));
+            return;
+        }
+        const slottedIcon = Array.from(this.children).find((child) => child !== iconHost && !child.hasAttribute('data-wc-internal'));
+        if (slottedIcon && !slottedIcon.isConnected) {
+            iconHost.append(slottedIcon);
+        }
+    }
+}
+if (!customElements.get('db-floating-action-button')) {
+    customElements.define('db-floating-action-button', DbFloatingActionButton);
+}
+
+export { DbFloatingActionButton };

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

@@ -1 +1,385 @@
-import{createShareIcon as e}from"./db-share-icons.js";const t=["default","compact","minimal"],s=["s","m","l"],n={youtube:"youtube",instagram:"instagram",x:"x",linkedin:"linkedin",facebook:"facebook",email:"mail"};function parseJson(e,t){if(!e)return t;try{return JSON.parse(e)??t}catch{return t}}class DbFooter extends HTMLElement{static get observedAttributes(){return["columns","legal-links","social-links","company-info","family-sites","tagline","copyright","logo-type","variant","size","full-width","show-logo","show-social","family-site-label"]}connectedCallback(){this.render()}attributeChangedCallback(){this.isConnected&&this.render()}get columns(){return parseJson(this.getAttribute("columns"),[])}set columns(e){this.setAttribute("columns","string"==typeof e?e:JSON.stringify(e))}get legalLinks(){return parseJson(this.getAttribute("legal-links"),[])}set legalLinks(e){this.setAttribute("legal-links","string"==typeof e?e:JSON.stringify(e))}get socialLinks(){return parseJson(this.getAttribute("social-links"),[])}set socialLinks(e){this.setAttribute("social-links","string"==typeof e?e:JSON.stringify(e))}get companyInfo(){return parseJson(this.getAttribute("company-info"),{})}set companyInfo(e){this.setAttribute("company-info","string"==typeof e?e:JSON.stringify(e))}get familySites(){return parseJson(this.getAttribute("family-sites"),[])}set familySites(e){this.setAttribute("family-sites","string"==typeof e?e:JSON.stringify(e))}syncHostClasses(){const e=this.getAttribute("size")||"m",n=this.getAttribute("variant")||"default",a=s.includes(e)?e:"m",i=t.includes(n)?n:"default";this.className=["designbase-wc-footer",`designbase-wc-footer--${a}`,`designbase-wc-footer--${i}`,this.hasAttribute("full-width")&&"designbase-wc-footer--full-width"].filter(Boolean).join(" ")}dispatchLinkClick(e,t){this.dispatchEvent(new CustomEvent("db-link-click",{bubbles:!0,composed:!0,detail:{link:e,source:t}}))}createLink(e,t,s){const n=document.createElement("a");return n.href=e.href||"#",n.className=[t,e.emphasize&&`${t}--emphasize`].filter(Boolean).join(" "),n.textContent=e.label,e.external&&(n.target="_blank",n.rel="noopener noreferrer"),n.addEventListener("click",t=>{t.preventDefault(),this.dispatchLinkClick(e,s)}),n}createSocialLink(t,s){const a=document.createElement("a");a.href=t.href,a.className="designbase-wc-footer__social-link",a.target="_blank",a.rel="noopener noreferrer",a.setAttribute("aria-label",t.label||t.platform);const i=n[t.platform]||"share-alt";return a.append(e(i,s)),a.addEventListener("click",e=>{e.preventDefault(),this.dispatchEvent(new CustomEvent("db-social-click",{bubbles:!0,composed:!0,detail:{link:t}}))}),a}createCompanyInfoRows(e){const t=[],s=[];e.companyName&&s.push(e.companyName),e.representative&&s.push(`대표: ${e.representative}`),e.businessNumber&&s.push(`사업자등록번호: ${e.businessNumber}`),s.length&&t.push(s.join(" | "));const n=[];e.address&&n.push(e.address),e.phone&&n.push(`대표전화: ${e.phone}`),e.customerCenter&&n.push(`고객센터: ${e.customerCenter}`),n.length&&t.push(n.join(" | "));const a=[];return e.email&&a.push(`이메일: ${e.email}`),e.mailOrderNumber&&a.push(`통신판매업신고: ${e.mailOrderNumber}`),e.hostingProvider&&a.push(`호스팅: ${e.hostingProvider}`),a.length&&t.push(a.join(" | ")),t}showLogo(){return!this.hasAttribute("show-logo")||"false"!==this.getAttribute("show-logo")}createLogo(){const e=document.createElement("div");e.className="designbase-wc-footer__logo";const t=document.createElement("db-logo");return t.setAttribute("type",this.getAttribute("logo-type")||"designbase"),t.setAttribute("size","s"),t.setAttribute("clickable",""),t.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-logo-click",{bubbles:!0,composed:!0}))}),e.append(t),e}renderBrand(e,t={}){const{showTagline:s=!0}=t,n=document.createElement("div");n.className="designbase-wc-footer__brand",this.showLogo()&&n.append(this.createLogo());const a=this.getAttribute("tagline");if(s&&a){const e=document.createElement("p");e.className="designbase-wc-footer__tagline",e.textContent=a,n.append(e)}const i=this.socialLinks;if(i.length&&(!this.hasAttribute("show-social")||"false"!==this.getAttribute("show-social"))){const t=document.createElement("div");t.className="designbase-wc-footer__social",i.forEach(s=>t.append(this.createSocialLink(s,e))),n.append(t)}return n}renderColumns(e){if(!e.length)return null;const t=document.createElement("div");return t.className="designbase-wc-footer__columns",t.style.setProperty("--db-footer-columns",String(Math.min(e.length,4))),e.forEach(e=>{const s=document.createElement("div");s.className="designbase-wc-footer__column";const n=document.createElement("h3");n.className="designbase-wc-footer__column-title",n.textContent=e.title,s.append(n);const a=document.createElement("ul");a.className="designbase-wc-footer__column-list",e.items.forEach(e=>{const t=document.createElement("li");t.append(this.createLink(e,"designbase-wc-footer__column-link","column")),a.append(t)}),s.append(a),t.append(s)}),t}createLegalNav(e){const t=document.createElement("nav");t.className="designbase-wc-footer__legal-nav",t.setAttribute("aria-label","법적 고지");const s=document.createElement("ul");return s.className="designbase-wc-footer__legal-list",e.forEach((t,n)=>{const a=document.createElement("li");if(a.append(this.createLink(t,"designbase-wc-footer__legal-link","legal")),s.append(a),n<e.length-1){const e=document.createElement("span");e.className="designbase-wc-footer__legal-divider",e.setAttribute("aria-hidden","true"),e.textContent="|",a.append(e)}}),t.append(s),t}renderLegalBar(e,t){if(!e.length&&!t.length)return null;const s=document.createElement("div");if(s.className="designbase-wc-footer__legal-bar",e.length&&s.append(this.createLegalNav(e)),t.length){const e=document.createElement("div");e.className="designbase-wc-footer__family-site";const n=document.createElement("select");n.className="designbase-wc-footer__family-select",n.setAttribute("aria-label",this.getAttribute("family-site-label")||"패밀리 사이트");const a=document.createElement("option");a.value="",a.textContent=this.getAttribute("family-site-label")||"패밀리 사이트",a.disabled=!0,a.selected=!0,n.append(a),t.forEach(e=>{const t=document.createElement("option");t.value=e.href,t.textContent=e.label,t.dataset.id=e.id,n.append(t)}),n.addEventListener("change",()=>{const e=t.find(e=>e.href===n.value);e&&(n.selectedIndex=0,this.dispatchEvent(new CustomEvent("db-family-site-change",{bubbles:!0,composed:!0,detail:{site:e}})))}),e.append(n),s.append(e)}return s}renderCompanyInfo(e){const t=this.createCompanyInfoRows(e);if(!t.length)return null;const s=document.createElement("div");return s.className="designbase-wc-footer__company",t.forEach(e=>{const t=document.createElement("p");t.className="designbase-wc-footer__company-line",t.textContent=e,s.append(t)}),s}createCopyright(e){const t=document.createElement("div");t.className="designbase-wc-footer__bottom";const s=document.createElement("p");return s.className="designbase-wc-footer__copyright",s.textContent=e,t.append(s),t}renderMinimal(e,t,s){const n=document.createElement("div");n.className="designbase-wc-footer__minimal-bar";const a=document.createElement("div");if(a.className="designbase-wc-footer__minimal-start",this.showLogo()&&a.append(this.createLogo()),n.append(a),t.length){const e=document.createElement("div");e.className="designbase-wc-footer__minimal-legal",e.append(this.createLegalNav(t)),n.append(e)}e.append(n),e.append(this.createCopyright(s))}render(){this.syncHostClasses(),this.setAttribute("role","contentinfo");const e=this.getAttribute("variant")||"default",t=this.getAttribute("size")||"m",s="s"===t?18:"l"===t?22:20,n="default"===e?this.columns:[],a=this.legalLinks,i=this.companyInfo,o=this.familySites,r=this.getAttribute("copyright")||`© ${(new Date).getFullYear()} Designbase. All rights reserved.`;this.replaceChildren();const l=document.createElement("div");if(l.className=["designbase-wc-footer__container",this.hasAttribute("full-width")&&"designbase-wc-footer__container--full-width"].filter(Boolean).join(" "),"minimal"===e)return this.renderMinimal(l,a,r),void this.append(l);const c=document.createElement("div");c.className="designbase-wc-footer__top",c.append(this.renderBrand(s,{showTagline:"compact"!==e}));const d=this.renderColumns(n);d&&c.append(d),l.append(c);const m=this.renderLegalBar(a,o);m&&l.append(m);const u=this.renderCompanyInfo(i);u&&l.append(u),l.append(this.createCopyright(r)),this.append(l)}}customElements.get("db-footer")||customElements.define("db-footer",DbFooter);export{DbFooter};
+import { createShareIcon } from './db-share-icons.js';
+
+const VARIANTS = ['default', 'compact', 'minimal'];
+const SIZES = ['s', 'm', 'l'];
+const SOCIAL_ICON_MAP = {
+    youtube: 'youtube',
+    instagram: 'instagram',
+    x: 'x',
+    linkedin: 'linkedin',
+    facebook: 'facebook',
+    email: 'mail',
+};
+function parseJson(raw, fallback) {
+    if (!raw)
+        return fallback;
+    try {
+        const parsed = JSON.parse(raw);
+        return parsed ?? fallback;
+    }
+    catch {
+        return fallback;
+    }
+}
+class DbFooter extends HTMLElement {
+    static get observedAttributes() {
+        return [
+            'columns',
+            'legal-links',
+            'social-links',
+            'company-info',
+            'family-sites',
+            'tagline',
+            'copyright',
+            'logo-type',
+            'variant',
+            'size',
+            'full-width',
+            'show-logo',
+            'show-social',
+            'family-site-label',
+        ];
+    }
+    connectedCallback() {
+        this.render();
+    }
+    attributeChangedCallback() {
+        if (!this.isConnected)
+            return;
+        this.render();
+    }
+    get columns() {
+        return parseJson(this.getAttribute('columns'), []);
+    }
+    set columns(value) {
+        this.setAttribute('columns', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    get legalLinks() {
+        return parseJson(this.getAttribute('legal-links'), []);
+    }
+    set legalLinks(value) {
+        this.setAttribute('legal-links', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    get socialLinks() {
+        return parseJson(this.getAttribute('social-links'), []);
+    }
+    set socialLinks(value) {
+        this.setAttribute('social-links', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    get companyInfo() {
+        return parseJson(this.getAttribute('company-info'), {});
+    }
+    set companyInfo(value) {
+        this.setAttribute('company-info', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    get familySites() {
+        return parseJson(this.getAttribute('family-sites'), []);
+    }
+    set familySites(value) {
+        this.setAttribute('family-sites', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    syncHostClasses() {
+        const size = this.getAttribute('size') || 'm';
+        const variant = this.getAttribute('variant') || 'default';
+        const safeSize = SIZES.includes(size) ? size : 'm';
+        const safeVariant = VARIANTS.includes(variant) ? variant : 'default';
+        this.className = [
+            'designbase-wc-footer',
+            `designbase-wc-footer--${safeSize}`,
+            `designbase-wc-footer--${safeVariant}`,
+            this.hasAttribute('full-width') && 'designbase-wc-footer--full-width',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    dispatchLinkClick(link, source) {
+        this.dispatchEvent(new CustomEvent('db-link-click', {
+            bubbles: true,
+            composed: true,
+            detail: { link, source },
+        }));
+    }
+    createLink(link, className, source) {
+        const anchor = document.createElement('a');
+        anchor.href = link.href || '#';
+        anchor.className = [
+            className,
+            link.emphasize && `${className}--emphasize`,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        anchor.textContent = link.label;
+        if (link.external) {
+            anchor.target = '_blank';
+            anchor.rel = 'noopener noreferrer';
+        }
+        anchor.addEventListener('click', (event) => {
+            event.preventDefault();
+            this.dispatchLinkClick(link, source);
+        });
+        return anchor;
+    }
+    createSocialLink(link, iconPx) {
+        const anchor = document.createElement('a');
+        anchor.href = link.href;
+        anchor.className = 'designbase-wc-footer__social-link';
+        anchor.target = '_blank';
+        anchor.rel = 'noopener noreferrer';
+        anchor.setAttribute('aria-label', link.label || link.platform);
+        const iconName = SOCIAL_ICON_MAP[link.platform] || 'share-alt';
+        anchor.append(createShareIcon(iconName, iconPx));
+        anchor.addEventListener('click', (event) => {
+            event.preventDefault();
+            this.dispatchEvent(new CustomEvent('db-social-click', {
+                bubbles: true,
+                composed: true,
+                detail: { link },
+            }));
+        });
+        return anchor;
+    }
+    createCompanyInfoRows(info) {
+        const rows = [];
+        const line1 = [];
+        if (info.companyName)
+            line1.push(info.companyName);
+        if (info.representative)
+            line1.push(`대표: ${info.representative}`);
+        if (info.businessNumber)
+            line1.push(`사업자등록번호: ${info.businessNumber}`);
+        if (line1.length)
+            rows.push(line1.join(' | '));
+        const line2 = [];
+        if (info.address)
+            line2.push(info.address);
+        if (info.phone)
+            line2.push(`대표전화: ${info.phone}`);
+        if (info.customerCenter)
+            line2.push(`고객센터: ${info.customerCenter}`);
+        if (line2.length)
+            rows.push(line2.join(' | '));
+        const line3 = [];
+        if (info.email)
+            line3.push(`이메일: ${info.email}`);
+        if (info.mailOrderNumber)
+            line3.push(`통신판매업신고: ${info.mailOrderNumber}`);
+        if (info.hostingProvider)
+            line3.push(`호스팅: ${info.hostingProvider}`);
+        if (line3.length)
+            rows.push(line3.join(' | '));
+        return rows;
+    }
+    showLogo() {
+        return !this.hasAttribute('show-logo') || this.getAttribute('show-logo') !== 'false';
+    }
+    createLogo() {
+        const logoWrap = document.createElement('div');
+        logoWrap.className = 'designbase-wc-footer__logo';
+        const logo = document.createElement('db-logo');
+        logo.setAttribute('type', this.getAttribute('logo-type') || 'designbase');
+        logo.setAttribute('size', 's');
+        logo.setAttribute('clickable', '');
+        logo.addEventListener('db-click', () => {
+            this.dispatchEvent(new CustomEvent('db-logo-click', { bubbles: true, composed: true }));
+        });
+        logoWrap.append(logo);
+        return logoWrap;
+    }
+    renderBrand(iconPx, options = {}) {
+        const { showTagline = true } = options;
+        const brand = document.createElement('div');
+        brand.className = 'designbase-wc-footer__brand';
+        if (this.showLogo()) {
+            brand.append(this.createLogo());
+        }
+        const tagline = this.getAttribute('tagline');
+        if (showTagline && tagline) {
+            const taglineEl = document.createElement('p');
+            taglineEl.className = 'designbase-wc-footer__tagline';
+            taglineEl.textContent = tagline;
+            brand.append(taglineEl);
+        }
+        const socialLinks = this.socialLinks;
+        if (socialLinks.length && (!this.hasAttribute('show-social') || this.getAttribute('show-social') !== 'false')) {
+            const social = document.createElement('div');
+            social.className = 'designbase-wc-footer__social';
+            socialLinks.forEach((link) => social.append(this.createSocialLink(link, iconPx)));
+            brand.append(social);
+        }
+        return brand;
+    }
+    renderColumns(columns) {
+        if (!columns.length)
+            return null;
+        const wrap = document.createElement('div');
+        wrap.className = 'designbase-wc-footer__columns';
+        wrap.style.setProperty('--db-footer-columns', String(Math.min(columns.length, 4)));
+        columns.forEach((column) => {
+            const col = document.createElement('div');
+            col.className = 'designbase-wc-footer__column';
+            const title = document.createElement('h3');
+            title.className = 'designbase-wc-footer__column-title';
+            title.textContent = column.title;
+            col.append(title);
+            const list = document.createElement('ul');
+            list.className = 'designbase-wc-footer__column-list';
+            column.items.forEach((item) => {
+                const li = document.createElement('li');
+                li.append(this.createLink(item, 'designbase-wc-footer__column-link', 'column'));
+                list.append(li);
+            });
+            col.append(list);
+            wrap.append(col);
+        });
+        return wrap;
+    }
+    createLegalNav(legalLinks) {
+        const nav = document.createElement('nav');
+        nav.className = 'designbase-wc-footer__legal-nav';
+        nav.setAttribute('aria-label', '법적 고지');
+        const list = document.createElement('ul');
+        list.className = 'designbase-wc-footer__legal-list';
+        legalLinks.forEach((link, index) => {
+            const li = document.createElement('li');
+            li.append(this.createLink(link, 'designbase-wc-footer__legal-link', 'legal'));
+            list.append(li);
+            if (index < legalLinks.length - 1) {
+                const divider = document.createElement('span');
+                divider.className = 'designbase-wc-footer__legal-divider';
+                divider.setAttribute('aria-hidden', 'true');
+                divider.textContent = '|';
+                li.append(divider);
+            }
+        });
+        nav.append(list);
+        return nav;
+    }
+    renderLegalBar(legalLinks, familySites) {
+        if (!legalLinks.length && !familySites.length)
+            return null;
+        const bar = document.createElement('div');
+        bar.className = 'designbase-wc-footer__legal-bar';
+        if (legalLinks.length) {
+            bar.append(this.createLegalNav(legalLinks));
+        }
+        if (familySites.length) {
+            const familyWrap = document.createElement('div');
+            familyWrap.className = 'designbase-wc-footer__family-site';
+            const select = document.createElement('select');
+            select.className = 'designbase-wc-footer__family-select';
+            select.setAttribute('aria-label', this.getAttribute('family-site-label') || '패밀리 사이트');
+            const placeholder = document.createElement('option');
+            placeholder.value = '';
+            placeholder.textContent = this.getAttribute('family-site-label') || '패밀리 사이트';
+            placeholder.disabled = true;
+            placeholder.selected = true;
+            select.append(placeholder);
+            familySites.forEach((site) => {
+                const option = document.createElement('option');
+                option.value = site.href;
+                option.textContent = site.label;
+                option.dataset.id = site.id;
+                select.append(option);
+            });
+            select.addEventListener('change', () => {
+                const selected = familySites.find((site) => site.href === select.value);
+                if (!selected)
+                    return;
+                select.selectedIndex = 0;
+                this.dispatchEvent(new CustomEvent('db-family-site-change', {
+                    bubbles: true,
+                    composed: true,
+                    detail: { site: selected },
+                }));
+            });
+            familyWrap.append(select);
+            bar.append(familyWrap);
+        }
+        return bar;
+    }
+    renderCompanyInfo(info) {
+        const rows = this.createCompanyInfoRows(info);
+        if (!rows.length)
+            return null;
+        const wrap = document.createElement('div');
+        wrap.className = 'designbase-wc-footer__company';
+        rows.forEach((row) => {
+            const line = document.createElement('p');
+            line.className = 'designbase-wc-footer__company-line';
+            line.textContent = row;
+            wrap.append(line);
+        });
+        return wrap;
+    }
+    createCopyright(copyright) {
+        const bottom = document.createElement('div');
+        bottom.className = 'designbase-wc-footer__bottom';
+        const copyrightEl = document.createElement('p');
+        copyrightEl.className = 'designbase-wc-footer__copyright';
+        copyrightEl.textContent = copyright;
+        bottom.append(copyrightEl);
+        return bottom;
+    }
+    renderMinimal(container, legalLinks, copyright) {
+        const bar = document.createElement('div');
+        bar.className = 'designbase-wc-footer__minimal-bar';
+        const start = document.createElement('div');
+        start.className = 'designbase-wc-footer__minimal-start';
+        if (this.showLogo())
+            start.append(this.createLogo());
+        bar.append(start);
+        if (legalLinks.length) {
+            const legalWrap = document.createElement('div');
+            legalWrap.className = 'designbase-wc-footer__minimal-legal';
+            legalWrap.append(this.createLegalNav(legalLinks));
+            bar.append(legalWrap);
+        }
+        container.append(bar);
+        container.append(this.createCopyright(copyright));
+    }
+    render() {
+        this.syncHostClasses();
+        this.setAttribute('role', 'contentinfo');
+        const variant = this.getAttribute('variant') || 'default';
+        const size = this.getAttribute('size') || 'm';
+        const iconPx = size === 's' ? 18 : size === 'l' ? 22 : 20;
+        const columns = variant === 'default' ? this.columns : [];
+        const legalLinks = this.legalLinks;
+        const companyInfo = this.companyInfo;
+        const familySites = this.familySites;
+        const copyright = this.getAttribute('copyright') || `© ${new Date().getFullYear()} Designbase. All rights reserved.`;
+        this.replaceChildren();
+        const container = document.createElement('div');
+        container.className = [
+            'designbase-wc-footer__container',
+            this.hasAttribute('full-width') && 'designbase-wc-footer__container--full-width',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        if (variant === 'minimal') {
+            this.renderMinimal(container, legalLinks, copyright);
+            this.append(container);
+            return;
+        }
+        const top = document.createElement('div');
+        top.className = 'designbase-wc-footer__top';
+        top.append(this.renderBrand(iconPx, { showTagline: variant !== 'compact' }));
+        const columnsEl = this.renderColumns(columns);
+        if (columnsEl)
+            top.append(columnsEl);
+        container.append(top);
+        const legalBar = this.renderLegalBar(legalLinks, familySites);
+        if (legalBar)
+            container.append(legalBar);
+        const companyEl = this.renderCompanyInfo(companyInfo);
+        if (companyEl)
+            container.append(companyEl);
+        container.append(this.createCopyright(copyright));
+        this.append(container);
+    }
+}
+if (!customElements.get('db-footer')) {
+    customElements.define('db-footer', DbFooter);
+}
+
+export { DbFooter };