@iyulab/components 1.3.4 → 1.4.0

package/dist/utilities/Locale.js

@@ -0,0 +1,93 @@
+import ar_default from "../assets/locales/ar.json.js";
+import de_default from "../assets/locales/de.json.js";
+import en_default from "../assets/locales/en.json.js";
+import es_default from "../assets/locales/es.json.js";
+import fr_default from "../assets/locales/fr.json.js";
+import id_default from "../assets/locales/id.json.js";
+import ja_default from "../assets/locales/ja.json.js";
+import ko_default from "../assets/locales/ko.json.js";
+import pt_BR_default from "../assets/locales/pt-BR.json.js";
+import ru_default from "../assets/locales/ru.json.js";
+import th_default from "../assets/locales/th.json.js";
+import vi_default from "../assets/locales/vi.json.js";
+import zh_CN_default from "../assets/locales/zh-CN.json.js";
+import zh_TW_default from "../assets/locales/zh-TW.json.js";
+//#region src/utilities/Locale.ts
+var builtins = new Map(Object.entries(/* #__PURE__ */ Object.assign({
+	"../assets/locales/ar.json": ar_default,
+	"../assets/locales/de.json": de_default,
+	"../assets/locales/en.json": en_default,
+	"../assets/locales/es.json": es_default,
+	"../assets/locales/fr.json": fr_default,
+	"../assets/locales/id.json": id_default,
+	"../assets/locales/ja.json": ja_default,
+	"../assets/locales/ko.json": ko_default,
+	"../assets/locales/pt-BR.json": pt_BR_default,
+	"../assets/locales/ru.json": ru_default,
+	"../assets/locales/th.json": th_default,
+	"../assets/locales/vi.json": vi_default,
+	"../assets/locales/zh-CN.json": zh_CN_default,
+	"../assets/locales/zh-TW.json": zh_TW_default
+})).map(([path, mod]) => {
+	return [(path.split("/").pop()?.replace(".json", "") || "").toLowerCase(), mod];
+}));
+var overrides = /* @__PURE__ */ new Map();
+/** 브라우저 환경이면 `navigator.language`/`document.lang`으로 초기 로케일을 추측한다. */
+function detectLocale() {
+	if (typeof navigator !== "undefined" && navigator.language) return navigator.language;
+	if (typeof document !== "undefined" && document.documentElement?.lang) return document.documentElement.lang;
+	return "en";
+}
+var active = detectLocale();
+/** 정확 일치 → base 언어(ko-KR → ko) → en 순으로 값을 찾는다. */
+function lookup(locale, key) {
+	const norm = locale.toLowerCase();
+	const base = norm.split("-")[0];
+	const chain = base === norm ? [norm, "en"] : [
+		norm,
+		base,
+		"en"
+	];
+	for (const tag of chain) {
+		const value = overrides.get(tag)?.[key] ?? builtins.get(tag)?.[key];
+		if (value) return value;
+	}
+	return builtins.get("en")[key];
+}
+/**
+* 검증 메시지 로케일을 관리하는 정적 유틸리티입니다.
+*/
+var Locale = class {
+	/** 개별 인스턴스 생성을 방지합니다. */
+	constructor() {}
+	/** 전역 활성 로케일을 지정합니다. */
+	static set(locale) {
+		active = locale;
+	}
+	/** 전역 활성 로케일을 반환합니다 (초기값은 브라우저 언어 자동 감지, 실패 시 'en'). */
+	static get() {
+		return active;
+	}
+	/**
+	* 로케일 하나의 메시지 테이블(전체 또는 일부)을 등록합니다.
+	* 이미 존재하는 값(내장 포함) 위에 병합되므로, 일부 키만 넘겨도 나머지 키가 사라지지 않습니다.
+	*/
+	static register(locale, table) {
+		const norm = locale.toLowerCase();
+		const current = overrides.get(norm) ?? builtins.get(norm) ?? builtins.get("en");
+		overrides.set(norm, {
+			...current,
+			...table
+		});
+	}
+	/**
+	* 현재 활성 로케일 기준으로 메시지를 조회합니다.
+	* `params`가 있으면 템플릿의 `{name}` 자리를 치환합니다.
+	*/
+	static getValue(key, params) {
+		const template = lookup(active, key);
+		return params ? template.replace(/\{(\w+)\}/g, (_, name) => params[name] != null ? String(params[name]) : `{${name}}`) : template;
+	}
+};
+//#endregion
+export { Locale };

package/dist/utilities/Toast.d.ts

@@ -22,6 +22,15 @@ export interface ToastOptions {
 export declare class Toast {
     private static containers;
     private static elements;
+    /**
+     * 모든 Toast 호출에 적용될 전역 기본 옵션입니다. 개별 호출의 `options`가 우선합니다.
+     *
+     * @example
+     * ```ts
+     * Toast.DefaultOptions = { position: 'bottom-center', duration: 3000 };
+     * ```
+     */
+    static DefaultOptions: Partial<ToastOptions>;
     /** 개별 인스턴스 생성을 방지합니다. */
     private constructor();
     /** 기본 메시지 알림 */

package/dist/utilities/Toast.js

@@ -10,6 +10,9 @@ var Toast = class {
 	static {
 		this.elements = /* @__PURE__ */ new Set();
 	}
+	static {
+		this.DefaultOptions = {};
+	}
 	/** 개별 인스턴스 생성을 방지합니다. */
 	constructor() {}
 	/** 기본 메시지 알림 */
@@ -38,21 +41,26 @@ var Toast = class {
 	}
 	/** 토스트 알림을 생성합니다. */
 	static async show(status, content, options) {
+		const merged = {
+			...this.DefaultOptions,
+			...options
+		};
 		const el = new UAlert();
 		el.status = status;
 		el.innerHTML = content || "";
-		el.variant = options?.variant || "solid";
-		el.title = options?.title || "";
-		el.closable = options?.closable ?? true;
-		el.duration = options?.duration && options.duration > 0 ? options.duration : 4e3;
+		el.variant = merged.variant || "solid";
+		el.title = merged.title || "";
+		el.closable = merged.closable ?? true;
+		el.duration = merged.duration ?? 4e3;
 		this.elements.add(el);
-		const position = options?.position || "top-right";
-		const target = options?.target || document.body;
+		const position = merged.position || "top-right";
+		const target = merged.target || document.body;
 		const container = this.getOrCreateContainer(position, target);
 		container.appendChild(el);
 		await el.updateComplete;
 		el.show();
-		el.addEventListener("hide", async () => {
+		el.addEventListener("hide", async (e) => {
+			if (e.target !== el) return;
 			await new Promise((resolve) => setTimeout(resolve, 200));
 			el.remove();
 			this.elements.delete(el);

package/dist/utilities/elements.d.ts

@@ -15,26 +15,3 @@ export declare function querySelectorWithin(element: Element, selectors: string)
  * - 탐색은 element가 존재하는 shadow DOM 또는 document 루트 범위에서 이루어집니다.
  */
 export declare function querySelectorAllWithin(element: Element, selectors: string): HTMLElement[];
-/**
- * 지정한 태그, 속성, 내용으로 커스텀 엘리먼트 HTML 문자열을 생성합니다.
- *
- * 속성 값 처리 규칙:
- * - `null` / `undefined` → 해당 속성 생략
- * - `false` (boolean)   → 해당 속성 생략
- * - `true`  (boolean)   → 값 없이 키만 출력 (예: `disabled`)
- * - `object`            → `JSON.stringify` 후 `escapeHtmlAttr`
- * - `href` / `src` 키  → `escapeHtmlHref` 적용
- * - 그 외 string       → `escapeHtmlAttr` 적용
- *
- * `content`는 이미 안전한 HTML 문자열이라고 가정합니다 (내부 escape 없음).
- *
- * @param tag     - 커스텀 엘리먼트 태그 이름 (예: `"u-ref-tag"`)
- * @param attrs   - 속성 객체
- * @param content - 내부 HTML 문자열 (기본값: `""`)
- * @returns 생성된 HTML 문자열
- *
- * @example
- * buildElementHTML('u-ref-tag', { href: 'https://example.com', disabled: true }, 'Click');
- * // → '<u-ref-tag href="https://example.com" disabled>Click</u-ref-tag>'
- */
-export declare function buildElementHTML(tag: string, attrs?: Record<string, string | boolean | object | null | undefined>, content?: string): string;

package/dist/utilities/elements.js

@@ -1,4 +1,3 @@
-import { escapeHtmlAttr, escapeHtmlHref } from "./sanitizers.js";
 //#region src/utilities/elements.ts
 /**
 * 엘리먼트의 부모 엘리먼트를 반환합니다.
@@ -35,37 +34,5 @@ function querySelectorAllWithin(element, selectors) {
 		return Array.from(nodeList);
 	} else return [];
 }
-/**
-* 지정한 태그, 속성, 내용으로 커스텀 엘리먼트 HTML 문자열을 생성합니다.
-*
-* 속성 값 처리 규칙:
-* - `null` / `undefined` → 해당 속성 생략
-* - `false` (boolean)   → 해당 속성 생략
-* - `true`  (boolean)   → 값 없이 키만 출력 (예: `disabled`)
-* - `object`            → `JSON.stringify` 후 `escapeHtmlAttr`
-* - `href` / `src` 키  → `escapeHtmlHref` 적용
-* - 그 외 string       → `escapeHtmlAttr` 적용
-*
-* `content`는 이미 안전한 HTML 문자열이라고 가정합니다 (내부 escape 없음).
-*
-* @param tag     - 커스텀 엘리먼트 태그 이름 (예: `"u-ref-tag"`)
-* @param attrs   - 속성 객체
-* @param content - 내부 HTML 문자열 (기본값: `""`)
-* @returns 생성된 HTML 문자열
-*
-* @example
-* buildElementHTML('u-ref-tag', { href: 'https://example.com', disabled: true }, 'Click');
-* // → '<u-ref-tag href="https://example.com" disabled>Click</u-ref-tag>'
-*/
-function buildElementHTML(tag, attrs = {}, content = "") {
-	const URL_ATTR = /* @__PURE__ */ new Set(["href", "src"]);
-	const attrStr = Object.entries(attrs).flatMap(([k, v]) => {
-		if (v === void 0 || v == null || v === false) return [];
-		if (v === true) return [k];
-		const raw = typeof v === "object" ? JSON.stringify(v) : String(v);
-		return [`${k}="${URL_ATTR.has(k) ? escapeHtmlHref(raw) : escapeHtmlAttr(raw)}"`];
-	}).join(" ");
-	return attrStr ? `<${tag} ${attrStr}>${content}</${tag}>` : `<${tag}>${content}</${tag}>`;
-}
 //#endregion
-export { buildElementHTML, getParentElement, querySelectorAllWithin, querySelectorWithin };
+export { getParentElement, querySelectorAllWithin, querySelectorWithin };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/components",
   "description": "web-components library based on lit-element made by iyulab",
-  "version": "1.3.4",
+  "version": "1.4.0",
   "keywords": [
     "iyulab",
     "components",
@@ -39,9 +39,8 @@
     "./plugins/*": "./plugins/*"
   },
   "scripts": {
-    "dev": "vite --force",
+    "start": "vite --force",
     "test": "vitest run",
-    "test:watch": "vitest",
     "test:browser": "vitest run --project=browser",
     "build:plugins": "tsc -p plugins/tsconfig.json",
     "build": "eslint && vite build && npm run build:plugins"

package/skills/iyulab-components/SKILL.md

@@ -4,7 +4,7 @@ description: Web component library built on Lit. Covers all u-* custom elements
 license: MIT
 metadata:
   author: iyulab
-  version: "1.0.6"
+  version: "1.4.0"
 ---
 
 # @iyulab/components
@@ -119,7 +119,7 @@ import { UButton, UInput } from '@iyulab/components/react';
 - [`IconRegistry`](./references/utilities/icons.md) — Register and resolve icon libraries
 - [`BrowserStorage`](./references/utilities/browser-storage.md) — Unified localStorage / Cookie API
 - [`converters`](./references/utilities/converters.md) — Lit property attribute converters (array, JSON, date, url…)
-- [`sanitizers`](./references/utilities/sanitizers.md) — XSS-safe HTML/URL escape helpers
+- [`Locale`](./references/utilities/locale.md) — Validation-message locale registry and lookup utility
 - [`elements`](./references/utilities/elements.md) — Shadow-DOM-aware DOM query helpers
 - [`OverlayManager`](./references/utilities/overlay-manager.md) — Internal overlay stack and z-index manager
 
@@ -135,4 +135,3 @@ import { UButton, UInput } from '@iyulab/components/react';
 - [`UFormControlElement<T>`](./references/extensions/form-control.md) — Base for form-associated controls; handles `disabled`, `readonly`, `invalid`, validation lifecycle
 - [`UFloatingElement`](./references/extensions/floating.md) — Base for anchored floating UI (popover, tooltip); wraps `@floating-ui/dom`
 - [`UOverlayElement`](./references/extensions/overlay.md) — Base for full-screen overlays (dialog, drawer); manages focus-trap, scroll-lock, ESC/backdrop close
-- [`UDataElement`](./references/extensions/data.md) — Base for data-driven components; auto-loads JSON from inline `<script type="application/json">`

package/skills/iyulab-components/references/components/input.md

@@ -89,7 +89,6 @@ Text input field with prefix/suffix slots and label. Add `u-option` children for
 
 | Property | Description |
 |----------|-------------|
-| `--input-popover-min-width` | Combobox popover min-width |
-| `--input-popover-max-width` | Combobox popover max-width |
+| `--input-popover-width` | Combobox popover width (fixed to anchor width by default) |
 | `--input-popover-min-height` | Combobox popover min-height |
 | `--input-popover-max-height` | Combobox popover max-height |

package/skills/iyulab-components/references/components/option.md

@@ -51,6 +51,7 @@ Selectable option item. Used inside `u-select`, `u-radio`, and `u-input` (combob
 | Method | Returns | Description |
 |--------|---------|-------------|
 | `getText()` | `string` | Returns the visible text content of the option |
+| `getContent()` | `Node[]` | Returns cloned rich-content nodes used for display rendering |
 
 ## CSS Parts
 

package/skills/iyulab-components/references/components/select.md

@@ -80,7 +80,6 @@ Dropdown select with single or multiple selection, search, and clear support. Fo
 
 | Property | Description |
 |----------|-------------|
-| `--select-popover-min-width` | Dropdown min-width |
-| `--select-popover-max-width` | Dropdown max-width |
+| `--select-popover-width` | Dropdown width (fixed to anchor width by default; long option text ellipsizes instead of widening the popover) |
 | `--select-popover-min-height` | Dropdown min-height |
 | `--select-popover-max-height` | Dropdown max-height |

package/skills/iyulab-components/references/components/tab-panel.md

@@ -50,6 +50,12 @@ Tab-based content switcher. Pair each `u-tab` with a `u-panel` of the same `valu
 | `draggable` | `boolean` | `false` | ✓ | Allow reordering tabs by drag |
 | `disabled` | `boolean` | `false` | ✓ | Disable all tabs |
 
+### Events
+
+| Event | Description |
+|-------|-------------|
+| `change` | Fires on user-driven tab changes (click/keyboard). Not emitted for initial mount or direct `value` assignment. |
+
 ### CSS Parts
 
 | Part | Description |

package/skills/iyulab-components/references/extensions/form-control.md

@@ -14,6 +14,8 @@ Use when building a custom input that should participate in forms (`formAssociat
 import { UFormControlElement } from '@iyulab/components';
 import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit';
+import type { PropertyValues } from 'lit';
+import { Locale } from '@iyulab/components';
 
 @customElement('my-input')
 export class MyInput extends UFormControlElement<string> {
@@ -33,17 +35,22 @@ export class MyInput extends UFormControlElement<string> {
     `;
   }
 
-  validate(): boolean {
+  protected override setValidity(): void {
     if (this.required && !this.value) {
-      this.invalid = true;
-      return false;
+      this.commit({ valueMissing: true }, Locale.getValue('valueMissing'));
+      return;
     }
-    this.invalid = false;
-    return true;
+    this.commit({}, '');
+  }
+
+  protected override shouldValidate(changed: PropertyValues): boolean {
+    return super.shouldValidate(changed);
   }
 
   reset(): void {
     this.value = '';
+    this.setCustomValidity('');
+    this.commit({}, '');
     this.invalid = false;
   }
 }
@@ -75,5 +82,14 @@ export class MyInput extends UFormControlElement<string> {
 
 | Method | Returns | Description |
 |--------|---------|-------------|
-| `validate()` | `boolean` | Run validation logic; set `this.invalid` accordingly |
+| `setValidity()` | `void` | Compute current validity and call `commit(flags, message, anchor?)` |
 | `reset()` | `void` | Reset value and clear validation state |
+
+## Validation Helpers (inherited)
+
+| Member | Type | Description |
+|--------|------|-------------|
+| `validate(report?)` | `boolean` | Validate now (`true` = report/update invalid UI, `false` = silent check) |
+| `setCustomValidity(message)` | `void` | Set or clear custom error text (`''` clears) |
+| `commit(flags, message, anchor?)` | `void` | Apply validity state to `ElementInternals` with native-like custom-error precedence |
+| `shouldValidate(changed)` | `boolean` | Select which property updates should trigger re-validation (`value`/`required` by default) |

package/skills/iyulab-components/references/usage.md

@@ -62,6 +62,16 @@ Theme.set('system');
 const current = Theme.get(); // 'system' | 'light' | 'dark' | undefined
 ```
 
+### Brand color customization
+
+```css
+:root {
+  --u-primary-color: #7c3aed;
+}
+```
+
+Interactive components derive hover/active/surface/outline styles from this token.
+
 ---
 
 ## Icon Setup
@@ -210,6 +220,7 @@ const confirmed = await Dialog.confirm('Delete this item?');
 const name = await Dialog.prompt('Enter your name:', { default: 'Alice' });
 
 // Toast
+Toast.DefaultOptions = { position: 'bottom-center', duration: 3000 };
 Toast.success('Saved!');
 Toast.error('Something went wrong.', { duration: 5000 });
 Toast.message('Hello world', { position: 'bottom-center' });

package/skills/iyulab-components/references/utilities/elements.md

@@ -1,7 +1,7 @@
 # elements
 
 ```ts
-import { getParentElement, querySelectorWithin, querySelectorAllWithin, buildElementHTML } from '@iyulab/components';
+import { getParentElement, querySelectorWithin, querySelectorAllWithin } from '@iyulab/components';
 ```
 
 Shadow-DOM-aware DOM utility helpers.
@@ -37,19 +37,3 @@ Same as `querySelectorWithin` but returns all matches.
 ```ts
 const inputs = querySelectorAllWithin(this, 'u-input');
 ```
-
----
-
-### `buildElementHTML(tag, attrs, content?)`
-
-Builds an XSS-safe custom element HTML string. All attribute values and content are sanitized.
-
-```ts
-const html = buildElementHTML('u-alert', {
-  status: 'success',
-  open: '',
-}, 'File saved.');
-// → '<u-alert status="success" open="">File saved.</u-alert>'
-```
-
-> Use this when dynamically constructing HTML strings for `innerHTML` or server-side rendering.

package/skills/iyulab-components/references/utilities/locale.md

@@ -0,0 +1,36 @@
+# Locale
+
+```ts
+import { Locale } from '@iyulab/components';
+```
+
+Locale registry utility for library-generated validation messages.
+
+## Built-in Locales
+
+Built in: `en`, `ko`, `ja`, `zh-CN`, `zh-TW`, `es`, `fr`, `de`, `pt-BR`, `vi`, `th`, `id`, `ru`, `ar`.
+
+Initial locale is auto-detected from `navigator.language` / `document.documentElement.lang`, with English fallback.
+
+## API
+
+| Method | Description |
+|--------|-------------|
+| `Locale.set(locale)` | Set active locale |
+| `Locale.get()` | Get active locale |
+| `Locale.register(locale, table)` | Register/override locale messages (partial merge supported) |
+| `Locale.getValue(key, params?)` | Resolve a localized message for current locale |
+
+## Example
+
+```ts
+import { Locale } from '@iyulab/components';
+
+Locale.set('ko');
+
+Locale.register('en', {
+  valueMissing: 'Please fill out this field.'
+});
+
+const message = Locale.getValue('valueMissing');
+```

package/skills/iyulab-components/references/utilities/theme.md

@@ -22,6 +22,18 @@ await Theme.init({
 });
 ```
 
+## Primary Color Customization
+
+Interactive components derive their accent palette from `--u-primary-color`.
+
+```css
+:root {
+  --u-primary-color: #7c3aed; /* global brand/accent color */
+}
+```
+
+With this single token override, components such as buttons, checkbox/radio/switch, tab-panel, badge, and tag recalculate hover/active/surface/outline colors automatically.
+
 ## API
 
 | Member | Type | Description |

package/skills/iyulab-components/references/utilities/toast.md

@@ -17,6 +17,11 @@ Toast.info('Update available.');
 Toast.notice('New message received.', { position: 'bottom-right' });
 Toast.message('Hello!', { title: 'Greetings' });
 
+Toast.DefaultOptions = {
+  position: 'bottom-center',
+  duration: 3000
+};
+
 // Full control
 await Toast.show('success', 'Custom message', {
   title: 'Done',
@@ -38,6 +43,7 @@ await Toast.show('success', 'Custom message', {
 | `Toast.warning(content, options?)` | Warning toast |
 | `Toast.error(content, options?)` | Error toast |
 | `Toast.show(status?, content?, options?)` | Generic toast with custom options |
+| `Toast.DefaultOptions` | Global default options applied to every toast call (per-call options win) |
 
 ## ToastOptions
 

package/dist/components/UDataElement.d.ts

@@ -1,44 +0,0 @@
-import { UElement } from './UElement.js';
-/**
- * `UDataElement`는 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 UDataElement extends UElement {
-    static styles: import('lit').CSSResultGroup[];
-    connectedCallback(): void;
-    /**
-     * 지정한 태그와 데이터로 커스텀 엘리먼트 HTML 문자열을 생성합니다.
-     * 데이터는 `<script type="application/json">` 태그로 주입됩니다.
-     * 태그이름이 등록되지 않은 경우 빈 문자열을 반환합니다.
-     *
-     * @param json  - JSON 데이터 객체 또는 문자열
-     * @param attrs - 추가 속성 객체 (선택적, `buildElementHTML` 규칙 적용)
-     * @returns 생성된 HTML 문자열
-     */
-    static buildHTML(json: object | string, 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/UDataElement.js

@@ -1,101 +0,0 @@
-import { UElement } from "./UElement.js";
-import "./icon/UIcon.js";
-import { buildElementHTML } from "../utilities/elements.js";
-import { styles } from "./UDataElement.styles.js";
-import { html } from "lit";
-//#region src/components/UDataElement.ts
-/**
-* `UDataElement`는 light DOM 내 `<script type="application/json">` 태그에서
-* JSON 데이터를 읽어 컴포넌트 프로퍼티에 자동으로 매핑하는 기반 클래스입니다.
-*
-* 사용 예시:
-* ```html
-* <my-component>
-*   <script type="application/json">{ "items": [1, 2, 3] }<\/script>
-* </my-component>
-* ```
-*
-* JSON 최상위 키가 컴포넌트의 프로퍼티 이름과 일치하면 자동으로 할당됩니다.
-*/
-var UDataElement = class extends UElement {
-	static {
-		this.styles = [super.styles, styles];
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		queueMicrotask(() => this.load());
-	}
-	/**
-	* 지정한 태그와 데이터로 커스텀 엘리먼트 HTML 문자열을 생성합니다.
-	* 데이터는 `<script type="application/json">` 태그로 주입됩니다.
-	* 태그이름이 등록되지 않은 경우 빈 문자열을 반환합니다.
-	*
-	* @param json  - JSON 데이터 객체 또는 문자열
-	* @param attrs - 추가 속성 객체 (선택적, `buildElementHTML` 규칙 적용)
-	* @returns 생성된 HTML 문자열
-	*/
-	static buildHTML(json, attrs = {}) {
-		const tag = customElements.getName(this);
-		if (!tag) {
-			console.warn(`Custom element for ${this.name} is not defined.`);
-			return "";
-		}
-		return buildElementHTML(tag, attrs, `<script type="application/json">${(typeof json === "string" ? json : JSON.stringify(json)).replace(/&/g, "\\u0026").replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029").replace(/-->/g, "--\\>")}<\/script>`);
-	}
-	/**
-	* `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\"]");
-				if (!script) throw new Error("Missing <script type=\"application/json\">");
-				data = JSON.parse(script.textContent ?? "{}");
-				script.remove();
-			}
-			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.localName;
-		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>
-    `);
-	}
-};
-//#endregion
-export { UDataElement };

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

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