ninegrid2 6.727.0 → 6.729.0

package/dist/bundle.cjs.js

@@ -120664,203 +120664,6 @@ class nxSpan extends HTMLElement
 
 customElements.define("nx-span", nxSpan);
 
-class nxTab extends HTMLElement {
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' });
-        
-        this.shadowRoot.innerHTML = `
-            <style>
-                :host(.theme-1) {
-					.tabs {
-                        --border-bottom: 1px solid #eee;
-                        gap: 3px;
-                    }
-                    .tab-button {
-						color: #666;
-                        font-weight: 500;
-						transform: translateY(1px);
-						z-index: 1;
-						--border-bottom: 1px solid #ccc;
-                    }
-					.tab-button.active {
-                        color: #666;
-                        font-weight: 700;
-                        border-bottom: 1px solid white;
-                    }
-					.tab-pages {
-                      border: 1px solid #ccc;
-                    }
-                }
-				
-                :host(.theme-2) {
-                    .tabs {
-                        border-bottom: 1px solid #eee;
-                        gap: 40px;
-                    }
-                    .tab-button {
-                        color: #666;
-                        font-weight: 500;
-                        border: none;
-                    }
-                    .tab-button.active {
-                        color: green;
-                        font-weight: 700;
-                        border-bottom: 3px solid green;
-                    }
-                }
-				
-                .tabs {
-                    display: flex;
-                      cursor: pointer;
-                      
-                    }
-                    .tab-button {
-                      padding: 8px;
-                      border: 1px solid #ccc;
-                      text-align: center;
-					  outline: 0;
-                    }
-                    .tab-button:hover {
-                      --filter: brightness(80%);
-                    }
-                    .tab-pages {
-                      position: relative;
-                      width: 100%;
-                      overflow: hidden;
-                      transition: height 0.5s ease-in-out;
-                    }
-                    .tab-page {
-                      position: absolute;
-                      width: 100%;
-                      top: 0;
-                      transition: left 0.5s ease-in-out;
-                      padding: 20px;
-                      box-sizing: border-box;
-                      white-space: nowrap;
-                          overflow: hidden;
-                          text-overflow: ellipsis;
-                        text-align: left;
-                    }
-                    .tab-page.active {
-                      left: 0;
-                    }
-                    .tab-page.exit-left {
-                      left: -100%;
-                    }
-                    .tab-page.exit-right {
-                      left: 100%;
-                    }
-            </style>
-            <div class="tabs"></div>
-            <div class="tab-pages"></div>
-        `;
-        
-		//console.log(this.shadowRoot.querySelector('.tab-page'));
-		//this.shadowRoot.querySelector('.tab-pages').style.height = this.shadowRoot.querySelector('.tab-page').style.height;
-		
-        this.switchTabHandler = this.#switchTab.bind(this);
-    }
-
-    connectedCallback() {
-        this.classList.add(this.getAttribute("theme") || "theme-1");
-        this.#renderTabs();
-        this.shadowRoot.querySelectorAll('.tab-button').forEach(tab => {
-            tab.addEventListener('click', this.switchTabHandler);
-        });
-
-        const firstTab = this.shadowRoot.querySelector('.tab-button');
-        const firstContent = this.shadowRoot.querySelector('.tab-page');
-        if (firstTab && firstContent) {
-            firstTab.classList.add('active');
-            firstContent.classList.add('active');
-			setTimeout(() => {
-				this.shadowRoot.querySelector('.tab-pages').style.height = `${firstContent.scrollHeight}px`;
-			}, 100);
-            //this.shadowRoot.querySelector('.tab-pages').style.height = `${firstContent.scrollHeight}px`;
-			
-			console.log(firstContent.style.height, firstContent.scrollHeight);
-        }
-        
-        this.shadowRoot.querySelectorAll('.tab-page:not(.active)').forEach(el => { el.classList.add('exit-right'); });
-    }
-
-    #renderTabs() {
-        const tabs = this.shadowRoot.querySelector('.tabs');
-        const contents = this.shadowRoot.querySelector('.tab-pages');
-        const tabItems = this.querySelectorAll('nx-tab-page');
-
-        tabItems.forEach((item, index) => {
-            const tab = document.createElement('div');
-            tab.classList.add('tab-button');
-            tab.textContent = item.getAttribute('caption');
-            tab.setAttribute('data-target', `content${index}`);
-            tabs.appendChild(tab);
-
-            const content = document.createElement('div');
-            content.id = `content${index}`;
-            content.classList.add('tab-page');
-            content.innerHTML = item.innerHTML;
-            contents.appendChild(content);
-        });
-
-        tabItems.forEach((item) => {
-            item.remove();
-        });
-    }
-
-    #switchTab(event) {
-        const target = event.target;
-        if (!target.classList.contains('tab-button')) return;
-
-        const targetId = target.getAttribute('data-target');
-        const activeTab = this.shadowRoot.querySelector('.tab-button.active');
-        const activeContent = this.shadowRoot.querySelector('.tab-page.active');
-        const newContent = this.shadowRoot.getElementById(targetId);
-
-        if (activeTab === target) return; // 현재 탭을 클릭했을 때 아무런 변화가 없도록 함
-
-        if (activeTab && activeContent) {
-			activeTab.classList.remove('active');
-			activeContent.classList.remove('active','exit-left','exit-right');
-			//newContent.classList.remove('exit-left','exit-right');
-			activeContent.style.left = '';
-
-			if (activeTab.compareDocumentPosition(target) & Node.DOCUMENT_POSITION_FOLLOWING) {
-				activeContent.classList.add('exit-left');
-			} else {
-				activeContent.classList.add('exit-right');
-			}
-    //console.log(index);
-    //if (index == 1) return;
-
-			newContent.classList.add('active');
-			newContent.style.left = '';
-
-			newContent.classList.remove('exit-left','exit-right');
-        }
-
-        target.classList.add('active');
-        //newContent.classList.add('active');
-        this.shadowRoot.querySelector('.tab-pages').style.height = `${newContent.scrollHeight}px`;
-		
-		//console.log(newContent.style.height, newContent.scrollHeight);
-    }
-}
-
-class nxTabPage extends HTMLElement {
-    constructor() {
-        super();
-    }
-
-    connectedCallback() {
-        this.caption = this.getAttribute('caption');
-    }
-}
-
-customElements.define('nx-tab', nxTab);
-customElements.define('nx-tab-page', nxTabPage);
-
 class nxTest1 extends HTMLElement
 {
 	constructor() {
@@ -121045,6 +120848,144 @@ Array.prototype.nineBinarySearch = function(target)
 	return -1;
 };
 
+class nxTab extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        
+        this.shadowRoot.innerHTML = `
+            <style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTab.css";
+				${ninegrid.getCustomPath(this,"nxTab.css")}
+			</style>
+
+            <div class="tabs"></div>
+            <div class="tab-pages"></div>
+        `;
+        
+		//console.log(this.shadowRoot.querySelector('.tab-page'));
+		//this.shadowRoot.querySelector('.tab-pages').style.height = this.shadowRoot.querySelector('.tab-page').style.height;
+		
+        this.switchTabHandler = this.#switchTab.bind(this);
+    }
+
+    connectedCallback() {
+        this.classList.add(this.getAttribute("theme") || "theme-1");
+        this.#renderTabs();
+        this.shadowRoot.querySelectorAll('.tab-button').forEach(tab => {
+            tab.addEventListener('click', this.switchTabHandler);
+        });
+
+        const firstTab = this.shadowRoot.querySelector('.tab-button');
+        const firstContent = this.shadowRoot.querySelector('.tab-page');
+        if (firstTab && firstContent) {
+            firstTab.classList.add('active');
+            firstContent.classList.add('active');
+			setTimeout(() => {
+				this.shadowRoot.querySelector('.tab-pages').style.height = `${firstContent.scrollHeight}px`;
+			}, 100);
+            //this.shadowRoot.querySelector('.tab-pages').style.height = `${firstContent.scrollHeight}px`;
+			
+			console.log(firstContent.style.height, firstContent.scrollHeight);
+        }
+        
+        this.shadowRoot.querySelectorAll('.tab-page:not(.active)').forEach(el => { el.classList.add('exit-right'); });
+
+        this.#init();
+    }
+
+    #renderTabs() {
+        const tabs = this.shadowRoot.querySelector('.tabs');
+        const contents = this.shadowRoot.querySelector('.tab-pages');
+        const tabItems = this.querySelectorAll('nx-tab-page');
+
+        tabItems.forEach((item, index) => {
+            const tab = document.createElement('div');
+            tab.classList.add('tab-button');
+            tab.textContent = item.getAttribute('caption');
+            tab.setAttribute('data-target', `content${index}`);
+            tabs.appendChild(tab);
+
+            const content = document.createElement('div');
+            content.id = `content${index}`;
+            content.classList.add('tab-page');
+            content.innerHTML = item.innerHTML;
+            contents.appendChild(content);
+        });
+
+        tabItems.forEach((item) => {
+            item.remove();
+        });
+    }
+
+    #switchTab(event) {
+        const target = event.target;
+        if (!target.classList.contains('tab-button')) return;
+
+        const targetId = target.getAttribute('data-target');
+        const activeTab = this.shadowRoot.querySelector('.tab-button.active');
+        const activeContent = this.shadowRoot.querySelector('.tab-page.active');
+        const newContent = this.shadowRoot.getElementById(targetId);
+
+        if (activeTab === target) return; // 현재 탭을 클릭했을 때 아무런 변화가 없도록 함
+
+        if (activeTab && activeContent) {
+			activeTab.classList.remove('active');
+			activeContent.classList.remove('active','exit-left','exit-right');
+			//newContent.classList.remove('exit-left','exit-right');
+			activeContent.style.left = '';
+
+			if (activeTab.compareDocumentPosition(target) & Node.DOCUMENT_POSITION_FOLLOWING) {
+				activeContent.classList.add('exit-left');
+			} else {
+				activeContent.classList.add('exit-right');
+			}
+    //console.log(index);
+    //if (index == 1) return;
+
+			newContent.classList.add('active');
+			newContent.style.left = '';
+
+			newContent.classList.remove('exit-left','exit-right');
+        }
+
+        target.classList.add('active');
+        //newContent.classList.add('active');
+        this.shadowRoot.querySelector('.tab-pages').style.height = `${newContent.scrollHeight}px`;
+		
+		//console.log(newContent.style.height, newContent.scrollHeight);
+    };
+
+    #init = () => {
+        const observer = new MutationObserver(() => {
+            const activeContent = this.shadowRoot.querySelector('.tab-page.active');
+            if (activeContent) {
+                this.shadowRoot.querySelector('.tab-pages').style.height = `${activeContent.scrollHeight}px`;
+            }
+        });
+
+        const tabPages = this.shadowRoot.querySelector('.tab-pages');
+        observer.observe(tabPages, {
+            childList: true,
+            subtree: true,
+            characterData: true
+        });
+    };
+}
+
+class nxTabPage extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.caption = this.getAttribute('caption');
+    }
+}
+
+customElements.define('nx-tab', nxTab);
+customElements.define('nx-tab-page', nxTabPage);
+
 class nxSplitter extends HTMLElement {
 	#mode;
 
@@ -121210,7 +121151,6 @@ class nxSplitter extends HTMLElement {
 
 		// grip 이벤트 바인딩
 		this.shadowRoot.querySelectorAll(".grip-h,.grip-v").forEach(el => {
-			console.log(el);
 			el.addEventListener("mousedown", e => this.#startDrag(e));
 		});
 
@@ -121258,6 +121198,40 @@ class nxSplitter extends HTMLElement {
 
 customElements.define("nx-splitter", nxSplitter);
 
+class nxForm extends HTMLElement {
+	#mode;
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+	}
+
+	connectedCallback() {
+		this.#init();
+	}
+
+	#init = () => {
+
+		const contents = this.innerHTML.trim();
+
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxForm.css";
+				${ninegrid.getCustomPath(this,"nxForm.css")}
+			</style>
+			
+			${contents}
+		`;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+	};
+
+}
+
+customElements.define("nx-form", nxForm);
+
 class aiSettings extends HTMLElement
 {
 	constructor() {

package/dist/bundle.esm.js

@@ -120660,203 +120660,6 @@ class nxSpan extends HTMLElement
 
 customElements.define("nx-span", nxSpan);
 
-class nxTab extends HTMLElement {
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' });
-        
-        this.shadowRoot.innerHTML = `
-            <style>
-                :host(.theme-1) {
-					.tabs {
-                        --border-bottom: 1px solid #eee;
-                        gap: 3px;
-                    }
-                    .tab-button {
-						color: #666;
-                        font-weight: 500;
-						transform: translateY(1px);
-						z-index: 1;
-						--border-bottom: 1px solid #ccc;
-                    }
-					.tab-button.active {
-                        color: #666;
-                        font-weight: 700;
-                        border-bottom: 1px solid white;
-                    }
-					.tab-pages {
-                      border: 1px solid #ccc;
-                    }
-                }
-				
-                :host(.theme-2) {
-                    .tabs {
-                        border-bottom: 1px solid #eee;
-                        gap: 40px;
-                    }
-                    .tab-button {
-                        color: #666;
-                        font-weight: 500;
-                        border: none;
-                    }
-                    .tab-button.active {
-                        color: green;
-                        font-weight: 700;
-                        border-bottom: 3px solid green;
-                    }
-                }
-				
-                .tabs {
-                    display: flex;
-                      cursor: pointer;
-                      
-                    }
-                    .tab-button {
-                      padding: 8px;
-                      border: 1px solid #ccc;
-                      text-align: center;
-					  outline: 0;
-                    }
-                    .tab-button:hover {
-                      --filter: brightness(80%);
-                    }
-                    .tab-pages {
-                      position: relative;
-                      width: 100%;
-                      overflow: hidden;
-                      transition: height 0.5s ease-in-out;
-                    }
-                    .tab-page {
-                      position: absolute;
-                      width: 100%;
-                      top: 0;
-                      transition: left 0.5s ease-in-out;
-                      padding: 20px;
-                      box-sizing: border-box;
-                      white-space: nowrap;
-                          overflow: hidden;
-                          text-overflow: ellipsis;
-                        text-align: left;
-                    }
-                    .tab-page.active {
-                      left: 0;
-                    }
-                    .tab-page.exit-left {
-                      left: -100%;
-                    }
-                    .tab-page.exit-right {
-                      left: 100%;
-                    }
-            </style>
-            <div class="tabs"></div>
-            <div class="tab-pages"></div>
-        `;
-        
-		//console.log(this.shadowRoot.querySelector('.tab-page'));
-		//this.shadowRoot.querySelector('.tab-pages').style.height = this.shadowRoot.querySelector('.tab-page').style.height;
-		
-        this.switchTabHandler = this.#switchTab.bind(this);
-    }
-
-    connectedCallback() {
-        this.classList.add(this.getAttribute("theme") || "theme-1");
-        this.#renderTabs();
-        this.shadowRoot.querySelectorAll('.tab-button').forEach(tab => {
-            tab.addEventListener('click', this.switchTabHandler);
-        });
-
-        const firstTab = this.shadowRoot.querySelector('.tab-button');
-        const firstContent = this.shadowRoot.querySelector('.tab-page');
-        if (firstTab && firstContent) {
-            firstTab.classList.add('active');
-            firstContent.classList.add('active');
-			setTimeout(() => {
-				this.shadowRoot.querySelector('.tab-pages').style.height = `${firstContent.scrollHeight}px`;
-			}, 100);
-            //this.shadowRoot.querySelector('.tab-pages').style.height = `${firstContent.scrollHeight}px`;
-			
-			console.log(firstContent.style.height, firstContent.scrollHeight);
-        }
-        
-        this.shadowRoot.querySelectorAll('.tab-page:not(.active)').forEach(el => { el.classList.add('exit-right'); });
-    }
-
-    #renderTabs() {
-        const tabs = this.shadowRoot.querySelector('.tabs');
-        const contents = this.shadowRoot.querySelector('.tab-pages');
-        const tabItems = this.querySelectorAll('nx-tab-page');
-
-        tabItems.forEach((item, index) => {
-            const tab = document.createElement('div');
-            tab.classList.add('tab-button');
-            tab.textContent = item.getAttribute('caption');
-            tab.setAttribute('data-target', `content${index}`);
-            tabs.appendChild(tab);
-
-            const content = document.createElement('div');
-            content.id = `content${index}`;
-            content.classList.add('tab-page');
-            content.innerHTML = item.innerHTML;
-            contents.appendChild(content);
-        });
-
-        tabItems.forEach((item) => {
-            item.remove();
-        });
-    }
-
-    #switchTab(event) {
-        const target = event.target;
-        if (!target.classList.contains('tab-button')) return;
-
-        const targetId = target.getAttribute('data-target');
-        const activeTab = this.shadowRoot.querySelector('.tab-button.active');
-        const activeContent = this.shadowRoot.querySelector('.tab-page.active');
-        const newContent = this.shadowRoot.getElementById(targetId);
-
-        if (activeTab === target) return; // 현재 탭을 클릭했을 때 아무런 변화가 없도록 함
-
-        if (activeTab && activeContent) {
-			activeTab.classList.remove('active');
-			activeContent.classList.remove('active','exit-left','exit-right');
-			//newContent.classList.remove('exit-left','exit-right');
-			activeContent.style.left = '';
-
-			if (activeTab.compareDocumentPosition(target) & Node.DOCUMENT_POSITION_FOLLOWING) {
-				activeContent.classList.add('exit-left');
-			} else {
-				activeContent.classList.add('exit-right');
-			}
-    //console.log(index);
-    //if (index == 1) return;
-
-			newContent.classList.add('active');
-			newContent.style.left = '';
-
-			newContent.classList.remove('exit-left','exit-right');
-        }
-
-        target.classList.add('active');
-        //newContent.classList.add('active');
-        this.shadowRoot.querySelector('.tab-pages').style.height = `${newContent.scrollHeight}px`;
-		
-		//console.log(newContent.style.height, newContent.scrollHeight);
-    }
-}
-
-class nxTabPage extends HTMLElement {
-    constructor() {
-        super();
-    }
-
-    connectedCallback() {
-        this.caption = this.getAttribute('caption');
-    }
-}
-
-customElements.define('nx-tab', nxTab);
-customElements.define('nx-tab-page', nxTabPage);
-
 class nxTest1 extends HTMLElement
 {
 	constructor() {
@@ -121041,6 +120844,144 @@ Array.prototype.nineBinarySearch = function(target)
 	return -1;
 };
 
+class nxTab extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        
+        this.shadowRoot.innerHTML = `
+            <style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTab.css";
+				${ninegrid.getCustomPath(this,"nxTab.css")}
+			</style>
+
+            <div class="tabs"></div>
+            <div class="tab-pages"></div>
+        `;
+        
+		//console.log(this.shadowRoot.querySelector('.tab-page'));
+		//this.shadowRoot.querySelector('.tab-pages').style.height = this.shadowRoot.querySelector('.tab-page').style.height;
+		
+        this.switchTabHandler = this.#switchTab.bind(this);
+    }
+
+    connectedCallback() {
+        this.classList.add(this.getAttribute("theme") || "theme-1");
+        this.#renderTabs();
+        this.shadowRoot.querySelectorAll('.tab-button').forEach(tab => {
+            tab.addEventListener('click', this.switchTabHandler);
+        });
+
+        const firstTab = this.shadowRoot.querySelector('.tab-button');
+        const firstContent = this.shadowRoot.querySelector('.tab-page');
+        if (firstTab && firstContent) {
+            firstTab.classList.add('active');
+            firstContent.classList.add('active');
+			setTimeout(() => {
+				this.shadowRoot.querySelector('.tab-pages').style.height = `${firstContent.scrollHeight}px`;
+			}, 100);
+            //this.shadowRoot.querySelector('.tab-pages').style.height = `${firstContent.scrollHeight}px`;
+			
+			console.log(firstContent.style.height, firstContent.scrollHeight);
+        }
+        
+        this.shadowRoot.querySelectorAll('.tab-page:not(.active)').forEach(el => { el.classList.add('exit-right'); });
+
+        this.#init();
+    }
+
+    #renderTabs() {
+        const tabs = this.shadowRoot.querySelector('.tabs');
+        const contents = this.shadowRoot.querySelector('.tab-pages');
+        const tabItems = this.querySelectorAll('nx-tab-page');
+
+        tabItems.forEach((item, index) => {
+            const tab = document.createElement('div');
+            tab.classList.add('tab-button');
+            tab.textContent = item.getAttribute('caption');
+            tab.setAttribute('data-target', `content${index}`);
+            tabs.appendChild(tab);
+
+            const content = document.createElement('div');
+            content.id = `content${index}`;
+            content.classList.add('tab-page');
+            content.innerHTML = item.innerHTML;
+            contents.appendChild(content);
+        });
+
+        tabItems.forEach((item) => {
+            item.remove();
+        });
+    }
+
+    #switchTab(event) {
+        const target = event.target;
+        if (!target.classList.contains('tab-button')) return;
+
+        const targetId = target.getAttribute('data-target');
+        const activeTab = this.shadowRoot.querySelector('.tab-button.active');
+        const activeContent = this.shadowRoot.querySelector('.tab-page.active');
+        const newContent = this.shadowRoot.getElementById(targetId);
+
+        if (activeTab === target) return; // 현재 탭을 클릭했을 때 아무런 변화가 없도록 함
+
+        if (activeTab && activeContent) {
+			activeTab.classList.remove('active');
+			activeContent.classList.remove('active','exit-left','exit-right');
+			//newContent.classList.remove('exit-left','exit-right');
+			activeContent.style.left = '';
+
+			if (activeTab.compareDocumentPosition(target) & Node.DOCUMENT_POSITION_FOLLOWING) {
+				activeContent.classList.add('exit-left');
+			} else {
+				activeContent.classList.add('exit-right');
+			}
+    //console.log(index);
+    //if (index == 1) return;
+
+			newContent.classList.add('active');
+			newContent.style.left = '';
+
+			newContent.classList.remove('exit-left','exit-right');
+        }
+
+        target.classList.add('active');
+        //newContent.classList.add('active');
+        this.shadowRoot.querySelector('.tab-pages').style.height = `${newContent.scrollHeight}px`;
+		
+		//console.log(newContent.style.height, newContent.scrollHeight);
+    };
+
+    #init = () => {
+        const observer = new MutationObserver(() => {
+            const activeContent = this.shadowRoot.querySelector('.tab-page.active');
+            if (activeContent) {
+                this.shadowRoot.querySelector('.tab-pages').style.height = `${activeContent.scrollHeight}px`;
+            }
+        });
+
+        const tabPages = this.shadowRoot.querySelector('.tab-pages');
+        observer.observe(tabPages, {
+            childList: true,
+            subtree: true,
+            characterData: true
+        });
+    };
+}
+
+class nxTabPage extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.caption = this.getAttribute('caption');
+    }
+}
+
+customElements.define('nx-tab', nxTab);
+customElements.define('nx-tab-page', nxTabPage);
+
 class nxSplitter extends HTMLElement {
 	#mode;
 
@@ -121206,7 +121147,6 @@ class nxSplitter extends HTMLElement {
 
 		// grip 이벤트 바인딩
 		this.shadowRoot.querySelectorAll(".grip-h,.grip-v").forEach(el => {
-			console.log(el);
 			el.addEventListener("mousedown", e => this.#startDrag(e));
 		});
 
@@ -121254,6 +121194,40 @@ class nxSplitter extends HTMLElement {
 
 customElements.define("nx-splitter", nxSplitter);
 
+class nxForm extends HTMLElement {
+	#mode;
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+	}
+
+	connectedCallback() {
+		this.#init();
+	}
+
+	#init = () => {
+
+		const contents = this.innerHTML.trim();
+
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxForm.css";
+				${ninegrid.getCustomPath(this,"nxForm.css")}
+			</style>
+			
+			${contents}
+		`;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+	};
+
+}
+
+customElements.define("nx-form", nxForm);
+
 class aiSettings extends HTMLElement
 {
 	constructor() {

package/dist/index.js

@@ -93,7 +93,6 @@ import "./etc/nxI18nExt.js";
 import "./etc/nxSidebar.js";
 import "./etc/nxSideMenu.js";
 import "./etc/nxSpan.js";
-import "./etc/nxTab.js";
 import "./etc/nxTest.js";
 import "./etc/nxTopMenu.js";
 //import "./etc/object-observe.js";
@@ -101,8 +100,9 @@ import "./etc/nxTopMenu.js";
 import "./utils/ngFiltering.js";
 import "./utils/ngPrototype.js";
 
+import "./nx/nxTab.js";
 import "./nx/nxSplitter.js";
-
+import "./nx/nxForm.js";
 
 import "./ai/aiSettings.js";
 import "./ai/aiMessage.js";

package/dist/nx/nxForm.js

@@ -0,0 +1,35 @@
+import ninegrid from "../index.js";
+
+class nxForm extends HTMLElement {
+	#mode;
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+	}
+
+	connectedCallback() {
+		this.#init();
+	}
+
+	#init = () => {
+
+		const contents = this.innerHTML.trim();
+
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxForm.css";
+				${ninegrid.getCustomPath(this,"nxForm.css")}
+			</style>
+			
+			${contents}
+		`;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+	};
+
+}
+
+customElements.define("nx-form", nxForm);

package/dist/nx/nxSplitter.js

@@ -165,7 +165,6 @@ class nxSplitter extends HTMLElement {
 
 		// grip 이벤트 바인딩
 		this.shadowRoot.querySelectorAll(".grip-h,.grip-v").forEach(el => {
-			console.log(el);
 			el.addEventListener("mousedown", e => this.#startDrag(e));
 		});
 

package/{src/etc → dist/nx}/nxTab.js

@@ -7,87 +7,10 @@ class nxTab extends HTMLElement {
         
         this.shadowRoot.innerHTML = `
             <style>
-                :host(.theme-1) {
-					.tabs {
-                        --border-bottom: 1px solid #eee;
-                        gap: 3px;
-                    }
-                    .tab-button {
-						color: #666;
-                        font-weight: 500;
-						transform: translateY(1px);
-						z-index: 1;
-						--border-bottom: 1px solid #ccc;
-                    }
-					.tab-button.active {
-                        color: #666;
-                        font-weight: 700;
-                        border-bottom: 1px solid white;
-                    }
-					.tab-pages {
-                      border: 1px solid #ccc;
-                    }
-                }
-				
-                :host(.theme-2) {
-                    .tabs {
-                        border-bottom: 1px solid #eee;
-                        gap: 40px;
-                    }
-                    .tab-button {
-                        color: #666;
-                        font-weight: 500;
-                        border: none;
-                    }
-                    .tab-button.active {
-                        color: green;
-                        font-weight: 700;
-                        border-bottom: 3px solid green;
-                    }
-                }
-				
-                .tabs {
-                    display: flex;
-                      cursor: pointer;
-                      
-                    }
-                    .tab-button {
-                      padding: 8px;
-                      border: 1px solid #ccc;
-                      text-align: center;
-					  outline: 0;
-                    }
-                    .tab-button:hover {
-                      --filter: brightness(80%);
-                    }
-                    .tab-pages {
-                      position: relative;
-                      width: 100%;
-                      overflow: hidden;
-                      transition: height 0.5s ease-in-out;
-                    }
-                    .tab-page {
-                      position: absolute;
-                      width: 100%;
-                      top: 0;
-                      transition: left 0.5s ease-in-out;
-                      padding: 20px;
-                      box-sizing: border-box;
-                      white-space: nowrap;
-                          overflow: hidden;
-                          text-overflow: ellipsis;
-                        text-align: left;
-                    }
-                    .tab-page.active {
-                      left: 0;
-                    }
-                    .tab-page.exit-left {
-                      left: -100%;
-                    }
-                    .tab-page.exit-right {
-                      left: 100%;
-                    }
-            </style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTab.css";
+				${ninegrid.getCustomPath(this,"nxTab.css")}
+			</style>
+
             <div class="tabs"></div>
             <div class="tab-pages"></div>
         `;
@@ -119,6 +42,8 @@ class nxTab extends HTMLElement {
         }
         
         this.shadowRoot.querySelectorAll('.tab-page:not(.active)').forEach(el => { el.classList.add('exit-right') });
+
+        this.#init();
     }
 
     #renderTabs() {
@@ -181,7 +106,23 @@ class nxTab extends HTMLElement {
         this.shadowRoot.querySelector('.tab-pages').style.height = `${newContent.scrollHeight}px`;
 		
 		//console.log(newContent.style.height, newContent.scrollHeight);
-    }
+    };
+
+    #init = () => {
+        const observer = new MutationObserver(() => {
+            const activeContent = this.shadowRoot.querySelector('.tab-page.active');
+            if (activeContent) {
+                this.shadowRoot.querySelector('.tab-pages').style.height = `${activeContent.scrollHeight}px`;
+            }
+        });
+
+        const tabPages = this.shadowRoot.querySelector('.tab-pages');
+        observer.observe(tabPages, {
+            childList: true,
+            subtree: true,
+            characterData: true
+        });
+    };
 }
 
 class nxTabPage extends HTMLElement {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ninegrid2",
   "type": "module",
-  "version": "6.727.0",
+  "version": "6.729.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/index.js

@@ -93,7 +93,6 @@ import "./etc/nxI18nExt.js";
 import "./etc/nxSidebar.js";
 import "./etc/nxSideMenu.js";
 import "./etc/nxSpan.js";
-import "./etc/nxTab.js";
 import "./etc/nxTest.js";
 import "./etc/nxTopMenu.js";
 //import "./etc/object-observe.js";
@@ -101,8 +100,9 @@ import "./etc/nxTopMenu.js";
 import "./utils/ngFiltering.js";
 import "./utils/ngPrototype.js";
 
+import "./nx/nxTab.js";
 import "./nx/nxSplitter.js";
-
+import "./nx/nxForm.js";
 
 import "./ai/aiSettings.js";
 import "./ai/aiMessage.js";

package/src/nx/nxForm.js

@@ -0,0 +1,35 @@
+import ninegrid from "../index.js";
+
+class nxForm extends HTMLElement {
+	#mode;
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+	}
+
+	connectedCallback() {
+		this.#init();
+	}
+
+	#init = () => {
+
+		const contents = this.innerHTML.trim();
+
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxForm.css";
+				${ninegrid.getCustomPath(this,"nxForm.css")}
+			</style>
+			
+			${contents}
+		`;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+	};
+
+}
+
+customElements.define("nx-form", nxForm);

package/src/nx/nxSplitter.js

@@ -165,7 +165,6 @@ class nxSplitter extends HTMLElement {
 
 		// grip 이벤트 바인딩
 		this.shadowRoot.querySelectorAll(".grip-h,.grip-v").forEach(el => {
-			console.log(el);
 			el.addEventListener("mousedown", e => this.#startDrag(e));
 		});
 

package/src/nx/nxTab.js

@@ -0,0 +1,139 @@
+import ninegrid from "../index.js";
+
+class nxTab extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        
+        this.shadowRoot.innerHTML = `
+            <style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTab.css";
+				${ninegrid.getCustomPath(this,"nxTab.css")}
+			</style>
+
+            <div class="tabs"></div>
+            <div class="tab-pages"></div>
+        `;
+        
+		//console.log(this.shadowRoot.querySelector('.tab-page'));
+		//this.shadowRoot.querySelector('.tab-pages').style.height = this.shadowRoot.querySelector('.tab-page').style.height;
+		
+        this.switchTabHandler = this.#switchTab.bind(this);
+    }
+
+    connectedCallback() {
+        this.classList.add(this.getAttribute("theme") || "theme-1");
+        this.#renderTabs();
+        this.shadowRoot.querySelectorAll('.tab-button').forEach(tab => {
+            tab.addEventListener('click', this.switchTabHandler);
+        });
+
+        const firstTab = this.shadowRoot.querySelector('.tab-button');
+        const firstContent = this.shadowRoot.querySelector('.tab-page');
+        if (firstTab && firstContent) {
+            firstTab.classList.add('active');
+            firstContent.classList.add('active');
+			setTimeout(() => {
+				this.shadowRoot.querySelector('.tab-pages').style.height = `${firstContent.scrollHeight}px`;
+			}, 100);
+            //this.shadowRoot.querySelector('.tab-pages').style.height = `${firstContent.scrollHeight}px`;
+			
+			console.log(firstContent.style.height, firstContent.scrollHeight);
+        }
+        
+        this.shadowRoot.querySelectorAll('.tab-page:not(.active)').forEach(el => { el.classList.add('exit-right') });
+
+        this.#init();
+    }
+
+    #renderTabs() {
+        const tabs = this.shadowRoot.querySelector('.tabs');
+        const contents = this.shadowRoot.querySelector('.tab-pages');
+        const tabItems = this.querySelectorAll('nx-tab-page');
+
+        tabItems.forEach((item, index) => {
+            const tab = document.createElement('div');
+            tab.classList.add('tab-button');
+            tab.textContent = item.getAttribute('caption');
+            tab.setAttribute('data-target', `content${index}`);
+            tabs.appendChild(tab);
+
+            const content = document.createElement('div');
+            content.id = `content${index}`;
+            content.classList.add('tab-page');
+            content.innerHTML = item.innerHTML;
+            contents.appendChild(content);
+        });
+
+        tabItems.forEach((item) => {
+            item.remove();
+        });
+    }
+
+    #switchTab(event) {
+        const target = event.target;
+        if (!target.classList.contains('tab-button')) return;
+
+        const targetId = target.getAttribute('data-target');
+        const activeTab = this.shadowRoot.querySelector('.tab-button.active');
+        const activeContent = this.shadowRoot.querySelector('.tab-page.active');
+        const newContent = this.shadowRoot.getElementById(targetId);
+
+        if (activeTab === target) return; // 현재 탭을 클릭했을 때 아무런 변화가 없도록 함
+
+        if (activeTab && activeContent) {
+			activeTab.classList.remove('active');
+			activeContent.classList.remove('active','exit-left','exit-right');
+			//newContent.classList.remove('exit-left','exit-right');
+			activeContent.style.left = '';
+
+			if (activeTab.compareDocumentPosition(target) & Node.DOCUMENT_POSITION_FOLLOWING) {
+				activeContent.classList.add('exit-left');
+			} else {
+				activeContent.classList.add('exit-right');
+			}
+    //console.log(index);
+    //if (index == 1) return;
+
+			newContent.classList.add('active');
+			newContent.style.left = '';
+
+			newContent.classList.remove('exit-left','exit-right');
+        }
+
+        target.classList.add('active');
+        //newContent.classList.add('active');
+        this.shadowRoot.querySelector('.tab-pages').style.height = `${newContent.scrollHeight}px`;
+		
+		//console.log(newContent.style.height, newContent.scrollHeight);
+    };
+
+    #init = () => {
+        const observer = new MutationObserver(() => {
+            const activeContent = this.shadowRoot.querySelector('.tab-page.active');
+            if (activeContent) {
+                this.shadowRoot.querySelector('.tab-pages').style.height = `${activeContent.scrollHeight}px`;
+            }
+        });
+
+        const tabPages = this.shadowRoot.querySelector('.tab-pages');
+        observer.observe(tabPages, {
+            childList: true,
+            subtree: true,
+            characterData: true
+        });
+    };
+}
+
+class nxTabPage extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.caption = this.getAttribute('caption');
+    }
+}
+
+customElements.define('nx-tab', nxTab);
+customElements.define('nx-tab-page', nxTabPage);