@iyulab/components 0.1.7 → 0.1.8

package/dist/components/icon/{Icon.js → UIcon.component.js}

@@ -4,7 +4,7 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { until } from 'lit/directives/until.js';
 import { BaseElement } from '../BaseElement.js';
 import { icons } from '../../utilities/icons.js';
-import { styles } from './Icon.styles.js';
+import { styles } from './UIcon.styles.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -15,10 +15,10 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Icon extends BaseElement {
+class UIcon extends BaseElement {
   constructor() {
     super(...arguments);
-    this.library = "default";
+    this.lib = "default";
   }
   static {
     this.styles = [super.styles, styles];
@@ -27,9 +27,8 @@ class Icon extends BaseElement {
     this.dependencies = {};
   }
   render() {
-    if (!this.name) return nothing;
-    console.log(this.library, this.name, "icon render");
-    return until(icons.resolve(this.library, this.name).then((html) => {
+    if (!this.lib || !this.name) return nothing;
+    return until(icons.resolve(this.lib, this.name).then((html) => {
       return this.validate(html) ? unsafeHTML(html) : nothing;
     }), nothing);
   }
@@ -49,10 +48,10 @@ class Icon extends BaseElement {
   }
 }
 __decorateClass([
-  property({ type: String, attribute: "lib" })
-], Icon.prototype, "library");
+  property({ type: String })
+], UIcon.prototype, "lib");
 __decorateClass([
   property({ type: String })
-], Icon.prototype, "name");
+], UIcon.prototype, "name");
 
-export { Icon };
+export { UIcon };

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

@@ -0,0 +1,8 @@
+import { UIcon } from './UIcon.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-icon": UIcon;
+    }
+}
+export { UIcon };
+export type { IconLibrary } from './UIcon.component.js';

package/dist/components/icon/UIcon.js

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

package/dist/components/icon-button/{IconButton.d.ts → UIconButton.component.d.ts}

@@ -1,8 +1,9 @@
 import { BaseElement } from '../BaseElement.js';
+import { IconLibrary } from '../icon/UIcon.component.js';
 /**
  * IconButton 컴포넌트는 아이콘만 표시하는 버튼입니다.
  */
-export declare class IconButton extends BaseElement {
+export declare class UIconButton extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
     /** 경계선이 없는 스타일을 적용합니다. */
@@ -12,7 +13,7 @@ export declare class IconButton extends BaseElement {
     /** 버튼이 로딩 상태인지 여부를 설정합니다. 로딩 중에는 버튼이 비활성화되고 스피너가 표시됩니다. */
     loading: boolean;
     /** 아이콘 라이브러리를 지정합니다. */
-    library: "internal" | "default" | (string & {});
+    lib: IconLibrary;
     /** 아이콘의 이름을 지정합니다. */
     name?: string;
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/icon-button/{IconButton.js → UIconButton.component.js}

@@ -1,9 +1,9 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { BaseElement } from '../BaseElement.js';
-import { Spinner } from '../spinner/Spinner.js';
-import { Icon } from '../icon/Icon.js';
-import { styles } from './IconButton.styles.js';
+import { USpinner } from '../spinner/USpinner.component.js';
+import { UIcon } from '../icon/UIcon.component.js';
+import { styles } from './UIconButton.styles.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -14,46 +14,46 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class IconButton extends BaseElement {
+class UIconButton extends BaseElement {
   constructor() {
     super(...arguments);
     this.borderless = false;
     this.disabled = false;
     this.loading = false;
-    this.library = "default";
+    this.lib = "default";
   }
   static {
     this.styles = [super.styles, styles];
   }
   static {
     this.dependencies = {
-      "u-spinner": Spinner,
-      "u-icon": Icon
+      "u-spinner": USpinner,
+      "u-icon": UIcon
     };
   }
   render() {
     return html`
       <button part="base"
         ?disabled=${this.disabled || this.loading}>
-        ${this.loading ? html`<u-spinner></u-spinner>` : html`<u-icon .library=${this.library} .name=${this.name}></u-icon>`}
+        ${this.loading ? html`<u-spinner></u-spinner>` : html`<u-icon .lib=${this.lib} .name=${this.name}></u-icon>`}
       </button>
     `;
   }
 }
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], IconButton.prototype, "borderless");
+], UIconButton.prototype, "borderless");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], IconButton.prototype, "disabled");
+], UIconButton.prototype, "disabled");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], IconButton.prototype, "loading");
+], UIconButton.prototype, "loading");
 __decorateClass([
-  property({ type: String, attribute: "lib" })
-], IconButton.prototype, "library");
+  property({ type: String })
+], UIconButton.prototype, "lib");
 __decorateClass([
   property({ type: String })
-], IconButton.prototype, "name");
+], UIconButton.prototype, "name");
 
-export { IconButton };
+export { UIconButton };

package/dist/components/icon-button/UIconButton.d.ts

@@ -0,0 +1,7 @@
+import { UIconButton } from './UIconButton.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-icon-button": UIconButton;
+    }
+}
+export { UIconButton };

package/dist/components/icon-button/UIconButton.js

@@ -0,0 +1,5 @@
+import { UIconButton } from './UIconButton.component.js';
+
+UIconButton.define("u-icon-button");
+
+export { UIconButton };

package/dist/components/input/{Input.d.ts → UInput.component.d.ts}

@@ -1,17 +1,21 @@
 import { PropertyValues } from 'lit';
 import { BaseElement } from '../BaseElement.js';
-/** 지원하는 input 타입 */
+/**
+ * Supported input types for Input component
+ *
+ * - Excludes: checkbox, radio, range, color, file, hidden, image, reset, submit, button
+ */
 type InputType = ('text' | 'password' | 'email' | 'tel' | 'url' | 'search' | 'number' | 'date' | 'time' | 'datetime-local' | 'month' | 'week');
 /**
  * Input 컴포넌트는 사용자 입력을 받는 텍스트 입력 필드입니다.
  * prefix, suffix 슬롯과 라벨, 도움말, 유효성 검사 등의 기능을 제공합니다.
  */
-export declare class Input extends BaseElement {
+export declare class UInput extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
     inputEl: HTMLInputElement;
-    /** 유효성 검사 실패 여부 */
-    isInvalid: boolean;
+    /** 유효성 여부 */
+    isValid: boolean;
     /** 현재 표시할 유효성 검사 메시지 */
     currentValidationMessage: string;
     /** password type인 경우 비밀번호 표시/숨김 상태 */
@@ -31,7 +35,7 @@ export declare class Input extends BaseElement {
     /** 라벨 텍스트 */
     label?: string;
     /** 라벨 도움말 (툴팁) */
-    labelhelp?: string;
+    help?: string;
     /** placeholder 텍스트 */
     placeholder?: string;
     /** 컴포넌트 하단 설명 텍스트 */
@@ -52,14 +56,14 @@ export declare class Input extends BaseElement {
     validationMessage?: string;
     protected updated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
-    /** 유효성 검사를 수행합니다. */
-    validate(): boolean;
-    /** 입력값을 초기화합니다. */
-    clear(): void;
     /** 입력 필드에 포커스를 설정합니다. */
     focus(): void;
     /** 입력 필드의 포커스를 해제합니다. */
     blur(): void;
+    /** 입력값을 초기화합니다. */
+    clear(): void;
+    /** 유효성 검사를 수행합니다. */
+    validate(): boolean;
     /** input 이벤트 핸들러 */
     private handleInput;
     /** change 이벤트 핸들러 */
@@ -69,6 +73,6 @@ export declare class Input extends BaseElement {
     /** 비밀번호 표시/숨김 토글 핸들러 */
     private handlePasswordTogglerClick;
     /** 클리어 버튼 클릭 핸들러 */
-    private handleClearBtnClick;
+    private handleClearButtonClick;
 }
 export {};

package/dist/components/input/{Input.js → UInput.component.js}

@@ -1,11 +1,11 @@
-import { nothing, html } from 'lit';
+import { 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';
 import { BaseElement } from '../BaseElement.js';
-import { Icon } from '../icon/Icon.js';
-import { Tooltip } from '../tooltip/Tooltip.js';
-import { styles } from './Input.styles.js';
+import { UIcon } from '../icon/UIcon.component.js';
+import { UTooltip } from '../tooltip/UTooltip.component.js';
+import { styles } from './UInput.styles.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -16,10 +16,10 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Input extends BaseElement {
+class UInput extends BaseElement {
   constructor() {
     super(...arguments);
-    this.isInvalid = false;
+    this.isValid = true;
     this.currentValidationMessage = "";
     this.showPassword = false;
     this.type = "text";
@@ -33,10 +33,6 @@ class Input extends BaseElement {
     this.handleInput = (e) => {
       const input = e.target;
       this.value = input.value;
-      if (this.isInvalid) {
-        this.isInvalid = false;
-        this.currentValidationMessage = "";
-      }
       this.emit("u-input", { value: this.value });
     };
     /** change 이벤트 핸들러 */
@@ -46,7 +42,7 @@ class Input extends BaseElement {
       this.emit("u-change", { value: this.value });
     };
     /** blur 이벤트 핸들러 */
-    this.handleInputBlur = () => {
+    this.handleInputBlur = (_) => {
       this.validate();
     };
     /** 비밀번호 표시/숨김 토글 핸들러 */
@@ -57,7 +53,7 @@ class Input extends BaseElement {
       this.focus();
     };
     /** 클리어 버튼 클릭 핸들러 */
-    this.handleClearBtnClick = (e) => {
+    this.handleClearButtonClick = (e) => {
       e.preventDefault();
       e.stopPropagation();
       this.clear();
@@ -68,8 +64,8 @@ class Input extends BaseElement {
   }
   static {
     this.dependencies = {
-      "u-icon": Icon,
-      "u-tooltip": Tooltip
+      "u-icon": UIcon,
+      "u-tooltip": UTooltip
     };
   }
   updated(changedProperties) {
@@ -83,21 +79,22 @@ class Input extends BaseElement {
   render() {
     return html`
       <div class="header" ?hidden=${!this.label}>
-        ${this.required ? html`<span class="required-mark">*</span>` : nothing}
+        <span class="required" ?hidden=${!this.required}>*</span>
       
         <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 class="helper" ?hidden=${!this.help}>
+          <u-icon lib="internal" name="info-circle-fill"></u-icon>
+          <u-tooltip distance="6" placement="right-end">
+            ${this.help}
+          </u-tooltip>
+        </div>
       </div>
       
       <div class="container"
-        ?invalid=${this.isInvalid}
+        ?invalid=${!this.isValid}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}>
 
@@ -123,20 +120,18 @@ class Input extends BaseElement {
         
         <slot name="suffix"></slot>
         
-        <div class="suffix-items">
-          <u-icon
-            lib="internal"
-            name=${this.showPassword ? "eye-slash" : "eye"}
-            ?hidden=${this.type !== "password" || this.disabled || this.readonly}
-            @click=${this.handlePasswordTogglerClick}
-          ></u-icon>
-          <u-icon
-            lib="internal"
-            name="x-lg"
-            ?hidden=${!this.clearable || !this.value || this.disabled || this.readonly}
-            @click=${this.handleClearBtnClick}
-          ></u-icon>
-        </div>
+        <u-icon class="suffix icon" tabindex="0"
+          ?hidden=${this.type !== "password" || this.disabled || this.readonly}  
+          lib="internal"
+          name=${this.showPassword ? "eye-slash" : "eye"}
+          @click=${this.handlePasswordTogglerClick}
+        ></u-icon>
+        <u-icon class="suffix icon" tabindex="0"
+          ?hidden=${!this.clearable || this.disabled || this.readonly}
+          lib="internal"
+          name="x-lg"
+          @click=${this.handleClearButtonClick}
+        ></u-icon>
       </div>
 
       <div class="validation-message" ?hidden=${!this.currentValidationMessage}>
@@ -148,25 +143,6 @@ class Input extends BaseElement {
       </div>
     `;
   }
-  /** 유효성 검사를 수행합니다. */
-  validate() {
-    if (!this.inputEl) return true;
-    const isValid = this.inputEl.checkValidity();
-    this.isInvalid = !isValid;
-    if (!isValid) {
-      this.currentValidationMessage = this.validationMessage || this.inputEl.validationMessage;
-    } else {
-      this.currentValidationMessage = "";
-    }
-    return isValid;
-  }
-  /** 입력값을 초기화합니다. */
-  clear() {
-    this.value = "";
-    this.isInvalid = false;
-    this.currentValidationMessage = "";
-    this.focus();
-  }
   /** 입력 필드에 포커스를 설정합니다. */
   focus() {
     this.inputEl?.focus();
@@ -175,69 +151,88 @@ class Input extends BaseElement {
   blur() {
     this.inputEl?.blur();
   }
+  /** 입력값을 초기화합니다. */
+  clear() {
+    this.value = "";
+    this.isValid = true;
+    this.currentValidationMessage = "";
+    this.focus();
+  }
+  /** 유효성 검사를 수행합니다. */
+  validate() {
+    if (!this.inputEl) return true;
+    const validity = this.inputEl.validity;
+    this.isValid = validity.valid;
+    if (this.isValid) {
+      this.currentValidationMessage = "";
+    } else {
+      this.currentValidationMessage = validity.patternMismatch ? this.validationMessage || this.inputEl.validationMessage : this.inputEl.validationMessage;
+    }
+    return this.isValid;
+  }
 }
 __decorateClass([
   query("input")
-], Input.prototype, "inputEl");
+], UInput.prototype, "inputEl");
 __decorateClass([
   state()
-], Input.prototype, "isInvalid");
+], UInput.prototype, "isValid");
 __decorateClass([
   state()
-], Input.prototype, "currentValidationMessage");
+], UInput.prototype, "currentValidationMessage");
 __decorateClass([
   state()
-], Input.prototype, "showPassword");
+], UInput.prototype, "showPassword");
 __decorateClass([
   property({ type: String, reflect: true })
-], Input.prototype, "type");
+], UInput.prototype, "type");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], Input.prototype, "required");
+], UInput.prototype, "required");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], Input.prototype, "readonly");
+], UInput.prototype, "readonly");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], Input.prototype, "disabled");
+], UInput.prototype, "disabled");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], Input.prototype, "clearable");
+], UInput.prototype, "clearable");
 __decorateClass([
   property({ type: String })
-], Input.prototype, "name");
+], UInput.prototype, "name");
 __decorateClass([
   property({ type: String })
-], Input.prototype, "label");
+], UInput.prototype, "label");
 __decorateClass([
   property({ type: String })
-], Input.prototype, "labelhelp");
+], UInput.prototype, "help");
 __decorateClass([
   property({ type: String })
-], Input.prototype, "placeholder");
+], UInput.prototype, "placeholder");
 __decorateClass([
   property({ type: String })
-], Input.prototype, "description");
+], UInput.prototype, "description");
 __decorateClass([
   property({ type: Number })
-], Input.prototype, "minlength");
+], UInput.prototype, "minlength");
 __decorateClass([
   property({ type: Number })
-], Input.prototype, "maxlength");
+], UInput.prototype, "maxlength");
 __decorateClass([
   property({ type: Boolean })
-], Input.prototype, "spellcheck");
+], UInput.prototype, "spellcheck");
 __decorateClass([
   property({ type: String })
-], Input.prototype, "autocomplete");
+], UInput.prototype, "autocomplete");
 __decorateClass([
   property({ type: String })
-], Input.prototype, "value");
+], UInput.prototype, "value");
 __decorateClass([
   property({ type: String })
-], Input.prototype, "pattern");
+], UInput.prototype, "pattern");
 __decorateClass([
   property({ type: String })
-], Input.prototype, "validationMessage");
+], UInput.prototype, "validationMessage");
 
-export { Input };
+export { UInput };

package/dist/components/input/UInput.d.ts

@@ -0,0 +1,7 @@
+import { UInput } from './UInput.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-input": UInput;
+    }
+}
+export { UInput };

package/dist/components/input/UInput.js

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

package/dist/components/input/{Input.styles.js → UInput.styles.js}

@@ -16,26 +16,26 @@ const styles = css`
   .header {
     display: flex;
     flex-direction: row;
+    justify-content: flex-start;
     align-items: center;
     margin-bottom: 0.5em;
+    font-size: 0.8em;
     user-select: none;
   }
+  .header .required {
+    color: var(--u-red-600);
+    margin-right: 0.25em;
+  }
   .header .label {
-    font-size: 0.8em;
     font-weight: 500;
-    line-height: 1.2;
+    line-height: 1.25;
     cursor: pointer;
   }
-  .header .required-mark {
-    color: var(--u-red-600);
-    margin-right: 0.25em;
-  }
-  .header .help-icon {
-    font-size: 0.8em;
+  .header .helper u-icon {
     margin-left: 0.5em;
     cursor: help;
   }
-  .header .help-tooltip {
+  .header .helper u-tooltip {
     font-size: 0.6em;
   }
 
@@ -49,23 +49,24 @@ const styles = css`
     border-radius: 0.25em;
     background-color: var(--u-input-bg-color);
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    overflow: hidden;
   }
   .container[readonly],
   .container[disabled] {
     border-color: var(--u-border-color-weak);
     background-color: var(--u-bg-color-disabled);
   }
-  .container:hover:not([readonly]):not([disabled]) {
+  .container:not([readonly]):not([disabled]):hover {
     box-shadow: 
       0 0 0 1px var(--u-input-border-color-hover),
       0 0 0 3px rgba(59, 130, 246, 0.12);
   }
-  .container:focus-within:not([readonly]):not([disabled]) {
+  .container:not([readonly]):not([disabled]):focus-within {
     box-shadow:
       0 0 0 1px var(--u-input-border-color-focus),
       0 0 0 3px rgba(59, 130, 246, 0.22);
   }
-  .container[invalid]:not([readonly]):not([disabled]) {
+  .container:not([readonly]):not([disabled])[invalid] {
     box-shadow:
       0 0 0 1px var(--u-input-border-color-invalid),
       0 0 0 3px rgba(220, 38, 38, 0.12);
@@ -73,9 +74,9 @@ const styles = css`
 
   /* 입력 필드 */
   input {
-    flex: 1 1 auto;
-    min-width: 0;
     all: unset;
+    flex: 1 0 auto;
+    min-width: 0;
     font-size: 1em;
     line-height: 1.5;
   }
@@ -97,26 +98,28 @@ const styles = css`
     margin-left: 0.5em;
   }
 
-  /* 툴 영역 (clear, password toggle 등) */
-  .suffix-items {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-  .suffix-items u-icon {
+  /* 아이콘 영역 (clear, password toggle 등) */
+  .icon {
     color: var(--u-icon-color);
     font-size: 1em;
-    margin-left: 0.5em;
     transition: color 0.2s ease;
     cursor: pointer;
   }
-  .suffix-items u-icon:hover {
+  .icon:hover {
     color: var(--u-icon-color-hover);
   }
-  .suffix-items u-icon:active {
+  .icon:active {
     color: var(--u-icon-color-active);
   }
 
+  /* 접두/접미 아이콘 간격 */
+  .icon.prefix {
+    margin-right: 0.5em;
+  }
+  .icon.suffix {
+    margin-left: 0.5em;
+  }
+
   /* 유효성 검사 에러 메시지 */
   .validation-message {
     margin-top: 0.5em;