@iyulab/components 0.1.5 → 0.1.7

package/dist/components/input/Input.js

@@ -123,7 +123,7 @@ class Input extends BaseElement {
         
         <slot name="suffix"></slot>
         
-        <div class="tools">
+        <div class="suffix-items">
           <u-icon
             lib="internal"
             name=${this.showPassword ? "eye-slash" : "eye"}

package/dist/components/input/Input.styles.js

@@ -97,23 +97,23 @@ const styles = css`
     margin-left: 0.5em;
   }
 
-  /* Tools 영역 (clear, password toggle 등) */
-  .tools {
+  /* 툴 영역 (clear, password toggle 등) */
+  .suffix-items {
     display: flex;
     flex-direction: row;
     align-items: center;
   }
-  .tools u-icon {
+  .suffix-items u-icon {
     color: var(--u-icon-color);
     font-size: 1em;
     margin-left: 0.5em;
     transition: color 0.2s ease;
     cursor: pointer;
   }
-  .tools u-icon:hover {
+  .suffix-items u-icon:hover {
     color: var(--u-icon-color-hover);
   }
-  .tools u-icon:active {
+  .suffix-items u-icon:active {
     color: var(--u-icon-color-active);
   }
 

package/dist/components/menu/Menu.d.ts

@@ -1,36 +1,25 @@
 import { PropertyValues } from 'lit';
 import { BaseElement } from '../BaseElement.js';
-/**
- * Menu 컴포넌트는 일반적인 메뉴 컨테이너입니다.
- * MenuItem 컴포넌트를 자식으로 포함하여 메뉴를 구성합니다.
- */
 export declare class Menu extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
-    /** 슬롯에 할당된 메뉴 항목들을 가져옵니다. */
     private items;
-    /** 메뉴가 열려있는지 여부입니다. */
     open: boolean;
-    /** 메뉴 항목 중 하나만 선택할 수 있는지 여부입니다. */
     selectable: boolean;
-    /** 현재 선택된 메뉴 항목의 값입니다. */
     value: string;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
-    /** 메뉴를 표시합니다. */
     show: () => Promise<void>;
-    /** 메뉴를 숨깁니다. */
     hide: () => Promise<void>;
-    /** open 상태가 변경될 때 호출됩니다. */
+    /** (추가) 첫 번째 활성 아이템 포커스 */
+    focusFirstItem: () => Promise<void>;
     private updateOpenState;
-    /** 선택 상태를 업데이트합니다. */
     private updateSelection;
-    /** 슬롯 변경 이벤트를 처리합니다. */
     private handleSlotChange;
-    /** 메뉴 항목 선택 이벤트를 처리합니다. */
     private handleSelect;
-    /** 키보드 네비게이션을 처리합니다. */
+    /** 같은 레벨 다른 submenu 닫기 */
+    private handleSubmenuOpen;
     private handleKeydown;
 }

package/dist/components/menu/Menu.js

@@ -19,27 +19,23 @@ class Menu extends BaseElement {
     this.open = false;
     this.selectable = false;
     this.value = "";
-    /** 메뉴를 표시합니다. */
     this.show = async () => {
       await this.updateComplete;
-      requestAnimationFrame(() => {
-        this.open = true;
-      });
+      requestAnimationFrame(() => this.open = true);
     };
-    /** 메뉴를 숨깁니다. */
     this.hide = async () => {
       await this.updateComplete;
-      requestAnimationFrame(() => {
-        this.open = false;
-      });
+      requestAnimationFrame(() => this.open = false);
+    };
+    /** (추가) 첫 번째 활성 아이템 포커스 */
+    this.focusFirstItem = async () => {
+      await this.updateComplete;
+      const enabled = (this.items || []).filter((i) => !i.disabled);
+      if (enabled.length) enabled[0].focus();
     };
-    /** 슬롯 변경 이벤트를 처리합니다. */
     this.handleSlotChange = () => {
-      if (this.selectable && this.value) {
-        this.updateSelection();
-      }
+      if (this.selectable && this.value) this.updateSelection();
     };
-    /** 메뉴 항목 선택 이벤트를 처리합니다. */
     this.handleSelect = (e) => {
       const event = e;
       const menuItem = e.target;
@@ -48,9 +44,16 @@ class Menu extends BaseElement {
         this.updateSelection();
       }
     };
-    /** 키보드 네비게이션을 처리합니다. */
-    this.handleKeydown = (e) => {
-      const items = this.items.filter((item) => !item.disabled);
+    /** 같은 레벨 다른 submenu 닫기 */
+    this.handleSubmenuOpen = (e) => {
+      const openedItem = e.detail?.item;
+      if (!openedItem) return;
+      (this.items || []).forEach((item) => {
+        if (item !== openedItem) item.closeSubmenu?.();
+      });
+    };
+    this.handleKeydown = async (e) => {
+      const items = (this.items || []).filter((item) => !item.disabled);
       if (items.length === 0) return;
       const currentIndex = items.findIndex((item) => item === e.target);
       let nextIndex = currentIndex;
@@ -76,14 +79,29 @@ class Menu extends BaseElement {
         case "Enter":
         case " ":
           e.preventDefault();
-          if (currentIndex >= 0) {
-            items[currentIndex].click();
+          if (currentIndex >= 0) items[currentIndex].click();
+          break;
+        case "ArrowLeft": {
+          const parentItem = this.parentElement;
+          if (parentItem?.tagName?.toLowerCase() === "u-menu-item") {
+            e.preventDefault();
+            parentItem.closeSubmenu?.();
+            parentItem.focus?.();
           }
           break;
-        case "Escape":
+        }
+        case "Escape": {
           e.preventDefault();
-          this.hide();
+          const parentItem = this.parentElement;
+          if (parentItem?.tagName?.toLowerCase() === "u-menu-item") {
+            parentItem.closeSubmenu?.();
+            parentItem.focus?.();
+          } else {
+            this.emit("u-request-close");
+            await this.hide();
+          }
           break;
+        }
       }
     };
   }
@@ -100,10 +118,12 @@ class Menu extends BaseElement {
     this.setAttribute("role", "menu");
     this.addEventListener("u-select", this.handleSelect);
     this.addEventListener("keydown", this.handleKeydown);
+    this.addEventListener("u-submenu-open", this.handleSubmenuOpen);
   }
   disconnectedCallback() {
     this.removeEventListener("u-select", this.handleSelect);
     this.removeEventListener("keydown", this.handleKeydown);
+    this.removeEventListener("u-submenu-open", this.handleSubmenuOpen);
     super.disconnectedCallback();
   }
   updated(changedProperties) {
@@ -122,17 +142,12 @@ class Menu extends BaseElement {
       </div>
     `;
   }
-  /** open 상태가 변경될 때 호출됩니다. */
   updateOpenState(open) {
-    if (open) {
-      this.emit("u-show");
-    } else {
-      this.emit("u-hide");
-    }
+    if (open) this.emit("u-show");
+    else this.emit("u-hide");
   }
-  /** 선택 상태를 업데이트합니다. */
   updateSelection() {
-    this.items.forEach((item) => {
+    (this.items || []).forEach((item) => {
       item.selected = item.value === this.value;
     });
   }

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

@@ -2,31 +2,19 @@ import { css } from 'lit';
 
 const styles = css`
   :host {
-    display: block;
-    width: max-content;
+    display: none;
     min-width: 180px;
-    
-    opacity: 0;
-    transform: scale(0.95);
-    transform-origin: top left;
-    transition: opacity 0.2s ease, transform 0.2s ease;
-    pointer-events: none;
+    padding: 6px;
+    border-radius: 8px;
+    background: var(--u-menu-bg, #fff);
+    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
   }
   :host([open]) {
-    opacity: 1;
-    transform: scale(1);
-    pointer-events: auto;
+    display: block;
   }
 
   .container {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    padding: 4px;
-    border: 1px solid var(--u-border-color, #ddd);
-    border-radius: 8px;
-    background-color: var(--u-bg-color, #fff);
-    overflow: auto;
+    display: block;
   }
 `;
 

package/dist/components/menu-item/MenuItem.d.ts

@@ -1,27 +1,36 @@
 import { PropertyValues } from 'lit';
 import { BaseElement } from '../BaseElement.js';
-/**
- * MenuItem 컴포넌트는 메뉴의 개별 항목을 나타냅니다.
- * u-menu 및 u-context-menu와 함께 사용됩니다.
- */
 export declare class MenuItem extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
-    /** 메뉴 항목이 비활성화 상태인지 여부입니다. */
     disabled: boolean;
-    /** 메뉴 항목이 선택된 상태인지 여부입니다. */
     selected: boolean;
-    /** 체크 가능한 경우, 체크 상태인지 여부입니다. */
     checked: boolean;
-    /** 메뉴 항목에 체크 표시를 할 수 있는지 여부입니다. */
     checkable: boolean;
-    /** 메뉴 항목의 값입니다. */
     value: string;
+    private submenuOpen;
+    private containerEl;
+    private submenuList;
+    private submenuCleanup;
+    private closeTimer;
+    private get submenu();
     connectedCallback(): void;
-    protected updated(changedProperties: PropertyValues): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    private updateRole;
     render(): import('lit-html').TemplateResult<1>;
-    /** 메뉴 항목의 앞부분을 렌더링합니다. */
     private renderPrefixItem;
-    /** 클릭 이벤트를 처리합니다. */
+    /** 외부에서 호출 가능하게(부모 menu가 형제 submenu 닫을 때 사용) */
+    closeSubmenu: () => Promise<void>;
+    private openSubmenu;
+    private onSubmenuSelect;
+    private scheduleCloseSubmenu;
+    private stopSubmenuAutoUpdate;
+    private positionSubmenu;
+    private onPointerEnter;
+    private onPointerLeave;
+    private onFocusIn;
+    private onFocusOut;
+    private handleKeydown;
     private handleClick;
 }

package/dist/components/menu-item/MenuItem.js

@@ -1,5 +1,6 @@
-import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { nothing, html } from 'lit';
+import { property, state, query, queryAssignedElements } from 'lit/decorators.js';
+import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/dom';
 import { BaseElement } from '../BaseElement.js';
 import { styles } from './MenuItem.styles.js';
 
@@ -20,13 +21,125 @@ class MenuItem extends BaseElement {
     this.checked = false;
     this.checkable = false;
     this.value = "";
-    /** 클릭 이벤트를 처리합니다. */
-    this.handleClick = (e) => {
+    this.submenuOpen = false;
+    this.submenuCleanup = null;
+    this.closeTimer = null;
+    /** 외부에서 호출 가능하게(부모 menu가 형제 submenu 닫을 때 사용) */
+    this.closeSubmenu = async () => {
+      const sm = this.submenu;
+      if (!sm) return;
+      this.stopSubmenuAutoUpdate();
+      if (this.closeTimer) window.clearTimeout(this.closeTimer);
+      this.submenuOpen = false;
+      this.setAttribute("aria-expanded", "false");
+      await sm.hide();
+    };
+    this.openSubmenu = async (focusFirst = false) => {
+      const sm = this.submenu;
+      if (!sm || this.disabled) return;
+      if (this.closeTimer) {
+        window.clearTimeout(this.closeTimer);
+        this.closeTimer = null;
+      }
+      this.submenuOpen = true;
+      this.setAttribute("aria-expanded", "true");
+      this.emit("u-submenu-open", { item: this });
+      await sm.show();
+      await this.positionSubmenu();
+      this.stopSubmenuAutoUpdate();
+      this.submenuCleanup = autoUpdate(this.containerEl, sm, () => {
+        this.positionSubmenu();
+      });
+      sm.addEventListener("u-select", this.onSubmenuSelect, { once: true });
+      if (focusFirst) {
+        await sm.focusFirstItem?.();
+      }
+    };
+    this.onSubmenuSelect = () => {
+      this.closeSubmenu();
+    };
+    this.scheduleCloseSubmenu = () => {
+      if (!this.submenu) return;
+      if (this.closeTimer) window.clearTimeout(this.closeTimer);
+      this.closeTimer = window.setTimeout(() => this.closeSubmenu(), 150);
+    };
+    this.positionSubmenu = async () => {
+      const sm = this.submenu;
+      if (!sm) return;
+      const pos = await computePosition(this.containerEl, sm, {
+        strategy: "fixed",
+        placement: "right-start",
+        middleware: [
+          offset(6),
+          flip(),
+          shift({ padding: 8 })
+        ]
+      });
+      Object.assign(sm.style, {
+        position: "fixed",
+        left: `${pos.x}px`,
+        top: `${pos.y}px`,
+        zIndex: "1001",
+        transformOrigin: (() => {
+          switch (pos.placement) {
+            case "left":
+            case "left-start":
+            case "left-end":
+              return "right center";
+            case "right":
+            case "right-start":
+            case "right-end":
+              return "left center";
+            case "top":
+            case "top-start":
+            case "top-end":
+              return "center bottom";
+            default:
+              return "center top";
+          }
+        })()
+      });
+    };
+    this.onPointerEnter = () => {
+      if (this.submenu) this.openSubmenu(false);
+    };
+    this.onPointerLeave = (e) => {
+      const sm = this.submenu;
+      if (!sm) return;
+      const next = e.relatedTarget;
+      if (next && (this.contains(next) || sm.contains(next))) return;
+      this.scheduleCloseSubmenu();
+    };
+    this.onFocusIn = () => {
+      if (this.submenu) this.openSubmenu(false);
+    };
+    this.onFocusOut = (e) => {
+      const sm = this.submenu;
+      if (!sm) return;
+      const next = e.relatedTarget;
+      if (next && (this.contains(next) || sm.contains(next))) return;
+      this.scheduleCloseSubmenu();
+    };
+    this.handleKeydown = async (e) => {
+      if (!this.submenu) return;
+      if (e.key === "ArrowRight" || e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        await this.openSubmenu(true);
+      }
+    };
+    this.handleClick = async (e) => {
       if (this.disabled) {
         e.preventDefault();
         e.stopPropagation();
         return;
       }
+      if (this.submenu) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (this.submenuOpen) await this.closeSubmenu();
+        else await this.openSubmenu(true);
+        return;
+      }
       if (this.checkable) {
         this.checked = !this.checked;
         this.emit("u-check", { checked: this.checked });
@@ -41,41 +154,88 @@ class MenuItem extends BaseElement {
   static {
     this.dependencies = {};
   }
+  get submenu() {
+    return this.submenuList?.[0];
+  }
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute("role", "menuitem");
     this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+    this.updateRole();
+    this.addEventListener("keydown", this.handleKeydown);
+    this.addEventListener("pointerenter", this.onPointerEnter);
+    this.addEventListener("pointerleave", this.onPointerLeave);
+    this.addEventListener("focusin", this.onFocusIn);
+    this.addEventListener("focusout", this.onFocusOut);
   }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (changedProperties.has("disabled")) {
+  disconnectedCallback() {
+    this.removeEventListener("keydown", this.handleKeydown);
+    this.removeEventListener("pointerenter", this.onPointerEnter);
+    this.removeEventListener("pointerleave", this.onPointerLeave);
+    this.removeEventListener("focusin", this.onFocusIn);
+    this.removeEventListener("focusout", this.onFocusOut);
+    this.stopSubmenuAutoUpdate();
+    if (this.closeTimer) window.clearTimeout(this.closeTimer);
+    super.disconnectedCallback();
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("disabled")) {
       this.setAttribute("tabindex", this.disabled ? "-1" : "0");
       this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+      if (this.disabled) this.closeSubmenu();
     }
-    if (changedProperties.has("checked")) {
+    if (changed.has("checked")) {
       this.setAttribute("aria-checked", this.checked ? "true" : "false");
     }
+    if (changed.has("checkable")) {
+      this.updateRole();
+    }
+  }
+  updateRole() {
+    const hasSubmenu = !!this.submenu;
+    if (this.checkable) {
+      this.setAttribute("role", "menuitemcheckbox");
+      this.setAttribute("aria-checked", this.checked ? "true" : "false");
+    } else {
+      this.setAttribute("role", "menuitem");
+    }
+    if (hasSubmenu) {
+      this.setAttribute("aria-haspopup", "menu");
+      this.setAttribute("aria-expanded", this.submenuOpen ? "true" : "false");
+    } else {
+      this.removeAttribute("aria-haspopup");
+      this.removeAttribute("aria-expanded");
+    }
   }
   render() {
+    const hasSubmenu = !!this.submenu;
     return html`
       <div class="container" @click=${this.handleClick}>
         ${this.renderPrefixItem()}
         <slot name="prefix"></slot>
+
         <span class="content">
           <slot></slot>
         </span>
+
         <slot name="suffix"></slot>
+        ${hasSubmenu ? html`<span class="submenu-indicator">›</span>` : nothing}
       </div>
+
+      <!-- Shoelace 방식 그대로 -->
+      <slot name="submenu"></slot>
     `;
   }
-  /** 메뉴 항목의 앞부분을 렌더링합니다. */
   renderPrefixItem() {
     if (this.checkable) {
-      return html`
-        <span class="checker" ?checked=${this.checked}>✓</span>
-      `;
-    } else {
-      return nothing;
+      return html`<span class="checker" ?checked=${this.checked}>✓</span>`;
+    }
+    return nothing;
+  }
+  stopSubmenuAutoUpdate() {
+    if (this.submenuCleanup) {
+      this.submenuCleanup();
+      this.submenuCleanup = null;
     }
   }
 }
@@ -94,5 +254,14 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], MenuItem.prototype, "value");
+__decorateClass([
+  state()
+], MenuItem.prototype, "submenuOpen");
+__decorateClass([
+  query(".container")
+], MenuItem.prototype, "containerEl");
+__decorateClass([
+  queryAssignedElements({ slot: "submenu", selector: "u-menu" })
+], MenuItem.prototype, "submenuList");
 
 export { MenuItem };

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

@@ -59,6 +59,12 @@ const styles = css`
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
+  .submenu-indicator {
+    margin-left: 8px;
+    opacity: 0.7;
+    user-select: none;
+  }
 `;
 
 export { styles };

package/dist/components/menu-item/index.js

@@ -0,0 +1,5 @@
+import { MenuItem } from './MenuItem.js';
+
+MenuItem.define("u-menu-item");
+
+export { MenuItem };

package/dist/components/split-panel/SplitPanel.d.ts

@@ -1,3 +1,4 @@
+import { PropertyValues } from 'lit';
 import { BaseElement } from '../BaseElement.js';
 /**
  * SplitPanel 컴포넌트는 화면을 여러 개의 패널로 분할하여 표시합니다.
@@ -9,14 +10,21 @@ export declare class SplitPanel extends BaseElement {
     private dividers;
     private panelSizes;
     private panelAdjustSizes;
+    childElements: HTMLElement[];
     /** 분할 방향을 설정합니다. 'horizontal'은 좌우 분할, 'vertical'은 상하 분할입니다. */
     orientation: 'horizontal' | 'vertical';
     /** 초기 패널 크기 비율을 설정합니다. (예: [30, 70]은 첫 번째 패널이 30%, 두 번째 패널이 70%를 차지) */
-    initialRatio: number[];
+    initRatio: number[];
+    /** 각 패널의 최소 크기를 설정합니다. (픽셀 단위) */
+    minSizes: number[];
+    /** 각 패널의 최대 크기를 설정합니다. (픽셀 단위) */
+    maxSizes: number[];
     disconnectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
-    private getDividerSize;
+    private initialize;
     private handleSlotChange;
     /** 디바이더 드래그 이벤트 핸들러 */
     private handleDividerMove;
+    private getDividerSize;
 }