gnui 1.2.20 → 1.2.21

package/styleguide/category/COMPONENT/Loader(js)/index.html

@@ -304,7 +304,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/MenuButton(js)/index.html

@@ -489,7 +489,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Message(js)/index.html

@@ -507,7 +507,7 @@ Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur.
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Modal(js)/index.html

@@ -206,10 +206,12 @@
 
   <button class="gn-button new-modal">Modal 예제보기</button>
   <button class="gn-button new-popup">Popup 예제보기</button>
+  <button class="gn-button new-modal-extra">Modal(Extra) 예제보기</button>
 </div>
 
 <pre><code class="language-ejs">  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button new-modal<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Modal 예제보기<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button new-popup<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Popup 예제보기<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button new-modal-extra<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Modal(Extra) 예제보기<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
 </code></pre>
 <pre><code>  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'button'</span><span class="token punctuation" >,</span> {
     target<span class="token punctuation" >:</span> <span class="token string" >'.new-modal'</span><span class="token punctuation" >,</span>
@@ -270,6 +272,23 @@
       }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
     }
   }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+  Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'button'</span><span class="token punctuation" >,</span> {
+    target<span class="token punctuation" >:</span> <span class="token string" >'.new-modal-extra'</span><span class="token punctuation" >,</span>
+    onClick<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span><span class="token punctuation" >)</span> {
+      Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'modal'</span><span class="token punctuation" >,</span> {
+        textSets<span class="token punctuation" >:</span> { title<span class="token punctuation" >:</span> <span class="token string" >'Extra Buttons Demo'</span> }<span class="token punctuation" >,</span>
+        hasCancel<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+        height<span class="token punctuation" >:</span> <span class="token number" >400</span><span class="token punctuation" >,</span>
+        extraButtons<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+          { key<span class="token punctuation" >:</span> <span class="token string" >'edit-template'</span><span class="token punctuation" >,</span> label<span class="token punctuation" >:</span> <span class="token string" >'수정(템플릿만적용)'</span><span class="token punctuation" >,</span> className<span class="token punctuation" >:</span> <span class="token string" >'is-small is-primary'</span> }<span class="token punctuation" >,</span>
+          { key<span class="token punctuation" >:</span> <span class="token string" >'edit-bulk'</span><span class="token punctuation" >,</span> label<span class="token punctuation" >:</span> <span class="token string" >'수정(용도일괄적용)'</span><span class="token punctuation" >,</span> className<span class="token punctuation" >:</span> <span class="token string" >'is-small is-mono'</span> }
+        <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+        onExtra<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>actionKey<span class="token punctuation" >)</span> {
+          console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'extra clicked:'</span><span class="token punctuation" >,</span> actionKey<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+        }
+      }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
+    }
+  }<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
 </code></pre><table class="gn-table is-full is-border">
   <thead>
     <th colspan="2">name</th>
@@ -357,6 +376,12 @@
       <td>false</td>
       <td>취소버튼 출력 여부</td>
     </tr>
+    <tr>
+      <td colspan="2">extraButtons</td>
+      <td>array</td>
+      <td>[]</td>
+      <td>푸터에 커스텀 버튼을 추가한다. 예) [&#123; key:&#39;apply&#39;, label:&#39;적용&#39;, className:&#39;is-small is-primary&#39; &#125;]</td>
+    </tr>
     <tr>
       <td colspan="2">contents</td>
       <td>string|HTMLElement</td>
@@ -427,6 +452,11 @@
       <td>void</td>
       <td>modal 창을 포커스한다.</td>
     </tr>
+    <tr>
+      <td>onExtra()</td>
+      <td>void</td>
+      <td>커스텀 버튼 클릭 시 수행될 이벤트. 매개변수로 actionKey를 전달한다.</td>
+    </tr>
   </tbody>
 </table>
 
@@ -436,7 +466,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Pagination(js)/index.html

@@ -437,7 +437,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Panel/index.html

@@ -318,7 +318,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Progressbar(js)/index.html

@@ -305,7 +305,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Tab(js)/index.html

@@ -465,7 +465,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Tagcloud(js)/index.html

@@ -252,7 +252,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Tooltip(js)/index.html

@@ -404,7 +404,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Tree(js)/index.html

@@ -147,6 +147,7 @@
   <div class="new-tree1"></div>
   <div class="new-tree2"></div>
   <div class="new-tree3"></div>
+  <div class="new-tree4"></div>
 </div>
 </div>
 
@@ -154,6 +155,7 @@
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-tree1<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-tree2<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-tree3<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-tree4<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 </code></pre>
 <pre><code>Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'tree'</span><span class="token punctuation" >,</span> {
@@ -165,7 +167,7 @@
         }<span class="token punctuation" >,</span>{
           text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span>
         }<span class="token punctuation" >,</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI components'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNConfEngine'</span>
         }<span class="token punctuation" >]</span>
       }<span class="token punctuation" >,</span>{
         text<span class="token punctuation" >:</span> <span class="token string" >'R&amp;D Center'</span><span class="token punctuation" >,</span>
@@ -174,7 +176,7 @@
         }<span class="token punctuation" >,</span>{
           text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span>
         }<span class="token punctuation" >,</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI components'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNConfEngine'</span>
         }<span class="token punctuation" >]</span>
       }<span class="token punctuation" >,</span>{
         text<span class="token punctuation" >:</span> <span class="token string" >'Front-end'</span>
@@ -190,7 +192,7 @@
         }<span class="token punctuation" >,</span>{
           text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span>
         }<span class="token punctuation" >,</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI components'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNConfEngine'</span>
         }<span class="token punctuation" >]</span>
       }<span class="token punctuation" >,</span>{
         text<span class="token punctuation" >:</span> <span class="token string" >'R&amp;D Center'</span><span class="token punctuation" >,</span>
@@ -199,43 +201,83 @@
         }<span class="token punctuation" >,</span>{
           text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span>
         }<span class="token punctuation" >,</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI components'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNConfEngine'</span>
         }<span class="token punctuation" >]</span>
       }<span class="token punctuation" >,</span>{
         text<span class="token punctuation" >:</span> <span class="token string" >'Front-end'</span>
       }<span class="token punctuation" >]</span><span class="token punctuation" >,</span>
       color<span class="token punctuation" >:</span> <span class="token string" >'success'</span><span class="token punctuation" >,</span>
-      multiple<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+      hasCheck<span class="token punctuation" >:</span> <span class="token boolean" >false</span>
     }<span class="token punctuation" >)</span>
     Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'tree'</span><span class="token punctuation" >,</span> {
       target<span class="token punctuation" >:</span> <span class="token string" >'.new-tree3'</span><span class="token punctuation" >,</span>
       data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
         text<span class="token punctuation" >:</span> <span class="token string" >'Genians'</span><span class="token punctuation" >,</span>
-        selected<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+        value<span class="token punctuation" >:</span> <span class="token string" >'genians'</span><span class="token punctuation" >,</span>
         actived<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
         opened<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
         child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI'</span><span class="token punctuation" >,</span>
+          value<span class="token punctuation" >:</span> <span class="token string" >'gnui'</span>
         }<span class="token punctuation" >,</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span><span class="token punctuation" >,</span>
+          value<span class="token punctuation" >:</span> <span class="token string" >'gnui-core'</span><span class="token punctuation" >,</span>
+          opened<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+          child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
+            text<span class="token punctuation" >:</span> <span class="token string" >'GNUI'</span><span class="token punctuation" >,</span>
+            value<span class="token punctuation" >:</span> <span class="token string" >'gnui-nested'</span>
+          }<span class="token punctuation" >,</span>{
+            text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span><span class="token punctuation" >,</span>
+            value<span class="token punctuation" >:</span> <span class="token string" >'gnui-core-nested'</span>
+          }<span class="token punctuation" >,</span>{
+            text<span class="token punctuation" >:</span> <span class="token string" >'GNConfEngine'</span><span class="token punctuation" >,</span>
+            value<span class="token punctuation" >:</span> <span class="token string" >'gnconfengine-nested'</span><span class="token punctuation" >,</span>
+            selected<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+          }<span class="token punctuation" >]</span>
         }<span class="token punctuation" >,</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI components'</span><span class="token punctuation" >,</span>
-          selected<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNConfEngine'</span><span class="token punctuation" >,</span>
+          value<span class="token punctuation" >:</span> <span class="token string" >'gnconfengine'</span>
         }<span class="token punctuation" >]</span>
       }<span class="token punctuation" >,</span>{
         text<span class="token punctuation" >:</span> <span class="token string" >'R&amp;D Center'</span><span class="token punctuation" >,</span>
+        value<span class="token punctuation" >:</span> <span class="token string" >'rnd-center'</span><span class="token punctuation" >,</span>
         child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI'</span><span class="token punctuation" >,</span>
+          value<span class="token punctuation" >:</span> <span class="token string" >'rnd-gnui'</span>
         }<span class="token punctuation" >,</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI core'</span><span class="token punctuation" >,</span>
+          value<span class="token punctuation" >:</span> <span class="token string" >'rnd-gnui-core'</span>
         }<span class="token punctuation" >,</span>{
-          text<span class="token punctuation" >:</span> <span class="token string" >'GNUI components'</span>
+          text<span class="token punctuation" >:</span> <span class="token string" >'GNConfEngine'</span><span class="token punctuation" >,</span>
+          value<span class="token punctuation" >:</span> <span class="token string" >'rnd-gnconfengine'</span>
         }<span class="token punctuation" >]</span>
       }<span class="token punctuation" >,</span>{
-        text<span class="token punctuation" >:</span> <span class="token string" >'Front-end'</span>
+        text<span class="token punctuation" >:</span> <span class="token string" >'Front-end'</span><span class="token punctuation" >,</span>
+        value<span class="token punctuation" >:</span> <span class="token string" >'frontend'</span>
       }<span class="token punctuation" >]</span><span class="token punctuation" >,</span>
       hasCheck<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
     }<span class="token punctuation" >)</span>
+    Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'tree'</span><span class="token punctuation" >,</span> {
+      target<span class="token punctuation" >:</span> <span class="token string" >'.new-tree4'</span><span class="token punctuation" >,</span>
+      data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
+        text<span class="token punctuation" >:</span> <span class="token string" >'Disabled Root'</span><span class="token punctuation" >,</span>
+        value<span class="token punctuation" >:</span> <span class="token string" >'disabled-root'</span><span class="token punctuation" >,</span>
+        opened<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+        child<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>{
+          text<span class="token punctuation" >:</span> <span class="token string" >'Locked Node'</span><span class="token punctuation" >,</span>
+          value<span class="token punctuation" >:</span> <span class="token string" >'locked-node'</span><span class="token punctuation" >,</span>
+          selected<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+        }<span class="token punctuation" >,</span>{
+          text<span class="token punctuation" >:</span> <span class="token string" >'Review Only'</span><span class="token punctuation" >,</span>
+          value<span class="token punctuation" >:</span> <span class="token string" >'review-only'</span>
+        }<span class="token punctuation" >]</span>
+      }<span class="token punctuation" >,</span>{
+        text<span class="token punctuation" >:</span> <span class="token string" >'Disabled Leaf'</span><span class="token punctuation" >,</span>
+        value<span class="token punctuation" >:</span> <span class="token string" >'disabled-leaf'</span>
+      }<span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+      hasCheck<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+      disabled<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
+    }<span class="token punctuation" >)</span>
 </code></pre><table class="gn-table is-full is-border">
   <thead>
     <th colspan="2">name</th>
@@ -256,10 +298,11 @@
       <td></td>
       <td>{key: value}로 이루어진 데이터
       <br><b>text</b>: 메뉴명
+      <br><b>value</b>: 노드 식별 값
       <br><b>selected</b>: true 인 경우 체크박스 체크된 상태로 표시
       <br><b>opened</b>: true 인 경우 하위항목이 열린상태로 표시
       <br><b>actived</b>: true 인 경우 선택된 상태로 표시
-      <br><b>disabled</b>: true 인 경우 선택할 수 없는 항목으로 표시
+      <br><b>disabled</b>: true 인 경우 해당 노드 선택·체크 불가
       <br><b>icon</b>: 기본 트리 아이콘이 있는 경우(showIcon: true) HTMLElement String 을 통해 사용자 정의 아이콘으로 변경
       <br><b>hideIcon</b>: 기본 트리 아이콘이 있는 경우(showIcon: true) 아이콘 숨김 처리</td></td>
     </tr>
@@ -300,10 +343,10 @@
       <td>하위 항목 선택 시 상위항목 자동선택 여부</td>
     </tr>
     <tr>
-      <td colspan="2">multiple</td>
+      <td colspan="2">checkChild</td>
       <td>boolean</td>
-      <td>false</td>
-      <td>다중선택 가능여부</td>
+      <td>true</td>
+      <td>부모 항목 선택 시 하위항목 자동선택 여부</td>
     </tr>
     <tr>
       <td colspan="2">showIcon</td>
@@ -311,6 +354,12 @@
       <td>false</td>
       <td>메뉴명 앞 아이콘 표시 여부</td>
     </tr>
+    <tr>
+      <td colspan="2">disabled</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>true 인 경우 초기 렌더 시 전체 트리가 비활성화되며(is-disabled), 선택/체크 상호작용은 불가하지만 토글러를 통한 확장/축소는 가능</td>
+    </tr>
     <tr>
       <td colspan="2">onSelect</td>
       <td>function</td>
@@ -382,6 +431,11 @@
       <td>void</td>
       <td>모든 노드의 체크를 해제한다. <b>hasCheck: true</b>일 때만 유효하며, 그 외에는 no-op이다.</td>
     </tr>
+    <tr>
+      <td>setChecked(targets: string | string[], checked: boolean)</td>
+      <td>void</td>
+      <td>전달한 단일 또는 복수 노드를 체크/해제한다. 노드 식별은 <b>value</b>로만 수행하며, 대상 노드에는 고유한 <b>value</b>가 필요하다. <b>hasCheck: true</b>일 때만 유효하다.</td>
+    </tr>
     <tr>
       <td>getChecked(withStatus: Boolean = false)</td>
       <td>array</td>
@@ -403,6 +457,16 @@
       <td>any</td>
       <td>keyword를 포함한 아이템만 표시한다</td>
     </tr>
+    <tr>
+      <td>disable()</td>
+      <td>void</td>
+      <td>트리 컴포넌트 전체를 비활성화한다.</td>
+    </tr>
+    <tr>
+      <td>enable()</td>
+      <td>void</td>
+      <td>트리 컴포넌트 전체를 활성화한다.</td>
+    </tr>
   </tbody>
 </table>
 
@@ -411,7 +475,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/CONTROLS/Button(js)/index.html

@@ -457,7 +457,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/CONTROLS/Checkbox/index.html

@@ -186,7 +186,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/CONTROLS/Colorpicker(js)/index.html

@@ -277,7 +277,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/CONTROLS/Datepicker(js)/index.html

@@ -321,7 +321,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/CONTROLS/Dropdown(js)/index.html

@@ -1161,7 +1161,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/CONTROLS/File/index.html

@@ -304,7 +304,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/CONTROLS/Form/Control/index.html

@@ -219,7 +219,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/CONTROLS/Form/Field/index.html

@@ -239,6 +239,58 @@
     <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-plain is-full<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>gnui-guide.png<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+</code></pre>
+<h3 id="label-">Label 정렬 및 너비 조절 (가로 정렬일 때)</h3>
+<ul>
+<li>Label에 UTILITY의 텍스트 정렬 클래스(<code>has-text-left</code>, <code>has-text-right</code>, <code>has-text-center</code>)를 적용하여 정렬 변경 가능</li>
+<li>Label에 Grid의 사이즈 클래스(<code>is-1</code> ~ <code>is-12</code>)를 적용하여 너비 조절 가능</li>
+</ul>
+<div class="aigis-preview">
+  <!-- Label 왼쪽 정렬 -->
+<div class="gn-field">
+    <div class="gn-label has-text-left">이름</div>
+    <div class="gn-control">
+        <input class="gn-input" placeholder="input name">
+    </div>
+</div>
+<!-- Label 너비 조절 (Grid 사이즈 클래스 사용) -->
+<div class="gn-field">
+    <div class="gn-label is-3">다국어용 긴 레이블 텍스트</div>
+    <div class="gn-control">
+        <input class="gn-input" placeholder="input name">
+    </div>
+</div>
+<!-- Label 왼쪽 정렬 + 너비 조절 조합 -->
+<div class="gn-field">
+    <div class="gn-label has-text-left is-4">다국어용 매우 긴 레이블 텍스트</div>
+    <div class="gn-control">
+        <input class="gn-input" placeholder="input name">
+    </div>
+</div></div>
+
+<pre><code class="language-html"><span class="token comment" spellcheck="true">&lt;!-- Label 왼쪽 정렬 --></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-field<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-label has-text-left<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>이름<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-control<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-input<span class="token punctuation" >"</span></span> <span class="token attr-name" >placeholder</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>input name<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+
+<span class="token comment" spellcheck="true">&lt;!-- Label 너비 조절 (Grid 사이즈 클래스 사용) --></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-field<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-label is-3<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>다국어용 긴 레이블 텍스트<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-control<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-input<span class="token punctuation" >"</span></span> <span class="token attr-name" >placeholder</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>input name<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+
+<span class="token comment" spellcheck="true">&lt;!-- Label 왼쪽 정렬 + 너비 조절 조합 --></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-field<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-label has-text-left is-4<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>다국어용 매우 긴 레이블 텍스트<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-control<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-input<span class="token punctuation" >"</span></span> <span class="token attr-name" >placeholder</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>input name<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 </code></pre>
 
   </div>
@@ -246,7 +298,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/CONTROLS/Form/Plain/index.html

@@ -185,7 +185,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/CONTROLS/Input/index.html

@@ -322,7 +322,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>