@designbasekorea/ui-wc 0.2.1 → 0.3.0

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

@@ -0,0 +1,56 @@
+declare class DbMarquee extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private containerEl?;
+    private rowsEl?;
+    private srOnlyEl?;
+    private rows;
+    private rowCount;
+    private resizeObserver?;
+    private containerWidth;
+    private gap;
+    private scrollVelocityEnabled;
+    private rafId;
+    private lastFrameTime;
+    private lastScrollY;
+    private smoothedScrollV;
+    private baseDurationSec;
+    private reduceMotion;
+    private boundMeasure;
+    private boundFrame;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private getBool;
+    private parseItems;
+    private itemToText;
+    private build;
+    private bindResize;
+    /** rows 개수에 맞춰 행 DOM을 만들거나 제거한다. */
+    private reconcileRows;
+    private measure;
+    private unbindImageListeners;
+    private bindImageListeners;
+    private renderItem;
+    private renderGroup;
+    /**
+     * 각 행의 base 그룹을 items로 다시 만든다 — items/attributes 변경 시에만 실행.
+     * 이미지 노드 재생성으로 인한 재로딩을 막기 위해 measure() 중에는 건드리지 않는다.
+     */
+    private buildBase;
+    private baseImagesReady;
+    /** 트랙을 채울 만큼의 복제 그룹 개수를 델타만 조정한다. */
+    private reconcileDuplicates;
+    private syncReadyState;
+    private startScrollEngine;
+    private stopScrollEngine;
+    private frame;
+    private updateUI;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-marquee': DbMarquee;
+    }
+}
+
+export { DbMarquee };

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

@@ -0,0 +1 @@
+const t="designbase-wc-marquee";function isImageItem(t){return"object"==typeof t&&null!==t&&"string"==typeof t.src}class DbMarquee extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.rows=[],this.rowCount=0,this.containerWidth=0,this.gap=24,this.scrollVelocityEnabled=!1,this.rafId=0,this.lastFrameTime=0,this.lastScrollY=0,this.smoothedScrollV=0,this.baseDurationSec=12,this.reduceMotion=!1,this.boundMeasure=()=>this.measure(),this.boundFrame=t=>this.frame(t)}static get observedAttributes(){return["items","direction","duration","speed","size","variant","bordered","pause-on-hover","fade-edges","fade-width","edge-padding","gap","align-y","row-count","row-gap","scroll-velocity","scroll-boost","aria-label"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.reduceMotion="undefined"!=typeof window&&"function"==typeof window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.build(),this.bindResize()),this.updateUI()}disconnectedCallback(){this.resizeObserver?.disconnect(),this.stopScrollEngine(),this.unbindImageListeners()}attributeChangedCallback(){this.built&&this.updateUI()}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const r=this.getAttribute(t);return""===r||"true"===r}parseItems(){try{const t=this.getAttribute("items"),e=t?JSON.parse(t):[];if(Array.isArray(e)&&e.length>0)return e.filter(t=>"string"==typeof t||isImageItem(t))}catch{}const t=Array.from(this.children).filter(t=>!t.hasAttribute("data-wc-internal"));return t.length>0?t.map(t=>t.textContent?.trim()||""):[]}itemToText(t){return isImageItem(t)?t.alt||"":t}build(){this.containerEl=document.createElement("div"),this.srOnlyEl=document.createElement("span"),this.srOnlyEl.className=`${t}__sr-only`,this.rowsEl=document.createElement("div"),this.rowsEl.className=`${t}__rows`,this.containerEl.append(this.srOnlyEl,this.rowsEl),this.append(this.containerEl)}bindResize(){this.resizeObserver=new ResizeObserver(()=>this.measure()),this.containerEl&&this.resizeObserver.observe(this.containerEl)}reconcileRows(e,r){if(this.rowsEl){for(this.rowCount=e;this.rows.length<e;){const e=document.createElement("div");e.className=`${t}__row`;const r=document.createElement("div");r.className=`${t}__track`;const s=document.createElement("div");s.className=`${t}__group`,s.setAttribute("aria-hidden","true"),r.append(s),e.append(r),this.rowsEl.append(e),this.rows.push({rowEl:e,trackEl:r,baseGroupEl:s,baseGroupWidth:0,duplicateCount:0,baseDir:1,x:0,dirState:1})}for(;this.rows.length>e;){const t=this.rows.pop();t?.rowEl.remove()}this.rows.forEach((e,s)=>{e.baseDir=s%2==0?r:-r;const i=e.baseDir<0;e.rowEl.classList.toggle(`${t}__row--right`,i),e.rowEl.style.setProperty("--db-marquee-row-index",String(s))}),this.resizeObserver&&this.rows.forEach(t=>this.resizeObserver?.observe(t.baseGroupEl))}}measure(){this.containerWidth=Math.ceil(this.containerEl?.clientWidth??0),this.rows.forEach(t=>{t.baseGroupWidth=Math.ceil(t.baseGroupEl.scrollWidth??0),t.rowEl.style.setProperty("--db-marquee-shift",`${t.baseGroupWidth+this.gap}px`),this.reconcileDuplicates(t)}),this.syncReadyState()}unbindImageListeners(){this.rows.forEach(t=>{t.baseGroupEl.querySelectorAll("img").forEach(t=>{t.removeEventListener("load",this.boundMeasure),t.removeEventListener("error",this.boundMeasure)})})}bindImageListeners(){this.rows.forEach(t=>{t.baseGroupEl.querySelectorAll("img").forEach(t=>{t.complete||(t.addEventListener("load",this.boundMeasure),t.addEventListener("error",this.boundMeasure))})})}renderItem(e){const r=document.createElement("div");if(r.className=`${t}__item`,isImageItem(e)){r.classList.add(`${t}__item--image`);const s=document.createElement("img");if(s.className=`${t}__image`,s.src=e.src,s.alt=e.alt||"",s.loading="lazy",s.decoding="async",e.height&&(s.style.height=`${e.height}px`),e.href){const i=document.createElement("a");i.className=`${t}__link`,i.href=e.href,i.setAttribute("tabindex","-1"),i.append(s),r.append(i)}else r.append(s);return r}return r.textContent=e,r}renderGroup(e,r){const s=r??document.createElement("div");return s.className=`${t}__group`,s.setAttribute("aria-hidden","true"),s.replaceChildren(...e.map(t=>this.renderItem(t))),s}buildBase(t){this.rows.forEach(e=>{for(this.renderGroup(t,e.baseGroupEl);e.trackEl.children.length>1;)e.trackEl.lastElementChild?.remove();e.duplicateCount=0})}baseImagesReady(t){return Array.from(t.baseGroupEl.querySelectorAll("img")).every(t=>t.complete)}reconcileDuplicates(t){const e=t.baseGroupWidth>0&&this.baseImagesReady(t)?Math.max(1,Math.ceil(2*this.containerWidth/t.baseGroupWidth)):1;let r=t.trackEl.children.length-1;if(r===e)return void(t.duplicateCount=e);const s=this.parseItems();for(;r<e;)t.trackEl.append(this.renderGroup(s)),r+=1;for(;r>e;)t.trackEl.lastElementChild?.remove(),r-=1;t.duplicateCount=e}syncReadyState(){if(!this.containerEl)return;const e=this.rows.length>0&&this.rows.every(t=>t.baseGroupWidth>0);this.containerEl.classList.toggle(`${t}--ready`,e)}startScrollEngine(){this.rafId||this.reduceMotion||(this.lastScrollY="undefined"!=typeof window?window.scrollY:0,this.lastFrameTime=0,this.smoothedScrollV=0,this.rows.forEach(t=>{t.x=0,t.dirState=1}),this.rafId=requestAnimationFrame(this.boundFrame))}stopScrollEngine(){this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=0),this.rows.forEach(t=>{t.trackEl.style.transform=""})}frame(t){if(!this.scrollVelocityEnabled)return void(this.rafId=0);this.lastFrameTime||(this.lastFrameTime=t);const e=Math.min((t-this.lastFrameTime)/1e3,.05);this.lastFrameTime=t;const r="undefined"!=typeof window?window.scrollY:0,s=e>0?(r-this.lastScrollY)/e:0;this.lastScrollY=r;const i=1-Math.exp(-e/.12);this.smoothedScrollV+=(s-this.smoothedScrollV)*i;const a=Math.max(Number(this.getAttribute("scroll-boost")||6),0),o=this.smoothedScrollV/800*(a/6);this.rows.forEach(t=>{const r=t.baseGroupWidth+this.gap;if(r<=0)return;const s=r/this.baseDurationSec;let i=-t.baseDir*s*e;o<0?t.dirState=-1:o>0&&(t.dirState=1),i*=t.dirState,i+=i*Math.abs(o);let a=(t.x+i)%r;a>0&&(a-=r),t.x=a,t.trackEl.style.transform=`translate3d(${a}px, 0, 0)`}),this.rafId=requestAnimationFrame(this.boundFrame)}updateUI(){const e=this.parseItems();if(0===e.length)return this.stopScrollEngine(),void(this.hidden=!0);this.hidden=!1;const r=this.getAttribute("direction")||"left",s="right"===r?-1:1,i=Math.max(Number(this.getAttribute("duration")||12),1),a=Number(this.getAttribute("speed")||1),o=i/(Number.isFinite(a)&&a>0?a:1);this.baseDurationSec=o;const n=this.getAttribute("size")||"m",l=this.getAttribute("variant")||"default",h=this.getAttribute("align-y")||"center",c=this.getBool("fade-edges"),d=Math.max(Number(this.getAttribute("fade-width")||48),0),u=this.getAttribute("edge-padding"),m=null!==u&&""!==u?Math.max(Number(u),0):c?d:0,b=Math.max(Number(this.getAttribute("gap")||24),0);this.gap=b;const p=Math.round(Number(this.getAttribute("row-count")||1)),g=Number.isFinite(p)?Math.min(Math.max(p,1),8):1,E=Math.max(Number(this.getAttribute("row-gap")||12),0),f=this.getBool("scroll-velocity");this.scrollVelocityEnabled=f;const w=this.getBool("pause-on-hover",!0),y=this.hasAttribute("bordered")?this.getBool("bordered"):"outlined"===l,v=this.getAttribute("aria-label")||"Scrolling content";if(this.containerEl&&(this.containerEl.className=[t,`${t}--size-${n}`,`${t}--variant-${l}`,`${t}--align-${h}`,w&&!f&&`${t}--pause-on-hover`,c&&`${t}--fade-edges`,"right"===r&&`${t}--right`,g>1&&`${t}--multi-row`,f&&`${t}--scroll-velocity`,y&&`${t}--bordered`].filter(Boolean).join(" "),this.containerEl.style.setProperty("--db-marquee-duration",`${o}s`),this.containerEl.style.setProperty("--db-marquee-gap",`${b}px`),this.containerEl.style.setProperty("--db-marquee-row-gap",`${E}px`),this.containerEl.style.setProperty("--db-marquee-fade-width",`${d}px`),this.containerEl.style.setProperty("--db-marquee-edge-padding",`${m}px`),this.containerEl.setAttribute("role","region"),this.containerEl.setAttribute("aria-label",v)),this.srOnlyEl){const t=e.map(t=>this.itemToText(t)).filter(Boolean).join(" • ");this.srOnlyEl.textContent=t||v}this.reconcileRows(g,s),this.buildBase(e),this.bindImageListeners(),this.measure(),f?this.startScrollEngine():this.stopScrollEngine()}}customElements.get("db-marquee")||customElements.define("db-marquee",DbMarquee);export{DbMarquee};

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

@@ -0,0 +1,24 @@
+type DbMasonryItem = {
+    id?: string;
+    src: string;
+    alt?: string;
+    title?: string;
+    description?: string;
+    thumbnail?: string;
+};
+declare class DbMasonry extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    get images(): DbMasonryItem[];
+    set images(value: DbMasonryItem[] | string);
+    private boolAttr;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-masonry': DbMasonry;
+    }
+}
+
+export { DbMasonry };

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

@@ -0,0 +1 @@
+const e=[1,2,3,4,5,6],t=["xs","s","m","l","xl"];class DbMasonry extends HTMLElement{static get observedAttributes(){return["images","columns","spacing","hover","clickable"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}get images(){try{const e=JSON.parse(this.getAttribute("images")||"[]");return Array.isArray(e)?e.filter(e=>e&&"string"==typeof e.src):[]}catch{return[]}}set images(e){this.setAttribute("images","string"==typeof e?e:JSON.stringify(e))}boolAttr(e,t=!0){if(!this.hasAttribute(e))return t;const s=this.getAttribute(e);return""===s||"true"===s}render(){const s=Number(this.getAttribute("columns")||3),n=e.includes(s)?s:3,i=this.getAttribute("spacing")||"m",a=t.includes(i)?i:"m",r=this.boolAttr("hover",!0),c=this.boolAttr("clickable",!0);this.className=["designbase-wc-masonry",`designbase-wc-masonry--columns-${n}`,`designbase-wc-masonry--spacing-${a}`,r&&"designbase-wc-masonry--hover",c&&"designbase-wc-masonry--clickable"].filter(Boolean).join(" ");const o=document.createDocumentFragment();this.images.forEach((e,t)=>{const s=document.createElement("figure");s.className="designbase-wc-masonry__item";const n=document.createElement("img");if(n.className="designbase-wc-masonry__image",n.src=e.thumbnail||e.src,n.alt=e.alt||e.title||`image-${t+1}`,n.loading="lazy",n.addEventListener("load",()=>{this.dispatchEvent(new CustomEvent("db-image-load",{detail:{image:e,index:t},bubbles:!0,composed:!0}))}),n.addEventListener("error",()=>{this.dispatchEvent(new CustomEvent("db-image-error",{detail:{image:e,index:t},bubbles:!0,composed:!0}))}),s.append(n),e.title||e.description){const t=document.createElement("figcaption");if(t.className="designbase-wc-masonry__overlay",e.title){const s=document.createElement("h3");s.className="designbase-wc-masonry__title",s.textContent=e.title,t.append(s)}if(e.description){const s=document.createElement("p");s.className="designbase-wc-masonry__description",s.textContent=e.description,t.append(s)}s.append(t)}c&&(s.tabIndex=0,s.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-image-click",{detail:{image:e,index:t},bubbles:!0,composed:!0}))})),o.append(s)}),this.replaceChildren(o)}}customElements.get("db-masonry")||customElements.define("db-masonry",DbMasonry);export{DbMasonry};

package/dist/esm/components/db-menu-item.d.ts

@@ -0,0 +1,30 @@
+interface DbMenuItemChildData {
+    id: string;
+    label: string;
+    href?: string;
+    icon?: string;
+    active?: boolean;
+    disabled?: boolean;
+    badge?: string | number;
+    badgeColor?: string;
+    variant?: string;
+}
+declare class DbMenuItem extends HTMLElement {
+    static get observedAttributes(): string[];
+    get subItems(): DbMenuItemChildData[];
+    set subItems(value: DbMenuItemChildData[] | string);
+    get expanded(): boolean;
+    set expanded(value: boolean);
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private iconSize;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-menu-item': DbMenuItem;
+    }
+}
+
+export { DbMenuItem };
+export type { DbMenuItemChildData };

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

@@ -0,0 +1 @@
+import{createDbIcon as e}from"./db-icons.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()}attributeChangedCallback(){this.isConnected&&this.render()}iconSize(e){return"s"===e?16:"l"===e?24:20}render(){const t=this.getAttribute("label")||"",i=this.getAttribute("href")||"",n=this.getAttribute("icon"),s=this.getAttribute("size")||"m",a=this.getAttribute("variant")||"default",d=this.getAttribute("type")||"block",b=this.getAttribute("menu-style")||"accordion",c=Number(this.getAttribute("depth")||0),r=this.hasAttribute("active"),m=this.hasAttribute("disabled"),u=this.getAttribute("badge")||"",l=this.getAttribute("badge-color")||"primary",o=this.subItems,h=o.length>0,g=this.hasAttribute("expandable")||h,p=this.expanded,A=this.iconSize(s);this.className=["designbase-wc-menu-item",`designbase-wc-menu-item--${d}`,`designbase-wc-menu-item--${s}`,`designbase-wc-menu-item--${a}`,`designbase-wc-menu-item--${b}`,`designbase-wc-menu-item--depth-${c}`,r&&"designbase-wc-menu-item--active",m&&"designbase-wc-menu-item--disabled",g&&"designbase-wc-menu-item--expandable",p&&"designbase-wc-menu-item--expanded",h&&"designbase-wc-menu-item--with-children",u&&"designbase-wc-menu-item--with-badge",n&&"designbase-wc-menu-item--with-icon"].filter(Boolean).join(" "),this.replaceChildren();const w=document.createElement("div");if(w.className=["designbase-wc-menu-item__content","designbase-wc-menu-item__content--clickable"].join(" "),n){const t=document.createElement("div");t.className=["designbase-wc-menu-item__icon",`designbase-wc-menu-item__icon--${a}`,r&&"designbase-wc-menu-item__icon--active",m&&"designbase-wc-menu-item__icon--disabled"].filter(Boolean).join(" "),t.append(e(n,A)),w.append(t)}const v=document.createElement("span");if(v.className="designbase-wc-menu-item__label",v.textContent=t,w.append(v),u){const e=document.createElement("db-badge");e.setAttribute("size","s"),e.setAttribute("variant",l),e.setAttribute("badge-style","number"),e.setAttribute("count",u),w.append(e)}if(h){const t=document.createElement("div");t.className="designbase-wc-menu-item__expand-icon",t.append(e(p?"chevron-up":"chevron-down",16)),w.append(t)}if(w.addEventListener("click",e=>{m||(h&&g?(e.preventDefault(),this.expanded=!this.expanded):i&&(window.location.href=i),this.dispatchEvent(new CustomEvent("db-click",{detail:{label:t,href:i,expanded:this.expanded},bubbles:!0,composed:!0})))}),this.append(w),h&&p){const e=document.createElement("div");e.className=`designbase-wc-menu-item__children designbase-wc-menu-item__children--${b}`,o.forEach(t=>{const i=document.createElement("db-menu-item");i.setAttribute("label",t.label),i.setAttribute("type","block"),i.setAttribute("menu-style",b),i.setAttribute("size",s),i.setAttribute("depth",String(c+1)),t.href&&i.setAttribute("href",t.href),t.icon&&i.setAttribute("icon",t.icon),t.active&&i.setAttribute("active",""),t.disabled&&i.setAttribute("disabled",""),void 0!==t.badge&&i.setAttribute("badge",String(t.badge)),t.badgeColor&&i.setAttribute("badge-color",t.badgeColor),t.variant&&i.setAttribute("variant",t.variant),i.addEventListener("db-click",e=>{e.stopPropagation(),t.disabled||this.dispatchEvent(new CustomEvent("db-child-click",{detail:{child:t},bubbles:!0,composed:!0}))}),e.append(i)}),this.append(e)}}}customElements.get("db-menu-item")||customElements.define("db-menu-item",DbMenuItem);export{DbMenuItem};

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

@@ -0,0 +1,63 @@
+declare class DbModal extends HTMLElement {
+    static get observedAttributes(): string[];
+    private root?;
+    private panel?;
+    private headerEl?;
+    private headerContentEl?;
+    private titleEl?;
+    private closeButton?;
+    private navEl?;
+    private tabsEl?;
+    private segmentEl?;
+    private contentEl?;
+    private titleId;
+    private isMounted;
+    private internalTabId;
+    private internalSegment;
+    get open(): boolean;
+    set open(value: boolean);
+    private childObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private resolvedSize;
+    get size(): string;
+    set size(value: string);
+    private resolvedHeaderVariant;
+    private parsedTabs;
+    private parsedSegments;
+    private usesIntegratedNav;
+    private closeIconSize;
+    private activeTabId;
+    private activeSegmentValue;
+    private collectUserChildren;
+    private classifyChildren;
+    private getClassifiedChildren;
+    private isBodyPart;
+    private isFooterPart;
+    private collectContentParts;
+    private placeContentParts;
+    private restorePartsToHost;
+    private bindFooterActions;
+    private ensureStructure;
+    private renderCloseButton;
+    private renderDefaultHeader;
+    private renderNavHeader;
+    private renderHeader;
+    private renderBodyContent;
+    private renderFooter;
+    private render;
+    private exitTimerId;
+    private syncVisibility;
+    private syncOpenState;
+    private teardown;
+    private close;
+    private handleDocumentKeyDown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-modal': DbModal;
+    }
+}
+
+export { DbModal };

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

@@ -0,0 +1 @@
+import{createDbIcon as t}from"./db-icons.js";const e=["s","m","l","xl","full"],s=["default","tabs","segment"],i=["s","m","l"];class DbModal extends HTMLElement{constructor(){super(...arguments),this.titleId=`db-modal-title-${Math.random().toString(36).slice(2,9)}`,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"]}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 e.includes(this.size)?this.size:"m"}get size(){return this.getAttribute("size")||"m"}set size(t){t?this.setAttribute("size",t):this.removeAttribute("size")}resolvedHeaderVariant(){const t=this.getAttribute("header-variant")||"default";return s.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 isPart=(t,e,s)=>t.classList.contains(s)||t.getAttribute("data-modal-part")===e,e=t.filter(t=>isPart(t,"header","designbase-wc-modal__header")),s=t.filter(t=>isPart(t,"footer","designbase-wc-modal__footer")||"footer"===t.getAttribute("slot")),i=t.filter(t=>isPart(t,"body","designbase-wc-modal__body")),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")}}isBodyPart(t){return t.classList.contains("designbase-wc-modal__body")||"body"===t.getAttribute("data-modal-part")}isFooterPart(t){return t.classList.contains("designbase-wc-modal__footer")||"footer"===t.getAttribute("data-modal-part")||"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));return e.length>0?e:Array.from(this.children).filter(e=>"body"===t?this.isBodyPart(e):this.isFooterPart(e))}placeContentParts(t,e){this.contentEl&&e.forEach(e=>{if(e.parentElement!==this.contentEl){if("body"===t){const t=this.contentEl.querySelector(':scope > .designbase-wc-modal__footer, :scope > [data-modal-part="footer"]')||null;return void this.contentEl.insertBefore(e,t)}this.contentEl.append(e)}})}restorePartsToHost(){this.contentEl&&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","dialog"),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","모달 닫기"),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();this.closeButton.replaceChildren(t("close",e)),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"))}renderNavHeader(){if(!(this.headerEl&&this.headerContentEl&&this.titleEl&&this.closeButton&&this.navEl))return;const t=this.resolvedHeaderVariant(),e=this.parsedTabs(),s=this.parsedSegments(),n=i.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 a=this.getAttribute("title")||"";this.titleEl.textContent=a,this.titleEl.hidden=!a,this.headerContentEl.replaceChildren(),a&&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",n),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",n),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&&(a?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();const i=t.filter(t=>this.isBodyPart(t)),n=t.filter(t=>!this.isBodyPart(t)&&!this.isFooterPart(t));this.placeContentParts("body",i.length>0?i:n)}renderFooter(t){if(!this.contentEl)return;const e=t.filter(t=>this.isFooterPart(t)),s=t.filter(t=>!this.isFooterPart(t)&&!this.isBodyPart(t)),i=e.length>0?e:s;this.placeContentParts("footer",i),i.forEach(t=>{t.hidden=!1}),this.bindFooterActions()}render(){this.ensureStructure();const{header:t,body:s,footer:i}=this.getClassifiedChildren();e.forEach(t=>this.panel?.classList.remove(`designbase-wc-modal--${t}`)),this.panel?.classList.add(`designbase-wc-modal--${this.resolvedSize()}`),this.renderHeader(t),this.renderBodyContent(s),this.renderFooter(i)}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)return this.render(),this.root&&!this.root.isConnected&&document.body.append(this.root),document.body.style.overflow="hidden",this.isMounted=!0,void this.syncVisibility();this.isMounted&&(this.syncVisibility(),document.body.style.overflow="",this.exitTimerId&&clearTimeout(this.exitTimerId),this.exitTimerId=window.setTimeout(()=>{this.open||this.teardown()},200))}teardown(){this.restorePartsToHost(),this.root?.remove(),this.isMounted=!1,document.body.style.overflow=""}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

@@ -0,0 +1,88 @@
+interface DbNavbarItem {
+    id: string;
+    label: string;
+    href?: string;
+    icon?: string;
+    /** 메가 메뉴 링크에서 라벨 아래 표시되는 보조 설명 */
+    description?: string;
+    active?: boolean;
+    disabled?: boolean;
+    children?: DbNavbarItem[];
+    /** children 대신 메가 메뉴(다단 패널) 스타일로 렌더링 */
+    megaMenu?: boolean;
+    /** 메가 메뉴 컬럼 목록 */
+    columns?: DbNavbarMegaColumn[];
+    /** 메가 메뉴 우측 강조(피처드) 영역 */
+    featured?: DbNavbarMegaFeatured;
+}
+interface DbNavbarMegaColumn {
+    id: string;
+    /** 컬럼 상단 제목 */
+    title?: string;
+    /** 컬럼 내 링크 목록 */
+    items: DbNavbarItem[];
+}
+interface DbNavbarMegaFeatured {
+    title?: string;
+    description?: string;
+    /** 배경 이미지 URL */
+    image?: string;
+    href?: string;
+    /** CTA 텍스트 (예: 자세히 보기) */
+    ctaLabel?: string;
+    icon?: string;
+}
+interface DbNavbarUserProfile {
+    name: string;
+    email?: string;
+    avatar?: string;
+    badge?: number;
+    badgeVariant?: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger';
+    badgeStyle?: 'dot' | 'number' | 'text' | 'outlined';
+    badgeText?: string;
+}
+declare class DbNavbar extends HTMLElement {
+    private mobileOpen;
+    private userMenuOpen;
+    private expandedMobile;
+    private outsideHandler;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    get items(): DbNavbarItem[];
+    set items(value: DbNavbarItem[] | string);
+    get userMenuItems(): DbNavbarItem[];
+    set userMenuItems(value: DbNavbarItem[] | string);
+    get userProfile(): DbNavbarUserProfile | null;
+    set userProfile(value: DbNavbarUserProfile | string | null);
+    private parseItems;
+    private parseUserProfile;
+    private iconSize;
+    private bindOutsideClick;
+    private unbindOutsideClick;
+    private dispatchItemClick;
+    private syncHostClasses;
+    private isMegaMenu;
+    private createNavToggleButton;
+    private createMegaLink;
+    private createMegaMenu;
+    private createMegaFeatured;
+    private createDesktopNavItem;
+    private createUserMenuItemElement;
+    private bindSearchEvents;
+    private applyAvatarProfile;
+    private getMobileChildren;
+    private createMobileMenuItem;
+    private updateUserMenuVisibility;
+    private renderMobileMenu;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-navbar': DbNavbar;
+    }
+}
+
+export { DbNavbar };
+export type { DbNavbarItem, DbNavbarMegaColumn, DbNavbarMegaFeatured, DbNavbarUserProfile };

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

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

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

@@ -0,0 +1,57 @@
+type OnboardingStep = {
+    id: string;
+    image?: string;
+    title?: string;
+    description?: string;
+};
+declare class DbOnboardingModal extends HTMLElement {
+    static get observedAttributes(): string[];
+    private root?;
+    private internalStep;
+    private keyHandler;
+    private isMounted;
+    private overlayEl?;
+    private contentEl?;
+    private closeButtonEl?;
+    private mainEl?;
+    private imageWrapEl?;
+    private imageEl?;
+    private textEl?;
+    private titleEl?;
+    private descriptionEl?;
+    private navigationEl?;
+    private prevButtonEl?;
+    private nextButtonEl?;
+    private indicatorEl?;
+    get open(): boolean;
+    set open(value: boolean);
+    get steps(): OnboardingStep[];
+    set steps(value: OnboardingStep[] | string);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private isOpenRequested;
+    private parseSteps;
+    private syncStepFromAttribute;
+    private getSteps;
+    private getCurrentStep;
+    private close;
+    private emitStepChange;
+    private goToStep;
+    private handlePrev;
+    private handleNext;
+    private attachKeyHandler;
+    private detachKeyHandler;
+    private syncOpenState;
+    private mount;
+    private unmount;
+    private ensureStructure;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-onboarding-modal': DbOnboardingModal;
+    }
+}
+
+export { DbOnboardingModal };

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

@@ -0,0 +1 @@
+import{createDbIcon as t}from"./db-icons.js";class DbOnboardingModal extends HTMLElement{constructor(){super(...arguments),this.internalStep=0,this.keyHandler=null,this.isMounted=!1,this.handlePrev=()=>{this.getCurrentStep()>0&&this.goToStep(this.getCurrentStep()-1)},this.handleNext=()=>{const t=this.getSteps(),e=this.getCurrentStep();e>=t.length-1?this.dispatchEvent(new CustomEvent("db-complete",{bubbles:!0,composed:!0})):this.goToStep(e+1)}}static get observedAttributes(){return["open","steps","current-step","show-close-button","show-indicator","indicator-type","indicator-size"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(t){t?this.setAttribute("open",""):this.removeAttribute("open")}get steps(){return this.parseSteps()}set steps(t){const e="string"==typeof t?t:JSON.stringify(t);this.getAttribute("steps")!==e&&this.setAttribute("steps",e)}connectedCallback(){this.style.display="contents",this.syncStepFromAttribute(),this.syncOpenState()}disconnectedCallback(){this.detachKeyHandler(),this.unmount()}attributeChangedCallback(t){this.isConnected&&("open"!==t?("current-step"===t&&this.syncStepFromAttribute(),"steps"!==t?this.isMounted&&this.render():this.isOpenRequested()&&(this.isMounted?this.render():this.syncOpenState())):this.syncOpenState())}isOpenRequested(){return this.open}parseSteps(){const t=this.getAttribute("steps");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}syncStepFromAttribute(){if(!this.hasAttribute("current-step"))return;const t=Number(this.getAttribute("current-step")||0);Number.isFinite(t)&&(this.internalStep=Math.max(0,t))}getSteps(){return this.parseSteps()}getCurrentStep(){const t=this.getSteps();return t.length?Math.min(Math.max(this.internalStep,0),t.length-1):0}close(){this.open=!1,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}emitStepChange(t){this.dispatchEvent(new CustomEvent("db-step-change",{bubbles:!0,composed:!0,detail:{step:t}}))}goToStep(t){const e=this.getSteps();if(!e.length)return;const i=Math.min(Math.max(t,0),e.length-1);this.internalStep=i,this.emitStepChange(i),this.render()}attachKeyHandler(){this.keyHandler||(this.keyHandler=t=>{"Escape"!==t.key?"ArrowLeft"===t.key&&this.getCurrentStep()>0?this.handlePrev():"ArrowRight"===t.key&&this.getCurrentStep()<this.getSteps().length-1&&this.handleNext():this.close()},document.addEventListener("keydown",this.keyHandler))}detachKeyHandler(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null)}syncOpenState(){if(this.isOpenRequested())return this.mount(),void this.attachKeyHandler();this.detachKeyHandler(),this.unmount()}mount(){this.root||(this.root=document.createElement("div"),this.root.className="designbase-wc-onboarding-modal",this.root.setAttribute("role","dialog"),this.root.setAttribute("aria-modal","true"),this.root.tabIndex=-1,this.ensureStructure()),this.root.isConnected||document.body.append(this.root),this.isMounted=!0,this.render()}unmount(){this.isMounted=!1,this.root?.remove()}ensureStructure(){this.root&&(this.contentEl&&this.root.contains(this.contentEl)||(this.overlayEl=void 0,this.contentEl=void 0,this.closeButtonEl=void 0,this.mainEl=void 0,this.imageWrapEl=void 0,this.imageEl=void 0,this.textEl=void 0,this.titleEl=void 0,this.descriptionEl=void 0,this.navigationEl=void 0,this.prevButtonEl=void 0,this.nextButtonEl=void 0,this.indicatorEl=void 0,this.root.replaceChildren(),this.overlayEl=document.createElement("div"),this.overlayEl.className="designbase-wc-onboarding-modal__overlay",this.overlayEl.addEventListener("click",()=>this.close()),this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-onboarding-modal__content",this.closeButtonEl=document.createElement("button"),this.closeButtonEl.type="button",this.closeButtonEl.className="designbase-wc-onboarding-modal__close-button",this.closeButtonEl.setAttribute("aria-label","닫기"),this.closeButtonEl.append(t("close",20)),this.closeButtonEl.addEventListener("click",()=>this.close()),this.mainEl=document.createElement("div"),this.mainEl.className="designbase-wc-onboarding-modal__main",this.imageWrapEl=document.createElement("div"),this.imageWrapEl.className="designbase-wc-onboarding-modal__image",this.imageEl=document.createElement("img"),this.imageWrapEl.append(this.imageEl),this.textEl=document.createElement("div"),this.textEl.className="designbase-wc-onboarding-modal__text",this.titleEl=document.createElement("h2"),this.titleEl.id="onboarding-title",this.titleEl.className="designbase-wc-onboarding-modal__title",this.descriptionEl=document.createElement("p"),this.descriptionEl.id="onboarding-description",this.descriptionEl.className="designbase-wc-onboarding-modal__description",this.textEl.append(this.titleEl,this.descriptionEl),this.mainEl.append(this.imageWrapEl,this.textEl),this.navigationEl=document.createElement("div"),this.navigationEl.className="designbase-wc-onboarding-modal__navigation",this.prevButtonEl=document.createElement("db-button"),this.prevButtonEl.setAttribute("variant","secondary"),this.prevButtonEl.setAttribute("size","m"),this.prevButtonEl.setAttribute("start-icon","chevron-left"),this.prevButtonEl.setAttribute("aria-label","이전"),this.prevButtonEl.addEventListener("db-click",this.handlePrev),this.indicatorEl=document.createElement("db-indicator"),this.indicatorEl.addEventListener("db-step-click",t=>{const e=t.detail;this.goToStep(e.index??e.current)}),this.nextButtonEl=document.createElement("db-button"),this.nextButtonEl.setAttribute("variant","primary"),this.nextButtonEl.setAttribute("size","m"),this.nextButtonEl.addEventListener("db-click",this.handleNext),this.navigationEl.append(this.prevButtonEl,this.indicatorEl,this.nextButtonEl),this.contentEl.append(this.closeButtonEl,this.mainEl,this.navigationEl),this.root.append(this.overlayEl,this.contentEl)))}render(){if(!this.root||!this.isMounted)return;this.ensureStructure();const t=this.getSteps(),e=this.getCurrentStep(),i=t[e];if(!i)return;const s=!this.hasAttribute("show-close-button")||"false"!==this.getAttribute("show-close-button"),n=!this.hasAttribute("show-indicator")||"false"!==this.getAttribute("show-indicator"),o=this.getAttribute("indicator-type")||"dots",r=this.getAttribute("indicator-size")||"m",a=0===e,l=e===t.length-1;if(this.root.setAttribute("aria-labelledby","onboarding-title"),this.root.setAttribute("aria-describedby","onboarding-description"),this.closeButtonEl&&(this.closeButtonEl.style.display=s?"":"none"),this.imageWrapEl&&this.imageEl&&(i.image?(this.imageEl.src=i.image,this.imageEl.alt=i.title||"온보딩 이미지",this.imageWrapEl.style.display=""):this.imageWrapEl.style.display="none"),this.titleEl&&(this.titleEl.textContent=i.title||"",this.titleEl.style.display=i.title?"":"none"),this.descriptionEl&&(this.descriptionEl.textContent=i.description||"",this.descriptionEl.style.display=i.description?"":"none"),this.prevButtonEl&&(this.prevButtonEl.textContent="이전",a?this.prevButtonEl.setAttribute("disabled",""):this.prevButtonEl.removeAttribute("disabled")),this.nextButtonEl&&(this.nextButtonEl.textContent=l?"완료":"다음",this.nextButtonEl.setAttribute("aria-label",l?"완료":"다음"),l?this.nextButtonEl.removeAttribute("end-icon"):this.nextButtonEl.setAttribute("end-icon","chevron-right")),this.indicatorEl){const i=n&&t.length>1;this.indicatorEl.style.display=i?"":"none",i&&(this.indicatorEl.setAttribute("total",String(t.length)),this.indicatorEl.setAttribute("current",String(e)),this.indicatorEl.setAttribute("indicator-type",o),this.indicatorEl.setAttribute("size",r),this.indicatorEl.setAttribute("clickable",""))}}}customElements.get("db-onboarding-modal")||customElements.define("db-onboarding-modal",DbOnboardingModal);export{DbOnboardingModal};

package/dist/esm/components/db-page-header.d.ts

@@ -0,0 +1,33 @@
+interface DbPageHeaderTabItem {
+    id: string;
+    label: string;
+    disabled?: boolean;
+    icon?: string;
+}
+declare class DbPageHeader extends HTMLElement {
+    static get observedAttributes(): string[];
+    private internalTabId;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private syncDefaultTab;
+    private parseTabs;
+    private parseBreadcrumbs;
+    private getActiveTabId;
+    private getVariant;
+    private getAlign;
+    private handleBack;
+    private handleTabChange;
+    private collectActions;
+    private collectDescriptionSlot;
+    private renderTitleBlock;
+    private render;
+    private renderMinimalTabs;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-page-header': DbPageHeader;
+    }
+}
+
+export { DbPageHeader };
+export type { DbPageHeaderTabItem };

package/dist/esm/components/db-page-header.js

@@ -0,0 +1 @@
+const e=["default","minimal"],t=["center","left"];class DbPageHeader extends HTMLElement{constructor(){super(...arguments),this.internalTabId="",this.handleBack=()=>{const e=new CustomEvent("db-back",{bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e),e.defaultPrevented||function navigatePageHeaderBack(e="/"){if("undefined"==typeof window)return;const t=window.history.state?.idx;if("number"==typeof t&&t>0)return void window.history.back();(()=>{try{return!!document.referrer&&new URL(document.referrer).origin===window.location.origin}catch{return!1}})()||window.history.length>1?window.history.back():window.location.assign(e)}(this.getAttribute("back-fallback-href")||"/")},this.handleTabChange=e=>{const t=e.detail,a=t?.selectedId??this.parseTabs()[t?.index??0]?.id??String(t?.index??0);this.hasAttribute("selected-tab-id")||(this.internalTabId=a),this.dispatchEvent(new CustomEvent("db-tab-change",{bubbles:!0,composed:!0,detail:{tabId:a}}))}}static get observedAttributes(){return["title","subtitle","description","breadcrumbs","variant","show-back-button","back-fallback-href","back-label","tabs","selected-tab-id","default-selected-tab-id","align"]}connectedCallback(){this.syncDefaultTab(),this.render()}attributeChangedCallback(e){this.isConnected&&("default-selected-tab-id"!==e&&"tabs"!==e||this.syncDefaultTab(),this.render())}syncDefaultTab(){if(this.internalTabId)return;const e=this.parseTabs(),t=this.getAttribute("default-selected-tab-id");this.internalTabId=t||e[0]?.id||""}parseTabs(){try{const e=JSON.parse(this.getAttribute("tabs")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBreadcrumbs(){try{const e=JSON.parse(this.getAttribute("breadcrumbs")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}getActiveTabId(){return this.getAttribute("selected-tab-id")||this.internalTabId}getVariant(){const t=this.getAttribute("variant")||"default";return e.includes(t)?t:"default"}getAlign(){const e=this.getAttribute("align")||"center";return t.includes(e)?e:"center"}collectActions(){const e=Array.from(this.querySelectorAll(':scope > [slot="actions"]'));if(e.length)return e;const t=this.querySelector(":scope > .designbase-wc-page-header__cta")||this.querySelector(":scope > .designbase-wc-page-header__actions");return t?Array.from(t.children):[]}collectDescriptionSlot(){const e=this.querySelector(':scope > [slot="description"]');if(e)return e;const t=this.querySelector(":scope .designbase-wc-page-header__description"),a=t?.firstElementChild;return a||null}renderTitleBlock(e){const t=document.createDocumentFragment(),a=this.getAttribute("title")||"",s=this.getAttribute("subtitle"),n=document.createElement("h1");if(n.className="designbase-wc-page-header__title",n.textContent=a,t.append(n),s){const e=document.createElement("h2");e.className="designbase-wc-page-header__subtitle",e.textContent=s,t.append(e)}const i=this.getAttribute("description");if(e||i){const a=document.createElement("div");a.className="designbase-wc-page-header__description",e?a.append(e):a.textContent=i,t.append(a)}return t}render(){const e=this.collectActions(),t=this.collectDescriptionSlot(),a="minimal"===this.getVariant(),s=this.getAlign(),n=this.parseBreadcrumbs(),i=this.parseTabs(),r=i.length>0,c=this.hasAttribute("show-back-button");if(this.className=["designbase-wc-page-header",a?"designbase-wc-page-header--minimal":`designbase-wc-page-header--${s}`].filter(Boolean).join(" "),this.replaceChildren(),n.length){const e=document.createElement("div");e.className="designbase-wc-page-header__breadcrumbs";const t=document.createElement("db-breadcrumbs");t.setAttribute("size","s"),t.setAttribute("items",JSON.stringify(n)),e.append(t),this.append(e)}const d=document.createElement("div");d.className="designbase-wc-page-header__main";const l=document.createElement("div");if(l.className="designbase-wc-page-header__content",a&&c){const e=document.createElement("div");e.className="designbase-wc-page-header__title-row";const a=document.createElement("db-button");a.className="designbase-wc-page-header__back-button",a.setAttribute("variant","tertiary"),a.setAttribute("size","m"),a.setAttribute("icon-only",""),a.setAttribute("start-icon","chevron-left"),a.setAttribute("aria-label",this.getAttribute("back-label")||"뒤로가기"),a.setAttribute("tooltip",this.getAttribute("back-label")||"뒤로가기"),a.addEventListener("db-click",this.handleBack),e.append(a);const s=document.createElement("div");s.className="designbase-wc-page-header__title-group",s.append(this.renderTitleBlock(t)),e.append(s),l.append(e)}else l.append(this.renderTitleBlock(t));if(d.append(l),a&&e.length){const t=document.createElement("div");t.className="designbase-wc-page-header__cta",e.forEach(e=>t.append(e)),d.append(t)}if(this.append(d),!a&&e.length){const t=document.createElement("div");t.className="designbase-wc-page-header__actions",e.forEach(e=>t.append(e)),this.append(t)}this.renderMinimalTabs(a,r,i)}renderMinimalTabs(e,t,a){if(!e||!t)return;const s=document.createElement("div");s.className="designbase-wc-page-header__toolbar";const n=document.createElement("div");n.className="designbase-wc-page-header__tabs";const i=document.createElement("db-tabs");i.setAttribute("size","m"),i.setAttribute("items",JSON.stringify(a)),i.setAttribute("selected-id",this.getActiveTabId()),i.addEventListener("db-change",this.handleTabChange),n.append(i),s.append(n),this.append(s)}}customElements.get("db-page-header")||customElements.define("db-page-header",DbPageHeader);export{DbPageHeader};

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

@@ -0,0 +1,25 @@
+declare class DbPagination extends HTMLElement {
+    static get observedAttributes(): string[];
+    get currentPage(): number;
+    set currentPage(value: number);
+    get totalPages(): number;
+    set totalPages(value: number);
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private iconSize;
+    private render;
+    private getPageSizeOptions;
+    private getTotalLabel;
+    private createPageSizeSelector;
+    private getPageNumbers;
+    private createPageButton;
+    private createIconButton;
+    private select;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-pagination': DbPagination;
+    }
+}
+
+export { DbPagination };

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

@@ -0,0 +1 @@
+import{createDbIcon as t}from"./db-icons.js";class DbPagination extends HTMLElement{static get observedAttributes(){return["current-page","total-pages","total-items","page-size","page-size-options","size","variant","alignment","show-first-last","show-previous-next","show-page-size-selector","show-total","sibling-count","boundary-count","disabled","full-width"]}get currentPage(){return Number(this.getAttribute("current-page")||1)}set currentPage(t){this.setAttribute("current-page",String(t))}get totalPages(){return Number(this.getAttribute("total-pages")||1)}set totalPages(t){this.setAttribute("total-pages",String(t))}connectedCallback(){this.render()}attributeChangedCallback(){this.isConnected&&this.render()}iconSize(){const t=this.getAttribute("size")||"m";return"s"===t?12:"l"===t?16:14}render(){const t=this.getAttribute("size")||"m",e=this.getAttribute("variant")||"default",a=this.getAttribute("alignment")||"center",i=this.hasAttribute("disabled"),n=this.hasAttribute("show-first-last"),s="false"!==this.getAttribute("show-previous-next"),r=this.hasAttribute("show-page-size-selector"),o=this.hasAttribute("show-total"),c=this.hasAttribute("full-width")||r||o,l=Number(this.getAttribute("total-items")||0),g=Number(this.getAttribute("page-size")||10),u=this.currentPage,b=this.totalPages,d=u<=1,p=u>=b;this.className=["designbase-wc-pagination",`designbase-wc-pagination--${t}`,`designbase-wc-pagination--${e}`,`designbase-wc-pagination--${a}`,i&&"designbase-wc-pagination--disabled",c&&"designbase-wc-pagination--full-width"].filter(Boolean).join(" "),this.setAttribute("role","navigation"),this.setAttribute("aria-label","페이지 네비게이션"),this.replaceChildren();const h=document.createElement("div");if(h.className=["designbase-wc-pagination__container",c&&"designbase-wc-pagination__container--full-width"].filter(Boolean).join(" "),o&&l>0){const t=document.createElement("div");t.className="designbase-wc-pagination__total",t.textContent=this.getTotalLabel(l,g,u),h.append(t)}const m=document.createElement("nav");m.className="designbase-wc-pagination__nav",m.setAttribute("aria-label","페이지 네비게이션");const A=document.createElement("ul");A.className="designbase-wc-pagination__list",n&&!d&&A.append(this.createIconButton("arrow-bar-left",1,"첫 페이지로 이동","first")),s&&!d&&A.append(this.createIconButton("chevron-left",u-1,"이전 페이지로 이동","previous")),this.getPageNumbers().forEach((t,e)=>{if("..."===t){const t=document.createElement("li");t.className="designbase-wc-pagination__ellipsis";const e=document.createElement("span");return e.className="designbase-wc-pagination__ellipsis-text",e.textContent="...",t.append(e),void A.append(t)}"number"==typeof t&&A.append(this.createPageButton(t,i))}),s&&!p&&A.append(this.createIconButton("chevron-right",u+1,"다음 페이지로 이동","next")),n&&!p&&A.append(this.createIconButton("arrow-bar-right",b,"마지막 페이지로 이동","last")),m.append(A),h.append(m),r&&h.append(this.createPageSizeSelector(t,g,i)),this.append(h)}getPageSizeOptions(){const t=this.getAttribute("page-size-options");if(!t)return[10,20,50,100];try{const e=JSON.parse(t);if(Array.isArray(e))return e.map(t=>Number(t)).filter(t=>!Number.isNaN(t))}catch{}return[10,20,50,100]}getTotalLabel(t,e,a){return`${(a-1)*e+1}-${Math.min(a*e,t)} / ${t}개`}createPageSizeSelector(t,e,a){const i=document.createElement("div");i.className="designbase-wc-pagination__page-size";const n=document.createElement("label");n.className="designbase-wc-pagination__page-size-label";const s=document.createElement("span");s.className="designbase-wc-pagination__page-size-text",s.textContent="페이지당";const r=document.createElement("db-select");return r.className="designbase-wc-pagination__page-size-select",r.setAttribute("size",t),r.setAttribute("show-clear-button","false"),r.setAttribute("searchable","false"),r.setAttribute("options",JSON.stringify(this.getPageSizeOptions().map(t=>({value:String(t),label:String(t)})))),r.setAttribute("value",String(e)),a&&r.setAttribute("disabled",""),r.addEventListener("db-change",t=>{const a=t.detail,i=Number(a?.value);Number.isNaN(i)||i===e||(this.setAttribute("page-size",String(i)),this.dispatchEvent(new CustomEvent("db-page-size-change",{detail:{pageSize:i},bubbles:!0,composed:!0})))}),n.append(s,r),i.append(n),i}getPageNumbers(){const t=Number(this.getAttribute("sibling-count")||1),e=Number(this.getAttribute("boundary-count")||1),a=this.totalPages,i=this.currentPage;if(a<=2*t+3+2)return Array.from({length:a},(t,e)=>e+1);const n=Math.max(i-t,e),s=Math.min(i+t,a-e+1),r=n>e+2,o=s<a-e-1;if(!r&&o){const e=3+2*t;return[...Array.from({length:e},(t,e)=>e+1),"...",a]}if(r&&!o){const e=3+2*t;return[1,"...",...Array.from({length:e},(t,i)=>a-e+i+1)]}if(r&&o){return[1,"...",...Array.from({length:s-n+1},(t,e)=>n+e),"...",a]}return Array.from({length:a},(t,e)=>e+1)}createPageButton(t,e){const a=t===this.currentPage,i=document.createElement("li");i.className="designbase-wc-pagination__item";const n=document.createElement("button");return n.type="button",n.className=["designbase-wc-pagination__button",a&&"designbase-wc-pagination__button--active"].filter(Boolean).join(" "),n.textContent=String(t),n.disabled=e,a&&n.setAttribute("aria-current","page"),n.setAttribute("aria-label",`페이지 ${t}로 이동`),n.addEventListener("click",()=>this.select(t)),i.append(n),i}createIconButton(e,a,i,n){const s=document.createElement("li");s.className="designbase-wc-pagination__item";const r=document.createElement("button");return r.type="button",r.className=`designbase-wc-pagination__button designbase-wc-pagination__button--${n}`,r.disabled=this.hasAttribute("disabled"),r.setAttribute("aria-label",i),r.append(t(e,this.iconSize())),r.addEventListener("click",()=>this.select(a)),s.append(r),s}select(t){this.hasAttribute("disabled")||t===this.currentPage||t<1||t>this.totalPages||(this.currentPage=t,this.dispatchEvent(new CustomEvent("db-change",{detail:{page:t},bubbles:!0,composed:!0})))}}customElements.get("db-pagination")||customElements.define("db-pagination",DbPagination);export{DbPagination};

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

@@ -0,0 +1,62 @@
+declare class DbPopover extends HTMLElement {
+    static get observedAttributes(): string[];
+    private triggerWrap?;
+    private triggerEl?;
+    private panel?;
+    private bodyEl?;
+    private arrowEl?;
+    private showTimer?;
+    private hideTimer?;
+    private repositionRaf?;
+    private onDocMouseDown;
+    private onDocKeyDown;
+    private onExternalTriggerClick;
+    private childObserver?;
+    get open(): boolean;
+    set open(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private resolvedPlacement;
+    private resolvedTrigger;
+    private isControlled;
+    private isOpen;
+    private setOpen;
+    private syncOpenFromAttributes;
+    private clearTimers;
+    private groupOf;
+    private collectTriggerChildren;
+    private ensureTriggerWrap;
+    private mountTriggerChildren;
+    private collectBodyChildren;
+    private bindExternalTrigger;
+    private unbindExternalTrigger;
+    private attachGlobalListeners;
+    private detachGlobalListeners;
+    private scheduleOpen;
+    private scheduleClose;
+    private handleTriggerClick;
+    private handleTriggerMouseEnter;
+    private handleTriggerMouseLeave;
+    private handleTriggerFocus;
+    private handleTriggerBlur;
+    private handleReposition;
+    private getTriggerRect;
+    private flipPlacementIfNeeded;
+    private applyCoords;
+    private positionPanel;
+    private revealPanel;
+    private updatePanelMetadata;
+    private ensurePanel;
+    private showPanel;
+    private hidePanel;
+    private removePanel;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-popover': DbPopover;
+    }
+}
+
+export { DbPopover };