@iyulab/components 0.1.10 → 0.1.11

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.1.11 (2026-01-06)
+- Fixed d.ts generation error for `Theme` class by exporting the class
+- Fixed `UTreeItem.childrenItems` accessibility for `UTree` component
+  - Changed private field to public readonly getter for d.ts compatibility
+- Fixed `UTree.getAllTreeItems` parameter type to accept readonly arrays
+
 ## 0.1.10 (2025-12-19)
 - Fixed circular dependency issue between `UMenu` and `UMenuItem`
 - Changed `UMenuItem` to use tagName check instead of `instanceof` for submenu detection

package/dist/components/FloatingElement.js

@@ -55,8 +55,8 @@ class FloatingElement extends BaseElement {
   updated(changedProperties) {
     super.updated(changedProperties);
     if (changedProperties.has("visible")) {
-      this.toggleAttribute("inert", !this.visible);
       this.toggleAttribute("aria-hidden", !this.visible);
+      this.toggleAttribute("inert", !this.visible);
       this.updateVisibleState(this.visible);
     }
   }

package/dist/components/FloatingElement.styles.js

@@ -7,15 +7,11 @@ const styles = css`
     top: 0;
     left: 0;
     width: max-content;
-
     opacity: 0;
-    pointer-events: none;
   }
   :host([visible]) {
     opacity: 1;
-    pointer-events: auto;
   }
-
   :host([strategy="absolute"]) {
     position: absolute;
   }

package/dist/components/divider/UDivider.component.d.ts

@@ -1,25 +1,10 @@
-import { nothing } from 'lit';
 import { BaseElement } from '../BaseElement.js';
 /**
- * Divider 컴포넌트는 엘리먼트 사이에 움직임이 가능한 구분선을 제공합니다.
+ * Divider 컴포넌트는 엘리먼트 사이에 구분선을 제공합니다.
  */
 export declare class UDivider extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
-    /** 마지막 마우스 포인터 위치를 저장합니다. */
-    private prevPointerPosition;
-    /** 분할선이 움직이는지 여부를 나타냅니다. */
-    moving: boolean;
-    /** 분할 방향을 설정합니다. */
-    orientation: 'horizontal' | 'vertical';
-    /** 분할선을 움직일 수 있는지 여부를 설정합니다. */
-    movable: boolean;
-    disconnectedCallback(): void;
-    render(): typeof nothing | import('lit-html').TemplateResult<1>;
-    /** 마우스 다운 이벤트 핸들러 */
-    private handleMousedown;
-    /** 마우스 무브 이벤트 핸들러 */
-    private handleMousemove;
-    /** 마우스 업 이벤트 핸들러 */
-    private handleMouseup;
+    /** 수직 방향 여부를 설정합니다. (기본값: 수평) */
+    vertical: boolean;
 }

package/dist/components/divider/UDivider.component.js

@@ -1,5 +1,4 @@
-import { html, nothing } from 'lit';
-import { state, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { BaseElement } from '../BaseElement.js';
 import { styles } from './UDivider.styles.js';
 
@@ -15,41 +14,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 class UDivider extends BaseElement {
   constructor() {
     super(...arguments);
-    /** 마지막 마우스 포인터 위치를 저장합니다. */
-    this.prevPointerPosition = 0;
-    this.moving = false;
-    this.orientation = "horizontal";
-    this.movable = false;
-    /** 마우스 다운 이벤트 핸들러 */
-    this.handleMousedown = (e) => {
-      e.preventDefault();
-      this.moving = true;
-      this.prevPointerPosition = this.orientation === "horizontal" ? e.clientX : e.clientY;
-      this.emit("u-movestart");
-      document.addEventListener("mousemove", this.handleMousemove);
-      document.addEventListener("mouseup", this.handleMouseup);
-      document.body.style.userSelect = "none";
-      document.body.style.cursor = this.orientation === "horizontal" ? "col-resize" : "row-resize";
-    };
-    /** 마우스 무브 이벤트 핸들러 */
-    this.handleMousemove = (e) => {
-      if (!this.moving) return;
-      e.preventDefault();
-      const currentPointerPosition = this.orientation === "horizontal" ? e.clientX : e.clientY;
-      const delta = currentPointerPosition - this.prevPointerPosition;
-      this.emit("u-move", { delta });
-      this.prevPointerPosition = currentPointerPosition;
-    };
-    /** 마우스 업 이벤트 핸들러 */
-    this.handleMouseup = (_) => {
-      if (!this.moving) return;
-      this.moving = false;
-      this.emit("u-moveend");
-      document.removeEventListener("mousemove", this.handleMousemove);
-      document.removeEventListener("mouseup", this.handleMouseup);
-      document.body.style.userSelect = "";
-      document.body.style.cursor = "";
-    };
+    this.vertical = false;
   }
   static {
     this.styles = [super.styles, styles];
@@ -57,33 +22,9 @@ class UDivider extends BaseElement {
   static {
     this.dependencies = {};
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener("mousemove", this.handleMousemove);
-    document.removeEventListener("mouseup", this.handleMouseup);
-  }
-  render() {
-    if (this.movable) {
-      return html`
-        <div class="handler" part="handler"
-          ?moving=${this.moving}
-          orientation=${this.orientation}
-          @mousedown=${this.handleMousedown}
-        ></div>
-      `;
-    } else {
-      return nothing;
-    }
-  }
 }
-__decorateClass([
-  state()
-], UDivider.prototype, "moving");
-__decorateClass([
-  property({ type: String, reflect: true })
-], UDivider.prototype, "orientation");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], UDivider.prototype, "movable");
+], UDivider.prototype, "vertical");
 
 export { UDivider };

package/dist/components/divider/UDivider.styles.js

@@ -2,53 +2,21 @@ import { css } from 'lit';
 
 const styles = css`
   :host {
-    --divider-size: 2px;
-    --handler-size: 4px;
-    --handler-color: var(--u-blue-500, #3b82f6);
+    --divider-size: 1px;
+    --divider-color: var(--u-neutral-200, #e5e7eb);
+    --divider-spacing: 8px;
   }
 
   :host {
-    position: relative;
-    background-color: var(--u-neutral-200, #e5e7eb);
-  }
-  :host([orientation="horizontal"]) {
-    width: var(--divider-size, 2px);
-    min-height: 0px;
-  }
-  :host([orientation="vertical"]) {
-    min-width: 0px;
-    height: var(--divider-size, 2px);
-  }
-
-  .handler {
-    position: absolute;
-    z-index: 100;
     display: block;
-    background-color: var(--handler-color, #3b82f6);
-    opacity: 0;
-    transition: opacity 0.2s ease;
-  }
-  .handler[orientation="horizontal"] {
-    top: 0;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: var(--handler-size, 4px);
-    height: 100%;
-    cursor: col-resize;
-  }
-  .handler[orientation="vertical"] {
-    left: 0;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 100%;
-    height: var(--handler-size, 4px);
-    cursor: row-resize;
-  }
-  .handler[moving],
-  .handler:hover {
-    opacity: 1;
+    background-color: var(--divider-color);
+    height: var(--divider-size);
+    margin: var(--divider-spacing) 0;
+  }
+  :host([vertical]) {
+    width: var(--divider-size);
+    height: auto;
+    margin: 0 var(--divider-spacing);
   }
 `;
 

package/dist/components/icon/UIcon.component.d.ts

@@ -1,3 +1,4 @@
+import { nothing } from 'lit';
 import { BaseElement } from '../BaseElement.js';
 export type IconLibrary = "internal" | "default" | (string & {});
 /**
@@ -18,7 +19,9 @@ export declare class UIcon extends BaseElement {
      * 사용할 아이콘의 이름을 지정합니다.
      */
     name?: string;
-    render(): import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/until.js').UntilDirective>;
+    render(): import('lit-html/directive.js').DirectiveResult<{
+        new (_partInfo: import('lit-html/directive.js').PartInfo): import('lit-html/directives/until.js').UntilDirective<typeof nothing | Promise<import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/unsafe-html.js').UnsafeHTMLDirective>>>;
+    }>;
     /**
      * SVG 콘텐츠가 유효한 HTML인지 검사합니다.
      */

package/dist/components/menu/UMenu.component.d.ts

@@ -17,7 +17,6 @@ export declare class UMenu extends FloatingElement {
      * - default: 일반 메뉴 (수동 제어)
      * - dropdown: 드롭다운 메뉴 (앵커 클릭 시 토글)
      * - contextmenu: 컨텍스트 메뉴 (앵커 우클릭 시 표시)
-     * - submenu: 서브메뉴 (앵커 호버/포커스 시 표시)
      */
     type: MenuType;
     /**
@@ -57,14 +56,12 @@ export declare class UMenu extends FloatingElement {
     private handleWindowFocusOut;
     private handleWindowKeydown;
     private handleWindowPointerDown;
-    private handleAnchorPointerEnter;
-    private handleAnchorPointerLeave;
-    private handleAnchorFocusIn;
-    private handleAnchorFocusOut;
     private handleAnchorPointerDown;
     private handleAnchorKeydown;
     private handleAnchorContextMenu;
-    /** 이벤트로부터 활성화된 (비활성화되지 않은) 메뉴 아이템을 반환 */
-    private getEnabledItemFrom;
+    private handleSubmenuAnchorPointerEnter;
+    private handleSubmenuAnchorPointerLeave;
+    private handleSubmenuAnchorFocusIn;
+    private handleSubmenuAnchorFocusOut;
 }
 export {};

package/dist/components/menu/UMenu.component.js

@@ -24,7 +24,7 @@ class UMenu extends FloatingElement {
      */
     this.focusAt = async (index = 0) => {
       await this.updateComplete;
-      const items = this.items || [];
+      const items = this.getItems("enabled");
       const length = items.length;
       if (length === 0) return;
       index = index < 0 ? Math.max(0, length + index) : Math.min(index, length - 1);
@@ -34,8 +34,10 @@ class UMenu extends FloatingElement {
     };
     //#region 기본 이벤트 핸들러
     this.handleClick = async (e) => {
-      const item = this.getEnabledItemFrom(e);
-      if (!item || item.isNested) return;
+      const item = e.target;
+      if (!(item instanceof UMenuItem)) return;
+      if (item.disabled) return;
+      if (item.submenu) return;
       const items = this.getItems("enabled");
       if (!items.includes(item)) return;
       const value = item.value || "";
@@ -56,8 +58,9 @@ class UMenu extends FloatingElement {
       this.emit("u-select", { value });
     };
     this.handleKeydown = async (e) => {
-      const item = this.getEnabledItemFrom(e);
-      if (!item) return;
+      const item = e.target;
+      if (!(item instanceof UMenuItem)) return;
+      if (item.disabled) return;
       const items = this.getItems("enabled");
       if (!items.includes(item)) return;
       const currentIndex = items.findIndex((i) => i === item);
@@ -87,18 +90,19 @@ class UMenu extends FloatingElement {
           await this.focusAt(nextIndex);
           break;
         case "ArrowLeft":
-          e.preventDefault();
-          e.stopPropagation();
           if (this.type === "submenu") {
+            e.preventDefault();
+            e.stopPropagation();
+            await this.hide();
             this.anchor?.focus();
           }
           break;
         case "ArrowRight":
-          e.preventDefault();
-          e.stopPropagation();
-          const menu = item.querySelector("u-menu");
-          if (menu?.type === "submenu") {
-            await menu?.focusAt(0);
+          if (item.submenu) {
+            e.preventDefault();
+            e.stopPropagation();
+            await item.submenu.show();
+            await item.submenu.focusAt(0);
           }
           break;
       }
@@ -131,28 +135,6 @@ class UMenu extends FloatingElement {
       }
     };
     //#endregion
-    //#region 'submenu' 이벤트 핸들러
-    this.handleAnchorPointerEnter = (e) => {
-      const item = this.getEnabledItemFrom(e);
-      if (!item) return;
-      this.show();
-    };
-    this.handleAnchorPointerLeave = async (e) => {
-      const item = this.getEnabledItemFrom(e);
-      if (!item) return;
-      this.hide();
-    };
-    this.handleAnchorFocusIn = (e) => {
-      const item = this.getEnabledItemFrom(e);
-      if (!item) return;
-      this.show();
-    };
-    this.handleAnchorFocusOut = async (e) => {
-      const item = this.getEnabledItemFrom(e);
-      if (!item) return;
-      this.hide();
-    };
-    //#endregion
     //#region 'dropdown' 이벤트 핸들러
     this.handleAnchorPointerDown = async (e) => {
       if (e.button !== 0) return;
@@ -187,14 +169,40 @@ class UMenu extends FloatingElement {
       };
       await this.show(virtual, false);
     };
+    //#endregion
+    //#region 'submenu' 이벤트 핸들러
+    this.handleSubmenuAnchorPointerEnter = () => {
+      const anchor = this.anchor;
+      if (anchor?.disabled) return;
+      this.show();
+    };
+    this.handleSubmenuAnchorPointerLeave = (e) => {
+      const related = e.relatedTarget;
+      if (related) {
+        const anchor = this.anchor;
+        if (anchor?.contains(related) || this.contains(related)) return;
+      }
+      this.hide();
+    };
+    this.handleSubmenuAnchorFocusIn = () => {
+      const anchor = this.anchor;
+      if (anchor?.disabled) return;
+      this.show();
+    };
+    this.handleSubmenuAnchorFocusOut = (e) => {
+      const related = e.relatedTarget;
+      if (related) {
+        const anchor = this.anchor;
+        if (anchor?.contains(related) || this.contains(related)) return;
+      }
+      this.hide();
+    };
   }
   static {
     this.styles = [super.styles, styles];
   }
   static {
-    this.dependencies = {
-      "u-menu-item": UMenuItem
-    };
+    this.dependencies = {};
   }
   connectedCallback() {
     super.connectedCallback();
@@ -228,13 +236,12 @@ class UMenu extends FloatingElement {
    * 재귀적으로 서브메뉴의 아이템들도 해제됩니다.
    */
   clearAll() {
-    const items = this.items || [];
+    const items = this.getItems("all");
     for (const item of items) {
       item.selected = false;
       item.checked = false;
-      if (item.isNested) {
-        const submenu = item.querySelector("u-menu");
-        submenu?.clearAll();
+      if (item.submenu) {
+        item.submenu.clearAll();
       }
     }
   }
@@ -245,7 +252,7 @@ class UMenu extends FloatingElement {
    * @return 조건에 맞는 아이템들의 배열입니다
    */
   getItems(filter = "all") {
-    const items = this.items || [];
+    const items = this.items?.filter((item) => item instanceof UMenuItem) || [];
     switch (filter) {
       case "all":
         return items;
@@ -267,15 +274,7 @@ class UMenu extends FloatingElement {
   }
   /** 앵커에 이벤트 바인딩 */
   bind(type, target) {
-    if (type === "submenu") {
-      this.visible = false;
-      this.placement ||= "right-start";
-      this.offset = -8;
-      target.addEventListener("pointerenter", this.handleAnchorPointerEnter);
-      target.addEventListener("pointerleave", this.handleAnchorPointerLeave);
-      target.addEventListener("focusin", this.handleAnchorFocusIn);
-      target.addEventListener("focusout", this.handleAnchorFocusOut);
-    } else if (type === "dropdown") {
+    if (type === "dropdown") {
       this.visible = false;
       this.placement ||= "bottom-start";
       target.addEventListener("pointerdown", this.handleAnchorPointerDown);
@@ -284,6 +283,13 @@ class UMenu extends FloatingElement {
       this.visible = false;
       this.placement ||= "bottom-start";
       target.addEventListener("contextmenu", this.handleAnchorContextMenu);
+    } else if (type === "submenu") {
+      this.visible = false;
+      this.placement ||= "right-start";
+      target.addEventListener("pointerenter", this.handleSubmenuAnchorPointerEnter);
+      target.addEventListener("pointerleave", this.handleSubmenuAnchorPointerLeave);
+      target.addEventListener("focusin", this.handleSubmenuAnchorFocusIn);
+      target.addEventListener("focusout", this.handleSubmenuAnchorFocusOut);
     } else {
       this.visible = true;
       return;
@@ -297,25 +303,18 @@ class UMenu extends FloatingElement {
     window.removeEventListener("focusout", this.handleWindowFocusOut);
     window.removeEventListener("keydown", this.handleWindowKeydown);
     window.removeEventListener("pointerdown", this.handleWindowPointerDown);
-    target.removeEventListener("pointerenter", this.handleAnchorPointerEnter);
-    target.removeEventListener("pointerleave", this.handleAnchorPointerLeave);
-    target.removeEventListener("focusin", this.handleAnchorFocusIn);
-    target.removeEventListener("focusout", this.handleAnchorFocusOut);
     target.removeEventListener("pointerdown", this.handleAnchorPointerDown);
     target.removeEventListener("keydown", this.handleAnchorKeydown);
     target.removeEventListener("contextmenu", this.handleAnchorContextMenu);
+    target.removeEventListener("pointerenter", this.handleSubmenuAnchorPointerEnter);
+    target.removeEventListener("pointerleave", this.handleSubmenuAnchorPointerLeave);
+    target.removeEventListener("focusin", this.handleSubmenuAnchorFocusIn);
+    target.removeEventListener("focusout", this.handleSubmenuAnchorFocusOut);
   }
   //#endregion
-  /** 이벤트로부터 활성화된 (비활성화되지 않은) 메뉴 아이템을 반환 */
-  getEnabledItemFrom(event) {
-    const target = event.target;
-    const item = target.closest("u-menu-item");
-    if (!item || item.disabled) return null;
-    return item;
-  }
 }
 __decorateClass([
-  queryAssignedElements({ flatten: false, selector: "u-menu-item" })
+  queryAssignedElements({ flatten: false })
 ], UMenu.prototype, "items");
 __decorateClass([
   property({ type: String, reflect: true })

package/dist/components/menu/UMenu.styles.js

@@ -22,7 +22,7 @@ const styles = css`
     opacity: 1;
   }
 
-  /* dropdown/contextmenu/submenu 타입: 플로팅 메뉴 */
+  /* dropdown/contextmenu 타입: 플로팅 메뉴 */
   :host([type="dropdown"]),
   :host([type="contextmenu"]),
   :host([type="submenu"]) {

package/dist/components/menu-item/UMenuItem.component.d.ts

@@ -1,12 +1,15 @@
 import { PropertyValues } from 'lit';
 import { BaseElement } from '../BaseElement.js';
+import { UMenu } from '../menu/UMenu.component.js';
 export declare class UMenuItem extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
-    /** 중첩된 메뉴 아이템인지 여부 */
-    isNested: boolean;
+    /** 서브메뉴 요소 */
+    submenu: UMenu | null;
     /** 비활성화 여부 @default false */
     disabled: boolean;
+    /** 로딩 상태 @default false */
+    loading: boolean;
     /** 선택 여부(multiple mode) @default false */
     checked: boolean;
     /** 선택 여부(single mode) @default false */
@@ -15,5 +18,8 @@ export declare class UMenuItem extends BaseElement {
     value: string;
     protected updated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
+    /** 기본 슬롯 변경 감지 */
+    private handleSlotChange;
+    /** submenu 슬롯 변경 감지 */
     private handleSubmenuSlotChange;
 }

package/dist/components/menu-item/UMenuItem.component.js

@@ -1,6 +1,9 @@
 import { html } from 'lit';
 import { state, property } from 'lit/decorators.js';
 import { BaseElement } from '../BaseElement.js';
+import { UIcon } from '../icon/UIcon.component.js';
+import { UMenu } from '../menu/UMenu.component.js';
+import { USpinner } from '../spinner/USpinner.component.js';
 import { styles } from './UMenuItem.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -15,27 +18,30 @@ var __decorateClass = (decorators, target, key, kind) => {
 class UMenuItem extends BaseElement {
   constructor() {
     super(...arguments);
-    this.isNested = false;
+    this.submenu = null;
     this.disabled = false;
+    this.loading = false;
     this.checked = false;
     this.selected = false;
     this.value = "";
+    /** 기본 슬롯 변경 감지 */
+    this.handleSlotChange = (e) => {
+      const slot = e.target;
+      const elements = slot.assignedElements({ flatten: true });
+      const menu = elements.find((el) => el instanceof UMenu);
+      menu?.setAttribute("slot", "submenu");
+    };
+    /** submenu 슬롯 변경 감지 */
     this.handleSubmenuSlotChange = (e) => {
       const slot = e.target;
       const elements = slot.assignedElements({ flatten: true });
-      if (elements.length !== 1) {
-        console.warn(`when using submenu, there must be exactly one UMenu component in the 'submenu' slot.`);
-        this.isNested = false;
+      const menu = elements.find((el) => el instanceof UMenu);
+      if (menu) {
+        menu.type = "submenu";
+        menu.anchor = this;
+        this.submenu = menu;
       } else {
-        const submenu = elements[0];
-        if ("anchor" in submenu && "type" in submenu) {
-          submenu.anchor = this;
-          submenu.type = "submenu";
-          this.isNested = true;
-        } else {
-          console.warn(`the element assigned to the 'submenu' slot is not a valid UMenu component.`);
-          this.isNested = false;
-        }
+        this.submenu = null;
       }
     };
   }
@@ -43,13 +49,15 @@ class UMenuItem extends BaseElement {
     this.styles = [super.styles, styles];
   }
   static {
-    this.dependencies = {};
+    this.dependencies = {
+      "u-icon": UIcon,
+      "u-spinner": USpinner
+    };
   }
   updated(changedProperties) {
     super.updated(changedProperties);
     if (changedProperties.has("disabled")) {
-      const tabIndex = this.disabled ? "-1" : "0";
-      this.setAttribute("tabindex", tabIndex);
+      this.setAttribute("tabindex", this.disabled ? "-1" : "0");
     }
   }
   render() {
@@ -57,36 +65,40 @@ class UMenuItem extends BaseElement {
       <u-icon class="prefix icon"
         ?hidden=${!this.checked}
         lib="internal"
-        name="check-lg"
+        name="check"
       ></u-icon>
 
+      <u-spinner class="prefix icon" 
+        ?hidden=${!this.loading}
+      ></u-spinner>
+
       <slot name="prefix"></slot>
 
-      <span class="content">
-        <slot></slot>
+      <span class="label">
+        <slot @slotchange=${this.handleSlotChange}></slot>
       </span>
 
       <slot name="suffix"></slot>
 
       <u-icon class="suffix icon"
-        ?hidden=${!this.isNested}
+        ?hidden=${this.submenu === null}
         lib="internal"
         name="chevron-right"
       ></u-icon>
 
-      <slot name="submenu"
-        ?hidden=${!this.isNested}
-        @slotchange=${this.handleSubmenuSlotChange}
-      ></slot>
+      <slot name="submenu" @slotchange=${this.handleSubmenuSlotChange}></slot>
     `;
   }
 }
 __decorateClass([
   state()
-], UMenuItem.prototype, "isNested");
+], UMenuItem.prototype, "submenu");
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], UMenuItem.prototype, "disabled");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UMenuItem.prototype, "loading");
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], UMenuItem.prototype, "checked");

package/dist/components/menu-item/UMenuItem.styles.js

@@ -22,7 +22,7 @@ const styles = css`
     pointer-events: none;
     cursor: not-allowed;
   }
-  :host(:not([disabled])[selected]) {
+  :host([selected]) {
     color: var(--selected-color);
     background-color: var(--selected-bg-color);
   }
@@ -31,9 +31,9 @@ const styles = css`
     background-color: var(--u-bg-color-hover);
   }
 
-  /* 콘텐츠 영역 */
-  .content {
-    flex: 1 0 auto;
+  /* 라벨 영역 */
+  .label {
+    flex: 1 1 auto;
     font-size: 1em;
     line-height: 1.5;
     overflow: hidden;

package/dist/components/split-panel/USplitPanel.component.d.ts

@@ -6,11 +6,17 @@ import { BaseElement } from '../BaseElement.js';
 export declare class USplitPanel extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
+    /** 현재 상태를 저장하는 패널 요소들 */
     private panels;
-    private dividers;
-    private panelSizes;
-    private panelAdjustSizes;
-    childElements: HTMLElement[];
+    private sizes;
+    /** 드래그 시작 시 저장되는 정보 */
+    private draggingIndex;
+    private dragStartSizes;
+    private dragStartPosition;
+    private containerSize;
+    slotEls?: HTMLElement[];
+    /** 스플리터 개수 (렌더링용) */
+    splitterCount: number;
     /** 분할 방향을 설정합니다. 'horizontal'은 좌우 분할, 'vertical'은 상하 분할입니다. */
     orientation: 'horizontal' | 'vertical';
     /** 초기 패널 크기 비율을 설정합니다. (예: [30, 70]은 첫 번째 패널이 30%, 두 번째 패널이 70%를 차지) */
@@ -22,9 +28,17 @@ export declare class USplitPanel extends BaseElement {
     disconnectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
-    private initialize;
+    /** 슬롯 변경시 패널 초기화 */
     private handleSlotChange;
-    /** 디바이더 드래그 이벤트 핸들러 */
-    private handleDividerMove;
-    private getDividerSize;
+    /** 패널 및 크기 초기화 */
+    private initialize;
+    /** 패널에 새로운 스타일 적용 */
+    private updatePanelStyles;
+    private handleSplitterMouseDown;
+    private handleDocumentMouseMove;
+    private handleDocumentMouseUp;
+    /** 전역 이벤트 리스너 제거 */
+    private removeEventListeners;
+    /** 거터 크기 가져오기 */
+    private getGutterSize;
 }

package/dist/components/split-panel/USplitPanel.component.js

@@ -1,8 +1,7 @@
 import { html } from 'lit';
-import { queryAssignedElements, property } from 'lit/decorators.js';
+import { queryAssignedElements, state, property } from 'lit/decorators.js';
 import { arrayAttributeConverter } from '../../internals/attribute-converters.js';
 import { BaseElement } from '../BaseElement.js';
-import { UDivider } from '../divider/UDivider.component.js';
 import { styles } from './USplitPanel.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -17,90 +16,113 @@ var __decorateClass = (decorators, target, key, kind) => {
 class USplitPanel extends BaseElement {
   constructor() {
     super(...arguments);
+    /** 현재 상태를 저장하는 패널 요소들 */
     this.panels = [];
-    this.dividers = [];
-    this.panelSizes = [];
-    this.panelAdjustSizes = [];
+    this.sizes = [];
+    /** 드래그 시작 시 저장되는 정보 */
+    this.draggingIndex = -1;
+    this.dragStartSizes = [];
+    this.dragStartPosition = 0;
+    this.containerSize = 0;
+    this.splitterCount = 0;
     this.orientation = "horizontal";
     this.initRatio = [];
     this.minSizes = [];
     this.maxSizes = [];
-    // 초기화 메서드
-    this.initialize = async () => {
-      this.panels = this.childElements.filter((el) => el instanceof UDivider === false);
-      this.dividers.forEach((divider) => divider.remove());
-      this.dividers = [];
+    /** 슬롯 변경시 패널 초기화 */
+    this.handleSlotChange = () => {
+      const panels = this.slotEls || [];
+      if (panels.every((p, i) => p === this.panels[i])) {
+        return;
+      }
+      this.initialize();
+    };
+    /** 패널 및 크기 초기화 */
+    this.initialize = () => {
+      this.panels = this.slotEls || [];
+      if (this.panels.length === 0) {
+        this.splitterCount = 0;
+        return;
+      }
+      this.splitterCount = Math.max(0, this.panels.length - 1);
       if (this.initRatio.length === this.panels.length) {
-        const totalRatio = this.initRatio.reduce((sum, r) => sum + r, 0);
-        this.panelSizes = this.initRatio.map((r) => r / totalRatio * 100);
+        const total = this.initRatio.reduce((sum, r) => sum + r, 0);
+        this.sizes = this.initRatio.map((r) => r / total * 100);
       } else {
-        const equalRatio = 100 / this.panels.length;
-        this.panelSizes = this.panels.map(() => equalRatio);
+        const equalSize = 100 / this.panels.length;
+        this.sizes = this.panels.map(() => equalSize);
       }
-      this.panelAdjustSizes = this.panels.map(() => 0);
-      const property2 = this.orientation === "horizontal" ? "width" : "height";
-      const dividerSize = this.getDividerSize();
-      this.panels.forEach((panel, index) => {
-        const ratio = this.panelSizes[index];
-        panel.style.flex = "none";
-        panel.style[property2] = index === 0 || index === this.panels.length - 1 ? `calc(${ratio}% - ${dividerSize / 2}px)` : `calc(${ratio}% - ${dividerSize}px)`;
-        if (index === this.panels.length - 1) return;
-        const divider = new UDivider();
-        divider.orientation = this.orientation;
-        divider.movable = true;
-        divider.addEventListener("u-move", this.handleDividerMove);
-        this.dividers.push(divider);
-        panel.after(divider);
-      });
+      this.updatePanelStyles();
       this.requestUpdate();
-      await this.updateComplete;
     };
-    this.handleSlotChange = async () => {
-      const panels = this.childElements.filter((el) => el instanceof UDivider === false);
-      if (panels.every((p, i) => p === this.panels[i])) {
-        return;
-      }
-      await this.initialize();
+    this.handleSplitterMouseDown = (e, index) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      this.draggingIndex = index;
+      this.dragStartPosition = this.orientation === "horizontal" ? e.clientX : e.clientY;
+      this.dragStartSizes = [...this.sizes];
+      const rect = this.getBoundingClientRect();
+      this.containerSize = this.orientation === "horizontal" ? rect.width : rect.height;
+      this.containerSize -= this.getGutterSize() * this.splitterCount;
+      const splitters = this.shadowRoot?.querySelectorAll(".splitter");
+      splitters?.[index]?.classList.add("active");
+      document.addEventListener("mousemove", this.handleDocumentMouseMove);
+      document.addEventListener("mouseup", this.handleDocumentMouseUp);
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = this.orientation === "horizontal" ? "col-resize" : "row-resize";
     };
-    /** 디바이더 드래그 이벤트 핸들러 */
-    this.handleDividerMove = (event) => {
-      const divider = event.target;
-      const delta = event.detail.delta;
-      const index = this.dividers.indexOf(divider);
-      if (index === -1) return;
-      const prevPanel = this.panels[index];
-      const nextPanel = this.panels[index + 1];
-      const property2 = this.orientation === "horizontal" ? "width" : "height";
-      const prevPanelSize = this.panelSizes[index];
-      const nextPanelSize = this.panelSizes[index + 1];
-      const prevAdjSize = this.panelAdjustSizes[index] || 0;
-      const nextAdjSize = this.panelAdjustSizes[index + 1] || 0;
-      if (delta === 0) return;
-      if (delta > 0) {
-        const prevNewAdjSize = prevAdjSize + delta;
-        const nextNewAdjSize = nextAdjSize - delta;
-        this.panelAdjustSizes[index] = prevNewAdjSize;
-        this.panelAdjustSizes[index + 1] = nextNewAdjSize;
-      } else {
-        const prevNewAdjSize = prevAdjSize + delta;
-        const nextNewAdjSize = nextAdjSize - delta;
-        this.panelAdjustSizes[index] = prevNewAdjSize;
-        this.panelAdjustSizes[index + 1] = nextNewAdjSize;
+    this.handleDocumentMouseMove = (e) => {
+      if (this.draggingIndex === -1) return;
+      e.preventDefault();
+      const currentPosition = this.orientation === "horizontal" ? e.clientX : e.clientY;
+      const delta = currentPosition - this.dragStartPosition;
+      const deltaPercent = delta / this.containerSize * 100;
+      const aIndex = this.draggingIndex;
+      const bIndex = this.draggingIndex + 1;
+      let newASize = this.dragStartSizes[aIndex] + deltaPercent;
+      let newBSize = this.dragStartSizes[bIndex] - deltaPercent;
+      const minAPercent = (this.minSizes[aIndex] ?? 0) / this.containerSize * 100;
+      const minBPercent = (this.minSizes[bIndex] ?? 0) / this.containerSize * 100;
+      const maxAPercent = this.maxSizes[aIndex] ? this.maxSizes[aIndex] / this.containerSize * 100 : 100;
+      const maxBPercent = this.maxSizes[bIndex] ? this.maxSizes[bIndex] / this.containerSize * 100 : 100;
+      if (newASize < minAPercent) {
+        newASize = minAPercent;
+        newBSize = this.dragStartSizes[aIndex] + this.dragStartSizes[bIndex] - newASize;
+      }
+      if (newBSize < minBPercent) {
+        newBSize = minBPercent;
+        newASize = this.dragStartSizes[aIndex] + this.dragStartSizes[bIndex] - newBSize;
+      }
+      if (newASize > maxAPercent) {
+        newASize = maxAPercent;
+        newBSize = this.dragStartSizes[aIndex] + this.dragStartSizes[bIndex] - newASize;
       }
-      prevPanel.style[property2] = `calc(${prevPanelSize}% - ${this.getDividerSize() / 2}px + ${this.panelAdjustSizes[index]}px)`;
-      nextPanel.style[property2] = `calc(${nextPanelSize}% - ${this.getDividerSize() / 2}px + ${this.panelAdjustSizes[index + 1]}px)`;
+      if (newBSize > maxBPercent) {
+        newBSize = maxBPercent;
+        newASize = this.dragStartSizes[aIndex] + this.dragStartSizes[bIndex] - newBSize;
+      }
+      this.sizes[aIndex] = newASize;
+      this.sizes[bIndex] = newBSize;
+      this.updatePanelStyles();
+    };
+    this.handleDocumentMouseUp = () => {
+      if (this.draggingIndex === -1) return;
+      const splitters = this.shadowRoot?.querySelectorAll(".splitter");
+      splitters?.[this.draggingIndex]?.classList.remove("active");
+      this.draggingIndex = -1;
+      this.removeEventListeners();
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
     };
   }
   static {
     this.styles = [super.styles, styles];
   }
   static {
-    this.dependencies = {
-      "u-divider": UDivider
-    };
+    this.dependencies = {};
   }
   disconnectedCallback() {
-    this.dividers.forEach((divider) => divider.remove());
+    this.removeEventListeners();
     super.disconnectedCallback();
   }
   willUpdate(changedProperties) {
@@ -111,18 +133,42 @@ class USplitPanel extends BaseElement {
   }
   render() {
     return html`
+      ${Array.from({ length: this.splitterCount }, (_, i) => html`
+        <div class="splitter" style="order: ${i * 2 + 1}"
+          orientation=${this.orientation}
+          @mousedown=${(e) => this.handleSplitterMouseDown(e, i)}>
+        </div>
+      `)}
       <slot @slotchange=${this.handleSlotChange}></slot>
     `;
   }
-  // Get divider size from CSS variable
-  getDividerSize() {
-    const sizeStr = getComputedStyle(this).getPropertyValue("--divider-size").trim();
-    return parseFloat(sizeStr) || 2;
+  /** 패널에 새로운 스타일 적용 */
+  updatePanelStyles() {
+    const dimension = this.orientation === "horizontal" ? "width" : "height";
+    const gutterSize = this.getGutterSize();
+    this.panels.forEach((panel, index) => {
+      const size = this.sizes[index];
+      panel.style[dimension] = `calc(${size}% - ${gutterSize * (this.splitterCount / this.panels.length)}px)`;
+      panel.style.order = String(index * 2);
+    });
+  }
+  /** 전역 이벤트 리스너 제거 */
+  removeEventListeners() {
+    document.removeEventListener("mousemove", this.handleDocumentMouseMove);
+    document.removeEventListener("mouseup", this.handleDocumentMouseUp);
+  }
+  /** 거터 크기 가져오기 */
+  getGutterSize() {
+    const sizeStr = getComputedStyle(this).getPropertyValue("--splitter-size").trim();
+    return parseFloat(sizeStr) || 4;
   }
 }
 __decorateClass([
   queryAssignedElements({ flatten: true })
-], USplitPanel.prototype, "childElements");
+], USplitPanel.prototype, "slotEls");
+__decorateClass([
+  state()
+], USplitPanel.prototype, "splitterCount");
 __decorateClass([
   property({ type: String, reflect: true })
 ], USplitPanel.prototype, "orientation");

package/dist/components/split-panel/USplitPanel.styles.js

@@ -1,6 +1,12 @@
 import { css } from 'lit';
 
 const styles = css`
+  :host {
+    --splitter-size: 4px;
+    --splitter-color: var(--u-neutral-200, #e5e7eb);
+    --splitter-active-color: var(--u-blue-500, #3b82f6);
+  }
+
   :host {
     position: relative;
     display: flex;
@@ -14,6 +20,30 @@ const styles = css`
   :host([orientation="vertical"]) {
     flex-direction: column;
   }
+
+  /* Splitter */
+  .splitter {
+    flex-shrink: 0;
+    background-color: var(--splitter-color);
+    transition: background-color 0.15s ease;
+  }
+  .splitter[orientation="horizontal"] {
+    width: var(--splitter-size);
+    cursor: col-resize;
+  }
+  .splitter[orientation="vertical"] {
+    height: var(--splitter-size);
+    cursor: row-resize;
+  }
+  .splitter:hover,
+  .splitter.active {
+    background-color: var(--splitter-active-color);
+  }
+
+  /* Slotted panels */
+  ::slotted(*) {
+    overflow: auto;
+  }
 `;
 
 export { styles };

package/dist/components/tree-item/UTreeItem.component.d.ts

@@ -1,32 +1,40 @@
 import { PropertyValues } from 'lit';
 import { BaseElement } from '../BaseElement.js';
 /**
- * TreeItem 컴포넌트는 트리의 개별 노드를 나타냅니다.
- * u-tree 컴포넌트와 함께 사용되며, 중첩된 구조를 지원합니다.
+ * UTreeItem 컴포넌트는 트리의 개별 노드를 나타냅니다.
+ * UTree 컴포넌트와 함께 사용되며, 중첩된 구조를 지원합니다.
  */
 export declare class UTreeItem extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
+    /** DOM 변경 감지를 위한 MutationObserver */
+    private mutationObserver?;
+    /** 자식 트리 아이템 배열 */
+    private _childrenItems;
+    /** 자식 트리 아이템 배열 (읽기 전용) */
+    get childrenItems(): readonly UTreeItem[];
     headerEl: HTMLElement;
-    childrenItems: UTreeItem[];
     /** 트리 항목이 리프 노드인지 여부입니다. */
     leaf: boolean;
     /** 트리 항목의 들여쓰기 레벨입니다. */
     level: number;
+    /** 트리 항목이 확장된 상태인지 여부입니다. */
+    expanded: boolean;
     /** 트리 항목이 비활성화 상태인지 여부입니다. */
     disabled: boolean;
+    /** 로딩 상태 @default false */
+    loading: boolean;
     /** 트리 항목이 선택된 상태인지 여부입니다. */
     selected: boolean;
-    /** 트리 항목이 확장된 상태인지 여부입니다. */
-    expanded: boolean;
     /** 트리 항목의 값입니다. */
     value: string;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     protected updated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
-    /** 슬롯 변경 시 헤더용 노드와 자식 노드 분리 */
-    private handleSlotChange;
-    /** 자식 슬롯 변경 시 자식 노드 재설정 */
+    /** 자식 u-tree-item 요소들에 slot 속성 부여 */
+    private processChildren;
+    /** 자식 슬롯 변경 시 처리 */
     private handleChildrenSlotChange;
     /** 헤더 클릭 이벤트를 처리합니다. */
     private handleHeaderClick;

package/dist/components/tree-item/UTreeItem.component.js

@@ -1,8 +1,9 @@
 import { html } from 'lit';
-import { query, queryAssignedElements, state, property } from 'lit/decorators.js';
+import { query, state, property } from 'lit/decorators.js';
 import { BaseElement } from '../BaseElement.js';
 import { UIcon } from '../icon/UIcon.component.js';
 import { styles } from './UTreeItem.styles.js';
+import { USpinner } from '../spinner/USpinner.component.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,29 +14,27 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-const _UTreeItem = class _UTreeItem extends BaseElement {
+class UTreeItem extends BaseElement {
   constructor() {
     super(...arguments);
+    /** 자식 트리 아이템 배열 */
+    this._childrenItems = [];
     this.leaf = true;
     this.level = 0;
+    this.expanded = false;
     this.disabled = false;
+    this.loading = false;
     this.selected = false;
-    this.expanded = false;
     this.value = "";
-    /** 슬롯 변경 시 헤더용 노드와 자식 노드 분리 */
-    this.handleSlotChange = (e) => {
+    /** 자식 슬롯 변경 시 처리 */
+    this.handleChildrenSlotChange = (e) => {
       const slot = e.target;
-      const nodes = slot.assignedNodes({ flatten: true });
-      nodes.forEach((node) => {
-        if (node instanceof _UTreeItem) {
-          node.setAttribute("slot", "children");
-        }
-      });
-    };
-    /** 자식 슬롯 변경 시 자식 노드 재설정 */
-    this.handleChildrenSlotChange = () => {
-      this.leaf = this.childrenItems.length === 0;
-      this.childrenItems.forEach((child) => {
+      const assignedElements = slot.assignedElements({ flatten: true });
+      this._childrenItems = assignedElements.filter(
+        (el) => el.tagName.toLowerCase() === "u-tree-item"
+      );
+      this.leaf = this._childrenItems.length === 0;
+      this._childrenItems.forEach((child) => {
         child.level = this.level + 1;
       });
     };
@@ -60,12 +59,34 @@ const _UTreeItem = class _UTreeItem extends BaseElement {
   }
   static {
     this.dependencies = {
-      "u-icon": UIcon
+      "u-icon": UIcon,
+      "u-spinner": USpinner
     };
   }
+  /** 자식 트리 아이템 배열 (읽기 전용) */
+  get childrenItems() {
+    return this._childrenItems;
+  }
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+    this.mutationObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "childList") {
+          mutation.addedNodes.forEach((node) => {
+            if (node instanceof Element && node.tagName.toLowerCase() === "u-tree-item" && !node.hasAttribute("slot")) {
+              node.setAttribute("slot", "children");
+            }
+          });
+        }
+      }
+    });
+    this.mutationObserver.observe(this, { childList: true });
+    this.processChildren();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.mutationObserver?.disconnect();
   }
   updated(changedProperties) {
     super.updated(changedProperties);
@@ -73,7 +94,7 @@ const _UTreeItem = class _UTreeItem extends BaseElement {
       this.setAttribute("tabindex", this.disabled ? "-1" : "0");
     }
     if (changedProperties.has("level")) {
-      this.headerEl.style.paddingLeft = `calc(${this.level} * var(--indent-size, 20px))`;
+      this.style.setProperty("--indent-level", this.level.toString());
     }
   }
   render() {
@@ -84,40 +105,57 @@ const _UTreeItem = class _UTreeItem extends BaseElement {
           lib="internal"
           name=${this.expanded ? "chevron-down" : "chevron-right"}
         ></u-icon>
+        
+        <u-spinner class="prefix icon" 
+          ?hidden=${!this.loading}
+        ></u-spinner>
+        
         <slot name="prefix"></slot>
-        <slot @slotchange=${this.handleSlotChange}></slot>
+        
+        <span class="label">
+          <slot></slot>
+        </span>
+        
         <slot name="suffix"></slot>
       </div>
+
       <div class="children" ?hidden=${!this.expanded}>
         <slot name="children" @slotchange=${this.handleChildrenSlotChange}></slot>
       </div>
     `;
   }
-};
+  /** 자식 u-tree-item 요소들에 slot 속성 부여 */
+  processChildren() {
+    Array.from(this.children).forEach((child) => {
+      if (child.tagName.toLowerCase() === "u-tree-item" && !child.hasAttribute("slot")) {
+        child.setAttribute("slot", "children");
+      }
+    });
+  }
+}
 __decorateClass([
   query(".header")
-], _UTreeItem.prototype, "headerEl");
-__decorateClass([
-  queryAssignedElements({ slot: "children", selector: "u-tree-item", flatten: true })
-], _UTreeItem.prototype, "childrenItems");
+], UTreeItem.prototype, "headerEl");
 __decorateClass([
   state()
-], _UTreeItem.prototype, "leaf");
+], UTreeItem.prototype, "leaf");
 __decorateClass([
   state()
-], _UTreeItem.prototype, "level");
+], UTreeItem.prototype, "level");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UTreeItem.prototype, "expanded");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], _UTreeItem.prototype, "disabled");
+], UTreeItem.prototype, "disabled");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], _UTreeItem.prototype, "selected");
+], UTreeItem.prototype, "loading");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], _UTreeItem.prototype, "expanded");
+], UTreeItem.prototype, "selected");
 __decorateClass([
   property({ type: String })
-], _UTreeItem.prototype, "value");
-let UTreeItem = _UTreeItem;
+], UTreeItem.prototype, "value");
 
 export { UTreeItem };

package/dist/components/tree-item/UTreeItem.styles.js

@@ -2,10 +2,13 @@ import { css } from 'lit';
 
 const styles = css`
   :host {
-    display: block;
-    
+    --indent-level: 0;
     --indent-size: 20px;
   }
+
+  :host {
+    display: block;
+  }
   :host([disabled]) {
     opacity: 0.5;
     pointer-events: none;
@@ -22,6 +25,7 @@ const styles = css`
     align-items: center;
     gap: 6px;
     padding: 6px 8px;
+    padding-left: calc(var(--indent-level, 0) * var(--indent-size));
     line-height: 1.5;
     border-radius: 4px;
     background-color: transparent;
@@ -48,7 +52,8 @@ const styles = css`
     align-items: center;
     justify-content: center;
   }
-  slot:not([name]) {
+  
+  .label {
     flex: 1;
     display: inline-flex;
     align-items: center;

package/dist/index.js

@@ -19,7 +19,7 @@ import './components/tree/UTree.js';
 import './components/tree-item/UTreeItem.js';
 export { BrowserStorage } from './utilities/BrowserStorage.js';
 export { notifier } from './utilities/notifier.js';
-export { theme } from './utilities/theme.js';
+export { Theme, theme } from './utilities/theme.js';
 export { UAlert } from './components/alert/UAlert.component.js';
 export { UButton } from './components/button/UButton.component.js';
 export { UDialog } from './components/dialog/UDialog.component.js';

package/dist/utilities/theme.d.ts

@@ -27,7 +27,7 @@ export interface ThemeInitOptions {
 /**
  * 현재 문서에 테마를 적용하고 관리하는 유틸리티 클래스입니다.
  */
-declare class Theme {
+export declare class Theme {
     private static _instance;
     private readonly STORAGE_THEME_KEY;
     private storage;
@@ -58,4 +58,3 @@ declare class Theme {
  * 테마 유틸리티의 싱글톤 인스턴스입니다.
  */
 export declare const theme: Theme;
-export {};

package/dist/utilities/theme.js

@@ -137,4 +137,4 @@ class Theme {
 }
 const theme = Theme.instance;
 
-export { theme };
+export { Theme, theme };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/components",
   "description": "web-components library based on lit-element made by iyulab",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "keywords": [
     "iyulab",
     "components",
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.4",
-    "lit": "^3.3.1",
+    "lit": "^3.3.2",
     "react": "^19.2.3",
     "reflect-metadata": "^0.2.2"
   },
@@ -52,7 +52,7 @@
     "eslint-plugin-lit": "^2.1.1",
     "globals": "^16.5.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.50.0",
+    "typescript-eslint": "^8.50.1",
     "vite": "^7.3.0",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-static-copy": "^3.1.4"