@designbasekorea/ui-wc 0.5.5 → 0.5.6

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

@@ -1 +1,580 @@
-const e=["top","bottom","left","right","top-start","top-end","bottom-start","bottom-end","left-start","left-end","right-start","right-end"],t=["click","hover","focus","manual"];class DbPopover extends HTMLElement{constructor(){super(...arguments),this.onDocMouseDown=null,this.onDocKeyDown=null,this.onExternalTriggerClick=null,this.handleTriggerClick=e=>{"click"===this.resolvedTrigger()&&(e.preventDefault(),e.stopPropagation(),this.setOpen(!this.isOpen()))},this.handleTriggerMouseEnter=()=>{"hover"===this.resolvedTrigger()&&this.scheduleOpen()},this.handleTriggerMouseLeave=()=>{"hover"===this.resolvedTrigger()&&this.scheduleClose()},this.handleTriggerFocus=()=>{"focus"===this.resolvedTrigger()&&this.scheduleOpen()},this.handleTriggerBlur=()=>{"focus"===this.resolvedTrigger()&&this.scheduleClose()},this.handleReposition=()=>{this.isOpen()&&(this.repositionRaf&&cancelAnimationFrame(this.repositionRaf),this.repositionRaf=requestAnimationFrame(()=>{this.positionPanel(),this.repositionRaf=void 0}))}}static get observedAttributes(){return["open","placement","position","title","content","size","variant","trigger","delay","hide-delay","always-show","disabled","max-width","show-arrow","close-on-outside-click","close-on-escape","trigger-id"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}connectedCallback(){this.classList.add("designbase-wc-popover-host"),this.hasAttribute("placement")||this.hasAttribute("position")||this.setAttribute("placement","top"),this.render(),this.childObserver=new MutationObserver(()=>this.render()),this.childObserver.observe(this,{childList:!0}),this.bindExternalTrigger(),this.attachGlobalListeners(),this.syncOpenFromAttributes()}disconnectedCallback(){this.childObserver?.disconnect(),this.clearTimers(),this.repositionRaf&&cancelAnimationFrame(this.repositionRaf),this.unbindExternalTrigger(),this.detachGlobalListeners(),this.removePanel()}attributeChangedCallback(e){this.isConnected&&("trigger-id"===e&&(this.unbindExternalTrigger(),this.bindExternalTrigger()),"open"!==e&&"always-show"!==e&&"disabled"!==e?("content"===e&&this.bodyEl&&(this.bodyEl.textContent=this.getAttribute("content")||""),this.isOpen()&&(this.updatePanelMetadata(),requestAnimationFrame(()=>this.positionPanel()))):this.syncOpenFromAttributes())}resolvedPlacement(){const t=this.getAttribute("position")||this.getAttribute("placement")||"top";return e.includes(t)?t:"top"}resolvedTrigger(){const e=this.getAttribute("trigger")||"click";return t.includes(e)?e:"click"}isControlled(){return this.hasAttribute("open")}isOpen(){return!this.hasAttribute("disabled")&&(!!this.hasAttribute("always-show")||(this.isControlled()?"false"!==this.getAttribute("open"):this.panel?.classList.contains("designbase-wc-popover--visible")??!1))}setOpen(e){this.hasAttribute("disabled")||this.hasAttribute("always-show")||(this.isControlled()?e?this.setAttribute("open",""):this.removeAttribute("open"):e?this.showPanel():this.hidePanel(),this.dispatchEvent(new CustomEvent("db-open-change",{bubbles:!0,composed:!0,detail:{open:e}})),e||this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0})))}syncOpenFromAttributes(){this.hasAttribute("always-show")?this.showPanel():this.isControlled()&&("false"!==this.getAttribute("open")?this.showPanel():this.hidePanel())}clearTimers(){this.showTimer&&clearTimeout(this.showTimer),this.hideTimer&&clearTimeout(this.hideTimer),this.showTimer=void 0,this.hideTimer=void 0}groupOf(e){return e.startsWith("top")?"top":e.startsWith("bottom")?"bottom":e.startsWith("left")?"left":"right"}collectTriggerChildren(){const isInternalNode=e=>e.hasAttribute("data-wc-internal")||e===this.triggerWrap,e=Array.from(this.children).filter(e=>!isInternalNode(e));return e.length>0?e:Array.from(this.triggerWrap?.children||[])}ensureTriggerWrap(){this.triggerWrap||(this.triggerWrap=document.createElement("span"),this.triggerWrap.className="designbase-wc-popover__trigger",this.triggerWrap.setAttribute("data-wc-internal",""),this.triggerWrap.tabIndex=0,this.triggerWrap.addEventListener("click",this.handleTriggerClick),this.triggerWrap.addEventListener("mouseenter",this.handleTriggerMouseEnter),this.triggerWrap.addEventListener("mouseleave",this.handleTriggerMouseLeave),this.triggerWrap.addEventListener("focus",this.handleTriggerFocus),this.triggerWrap.addEventListener("blur",this.handleTriggerBlur))}mountTriggerChildren(e){this.triggerWrap&&e.forEach(e=>{e.parentElement!==this.triggerWrap&&this.triggerWrap.append(e)})}collectBodyChildren(){return Array.from(this.querySelectorAll('[slot="content"]'))}bindExternalTrigger(){const e=this.getAttribute("trigger-id");e&&(this.triggerEl=document.getElementById(e),this.triggerEl&&(this.onExternalTriggerClick=()=>{"click"===this.resolvedTrigger()&&this.setOpen(!this.isOpen())},this.triggerEl.addEventListener("click",this.onExternalTriggerClick)))}unbindExternalTrigger(){this.triggerEl&&this.onExternalTriggerClick&&this.triggerEl.removeEventListener("click",this.onExternalTriggerClick),this.triggerEl=null,this.onExternalTriggerClick=null}attachGlobalListeners(){this.onDocMouseDown=e=>{if(!this.isOpen()||"false"===this.getAttribute("close-on-outside-click"))return;const t=e.target;this.panel?.contains(t)||this.triggerWrap?.contains(t)||this.triggerEl?.contains(t)||this.setOpen(!1)},this.onDocKeyDown=e=>{"Escape"===e.key&&this.isOpen()&&"false"!==this.getAttribute("close-on-escape")&&this.setOpen(!1)},document.addEventListener("mousedown",this.onDocMouseDown),document.addEventListener("keydown",this.onDocKeyDown)}detachGlobalListeners(){this.onDocMouseDown&&document.removeEventListener("mousedown",this.onDocMouseDown),this.onDocKeyDown&&document.removeEventListener("keydown",this.onDocKeyDown),this.onDocMouseDown=null,this.onDocKeyDown=null}scheduleOpen(){this.clearTimers();const e="hover"===this.resolvedTrigger()?Math.max(0,Number(this.getAttribute("delay")||0)):0;this.showTimer=setTimeout(()=>this.showPanel(),e)}scheduleClose(){this.clearTimers();const e="hover"===this.resolvedTrigger()?Math.max(0,Number(this.getAttribute("hide-delay")||80)):0;this.hideTimer=setTimeout(()=>this.setOpen(!1),e)}getTriggerRect(){const e=this.triggerEl||this.triggerWrap;return e?.getBoundingClientRect()}flipPlacementIfNeeded(e,t,i){const s=window.innerHeight,r=window.innerWidth,o=this.groupOf(e),n=t.top-i.height-8>=8,a=t.bottom+8+i.height<=s-8,h=t.left-i.width-8>=8,l=t.right+8+i.width<=r-8;return"top"===o&&!n&&a?e.replace(/^top/,"bottom"):"bottom"===o&&!a&&n?e.replace(/^bottom/,"top"):"left"===o&&!h&&l?e.replace(/^left/,"right"):"right"===o&&!l&&h?e.replace(/^right/,"left"):e}applyCoords(e,t,i){let s=0,r=0,o=0,n=0;const a=i.height,h=i.width,l=16;switch(e){case"top":s=t.top-i.height-8,r=t.left+t.width/2-i.width/2,o=a-5,n=h/2-5;break;case"top-start":s=t.top-i.height-8,r=t.left,o=a-5,n=11;break;case"top-end":s=t.top-i.height-8,r=t.right-i.width,o=a-5,n=h-l-5;break;case"bottom":s=t.bottom+8,r=t.left+t.width/2-i.width/2,o=-5,n=h/2-5;break;case"bottom-start":s=t.bottom+8,r=t.left,o=-5,n=11;break;case"bottom-end":s=t.bottom+8,r=t.right-i.width,o=-5,n=h-l-5;break;case"left":s=t.top+t.height/2-i.height/2,r=t.left-i.width-8,o=a/2-5,n=h-5;break;case"left-start":s=t.top,r=t.left-i.width-8,o=11,n=h-5;break;case"left-end":s=t.bottom-i.height,r=t.left-i.width-8,o=a-l-5,n=h-5;break;case"right":s=t.top+t.height/2-i.height/2,r=t.right+8,o=a/2-5,n=-5;break;case"right-start":s=t.top,r=t.right+8,o=11,n=-5;break;case"right-end":s=t.bottom-i.height,r=t.right+8,o=a-l-5,n=-5}const d=window.innerWidth,c=window.innerHeight;return r<8&&(r=8),r+i.width>d-8&&(r=d-i.width-8),s<8&&(s=8),s+i.height>c-8&&(s=c-i.height-8),{top:s,left:r,aTop:o,aLeft:n,placement:e}}positionPanel(){if(!this.panel)return;const t=this.getTriggerRect();if(!t)return;const i=Number(this.getAttribute("max-width")||300);this.panel.style.maxWidth=`${i}px`,this.panel.offsetHeight;const s=this.panel.getBoundingClientRect(),r=this.resolvedPlacement(),o=this.flipPlacementIfNeeded(r,t,s),{top:n,left:a,aTop:h,aLeft:l}=this.applyCoords(o,t,s);this.panel.style.top=`${n}px`,this.panel.style.left=`${a}px`,this.panel.dataset.placementGroup=this.groupOf(o),e.forEach(e=>{this.panel.classList.toggle(`designbase-wc-popover--${e}`,e===o)}),this.arrowEl&&(this.arrowEl.className=`designbase-wc-popover__arrow designbase-wc-popover__arrow--${o}`,this.arrowEl.style.top=`${h}px`,this.arrowEl.style.left=`${l}px`)}revealPanel(){this.panel&&(this.panel.classList.remove("designbase-wc-popover--visible"),this.positionPanel(),this.panel.offsetHeight,this.positionPanel(),this.panel.classList.add("designbase-wc-popover--visible"))}updatePanelMetadata(){if(!this.panel)return;const e=this.getAttribute("size")||"m",t=this.getAttribute("variant")||"default",i=this.resolvedPlacement();this.panel.className=["designbase-wc-popover",`designbase-wc-popover--${e}`,`designbase-wc-popover--${t}`,`designbase-wc-popover--${i}`,this.isOpen()?"designbase-wc-popover--visible":"",this.hasAttribute("disabled")?"designbase-wc-popover--disabled":""].filter(Boolean).join(" ")}ensurePanel(){if(this.panel)return;const e=document.createElement("div");e.className="designbase-wc-popover",e.setAttribute("data-wc-internal",""),e.setAttribute("role","dialog"),e.setAttribute("aria-modal","false"),e.style.position="fixed",e.style.zIndex="9999";const t=document.createElement("div");t.className="designbase-wc-popover__content";const i=document.createElement("div");i.className="designbase-wc-popover__header";const s=document.createElement("h3");s.className="designbase-wc-popover__title";const r=document.createElement("db-button");r.className="designbase-wc-popover__close-button",r.setAttribute("variant","ghost"),r.setAttribute("size","s"),r.setAttribute("icon-only",""),r.setAttribute("start-icon","close"),r.setAttribute("aria-label","팝오버 닫기"),r.addEventListener("db-click",e=>{e.stopPropagation(),this.setOpen(!1)}),i.append(s,r),this.bodyEl=document.createElement("div"),this.bodyEl.className="designbase-wc-popover__body",t.append(i,this.bodyEl),e.append(t),"false"!==this.getAttribute("show-arrow")&&(this.arrowEl=document.createElement("div"),this.arrowEl.className=`designbase-wc-popover__arrow designbase-wc-popover__arrow--${this.resolvedPlacement()}`,e.append(this.arrowEl)),this.panel=e,this.panel.querySelector(".designbase-wc-popover__title").textContent=this.getAttribute("title")||"",this.panel.querySelector(".designbase-wc-popover__title").hidden=!this.getAttribute("title"),document.body.append(e),e.addEventListener("mouseenter",()=>{"hover"===this.resolvedTrigger()&&this.clearTimers()}),e.addEventListener("mouseleave",()=>{"hover"===this.resolvedTrigger()&&this.scheduleClose()})}showPanel(){if(this.hasAttribute("disabled"))return;this.ensurePanel(),this.updatePanelMetadata();const e=this.collectBodyChildren();e.length>0?this.bodyEl.replaceChildren(...e.map(e=>e.cloneNode(!0))):this.bodyEl.textContent=this.getAttribute("content")||"";const t=this.panel.querySelector(".designbase-wc-popover__title");t.textContent=this.getAttribute("title")||"",t.hidden=!this.getAttribute("title"),requestAnimationFrame(()=>{this.revealPanel(),window.addEventListener("scroll",this.handleReposition,!0),window.addEventListener("resize",this.handleReposition)})}hidePanel(){this.panel?.classList.remove("designbase-wc-popover--visible"),window.removeEventListener("scroll",this.handleReposition,!0),window.removeEventListener("resize",this.handleReposition),this.hasAttribute("always-show")||this.removePanel()}removePanel(){this.panel?.remove(),this.panel=void 0,this.bodyEl=void 0,this.arrowEl=void 0}render(){this.ensureTriggerWrap();const e=this.collectTriggerChildren();this.mountTriggerChildren(e);const t=Boolean(this.getAttribute("trigger-id"));this.triggerWrap&&(e.length>0||!t?this.triggerWrap.parentElement!==this&&this.append(this.triggerWrap):this.triggerWrap.parentElement===this&&this.triggerWrap.remove()),this.hasAttribute("always-show")&&this.showPanel()}}customElements.get("db-popover")||customElements.define("db-popover",DbPopover);export{DbPopover};
+const PLACEMENTS = [
+    'top',
+    'bottom',
+    'left',
+    'right',
+    'top-start',
+    'top-end',
+    'bottom-start',
+    'bottom-end',
+    'left-start',
+    'left-end',
+    'right-start',
+    'right-end',
+];
+const TRIGGERS = ['click', 'hover', 'focus', 'manual'];
+const GAP = 8;
+class DbPopover extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.onDocMouseDown = null;
+        this.onDocKeyDown = null;
+        this.onExternalTriggerClick = null;
+        this.handleTriggerClick = (event) => {
+            if (this.resolvedTrigger() !== 'click')
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            this.setOpen(!this.isOpen());
+        };
+        this.handleTriggerMouseEnter = () => {
+            if (this.resolvedTrigger() === 'hover')
+                this.scheduleOpen();
+        };
+        this.handleTriggerMouseLeave = () => {
+            if (this.resolvedTrigger() === 'hover')
+                this.scheduleClose();
+        };
+        this.handleTriggerFocus = () => {
+            if (this.resolvedTrigger() === 'focus')
+                this.scheduleOpen();
+        };
+        this.handleTriggerBlur = () => {
+            if (this.resolvedTrigger() === 'focus')
+                this.scheduleClose();
+        };
+        this.handleReposition = () => {
+            if (!this.isOpen())
+                return;
+            if (this.repositionRaf)
+                cancelAnimationFrame(this.repositionRaf);
+            this.repositionRaf = requestAnimationFrame(() => {
+                this.positionPanel();
+                this.repositionRaf = undefined;
+            });
+        };
+    }
+    static get observedAttributes() {
+        return [
+            'open',
+            'placement',
+            'position',
+            'title',
+            'content',
+            'size',
+            'variant',
+            'trigger',
+            'delay',
+            'hide-delay',
+            'always-show',
+            'disabled',
+            'max-width',
+            'show-arrow',
+            'close-on-outside-click',
+            'close-on-escape',
+            'trigger-id',
+        ];
+    }
+    get open() {
+        return this.hasAttribute('open') && this.getAttribute('open') !== 'false';
+    }
+    set open(value) {
+        if (value)
+            this.setAttribute('open', '');
+        else
+            this.removeAttribute('open');
+    }
+    connectedCallback() {
+        this.classList.add('designbase-wc-popover-host');
+        if (!this.hasAttribute('placement') && !this.hasAttribute('position')) {
+            this.setAttribute('placement', 'top');
+        }
+        this.render();
+        this.childObserver = new MutationObserver(() => this.render());
+        this.childObserver.observe(this, { childList: true });
+        this.bindExternalTrigger();
+        this.attachGlobalListeners();
+        this.syncOpenFromAttributes();
+    }
+    disconnectedCallback() {
+        this.childObserver?.disconnect();
+        this.clearTimers();
+        if (this.repositionRaf)
+            cancelAnimationFrame(this.repositionRaf);
+        this.unbindExternalTrigger();
+        this.detachGlobalListeners();
+        this.removePanel();
+    }
+    attributeChangedCallback(name) {
+        if (!this.isConnected)
+            return;
+        if (name === 'trigger-id') {
+            this.unbindExternalTrigger();
+            this.bindExternalTrigger();
+        }
+        if (name === 'open' || name === 'always-show' || name === 'disabled') {
+            this.syncOpenFromAttributes();
+            return;
+        }
+        if (name === 'content' && this.bodyEl) {
+            this.bodyEl.textContent = this.getAttribute('content') || '';
+        }
+        if (this.isOpen()) {
+            this.updatePanelMetadata();
+            requestAnimationFrame(() => this.positionPanel());
+        }
+    }
+    resolvedPlacement() {
+        const value = this.getAttribute('position') || this.getAttribute('placement') || 'top';
+        return PLACEMENTS.includes(value) ? value : 'top';
+    }
+    resolvedTrigger() {
+        const value = this.getAttribute('trigger') || 'click';
+        return TRIGGERS.includes(value) ? value : 'click';
+    }
+    isControlled() {
+        return this.hasAttribute('open');
+    }
+    isOpen() {
+        if (this.hasAttribute('disabled'))
+            return false;
+        if (this.hasAttribute('always-show'))
+            return true;
+        if (this.isControlled()) {
+            return this.getAttribute('open') !== 'false';
+        }
+        return this.panel?.classList.contains('designbase-wc-popover--visible') ?? false;
+    }
+    setOpen(next) {
+        if (this.hasAttribute('disabled') || this.hasAttribute('always-show'))
+            return;
+        if (this.isControlled()) {
+            if (next)
+                this.setAttribute('open', '');
+            else
+                this.removeAttribute('open');
+        }
+        else if (next) {
+            this.showPanel();
+        }
+        else {
+            this.hidePanel();
+        }
+        this.dispatchEvent(new CustomEvent('db-open-change', {
+            bubbles: true,
+            composed: true,
+            detail: { open: next },
+        }));
+        if (!next) {
+            this.dispatchEvent(new CustomEvent('db-close', { bubbles: true, composed: true }));
+        }
+    }
+    syncOpenFromAttributes() {
+        if (this.hasAttribute('always-show')) {
+            this.showPanel();
+            return;
+        }
+        if (this.isControlled()) {
+            if (this.getAttribute('open') !== 'false')
+                this.showPanel();
+            else
+                this.hidePanel();
+        }
+    }
+    clearTimers() {
+        if (this.showTimer)
+            clearTimeout(this.showTimer);
+        if (this.hideTimer)
+            clearTimeout(this.hideTimer);
+        this.showTimer = undefined;
+        this.hideTimer = undefined;
+    }
+    groupOf(position) {
+        if (position.startsWith('top'))
+            return 'top';
+        if (position.startsWith('bottom'))
+            return 'bottom';
+        if (position.startsWith('left'))
+            return 'left';
+        return 'right';
+    }
+    collectTriggerChildren() {
+        const isInternalNode = (child) => child.hasAttribute('data-wc-internal') || child === this.triggerWrap;
+        const fromHost = Array.from(this.children).filter((child) => !isInternalNode(child));
+        if (fromHost.length > 0)
+            return fromHost;
+        return Array.from(this.triggerWrap?.children || []);
+    }
+    ensureTriggerWrap() {
+        if (!this.triggerWrap) {
+            this.triggerWrap = document.createElement('span');
+            this.triggerWrap.className = 'designbase-wc-popover__trigger';
+            this.triggerWrap.setAttribute('data-wc-internal', '');
+            this.triggerWrap.tabIndex = 0;
+            this.triggerWrap.addEventListener('click', this.handleTriggerClick);
+            this.triggerWrap.addEventListener('mouseenter', this.handleTriggerMouseEnter);
+            this.triggerWrap.addEventListener('mouseleave', this.handleTriggerMouseLeave);
+            this.triggerWrap.addEventListener('focus', this.handleTriggerFocus);
+            this.triggerWrap.addEventListener('blur', this.handleTriggerBlur);
+        }
+    }
+    mountTriggerChildren(children) {
+        if (!this.triggerWrap)
+            return;
+        children.forEach((child) => {
+            if (child.parentElement !== this.triggerWrap) {
+                this.triggerWrap.append(child);
+            }
+        });
+    }
+    collectBodyChildren() {
+        return Array.from(this.querySelectorAll('[slot="content"]'));
+    }
+    bindExternalTrigger() {
+        const triggerId = this.getAttribute('trigger-id');
+        if (!triggerId)
+            return;
+        this.triggerEl = document.getElementById(triggerId);
+        if (!this.triggerEl)
+            return;
+        this.onExternalTriggerClick = () => {
+            if (this.resolvedTrigger() !== 'click')
+                return;
+            this.setOpen(!this.isOpen());
+        };
+        this.triggerEl.addEventListener('click', this.onExternalTriggerClick);
+    }
+    unbindExternalTrigger() {
+        if (this.triggerEl && this.onExternalTriggerClick) {
+            this.triggerEl.removeEventListener('click', this.onExternalTriggerClick);
+        }
+        this.triggerEl = null;
+        this.onExternalTriggerClick = null;
+    }
+    attachGlobalListeners() {
+        this.onDocMouseDown = (event) => {
+            if (!this.isOpen() || this.getAttribute('close-on-outside-click') === 'false')
+                return;
+            const target = event.target;
+            if (this.panel?.contains(target))
+                return;
+            if (this.triggerWrap?.contains(target))
+                return;
+            if (this.triggerEl?.contains(target))
+                return;
+            this.setOpen(false);
+        };
+        this.onDocKeyDown = (event) => {
+            if (event.key === 'Escape' && this.isOpen() && this.getAttribute('close-on-escape') !== 'false') {
+                this.setOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', this.onDocMouseDown);
+        document.addEventListener('keydown', this.onDocKeyDown);
+    }
+    detachGlobalListeners() {
+        if (this.onDocMouseDown)
+            document.removeEventListener('mousedown', this.onDocMouseDown);
+        if (this.onDocKeyDown)
+            document.removeEventListener('keydown', this.onDocKeyDown);
+        this.onDocMouseDown = null;
+        this.onDocKeyDown = null;
+    }
+    scheduleOpen() {
+        this.clearTimers();
+        const trigger = this.resolvedTrigger();
+        const delay = trigger === 'hover' ? Math.max(0, Number(this.getAttribute('delay') || 0)) : 0;
+        this.showTimer = setTimeout(() => this.showPanel(), delay);
+    }
+    scheduleClose() {
+        this.clearTimers();
+        const trigger = this.resolvedTrigger();
+        const hideDelay = trigger === 'hover' ? Math.max(0, Number(this.getAttribute('hide-delay') || 80)) : 0;
+        this.hideTimer = setTimeout(() => this.setOpen(false), hideDelay);
+    }
+    getTriggerRect() {
+        const target = this.triggerEl || this.triggerWrap;
+        return target?.getBoundingClientRect();
+    }
+    flipPlacementIfNeeded(placement, tRect, pRect) {
+        const margin = 8;
+        const vh = window.innerHeight;
+        const vw = window.innerWidth;
+        const group = this.groupOf(placement);
+        const fitsTop = tRect.top - pRect.height - GAP >= margin;
+        const fitsBottom = tRect.bottom + GAP + pRect.height <= vh - margin;
+        const fitsLeft = tRect.left - pRect.width - GAP >= margin;
+        const fitsRight = tRect.right + GAP + pRect.width <= vw - margin;
+        if (group === 'top' && !fitsTop && fitsBottom) {
+            return placement.replace(/^top/, 'bottom');
+        }
+        if (group === 'bottom' && !fitsBottom && fitsTop) {
+            return placement.replace(/^bottom/, 'top');
+        }
+        if (group === 'left' && !fitsLeft && fitsRight) {
+            return placement.replace(/^left/, 'right');
+        }
+        if (group === 'right' && !fitsRight && fitsLeft) {
+            return placement.replace(/^right/, 'left');
+        }
+        return placement;
+    }
+    applyCoords(placement, tRect, pRect) {
+        let top = 0;
+        let left = 0;
+        let aTop = 0;
+        let aLeft = 0;
+        // 회전한 정사각형 화살표(10px)의 중심을 패널 가장자리에 맞춤 (half = 5)
+        const H = pRect.height;
+        const W = pRect.width;
+        const EDGE = 16; // start/end 앵커 중심 위치
+        const HALF = 5;
+        switch (placement) {
+            case 'top':
+                top = tRect.top - pRect.height - GAP;
+                left = tRect.left + tRect.width / 2 - pRect.width / 2;
+                aTop = H - HALF;
+                aLeft = W / 2 - HALF;
+                break;
+            case 'top-start':
+                top = tRect.top - pRect.height - GAP;
+                left = tRect.left;
+                aTop = H - HALF;
+                aLeft = EDGE - HALF;
+                break;
+            case 'top-end':
+                top = tRect.top - pRect.height - GAP;
+                left = tRect.right - pRect.width;
+                aTop = H - HALF;
+                aLeft = W - EDGE - HALF;
+                break;
+            case 'bottom':
+                top = tRect.bottom + GAP;
+                left = tRect.left + tRect.width / 2 - pRect.width / 2;
+                aTop = -HALF;
+                aLeft = W / 2 - HALF;
+                break;
+            case 'bottom-start':
+                top = tRect.bottom + GAP;
+                left = tRect.left;
+                aTop = -HALF;
+                aLeft = EDGE - HALF;
+                break;
+            case 'bottom-end':
+                top = tRect.bottom + GAP;
+                left = tRect.right - pRect.width;
+                aTop = -HALF;
+                aLeft = W - EDGE - HALF;
+                break;
+            case 'left':
+                top = tRect.top + tRect.height / 2 - pRect.height / 2;
+                left = tRect.left - pRect.width - GAP;
+                aTop = H / 2 - HALF;
+                aLeft = W - HALF;
+                break;
+            case 'left-start':
+                top = tRect.top;
+                left = tRect.left - pRect.width - GAP;
+                aTop = EDGE - HALF;
+                aLeft = W - HALF;
+                break;
+            case 'left-end':
+                top = tRect.bottom - pRect.height;
+                left = tRect.left - pRect.width - GAP;
+                aTop = H - EDGE - HALF;
+                aLeft = W - HALF;
+                break;
+            case 'right':
+                top = tRect.top + tRect.height / 2 - pRect.height / 2;
+                left = tRect.right + GAP;
+                aTop = H / 2 - HALF;
+                aLeft = -HALF;
+                break;
+            case 'right-start':
+                top = tRect.top;
+                left = tRect.right + GAP;
+                aTop = EDGE - HALF;
+                aLeft = -HALF;
+                break;
+            case 'right-end':
+                top = tRect.bottom - pRect.height;
+                left = tRect.right + GAP;
+                aTop = H - EDGE - HALF;
+                aLeft = -HALF;
+                break;
+        }
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        if (left < 8)
+            left = 8;
+        if (left + pRect.width > vw - 8)
+            left = vw - pRect.width - 8;
+        if (top < 8)
+            top = 8;
+        if (top + pRect.height > vh - 8)
+            top = vh - pRect.height - 8;
+        return { top, left, aTop, aLeft, placement };
+    }
+    positionPanel() {
+        if (!this.panel)
+            return;
+        const tRect = this.getTriggerRect();
+        if (!tRect)
+            return;
+        // maxWidth를 측정 전에 적용해야 패널 폭이 확정되어 위치가 어긋나지 않음
+        const maxWidth = Number(this.getAttribute('max-width') || 300);
+        this.panel.style.maxWidth = `${maxWidth}px`;
+        // 레이아웃 확정 후 측정 (첫 페인트 높이 0 방지)
+        void this.panel.offsetHeight;
+        const pRect = this.panel.getBoundingClientRect();
+        const preferred = this.resolvedPlacement();
+        const placement = this.flipPlacementIfNeeded(preferred, tRect, pRect);
+        const { top, left, aTop, aLeft } = this.applyCoords(placement, tRect, pRect);
+        this.panel.style.top = `${top}px`;
+        this.panel.style.left = `${left}px`;
+        this.panel.dataset.placementGroup = this.groupOf(placement);
+        PLACEMENTS.forEach((name) => {
+            this.panel.classList.toggle(`designbase-wc-popover--${name}`, name === placement);
+        });
+        if (this.arrowEl) {
+            this.arrowEl.className = `designbase-wc-popover__arrow designbase-wc-popover__arrow--${placement}`;
+            this.arrowEl.style.top = `${aTop}px`;
+            this.arrowEl.style.left = `${aLeft}px`;
+        }
+    }
+    revealPanel() {
+        if (!this.panel)
+            return;
+        this.panel.classList.remove('designbase-wc-popover--visible');
+        this.positionPanel();
+        void this.panel.offsetHeight;
+        this.positionPanel();
+        this.panel.classList.add('designbase-wc-popover--visible');
+    }
+    updatePanelMetadata() {
+        if (!this.panel)
+            return;
+        const size = this.getAttribute('size') || 'm';
+        const variant = this.getAttribute('variant') || 'default';
+        const placement = this.resolvedPlacement();
+        this.panel.className = [
+            'designbase-wc-popover',
+            `designbase-wc-popover--${size}`,
+            `designbase-wc-popover--${variant}`,
+            `designbase-wc-popover--${placement}`,
+            this.isOpen() ? 'designbase-wc-popover--visible' : '',
+            this.hasAttribute('disabled') ? 'designbase-wc-popover--disabled' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    ensurePanel() {
+        if (this.panel)
+            return;
+        const panel = document.createElement('div');
+        panel.className = 'designbase-wc-popover';
+        panel.setAttribute('data-wc-internal', '');
+        panel.setAttribute('role', 'dialog');
+        panel.setAttribute('aria-modal', 'false');
+        panel.style.position = 'fixed';
+        panel.style.zIndex = '9999';
+        const inner = document.createElement('div');
+        inner.className = 'designbase-wc-popover__content';
+        const header = document.createElement('div');
+        header.className = 'designbase-wc-popover__header';
+        const title = document.createElement('h3');
+        title.className = 'designbase-wc-popover__title';
+        const close = document.createElement('db-button');
+        close.className = 'designbase-wc-popover__close-button';
+        close.setAttribute('variant', 'ghost');
+        close.setAttribute('size', 's');
+        close.setAttribute('icon-only', '');
+        close.setAttribute('start-icon', 'close');
+        close.setAttribute('aria-label', '팝오버 닫기');
+        close.addEventListener('db-click', (event) => {
+            event.stopPropagation();
+            this.setOpen(false);
+        });
+        header.append(title, close);
+        this.bodyEl = document.createElement('div');
+        this.bodyEl.className = 'designbase-wc-popover__body';
+        inner.append(header, this.bodyEl);
+        panel.append(inner);
+        if (this.getAttribute('show-arrow') !== 'false') {
+            this.arrowEl = document.createElement('div');
+            this.arrowEl.className = `designbase-wc-popover__arrow designbase-wc-popover__arrow--${this.resolvedPlacement()}`;
+            panel.append(this.arrowEl);
+        }
+        this.panel = panel;
+        this.panel.querySelector('.designbase-wc-popover__title').textContent = this.getAttribute('title') || '';
+        this.panel.querySelector('.designbase-wc-popover__title').hidden = !this.getAttribute('title');
+        document.body.append(panel);
+        panel.addEventListener('mouseenter', () => {
+            if (this.resolvedTrigger() === 'hover')
+                this.clearTimers();
+        });
+        panel.addEventListener('mouseleave', () => {
+            if (this.resolvedTrigger() === 'hover')
+                this.scheduleClose();
+        });
+    }
+    showPanel() {
+        if (this.hasAttribute('disabled'))
+            return;
+        this.ensurePanel();
+        this.updatePanelMetadata();
+        const slotContent = this.collectBodyChildren();
+        if (slotContent.length > 0) {
+            this.bodyEl.replaceChildren(...slotContent.map((node) => node.cloneNode(true)));
+        }
+        else {
+            this.bodyEl.textContent = this.getAttribute('content') || '';
+        }
+        const titleEl = this.panel.querySelector('.designbase-wc-popover__title');
+        titleEl.textContent = this.getAttribute('title') || '';
+        titleEl.hidden = !this.getAttribute('title');
+        requestAnimationFrame(() => {
+            this.revealPanel();
+            window.addEventListener('scroll', this.handleReposition, true);
+            window.addEventListener('resize', this.handleReposition);
+        });
+    }
+    hidePanel() {
+        this.panel?.classList.remove('designbase-wc-popover--visible');
+        window.removeEventListener('scroll', this.handleReposition, true);
+        window.removeEventListener('resize', this.handleReposition);
+        if (!this.hasAttribute('always-show')) {
+            this.removePanel();
+        }
+    }
+    removePanel() {
+        this.panel?.remove();
+        this.panel = undefined;
+        this.bodyEl = undefined;
+        this.arrowEl = undefined;
+    }
+    render() {
+        this.ensureTriggerWrap();
+        const triggerChildren = this.collectTriggerChildren();
+        this.mountTriggerChildren(triggerChildren);
+        const hasExternalTrigger = Boolean(this.getAttribute('trigger-id'));
+        if (this.triggerWrap) {
+            if (triggerChildren.length > 0 || !hasExternalTrigger) {
+                if (this.triggerWrap.parentElement !== this) {
+                    this.append(this.triggerWrap);
+                }
+            }
+            else if (this.triggerWrap.parentElement === this) {
+                this.triggerWrap.remove();
+            }
+        }
+        if (this.hasAttribute('always-show')) {
+            this.showPanel();
+        }
+    }
+}
+if (!customElements.get('db-popover')) {
+    customElements.define('db-popover', DbPopover);
+}
+
+export { DbPopover };