@designbasekorea/ui-wc 0.5.3 → 0.5.6

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

@@ -1 +1,191 @@
-import{createDbIcon as e}from"./db-icons.js";class DbConfirm extends HTMLElement{constructor(){super(...arguments),this.root=null,this.keyHandler=null}static get observedAttributes(){return["open","title","message","confirm-text","cancel-text","confirm-variant","variant","size","show-icon","initial-focus","confirm-disabled","cancel-disabled","close-on-escape","close-on-backdrop"]}connectedCallback(){this.render()}disconnectedCallback(){this.detachEscape(),document.body.style.overflow="",this.root?.remove(),this.root=null}attributeChangedCallback(){this.render()}isOpen(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}attachEscape(){this.keyHandler||(this.keyHandler=e=>{"Escape"===e.key&&"false"!==this.getAttribute("close-on-escape")&&this.dispatchCancel()},document.addEventListener("keydown",this.keyHandler))}detachEscape(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null)}dispatchCancel(){this.setAttribute("open","false"),this.dispatchEvent(new CustomEvent("db-cancel",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}dispatchConfirm(){this.setAttribute("open","false"),this.dispatchEvent(new CustomEvent("db-confirm",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}iconForVariant(e){return"success"===e?"award":"warning"===e?"bell-active":"danger"===e?"cloud-close":"bulb"}iconSize(e){return"s"===e?20:"l"===e?32:24}render(){if(this.root?.remove(),this.root=null,this.detachEscape(),!this.isOpen())return document.body.style.overflow="",void this.replaceChildren();document.body.style.overflow="hidden",this.attachEscape();const t=this.getAttribute("title")||"",i=this.getAttribute("message")||this.textContent?.trim()||"",n=this.getAttribute("confirm-text")||"확인",s=this.getAttribute("cancel-text")||"취소",c=this.getAttribute("confirm-variant")||"primary",o=this.getAttribute("variant")||"info",a=this.getAttribute("size")||"s",r="false"!==this.getAttribute("show-icon"),d=this.getAttribute("initial-focus")||"confirm",l="true"===this.getAttribute("confirm-disabled"),m="true"===this.getAttribute("cancel-disabled"),b=document.createElement("div");b.className="designbase-wc-confirm__overlay",b.setAttribute("role","dialog"),b.setAttribute("aria-modal","true"),t&&b.setAttribute("aria-labelledby","confirm-title"),b.setAttribute("aria-describedby","confirm-content"),b.addEventListener("click",e=>{e.target===b&&"false"!==this.getAttribute("close-on-backdrop")&&this.dispatchCancel()});const u=document.createElement("div");u.className=["designbase-wc-confirm__modal",`designbase-wc-confirm__modal--${o}`,`designbase-wc-confirm__modal--${a}`,!r&&"designbase-wc-confirm__modal--no-icon"].filter(Boolean).join(" ");const h=document.createElement("div");if(h.className=["designbase-wc-confirm__header",!r&&"designbase-wc-confirm__header--no-icon"].filter(Boolean).join(" "),r){const t=document.createElement("div");t.className="designbase-wc-confirm__icon",t.append(e(this.iconForVariant(o),this.iconSize(a))),h.append(t)}const p=document.createElement("div");if(p.className="designbase-wc-confirm__title-area",t){const e=document.createElement("h2");e.id="confirm-title",e.className="designbase-wc-confirm__title",e.textContent=t,p.append(e)}h.append(p),u.append(h);const f=document.createElement("div");f.id="confirm-content",f.className="designbase-wc-confirm__content",f.textContent=i,u.append(f);const v=document.createElement("div");v.className="designbase-wc-confirm__footer";const g=document.createElement("db-button");g.setAttribute("variant","tertiary"),g.setAttribute("full-width",""),g.textContent=s,m&&g.setAttribute("disabled",""),g.addEventListener("db-click",()=>this.dispatchCancel());const E=document.createElement("db-button");E.setAttribute("variant",c),E.setAttribute("full-width",""),E.textContent=n,l&&E.setAttribute("disabled",""),E.addEventListener("db-click",()=>this.dispatchConfirm()),v.append(g,E),u.append(v),b.append(u),document.body.append(b),this.root=b,requestAnimationFrame(()=>{("cancel"===d?g:E).focus()})}}customElements.get("db-confirm")||customElements.define("db-confirm",DbConfirm);export{DbConfirm};
+import { createDbIcon } from './db-icons.js';
+
+class DbConfirm extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.root = null;
+        this.keyHandler = null;
+    }
+    static get observedAttributes() {
+        return [
+            'open',
+            'title',
+            'message',
+            'confirm-text',
+            'cancel-text',
+            'confirm-variant',
+            'variant',
+            'size',
+            'show-icon',
+            'initial-focus',
+            'confirm-disabled',
+            'cancel-disabled',
+            'close-on-escape',
+            'close-on-backdrop',
+        ];
+    }
+    connectedCallback() {
+        this.render();
+    }
+    disconnectedCallback() {
+        this.detachEscape();
+        document.body.style.overflow = '';
+        this.root?.remove();
+        this.root = null;
+    }
+    attributeChangedCallback() {
+        this.render();
+    }
+    isOpen() {
+        return this.hasAttribute('open') && this.getAttribute('open') !== 'false';
+    }
+    attachEscape() {
+        if (this.keyHandler)
+            return;
+        this.keyHandler = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            if (this.getAttribute('close-on-escape') === 'false')
+                return;
+            this.dispatchCancel();
+        };
+        document.addEventListener('keydown', this.keyHandler);
+    }
+    detachEscape() {
+        if (!this.keyHandler)
+            return;
+        document.removeEventListener('keydown', this.keyHandler);
+        this.keyHandler = null;
+    }
+    dispatchCancel() {
+        this.setAttribute('open', 'false');
+        this.dispatchEvent(new CustomEvent('db-cancel', { bubbles: true, composed: true }));
+        this.dispatchEvent(new CustomEvent('db-close', { bubbles: true, composed: true }));
+    }
+    dispatchConfirm() {
+        this.setAttribute('open', 'false');
+        this.dispatchEvent(new CustomEvent('db-confirm', { bubbles: true, composed: true }));
+        this.dispatchEvent(new CustomEvent('db-close', { bubbles: true, composed: true }));
+    }
+    iconForVariant(variant) {
+        if (variant === 'success')
+            return 'award';
+        if (variant === 'warning')
+            return 'bell-active';
+        if (variant === 'danger')
+            return 'cloud-close';
+        return 'bulb';
+    }
+    iconSize(size) {
+        if (size === 's')
+            return 20;
+        if (size === 'l')
+            return 32;
+        return 24;
+    }
+    render() {
+        this.root?.remove();
+        this.root = null;
+        this.detachEscape();
+        if (!this.isOpen()) {
+            document.body.style.overflow = '';
+            this.replaceChildren();
+            return;
+        }
+        document.body.style.overflow = 'hidden';
+        this.attachEscape();
+        const title = this.getAttribute('title') || '';
+        const message = this.getAttribute('message') || this.textContent?.trim() || '';
+        const confirmText = this.getAttribute('confirm-text') || '확인';
+        const cancelText = this.getAttribute('cancel-text') || '취소';
+        const confirmVariant = this.getAttribute('confirm-variant') || 'primary';
+        const variant = this.getAttribute('variant') || 'info';
+        const size = this.getAttribute('size') || 's';
+        const showIcon = this.getAttribute('show-icon') !== 'false';
+        const initialFocus = this.getAttribute('initial-focus') || 'confirm';
+        const confirmDisabled = this.getAttribute('confirm-disabled') === 'true';
+        const cancelDisabled = this.getAttribute('cancel-disabled') === 'true';
+        const overlay = document.createElement('div');
+        overlay.className = 'designbase-wc-confirm__overlay';
+        overlay.setAttribute('role', 'dialog');
+        overlay.setAttribute('aria-modal', 'true');
+        if (title)
+            overlay.setAttribute('aria-labelledby', 'confirm-title');
+        overlay.setAttribute('aria-describedby', 'confirm-content');
+        overlay.addEventListener('click', (event) => {
+            if (event.target !== overlay)
+                return;
+            if (this.getAttribute('close-on-backdrop') === 'false')
+                return;
+            this.dispatchCancel();
+        });
+        const modal = document.createElement('div');
+        modal.className = [
+            'designbase-wc-confirm__modal',
+            `designbase-wc-confirm__modal--${variant}`,
+            `designbase-wc-confirm__modal--${size}`,
+            !showIcon && 'designbase-wc-confirm__modal--no-icon',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const header = document.createElement('div');
+        header.className = [
+            'designbase-wc-confirm__header',
+            !showIcon && 'designbase-wc-confirm__header--no-icon',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        if (showIcon) {
+            const icon = document.createElement('div');
+            icon.className = 'designbase-wc-confirm__icon';
+            icon.append(createDbIcon(this.iconForVariant(variant), this.iconSize(size)));
+            header.append(icon);
+        }
+        const titleArea = document.createElement('div');
+        titleArea.className = 'designbase-wc-confirm__title-area';
+        if (title) {
+            const heading = document.createElement('h2');
+            heading.id = 'confirm-title';
+            heading.className = 'designbase-wc-confirm__title';
+            heading.textContent = title;
+            titleArea.append(heading);
+        }
+        header.append(titleArea);
+        modal.append(header);
+        const content = document.createElement('div');
+        content.id = 'confirm-content';
+        content.className = 'designbase-wc-confirm__content';
+        content.textContent = message;
+        modal.append(content);
+        const footer = document.createElement('div');
+        footer.className = 'designbase-wc-confirm__footer';
+        const cancel = document.createElement('db-button');
+        cancel.setAttribute('variant', 'tertiary');
+        cancel.setAttribute('full-width', '');
+        cancel.textContent = cancelText;
+        if (cancelDisabled)
+            cancel.setAttribute('disabled', '');
+        cancel.addEventListener('db-click', () => this.dispatchCancel());
+        const confirm = document.createElement('db-button');
+        confirm.setAttribute('variant', confirmVariant);
+        confirm.setAttribute('full-width', '');
+        confirm.textContent = confirmText;
+        if (confirmDisabled)
+            confirm.setAttribute('disabled', '');
+        confirm.addEventListener('db-click', () => this.dispatchConfirm());
+        footer.append(cancel, confirm);
+        modal.append(footer);
+        overlay.append(modal);
+        document.body.append(overlay);
+        this.root = overlay;
+        requestAnimationFrame(() => {
+            const focusTarget = initialFocus === 'cancel' ? cancel : confirm;
+            focusTarget.focus();
+        });
+    }
+}
+if (!customElements.get('db-confirm')) {
+    customElements.define('db-confirm', DbConfirm);
+}
+
+export { DbConfirm };

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

@@ -1 +1,39 @@
-const t=["s","m","l","xl","full"],e=["none","s","m","l","xl"];class DbContainer extends HTMLElement{static get observedAttributes(){return["size","padding","max-width","full-width"]}connectedCallback(){this.syncClasses()}attributeChangedCallback(){this.syncClasses()}syncClasses(){const s=this.getAttribute("size")||"l",i=this.getAttribute("padding")||"m",n=this.getAttribute("max-width");this.className=["designbase-wc-container",`designbase-wc-container--size-${t.includes(s)?s:"l"}`,e.includes(i)&&`designbase-wc-container--padding-${i}`,this.hasAttribute("full-width")&&"designbase-wc-container--full-width"].filter(Boolean).join(" "),this.hasAttribute("full-width")?this.style.maxWidth="100%":n?this.style.maxWidth=n.includes("px")||n.includes("%")?n:`${n}px`:this.style.removeProperty("max-width")}}customElements.get("db-container")||customElements.define("db-container",DbContainer);export{DbContainer};
+const SIZES = ['s', 'm', 'l', 'xl', 'full'];
+const PADDINGS = ['none', 's', 'm', 'l', 'xl'];
+class DbContainer extends HTMLElement {
+    static get observedAttributes() {
+        return ['size', 'padding', 'max-width', 'full-width'];
+    }
+    connectedCallback() {
+        this.syncClasses();
+    }
+    attributeChangedCallback() {
+        this.syncClasses();
+    }
+    syncClasses() {
+        const size = this.getAttribute('size') || 'l';
+        const padding = this.getAttribute('padding') || 'm';
+        const maxWidth = this.getAttribute('max-width');
+        this.className = [
+            'designbase-wc-container',
+            `designbase-wc-container--size-${SIZES.includes(size) ? size : 'l'}`,
+            PADDINGS.includes(padding) && `designbase-wc-container--padding-${padding}`,
+            this.hasAttribute('full-width') && 'designbase-wc-container--full-width',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        if (this.hasAttribute('full-width')) {
+            this.style.maxWidth = '100%';
+        }
+        else if (maxWidth) {
+            this.style.maxWidth = maxWidth.includes('px') || maxWidth.includes('%') ? maxWidth : `${maxWidth}px`;
+        }
+        else {
+            this.style.removeProperty('max-width');
+        }
+    }
+}
+if (!customElements.get('db-container'))
+    customElements.define('db-container', DbContainer);
+
+export { DbContainer };

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

@@ -1 +1,265 @@
-class DbContextMenu extends HTMLElement{constructor(){super(...arguments),this.externalTarget=null,this.activeSubMenu=null,this.onExternalContextMenu=null,this.handleDocumentMouseDown=t=>{if(!this.open)return;const e=t.target;this.menuEl?.contains(e)||2===t.button&&(this.targetWrap?.contains(e)||this.externalTarget?.contains(e))||this.close()},this.handleKeyDown=t=>{this.open&&"Escape"===t.key&&this.close()},this.handleContextMenu=t=>{this.hasAttribute("disabled")||(t.preventDefault(),t.stopPropagation(),this.openAt(t.clientX,t.clientY))}}static get observedAttributes(){return["open","x","y","items","target-id","disabled"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(t){t?this.setAttribute("open","true"):this.removeAttribute("open")}get items(){try{return JSON.parse(this.getAttribute("items")||"[]")}catch{return[]}}set items(t){this.setAttribute("items","string"==typeof t?t:JSON.stringify(t))}connectedCallback(){this.style.display="contents",requestAnimationFrame(()=>{this.renderTarget(),this.syncMenu()}),document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleKeyDown),this.unbindExternalTarget(),this.menuEl?.remove(),this.menuEl=void 0}attributeChangedCallback(t){if(this.isConnected)return"target-id"===t?(this.unbindExternalTarget(),void this.bindExternalTarget()):void("open"!==t&&"x"!==t&&"y"!==t&&"items"!==t||this.syncMenu())}openAt(t,e){this.setAttribute("x",String(t)),this.setAttribute("y",String(e)),this.setAttribute("open","true"),this.dispatchEvent(new CustomEvent("db-open",{bubbles:!0,composed:!0,detail:{x:t,y:e}})),this.syncMenu()}close(){this.activeSubMenu=null,this.removeAttribute("open"),this.menuEl?.remove(),this.menuEl=void 0,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}collectTargetChildren(){const t=Array.from(this.children).filter(t=>!t.hasAttribute("data-wc-internal")&&t!==this.targetWrap);return t.length>0?t:Array.from(this.targetWrap?.children||[])}bindExternalTarget(){const t=this.getAttribute("target-id");t&&(this.externalTarget=document.getElementById(t),this.externalTarget&&(this.onExternalContextMenu=t=>this.handleContextMenu(t),this.externalTarget.addEventListener("contextmenu",this.onExternalContextMenu)))}unbindExternalTarget(){this.externalTarget&&this.onExternalContextMenu&&this.externalTarget.removeEventListener("contextmenu",this.onExternalContextMenu),this.externalTarget=null,this.onExternalContextMenu=null}renderTarget(){const t=this.collectTargetChildren();this.getAttribute("target-id")?(this.replaceChildren(),this.bindExternalTarget()):(this.targetWrap||(this.targetWrap=document.createElement("div"),this.targetWrap.className="designbase-wc-context-menu__target",this.targetWrap.addEventListener("contextmenu",this.handleContextMenu)),this.replaceChildren(),t.forEach(t=>this.targetWrap.append(t)),t.length>0&&this.append(this.targetWrap))}adjustPosition(){if(!this.menuEl)return;const t=Number(this.getAttribute("x")||0),e=Number(this.getAttribute("y")||0),n=this.menuEl.getBoundingClientRect();let i=t,s=e;t+n.width>window.innerWidth&&(i=t-n.width),e+n.height>window.innerHeight&&(s=e-n.height),this.menuEl.style.left=`${Math.max(0,i)}px`,this.menuEl.style.top=`${Math.max(0,s)}px`}createMenuItem(t){const e=document.createElement("db-menu-item");return e.setAttribute("label",t.label||t.id),e.setAttribute("type","block"),e.setAttribute("menu-style","dropdown"),t.icon&&e.setAttribute("icon",t.icon),t.disabled&&e.setAttribute("disabled",""),t.variant&&e.setAttribute("variant",t.variant),t.subItems?.length&&(e.setAttribute("sub-items",JSON.stringify(t.subItems)),e.setAttribute("expandable","")),e.addEventListener("db-click",()=>{t.disabled||t.subItems?.length||(this.dispatchEvent(new CustomEvent("db-select",{detail:{item:t},bubbles:!0,composed:!0})),this.close())}),e.addEventListener("db-child-click",t=>{const e=t.detail?.child;this.dispatchEvent(new CustomEvent("db-select",{detail:{item:e},bubbles:!0,composed:!0})),this.close()}),e}renderItem(t,e){if(t.divider||t.isDivider){const t=document.createElement("db-divider");return t.className="designbase-wc-divider",t}const n=document.createElement("div");n.className="designbase-wc-context-menu__item-wrapper",n.append(this.createMenuItem(t));if(Boolean(t.subItems?.length)){const e=document.createElement("div");e.className=["designbase-wc-context-menu__submenu",this.activeSubMenu===t.id&&"designbase-wc-context-menu__submenu--open"].filter(Boolean).join(" "),t.subItems?.forEach((t,n)=>{const i=this.renderItem(t,n);i&&e.append(i)}),n.addEventListener("mouseenter",()=>{this.activeSubMenu=t.id,e.classList.add("designbase-wc-context-menu__submenu--open")}),n.addEventListener("mouseleave",()=>{this.activeSubMenu=null,e.classList.remove("designbase-wc-context-menu__submenu--open")}),n.append(e)}return n}syncMenu(){if(this.menuEl?.remove(),this.menuEl=void 0,!this.open)return;const t=Number(this.getAttribute("x")||0),e=Number(this.getAttribute("y")||0),n=this.items,i=document.createElement("div");i.className="designbase-wc-context-menu",i.setAttribute("data-wc-internal",""),i.style.position="fixed",i.style.left=`${t}px`,i.style.top=`${e}px`,i.style.zIndex="1000",i.setAttribute("role","menu"),i.setAttribute("aria-orientation","vertical"),n.forEach((t,e)=>{const n=this.renderItem(t,e);n&&i.append(n)}),document.body.append(i),this.menuEl=i,requestAnimationFrame(()=>this.adjustPosition())}}customElements.get("db-context-menu")||customElements.define("db-context-menu",DbContextMenu);export{DbContextMenu};
+class DbContextMenu extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.externalTarget = null;
+        this.activeSubMenu = null;
+        this.onExternalContextMenu = null;
+        this.handleDocumentMouseDown = (event) => {
+            if (!this.open)
+                return;
+            const target = event.target;
+            if (this.menuEl?.contains(target))
+                return;
+            // 트리거 영역 안이라도 좌클릭(또는 우클릭 외 버튼)이면 닫는다.
+            // 우클릭(button 2)만 재오픈/위치이동을 위해 닫지 않고 넘긴다.
+            if (event.button === 2 && (this.targetWrap?.contains(target) || this.externalTarget?.contains(target))) {
+                return;
+            }
+            this.close();
+        };
+        this.handleKeyDown = (event) => {
+            if (!this.open)
+                return;
+            if (event.key === 'Escape')
+                this.close();
+        };
+        this.handleContextMenu = (event) => {
+            if (this.hasAttribute('disabled'))
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            this.openAt(event.clientX, event.clientY);
+        };
+    }
+    static get observedAttributes() {
+        return ['open', 'x', 'y', 'items', 'target-id', 'disabled'];
+    }
+    get open() {
+        return this.hasAttribute('open') && this.getAttribute('open') !== 'false';
+    }
+    set open(value) {
+        if (value)
+            this.setAttribute('open', 'true');
+        else
+            this.removeAttribute('open');
+    }
+    get items() {
+        try {
+            return JSON.parse(this.getAttribute('items') || '[]');
+        }
+        catch {
+            return [];
+        }
+    }
+    set items(value) {
+        this.setAttribute('items', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    connectedCallback() {
+        this.style.display = 'contents';
+        requestAnimationFrame(() => {
+            this.renderTarget();
+            this.syncMenu();
+        });
+        document.addEventListener('mousedown', this.handleDocumentMouseDown);
+        document.addEventListener('keydown', this.handleKeyDown);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('mousedown', this.handleDocumentMouseDown);
+        document.removeEventListener('keydown', this.handleKeyDown);
+        this.unbindExternalTarget();
+        this.menuEl?.remove();
+        this.menuEl = undefined;
+    }
+    attributeChangedCallback(name) {
+        if (!this.isConnected)
+            return;
+        if (name === 'target-id') {
+            this.unbindExternalTarget();
+            this.bindExternalTarget();
+            return;
+        }
+        if (name === 'open' || name === 'x' || name === 'y' || name === 'items') {
+            this.syncMenu();
+        }
+    }
+    openAt(x, y) {
+        this.setAttribute('x', String(x));
+        this.setAttribute('y', String(y));
+        this.setAttribute('open', 'true');
+        this.dispatchEvent(new CustomEvent('db-open', {
+            bubbles: true,
+            composed: true,
+            detail: { x, y },
+        }));
+        this.syncMenu();
+    }
+    close() {
+        this.activeSubMenu = null;
+        this.removeAttribute('open');
+        this.menuEl?.remove();
+        this.menuEl = undefined;
+        this.dispatchEvent(new CustomEvent('db-close', { bubbles: true, composed: true }));
+    }
+    collectTargetChildren() {
+        const fromHost = Array.from(this.children).filter((child) => !child.hasAttribute('data-wc-internal') && child !== this.targetWrap);
+        if (fromHost.length > 0)
+            return fromHost;
+        return Array.from(this.targetWrap?.children || []);
+    }
+    bindExternalTarget() {
+        const targetId = this.getAttribute('target-id');
+        if (!targetId)
+            return;
+        this.externalTarget = document.getElementById(targetId);
+        if (!this.externalTarget)
+            return;
+        this.onExternalContextMenu = (event) => this.handleContextMenu(event);
+        this.externalTarget.addEventListener('contextmenu', this.onExternalContextMenu);
+    }
+    unbindExternalTarget() {
+        if (this.externalTarget && this.onExternalContextMenu) {
+            this.externalTarget.removeEventListener('contextmenu', this.onExternalContextMenu);
+        }
+        this.externalTarget = null;
+        this.onExternalContextMenu = null;
+    }
+    renderTarget() {
+        const targetChildren = this.collectTargetChildren();
+        const targetId = this.getAttribute('target-id');
+        if (!targetId) {
+            if (!this.targetWrap) {
+                this.targetWrap = document.createElement('div');
+                this.targetWrap.className = 'designbase-wc-context-menu__target';
+                this.targetWrap.addEventListener('contextmenu', this.handleContextMenu);
+            }
+            this.replaceChildren();
+            targetChildren.forEach((child) => this.targetWrap.append(child));
+            if (targetChildren.length > 0) {
+                this.append(this.targetWrap);
+            }
+        }
+        else {
+            this.replaceChildren();
+            this.bindExternalTarget();
+        }
+    }
+    adjustPosition() {
+        if (!this.menuEl)
+            return;
+        const x = Number(this.getAttribute('x') || 0);
+        const y = Number(this.getAttribute('y') || 0);
+        const rect = this.menuEl.getBoundingClientRect();
+        let adjustedX = x;
+        let adjustedY = y;
+        if (x + rect.width > window.innerWidth)
+            adjustedX = x - rect.width;
+        if (y + rect.height > window.innerHeight)
+            adjustedY = y - rect.height;
+        this.menuEl.style.left = `${Math.max(0, adjustedX)}px`;
+        this.menuEl.style.top = `${Math.max(0, adjustedY)}px`;
+    }
+    createMenuItem(item) {
+        const menuItem = document.createElement('db-menu-item');
+        menuItem.setAttribute('label', item.label || item.id);
+        menuItem.setAttribute('type', 'block');
+        menuItem.setAttribute('menu-style', 'dropdown');
+        if (item.icon)
+            menuItem.setAttribute('icon', item.icon);
+        if (item.disabled)
+            menuItem.setAttribute('disabled', '');
+        if (item.variant)
+            menuItem.setAttribute('variant', item.variant);
+        if (item.subItems?.length) {
+            menuItem.setAttribute('sub-items', JSON.stringify(item.subItems));
+            menuItem.setAttribute('expandable', '');
+        }
+        menuItem.addEventListener('db-click', () => {
+            if (item.disabled)
+                return;
+            if (!item.subItems?.length) {
+                this.dispatchEvent(new CustomEvent('db-select', {
+                    detail: { item },
+                    bubbles: true,
+                    composed: true,
+                }));
+                this.close();
+            }
+        });
+        menuItem.addEventListener('db-child-click', (event) => {
+            const child = event.detail?.child;
+            this.dispatchEvent(new CustomEvent('db-select', {
+                detail: { item: child },
+                bubbles: true,
+                composed: true,
+            }));
+            this.close();
+        });
+        return menuItem;
+    }
+    renderItem(item, index) {
+        if (item.divider || item.isDivider) {
+            const divider = document.createElement('db-divider');
+            divider.className = 'designbase-wc-divider';
+            return divider;
+        }
+        const wrapper = document.createElement('div');
+        wrapper.className = 'designbase-wc-context-menu__item-wrapper';
+        wrapper.append(this.createMenuItem(item));
+        const hasSubMenu = Boolean(item.subItems?.length);
+        if (hasSubMenu) {
+            const submenu = document.createElement('div');
+            submenu.className = [
+                'designbase-wc-context-menu__submenu',
+                this.activeSubMenu === item.id && 'designbase-wc-context-menu__submenu--open',
+            ]
+                .filter(Boolean)
+                .join(' ');
+            item.subItems?.forEach((subItem, subIndex) => {
+                const child = this.renderItem(subItem, subIndex);
+                if (child)
+                    submenu.append(child);
+            });
+            wrapper.addEventListener('mouseenter', () => {
+                this.activeSubMenu = item.id;
+                submenu.classList.add('designbase-wc-context-menu__submenu--open');
+            });
+            wrapper.addEventListener('mouseleave', () => {
+                this.activeSubMenu = null;
+                submenu.classList.remove('designbase-wc-context-menu__submenu--open');
+            });
+            wrapper.append(submenu);
+        }
+        return wrapper;
+    }
+    syncMenu() {
+        this.menuEl?.remove();
+        this.menuEl = undefined;
+        if (!this.open)
+            return;
+        const x = Number(this.getAttribute('x') || 0);
+        const y = Number(this.getAttribute('y') || 0);
+        const items = this.items;
+        const menu = document.createElement('div');
+        menu.className = 'designbase-wc-context-menu';
+        menu.setAttribute('data-wc-internal', '');
+        menu.style.position = 'fixed';
+        menu.style.left = `${x}px`;
+        menu.style.top = `${y}px`;
+        menu.style.zIndex = '1000';
+        menu.setAttribute('role', 'menu');
+        menu.setAttribute('aria-orientation', 'vertical');
+        items.forEach((item, index) => {
+            const node = this.renderItem(item, index);
+            if (node)
+                menu.append(node);
+        });
+        document.body.append(menu);
+        this.menuEl = menu;
+        requestAnimationFrame(() => this.adjustPosition());
+    }
+}
+if (!customElements.get('db-context-menu')) {
+    customElements.define('db-context-menu', DbContextMenu);
+}
+
+export { DbContextMenu };

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

@@ -1 +1,146 @@
-const t=["s","m","l"],e=["default","compact","minimal"];class DbCountdown extends HTMLElement{constructor(){super(...arguments),this.timer=null,this.targetTime=Date.now()}static get observedAttributes(){return["end-date","duration","size","variant","show-days","show-hours","show-minutes","show-seconds","show-labels"]}connectedCallback(){this.setupTargetTime(),this.start()}disconnectedCallback(){this.stop()}attributeChangedCallback(){this.setupTargetTime(),this.render()}boolAttr(t,e=!1){if(!this.hasAttribute(t))return e;const s=this.getAttribute(t);return""===s||"true"===s}optionAttr(t,e,s){const n=this.getAttribute(t);return n&&e.includes(n)?n:s}setupTargetTime(){const t=this.getAttribute("end-date"),e=Number(this.getAttribute("duration"));if(t){const e=new Date(t).getTime();return void(this.targetTime=Number.isFinite(e)?e:Date.now())}Number.isFinite(e)&&e>0?this.targetTime=Date.now()+1e3*e:this.targetTime=Date.now()}getRemaining(){const t=this.targetTime-Date.now();return t<=0?{days:0,hours:0,minutes:0,seconds:0,total:0}:{days:Math.floor(t/864e5),hours:Math.floor(t/36e5%24),minutes:Math.floor(t/6e4%60),seconds:Math.floor(t/1e3%60),total:t}}stop(){null!==this.timer&&(window.clearInterval(this.timer),this.timer=null)}start(){this.stop(),this.render(),this.timer=window.setInterval(()=>{const t=this.getRemaining();this.render(),this.dispatchEvent(new CustomEvent("db-tick",{detail:t,bubbles:!0,composed:!0})),t.total<=0&&(this.stop(),this.dispatchEvent(new CustomEvent("db-complete",{bubbles:!0,composed:!0})))},1e3)}two(t){return String(t).padStart(2,"0")}render(){const s=this.optionAttr("size",t,"m"),n=this.optionAttr("variant",e,"default"),o=this.boolAttr("show-labels",!0),i=this.getRemaining();this.className=["designbase-wc-countdown",`designbase-wc-countdown--${s}`,`designbase-wc-countdown--${n}`,o&&"designbase-wc-countdown--with-labels",i.total<=0&&"designbase-wc-countdown--expired"].filter(Boolean).join(" ");const a={days:this.getAttribute("label-days")||"일",hours:this.getAttribute("label-hours")||"시간",minutes:this.getAttribute("label-minutes")||"분",seconds:this.getAttribute("label-seconds")||"초"},r=[{key:"days",value:i.days,show:this.boolAttr("show-days",!0)},{key:"hours",value:i.hours,show:this.boolAttr("show-hours",!0)},{key:"minutes",value:i.minutes,show:this.boolAttr("show-minutes",!0)},{key:"seconds",value:i.seconds,show:this.boolAttr("show-seconds",!0)}].filter(t=>t.show),d=[];for(let t=0;t<r.length;t+=1){const e=r[t],s=document.createElement("div");s.className="designbase-wc-countdown__unit";const i=document.createElement("div");if(i.className="designbase-wc-countdown__value",i.textContent=this.two(e.value),s.append(i),o){const t=document.createElement("div");t.className="designbase-wc-countdown__label",t.textContent=a[e.key],s.append(t)}if(d.push(s),t<r.length-1&&"minimal"!==n){const t=document.createElement("div");t.className="designbase-wc-countdown__separator",t.textContent=":",d.push(t)}}this.replaceChildren(...d)}}customElements.get("db-countdown")||customElements.define("db-countdown",DbCountdown);export{DbCountdown};
+const SIZES = ['s', 'm', 'l'];
+const VARIANTS = ['default', 'compact', 'minimal'];
+class DbCountdown extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.timer = null;
+        this.targetTime = Date.now();
+    }
+    static get observedAttributes() {
+        return [
+            'end-date',
+            'duration',
+            'size',
+            'variant',
+            'show-days',
+            'show-hours',
+            'show-minutes',
+            'show-seconds',
+            'show-labels',
+        ];
+    }
+    connectedCallback() {
+        this.setupTargetTime();
+        this.start();
+    }
+    disconnectedCallback() {
+        this.stop();
+    }
+    attributeChangedCallback() {
+        this.setupTargetTime();
+        this.render();
+    }
+    boolAttr(name, fallback = false) {
+        if (!this.hasAttribute(name))
+            return fallback;
+        const value = this.getAttribute(name);
+        return value === '' || value === 'true';
+    }
+    optionAttr(name, options, fallback) {
+        const value = this.getAttribute(name);
+        return value && options.includes(value) ? value : fallback;
+    }
+    setupTargetTime() {
+        const endDate = this.getAttribute('end-date');
+        const duration = Number(this.getAttribute('duration'));
+        if (endDate) {
+            const parsed = new Date(endDate).getTime();
+            this.targetTime = Number.isFinite(parsed) ? parsed : Date.now();
+            return;
+        }
+        if (Number.isFinite(duration) && duration > 0) {
+            this.targetTime = Date.now() + duration * 1000;
+            return;
+        }
+        this.targetTime = Date.now();
+    }
+    getRemaining() {
+        const total = this.targetTime - Date.now();
+        if (total <= 0)
+            return { days: 0, hours: 0, minutes: 0, seconds: 0, total: 0 };
+        return {
+            days: Math.floor(total / (1000 * 60 * 60 * 24)),
+            hours: Math.floor((total / (1000 * 60 * 60)) % 24),
+            minutes: Math.floor((total / (1000 * 60)) % 60),
+            seconds: Math.floor((total / 1000) % 60),
+            total,
+        };
+    }
+    stop() {
+        if (this.timer !== null) {
+            window.clearInterval(this.timer);
+            this.timer = null;
+        }
+    }
+    start() {
+        this.stop();
+        this.render();
+        this.timer = window.setInterval(() => {
+            const remaining = this.getRemaining();
+            this.render();
+            this.dispatchEvent(new CustomEvent('db-tick', { detail: remaining, bubbles: true, composed: true }));
+            if (remaining.total <= 0) {
+                this.stop();
+                this.dispatchEvent(new CustomEvent('db-complete', { bubbles: true, composed: true }));
+            }
+        }, 1000);
+    }
+    two(value) {
+        return String(value).padStart(2, '0');
+    }
+    render() {
+        const size = this.optionAttr('size', SIZES, 'm');
+        const variant = this.optionAttr('variant', VARIANTS, 'default');
+        const showLabels = this.boolAttr('show-labels', true);
+        const remaining = this.getRemaining();
+        this.className = [
+            'designbase-wc-countdown',
+            `designbase-wc-countdown--${size}`,
+            `designbase-wc-countdown--${variant}`,
+            showLabels && 'designbase-wc-countdown--with-labels',
+            remaining.total <= 0 && 'designbase-wc-countdown--expired',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const labels = {
+            days: this.getAttribute('label-days') || '일',
+            hours: this.getAttribute('label-hours') || '시간',
+            minutes: this.getAttribute('label-minutes') || '분',
+            seconds: this.getAttribute('label-seconds') || '초',
+        };
+        const units = [
+            { key: 'days', value: remaining.days, show: this.boolAttr('show-days', true) },
+            { key: 'hours', value: remaining.hours, show: this.boolAttr('show-hours', true) },
+            { key: 'minutes', value: remaining.minutes, show: this.boolAttr('show-minutes', true) },
+            { key: 'seconds', value: remaining.seconds, show: this.boolAttr('show-seconds', true) },
+        ].filter((item) => item.show);
+        const nodes = [];
+        for (let i = 0; i < units.length; i += 1) {
+            const unit = units[i];
+            const unitEl = document.createElement('div');
+            unitEl.className = 'designbase-wc-countdown__unit';
+            const valueEl = document.createElement('div');
+            valueEl.className = 'designbase-wc-countdown__value';
+            valueEl.textContent = this.two(unit.value);
+            unitEl.append(valueEl);
+            if (showLabels) {
+                const labelEl = document.createElement('div');
+                labelEl.className = 'designbase-wc-countdown__label';
+                labelEl.textContent = labels[unit.key];
+                unitEl.append(labelEl);
+            }
+            nodes.push(unitEl);
+            if (i < units.length - 1 && variant !== 'minimal') {
+                const sep = document.createElement('div');
+                sep.className = 'designbase-wc-countdown__separator';
+                sep.textContent = ':';
+                nodes.push(sep);
+            }
+        }
+        this.replaceChildren(...nodes);
+    }
+}
+if (!customElements.get('db-countdown'))
+    customElements.define('db-countdown', DbCountdown);
+
+export { DbCountdown };