@iyulab/components 1.3.4 → 1.5.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/dist/utilities/icons.d.ts

@@ -52,7 +52,7 @@ declare class IconRegistry {
     static has(lib: string): boolean;
     /**
      * 지정된 아이콘 라이브러리를 등록합니다.
-     * 이미 등록된 라이브러리 이름인 경우, 경고 메시지를 출력합니다.
+     * 이미 등록된 라이브러리 이름인 경우, 기존 등록을 덮어쓰지 않고 무시합니다.
      */
     static register(lib: string, resolver: IconResolver): void;
     /**

package/dist/utilities/icons.js

@@ -1,23 +1,22 @@
+import alert_circle_fill_svg_default from "../_virtual/_glob-assets_raw/alert-circle-fill.svg.1e438750.js";
+import alert_triangle_fill_svg_default from "../_virtual/_glob-assets_raw/alert-triangle-fill.svg.1a8797c4.js";
 import bell_fill_svg_default from "../_virtual/_glob-assets_raw/bell-fill.svg.d37c41d9.js";
-import check_circle_fill_svg_default from "../_virtual/_glob-assets_raw/check-circle-fill.svg.51c33a2a.js";
-import check_lg_svg_default from "../_virtual/_glob-assets_raw/check-lg.svg.371c5e78.js";
+import check_svg_default from "../_virtual/_glob-assets_raw/check.svg.4690b01e.js";
 import chevron_down_svg_default from "../_virtual/_glob-assets_raw/chevron-down.svg.0ccd06ea.js";
 import chevron_left_svg_default from "../_virtual/_glob-assets_raw/chevron-left.svg.b4601050.js";
 import chevron_right_svg_default from "../_virtual/_glob-assets_raw/chevron-right.svg.0711bb67.js";
 import chevron_up_svg_default from "../_virtual/_glob-assets_raw/chevron-up.svg.ed917211.js";
-import dash_lg_svg_default from "../_virtual/_glob-assets_raw/dash-lg.svg.b40b8b3a.js";
-import exclamation_circle_fill_svg_default from "../_virtual/_glob-assets_raw/exclamation-circle-fill.svg.dc8c523e.js";
-import exclamation_triangle_fill_svg_default from "../_virtual/_glob-assets_raw/exclamation-triangle-fill.svg.7949d2c7.js";
-import eye_slash_svg_default from "../_virtual/_glob-assets_raw/eye-slash.svg.240afafa.js";
+import circle_check_fill_svg_default from "../_virtual/_glob-assets_raw/circle-check-fill.svg.3f0fcb72.js";
+import copy_svg_default from "../_virtual/_glob-assets_raw/copy.svg.6192f853.js";
+import eye_off_svg_default from "../_virtual/_glob-assets_raw/eye-off.svg.7aa25df0.js";
 import eye_svg_default from "../_virtual/_glob-assets_raw/eye.svg.2e5e9c4c.js";
 import info_circle_fill_svg_default from "../_virtual/_glob-assets_raw/info-circle-fill.svg.6580071d.js";
-import plus_lg_svg_default from "../_virtual/_glob-assets_raw/plus-lg.svg.294e9073.js";
+import minus_svg_default from "../_virtual/_glob-assets_raw/minus.svg.4610de75.js";
+import plus_svg_default from "../_virtual/_glob-assets_raw/plus.svg.d83ead68.js";
 import search_svg_default from "../_virtual/_glob-assets_raw/search.svg.0ba2012d.js";
 import star_fill_svg_default from "../_virtual/_glob-assets_raw/star-fill.svg.f24b5a2d.js";
 import star_svg_default from "../_virtual/_glob-assets_raw/star.svg.4af61468.js";
-import three_dots_vertical_svg_default from "../_virtual/_glob-assets_raw/three-dots-vertical.svg.9fee78c5.js";
-import three_dots_svg_default from "../_virtual/_glob-assets_raw/three-dots.svg.6a7a5b23.js";
-import x_lg_svg_default from "../_virtual/_glob-assets_raw/x-lg.svg.f34b882c.js";
+import x_svg_default from "../_virtual/_glob-assets_raw/x.svg.5596f6bb.js";
 //#region src/utilities/icons.ts
 var defaultIconBaseUrl = "/assets/icons/";
 /**
@@ -38,27 +37,26 @@ function setDefaultBaseUrl(url) {
 * vite의 `import.meta.glob`을 사용하여 내부 경로상의 모든 SVG 파일을 빌드 시점에 한 번에 로드합니다.
 * 이 레지스트리는 런타임 동안 불변이며, 아이콘 조회 시 재사용됩니다.
 */
-var internalIconBundle = new Map(Object.entries(/* #__PURE__ */ Object.assign({
+var InternalIconBundle = new Map(Object.entries(/* #__PURE__ */ Object.assign({
+	"../assets/icons/alert-circle-fill.svg": alert_circle_fill_svg_default,
+	"../assets/icons/alert-triangle-fill.svg": alert_triangle_fill_svg_default,
 	"../assets/icons/bell-fill.svg": bell_fill_svg_default,
-	"../assets/icons/check-circle-fill.svg": check_circle_fill_svg_default,
-	"../assets/icons/check-lg.svg": check_lg_svg_default,
+	"../assets/icons/check.svg": check_svg_default,
 	"../assets/icons/chevron-down.svg": chevron_down_svg_default,
 	"../assets/icons/chevron-left.svg": chevron_left_svg_default,
 	"../assets/icons/chevron-right.svg": chevron_right_svg_default,
 	"../assets/icons/chevron-up.svg": chevron_up_svg_default,
-	"../assets/icons/dash-lg.svg": dash_lg_svg_default,
-	"../assets/icons/exclamation-circle-fill.svg": exclamation_circle_fill_svg_default,
-	"../assets/icons/exclamation-triangle-fill.svg": exclamation_triangle_fill_svg_default,
-	"../assets/icons/eye-slash.svg": eye_slash_svg_default,
+	"../assets/icons/circle-check-fill.svg": circle_check_fill_svg_default,
+	"../assets/icons/copy.svg": copy_svg_default,
+	"../assets/icons/eye-off.svg": eye_off_svg_default,
 	"../assets/icons/eye.svg": eye_svg_default,
 	"../assets/icons/info-circle-fill.svg": info_circle_fill_svg_default,
-	"../assets/icons/plus-lg.svg": plus_lg_svg_default,
+	"../assets/icons/minus.svg": minus_svg_default,
+	"../assets/icons/plus.svg": plus_svg_default,
 	"../assets/icons/search.svg": search_svg_default,
 	"../assets/icons/star-fill.svg": star_fill_svg_default,
 	"../assets/icons/star.svg": star_svg_default,
-	"../assets/icons/three-dots-vertical.svg": three_dots_vertical_svg_default,
-	"../assets/icons/three-dots.svg": three_dots_svg_default,
-	"../assets/icons/x-lg.svg": x_lg_svg_default
+	"../assets/icons/x.svg": x_svg_default
 })).map(([path, module]) => {
 	return [path.split("/").pop()?.replace(".svg", "") || "", module];
 }).filter(([name]) => name !== ""));
@@ -118,11 +116,10 @@ var IconRegistry = class {
 	}
 	/**
 	* 지정된 아이콘 라이브러리를 등록합니다.
-	* 이미 등록된 라이브러리 이름인 경우, 경고 메시지를 출력합니다.
+	* 이미 등록된 라이브러리 이름인 경우, 기존 등록을 덮어쓰지 않고 무시합니다.
 	*/
 	static register(lib, resolver) {
-		if (this.libs.has(lib)) console.warn(`Icon library "${lib}" is already registered`);
-		else this.libs.set(lib, resolver);
+		if (!this.libs.has(lib)) this.libs.set(lib, resolver);
 	}
 	/**
 	* 지정된 아이콘 라이브러리를 등록 해제합니다.
@@ -140,7 +137,7 @@ var IconRegistry = class {
 	}
 };
 IconRegistry.register("internal", (name) => {
-	return internalIconBundle.get(name);
+	return InternalIconBundle.get(name);
 });
 IconRegistry.register("tabler", async (name) => {
 	if (IconCache.has("tabler", name)) return IconCache.get("tabler", name);

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.5.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/_virtual/_glob-assets_raw/check-circle-fill.svg.51c33a2a.js

@@ -1,4 +0,0 @@
-//#region \0glob-assets_raw/check-circle-fill.svg.51c33a2a
-var check_circle_fill_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n    <path d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z\"/>\n</svg>";
-//#endregion
-export { check_circle_fill_svg_default as default };

package/dist/_virtual/_glob-assets_raw/check-lg.svg.371c5e78.js

@@ -1,4 +0,0 @@
-//#region \0glob-assets_raw/check-lg.svg.371c5e78
-var check_lg_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z\"/>\n</svg>";
-//#endregion
-export { check_lg_svg_default as default };

package/dist/_virtual/_glob-assets_raw/dash-lg.svg.b40b8b3a.js

@@ -1,4 +0,0 @@
-//#region \0glob-assets_raw/dash-lg.svg.b40b8b3a
-var dash_lg_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n    <path fill-rule=\"evenodd\" d=\"M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8\"/>\n</svg>";
-//#endregion
-export { dash_lg_svg_default as default };

package/dist/_virtual/_glob-assets_raw/exclamation-circle-fill.svg.dc8c523e.js

@@ -1,4 +0,0 @@
-//#region \0glob-assets_raw/exclamation-circle-fill.svg.dc8c523e
-var exclamation_circle_fill_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n    <path d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2\"/>\n</svg>";
-//#endregion
-export { exclamation_circle_fill_svg_default as default };

package/dist/_virtual/_glob-assets_raw/exclamation-triangle-fill.svg.7949d2c7.js

@@ -1,4 +0,0 @@
-//#region \0glob-assets_raw/exclamation-triangle-fill.svg.7949d2c7
-var exclamation_triangle_fill_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n    <path d=\"M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2\"/>\n</svg>";
-//#endregion
-export { exclamation_triangle_fill_svg_default as default };

package/dist/_virtual/_glob-assets_raw/eye-slash.svg.240afafa.js

@@ -1,4 +0,0 @@
-//#region \0glob-assets_raw/eye-slash.svg.240afafa
-var eye_slash_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z\"/>\n  <path d=\"M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829\"/>\n  <path d=\"M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z\"/>\n</svg>";
-//#endregion
-export { eye_slash_svg_default as default };