@designbasekorea/ui-wc 0.8.13 → 0.9.0

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

@@ -1 +1 @@
-import{createDbIcon as e,isDbIconName as t}from"./db-icons.js";import{sanitizeHref as s}from"../core/safe-url.js";import{SIDEBAR_CUSTOM_NAV_SLOTS as a,SIDEBAR_PANEL_MODES as i,SIDEBAR_SIZES as n,SIDEBAR_THEMES as r,SIDEBAR_POSITIONS as o,SIDEBAR_VARIANTS as c}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const d="240px";class DbSidebar extends HTMLElement{constructor(){super(...arguments),this.expandedItems=new Set,this.userMenuOpen=!1,this.projectMenuOpen=!1,this.flyoutItemId=null,this.userFlyoutItemId=null,this.flyoutCloseTimer=null,this.userFlyoutCloseTimer=null,this.outsideHandler=null,this.panelMediaQuery=null,this.panelMediaHandler=null,this.resolvedPanelMode="adjacent"}collectCustomNavSlots(){const e=new Map;return a.forEach(t=>{const s=Array.from(this.children).filter(e=>e instanceof HTMLElement&&e.getAttribute("slot")===t),a=Array.from(this.querySelectorAll(`[data-sidebar-slot="${t}"]`)).flatMap(e=>Array.from(e.children).filter(e=>e instanceof HTMLElement&&e.getAttribute("slot")===t));e.set(t,[...new Set([...s,...a])])}),e}createCustomNavSlot(e){const t=document.createElement("div");return t.className=["designbase-wc-sidebar__custom-slot",`designbase-wc-sidebar__custom-slot--${e}`].join(" "),t.dataset.sidebarSlot=e,t}projectCustomNavSlots(e){a.forEach(t=>{const s=this.querySelector(`[data-sidebar-slot="${t}"]`),a=e.get(t)??[];s&&0!==a.length?s.append(...a):s?.remove()})}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","update-banner","header-type","back-label","back-href","panels","settings-sections","active-panel","panel-mode","panel-width","panel-breakpoint","size","theme","variant","position","collapsed","collapsible","show-logo","logo-type","logo-text","full-height","shadow"]}connectedCallback(){this.seedExpanded(),this.bindPanelMediaQuery(),this.render(),this.bindOutsideClick()}disconnectedCallback(){this.unbindOutsideClick(),this.unbindPanelMediaQuery(),this.cancelFlyoutClose(),this.cancelUserFlyoutClose()}attributeChangedCallback(e,t,s){if(this.isConnected&&t!==s&&("default-expanded-ids"===e&&this.seedExpanded(),"collapsed"===e&&this.hasAttribute("collapsed")&&(this.userMenuOpen=!1,this.projectMenuOpen=!1,this.flyoutItemId=null,this.userFlyoutItemId=null,this.cancelFlyoutClose(),this.cancelUserFlyoutClose()),"panel-mode"!==e&&"panel-breakpoint"!==e||this.bindPanelMediaQuery(),this.render(),"active-panel"===e)){const e=this.getActivePanelConfig();this.dispatchEvent(new CustomEvent("db-panel-change",{bubbles:!0,composed:!0,detail:{panel:e?.id??"main",panelConfig:e,mode:this.resolvedPanelMode}}))}}bindPanelMediaQuery(){this.unbindPanelMediaQuery();const e=this.panelMode;if("auto"!==e)return void(this.resolvedPanelMode=e);if("undefined"==typeof window||"function"!=typeof window.matchMedia)return void(this.resolvedPanelMode="adjacent");const t=window.matchMedia(`(min-width: ${this.panelBreakpoint}px)`);this.panelMediaQuery=t,this.resolvedPanelMode=t.matches?"adjacent":"replace",this.panelMediaHandler=e=>{const t=e.matches?"adjacent":"replace";t!==this.resolvedPanelMode&&(this.resolvedPanelMode=t,this.render(),this.dispatchEvent(new CustomEvent("db-panel-mode-change",{bubbles:!0,composed:!0,detail:{mode:t}})))},t.addEventListener("change",this.panelMediaHandler)}unbindPanelMediaQuery(){this.panelMediaQuery&&this.panelMediaHandler&&this.panelMediaQuery.removeEventListener("change",this.panelMediaHandler),this.panelMediaQuery=null,this.panelMediaHandler=null}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))}get updateBanner(){return this.parseUpdateBanner()}set updateBanner(e){null==e?this.removeAttribute("update-banner"):this.setAttribute("update-banner","string"==typeof e?e:JSON.stringify(e))}get headerType(){return"back"===this.getAttribute("header-type")?"back":"default"}set headerType(e){this.setAttribute("header-type",e)}get backLabel(){return this.getAttribute("back-label")||"뒤로가기"}set backLabel(e){this.setAttribute("back-label",e)}get backHref(){return this.getAttribute("back-href")||""}set backHref(e){e?this.setAttribute("back-href",e):this.removeAttribute("back-href")}get panels(){return this.parsePanels()}set panels(e){this.setAttribute("panels","string"==typeof e?e:JSON.stringify(e))}get settingsSections(){return this.parseSettingsSections()}set settingsSections(e){this.setAttribute("settings-sections","string"==typeof e?e:JSON.stringify(e))}get activePanel(){const e=this.getAttribute("active-panel")||"main";return"main"===e?"main":this.findPanel(e)?e:"main"}set activePanel(e){const t=e&&"main"!==e&&this.findPanel(e)?e:"main";this.setAttribute("active-panel",t)}get panelMode(){const e=this.getAttribute("panel-mode")||"auto";return i.includes(e)?e:"auto"}set panelMode(e){this.setAttribute("panel-mode",i.includes(e)?e:"auto")}get panelWidth(){return this.normalizeCssLength(this.getAttribute("panel-width")||d)}set panelWidth(e){this.setAttribute("panel-width",this.normalizeCssLength(e))}get panelBreakpoint(){const e=Number(this.getAttribute("panel-breakpoint"));return Number.isFinite(e)&&e>0?e:1024}set panelBreakpoint(e){const t=Number.isFinite(e)&&e>0?Math.round(e):1024;this.setAttribute("panel-breakpoint",String(t))}normalizeCssLength(e){if("number"==typeof e)return`${Math.max(0,e)}px`;const t=String(e??"").trim();return t?/^-?\d+(?:\.\d+)?$/.test(t)?`${Math.max(0,Number(t))}px`:t:d}parseSettingsSections(){try{const e=JSON.parse(this.getAttribute("settings-sections")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parsePanels(){let e=[];const t=this.getAttribute("panels");if(t)try{const s=JSON.parse(t);Array.isArray(s)&&(e=s.filter(e=>Boolean(e&&"string"==typeof e.id&&e.id.trim())).map(e=>({...e,id:e.id.trim(),title:String(e.title||e.id).trim(),sections:Array.isArray(e.sections)?e.sections:[]})))}catch{e=[]}const s=this.parseSettingsSections();return s.length&&!e.some(e=>"settings"===e.id)&&e.push({id:"settings",title:"Settings",backLabel:this.backLabel,sections:s}),e}hasPanels(){return this.parsePanels().length>0}findPanel(e){return e&&"main"!==e?this.parsePanels().find(t=>t.id===e)??null:null}getActivePanelConfig(){return this.findPanel(this.getAttribute("active-panel")||"main")}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}}parseUpdateBanner(){const e=this.getAttribute("update-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,this.userFlyoutItemId=null,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.userFlyoutItemId=null,this.cancelUserFlyoutClose(),this.classList.remove("designbase-wc-sidebar--user-menu-open"),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 a=this.querySelector(".designbase-wc-sidebar__user-dropdown");return a&&(a.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)}cancelUserFlyoutClose(){this.userFlyoutCloseTimer&&(clearTimeout(this.userFlyoutCloseTimer),this.userFlyoutCloseTimer=null)}setUserFlyout(e){this.cancelUserFlyoutClose(),this.userFlyoutItemId=e,this.querySelectorAll(".designbase-wc-sidebar__user-menu-item").forEach(t=>{const s=Boolean(e&&t.dataset.itemId===e);t.classList.toggle("designbase-wc-sidebar__user-menu-item--flyout-active",s),t.querySelector(".designbase-wc-sidebar__user-menu-trigger")?.setAttribute("aria-expanded",String(s));const a=t.querySelector(".designbase-wc-sidebar__user-flyout");a&&(a.hidden=!s)})}scheduleUserFlyoutClose(){this.cancelUserFlyoutClose(),this.userFlyoutCloseTimer=setTimeout(()=>{this.userFlyoutCloseTimer=null,this.setUserFlyout(null)},120)}syncHostClasses(){const e=this.getAttribute("size")||"m",t=this.getAttribute("theme")||"default",s=this.getAttribute("variant")||"default",a=this.getAttribute("position")||"left",i=this.getActivePanelConfig(),d=Boolean(i),l=this.panelWidth;this.style.setProperty("--db-sidebar-panel-width",l),this.className=["designbase-wc-sidebar",`designbase-wc-sidebar--${n.includes(e)?e:"m"}`,`designbase-wc-sidebar--${r.includes(t)?t:"default"}`,`designbase-wc-sidebar--${o.includes(a)?a:"left"}`,`designbase-wc-sidebar--panel-${this.resolvedPanelMode}`,c.includes(s)&&"wrapper"===s&&"designbase-wc-sidebar--wrapper",this.hasAttribute("collapsed")&&"designbase-wc-sidebar--collapsed",this.hasAttribute("full-height")&&"designbase-wc-sidebar--full-height",this.hasAttribute("shadow")&&"designbase-wc-sidebar--shadow",this.userMenuOpen&&"designbase-wc-sidebar--user-menu-open",("back"===this.headerType||d&&"replace"===this.resolvedPanelMode)&&"designbase-wc-sidebar--header-back",d&&"designbase-wc-sidebar--panel-open",this.hasPanels()&&"designbase-wc-sidebar--has-panels"].filter(Boolean).join(" ")}navigateToPanel(e){const t="main"!==e&&e?this.findPanel(e)?.id:"main";t&&this.activePanel!==t&&("main"!==t&&"replace"===this.resolvedPanelMode&&this.hasAttribute("collapsed")&&this.removeAttribute("collapsed"),this.setAttribute("active-panel",t))}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}}))}dispatchBackClick(){const e=this.getActivePanelConfig();e&&this.navigateToPanel("main");const t=new CustomEvent("db-back-click",{bubbles:!0,composed:!0,cancelable:!0,detail:{label:e?.backLabel||this.backLabel,href:this.backHref,panel:e}});this.dispatchEvent(t);const a=s(this.backHref,"");t.defaultPrevented||e||!a||"back"!==this.headerType||window.location.assign(a)}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}}))}dispatchUpdateCtaClick(e){this.dispatchEvent(new CustomEvent("db-update-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("type","text"),t.textContent=e.badge,t}createProjectSelector(t){if(!this.hasAttribute("projects"))return null;const a=this.parseProjects(),i=0===a.length,n=this.getSelectedProject(),r=document.createElement("div");r.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 o=this.getAttribute("project-section-label");if(!t&&o&&o.trim()){const e=document.createElement("div");e.className="designbase-wc-sidebar__project-section-label",e.textContent=o.trim(),r.append(e)}const c=document.createElement("button");if(c.type="button",c.className="designbase-wc-sidebar__project-trigger",c.setAttribute("aria-haspopup","menu"),c.setAttribute("aria-expanded",String(this.projectMenuOpen)),i||!n){if(c.setAttribute("aria-label",this.projectEmptyTriggerLabel),c.append(this.createProjectEmptyMark(t?"m":"s")),!t){const e=document.createElement("span");e.className="designbase-wc-sidebar__project-label",e.textContent=this.projectEmptyTriggerLabel,c.append(e)}}else if(c.setAttribute("aria-label",n.label),c.append(this.createProjectAvatar(n,t?"m":"s")),!t){const e=document.createElement("span");e.className="designbase-wc-sidebar__project-label",e.textContent=n.label,c.append(e)}const d=document.createElement("span");if(d.className="designbase-wc-sidebar__project-chevron",d.setAttribute("aria-hidden","true"),d.append(e("chevron-down",14)),c.append(d),c.addEventListener("click",()=>{this.projectMenuOpen=!this.projectMenuOpen,this.userMenuOpen=!1,this.render()}),r.append(c),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",a.forEach(t=>{const s=document.createElement("li");s.className="designbase-wc-sidebar__project-option";const a=document.createElement("button");a.type="button",a.className=["designbase-wc-sidebar__project-option-btn",n&&t.id===n.id&&"designbase-wc-sidebar__project-option-btn--active"].filter(Boolean).join(" "),a.setAttribute("role","menuitem"),a.append(this.createProjectAvatar(t,"s"));const i=document.createElement("span");i.className="designbase-wc-sidebar__project-option-label",i.textContent=t.label,a.append(i);const r=this.createProjectBadge(t);r&&a.append(r),a.addEventListener("click",()=>{this.projectMenuOpen=!1,this.setAttribute("selected-project-id",t.id),this.dispatchProjectChange(t),this.render()}),s.append(a),e.append(s)}),t.append(e)}const o=document.createElement("button");o.type="button",o.className="designbase-wc-sidebar__project-manage",o.setAttribute("role","menuitem"),o.append(e("plus",14));const c=document.createElement("span");c.textContent=this.projectManageLabel,o.append(c),o.addEventListener("click",()=>{this.projectMenuOpen=!1;const e=this.projectManageHref,t=s(e,"");t&&window.location.assign(t),this.dispatchProjectManage(),this.render()}),t.append(o),r.append(t)}return r}createFlyout(e,t){const a=this.getAttribute("position")||"left",i=document.createElement("div");i.className=["designbase-wc-sidebar__flyout","right"===a&&"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 n=document.createElement("div");n.className="designbase-wc-sidebar__flyout-title",n.textContent=e.label,i.append(n);const r=document.createElement("ul");return r.className="designbase-wc-sidebar__flyout-list",(e.children||[]).forEach(e=>{const a=document.createElement("li");a.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);const n=s(e.href,"");n&&i.setAttribute("href",n),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())}),a.append(i),r.append(a)}),i.append(r),i}createSidebarMenuItem(e,t,a=0){const i=Boolean(e.children?.length),n=this.expandedItems.has(e.id),r=this.hasAttribute("collapsed"),o=r&&i,c=document.createElement("li");c.className=["designbase-wc-sidebar__item",o&&this.flyoutItemId===e.id&&"designbase-wc-sidebar__item--flyout-active"].filter(Boolean).join(" "),o&&(c.addEventListener("mouseenter",()=>this.showFlyout(e.id)),c.addEventListener("mouseleave",()=>this.scheduleFlyoutClose()));const d=document.createElement("db-menu-item");d.setAttribute("data-item-id",e.id),d.setAttribute("label",e.label),d.setAttribute("type","block"),d.setAttribute("menu-style","accordion"),d.setAttribute("size",t),d.setAttribute("depth",String(a));const l=s(e.href,"");if(l&&d.setAttribute("href",l),e.icon&&d.setAttribute("icon",e.icon),(e.active||e.openPanel&&e.openPanel===this.activePanel)&&d.setAttribute("active",""),e.disabled&&d.setAttribute("disabled",""),void 0!==e.badge&&d.setAttribute("badge",String(e.badge)),e.badgeColor&&d.setAttribute("badge-color",e.badgeColor),i&&!o&&(d.setAttribute("expandable",""),d.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})),n&&!r&&d.setAttribute("expanded","")),d.addEventListener("db-click",t=>{if(!e.disabled){if(i&&!r){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(o)return this.closeOverlayMenus(),void this.showFlyout(e.id);if(this.closeOverlayMenus(),e.openPanel&&this.findPanel(e.openPanel))return this.dispatchItemClick(e),void this.navigateToPanel(e.openPanel);this.dispatchItemClick(e)}}),d.addEventListener("db-child-click",e=>{const t=e.detail;this.dispatchItemClick(t.child)}),c.append(d),r&&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"),c.append(s)}if(r&&!i){const t=document.createElement("span");t.className="designbase-wc-sidebar__item-tooltip",t.textContent=e.label,t.setAttribute("role","tooltip"),c.append(t)}return o&&this.flyoutItemId===e.id&&c.append(this.createFlyout(e,t)),c}renderSectionList(e,t,s){const a=document.createDocumentFragment();return e.forEach(e=>{const i=document.createElement("div");if(i.className=["designbase-wc-sidebar__section",e.gap&&`designbase-wc-sidebar__section--gap-${e.gap}`].filter(Boolean).join(" "),!s&&e.title){const t=document.createElement("div");t.className="designbase-wc-sidebar__section-title",t.textContent=e.title,i.append(t)}const n=document.createElement("ul");n.className="designbase-wc-sidebar__nav-list",e.items.forEach(e=>n.append(this.createSidebarMenuItem(e,t))),i.append(n),a.append(i)}),a}renderNav(){const e=this.getAttribute("size")||"m",t=this.hasAttribute("collapsed"),s=this.querySelector('.designbase-wc-sidebar__nav[data-panel-nav="main"]');s&&s.replaceChildren(this.renderSectionList(this.parseSections(),e,t),this.createCustomNavSlot("nav"));const a=this.getActivePanelConfig(),i=this.querySelector('.designbase-wc-sidebar__nav[data-panel-nav="panel"]');i&&a&&i.replaceChildren(this.renderSectionList(a.sections,e,!1))}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(a,i=!1){if(!a.length)return null;const n=this.getAttribute("position")||"left",r=document.createElement("div");r.className=["designbase-wc-sidebar__user-dropdown",i&&"designbase-wc-sidebar__user-dropdown--collapsed"].filter(Boolean).join(" "),r.setAttribute("role","menu"),r.setAttribute("aria-label","사용자 메뉴"),r.hidden=!this.userMenuOpen,r.addEventListener("keydown",e=>{"Escape"===e.key&&(e.stopPropagation(),this.userFlyoutItemId?this.setUserFlyout(null):(this.userMenuOpen=!1,this.render()))});const o=document.createElement("ul");return o.className="designbase-wc-sidebar__user-menu",a.forEach(a=>{const i=Boolean(a.children?.length),r=document.createElement("li");r.dataset.itemId=a.id,r.className=["designbase-wc-sidebar__user-menu-item",a.dividerBefore&&"designbase-wc-sidebar__user-menu-item--divider",a.disabled&&"designbase-wc-sidebar__user-menu-item--disabled",i&&"designbase-wc-sidebar__user-menu-item--has-children"].filter(Boolean).join(" ");const c=document.createElement("button");if(c.type="button",c.className="designbase-wc-sidebar__user-menu-trigger",c.setAttribute("role","menuitem"),c.disabled=Boolean(a.disabled),a.icon&&t(a.icon)){const t=document.createElement("span");t.className="designbase-wc-sidebar__user-menu-icon",t.setAttribute("aria-hidden","true"),t.append(e(a.icon,16)),c.append(t)}const d=document.createElement("span");if(d.className="designbase-wc-sidebar__user-menu-label",d.textContent=a.label,c.append(d),a.value){const e=document.createElement("span");e.className="designbase-wc-sidebar__user-menu-value",e.textContent=a.value,c.append(e)}if(i){const i=document.createElement("span");i.className="designbase-wc-sidebar__user-menu-chevron",i.setAttribute("aria-hidden","true"),i.append(e("right"===n?"chevron-left":"chevron-right",16)),c.append(i),c.setAttribute("aria-haspopup","menu"),c.setAttribute("aria-expanded",String(this.userFlyoutItemId===a.id));const openFlyout=()=>this.setUserFlyout(a.id);r.addEventListener("mouseenter",openFlyout),r.addEventListener("mouseleave",()=>this.scheduleUserFlyoutClose()),r.addEventListener("focusin",openFlyout),r.addEventListener("focusout",e=>{const t=e.relatedTarget;t&&r.contains(t)||this.scheduleUserFlyoutClose()}),c.addEventListener("click",openFlyout);const o=document.createElement("div");o.className=["designbase-wc-sidebar__user-flyout","right"===n&&"designbase-wc-sidebar__user-flyout--align-left"].filter(Boolean).join(" "),o.setAttribute("role","menu"),o.setAttribute("aria-label",`${a.label} 하위 메뉴`),o.hidden=this.userFlyoutItemId!==a.id,o.addEventListener("mouseenter",()=>this.cancelUserFlyoutClose()),o.addEventListener("mouseleave",()=>this.scheduleUserFlyoutClose());const d=document.createElement("ul");d.className="designbase-wc-sidebar__user-flyout-list",(a.children||[]).forEach(a=>{const i=document.createElement("li");i.className="designbase-wc-sidebar__user-flyout-item";const n=document.createElement("button");if(n.type="button",n.className=["designbase-wc-sidebar__user-menu-trigger","designbase-wc-sidebar__user-flyout-trigger",a.selected&&"designbase-wc-sidebar__user-flyout-trigger--selected"].filter(Boolean).join(" "),n.setAttribute("role","menuitemradio"),n.setAttribute("aria-checked",String(Boolean(a.selected))),n.disabled=Boolean(a.disabled),a.icon&&t(a.icon)){const t=document.createElement("span");t.className="designbase-wc-sidebar__user-menu-icon",t.setAttribute("aria-hidden","true"),t.append(e(a.icon,16)),n.append(t)}const r=document.createElement("span");if(r.className="designbase-wc-sidebar__user-menu-label",r.textContent=a.label,n.append(r),a.selected){const t=document.createElement("span");t.className="designbase-wc-sidebar__user-menu-check",t.setAttribute("aria-hidden","true"),t.append(e("done",16)),n.append(t)}n.addEventListener("click",()=>{if(a.disabled)return;this.userFlyoutItemId=null,this.userMenuOpen=!1,this.dispatchUserMenuItemClick(a);const e=s(a.href,"");e&&window.location.assign(e),this.render()}),i.append(n),d.append(i)}),o.append(d),r.append(c,o)}else c.addEventListener("click",()=>{if(a.disabled)return;this.userFlyoutItemId=null,this.userMenuOpen=!1,this.dispatchUserMenuItemClick(a);const e=s(a.href,"");e&&window.location.assign(e),this.render()}),r.append(c);o.append(r)}),r.append(o),r}createUpdateBanner(e){if("back"===this.headerType)return null;const t=this.parseUpdateBanner();if(!t)return null;if(e)return null;const a=document.createElement("div");a.className="designbase-wc-sidebar__update";const i=document.createElement("db-banner");return i.className="designbase-wc-sidebar__update-banner",i.setAttribute("size","s"),i.setAttribute("variant",t.variant||"outline"),i.setAttribute("title",t.title),t.description&&i.setAttribute("description",t.description),t.icon&&i.setAttribute("icon",t.icon),i.setAttribute("clickable",""),i.setAttribute("aria-label",t.ctaLabel||t.title),i.addEventListener("db-click",()=>{const e=s(t.ctaHref,"");e&&window.location.assign(e),this.dispatchUpdateCtaClick(t)}),a.append(i),a}createPromoBanner(a){if("back"===this.headerType)return null;const i=this.parsePromoBanner();if(!i)return null;if(a){const s=document.createElement("button");s.type="button",s.className="designbase-wc-sidebar__promo-collapsed",s.setAttribute("aria-label",i.ctaLabel||i.title);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","40"),a.setAttribute("speed","4000"),a.setAttribute("colors",JSON.stringify(["#c7d2fe","#ddd6fe","#fbcfe8"])),s.append(a),s.append(e(i.icon&&t(i.icon)?i.icon:"sparkle",18)),s.addEventListener("click",()=>this.dispatchPromoCtaClick(i));const n=document.createElement("span");n.className="designbase-wc-sidebar__item-tooltip",n.textContent=i.title,n.setAttribute("role","tooltip");const r=document.createElement("div");return r.className="designbase-wc-sidebar__promo-collapsed-wrap",r.append(s,n),r}const n=document.createElement("div");n.className="designbase-wc-sidebar__promo";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","60"),r.setAttribute("speed","5000"),r.setAttribute("colors",JSON.stringify(["#c7d2fe","#ddd6fe","#fbcfe8","#bfdbfe"])),n.append(r);const o=document.createElement("div");o.className="designbase-wc-sidebar__promo-content";const c=document.createElement("div");c.className="designbase-wc-sidebar__promo-title-row";const d=document.createElement("span");d.className="designbase-wc-sidebar__promo-icon",d.setAttribute("aria-hidden","true"),d.append(e(i.icon&&t(i.icon)?i.icon:"sparkle",16));const l=document.createElement("div");if(l.className="designbase-wc-sidebar__promo-title",l.textContent=i.title,c.append(d,l),o.append(c),i.description){const e=document.createElement("div");e.className="designbase-wc-sidebar__promo-desc",e.textContent=i.description,o.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",()=>{const e=s(i.ctaHref,"");e&&window.location.assign(e),this.dispatchPromoCtaClick(i)}),o.append(e)}return n.append(o),n}createMainHeader(t){const{size:s,collapsible:a,showLogo:i,collapsed:n}=t,r="back"===this.headerType,o="l"===s?"m":"s"===s?"xs":"s";if(!r&&!a&&(!i||n))return null;const c=document.createElement("div");if(c.className=["designbase-wc-sidebar__header",(n||!i)&&!r&&"designbase-wc-sidebar__header--collapsed-only",r&&"designbase-wc-sidebar__header--back"].filter(Boolean).join(" "),r){const t=document.createElement("button");if(t.type="button",t.className=["designbase-wc-sidebar__back",n&&"designbase-wc-sidebar__back--collapsed"].filter(Boolean).join(" "),t.setAttribute("aria-label",this.backLabel),t.append(e("chevron-left",18)),!n){const e=document.createElement("span");e.textContent=this.backLabel,t.append(e)}t.addEventListener("click",()=>this.dispatchBackClick()),c.append(t)}else if(!n&&i){const e=document.createElement("div");e.className="designbase-wc-sidebar__logo";const t=this.getAttribute("logo-type")||"designbase",s=this.getAttribute("logo-text")||"";if("custom"===t&&s){const t=document.createElement("span");t.className="designbase-wc-sidebar__logo-text",t.textContent=s,e.append(t)}else{const a=document.createElement("db-logo");a.setAttribute("type",t),a.setAttribute("size",o),s&&a.setAttribute("text",s),e.append(a)}e.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-logo-click",{bubbles:!0,composed:!0}))}),c.append(e)}if(a&&!r){const e=document.createElement("db-button");e.className="designbase-wc-sidebar__toggle",e.setAttribute("variant","tertiary"),e.setAttribute("size","s"),e.setAttribute("icon-only",""),e.setAttribute("start-icon",n?"arrow-bar-right":"arrow-bar-left"),e.setAttribute("aria-label",n?"사이드바 펼치기":"사이드바 접기"),e.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}}))}),c.append(e)}return c}createPanelHeader(t){const s="replace"===this.resolvedPanelMode,a=document.createElement("div");if(a.className=["designbase-wc-sidebar__panel-header",s&&"designbase-wc-sidebar__panel-header--replace"].filter(Boolean).join(" "),s){const s=document.createElement("button");s.type="button",s.className="designbase-wc-sidebar__panel-back",s.setAttribute("aria-label",t.backLabel||this.backLabel),s.append(e("chevron-left",18)),s.addEventListener("click",()=>this.dispatchBackClick()),a.append(s)}const i=document.createElement("div");i.className="designbase-wc-sidebar__panel-heading";const n=document.createElement("div");if(n.className="designbase-wc-sidebar__panel-title",n.textContent=t.title,i.append(n),t.description){const e=document.createElement("div");e.className="designbase-wc-sidebar__panel-description",e.textContent=t.description,i.append(e)}return a.append(i),a}createNavWrapper(e){const{mode:t,collapsed:s,includeProjects:a,includeBottom:i,panel:n}=e,r=document.createElement("div");if(r.className="designbase-wc-sidebar__nav-wrapper",a){const e=this.createProjectSelector(s);e&&r.append(e)}"main"===t&&r.append(this.createCustomNavSlot("nav-top"));const o=document.createElement("nav");if(o.className="designbase-wc-sidebar__nav",o.setAttribute("data-panel-nav",t),n&&(o.dataset.panelId=n.id),o.setAttribute("aria-label",n?.ariaLabel||n?.title||"주 메뉴"),r.append(o),"main"===t&&r.append(this.createCustomNavSlot("nav-bottom")),i){const e=document.createElement("nav");e.className="designbase-wc-sidebar__bottom-nav",e.setAttribute("aria-label","하단 메뉴"),r.append(e)}return r}createFooter(t){const{collapsed:s,userProfile:a,userMenuItems:i}=t,n=document.createElement("div");n.className="designbase-wc-sidebar__footer";const r=this.createUpdateBanner(s);r&&n.append(r);const o=this.createPromoBanner(s);if(o&&n.append(o),a&&!s){const t=document.createElement("div");t.className="designbase-wc-sidebar__user";const s=this.createUserDropdown(i);s&&t.append(s);const r=document.createElement("div");r.className="designbase-wc-sidebar__user-info",r.setAttribute("role","button"),r.setAttribute("tabindex","0"),r.setAttribute("aria-expanded",String(this.userMenuOpen));const o=document.createElement("db-avatar");o.className="designbase-wc-sidebar__user-avatar",o.setAttribute("size","s"),o.setAttribute("initials",a.name),o.setAttribute("alt",a.name),a.avatar&&o.setAttribute("src",a.avatar);const c=document.createElement("div");c.className="designbase-wc-sidebar__user-details";const d=document.createElement("div");if(d.className="designbase-wc-sidebar__user-name",d.textContent=a.name,c.append(d),a.email){const e=document.createElement("div");e.className="designbase-wc-sidebar__user-email",e.textContent=a.email,c.append(e)}if(r.append(o,c),i.length){const t=document.createElement("span");t.className="designbase-wc-sidebar__user-more",t.setAttribute("aria-hidden","true"),t.append(e("more-vertical",16)),r.append(t),r.setAttribute("aria-haspopup","menu")}r.addEventListener("click",()=>{i.length&&(this.userMenuOpen=!this.userMenuOpen,this.userFlyoutItemId=null,this.cancelUserFlyoutClose(),this.projectMenuOpen=!1,this.render())}),r.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),r.click())}),t.append(r),n.append(t)}else if(a&&s){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)),i.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(i,!0);s&&e.append(s),e.addEventListener("click",e=>{i.length&&(e.target.closest(".designbase-wc-sidebar__user-dropdown")||(this.userMenuOpen=!this.userMenuOpen,this.userFlyoutItemId=null,this.cancelUserFlyoutClose(),this.projectMenuOpen=!1,this.render()))}),e.addEventListener("keydown",t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),e.click())}),n.append(e)}return n}render(){const e=this.getActivePanelConfig();this.syncHostClasses(),this.setAttribute("role","complementary"),this.setAttribute("aria-label","사이드바 네비게이션");const t=this.getAttribute("size")||"m",s="false"!==this.getAttribute("collapsible"),a="false"!==this.getAttribute("show-logo"),i=this.hasAttribute("collapsed"),n=this.parseUserProfile(),r=this.parseUserMenuItems(),o=this.parseBottomSections(),c=this.collectCustomNavSlots(),d=Boolean(e),l="replace"===this.resolvedPanelMode;this.replaceChildren();const u=document.createElement("div");u.className="designbase-wc-sidebar__container";const b=document.createElement("div");b.className="designbase-wc-sidebar__panel-viewport";const p=document.createElement("div");p.className="designbase-wc-sidebar__panel-track",p.dataset.active=d&&l?"main":d?"panel":"main";const m=document.createElement("div");m.className=["designbase-wc-sidebar__panel-slide","designbase-wc-sidebar__panel-slide--main"].join(" "),m.dataset.panel="main";const h=d&&l;m.toggleAttribute("inert",h),m.setAttribute("aria-hidden",String(h));const g=this.createMainHeader({size:t,collapsible:s,showLogo:a,collapsed:i});if(g&&m.append(g),m.append(this.createNavWrapper({mode:"main",collapsed:i,includeProjects:"back"!==this.headerType,includeBottom:o.length>0})),m.append(this.createFooter({collapsed:i,userProfile:n,userMenuItems:r})),p.append(m),e){const t=document.createElement("div");t.className=["designbase-wc-sidebar__panel-slide","designbase-wc-sidebar__panel-slide--secondary"].join(" "),t.dataset.panel=e.id,t.setAttribute("aria-hidden","false"),t.append(this.createPanelHeader(e)),t.append(this.createNavWrapper({mode:"panel",collapsed:!1,includeProjects:!1,includeBottom:!1,panel:e})),p.append(t)}b.append(p),u.append(b),this.append(u),this.renderNav(),this.renderBottomNav(),this.projectCustomNavSlots(c),d&&l&&requestAnimationFrame(()=>{this.isConnected&&this.activePanel===e?.id&&(p.dataset.active="panel")})}}customElements.get("db-sidebar")||customElements.define("db-sidebar",DbSidebar);export{DbSidebar};
+import{createDbIcon as e,isDbIconName as t}from"./db-icons.js";import{sanitizeHref as s}from"../core/safe-url.js";import{SIDEBAR_CUSTOM_NAV_SLOTS as i,SIDEBAR_PANEL_MODES as a,SIDEBAR_TYPES as n,SIDEBAR_SIZES as r,SIDEBAR_THEMES as d,SIDEBAR_POSITIONS as o,SIDEBAR_VARIANTS as c}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const l="240px";class DbSidebar extends HTMLElement{constructor(){super(...arguments),this.expandedItems=new Set,this.userMenuOpen=!1,this.projectMenuOpen=!1,this.flyoutItemId=null,this.userFlyoutItemId=null,this.flyoutCloseTimer=null,this.userFlyoutCloseTimer=null,this.outsideHandler=null,this.panelMediaQuery=null,this.panelMediaHandler=null,this.resolvedPanelMode="adjacent"}collectCustomNavSlots(){const e=new Map;return i.forEach(t=>{const s=Array.from(this.children).filter(e=>e instanceof HTMLElement&&e.getAttribute("slot")===t),i=Array.from(this.querySelectorAll(`[data-sidebar-slot="${t}"]`)).flatMap(e=>Array.from(e.children).filter(e=>e instanceof HTMLElement&&e.getAttribute("slot")===t));e.set(t,[...new Set([...s,...i])])}),e}createCustomNavSlot(e){const t=document.createElement("div");return t.className=["designbase-wc-sidebar__custom-slot",`designbase-wc-sidebar__custom-slot--${e}`].join(" "),t.dataset.sidebarSlot=e,t}projectCustomNavSlots(e){i.forEach(t=>{const s=this.querySelector(`[data-sidebar-slot="${t}"]`),i=e.get(t)??[];s&&0!==i.length?s.append(...i):s?.remove()})}static get observedAttributes(){return["type","logo-src","logo-alt","items","sections","user-menu-items","user-profile","default-expanded-ids","expanded-ids","accordion-mode","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","update-banner","header-type","back-label","back-href","panels","settings-sections","active-panel","panel-mode","panel-width","panel-breakpoint","size","theme","variant","position","collapsed","collapsible","show-logo","logo-type","logo-text","full-height","shadow"]}connectedCallback(){this.seedExpanded(),this.bindPanelMediaQuery(),this.render(),this.bindOutsideClick()}disconnectedCallback(){this.unbindOutsideClick(),this.unbindPanelMediaQuery(),this.cancelFlyoutClose(),this.cancelUserFlyoutClose()}attributeChangedCallback(e,t,s){if(this.isConnected&&t!==s){if("default-expanded-ids"===e||"expanded-ids"===e||"accordion-mode"===e)return this.seedExpanded(),void this.syncAccordionState();if("collapsed"===e&&this.hasAttribute("collapsed")&&(this.userMenuOpen=!1,this.projectMenuOpen=!1,this.flyoutItemId=null,this.userFlyoutItemId=null,this.cancelFlyoutClose(),this.cancelUserFlyoutClose()),"panel-mode"!==e&&"panel-breakpoint"!==e||this.bindPanelMediaQuery(),this.render(),"active-panel"===e){const e=this.getActivePanelConfig();this.dispatchEvent(new CustomEvent("db-panel-change",{bubbles:!0,composed:!0,detail:{panel:e?.id??"main",panelConfig:e,mode:this.resolvedPanelMode}}))}}}bindPanelMediaQuery(){this.unbindPanelMediaQuery();const e=this.panelMode;if("auto"!==e)return void(this.resolvedPanelMode=e);if("undefined"==typeof window||"function"!=typeof window.matchMedia)return void(this.resolvedPanelMode="adjacent");const t=window.matchMedia(`(min-width: ${this.panelBreakpoint}px)`);this.panelMediaQuery=t,this.resolvedPanelMode=t.matches?"adjacent":"replace",this.panelMediaHandler=e=>{const t=e.matches?"adjacent":"replace";t!==this.resolvedPanelMode&&(this.resolvedPanelMode=t,this.render(),this.dispatchEvent(new CustomEvent("db-panel-mode-change",{bubbles:!0,composed:!0,detail:{mode:t}})))},t.addEventListener("change",this.panelMediaHandler)}unbindPanelMediaQuery(){this.panelMediaQuery&&this.panelMediaHandler&&this.panelMediaQuery.removeEventListener("change",this.panelMediaHandler),this.panelMediaQuery=null,this.panelMediaHandler=null}seedExpanded(){try{const e=JSON.parse(this.getAttribute("expanded-ids")??this.getAttribute("default-expanded-ids")??"[]"),t=Array.isArray(e)?[...new Set(e.filter(e=>"string"==typeof e))]:[];this.expandedItems=new Set("single"===this.accordionMode?t.slice(0,1):t)}catch{this.expandedItems=new Set}}get expandedIds(){return[...this.expandedItems]}set expandedIds(e){this.setAttribute("expanded-ids","string"==typeof e?e:JSON.stringify(e)),this.isConnected||this.seedExpanded()}get accordionMode(){return"multiple"===this.getAttribute("accordion-mode")?"multiple":"single"}set accordionMode(e){this.setAttribute("accordion-mode",e)}get hideExpandIcon(){return this.hasAttribute("hide-expand-icon")&&"false"!==this.getAttribute("hide-expand-icon")}set hideExpandIcon(e){this.toggleAttribute("hide-expand-icon",e)}get showDepthGuide(){return this.hasAttribute("show-depth-guide")&&"false"!==this.getAttribute("show-depth-guide")}set showDepthGuide(e){this.toggleAttribute("show-depth-guide",e)}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))}get updateBanner(){return this.parseUpdateBanner()}set updateBanner(e){null==e?this.removeAttribute("update-banner"):this.setAttribute("update-banner","string"==typeof e?e:JSON.stringify(e))}get headerType(){return"back"===this.getAttribute("header-type")?"back":"default"}set headerType(e){this.setAttribute("header-type",e)}get backLabel(){return this.getAttribute("back-label")||"뒤로가기"}set backLabel(e){this.setAttribute("back-label",e)}get backHref(){return this.getAttribute("back-href")||""}set backHref(e){e?this.setAttribute("back-href",e):this.removeAttribute("back-href")}get panels(){return this.parsePanels()}set panels(e){this.setAttribute("panels","string"==typeof e?e:JSON.stringify(e))}get settingsSections(){return this.parseSettingsSections()}set settingsSections(e){this.setAttribute("settings-sections","string"==typeof e?e:JSON.stringify(e))}get activePanel(){const e=this.getAttribute("active-panel")||"main";return"main"===e?"main":this.findPanel(e)?e:"main"}set activePanel(e){const t=e&&"main"!==e&&this.findPanel(e)?e:"main";this.setAttribute("active-panel",t)}get panelMode(){const e=this.getAttribute("panel-mode")||"auto";return a.includes(e)?e:"auto"}set panelMode(e){this.setAttribute("panel-mode",a.includes(e)?e:"auto")}get panelWidth(){return this.normalizeCssLength(this.getAttribute("panel-width")||l)}set panelWidth(e){this.setAttribute("panel-width",this.normalizeCssLength(e))}get panelBreakpoint(){const e=Number(this.getAttribute("panel-breakpoint"));return Number.isFinite(e)&&e>0?e:1024}set panelBreakpoint(e){const t=Number.isFinite(e)&&e>0?Math.round(e):1024;this.setAttribute("panel-breakpoint",String(t))}normalizeCssLength(e){if("number"==typeof e)return`${Math.max(0,e)}px`;const t=String(e??"").trim();return t?/^-?\d+(?:\.\d+)?$/.test(t)?`${Math.max(0,Number(t))}px`:t:l}parseSettingsSections(){try{const e=JSON.parse(this.getAttribute("settings-sections")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parsePanels(){let e=[];const t=this.getAttribute("panels");if(t)try{const s=JSON.parse(t);Array.isArray(s)&&(e=s.filter(e=>Boolean(e&&"string"==typeof e.id&&e.id.trim())).map(e=>({...e,id:e.id.trim(),title:String(e.title||e.id).trim(),sections:Array.isArray(e.sections)?e.sections:[]})))}catch{e=[]}const s=this.parseSettingsSections();return s.length&&!e.some(e=>"settings"===e.id)&&e.push({id:"settings",title:"Settings",backLabel:this.backLabel,sections:s}),e}hasPanels(){return this.parsePanels().length>0}findPanel(e){return e&&"main"!==e?this.parsePanels().find(t=>t.id===e)??null:null}getActivePanelConfig(){return this.findPanel(this.getAttribute("active-panel")||"main")}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}}parseUpdateBanner(){const e=this.getAttribute("update-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,this.userFlyoutItemId=null,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.userFlyoutItemId=null,this.cancelUserFlyoutClose(),this.classList.remove("designbase-wc-sidebar--user-menu-open"),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}syncAccordionState(){[...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(e=>{const t=e.getAttribute("data-item-id");t&&(this.expandedItems.has(t)?e.setAttribute("expanded",""):e.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)}cancelUserFlyoutClose(){this.userFlyoutCloseTimer&&(clearTimeout(this.userFlyoutCloseTimer),this.userFlyoutCloseTimer=null)}setUserFlyout(e){this.cancelUserFlyoutClose(),this.userFlyoutItemId=e,this.querySelectorAll(".designbase-wc-sidebar__user-menu-item").forEach(t=>{const s=Boolean(e&&t.dataset.itemId===e);t.classList.toggle("designbase-wc-sidebar__user-menu-item--flyout-active",s),t.querySelector(".designbase-wc-sidebar__user-menu-trigger")?.setAttribute("aria-expanded",String(s));const i=t.querySelector(".designbase-wc-sidebar__user-flyout");i&&(i.hidden=!s)})}scheduleUserFlyoutClose(){this.cancelUserFlyoutClose(),this.userFlyoutCloseTimer=setTimeout(()=>{this.userFlyoutCloseTimer=null,this.setUserFlyout(null)},120)}get sidebarType(){const e=this.getAttribute("type");return n.find(t=>t===e)||"app"}syncHostClasses(){const e=this.getAttribute("size")||"m",t=this.getAttribute("theme")||"default",s=this.getAttribute("variant")||"default",i=this.getAttribute("position")||"left",a=this.getActivePanelConfig(),n=Boolean(a),l=this.panelWidth;this.style.setProperty("--db-sidebar-panel-width",l),this.className=["designbase-wc-sidebar",`designbase-wc-sidebar--type-${this.sidebarType}`,`designbase-wc-sidebar--${r.includes(e)?e:"m"}`,`designbase-wc-sidebar--${d.includes(t)?t:"default"}`,`designbase-wc-sidebar--${o.includes(i)?i:"left"}`,`designbase-wc-sidebar--panel-${this.resolvedPanelMode}`,c.includes(s)&&"wrapper"===s&&"designbase-wc-sidebar--wrapper",this.hasAttribute("collapsed")&&"designbase-wc-sidebar--collapsed",this.hasAttribute("full-height")&&"designbase-wc-sidebar--full-height",this.hasAttribute("shadow")&&"designbase-wc-sidebar--shadow",this.userMenuOpen&&"designbase-wc-sidebar--user-menu-open",("back"===this.headerType||n&&"replace"===this.resolvedPanelMode)&&"designbase-wc-sidebar--header-back",n&&"designbase-wc-sidebar--panel-open",this.hasPanels()&&"designbase-wc-sidebar--has-panels"].filter(Boolean).join(" ")}navigateToPanel(e){const t="main"!==e&&e?this.findPanel(e)?.id:"main";t&&this.activePanel!==t&&("main"!==t&&"replace"===this.resolvedPanelMode&&this.hasAttribute("collapsed")&&this.removeAttribute("collapsed"),this.setAttribute("active-panel",t))}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}}))}dispatchBackClick(){const e=this.getActivePanelConfig();e&&this.navigateToPanel("main");const t=new CustomEvent("db-back-click",{bubbles:!0,composed:!0,cancelable:!0,detail:{label:e?.backLabel||this.backLabel,href:this.backHref,panel:e}});this.dispatchEvent(t);const i=s(this.backHref,"");t.defaultPrevented||e||!i||"back"!==this.headerType||window.location.assign(i)}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}}))}dispatchUpdateCtaClick(e){this.dispatchEvent(new CustomEvent("db-update-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("type","text"),t.textContent=e.badge,t}createProjectSelector(t){if(!this.hasAttribute("projects"))return null;const i=this.parseProjects(),a=0===i.length,n=this.getSelectedProject(),r=document.createElement("div");r.className=["designbase-wc-sidebar__project-selector",t&&"designbase-wc-sidebar__project-selector--collapsed",this.projectMenuOpen&&"designbase-wc-sidebar__project-selector--open",a&&"designbase-wc-sidebar__project-selector--empty"].filter(Boolean).join(" ");const d=this.getAttribute("project-section-label");if(!t&&d&&d.trim()){const e=document.createElement("div");e.className="designbase-wc-sidebar__project-section-label",e.textContent=d.trim(),r.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)),a||!n){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",n.label),o.append(this.createProjectAvatar(n,t?"m":"s")),!t){const e=document.createElement("span");e.className="designbase-wc-sidebar__project-label",e.textContent=n.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()}),r.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),a){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",i.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",n&&t.id===n.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 r=this.createProjectBadge(t);r&&i.append(r),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 d=document.createElement("button");d.type="button",d.className="designbase-wc-sidebar__project-manage",d.setAttribute("role","menuitem"),d.append(e("plus",14));const o=document.createElement("span");o.textContent=this.projectManageLabel,d.append(o),d.addEventListener("click",()=>{this.projectMenuOpen=!1;const e=this.projectManageHref,t=s(e,"");t&&window.location.assign(t),this.dispatchProjectManage(),this.render()}),t.append(d),r.append(t)}return r}createFlyout(e,t){const i=this.getAttribute("position")||"left",a=document.createElement("div");a.className=["designbase-wc-sidebar__flyout","right"===i&&"designbase-wc-sidebar__flyout--align-left"].filter(Boolean).join(" "),a.setAttribute("role","menu"),a.setAttribute("aria-label",`${e.label} 하위 메뉴`),a.addEventListener("mouseenter",()=>this.cancelFlyoutClose()),a.addEventListener("mouseleave",()=>this.scheduleFlyoutClose());const n=document.createElement("div");n.className="designbase-wc-sidebar__flyout-title",n.textContent=e.label,a.append(n);const r=document.createElement("ul");return r.className="designbase-wc-sidebar__flyout-list",(e.children||[]).forEach(e=>{const i=document.createElement("li");i.className="designbase-wc-sidebar__flyout-item";const a=document.createElement("db-menu-item");a.setAttribute("label",e.label),a.setAttribute("type","block"),a.setAttribute("menu-style","dropdown"),a.setAttribute("size",t);const n=s(e.href,"");n&&a.setAttribute("href",n),e.active&&a.setAttribute("active",""),e.disabled&&a.setAttribute("disabled",""),void 0!==e.badge&&a.setAttribute("badge",String(e.badge)),e.badgeColor&&a.setAttribute("badge-color",e.badgeColor),a.addEventListener("db-click",()=>{e.disabled||(this.flyoutItemId=null,this.dispatchItemClick(e),this.renderNav(),this.renderBottomNav())}),i.append(a),r.append(i)}),a.append(r),a}createSidebarMenuItem(e,t,i=0){const a=Boolean(e.children?.length),n=this.expandedItems.has(e.id),r=this.hasAttribute("collapsed"),d=r&&a,o=document.createElement("li");o.className=["designbase-wc-sidebar__item",d&&this.flyoutItemId===e.id&&"designbase-wc-sidebar__item--flyout-active"].filter(Boolean).join(" "),d&&(o.addEventListener("mouseenter",()=>this.showFlyout(e.id)),o.addEventListener("mouseleave",()=>this.scheduleFlyoutClose()));const c=document.createElement("db-menu-item");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(i));const l=s(e.href,"");if(l&&c.setAttribute("href",l),e.icon&&c.setAttribute("icon",e.icon),(e.active||e.openPanel&&e.openPanel===this.activePanel)&&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),a&&!d&&(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,icon:e.icon})),n&&!r&&c.setAttribute("expanded","")),c.addEventListener("db-click",t=>{if(!e.disabled){if(a&&!r){const s=t.detail?.expanded??!this.expandedItems.has(e.id);return this.closeOverlayMenus(),s?("single"===this.accordionMode&&this.expandedItems.clear(),this.expandedItems.add(e.id)):this.expandedItems.delete(e.id),this.expandedIds=[...this.expandedItems],this.syncAccordionState(),this.dispatchEvent(new CustomEvent("db-expanded-change",{detail:{itemId:e.id,expanded:s,expandedIds:this.expandedIds},bubbles:!0,composed:!0})),void("app"!==this.sidebarType&&this.dispatchItemClick(e))}if(d)return this.closeOverlayMenus(),void this.showFlyout(e.id);if(this.closeOverlayMenus(),e.openPanel&&this.findPanel(e.openPanel))return this.dispatchItemClick(e),void this.navigateToPanel(e.openPanel);this.dispatchItemClick(e)}}),c.addEventListener("db-child-click",e=>{const t=e.detail;this.dispatchItemClick(t.child)}),o.append(c),r&&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(r&&!a){const t=document.createElement("span");t.className="designbase-wc-sidebar__item-tooltip",t.textContent=e.label,t.setAttribute("role","tooltip"),o.append(t)}return d&&this.flyoutItemId===e.id&&o.append(this.createFlyout(e,t)),o}renderSectionList(e,t,s){const i=document.createDocumentFragment();return e.forEach(e=>{const a=document.createElement("div");if(a.className=["designbase-wc-sidebar__section",e.gap&&`designbase-wc-sidebar__section--gap-${e.gap}`].filter(Boolean).join(" "),!s&&e.title){const t=document.createElement("div");t.className="designbase-wc-sidebar__section-title",t.textContent=e.title,a.append(t)}const n=document.createElement("ul");n.className="designbase-wc-sidebar__nav-list",e.items.forEach(e=>n.append(this.createSidebarMenuItem(e,t))),a.append(n),i.append(a)}),i}renderNav(){const e=this.getAttribute("size")||"m",t=this.hasAttribute("collapsed"),s=this.querySelector('.designbase-wc-sidebar__nav[data-panel-nav="main"]');s&&s.replaceChildren(this.renderSectionList(this.parseSections(),e,t),this.createCustomNavSlot("nav"));const i=this.getActivePanelConfig(),a=this.querySelector('.designbase-wc-sidebar__nav[data-panel-nav="panel"]');a&&i&&a.replaceChildren(this.renderSectionList(i.sections,e,!1))}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(i,a=!1){if(!i.length)return null;const n=this.getAttribute("position")||"left",r=document.createElement("div");r.className=["designbase-wc-sidebar__user-dropdown",a&&"designbase-wc-sidebar__user-dropdown--collapsed"].filter(Boolean).join(" "),r.setAttribute("role","menu"),r.setAttribute("aria-label","사용자 메뉴"),r.hidden=!this.userMenuOpen,r.addEventListener("keydown",e=>{"Escape"===e.key&&(e.stopPropagation(),this.userFlyoutItemId?this.setUserFlyout(null):(this.userMenuOpen=!1,this.render()))});const d=document.createElement("ul");return d.className="designbase-wc-sidebar__user-menu",i.forEach(i=>{const a=Boolean(i.children?.length),r=document.createElement("li");r.dataset.itemId=i.id,r.className=["designbase-wc-sidebar__user-menu-item",i.dividerBefore&&"designbase-wc-sidebar__user-menu-item--divider",i.disabled&&"designbase-wc-sidebar__user-menu-item--disabled",a&&"designbase-wc-sidebar__user-menu-item--has-children"].filter(Boolean).join(" ");const o=document.createElement("button");if(o.type="button",o.className="designbase-wc-sidebar__user-menu-trigger",o.setAttribute("role","menuitem"),o.disabled=Boolean(i.disabled),i.icon&&t(i.icon)){const t=document.createElement("span");t.className="designbase-wc-sidebar__user-menu-icon",t.setAttribute("aria-hidden","true"),t.append(e(i.icon,16)),o.append(t)}const c=document.createElement("span");if(c.className="designbase-wc-sidebar__user-menu-label",c.textContent=i.label,o.append(c),i.value){const e=document.createElement("span");e.className="designbase-wc-sidebar__user-menu-value",e.textContent=i.value,o.append(e)}if(a){const a=document.createElement("span");a.className="designbase-wc-sidebar__user-menu-chevron",a.setAttribute("aria-hidden","true"),a.append(e("right"===n?"chevron-left":"chevron-right",16)),o.append(a),o.setAttribute("aria-haspopup","menu"),o.setAttribute("aria-expanded",String(this.userFlyoutItemId===i.id));const openFlyout=()=>this.setUserFlyout(i.id);r.addEventListener("mouseenter",openFlyout),r.addEventListener("mouseleave",()=>this.scheduleUserFlyoutClose()),r.addEventListener("focusin",openFlyout),r.addEventListener("focusout",e=>{const t=e.relatedTarget;t&&r.contains(t)||this.scheduleUserFlyoutClose()}),o.addEventListener("click",openFlyout);const d=document.createElement("div");d.className=["designbase-wc-sidebar__user-flyout","right"===n&&"designbase-wc-sidebar__user-flyout--align-left"].filter(Boolean).join(" "),d.setAttribute("role","menu"),d.setAttribute("aria-label",`${i.label} 하위 메뉴`),d.hidden=this.userFlyoutItemId!==i.id,d.addEventListener("mouseenter",()=>this.cancelUserFlyoutClose()),d.addEventListener("mouseleave",()=>this.scheduleUserFlyoutClose());const c=document.createElement("ul");c.className="designbase-wc-sidebar__user-flyout-list",(i.children||[]).forEach(i=>{const a=document.createElement("li");a.className="designbase-wc-sidebar__user-flyout-item";const n=document.createElement("button");if(n.type="button",n.className=["designbase-wc-sidebar__user-menu-trigger","designbase-wc-sidebar__user-flyout-trigger",i.selected&&"designbase-wc-sidebar__user-flyout-trigger--selected"].filter(Boolean).join(" "),n.setAttribute("role","menuitemradio"),n.setAttribute("aria-checked",String(Boolean(i.selected))),n.disabled=Boolean(i.disabled),i.icon&&t(i.icon)){const t=document.createElement("span");t.className="designbase-wc-sidebar__user-menu-icon",t.setAttribute("aria-hidden","true"),t.append(e(i.icon,16)),n.append(t)}const r=document.createElement("span");if(r.className="designbase-wc-sidebar__user-menu-label",r.textContent=i.label,n.append(r),i.selected){const t=document.createElement("span");t.className="designbase-wc-sidebar__user-menu-check",t.setAttribute("aria-hidden","true"),t.append(e("done",16)),n.append(t)}n.addEventListener("click",()=>{if(i.disabled)return;this.userFlyoutItemId=null,this.userMenuOpen=!1,this.dispatchUserMenuItemClick(i);const e=s(i.href,"");e&&window.location.assign(e),this.render()}),a.append(n),c.append(a)}),d.append(c),r.append(o,d)}else o.addEventListener("click",()=>{if(i.disabled)return;this.userFlyoutItemId=null,this.userMenuOpen=!1,this.dispatchUserMenuItemClick(i);const e=s(i.href,"");e&&window.location.assign(e),this.render()}),r.append(o);d.append(r)}),r.append(d),r}createUpdateBanner(e){if("back"===this.headerType)return null;const t=this.parseUpdateBanner();if(!t)return null;if(e)return null;const i=document.createElement("div");i.className="designbase-wc-sidebar__update";const a=document.createElement("db-banner");return a.className="designbase-wc-sidebar__update-banner",a.setAttribute("size","s"),a.setAttribute("variant",t.variant||"outline"),a.setAttribute("title",t.title),t.description&&a.setAttribute("description",t.description),t.icon&&a.setAttribute("icon",t.icon),a.setAttribute("clickable",""),a.setAttribute("aria-label",t.ctaLabel||t.title),a.addEventListener("db-click",()=>{const e=s(t.ctaHref,"");e&&window.location.assign(e),this.dispatchUpdateCtaClick(t)}),i.append(a),i}createPromoBanner(i){if("back"===this.headerType)return null;const a=this.parsePromoBanner();if(!a)return null;if(i){const s=document.createElement("button");s.type="button",s.className="designbase-wc-sidebar__promo-collapsed",s.setAttribute("aria-label",a.ctaLabel||a.title);const i=document.createElement("db-animation-background");i.className="designbase-wc-sidebar__promo-bg",i.setAttribute("type","aurora"),i.setAttribute("theme","light"),i.setAttribute("intensity","subtle"),i.setAttribute("blur","40"),i.setAttribute("speed","4000"),i.setAttribute("colors",JSON.stringify(["#c7d2fe","#ddd6fe","#fbcfe8"])),s.append(i),s.append(e(a.icon&&t(a.icon)?a.icon:"sparkle",18)),s.addEventListener("click",()=>this.dispatchPromoCtaClick(a));const n=document.createElement("span");n.className="designbase-wc-sidebar__item-tooltip",n.textContent=a.title,n.setAttribute("role","tooltip");const r=document.createElement("div");return r.className="designbase-wc-sidebar__promo-collapsed-wrap",r.append(s,n),r}const n=document.createElement("div");n.className="designbase-wc-sidebar__promo";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","60"),r.setAttribute("speed","5000"),r.setAttribute("colors",JSON.stringify(["#c7d2fe","#ddd6fe","#fbcfe8","#bfdbfe"])),n.append(r);const d=document.createElement("div");d.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(a.icon&&t(a.icon)?a.icon:"sparkle",16));const l=document.createElement("div");if(l.className="designbase-wc-sidebar__promo-title",l.textContent=a.title,o.append(c,l),d.append(o),a.description){const e=document.createElement("div");e.className="designbase-wc-sidebar__promo-desc",e.textContent=a.description,d.append(e)}if(a.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=a.ctaLabel,e.addEventListener("db-click",()=>{const e=s(a.ctaHref,"");e&&window.location.assign(e),this.dispatchPromoCtaClick(a)}),d.append(e)}return n.append(d),n}createMainHeader(t){const{size:s,collapsible:i,showLogo:a,collapsed:n}=t,r="back"===this.headerType,d="l"===s?"m":"s"===s?"xs":"s";if(!r&&!i&&(!a||n))return null;const o=document.createElement("div");if(o.className=["designbase-wc-sidebar__header",(n||!a)&&!r&&"designbase-wc-sidebar__header--collapsed-only",r&&"designbase-wc-sidebar__header--back"].filter(Boolean).join(" "),r){const t=document.createElement("button");if(t.type="button",t.className=["designbase-wc-sidebar__back",n&&"designbase-wc-sidebar__back--collapsed"].filter(Boolean).join(" "),t.setAttribute("aria-label",this.backLabel),t.append(e("chevron-left",18)),!n){const e=document.createElement("span");e.textContent=this.backLabel,t.append(e)}t.addEventListener("click",()=>this.dispatchBackClick()),o.append(t)}else if(!n&&a){const e=document.createElement("div");e.className="designbase-wc-sidebar__logo";const t=this.getAttribute("logo-type")||"designbase",s=this.getAttribute("logo-text")||"",i=this.getAttribute("logo-src");if(i){const t=document.createElement("db-logo");t.setAttribute("type","custom"),t.setAttribute("src",i),t.setAttribute("alt",this.getAttribute("logo-alt")||"홈"),t.setAttribute("size",d),e.append(t)}else if("custom"===t&&s){const t=document.createElement("span");t.className="designbase-wc-sidebar__logo-text",t.textContent=s,e.append(t)}else{const i=document.createElement("db-logo");i.setAttribute("type",t),i.setAttribute("size",d),s&&i.setAttribute("text",s),e.append(i)}e.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-logo-click",{bubbles:!0,composed:!0}))}),o.append(e)}if(i&&!r){const e=document.createElement("db-button");e.className="designbase-wc-sidebar__toggle",e.setAttribute("variant","tertiary"),e.setAttribute("size","s"),e.setAttribute("icon-only",""),e.setAttribute("start-icon",n?"arrow-bar-right":"arrow-bar-left"),e.setAttribute("aria-label",n?"사이드바 펼치기":"사이드바 접기"),e.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}}))}),o.append(e)}return o}createPanelHeader(t){const s="replace"===this.resolvedPanelMode,i=document.createElement("div");if(i.className=["designbase-wc-sidebar__panel-header",s&&"designbase-wc-sidebar__panel-header--replace"].filter(Boolean).join(" "),s){const s=document.createElement("button");s.type="button",s.className="designbase-wc-sidebar__panel-back",s.setAttribute("aria-label",t.backLabel||this.backLabel),s.append(e("chevron-left",18)),s.addEventListener("click",()=>this.dispatchBackClick()),i.append(s)}const a=document.createElement("div");a.className="designbase-wc-sidebar__panel-heading";const n=document.createElement("div");if(n.className="designbase-wc-sidebar__panel-title",n.textContent=t.title,a.append(n),t.description){const e=document.createElement("div");e.className="designbase-wc-sidebar__panel-description",e.textContent=t.description,a.append(e)}return i.append(a),i}createNavWrapper(e){const{mode:t,collapsed:s,includeProjects:i,includeBottom:a,panel:n}=e,r=document.createElement("div");if(r.className="designbase-wc-sidebar__nav-wrapper",i){const e=this.createProjectSelector(s);e&&r.append(e)}"main"===t&&r.append(this.createCustomNavSlot("nav-top"));const d=document.createElement("nav");if(d.className="designbase-wc-sidebar__nav",d.setAttribute("data-panel-nav",t),n&&(d.dataset.panelId=n.id),d.setAttribute("aria-label",n?.ariaLabel||n?.title||"주 메뉴"),r.append(d),"main"===t&&r.append(this.createCustomNavSlot("nav-bottom")),a){const e=document.createElement("nav");e.className="designbase-wc-sidebar__bottom-nav",e.setAttribute("aria-label","하단 메뉴"),r.append(e)}return r}createFooter(t){const{collapsed:s,userProfile:i,userMenuItems:a}=t,n=document.createElement("div");n.className="designbase-wc-sidebar__footer";const r=this.createUpdateBanner(s);r&&n.append(r);const d=this.createPromoBanner(s);if(d&&n.append(d),i&&!s){const t=document.createElement("div");t.className="designbase-wc-sidebar__user";const s=this.createUserDropdown(a);s&&t.append(s);const r=document.createElement("div");r.className="designbase-wc-sidebar__user-info",r.setAttribute("role","button"),r.setAttribute("tabindex","0"),r.setAttribute("aria-expanded",String(this.userMenuOpen));const d=document.createElement("db-avatar");d.className="designbase-wc-sidebar__user-avatar",d.setAttribute("size","s"),d.setAttribute("initials",i.name),d.setAttribute("alt",i.name),i.avatar&&d.setAttribute("src",i.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=i.name,o.append(c),i.email){const e=document.createElement("div");e.className="designbase-wc-sidebar__user-email",e.textContent=i.email,o.append(e)}if(r.append(d,o),a.length){const t=document.createElement("span");t.className="designbase-wc-sidebar__user-more",t.setAttribute("aria-hidden","true"),t.append(e("more-vertical",16)),r.append(t),r.setAttribute("aria-haspopup","menu")}r.addEventListener("click",()=>{a.length&&(this.userMenuOpen=!this.userMenuOpen,this.userFlyoutItemId=null,this.cancelUserFlyoutClose(),this.projectMenuOpen=!1,this.render())}),r.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),r.click())}),t.append(r),n.append(t)}else if(i&&s){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",i.name),e.setAttribute("aria-expanded",String(this.userMenuOpen)),a.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",i.name),t.setAttribute("alt",i.name),i.avatar&&t.setAttribute("src",i.avatar),e.append(t),!this.userMenuOpen){const t=document.createElement("span");t.className="designbase-wc-sidebar__item-tooltip",t.textContent=i.name,t.setAttribute("role","tooltip"),e.append(t)}const s=this.createUserDropdown(a,!0);s&&e.append(s),e.addEventListener("click",e=>{a.length&&(e.target.closest(".designbase-wc-sidebar__user-dropdown")||(this.userMenuOpen=!this.userMenuOpen,this.userFlyoutItemId=null,this.cancelUserFlyoutClose(),this.projectMenuOpen=!1,this.render()))}),e.addEventListener("keydown",t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),e.click())}),n.append(e)}return n}render(){const e=this.getActivePanelConfig();this.syncHostClasses(),this.setAttribute("role","complementary"),this.setAttribute("aria-label","사이드바 네비게이션");const t=this.getAttribute("size")||"m",s="false"!==(this.getAttribute("collapsible")??("app"===this.sidebarType?"true":"false")),i="false"!==(this.getAttribute("show-logo")??("app"===this.sidebarType?"true":"false")),a=this.hasAttribute("collapsed"),n=this.parseUserProfile(),r=this.parseUserMenuItems(),d=this.parseBottomSections(),o=this.collectCustomNavSlots(),c=Boolean(e),l="replace"===this.resolvedPanelMode;this.replaceChildren();const u=document.createElement("div");u.className="designbase-wc-sidebar__container";const b=document.createElement("div");b.className="designbase-wc-sidebar__panel-viewport";const p=document.createElement("div");p.className="designbase-wc-sidebar__panel-track",p.dataset.active=c&&l?"main":c?"panel":"main";const m=document.createElement("div");m.className=["designbase-wc-sidebar__panel-slide","designbase-wc-sidebar__panel-slide--main"].join(" "),m.dataset.panel="main";const h=c&&l;m.toggleAttribute("inert",h),m.setAttribute("aria-hidden",String(h));const g=this.createMainHeader({size:t,collapsible:s,showLogo:i,collapsed:a});if(g&&m.append(g),m.append(this.createNavWrapper({mode:"main",collapsed:a,includeProjects:"back"!==this.headerType,includeBottom:d.length>0})),m.append(this.createFooter({collapsed:a,userProfile:n,userMenuItems:r})),p.append(m),e){const t=document.createElement("div");t.className=["designbase-wc-sidebar__panel-slide","designbase-wc-sidebar__panel-slide--secondary"].join(" "),t.dataset.panel=e.id,t.setAttribute("aria-hidden","false"),t.append(this.createPanelHeader(e)),t.append(this.createNavWrapper({mode:"panel",collapsed:!1,includeProjects:!1,includeBottom:!1,panel:e})),p.append(t)}b.append(p),u.append(b),this.append(u),this.renderNav(),this.renderBottomNav(),this.projectCustomNavSlots(o),c&&l&&requestAnimationFrame(()=>{this.isConnected&&this.activePanel===e?.id&&(p.dataset.active="panel")})}}customElements.get("db-sidebar")||customElements.define("db-sidebar",DbSidebar);export{DbSidebar};

package/dist/esm/components/db-split-view.d.ts

@@ -19,7 +19,9 @@ declare class DbSplitView extends HTMLElement {
     private getSplitterSize;
     private getGap;
     private handleMouseDown;
+    private resizeAt;
     private handleMouseMove;
+    private handleSplitterKey;
     private handleMouseUp;
     private applyPanelSizes;
     private sync;

package/dist/esm/components/db-split-view.js

@@ -1 +1 @@
-import{rafThrottle as e}from"../core/dom.js";class DbSplitView extends HTMLElement{constructor(){super(...arguments),this.panelSizes=[],this.draggingIndex=null,this.panelSources=[],this.isSyncing=!1,this.isObserving=!1,this.handleMouseDown=e=>t=>{t.preventDefault(),this.draggingIndex=e,document.body.style.cursor="horizontal"===this.getDirection()?"col-resize":"row-resize",document.body.style.userSelect="none"},this.handleMouseMove=e(e=>{if(null===this.draggingIndex)return;if(!this.panelSources.length)return;const t=this.getDirection(),i=this.getMode(),s=this.getSplitterSize(),n=this.getBoundingClientRect(),l=this.panelSources[this.draggingIndex];if(!l)return;const r=this.readPanelConfig(l,this.draggingIndex,this.panelSources.length);let o=this.panelSizes[this.draggingIndex];if("horizontal"===t){const t=n.width,l=e.clientX-n.left;let a=0;for(let e=0;e<this.draggingIndex;e++){const n=this.panelSizes[e];a+="fixed"===i?n:n*t,a+=s}const h=l-a;if("fixed"===i)o=Math.max(r.minSize||0,Math.min(r.maxSize||t,h));else{o=h/t;const e=r.minSize?r.minSize/t:0,i=r.maxSize?r.maxSize/t:1;o=Math.max(e,Math.min(i,o))}}else{const t=n.height,l=e.clientY-n.top;let a=0;for(let e=0;e<this.draggingIndex;e++){const n=this.panelSizes[e];a+="fixed"===i?n:n*t,a+=s}const h=l-a;if("fixed"===i)o=Math.max(r.minSize||0,Math.min(r.maxSize||t,h));else{o=h/t;const e=r.minSize?r.minSize/t:0,i=r.maxSize?r.maxSize/t:1;o=Math.max(e,Math.min(i,o))}}this.panelSizes[this.draggingIndex]=o,this.applyPanelSizes(),this.classList.toggle("designbase-wc-split-view--dragging",!0)}),this.handleMouseUp=()=>{null!==this.draggingIndex&&(this.draggingIndex=null,document.body.style.cursor="",document.body.style.userSelect="",this.classList.toggle("designbase-wc-split-view--dragging",!1))}}static get observedAttributes(){return["direction","mode","splitter-size","splitter-color","splitter-hover-color","gap","full-width","full-height"]}connectedCallback(){this.style.display="flex",this.style.boxSizing="border-box",this.collectPanelSources(),this.initPanelSizes(),this.sync(),this.observer=new MutationObserver(()=>{this.isSyncing||(this.collectPanelSources(),this.initPanelSizes(),this.sync())}),this.startObserving(),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp)}disconnectedCallback(){this.stopObserving(),document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp),this.draggingIndex=null,document.body.style.cursor="",document.body.style.userSelect=""}startObserving(){this.observer&&!this.isObserving&&(this.observer.observe(this,{childList:!0}),this.isObserving=!0)}stopObserving(){this.observer&&this.isObserving&&(this.observer.disconnect(),this.isObserving=!1)}attributeChangedCallback(){this.isConnected&&this.sync()}collectPanelSources(){this.panelSources=[];const e=Array.from(this.querySelectorAll('[slot="panel"]'));if(e.length)return void(this.panelSources=e);const t=Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__panel > .designbase-wc-split-view__panel-body"));t.length&&(this.panelSources=t.map(e=>e.firstElementChild).filter(e=>e instanceof HTMLElement))}readPanelConfig(e,t,i){const s=e.getAttribute("data-size"),n=e.getAttribute("data-min-size"),l=e.getAttribute("data-max-size"),r=this.getMode();let o;return null!=s&&""!==s&&(o=Number(s)),{size:void 0!==o&&Number.isFinite(o)?o:"ratio"===r?1/i:200,minSize:n?Number(n):void 0,maxSize:l?Number(l):void 0,resizable:"false"!==e.getAttribute("data-resizable"),flexible:e.hasAttribute("data-flexible")||"false"!==e.getAttribute("data-flexible")&&t===i-1}}initPanelSizes(){const e=this.panelSources.length;if(!e)return;if(this.panelSizes.length===e)return;const t=this.getMode();this.panelSizes=this.panelSources.map((i,s)=>this.readPanelConfig(i,s,e).size??("ratio"===t?1/e:200))}getDirection(){return"vertical"===(this.getAttribute("direction")||"horizontal")?"vertical":"horizontal"}getMode(){return"fixed"===(this.getAttribute("mode")||"ratio")?"fixed":"ratio"}getSplitterSize(){return Number(this.getAttribute("splitter-size")||4)}getGap(){return Number(this.getAttribute("gap")||0)}applyPanelSizes(){if(!this.panelSources.length)return;const e=this.getDirection(),t=this.getMode();Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__panel")).forEach((i,s)=>{const n=this.panelSources[s];if(!n)return;const l=this.readPanelConfig(n,s,this.panelSources.length),r=this.panelSizes[s],o=l.flexible;if(i.style.width="",i.style.height="",i.style.flexBasis="",i.style.flexGrow="",i.style.flexShrink="",i.style.minHeight="",i.style.minWidth="",o)i.style.flex="1 1 0","vertical"===e?i.style.minHeight="0":i.style.minWidth="0";else{const e="fixed"===t?`${r}px`:100*r+"%";i.style.flex=`0 0 ${e}`}i.classList.toggle("designbase-wc-split-view__panel--flexible",Boolean(o)),i.classList.toggle("designbase-wc-split-view__panel--fixed",!o)})}sync(){if(this.isSyncing=!0,this.stopObserving(),this.collectPanelSources(),this.initPanelSizes(),!this.panelSources.length)return this.isSyncing=!1,void this.startObserving();const e=this.getDirection(),t=this.getMode(),i=this.getGap(),s=this.getSplitterSize(),n=this.getAttribute("splitter-color"),l=this.getAttribute("splitter-hover-color");this.className=["designbase-wc-split-view",`designbase-wc-split-view--direction-${e}`,`designbase-wc-split-view--mode-${t}`,this.hasAttribute("full-width")&&"designbase-wc-split-view--full-width",this.hasAttribute("full-height")&&"designbase-wc-split-view--full-height",null!==this.draggingIndex&&"designbase-wc-split-view--dragging"].filter(Boolean).join(" "),this.style.setProperty("--splitter-size",`${s}px`),n?this.style.setProperty("--splitter-color",n):this.style.removeProperty("--splitter-color"),l?this.style.setProperty("--splitter-hover-color",l):this.style.removeProperty("--splitter-hover-color"),this.style.gap=i>0?`${i}px`:"";const r=Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__panel")),o=Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__splitter"));r.forEach(e=>e.remove()),o.forEach(e=>e.remove()),this.panelSources.forEach((t,s)=>{const n=this.readPanelConfig(t,s,this.panelSources.length),l=s===this.panelSources.length-1,r=!1!==n.resizable&&!l,o=document.createElement("div");o.className="designbase-wc-split-view__panel";const a=document.createElement("div");if(a.className="designbase-wc-split-view__panel-body",t.parentElement!==a&&a.append(t),o.append(a),this.append(o),!l&&r&&0===i){const t=document.createElement("div");t.className=`designbase-wc-split-view__splitter designbase-wc-split-view__splitter--direction-${e}`,t.style.cursor="horizontal"===e?"col-resize":"row-resize",t.addEventListener("mousedown",this.handleMouseDown(s)),this.append(t)}}),this.applyPanelSizes(),this.isSyncing=!1,this.startObserving()}}customElements.get("db-split-view")||customElements.define("db-split-view",DbSplitView);export{DbSplitView};
+import{rafThrottle as e}from"../core/dom.js";class DbSplitView extends HTMLElement{constructor(){super(...arguments),this.panelSizes=[],this.draggingIndex=null,this.panelSources=[],this.isSyncing=!1,this.isObserving=!1,this.handleMouseDown=e=>t=>{t.preventDefault(),this.draggingIndex=e,document.body.style.cursor="horizontal"===this.getDirection()?"col-resize":"row-resize",document.body.style.userSelect="none"},this.handleMouseMove=e(e=>{if(null===this.draggingIndex||!this.panelSources.length)return;const t=this.getBoundingClientRect();this.resizeAt(this.draggingIndex,"horizontal"===this.getDirection()?e.clientX-t.left:e.clientY-t.top),this.classList.add("designbase-wc-split-view--dragging")}),this.handleSplitterKey=e=>t=>{if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key))return;t.preventDefault();const i="horizontal"===this.getDirection()?this.clientWidth:this.clientHeight,s=this.readPanelConfig(this.panelSources[e],e,this.panelSources.length),n=this.readPanelConfig(this.panelSources[e+1],e+1,this.panelSources.length),l="fixed"===this.getMode()?1:i,r=s.flexible?i-this.panelSizes[e+1]*l-this.getSplitterSize():this.panelSizes[e]*l,o=s.flexible?i-(n.maxSize||i)-this.getSplitterSize():s.minSize||0,a=s.flexible?i-(n.minSize||0)-this.getSplitterSize():s.maxSize||i,h="Home"===t.key?o:"End"===t.key?a:r+("ArrowRight"===t.key||"ArrowDown"===t.key?1:-1)*(t.shiftKey?32:8);this.resizeAt(e,h)},this.handleMouseUp=()=>{null!==this.draggingIndex&&(this.draggingIndex=null,document.body.style.cursor="",document.body.style.userSelect="",this.classList.toggle("designbase-wc-split-view--dragging",!1))}}static get observedAttributes(){return["direction","mode","splitter-size","splitter-color","splitter-hover-color","gap","full-width","full-height"]}connectedCallback(){this.style.display="flex",this.style.boxSizing="border-box",this.collectPanelSources(),this.initPanelSizes(),this.sync(),this.observer=new MutationObserver(()=>{this.isSyncing||(this.collectPanelSources(),this.initPanelSizes(),this.sync())}),this.startObserving(),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp)}disconnectedCallback(){this.stopObserving(),document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp),this.draggingIndex=null,document.body.style.cursor="",document.body.style.userSelect=""}startObserving(){this.observer&&!this.isObserving&&(this.observer.observe(this,{childList:!0}),this.isObserving=!0)}stopObserving(){this.observer&&this.isObserving&&(this.observer.disconnect(),this.isObserving=!1)}attributeChangedCallback(){this.isConnected&&this.sync()}collectPanelSources(){this.panelSources=[];const e=Array.from(this.querySelectorAll('[slot="panel"]'));if(e.length)return void(this.panelSources=e);const t=Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__panel > .designbase-wc-split-view__panel-body"));t.length&&(this.panelSources=t.map(e=>e.firstElementChild).filter(e=>e instanceof HTMLElement))}readPanelConfig(e,t,i){const s=e.getAttribute("data-size"),n=e.getAttribute("data-min-size"),l=e.getAttribute("data-max-size"),r=this.getMode();let o;return null!=s&&""!==s&&(o=Number(s)),{size:void 0!==o&&Number.isFinite(o)?o:"ratio"===r?1/i:200,minSize:n?Number(n):void 0,maxSize:l?Number(l):void 0,resizable:"false"!==e.getAttribute("data-resizable"),flexible:"false"!==e.getAttribute("data-flexible")&&(e.hasAttribute("data-flexible")||t===i-1)}}initPanelSizes(){const e=this.panelSources.length;if(!e)return;if(this.panelSizes.length===e)return;const t=this.getMode();this.panelSizes=this.panelSources.map((i,s)=>this.readPanelConfig(i,s,e).size??("ratio"===t?1/e:200))}getDirection(){return"vertical"===(this.getAttribute("direction")||"horizontal")?"vertical":"horizontal"}getMode(){return"fixed"===(this.getAttribute("mode")||"ratio")?"fixed":"ratio"}getSplitterSize(){return Number(this.getAttribute("splitter-size")||4)}getGap(){return Number(this.getAttribute("gap")||0)}resizeAt(e,t){const i=this.getBoundingClientRect(),s="horizontal"===this.getDirection()?i.width:i.height,n=this.getMode(),l=this.getSplitterSize(),r=this.readPanelConfig(this.panelSources[e],e,this.panelSources.length),o=this.readPanelConfig(this.panelSources[e+1],e+1,this.panelSources.length),px=e=>"fixed"===n?this.panelSizes[e]:this.panelSizes[e]*s;let a=0;for(let t=0;t<e;t++)a+=px(t)+l;if(r.flexible&&!o.flexible&&0===e&&2===this.panelSources.length){const i=Math.max(o.minSize||0,Math.min(o.maxSize||s,Math.max(0,s-t-l)));this.panelSizes[e+1]="fixed"===n?i:i/s}else{const i=o.flexible?s-(o.minSize||0)-l-a:s,h=Math.max(r.minSize||0,Math.min(r.maxSize||s,i,t-a));this.panelSizes[e]="fixed"===n?h:h/s}this.applyPanelSizes(),this.dispatchEvent(new CustomEvent("db-resize",{detail:{sizes:[...this.panelSizes]},bubbles:!0,composed:!0}))}applyPanelSizes(){if(!this.panelSources.length)return;const e=this.getDirection(),t=this.getMode();Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__panel")).forEach((i,s)=>{const n=this.panelSources[s];if(!n)return;const l=this.readPanelConfig(n,s,this.panelSources.length),r=this.panelSizes[s],o=l.flexible;if(i.style.width="",i.style.height="",i.style.flexBasis="",i.style.flexGrow="",i.style.flexShrink="",i.style.minHeight="",i.style.minWidth="",o)i.style.flex="1 1 0","vertical"===e?i.style.minHeight="0":i.style.minWidth="0";else{const e="fixed"===t?`${r}px`:100*r+"%";i.style.flex=`0 0 ${e}`}i.classList.toggle("designbase-wc-split-view__panel--flexible",Boolean(o)),i.classList.toggle("designbase-wc-split-view__panel--fixed",!o)}),this.querySelectorAll(":scope > .designbase-wc-split-view__splitter").forEach((i,s)=>{const n=this.readPanelConfig(this.panelSources[s],s,this.panelSources.length).flexible?s+1:s,l=this.readPanelConfig(this.panelSources[n],n,this.panelSources.length),r="horizontal"===e?this.clientWidth:this.clientHeight;i.setAttribute("aria-valuenow",String(Math.round(this.panelSizes[n]*("fixed"===t?1:r)))),i.setAttribute("aria-valuemin",String(l.minSize||0)),i.setAttribute("aria-valuemax",String(l.maxSize||r))})}sync(){if(this.isSyncing=!0,this.stopObserving(),this.collectPanelSources(),this.initPanelSizes(),!this.panelSources.length)return this.isSyncing=!1,void this.startObserving();const e=this.getDirection(),t=this.getMode(),i=this.getGap(),s=this.getSplitterSize(),n=this.getAttribute("splitter-color"),l=this.getAttribute("splitter-hover-color");this.className=["designbase-wc-split-view",`designbase-wc-split-view--direction-${e}`,`designbase-wc-split-view--mode-${t}`,this.hasAttribute("full-width")&&"designbase-wc-split-view--full-width",this.hasAttribute("full-height")&&"designbase-wc-split-view--full-height",null!==this.draggingIndex&&"designbase-wc-split-view--dragging"].filter(Boolean).join(" "),this.style.setProperty("--splitter-size",`${s}px`),n?this.style.setProperty("--splitter-color",n):this.style.removeProperty("--splitter-color"),l?this.style.setProperty("--splitter-hover-color",l):this.style.removeProperty("--splitter-hover-color"),this.style.gap=i>0?`${i}px`:"";const r=Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__panel")),o=Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__splitter"));r.forEach(e=>e.remove()),o.forEach(e=>e.remove()),this.panelSources.forEach((t,s)=>{const n=this.readPanelConfig(t,s,this.panelSources.length),l=s===this.panelSources.length-1,r=!1!==n.resizable&&!l,o=document.createElement("div");o.className="designbase-wc-split-view__panel";const a=document.createElement("div");if(a.className="designbase-wc-split-view__panel-body",t.parentElement!==a&&a.append(t),o.append(a),this.append(o),!l&&r&&0===i){const t=document.createElement("div");t.className=`designbase-wc-split-view__splitter designbase-wc-split-view__splitter--direction-${e}`,t.style.cursor="horizontal"===e?"col-resize":"row-resize",t.addEventListener("mousedown",this.handleMouseDown(s)),t.tabIndex=0,t.setAttribute("role","separator"),t.setAttribute("aria-label","패널 너비 조정"),t.setAttribute("aria-orientation","horizontal"===e?"vertical":"horizontal"),t.addEventListener("keydown",this.handleSplitterKey(s)),this.append(t)}}),this.applyPanelSizes(),this.isSyncing=!1,this.startObserving()}}customElements.get("db-split-view")||customElements.define("db-split-view",DbSplitView);export{DbSplitView};

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

@@ -1 +1 @@
-import{dbUid as t}from"../core/uid.js";import{TEXTAREA_SIZES as e}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbTextarea extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.handleInput=t=>{t.stopPropagation(),this.field&&(this.updateCharacterCount(),this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-input",{detail:{value:this.field.value,nativeEvent:t},bubbles:!0,composed:!0})))},this.handleChange=t=>{if(t.stopPropagation(),!this.field)return;const e=this.field.value;this.getAttribute("value")!==e&&this.setAttribute("value",e),this.updateCharacterCount(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:e,nativeEvent:t},bubbles:!0,composed:!0}))}}static get observedAttributes(){return["label","placeholder","value","default-value","name","size","rows","max-length","show-character-count","character-count-position","disabled","readonly","required","error","error-message","helper-text","full-width","resizable"]}get value(){return this.field?.value??this.getAttribute("value")??""}set value(t){this.setAttribute("value",t),this.field&&(this.field.value=t,this.updateCharacterCount())}get size(){return this.getAttribute("size")||"m"}set size(t){this.setAttribute("size",t)}connectedCallback(){this.built||this.build(),this.syncState()}attributeChangedCallback(t){if(this.built){if("value"===t&&this.field){const t=this.getAttribute("value")||"";return this.field.value!==t&&(this.field.value=t),void this.updateCharacterCount()}this.syncState()}}focus(){this.field?.focus()}get showCharacterCount(){return this.hasAttribute("show-character-count")}get characterCountPosition(){return this.getAttribute("character-count-position")||"bottom"}build(){const e=this.getAttribute("id")||t("db-textarea");this.hasAttribute("id")||this.setAttribute("id",e),this.labelEl=document.createElement("label"),this.labelEl.className="designbase-wc-textarea__label",this.labelEl.htmlFor=e,this.countTop=document.createElement("div"),this.countTop.className="designbase-wc-textarea__character-count designbase-wc-textarea__character-count--top",this.countTop.hidden=!0;const i=document.createElement("div");i.className="designbase-wc-textarea__wrapper",this.field=document.createElement("textarea"),this.field.id=e,this.field.className="designbase-wc-textarea__field",this.field.addEventListener("input",this.handleInput),this.field.addEventListener("change",this.handleChange),i.appendChild(this.field),this.footerEl=document.createElement("div"),this.footerEl.className="designbase-wc-textarea__footer",this.errorEl=document.createElement("div"),this.errorEl.className="designbase-wc-textarea__error-message",this.errorEl.setAttribute("role","alert"),this.helperEl=document.createElement("div"),this.helperEl.className="designbase-wc-textarea__helper-text",this.countBottom=document.createElement("div"),this.countBottom.className="designbase-wc-textarea__character-count designbase-wc-textarea__character-count--bottom",this.countBottom.hidden=!0,this.footerEl.append(this.errorEl,this.helperEl,this.countBottom),this.append(this.labelEl,this.countTop,i,this.footerEl),this.built=!0}syncState(){if(!this.field)return;const t=e.includes(this.size)?this.size:"m",i=this.getAttribute("label")||"",s=this.getAttribute("helper-text")||"",a=this.getAttribute("error-message")||"",r=this.hasAttribute("error"),h=this.getAttribute("value")??this.getAttribute("default-value")??"";if(this.className=["designbase-wc-textarea",`designbase-wc-textarea--${t}`,r&&"designbase-wc-textarea--error",this.hasAttribute("disabled")&&"designbase-wc-textarea--disabled",this.hasAttribute("readonly")&&"designbase-wc-textarea--readonly",this.hasAttribute("full-width")&&"designbase-wc-textarea--full-width",this.hasAttribute("resizable")?"":"designbase-wc-textarea--not-resizable"].filter(Boolean).join(" "),this.labelEl){const t=this.hasAttribute("required")?'<span aria-hidden="true"> *</span>':"";this.labelEl.innerHTML=i?`${this.escape(i)}${t}`:"",this.labelEl.hidden=!i}this.field.placeholder=this.getAttribute("placeholder")||"",this.field.name=this.getAttribute("name")||"",this.field.value!==h&&(this.field.value=h),this.field.rows=Number(this.getAttribute("rows")||4),this.field.disabled=this.hasAttribute("disabled"),this.field.readOnly=this.hasAttribute("readonly"),this.field.required=this.hasAttribute("required"),this.field.setAttribute("aria-invalid",String(r));const l=this.getAttribute("max-length");l?this.field.maxLength=Number(l):this.field.removeAttribute("maxLength");const n=`${this.getAttribute("id")}-helper`,o=`${this.getAttribute("id")}-error`;r&&a?(this.errorEl.id=o,this.errorEl.textContent=a,this.errorEl.hidden=!1,this.helperEl.hidden=!0,this.field.setAttribute("aria-describedby",o)):s?(this.helperEl.id=n,this.helperEl.textContent=s,this.helperEl.hidden=!1,this.errorEl.hidden=!0,this.field.setAttribute("aria-describedby",n)):(this.helperEl.hidden=!0,this.errorEl.hidden=!0,this.field.removeAttribute("aria-describedby")),this.updateCharacterCount()}updateCharacterCount(){if(!this.field||!this.countTop||!this.countBottom)return;const t=this.field.value.length,e=this.getAttribute("max-length"),i=Boolean(e&&t>Number(e)),s=`${t}${e?` / ${e}`:""}`,renderCount=t=>{let e=t.querySelector(".designbase-wc-textarea__character-count-text");e||(e=document.createElement("span"),t.replaceChildren(e)),e.className="designbase-wc-textarea__character-count-text",e.classList.toggle("designbase-wc-textarea__character-count-text--error",i),e.textContent=s};this.showCharacterCount&&"top"===this.characterCountPosition?(renderCount(this.countTop),this.countTop.hidden=!1,this.countBottom.hidden=!0):this.showCharacterCount?(renderCount(this.countBottom),this.countBottom.hidden=!1,this.countTop.hidden=!0):(this.countTop.hidden=!0,this.countBottom.hidden=!0)}escape(t){return t.replace(/[&<>"']/g,t=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[t]||t))}}customElements.get("db-textarea")||customElements.define("db-textarea",DbTextarea);export{DbTextarea};
+import{dbUid as t}from"../core/uid.js";import{TEXTAREA_SIZES as e}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbTextarea extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.handleInput=t=>{t.stopPropagation(),this.field&&(this.getAttribute("value")!==this.field.value&&this.setAttribute("value",this.field.value),this.updateCharacterCount(),this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-input",{detail:{value:this.field.value,nativeEvent:t},bubbles:!0,composed:!0})))},this.handleChange=t=>{if(t.stopPropagation(),!this.field)return;const e=this.field.value;this.getAttribute("value")!==e&&this.setAttribute("value",e),this.updateCharacterCount(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:e,nativeEvent:t},bubbles:!0,composed:!0}))}}static get observedAttributes(){return["label","placeholder","value","default-value","name","size","rows","max-length","show-character-count","character-count-position","disabled","readonly","required","error","error-message","helper-text","full-width","resizable"]}get value(){return this.field?.value??this.getAttribute("value")??""}set value(t){this.setAttribute("value",t),this.field&&(this.field.value=t,this.updateCharacterCount())}get size(){return this.getAttribute("size")||"m"}set size(t){this.setAttribute("size",t)}connectedCallback(){this.built||this.build(),this.syncState()}attributeChangedCallback(t){if(this.built){if("value"===t&&this.field){const t=this.getAttribute("value")||"";return this.field.value!==t&&(this.field.value=t),void this.updateCharacterCount()}this.syncState()}}focus(){this.field?.focus()}get showCharacterCount(){return this.hasAttribute("show-character-count")}get characterCountPosition(){return this.getAttribute("character-count-position")||"bottom"}build(){const e=this.getAttribute("id")||t("db-textarea");this.hasAttribute("id")||this.setAttribute("id",e),this.labelEl=document.createElement("label"),this.labelEl.className="designbase-wc-textarea__label",this.labelEl.htmlFor=`${e}-field`,this.countTop=document.createElement("div"),this.countTop.className="designbase-wc-textarea__character-count designbase-wc-textarea__character-count--top",this.countTop.hidden=!0;const i=document.createElement("div");i.className="designbase-wc-textarea__wrapper",this.field=document.createElement("textarea"),this.field.id=`${e}-field`,this.field.className="designbase-wc-textarea__field",this.field.addEventListener("input",this.handleInput),this.field.addEventListener("change",this.handleChange),i.appendChild(this.field),this.footerEl=document.createElement("div"),this.footerEl.className="designbase-wc-textarea__footer",this.errorEl=document.createElement("div"),this.errorEl.className="designbase-wc-textarea__error-message",this.errorEl.setAttribute("role","alert"),this.helperEl=document.createElement("div"),this.helperEl.className="designbase-wc-textarea__helper-text",this.countBottom=document.createElement("div"),this.countBottom.className="designbase-wc-textarea__character-count designbase-wc-textarea__character-count--bottom",this.countBottom.hidden=!0,this.footerEl.append(this.errorEl,this.helperEl,this.countBottom),this.append(this.labelEl,this.countTop,i,this.footerEl),this.built=!0}syncState(){if(!this.field)return;const t=e.includes(this.size)?this.size:"m",i=this.getAttribute("label")||"",s=this.getAttribute("helper-text")||"",a=this.getAttribute("error-message")||"",r=this.hasAttribute("error"),h=this.getAttribute("value")??this.getAttribute("default-value")??"";if(this.className=["designbase-wc-textarea",`designbase-wc-textarea--${t}`,r&&"designbase-wc-textarea--error",this.hasAttribute("disabled")&&"designbase-wc-textarea--disabled",this.hasAttribute("readonly")&&"designbase-wc-textarea--readonly",this.hasAttribute("full-width")&&"designbase-wc-textarea--full-width",this.hasAttribute("resizable")?"":"designbase-wc-textarea--not-resizable"].filter(Boolean).join(" "),this.labelEl){const t=this.hasAttribute("required")?'<span aria-hidden="true"> *</span>':"";this.labelEl.innerHTML=i?`${this.escape(i)}${t}`:"",this.labelEl.hidden=!i}this.field.placeholder=this.getAttribute("placeholder")||"",this.field.name=this.getAttribute("name")||"",this.field.value!==h&&(this.field.value=h),this.field.rows=Number(this.getAttribute("rows")||4),this.field.disabled=this.hasAttribute("disabled"),this.field.readOnly=this.hasAttribute("readonly"),this.field.required=this.hasAttribute("required"),this.field.setAttribute("aria-invalid",String(r));const l=this.getAttribute("max-length");l?this.field.maxLength=Number(l):this.field.removeAttribute("maxLength");const n=`${this.getAttribute("id")}-helper`,d=`${this.getAttribute("id")}-error`;r&&a?(this.errorEl.id=d,this.errorEl.textContent=a,this.errorEl.hidden=!1,this.helperEl.hidden=!0,this.field.setAttribute("aria-describedby",d)):s?(this.helperEl.id=n,this.helperEl.textContent=s,this.helperEl.hidden=!1,this.errorEl.hidden=!0,this.field.setAttribute("aria-describedby",n)):(this.helperEl.hidden=!0,this.errorEl.hidden=!0,this.field.removeAttribute("aria-describedby")),this.updateCharacterCount()}updateCharacterCount(){if(!this.field||!this.countTop||!this.countBottom)return;const t=this.field.value.length,e=this.getAttribute("max-length"),i=Boolean(e&&t>Number(e)),s=`${t}${e?` / ${e}`:""}`,renderCount=t=>{let e=t.querySelector(".designbase-wc-textarea__character-count-text");e||(e=document.createElement("span"),t.replaceChildren(e)),e.className="designbase-wc-textarea__character-count-text",e.classList.toggle("designbase-wc-textarea__character-count-text--error",i),e.textContent=s};this.showCharacterCount&&"top"===this.characterCountPosition?(renderCount(this.countTop),this.countTop.hidden=!1,this.countBottom.hidden=!0):this.showCharacterCount?(renderCount(this.countBottom),this.countBottom.hidden=!1,this.countTop.hidden=!0):(this.countTop.hidden=!0,this.countBottom.hidden=!0)}escape(t){return t.replace(/[&<>"']/g,t=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[t]||t))}}customElements.get("db-textarea")||customElements.define("db-textarea",DbTextarea);export{DbTextarea};

package/dist/esm/components/db-ticket.d.ts

@@ -0,0 +1,18 @@
+import { DbPaperCard, DbPaperField } from './paper-card.js';
+
+/** Invitation, admission and coupon ticket. Values are text, never interpreted as HTML. */
+declare class DbTicket extends DbPaperCard {
+    static get observedAttributes(): string[];
+    private data;
+    protected upgradeNames(): string[];
+    get fields(): DbPaperField[];
+    set fields(value: DbPaperField[]);
+    protected render(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ticket': DbTicket;
+    }
+}
+
+export { DbPaperField, DbTicket };

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

@@ -0,0 +1 @@
+import{DbPaperCard as e,paperFields as t,paperJson as i,paperNode as s,paperDetails as r}from"./paper-card.js";class DbTicket extends e{static get observedAttributes(){return["layout","issuer","heading","description","reference","fields","edge","note","code-image-src","code-alt","action-label","disabled"]}upgradeNames(){return["fields"]}get fields(){return t(this.data??i(this.attr("fields")))}set fields(e){this.data=null==e?void 0:t(e),this.isConnected&&this.render()}render(){const e=s("section","db-paper__main");this.attr("issuer")&&e.append(s("div","db-paper__issuer",this.attr("issuer"))),e.append(s("h3","db-paper__title",this.attr("heading")||"티켓")),this.attr("description")&&e.append(s("p","db-paper__description",this.attr("description"))),this.fields.length&&e.append(r(this.fields));const t=s("div","db-paper__stub");t.append(this.code(this.attr("reference"))),this.attr("note")&&t.append(s("p","db-paper__note",this.attr("note")));const i=this.action(this.attr("reference"));i&&t.append(i),this.replace(e,t)}}customElements.get("db-ticket")||customElements.define("db-ticket",DbTicket);export{DbTicket};

package/dist/esm/components/db-time-picker.d.ts

@@ -1,5 +1,5 @@
 import './db-button.js';
-import { TIME_PICKER_FORMATS } from '@designbasekorea/ui-contracts';
+import { TIME_PICKER_FORMATS } from '../ui-contracts/dist/components.d.js';
 
 type TimeFormat = (typeof TIME_PICKER_FORMATS)[number];
 declare class DbTimePicker extends HTMLElement {

package/dist/esm/components/db-tool-button.d.ts

@@ -0,0 +1,57 @@
+import './db-button.js';
+import './db-tooltip.js';
+import './db-popover.js';
+
+interface DesignToolOption {
+    id: string;
+    label: string;
+    icon?: string;
+    shortcut?: string;
+    disabled?: boolean;
+}
+interface DesignToolAction {
+    id: string;
+    optionId?: string;
+    option?: DesignToolOption;
+}
+/** Icon action with a portalled tooltip and optional click/long-press menu. */
+declare class DbToolButton extends HTMLElement {
+    static get observedAttributes(): string[];
+    private static openMenus;
+    private button?;
+    private tooltip?;
+    private menuPopover?;
+    private menu?;
+    private timer?;
+    private held;
+    private pointer?;
+    private menuSignature;
+    private focusFrame?;
+    get options(): DesignToolOption[];
+    set options(value: DesignToolOption[] | string);
+    get value(): string;
+    set value(v: string);
+    get disabled(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private ensure;
+    private sync;
+    private activate;
+    openMenu(): void;
+    private outsidePress;
+    private releaseMenuOwner;
+    closeMenu(restoreFocus?: boolean): void;
+    private menuKey;
+    private pressStart;
+    private pressEnd;
+    private clearPress;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-tool-button': DbToolButton;
+    }
+}
+
+export { DbToolButton };
+export type { DesignToolAction, DesignToolOption };

package/dist/esm/components/db-tool-button.js

@@ -0,0 +1 @@
+import"./db-button.js";import"./db-tooltip.js";import"./db-popover.js";import{isDbIconName as t,createDbIcon as e}from"./db-icons.js";import{dbUid as i}from"../core/uid.js";class DbToolButton extends HTMLElement{constructor(){super(...arguments),this.held=!1,this.menuSignature="",this.outsidePress=t=>{const e=t.composedPath();e.includes(this)||this.menu&&e.includes(this.menu)||this.closeMenu(!1)},this.menuKey=t=>{const e=Array.from(this.menu?.querySelectorAll("button:not(:disabled)")||[]),i=e.indexOf(document.activeElement);if(["ArrowDown","ArrowUp","Home","End","Escape","Tab"].includes(t.key)){if(t.stopPropagation(),"Escape"===t.key)return t.preventDefault(),void this.closeMenu();if("Tab"===t.key)return void this.closeMenu();t.preventDefault();const s="Home"===t.key?0:"End"===t.key?e.length-1:(i+("ArrowDown"===t.key?1:-1)+e.length)%e.length;e[s]?.focus()}},this.pressStart=t=>{0===t.button&&!this.disabled&&this.options.length&&(this.clearPress(),this.held=!1,this.pointer={x:t.clientX,y:t.clientY,id:t.pointerId},this.timer=setTimeout(()=>{this.held=!0,this.openMenu()},450))},this.pressEnd=()=>{this.clearPress()}}static get observedAttributes(){return["tool-id","label","icon","text","shortcut","active","toggle","disabled","options","value","menu-trigger","size","tone","placement"]}get options(){try{const t=JSON.parse(this.getAttribute("options")||"[]");return Array.isArray(t)?t.filter(t=>t&&"string"==typeof t.id&&"string"==typeof t.label):[]}catch{return[]}}set options(t){this.setAttribute("options","string"==typeof t?t:JSON.stringify(t))}get value(){return this.getAttribute("value")||""}set value(t){this.setAttribute("value",t)}get disabled(){return this.hasAttribute("disabled")}connectedCallback(){this.ensure(),this.sync()}disconnectedCallback(){this.clearPress(),this.closeMenu(!1)}attributeChangedCallback(){this.isConnected&&(this.ensure(),this.sync())}ensure(){this.button||(this.classList.add("designbase-wc-tool-button"),this.tooltip=document.createElement("db-tooltip"),this.tooltip.setAttribute("position","bottom"),this.tooltip.setAttribute("focus-target","child"),this.tooltip.setAttribute("delay","350"),this.tooltip.setAttribute("size","s"),this.button=document.createElement("db-button"),this.button.id=i("design-tool"),this.button.setAttribute("variant","ghost"),this.button.setAttribute("type","button"),this.tooltip.append(this.button),this.menuPopover=document.createElement("db-popover"),this.menuPopover.setAttribute("trigger","manual"),this.menuPopover.setAttribute("open","false"),this.menuPopover.setAttribute("trigger-id",this.button.id),this.menuPopover.setAttribute("show-arrow","false"),this.menuPopover.setAttribute("size","s"),this.menuPopover.setAttribute("close-on-escape","false"),this.menuPopover.setAttribute("max-width","280"),this.menu=document.createElement("div"),this.menu.className="designbase-wc-tool-button__menu",this.menu.setAttribute("slot","content"),this.menu.setAttribute("role","menu"),this.menu.addEventListener("keydown",this.menuKey),this.menuPopover.append(this.menu),this.menuPopover.addEventListener("db-open-change",t=>{if(t.target!==this.menuPopover)return;const e=t.detail.open;this.button.setAttribute("aria-expanded",String(e)),this.tooltip.toggleAttribute("disabled",e),e||this.releaseMenuOwner()}),this.button.addEventListener("db-click",t=>{t.stopPropagation(),this.disabled||(this.held?this.held=!1:this.options.length&&"long-press"!==this.getAttribute("menu-trigger")?this.menuPopover?.open?this.closeMenu():this.openMenu():this.activate(this.options.find(t=>t.id===this.value)||this.options[0]))}),this.button.addEventListener("pointerdown",this.pressStart),this.button.addEventListener("pointerup",this.pressEnd),this.button.addEventListener("pointerleave",()=>this.clearPress()),this.button.addEventListener("pointercancel",()=>{this.held=!0,this.clearPress()}),this.button.addEventListener("pointermove",t=>{this.pointer&&Math.hypot(t.clientX-this.pointer.x,t.clientY-this.pointer.y)>8&&this.clearPress()}),this.button.addEventListener("contextmenu",t=>{this.options.length&&(t.preventDefault(),this.openMenu())}),this.button.addEventListener("keydown",t=>{const e="vertical"===this.closest("db-design-toolbar,db-context-bar")?.getAttribute("orientation");(t.key===(e?"ArrowRight":"ArrowDown")||t.altKey&&"Enter"===t.key)&&this.options.length&&(t.preventDefault(),t.stopPropagation(),this.openMenu())}),this.append(this.tooltip,this.menuPopover))}sync(){if(!this.button||!this.menu)return;const i=this.options,s=i.find(t=>t.id===this.value),o=(this.hasAttribute("text")?this.getAttribute("label"):s?.label)||this.getAttribute("label")||"도구",n=s?.icon||this.getAttribute("icon")||"",r=s?.shortcut||this.getAttribute("shortcut"),u=`${o}${r?` · ${r}`:""}${i.length&&"long-press"===this.getAttribute("menu-trigger")?" · 길게 눌러 도구 더 보기":""}`;this.button.setAttribute("aria-label",o),this.button.setAttribute("size","s"===this.getAttribute("size")?"s":"m"),this.button.toggleAttribute("disabled",this.disabled),this.button.toggleAttribute("icon-only",!this.hasAttribute("text")),this.hasAttribute("toggle")||this.hasAttribute("active")?this.button.setAttribute("aria-pressed",String(this.hasAttribute("active"))):this.button.removeAttribute("aria-pressed"),this.button.dataset.toolId=this.getAttribute("tool-id")||"",i.length?(this.button.setAttribute("aria-haspopup","menu"),this.button.setAttribute("aria-expanded",String(!!this.menuPopover?.open))):(this.button.removeAttribute("aria-haspopup"),this.button.removeAttribute("aria-expanded")),this.tooltip.content=u,this.menuPopover.setAttribute("placement",(this.getAttribute("placement")||"bottom-start").replace(/^(top|bottom)-left$/,"$1-start").replace(/^(top|bottom)-right$/,"$1-end")),this.menu.setAttribute("aria-label",this.getAttribute("label")||o),this.menu.dataset.tone=this.getAttribute("tone")||"default";const h=`${n}|${this.getAttribute("text")||""}|${i.length>0}`;if(this.button.dataset.signature!==h){this.button.dataset.signature=h;const s=[];if(n&&t(n)&&s.push(e(n,20)),this.hasAttribute("text")){const t=document.createElement("span");t.textContent=this.getAttribute("text"),s.push(t)}if(i.length){const t=document.createElement("span");t.className="designbase-wc-tool-button__indicator",t.setAttribute("aria-hidden","true"),s.push(t)}this.button.replaceChildren(...s)}this.disabled&&this.menuPopover?.open&&this.closeMenu(!1);const a="long-press"===this.getAttribute("menu-trigger")||!!this.value,l=JSON.stringify([i,this.value,a]);this.menuSignature!==l&&(this.menuSignature=l,this.menu.replaceChildren(),i.forEach(i=>{const s=document.createElement("button");s.type="button",s.disabled=!!i.disabled,s.setAttribute("role",a?"menuitemradio":"menuitem"),a&&s.setAttribute("aria-checked",String(i.id===this.value)),s.tabIndex=-1,i.icon&&t(i.icon)&&s.append(e(i.icon,20));const o=document.createElement("span");if(o.textContent=i.label,s.append(o),i.shortcut){const t=document.createElement("kbd");t.textContent=i.shortcut,s.append(t)}i.id===this.value&&s.append(e("done",14)),s.addEventListener("click",()=>{a&&(this.value=i.id),this.closeMenu(!0),this.activate(i)}),this.menu.append(s)}))}activate(t){this.disabled||t?.disabled||this.dispatchEvent(new CustomEvent("db-tool-action",{detail:{id:this.getAttribute("tool-id")||"",optionId:t?.id,option:t},bubbles:!0,composed:!0}))}openMenu(){if(this.disabled||!this.options.length||!this.menuPopover)return;this.clearPress();const t=DbToolButton.openMenus.get(this.ownerDocument);t&&t!==this&&t.closeMenu(!1),DbToolButton.openMenus.set(this.ownerDocument,this),this.ownerDocument.addEventListener("pointerdown",this.outsidePress,!0),this.menuPopover.open=!0,this.button?.setAttribute("aria-expanded","true"),this.tooltip?.setAttribute("disabled",""),this.focusFrame&&cancelAnimationFrame(this.focusFrame),this.focusFrame=requestAnimationFrame(()=>{this.menu?.closest('[role="dialog"]')?.setAttribute("aria-label",this.getAttribute("label")||"도구 메뉴");const t=Array.from(this.menu?.querySelectorAll("button:not(:disabled)")||[]);(t.find(t=>"true"===t.getAttribute("aria-checked"))||t[0])?.focus()})}releaseMenuOwner(){DbToolButton.openMenus.get(this.ownerDocument)===this&&DbToolButton.openMenus.delete(this.ownerDocument),this.ownerDocument.removeEventListener("pointerdown",this.outsidePress,!0)}closeMenu(t=!0){this.releaseMenuOwner(),this.focusFrame&&cancelAnimationFrame(this.focusFrame),this.menuPopover?.setAttribute("open","false"),this.button?.setAttribute("aria-expanded","false"),this.tooltip?.removeAttribute("disabled"),t&&this.button?.focus()}clearPress(){this.timer&&clearTimeout(this.timer),this.timer=void 0,this.pointer=void 0}}DbToolButton.openMenus=new WeakMap,customElements.get("db-tool-button")||customElements.define("db-tool-button",DbToolButton);export{DbToolButton};

package/dist/esm/components/db-tweet-card.d.ts

@@ -0,0 +1,101 @@
+import { TweetCardVariant, TweetCardSize } from '../ui-contracts/dist/components.d.js';
+
+interface DbTweetData {
+    id?: string;
+    text?: string;
+    authorName?: string;
+    username?: string;
+    avatar?: string;
+    verified?: boolean;
+    createdAt?: string;
+    likes?: number;
+    retweets?: number;
+    replies?: number;
+    views?: number;
+    mediaUrl?: string;
+    tweetUrl?: string;
+}
+declare class DbTweetCard extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private abortController;
+    private isLiked;
+    private localLikes;
+    private headerEl?;
+    private avatarImg?;
+    private avatarFallback?;
+    private authorNameEl?;
+    private authorHandleEl?;
+    private verifiedBadgeEl?;
+    private xLogoLink?;
+    private bodyEl?;
+    private mediaContainer?;
+    private mediaImg?;
+    private dateEl?;
+    private actionsRow?;
+    private replyBtn?;
+    private replyCountSpan?;
+    private retweetBtn?;
+    private retweetCountSpan?;
+    private likeBtn?;
+    private likeCountSpan?;
+    private shareBtn?;
+    private skeletonEl?;
+    private errorEl?;
+    private errorTextEl?;
+    private retryBtn?;
+    get tweetId(): string;
+    set tweetId(value: string);
+    get authorName(): string;
+    set authorName(value: string);
+    get username(): string;
+    set username(value: string);
+    get avatar(): string;
+    set avatar(value: string);
+    get verified(): boolean;
+    set verified(value: boolean);
+    get content(): string;
+    set content(value: string);
+    get date(): string;
+    set date(value: string);
+    get likes(): number;
+    set likes(value: number);
+    get retweets(): number;
+    set retweets(value: number);
+    get replies(): number;
+    set replies(value: number);
+    get media(): string;
+    set media(value: string);
+    get href(): string;
+    set href(value: string);
+    get variant(): TweetCardVariant;
+    set variant(value: TweetCardVariant);
+    get size(): TweetCardSize;
+    set size(value: TweetCardSize);
+    get loading(): boolean;
+    set loading(value: boolean);
+    get error(): string;
+    set error(value: string);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    private fetchTweetData;
+    private applyTweetPayload;
+    private handleReplyClick;
+    private handleRetweetClick;
+    private handleLikeClick;
+    private handleShareClick;
+    private handleRetryClick;
+    private getTweetUrl;
+    private build;
+    private updateLikeButton;
+    private sync;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-tweet-card': DbTweetCard;
+    }
+}
+
+export { DbTweetCard };
+export type { DbTweetData };

package/dist/esm/components/db-tweet-card.js

@@ -0,0 +1 @@
+import{createDbIcon as t}from"./db-icons.js";import{sanitizeHref as e}from"../core/safe-url.js";import{t as i}from"../core/i18n.js";import{coerceToContract as s}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{TWEET_CARD_VARIANTS as a,TWEET_CARD_SIZES as r}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const n="designbase-wc-tweet-card";function formatCount(t){return!Number.isFinite(t)||t<=0?"0":t>=1e6?(t/1e6).toFixed(1).replace(/\.0$/,"")+"M":t>=1e3?(t/1e3).toFixed(1).replace(/\.0$/,"")+"K":String(t)}class DbTweetCard extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.abortController=null,this.isLiked=!1,this.localLikes=0,this.handleReplyClick=t=>{t.stopPropagation(),this.dispatchEvent(new CustomEvent("db-reply",{bubbles:!0,composed:!0,detail:{tweetId:this.tweetId,username:this.username}}))},this.handleRetweetClick=t=>{t.stopPropagation(),this.dispatchEvent(new CustomEvent("db-retweet",{bubbles:!0,composed:!0,detail:{tweetId:this.tweetId,username:this.username}}))},this.handleLikeClick=t=>{t.stopPropagation(),this.isLiked=!this.isLiked,this.localLikes+=this.isLiked?1:-1,this.updateLikeButton(),this.dispatchEvent(new CustomEvent("db-like",{bubbles:!0,composed:!0,detail:{tweetId:this.tweetId,username:this.username,liked:this.isLiked,count:this.localLikes}}))},this.handleShareClick=t=>{t.stopPropagation();const e=this.getTweetUrl();this.dispatchEvent(new CustomEvent("db-share",{bubbles:!0,composed:!0,detail:{tweetId:this.tweetId,url:e}}))},this.handleRetryClick=t=>{t.stopPropagation(),this.tweetId&&this.fetchTweetData(this.tweetId)}}static get observedAttributes(){return["tweet-id","author-name","author-handle","username","author-avatar","avatar","verified","content","text","date","timestamp","likes","retweets","replies","views","media","href","variant","size","loading","error"]}get tweetId(){return this.getAttribute("tweet-id")||this.getAttribute("id")||""}set tweetId(t){this.setAttribute("tweet-id",t)}get authorName(){return this.getAttribute("author-name")||""}set authorName(t){this.setAttribute("author-name",t)}get username(){return(this.getAttribute("author-handle")||this.getAttribute("username")||"").replace(/^@/,"")}set username(t){this.setAttribute("username",t)}get avatar(){return this.getAttribute("author-avatar")||this.getAttribute("avatar")||""}set avatar(t){this.setAttribute("avatar",t)}get verified(){return this.hasAttribute("verified")}set verified(t){this.toggleAttribute("verified",t)}get content(){return this.getAttribute("content")||this.getAttribute("text")||""}set content(t){this.setAttribute("content",t)}get date(){return this.getAttribute("date")||this.getAttribute("timestamp")||""}set date(t){this.setAttribute("date",t)}get likes(){return parseInt(this.getAttribute("likes")||"0",10)||0}set likes(t){this.setAttribute("likes",String(t))}get retweets(){return parseInt(this.getAttribute("retweets")||"0",10)||0}set retweets(t){this.setAttribute("retweets",String(t))}get replies(){return parseInt(this.getAttribute("replies")||"0",10)||0}set replies(t){this.setAttribute("replies",String(t))}get media(){return this.getAttribute("media")||""}set media(t){this.setAttribute("media",t)}get href(){return this.getAttribute("href")||""}set href(t){this.setAttribute("href",t)}get variant(){return s(this.getAttribute("variant"),a,"default")}set variant(t){this.setAttribute("variant",t)}get size(){return s(this.getAttribute("size"),r,"m")}set size(t){this.setAttribute("size",t)}get loading(){return this.hasAttribute("loading")}set loading(t){this.toggleAttribute("loading",t)}get error(){return this.getAttribute("error")||""}set error(t){t?this.setAttribute("error",t):this.removeAttribute("error")}connectedCallback(){this.setAttribute("role","article"),this.built||(this.build(),this.built=!0),this.sync(),!this.tweetId||this.content||this.authorName||this.error||this.fetchTweetData(this.tweetId)}disconnectedCallback(){this.abortController?.abort(),this.replyBtn?.removeEventListener("click",this.handleReplyClick),this.retweetBtn?.removeEventListener("click",this.handleRetweetClick),this.likeBtn?.removeEventListener("click",this.handleLikeClick),this.shareBtn?.removeEventListener("click",this.handleShareClick),this.retryBtn?.removeEventListener("click",this.handleRetryClick)}attributeChangedCallback(t,e,i){this.built&&e!==i&&("tweet-id"!==t||!i||this.content||this.authorName?this.sync():this.fetchTweetData(i))}async fetchTweetData(t){this.abortController?.abort(),this.abortController=new AbortController,this.loading=!0,this.error="",this.sync();try{const e=`https://react-tweet.vercel.app/api/tweet/${t}`,i=await fetch(e,{signal:this.abortController.signal});if(!i.ok)throw new Error("Status "+i.status);const s=await i.json(),a=s.data||s;this.applyTweetPayload(a),this.loading=!1,this.error="",this.sync()}catch(t){if(this.abortController.signal.aborted)return;this.loading=!1,this.error=t instanceof Error?t.message:"Error",this.sync()}}applyTweetPayload(t){t&&(t.user&&(this.authorName=t.user.name||"",this.username=t.user.screen_name||"",this.avatar=t.user.profile_image_url_https||"",this.verified=Boolean(t.user.verified)),this.content=t.text||"",null!=t.favorite_count&&(this.likes=t.favorite_count),null!=t.retweet_count&&(this.retweets=t.retweet_count),null!=t.reply_count&&(this.replies=t.reply_count),t.created_at&&(this.date=t.created_at),t.photos&&t.photos.length>0?this.media=t.photos[0].url||"":t.mediaDetails&&t.mediaDetails.length>0&&(this.media=t.mediaDetails[0].media_url_https||""))}getTweetUrl(){return this.href?e(this.href):this.username&&this.tweetId?`https://x.com/${this.username}/status/${this.tweetId}`:this.tweetId?`https://x.com/i/status/${this.tweetId}`:"https://x.com"}build(){this.skeletonEl=document.createElement("div"),this.skeletonEl.className=`${n}__skeleton`,this.skeletonEl.setAttribute("aria-hidden","true");const e=document.createElement("div");e.className=`${n}__skel-header`;const s=document.createElement("div");s.className=`${n}__skel-avatar`;const a=document.createElement("div");a.className=`${n}__skel-info`;const r=document.createElement("div");r.className=`${n}__skel-line ${n}__skel-line--short`;const h=document.createElement("div");h.className=`${n}__skel-line ${n}__skel-line--xshort`,a.append(r,h),e.append(s,a);const l=document.createElement("div");l.className=`${n}__skel-body`;const o=document.createElement("div");o.className=`${n}__skel-line`;const d=document.createElement("div");d.className=`${n}__skel-line`;const c=document.createElement("div");c.className=`${n}__skel-line ${n}__skel-line--mid`,l.append(o,d,c),this.skeletonEl.append(e,l),this.errorEl=document.createElement("div"),this.errorEl.className=`${n}__error`,this.errorTextEl=document.createElement("span"),this.errorTextEl.className=`${n}__error-text`,this.retryBtn=document.createElement("button"),this.retryBtn.type="button",this.retryBtn.className=`${n}__retry-btn`,this.retryBtn.textContent=i("tweetCard.retry"),this.retryBtn.addEventListener("click",this.handleRetryClick),this.errorEl.append(this.errorTextEl,this.retryBtn),this.headerEl=document.createElement("div"),this.headerEl.className=`${n}__header`;const u=document.createElement("div");u.className=`${n}__user`,this.avatarImg=document.createElement("img"),this.avatarImg.className=`${n}__avatar`,this.avatarImg.alt="",this.avatarImg.setAttribute("aria-hidden","true"),this.avatarFallback=document.createElement("div"),this.avatarFallback.className=`${n}__avatar ${n}__avatar--fallback`,this.avatarFallback.setAttribute("aria-hidden","true");const m=document.createElement("div");m.className=`${n}__meta`;const p=document.createElement("div");p.className=`${n}__name-line`,this.authorNameEl=document.createElement("span"),this.authorNameEl.className=`${n}__author-name`,this.verifiedBadgeEl=document.createElement("span"),this.verifiedBadgeEl.className=`${n}__verified`,this.verifiedBadgeEl.title=i("tweetCard.verified"),this.verifiedBadgeEl.append(t("verified-badge",16)),p.append(this.authorNameEl,this.verifiedBadgeEl),this.authorHandleEl=document.createElement("span"),this.authorHandleEl.className=`${n}__username`,m.append(p,this.authorHandleEl),u.append(this.avatarImg,this.avatarFallback,m),this.xLogoLink=document.createElement("a"),this.xLogoLink.className=`${n}__logo-link`,this.xLogoLink.target="_blank",this.xLogoLink.rel="noopener noreferrer",this.xLogoLink.setAttribute("aria-label",i("tweetCard.viewOnTwitter")),this.xLogoLink.append(t("x-logo",18)),this.headerEl.append(u,this.xLogoLink),this.bodyEl=document.createElement("div"),this.bodyEl.className=`${n}__body`,this.mediaContainer=document.createElement("div"),this.mediaContainer.className=`${n}__media`,this.mediaImg=document.createElement("img"),this.mediaImg.loading="lazy",this.mediaImg.alt="",this.mediaContainer.append(this.mediaImg),this.dateEl=document.createElement("div"),this.dateEl.className=`${n}__date`,this.actionsRow=document.createElement("div"),this.actionsRow.className=`${n}__actions`,this.replyBtn=document.createElement("button"),this.replyBtn.type="button",this.replyBtn.className=`${n}__action-btn ${n}__action-btn--reply`,this.replyBtn.setAttribute("aria-label",i("tweetCard.reply")),this.replyBtn.append(t("comment",16)),this.replyCountSpan=document.createElement("span"),this.replyBtn.append(this.replyCountSpan),this.replyBtn.addEventListener("click",this.handleReplyClick),this.retweetBtn=document.createElement("button"),this.retweetBtn.type="button",this.retweetBtn.className=`${n}__action-btn ${n}__action-btn--retweet`,this.retweetBtn.setAttribute("aria-label",i("tweetCard.retweet")),this.retweetBtn.append(t("repeat",16)),this.retweetCountSpan=document.createElement("span"),this.retweetBtn.append(this.retweetCountSpan),this.retweetBtn.addEventListener("click",this.handleRetweetClick),this.likeBtn=document.createElement("button"),this.likeBtn.type="button",this.likeBtn.className=`${n}__action-btn ${n}__action-btn--like`,this.likeBtn.setAttribute("aria-label",i("tweetCard.like")),this.likeCountSpan=document.createElement("span"),this.likeBtn.append(t("heart",16),this.likeCountSpan),this.likeBtn.addEventListener("click",this.handleLikeClick),this.shareBtn=document.createElement("button"),this.shareBtn.type="button",this.shareBtn.className=`${n}__action-btn ${n}__action-btn--share`,this.shareBtn.setAttribute("aria-label","Share"),this.shareBtn.append(t("share-alt",16)),this.shareBtn.addEventListener("click",this.handleShareClick),this.actionsRow.append(this.replyBtn,this.retweetBtn,this.likeBtn,this.shareBtn),this.append(this.skeletonEl,this.errorEl,this.headerEl,this.bodyEl,this.mediaContainer,this.dateEl,this.actionsRow)}updateLikeButton(){if(!this.likeBtn||!this.likeCountSpan)return;this.likeBtn.classList.toggle(`${n}__action-btn--liked`,this.isLiked);const e=t(this.isLiked?"heart-filled":"heart",16);this.likeBtn.replaceChildren(e,this.likeCountSpan),this.likeCountSpan.textContent=formatCount(this.localLikes)}sync(){this.classList.add(n),a.forEach(t=>this.classList.remove(`${n}--${t}`)),r.forEach(t=>this.classList.remove(`${n}--${t}`)),this.classList.add(`${n}--${this.variant}`),this.classList.add(`${n}--${this.size}`);const t=this.loading,s=Boolean(this.error);this.classList.toggle(`${n}--loading`,t),this.classList.toggle(`${n}--error`,s),this.setAttribute("aria-busy",String(t)),s?this.setAttribute("aria-invalid","true"):this.removeAttribute("aria-invalid"),this.skeletonEl&&(this.skeletonEl.hidden=!t),this.errorEl&&(this.errorEl.hidden=!s||t,this.errorTextEl&&(this.errorTextEl.textContent=this.error||i("tweetCard.error")));const h=!t&&!s;if(this.headerEl&&(this.headerEl.hidden=!h),this.bodyEl&&(this.bodyEl.hidden=!h),this.mediaContainer&&(this.mediaContainer.hidden=!h||!this.media),this.dateEl&&(this.dateEl.hidden=!h||!this.date),this.actionsRow&&(this.actionsRow.hidden=!h),!h)return;this.authorNameEl&&(this.authorNameEl.textContent=this.authorName||this.username||"User"),this.authorHandleEl&&(this.authorHandleEl.textContent=this.username?`@${this.username}`:"",this.authorHandleEl.hidden=!this.username),this.verifiedBadgeEl&&(this.verifiedBadgeEl.hidden=!this.verified);const l=this.avatar;l&&this.avatarImg?(this.avatarImg.src=e(l),this.avatarImg.hidden=!1,this.avatarFallback&&(this.avatarFallback.hidden=!0)):this.avatarFallback&&(this.avatarFallback.textContent=(this.authorName||this.username||"U").charAt(0).toUpperCase(),this.avatarFallback.hidden=!1,this.avatarImg&&(this.avatarImg.hidden=!0));const o=this.getTweetUrl();if(this.xLogoLink&&(this.xLogoLink.href=o),this.bodyEl){const t=this.content;this.bodyEl.replaceChildren(...function parseTweetContentNodes(t){const i=[],s=/(https?:\/\/[^\s]+)|(@[a-zA-Z0-9_]+)|(#[a-zA-Z0-9_\u0080-\uffff]+)/g;let a,r=0;for(;null!==(a=s.exec(t));){a.index>r&&i.push(document.createTextNode(t.slice(r,a.index)));const s=a[0],h=document.createElement("a");h.className=`${n}__link`,h.textContent=s,h.target="_blank",h.rel="noopener noreferrer",s.startsWith("http")?h.href=e(s):s.startsWith("@")?h.href=e(`https://x.com/${s.slice(1)}`):s.startsWith("#")&&(h.href=e(`https://x.com/hashtag/${s.slice(1)}`)),i.push(h),r=a.index+s.length}return r<t.length&&i.push(document.createTextNode(t.slice(r))),i}(t))}this.mediaImg&&this.media&&(this.mediaImg.src=e(this.media)),this.dateEl&&this.date&&(this.dateEl.textContent=this.date),this.localLikes=this.likes,this.replyCountSpan&&(this.replyCountSpan.textContent=formatCount(this.replies)),this.retweetCountSpan&&(this.retweetCountSpan.textContent=formatCount(this.retweets)),this.updateLikeButton()}}customElements.get("db-tweet-card")||customElements.define("db-tweet-card",DbTweetCard);export{DbTweetCard};

package/dist/esm/components/db-two-factor.d.ts

@@ -2,7 +2,7 @@ import './db-button.js';
 import './db-input.js';
 import './db-otp-input.js';
 import './db-segment-control.js';
-import { TWO_FACTOR_SIZES } from '@designbasekorea/ui-contracts';
+import { TWO_FACTOR_SIZES } from '../ui-contracts/dist/components.d.js';
 
 /**
  * ui-wc — db-two-factor (수동 작성, 자동 동기화 대상 아님)