@designbasekorea/ui-wc 0.5.3 → 0.5.6

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

@@ -1 +1,522 @@
-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};
+import { createDbIcon } from './db-icons.js';
+
+const SIZES = ['s', 'm', 'l', 'xl', 'full'];
+const HEADER_VARIANTS = ['default', 'tabs', 'segment'];
+const NAV_SIZES = ['s', 'm', 'l'];
+class DbModal extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.titleId = `db-modal-title-${Math.random().toString(36).slice(2, 9)}`;
+        this.isMounted = false;
+        this.internalTabId = '';
+        this.internalSegment = '';
+        this.exitTimerId = null;
+        this.handleDocumentKeyDown = (event) => {
+            if (event.key === 'Escape' && this.open && this.getAttribute('close-on-escape') !== 'false') {
+                event.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') && this.getAttribute('open') !== 'false';
+    }
+    set open(value) {
+        if (value)
+            this.setAttribute('open', 'true');
+        else
+            this.removeAttribute('open');
+    }
+    connectedCallback() {
+        this.classList.add('designbase-wc-modal-host');
+        document.addEventListener('keydown', this.handleDocumentKeyDown);
+        this.childObserver = new MutationObserver(() => {
+            if (this.open)
+                this.render();
+        });
+        this.childObserver.observe(this, { childList: true });
+        this.syncOpenState();
+    }
+    disconnectedCallback() {
+        this.childObserver?.disconnect();
+        document.removeEventListener('keydown', this.handleDocumentKeyDown);
+        if (this.exitTimerId)
+            clearTimeout(this.exitTimerId);
+        this.teardown();
+    }
+    attributeChangedCallback(name) {
+        if (!this.isConnected)
+            return;
+        if (name === 'open') {
+            this.syncOpenState();
+            return;
+        }
+        if (name === 'selected-tab-id' || name === 'segment-value') {
+            const classified = this.getClassifiedChildren();
+            this.renderBodyContent(classified.body);
+            this.renderHeader(classified.header);
+            return;
+        }
+        this.render();
+        if (this.isMounted)
+            this.syncVisibility();
+    }
+    resolvedSize() {
+        return SIZES.includes(this.size) ? this.size : 'm';
+    }
+    get size() {
+        return this.getAttribute('size') || 'm';
+    }
+    set size(value) {
+        if (value)
+            this.setAttribute('size', value);
+        else
+            this.removeAttribute('size');
+    }
+    resolvedHeaderVariant() {
+        const value = this.getAttribute('header-variant') || 'default';
+        return HEADER_VARIANTS.includes(value) ? value : 'default';
+    }
+    parsedTabs() {
+        const raw = this.getAttribute('tabs');
+        if (!raw)
+            return [];
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    parsedSegments() {
+        const raw = this.getAttribute('segments');
+        if (!raw)
+            return [];
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    usesIntegratedNav() {
+        const variant = this.resolvedHeaderVariant();
+        return ((variant === 'tabs' && this.parsedTabs().length > 0) ||
+            (variant === 'segment' && this.parsedSegments().length > 0));
+    }
+    closeIconSize() {
+        const size = this.resolvedSize();
+        if (size === 's')
+            return 16;
+        if (size === 'l')
+            return 20;
+        if (size === 'xl')
+            return 24;
+        return 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((child) => !child.hasAttribute('data-wc-internal'));
+    }
+    classifyChildren(children) {
+        const isPart = (child, part, className) => child.classList.contains(className) || child.getAttribute('data-modal-part') === part;
+        const header = children.filter((child) => isPart(child, 'header', 'designbase-wc-modal__header'));
+        const footer = children.filter((child) => isPart(child, 'footer', 'designbase-wc-modal__footer') || child.getAttribute('slot') === 'footer');
+        const body = children.filter((child) => isPart(child, 'body', 'designbase-wc-modal__body'));
+        const rest = children.filter((child) => !header.includes(child) && !footer.includes(child) && !body.includes(child));
+        return { header, body: [...body, ...rest], footer };
+    }
+    getClassifiedChildren() {
+        const fromHost = this.classifyChildren(this.collectUserChildren());
+        if (fromHost.header.length || fromHost.body.length || fromHost.footer.length) {
+            return fromHost;
+        }
+        const header = Array.from(this.headerEl?.children || []).filter((child) => {
+            if (child === this.closeButton || child.classList.contains('designbase-wc-modal__header-row'))
+                return false;
+            return child.getAttribute('data-modal-part') === 'header' || child.classList.contains('designbase-wc-modal__header');
+        });
+        const body = this.collectContentParts('body');
+        const footer = this.collectContentParts('footer');
+        return { header, body, footer };
+    }
+    isBodyPart(child) {
+        return child.classList.contains('designbase-wc-modal__body') || child.getAttribute('data-modal-part') === 'body';
+    }
+    isFooterPart(child) {
+        return (child.classList.contains('designbase-wc-modal__footer') ||
+            child.getAttribute('data-modal-part') === 'footer' ||
+            child.getAttribute('slot') === 'footer');
+    }
+    collectContentParts(kind) {
+        if (!this.contentEl)
+            return [];
+        const matches = Array.from(this.contentEl.children).filter((child) => kind === 'body' ? this.isBodyPart(child) : this.isFooterPart(child));
+        if (matches.length > 0)
+            return matches;
+        return Array.from(this.children).filter((child) => kind === 'body' ? this.isBodyPart(child) : this.isFooterPart(child));
+    }
+    placeContentParts(kind, parts) {
+        if (!this.contentEl)
+            return;
+        parts.forEach((part) => {
+            if (part.parentElement === this.contentEl)
+                return;
+            if (kind === 'body') {
+                const anchor = this.contentEl.querySelector(':scope > .designbase-wc-modal__footer, :scope > [data-modal-part="footer"]') ||
+                    null;
+                this.contentEl.insertBefore(part, anchor);
+                return;
+            }
+            this.contentEl.append(part);
+        });
+    }
+    restorePartsToHost() {
+        if (!this.contentEl)
+            return;
+        Array.from(this.contentEl.children)
+            .filter((child) => !child.classList.contains('designbase-wc-modal__integrated-content') &&
+            !child.hasAttribute('data-wc-internal'))
+            .forEach((child) => {
+            if (child.parentElement !== this) {
+                this.append(child);
+            }
+        });
+    }
+    bindFooterActions() {
+        if (!this.contentEl || this.contentEl.dataset.modalActionsBound === 'true')
+            return;
+        this.contentEl.dataset.modalActionsBound = 'true';
+        const handleClose = (event) => {
+            const target = event.target?.closest('[data-modal-close]');
+            if (target && this.contentEl?.contains(target)) {
+                this.close();
+            }
+        };
+        this.contentEl.addEventListener('click', handleClose);
+        this.contentEl.addEventListener('db-click', handleClose);
+    }
+    ensureStructure() {
+        if (!this.root) {
+            this.root = document.createElement('div');
+            this.root.className = 'designbase-wc-modal__overlay';
+            this.root.setAttribute('data-wc-internal', '');
+            this.root.addEventListener('click', (event) => {
+                if (event.target === this.root && this.getAttribute('close-on-outside-click') !== 'false') {
+                    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', (event) => event.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 iconSize = this.closeIconSize();
+        this.closeButton.replaceChildren(createDbIcon('close', iconSize));
+        this.closeButton.hidden = this.getAttribute('show-close-button') === 'false';
+    }
+    renderDefaultHeader(customHeader) {
+        if (!this.headerEl || !this.headerContentEl || !this.titleEl || !this.closeButton)
+            return;
+        this.headerEl.className = 'designbase-wc-modal__header';
+        this.headerEl.replaceChildren();
+        if (customHeader.length > 0) {
+            customHeader.forEach((child) => this.headerEl.append(child));
+            if (this.getAttribute('show-close-button') !== 'false') {
+                this.headerEl.append(this.closeButton);
+            }
+            return;
+        }
+        const title = this.getAttribute('title') || '';
+        this.titleEl.textContent = title;
+        this.titleEl.hidden = !title;
+        this.headerContentEl.replaceChildren();
+        if (title)
+            this.headerContentEl.append(this.titleEl);
+        this.renderCloseButton();
+        this.headerEl.append(this.headerContentEl);
+        if (this.getAttribute('show-close-button') !== 'false') {
+            this.headerEl.append(this.closeButton);
+        }
+        if (this.panel) {
+            if (title)
+                this.panel.setAttribute('aria-labelledby', this.titleId);
+            else
+                this.panel.removeAttribute('aria-labelledby');
+        }
+    }
+    renderNavHeader() {
+        if (!this.headerEl || !this.headerContentEl || !this.titleEl || !this.closeButton || !this.navEl)
+            return;
+        const variant = this.resolvedHeaderVariant();
+        const tabs = this.parsedTabs();
+        const segments = this.parsedSegments();
+        const navSize = NAV_SIZES.includes((this.getAttribute('nav-size') || 'm'))
+            ? this.getAttribute('nav-size') || 'm'
+            : 's';
+        this.headerEl.className = [
+            'designbase-wc-modal__header',
+            variant === 'tabs' && 'designbase-wc-modal__header--tabs',
+            variant === 'segment' && 'designbase-wc-modal__header--segment',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const title = this.getAttribute('title') || '';
+        this.titleEl.textContent = title;
+        this.titleEl.hidden = !title;
+        this.headerContentEl.replaceChildren();
+        if (title)
+            this.headerContentEl.append(this.titleEl);
+        this.renderCloseButton();
+        const headerRow = document.createElement('div');
+        headerRow.className = 'designbase-wc-modal__header-row';
+        headerRow.append(this.headerContentEl);
+        if (this.getAttribute('show-close-button') !== 'false') {
+            headerRow.append(this.closeButton);
+        }
+        this.headerEl.replaceChildren(headerRow);
+        this.navEl.replaceChildren();
+        if (variant === 'tabs' && tabs.length > 0) {
+            const tabsComponent = document.createElement('db-tabs');
+            tabsComponent.setAttribute('size', navSize);
+            tabsComponent.setAttribute('items', JSON.stringify(tabs.map((tab) => ({ id: tab.id, label: tab.label, disabled: tab.disabled }))));
+            tabsComponent.setAttribute('selected-id', this.activeTabId());
+            tabsComponent.addEventListener('db-change', (event) => {
+                const tabId = event.detail?.id;
+                if (!tabId)
+                    return;
+                if (!this.hasAttribute('selected-tab-id')) {
+                    this.internalTabId = tabId;
+                }
+                this.dispatchEvent(new CustomEvent('db-tab-change', {
+                    detail: { tabId },
+                    bubbles: true,
+                    composed: true,
+                }));
+                this.renderBodyContent(this.getClassifiedChildren().body);
+            });
+            this.tabsEl = tabsComponent;
+            this.navEl.append(tabsComponent);
+            this.headerEl.append(this.navEl);
+        }
+        if (variant === 'segment' && segments.length > 0) {
+            const segmentComponent = document.createElement('db-segment-control');
+            segmentComponent.setAttribute('size', navSize);
+            segmentComponent.setAttribute('options', JSON.stringify(segments.map((segment) => ({ value: segment.value, label: segment.label, disabled: segment.disabled }))));
+            segmentComponent.setAttribute('value', this.activeSegmentValue());
+            if (this.getAttribute('segment-full-width') !== 'false') {
+                segmentComponent.setAttribute('full-width', '');
+            }
+            segmentComponent.addEventListener('db-change', (event) => {
+                const value = event.detail?.value;
+                if (!value)
+                    return;
+                if (!this.hasAttribute('segment-value')) {
+                    this.internalSegment = value;
+                }
+                this.dispatchEvent(new CustomEvent('db-segment-change', {
+                    detail: { value },
+                    bubbles: true,
+                    composed: true,
+                }));
+                this.renderBodyContent(this.getClassifiedChildren().body);
+            });
+            this.segmentEl = segmentComponent;
+            this.navEl.append(segmentComponent);
+            this.headerEl.append(this.navEl);
+        }
+        if (this.panel) {
+            if (title)
+                this.panel.setAttribute('aria-labelledby', this.titleId);
+            else
+                this.panel.removeAttribute('aria-labelledby');
+        }
+    }
+    renderHeader(customHeader) {
+        if (!this.headerEl)
+            return;
+        if (customHeader.length > 0) {
+            this.headerEl.hidden = false;
+            this.renderDefaultHeader(customHeader);
+            return;
+        }
+        if (this.usesIntegratedNav()) {
+            this.headerEl.hidden = false;
+            this.renderNavHeader();
+            return;
+        }
+        const title = this.getAttribute('title') || '';
+        if (!title) {
+            this.headerEl.hidden = true;
+            return;
+        }
+        this.headerEl.hidden = false;
+        this.renderDefaultHeader([]);
+    }
+    renderBodyContent(userBody = []) {
+        if (!this.contentEl)
+            return;
+        let integratedEl = this.contentEl.querySelector(':scope > .designbase-wc-modal__integrated-content');
+        let integratedText = '';
+        if (this.usesIntegratedNav()) {
+            const variant = this.resolvedHeaderVariant();
+            if (variant === 'tabs') {
+                const tab = this.parsedTabs().find((item) => item.id === this.activeTabId());
+                integratedText = tab?.content || '';
+            }
+            if (variant === 'segment') {
+                const segment = this.parsedSegments().find((item) => item.value === this.activeSegmentValue());
+                integratedText = segment?.content || '';
+            }
+        }
+        if (integratedText) {
+            if (!integratedEl) {
+                integratedEl = document.createElement('div');
+                integratedEl.className = 'designbase-wc-modal__integrated-content designbase-wc-modal__body';
+                this.contentEl.insertBefore(integratedEl, this.contentEl.firstChild);
+            }
+            integratedEl.textContent = integratedText;
+        }
+        else {
+            integratedEl?.remove();
+        }
+        const bodyWrappers = userBody.filter((child) => this.isBodyPart(child));
+        const looseBody = userBody.filter((child) => !this.isBodyPart(child) && !this.isFooterPart(child));
+        this.placeContentParts('body', bodyWrappers.length > 0 ? bodyWrappers : looseBody);
+    }
+    renderFooter(footerChildren) {
+        if (!this.contentEl)
+            return;
+        const footerWrappers = footerChildren.filter((child) => this.isFooterPart(child));
+        const looseFooter = footerChildren.filter((child) => !this.isFooterPart(child) && !this.isBodyPart(child));
+        const footerParts = footerWrappers.length > 0 ? footerWrappers : looseFooter;
+        this.placeContentParts('footer', footerParts);
+        footerParts.forEach((part) => {
+            part.hidden = false;
+        });
+        this.bindFooterActions();
+    }
+    render() {
+        this.ensureStructure();
+        const { header, body, footer } = this.getClassifiedChildren();
+        SIZES.forEach((size) => this.panel?.classList.remove(`designbase-wc-modal--${size}`));
+        this.panel?.classList.add(`designbase-wc-modal--${this.resolvedSize()}`);
+        this.renderHeader(header);
+        this.renderBodyContent(body);
+        this.renderFooter(footer);
+    }
+    syncVisibility() {
+        if (!this.root || !this.panel)
+            return;
+        if (this.open) {
+            this.root.setAttribute('data-state', 'entering');
+            this.panel.setAttribute('data-state', 'entering');
+            requestAnimationFrame(() => {
+                void this.panel?.offsetHeight;
+                requestAnimationFrame(() => {
+                    if (!this.open || !this.root || !this.panel)
+                        return;
+                    this.root.setAttribute('data-state', 'entered');
+                    this.panel.setAttribute('data-state', 'entered');
+                });
+            });
+            return;
+        }
+        this.root.setAttribute('data-state', 'exiting');
+        this.panel.setAttribute('data-state', 'exiting');
+    }
+    syncOpenState() {
+        if (this.open) {
+            this.render();
+            if (this.root && !this.root.isConnected) {
+                document.body.append(this.root);
+            }
+            document.body.style.overflow = 'hidden';
+            this.isMounted = true;
+            this.syncVisibility();
+            return;
+        }
+        if (!this.isMounted)
+            return;
+        this.syncVisibility();
+        document.body.style.overflow = '';
+        if (this.exitTimerId)
+            clearTimeout(this.exitTimerId);
+        this.exitTimerId = window.setTimeout(() => {
+            if (!this.open)
+                this.teardown();
+        }, 200);
+    }
+    teardown() {
+        this.restorePartsToHost();
+        this.root?.remove();
+        this.isMounted = false;
+        document.body.style.overflow = '';
+    }
+    close() {
+        this.open = false;
+        this.dispatchEvent(new CustomEvent('db-close', { bubbles: true, composed: true }));
+    }
+}
+if (!customElements.get('db-modal')) {
+    customElements.define('db-modal', DbModal);
+}
+
+export { DbModal };