@designbasekorea/ui-wc 0.5.5 → 0.5.6

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

@@ -1 +1,680 @@
-import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l"],a=["default","transparent"],n=["fixed","sticky","static"];function resolveIcon(e){if(e)return e}class DbNavbar extends HTMLElement{constructor(){super(...arguments),this.mobileOpen=!1,this.userMenuOpen=!1,this.expandedMobile={},this.outsideHandler=null}static get observedAttributes(){return["items","user-menu-items","user-profile","size","variant","position","is-authenticated","show-search","search-placeholder","full-width","shadow"]}connectedCallback(){this.render(),this.bindOutsideClick()}disconnectedCallback(){this.unbindOutsideClick()}attributeChangedCallback(){this.isConnected&&this.render()}get items(){return this.parseItems("items")}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get userMenuItems(){return this.parseItems("user-menu-items")}set userMenuItems(e){this.setAttribute("user-menu-items","string"==typeof e?e:JSON.stringify(e))}get userProfile(){return this.parseUserProfile()}set userProfile(e){null==e?this.removeAttribute("user-profile"):this.setAttribute("user-profile","string"==typeof e?e:JSON.stringify(e))}parseItems(e="items"){try{const t=JSON.parse(this.getAttribute(e)||"[]");return Array.isArray(t)?t:[]}catch{return[]}}parseUserProfile(){const e=this.getAttribute("user-profile");if(!e)return null;try{return JSON.parse(e)}catch{return null}}iconSize(e){return"s"===e?16:"l"===e?24:20}bindOutsideClick(){this.outsideHandler||(this.outsideHandler=e=>{this.contains(e.target)||(this.userMenuOpen=!1,this.updateUserMenuVisibility())},document.addEventListener("mousedown",this.outsideHandler))}unbindOutsideClick(){this.outsideHandler&&(document.removeEventListener("mousedown",this.outsideHandler),this.outsideHandler=null)}dispatchItemClick(e,t){this.dispatchEvent(new CustomEvent("user"===t?"db-user-menu-item-click":"db-item-click",{bubbles:!0,composed:!0,detail:{item:e,source:t}}))}syncHostClasses(){const e=this.getAttribute("size")||"m",s=this.getAttribute("variant")||"default",i=this.getAttribute("position")||"static";this.className=["designbase-wc-navbar",`designbase-wc-navbar--${t.includes(e)?e:"m"}`,`designbase-wc-navbar--${a.includes(s)?s:"default"}`,`designbase-wc-navbar--${n.includes(i)?i:"static"}`,this.hasAttribute("full-width")&&"designbase-wc-navbar--full-width",this.hasAttribute("shadow")&&"designbase-wc-navbar--shadow",this.mobileOpen&&"designbase-wc-navbar--mobile-open"].filter(Boolean).join(" ")}isMegaMenu(e){return Boolean(e.megaMenu&&e.columns?.length)}createNavToggleButton(t,a){const n=document.createElement("button");n.type="button",n.className=["designbase-wc-navbar__nav-link","designbase-wc-navbar__nav-link--has-children",t.active&&"designbase-wc-navbar__nav-link--active",t.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" "),n.disabled=Boolean(t.disabled);const s=resolveIcon(t.icon);s&&n.append(e(s,a)),n.append(document.createTextNode(t.label));const i=e("chevron-down",12);return i.classList.add("designbase-wc-navbar__chevron"),n.append(i),n}createMegaLink(t,a){const n=document.createElement("a");n.href=t.href||"#",n.className=["designbase-wc-navbar__mega-link",t.active&&"designbase-wc-navbar__mega-link--active",t.disabled&&"designbase-wc-navbar__mega-link--disabled"].filter(Boolean).join(" ");const s=resolveIcon(t.icon);if(s){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-link-icon",t.append(e(s,a)),n.append(t)}const i=document.createElement("span");i.className="designbase-wc-navbar__mega-link-body";const r=document.createElement("span");if(r.className="designbase-wc-navbar__mega-link-label",r.textContent=t.label,i.append(r),t.description){const e=document.createElement("span");e.className="designbase-wc-navbar__mega-link-desc",e.textContent=t.description,i.append(e)}return n.append(i),n.addEventListener("click",e=>{e.preventDefault(),t.disabled||this.dispatchItemClick(t,"nav")}),n}createMegaMenu(e,t){const a=document.createElement("li");a.className="designbase-wc-navbar__nav-item designbase-wc-navbar__nav-item--mega";const n=this.createNavToggleButton(e,t),s=document.createElement("div");s.className="designbase-wc-navbar__mega";const i=document.createElement("div");i.className="designbase-wc-navbar__mega-inner";const r=document.createElement("div");return r.className="designbase-wc-navbar__mega-columns",r.style.setProperty("--db-navbar-mega-columns",String(e.columns.length)),e.columns.forEach(e=>{const a=document.createElement("div");if(a.className="designbase-wc-navbar__mega-column",e.title){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-column-title",t.textContent=e.title,a.append(t)}const n=document.createElement("ul");n.className="designbase-wc-navbar__mega-list",e.items.forEach(e=>{const a=document.createElement("li");a.append(this.createMegaLink(e,t)),n.append(a)}),a.append(n),r.append(a)}),i.append(r),e.featured&&i.append(this.createMegaFeatured(e.featured,t)),s.append(i),a.append(n,s),a}createMegaFeatured(t,a){const n=document.createElement("a");n.href=t.href||"#",n.className="designbase-wc-navbar__mega-featured",t.image&&(n.style.setProperty("--db-navbar-mega-featured-image",`url("${t.image}")`),n.classList.add("designbase-wc-navbar__mega-featured--image"));const s=resolveIcon(t.icon);if(s){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-featured-icon",t.append(e(s,a+4)),n.append(t)}if(t.title){const e=document.createElement("span");e.className="designbase-wc-navbar__mega-featured-title",e.textContent=t.title,n.append(e)}if(t.description){const e=document.createElement("span");e.className="designbase-wc-navbar__mega-featured-desc",e.textContent=t.description,n.append(e)}if(t.ctaLabel){const a=document.createElement("span");a.className="designbase-wc-navbar__mega-featured-cta",a.append(document.createTextNode(t.ctaLabel)),a.append(e("chevron-right",14)),n.append(a)}return n.addEventListener("click",e=>{e.preventDefault(),this.dispatchItemClick({id:`${t.href||"featured"}`,label:t.title||"featured",href:t.href},"nav")}),n}createDesktopNavItem(t,a){if(this.isMegaMenu(t))return this.createMegaMenu(t,a);const n=document.createElement("li");n.className="designbase-wc-navbar__nav-item";if(Boolean(t.children?.length)){const s=document.createElement("div");s.className="designbase-wc-navbar__dropdown";const i=document.createElement("button");i.type="button",i.className=["designbase-wc-navbar__nav-link","designbase-wc-navbar__nav-link--has-children",t.active&&"designbase-wc-navbar__nav-link--active",t.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" "),i.disabled=Boolean(t.disabled);const r=resolveIcon(t.icon);r&&i.append(e(r,a)),i.append(document.createTextNode(t.label));const c=e("chevron-down",12);c.classList.add("designbase-wc-navbar__chevron"),i.append(c);const d=document.createElement("ul");return d.className="designbase-wc-navbar__dropdown-menu",t.children.forEach(t=>{const n=document.createElement("li"),s=document.createElement("a");s.href=t.href||"#",s.className=["designbase-wc-navbar__dropdown-item",t.active&&"designbase-wc-navbar__dropdown-item--active",t.disabled&&"designbase-wc-navbar__dropdown-item--disabled"].filter(Boolean).join(" ");const i=resolveIcon(t.icon);i&&s.append(e(i,a)),s.append(document.createTextNode(t.label)),s.addEventListener("click",e=>{t.disabled?e.preventDefault():(e.preventDefault(),this.dispatchItemClick(t,"nav"))}),n.append(s),d.append(n)}),s.append(i,d),n.append(s),n}const s=document.createElement("a");s.href=t.href||"#",s.className=["designbase-wc-navbar__nav-link",t.active&&"designbase-wc-navbar__nav-link--active",t.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" ");const i=resolveIcon(t.icon);return i&&s.append(e(i,a)),s.append(document.createTextNode(t.label)),s.addEventListener("click",e=>{t.disabled?e.preventDefault():(e.preventDefault(),this.dispatchItemClick(t,"nav"))}),n.append(s),n}createUserMenuItemElement(e,t,a){const n=document.createElement("db-menu-item");return n.setAttribute("label",e.label),n.setAttribute("type","block"),n.setAttribute("menu-style","dropdown"),n.setAttribute("size",t),e.href&&n.setAttribute("href",e.href),e.icon&&n.setAttribute("icon",e.icon),e.disabled&&n.setAttribute("disabled",""),n.addEventListener("db-click",()=>{e.disabled||(a(),this.dispatchItemClick(e,"user"))}),n}bindSearchEvents(e){e.addEventListener("db-search",e=>{const t=e.detail,a=t.query??t.value??"";this.dispatchEvent(new CustomEvent("db-search",{bubbles:!0,composed:!0,detail:{query:a,value:a}}))})}applyAvatarProfile(e,t,a){e.setAttribute("size","s"===a?"s":"l"===a?"l":"m"),e.setAttribute("initials",t.name),e.setAttribute("alt",t.name),t.avatar&&e.setAttribute("src",t.avatar),void 0!==t.badge&&e.setAttribute("badge",String(t.badge)),t.badgeVariant&&e.setAttribute("badge-variant",t.badgeVariant),t.badgeStyle&&e.setAttribute("badge-style",t.badgeStyle),t.badgeText&&e.setAttribute("badge-text",t.badgeText)}getMobileChildren(e){if(this.isMegaMenu(e)){const t=(e.columns||[]).flatMap(e=>e.items);return e.featured?.href&&t.push({id:`${e.id}-featured`,label:e.featured.title||e.featured.ctaLabel||e.label,href:e.featured.href,icon:e.featured.icon}),t}return e.children||[]}createMobileMenuItem(e,t){const a=this.getMobileChildren(e),n=a.length>0,s=Boolean(this.expandedMobile[e.id]),i=document.createElement("db-menu-item");return i.setAttribute("label",e.label),i.setAttribute("type","block"),i.setAttribute("menu-style","accordion"),i.setAttribute("size",t),e.href&&i.setAttribute("href",e.href),e.icon&&i.setAttribute("icon",e.icon),e.active&&i.setAttribute("active",""),e.disabled&&i.setAttribute("disabled",""),n&&(i.setAttribute("expandable",""),i.subItems=a.map(e=>({id:e.id,label:e.label,href:e.href,icon:e.icon,active:e.active,disabled:e.disabled})),s&&i.setAttribute("expanded","")),i.addEventListener("db-click",()=>{if(!e.disabled){if(n)return this.expandedMobile[e.id]=!s,void this.renderMobileMenu();this.mobileOpen=!1,this.dispatchItemClick(e,"mobile"),this.render()}}),i.addEventListener("db-child-click",e=>{const t=e.detail;this.mobileOpen=!1,this.dispatchItemClick(t.child,"mobile"),this.render()}),i}updateUserMenuVisibility(){const e=this.querySelector(".designbase-wc-navbar__user-dropdown-menu");e&&(e.hidden=!this.userMenuOpen)}renderMobileMenu(){const e=this.querySelector(".designbase-wc-navbar__mobile-nav-list");if(!e)return;const t=this.getAttribute("size")||"m",a=this.parseItems();e.replaceChildren(...a.map(e=>this.createMobileMenuItem(e,t)))}render(){this.syncHostClasses(),this.setAttribute("role","navigation"),this.setAttribute("aria-label","메인 네비게이션");const t=this.getAttribute("size")||"m",a=this.iconSize(t),n=this.parseItems(),s=this.parseItems("user-menu-items"),i=this.parseUserProfile(),r=this.hasAttribute("is-authenticated"),c=this.hasAttribute("show-search");this.replaceChildren();const d=document.createElement("div");d.className=["designbase-wc-navbar__container",this.hasAttribute("full-width")&&"designbase-wc-navbar__container--full-width"].filter(Boolean).join(" ");const l=document.createElement("div");l.className="designbase-wc-navbar__left";const o=document.createElement("div");o.className="designbase-wc-navbar__brand";const b=document.createElement("div");b.className="designbase-wc-navbar__logo";const u=document.createElement("db-logo");u.setAttribute("type","designbase"),u.setAttribute("size","s"),u.setAttribute("clickable",""),u.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-logo-click",{bubbles:!0,composed:!0}))}),b.append(u),o.append(b),l.append(o);const m=document.createElement("div");m.className="designbase-wc-navbar__right";const p=document.createElement("div");p.className="designbase-wc-navbar__nav designbase-wc-navbar__nav--desktop";const h=document.createElement("ul");if(h.className="designbase-wc-navbar__nav-list",n.forEach(e=>h.append(this.createDesktopNavItem(e,a))),p.append(h),m.append(p),c){const e=document.createElement("div");e.className="designbase-wc-navbar__search";const a=document.createElement("db-search-bar");a.setAttribute("variant","outlined"),a.setAttribute("size","s"===t?"s":"l"===t?"l":"m"),a.setAttribute("placeholder",this.getAttribute("search-placeholder")||"검색..."),this.bindSearchEvents(a),e.append(a),m.append(e)}const v=document.createElement("div");if(v.className="designbase-wc-navbar__user-menu",r&&i){const a=document.createElement("div");a.className="designbase-wc-navbar__user-dropdown";const n=document.createElement("button");n.type="button",n.className="designbase-wc-navbar__user-toggle",n.setAttribute("aria-expanded",String(this.userMenuOpen));const r=document.createElement("db-avatar");this.applyAvatarProfile(r,i,t);const c=document.createElement("span");c.className="designbase-wc-navbar__user-name",c.textContent=i.name,n.append(r,c,e("chevron-down",12)),n.addEventListener("click",()=>{this.userMenuOpen=!this.userMenuOpen,n.setAttribute("aria-expanded",String(this.userMenuOpen)),this.updateUserMenuVisibility()});const d=document.createElement("ul");if(d.className="designbase-wc-navbar__user-dropdown-menu",d.hidden=!this.userMenuOpen,i.email){const e=document.createElement("li");e.className="designbase-wc-navbar__user-info";const t=document.createElement("span");t.className="designbase-wc-navbar__user-email",t.textContent=i.email,e.append(t),d.append(e)}s.forEach(e=>{const a=document.createElement("li");a.append(this.createUserMenuItemElement(e,t,()=>{this.userMenuOpen=!1,this.updateUserMenuVisibility()})),d.append(a)}),a.append(n,d),v.append(a)}else{const e=document.createElement("db-button");e.setAttribute("variant","primary"),e.setAttribute("size","s"===t?"s":"l"===t?"l":"m"),e.textContent="로그인",e.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-login-click",{bubbles:!0,composed:!0}))}),v.append(e)}m.append(v);const g=document.createElement("button");g.type="button",g.className="designbase-wc-navbar__mobile-toggle",g.setAttribute("aria-expanded",String(this.mobileOpen)),g.setAttribute("aria-label","메뉴 열기");for(let e=0;e<3;e+=1){const e=document.createElement("span");e.className="designbase-wc-navbar__mobile-toggle-line",g.append(e)}if(g.addEventListener("click",()=>{this.mobileOpen=!this.mobileOpen,this.render()}),d.append(l,m,g),this.append(d),this.mobileOpen){const e=document.createElement("div");if(e.className="designbase-wc-navbar__mobile-menu",c){const t=document.createElement("div");t.className="designbase-wc-navbar__mobile-search";const a=document.createElement("db-search-bar");a.setAttribute("variant","outlined"),a.setAttribute("size","s"),a.setAttribute("full-width",""),a.setAttribute("placeholder",this.getAttribute("search-placeholder")||"검색..."),this.bindSearchEvents(a),t.append(a),e.append(t)}const t=document.createElement("ul");t.className="designbase-wc-navbar__mobile-nav-list",e.append(t);const a=document.createElement("div");if(a.className="designbase-wc-navbar__mobile-user",r&&i){const e=document.createElement("div");e.className="designbase-wc-navbar__mobile-user-info";const t=document.createElement("db-avatar");this.applyAvatarProfile(t,i,"m");const n=document.createElement("div"),r=document.createElement("div");if(r.className="designbase-wc-navbar__mobile-user-name",r.textContent=i.name,n.append(r),i.email){const e=document.createElement("div");e.className="designbase-wc-navbar__mobile-user-email",e.textContent=i.email,n.append(e)}if(e.append(t,n),a.append(e),s.length){const e=document.createElement("ul");e.className="designbase-wc-navbar__mobile-user-menu",s.forEach(t=>{const a=document.createElement("li");a.append(this.createUserMenuItemElement(t,"m",()=>{this.mobileOpen=!1,this.render()})),e.append(a)}),a.append(e)}}else{const e=document.createElement("db-button");e.setAttribute("variant","primary"),e.setAttribute("size","m"),e.setAttribute("full-width",""),e.textContent="로그인",e.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-login-click",{bubbles:!0,composed:!0}))}),a.append(e)}e.append(a),this.append(e),this.renderMobileMenu()}}}customElements.get("db-navbar")||customElements.define("db-navbar",DbNavbar);export{DbNavbar};
+import { createDbIcon } from './db-icons.js';
+
+const SIZES = ['s', 'm', 'l'];
+const VARIANTS = ['default', 'transparent'];
+const POSITIONS = ['fixed', 'sticky', 'static'];
+function resolveIcon(name) {
+    if (!name)
+        return undefined;
+    return name;
+}
+class DbNavbar extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.mobileOpen = false;
+        this.userMenuOpen = false;
+        this.expandedMobile = {};
+        this.outsideHandler = null;
+    }
+    static get observedAttributes() {
+        return [
+            'items',
+            'user-menu-items',
+            'user-profile',
+            'size',
+            'variant',
+            'position',
+            'is-authenticated',
+            'show-search',
+            'search-placeholder',
+            'full-width',
+            'shadow',
+        ];
+    }
+    connectedCallback() {
+        this.render();
+        this.bindOutsideClick();
+    }
+    disconnectedCallback() {
+        this.unbindOutsideClick();
+    }
+    attributeChangedCallback() {
+        if (!this.isConnected)
+            return;
+        this.render();
+    }
+    get items() {
+        return this.parseItems('items');
+    }
+    set items(value) {
+        this.setAttribute('items', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    get userMenuItems() {
+        return this.parseItems('user-menu-items');
+    }
+    set userMenuItems(value) {
+        this.setAttribute('user-menu-items', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    get userProfile() {
+        return this.parseUserProfile();
+    }
+    set userProfile(value) {
+        if (value === null || value === undefined)
+            this.removeAttribute('user-profile');
+        else
+            this.setAttribute('user-profile', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    parseItems(attr = 'items') {
+        try {
+            const parsed = JSON.parse(this.getAttribute(attr) || '[]');
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    parseUserProfile() {
+        const raw = this.getAttribute('user-profile');
+        if (!raw)
+            return null;
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return null;
+        }
+    }
+    iconSize(size) {
+        if (size === 's')
+            return 16;
+        if (size === 'l')
+            return 24;
+        return 20;
+    }
+    bindOutsideClick() {
+        if (this.outsideHandler)
+            return;
+        this.outsideHandler = (event) => {
+            if (!this.contains(event.target)) {
+                this.userMenuOpen = false;
+                this.updateUserMenuVisibility();
+            }
+        };
+        document.addEventListener('mousedown', this.outsideHandler);
+    }
+    unbindOutsideClick() {
+        if (!this.outsideHandler)
+            return;
+        document.removeEventListener('mousedown', this.outsideHandler);
+        this.outsideHandler = null;
+    }
+    dispatchItemClick(item, source) {
+        this.dispatchEvent(new CustomEvent(source === 'user' ? 'db-user-menu-item-click' : 'db-item-click', {
+            bubbles: true,
+            composed: true,
+            detail: { item, source },
+        }));
+    }
+    syncHostClasses() {
+        const size = this.getAttribute('size') || 'm';
+        const variant = this.getAttribute('variant') || 'default';
+        const position = this.getAttribute('position') || 'static';
+        this.className = [
+            'designbase-wc-navbar',
+            `designbase-wc-navbar--${SIZES.includes(size) ? size : 'm'}`,
+            `designbase-wc-navbar--${VARIANTS.includes(variant) ? variant : 'default'}`,
+            `designbase-wc-navbar--${POSITIONS.includes(position) ? position : 'static'}`,
+            this.hasAttribute('full-width') && 'designbase-wc-navbar--full-width',
+            this.hasAttribute('shadow') && 'designbase-wc-navbar--shadow',
+            this.mobileOpen && 'designbase-wc-navbar--mobile-open',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    isMegaMenu(item) {
+        return Boolean(item.megaMenu && item.columns?.length);
+    }
+    createNavToggleButton(item, iconPx) {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = [
+            'designbase-wc-navbar__nav-link',
+            'designbase-wc-navbar__nav-link--has-children',
+            item.active && 'designbase-wc-navbar__nav-link--active',
+            item.disabled && 'designbase-wc-navbar__nav-link--disabled',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        button.disabled = Boolean(item.disabled);
+        const icon = resolveIcon(item.icon);
+        if (icon)
+            button.append(createDbIcon(icon, iconPx));
+        button.append(document.createTextNode(item.label));
+        const chevron = createDbIcon('chevron-down', 12);
+        chevron.classList.add('designbase-wc-navbar__chevron');
+        button.append(chevron);
+        return button;
+    }
+    createMegaLink(link, iconPx) {
+        const anchor = document.createElement('a');
+        anchor.href = link.href || '#';
+        anchor.className = [
+            'designbase-wc-navbar__mega-link',
+            link.active && 'designbase-wc-navbar__mega-link--active',
+            link.disabled && 'designbase-wc-navbar__mega-link--disabled',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const icon = resolveIcon(link.icon);
+        if (icon) {
+            const iconWrap = document.createElement('span');
+            iconWrap.className = 'designbase-wc-navbar__mega-link-icon';
+            iconWrap.append(createDbIcon(icon, iconPx));
+            anchor.append(iconWrap);
+        }
+        const body = document.createElement('span');
+        body.className = 'designbase-wc-navbar__mega-link-body';
+        const label = document.createElement('span');
+        label.className = 'designbase-wc-navbar__mega-link-label';
+        label.textContent = link.label;
+        body.append(label);
+        if (link.description) {
+            const desc = document.createElement('span');
+            desc.className = 'designbase-wc-navbar__mega-link-desc';
+            desc.textContent = link.description;
+            body.append(desc);
+        }
+        anchor.append(body);
+        anchor.addEventListener('click', (event) => {
+            event.preventDefault();
+            if (link.disabled)
+                return;
+            this.dispatchItemClick(link, 'nav');
+        });
+        return anchor;
+    }
+    createMegaMenu(item, iconPx) {
+        const li = document.createElement('li');
+        li.className = 'designbase-wc-navbar__nav-item designbase-wc-navbar__nav-item--mega';
+        const button = this.createNavToggleButton(item, iconPx);
+        const mega = document.createElement('div');
+        mega.className = 'designbase-wc-navbar__mega';
+        const inner = document.createElement('div');
+        inner.className = 'designbase-wc-navbar__mega-inner';
+        const columnsWrap = document.createElement('div');
+        columnsWrap.className = 'designbase-wc-navbar__mega-columns';
+        columnsWrap.style.setProperty('--db-navbar-mega-columns', String(item.columns.length));
+        item.columns.forEach((column) => {
+            const col = document.createElement('div');
+            col.className = 'designbase-wc-navbar__mega-column';
+            if (column.title) {
+                const title = document.createElement('span');
+                title.className = 'designbase-wc-navbar__mega-column-title';
+                title.textContent = column.title;
+                col.append(title);
+            }
+            const list = document.createElement('ul');
+            list.className = 'designbase-wc-navbar__mega-list';
+            column.items.forEach((link) => {
+                const linkLi = document.createElement('li');
+                linkLi.append(this.createMegaLink(link, iconPx));
+                list.append(linkLi);
+            });
+            col.append(list);
+            columnsWrap.append(col);
+        });
+        inner.append(columnsWrap);
+        if (item.featured) {
+            inner.append(this.createMegaFeatured(item.featured, iconPx));
+        }
+        mega.append(inner);
+        li.append(button, mega);
+        return li;
+    }
+    createMegaFeatured(featured, iconPx) {
+        const card = document.createElement('a');
+        card.href = featured.href || '#';
+        card.className = 'designbase-wc-navbar__mega-featured';
+        if (featured.image) {
+            card.style.setProperty('--db-navbar-mega-featured-image', `url("${featured.image}")`);
+            card.classList.add('designbase-wc-navbar__mega-featured--image');
+        }
+        const featuredIcon = resolveIcon(featured.icon);
+        if (featuredIcon) {
+            const iconWrap = document.createElement('span');
+            iconWrap.className = 'designbase-wc-navbar__mega-featured-icon';
+            iconWrap.append(createDbIcon(featuredIcon, iconPx + 4));
+            card.append(iconWrap);
+        }
+        if (featured.title) {
+            const title = document.createElement('span');
+            title.className = 'designbase-wc-navbar__mega-featured-title';
+            title.textContent = featured.title;
+            card.append(title);
+        }
+        if (featured.description) {
+            const desc = document.createElement('span');
+            desc.className = 'designbase-wc-navbar__mega-featured-desc';
+            desc.textContent = featured.description;
+            card.append(desc);
+        }
+        if (featured.ctaLabel) {
+            const cta = document.createElement('span');
+            cta.className = 'designbase-wc-navbar__mega-featured-cta';
+            cta.append(document.createTextNode(featured.ctaLabel));
+            cta.append(createDbIcon('chevron-right', 14));
+            card.append(cta);
+        }
+        card.addEventListener('click', (event) => {
+            event.preventDefault();
+            this.dispatchItemClick({ id: `${featured.href || 'featured'}`, label: featured.title || 'featured', href: featured.href }, 'nav');
+        });
+        return card;
+    }
+    createDesktopNavItem(item, iconPx) {
+        if (this.isMegaMenu(item)) {
+            return this.createMegaMenu(item, iconPx);
+        }
+        const li = document.createElement('li');
+        li.className = 'designbase-wc-navbar__nav-item';
+        const hasChildren = Boolean(item.children?.length);
+        if (hasChildren) {
+            const dropdown = document.createElement('div');
+            dropdown.className = 'designbase-wc-navbar__dropdown';
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = [
+                'designbase-wc-navbar__nav-link',
+                'designbase-wc-navbar__nav-link--has-children',
+                item.active && 'designbase-wc-navbar__nav-link--active',
+                item.disabled && 'designbase-wc-navbar__nav-link--disabled',
+            ]
+                .filter(Boolean)
+                .join(' ');
+            button.disabled = Boolean(item.disabled);
+            const icon = resolveIcon(item.icon);
+            if (icon)
+                button.append(createDbIcon(icon, iconPx));
+            button.append(document.createTextNode(item.label));
+            const chevron = createDbIcon('chevron-down', 12);
+            chevron.classList.add('designbase-wc-navbar__chevron');
+            button.append(chevron);
+            const menu = document.createElement('ul');
+            menu.className = 'designbase-wc-navbar__dropdown-menu';
+            item.children.forEach((child) => {
+                const childLi = document.createElement('li');
+                const link = document.createElement('a');
+                link.href = child.href || '#';
+                link.className = [
+                    'designbase-wc-navbar__dropdown-item',
+                    child.active && 'designbase-wc-navbar__dropdown-item--active',
+                    child.disabled && 'designbase-wc-navbar__dropdown-item--disabled',
+                ]
+                    .filter(Boolean)
+                    .join(' ');
+                const childIcon = resolveIcon(child.icon);
+                if (childIcon)
+                    link.append(createDbIcon(childIcon, iconPx));
+                link.append(document.createTextNode(child.label));
+                link.addEventListener('click', (event) => {
+                    if (child.disabled) {
+                        event.preventDefault();
+                        return;
+                    }
+                    event.preventDefault();
+                    this.dispatchItemClick(child, 'nav');
+                });
+                childLi.append(link);
+                menu.append(childLi);
+            });
+            dropdown.append(button, menu);
+            li.append(dropdown);
+            return li;
+        }
+        const link = document.createElement('a');
+        link.href = item.href || '#';
+        link.className = [
+            'designbase-wc-navbar__nav-link',
+            item.active && 'designbase-wc-navbar__nav-link--active',
+            item.disabled && 'designbase-wc-navbar__nav-link--disabled',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const icon = resolveIcon(item.icon);
+        if (icon)
+            link.append(createDbIcon(icon, iconPx));
+        link.append(document.createTextNode(item.label));
+        link.addEventListener('click', (event) => {
+            if (item.disabled) {
+                event.preventDefault();
+                return;
+            }
+            event.preventDefault();
+            this.dispatchItemClick(item, 'nav');
+        });
+        li.append(link);
+        return li;
+    }
+    createUserMenuItemElement(item, size, onSelect) {
+        const menuItem = document.createElement('db-menu-item');
+        menuItem.setAttribute('label', item.label);
+        menuItem.setAttribute('type', 'block');
+        menuItem.setAttribute('menu-style', 'dropdown');
+        menuItem.setAttribute('size', size);
+        if (item.href)
+            menuItem.setAttribute('href', item.href);
+        if (item.icon)
+            menuItem.setAttribute('icon', item.icon);
+        if (item.disabled)
+            menuItem.setAttribute('disabled', '');
+        menuItem.addEventListener('db-click', () => {
+            if (item.disabled)
+                return;
+            onSelect();
+            this.dispatchItemClick(item, 'user');
+        });
+        return menuItem;
+    }
+    bindSearchEvents(search) {
+        search.addEventListener('db-search', (event) => {
+            const detail = event.detail;
+            const query = detail.query ?? detail.value ?? '';
+            this.dispatchEvent(new CustomEvent('db-search', {
+                bubbles: true,
+                composed: true,
+                detail: { query, value: query },
+            }));
+        });
+    }
+    applyAvatarProfile(avatar, userProfile, size) {
+        avatar.setAttribute('size', size === 's' ? 's' : size === 'l' ? 'l' : 'm');
+        avatar.setAttribute('initials', userProfile.name);
+        avatar.setAttribute('alt', userProfile.name);
+        if (userProfile.avatar)
+            avatar.setAttribute('src', userProfile.avatar);
+        if (userProfile.badge !== undefined)
+            avatar.setAttribute('badge', String(userProfile.badge));
+        if (userProfile.badgeVariant)
+            avatar.setAttribute('badge-variant', userProfile.badgeVariant);
+        if (userProfile.badgeStyle)
+            avatar.setAttribute('badge-style', userProfile.badgeStyle);
+        if (userProfile.badgeText)
+            avatar.setAttribute('badge-text', userProfile.badgeText);
+    }
+    getMobileChildren(item) {
+        if (this.isMegaMenu(item)) {
+            const flattened = (item.columns || []).flatMap((column) => column.items);
+            if (item.featured?.href) {
+                flattened.push({
+                    id: `${item.id}-featured`,
+                    label: item.featured.title || item.featured.ctaLabel || item.label,
+                    href: item.featured.href,
+                    icon: item.featured.icon,
+                });
+            }
+            return flattened;
+        }
+        return item.children || [];
+    }
+    createMobileMenuItem(item, size) {
+        const children = this.getMobileChildren(item);
+        const hasChildren = children.length > 0;
+        const expanded = Boolean(this.expandedMobile[item.id]);
+        const menuItem = document.createElement('db-menu-item');
+        menuItem.setAttribute('label', item.label);
+        menuItem.setAttribute('type', 'block');
+        menuItem.setAttribute('menu-style', 'accordion');
+        menuItem.setAttribute('size', size);
+        if (item.href)
+            menuItem.setAttribute('href', item.href);
+        if (item.icon)
+            menuItem.setAttribute('icon', item.icon);
+        if (item.active)
+            menuItem.setAttribute('active', '');
+        if (item.disabled)
+            menuItem.setAttribute('disabled', '');
+        if (hasChildren) {
+            menuItem.setAttribute('expandable', '');
+            menuItem.subItems = children.map((child) => ({
+                id: child.id,
+                label: child.label,
+                href: child.href,
+                icon: child.icon,
+                active: child.active,
+                disabled: child.disabled,
+            }));
+            if (expanded)
+                menuItem.setAttribute('expanded', '');
+        }
+        menuItem.addEventListener('db-click', () => {
+            if (item.disabled)
+                return;
+            if (hasChildren) {
+                this.expandedMobile[item.id] = !expanded;
+                this.renderMobileMenu();
+                return;
+            }
+            this.mobileOpen = false;
+            this.dispatchItemClick(item, 'mobile');
+            this.render();
+        });
+        menuItem.addEventListener('db-child-click', (event) => {
+            const detail = event.detail;
+            this.mobileOpen = false;
+            this.dispatchItemClick(detail.child, 'mobile');
+            this.render();
+        });
+        return menuItem;
+    }
+    updateUserMenuVisibility() {
+        const menu = this.querySelector('.designbase-wc-navbar__user-dropdown-menu');
+        if (menu)
+            menu.hidden = !this.userMenuOpen;
+    }
+    renderMobileMenu() {
+        const list = this.querySelector('.designbase-wc-navbar__mobile-nav-list');
+        if (!list)
+            return;
+        const size = this.getAttribute('size') || 'm';
+        const items = this.parseItems();
+        list.replaceChildren(...items.map((item) => this.createMobileMenuItem(item, size)));
+    }
+    render() {
+        this.syncHostClasses();
+        this.setAttribute('role', 'navigation');
+        this.setAttribute('aria-label', '메인 네비게이션');
+        const size = this.getAttribute('size') || 'm';
+        const iconPx = this.iconSize(size);
+        const items = this.parseItems();
+        const userMenuItems = this.parseItems('user-menu-items');
+        const userProfile = this.parseUserProfile();
+        const isAuthenticated = this.hasAttribute('is-authenticated');
+        const showSearch = this.hasAttribute('show-search');
+        this.replaceChildren();
+        const container = document.createElement('div');
+        container.className = [
+            'designbase-wc-navbar__container',
+            this.hasAttribute('full-width') && 'designbase-wc-navbar__container--full-width',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const left = document.createElement('div');
+        left.className = 'designbase-wc-navbar__left';
+        const brand = document.createElement('div');
+        brand.className = 'designbase-wc-navbar__brand';
+        const logoWrap = document.createElement('div');
+        logoWrap.className = 'designbase-wc-navbar__logo';
+        const logo = document.createElement('db-logo');
+        logo.setAttribute('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);
+        brand.append(logoWrap);
+        left.append(brand);
+        const right = document.createElement('div');
+        right.className = 'designbase-wc-navbar__right';
+        const desktopNav = document.createElement('div');
+        desktopNav.className = 'designbase-wc-navbar__nav designbase-wc-navbar__nav--desktop';
+        const desktopList = document.createElement('ul');
+        desktopList.className = 'designbase-wc-navbar__nav-list';
+        items.forEach((item) => desktopList.append(this.createDesktopNavItem(item, iconPx)));
+        desktopNav.append(desktopList);
+        right.append(desktopNav);
+        if (showSearch) {
+            const searchWrap = document.createElement('div');
+            searchWrap.className = 'designbase-wc-navbar__search';
+            const search = document.createElement('db-search-bar');
+            search.setAttribute('variant', 'outlined');
+            search.setAttribute('size', size === 's' ? 's' : size === 'l' ? 'l' : 'm');
+            search.setAttribute('placeholder', this.getAttribute('search-placeholder') || '검색...');
+            this.bindSearchEvents(search);
+            searchWrap.append(search);
+            right.append(searchWrap);
+        }
+        const userMenu = document.createElement('div');
+        userMenu.className = 'designbase-wc-navbar__user-menu';
+        if (isAuthenticated && userProfile) {
+            const dropdown = document.createElement('div');
+            dropdown.className = 'designbase-wc-navbar__user-dropdown';
+            const toggle = document.createElement('button');
+            toggle.type = 'button';
+            toggle.className = 'designbase-wc-navbar__user-toggle';
+            toggle.setAttribute('aria-expanded', String(this.userMenuOpen));
+            const avatar = document.createElement('db-avatar');
+            this.applyAvatarProfile(avatar, userProfile, size);
+            const name = document.createElement('span');
+            name.className = 'designbase-wc-navbar__user-name';
+            name.textContent = userProfile.name;
+            toggle.append(avatar, name, createDbIcon('chevron-down', 12));
+            toggle.addEventListener('click', () => {
+                this.userMenuOpen = !this.userMenuOpen;
+                toggle.setAttribute('aria-expanded', String(this.userMenuOpen));
+                this.updateUserMenuVisibility();
+            });
+            const userDropdownMenu = document.createElement('ul');
+            userDropdownMenu.className = 'designbase-wc-navbar__user-dropdown-menu';
+            userDropdownMenu.hidden = !this.userMenuOpen;
+            if (userProfile.email) {
+                const info = document.createElement('li');
+                info.className = 'designbase-wc-navbar__user-info';
+                const email = document.createElement('span');
+                email.className = 'designbase-wc-navbar__user-email';
+                email.textContent = userProfile.email;
+                info.append(email);
+                userDropdownMenu.append(info);
+            }
+            userMenuItems.forEach((item) => {
+                const li = document.createElement('li');
+                li.append(this.createUserMenuItemElement(item, size, () => {
+                    this.userMenuOpen = false;
+                    this.updateUserMenuVisibility();
+                }));
+                userDropdownMenu.append(li);
+            });
+            dropdown.append(toggle, userDropdownMenu);
+            userMenu.append(dropdown);
+        }
+        else {
+            const login = document.createElement('db-button');
+            login.setAttribute('variant', 'primary');
+            login.setAttribute('size', size === 's' ? 's' : size === 'l' ? 'l' : 'm');
+            login.textContent = '로그인';
+            login.addEventListener('db-click', () => {
+                this.dispatchEvent(new CustomEvent('db-login-click', { bubbles: true, composed: true }));
+            });
+            userMenu.append(login);
+        }
+        right.append(userMenu);
+        const mobileToggle = document.createElement('button');
+        mobileToggle.type = 'button';
+        mobileToggle.className = 'designbase-wc-navbar__mobile-toggle';
+        mobileToggle.setAttribute('aria-expanded', String(this.mobileOpen));
+        mobileToggle.setAttribute('aria-label', '메뉴 열기');
+        for (let i = 0; i < 3; i += 1) {
+            const line = document.createElement('span');
+            line.className = 'designbase-wc-navbar__mobile-toggle-line';
+            mobileToggle.append(line);
+        }
+        mobileToggle.addEventListener('click', () => {
+            this.mobileOpen = !this.mobileOpen;
+            this.render();
+        });
+        container.append(left, right, mobileToggle);
+        this.append(container);
+        if (this.mobileOpen) {
+            const mobileMenu = document.createElement('div');
+            mobileMenu.className = 'designbase-wc-navbar__mobile-menu';
+            if (showSearch) {
+                const mobileSearch = document.createElement('div');
+                mobileSearch.className = 'designbase-wc-navbar__mobile-search';
+                const search = document.createElement('db-search-bar');
+                search.setAttribute('variant', 'outlined');
+                search.setAttribute('size', 's');
+                search.setAttribute('full-width', '');
+                search.setAttribute('placeholder', this.getAttribute('search-placeholder') || '검색...');
+                this.bindSearchEvents(search);
+                mobileSearch.append(search);
+                mobileMenu.append(mobileSearch);
+            }
+            const mobileList = document.createElement('ul');
+            mobileList.className = 'designbase-wc-navbar__mobile-nav-list';
+            mobileMenu.append(mobileList);
+            const mobileUser = document.createElement('div');
+            mobileUser.className = 'designbase-wc-navbar__mobile-user';
+            if (isAuthenticated && userProfile) {
+                const info = document.createElement('div');
+                info.className = 'designbase-wc-navbar__mobile-user-info';
+                const avatar = document.createElement('db-avatar');
+                this.applyAvatarProfile(avatar, userProfile, 'm');
+                const details = document.createElement('div');
+                const name = document.createElement('div');
+                name.className = 'designbase-wc-navbar__mobile-user-name';
+                name.textContent = userProfile.name;
+                details.append(name);
+                if (userProfile.email) {
+                    const email = document.createElement('div');
+                    email.className = 'designbase-wc-navbar__mobile-user-email';
+                    email.textContent = userProfile.email;
+                    details.append(email);
+                }
+                info.append(avatar, details);
+                mobileUser.append(info);
+                if (userMenuItems.length) {
+                    const userMenuList = document.createElement('ul');
+                    userMenuList.className = 'designbase-wc-navbar__mobile-user-menu';
+                    userMenuItems.forEach((item) => {
+                        const li = document.createElement('li');
+                        li.append(this.createUserMenuItemElement(item, 'm', () => {
+                            this.mobileOpen = false;
+                            this.render();
+                        }));
+                        userMenuList.append(li);
+                    });
+                    mobileUser.append(userMenuList);
+                }
+            }
+            else {
+                const login = document.createElement('db-button');
+                login.setAttribute('variant', 'primary');
+                login.setAttribute('size', 'm');
+                login.setAttribute('full-width', '');
+                login.textContent = '로그인';
+                login.addEventListener('db-click', () => {
+                    this.dispatchEvent(new CustomEvent('db-login-click', { bubbles: true, composed: true }));
+                });
+                mobileUser.append(login);
+            }
+            mobileMenu.append(mobileUser);
+            this.append(mobileMenu);
+            this.renderMobileMenu();
+        }
+    }
+}
+if (!customElements.get('db-navbar')) {
+    customElements.define('db-navbar', DbNavbar);
+}
+
+export { DbNavbar };