@iyulab/components 0.1.4 → 0.1.5

package/dist/components/input/Input.js

@@ -1,4 +1,4 @@
-import { html, nothing } from 'lit';
+import { nothing, html } from 'lit';
 import { query, state, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
@@ -19,14 +19,14 @@ var __decorateClass = (decorators, target, key, kind) => {
 class Input extends BaseElement {
   constructor() {
     super(...arguments);
-    this.showPassword = false;
     this.isInvalid = false;
     this.currentValidationMessage = "";
+    this.showPassword = false;
     this.type = "text";
     this.required = false;
+    this.readonly = false;
     this.disabled = false;
     this.clearable = false;
-    this.readonly = false;
     this.spellcheck = false;
     this.value = "";
     /** input 이벤트 핸들러 */
@@ -40,26 +40,28 @@ class Input extends BaseElement {
       this.emit("u-input", { value: this.value });
     };
     /** change 이벤트 핸들러 */
-    this.handleChange = (e) => {
+    this.handleInputChange = (e) => {
       const input = e.target;
       this.value = input.value;
       this.emit("u-change", { value: this.value });
     };
     /** blur 이벤트 핸들러 */
-    this.handleBlur = () => {
+    this.handleInputBlur = () => {
       this.validate();
     };
-    /** 클리어 버튼 클릭 핸들러 */
-    this.handleClear = (e) => {
-      e.stopPropagation();
-      this.clear();
-    };
     /** 비밀번호 표시/숨김 토글 핸들러 */
-    this.handlePasswordToggle = (e) => {
+    this.handlePasswordTogglerClick = (e) => {
+      e.preventDefault();
       e.stopPropagation();
       this.showPassword = !this.showPassword;
       this.focus();
     };
+    /** 클리어 버튼 클릭 핸들러 */
+    this.handleClearBtnClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.clear();
+    };
   }
   static {
     this.styles = [super.styles, styles];
@@ -72,21 +74,34 @@ class Input extends BaseElement {
   }
   updated(changedProperties) {
     super.updated(changedProperties);
-    if (changedProperties.has("value") && this.input) {
-      if (this.input.value !== this.value) {
-        this.input.value = this.value;
+    if (changedProperties.has("value") && this.inputEl) {
+      if (this.inputEl.value !== this.value) {
+        this.inputEl.value = this.value;
       }
     }
   }
   render() {
     return html`
-      ${this.renderHeader()}
+      <div class="header" ?hidden=${!this.label}>
+        ${this.required ? html`<span class="required-mark">*</span>` : nothing}
+      
+        <label class="label" @click=${this.focus}>
+          ${this.label}
+        </label>
+        
+        ${this.labelhelp ? html`
+            <u-icon class="help-icon" lib="internal" name="info-circle-fill"></u-icon>
+            <u-tooltip class="help-tooltip" trigger-selectors=".help-icon" placement="right-end">
+              ${this.labelhelp}
+            </u-tooltip>` : nothing}
+      </div>
       
       <div class="container"
         ?invalid=${this.isInvalid}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}>
-        <slot name="prefix" class="prefix"></slot>
+
+        <slot name="prefix"></slot>
         
         <input part="input"
           type=${this.type === "password" && this.showPassword ? "text" : this.type}
@@ -94,33 +109,37 @@ class Input extends BaseElement {
           ?required=${this.required}
           ?disabled=${this.disabled}
           ?readonly=${this.readonly}
-          placeholder=${ifDefined(this.placeholder)}
           minlength=${ifDefined(this.minlength)}
           maxlength=${ifDefined(this.maxlength)}
           spellcheck=${this.spellcheck}
           autocomplete=${ifDefined(this.autocomplete)}
+          placeholder=${ifDefined(this.placeholder)}
           pattern=${ifDefined(this.pattern)}
           .value=${live(this.value)}
           @input=${this.handleInput}
-          @change=${this.handleChange}
-          @blur=${this.handleBlur}
+          @change=${this.handleInputChange}
+          @blur=${this.handleInputBlur}
         />
         
-        <slot name="suffix" class="suffix"></slot>
+        <slot name="suffix"></slot>
         
         <div class="tools">
-          <u-icon class="tool" name=${this.showPassword ? "eye-slash" : "eye"}
+          <u-icon
+            lib="internal"
+            name=${this.showPassword ? "eye-slash" : "eye"}
             ?hidden=${this.type !== "password" || this.disabled || this.readonly}
-            @click=${this.handlePasswordToggle}
+            @click=${this.handlePasswordTogglerClick}
           ></u-icon>
-          <u-icon class="tool" name="x-lg"
+          <u-icon
+            lib="internal"
+            name="x-lg"
             ?hidden=${!this.clearable || !this.value || this.disabled || this.readonly}
-            @click=${this.handleClear}
+            @click=${this.handleClearBtnClick}
           ></u-icon>
         </div>
       </div>
 
-      <div class="validation-error" role="alert" ?hidden=${!this.currentValidationMessage}>
+      <div class="validation-message" ?hidden=${!this.currentValidationMessage}>
         ${this.currentValidationMessage}
       </div>
 
@@ -129,30 +148,13 @@ class Input extends BaseElement {
       </div>
     `;
   }
-  /** 라벨 영역을 렌더링합니다. */
-  renderHeader() {
-    if (!this.label) return nothing;
-    return html`
-      <div class="header">
-        <label class="label" @click=${this.focus}>
-          ${this.label}
-          ${this.required ? html`<span class="required-mark">*</span>` : ""}
-        </label>
-        
-        ${this.labelhelp ? html`
-          <u-icon class="help-icon" name="info-circle-fill"></u-icon>
-          <u-tooltip trigger-selectors=".help-icon" placement="right-end">${this.labelhelp}</u-tooltip>
-        ` : nothing}
-      </div>
-    `;
-  }
   /** 유효성 검사를 수행합니다. */
   validate() {
-    if (!this.input) return true;
-    const isValid = this.input.checkValidity();
+    if (!this.inputEl) return true;
+    const isValid = this.inputEl.checkValidity();
     this.isInvalid = !isValid;
     if (!isValid) {
-      this.currentValidationMessage = this.validationMessage || this.input.validationMessage;
+      this.currentValidationMessage = this.validationMessage || this.inputEl.validationMessage;
     } else {
       this.currentValidationMessage = "";
     }
@@ -164,29 +166,28 @@ class Input extends BaseElement {
     this.isInvalid = false;
     this.currentValidationMessage = "";
     this.focus();
-    this.emit("u-clear");
   }
   /** 입력 필드에 포커스를 설정합니다. */
   focus() {
-    this.input?.focus();
+    this.inputEl?.focus();
   }
   /** 입력 필드의 포커스를 해제합니다. */
   blur() {
-    this.input?.blur();
+    this.inputEl?.blur();
   }
 }
 __decorateClass([
   query("input")
-], Input.prototype, "input");
-__decorateClass([
-  state()
-], Input.prototype, "showPassword");
+], Input.prototype, "inputEl");
 __decorateClass([
   state()
 ], Input.prototype, "isInvalid");
 __decorateClass([
   state()
 ], Input.prototype, "currentValidationMessage");
+__decorateClass([
+  state()
+], Input.prototype, "showPassword");
 __decorateClass([
   property({ type: String, reflect: true })
 ], Input.prototype, "type");
@@ -195,13 +196,13 @@ __decorateClass([
 ], Input.prototype, "required");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], Input.prototype, "disabled");
+], Input.prototype, "readonly");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], Input.prototype, "clearable");
+], Input.prototype, "disabled");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], Input.prototype, "readonly");
+], Input.prototype, "clearable");
 __decorateClass([
   property({ type: String })
 ], Input.prototype, "name");

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

@@ -3,99 +3,98 @@ 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 등) */
@@ -103,42 +102,41 @@ const styles = css`
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 0.375em;
   }
-  .tool {
-    font-size: 1.125em;
+  .tools u-icon {
     color: var(--u-icon-color);
+    font-size: 1em;
+    margin-left: 0.5em;
     transition: color 0.2s ease;
     cursor: pointer;
   }
-  .tool:hover {
+  .tools u-icon:hover {
     color: var(--u-icon-color-hover);
   }
-  .tool:active {
+  .tools 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/index.js

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

package/dist/components/progress-bar/ProgressBar.d.ts

@@ -23,5 +23,5 @@ export declare class ProgressBar extends BaseElement {
     protected willUpdate(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
     /** 내부 진행 상태 업데이트 */
-    private updateProgress;
+    private updateProgressState;
 }

package/dist/components/progress-bar/ProgressBar.js

@@ -34,7 +34,7 @@ class ProgressBar extends BaseElement {
       this.progressState = this.indeterminate ? "indeterminate" : "turned-on";
     }
     if (changedProperties.has("minValue") || changedProperties.has("maxValue") || changedProperties.has("value")) {
-      this.updateProgress();
+      this.updateProgressState();
     }
   }
   render() {
@@ -48,7 +48,7 @@ class ProgressBar extends BaseElement {
     `;
   }
   /** 내부 진행 상태 업데이트 */
-  async updateProgress() {
+  async updateProgressState() {
     await this.updateComplete;
     if (this.indeterminate) return;
     const range = this.maxValue - this.minValue;

package/dist/components/progress-bar/ProgressBar.styles.js

@@ -1,25 +1,25 @@
 import { css } from 'lit';
 
 const styles = css`
+  :host {
+    --progress-value: 0;
+  }
+
   :host {
     position: relative;
     display: block;
     width: 100%;
-    height: 12px;
+    height: 1em;
     border-radius: 9999px;
     background-color: var(--u-neutral-200);
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
     overflow: hidden;
-
-    --progress-value: 0;
   }
 
   .indicator {
     position: absolute;
     inset: 0 0 0 0;
     display: block;
-    width: 100%;
-    height: 100%;
     border-radius: inherit;
     background-color: var(--u-blue-600);
     transform-origin: left center;
@@ -47,14 +47,14 @@ const styles = css`
   }
 
   .content {
-    position: relative;
-    z-index: 1;
+    position: absolute;
+    z-index: 100;
     display: flex;
+    inset: 0 0 0 0;
     align-items: center;
     justify-content: center;
-    font-size: 8px;
-    line-height: 12px;
-    color: var(--u-neutral-800);
+    font-size: 0.5em;
+    line-height: 1em;
     white-space: nowrap;
     user-select: none;
     pointer-events: none;

package/dist/components/progress-bar/index.js

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

package/dist/components/progress-ring/ProgressRing.d.ts

@@ -9,8 +9,8 @@ export type ProgressRingVariant = 'smooth' | 'blocks' | 'ticks';
 export declare class ProgressRing extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
-    progress: number;
     dasharray: string;
+    progress: number;
     /** 진행 표시기의 스타일 변형을 설정합니다. */
     variant: ProgressRingVariant;
     /** 진행 표시기의 최소값을 설정합니다. */
@@ -24,7 +24,7 @@ export declare class ProgressRing extends BaseElement {
     /**
      * 진행 상태를 0과 1 사이의 값으로 반환합니다.
      */
-    private updateProgress;
+    private updateProgressState;
     /**
      * variant에 따라 dasharray 값을 반환합니다.
      * [dash-length] [gap-length] or [dash-length] 형식

package/dist/components/progress-ring/ProgressRing.js

@@ -16,8 +16,8 @@ const PATH_LENGTH = 100;
 class ProgressRing extends BaseElement {
   constructor() {
     super(...arguments);
-    this.progress = 0;
     this.dasharray = PATH_LENGTH.toString();
+    this.progress = 0;
     this.variant = "smooth";
     this.minValue = 0;
     this.maxValue = 100;
@@ -35,7 +35,7 @@ class ProgressRing extends BaseElement {
       this.updateDashArray();
     }
     if (changedProperties.has("minValue") || changedProperties.has("maxValue") || changedProperties.has("value")) {
-      this.updateProgress();
+      this.updateProgressState();
     }
   }
   render() {
@@ -48,6 +48,7 @@ class ProgressRing extends BaseElement {
               stroke="white"
               stroke-dasharray="${PATH_LENGTH}"
               stroke-dashoffset="${PATH_LENGTH * (1 - this.progress)}"
+              stroke-linecap=${this.variant === "smooth" ? "round" : "butt"}
             ></circle>
           </mask>
         </defs>
@@ -65,14 +66,14 @@ class ProgressRing extends BaseElement {
         ></circle>
       </svg>
       <div class="label" part="label">
-        ${Math.round(this.progress * 100)}%
+        ${Math.round(this.progress * 100)} %
       </div>
     `;
   }
   /** 
    * 진행 상태를 0과 1 사이의 값으로 반환합니다. 
    */
-  updateProgress() {
+  updateProgressState() {
     const range = this.maxValue - this.minValue;
     const clampedValue = Math.max(this.minValue, Math.min(this.maxValue, this.value));
     this.progress = range === 0 ? 0 : (clampedValue - this.minValue) / range;
@@ -93,10 +94,10 @@ class ProgressRing extends BaseElement {
 }
 __decorateClass([
   state()
-], ProgressRing.prototype, "progress");
+], ProgressRing.prototype, "dasharray");
 __decorateClass([
   state()
-], ProgressRing.prototype, "dasharray");
+], ProgressRing.prototype, "progress");
 __decorateClass([
   property({ type: String, reflect: true })
 ], ProgressRing.prototype, "variant");

package/dist/components/progress-ring/ProgressRing.styles.js

@@ -2,20 +2,19 @@ import { css } from 'lit';
 
 const styles = css`
   :host {
-    position: relative;
-    display: inline-flex;
-    font-size: inherit;
-
     --track-width: 0.25em;
     --track-color: var(--u-neutral-200, #e5e7eb);
     --indicator-color: var(--u-blue-600, #3b82f6);
   }
-  /* smooth variant - 매끄러운 원형 */
-  :host([variant="smooth"]) .mask {
-    stroke-linecap: round;
+
+  :host {
+    position: relative;
+    display: inline-flex;
+    font-size: inherit;
   }
 
   .progress-ring {
+    position: relative;
     width: 6em;
     height: 6em;
     transform: rotate(-90deg); /* 0%가 위에서 시작하도록 회전 */
@@ -39,12 +38,12 @@ const styles = css`
   /* 라벨 중앙 숫자 */
   .label {
     position: absolute;
-    inset: 0;
+    inset: 0 0 0 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 600;
-    font-size: 1.1em;
+    font-size: 1em;
     color: var(--indicator-color);
     pointer-events: none;
   }

package/dist/components/progress-ring/index.js

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

package/dist/components/spinner/Spinner.styles.js

@@ -2,14 +2,16 @@ import { css } from 'lit';
 
 const styles = css`
   :host {
-    display: inline-flex;
-    font-size: inherit;
-
     --track-width: 0.125em;
     --track-color: var(--u-neutral-200, #e5e7eb);
     --indicator-color: var(--u-neutral-800, #1f2937);
   }
 
+  :host {
+    display: inline-flex;
+    font-size: inherit;
+  }
+
   .spinner {
     flex: 1 1 auto;
     width: 1em;

package/dist/components/spinner/index.js

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

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

@@ -18,5 +18,5 @@ export declare class SplitPanel extends BaseElement {
     private getDividerSize;
     private handleSlotChange;
     /** 디바이더 드래그 이벤트 핸들러 */
-    private handleDividerDrag;
+    private handleDividerMove;
 }