@designbasekorea/ui-wc 0.8.13 → 0.9.0

package/dist/esm/components/db-menu-item.js

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";import{sanitizeHref as t}from"../core/safe-url.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{MENU_ITEM_SIZES as s,MENU_ITEM_VARIANTS as n}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbMenuItem extends HTMLElement{static get observedAttributes(){return["label","href","icon","active","disabled","badge","badge-color","size","variant","type","menu-style","expanded","expandable","sub-items","depth"]}get subItems(){try{return JSON.parse(this.getAttribute("sub-items")||"[]")}catch{return[]}}set subItems(e){this.setAttribute("sub-items","string"==typeof e?e:JSON.stringify(e))}get expanded(){return this.hasAttribute("expanded")}set expanded(e){this.toggleAttribute("expanded",e)}connectedCallback(){this.render()}iconSize(e){return"s"===e?16:"l"===e?24:16}render(){const a=this.getAttribute("label")||"",d=t(this.getAttribute("href"),""),c=this.getAttribute("icon"),r=i(this.getAttribute("size"),s,"m"),b=i(this.getAttribute("variant"),n,"default"),m=this.getAttribute("type")||"block",o=this.getAttribute("menu-style")||"accordion",u=Number(this.getAttribute("depth")||0),l=this.hasAttribute("active"),h=this.hasAttribute("disabled"),p=this.getAttribute("badge")||"",g=this.getAttribute("badge-color")||"primary",A=this.subItems,w=A.length>0,v=this.hasAttribute("expandable")||w,_=this.expanded,f=this.iconSize(r),x="accordion"===o&&w;this.className=["designbase-wc-menu-item",`designbase-wc-menu-item--${m}`,`designbase-wc-menu-item--${r}`,`designbase-wc-menu-item--${b}`,`designbase-wc-menu-item--${o}`,`designbase-wc-menu-item--depth-${u}`,l&&"designbase-wc-menu-item--active",h&&"designbase-wc-menu-item--disabled",v&&"designbase-wc-menu-item--expandable",_&&"designbase-wc-menu-item--expanded",w&&"designbase-wc-menu-item--with-children",p&&"designbase-wc-menu-item--with-badge",c&&"designbase-wc-menu-item--with-icon"].filter(Boolean).join(" "),this.replaceChildren();const E=document.createElement("div");if(E.className=["designbase-wc-menu-item__content","designbase-wc-menu-item__content--clickable"].join(" "),c){const t=document.createElement("div");t.className=["designbase-wc-menu-item__icon",`designbase-wc-menu-item__icon--${b}`,l&&"designbase-wc-menu-item__icon--active",h&&"designbase-wc-menu-item__icon--disabled"].filter(Boolean).join(" "),t.append(e(c,f)),E.append(t)}const y=document.createElement("span");if(y.className="designbase-wc-menu-item__label",y.textContent=a,E.append(y),p){const e=document.createElement("db-badge");e.setAttribute("size","s"),e.setAttribute("variant",g),e.setAttribute("type","number"),e.setAttribute("count",p),E.append(e)}if(w){const t=document.createElement("div");t.className="designbase-wc-menu-item__expand-icon",t.append(e(_?"chevron-up":"chevron-down",16)),E.append(t)}if(E.addEventListener("click",e=>{h||(w&&v?(e.preventDefault(),this.expanded=!this.expanded):d&&(window.location.href=d),this.dispatchEvent(new CustomEvent("db-click",{detail:{label:a,href:d,expanded:this.expanded},bubbles:!0,composed:!0})))}),this.append(E),w&&(_||x)){const e=document.createElement("div");e.className=`designbase-wc-menu-item__children designbase-wc-menu-item__children--${o}`,x&&e.setAttribute("aria-hidden",_?"false":"true"),A.forEach(i=>{const s=document.createElement("db-menu-item");s.setAttribute("label",i.label),s.setAttribute("type","block"),s.setAttribute("menu-style",o),s.setAttribute("size",r),s.setAttribute("depth",String(u+1));const n=t(i.href,"");n&&s.setAttribute("href",n),i.icon&&s.setAttribute("icon",i.icon),i.active&&s.setAttribute("active",""),i.disabled&&s.setAttribute("disabled",""),void 0!==i.badge&&s.setAttribute("badge",String(i.badge)),i.badgeColor&&s.setAttribute("badge-color",i.badgeColor),i.variant&&s.setAttribute("variant",i.variant),s.addEventListener("db-click",e=>{e.stopPropagation(),i.disabled||this.dispatchEvent(new CustomEvent("db-child-click",{detail:{child:i},bubbles:!0,composed:!0}))}),e.append(s)}),this.append(e)}}attributeChangedCallback(e){this.isConnected&&("expanded"!==e||"accordion"!==this.getAttribute("menu-style")?this.render():this.syncExpandedState())}syncExpandedState(){const t=this.expanded;this.classList.toggle("designbase-wc-menu-item--expanded",t);const i=this.querySelector(".designbase-wc-menu-item__expand-icon");i&&i.replaceChildren(e(t?"chevron-up":"chevron-down",16));const s=this.querySelector(".designbase-wc-menu-item__children--accordion");s?s.setAttribute("aria-hidden",t?"false":"true"):t&&this.subItems.length&&this.render()}}customElements.get("db-menu-item")||customElements.define("db-menu-item",DbMenuItem);export{DbMenuItem};
+import{createDbIcon as e}from"./db-icons.js";import{sanitizeHref as t}from"../core/safe-url.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{MENU_ITEM_SIZES as n,MENU_ITEM_VARIANTS as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbMenuItem extends HTMLElement{constructor(){super(...arguments),this.childrenId="db-menu-children-"+ ++DbMenuItem.nextId}static get observedAttributes(){return["label","href","icon","active","disabled","badge","badge-color","size","variant","type","menu-style","expanded","expandable","sub-items","depth"]}get subItems(){try{return JSON.parse(this.getAttribute("sub-items")||"[]")}catch{return[]}}set subItems(e){this.setAttribute("sub-items","string"==typeof e?e:JSON.stringify(e))}get expanded(){return this.hasAttribute("expanded")}set expanded(e){this.toggleAttribute("expanded",e)}connectedCallback(){this.render()}iconSize(e){return"s"===e?16:"l"===e?24:16}render(){const d=this.getAttribute("label")||"",a=t(this.getAttribute("href"),""),r=this.getAttribute("icon"),c=i(this.getAttribute("size"),n,"m"),b=i(this.getAttribute("variant"),s,"default"),u=this.getAttribute("type")||"block",o=this.getAttribute("menu-style")||"accordion",m=Number(this.getAttribute("depth")||0),l=this.hasAttribute("active"),h=this.hasAttribute("disabled"),p=(this.getAttribute("badge")||"").trim(),g=this.getAttribute("badge-color")||"primary",A=this.subItems,w=A.length>0,x=this.hasAttribute("expandable")||w,v=this.expanded,_=this.iconSize(c),f="accordion"===o&&w;this.className=["designbase-wc-menu-item",`designbase-wc-menu-item--${u}`,`designbase-wc-menu-item--${c}`,`designbase-wc-menu-item--${b}`,`designbase-wc-menu-item--${o}`,`designbase-wc-menu-item--depth-${m}`,l&&"designbase-wc-menu-item--active",h&&"designbase-wc-menu-item--disabled",x&&"designbase-wc-menu-item--expandable",v&&"designbase-wc-menu-item--expanded",w&&"designbase-wc-menu-item--with-children",p&&"designbase-wc-menu-item--with-badge",r&&"designbase-wc-menu-item--with-icon"].filter(Boolean).join(" "),this.replaceChildren();const y=document.createElement("button");if(y.type="button",y.title=d,y.disabled=h,l&&y.setAttribute("aria-current","page"),w&&(y.setAttribute("aria-expanded",String(v)),(f||v)&&y.setAttribute("aria-controls",this.childrenId)),y.addEventListener("keydown",e=>{w&&!h&&("ArrowRight"===e.key&&!this.expanded||"ArrowLeft"===e.key&&this.expanded)&&(e.preventDefault(),y.click())}),y.className=["designbase-wc-menu-item__content","designbase-wc-menu-item__content--clickable"].join(" "),r){const t=document.createElement("div");t.className=["designbase-wc-menu-item__icon",`designbase-wc-menu-item__icon--${b}`,l&&"designbase-wc-menu-item__icon--active",h&&"designbase-wc-menu-item__icon--disabled"].filter(Boolean).join(" "),t.append(e(r,_)),y.append(t)}const E=document.createElement("span");if(E.className="designbase-wc-menu-item__label",E.textContent=d,y.append(E),p){const e=document.createElement("db-badge");e.setAttribute("size","s"),e.setAttribute("variant",g),Number.isFinite(Number(p))?(e.setAttribute("type","number"),e.setAttribute("count",p),e.setAttribute("max-count","999")):(e.setAttribute("type","text"),e.textContent=p),y.append(e)}if(w){const t=document.createElement("div");t.className="designbase-wc-menu-item__expand-icon",t.append(e(v?"chevron-up":"chevron-down",16)),y.append(t)}if(y.addEventListener("click",e=>{h||(w&&x?(e.preventDefault(),this.expanded=!this.expanded):a&&(window.location.href=a),this.dispatchEvent(new CustomEvent("db-click",{detail:{label:d,href:a,expanded:this.expanded},bubbles:!0,composed:!0})))}),this.append(y),w&&(v||f)){const e=document.createElement("div");e.className=`designbase-wc-menu-item__children designbase-wc-menu-item__children--${o}`,e.id=this.childrenId,e.inert=!v||h,f&&e.setAttribute("aria-hidden",v?"false":"true"),A.forEach(i=>{const n=document.createElement("db-menu-item");n.setAttribute("label",i.label),n.setAttribute("type","block"),n.setAttribute("menu-style",o),n.setAttribute("size",c),n.setAttribute("depth",String(m+1));const s=t(i.href,"");s&&n.setAttribute("href",s),i.icon&&n.setAttribute("icon",i.icon),i.active&&n.setAttribute("active",""),i.disabled&&n.setAttribute("disabled",""),void 0!==i.badge&&n.setAttribute("badge",String(i.badge)),i.badgeColor&&n.setAttribute("badge-color",i.badgeColor),i.variant&&n.setAttribute("variant",i.variant),n.addEventListener("db-click",e=>{e.stopPropagation(),i.disabled||this.dispatchEvent(new CustomEvent("db-child-click",{detail:{child:i},bubbles:!0,composed:!0}))}),e.append(n)}),this.append(e)}}attributeChangedCallback(e){this.isConnected&&("expanded"!==e||"accordion"!==this.getAttribute("menu-style")?this.render():this.syncExpandedState())}syncExpandedState(){const t=this.expanded;this.classList.toggle("designbase-wc-menu-item--expanded",t),this.querySelector(":scope > .designbase-wc-menu-item__content")?.setAttribute("aria-expanded",String(t));const i=this.querySelector(".designbase-wc-menu-item__expand-icon");i&&i.replaceChildren(e(t?"chevron-up":"chevron-down",16));const n=this.querySelector(".designbase-wc-menu-item__children--accordion");n?(n.inert=!t||this.hasAttribute("disabled"),n.setAttribute("aria-hidden",t?"false":"true")):t&&this.subItems.length&&this.render()}}DbMenuItem.nextId=0,customElements.get("db-menu-item")||customElements.define("db-menu-item",DbMenuItem);export{DbMenuItem};

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

@@ -20,7 +20,7 @@ declare class DbModal extends HTMLElement {
     private childObserver?;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    attributeChangedCallback(name: string): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     private resolvedSize;
     get size(): string;
     set size(value: string);

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

@@ -1 +1 @@
-import{createDbIcon as t}from"./db-icons.js";import{dbUid as e}from"../core/uid.js";import{createFocusTrap as s}from"../core/focus-trap.js";import{lockScroll as i,unlockScroll as n}from"../core/scroll-lock.js";import{labelFrom as r}from"../core/i18n.js";import{MODAL_SIZES as a}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";import{coerceToContract as o}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";const l=["default","tabs","segment"],d=["s","m","l"];class DbModal extends HTMLElement{constructor(){super(...arguments),this.titleId=e("db-modal-title"),this.isMounted=!1,this.internalTabId="",this.internalSegment="",this.exitTimerId=null,this.handleDocumentKeyDown=t=>{"Escape"===t.key&&this.open&&"false"!==this.getAttribute("close-on-escape")&&(t.preventDefault(),this.close())}}static get observedAttributes(){return["open","title","size","header-variant","tabs","segments","selected-tab-id","default-selected-tab-id","segment-value","default-segment-value","nav-size","segment-full-width","close-on-outside-click","close-on-escape","show-close-button","role","describedby","label-close"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(t){t?this.setAttribute("open","true"):this.removeAttribute("open")}connectedCallback(){this.classList.add("designbase-wc-modal-host"),document.addEventListener("keydown",this.handleDocumentKeyDown),this.childObserver=new MutationObserver(()=>{this.open&&this.render()}),this.childObserver.observe(this,{childList:!0}),this.syncOpenState()}disconnectedCallback(){this.childObserver?.disconnect(),document.removeEventListener("keydown",this.handleDocumentKeyDown),this.exitTimerId&&clearTimeout(this.exitTimerId),this.teardown()}attributeChangedCallback(t){if(this.isConnected)if("open"!==t){if("selected-tab-id"===t||"segment-value"===t){const t=this.getClassifiedChildren();return this.renderBodyContent(t.body),void this.renderHeader(t.header)}this.render(),this.isMounted&&this.syncVisibility()}else this.syncOpenState()}resolvedSize(){return a.includes(this.size)?this.size:"m"}get size(){return o(this.getAttribute("size"),a,"m")}set size(t){t?this.setAttribute("size",t):this.removeAttribute("size")}resolvedHeaderVariant(){const t=this.getAttribute("header-variant")||"default";return l.includes(t)?t:"default"}parsedTabs(){const t=this.getAttribute("tabs");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}parsedSegments(){const t=this.getAttribute("segments");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}usesIntegratedNav(){const t=this.resolvedHeaderVariant();return"tabs"===t&&this.parsedTabs().length>0||"segment"===t&&this.parsedSegments().length>0}closeIconSize(){const t=this.resolvedSize();return"s"===t?16:"l"===t?20:"xl"===t?24:18}activeTabId(){return this.getAttribute("selected-tab-id")||this.internalTabId||this.getAttribute("default-selected-tab-id")||this.parsedTabs()[0]?.id||""}activeSegmentValue(){return this.getAttribute("segment-value")||this.internalSegment||this.getAttribute("default-segment-value")||this.parsedSegments()[0]?.value||""}collectUserChildren(){return Array.from(this.children).filter(t=>!t.hasAttribute("data-wc-internal"))}classifyChildren(t){const e=t.filter(t=>this.isHeaderPart(t)),s=t.filter(t=>this.isFooterPart(t)),i=t.filter(t=>this.isBodyPart(t)),n=t.filter(t=>!e.includes(t)&&!s.includes(t)&&!i.includes(t));return{header:e,body:[...i,...n],footer:s}}getClassifiedChildren(){const t=this.classifyChildren(this.collectUserChildren());if(t.header.length||t.body.length||t.footer.length)return t;return{header:Array.from(this.headerEl?.children||[]).filter(t=>t!==this.closeButton&&!t.classList.contains("designbase-wc-modal__header-row")&&("header"===t.getAttribute("data-modal-part")||t.classList.contains("designbase-wc-modal__header"))),body:this.collectContentParts("body"),footer:this.collectContentParts("footer")}}isHeaderPart(t){return t.classList.contains("designbase-wc-modal__header")||"header"===t.getAttribute("data-modal-part")}isBodyPart(t){return t.classList.contains("designbase-wc-modal__body")||"body"===t.getAttribute("data-modal-part")}isFooterContainer(t){return!(!t.classList.contains("designbase-wc-modal__footer")&&"footer"!==t.getAttribute("data-modal-part"))||"footer"===t.getAttribute("slot")&&("div"===t.localName||"footer"===t.localName)}isFooterPart(t){return this.isFooterContainer(t)||"footer"===t.getAttribute("slot")}collectContentParts(t){if(!this.contentEl)return[];const e=Array.from(this.contentEl.children).filter(e=>"body"===t?this.isBodyPart(e):this.isFooterPart(e));if(e.length>0)return e;const s="footer"===t?Array.from(this.contentEl.querySelectorAll(':scope > [data-wc-part="footer"] > [slot="footer"]')):[];return s.length>0?s:Array.from(this.children).filter(e=>"body"===t?this.isBodyPart(e):this.isFooterPart(e))}footerAnchor(){return this.contentEl?.querySelector(':scope > .designbase-wc-modal__footer, :scope > [data-modal-part="footer"], :scope > [data-wc-part="footer"]')||null}ensurePartShell(t){if(!this.contentEl)return null;const e=this.contentEl.querySelector(`:scope > [data-wc-part="${t}"]`);if(e)return e;const s=document.createElement("div");return s.className=`designbase-wc-modal__${t}`,s.setAttribute("data-modal-part",t),s.setAttribute("data-wc-part",t),s.setAttribute("data-wc-internal",""),"footer"===t?this.contentEl.append(s):this.contentEl.insertBefore(s,this.footerAnchor()),s}placeBodyParts(t){const e=this.contentEl;if(!e)return;const s=t.filter(t=>this.isBodyPart(t)),i=t.filter(t=>!this.isBodyPart(t)&&!this.isFooterPart(t));if(s.length>0){const t=e.querySelector(':scope > [data-wc-part="body"]');return s.forEach(t=>{t.parentElement!==e&&e.insertBefore(t,this.footerAnchor())}),void(t&&!s.includes(t)&&t.remove())}if(0===i.length)return;const n=this.ensurePartShell("body");n&&i.forEach(t=>{t.parentElement!==n&&n.append(t)})}placeFooterParts(t){const e=this.contentEl;if(!e)return;const s=t.filter(t=>this.isFooterContainer(t)),i=t.filter(t=>!this.isFooterContainer(t)&&"footer"===t.getAttribute("slot"));if(s.length>0){const t=e.querySelector(':scope > [data-wc-part="footer"]');return s.forEach(t=>{t.classList.add("designbase-wc-modal__footer"),t.hasAttribute("data-modal-part")||t.setAttribute("data-modal-part","footer"),t.parentElement!==e&&e.append(t)}),void(t&&!s.includes(t)&&t.remove())}if(0===i.length)return;const n=this.ensurePartShell("footer");n&&i.forEach(t=>{t.parentElement!==n&&n.append(t)})}restorePartsToHost(){this.contentEl&&(this.contentEl.querySelectorAll("[data-wc-part]").forEach(t=>{for(;t.firstChild;)this.append(t.firstChild)}),Array.from(this.contentEl.children).filter(t=>!t.classList.contains("designbase-wc-modal__integrated-content")&&!t.hasAttribute("data-wc-internal")).forEach(t=>{t.parentElement!==this&&this.append(t)}))}bindFooterActions(){if(!this.contentEl||"true"===this.contentEl.dataset.modalActionsBound)return;this.contentEl.dataset.modalActionsBound="true";const handleClose=t=>{const e=t.target?.closest("[data-modal-close]");e&&this.contentEl?.contains(e)&&this.close()};this.contentEl.addEventListener("click",handleClose),this.contentEl.addEventListener("db-click",handleClose)}ensureStructure(){this.root||(this.root=document.createElement("div"),this.root.className="designbase-wc-modal__overlay",this.root.setAttribute("data-wc-internal",""),this.root.addEventListener("click",t=>{t.target===this.root&&"false"!==this.getAttribute("close-on-outside-click")&&this.close()}),this.panel=document.createElement("div"),this.panel.className="designbase-wc-modal",this.panel.setAttribute("role",this.dialogRole()),this.panel.setAttribute("aria-modal","true"),this.panel.addEventListener("click",t=>t.stopPropagation()),this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-modal__header",this.headerContentEl=document.createElement("div"),this.headerContentEl.className="designbase-wc-modal__header-content",this.titleEl=document.createElement("h2"),this.titleEl.className="designbase-wc-modal__title",this.titleEl.id=this.titleId,this.closeButton=document.createElement("button"),this.closeButton.type="button",this.closeButton.className="designbase-wc-modal__close-button",this.closeButton.setAttribute("aria-label",r(this,"label-close","modal.close")),this.closeButton.addEventListener("click",()=>this.close()),this.navEl=document.createElement("div"),this.navEl.className="designbase-wc-modal__header-nav",this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-modal__content",this.panel.append(this.headerEl,this.contentEl),this.root.append(this.panel))}renderCloseButton(){if(!this.closeButton)return;const e=this.closeIconSize(),s=t("close",e);s.setAttribute("aria-hidden","true"),this.closeButton.replaceChildren(s),this.closeButton.setAttribute("aria-label",r(this,"label-close","modal.close")),this.closeButton.hidden="false"===this.getAttribute("show-close-button")}renderDefaultHeader(t){if(!(this.headerEl&&this.headerContentEl&&this.titleEl&&this.closeButton))return;if(this.headerEl.className="designbase-wc-modal__header",this.headerEl.replaceChildren(),t.length>0)return t.forEach(t=>this.headerEl.append(t)),void("false"!==this.getAttribute("show-close-button")&&this.headerEl.append(this.closeButton));const e=this.getAttribute("title")||"";this.titleEl.textContent=e,this.titleEl.hidden=!e,this.headerContentEl.replaceChildren(),e&&this.headerContentEl.append(this.titleEl),this.renderCloseButton(),this.headerEl.append(this.headerContentEl),"false"!==this.getAttribute("show-close-button")&&this.headerEl.append(this.closeButton),this.panel&&(e?this.panel.setAttribute("aria-labelledby",this.titleId):this.panel.removeAttribute("aria-labelledby"),this.panel.setAttribute("role",this.dialogRole()),this.syncDescribedBy())}renderNavHeader(){if(!(this.headerEl&&this.headerContentEl&&this.titleEl&&this.closeButton&&this.navEl))return;const t=this.resolvedHeaderVariant(),e=this.parsedTabs(),s=this.parsedSegments(),i=d.includes(this.getAttribute("nav-size")||"m")?this.getAttribute("nav-size")||"m":"s";this.headerEl.className=["designbase-wc-modal__header","tabs"===t&&"designbase-wc-modal__header--tabs","segment"===t&&"designbase-wc-modal__header--segment"].filter(Boolean).join(" ");const n=this.getAttribute("title")||"";this.titleEl.textContent=n,this.titleEl.hidden=!n,this.headerContentEl.replaceChildren(),n&&this.headerContentEl.append(this.titleEl),this.renderCloseButton();const r=document.createElement("div");if(r.className="designbase-wc-modal__header-row",r.append(this.headerContentEl),"false"!==this.getAttribute("show-close-button")&&r.append(this.closeButton),this.headerEl.replaceChildren(r),this.navEl.replaceChildren(),"tabs"===t&&e.length>0){const t=document.createElement("db-tabs");t.setAttribute("size",i),t.setAttribute("items",JSON.stringify(e.map(t=>({id:t.id,label:t.label,disabled:t.disabled})))),t.setAttribute("selected-id",this.activeTabId()),t.addEventListener("db-change",t=>{const e=t.detail?.id;e&&(this.hasAttribute("selected-tab-id")||(this.internalTabId=e),this.dispatchEvent(new CustomEvent("db-tab-change",{detail:{tabId:e},bubbles:!0,composed:!0})),this.renderBodyContent(this.getClassifiedChildren().body))}),this.tabsEl=t,this.navEl.append(t),this.headerEl.append(this.navEl)}if("segment"===t&&s.length>0){const t=document.createElement("db-segment-control");t.setAttribute("size",i),t.setAttribute("options",JSON.stringify(s.map(t=>({value:t.value,label:t.label,disabled:t.disabled})))),t.setAttribute("value",this.activeSegmentValue()),"false"!==this.getAttribute("segment-full-width")&&t.setAttribute("full-width",""),t.addEventListener("db-change",t=>{const e=t.detail?.value;e&&(this.hasAttribute("segment-value")||(this.internalSegment=e),this.dispatchEvent(new CustomEvent("db-segment-change",{detail:{value:e},bubbles:!0,composed:!0})),this.renderBodyContent(this.getClassifiedChildren().body))}),this.segmentEl=t,this.navEl.append(t),this.headerEl.append(this.navEl)}this.panel&&(n?this.panel.setAttribute("aria-labelledby",this.titleId):this.panel.removeAttribute("aria-labelledby"))}renderHeader(t){if(!this.headerEl)return;if(t.length>0)return this.headerEl.hidden=!1,void this.renderDefaultHeader(t);if(this.usesIntegratedNav())return this.headerEl.hidden=!1,void this.renderNavHeader();this.getAttribute("title")||""?(this.headerEl.hidden=!1,this.renderDefaultHeader([])):this.headerEl.hidden=!0}renderBodyContent(t=[]){if(!this.contentEl)return;let e=this.contentEl.querySelector(":scope > .designbase-wc-modal__integrated-content"),s="";if(this.usesIntegratedNav()){const t=this.resolvedHeaderVariant();if("tabs"===t){const t=this.parsedTabs().find(t=>t.id===this.activeTabId());s=t?.content||""}if("segment"===t){const t=this.parsedSegments().find(t=>t.value===this.activeSegmentValue());s=t?.content||""}}s?(e||(e=document.createElement("div"),e.className="designbase-wc-modal__integrated-content designbase-wc-modal__body",this.contentEl.insertBefore(e,this.contentEl.firstChild)),e.textContent=s):e?.remove(),this.placeBodyParts(t)}renderFooter(t){this.contentEl&&(this.placeFooterParts(t),t.forEach(t=>{t instanceof HTMLElement&&(t.hidden=!1)}),this.bindFooterActions())}render(){this.ensureStructure();const{header:t,body:e,footer:s}=this.getClassifiedChildren();a.forEach(t=>this.panel?.classList.remove(`designbase-wc-modal--${t}`)),this.panel?.classList.add(`designbase-wc-modal--${this.resolvedSize()}`),this.renderHeader(t),this.renderBodyContent(e),this.renderFooter(s)}syncVisibility(){if(this.root&&this.panel){if(this.open)return this.root.setAttribute("data-state","entering"),this.panel.setAttribute("data-state","entering"),void requestAnimationFrame(()=>{this.panel,requestAnimationFrame(()=>{this.open&&this.root&&this.panel&&(this.root.setAttribute("data-state","entered"),this.panel.setAttribute("data-state","entered"))})});this.root.setAttribute("data-state","exiting"),this.panel.setAttribute("data-state","exiting")}}syncOpenState(){if(this.open){if(this.render(),this.root&&!this.root.isConnected){(this.closest(".designbase-wp-admin")||document.body).append(this.root)}return this.isMounted||i(),this.isMounted=!0,this.syncVisibility(),void this.activateFocusTrap()}this.isMounted&&(this.syncVisibility(),this.focusTrap?.deactivate(),this.focusTrap=void 0,this.exitTimerId&&clearTimeout(this.exitTimerId),this.exitTimerId=window.setTimeout(()=>{this.open||this.teardown()},200))}activateFocusTrap(){this.panel&&!this.focusTrap&&(this.focusTrap=s(this.panel,{initialFocus:()=>this.panel?.querySelector("[autofocus]")||null}),this.focusTrap.activate())}teardown(){this.focusTrap?.deactivate(),this.focusTrap=void 0,this.restorePartsToHost(),this.root?.remove(),this.isMounted&&n(),this.isMounted=!1}dialogRole(){return"alertdialog"===this.getAttribute("role")?"alertdialog":"dialog"}syncDescribedBy(){if(!this.panel)return;const t=this.getAttribute("describedby");t?this.panel.setAttribute("aria-describedby",t):this.contentEl&&(this.contentEl.textContent||"").trim()?(this.contentEl.id||(this.contentEl.id=e("db-modal-desc")),this.panel.setAttribute("aria-describedby",this.contentEl.id)):this.panel.removeAttribute("aria-describedby")}close(){this.open=!1,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}}customElements.get("db-modal")||customElements.define("db-modal",DbModal);export{DbModal};
+import{createDbIcon as t}from"./db-icons.js";import{dbUid as e}from"../core/uid.js";import{createFocusTrap as s}from"../core/focus-trap.js";import{lockScroll as i,unlockScroll as n}from"../core/scroll-lock.js";import{labelFrom as r}from"../core/i18n.js";import{MODAL_SIZES as a}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";import{coerceToContract as o}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";const l=["default","tabs","segment"],d=["s","m","l"];class DbModal extends HTMLElement{constructor(){super(...arguments),this.titleId=e("db-modal-title"),this.isMounted=!1,this.internalTabId="",this.internalSegment="",this.exitTimerId=null,this.handleDocumentKeyDown=t=>{"Escape"===t.key&&this.open&&"false"!==this.getAttribute("close-on-escape")&&(t.preventDefault(),this.close())}}static get observedAttributes(){return["open","title","size","header-variant","tabs","segments","selected-tab-id","default-selected-tab-id","segment-value","default-segment-value","nav-size","segment-full-width","close-on-outside-click","close-on-escape","show-close-button","role","describedby","label-close"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(t){t?this.setAttribute("open","true"):this.removeAttribute("open")}connectedCallback(){this.classList.add("designbase-wc-modal-host"),document.addEventListener("keydown",this.handleDocumentKeyDown),this.childObserver=new MutationObserver(()=>{this.open&&this.render()}),this.childObserver.observe(this,{childList:!0}),this.syncOpenState()}disconnectedCallback(){this.childObserver?.disconnect(),document.removeEventListener("keydown",this.handleDocumentKeyDown),this.exitTimerId&&clearTimeout(this.exitTimerId),this.teardown()}attributeChangedCallback(t,e,s){if(e!==s&&this.isConnected)if("open"!==t){if("selected-tab-id"===t||"segment-value"===t){const t=this.getClassifiedChildren();return this.renderBodyContent(t.body),void this.renderHeader(t.header)}this.render(),this.isMounted&&this.syncVisibility()}else this.syncOpenState()}resolvedSize(){return a.includes(this.size)?this.size:"m"}get size(){return o(this.getAttribute("size"),a,"m")}set size(t){t?this.setAttribute("size",t):this.removeAttribute("size")}resolvedHeaderVariant(){const t=this.getAttribute("header-variant")||"default";return l.includes(t)?t:"default"}parsedTabs(){const t=this.getAttribute("tabs");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}parsedSegments(){const t=this.getAttribute("segments");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}usesIntegratedNav(){const t=this.resolvedHeaderVariant();return"tabs"===t&&this.parsedTabs().length>0||"segment"===t&&this.parsedSegments().length>0}closeIconSize(){const t=this.resolvedSize();return"s"===t?16:"l"===t?20:"xl"===t?24:18}activeTabId(){return this.getAttribute("selected-tab-id")||this.internalTabId||this.getAttribute("default-selected-tab-id")||this.parsedTabs()[0]?.id||""}activeSegmentValue(){return this.getAttribute("segment-value")||this.internalSegment||this.getAttribute("default-segment-value")||this.parsedSegments()[0]?.value||""}collectUserChildren(){return Array.from(this.children).filter(t=>!t.hasAttribute("data-wc-internal"))}classifyChildren(t){const e=t.filter(t=>this.isHeaderPart(t)),s=t.filter(t=>this.isFooterPart(t)),i=t.filter(t=>this.isBodyPart(t)),n=t.filter(t=>!e.includes(t)&&!s.includes(t)&&!i.includes(t));return{header:e,body:[...i,...n],footer:s}}getClassifiedChildren(){const t=this.classifyChildren(this.collectUserChildren());if(t.header.length||t.body.length||t.footer.length)return t;return{header:Array.from(this.headerEl?.children||[]).filter(t=>t!==this.closeButton&&!t.classList.contains("designbase-wc-modal__header-row")&&("header"===t.getAttribute("data-modal-part")||t.classList.contains("designbase-wc-modal__header"))),body:this.collectContentParts("body"),footer:this.collectContentParts("footer")}}isHeaderPart(t){return t.classList.contains("designbase-wc-modal__header")||"header"===t.getAttribute("data-modal-part")}isBodyPart(t){return t.classList.contains("designbase-wc-modal__body")||"body"===t.getAttribute("data-modal-part")}isFooterContainer(t){return!(!t.classList.contains("designbase-wc-modal__footer")&&"footer"!==t.getAttribute("data-modal-part"))||"footer"===t.getAttribute("slot")&&("div"===t.localName||"footer"===t.localName)}isFooterPart(t){return this.isFooterContainer(t)||"footer"===t.getAttribute("slot")}collectContentParts(t){if(!this.contentEl)return[];const e=Array.from(this.contentEl.children).filter(e=>"body"===t?this.isBodyPart(e):this.isFooterPart(e));if(e.length>0)return e;const s="footer"===t?Array.from(this.contentEl.querySelectorAll(':scope > [data-wc-part="footer"] > [slot="footer"]')):[];return s.length>0?s:Array.from(this.children).filter(e=>"body"===t?this.isBodyPart(e):this.isFooterPart(e))}footerAnchor(){return this.contentEl?.querySelector(':scope > .designbase-wc-modal__footer, :scope > [data-modal-part="footer"], :scope > [data-wc-part="footer"]')||null}ensurePartShell(t){if(!this.contentEl)return null;const e=this.contentEl.querySelector(`:scope > [data-wc-part="${t}"]`);if(e)return e;const s=document.createElement("div");return s.className=`designbase-wc-modal__${t}`,s.setAttribute("data-modal-part",t),s.setAttribute("data-wc-part",t),s.setAttribute("data-wc-internal",""),"footer"===t?this.contentEl.append(s):this.contentEl.insertBefore(s,this.footerAnchor()),s}placeBodyParts(t){const e=this.contentEl;if(!e)return;const s=t.filter(t=>this.isBodyPart(t)),i=t.filter(t=>!this.isBodyPart(t)&&!this.isFooterPart(t));if(s.length>0){const t=e.querySelector(':scope > [data-wc-part="body"]');return s.forEach(t=>{t.parentElement!==e&&e.insertBefore(t,this.footerAnchor())}),void(t&&!s.includes(t)&&t.remove())}if(0===i.length)return;const n=this.ensurePartShell("body");n&&i.forEach(t=>{t.parentElement!==n&&n.append(t)})}placeFooterParts(t){const e=this.contentEl;if(!e)return;const s=t.filter(t=>this.isFooterContainer(t)),i=t.filter(t=>!this.isFooterContainer(t)&&"footer"===t.getAttribute("slot"));if(s.length>0){const t=e.querySelector(':scope > [data-wc-part="footer"]');return s.forEach(t=>{t.classList.add("designbase-wc-modal__footer"),t.hasAttribute("data-modal-part")||t.setAttribute("data-modal-part","footer"),t.parentElement!==e&&e.append(t)}),void(t&&!s.includes(t)&&t.remove())}if(0===i.length)return;const n=this.ensurePartShell("footer");n&&i.forEach(t=>{t.parentElement!==n&&n.append(t)})}restorePartsToHost(){this.contentEl&&(this.contentEl.querySelectorAll("[data-wc-part]").forEach(t=>{for(;t.firstChild;)this.append(t.firstChild)}),Array.from(this.contentEl.children).filter(t=>!t.classList.contains("designbase-wc-modal__integrated-content")&&!t.hasAttribute("data-wc-internal")).forEach(t=>{t.parentElement!==this&&this.append(t)}))}bindFooterActions(){if(!this.contentEl||"true"===this.contentEl.dataset.modalActionsBound)return;this.contentEl.dataset.modalActionsBound="true";const handleClose=t=>{const e=t.target?.closest("[data-modal-close]");e&&this.contentEl?.contains(e)&&this.close()};this.contentEl.addEventListener("click",handleClose),this.contentEl.addEventListener("db-click",handleClose)}ensureStructure(){this.root||(this.root=document.createElement("div"),this.root.className="designbase-wc-modal__overlay",this.root.setAttribute("data-wc-internal",""),this.root.addEventListener("click",t=>{t.target===this.root&&"false"!==this.getAttribute("close-on-outside-click")&&this.close()}),this.panel=document.createElement("div"),this.panel.className="designbase-wc-modal",this.panel.setAttribute("role",this.dialogRole()),this.panel.setAttribute("aria-modal","true"),this.panel.addEventListener("click",t=>t.stopPropagation()),this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-modal__header",this.headerContentEl=document.createElement("div"),this.headerContentEl.className="designbase-wc-modal__header-content",this.titleEl=document.createElement("h2"),this.titleEl.className="designbase-wc-modal__title",this.titleEl.id=this.titleId,this.closeButton=document.createElement("button"),this.closeButton.type="button",this.closeButton.className="designbase-wc-modal__close-button",this.closeButton.setAttribute("aria-label",r(this,"label-close","modal.close")),this.closeButton.addEventListener("click",()=>this.close()),this.navEl=document.createElement("div"),this.navEl.className="designbase-wc-modal__header-nav",this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-modal__content",this.panel.append(this.headerEl,this.contentEl),this.root.append(this.panel))}renderCloseButton(){if(!this.closeButton)return;const e=this.closeIconSize(),s=t("close",e);s.setAttribute("aria-hidden","true"),this.closeButton.replaceChildren(s),this.closeButton.setAttribute("aria-label",r(this,"label-close","modal.close")),this.closeButton.hidden="false"===this.getAttribute("show-close-button")}renderDefaultHeader(t){if(!(this.headerEl&&this.headerContentEl&&this.titleEl&&this.closeButton))return;if(this.headerEl.className="designbase-wc-modal__header",this.headerEl.replaceChildren(),t.length>0)return t.forEach(t=>this.headerEl.append(t)),void("false"!==this.getAttribute("show-close-button")&&this.headerEl.append(this.closeButton));const e=this.getAttribute("title")||"";this.titleEl.textContent=e,this.titleEl.hidden=!e,this.headerContentEl.replaceChildren(),e&&this.headerContentEl.append(this.titleEl),this.renderCloseButton(),this.headerEl.append(this.headerContentEl),"false"!==this.getAttribute("show-close-button")&&this.headerEl.append(this.closeButton),this.panel&&(e?this.panel.setAttribute("aria-labelledby",this.titleId):this.panel.removeAttribute("aria-labelledby"),this.panel.setAttribute("role",this.dialogRole()),this.syncDescribedBy())}renderNavHeader(){if(!(this.headerEl&&this.headerContentEl&&this.titleEl&&this.closeButton&&this.navEl))return;const t=this.resolvedHeaderVariant(),e=this.parsedTabs(),s=this.parsedSegments(),i=d.includes(this.getAttribute("nav-size")||"m")?this.getAttribute("nav-size")||"m":"s";this.headerEl.className=["designbase-wc-modal__header","tabs"===t&&"designbase-wc-modal__header--tabs","segment"===t&&"designbase-wc-modal__header--segment"].filter(Boolean).join(" ");const n=this.getAttribute("title")||"";this.titleEl.textContent=n,this.titleEl.hidden=!n,this.headerContentEl.replaceChildren(),n&&this.headerContentEl.append(this.titleEl),this.renderCloseButton();const r=document.createElement("div");if(r.className="designbase-wc-modal__header-row",r.append(this.headerContentEl),"false"!==this.getAttribute("show-close-button")&&r.append(this.closeButton),this.headerEl.replaceChildren(r),this.navEl.replaceChildren(),"tabs"===t&&e.length>0){const t=document.createElement("db-tabs");t.setAttribute("size",i),t.setAttribute("items",JSON.stringify(e.map(t=>({id:t.id,label:t.label,disabled:t.disabled})))),t.setAttribute("selected-id",this.activeTabId()),t.addEventListener("db-change",t=>{const e=t.detail?.id;e&&(this.hasAttribute("selected-tab-id")||(this.internalTabId=e),this.dispatchEvent(new CustomEvent("db-tab-change",{detail:{tabId:e},bubbles:!0,composed:!0})),this.renderBodyContent(this.getClassifiedChildren().body))}),this.tabsEl=t,this.navEl.append(t),this.headerEl.append(this.navEl)}if("segment"===t&&s.length>0){const t=document.createElement("db-segment-control");t.setAttribute("size",i),t.setAttribute("options",JSON.stringify(s.map(t=>({value:t.value,label:t.label,disabled:t.disabled})))),t.setAttribute("value",this.activeSegmentValue()),"false"!==this.getAttribute("segment-full-width")&&t.setAttribute("full-width",""),t.addEventListener("db-change",t=>{const e=t.detail?.value;e&&(this.hasAttribute("segment-value")||(this.internalSegment=e),this.dispatchEvent(new CustomEvent("db-segment-change",{detail:{value:e},bubbles:!0,composed:!0})),this.renderBodyContent(this.getClassifiedChildren().body))}),this.segmentEl=t,this.navEl.append(t),this.headerEl.append(this.navEl)}this.panel&&(n?this.panel.setAttribute("aria-labelledby",this.titleId):this.panel.removeAttribute("aria-labelledby"))}renderHeader(t){if(!this.headerEl)return;if(t.length>0)return this.headerEl.hidden=!1,void this.renderDefaultHeader(t);if(this.usesIntegratedNav())return this.headerEl.hidden=!1,void this.renderNavHeader();this.getAttribute("title")||""?(this.headerEl.hidden=!1,this.renderDefaultHeader([])):this.headerEl.hidden=!0}renderBodyContent(t=[]){if(!this.contentEl)return;let e=this.contentEl.querySelector(":scope > .designbase-wc-modal__integrated-content"),s="";if(this.usesIntegratedNav()){const t=this.resolvedHeaderVariant();if("tabs"===t){const t=this.parsedTabs().find(t=>t.id===this.activeTabId());s=t?.content||""}if("segment"===t){const t=this.parsedSegments().find(t=>t.value===this.activeSegmentValue());s=t?.content||""}}s?(e||(e=document.createElement("div"),e.className="designbase-wc-modal__integrated-content designbase-wc-modal__body",this.contentEl.insertBefore(e,this.contentEl.firstChild)),e.textContent=s):e?.remove(),this.placeBodyParts(t)}renderFooter(t){this.contentEl&&(this.placeFooterParts(t),t.forEach(t=>{t instanceof HTMLElement&&(t.hidden=!1)}),this.bindFooterActions())}render(){this.ensureStructure();const{header:t,body:e,footer:s}=this.getClassifiedChildren();a.forEach(t=>this.panel?.classList.remove(`designbase-wc-modal--${t}`)),this.panel?.classList.add(`designbase-wc-modal--${this.resolvedSize()}`),this.renderHeader(t),this.renderBodyContent(e),this.renderFooter(s)}syncVisibility(){if(this.root&&this.panel){if(this.open){if(["entering","entered"].includes(this.root.getAttribute("data-state")||""))return;return this.root.setAttribute("data-state","entering"),this.panel.setAttribute("data-state","entering"),void requestAnimationFrame(()=>{this.panel,requestAnimationFrame(()=>{this.open&&this.root&&this.panel&&(this.root.setAttribute("data-state","entered"),this.panel.setAttribute("data-state","entered"))})})}this.root.setAttribute("data-state","exiting"),this.panel.setAttribute("data-state","exiting")}}syncOpenState(){if(this.open){if(this.render(),this.root&&!this.root.isConnected){(this.closest(".designbase-wp-admin")||document.body).append(this.root)}return this.isMounted||i(),this.isMounted=!0,this.syncVisibility(),void this.activateFocusTrap()}this.isMounted&&(this.syncVisibility(),this.focusTrap?.deactivate(),this.focusTrap=void 0,this.exitTimerId&&clearTimeout(this.exitTimerId),this.exitTimerId=window.setTimeout(()=>{this.open||this.teardown()},200))}activateFocusTrap(){this.panel&&!this.focusTrap&&(this.focusTrap=s(this.panel,{initialFocus:()=>this.panel?.querySelector("[autofocus]")||null}),this.focusTrap.activate())}teardown(){this.focusTrap?.deactivate(),this.focusTrap=void 0,this.restorePartsToHost(),this.root?.remove(),this.isMounted&&n(),this.isMounted=!1}dialogRole(){return"alertdialog"===this.getAttribute("role")?"alertdialog":"dialog"}syncDescribedBy(){if(!this.panel)return;const t=this.getAttribute("describedby");t?this.panel.setAttribute("aria-describedby",t):this.contentEl&&(this.contentEl.textContent||"").trim()?(this.contentEl.id||(this.contentEl.id=e("db-modal-desc")),this.panel.setAttribute("aria-describedby",this.contentEl.id)):this.panel.removeAttribute("aria-describedby")}close(){this.open=!1,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}}customElements.get("db-modal")||customElements.define("db-modal",DbModal);export{DbModal};

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

@@ -1,4 +1,4 @@
-import { BadgeVariant, BadgeType } from '@designbasekorea/ui-contracts';
+import { BadgeVariant, BadgeType } from '../ui-contracts/dist/components.d.js';
 
 interface DbNavbarItem {
     id: string;
@@ -44,6 +44,8 @@ interface DbNavbarUserProfile {
     badgeText?: string;
 }
 declare class DbNavbar extends HTMLElement {
+    private static nextId;
+    private readonly mobileMenuId;
     private mobileOpen;
     private userMenuOpen;
     private expandedMobile;

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

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";import{sanitizeHref as t}from"../core/safe-url.js";import{NAVBAR_SIZES as a,NAVBAR_VARIANTS as n,NAVBAR_POSITIONS as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";function resolveIcon(e){if(e)return e}class DbNavbar extends HTMLElement{constructor(){super(...arguments),this.mobileOpen=!1,this.userMenuOpen=!1,this.expandedMobile={},this.outsideHandler=null}static get observedAttributes(){return["items","user-menu-items","user-profile","size","variant","position","is-authenticated","show-search","search-placeholder","full-width","shadow"]}connectedCallback(){this.render(),this.bindOutsideClick()}disconnectedCallback(){this.unbindOutsideClick()}attributeChangedCallback(){this.isConnected&&this.render()}get items(){return this.parseItems("items")}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get userMenuItems(){return this.parseItems("user-menu-items")}set userMenuItems(e){this.setAttribute("user-menu-items","string"==typeof e?e:JSON.stringify(e))}get userProfile(){return this.parseUserProfile()}set userProfile(e){null==e?this.removeAttribute("user-profile"):this.setAttribute("user-profile","string"==typeof e?e:JSON.stringify(e))}parseItems(e="items"){try{const t=JSON.parse(this.getAttribute(e)||"[]");return Array.isArray(t)?t:[]}catch{return[]}}parseUserProfile(){const e=this.getAttribute("user-profile");if(!e)return null;try{return JSON.parse(e)}catch{return null}}iconSize(e){return"s"===e?16:"l"===e?24:20}bindOutsideClick(){this.outsideHandler||(this.outsideHandler=e=>{this.contains(e.target)||(this.userMenuOpen=!1,this.updateUserMenuVisibility())},document.addEventListener("mousedown",this.outsideHandler))}unbindOutsideClick(){this.outsideHandler&&(document.removeEventListener("mousedown",this.outsideHandler),this.outsideHandler=null)}dispatchItemClick(e,t){this.dispatchEvent(new CustomEvent("user"===t?"db-user-menu-item-click":"db-item-click",{bubbles:!0,composed:!0,detail:{item:e,source:t}}))}syncHostClasses(){const e=this.getAttribute("size")||"m",t=this.getAttribute("variant")||"default",i=this.getAttribute("position")||"static";this.className=["designbase-wc-navbar",`designbase-wc-navbar--${a.includes(e)?e:"m"}`,`designbase-wc-navbar--${n.includes(t)?t:"default"}`,`designbase-wc-navbar--${s.includes(i)?i:"static"}`,this.hasAttribute("full-width")&&"designbase-wc-navbar--full-width",this.hasAttribute("shadow")&&"designbase-wc-navbar--shadow",this.mobileOpen&&"designbase-wc-navbar--mobile-open"].filter(Boolean).join(" ")}isMegaMenu(e){return Boolean(e.megaMenu&&e.columns?.length)}createNavToggleButton(t,a){const n=document.createElement("button");n.type="button",n.className=["designbase-wc-navbar__nav-link","designbase-wc-navbar__nav-link--has-children",t.active&&"designbase-wc-navbar__nav-link--active",t.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" "),n.disabled=Boolean(t.disabled);const s=resolveIcon(t.icon);s&&n.append(e(s,a)),n.append(document.createTextNode(t.label));const i=e("chevron-down",12);return i.classList.add("designbase-wc-navbar__chevron"),n.append(i),n}createMegaLink(a,n){const s=document.createElement("a");s.href=t(a.href,"#"),s.className=["designbase-wc-navbar__mega-link",a.active&&"designbase-wc-navbar__mega-link--active",a.disabled&&"designbase-wc-navbar__mega-link--disabled"].filter(Boolean).join(" ");const i=resolveIcon(a.icon);if(i){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-link-icon",t.append(e(i,n)),s.append(t)}const r=document.createElement("span");r.className="designbase-wc-navbar__mega-link-body";const c=document.createElement("span");if(c.className="designbase-wc-navbar__mega-link-label",c.textContent=a.label,r.append(c),a.description){const e=document.createElement("span");e.className="designbase-wc-navbar__mega-link-desc",e.textContent=a.description,r.append(e)}return s.append(r),s.addEventListener("click",e=>{e.preventDefault(),a.disabled||this.dispatchItemClick(a,"nav")}),s}createMegaMenu(e,t){const a=document.createElement("li");a.className="designbase-wc-navbar__nav-item designbase-wc-navbar__nav-item--mega";const n=this.createNavToggleButton(e,t),s=document.createElement("div");s.className="designbase-wc-navbar__mega";const i=document.createElement("div");i.className="designbase-wc-navbar__mega-inner";const r=document.createElement("div");return r.className="designbase-wc-navbar__mega-columns",r.style.setProperty("--db-navbar-mega-columns",String(e.columns.length)),e.columns.forEach(e=>{const a=document.createElement("div");if(a.className="designbase-wc-navbar__mega-column",e.title){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-column-title",t.textContent=e.title,a.append(t)}const n=document.createElement("ul");n.className="designbase-wc-navbar__mega-list",e.items.forEach(e=>{const a=document.createElement("li");a.append(this.createMegaLink(e,t)),n.append(a)}),a.append(n),r.append(a)}),i.append(r),e.featured&&i.append(this.createMegaFeatured(e.featured,t)),s.append(i),a.append(n,s),a}createMegaFeatured(a,n){const s=document.createElement("a");s.href=t(a.href,"#"),s.className="designbase-wc-navbar__mega-featured",a.image&&(s.style.setProperty("--db-navbar-mega-featured-image",`url("${a.image}")`),s.classList.add("designbase-wc-navbar__mega-featured--image"));const i=resolveIcon(a.icon);if(i){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-featured-icon",t.append(e(i,n+4)),s.append(t)}if(a.title){const e=document.createElement("span");e.className="designbase-wc-navbar__mega-featured-title",e.textContent=a.title,s.append(e)}if(a.description){const e=document.createElement("span");e.className="designbase-wc-navbar__mega-featured-desc",e.textContent=a.description,s.append(e)}if(a.ctaLabel){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-featured-cta",t.append(document.createTextNode(a.ctaLabel)),t.append(e("chevron-right",14)),s.append(t)}return s.addEventListener("click",e=>{e.preventDefault(),this.dispatchItemClick({id:`${a.href||"featured"}`,label:a.title||"featured",href:a.href},"nav")}),s}createDesktopNavItem(a,n){if(this.isMegaMenu(a))return this.createMegaMenu(a,n);const s=document.createElement("li");s.className="designbase-wc-navbar__nav-item";if(Boolean(a.children?.length)){const i=document.createElement("div");i.className="designbase-wc-navbar__dropdown";const r=document.createElement("button");r.type="button",r.className=["designbase-wc-navbar__nav-link","designbase-wc-navbar__nav-link--has-children",a.active&&"designbase-wc-navbar__nav-link--active",a.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" "),r.disabled=Boolean(a.disabled);const c=resolveIcon(a.icon);c&&r.append(e(c,n)),r.append(document.createTextNode(a.label));const d=e("chevron-down",12);d.classList.add("designbase-wc-navbar__chevron"),r.append(d);const l=document.createElement("ul");return l.className="designbase-wc-navbar__dropdown-menu",a.children.forEach(a=>{const s=document.createElement("li"),i=document.createElement("a");i.href=t(a.href,"#"),i.className=["designbase-wc-navbar__dropdown-item",a.active&&"designbase-wc-navbar__dropdown-item--active",a.disabled&&"designbase-wc-navbar__dropdown-item--disabled"].filter(Boolean).join(" ");const r=resolveIcon(a.icon);r&&i.append(e(r,n)),i.append(document.createTextNode(a.label)),i.addEventListener("click",e=>{a.disabled?e.preventDefault():(e.preventDefault(),this.dispatchItemClick(a,"nav"))}),s.append(i),l.append(s)}),i.append(r,l),s.append(i),s}const i=document.createElement("a");i.href=t(a.href,"#"),i.className=["designbase-wc-navbar__nav-link",a.active&&"designbase-wc-navbar__nav-link--active",a.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" ");const r=resolveIcon(a.icon);return r&&i.append(e(r,n)),i.append(document.createTextNode(a.label)),i.addEventListener("click",e=>{a.disabled?e.preventDefault():(e.preventDefault(),this.dispatchItemClick(a,"nav"))}),s.append(i),s}createUserMenuItemElement(e,a,n){const s=document.createElement("db-menu-item");s.setAttribute("label",e.label),s.setAttribute("type","block"),s.setAttribute("menu-style","dropdown"),s.setAttribute("size",a);const i=t(e.href,"");return i&&s.setAttribute("href",i),e.icon&&s.setAttribute("icon",e.icon),e.disabled&&s.setAttribute("disabled",""),s.addEventListener("db-click",()=>{e.disabled||(n(),this.dispatchItemClick(e,"user"))}),s}bindSearchEvents(e){e.addEventListener("db-search",e=>{const t=e.detail,a=t.query??t.value??"";this.dispatchEvent(new CustomEvent("db-search",{bubbles:!0,composed:!0,detail:{query:a,value:a}}))})}applyAvatarProfile(e,t,a){e.setAttribute("size","s"===a?"s":"l"===a?"l":"m"),e.setAttribute("initials",t.name),e.setAttribute("alt",t.name),t.avatar&&e.setAttribute("src",t.avatar),void 0!==t.badge&&e.setAttribute("badge",String(t.badge)),t.badgeVariant&&e.setAttribute("badge-variant",t.badgeVariant),t.badgeType&&e.setAttribute("badge-type",t.badgeType),t.badgeText&&e.setAttribute("badge-text",t.badgeText)}getMobileChildren(e){if(this.isMegaMenu(e)){const t=(e.columns||[]).flatMap(e=>e.items);return e.featured?.href&&t.push({id:`${e.id}-featured`,label:e.featured.title||e.featured.ctaLabel||e.label,href:e.featured.href,icon:e.featured.icon}),t}return e.children||[]}createMobileMenuItem(e,a){const n=this.getMobileChildren(e),s=n.length>0,i=Boolean(this.expandedMobile[e.id]),r=document.createElement("db-menu-item");r.setAttribute("label",e.label),r.setAttribute("type","block"),r.setAttribute("menu-style","accordion"),r.setAttribute("size",a);const c=t(e.href,"");return c&&r.setAttribute("href",c),e.icon&&r.setAttribute("icon",e.icon),e.active&&r.setAttribute("active",""),e.disabled&&r.setAttribute("disabled",""),s&&(r.setAttribute("expandable",""),r.subItems=n.map(e=>({id:e.id,label:e.label,href:e.href,icon:e.icon,active:e.active,disabled:e.disabled})),i&&r.setAttribute("expanded","")),r.addEventListener("db-click",()=>{if(!e.disabled){if(s)return this.expandedMobile[e.id]=!i,void this.renderMobileMenu();this.mobileOpen=!1,this.dispatchItemClick(e,"mobile"),this.render()}}),r.addEventListener("db-child-click",e=>{const t=e.detail;this.mobileOpen=!1,this.dispatchItemClick(t.child,"mobile"),this.render()}),r}updateUserMenuVisibility(){const e=this.querySelector(".designbase-wc-navbar__user-dropdown-menu");e&&(e.hidden=!this.userMenuOpen)}renderMobileMenu(){const e=this.querySelector(".designbase-wc-navbar__mobile-nav-list");if(!e)return;const t=this.getAttribute("size")||"m",a=this.parseItems();e.replaceChildren(...a.map(e=>this.createMobileMenuItem(e,t)))}render(){this.syncHostClasses(),this.setAttribute("role","navigation"),this.setAttribute("aria-label","메인 네비게이션");const t=this.getAttribute("size")||"m",a=this.iconSize(t),n=this.parseItems(),s=this.parseItems("user-menu-items"),i=this.parseUserProfile(),r=this.hasAttribute("is-authenticated"),c=this.hasAttribute("show-search");this.replaceChildren();const d=document.createElement("div");d.className=["designbase-wc-navbar__container",this.hasAttribute("full-width")&&"designbase-wc-navbar__container--full-width"].filter(Boolean).join(" ");const l=document.createElement("div");l.className="designbase-wc-navbar__left";const o=document.createElement("div");o.className="designbase-wc-navbar__brand";const b=document.createElement("div");b.className="designbase-wc-navbar__logo";const u=document.createElement("db-logo");u.setAttribute("type","designbase"),u.setAttribute("size","s"),u.setAttribute("clickable",""),u.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-logo-click",{bubbles:!0,composed:!0}))}),b.append(u),o.append(b),l.append(o);const m=document.createElement("div");m.className="designbase-wc-navbar__right";const p=document.createElement("div");p.className="designbase-wc-navbar__nav designbase-wc-navbar__nav--desktop";const h=document.createElement("ul");if(h.className="designbase-wc-navbar__nav-list",n.forEach(e=>h.append(this.createDesktopNavItem(e,a))),p.append(h),m.append(p),c){const e=document.createElement("div");e.className="designbase-wc-navbar__search";const a=document.createElement("db-search-bar");a.setAttribute("variant","outlined"),a.setAttribute("size","s"===t?"s":"l"===t?"l":"m"),a.setAttribute("placeholder",this.getAttribute("search-placeholder")||"검색..."),this.bindSearchEvents(a),e.append(a),m.append(e)}const v=document.createElement("div");if(v.className="designbase-wc-navbar__user-menu",r&&i){const a=document.createElement("div");a.className="designbase-wc-navbar__user-dropdown";const n=document.createElement("button");n.type="button",n.className="designbase-wc-navbar__user-toggle",n.setAttribute("aria-expanded",String(this.userMenuOpen));const r=document.createElement("db-avatar");this.applyAvatarProfile(r,i,t);const c=document.createElement("span");c.className="designbase-wc-navbar__user-name",c.textContent=i.name,n.append(r,c,e("chevron-down",12)),n.addEventListener("click",()=>{this.userMenuOpen=!this.userMenuOpen,n.setAttribute("aria-expanded",String(this.userMenuOpen)),this.updateUserMenuVisibility()});const d=document.createElement("ul");if(d.className="designbase-wc-navbar__user-dropdown-menu",d.hidden=!this.userMenuOpen,i.email){const e=document.createElement("li");e.className="designbase-wc-navbar__user-info";const t=document.createElement("span");t.className="designbase-wc-navbar__user-email",t.textContent=i.email,e.append(t),d.append(e)}s.forEach(e=>{const a=document.createElement("li");a.append(this.createUserMenuItemElement(e,t,()=>{this.userMenuOpen=!1,this.updateUserMenuVisibility()})),d.append(a)}),a.append(n,d),v.append(a)}else{const e=document.createElement("db-button");e.setAttribute("variant","primary"),e.setAttribute("size","s"===t?"s":"l"===t?"l":"m"),e.textContent="로그인",e.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-login-click",{bubbles:!0,composed:!0}))}),v.append(e)}m.append(v);const g=document.createElement("button");g.type="button",g.className="designbase-wc-navbar__mobile-toggle",g.setAttribute("aria-expanded",String(this.mobileOpen)),g.setAttribute("aria-label","메뉴 열기");for(let e=0;e<3;e+=1){const e=document.createElement("span");e.className="designbase-wc-navbar__mobile-toggle-line",g.append(e)}if(g.addEventListener("click",()=>{this.mobileOpen=!this.mobileOpen,this.render()}),d.append(l,m,g),this.append(d),this.mobileOpen){const e=document.createElement("div");if(e.className="designbase-wc-navbar__mobile-menu",c){const t=document.createElement("div");t.className="designbase-wc-navbar__mobile-search";const a=document.createElement("db-search-bar");a.setAttribute("variant","outlined"),a.setAttribute("size","s"),a.setAttribute("full-width",""),a.setAttribute("placeholder",this.getAttribute("search-placeholder")||"검색..."),this.bindSearchEvents(a),t.append(a),e.append(t)}const t=document.createElement("ul");t.className="designbase-wc-navbar__mobile-nav-list",e.append(t);const a=document.createElement("div");if(a.className="designbase-wc-navbar__mobile-user",r&&i){const e=document.createElement("div");e.className="designbase-wc-navbar__mobile-user-info";const t=document.createElement("db-avatar");this.applyAvatarProfile(t,i,"m");const n=document.createElement("div"),r=document.createElement("div");if(r.className="designbase-wc-navbar__mobile-user-name",r.textContent=i.name,n.append(r),i.email){const e=document.createElement("div");e.className="designbase-wc-navbar__mobile-user-email",e.textContent=i.email,n.append(e)}if(e.append(t,n),a.append(e),s.length){const e=document.createElement("ul");e.className="designbase-wc-navbar__mobile-user-menu",s.forEach(t=>{const a=document.createElement("li");a.append(this.createUserMenuItemElement(t,"m",()=>{this.mobileOpen=!1,this.render()})),e.append(a)}),a.append(e)}}else{const e=document.createElement("db-button");e.setAttribute("variant","primary"),e.setAttribute("size","m"),e.setAttribute("full-width",""),e.textContent="로그인",e.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-login-click",{bubbles:!0,composed:!0}))}),a.append(e)}e.append(a),this.append(e),this.renderMobileMenu()}}}customElements.get("db-navbar")||customElements.define("db-navbar",DbNavbar);export{DbNavbar};
+import{createDbIcon as e}from"./db-icons.js";import{sanitizeHref as t}from"../core/safe-url.js";import{NAVBAR_SIZES as a,NAVBAR_VARIANTS as n,NAVBAR_POSITIONS as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";function resolveIcon(e){if(e)return e}class DbNavbar extends HTMLElement{constructor(){super(...arguments),this.mobileMenuId="db-navbar-menu-"+ ++DbNavbar.nextId,this.mobileOpen=!1,this.userMenuOpen=!1,this.expandedMobile={},this.outsideHandler=null}static get observedAttributes(){return["logo-src","logo-alt","items","user-menu-items","user-profile","size","variant","position","is-authenticated","show-search","search-placeholder","full-width","shadow"]}connectedCallback(){this.render(),this.bindOutsideClick()}disconnectedCallback(){this.unbindOutsideClick()}attributeChangedCallback(){this.isConnected&&this.render()}get items(){return this.parseItems("items")}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get userMenuItems(){return this.parseItems("user-menu-items")}set userMenuItems(e){this.setAttribute("user-menu-items","string"==typeof e?e:JSON.stringify(e))}get userProfile(){return this.parseUserProfile()}set userProfile(e){null==e?this.removeAttribute("user-profile"):this.setAttribute("user-profile","string"==typeof e?e:JSON.stringify(e))}parseItems(e="items"){try{const t=JSON.parse(this.getAttribute(e)||"[]");return Array.isArray(t)?t:[]}catch{return[]}}parseUserProfile(){const e=this.getAttribute("user-profile");if(!e)return null;try{return JSON.parse(e)}catch{return null}}iconSize(e){return"s"===e?16:"l"===e?24:20}bindOutsideClick(){this.outsideHandler||(this.outsideHandler=e=>{this.contains(e.target)||(this.userMenuOpen=!1,this.updateUserMenuVisibility())},document.addEventListener("mousedown",this.outsideHandler))}unbindOutsideClick(){this.outsideHandler&&(document.removeEventListener("mousedown",this.outsideHandler),this.outsideHandler=null)}dispatchItemClick(e,t){this.dispatchEvent(new CustomEvent("user"===t?"db-user-menu-item-click":"db-item-click",{bubbles:!0,composed:!0,detail:{item:e,source:t}}))}syncHostClasses(){const e=this.getAttribute("size")||"m",t=this.getAttribute("variant")||"default",i=this.getAttribute("position")||"static";this.className=["designbase-wc-navbar",`designbase-wc-navbar--${a.includes(e)?e:"m"}`,`designbase-wc-navbar--${n.includes(t)?t:"default"}`,`designbase-wc-navbar--${s.includes(i)?i:"static"}`,this.hasAttribute("full-width")&&"designbase-wc-navbar--full-width",this.hasAttribute("shadow")&&"designbase-wc-navbar--shadow",this.mobileOpen&&"designbase-wc-navbar--mobile-open"].filter(Boolean).join(" ")}isMegaMenu(e){return Boolean(e.megaMenu&&e.columns?.length)}createNavToggleButton(t,a){const n=document.createElement("button");n.type="button",n.className=["designbase-wc-navbar__nav-link","designbase-wc-navbar__nav-link--has-children",t.active&&"designbase-wc-navbar__nav-link--active",t.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" "),n.disabled=Boolean(t.disabled);const s=resolveIcon(t.icon);s&&n.append(e(s,a)),n.append(document.createTextNode(t.label));const i=e("chevron-down",12);return i.classList.add("designbase-wc-navbar__chevron"),n.append(i),n}createMegaLink(a,n){const s=document.createElement("a");s.href=t(a.href,"#"),s.className=["designbase-wc-navbar__mega-link",a.active&&"designbase-wc-navbar__mega-link--active",a.disabled&&"designbase-wc-navbar__mega-link--disabled"].filter(Boolean).join(" ");const i=resolveIcon(a.icon);if(i){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-link-icon",t.append(e(i,n)),s.append(t)}const r=document.createElement("span");r.className="designbase-wc-navbar__mega-link-body";const c=document.createElement("span");if(c.className="designbase-wc-navbar__mega-link-label",c.textContent=a.label,r.append(c),a.description){const e=document.createElement("span");e.className="designbase-wc-navbar__mega-link-desc",e.textContent=a.description,r.append(e)}return s.append(r),s.addEventListener("click",e=>{e.preventDefault(),a.disabled||this.dispatchItemClick(a,"nav")}),s}createMegaMenu(e,t){const a=document.createElement("li");a.className="designbase-wc-navbar__nav-item designbase-wc-navbar__nav-item--mega";const n=this.createNavToggleButton(e,t),s=document.createElement("div");s.className="designbase-wc-navbar__mega";const i=document.createElement("div");i.className="designbase-wc-navbar__mega-inner";const r=document.createElement("div");return r.className="designbase-wc-navbar__mega-columns",r.style.setProperty("--db-navbar-mega-columns",String(e.columns.length)),e.columns.forEach(e=>{const a=document.createElement("div");if(a.className="designbase-wc-navbar__mega-column",e.title){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-column-title",t.textContent=e.title,a.append(t)}const n=document.createElement("ul");n.className="designbase-wc-navbar__mega-list",e.items.forEach(e=>{const a=document.createElement("li");a.append(this.createMegaLink(e,t)),n.append(a)}),a.append(n),r.append(a)}),i.append(r),e.featured&&i.append(this.createMegaFeatured(e.featured,t)),s.append(i),a.append(n,s),a}createMegaFeatured(a,n){const s=document.createElement("a");s.href=t(a.href,"#"),s.className="designbase-wc-navbar__mega-featured",a.image&&(s.style.setProperty("--db-navbar-mega-featured-image",`url("${a.image}")`),s.classList.add("designbase-wc-navbar__mega-featured--image"));const i=resolveIcon(a.icon);if(i){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-featured-icon",t.append(e(i,n+4)),s.append(t)}if(a.title){const e=document.createElement("span");e.className="designbase-wc-navbar__mega-featured-title",e.textContent=a.title,s.append(e)}if(a.description){const e=document.createElement("span");e.className="designbase-wc-navbar__mega-featured-desc",e.textContent=a.description,s.append(e)}if(a.ctaLabel){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-featured-cta",t.append(document.createTextNode(a.ctaLabel)),t.append(e("chevron-right",14)),s.append(t)}return s.addEventListener("click",e=>{e.preventDefault(),this.dispatchItemClick({id:`${a.href||"featured"}`,label:a.title||"featured",href:a.href},"nav")}),s}createDesktopNavItem(a,n){if(this.isMegaMenu(a))return this.createMegaMenu(a,n);const s=document.createElement("li");s.className="designbase-wc-navbar__nav-item";if(Boolean(a.children?.length)){const i=document.createElement("div");i.className="designbase-wc-navbar__dropdown";const r=document.createElement("button");r.type="button",r.className=["designbase-wc-navbar__nav-link","designbase-wc-navbar__nav-link--has-children",a.active&&"designbase-wc-navbar__nav-link--active",a.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" "),r.disabled=Boolean(a.disabled);const c=resolveIcon(a.icon);c&&r.append(e(c,n)),r.append(document.createTextNode(a.label));const d=e("chevron-down",12);d.classList.add("designbase-wc-navbar__chevron"),r.append(d);const l=document.createElement("ul");return l.className="designbase-wc-navbar__dropdown-menu",a.children.forEach(a=>{const s=document.createElement("li"),i=document.createElement("a");i.href=t(a.href,"#"),i.className=["designbase-wc-navbar__dropdown-item",a.active&&"designbase-wc-navbar__dropdown-item--active",a.disabled&&"designbase-wc-navbar__dropdown-item--disabled"].filter(Boolean).join(" ");const r=resolveIcon(a.icon);r&&i.append(e(r,n)),i.append(document.createTextNode(a.label)),i.addEventListener("click",e=>{a.disabled?e.preventDefault():(e.preventDefault(),this.dispatchItemClick(a,"nav"))}),s.append(i),l.append(s)}),i.append(r,l),s.append(i),s}const i=document.createElement("a");i.href=t(a.href,"#"),i.className=["designbase-wc-navbar__nav-link",a.active&&"designbase-wc-navbar__nav-link--active",a.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" ");const r=resolveIcon(a.icon);return r&&i.append(e(r,n)),i.append(document.createTextNode(a.label)),i.addEventListener("click",e=>{a.disabled?e.preventDefault():(e.preventDefault(),this.dispatchItemClick(a,"nav"))}),s.append(i),s}createUserMenuItemElement(e,a,n){const s=document.createElement("db-menu-item");s.setAttribute("label",e.label),s.setAttribute("type","block"),s.setAttribute("menu-style","dropdown"),s.setAttribute("size",a);const i=t(e.href,"");return i&&s.setAttribute("href",i),e.icon&&s.setAttribute("icon",e.icon),e.disabled&&s.setAttribute("disabled",""),s.addEventListener("db-click",()=>{e.disabled||(n(),this.dispatchItemClick(e,"user"))}),s}bindSearchEvents(e){e.addEventListener("db-search",e=>{const t=e.detail,a=t.query??t.value??"";this.dispatchEvent(new CustomEvent("db-search",{bubbles:!0,composed:!0,detail:{query:a,value:a}}))})}applyAvatarProfile(e,t,a){e.setAttribute("size","s"===a?"s":"l"===a?"l":"m"),e.setAttribute("initials",t.name),e.setAttribute("alt",t.name),t.avatar&&e.setAttribute("src",t.avatar),void 0!==t.badge&&e.setAttribute("badge",String(t.badge)),t.badgeVariant&&e.setAttribute("badge-variant",t.badgeVariant),t.badgeType&&e.setAttribute("badge-type",t.badgeType),t.badgeText&&e.setAttribute("badge-text",t.badgeText)}getMobileChildren(e){if(this.isMegaMenu(e)){const t=(e.columns||[]).flatMap(e=>e.items);return e.featured?.href&&t.push({id:`${e.id}-featured`,label:e.featured.title||e.featured.ctaLabel||e.label,href:e.featured.href,icon:e.featured.icon}),t}return e.children||[]}createMobileMenuItem(e,a){const n=this.getMobileChildren(e),s=n.length>0,i=Boolean(this.expandedMobile[e.id]),r=document.createElement("db-menu-item");r.setAttribute("label",e.label),r.setAttribute("type","block"),r.setAttribute("menu-style","accordion"),r.setAttribute("size",a);const c=t(e.href,"");return c&&r.setAttribute("href",c),e.icon&&r.setAttribute("icon",e.icon),e.active&&r.setAttribute("active",""),e.disabled&&r.setAttribute("disabled",""),s&&(r.setAttribute("expandable",""),r.subItems=n.map(e=>({id:e.id,label:e.label,href:e.href,icon:e.icon,active:e.active,disabled:e.disabled})),i&&r.setAttribute("expanded","")),r.addEventListener("db-click",()=>{e.disabled||(s?this.expandedMobile[e.id]=r.hasAttribute("expanded"):(this.mobileOpen=!1,this.dispatchItemClick(e,"mobile"),this.render()))}),r.addEventListener("db-child-click",e=>{const t=e.detail;this.mobileOpen=!1,this.dispatchItemClick(t.child,"mobile"),this.render()}),r}updateUserMenuVisibility(){const e=this.querySelector(".designbase-wc-navbar__user-dropdown-menu");e&&(e.hidden=!this.userMenuOpen)}renderMobileMenu(){const e=this.querySelector(".designbase-wc-navbar__mobile-nav-list");if(!e)return;const t=this.getAttribute("size")||"m",a=this.parseItems();e.replaceChildren(...a.map(e=>this.createMobileMenuItem(e,t)))}render(){this.syncHostClasses(),this.setAttribute("role","navigation"),this.setAttribute("aria-label","메인 네비게이션");const t=this.getAttribute("size")||"m",a=this.iconSize(t),n=this.parseItems(),s=this.parseItems("user-menu-items"),i=this.parseUserProfile(),r=this.hasAttribute("is-authenticated"),c=this.hasAttribute("show-search");this.replaceChildren();const d=document.createElement("div");d.className=["designbase-wc-navbar__container",this.hasAttribute("full-width")&&"designbase-wc-navbar__container--full-width"].filter(Boolean).join(" ");const l=document.createElement("div");l.className="designbase-wc-navbar__left";const o=document.createElement("div");o.className="designbase-wc-navbar__brand";const b=document.createElement("div");b.className="designbase-wc-navbar__logo";const u=document.createElement("db-logo"),m=this.getAttribute("logo-src");u.setAttribute("type",m?"custom":"designbase"),m&&u.setAttribute("src",m),u.setAttribute("alt",this.getAttribute("logo-alt")||"홈"),u.setAttribute("size","s"),u.setAttribute("clickable",""),u.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-logo-click",{bubbles:!0,composed:!0}))}),b.append(u),o.append(b),l.append(o);const p=document.createElement("div");p.className="designbase-wc-navbar__right";const h=document.createElement("div");h.className="designbase-wc-navbar__nav designbase-wc-navbar__nav--desktop";const v=document.createElement("ul");if(v.className="designbase-wc-navbar__nav-list",n.forEach(e=>v.append(this.createDesktopNavItem(e,a))),h.append(v),p.append(h),c){const e=document.createElement("div");e.className="designbase-wc-navbar__search";const a=document.createElement("db-search-bar");a.setAttribute("variant","outlined"),a.setAttribute("size","s"===t?"s":"l"===t?"l":"m"),a.setAttribute("placeholder",this.getAttribute("search-placeholder")||"검색..."),this.bindSearchEvents(a),e.append(a),p.append(e)}const g=document.createElement("div");if(g.className="designbase-wc-navbar__user-menu",r&&i){const a=document.createElement("div");a.className="designbase-wc-navbar__user-dropdown";const n=document.createElement("button");n.type="button",n.className="designbase-wc-navbar__user-toggle",n.setAttribute("aria-expanded",String(this.userMenuOpen));const r=document.createElement("db-avatar");this.applyAvatarProfile(r,i,t);const c=document.createElement("span");c.className="designbase-wc-navbar__user-name",c.textContent=i.name,n.append(r,c,e("chevron-down",12)),n.addEventListener("click",()=>{this.userMenuOpen=!this.userMenuOpen,n.setAttribute("aria-expanded",String(this.userMenuOpen)),this.updateUserMenuVisibility()});const d=document.createElement("ul");if(d.className="designbase-wc-navbar__user-dropdown-menu",d.hidden=!this.userMenuOpen,i.email){const e=document.createElement("li");e.className="designbase-wc-navbar__user-info";const t=document.createElement("span");t.className="designbase-wc-navbar__user-email",t.textContent=i.email,e.append(t),d.append(e)}s.forEach(e=>{const a=document.createElement("li");a.append(this.createUserMenuItemElement(e,t,()=>{this.userMenuOpen=!1,this.updateUserMenuVisibility()})),d.append(a)}),a.append(n,d),g.append(a)}else{const e=document.createElement("db-button");e.setAttribute("variant","primary"),e.setAttribute("size","s"===t?"s":"l"===t?"l":"m"),e.textContent="로그인",e.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-login-click",{bubbles:!0,composed:!0}))}),g.append(e)}p.append(g);const _=document.createElement("button");_.type="button",_.className="designbase-wc-navbar__mobile-toggle",_.setAttribute("aria-expanded",String(this.mobileOpen)),this.mobileOpen&&_.setAttribute("aria-controls",this.mobileMenuId),_.setAttribute("aria-label",this.mobileOpen?"메뉴 닫기":"메뉴 열기");for(let e=0;e<3;e+=1){const e=document.createElement("span");e.className="designbase-wc-navbar__mobile-toggle-line",_.append(e)}if(_.addEventListener("click",()=>{this.mobileOpen=!this.mobileOpen,this.render(),this.querySelector(".designbase-wc-navbar__mobile-toggle")?.focus()}),d.append(l,p,_),this.append(d),this.mobileOpen){const e=document.createElement("div");if(e.className="designbase-wc-navbar__mobile-menu",e.id=this.mobileMenuId,e.addEventListener("keydown",e=>{"Escape"===e.key&&(this.mobileOpen=!1,this.render(),this.querySelector(".designbase-wc-navbar__mobile-toggle")?.focus())}),c){const t=document.createElement("div");t.className="designbase-wc-navbar__mobile-search";const a=document.createElement("db-search-bar");a.setAttribute("variant","outlined"),a.setAttribute("size","s"),a.setAttribute("full-width",""),a.setAttribute("placeholder",this.getAttribute("search-placeholder")||"검색..."),this.bindSearchEvents(a),t.append(a),e.append(t)}const t=document.createElement("div");t.className="designbase-wc-navbar__mobile-nav-list",e.append(t);const a=document.createElement("div");if(a.className="designbase-wc-navbar__mobile-user",r&&i){const e=document.createElement("div");e.className="designbase-wc-navbar__mobile-user-info";const t=document.createElement("db-avatar");this.applyAvatarProfile(t,i,"m");const n=document.createElement("div"),r=document.createElement("div");if(r.className="designbase-wc-navbar__mobile-user-name",r.textContent=i.name,n.append(r),i.email){const e=document.createElement("div");e.className="designbase-wc-navbar__mobile-user-email",e.textContent=i.email,n.append(e)}if(e.append(t,n),a.append(e),s.length){const e=document.createElement("ul");e.className="designbase-wc-navbar__mobile-user-menu",s.forEach(t=>{const a=document.createElement("li");a.append(this.createUserMenuItemElement(t,"m",()=>{this.mobileOpen=!1,this.render()})),e.append(a)}),a.append(e)}}else{const e=document.createElement("db-button");e.setAttribute("variant","primary"),e.setAttribute("size","m"),e.setAttribute("full-width",""),e.textContent="로그인",e.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-login-click",{bubbles:!0,composed:!0}))}),a.append(e)}e.append(a),this.append(e),this.renderMobileMenu()}}}DbNavbar.nextId=0,customElements.get("db-navbar")||customElements.define("db-navbar",DbNavbar);export{DbNavbar};

package/dist/esm/components/db-navigation-rail.d.ts

@@ -1,5 +1,5 @@
 import './db-tooltip.js';
-import { NavigationRailLabelDisplay } from '@designbasekorea/ui-contracts';
+import { NavigationRailLabelDisplay } from '../ui-contracts/dist/components.d.js';
 
 interface DbNavigationRailItem {
     id: string;

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

@@ -0,0 +1,83 @@
+import { DbElement } from '../core/base-element.js';
+import './db-badge.js';
+
+declare const NODE_VARIANTS: readonly ["default", "compact"];
+declare const NODE_STATUSES: readonly ["idle", "running", "success", "error"];
+type DbNodePortType = 'any' | 'text' | 'image' | 'number' | 'boolean';
+type DbNodePort = {
+    id: string;
+    label: string;
+    type?: DbNodePortType;
+    connected?: boolean;
+    disabled?: boolean;
+};
+type DbNodePortSelect = {
+    nodeId: string;
+    portId: string;
+    direction: 'input' | 'output';
+    type: DbNodePortType;
+};
+type DbNodePortDrag = DbNodePortSelect & {
+    clientX: number;
+    clientY: number;
+    phase: 'start' | 'move' | 'end' | 'cancel';
+};
+type DbNodeMove = {
+    nodeId: string;
+    deltaX: number;
+    deltaY: number;
+    phase: 'start' | 'move' | 'end' | 'cancel' | 'keyboard';
+};
+/** A composable workflow node. The consumer owns graph coordinates and connections. */
+declare class DbNode extends DbElement {
+    static get observedAttributes(): string[];
+    private readonly root;
+    private inputPorts;
+    private outputPorts;
+    private portsDirty;
+    private drag;
+    private portDrag;
+    private suppressPortClick;
+    private deleteButton;
+    private headingButton;
+    private titleEl;
+    private iconBox;
+    private descriptionEl;
+    private statusEl;
+    private statusBadge;
+    private collapseButton;
+    private runButton;
+    private body;
+    private footer;
+    private inputList;
+    private outputList;
+    get inputs(): DbNodePort[];
+    set inputs(value: DbNodePort[]);
+    get outputs(): DbNodePort[];
+    set outputs(value: DbNodePort[]);
+    /** Anchor element for a graph renderer; use its bounding rect to position edges. */
+    getPortElement(id: string, direction: 'input' | 'output'): HTMLButtonElement | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private normalizePorts;
+    private readPorts;
+    private nodeId;
+    private el;
+    private action;
+    private build;
+    private emitMove;
+    private finishDrag;
+    private renderPorts;
+    private emitPortDrag;
+    private cancelPortDrag;
+    private sync;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-node': DbNode;
+    }
+}
+
+export { DbNode, NODE_STATUSES, NODE_VARIANTS };
+export type { DbNodeMove, DbNodePort, DbNodePortDrag, DbNodePortSelect, DbNodePortType };

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

@@ -0,0 +1 @@
+import{DbElement as t}from"../core/base-element.js";import{createDbIcon as e}from"./db-icons.js";import"./db-badge.js";import{nodeStyle as i}from"./node-style.js";const s=["default","compact"],n=["idle","running","success","error"],o=new Set(["any","text","image","number","boolean"]),r={any:"일반",text:"텍스트",image:"이미지",number:"숫자",boolean:"조건"},a={idle:"대기",running:"실행 중",success:"완료",error:"오류"};class DbNode extends t{constructor(){super(...arguments),this.root=this.attachShadow({mode:"open"}),this.inputPorts=[],this.outputPorts=[],this.portsDirty=!0,this.drag=null,this.portDrag=null,this.suppressPortClick=!1}static get observedAttributes(){return["node-id","heading","description","icon","variant","status","selected","collapsed","disabled","movable","runnable","collapsible","inputs","outputs","detail","deletable"]}get inputs(){return this.inputPorts.map(t=>({...t}))}set inputs(t){const e=this.normalizePorts(t);JSON.stringify(e)!==JSON.stringify(this.inputPorts)&&(this.inputPorts=e,this.portsDirty=!0,this.sync())}get outputs(){return this.outputPorts.map(t=>({...t}))}set outputs(t){const e=this.normalizePorts(t);JSON.stringify(e)!==JSON.stringify(this.outputPorts)&&(this.outputPorts=e,this.portsDirty=!0,this.sync())}getPortElement(t,e){const i="input"===e?this.inputList:this.outputList;return[...i?.querySelectorAll("button")||[]].find(e=>e.dataset.portId===t)||null}connectedCallback(){this.root.childElementCount||this.build(),this.upgradeProperties(["inputs","outputs"]);for(const t of["inputs","outputs"])this.hasAttribute(t)&&this.readPorts(t);this.sync()}disconnectedCallback(){this.finishDrag("end"),this.cancelPortDrag(),super.disconnectedCallback()}attributeChangedCallback(t){"inputs"!==t&&"outputs"!==t||this.readPorts(t),"disabled"===t&&this.hasAttribute("disabled")&&(this.finishDrag("end"),this.cancelPortDrag()),this.sync()}normalizePorts(t){if(!Array.isArray(t))return[];const e=new Set;return t.filter(t=>t&&"string"==typeof t.id&&t.id&&"string"==typeof t.label&&!e.has(t.id)&&e.add(t.id)).map(t=>({id:t.id,label:t.label,type:o.has(t.type)?t.type:"any",connected:!!t.connected,disabled:!!t.disabled}))}readPorts(t){let e=[];try{e=JSON.parse(this.getAttribute(t)||"[]")}catch{}"inputs"===t?this.inputPorts=this.normalizePorts(e):this.outputPorts=this.normalizePorts(e),this.portsDirty=!0}nodeId(){return this.getAttribute("node-id")||this.id}el(t,e){const i=document.createElement(t);return i.className=e,i}action(t,i){const s=this.el("button","action");return s.type="button",s.setAttribute("aria-label",t),s.title=t,s.append(e(i,16)),s}build(){const t=document.createElement("style");t.textContent=i;const e=this.el("article","frame");e.part.add("frame");const s=this.el("header","header");s.part.add("header"),this.headingButton=this.el("button","heading"),this.headingButton.type="button",this.iconBox=this.el("span","icon"),this.iconBox.setAttribute("aria-hidden","true"),this.titleEl=this.el("span","title"),this.headingButton.append(this.iconBox,this.titleEl),this.statusEl=this.el("span","status"),this.statusEl.setAttribute("role","status"),this.statusBadge=document.createElement("db-badge"),this.statusBadge.setAttribute("size","s"),this.statusBadge.setAttribute("type","outlined"),this.statusEl.append(this.statusBadge);const n=this.el("div","actions"),o=document.createElement("slot");o.name="actions",this.runButton=this.action("노드 실행","play-outline"),this.runButton.classList.add("action--run"),this.collapseButton=this.action("노드 접기","chevron-up"),this.deleteButton=this.action("노드 삭제","close"),this.deleteButton.addEventListener("click",()=>this.dbEmit("delete",{nodeId:this.nodeId()},{cancelable:!0})),n.append(o,this.runButton,this.collapseButton,this.deleteButton),s.append(this.headingButton,this.statusEl,n),this.descriptionEl=this.el("p","description"),this.inputList=this.el("div","ports ports--input"),this.inputList.part.add("inputs"),this.outputList=this.el("div","ports ports--output"),this.outputList.part.add("outputs"),this.body=this.el("div","body"),this.body.part.add("body"),this.body.append(document.createElement("slot")),this.footer=this.el("footer","footer");const r=document.createElement("slot");r.name="footer",this.footer.append(r);this.root.addEventListener("slotchange",()=>{this.body.hidden=this.hasAttribute("collapsed")||!this.body.querySelector("slot").assignedNodes({flatten:!0}).some(t=>1===t.nodeType||!!t.textContent?.trim()),this.footer.hidden=this.hasAttribute("collapsed")||!r.assignedNodes({flatten:!0}).length}),e.append(s,this.descriptionEl,this.inputList,this.body,this.outputList,this.footer),this.root.append(t,e);const isEditor=t=>t.composedPath().some(t=>t instanceof HTMLElement&&(t.isContentEditable||t.matches("input, textarea, db-input, db-textarea, db-markdown-editor")));this.addEventListener("selectstart",t=>{isEditor(t)||t.preventDefault()}),this.addEventListener("dragstart",t=>{isEditor(t)||t.preventDefault()}),this.headingButton.addEventListener("click",()=>{this.hasAttribute("disabled")||this.dbEmit("select",{nodeId:this.nodeId()})}),this.collapseButton.addEventListener("click",()=>{const t=!this.hasAttribute("collapsed");this.toggleAttribute("collapsed",t),this.dbEmit("collapse",{nodeId:this.nodeId(),collapsed:t})}),this.runButton.addEventListener("click",()=>this.dbEmit("run",{nodeId:this.nodeId()},{cancelable:!0})),this.headingButton.addEventListener("pointerdown",t=>{this.hasAttribute("movable")&&!this.hasAttribute("disabled")&&0===t.button&&(this.drag={id:t.pointerId,x:t.clientX,y:t.clientY,lastX:t.clientX,lastY:t.clientY},this.headingButton.setPointerCapture(t.pointerId),this.emitMove("start",0,0))}),this.headingButton.addEventListener("pointermove",t=>{this.drag?.id===t.pointerId&&(this.drag.lastX=t.clientX,this.drag.lastY=t.clientY,this.emitMove("move",t.clientX-this.drag.x,t.clientY-this.drag.y))}),this.headingButton.addEventListener("pointerup",t=>{this.drag?.id===t.pointerId&&(this.drag.lastX=t.clientX,this.drag.lastY=t.clientY,this.finishDrag("end"))}),this.headingButton.addEventListener("pointercancel",()=>this.finishDrag("end")),this.headingButton.addEventListener("lostpointercapture",()=>this.finishDrag("end")),this.headingButton.addEventListener("keydown",t=>{if("Escape"===t.key&&this.drag)return void this.finishDrag("cancel");if(!this.hasAttribute("movable")||this.hasAttribute("disabled"))return;const e={ArrowLeft:[-1,0],ArrowRight:[1,0],ArrowUp:[0,-1],ArrowDown:[0,1]};if(e[t.key]){t.preventDefault();const[i,s]=e[t.key],n=t.shiftKey?4:16;this.emitMove("keyboard",i*n,s*n)}})}emitMove(t,e,i){this.dbEmit("move",{nodeId:this.nodeId(),deltaX:e,deltaY:i,phase:t})}finishDrag(t){const e=this.drag;e&&(this.drag=null,this.emitMove(t,"cancel"===t?0:e.lastX-e.x,"cancel"===t?0:e.lastY-e.y),this.headingButton.hasPointerCapture(e.id)&&this.headingButton.releasePointerCapture(e.id))}renderPorts(t,e,i){const s=this.root.activeElement,n=s&&t.contains(s)?s.dataset.portId:void 0;this.cancelPortDrag(),t.replaceChildren(),t.hidden=!e.length;for(const s of e){const e=this.el("div","port-row");e.dataset.type=s.type||"any";const n=this.el("button","port");n.type="button",n.part.add("port"),n.dataset.portId=s.id,n.dataset.direction=i,n.disabled=this.hasAttribute("disabled")||!!s.disabled,n.dataset.connected=String(!!s.connected),n.setAttribute("aria-label",`${"input"===i?"입력":"출력"} · ${s.label} · ${r[s.type||"any"]}`),n.setAttribute("aria-pressed",String(!!s.connected));const o=this.el("span","port-dot");n.append(o);const a=this.el("span","port-label");a.textContent=s.label;const d=this.el("span","port-type");d.textContent=r[s.type||"any"];const h={nodeId:this.nodeId(),portId:s.id,direction:i,type:s.type||"any"};n.addEventListener("click",()=>{this.suppressPortClick||this.dbEmit("port-select",h)}),n.addEventListener("pointerdown",t=>{0!==t.button||n.disabled||(this.portDrag={id:t.pointerId,button:n,port:h,x:t.clientX,y:t.clientY,moved:!1},this.suppressPortClick=!1,n.setPointerCapture(t.pointerId))}),n.addEventListener("pointermove",t=>{const e=this.portDrag;e&&e.id===t.pointerId&&(!e.moved&&Math.hypot(t.clientX-e.x,t.clientY-e.y)>=4&&(e.moved=!0,this.suppressPortClick=!0,this.emitPortDrag("start",e.x,e.y)),e.moved&&this.emitPortDrag("move",t.clientX,t.clientY))}),n.addEventListener("pointerup",t=>{this.portDrag?.id===t.pointerId&&(this.portDrag.moved&&this.emitPortDrag("end",t.clientX,t.clientY),this.portDrag=null,n.hasPointerCapture(t.pointerId)&&n.releasePointerCapture(t.pointerId),setTimeout(()=>{this.suppressPortClick=!1},0))}),n.addEventListener("pointercancel",()=>this.cancelPortDrag()),n.addEventListener("lostpointercapture",()=>this.cancelPortDrag()),n.addEventListener("keydown",t=>{"Escape"===t.key&&this.cancelPortDrag()}),e.append(n,a,d),t.append(e)}n&&this.getPortElement(n,i)?.focus({preventScroll:!0})}emitPortDrag(t,e,i){this.portDrag&&this.dbEmit("port-drag",{...this.portDrag.port,phase:t,clientX:e,clientY:i})}cancelPortDrag(){const t=this.portDrag;t&&(t.moved&&this.emitPortDrag("cancel",t.x,t.y),this.portDrag=null,t.button.hasPointerCapture(t.id)&&t.button.releasePointerCapture(t.id))}sync(){if(!this.headingButton)return;const t=this.hasAttribute("disabled"),i=this.hasAttribute("collapsed");this.setAttribute("aria-disabled",String(t)),this.root.querySelector(".frame").inert=t,this.dataset.variant=s.includes(this.getAttribute("variant"))?this.getAttribute("variant"):"default";const o=n.find(t=>t===this.getAttribute("status"))||"idle";this.dataset.status=o,this.titleEl.textContent=this.getAttribute("heading")||"새 노드",this.headingButton.disabled=t,this.headingButton.setAttribute("aria-pressed",String(this.hasAttribute("selected"))),this.headingButton.title=this.hasAttribute("movable")?"드래그 또는 방향키로 이동":"노드 선택";const r=this.getAttribute("icon");if(this.iconBox.hidden=!r,r?this.iconBox.replaceChildren(e(r,16)):this.iconBox.replaceChildren(),this.descriptionEl.textContent=this.getAttribute("description")||"",this.descriptionEl.hidden=i||!this.descriptionEl.textContent,this.statusBadge.textContent=a[o],this.statusBadge.setAttribute("variant","error"===o?"danger":"success"===o?"success":"info"),this.statusEl.hidden="idle"===o,this.collapseButton.hidden=!this.hasAttribute("collapsible"),this.collapseButton.disabled=t,this.collapseButton.setAttribute("aria-expanded",String(!i)),this.collapseButton.setAttribute("aria-label",i?"노드 펼치기":"노드 접기"),this.collapseButton.title=i?"노드 펼치기":"노드 접기",this.collapseButton.replaceChildren(e(i?"chevron-down":"chevron-up",16)),this.deleteButton.hidden=!this.hasAttribute("deletable"),this.deleteButton.disabled=t,this.runButton.hidden=!this.hasAttribute("runnable"),this.runButton.disabled=t||"running"===o,this.body.hidden=i||!this.body.querySelector("slot").assignedNodes({flatten:!0}).some(t=>1===t.nodeType||!!t.textContent?.trim()),this.footer.hidden=i||!this.footer.querySelector("slot").assignedNodes({flatten:!0}).length,this.portsDirty)this.renderPorts(this.inputList,this.inputPorts,"input"),this.renderPorts(this.outputList,this.outputPorts,"output"),this.portsDirty=!1;else for(const e of[this.inputList,this.outputList])for(const i of e.querySelectorAll("button")){const s=e===this.inputList?this.inputPorts:this.outputPorts;i.disabled=t||!!s.find(t=>t.id===i.dataset.portId)?.disabled}}}customElements.get("db-node")||customElements.define("db-node",DbNode);export{DbNode,n as NODE_STATUSES,s as NODE_VARIANTS};

package/dist/esm/components/db-notification-dropdown.d.ts

@@ -0,0 +1,30 @@
+import { DbElement } from '../core/base-element.js';
+import { DbNotificationItem } from '../core/notification-ui.js';
+import './db-badge.js';
+import './db-notification-inbox.js';
+
+/** Header wrapper around the same controlled inbox. Native Popover preserves listeners and focus. */
+declare class DbNotificationDropdown extends DbElement {
+    private trigger?;
+    private panel?;
+    private inbox?;
+    private itemData;
+    private readonly panelId;
+    static get observedAttributes(): string[];
+    get notifications(): DbNotificationItem[];
+    set notifications(value: DbNotificationItem[]);
+    get open(): boolean;
+    set open(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private sync;
+    private position;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-notification-dropdown': DbNotificationDropdown;
+    }
+}
+
+export { DbNotificationDropdown };

package/dist/esm/components/db-notification-dropdown.js

@@ -0,0 +1 @@
+import{DbElement as t}from"../core/base-element.js";import{creditAction as i,creditNumber as e}from"../core/credit-ui.js";import{parseNotifications as n}from"../core/notification-ui.js";import{dbUid as s}from"../core/uid.js";import{t as o}from"../core/i18n.js";import{createDbIcon as a}from"./db-icons.js";import"./db-badge.js";import"./db-notification-inbox.js";class DbNotificationDropdown extends t{constructor(){super(...arguments),this.itemData=[],this.panelId=s("notification-dropdown")}static get observedAttributes(){return["open","label","unread-count","loading","pending","error","disabled"]}get notifications(){return this.itemData.map(t=>({...t}))}set notifications(t){this.itemData=n(t),this.isConnected&&this.sync()}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(t){this.toggleAttribute("open",t)}connectedCallback(){this.upgradeProperties(["notifications","open"]),this.panel||(this.classList.add("designbase-wc-notification-dropdown"),this.trigger=i("notification-toggle","",!1),this.trigger.setAttribute("aria-haspopup","dialog"),this.trigger.setAttribute("aria-controls",this.panelId),this.panel=document.createElement("div"),this.panel.id=this.panelId,this.panel.popover="auto",this.panel.className="designbase-wc-notification-dropdown__panel",this.panel.setAttribute("role","dialog"),this.panel.setAttribute("aria-modal","false"),this.inbox=document.createElement("db-notification-inbox"),this.panel.append(this.inbox),this.append(this.trigger,this.panel)),this.cleanups.listen(this.trigger,"db-click",()=>{this.hasAttribute("disabled")||(this.open=!this.open)}),this.cleanups.listen(this.trigger,"keydown",t=>{"ArrowDown"!==t.key||this.hasAttribute("disabled")||(t.preventDefault(),this.open=!0)}),this.cleanups.listen(this.panel,"toggle",()=>{const t=this.panel.matches(":popover-open");t!==this.open&&this.toggleAttribute("open",t),this.trigger.setAttribute("aria-expanded",String(t)),this.dbEmit("open-change",{open:t})}),this.cleanups.listen(this.inbox,"db-notification-open",()=>{this.open=!1,this.trigger?.focus()}),this.cleanups.listen(document,"focusin",t=>{this.open&&t.target instanceof Node&&!this.contains(t.target)&&(this.open=!1)}),this.cleanups.listen(window,"resize",()=>this.position()),this.cleanups.listen(window,"scroll",()=>this.position(),{capture:!0,passive:!0}),this.sync()}disconnectedCallback(){this.panel?.matches(":popover-open")&&this.panel.hidePopover(),super.disconnectedCallback()}attributeChangedCallback(){this.isConnected&&this.sync()}sync(){if(!this.trigger||!this.panel||!this.inbox)return;const t=this.getAttribute("label")||o("notification.title"),i=this.hasAttribute("unread-count")?e(this.getAttribute("unread-count")):this.itemData.filter(t=>t.unread).length;if(this.trigger.replaceChildren(a("bell-active",18)),null===i||i>0){const t=document.createElement("db-badge");t.setAttribute("variant","primary"),t.setAttribute("type",null===i?"text":"number"),t.setAttribute("size","s"),null===i?t.textContent="—":t.setAttribute("count",String(i)),t.setAttribute("aria-hidden","true"),this.trigger.append(t)}this.trigger.setAttribute("aria-label",`${t} · ${o("notification.unread")} ${null===i?o("notification.countUnknown"):i}`),this.trigger.setAttribute("aria-expanded",String(this.open)),this.trigger.toggleAttribute("disabled",this.hasAttribute("disabled")),this.panel.setAttribute("aria-label",t),this.inbox.notifications=this.itemData;for(const t of["label","loading","pending","error","disabled"]){const i=this.getAttribute(t);null===i?this.inbox.removeAttribute(t):this.inbox.getAttribute(t)!==i&&this.inbox.setAttribute(t,i)}this.open&&!this.hasAttribute("disabled")?this.panel.matches(":popover-open")||(this.panel.showPopover(),this.position(),this.inbox.querySelector("db-button:not([disabled])")?.focus()):this.panel.matches(":popover-open")&&this.panel.hidePopover(),this.position()}position(){if(!this.panel?.matches(":popover-open")||!this.trigger)return;const t=this.trigger.getBoundingClientRect();this.panel.style.left=`${Math.max(8,Math.min(t.right-this.panel.offsetWidth,innerWidth-this.panel.offsetWidth-8))}px`,this.panel.style.top=`${Math.max(8,Math.min(t.bottom+8,innerHeight-this.panel.offsetHeight-8))}px`}}customElements.get("db-notification-dropdown")||customElements.define("db-notification-dropdown",DbNotificationDropdown);export{DbNotificationDropdown};

package/dist/esm/components/db-notification-inbox.d.ts

@@ -0,0 +1,25 @@
+import { DbElement } from '../core/base-element.js';
+import { DbNotificationItem } from '../core/notification-ui.js';
+export { DbNotificationAction, DbNotificationReadAll } from '../core/notification-ui.js';
+import './db-button.js';
+
+/** Controlled data, local filter. The app confirms read state; opening never marks an item read implicitly. */
+declare class DbNotificationInbox extends DbElement {
+    private itemData;
+    private filter;
+    private restoreFocus;
+    static get observedAttributes(): string[];
+    get notifications(): DbNotificationItem[];
+    set notifications(value: DbNotificationItem[]);
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private blocked;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-notification-inbox': DbNotificationInbox;
+    }
+}
+
+export { DbNotificationInbox, DbNotificationItem };

package/dist/esm/components/db-notification-inbox.js

@@ -0,0 +1 @@
+import{DbElement as t}from"../core/base-element.js";import{textNode as i,creditAction as e,replaceView as n}from"../core/credit-ui.js";import{parseNotifications as a}from"../core/notification-ui.js";import{t as o}from"../core/i18n.js";import"./db-button.js";class DbNotificationInbox extends t{constructor(){super(...arguments),this.itemData=[],this.filter="all",this.restoreFocus=!1}static get observedAttributes(){return["label","loading","pending","error","disabled"]}get notifications(){return this.itemData.map(t=>({...t}))}set notifications(t){this.itemData=a(t),this.isConnected&&this.render()}connectedCallback(){this.upgradeProperties(["notifications"]),this.cleanups.listen(this,"db-click",t=>{if(!(t.target instanceof HTMLElement)||this.blocked())return;const i=t.target.dataset.action;if("notification-filter:all"===i||"notification-filter:unread"===i)return this.filter=i.endsWith(":unread")?"unread":"all",void this.render();if("notification-retry"===i)return void this.dbEmit("retry");if(this.hasAttribute("error"))return;if("notification-read-all"===i){const t=this.itemData.filter(t=>t.unread).map(t=>t.id);t.length&&(this.restoreFocus=!0,this.dbEmit("read-all",{ids:t}))}const e=t.target.dataset.notificationId,n=this.itemData.find(t=>t.id===e);n&&(i===`notification-open:${n.id}`&&this.dbEmit("notification-open",{id:n.id}),i===`notification-read:${n.id}`&&n.unread&&(this.restoreFocus=!0,this.dbEmit("read",{id:n.id})))}),this.render()}attributeChangedCallback(){this.isConnected&&this.render()}blocked(){return this.hasAttribute("disabled")||this.hasAttribute("loading")||this.hasAttribute("pending")}render(){const t="designbase-wc-notification-inbox";this.classList.add(t),this.setAttribute("aria-busy",String(this.hasAttribute("loading")||this.hasAttribute("pending")));const a=this.contains(document.activeElement),s=i("h3",`${t}__title`,this.getAttribute("label")||o("notification.title"));s.tabIndex=-1,s.dataset.action="notification-heading";const r=i("div",`${t}__controls`,"");r.setAttribute("aria-label",o("notification.filters"));for(const t of["all","unread"]){const i=e(`notification-filter:${t}`,o(`notification.${t}`),this.blocked());i.setAttribute("aria-pressed",String(this.filter===t)),i.setAttribute("variant",this.filter===t?"primary":"tertiary"),r.append(i)}const c=e("notification-read-all",o("notification.readAll"),this.blocked()||this.hasAttribute("error")||!this.itemData.some(t=>t.unread));c.setAttribute("variant","tertiary"),r.append(c);const d=[s,r],l=this.getAttribute("error");if(l){const n=i("p",`${t}__message`,l);n.setAttribute("role","alert"),d.push(n,e("notification-retry",o("notification.retry"),this.blocked()))}if(this.hasAttribute("loading")){const e=i("p",`${t}__message`,o("loading"));e.setAttribute("role","status"),d.push(e)}else{const n=this.itemData.filter(t=>"all"===this.filter||t.unread);if(n.length){const a=i("ul",`${t}__list`,"");for(const s of n){const n=i("li",`${t}__item`,"");n.dataset.unread=String(s.unread);const r=i("div",`${t}__meta`,"");s.unread&&r.append(i("span",`${t}__unread`,o("notification.unread"))),s.categoryLabel&&r.append(i("span","",s.categoryLabel)),r.append(i("span","",s.dateLabel));const c=e(`notification-open:${s.id}`,s.title,this.blocked()||!!l);if(c.dataset.notificationId=s.id,c.classList.add(`${t}__open`),c.setAttribute("variant","ghost"),n.append(r,c,i("p",`${t}__description`,s.description)),s.unread){const t=e(`notification-read:${s.id}`,o("notification.markRead"),this.blocked()||!!l);t.dataset.notificationId=s.id,t.setAttribute("variant","tertiary"),n.append(t)}a.append(n)}d.push(a)}else{const e=i("p",`${t}__empty`,o("unread"===this.filter?"notification.caughtUp":"notification.empty"));e.setAttribute("role","status"),d.push(e)}}const h=this.restoreFocus&&this.checkVisibility()&&(document.activeElement===document.body||this.contains(document.activeElement));if(n(this,...d),h||a&&!this.contains(document.activeElement)){const t=this.blocked()?"notification-heading":`notification-filter:${this.filter}`;this.querySelector(`[data-action="${t}"]`)?.focus()}this.restoreFocus=!1}}customElements.get("db-notification-inbox")||customElements.define("db-notification-inbox",DbNotificationInbox);export{DbNotificationInbox};

package/dist/esm/components/db-otp-input.d.ts

@@ -1,4 +1,4 @@
-import { OTP_INPUT_SIZES } from '@designbasekorea/ui-contracts';
+import { OTP_INPUT_SIZES } from '../ui-contracts/dist/components.d.js';
 
 /**
  * ui-wc — db-otp-input (수동 작성, 자동 동기화 대상 아님)

package/dist/esm/components/db-phone-verify.d.ts

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

package/dist/esm/components/db-plan-overview.d.ts

@@ -0,0 +1,26 @@
+import { DbElement } from '../core/base-element.js';
+import './db-button.js';
+
+interface DbPlanFeature {
+    id: string;
+    label: string;
+    allowed: boolean;
+}
+/** Presentation of server-supplied entitlements. Never grants access or changes subscriptions. */
+declare class DbPlanOverview extends DbElement {
+    private featureData;
+    static get observedAttributes(): string[];
+    get features(): DbPlanFeature[];
+    set features(value: DbPlanFeature[]);
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-plan-overview': DbPlanOverview;
+    }
+}
+
+export { DbPlanOverview };
+export type { DbPlanFeature };

package/dist/esm/components/db-plan-overview.js

@@ -0,0 +1 @@
+import{DbElement as t}from"../core/base-element.js";import{textNode as e,creditAction as a,replaceView as i,creditNumber as s,creditText as r}from"../core/credit-ui.js";import{t as n}from"../core/i18n.js";import"./db-button.js";class DbPlanOverview extends t{constructor(){super(...arguments),this.featureData=[]}static get observedAttributes(){return["name","price-label","period-label","used","limit","unit","label","manage-label","loading","error","disabled"]}get features(){return this.featureData.map(t=>({...t}))}set features(t){const e=new Set;this.featureData=Array.isArray(t)?t.filter(t=>!(!t||"string"!=typeof t.id||!t.id||e.has(t.id)||"string"!=typeof t.label||"boolean"!=typeof t.allowed)&&(e.add(t.id),!0)).map(t=>({...t})):[],this.isConnected&&this.render()}connectedCallback(){this.upgradeProperties(["features"]),this.cleanups.listen(this,"db-click",t=>{if(!(t.target instanceof HTMLElement))return;if(this.hasAttribute("loading")||this.hasAttribute("disabled"))return;const e=t.target.dataset.action;"retry"===e&&this.dbEmit("retry"),"manage"!==e||this.hasAttribute("error")||this.dbEmit("manage")}),this.render()}attributeChangedCallback(){this.isConnected&&this.render()}render(){const t="designbase-wc-plan-overview";this.classList.add(t);const l=this.hasAttribute("loading"),o=this.getAttribute("error");this.setAttribute("aria-busy",String(l));const d=e("div",`${t}__header`,"");d.append(e("h3",`${t}__label`,this.getAttribute("label")||n("plan.current")));const u=[d];if(l||o){const s=e("p",`${t}__message`,l?n("loading"):o||"");return s.setAttribute("role",l?"status":"alert"),u.push(s),l||u.push(a("retry",n("plan.retry"),this.hasAttribute("disabled"))),void i(this,...u)}const b=e("strong",`${t}__name`,this.getAttribute("name")||"—"),p=e("p",`${t}__price`,this.getAttribute("price-label")||"");this.hasAttribute("period-label")&&p.append(e("span","",` / ${this.getAttribute("period-label")}`)),u.push(b,p);const h=s(this.getAttribute("used")),c=s(this.getAttribute("limit")),g=e("div",`${t}__usage`,"");if(g.append(e("span","",`${n("plan.usage")} ${r(h)} / ${r(c)} ${this.getAttribute("unit")||n("credits.unit")}`)),null!==h&&null!==c&&c>0){const t=document.createElement("progress");t.max=c,t.value=Math.min(h,c),t.setAttribute("aria-label",n("plan.usage")),g.append(t)}u.push(g);const m=e("ul",`${t}__features`,"");for(const a of this.featureData){const i=e("li","","");i.dataset.allowed=String(a.allowed),i.append(e("span","",a.label),e("span",`${t}__permission`,n(a.allowed?"plan.allowed":"plan.locked"))),m.append(i)}u.push(m),this.hasAttribute("manage-label")&&u.push(a("manage",this.getAttribute("manage-label")||n("plan.manage"),this.hasAttribute("disabled"))),i(this,...u)}}customElements.get("db-plan-overview")||customElements.define("db-plan-overview",DbPlanOverview);export{DbPlanOverview};

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

@@ -1 +1 @@
-import{POPOVER_PLACEMENTS as e,POPOVER_TRIGGERS as t}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbPopover extends HTMLElement{constructor(){super(...arguments),this.onDocMouseDown=null,this.onDocKeyDown=null,this.onExternalTriggerClick=null,this.handleTriggerClick=e=>{"click"===this.resolvedTrigger()&&(e.preventDefault(),e.stopPropagation(),this.setOpen(!this.isOpen()))},this.handleTriggerMouseEnter=()=>{"hover"===this.resolvedTrigger()&&this.scheduleOpen()},this.handleTriggerMouseLeave=()=>{"hover"===this.resolvedTrigger()&&this.scheduleClose()},this.handleTriggerFocus=()=>{"focus"===this.resolvedTrigger()&&this.scheduleOpen()},this.handleTriggerBlur=()=>{"focus"===this.resolvedTrigger()&&this.scheduleClose()},this.handleReposition=()=>{this.isOpen()&&(this.repositionRaf&&cancelAnimationFrame(this.repositionRaf),this.repositionRaf=requestAnimationFrame(()=>{this.positionPanel(),this.repositionRaf=void 0}))}}static get observedAttributes(){return["open","placement","position","title","content","size","variant","trigger","delay","hide-delay","always-show","disabled","max-width","show-arrow","close-on-outside-click","close-on-escape","trigger-id"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}connectedCallback(){this.classList.add("designbase-wc-popover-host"),this.hasAttribute("placement")||this.hasAttribute("position")||this.setAttribute("placement","top"),this.render(),this.childObserver=new MutationObserver(()=>this.render()),this.childObserver.observe(this,{childList:!0}),this.bindExternalTrigger(),this.attachGlobalListeners(),this.syncOpenFromAttributes()}disconnectedCallback(){this.childObserver?.disconnect(),this.clearTimers(),this.repositionRaf&&cancelAnimationFrame(this.repositionRaf),this.unbindExternalTrigger(),this.detachGlobalListeners(),this.removePanel()}attributeChangedCallback(e){this.isConnected&&("trigger-id"===e&&(this.unbindExternalTrigger(),this.bindExternalTrigger()),"open"!==e&&"always-show"!==e&&"disabled"!==e?("content"===e&&this.bodyEl&&(this.bodyEl.textContent=this.getAttribute("content")||""),this.isOpen()&&(this.updatePanelMetadata(),requestAnimationFrame(()=>this.positionPanel()))):this.syncOpenFromAttributes())}resolvedPlacement(){const t=this.getAttribute("position")||this.getAttribute("placement")||"top";return e.includes(t)?t:"top"}resolvedTrigger(){const e=this.getAttribute("trigger")||"click";return t.includes(e)?e:"click"}isControlled(){return this.hasAttribute("open")}isOpen(){return!this.hasAttribute("disabled")&&(!!this.hasAttribute("always-show")||(this.isControlled()?"false"!==this.getAttribute("open"):this.panel?.classList.contains("designbase-wc-popover--visible")??!1))}setOpen(e){this.hasAttribute("disabled")||this.hasAttribute("always-show")||(this.isControlled()?e?this.setAttribute("open",""):this.removeAttribute("open"):e?this.showPanel():this.hidePanel(),this.dispatchEvent(new CustomEvent("db-open-change",{bubbles:!0,composed:!0,detail:{open:e}})),e||this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0})))}syncOpenFromAttributes(){this.hasAttribute("always-show")?this.showPanel():this.isControlled()&&("false"!==this.getAttribute("open")?this.showPanel():this.hidePanel())}clearTimers(){this.showTimer&&clearTimeout(this.showTimer),this.hideTimer&&clearTimeout(this.hideTimer),this.showTimer=void 0,this.hideTimer=void 0}groupOf(e){return e.startsWith("top")?"top":e.startsWith("bottom")?"bottom":e.startsWith("left")?"left":"right"}collectTriggerChildren(){const isInternalNode=e=>e.hasAttribute("data-wc-internal")||e===this.triggerWrap,e=Array.from(this.children).filter(e=>!isInternalNode(e));return e.length>0?e:Array.from(this.triggerWrap?.children||[])}ensureTriggerWrap(){this.triggerWrap||(this.triggerWrap=document.createElement("span"),this.triggerWrap.className="designbase-wc-popover__trigger",this.triggerWrap.setAttribute("data-wc-internal",""),this.triggerWrap.tabIndex=0,this.triggerWrap.addEventListener("click",this.handleTriggerClick),this.triggerWrap.addEventListener("mouseenter",this.handleTriggerMouseEnter),this.triggerWrap.addEventListener("mouseleave",this.handleTriggerMouseLeave),this.triggerWrap.addEventListener("focus",this.handleTriggerFocus),this.triggerWrap.addEventListener("blur",this.handleTriggerBlur))}mountTriggerChildren(e){this.triggerWrap&&e.forEach(e=>{e.parentElement!==this.triggerWrap&&this.triggerWrap.append(e)})}collectBodyChildren(){return Array.from(this.querySelectorAll('[slot="content"]'))}bindExternalTrigger(){const e=this.getAttribute("trigger-id");e&&(this.triggerEl=document.getElementById(e),this.triggerEl&&(this.onExternalTriggerClick=()=>{"click"===this.resolvedTrigger()&&this.setOpen(!this.isOpen())},this.triggerEl.addEventListener("click",this.onExternalTriggerClick)))}unbindExternalTrigger(){this.triggerEl&&this.onExternalTriggerClick&&this.triggerEl.removeEventListener("click",this.onExternalTriggerClick),this.triggerEl=null,this.onExternalTriggerClick=null}attachGlobalListeners(){this.onDocMouseDown=e=>{if(!this.isOpen()||"false"===this.getAttribute("close-on-outside-click"))return;const t=e.target;this.panel?.contains(t)||this.triggerWrap?.contains(t)||this.triggerEl?.contains(t)||this.setOpen(!1)},this.onDocKeyDown=e=>{"Escape"===e.key&&this.isOpen()&&"false"!==this.getAttribute("close-on-escape")&&this.setOpen(!1)},document.addEventListener("mousedown",this.onDocMouseDown),document.addEventListener("keydown",this.onDocKeyDown)}detachGlobalListeners(){this.onDocMouseDown&&document.removeEventListener("mousedown",this.onDocMouseDown),this.onDocKeyDown&&document.removeEventListener("keydown",this.onDocKeyDown),this.onDocMouseDown=null,this.onDocKeyDown=null}scheduleOpen(){this.clearTimers();const e="hover"===this.resolvedTrigger()?Math.max(0,Number(this.getAttribute("delay")||0)):0;this.showTimer=setTimeout(()=>this.showPanel(),e)}scheduleClose(){this.clearTimers();const e="hover"===this.resolvedTrigger()?Math.max(0,Number(this.getAttribute("hide-delay")||80)):0;this.hideTimer=setTimeout(()=>this.setOpen(!1),e)}getTriggerRect(){const e=this.triggerEl||this.triggerWrap;return e?.getBoundingClientRect()}flipPlacementIfNeeded(e,t,i){const s=window.innerHeight,r=window.innerWidth,o=this.groupOf(e),n=t.top-i.height-8>=8,a=t.bottom+8+i.height<=s-8,h=t.left-i.width-8>=8,l=t.right+8+i.width<=r-8;return"top"===o&&!n&&a?e.replace(/^top/,"bottom"):"bottom"===o&&!a&&n?e.replace(/^bottom/,"top"):"left"===o&&!h&&l?e.replace(/^left/,"right"):"right"===o&&!l&&h?e.replace(/^right/,"left"):e}applyCoords(e,t,i){let s=0,r=0,o=0,n=0;const a=i.height,h=i.width,l=16;switch(e){case"top":s=t.top-i.height-8,r=t.left+t.width/2-i.width/2,o=a-5,n=h/2-5;break;case"top-start":s=t.top-i.height-8,r=t.left,o=a-5,n=11;break;case"top-end":s=t.top-i.height-8,r=t.right-i.width,o=a-5,n=h-l-5;break;case"bottom":s=t.bottom+8,r=t.left+t.width/2-i.width/2,o=-5,n=h/2-5;break;case"bottom-start":s=t.bottom+8,r=t.left,o=-5,n=11;break;case"bottom-end":s=t.bottom+8,r=t.right-i.width,o=-5,n=h-l-5;break;case"left":s=t.top+t.height/2-i.height/2,r=t.left-i.width-8,o=a/2-5,n=h-5;break;case"left-start":s=t.top,r=t.left-i.width-8,o=11,n=h-5;break;case"left-end":s=t.bottom-i.height,r=t.left-i.width-8,o=a-l-5,n=h-5;break;case"right":s=t.top+t.height/2-i.height/2,r=t.right+8,o=a/2-5,n=-5;break;case"right-start":s=t.top,r=t.right+8,o=11,n=-5;break;case"right-end":s=t.bottom-i.height,r=t.right+8,o=a-l-5,n=-5}const d=window.innerWidth,c=window.innerHeight;return r<8&&(r=8),r+i.width>d-8&&(r=d-i.width-8),s<8&&(s=8),s+i.height>c-8&&(s=c-i.height-8),{top:s,left:r,aTop:o,aLeft:n,placement:e}}positionPanel(){if(!this.panel)return;const t=this.getTriggerRect();if(!t)return;const i=Number(this.getAttribute("max-width")||300);this.panel.style.maxWidth=`${i}px`,this.panel.offsetHeight;const s=this.panel.getBoundingClientRect(),r=this.resolvedPlacement(),o=this.flipPlacementIfNeeded(r,t,s),{top:n,left:a,aTop:h,aLeft:l}=this.applyCoords(o,t,s);this.panel.style.top=`${n}px`,this.panel.style.left=`${a}px`,this.panel.dataset.placementGroup=this.groupOf(o),e.forEach(e=>{this.panel.classList.toggle(`designbase-wc-popover--${e}`,e===o)}),this.arrowEl&&(this.arrowEl.className=`designbase-wc-popover__arrow designbase-wc-popover__arrow--${o}`,this.arrowEl.style.top=`${h}px`,this.arrowEl.style.left=`${l}px`)}revealPanel(){this.panel&&(this.panel.classList.remove("designbase-wc-popover--visible"),this.positionPanel(),this.panel.offsetHeight,this.positionPanel(),this.panel.classList.add("designbase-wc-popover--visible"))}updatePanelMetadata(){if(!this.panel)return;const e=this.getAttribute("size")||"m",t=this.getAttribute("variant")||"default",i=this.resolvedPlacement();this.panel.className=["designbase-wc-popover",`designbase-wc-popover--${e}`,`designbase-wc-popover--${t}`,`designbase-wc-popover--${i}`,this.isOpen()?"designbase-wc-popover--visible":"",this.hasAttribute("disabled")?"designbase-wc-popover--disabled":""].filter(Boolean).join(" ")}ensurePanel(){if(this.panel)return;const e=document.createElement("div");e.className="designbase-wc-popover",e.setAttribute("data-wc-internal",""),e.setAttribute("role","dialog"),e.setAttribute("aria-modal","false"),e.style.position="fixed",e.style.zIndex="9999";const t=document.createElement("div");t.className="designbase-wc-popover__content";const i=document.createElement("div");i.className="designbase-wc-popover__header";const s=document.createElement("h3");s.className="designbase-wc-popover__title";const r=document.createElement("db-button");r.className="designbase-wc-popover__close-button",r.setAttribute("variant","ghost"),r.setAttribute("size","s"),r.setAttribute("icon-only",""),r.setAttribute("start-icon","close"),r.setAttribute("aria-label","팝오버 닫기"),r.addEventListener("db-click",e=>{e.stopPropagation(),this.setOpen(!1)}),i.append(s,r),this.bodyEl=document.createElement("div"),this.bodyEl.className="designbase-wc-popover__body",t.append(i,this.bodyEl),e.append(t),"false"!==this.getAttribute("show-arrow")&&(this.arrowEl=document.createElement("div"),this.arrowEl.className=`designbase-wc-popover__arrow designbase-wc-popover__arrow--${this.resolvedPlacement()}`,e.append(this.arrowEl)),this.panel=e,this.panel.querySelector(".designbase-wc-popover__title").textContent=this.getAttribute("title")||"",this.panel.querySelector(".designbase-wc-popover__title").hidden=!this.getAttribute("title"),document.body.append(e),e.addEventListener("mouseenter",()=>{"hover"===this.resolvedTrigger()&&this.clearTimers()}),e.addEventListener("mouseleave",()=>{"hover"===this.resolvedTrigger()&&this.scheduleClose()})}showPanel(){if(this.hasAttribute("disabled"))return;this.ensurePanel(),this.updatePanelMetadata();const e=this.collectBodyChildren();e.length>0?this.bodyEl.replaceChildren(...e.map(e=>e.cloneNode(!0))):this.bodyEl.textContent=this.getAttribute("content")||"";const t=this.panel.querySelector(".designbase-wc-popover__title");t.textContent=this.getAttribute("title")||"",t.hidden=!this.getAttribute("title"),requestAnimationFrame(()=>{this.revealPanel(),window.addEventListener("scroll",this.handleReposition,{capture:!0,passive:!0}),window.addEventListener("resize",this.handleReposition)})}hidePanel(){this.panel?.classList.remove("designbase-wc-popover--visible"),window.removeEventListener("scroll",this.handleReposition,!0),window.removeEventListener("resize",this.handleReposition),this.hasAttribute("always-show")||this.removePanel()}removePanel(){this.panel?.remove(),this.panel=void 0,this.bodyEl=void 0,this.arrowEl=void 0}render(){this.ensureTriggerWrap();const e=this.collectTriggerChildren();this.mountTriggerChildren(e);const t=Boolean(this.getAttribute("trigger-id"));this.triggerWrap&&(e.length>0||!t?this.triggerWrap.parentElement!==this&&this.append(this.triggerWrap):this.triggerWrap.parentElement===this&&this.triggerWrap.remove()),this.hasAttribute("always-show")&&this.showPanel()}}customElements.get("db-popover")||customElements.define("db-popover",DbPopover);export{DbPopover};
+import{POPOVER_PLACEMENTS as e,POPOVER_TRIGGERS as t}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbPopover extends HTMLElement{constructor(){super(...arguments),this.onDocMouseDown=null,this.onDocKeyDown=null,this.onExternalTriggerClick=null,this.handleTriggerClick=e=>{"click"===this.resolvedTrigger()&&(e.preventDefault(),e.stopPropagation(),this.setOpen(!this.isOpen()))},this.handleTriggerMouseEnter=()=>{"hover"===this.resolvedTrigger()&&this.scheduleOpen()},this.handleTriggerMouseLeave=()=>{"hover"===this.resolvedTrigger()&&this.scheduleClose()},this.handleTriggerFocus=()=>{"focus"===this.resolvedTrigger()&&this.scheduleOpen()},this.handleTriggerBlur=()=>{"focus"===this.resolvedTrigger()&&this.scheduleClose()},this.handleReposition=()=>{this.isOpen()&&(this.repositionRaf&&cancelAnimationFrame(this.repositionRaf),this.repositionRaf=requestAnimationFrame(()=>{this.positionPanel(),this.repositionRaf=void 0}))}}static get observedAttributes(){return["open","placement","position","title","content","size","variant","trigger","delay","hide-delay","always-show","disabled","max-width","show-arrow","close-on-outside-click","close-on-escape","trigger-id"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}connectedCallback(){this.classList.add("designbase-wc-popover-host"),this.hasAttribute("placement")||this.hasAttribute("position")||this.setAttribute("placement","top"),this.render(),this.childObserver=new MutationObserver(()=>this.render()),this.childObserver.observe(this,{childList:!0}),this.bindExternalTrigger(),this.attachGlobalListeners(),this.syncOpenFromAttributes()}disconnectedCallback(){this.childObserver?.disconnect(),this.clearTimers(),this.repositionRaf&&cancelAnimationFrame(this.repositionRaf),this.unbindExternalTrigger(),this.detachGlobalListeners(),this.removePanel()}attributeChangedCallback(e){this.isConnected&&("trigger-id"===e&&(this.unbindExternalTrigger(),this.bindExternalTrigger()),"open"!==e&&"always-show"!==e&&"disabled"!==e?("content"===e&&this.bodyEl&&(this.bodyEl.textContent=this.getAttribute("content")||""),this.isOpen()&&(this.updatePanelMetadata(),requestAnimationFrame(()=>this.positionPanel()))):this.syncOpenFromAttributes())}resolvedPlacement(){const t=this.getAttribute("position")||this.getAttribute("placement")||"top";return e.includes(t)?t:"top"}resolvedTrigger(){const e=this.getAttribute("trigger")||"click";return t.includes(e)?e:"click"}isControlled(){return this.hasAttribute("open")}isOpen(){return!this.hasAttribute("disabled")&&(!!this.hasAttribute("always-show")||(this.isControlled()?"false"!==this.getAttribute("open"):this.panel?.classList.contains("designbase-wc-popover--visible")??!1))}setOpen(e){this.hasAttribute("disabled")||this.hasAttribute("always-show")||(this.isControlled()?e?this.setAttribute("open",""):this.removeAttribute("open"):e?this.showPanel():this.hidePanel(),this.dispatchEvent(new CustomEvent("db-open-change",{bubbles:!0,composed:!0,detail:{open:e}})),e||this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0})))}syncOpenFromAttributes(){this.hasAttribute("always-show")?this.showPanel():this.isControlled()&&("false"!==this.getAttribute("open")?this.showPanel():this.hidePanel())}clearTimers(){this.showTimer&&clearTimeout(this.showTimer),this.hideTimer&&clearTimeout(this.hideTimer),this.showTimer=void 0,this.hideTimer=void 0}groupOf(e){return e.startsWith("top")?"top":e.startsWith("bottom")?"bottom":e.startsWith("left")?"left":"right"}collectTriggerChildren(){const isInternalNode=e=>e.hasAttribute("data-wc-internal")||"content"===e.getAttribute("slot")||e===this.triggerWrap,e=Array.from(this.children).filter(e=>!isInternalNode(e));return e.length>0?e:Array.from(this.triggerWrap?.children||[]).filter(e=>"content"!==e.getAttribute("slot"))}ensureTriggerWrap(){this.triggerWrap||(this.triggerWrap=document.createElement("span"),this.triggerWrap.className="designbase-wc-popover__trigger",this.triggerWrap.setAttribute("data-wc-internal",""),this.triggerWrap.tabIndex=this.hasAttribute("trigger-id")?-1:0,this.triggerWrap.addEventListener("click",this.handleTriggerClick),this.triggerWrap.addEventListener("mouseenter",this.handleTriggerMouseEnter),this.triggerWrap.addEventListener("mouseleave",this.handleTriggerMouseLeave),this.triggerWrap.addEventListener("focus",this.handleTriggerFocus),this.triggerWrap.addEventListener("blur",this.handleTriggerBlur))}mountTriggerChildren(e){this.triggerWrap&&e.forEach(e=>{e.parentElement!==this.triggerWrap&&this.triggerWrap.append(e)})}collectBodyChildren(){return[...Array.from(this.querySelectorAll(':scope > [slot="content"]')),...Array.from(this.bodyEl?.querySelectorAll(':scope > [slot="content"]')||[])]}bindExternalTrigger(){const e=this.getAttribute("trigger-id");e&&(this.triggerEl=document.getElementById(e),this.triggerEl&&(this.onExternalTriggerClick=()=>{"click"===this.resolvedTrigger()&&this.setOpen(!this.isOpen())},this.triggerEl.addEventListener("click",this.onExternalTriggerClick)))}unbindExternalTrigger(){this.triggerEl&&this.onExternalTriggerClick&&this.triggerEl.removeEventListener("click",this.onExternalTriggerClick),this.triggerEl=null,this.onExternalTriggerClick=null}attachGlobalListeners(){this.onDocMouseDown=e=>{if(!this.isOpen()||"false"===this.getAttribute("close-on-outside-click"))return;const t=e.target;this.panel?.contains(t)||this.triggerWrap?.contains(t)||this.triggerEl?.contains(t)||this.setOpen(!1)},this.onDocKeyDown=e=>{"Escape"===e.key&&this.isOpen()&&"false"!==this.getAttribute("close-on-escape")&&this.setOpen(!1)},document.addEventListener("mousedown",this.onDocMouseDown),document.addEventListener("keydown",this.onDocKeyDown)}detachGlobalListeners(){this.onDocMouseDown&&document.removeEventListener("mousedown",this.onDocMouseDown),this.onDocKeyDown&&document.removeEventListener("keydown",this.onDocKeyDown),this.onDocMouseDown=null,this.onDocKeyDown=null}scheduleOpen(){this.clearTimers();const e="hover"===this.resolvedTrigger()?Math.max(0,Number(this.getAttribute("delay")||0)):0;this.showTimer=setTimeout(()=>this.showPanel(),e)}scheduleClose(){this.clearTimers();const e="hover"===this.resolvedTrigger()?Math.max(0,Number(this.getAttribute("hide-delay")||80)):0;this.hideTimer=setTimeout(()=>this.setOpen(!1),e)}getTriggerRect(){const e=this.triggerEl||this.triggerWrap;return e?.getBoundingClientRect()}flipPlacementIfNeeded(e,t,i){const s=window.innerHeight,r=window.innerWidth,o=this.groupOf(e),n=t.top-i.height-8>=8,a=t.bottom+8+i.height<=s-8,h=t.left-i.width-8>=8,l=t.right+8+i.width<=r-8;return"top"===o&&!n&&a?e.replace(/^top/,"bottom"):"bottom"===o&&!a&&n?e.replace(/^bottom/,"top"):"left"===o&&!h&&l?e.replace(/^left/,"right"):"right"===o&&!l&&h?e.replace(/^right/,"left"):e}applyCoords(e,t,i){let s=0,r=0,o=0,n=0;const a=i.height,h=i.width,l=16;switch(e){case"top":s=t.top-i.height-8,r=t.left+t.width/2-i.width/2,o=a-5,n=h/2-5;break;case"top-start":s=t.top-i.height-8,r=t.left,o=a-5,n=11;break;case"top-end":s=t.top-i.height-8,r=t.right-i.width,o=a-5,n=h-l-5;break;case"bottom":s=t.bottom+8,r=t.left+t.width/2-i.width/2,o=-5,n=h/2-5;break;case"bottom-start":s=t.bottom+8,r=t.left,o=-5,n=11;break;case"bottom-end":s=t.bottom+8,r=t.right-i.width,o=-5,n=h-l-5;break;case"left":s=t.top+t.height/2-i.height/2,r=t.left-i.width-8,o=a/2-5,n=h-5;break;case"left-start":s=t.top,r=t.left-i.width-8,o=11,n=h-5;break;case"left-end":s=t.bottom-i.height,r=t.left-i.width-8,o=a-l-5,n=h-5;break;case"right":s=t.top+t.height/2-i.height/2,r=t.right+8,o=a/2-5,n=-5;break;case"right-start":s=t.top,r=t.right+8,o=11,n=-5;break;case"right-end":s=t.bottom-i.height,r=t.right+8,o=a-l-5,n=-5}const d=window.innerWidth,c=window.innerHeight;return r<8&&(r=8),r+i.width>d-8&&(r=d-i.width-8),s<8&&(s=8),s+i.height>c-8&&(s=c-i.height-8),{top:s,left:r,aTop:o,aLeft:n,placement:e}}positionPanel(){if(!this.panel)return;const t=this.getTriggerRect();if(!t)return;const i=Number(this.getAttribute("max-width")||300);this.panel.style.maxWidth=`${i}px`,this.panel.offsetHeight;const s=this.panel.getBoundingClientRect(),r=this.resolvedPlacement(),o=this.flipPlacementIfNeeded(r,t,s),{top:n,left:a,aTop:h,aLeft:l}=this.applyCoords(o,t,s);this.panel.style.top=`${n}px`,this.panel.style.left=`${a}px`,this.panel.dataset.placementGroup=this.groupOf(o),e.forEach(e=>{this.panel.classList.toggle(`designbase-wc-popover--${e}`,e===o)}),this.arrowEl&&(this.arrowEl.className=`designbase-wc-popover__arrow designbase-wc-popover__arrow--${o}`,this.arrowEl.style.top=`${h}px`,this.arrowEl.style.left=`${l}px`)}revealPanel(){this.panel&&(this.panel.classList.remove("designbase-wc-popover--visible"),this.positionPanel(),this.panel.offsetHeight,this.positionPanel(),this.panel.classList.add("designbase-wc-popover--visible"))}updatePanelMetadata(){if(!this.panel)return;const e=this.getAttribute("size")||"m",t=this.getAttribute("variant")||"default",i=this.resolvedPlacement();this.panel.className=["designbase-wc-popover",`designbase-wc-popover--${e}`,`designbase-wc-popover--${t}`,`designbase-wc-popover--${i}`,this.isOpen()?"designbase-wc-popover--visible":"",this.hasAttribute("disabled")?"designbase-wc-popover--disabled":""].filter(Boolean).join(" ")}ensurePanel(){if(this.panel)return;const e=document.createElement("div");e.className="designbase-wc-popover",e.setAttribute("data-wc-internal",""),e.setAttribute("role","dialog"),e.setAttribute("aria-modal","false"),e.style.position="fixed",e.style.zIndex="9999";const t=document.createElement("div");t.className="designbase-wc-popover__content";const i=document.createElement("div");i.className="designbase-wc-popover__header";const s=document.createElement("h3");s.className="designbase-wc-popover__title";const r=document.createElement("db-button");r.className="designbase-wc-popover__close-button",r.setAttribute("variant","ghost"),r.setAttribute("size","s"),r.setAttribute("icon-only",""),r.setAttribute("start-icon","close"),r.setAttribute("aria-label","팝오버 닫기"),r.addEventListener("db-click",e=>{e.stopPropagation(),this.setOpen(!1)}),i.append(s,r),this.bodyEl=document.createElement("div"),this.bodyEl.className="designbase-wc-popover__body",t.append(i,this.bodyEl),e.append(t),"false"!==this.getAttribute("show-arrow")&&(this.arrowEl=document.createElement("div"),this.arrowEl.className=`designbase-wc-popover__arrow designbase-wc-popover__arrow--${this.resolvedPlacement()}`,e.append(this.arrowEl)),this.panel=e,this.panel.querySelector(".designbase-wc-popover__title").textContent=this.getAttribute("title")||"",this.panel.querySelector(".designbase-wc-popover__title").hidden=!this.getAttribute("title"),document.body.append(e),e.addEventListener("mouseenter",()=>{"hover"===this.resolvedTrigger()&&this.clearTimers()}),e.addEventListener("mouseleave",()=>{"hover"===this.resolvedTrigger()&&this.scheduleClose()})}showPanel(){if(this.hasAttribute("disabled"))return;this.ensurePanel(),this.updatePanelMetadata();const e=this.collectBodyChildren();e.length>0?this.bodyEl.replaceChildren(...e):this.bodyEl.textContent=this.getAttribute("content")||"";const t=this.panel.querySelector(".designbase-wc-popover__title");t.textContent=this.getAttribute("title")||"",t.hidden=!this.getAttribute("title"),requestAnimationFrame(()=>{this.revealPanel(),window.addEventListener("scroll",this.handleReposition,{capture:!0,passive:!0}),window.addEventListener("resize",this.handleReposition)})}hidePanel(){this.panel?.classList.remove("designbase-wc-popover--visible"),window.removeEventListener("scroll",this.handleReposition,!0),window.removeEventListener("resize",this.handleReposition),this.hasAttribute("always-show")||this.removePanel()}removePanel(){this.bodyEl?.querySelectorAll(':scope > [slot="content"]').forEach(e=>this.append(e)),this.panel?.remove(),this.panel=void 0,this.bodyEl=void 0,this.arrowEl=void 0}render(){this.ensureTriggerWrap();const e=this.collectTriggerChildren();this.mountTriggerChildren(e);const t=Boolean(this.getAttribute("trigger-id"));this.triggerWrap&&(e.length>0||!t?this.triggerWrap.parentElement!==this&&this.append(this.triggerWrap):this.triggerWrap.parentElement===this&&this.triggerWrap.remove()),this.hasAttribute("always-show")&&this.showPanel()}}customElements.get("db-popover")||customElements.define("db-popover",DbPopover);export{DbPopover};