@iyulab/components 0.3.0 → 1.0.0

package/dist/utilities/Theme.js

@@ -1,144 +1,137 @@
-import * as dark from '../assets/styles/dark.css.js';
-import * as light from '../assets/styles/light.css.js';
-import { BrowserStorage } from './BrowserStorage.js';
-
-const styleSheetBundle = Object.entries(/* #__PURE__ */ Object.assign({"../assets/styles/dark.css": dark,"../assets/styles/light.css": light
-
-
+import { BrowserStorage } from "./BrowserStorage.js";
+import dark_css_default from "../_virtual/_glob-assets_raw/dark.css.e8ac080d.js";
+import light_css_default from "../_virtual/_glob-assets_raw/light.css.637cb2f8.js";
+//#region src/utilities/Theme.ts
+/**
+* 스타일 시트 번들 로드, 내부 자산에서 CSS를 인라인으로 가져옵니다.
+* 빌드 시점에 정적 파일을 포함시키기 위해 vite의 `import.meta.glob`을 사용합니다.
+*/
+var internalStyleBundle = Object.entries(/* @__PURE__ */ Object.assign({
+	"../assets/styles/dark.css": dark_css_default,
+	"../assets/styles/light.css": light_css_default
 })).map(([path, module]) => {
-  const name = path.split("/").pop()?.replace(".css", "") || "";
-  return [name, module.default];
+	return [path.split("/").pop()?.replace(".css", "") || "", module];
 }).filter(([name]) => name !== "");
-class Theme {
-  static {
-    this.STORAGE_THEME_KEY = "theme";
-  }
-  static {
-    this.storage = null;
-  }
-  static {
-    this._isInitialized = false;
-  }
-  static {
-    this._isDebugMode = false;
-  }
-  /** 개별 인스턴스 생성을 방지합니다. */
-  constructor() {
-  }
-  static get isInitialized() {
-    return this._isInitialized;
-  }
-  static get isDebugMode() {
-    return this._isDebugMode;
-  }
-  /**
-   * 테마 유틸리티를 초기화합니다.
-   */
-  static async init(options) {
-    this._isDebugMode = options?.debug || false;
-    this.log("init called", { options });
-    if (options?.store) {
-      this.storage = new BrowserStorage(options.store);
-      this.log("store option provided, initializing BrowserStorage");
-    } else {
-      this.storage = null;
-      this.log("no store option provided, skipping BrowserStorage initialization");
-    }
-    const useBuiltIn = options?.useBuiltIn ?? true;
-    if (useBuiltIn) {
-      this.log("Import enabled: loading styles via internal assets");
-      for (let [name, module] of styleSheetBundle) {
-        const style = document.createElement("style");
-        style.setAttribute("data-name", name);
-        style.textContent = module;
-        if (document.head.querySelector(`style[data-name="${name}"]`)) {
-          this.log("style already present, skipping", name);
-          continue;
-        }
-        document.head.appendChild(style);
-        this.log("appended style to head", name);
-      }
-    } else {
-      const styleHead = document.head.querySelectorAll("style[data-name]");
-      styleHead.forEach((el) => el.remove());
-      this.log("Import disabled: removed internal styles from head");
-    }
-    let theme = options?.default ?? "system";
-    if (this.storage !== null) {
-      const savedTheme = await this.storage.get(this.STORAGE_THEME_KEY);
-      if (savedTheme) {
-        theme = savedTheme;
-        this.log("loaded theme from storage", theme);
-      } else {
-        this.log("no saved theme in storage, using default", theme);
-      }
-    }
-    this.set(theme);
-    this._isInitialized = true;
-    this.log("theme initialized");
-  }
-  /**
-   * 현재 문서에 적용된 테마를 가져옵니다.
-   */
-  static get() {
-    const attr = document.documentElement.getAttribute("data-theme");
-    switch (attr) {
-      case "system":
-        return "system";
-      case "light":
-        return "light";
-      case "dark":
-        return "dark";
-      default:
-        return void 0;
-    }
-  }
-  /**
-   * 현재 문서에 적용할 테마를 설정합니다.
-   */
-  static set(theme) {
-    try {
-      const media = window.matchMedia("(prefers-color-scheme: dark)");
-      if (theme === "system") {
-        document.documentElement.setAttribute("data-theme", "system");
-        media.addEventListener("change", this.handleSystemThemeChanged);
-        this.handleSystemThemeChanged();
-        this.log("system theme applied (data-theme=system)");
-      } else if (theme === "dark") {
-        media.removeEventListener("change", this.handleSystemThemeChanged);
-        document.documentElement.setAttribute("data-theme", "dark");
-        document.documentElement.setAttribute("theme", "dark");
-        this.log("dark theme applied (data-theme=dark, theme=dark)");
-      } else if (theme === "light") {
-        media.removeEventListener("change", this.handleSystemThemeChanged);
-        document.documentElement.setAttribute("data-theme", "light");
-        document.documentElement.setAttribute("theme", "light");
-        this.log("light theme applied (data-theme=light, theme=light)");
-      } else {
-        throw new Error(`Invalid theme: ${theme}. Use 'light', 'dark', or 'system'.`);
-      }
-    } catch (e) {
-      this.log("Error applying theme:", e);
-    }
-    if (this.storage !== null) {
-      this.storage.set(this.STORAGE_THEME_KEY, theme);
-      this.log("saved theme to storage", theme);
-    }
-  }
-  static {
-    /** 시스템 테마 변경을 처리하는 메서드 */
-    this.handleSystemThemeChanged = (_) => {
-      if (document.documentElement.getAttribute("data-theme") === "system") {
-        const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-        document.documentElement.setAttribute("theme", isDark ? "dark" : "light");
-        this.log("system theme changed, applied", isDark ? "dark" : "light");
-      }
-    };
-  }
-  /** 디버그 모드시 로그 출력 함수 (인스턴스 스코프) */
-  static log(...args) {
-    if (this._isDebugMode) console.log("[theme]", ...args);
-  }
-}
-
+/**
+* 현재 문서에 테마를 적용하고 관리하는 유틸리티 전역 인스턴스입니다.
+*/
+var Theme = class {
+	static {
+		this.STORAGE_THEME_KEY = "theme";
+	}
+	static {
+		this.storage = null;
+	}
+	static {
+		this._isInitialized = false;
+	}
+	static {
+		this._isDebugMode = false;
+	}
+	/** 개별 인스턴스 생성을 방지합니다. */
+	constructor() {}
+	static get isInitialized() {
+		return this._isInitialized;
+	}
+	static get isDebugMode() {
+		return this._isDebugMode;
+	}
+	/**
+	* 테마 유틸리티를 초기화합니다.
+	*/
+	static async init(options) {
+		this._isDebugMode = options?.debug || false;
+		this.log("init called", { options });
+		if (options?.store) {
+			this.storage = new BrowserStorage(options.store);
+			this.log("store option provided, initializing BrowserStorage");
+		} else {
+			this.storage = null;
+			this.log("no store option provided, skipping BrowserStorage initialization");
+		}
+		if (options?.useBuiltIn ?? true) {
+			this.log("Import enabled: loading styles via internal assets");
+			for (let [name, module] of internalStyleBundle) {
+				const style = document.createElement("style");
+				style.setAttribute("data-name", name);
+				style.textContent = module;
+				if (document.head.querySelector(`style[data-name="${name}"]`)) {
+					this.log("style already present, skipping", name);
+					continue;
+				}
+				document.head.appendChild(style);
+				this.log("appended style to head", name);
+			}
+		} else {
+			document.head.querySelectorAll("style[data-name]").forEach((el) => el.remove());
+			this.log("Import disabled: removed internal styles from head");
+		}
+		let theme = options?.default ?? "system";
+		if (this.storage !== null) {
+			const savedTheme = await this.storage.get(this.STORAGE_THEME_KEY);
+			if (savedTheme) {
+				theme = savedTheme;
+				this.log("loaded theme from storage", theme);
+			} else this.log("no saved theme in storage, using default", theme);
+		}
+		this.set(theme);
+		this._isInitialized = true;
+		this.log("theme initialized");
+	}
+	/**
+	* 현재 문서에 적용된 테마를 가져옵니다.
+	*/
+	static get() {
+		switch (document.documentElement.getAttribute("data-theme")) {
+			case "system": return "system";
+			case "light": return "light";
+			case "dark": return "dark";
+			default: return;
+		}
+	}
+	/**
+	* 현재 문서에 적용할 테마를 설정합니다.
+	*/
+	static set(theme) {
+		try {
+			const media = window.matchMedia("(prefers-color-scheme: dark)");
+			if (theme === "system") {
+				document.documentElement.setAttribute("data-theme", "system");
+				media.addEventListener("change", this.handleSystemThemeChanged);
+				this.handleSystemThemeChanged();
+				this.log("system theme applied (data-theme=system)");
+			} else if (theme === "dark") {
+				media.removeEventListener("change", this.handleSystemThemeChanged);
+				document.documentElement.setAttribute("data-theme", "dark");
+				document.documentElement.setAttribute("theme", "dark");
+				this.log("dark theme applied (data-theme=dark, theme=dark)");
+			} else if (theme === "light") {
+				media.removeEventListener("change", this.handleSystemThemeChanged);
+				document.documentElement.setAttribute("data-theme", "light");
+				document.documentElement.setAttribute("theme", "light");
+				this.log("light theme applied (data-theme=light, theme=light)");
+			} else throw new Error(`Invalid theme: ${theme}. Use 'light', 'dark', or 'system'.`);
+		} catch (e) {
+			this.log("Error applying theme:", e);
+		}
+		if (this.storage !== null) {
+			this.storage.set(this.STORAGE_THEME_KEY, theme);
+			this.log("saved theme to storage", theme);
+		}
+	}
+	static {
+		this.handleSystemThemeChanged = (_) => {
+			if (document.documentElement.getAttribute("data-theme") === "system") {
+				const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+				document.documentElement.setAttribute("theme", isDark ? "dark" : "light");
+				this.log("system theme changed, applied", isDark ? "dark" : "light");
+			}
+		};
+	}
+	/** 디버그 모드시 로그 출력 함수 (인스턴스 스코프) */
+	static log(...args) {
+		if (this._isDebugMode) console.log("[theme]", ...args);
+	}
+};
+//#endregion
 export { Theme };

package/dist/utilities/Toast.d.ts

@@ -0,0 +1,45 @@
+import { AlertVariant, AlertStatus } from '../components/alert/UAlert.js';
+/** 토스트 알림의 화면 위치 타입 */
+export type ToastPosition = "top-left" | "top-center" | "top-right" | "middle-left" | "middle-center" | "middle-right" | "bottom-left" | "bottom-center" | "bottom-right";
+/** 토스트 알림 옵션 */
+export interface ToastOptions {
+    /** 토스트를 표시할 대상 엘리먼트 (기본: document.body) */
+    target?: HTMLElement;
+    /** 형태 스타일 */
+    variant?: AlertVariant;
+    /** 알림 제목 */
+    title?: string;
+    /** 표시 화면 위치 */
+    position?: ToastPosition;
+    /** 알림 표시 시간 (밀리초 단위) */
+    duration?: number;
+    /** 닫기 버튼 표시 여부 */
+    closable?: boolean;
+}
+/**
+ * 토스트 알림 유틸리티 클래스입니다.
+ */
+export declare class Toast {
+    private static containers;
+    private static elements;
+    /** 개별 인스턴스 생성을 방지합니다. */
+    private constructor();
+    /** 기본 메시지 알림 */
+    static message(content: string, options?: ToastOptions): Promise<void>;
+    /** 일반 알림 */
+    static notice(content: string, options?: ToastOptions): Promise<void>;
+    /** 정보 알림 */
+    static info(content: string, options?: ToastOptions): Promise<void>;
+    /** 성공 알림 */
+    static success(content: string, options?: ToastOptions): Promise<void>;
+    /** 경고 알림 */
+    static warning(content: string, options?: ToastOptions): Promise<void>;
+    /** 에러 알림 */
+    static error(content: string, options?: ToastOptions): Promise<void>;
+    /** 토스트 알림을 생성합니다. */
+    static show(status?: AlertStatus, content?: string, options?: ToastOptions): Promise<void>;
+    /** 컨테이너 키를 생성합니다. */
+    private static getContainerKey;
+    /** 위치에 맞는 컨테이너 엘리먼트를 가져오거나, 생성합니다. */
+    private static getOrCreateContainer;
+}

package/dist/utilities/Toast.js

@@ -0,0 +1,114 @@
+import { UAlert } from "../components/alert/UAlert.js";
+//#region src/utilities/Toast.ts
+/**
+* 토스트 알림 유틸리티 클래스입니다.
+*/
+var Toast = class {
+	static {
+		this.containers = /* @__PURE__ */ new Map();
+	}
+	static {
+		this.elements = /* @__PURE__ */ new Set();
+	}
+	/** 개별 인스턴스 생성을 방지합니다. */
+	constructor() {}
+	/** 기본 메시지 알림 */
+	static async message(content, options) {
+		return this.show(void 0, content, options);
+	}
+	/** 일반 알림 */
+	static async notice(content, options) {
+		return this.show("notice", content, options);
+	}
+	/** 정보 알림 */
+	static async info(content, options) {
+		return this.show("info", content, options);
+	}
+	/** 성공 알림 */
+	static async success(content, options) {
+		return this.show("success", content, options);
+	}
+	/** 경고 알림 */
+	static async warning(content, options) {
+		return this.show("warning", content, options);
+	}
+	/** 에러 알림 */
+	static async error(content, options) {
+		return this.show("error", content, options);
+	}
+	/** 토스트 알림을 생성합니다. */
+	static async show(status, content, 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 : 3e3;
+		this.elements.add(el);
+		const position = options?.position || "top-right";
+		const target = options?.target || document.body;
+		const container = this.getOrCreateContainer(position, target);
+		container.appendChild(el);
+		await el.updateComplete;
+		el.show();
+		el.addEventListener("u-hide", async () => {
+			await new Promise((resolve) => setTimeout(resolve, 200));
+			el.remove();
+			this.elements.delete(el);
+			if (!container.hasChildNodes()) {
+				const containerKey = this.getContainerKey(position, target);
+				container.remove();
+				this.containers.delete(containerKey);
+			}
+		});
+	}
+	/** 컨테이너 키를 생성합니다. */
+	static getContainerKey(position, target) {
+		return `${position}@${target === document.body ? "body" : target.id || `el-${Date.now()}`}`;
+	}
+	/** 위치에 맞는 컨테이너 엘리먼트를 가져오거나, 생성합니다. */
+	static getOrCreateContainer(position, target) {
+		const key = this.getContainerKey(position, target);
+		let container = this.containers.get(key);
+		if (container) return container;
+		container = document.createElement("div");
+		container.style.zIndex = "9999";
+		container.style.display = "flex";
+		container.style.gap = "10px";
+		const isTargeted = target !== document.body;
+		if (isTargeted) {
+			container.style.position = "absolute";
+			if (getComputedStyle(target).position === "static") target.style.position = "relative";
+		} else container.style.position = "fixed";
+		const transformParts = [];
+		if (position.startsWith("top")) {
+			container.style.top = isTargeted ? "8px" : "20px";
+			container.style.flexDirection = "column";
+		} else if (position.startsWith("bottom")) {
+			container.style.bottom = isTargeted ? "8px" : "20px";
+			container.style.flexDirection = "column-reverse";
+		} else {
+			container.style.top = "50%";
+			container.style.flexDirection = "column";
+			transformParts.push("translateY(-50%)");
+		}
+		if (position.endsWith("left")) {
+			container.style.left = isTargeted ? "8px" : "20px";
+			container.style.alignItems = "flex-start";
+		} else if (position.endsWith("right")) {
+			container.style.right = isTargeted ? "8px" : "20px";
+			container.style.alignItems = "flex-end";
+		} else {
+			container.style.left = "50%";
+			container.style.alignItems = "center";
+			transformParts.unshift("translateX(-50%)");
+		}
+		container.style.transform = transformParts.length ? transformParts.join(" ") : "";
+		target.appendChild(container);
+		this.containers.set(key, container);
+		return container;
+	}
+};
+//#endregion
+export { Toast };

package/dist/utilities/converters.d.ts

@@ -6,7 +6,50 @@
  * @param separator - 구분자 문자열 (default: `,`)
  * @returns lit 속성 컨버터 객체
  */
-export declare function arrayAttrConverter<T>(parser: (value: string) => T, separator?: string): {
+export declare function arrayAttrConverter<T>(parser?: (value: string) => T, separator?: string): {
     fromAttribute: (value: string | null) => T[] | undefined;
     toAttribute: (value: T[] | undefined) => string | null;
 };
+/**
+ * 문자열을 JSON 객체로, JSON 객체를 문자열로 변환하는 컨버터를 생성합니다.
+ * `lit-element`의 `property` 데코레이터에서 사용할 수 있습니다.
+ *
+ * @param parser - 문자열을 JSON 객체로 파싱하는 함수 (default: `JSON.parse`)
+ * @returns lit 속성 컨버터 객체
+ */
+export declare function jsonAttrConverter<T>(parser?: (value: string) => T): {
+    fromAttribute: (value: string | null) => T | undefined;
+    toAttribute: (value: T | undefined) => string | null;
+};
+/**
+ * 문자열을 불리언으로, 불리언을 문자열로 변환하는 컨버터를 생성합니다.
+ * `lit-element`의 `property` 데코레이터에서 사용할 수 있습니다.
+ *
+ * @returns lit 속성 컨버터 객체
+ */
+export declare function booleanAttrConverter(): {
+    fromAttribute: (value: string | null) => boolean;
+    toAttribute: (value: boolean) => string | null;
+};
+/**
+ * 문자열을 날짜 객체로, 날짜 객체를 문자열로 변환하는 컨버터를 생성합니다.
+ * `lit-element`의 `property` 데코레이터에서 사용할 수 있습니다.
+ *
+ * @param parser - 문자열을 날짜 객체로 파싱하는 함수 (default: `Date.parse`)
+ * @returns lit 속성 컨버터 객체
+ */
+export declare function dateAttrConverter(parser?: (value: string) => number): {
+    fromAttribute: (value: string | null) => Date | undefined;
+    toAttribute: (value: Date | undefined) => string | null;
+};
+/**
+ * 문자열을 URL 객체로, URL 객체를 문자열로 변환하는 컨버터를 생성합니다.
+ * `lit-element`의 `property` 데코레이터에서 사용할 수 있습니다.
+ *
+ * @param parser - 문자열을 URL 객체로 파싱하는 함수 (default: `new URL()`)
+ * @returns lit 속성 컨버터 객체
+ */
+export declare function urlAttrConverter(parser?: (value: string) => URL): {
+    fromAttribute: (value: string | null) => URL | undefined;
+    toAttribute: (value: URL | undefined) => string | null;
+};

package/dist/utilities/converters.js

@@ -1,14 +1,112 @@
-function arrayAttrConverter(parser, separator = ",") {
-  return {
-    fromAttribute: (value) => {
-      if (!value) return void 0;
-      return value.split(separator).map((v) => parser(v.trim()));
-    },
-    toAttribute: (value) => {
-      if (!value) return null;
-      return value.join(separator);
-    }
-  };
-}
-
-export { arrayAttrConverter };
+//#region src/utilities/converters.ts
+/**
+* 배열을 속성 문자열로, 속성 문자열을 배열로 변환하는 컨버터를 생성합니다.
+* `lit-element`의 `property` 데코레이터에서 사용할 수 있습니다.
+* 
+* @param parser - 문자열을 파싱하는 함수
+* @param separator - 구분자 문자열 (default: `,`)
+* @returns lit 속성 컨버터 객체
+*/
+function arrayAttrConverter(parser = (value) => value, separator = ",") {
+	return {
+		fromAttribute: (value) => {
+			if (!value) return void 0;
+			return value.split(separator).map((v) => parser(v.trim()));
+		},
+		toAttribute: (value) => {
+			if (!value) return null;
+			return value.join(separator);
+		}
+	};
+}
+/**
+* 문자열을 JSON 객체로, JSON 객체를 문자열로 변환하는 컨버터를 생성합니다.
+* `lit-element`의 `property` 데코레이터에서 사용할 수 있습니다.
+* 
+* @param parser - 문자열을 JSON 객체로 파싱하는 함수 (default: `JSON.parse`)
+* @returns lit 속성 컨버터 객체
+*/
+function jsonAttrConverter(parser = JSON.parse) {
+	return {
+		fromAttribute: (value) => {
+			if (!value) return void 0;
+			try {
+				return parser(value);
+			} catch {
+				console.warn(`Failed to parse JSON attribute: ${value}`);
+				return;
+			}
+		},
+		toAttribute: (value) => {
+			if (value === void 0) return null;
+			try {
+				return JSON.stringify(value);
+			} catch {
+				console.warn(`Failed to stringify JSON attribute:`, value);
+				return null;
+			}
+		}
+	};
+}
+/**
+* 문자열을 불리언으로, 불리언을 문자열로 변환하는 컨버터를 생성합니다.
+* `lit-element`의 `property` 데코레이터에서 사용할 수 있습니다.
+*
+* @returns lit 속성 컨버터 객체
+*/
+function booleanAttrConverter() {
+	return {
+		fromAttribute: (value) => {
+			return !value || value === "false" ? false : true;
+		},
+		toAttribute: (value) => {
+			return value ? "" : null;
+		}
+	};
+}
+/**
+* 문자열을 날짜 객체로, 날짜 객체를 문자열로 변환하는 컨버터를 생성합니다.
+* `lit-element`의 `property` 데코레이터에서 사용할 수 있습니다.
+*
+* @param parser - 문자열을 날짜 객체로 파싱하는 함수 (default: `Date.parse`)
+* @returns lit 속성 컨버터 객체
+*/
+function dateAttrConverter(parser = Date.parse) {
+	return {
+		fromAttribute: (value) => {
+			if (!value) return void 0;
+			const timestamp = parser(value);
+			return isNaN(timestamp) ? void 0 : new Date(timestamp);
+		},
+		toAttribute: (value) => {
+			if (!value) return null;
+			return value.toISOString();
+		}
+	};
+}
+/**
+* 문자열을 URL 객체로, URL 객체를 문자열로 변환하는 컨버터를 생성합니다.
+* `lit-element`의 `property` 데코레이터에서 사용할 수 있습니다.
+* 
+* @param parser - 문자열을 URL 객체로 파싱하는 함수 (default: `new URL()`)
+* @returns lit 속성 컨버터 객체
+*/
+function urlAttrConverter(parser = (value) => new URL(value)) {
+	return {
+		fromAttribute: (value) => {
+			if (!value) return void 0;
+			try {
+				return parser(value);
+			} catch {
+				console.warn(`Failed to parse URL attribute: ${value}`);
+				return;
+			}
+		},
+		toAttribute: (value) => {
+			if (!value) return null;
+			return value.href;
+		}
+	};
+}
+//#endregion
+export { arrayAttrConverter, booleanAttrConverter, dateAttrConverter, jsonAttrConverter, urlAttrConverter };

package/dist/utilities/elements.d.ts

@@ -15,3 +15,26 @@ 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;