@designbasekorea/ui-wc 0.5.5 → 0.5.6

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

@@ -1 +1,1068 @@
-import{createDbIcon as e,isDbIconName as t}from"./db-icons.js";const s=["s","m","l"],i=["default","dark","light"],r=["left","right"];class DbSidebar extends HTMLElement{constructor(){super(...arguments),this.expandedItems=new Set,this.userMenuOpen=!1,this.projectMenuOpen=!1,this.flyoutItemId=null,this.flyoutCloseTimer=null,this.outsideHandler=null}static get observedAttributes(){return["items","sections","user-menu-items","user-profile","default-expanded-ids","projects","selected-project-id","project-manage-label","project-manage-href","project-section-label","project-empty-label","project-empty-trigger-label","bottom-items","bottom-sections","promo-banner","size","variant","position","collapsed","collapsible","show-logo","full-height","shadow"]}connectedCallback(){this.seedExpanded(),this.render(),this.bindOutsideClick()}disconnectedCallback(){this.unbindOutsideClick(),this.cancelFlyoutClose()}attributeChangedCallback(e){this.isConnected&&("default-expanded-ids"===e&&this.seedExpanded(),"collapsed"===e&&this.hasAttribute("collapsed")&&(this.userMenuOpen=!1,this.projectMenuOpen=!1,this.flyoutItemId=null,this.cancelFlyoutClose()),this.render())}seedExpanded(){try{const e=JSON.parse(this.getAttribute("default-expanded-ids")||"[]");Array.isArray(e)&&(this.expandedItems=new Set(e))}catch{this.expandedItems=new Set}}get items(){try{const e=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get sections(){return this.parseSections()}set sections(e){this.setAttribute("sections","string"==typeof e?e:JSON.stringify(e))}get userMenuItems(){return this.parseUserMenuItems()}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))}get projects(){return this.parseProjects()}set projects(e){this.setAttribute("projects","string"==typeof e?e:JSON.stringify(e))}get selectedProjectId(){return this.getAttribute("selected-project-id")||""}set selectedProjectId(e){e?this.setAttribute("selected-project-id",e):this.removeAttribute("selected-project-id")}get projectManageLabel(){return this.getAttribute("project-manage-label")||"프로젝트 관리"}set projectManageLabel(e){this.setAttribute("project-manage-label",e)}get projectManageHref(){return this.getAttribute("project-manage-href")||""}set projectManageHref(e){e?this.setAttribute("project-manage-href",e):this.removeAttribute("project-manage-href")}get projectSectionLabel(){return this.getAttribute("project-section-label")||"프로젝트"}set projectSectionLabel(e){this.setAttribute("project-section-label",e)}get projectEmptyLabel(){return this.getAttribute("project-empty-label")||"프로젝트를 추가해 주세요"}set projectEmptyLabel(e){this.setAttribute("project-empty-label",e)}get projectEmptyTriggerLabel(){return this.getAttribute("project-empty-trigger-label")||"프로젝트 추가"}set projectEmptyTriggerLabel(e){this.setAttribute("project-empty-trigger-label",e)}get bottomItems(){return this.parseBottomItems()}set bottomItems(e){this.setAttribute("bottom-items","string"==typeof e?e:JSON.stringify(e))}get bottomSections(){return this.parseBottomSections()}set bottomSections(e){this.setAttribute("bottom-sections","string"==typeof e?e:JSON.stringify(e))}get promoBanner(){return this.parsePromoBanner()}set promoBanner(e){null==e?this.removeAttribute("promo-banner"):this.setAttribute("promo-banner","string"==typeof e?e:JSON.stringify(e))}parseSections(){const e=this.getAttribute("sections");if(e)try{const t=JSON.parse(e);if(Array.isArray(t)&&t.length)return t}catch{}try{const e=JSON.parse(this.getAttribute("items")||"[]");return[{id:"main",items:Array.isArray(e)?e:[]}]}catch{return[{id:"main",items:[]}]}}parseUserMenuItems(){try{const e=JSON.parse(this.getAttribute("user-menu-items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseUserProfile(){const e=this.getAttribute("user-profile");if(!e)return null;try{return JSON.parse(e)}catch{return null}}parseProjects(){try{const e=JSON.parse(this.getAttribute("projects")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBottomItems(){try{const e=JSON.parse(this.getAttribute("bottom-items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBottomSections(){const e=this.getAttribute("bottom-sections");if(e)try{const t=JSON.parse(e);if(Array.isArray(t)&&t.length)return t}catch{}const t=this.parseBottomItems();return t.length?[{id:"bottom",items:t}]:[]}parsePromoBanner(){const e=this.getAttribute("promo-banner");if(!e)return null;try{return JSON.parse(e)}catch{return null}}getSelectedProject(){const e=this.parseProjects();if(!e.length)return null;const t=this.selectedProjectId;return e.find(e=>e.id===t)||e[0]}bindOutsideClick(){this.outsideHandler||(this.outsideHandler=e=>{const t=e.target;if(this.contains(t))return;let s=!1;this.userMenuOpen&&(this.userMenuOpen=!1,s=!0),this.projectMenuOpen&&(this.projectMenuOpen=!1,s=!0),s&&this.render()},document.addEventListener("mousedown",this.outsideHandler))}closeOverlayMenus(){const e=this.projectMenuOpen,t=this.userMenuOpen;if(!e&&!t)return!1;this.projectMenuOpen=!1,this.userMenuOpen=!1,this.querySelector(".designbase-wc-sidebar__project-dropdown")?.remove(),this.querySelector(".designbase-wc-sidebar__project-selector")?.classList.remove("designbase-wc-sidebar__project-selector--open");const s=this.querySelector(".designbase-wc-sidebar__project-trigger");s?.setAttribute("aria-expanded","false");const i=this.querySelector(".designbase-wc-sidebar__user-dropdown");return i&&(i.hidden=!0),this.querySelector(".designbase-wc-sidebar__user-info")?.setAttribute("aria-expanded","false"),this.querySelector(".designbase-wc-sidebar__user-collapsed")?.setAttribute("aria-expanded","false"),this.querySelector(".designbase-wc-sidebar__user-collapsed")?.classList.remove("designbase-wc-sidebar__user-collapsed--open"),!0}syncExclusiveAccordion(e){[...Array.from(this.querySelectorAll(".designbase-wc-sidebar__nav-list > .designbase-wc-sidebar__item > db-menu-item")),...Array.from(this.querySelectorAll(".designbase-wc-sidebar__bottom-nav .designbase-wc-sidebar__nav-list > .designbase-wc-sidebar__item > db-menu-item"))].forEach(t=>{const s=t.getAttribute("data-item-id");s&&(e&&s===e?t.setAttribute("expanded",""):t.removeAttribute("expanded"))})}unbindOutsideClick(){this.outsideHandler&&(document.removeEventListener("mousedown",this.outsideHandler),this.outsideHandler=null)}cancelFlyoutClose(){this.flyoutCloseTimer&&(clearTimeout(this.flyoutCloseTimer),this.flyoutCloseTimer=null)}showFlyout(e){this.cancelFlyoutClose(),this.flyoutItemId!==e&&(this.flyoutItemId=e,this.renderNav(),this.renderBottomNav())}scheduleFlyoutClose(){this.cancelFlyoutClose(),this.flyoutCloseTimer=setTimeout(()=>{this.flyoutCloseTimer=null,this.flyoutItemId=null,this.renderNav(),this.renderBottomNav()},120)}syncHostClasses(){const e=this.getAttribute("size")||"m",t=this.getAttribute("variant")||"default",a=this.getAttribute("position")||"left";this.className=["designbase-wc-sidebar",`designbase-wc-sidebar--${s.includes(e)?e:"m"}`,`designbase-wc-sidebar--${i.includes(t)?t:"default"}`,`designbase-wc-sidebar--${r.includes(a)?a:"left"}`,this.hasAttribute("collapsed")&&"designbase-wc-sidebar--collapsed",this.hasAttribute("full-height")&&"designbase-wc-sidebar--full-height",this.hasAttribute("shadow")&&"designbase-wc-sidebar--shadow"].filter(Boolean).join(" ")}dispatchItemClick(e){this.dispatchEvent(new CustomEvent("db-item-click",{bubbles:!0,composed:!0,detail:{item:e}}))}dispatchUserMenuItemClick(e){this.dispatchEvent(new CustomEvent("db-user-menu-item-click",{bubbles:!0,composed:!0,detail:{item:e}}))}dispatchProjectChange(e){this.dispatchEvent(new CustomEvent("db-project-change",{bubbles:!0,composed:!0,detail:{project:e}}))}dispatchProjectManage(){this.dispatchEvent(new CustomEvent("db-project-manage",{bubbles:!0,composed:!0,detail:{}}))}dispatchPromoCtaClick(e){this.dispatchEvent(new CustomEvent("db-promo-cta-click",{bubbles:!0,composed:!0,detail:{banner:e}}))}createProjectAvatar(e,t="s"){const s=document.createElement("db-avatar");if(s.className="designbase-wc-sidebar__project-avatar",s.setAttribute("size",t),s.setAttribute("initials",(e.label||"?").trim()),s.setAttribute("alt",e.label),e.color){const applyColor=()=>{const t=s.querySelector(".designbase-wc-avatar__initials");return!!t&&(t.style.backgroundColor=e.color,t.style.color="#fff",!0)},t=new MutationObserver(()=>{applyColor()&&t.disconnect()});t.observe(s,{childList:!0,subtree:!0}),queueMicrotask(()=>{applyColor()&&t.disconnect()})}return s}createProjectEmptyMark(t="s"){const s=document.createElement("span");return s.className=["designbase-wc-sidebar__project-mark",`designbase-wc-sidebar__project-mark--${t}`,"designbase-wc-sidebar__project-mark--empty"].join(" "),s.setAttribute("aria-hidden","true"),s.append(e("plus","m"===t?16:14)),s}createProjectBadge(e){if(!e.badge)return null;const t=document.createElement("db-badge");return t.className="designbase-wc-sidebar__project-badge",t.setAttribute("size","s"),t.setAttribute("variant",e.badgeColor||"warning"),t.setAttribute("badge-style","text"),t.textContent=e.badge,t}createProjectSelector(t){if(!this.hasAttribute("projects"))return null;const s=this.parseProjects(),i=0===s.length,r=this.getSelectedProject(),a=document.createElement("div");a.className=["designbase-wc-sidebar__project-selector",t&&"designbase-wc-sidebar__project-selector--collapsed",this.projectMenuOpen&&"designbase-wc-sidebar__project-selector--open",i&&"designbase-wc-sidebar__project-selector--empty"].filter(Boolean).join(" ");const n=this.getAttribute("project-section-label");if(!t&&n&&n.trim()){const e=document.createElement("div");e.className="designbase-wc-sidebar__project-section-label",e.textContent=n.trim(),a.append(e)}const o=document.createElement("button");if(o.type="button",o.className="designbase-wc-sidebar__project-trigger",o.setAttribute("aria-haspopup","menu"),o.setAttribute("aria-expanded",String(this.projectMenuOpen)),i||!r){if(o.setAttribute("aria-label",this.projectEmptyTriggerLabel),o.append(this.createProjectEmptyMark(t?"m":"s")),!t){const e=document.createElement("span");e.className="designbase-wc-sidebar__project-label",e.textContent=this.projectEmptyTriggerLabel,o.append(e)}}else if(o.setAttribute("aria-label",r.label),o.append(this.createProjectAvatar(r,t?"m":"s")),!t){const e=document.createElement("span");e.className="designbase-wc-sidebar__project-label",e.textContent=r.label,o.append(e)}const c=document.createElement("span");if(c.className="designbase-wc-sidebar__project-chevron",c.setAttribute("aria-hidden","true"),c.append(e("chevron-down",14)),o.append(c),o.addEventListener("click",()=>{this.projectMenuOpen=!this.projectMenuOpen,this.userMenuOpen=!1,this.render()}),a.append(o),this.projectMenuOpen){const t=document.createElement("div");if(t.className="designbase-wc-sidebar__project-dropdown",t.setAttribute("role","menu"),t.setAttribute("aria-label",this.projectSectionLabel),i){const e=document.createElement("div");e.className="designbase-wc-sidebar__project-empty",e.setAttribute("role","presentation");const s=document.createElement("p");s.className="designbase-wc-sidebar__project-empty-text",s.textContent=this.projectEmptyLabel,e.append(s),t.append(e)}else{const e=document.createElement("ul");e.className="designbase-wc-sidebar__project-list",s.forEach(t=>{const s=document.createElement("li");s.className="designbase-wc-sidebar__project-option";const i=document.createElement("button");i.type="button",i.className=["designbase-wc-sidebar__project-option-btn",r&&t.id===r.id&&"designbase-wc-sidebar__project-option-btn--active"].filter(Boolean).join(" "),i.setAttribute("role","menuitem"),i.append(this.createProjectAvatar(t,"s"));const a=document.createElement("span");a.className="designbase-wc-sidebar__project-option-label",a.textContent=t.label,i.append(a);const n=this.createProjectBadge(t);n&&i.append(n),i.addEventListener("click",()=>{this.projectMenuOpen=!1,this.setAttribute("selected-project-id",t.id),this.dispatchProjectChange(t),this.render()}),s.append(i),e.append(s)}),t.append(e)}const n=document.createElement("button");n.type="button",n.className="designbase-wc-sidebar__project-manage",n.setAttribute("role","menuitem"),n.append(e("plus",14));const o=document.createElement("span");o.textContent=this.projectManageLabel,n.append(o),n.addEventListener("click",()=>{this.projectMenuOpen=!1;const e=this.projectManageHref;e&&window.location.assign(e),this.dispatchProjectManage(),this.render()}),t.append(n),a.append(t)}return a}createFlyout(e,t){const s=this.getAttribute("position")||"left",i=document.createElement("div");i.className=["designbase-wc-sidebar__flyout","right"===s&&"designbase-wc-sidebar__flyout--align-left"].filter(Boolean).join(" "),i.setAttribute("role","menu"),i.setAttribute("aria-label",`${e.label} 하위 메뉴`),i.addEventListener("mouseenter",()=>this.cancelFlyoutClose()),i.addEventListener("mouseleave",()=>this.scheduleFlyoutClose());const r=document.createElement("div");r.className="designbase-wc-sidebar__flyout-title",r.textContent=e.label,i.append(r);const a=document.createElement("ul");return a.className="designbase-wc-sidebar__flyout-list",(e.children||[]).forEach(e=>{const s=document.createElement("li");s.className="designbase-wc-sidebar__flyout-item";const i=document.createElement("db-menu-item");i.setAttribute("label",e.label),i.setAttribute("type","block"),i.setAttribute("menu-style","dropdown"),i.setAttribute("size",t),e.href&&i.setAttribute("href",e.href),e.active&&i.setAttribute("active",""),e.disabled&&i.setAttribute("disabled",""),void 0!==e.badge&&i.setAttribute("badge",String(e.badge)),e.badgeColor&&i.setAttribute("badge-color",e.badgeColor),i.addEventListener("db-click",()=>{e.disabled||(this.flyoutItemId=null,this.dispatchItemClick(e),this.renderNav(),this.renderBottomNav())}),s.append(i),a.append(s)}),i.append(a),i}createSidebarMenuItem(e,t,s=0){const i=Boolean(e.children?.length),r=this.expandedItems.has(e.id),a=this.hasAttribute("collapsed"),n=a&&i,o=document.createElement("li");o.className=["designbase-wc-sidebar__item",n&&this.flyoutItemId===e.id&&"designbase-wc-sidebar__item--flyout-active"].filter(Boolean).join(" "),n&&(o.addEventListener("mouseenter",()=>this.showFlyout(e.id)),o.addEventListener("mouseleave",()=>this.scheduleFlyoutClose()));const c=document.createElement("db-menu-item");if(c.setAttribute("data-item-id",e.id),c.setAttribute("label",e.label),c.setAttribute("type","block"),c.setAttribute("menu-style","accordion"),c.setAttribute("size",t),c.setAttribute("depth",String(s)),e.href&&c.setAttribute("href",e.href),e.icon&&c.setAttribute("icon",e.icon),e.active&&c.setAttribute("active",""),e.disabled&&c.setAttribute("disabled",""),void 0!==e.badge&&c.setAttribute("badge",String(e.badge)),e.badgeColor&&c.setAttribute("badge-color",e.badgeColor),i&&!n&&(c.setAttribute("expandable",""),c.subItems=(e.children||[]).map(e=>({id:e.id,label:e.label,href:e.href,active:e.active,disabled:e.disabled,badge:e.badge,badgeColor:e.badgeColor})),r&&!a&&c.setAttribute("expanded","")),c.addEventListener("db-click",t=>{if(!e.disabled){if(i&&!a){const s=t.detail?.expanded??!this.expandedItems.has(e.id);return this.closeOverlayMenus(),void(s?(this.expandedItems.clear(),this.expandedItems.add(e.id),this.syncExclusiveAccordion(e.id)):(this.expandedItems.delete(e.id),this.syncExclusiveAccordion(null)))}if(n)return this.closeOverlayMenus(),void this.showFlyout(e.id);this.closeOverlayMenus(),this.dispatchItemClick(e)}}),c.addEventListener("db-child-click",e=>{const t=e.detail;this.dispatchItemClick(t.child)}),o.append(c),a&&void 0!==e.badge&&null!==e.badge&&""!==e.badge){const t=e.badgeColor||"primary",s=document.createElement("span");s.className=["designbase-wc-sidebar__collapsed-badge-dot",`designbase-wc-sidebar__collapsed-badge-dot--${t}`].join(" "),s.setAttribute("aria-hidden","true"),o.append(s)}if(a&&!i){const t=document.createElement("span");t.className="designbase-wc-sidebar__item-tooltip",t.textContent=e.label,t.setAttribute("role","tooltip"),o.append(t)}return n&&this.flyoutItemId===e.id&&o.append(this.createFlyout(e,t)),o}renderSectionList(e,t,s){const i=document.createDocumentFragment();return e.forEach(e=>{const r=document.createElement("div");if(r.className="designbase-wc-sidebar__section",!s&&e.title){const t=document.createElement("div");t.className="designbase-wc-sidebar__section-title",t.textContent=e.title,r.append(t)}const a=document.createElement("ul");a.className="designbase-wc-sidebar__nav-list",e.items.forEach(e=>a.append(this.createSidebarMenuItem(e,t))),r.append(a),i.append(r)}),i}renderNav(){const e=this.querySelector(".designbase-wc-sidebar__nav");if(!e)return;const t=this.getAttribute("size")||"m",s=this.hasAttribute("collapsed");e.replaceChildren(this.renderSectionList(this.parseSections(),t,s))}renderBottomNav(){const e=this.querySelector(".designbase-wc-sidebar__bottom-nav");if(!e)return;const t=this.getAttribute("size")||"m",s=this.hasAttribute("collapsed");e.replaceChildren(this.renderSectionList(this.parseBottomSections(),t,s))}createUserDropdown(e,t=!1){if(!e.length)return null;const s=this.getAttribute("size")||"m",i=document.createElement("div");i.className=["designbase-wc-sidebar__user-dropdown",t&&"designbase-wc-sidebar__user-dropdown--collapsed"].filter(Boolean).join(" "),i.setAttribute("role","menu"),i.setAttribute("aria-label","사용자 메뉴"),i.hidden=!this.userMenuOpen;const r=document.createElement("ul");return r.className="designbase-wc-sidebar__user-menu",e.forEach(e=>{const t=document.createElement("li");t.className="designbase-wc-sidebar__user-menu-item";const i=document.createElement("db-menu-item");i.setAttribute("label",e.label),i.setAttribute("type","block"),i.setAttribute("menu-style","accordion"),i.setAttribute("size",s),e.icon&&i.setAttribute("icon",e.icon),e.href&&i.setAttribute("href",e.href),i.addEventListener("db-click",()=>{this.userMenuOpen=!1,this.dispatchUserMenuItemClick(e),this.render()}),t.append(i),r.append(t)}),i.append(r),i}createPromoBanner(s){const i=this.parsePromoBanner();if(!i)return null;if(s){const s=document.createElement("button");s.type="button",s.className="designbase-wc-sidebar__promo-collapsed",s.setAttribute("aria-label",i.ctaLabel||i.title);const r=document.createElement("db-animation-background");r.className="designbase-wc-sidebar__promo-bg",r.setAttribute("type","aurora"),r.setAttribute("theme","light"),r.setAttribute("intensity","subtle"),r.setAttribute("blur","40"),r.setAttribute("speed","4000"),r.setAttribute("colors",JSON.stringify(["#c7d2fe","#ddd6fe","#fbcfe8"])),s.append(r),s.append(e(i.icon&&t(i.icon)?i.icon:"sparkle",18)),s.addEventListener("click",()=>this.dispatchPromoCtaClick(i));const a=document.createElement("span");a.className="designbase-wc-sidebar__item-tooltip",a.textContent=i.title,a.setAttribute("role","tooltip");const n=document.createElement("div");return n.className="designbase-wc-sidebar__promo-collapsed-wrap",n.append(s,a),n}const r=document.createElement("div");r.className="designbase-wc-sidebar__promo";const a=document.createElement("db-animation-background");a.className="designbase-wc-sidebar__promo-bg",a.setAttribute("type","aurora"),a.setAttribute("theme","light"),a.setAttribute("intensity","subtle"),a.setAttribute("blur","60"),a.setAttribute("speed","5000"),a.setAttribute("colors",JSON.stringify(["#c7d2fe","#ddd6fe","#fbcfe8","#bfdbfe"])),r.append(a);const n=document.createElement("div");n.className="designbase-wc-sidebar__promo-content";const o=document.createElement("div");o.className="designbase-wc-sidebar__promo-title-row";const c=document.createElement("span");c.className="designbase-wc-sidebar__promo-icon",c.setAttribute("aria-hidden","true"),c.append(e(i.icon&&t(i.icon)?i.icon:"sparkle",16));const d=document.createElement("div");if(d.className="designbase-wc-sidebar__promo-title",d.textContent=i.title,o.append(c,d),n.append(o),i.description){const e=document.createElement("div");e.className="designbase-wc-sidebar__promo-desc",e.textContent=i.description,n.append(e)}if(i.ctaLabel){const e=document.createElement("db-button");e.className="designbase-wc-sidebar__promo-action",e.setAttribute("variant","secondary"),e.setAttribute("size","s"),e.setAttribute("full-width",""),e.textContent=i.ctaLabel,e.addEventListener("db-click",()=>{i.ctaHref&&window.location.assign(i.ctaHref),this.dispatchPromoCtaClick(i)}),n.append(e)}return r.append(n),r}render(){this.syncHostClasses(),this.setAttribute("role","complementary"),this.setAttribute("aria-label","사이드바 네비게이션");const t=this.getAttribute("size")||"m",s="false"!==this.getAttribute("collapsible"),i="false"!==this.getAttribute("show-logo"),r=this.hasAttribute("collapsed"),a=this.parseUserProfile(),n=this.parseUserMenuItems(),o=this.parseBottomSections(),c="l"===t?"m":"s"===t?"xs":"s";this.replaceChildren();const d=document.createElement("div");if(d.className="designbase-wc-sidebar__container",s||i&&!r){const e=document.createElement("div");if(e.className=["designbase-wc-sidebar__header",(r||!i)&&"designbase-wc-sidebar__header--collapsed-only"].filter(Boolean).join(" "),!r&&i){const t=document.createElement("div");t.className="designbase-wc-sidebar__logo";const s=document.createElement("db-logo");s.setAttribute("type","designbase"),s.setAttribute("size",c),t.append(s),t.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-logo-click",{bubbles:!0,composed:!0}))}),e.append(t)}if(s){const t=document.createElement("db-button");t.className="designbase-wc-sidebar__toggle",t.setAttribute("variant","tertiary"),t.setAttribute("size","s"),t.setAttribute("icon-only",""),t.setAttribute("start-icon",r?"arrow-bar-right":"arrow-bar-left"),t.setAttribute("aria-label",r?"사이드바 펼치기":"사이드바 접기"),t.addEventListener("db-click",()=>{const e=!this.hasAttribute("collapsed");e?this.setAttribute("collapsed",""):this.removeAttribute("collapsed"),this.dispatchEvent(new CustomEvent("db-toggle",{bubbles:!0,composed:!0,detail:{collapsed:e}}))}),e.append(t)}d.append(e)}const l=document.createElement("div");l.className="designbase-wc-sidebar__nav-wrapper";const b=this.createProjectSelector(r);b&&l.append(b);const u=document.createElement("nav");if(u.className="designbase-wc-sidebar__nav",u.setAttribute("aria-label","주 메뉴"),l.append(u),o.length>0){const e=document.createElement("nav");e.className="designbase-wc-sidebar__bottom-nav",e.setAttribute("aria-label","하단 메뉴"),l.append(e)}d.append(l);const p=document.createElement("div");p.className="designbase-wc-sidebar__footer";const m=this.createPromoBanner(r);if(m&&p.append(m),a&&!r){const t=document.createElement("div");t.className="designbase-wc-sidebar__user";const s=this.createUserDropdown(n);s&&t.append(s);const i=document.createElement("div");i.className="designbase-wc-sidebar__user-info",i.setAttribute("role","button"),i.setAttribute("tabindex","0"),i.setAttribute("aria-expanded",String(this.userMenuOpen));const r=document.createElement("db-avatar");r.className="designbase-wc-sidebar__user-avatar",r.setAttribute("size","s"),r.setAttribute("initials",a.name),r.setAttribute("alt",a.name),a.avatar&&r.setAttribute("src",a.avatar);const o=document.createElement("div");o.className="designbase-wc-sidebar__user-details";const c=document.createElement("div");if(c.className="designbase-wc-sidebar__user-name",c.textContent=a.name,o.append(c),a.email){const e=document.createElement("div");e.className="designbase-wc-sidebar__user-email",e.textContent=a.email,o.append(e)}if(i.append(r,o),n.length){const t=document.createElement("span");t.className="designbase-wc-sidebar__user-more",t.setAttribute("aria-hidden","true"),t.append(e("more-vertical",16)),i.append(t),i.setAttribute("aria-haspopup","menu")}i.addEventListener("click",()=>{n.length&&(this.userMenuOpen=!this.userMenuOpen,this.projectMenuOpen=!1,this.render())}),t.append(i),p.append(t)}else if(a&&r){const e=document.createElement("div");e.className=["designbase-wc-sidebar__user-collapsed",this.userMenuOpen&&"designbase-wc-sidebar__user-collapsed--open"].filter(Boolean).join(" "),e.setAttribute("role","button"),e.setAttribute("tabindex","0"),e.setAttribute("aria-label",a.name),e.setAttribute("aria-expanded",String(this.userMenuOpen)),n.length&&e.setAttribute("aria-haspopup","menu");const t=document.createElement("db-avatar");if(t.className="designbase-wc-sidebar__user-avatar-collapsed",t.setAttribute("size","s"),t.setAttribute("initials",a.name),t.setAttribute("alt",a.name),a.avatar&&t.setAttribute("src",a.avatar),e.append(t),!this.userMenuOpen){const t=document.createElement("span");t.className="designbase-wc-sidebar__item-tooltip",t.textContent=a.name,t.setAttribute("role","tooltip"),e.append(t)}const s=this.createUserDropdown(n,!0);s&&e.append(s),e.addEventListener("click",e=>{n.length&&(e.target.closest(".designbase-wc-sidebar__user-dropdown")||(this.userMenuOpen=!this.userMenuOpen,this.projectMenuOpen=!1,this.render()))}),p.append(e)}d.append(p),this.append(d),this.renderNav(),this.renderBottomNav()}}customElements.get("db-sidebar")||customElements.define("db-sidebar",DbSidebar);export{DbSidebar};
+import { createDbIcon, isDbIconName } from './db-icons.js';
+
+const SIZES = ['s', 'm', 'l'];
+const VARIANTS = ['default', 'dark', 'light'];
+const POSITIONS = ['left', 'right'];
+const FLYOUT_CLOSE_DELAY_MS = 120;
+class DbSidebar extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.expandedItems = new Set();
+        this.userMenuOpen = false;
+        this.projectMenuOpen = false;
+        this.flyoutItemId = null;
+        this.flyoutCloseTimer = null;
+        this.outsideHandler = null;
+    }
+    static get observedAttributes() {
+        return [
+            'items',
+            'sections',
+            'user-menu-items',
+            'user-profile',
+            'default-expanded-ids',
+            'projects',
+            'selected-project-id',
+            'project-manage-label',
+            'project-manage-href',
+            'project-section-label',
+            'project-empty-label',
+            'project-empty-trigger-label',
+            'bottom-items',
+            'bottom-sections',
+            'promo-banner',
+            'size',
+            'variant',
+            'position',
+            'collapsed',
+            'collapsible',
+            'show-logo',
+            'full-height',
+            'shadow',
+        ];
+    }
+    connectedCallback() {
+        this.seedExpanded();
+        this.render();
+        this.bindOutsideClick();
+    }
+    disconnectedCallback() {
+        this.unbindOutsideClick();
+        this.cancelFlyoutClose();
+    }
+    attributeChangedCallback(name) {
+        if (!this.isConnected)
+            return;
+        if (name === 'default-expanded-ids')
+            this.seedExpanded();
+        if (name === 'collapsed' && this.hasAttribute('collapsed')) {
+            this.userMenuOpen = false;
+            this.projectMenuOpen = false;
+            this.flyoutItemId = null;
+            this.cancelFlyoutClose();
+        }
+        this.render();
+    }
+    seedExpanded() {
+        try {
+            const ids = JSON.parse(this.getAttribute('default-expanded-ids') || '[]');
+            if (Array.isArray(ids))
+                this.expandedItems = new Set(ids);
+        }
+        catch {
+            this.expandedItems = new Set();
+        }
+    }
+    get items() {
+        try {
+            const parsed = JSON.parse(this.getAttribute('items') || '[]');
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    set items(value) {
+        this.setAttribute('items', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    get sections() {
+        return this.parseSections();
+    }
+    set sections(value) {
+        this.setAttribute('sections', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    get userMenuItems() {
+        return this.parseUserMenuItems();
+    }
+    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));
+    }
+    get projects() {
+        return this.parseProjects();
+    }
+    set projects(value) {
+        this.setAttribute('projects', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    get selectedProjectId() {
+        return this.getAttribute('selected-project-id') || '';
+    }
+    set selectedProjectId(value) {
+        if (value)
+            this.setAttribute('selected-project-id', value);
+        else
+            this.removeAttribute('selected-project-id');
+    }
+    get projectManageLabel() {
+        return this.getAttribute('project-manage-label') || '프로젝트 관리';
+    }
+    set projectManageLabel(value) {
+        this.setAttribute('project-manage-label', value);
+    }
+    get projectManageHref() {
+        return this.getAttribute('project-manage-href') || '';
+    }
+    set projectManageHref(value) {
+        if (value)
+            this.setAttribute('project-manage-href', value);
+        else
+            this.removeAttribute('project-manage-href');
+    }
+    get projectSectionLabel() {
+        return this.getAttribute('project-section-label') || '프로젝트';
+    }
+    set projectSectionLabel(value) {
+        this.setAttribute('project-section-label', value);
+    }
+    get projectEmptyLabel() {
+        return this.getAttribute('project-empty-label') || '프로젝트를 추가해 주세요';
+    }
+    set projectEmptyLabel(value) {
+        this.setAttribute('project-empty-label', value);
+    }
+    get projectEmptyTriggerLabel() {
+        return this.getAttribute('project-empty-trigger-label') || '프로젝트 추가';
+    }
+    set projectEmptyTriggerLabel(value) {
+        this.setAttribute('project-empty-trigger-label', value);
+    }
+    get bottomItems() {
+        return this.parseBottomItems();
+    }
+    set bottomItems(value) {
+        this.setAttribute('bottom-items', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    get bottomSections() {
+        return this.parseBottomSections();
+    }
+    set bottomSections(value) {
+        this.setAttribute('bottom-sections', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    get promoBanner() {
+        return this.parsePromoBanner();
+    }
+    set promoBanner(value) {
+        if (value === null || value === undefined)
+            this.removeAttribute('promo-banner');
+        else
+            this.setAttribute('promo-banner', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    parseSections() {
+        const sectionsRaw = this.getAttribute('sections');
+        if (sectionsRaw) {
+            try {
+                const parsed = JSON.parse(sectionsRaw);
+                if (Array.isArray(parsed) && parsed.length)
+                    return parsed;
+            }
+            catch {
+                /* fall through */
+            }
+        }
+        try {
+            const items = JSON.parse(this.getAttribute('items') || '[]');
+            return [{ id: 'main', items: Array.isArray(items) ? items : [] }];
+        }
+        catch {
+            return [{ id: 'main', items: [] }];
+        }
+    }
+    parseUserMenuItems() {
+        try {
+            const parsed = JSON.parse(this.getAttribute('user-menu-items') || '[]');
+            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;
+        }
+    }
+    parseProjects() {
+        try {
+            const parsed = JSON.parse(this.getAttribute('projects') || '[]');
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    parseBottomItems() {
+        try {
+            const parsed = JSON.parse(this.getAttribute('bottom-items') || '[]');
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    parseBottomSections() {
+        const sectionsRaw = this.getAttribute('bottom-sections');
+        if (sectionsRaw) {
+            try {
+                const parsed = JSON.parse(sectionsRaw);
+                if (Array.isArray(parsed) && parsed.length)
+                    return parsed;
+            }
+            catch {
+                /* fall through */
+            }
+        }
+        const items = this.parseBottomItems();
+        return items.length ? [{ id: 'bottom', items }] : [];
+    }
+    parsePromoBanner() {
+        const raw = this.getAttribute('promo-banner');
+        if (!raw)
+            return null;
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return null;
+        }
+    }
+    getSelectedProject() {
+        const projects = this.parseProjects();
+        if (!projects.length)
+            return null;
+        const selectedId = this.selectedProjectId;
+        return projects.find((project) => project.id === selectedId) || projects[0];
+    }
+    bindOutsideClick() {
+        if (this.outsideHandler)
+            return;
+        this.outsideHandler = (event) => {
+            const target = event.target;
+            // 사이드바 내부 클릭은 각 핸들러가 exclusive open을 처리 — mousedown에서 remount하면 클릭이 씹힘
+            if (this.contains(target))
+                return;
+            let changed = false;
+            if (this.userMenuOpen) {
+                this.userMenuOpen = false;
+                changed = true;
+            }
+            if (this.projectMenuOpen) {
+                this.projectMenuOpen = false;
+                changed = true;
+            }
+            if (changed)
+                this.render();
+        };
+        document.addEventListener('mousedown', this.outsideHandler);
+    }
+    closeOverlayMenus() {
+        const projectOpen = this.projectMenuOpen;
+        const userOpen = this.userMenuOpen;
+        if (!projectOpen && !userOpen)
+            return false;
+        this.projectMenuOpen = false;
+        this.userMenuOpen = false;
+        this.querySelector('.designbase-wc-sidebar__project-dropdown')?.remove();
+        this.querySelector('.designbase-wc-sidebar__project-selector')?.classList.remove('designbase-wc-sidebar__project-selector--open');
+        const projectTrigger = this.querySelector('.designbase-wc-sidebar__project-trigger');
+        projectTrigger?.setAttribute('aria-expanded', 'false');
+        const userDropdown = this.querySelector('.designbase-wc-sidebar__user-dropdown');
+        if (userDropdown)
+            userDropdown.hidden = true;
+        this.querySelector('.designbase-wc-sidebar__user-info')?.setAttribute('aria-expanded', 'false');
+        this.querySelector('.designbase-wc-sidebar__user-collapsed')?.setAttribute('aria-expanded', 'false');
+        this.querySelector('.designbase-wc-sidebar__user-collapsed')?.classList.remove('designbase-wc-sidebar__user-collapsed--open');
+        return true;
+    }
+    syncExclusiveAccordion(openId) {
+        const roots = [
+            ...Array.from(this.querySelectorAll('.designbase-wc-sidebar__nav-list > .designbase-wc-sidebar__item > db-menu-item')),
+            ...Array.from(this.querySelectorAll('.designbase-wc-sidebar__bottom-nav .designbase-wc-sidebar__nav-list > .designbase-wc-sidebar__item > db-menu-item')),
+        ];
+        roots.forEach((el) => {
+            const id = el.getAttribute('data-item-id');
+            if (!id)
+                return;
+            if (openId && id === openId)
+                el.setAttribute('expanded', '');
+            else
+                el.removeAttribute('expanded');
+        });
+    }
+    unbindOutsideClick() {
+        if (!this.outsideHandler)
+            return;
+        document.removeEventListener('mousedown', this.outsideHandler);
+        this.outsideHandler = null;
+    }
+    cancelFlyoutClose() {
+        if (this.flyoutCloseTimer) {
+            clearTimeout(this.flyoutCloseTimer);
+            this.flyoutCloseTimer = null;
+        }
+    }
+    showFlyout(itemId) {
+        this.cancelFlyoutClose();
+        if (this.flyoutItemId === itemId)
+            return;
+        this.flyoutItemId = itemId;
+        this.renderNav();
+        this.renderBottomNav();
+    }
+    scheduleFlyoutClose() {
+        this.cancelFlyoutClose();
+        this.flyoutCloseTimer = setTimeout(() => {
+            this.flyoutCloseTimer = null;
+            this.flyoutItemId = null;
+            this.renderNav();
+            this.renderBottomNav();
+        }, FLYOUT_CLOSE_DELAY_MS);
+    }
+    syncHostClasses() {
+        const size = this.getAttribute('size') || 'm';
+        const variant = this.getAttribute('variant') || 'default';
+        const position = this.getAttribute('position') || 'left';
+        this.className = [
+            'designbase-wc-sidebar',
+            `designbase-wc-sidebar--${SIZES.includes(size) ? size : 'm'}`,
+            `designbase-wc-sidebar--${VARIANTS.includes(variant) ? variant : 'default'}`,
+            `designbase-wc-sidebar--${POSITIONS.includes(position) ? position : 'left'}`,
+            this.hasAttribute('collapsed') && 'designbase-wc-sidebar--collapsed',
+            this.hasAttribute('full-height') && 'designbase-wc-sidebar--full-height',
+            this.hasAttribute('shadow') && 'designbase-wc-sidebar--shadow',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    dispatchItemClick(item) {
+        this.dispatchEvent(new CustomEvent('db-item-click', {
+            bubbles: true,
+            composed: true,
+            detail: { item },
+        }));
+    }
+    dispatchUserMenuItemClick(item) {
+        this.dispatchEvent(new CustomEvent('db-user-menu-item-click', {
+            bubbles: true,
+            composed: true,
+            detail: { item },
+        }));
+    }
+    dispatchProjectChange(project) {
+        this.dispatchEvent(new CustomEvent('db-project-change', {
+            bubbles: true,
+            composed: true,
+            detail: { project },
+        }));
+    }
+    dispatchProjectManage() {
+        this.dispatchEvent(new CustomEvent('db-project-manage', {
+            bubbles: true,
+            composed: true,
+            detail: {},
+        }));
+    }
+    dispatchPromoCtaClick(banner) {
+        this.dispatchEvent(new CustomEvent('db-promo-cta-click', {
+            bubbles: true,
+            composed: true,
+            detail: { banner },
+        }));
+    }
+    createProjectAvatar(project, size = 's') {
+        const avatar = document.createElement('db-avatar');
+        avatar.className = 'designbase-wc-sidebar__project-avatar';
+        avatar.setAttribute('size', size);
+        avatar.setAttribute('initials', (project.label || '?').trim());
+        avatar.setAttribute('alt', project.label);
+        if (project.color) {
+            const applyColor = () => {
+                const initials = avatar.querySelector('.designbase-wc-avatar__initials');
+                if (!initials)
+                    return false;
+                initials.style.backgroundColor = project.color;
+                initials.style.color = '#fff';
+                return true;
+            };
+            const observer = new MutationObserver(() => {
+                if (applyColor())
+                    observer.disconnect();
+            });
+            observer.observe(avatar, { childList: true, subtree: true });
+            queueMicrotask(() => {
+                if (applyColor())
+                    observer.disconnect();
+            });
+        }
+        return avatar;
+    }
+    createProjectEmptyMark(size = 's') {
+        const mark = document.createElement('span');
+        mark.className = [
+            'designbase-wc-sidebar__project-mark',
+            `designbase-wc-sidebar__project-mark--${size}`,
+            'designbase-wc-sidebar__project-mark--empty',
+        ].join(' ');
+        mark.setAttribute('aria-hidden', 'true');
+        mark.append(createDbIcon('plus', size === 'm' ? 16 : 14));
+        return mark;
+    }
+    createProjectBadge(project) {
+        if (!project.badge)
+            return null;
+        const badge = document.createElement('db-badge');
+        badge.className = 'designbase-wc-sidebar__project-badge';
+        badge.setAttribute('size', 's');
+        badge.setAttribute('variant', project.badgeColor || 'warning');
+        badge.setAttribute('badge-style', 'text');
+        badge.textContent = project.badge;
+        return badge;
+    }
+    createProjectSelector(collapsed) {
+        if (!this.hasAttribute('projects'))
+            return null;
+        const projects = this.parseProjects();
+        const isEmpty = projects.length === 0;
+        const selected = this.getSelectedProject();
+        const wrap = document.createElement('div');
+        wrap.className = [
+            'designbase-wc-sidebar__project-selector',
+            collapsed && 'designbase-wc-sidebar__project-selector--collapsed',
+            this.projectMenuOpen && 'designbase-wc-sidebar__project-selector--open',
+            isEmpty && 'designbase-wc-sidebar__project-selector--empty',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const sectionLabelAttr = this.getAttribute('project-section-label');
+        if (!collapsed && sectionLabelAttr && sectionLabelAttr.trim()) {
+            const sectionLabel = document.createElement('div');
+            sectionLabel.className = 'designbase-wc-sidebar__project-section-label';
+            sectionLabel.textContent = sectionLabelAttr.trim();
+            wrap.append(sectionLabel);
+        }
+        const trigger = document.createElement('button');
+        trigger.type = 'button';
+        trigger.className = 'designbase-wc-sidebar__project-trigger';
+        trigger.setAttribute('aria-haspopup', 'menu');
+        trigger.setAttribute('aria-expanded', String(this.projectMenuOpen));
+        if (isEmpty || !selected) {
+            trigger.setAttribute('aria-label', this.projectEmptyTriggerLabel);
+            trigger.append(this.createProjectEmptyMark(collapsed ? 'm' : 's'));
+            if (!collapsed) {
+                const label = document.createElement('span');
+                label.className = 'designbase-wc-sidebar__project-label';
+                label.textContent = this.projectEmptyTriggerLabel;
+                trigger.append(label);
+            }
+        }
+        else {
+            trigger.setAttribute('aria-label', selected.label);
+            trigger.append(this.createProjectAvatar(selected, collapsed ? 'm' : 's'));
+            if (!collapsed) {
+                const label = document.createElement('span');
+                label.className = 'designbase-wc-sidebar__project-label';
+                label.textContent = selected.label;
+                trigger.append(label);
+            }
+        }
+        const chevron = document.createElement('span');
+        chevron.className = 'designbase-wc-sidebar__project-chevron';
+        chevron.setAttribute('aria-hidden', 'true');
+        chevron.append(createDbIcon('chevron-down', 14));
+        trigger.append(chevron);
+        trigger.addEventListener('click', () => {
+            this.projectMenuOpen = !this.projectMenuOpen;
+            this.userMenuOpen = false;
+            this.render();
+        });
+        wrap.append(trigger);
+        if (this.projectMenuOpen) {
+            const dropdown = document.createElement('div');
+            dropdown.className = 'designbase-wc-sidebar__project-dropdown';
+            dropdown.setAttribute('role', 'menu');
+            dropdown.setAttribute('aria-label', this.projectSectionLabel);
+            if (isEmpty) {
+                const empty = document.createElement('div');
+                empty.className = 'designbase-wc-sidebar__project-empty';
+                empty.setAttribute('role', 'presentation');
+                const emptyText = document.createElement('p');
+                emptyText.className = 'designbase-wc-sidebar__project-empty-text';
+                emptyText.textContent = this.projectEmptyLabel;
+                empty.append(emptyText);
+                dropdown.append(empty);
+            }
+            else {
+                const list = document.createElement('ul');
+                list.className = 'designbase-wc-sidebar__project-list';
+                projects.forEach((project) => {
+                    const li = document.createElement('li');
+                    li.className = 'designbase-wc-sidebar__project-option';
+                    const button = document.createElement('button');
+                    button.type = 'button';
+                    button.className = [
+                        'designbase-wc-sidebar__project-option-btn',
+                        selected && project.id === selected.id && 'designbase-wc-sidebar__project-option-btn--active',
+                    ]
+                        .filter(Boolean)
+                        .join(' ');
+                    button.setAttribute('role', 'menuitem');
+                    button.append(this.createProjectAvatar(project, 's'));
+                    const optionLabel = document.createElement('span');
+                    optionLabel.className = 'designbase-wc-sidebar__project-option-label';
+                    optionLabel.textContent = project.label;
+                    button.append(optionLabel);
+                    const badge = this.createProjectBadge(project);
+                    if (badge)
+                        button.append(badge);
+                    button.addEventListener('click', () => {
+                        this.projectMenuOpen = false;
+                        this.setAttribute('selected-project-id', project.id);
+                        this.dispatchProjectChange(project);
+                        this.render();
+                    });
+                    li.append(button);
+                    list.append(li);
+                });
+                dropdown.append(list);
+            }
+            const manage = document.createElement('button');
+            manage.type = 'button';
+            manage.className = 'designbase-wc-sidebar__project-manage';
+            manage.setAttribute('role', 'menuitem');
+            manage.append(createDbIcon('plus', 14));
+            const manageLabel = document.createElement('span');
+            manageLabel.textContent = this.projectManageLabel;
+            manage.append(manageLabel);
+            manage.addEventListener('click', () => {
+                this.projectMenuOpen = false;
+                const href = this.projectManageHref;
+                if (href) {
+                    window.location.assign(href);
+                }
+                this.dispatchProjectManage();
+                this.render();
+            });
+            dropdown.append(manage);
+            wrap.append(dropdown);
+        }
+        return wrap;
+    }
+    createFlyout(item, size) {
+        const position = this.getAttribute('position') || 'left';
+        const flyout = document.createElement('div');
+        flyout.className = [
+            'designbase-wc-sidebar__flyout',
+            position === 'right' && 'designbase-wc-sidebar__flyout--align-left',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        flyout.setAttribute('role', 'menu');
+        flyout.setAttribute('aria-label', `${item.label} 하위 메뉴`);
+        flyout.addEventListener('mouseenter', () => this.cancelFlyoutClose());
+        flyout.addEventListener('mouseleave', () => this.scheduleFlyoutClose());
+        const title = document.createElement('div');
+        title.className = 'designbase-wc-sidebar__flyout-title';
+        title.textContent = item.label;
+        flyout.append(title);
+        const list = document.createElement('ul');
+        list.className = 'designbase-wc-sidebar__flyout-list';
+        (item.children || []).forEach((child) => {
+            const li = document.createElement('li');
+            li.className = 'designbase-wc-sidebar__flyout-item';
+            const menuItem = document.createElement('db-menu-item');
+            menuItem.setAttribute('label', child.label);
+            menuItem.setAttribute('type', 'block');
+            menuItem.setAttribute('menu-style', 'dropdown');
+            menuItem.setAttribute('size', size);
+            if (child.href)
+                menuItem.setAttribute('href', child.href);
+            if (child.active)
+                menuItem.setAttribute('active', '');
+            if (child.disabled)
+                menuItem.setAttribute('disabled', '');
+            if (child.badge !== undefined)
+                menuItem.setAttribute('badge', String(child.badge));
+            if (child.badgeColor)
+                menuItem.setAttribute('badge-color', child.badgeColor);
+            menuItem.addEventListener('db-click', () => {
+                if (child.disabled)
+                    return;
+                this.flyoutItemId = null;
+                this.dispatchItemClick(child);
+                this.renderNav();
+                this.renderBottomNav();
+            });
+            li.append(menuItem);
+            list.append(li);
+        });
+        flyout.append(list);
+        return flyout;
+    }
+    createSidebarMenuItem(item, size, depth = 0) {
+        const hasChildren = Boolean(item.children?.length);
+        const expanded = this.expandedItems.has(item.id);
+        const collapsed = this.hasAttribute('collapsed');
+        const useFlyout = collapsed && hasChildren;
+        const li = document.createElement('li');
+        li.className = [
+            'designbase-wc-sidebar__item',
+            useFlyout && this.flyoutItemId === item.id && 'designbase-wc-sidebar__item--flyout-active',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        if (useFlyout) {
+            li.addEventListener('mouseenter', () => this.showFlyout(item.id));
+            li.addEventListener('mouseleave', () => this.scheduleFlyoutClose());
+        }
+        const menuItem = document.createElement('db-menu-item');
+        menuItem.setAttribute('data-item-id', item.id);
+        menuItem.setAttribute('label', item.label);
+        menuItem.setAttribute('type', 'block');
+        menuItem.setAttribute('menu-style', 'accordion');
+        menuItem.setAttribute('size', size);
+        menuItem.setAttribute('depth', String(depth));
+        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 (item.badge !== undefined)
+            menuItem.setAttribute('badge', String(item.badge));
+        if (item.badgeColor)
+            menuItem.setAttribute('badge-color', item.badgeColor);
+        if (hasChildren && !useFlyout) {
+            menuItem.setAttribute('expandable', '');
+            menuItem.subItems = (item.children || []).map((child) => ({
+                id: child.id,
+                label: child.label,
+                href: child.href,
+                active: child.active,
+                disabled: child.disabled,
+                badge: child.badge,
+                badgeColor: child.badgeColor,
+            }));
+            if (expanded && !collapsed)
+                menuItem.setAttribute('expanded', '');
+        }
+        menuItem.addEventListener('db-click', (event) => {
+            if (item.disabled)
+                return;
+            if (hasChildren && !collapsed) {
+                const willOpen = event.detail?.expanded
+                    ?? !this.expandedItems.has(item.id);
+                this.closeOverlayMenus();
+                if (willOpen) {
+                    this.expandedItems.clear();
+                    this.expandedItems.add(item.id);
+                    this.syncExclusiveAccordion(item.id);
+                }
+                else {
+                    this.expandedItems.delete(item.id);
+                    this.syncExclusiveAccordion(null);
+                }
+                return;
+            }
+            if (useFlyout) {
+                this.closeOverlayMenus();
+                this.showFlyout(item.id);
+                return;
+            }
+            this.closeOverlayMenus();
+            this.dispatchItemClick(item);
+        });
+        menuItem.addEventListener('db-child-click', (event) => {
+            const detail = event.detail;
+            this.dispatchItemClick(detail.child);
+        });
+        li.append(menuItem);
+        if (collapsed && item.badge !== undefined && item.badge !== null && item.badge !== '') {
+            const badgeColor = item.badgeColor || 'primary';
+            const dot = document.createElement('span');
+            dot.className = [
+                'designbase-wc-sidebar__collapsed-badge-dot',
+                `designbase-wc-sidebar__collapsed-badge-dot--${badgeColor}`,
+            ].join(' ');
+            dot.setAttribute('aria-hidden', 'true');
+            li.append(dot);
+        }
+        if (collapsed && !hasChildren) {
+            const tooltip = document.createElement('span');
+            tooltip.className = 'designbase-wc-sidebar__item-tooltip';
+            tooltip.textContent = item.label;
+            tooltip.setAttribute('role', 'tooltip');
+            li.append(tooltip);
+        }
+        if (useFlyout && this.flyoutItemId === item.id) {
+            li.append(this.createFlyout(item, size));
+        }
+        return li;
+    }
+    renderSectionList(sections, size, collapsed) {
+        const fragment = document.createDocumentFragment();
+        sections.forEach((section) => {
+            const sectionEl = document.createElement('div');
+            sectionEl.className = 'designbase-wc-sidebar__section';
+            if (!collapsed && section.title) {
+                const title = document.createElement('div');
+                title.className = 'designbase-wc-sidebar__section-title';
+                title.textContent = section.title;
+                sectionEl.append(title);
+            }
+            const list = document.createElement('ul');
+            list.className = 'designbase-wc-sidebar__nav-list';
+            section.items.forEach((item) => list.append(this.createSidebarMenuItem(item, size)));
+            sectionEl.append(list);
+            fragment.append(sectionEl);
+        });
+        return fragment;
+    }
+    renderNav() {
+        const nav = this.querySelector('.designbase-wc-sidebar__nav');
+        if (!nav)
+            return;
+        const size = this.getAttribute('size') || 'm';
+        const collapsed = this.hasAttribute('collapsed');
+        nav.replaceChildren(this.renderSectionList(this.parseSections(), size, collapsed));
+    }
+    renderBottomNav() {
+        const bottomNav = this.querySelector('.designbase-wc-sidebar__bottom-nav');
+        if (!bottomNav)
+            return;
+        const size = this.getAttribute('size') || 'm';
+        const collapsed = this.hasAttribute('collapsed');
+        bottomNav.replaceChildren(this.renderSectionList(this.parseBottomSections(), size, collapsed));
+    }
+    createUserDropdown(userMenuItems, collapsed = false) {
+        if (!userMenuItems.length)
+            return null;
+        const size = this.getAttribute('size') || 'm';
+        const dropdown = document.createElement('div');
+        dropdown.className = [
+            'designbase-wc-sidebar__user-dropdown',
+            collapsed && 'designbase-wc-sidebar__user-dropdown--collapsed',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        dropdown.setAttribute('role', 'menu');
+        dropdown.setAttribute('aria-label', '사용자 메뉴');
+        dropdown.hidden = !this.userMenuOpen;
+        const menu = document.createElement('ul');
+        menu.className = 'designbase-wc-sidebar__user-menu';
+        userMenuItems.forEach((item) => {
+            const li = document.createElement('li');
+            li.className = 'designbase-wc-sidebar__user-menu-item';
+            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.icon)
+                menuItem.setAttribute('icon', item.icon);
+            if (item.href)
+                menuItem.setAttribute('href', item.href);
+            menuItem.addEventListener('db-click', () => {
+                this.userMenuOpen = false;
+                this.dispatchUserMenuItemClick(item);
+                this.render();
+            });
+            li.append(menuItem);
+            menu.append(li);
+        });
+        dropdown.append(menu);
+        return dropdown;
+    }
+    createPromoBanner(collapsed) {
+        const banner = this.parsePromoBanner();
+        if (!banner)
+            return null;
+        if (collapsed) {
+            const collapsedPromo = document.createElement('button');
+            collapsedPromo.type = 'button';
+            collapsedPromo.className = 'designbase-wc-sidebar__promo-collapsed';
+            collapsedPromo.setAttribute('aria-label', banner.ctaLabel || banner.title);
+            const animBg = document.createElement('db-animation-background');
+            animBg.className = 'designbase-wc-sidebar__promo-bg';
+            animBg.setAttribute('type', 'aurora');
+            animBg.setAttribute('theme', 'light');
+            animBg.setAttribute('intensity', 'subtle');
+            animBg.setAttribute('blur', '40');
+            animBg.setAttribute('speed', '4000');
+            animBg.setAttribute('colors', JSON.stringify(['#c7d2fe', '#ddd6fe', '#fbcfe8']));
+            collapsedPromo.append(animBg);
+            collapsedPromo.append(createDbIcon(banner.icon && isDbIconName(banner.icon) ? banner.icon : 'sparkle', 18));
+            collapsedPromo.addEventListener('click', () => this.dispatchPromoCtaClick(banner));
+            const tooltip = document.createElement('span');
+            tooltip.className = 'designbase-wc-sidebar__item-tooltip';
+            tooltip.textContent = banner.title;
+            tooltip.setAttribute('role', 'tooltip');
+            const wrap = document.createElement('div');
+            wrap.className = 'designbase-wc-sidebar__promo-collapsed-wrap';
+            wrap.append(collapsedPromo, tooltip);
+            return wrap;
+        }
+        const promo = document.createElement('div');
+        promo.className = 'designbase-wc-sidebar__promo';
+        const animBg = document.createElement('db-animation-background');
+        animBg.className = 'designbase-wc-sidebar__promo-bg';
+        animBg.setAttribute('type', 'aurora');
+        animBg.setAttribute('theme', 'light');
+        animBg.setAttribute('intensity', 'subtle');
+        animBg.setAttribute('blur', '60');
+        animBg.setAttribute('speed', '5000');
+        animBg.setAttribute('colors', JSON.stringify(['#c7d2fe', '#ddd6fe', '#fbcfe8', '#bfdbfe']));
+        promo.append(animBg);
+        const content = document.createElement('div');
+        content.className = 'designbase-wc-sidebar__promo-content';
+        const titleRow = document.createElement('div');
+        titleRow.className = 'designbase-wc-sidebar__promo-title-row';
+        const iconWrap = document.createElement('span');
+        iconWrap.className = 'designbase-wc-sidebar__promo-icon';
+        iconWrap.setAttribute('aria-hidden', 'true');
+        iconWrap.append(createDbIcon(banner.icon && isDbIconName(banner.icon) ? banner.icon : 'sparkle', 16));
+        const title = document.createElement('div');
+        title.className = 'designbase-wc-sidebar__promo-title';
+        title.textContent = banner.title;
+        titleRow.append(iconWrap, title);
+        content.append(titleRow);
+        if (banner.description) {
+            const desc = document.createElement('div');
+            desc.className = 'designbase-wc-sidebar__promo-desc';
+            desc.textContent = banner.description;
+            content.append(desc);
+        }
+        if (banner.ctaLabel) {
+            const cta = document.createElement('db-button');
+            cta.className = 'designbase-wc-sidebar__promo-action';
+            cta.setAttribute('variant', 'secondary');
+            cta.setAttribute('size', 's');
+            cta.setAttribute('full-width', '');
+            cta.textContent = banner.ctaLabel;
+            cta.addEventListener('db-click', () => {
+                if (banner.ctaHref)
+                    window.location.assign(banner.ctaHref);
+                this.dispatchPromoCtaClick(banner);
+            });
+            content.append(cta);
+        }
+        promo.append(content);
+        return promo;
+    }
+    render() {
+        this.syncHostClasses();
+        this.setAttribute('role', 'complementary');
+        this.setAttribute('aria-label', '사이드바 네비게이션');
+        const size = this.getAttribute('size') || 'm';
+        const collapsible = this.getAttribute('collapsible') !== 'false';
+        const showLogo = this.getAttribute('show-logo') !== 'false';
+        const collapsed = this.hasAttribute('collapsed');
+        const userProfile = this.parseUserProfile();
+        const userMenuItems = this.parseUserMenuItems();
+        const bottomSections = this.parseBottomSections();
+        const logoSize = size === 'l' ? 'm' : size === 's' ? 'xs' : 's';
+        this.replaceChildren();
+        const container = document.createElement('div');
+        container.className = 'designbase-wc-sidebar__container';
+        if (collapsible || (showLogo && !collapsed)) {
+            const header = document.createElement('div');
+            header.className = [
+                'designbase-wc-sidebar__header',
+                (collapsed || !showLogo) && 'designbase-wc-sidebar__header--collapsed-only',
+            ]
+                .filter(Boolean)
+                .join(' ');
+            if (!collapsed && showLogo) {
+                const logoWrap = document.createElement('div');
+                logoWrap.className = 'designbase-wc-sidebar__logo';
+                const logo = document.createElement('db-logo');
+                logo.setAttribute('type', 'designbase');
+                logo.setAttribute('size', logoSize);
+                logoWrap.append(logo);
+                logoWrap.addEventListener('click', () => {
+                    this.dispatchEvent(new CustomEvent('db-logo-click', { bubbles: true, composed: true }));
+                });
+                header.append(logoWrap);
+            }
+            if (collapsible) {
+                const toggle = document.createElement('db-button');
+                toggle.className = 'designbase-wc-sidebar__toggle';
+                toggle.setAttribute('variant', 'tertiary');
+                toggle.setAttribute('size', 's');
+                toggle.setAttribute('icon-only', '');
+                toggle.setAttribute('start-icon', collapsed ? 'arrow-bar-right' : 'arrow-bar-left');
+                toggle.setAttribute('aria-label', collapsed ? '사이드바 펼치기' : '사이드바 접기');
+                toggle.addEventListener('db-click', () => {
+                    const next = !this.hasAttribute('collapsed');
+                    if (next)
+                        this.setAttribute('collapsed', '');
+                    else
+                        this.removeAttribute('collapsed');
+                    this.dispatchEvent(new CustomEvent('db-toggle', {
+                        bubbles: true,
+                        composed: true,
+                        detail: { collapsed: next },
+                    }));
+                });
+                header.append(toggle);
+            }
+            container.append(header);
+        }
+        const navWrapper = document.createElement('div');
+        navWrapper.className = 'designbase-wc-sidebar__nav-wrapper';
+        const projectSelector = this.createProjectSelector(collapsed);
+        if (projectSelector)
+            navWrapper.append(projectSelector);
+        const nav = document.createElement('nav');
+        nav.className = 'designbase-wc-sidebar__nav';
+        nav.setAttribute('aria-label', '주 메뉴');
+        navWrapper.append(nav);
+        if (bottomSections.length > 0) {
+            const bottomNav = document.createElement('nav');
+            bottomNav.className = 'designbase-wc-sidebar__bottom-nav';
+            bottomNav.setAttribute('aria-label', '하단 메뉴');
+            navWrapper.append(bottomNav);
+        }
+        container.append(navWrapper);
+        const footer = document.createElement('div');
+        footer.className = 'designbase-wc-sidebar__footer';
+        const promo = this.createPromoBanner(collapsed);
+        if (promo)
+            footer.append(promo);
+        if (userProfile && !collapsed) {
+            const user = document.createElement('div');
+            user.className = 'designbase-wc-sidebar__user';
+            const dropdown = this.createUserDropdown(userMenuItems);
+            if (dropdown)
+                user.append(dropdown);
+            const info = document.createElement('div');
+            info.className = 'designbase-wc-sidebar__user-info';
+            info.setAttribute('role', 'button');
+            info.setAttribute('tabindex', '0');
+            info.setAttribute('aria-expanded', String(this.userMenuOpen));
+            const avatar = document.createElement('db-avatar');
+            avatar.className = 'designbase-wc-sidebar__user-avatar';
+            avatar.setAttribute('size', 's');
+            avatar.setAttribute('initials', userProfile.name);
+            avatar.setAttribute('alt', userProfile.name);
+            if (userProfile.avatar)
+                avatar.setAttribute('src', userProfile.avatar);
+            const details = document.createElement('div');
+            details.className = 'designbase-wc-sidebar__user-details';
+            const name = document.createElement('div');
+            name.className = 'designbase-wc-sidebar__user-name';
+            name.textContent = userProfile.name;
+            details.append(name);
+            if (userProfile.email) {
+                const email = document.createElement('div');
+                email.className = 'designbase-wc-sidebar__user-email';
+                email.textContent = userProfile.email;
+                details.append(email);
+            }
+            info.append(avatar, details);
+            if (userMenuItems.length) {
+                const moreIcon = document.createElement('span');
+                moreIcon.className = 'designbase-wc-sidebar__user-more';
+                moreIcon.setAttribute('aria-hidden', 'true');
+                moreIcon.append(createDbIcon('more-vertical', 16));
+                info.append(moreIcon);
+                info.setAttribute('aria-haspopup', 'menu');
+            }
+            info.addEventListener('click', () => {
+                if (!userMenuItems.length)
+                    return;
+                this.userMenuOpen = !this.userMenuOpen;
+                this.projectMenuOpen = false;
+                this.render();
+            });
+            user.append(info);
+            footer.append(user);
+        }
+        else if (userProfile && collapsed) {
+            const collapsedUser = document.createElement('div');
+            collapsedUser.className = [
+                'designbase-wc-sidebar__user-collapsed',
+                this.userMenuOpen && 'designbase-wc-sidebar__user-collapsed--open',
+            ]
+                .filter(Boolean)
+                .join(' ');
+            collapsedUser.setAttribute('role', 'button');
+            collapsedUser.setAttribute('tabindex', '0');
+            collapsedUser.setAttribute('aria-label', userProfile.name);
+            collapsedUser.setAttribute('aria-expanded', String(this.userMenuOpen));
+            if (userMenuItems.length)
+                collapsedUser.setAttribute('aria-haspopup', 'menu');
+            const avatar = document.createElement('db-avatar');
+            avatar.className = 'designbase-wc-sidebar__user-avatar-collapsed';
+            avatar.setAttribute('size', 's');
+            avatar.setAttribute('initials', userProfile.name);
+            avatar.setAttribute('alt', userProfile.name);
+            if (userProfile.avatar)
+                avatar.setAttribute('src', userProfile.avatar);
+            collapsedUser.append(avatar);
+            if (!this.userMenuOpen) {
+                const tooltip = document.createElement('span');
+                tooltip.className = 'designbase-wc-sidebar__item-tooltip';
+                tooltip.textContent = userProfile.name;
+                tooltip.setAttribute('role', 'tooltip');
+                collapsedUser.append(tooltip);
+            }
+            const dropdown = this.createUserDropdown(userMenuItems, true);
+            if (dropdown)
+                collapsedUser.append(dropdown);
+            collapsedUser.addEventListener('click', (event) => {
+                if (!userMenuItems.length)
+                    return;
+                if (event.target.closest('.designbase-wc-sidebar__user-dropdown'))
+                    return;
+                this.userMenuOpen = !this.userMenuOpen;
+                this.projectMenuOpen = false;
+                this.render();
+            });
+            footer.append(collapsedUser);
+        }
+        container.append(footer);
+        this.append(container);
+        this.renderNav();
+        this.renderBottomNav();
+    }
+}
+if (!customElements.get('db-sidebar')) {
+    customElements.define('db-sidebar', DbSidebar);
+}
+
+export { DbSidebar };