@iyulab/components 0.1.4 → 0.1.6

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

@@ -3,142 +3,140 @@ import { css } from 'lit';
 const styles = css`
   :host {
     display: inline-block;
+    color: var(--u-txt-color);
     font-size: inherit;
+    font-family: var(--u-font-base);
   }
   :host([disabled]) {
-    opacity: 0.5;
+    opacity: 0.6;
+    cursor: not-allowed;
   }
 
   /* 헤더 영역 */
   .header {
     display: flex;
+    flex-direction: row;
     align-items: center;
-    gap: 0.375em;
     margin-bottom: 0.5em;
+    user-select: none;
   }
   .header .label {
     font-size: 0.8em;
     font-weight: 500;
-    line-height: 1;
-    color: var(--u-text-color);
-    user-select: none;
+    line-height: 1.2;
     cursor: pointer;
   }
   .header .required-mark {
     color: var(--u-red-600);
-    margin-left: 0.25em;
+    margin-right: 0.25em;
   }
   .header .help-icon {
     font-size: 0.8em;
+    margin-left: 0.5em;
     cursor: help;
   }
+  .header .help-tooltip {
+    font-size: 0.6em;
+  }
 
   /* 입력 래퍼 */
   .container {
     display: flex;
+    flex-direction: row;
     align-items: center;
-    gap: 0.5em;
-    padding: 0.5em 0.75em;
-    background-color: var(--u-bg-color);
+    padding: 0.3em 0.6em;
     border: 1px solid var(--u-input-border-color);
-    border-radius: 0.375em;
+    border-radius: 0.25em;
+    background-color: var(--u-input-bg-color);
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
   }
-  .container[invalid] {
-    border-color: var(--u-red-600);
-  }
-  .container[invalid]:focus-within {
-    box-shadow: 0 0 0 0.125em rgba(244, 67, 54, 0.1);
-  }
+  .container[readonly],
   .container[disabled] {
-    background-color: var(--u-bg-color-disabled);
     border-color: var(--u-border-color-weak);
-    cursor: not-allowed;
+    background-color: var(--u-bg-color-disabled);
   }
-  .container[readonly] {
-    background-color: var(--u-neutral-50);
-    border-color: var(--u-border-color-weak);
+  .container:hover:not([readonly]):not([disabled]) {
+    box-shadow: 
+      0 0 0 1px var(--u-input-border-color-hover),
+      0 0 0 3px rgba(59, 130, 246, 0.12);
   }
-  .container:hover:not(([disabled])):not(([readonly])) {
-    border-color: var(--u-input-border-hover);
+  .container:focus-within:not([readonly]):not([disabled]) {
+    box-shadow:
+      0 0 0 1px var(--u-input-border-color-focus),
+      0 0 0 3px rgba(59, 130, 246, 0.22);
   }
-  .container:focus-within:not(([disabled])):not(([readonly])) {
-    border-color: var(--u-input-border-focus);
-    box-shadow: 0 0 0 0.125em rgba(33, 150, 243, 0.1);
-    outline: none;
+  .container[invalid]:not([readonly]):not([disabled]) {
+    box-shadow:
+      0 0 0 1px var(--u-input-border-color-invalid),
+      0 0 0 3px rgba(220, 38, 38, 0.12);
   }
 
   /* 입력 필드 */
   input {
-    flex: 1;
+    flex: 1 1 auto;
     min-width: 0;
-    border: none;
-    background: transparent;
-    outline: none;
-    font-family: inherit;
+    all: unset;
     font-size: 1em;
     line-height: 1.5;
-    color: var(--u-text-color);
-    padding: 0;
   }
   input::placeholder {
-    color: var(--u-text-color-disabled);
+    color: var(--u-txt-color-weak);
   }
   input:disabled {
     cursor: not-allowed;
-    color: var(--u-text-color-disabled);
   }
   input:read-only {
     cursor: default;
   }
 
-  /* Prefix & Suffix 슬롯 */
-  ::slotted([slot="prefix"]),
+  /* 슬롯에 내용이 있을 때 gap 적용 */
+  ::slotted([slot="prefix"]) {
+    margin-right: 0.5em;
+  }
   ::slotted([slot="suffix"]) {
-    display: contents;
+    margin-left: 0.5em;
   }
 
-  /* Tools 영역 (clear, password toggle 등) */
-  .tools {
+  /* 툴 영역 (clear, password toggle 등) */
+  .suffix-items {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 0.375em;
   }
-  .tool {
-    font-size: 1.125em;
+  .suffix-items u-icon {
     color: var(--u-icon-color);
+    font-size: 1em;
+    margin-left: 0.5em;
     transition: color 0.2s ease;
     cursor: pointer;
   }
-  .tool:hover {
+  .suffix-items u-icon:hover {
     color: var(--u-icon-color-hover);
   }
-  .tool:active {
+  .suffix-items u-icon:active {
     color: var(--u-icon-color-active);
   }
 
   /* 유효성 검사 에러 메시지 */
-  .validation-error {
-    margin-top: 0.375em;
-    font-size: 0.8125em;
+  .validation-message {
+    margin-top: 0.5em;
     color: var(--u-red-600);
-    line-height: 1.4;
+    font-size: 0.75em;
+    line-height: 1.2;
   }
 
   /* 설명 텍스트 */
   .description {
-    margin-top: 0.375em;
-    font-size: 0.8125em;
-    color: var(--u-soft-text-color);
-    line-height: 1.4;
+    margin-top: 0.5em;
+    color: var(--u-txt-color-weak);
+    font-size: 0.75em;
+    line-height: 1.2;
   }
 
-  /* Number input 기본 스타일 제거 (브라우저 간 일관성 위해) */
+  /* input 기본 제공 스타일 초기화 */
   input[type="number"] {
     -moz-appearance: textfield;
   }
-  /* Number input 스피너 제거 옵션 (선택적) */
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {
     -webkit-appearance: none;

package/dist/components/input/index.js

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

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/index.js

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

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;
 }