@iyulab/components 1.3.4 → 1.4.0

package/dist/components/UOverlayElement.js

@@ -50,12 +50,15 @@ var UOverlayElement = class extends UElement {
 		super.updated(changedProperties);
 		if (changedProperties.has("open")) this.open ? this.setup() : this.cleanup();
 	}
-	/** 
-	* 오버레이를 표시합니다. u-show 이벤트가 취소되면 열리지 않습니다. 
+	/**
+	* 오버레이를 표시합니다. u-show 이벤트가 취소되면 열리지 않습니다.
 	*/
 	show() {
 		if (this.open) return true;
-		if (this.fire("show")) {
+		if (this.fire("show", {
+			bubbles: false,
+			composed: false
+		})) {
 			this.open = true;
 			return true;
 		}
@@ -64,10 +67,17 @@ var UOverlayElement = class extends UElement {
 	/**
 	* 오버레이를 숨깁니다. `hide` 이벤트가 취소되면 닫히지 않습니다.
 	* (이벤트 이름은 `hide`, prefix 없음 — `addEventListener('hide', ...)`로 수신)
+	*
+	* bubbles:false — 중첩된 다이얼로그/드로어/팝오버 조합에서 자식의 hide가
+	* 조상 오버레이까지 버블링되어 조상이 자신의 hide로 오인해 닫히는 사고를 방지한다.
+	* 이 이벤트는 항상 자기 자신(target)에 리스너를 붙이는 패턴으로만 소비된다.
 	*/
 	hide() {
 		if (!this.open) return true;
-		if (this.fire("hide")) {
+		if (this.fire("hide", {
+			bubbles: false,
+			composed: false
+		})) {
 			this.open = false;
 			return true;
 		}

package/dist/components/alert/UAlert.js

@@ -1,11 +1,11 @@
 import { UElement } from "../UElement.js";
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
-import "../icon/UIcon.js";
 import "../button/UButton.js";
+import "../icon/UIcon.js";
 import { styles } from "./UAlert.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 //#region src/components/alert/UAlert.ts
 var UAlert = class UAlert extends UElement {
 	constructor(..._args) {
@@ -56,7 +56,10 @@ var UAlert = class UAlert extends UElement {
 	*/
 	show() {
 		if (this.open) return true;
-		if (this.fire("show")) {
+		if (this.fire("show", {
+			bubbles: false,
+			composed: false
+		})) {
 			this.open = true;
 			return true;
 		}
@@ -67,7 +70,10 @@ var UAlert = class UAlert extends UElement {
 	*/
 	hide() {
 		if (!this.open) return true;
-		if (this.fire("hide")) {
+		if (this.fire("hide", {
+			bubbles: false,
+			composed: false
+		})) {
 			this.open = false;
 			return true;
 		}

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

@@ -39,12 +39,6 @@ var styles = css`
     min-width: 200px;
     max-width: 100%;
     max-height: 50vh;
-    /*
-     * 내부 여백은 .container 에 둔다(:host 아님).
-     * 소비앱의 light-DOM 리셋(예: Tailwind preflight 의 *{padding:0})은
-     * 호스트 엘리먼트의 :host padding 을 덮어버리므로, Shadow DOM 내부
-     * 엘리먼트(.container)에 패딩을 두어 외부 리셋으로부터 보호한다.
-     */
     border-radius: 8px;
     box-shadow: 0 4px 12px var(--u-shadow-color-normal);
     

package/dist/components/avatar/UAvatar.js

@@ -2,8 +2,8 @@ import { UElement } from "../UElement.js";
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { styles } from "./UAvatar.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 //#region src/components/avatar/UAvatar.ts
 var UAvatar = class UAvatar extends UElement {
 	constructor(..._args) {

package/dist/components/badge/UBadge.d.ts

@@ -19,7 +19,7 @@ export declare class UBadge extends UElement {
     color: BadgeColor;
     /** 부모 요소 기준 배치 위치 (설정 시 position: absolute) */
     anchor?: BadgeAnchor;
-    render(): typeof nothing | import('lit-html').TemplateResult<1>;
+    render(): import('lit-html').TemplateResult<1> | typeof nothing;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/badge/UBadge.js

@@ -2,14 +2,14 @@ import { UElement } from "../UElement.js";
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { styles } from "./UBadge.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
 //#region src/components/badge/UBadge.ts
 var UBadge = class UBadge extends UElement {
 	constructor(..._args) {
 		super(..._args);
 		this.variant = "pill";
-		this.color = "neutral";
+		this.color = "blue";
 	}
 	static {
 		this.styles = [super.styles, styles];

package/dist/components/badge/UBadge.styles.js

@@ -40,7 +40,7 @@ var styles = css`
   }
   :host([color="blue"]) {
     color: var(--u-neutral-0);
-    background-color: var(--u-blue-500);
+    background-color: var(--u-primary-color, var(--u-blue-500));
   }
   :host([color="green"]) {
     color: var(--u-neutral-0);

package/dist/components/breadcrumb/UBreadcrumb.js

@@ -2,8 +2,8 @@ import { UElement } from "../UElement.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import "../icon/UIcon.js";
 import { styles } from "./UBreadcrumb.styles.js";
-import { customElement } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement } from "lit/decorators.js";
 //#region src/components/breadcrumb/UBreadcrumb.ts
 var UBreadcrumb = class UBreadcrumb extends UElement {
 	constructor(..._args) {

package/dist/components/breadcrumb-item/UBreadcrumbItem.js

@@ -2,8 +2,8 @@ import { UElement } from "../UElement.js";
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { styles } from "./UBreadcrumbItem.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 //#region src/components/breadcrumb-item/UBreadcrumbItem.ts
 var UBreadcrumbItem = class UBreadcrumbItem extends UElement {

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

@@ -16,6 +16,8 @@ export type ButtonSize = "sm" | "md" | "lg";
  * @csspart button - 내부 버튼 요소
  * @csspart content - 콘텐츠 영역
  * @csspart mask - 로딩 마스크 영역
+ *
+ * @cssprop --u-primary-color - color="neutral"일 때 버튼 기준색. 지정 시 hover/active/surface 톤이 color-mix()로 자동 파생.
  */
 export declare class UButton extends UElement {
     static styles: import('lit').CSSResultGroup[];
@@ -23,16 +25,11 @@ export declare class UButton extends UElement {
     /** 버튼 스타일 변형 */
     variant: ButtonVariant;
     /**
-     * Semantic 색상. 기본값 `"neutral"`은 기존(v1.1.x 이전) 렌더링과 동일 — 하위 호환.
-     * `variant`가 사용하는 색상 스케일을 이 값으로 교체한다(예: `color="red"` + `variant="solid"` → 파괴적 액션 버튼).
-     * `variant="link"`는 `color="neutral"`(기본값)일 때 기존 동작(파랑)을 유지하고, 다른 색을 명시하면 그 색으로 재정의된다.
-     * `variant="ghost"`는 hover/active 배경이 중립 팔레트에 묶여 있지 않아 이 속성의 영향을 받지 않는다.
+     * Semantic 색상. 기본값 `neutral`은 --u-primary-color 미지정 시 blue로 렌더링(회색에서 변경됨).
+     * `link`는 neutral일 때 기존 파랑 유지, 다른 색 지정 시 재정의. `ghost`는 영향받지 않음.
      */
     color: ButtonColor;
-    /**
-     * 버튼 크기. 기본값 `"md"`는 기존(v1.2.0 이전) 렌더링과 동일 — 하위 호환.
-     * `font-size`만 변경하며, padding/spinner/prefix·suffix 여백은 이미 `em` 단위라 함께 비례 축소·확대된다.
-     */
+    /** 버튼 크기. `font-size`만 변경하며 나머지는 `em` 단위라 비례 조정됨. */
     size: ButtonSize;
     /** 경계선 둥글게 여부 */
     rounded: boolean;
@@ -54,9 +51,7 @@ export declare class UButton extends UElement {
     name?: string;
     /** form data에 포함될 value */
     value?: string;
-    /**
-     * ElementInternals는 폼과의 연동, 유효성 검사 상태 관리 등을 지원하는 네이티브 API입니다.
-     */
+    /** 폼 연동을 위한 ElementInternals. */
     internals?: ElementInternals;
     set form(val: string);
     get form(): HTMLFormElement | null;

package/dist/components/button/UButton.js

@@ -3,8 +3,8 @@ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/hel
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import "../spinner/USpinner.js";
 import { styles } from "./UButton.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 //#region src/components/button/UButton.ts
 var UButton = class UButton extends UElement {

package/dist/components/button/UButton.styles.js

@@ -1,6 +1,21 @@
 import { css } from "lit";
 //#region src/components/button/UButton.styles.ts
 var styles = css`
+  :host {
+    /* --btn-color 하나만 정해지면 hover/active/surface/outline 톤이 전부 자동 파생 */
+    --btn-color: var(--u-primary-color, var(--u-blue-600));
+    --btn-color-hover: color-mix(in srgb, var(--btn-color) 85%, black);
+    --btn-color-active: color-mix(in srgb, var(--btn-color) 70%, black);
+    --btn-color-surface: color-mix(in srgb, var(--btn-color) 12%, var(--u-bg-color));
+    --btn-color-surface-hover: color-mix(in srgb, var(--btn-color) 22%, var(--u-bg-color));
+    --btn-color-surface-active: color-mix(in srgb, var(--btn-color) 32%, var(--u-bg-color));
+    --btn-color-border: color-mix(in srgb, var(--btn-color) 45%, var(--u-bg-color));
+    --btn-color-border-hover: color-mix(in srgb, var(--btn-color) 60%, var(--u-bg-color));
+    --btn-color-border-active: color-mix(in srgb, var(--btn-color) 75%, var(--u-bg-color));
+    --btn-color-outline-hover: color-mix(in srgb, var(--btn-color) 6%, var(--u-bg-color));
+    --btn-color-outline-active: color-mix(in srgb, var(--btn-color) 12%, var(--u-bg-color));
+  }
+
   :host {
     position: relative;
     display: inline-flex;
@@ -17,35 +32,19 @@ var styles = css`
     overflow: hidden;
     user-select: none;
     cursor: pointer;
+  }
+
+  /* === Color tokens === */
+  :host([color="blue"])   { --btn-color: var(--u-blue-600); }
+  :host([color="green"])  { --btn-color: var(--u-green-600); }
+  :host([color="red"])    { --btn-color: var(--u-red-600); }
+  :host([color="orange"]) { --btn-color: var(--u-orange-600); }
+  :host([color="teal"])   { --btn-color: var(--u-teal-600); }
+  :host([color="cyan"])   { --btn-color: var(--u-cyan-600); }
+  :host([color="purple"]) { --btn-color: var(--u-purple-600); }
+  :host([color="pink"])   { --btn-color: var(--u-pink-600); }
 
-    /* Semantic color tokens consumed by variant rules below. Default (color="neutral")
-       maps 1:1 onto the neutral scale — zero visual change for existing consumers. */
-    --btn-c-50: var(--u-neutral-50);
-    --btn-c-100: var(--u-neutral-100);
-    --btn-c-200: var(--u-neutral-200);
-    --btn-c-300: var(--u-neutral-300);
-    --btn-c-400: var(--u-neutral-400);
-    --btn-c-500: var(--u-neutral-500);
-    --btn-c-600: var(--u-neutral-600);
-    --btn-c-700: var(--u-neutral-700);
-    --btn-c-800: var(--u-neutral-800);
-  }
-
-  /* === Color tokens ===
-     Non-neutral colors have no "50" tier in the design system (see assets/styles/light.css) —
-     tier "0" (the palest stop) is used in that slot instead of inventing a non-existent token. */
-  :host([color="blue"])   { --btn-c-50: var(--u-blue-0);   --btn-c-100: var(--u-blue-100);   --btn-c-200: var(--u-blue-200);   --btn-c-300: var(--u-blue-300);   --btn-c-400: var(--u-blue-400);   --btn-c-500: var(--u-blue-500);   --btn-c-600: var(--u-blue-600);   --btn-c-700: var(--u-blue-700);   --btn-c-800: var(--u-blue-800); }
-  :host([color="green"])  { --btn-c-50: var(--u-green-0);  --btn-c-100: var(--u-green-100);  --btn-c-200: var(--u-green-200);  --btn-c-300: var(--u-green-300);  --btn-c-400: var(--u-green-400);  --btn-c-500: var(--u-green-500);  --btn-c-600: var(--u-green-600);  --btn-c-700: var(--u-green-700);  --btn-c-800: var(--u-green-800); }
-  :host([color="red"])    { --btn-c-50: var(--u-red-0);    --btn-c-100: var(--u-red-100);    --btn-c-200: var(--u-red-200);    --btn-c-300: var(--u-red-300);    --btn-c-400: var(--u-red-400);    --btn-c-500: var(--u-red-500);    --btn-c-600: var(--u-red-600);    --btn-c-700: var(--u-red-700);    --btn-c-800: var(--u-red-800); }
-  :host([color="orange"]) { --btn-c-50: var(--u-orange-0); --btn-c-100: var(--u-orange-100); --btn-c-200: var(--u-orange-200); --btn-c-300: var(--u-orange-300); --btn-c-400: var(--u-orange-400); --btn-c-500: var(--u-orange-500); --btn-c-600: var(--u-orange-600); --btn-c-700: var(--u-orange-700); --btn-c-800: var(--u-orange-800); }
-  :host([color="teal"])   { --btn-c-50: var(--u-teal-0);   --btn-c-100: var(--u-teal-100);   --btn-c-200: var(--u-teal-200);   --btn-c-300: var(--u-teal-300);   --btn-c-400: var(--u-teal-400);   --btn-c-500: var(--u-teal-500);   --btn-c-600: var(--u-teal-600);   --btn-c-700: var(--u-teal-700);   --btn-c-800: var(--u-teal-800); }
-  :host([color="cyan"])   { --btn-c-50: var(--u-cyan-0);   --btn-c-100: var(--u-cyan-100);   --btn-c-200: var(--u-cyan-200);   --btn-c-300: var(--u-cyan-300);   --btn-c-400: var(--u-cyan-400);   --btn-c-500: var(--u-cyan-500);   --btn-c-600: var(--u-cyan-600);   --btn-c-700: var(--u-cyan-700);   --btn-c-800: var(--u-cyan-800); }
-  :host([color="purple"]) { --btn-c-50: var(--u-purple-0); --btn-c-100: var(--u-purple-100); --btn-c-200: var(--u-purple-200); --btn-c-300: var(--u-purple-300); --btn-c-400: var(--u-purple-400); --btn-c-500: var(--u-purple-500); --btn-c-600: var(--u-purple-600); --btn-c-700: var(--u-purple-700); --btn-c-800: var(--u-purple-800); }
-  :host([color="pink"])   { --btn-c-50: var(--u-pink-0);   --btn-c-100: var(--u-pink-100);   --btn-c-200: var(--u-pink-200);   --btn-c-300: var(--u-pink-300);   --btn-c-400: var(--u-pink-400);   --btn-c-500: var(--u-pink-500);   --btn-c-600: var(--u-pink-600);   --btn-c-700: var(--u-pink-700);   --btn-c-800: var(--u-pink-800); }
-
-  /* === Size ===
-     padding (0.5em), the spinner (1em/0.5em), and prefix/suffix margins (0.5em) are all
-     em-relative already, so changing font-size alone scales the whole button proportionally. */
+  /* === Size === */
   :host([size="sm"]) {
     font-size: 12px;
   }
@@ -83,59 +82,59 @@ var styles = css`
   /* solid: 강한 채움 (기본 color="neutral") */
   :host([variant="solid"]) {
     color: #fff;
-    background-color: var(--btn-c-600);
-    border-color: var(--btn-c-600);
+    background-color: var(--btn-color);
+    border-color: var(--btn-color);
   }
   :host([variant="solid"]:hover) {
-    background-color: var(--btn-c-700);
-    border-color: var(--btn-c-700);
+    background-color: var(--btn-color-hover);
+    border-color: var(--btn-color-hover);
   }
   :host([variant="solid"]:active) {
-    background-color: var(--btn-c-800);
-    border-color: var(--btn-c-800);
+    background-color: var(--btn-color-active);
+    border-color: var(--btn-color-active);
   }
 
   /* surface: 채우기 + 경계 */
   :host([variant="surface"]) {
     color: var(--u-txt-color);
-    background-color: var(--btn-c-100);
-    border-color: var(--btn-c-300);
+    background-color: var(--btn-color-surface);
+    border-color: var(--btn-color-border);
   }
   :host([variant="surface"]:hover) {
-    background-color: var(--btn-c-200);
-    border-color: var(--btn-c-400);
+    background-color: var(--btn-color-surface-hover);
+    border-color: var(--btn-color-border-hover);
   }
   :host([variant="surface"]:active) {
-    background-color: var(--btn-c-300);
-    border-color: var(--btn-c-500);
+    background-color: var(--btn-color-surface-active);
+    border-color: var(--btn-color-border-active);
   }
 
   /* filled: 채우기만 */
   :host([variant="filled"]) {
     color: var(--u-txt-color);
-    background-color: var(--btn-c-100);
+    background-color: var(--btn-color-surface);
     border-color: transparent;
   }
   :host([variant="filled"]:hover) {
-    background-color: var(--btn-c-200);
+    background-color: var(--btn-color-surface-hover);
   }
   :host([variant="filled"]:active) {
-    background-color: var(--btn-c-300);
+    background-color: var(--btn-color-surface-active);
   }
 
   /* outlined: 경계만 */
   :host([variant="outlined"]) {
     color: var(--u-txt-color);
-    border-color: var(--btn-c-300);
+    border-color: var(--btn-color-border);
     background-color: transparent;
   }
   :host([variant="outlined"]:hover) {
-    border-color: var(--btn-c-400);
-    background-color: var(--btn-c-50);
+    border-color: var(--btn-color-border-hover);
+    background-color: var(--btn-color-outline-hover);
   }
   :host([variant="outlined"]:active) {
-    border-color: var(--btn-c-500);
-    background-color: var(--btn-c-100);
+    border-color: var(--btn-color-border-active);
+    background-color: var(--btn-color-outline-active);
   }
 
   /* ghost: transparent */
@@ -168,13 +167,13 @@ var styles = css`
   }
   /* link + 명시적 non-neutral color: 링크 자체 색상을 재정의 (예: 파괴적 액션 링크) */
   :host([variant="link"][color]:not([color="neutral"])) {
-    color: var(--btn-c-500);
+    color: var(--btn-color);
   }
   :host([variant="link"][color]:not([color="neutral"]):hover) {
-    color: var(--btn-c-600);
+    color: var(--btn-color-hover);
   }
   :host([variant="link"][color]:not([color="neutral"]):active) {
-    color: var(--btn-c-700);
+    color: var(--btn-color-active);
   }
 
   /* === Inner === */

package/dist/components/button-group/UButtonGroup.js

@@ -4,8 +4,8 @@ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm
 import { UButton } from "../button/UButton.js";
 import { UIconButton } from "../icon-button/UIconButton.js";
 import { styles } from "./UButtonGroup.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 //#region src/components/button-group/UButtonGroup.ts
 var UButtonGroup = class UButtonGroup extends UElement {
 	constructor(..._args) {

package/dist/components/card/UCard.js

@@ -2,8 +2,8 @@ import { UElement } from "../UElement.js";
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { styles } from "./UCard.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 //#region src/components/card/UCard.ts
 var UCard = class UCard extends UElement {
 	constructor(..._args) {

package/dist/components/carousel/UCarousel.js

@@ -1,11 +1,11 @@
 import { UElement } from "../UElement.js";
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
-import "../icon/UIcon.js";
 import "../button/UButton.js";
+import "../icon/UIcon.js";
 import { styles } from "./UCarousel.styles.js";
-import { customElement, property, state } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
 //#region src/components/carousel/UCarousel.ts
 var UCarousel = class UCarousel extends UElement {
 	constructor(..._args) {

package/dist/components/checkbox/UCheckbox.d.ts

@@ -1,3 +1,4 @@
+import { PropertyValues } from 'lit';
 import { UFormControlElement } from '../UFormControlElement.js';
 export type CheckboxVariant = "filled" | "outline";
 export type CheckboxColor = "blue" | "green" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink" | "neutral";
@@ -29,8 +30,10 @@ export declare class UCheckbox extends UFormControlElement<string> {
     indeterminate: boolean;
     /** 체크 여부 */
     checked: boolean;
+    inputEl?: HTMLInputElement;
+    protected shouldValidate(changed: PropertyValues): boolean;
     render(): import('lit-html').TemplateResult<1>;
-    validate(): boolean;
+    protected setValidity(): void;
     reset(): void;
     private handleInputChange;
 }

package/dist/components/checkbox/UCheckbox.js

@@ -2,9 +2,10 @@ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/hel
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { UFormControlElement } from "../UFormControlElement.js";
 import "../icon/UIcon.js";
+import { Locale } from "../../utilities/Locale.js";
 import { styles } from "./UCheckbox.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
 import { live } from "lit/directives/live.js";
 //#region src/components/checkbox/UCheckbox.ts
 var UCheckbox = class UCheckbox extends UFormControlElement {
@@ -21,7 +22,6 @@ var UCheckbox = class UCheckbox extends UFormControlElement {
 			this.indeterminate = false;
 			this.checked = input.checked;
 			this.internals?.setFormValue(this.checked ? this.value || String(this.checked) : String(this.checked));
-			this.internals?.setValidity(input.validity, this.validationMessage || input.validationMessage, this.shadowRoot?.querySelector(".checkbox") || void 0);
 			if (!this.novalidate) this.validate();
 			this.relay(e);
 		};
@@ -29,6 +29,9 @@ var UCheckbox = class UCheckbox extends UFormControlElement {
 	static {
 		this.styles = [super.styles, styles];
 	}
+	shouldValidate(changed) {
+		return super.shouldValidate(changed) || changed.has("checked");
+	}
 	render() {
 		return html`
       <label class="wrapper" part="wrapper">
@@ -51,15 +54,14 @@ var UCheckbox = class UCheckbox extends UFormControlElement {
         </span>
       </label>
 
-      <div class="description" part="description" ?hidden=${!this.description}>
-        ${this.description}
+      <div class="description" part="description" ?hidden=${!(this.invalid && this.validationMessage) && !this.description}>
+        ${this.invalid && this.validationMessage ? this.validationMessage : this.description}
       </div>
     `;
 	}
-	validate() {
-		if (this.internals) this.invalid = !this.internals.reportValidity();
-		else this.invalid = this.required && !this.checked;
-		return !this.invalid;
+	setValidity() {
+		const missing = !!this.inputEl?.validity.valueMissing;
+		this.commit(missing ? { valueMissing: true } : {}, missing ? Locale.getValue("valueMissing") : "", this.shadowRoot?.querySelector(".checkbox") ?? void 0);
 	}
 	reset() {
 		this.checked = false;
@@ -83,6 +85,7 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 }), __decorateMetadata("design:type", Boolean)], UCheckbox.prototype, "checked", void 0);
+__decorate([query("input", true), __decorateMetadata("design:type", typeof HTMLInputElement === "undefined" ? Object : HTMLInputElement)], UCheckbox.prototype, "inputEl", void 0);
 UCheckbox = __decorate([customElement("u-checkbox")], UCheckbox);
 //#endregion
 export { UCheckbox };

package/dist/components/checkbox/UCheckbox.styles.js

@@ -2,6 +2,7 @@ import { css } from "lit";
 //#region src/components/checkbox/UCheckbox.styles.ts
 var styles = css`
   :host {
+    --checkbox-fill-color: var(--u-primary-color, var(--u-blue-600));
     --checkbox-color: inherit;
     --checkbox-border-color: var(--u-input-border-color);
     --checkbox-background-color: var(--u-input-bg-color);
@@ -43,22 +44,22 @@ var styles = css`
   :host([variant="filled"][checked]),
   :host([variant="filled"][indeterminate]) {
     --checkbox-color: var(--u-neutral-100);
-    --checkbox-border-color: var(--u-blue-600);
-    --checkbox-background-color: var(--u-blue-600);
+    --checkbox-border-color: var(--checkbox-fill-color);
+    --checkbox-background-color: var(--checkbox-fill-color);
   }
 
   /* === Variant: outline - 테두리만 === */
   :host([variant="outline"][checked]),
   :host([variant="outline"][indeterminate]) {
-    --checkbox-border-color: var(--u-blue-600);
+    --checkbox-border-color: var(--checkbox-fill-color);
     --checkbox-background-color: transparent;
   }
 
   /* === Color variants (filled) === */
   :host([variant="filled"][color="blue"][checked]),
   :host([variant="filled"][color="blue"][indeterminate]) {
-    --checkbox-border-color: var(--u-blue-600);
-    --checkbox-background-color: var(--u-blue-600);
+    --checkbox-border-color: var(--checkbox-fill-color);
+    --checkbox-background-color: var(--checkbox-fill-color);
   }
   :host([variant="filled"][color="green"][checked]),
   :host([variant="filled"][color="green"][indeterminate]) {
@@ -104,8 +105,8 @@ var styles = css`
   /* === Color variants (outline) === */
   :host([variant="outline"][color="blue"][checked]),
   :host([variant="outline"][color="blue"][indeterminate]) {
-    --checkbox-color: var(--u-blue-600);
-    --checkbox-border-color: var(--u-blue-600);
+    --checkbox-color: var(--checkbox-fill-color);
+    --checkbox-border-color: var(--checkbox-fill-color);
   }
   :host([variant="outline"][color="green"][checked]),
   :host([variant="outline"][color="green"][indeterminate]) {
@@ -206,6 +207,10 @@ var styles = css`
     font-size: 0.75em;
     line-height: 1.2;
   }
+
+  :host([invalid]) .description {
+    color: var(--u-red-600);
+  }
 `;
 //#endregion
 export { styles };

package/dist/components/chip/UChip.js

@@ -1,13 +1,13 @@
 import { UElement } from "../UElement.js";
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
-import "../icon/UIcon.js";
 import "../button/UButton.js";
+import "../icon/UIcon.js";
 import "../tooltip/UTooltip.js";
 import "../tag/UTag.js";
 import { styles } from "./UChip.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 //#region src/components/chip/UChip.ts
 var UChip = class UChip extends UElement {
 	constructor(..._args) {
@@ -32,7 +32,10 @@ var UChip = class UChip extends UElement {
 		};
 		this.handleRemoveClick = (e) => {
 			e.stopImmediatePropagation();
-			if (this.fire("remove")) this.remove();
+			if (this.fire("remove", {
+				bubbles: false,
+				composed: false
+			})) this.remove();
 		};
 	}
 	static {

package/dist/components/dialog/UDialog.js

@@ -1,11 +1,11 @@
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
-import "../icon/UIcon.js";
 import { UOverlayElement } from "../UOverlayElement.js";
 import "../button/UButton.js";
+import "../icon/UIcon.js";
 import { styles } from "./UDialog.styles.js";
-import { customElement, property, state } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
 //#region src/components/dialog/UDialog.ts
 var UDialog = class UDialog extends UOverlayElement {
 	constructor(..._args) {

package/dist/components/divider/UDivider.js

@@ -2,8 +2,8 @@ import { UElement } from "../UElement.js";
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { styles } from "./UDivider.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 //#region src/components/divider/UDivider.ts
 var UDivider = class UDivider extends UElement {
 	constructor(..._args) {

package/dist/components/drawer/UDrawer.js

@@ -1,11 +1,11 @@
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
-import "../icon/UIcon.js";
 import { UOverlayElement } from "../UOverlayElement.js";
 import "../button/UButton.js";
+import "../icon/UIcon.js";
 import { styles } from "./UDrawer.styles.js";
-import { customElement, property, state } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
 //#region src/components/drawer/UDrawer.ts
 var UDrawer = class UDrawer extends UOverlayElement {
 	constructor(..._args) {

package/dist/components/drawer/UDrawer.styles.js

@@ -7,12 +7,6 @@ var styles = css`
   :host([placement="top"])    { flex-direction: column; justify-content: flex-start; }
   :host([placement="bottom"]) { flex-direction: column; justify-content: flex-end; }
 
-  /*
-   * 패널 크기 — 슬라이드 축 방향 크기를 --drawer-size 로 제어한다.
-   *   좌우(left/right): 너비 = --drawer-size (기본 28rem), 높이 100%
-   *   상하(top/bottom): 높이 = --drawer-size (기본 16rem), 너비 100%
-   * 호스트 앱이 style="--drawer-size: 600px" 로 오버라이드한다.
-   */
   /* 좌우: 높이 100%, 너비 = --drawer-size */
   :host([placement="left"]) .panel,
   :host([placement="right"]) .panel {