@iyulab/components 1.3.3 → 1.4.0

package/dist/utilities/Locale.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @iyulab/components 의 경량 로케일 유틸리티.
+ *
+ * 범위: 라이브러리가 스스로 생성하는 chrome 문자열(검증 메시지 등)만 대상.
+ * 일반 i18n 프레임워크가 아니다. 앱 콘텐츠 번역은 consumer 의 i18n 계층이 담당한다.
+ *
+ * en/ko/ja/zh-CN/es/fr 은 빌드 시점에 내장된다 (src/assets/locales/*.json).
+ * 그 외 언어는 register()로 테이블 단위 등록/오버라이드한다.
+ */
+/** 라이브러리가 기본 제공하는 로케일. */
+export type SupportedLocale = 'en' | 'ko' | 'ja' | 'zh-CN' | 'zh-TW' | 'es' | 'fr' | 'de' | 'pt-BR' | 'vi' | 'th' | 'id' | 'ru' | 'ar';
+/** 내장 로케일은 자동완성되지만, 임의의 BCP47 태그도 그대로 받는다. */
+export type LocaleTag = SupportedLocale | (string & {});
+/** 라이브러리가 제공하는 chrome 문자열 키. 지금은 검증 메시지뿐이지만 이후 다른 UI 문구도 추가될 수 있다. */
+export type LocaleMessageKey = 'valueMissing' | 'badInput' | 'typeMismatch' | 'patternMismatch' | 'rangeUnderflow' | 'rangeOverflow' | 'stepMismatch' | 'tooShort' | 'tooLong';
+type LocaleTable = Record<LocaleMessageKey, string>;
+/**
+ * 검증 메시지 로케일을 관리하는 정적 유틸리티입니다.
+ */
+export declare class Locale {
+    /** 개별 인스턴스 생성을 방지합니다. */
+    private constructor();
+    /** 전역 활성 로케일을 지정합니다. */
+    static set(locale: LocaleTag): void;
+    /** 전역 활성 로케일을 반환합니다 (초기값은 브라우저 언어 자동 감지, 실패 시 'en'). */
+    static get(): LocaleTag;
+    /**
+     * 로케일 하나의 메시지 테이블(전체 또는 일부)을 등록합니다.
+     * 이미 존재하는 값(내장 포함) 위에 병합되므로, 일부 키만 넘겨도 나머지 키가 사라지지 않습니다.
+     */
+    static register(locale: LocaleTag, table: Partial<LocaleTable>): void;
+    /**
+     * 현재 활성 로케일 기준으로 메시지를 조회합니다.
+     * `params`가 있으면 템플릿의 `{name}` 자리를 치환합니다.
+     */
+    static getValue(key: LocaleMessageKey, params?: Record<string, string | number>): string;
+}
+export {};

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.3",
+  "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>;
-}