@iyulab/components 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 0.4.0 (2026-03-02)
+
+### Breaking Changes
+- **BaseElement / FloatingElement / ModalElement**: Renamed to `UElement`, `UFloatingElement`, `UModalElement` to align with the `U` prefix naming convention
+  - All components updated to use the renamed base classes
+
+### Features
+- **UJsonElement**: Added new base class that reads JSON from a `<script type="application/json">` tag in light DOM and maps properties to the component automatically
+  - Includes built-in error UI rendering via `error()` method
+  - Provides static `buildHTML()` helper to generate safe component HTML from JSON data
+- **Icons**: Added new icon assets
+  - `arrow-down-up`, `code-slash`, `download`, `sort-alpha-down`, `sort-alpha-up`
+
+### New Utilities
+- **sanitizers.ts**: Added HTML/XSS protection utilities
+  - `stripZeroWidth()`: Removes zero-width characters (ZWSP, BOM, etc.)
+  - `escapeHtmlText()`: Escapes special characters for HTML text context
+  - `escapeHtmlAttr()`: Escapes special characters for HTML attribute context
+  - `escapeHtmlHref()`: Sanitizes and validates `href`/`src` values (blocks `javascript:`, `data:`, `vbscript:` protocols)
+
+### Bug Fixes
+- **UCarousel**: Fixed tap vs drag detection — pointer target is now tracked to dispatch a `click` event on tap when drag distance is below threshold
+
 ## 0.3.0 (2026-02-26)
 
 ### Features

package/dist/assets/icons/arrow-down-up.svg.js

@@ -0,0 +1,3 @@
+const arrowDownUp = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path fill-rule=\"evenodd\" d=\"M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5m-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5\"/>\n</svg>";
+
+export { arrowDownUp as default };

package/dist/assets/icons/code-slash.svg.js

@@ -0,0 +1,3 @@
+const codeSlash = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0m6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0\"/>\n</svg>";
+
+export { codeSlash as default };

package/dist/assets/icons/download.svg.js

@@ -0,0 +1,3 @@
+const download = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5\"/>\n  <path d=\"M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z\"/>\n</svg>";
+
+export { download as default };

package/dist/assets/icons/sort-alpha-down.svg.js

@@ -0,0 +1,3 @@
+const sortAlphaDown = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M12.96 7H9.028v-.691l2.579-3.72v-.054H9.098v-.867h3.785v.691l-2.567 3.72v.054h2.645z\"/>\n  <path fill-rule=\"evenodd\" d=\"M10.082 12.629 9.664 14H8.598l1.789-5.332h1.234L13.402 14h-1.12l-.419-1.371zm1.57-.785L11 9.688h-.047l-.652 2.156z\"/>\n  <path d=\"M4.5 2.5a.5.5 0 0 0-1 0v9.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L4.5 12.293z\"/>\n</svg>";
+
+export { sortAlphaDown as default };

package/dist/assets/icons/sort-alpha-up.svg.js

@@ -0,0 +1,3 @@
+const sortAlphaUp = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path xmlns=\"http://www.w3.org/2000/svg\" fill-rule=\"evenodd\" d=\"M10.082 5.629 9.664 7H8.598l1.789-5.332h1.234L13.402 7h-1.12l-.419-1.371zm1.57-.785L11 2.687h-.047l-.652 2.157z\"/>\n  <path xmlns=\"http://www.w3.org/2000/svg\" d=\"M12.96 14H9.028v-.691l2.579-3.72v-.054H9.098v-.867h3.785v.691l-2.567 3.72v.054h2.645zm-8.46-.5a.5.5 0 0 1-1 0V3.707L2.354 4.854a.5.5 0 1 1-.708-.708l2-1.999.007-.007a.5.5 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L4.5 3.707z\"/>\n</svg>";
+
+export { sortAlphaUp as default };

package/dist/components/UElement.d.ts

@@ -0,0 +1,59 @@
+import { LitElement, CSSResultGroup, RenderOptions } from 'lit';
+/**
+ * UElement는 LitElement를 확장한 기본 Web Component 클래스입니다.
+ * 이 클래스는 자동으로 종속된 컴포넌트를 정의하며, 유용한 헬퍼 메서드들을 제공합니다.
+ */
+export declare class UElement extends LitElement {
+    /**
+     * 기본 스타일을 정의합니다.
+     */
+    static styles: CSSResultGroup;
+    /**
+     * 현재 컴포넌트에 종속된 컴포넌트들을 정의하는 정적 속성입니다.
+     * 이 속성은 컴포넌트가 정의될 때 자동으로 호출되어
+     * 종속된 컴포넌트를 등록합니다.
+     */
+    static dependencies: Record<string, typeof UElement>;
+    constructor();
+    /**
+     * 커스텀 엘리먼트를 정의합니다.
+     * 이미 정의된 엘리먼트는 다시 정의하지 않습니다.
+     * @param name - 커스텀 엘리먼트의 이름
+     * @param options - 엘리먼트 정의 옵션
+     */
+    static define(name: string, options?: ElementDefinitionOptions): void;
+    /**
+     * 커스텀 이벤트를 디스패치합니다.
+     * @param name - 이벤트 이름
+     * @param value - 이벤트의 detail에 포함될 데이터
+     * @param options - 추가 이벤트 옵션 (예: bubbles, composed 등)
+     * @returns 이벤트가 성공적으로 디스패치되었는지 여부
+     */
+    protected emit(name: string, value?: any, options?: CustomEventInit): boolean;
+    /**
+     * 현재 shadow DOM의 렌더 결과를 지정한 템플릿으로 완전히 교체합니다.
+     *
+     * @param value - Lit 템플릿 결과 또는 기타 렌더링 가능한 값
+     * @param options - Lit의 RenderOptions (예: renderBefore 등)
+     *
+     * @remarks
+     * Lit은 브라우저 환경에 따라 스타일을 두 가지 방식으로 주입합니다.
+     *
+     * - **모던 브라우저**: `shadowRoot.adoptedStyleSheets`에 `CSSStyleSheet` 객체로 주입.
+     *   이 경우 `<style>` 태그 노드는 존재하지 않으므로 전체 `shadowRoot`를 교체해도 스타일이 유지됩니다.
+     *
+     * - **구형 브라우저 (폴리필 환경)**: `<style>` 태그를 shadow DOM 안에 직접 주입.
+     *  이 경우 `<style>` 태그 노드를 제거하면 스타일이 사라지므로, 에러 UI로 교체할 때는 `<style>` 태그 노드를 보존해야 합니다.
+     *
+     * 따라서 `<style>` 태그 노드는 보존하고 나머지 노드를 제거한 뒤
+     * 에러 div를 append하는 방식으로 양쪽 환경 모두에서 안전하게 동작합니다.
+     *
+     * @example
+     * ```ts
+     * this.replace(html`
+     *   <span class="error">Something went wrong</span>
+     * `);
+     * ```
+     */
+    protected replace(value: unknown, options?: RenderOptions): void;
+}

package/dist/components/UElement.js

@@ -0,0 +1,96 @@
+import { LitElement, render } from 'lit';
+import { styles } from './UElement.styles.js';
+
+class UElement extends LitElement {
+  static {
+    /**
+     * 기본 스타일을 정의합니다.
+     */
+    this.styles = styles;
+  }
+  static {
+    /**
+     * 현재 컴포넌트에 종속된 컴포넌트들을 정의하는 정적 속성입니다.
+     * 이 속성은 컴포넌트가 정의될 때 자동으로 호출되어
+     * 종속된 컴포넌트를 등록합니다.
+     */
+    this.dependencies = {};
+  }
+  constructor() {
+    super();
+    Object.entries(this.constructor.dependencies).forEach(([name, component]) => {
+      component.define(name);
+    });
+  }
+  /**
+   * 커스텀 엘리먼트를 정의합니다.
+   * 이미 정의된 엘리먼트는 다시 정의하지 않습니다.
+   * @param name - 커스텀 엘리먼트의 이름
+   * @param options - 엘리먼트 정의 옵션
+   */
+  static define(name, options = {}) {
+    if (!customElements.get(name)) {
+      try {
+        customElements.define(name, this, options);
+      } catch (error) {
+        console.warn(`Failed to register component "${name}":`, error);
+      }
+    }
+  }
+  /**
+   * 커스텀 이벤트를 디스패치합니다.
+   * @param name - 이벤트 이름
+   * @param value - 이벤트의 detail에 포함될 데이터
+   * @param options - 추가 이벤트 옵션 (예: bubbles, composed 등)
+   * @returns 이벤트가 성공적으로 디스패치되었는지 여부
+   */
+  emit(name, value, options) {
+    const event = new CustomEvent(name, {
+      bubbles: true,
+      composed: true,
+      cancelable: false,
+      detail: value,
+      ...options
+    });
+    return this.dispatchEvent(event);
+  }
+  /**
+   * 현재 shadow DOM의 렌더 결과를 지정한 템플릿으로 완전히 교체합니다.
+   *
+   * @param value - Lit 템플릿 결과 또는 기타 렌더링 가능한 값
+   * @param options - Lit의 RenderOptions (예: renderBefore 등)
+   * 
+   * @remarks
+   * Lit은 브라우저 환경에 따라 스타일을 두 가지 방식으로 주입합니다.
+   *
+   * - **모던 브라우저**: `shadowRoot.adoptedStyleSheets`에 `CSSStyleSheet` 객체로 주입.
+   *   이 경우 `<style>` 태그 노드는 존재하지 않으므로 전체 `shadowRoot`를 교체해도 스타일이 유지됩니다.
+   *
+   * - **구형 브라우저 (폴리필 환경)**: `<style>` 태그를 shadow DOM 안에 직접 주입.
+   *  이 경우 `<style>` 태그 노드를 제거하면 스타일이 사라지므로, 에러 UI로 교체할 때는 `<style>` 태그 노드를 보존해야 합니다.
+   *
+   * 따라서 `<style>` 태그 노드는 보존하고 나머지 노드를 제거한 뒤
+   * 에러 div를 append하는 방식으로 양쪽 환경 모두에서 안전하게 동작합니다.
+   *
+   * @example
+   * ```ts
+   * this.replace(html`
+   *   <span class="error">Something went wrong</span>
+   * `);
+   * ```
+   */
+  replace(value, options) {
+    if (!this.shadowRoot) return;
+    Array.from(this.shadowRoot.childNodes).forEach((node) => {
+      if (!(node instanceof HTMLStyleElement)) {
+        node.parentNode?.removeChild(node);
+      }
+    });
+    const container = document.createElement("div");
+    container.style.display = "contents";
+    this.shadowRoot.appendChild(container);
+    render(value, container, options);
+  }
+}
+
+export { UElement };

package/dist/components/{FloatingElement.d.ts → UFloatingElement.d.ts}

@@ -1,8 +1,8 @@
 import { CSSResultGroup, PropertyValues } from 'lit';
 import { Placement, VirtualElement } from '@floating-ui/dom';
-import { BaseElement } from './BaseElement.js';
+import { UElement } from './UElement.js';
 /**
- * FloatingElement는 팝오버, 툴팁 등 화면에 떠 있는 엘리먼트를 구현하기 위한 기본 클래스입니다.
+ * UFloatingElement는 팝오버, 툴팁 등 화면에 떠 있는 엘리먼트를 구현하기 위한 기본 클래스입니다.
  * 이 클래스를 상속하여 커스텀 팝오버 컴포넌트를 만들 수 있습니다.
  *
  * 1. for, anchor 속성을 통해 연결될 대상 엘리먼트를 지정할 수 있습니다.
@@ -10,11 +10,11 @@ import { BaseElement } from './BaseElement.js';
  * 3. show() 및 hide() 메서드를 통해 프로그래밍적으로 표시하거나 숨길 수 있습니다.
  * 4. strategy, placement, distance, shift 속성을 통해 표시 위치 결정 방식을 설정할 수 있습니다.
  */
-export declare class FloatingElement extends BaseElement {
+export declare class UFloatingElement extends UElement {
     /** 기본 스타일을 정의합니다. */
     static styles: CSSResultGroup;
     /** 종속된 컴포넌트를 정의합니다. */
-    static dependencies: Record<string, typeof BaseElement>;
+    static dependencies: Record<string, typeof UElement>;
     private rafId;
     private cleanup;
     /**

package/dist/components/{FloatingElement.js → UFloatingElement.js}

@@ -1,8 +1,8 @@
 import { state, property } from 'lit/decorators.js';
 import { autoUpdate, computePosition, offset, shift, flip, autoPlacement } from '@floating-ui/dom';
 import { getParentElement, querySelectorAllWithin } from '../utilities/elements.js';
-import { BaseElement } from './BaseElement.js';
-import { styles } from './FloatingElement.styles.js';
+import { UElement } from './UElement.js';
+import { styles } from './UFloatingElement.styles.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,7 +13,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class FloatingElement extends BaseElement {
+class UFloatingElement extends UElement {
   constructor() {
     super(...arguments);
     // 애니메이션 프레임 아이디
@@ -166,30 +166,30 @@ class FloatingElement extends BaseElement {
 }
 __decorateClass([
   state()
-], FloatingElement.prototype, "target");
+], UFloatingElement.prototype, "target");
 __decorateClass([
   state()
-], FloatingElement.prototype, "anchors");
+], UFloatingElement.prototype, "anchors");
 __decorateClass([
   property({ type: String, reflect: true })
-], FloatingElement.prototype, "for");
+], UFloatingElement.prototype, "for");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], FloatingElement.prototype, "visible");
+], UFloatingElement.prototype, "visible");
 __decorateClass([
   property({ type: String, reflect: true })
-], FloatingElement.prototype, "strategy");
+], UFloatingElement.prototype, "strategy");
 __decorateClass([
   property({ type: String })
-], FloatingElement.prototype, "placement");
+], UFloatingElement.prototype, "placement");
 __decorateClass([
   property({ type: Number })
-], FloatingElement.prototype, "distance");
+], UFloatingElement.prototype, "distance");
 __decorateClass([
   property({ type: Number })
-], FloatingElement.prototype, "offset");
+], UFloatingElement.prototype, "offset");
 __decorateClass([
   property({ type: Boolean })
-], FloatingElement.prototype, "shift");
+], UFloatingElement.prototype, "shift");
 
-export { FloatingElement };
+export { UFloatingElement };

package/dist/components/UJsonElement.d.ts

@@ -0,0 +1,46 @@
+import { UElement } from './UElement.js';
+/**
+ * `UJsonElement`는 light DOM 내 `<script type="application/json">` 태그에서
+ * JSON 데이터를 읽어 컴포넌트 프로퍼티에 자동으로 매핑하는 기반 클래스입니다.
+ *
+ * 사용 예시:
+ * ```html
+ * <my-component>
+ *   <script type="application/json">{ "items": [1, 2, 3] }</script>
+ * </my-component>
+ * ```
+ *
+ * JSON 최상위 키가 컴포넌트의 프로퍼티 이름과 일치하면 자동으로 할당됩니다.
+ */
+export declare class UJsonElement extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof UElement>;
+    connectedCallback(): void;
+    /**
+     * 지정한 태그와 데이터로 커스텀 엘리먼트 HTML 문자열을 생성합니다.
+     * 데이터는 `<script type="application/json">` 태그로 주입됩니다.
+     * 태그이름이 등록되지 않은 경우 빈 문자열을 반환합니다.
+     *
+     * @param tag   - 커스텀 엘리먼트 태그 이름 (예: `"u-table-block"`)
+     * @param json  - JSON 데이터 객체 또는 문자열
+     * @param attrs - 추가 속성 객체 (선택적, `buildElementHTML` 규칙 적용)
+     * @returns 생성된 HTML 문자열
+     */
+    static buildHTML(tag: string, json: any, attrs?: Record<string, string | boolean | object | null | undefined>): string;
+    /**
+     * `data` 객체를 컴포넌트 프로퍼티에 할당합니다.
+     * `data`가 제공되지 않은 경우 light DOM 내 `<script type="application/json">` 태그에서 JSON 데이터를 읽어 프로퍼티에 자동으로 할당합니다.
+     * 오류가 발생할 경우 `error()`를 호출하여 에러 UI로 대체합니다.
+     *
+     * @param data - JSON 데이터 객체 (선택적)
+     */
+    protected load(data?: object): Promise<void>;
+    /**
+     * 오류 발생 시 Lit이 주입한 스타일시트를 보존하고 나머지 렌더링 결과를 에러 UI로 교체합니다.
+     * 일반적으로 JSON 파싱 오류의 경우 `data`가 객체가 아닌 문자열이거나 JSON 형식이 잘못된 경우입니다.
+     * 이 함수는 Lit 렌더링이 완료된 후에 호출됩니다.
+     *
+     * @param error - 발생한 오류 객체
+     */
+    protected error(error: unknown): Promise<void>;
+}

package/dist/components/UJsonElement.js

@@ -0,0 +1,93 @@
+import { html } from 'lit';
+import { buildElementHTML } from '../utilities/elements.js';
+import { UElement } from './UElement.js';
+import { UIcon } from './icon/UIcon.component.js';
+import { styles } from './UJsonElement.styles.js';
+
+class UJsonElement extends UElement {
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": UIcon
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.load();
+  }
+  /**
+   * 지정한 태그와 데이터로 커스텀 엘리먼트 HTML 문자열을 생성합니다.
+   * 데이터는 `<script type="application/json">` 태그로 주입됩니다.
+   * 태그이름이 등록되지 않은 경우 빈 문자열을 반환합니다.
+   *
+   * @param tag   - 커스텀 엘리먼트 태그 이름 (예: `"u-table-block"`)
+   * @param json  - JSON 데이터 객체 또는 문자열
+   * @param attrs - 추가 속성 객체 (선택적, `buildElementHTML` 규칙 적용)
+   * @returns 생성된 HTML 문자열
+   */
+  static buildHTML(tag, json, attrs = {}) {
+    if (!customElements.get(tag)) return "";
+    const jsonStr = typeof json === "string" ? json : JSON.stringify(json);
+    const safe = jsonStr.replace(/&/g, "\\u0026").replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+    const content = `<script type="application/json">${safe}<\/script>`;
+    return buildElementHTML(tag, attrs, content);
+  }
+  /**
+   * `data` 객체를 컴포넌트 프로퍼티에 할당합니다.
+   * `data`가 제공되지 않은 경우 light DOM 내 `<script type="application/json">` 태그에서 JSON 데이터를 읽어 프로퍼티에 자동으로 할당합니다.
+   * 오류가 발생할 경우 `error()`를 호출하여 에러 UI로 대체합니다.
+   *
+   * @param data - JSON 데이터 객체 (선택적)
+   */
+  async load(data) {
+    try {
+      if (!data) {
+        const script = this.querySelector('script[type="application/json"]');
+        data = JSON.parse(script?.textContent || "{}");
+      }
+      if (typeof data !== "object" || data === null || Array.isArray(data)) {
+        throw new Error("Invalid JSON data: expected an object at the top level");
+      }
+      Object.assign(this, data);
+    } catch (error) {
+      await this.error(error);
+    }
+  }
+  /**
+   * 오류 발생 시 Lit이 주입한 스타일시트를 보존하고 나머지 렌더링 결과를 에러 UI로 교체합니다.
+   * 일반적으로 JSON 파싱 오류의 경우 `data`가 객체가 아닌 문자열이거나 JSON 형식이 잘못된 경우입니다.
+   * 이 함수는 Lit 렌더링이 완료된 후에 호출됩니다.
+   * 
+   * @param error - 발생한 오류 객체
+   */
+  async error(error) {
+    await this.updateComplete;
+    if (!this.shadowRoot) return;
+    const tag = this.tagName.toLowerCase();
+    const type = error instanceof Error ? error.constructor.name : "UnknownError";
+    const message = error instanceof Error ? error.message : String(error);
+    this.replace(html`
+      <div class="error-container">
+        <div class="error-header">
+          <u-icon class="error-icon" lib="internal" name="exclamation-triangle-fill"></u-icon>
+          <span class="error-title">Render Error</span>
+          <code class="error-tag">&lt;${tag}&gt;</code>
+        </div>
+        <div class="error-body">
+          <div class="error-row">
+            <span class="error-label">Type</span>
+            <code class="error-type">${type}</code>
+          </div>
+          <div class="error-row">
+            <span class="error-label">Message</span>
+            <pre class="error-message">${message}</pre>
+          </div>
+        </div>
+      </div>
+    `);
+  }
+}
+
+export { UJsonElement };

package/dist/components/UJsonElement.styles.js

@@ -0,0 +1,95 @@
+import { css } from 'lit';
+
+const styles = css`
+  .error-container {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--u-red-200);
+    border-radius: 10px;
+    background: var(--u-red-0);
+    color: var(--u-red-700);
+    overflow: hidden;
+    font-size: 0.875em;
+    line-height: 1.5;
+  }
+
+  .error-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5em;
+    padding: 0.55em 0.9em;
+    background: var(--u-red-50);
+    border-bottom: 1px solid var(--u-red-200);
+  }
+
+  .error-icon {
+    font-size: 0.95em;
+    color: var(--u-red-500);
+    flex-shrink: 0;
+  }
+
+  .error-title {
+    font-weight: 700;
+    letter-spacing: 0.01em;
+    flex: 1;
+  }
+
+  .error-tag {
+    font-family: var(--u-font-mono);
+    font-size: 0.85em;
+    padding: 0.1em 0.45em;
+    color: var(--u-red-600);
+    border: 1px solid var(--u-red-200);
+    border-radius: 4px;
+    background: var(--u-red-100);
+  }
+
+  .error-body {
+    display: flex;
+    flex-direction: column;
+    padding: 0.6em 0.9em;
+    gap: 0.45em;
+  }
+
+  .error-row {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    gap: 0.6em;
+    min-height: 1.6em;
+  }
+
+  .error-label {
+    flex-shrink: 0;
+    width: 5em;
+    font-size: 0.78em;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    opacity: 0.55;
+    padding-top: 0.15em;
+  }
+
+  .error-type {
+    font-family: var(--u-font-mono);
+    font-size: 0.85em;
+    padding: 0.1em 0.4em;
+    color: var(--u-red-700);
+    background: var(--u-red-100);
+    border-radius: 4px;
+  }
+
+  .error-message {
+    margin: 0;
+    flex: 1;
+    white-space: pre-wrap;
+    word-break: break-all;
+    font-family: var(--u-font-mono);
+    font-size: 0.9em;
+    opacity: 0.85;
+    line-height: 1.55;
+  }
+`;
+
+export { styles };

package/dist/components/{ModalElement.d.ts → UModalElement.d.ts}

@@ -1,7 +1,7 @@
 import { CSSResultGroup, PropertyValues } from 'lit';
-import { BaseElement } from './BaseElement.js';
+import { UElement } from './UElement.js';
 /**
- * ModalElement는 다이얼로그, 드로어 등 화면에 오버레이로 표시되는 엘리먼트를 구현하기 위한 기본 클래스입니다.
+ * UModalElement는 다이얼로그, 드로어 등 화면에 오버레이로 표시되는 엘리먼트를 구현하기 위한 기본 클래스입니다.
  * 이 클래스를 상속하여 커스텀 모달 컴포넌트를 만들 수 있습니다.
  *
  * 1. open 속성을 통해 엘리먼트의 표시 여부를 제어할 수 있습니다.
@@ -9,11 +9,11 @@ import { BaseElement } from './BaseElement.js';
  * 3. closable 속성을 통해 이벤트에 의한 닫기 허용 여부를 설정할 수 있습니다.
  * 4. show() 및 hide() 메서드를 통해 프로그래밍적으로 표시하거나 숨길 수 있습니다.
  */
-export declare abstract class ModalElement extends BaseElement {
+export declare abstract class UModalElement extends UElement {
     /** 기본 스타일을 정의합니다. */
     static styles: CSSResultGroup;
     /** 종속된 컴포넌트를 정의합니다. */
-    static dependencies: Record<string, typeof BaseElement>;
+    static dependencies: Record<string, typeof UElement>;
     /**
      * 현재 엘리먼트의 열림/닫힘 상태입니다.
      *

package/dist/components/{ModalElement.js → UModalElement.js}

@@ -1,6 +1,6 @@
 import { property } from 'lit/decorators.js';
-import { BaseElement } from './BaseElement.js';
-import { styles } from './ModalElement.styles.js';
+import { UElement } from './UElement.js';
+import { styles } from './UModalElement.styles.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -11,7 +11,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class ModalElement extends BaseElement {
+class UModalElement extends UElement {
   constructor() {
     super(...arguments);
     this.open = false;
@@ -130,15 +130,15 @@ class ModalElement extends BaseElement {
 }
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], ModalElement.prototype, "open");
+], UModalElement.prototype, "open");
 __decorateClass([
   property({ type: String, reflect: true })
-], ModalElement.prototype, "strategy");
+], UModalElement.prototype, "strategy");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], ModalElement.prototype, "modal");
+], UModalElement.prototype, "modal");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], ModalElement.prototype, "closable");
+], UModalElement.prototype, "closable");
 
-export { ModalElement };
+export { UModalElement };

package/dist/components/UModalElement.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

package/dist/components/alert/UAlert.component.d.ts

@@ -1,13 +1,13 @@
 import { PropertyValues } from 'lit';
-import { BaseElement } from '../BaseElement.js';
+import { UElement } from '../UElement.js';
 export type AlertType = "error" | "warning" | "info" | "success" | "notice";
 /**
  * 사용자에게 메시지를 표시하는 Alert 컴포넌트입니다.
  * 자동 닫힘 타이머, 접기/펼치기 기능 등을 제공합니다.
  */
-export declare class UAlert extends BaseElement {
+export declare class UAlert extends UElement {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
+    static dependencies: Record<string, typeof UElement>;
     private timeoutId?;
     /** 표시 여부 */
     open: boolean;

package/dist/components/alert/UAlert.component.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { BaseElement } from '../BaseElement.js';
+import { UElement } from '../UElement.js';
 import { UIcon } from '../icon/UIcon.component.js';
 import { styles } from './UAlert.styles.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
@@ -14,7 +14,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class UAlert extends BaseElement {
+class UAlert extends UElement {
   constructor() {
     super(...arguments);
     this.open = false;

package/dist/components/button/UButton.component.d.ts

@@ -1,4 +1,4 @@
-import { BaseElement } from '../BaseElement.js';
+import { UElement } from '../UElement.js';
 export type ButtonVariant = "default" | "borderless" | "link";
 /**
  * Button 컴포넌트는 클릭 가능한 버튼을 나타내며, 로딩 상태와 툴팁 기능을 지원합니다.
@@ -6,9 +6,9 @@ export type ButtonVariant = "default" | "borderless" | "link";
  * @slot prefix - 버튼의 접두사로 표시할 콘텐츠를 삽입합니다.
  * @slot suffix - 버튼의 접미사로 표시할 콘텐츠를 삽입합니다.
  */
-export declare class UButton extends BaseElement {
+export declare class UButton extends UElement {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
+    static dependencies: Record<string, typeof UElement>;
     /** 버튼의 스타일 변형을 설정합니다. */
     variant: ButtonVariant;
     /** 버튼이 비활성화 상태인지 여부를 설정합니다. 비활성화된 버튼은 클릭할 수 없습니다. */