@iyulab/components 1.3.4 → 1.5.0

package/dist/components/UFloatingElement.js

@@ -1,8 +1,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 { getParentElement, querySelectorAllWithin } from "../utilities/elements.js";
 import { styles } from "./UFloatingElement.styles.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 { property, state } from "lit/decorators.js";
 import { arrow, autoPlacement, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
 //#region src/components/UFloatingElement.ts
@@ -73,7 +73,10 @@ var UFloatingElement = class extends UElement {
 		});
 		this.targetEl = target;
 		if (this.open) return true;
-		if (this.fire("show")) {
+		if (this.fire("show", {
+			bubbles: false,
+			composed: false
+		})) {
 			if (this.showDelay > 0) this.showTimer = window.setTimeout(() => {
 				this.showTimer = void 0;
 				this.open = true;
@@ -102,7 +105,10 @@ var UFloatingElement = class extends UElement {
 		await this.updateComplete;
 		this.targetEl = void 0;
 		if (!this.open) return true;
-		if (this.fire("hide")) {
+		if (this.fire("hide", {
+			bubbles: false,
+			composed: false
+		})) {
 			if (this.hideDelay > 0) this.hideTimer = window.setTimeout(() => {
 				this.hideTimer = void 0;
 				this.open = false;
@@ -118,6 +124,9 @@ var UFloatingElement = class extends UElement {
 	* @param target - 위치 계산에 사용할 타겟 엘리먼트입니다.
 	*/
 	async reposition(target) {
+		const targetRect = target.getBoundingClientRect();
+		this.style.setProperty("--anchor-width", `${targetRect.width}px`);
+		this.style.setProperty("--anchor-height", `${targetRect.height}px`);
 		const position = await computePosition(target, this, {
 			strategy: this.strategy,
 			placement: this.placement,

package/dist/components/UFormControlElement.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup } from 'lit';
+import { CSSResultGroup, PropertyValues } from 'lit';
 import { UElement } from './UElement.js';
 /**
  * 폼 컨트롤 컴포넌트의 공통 기반 클래스입니다.
@@ -21,10 +21,6 @@ export declare abstract class UFormControlElement<T> extends UElement {
     label?: string;
     /** 보조 설명 텍스트 */
     description?: string;
-    /** 커스텀 유효성 검증 메시지 */
-    validationMessage?: string;
-    /** chrome 문자열(검증 메시지 등)에 사용할 로케일 태그 (예: 'ko-KR'). 미지정 시 전역 기본/문서 언어를 따른다. */
-    locale?: string;
     /** 폼 제출 시 사용되는 이름 */
     name?: string;
     /** 폼 제출 시 사용되는 값 */
@@ -43,14 +39,48 @@ export declare abstract class UFormControlElement<T> extends UElement {
      * ElementInternals를 지원하지 않는 브라우저에서는 undefined를 반환합니다.
      */
     get validity(): ValidityState | undefined;
+    /**
+     * 지금 `internals`에 설정된 유효성 메시지입니다. `setValidity()`가 계산한 값을
+     * 그대로 반영하는 읽기 전용 파생값이며, 별도로 저장하지 않는다.
+     * ElementInternals를 지원하지 않는 브라우저에서는 빈 문자열을 반환한다.
+     */
+    get validationMessage(): string;
+    /** `setCustomValidity()`로 주입된 커스텀 메시지. 비어있으면 커스텀 메시지가 없는 상태. */
+    private customMessage;
+    /**
+     * 네이티브 `HTMLInputElement.setCustomValidity()`와 동일한 API입니다.
+     * 상태(및 `internals`)만 갱신할 뿐 화면은 건드리지 않는다 — UI 반영은 항상 `validate()`의 몫이다.
+     * 빈 문자열을 넘기면 해제되어 원래 자동 계산된 메시지로 돌아간다.
+     */
+    setCustomValidity(message: string): void;
+    /**
+     * 각 컴포넌트의 `setValidity()`가 계산한 flags/message를 `internals.setValidity()`로
+     * 반영하는 공통 헬퍼입니다. `setCustomValidity()`로 커스텀 메시지가 주입돼 있으면
+     * 네이티브와 동일하게 그 메시지가 다른 모든 검증 결과보다 우선한다.
+     */
+    protected commit(flags: ValidityStateFlags, message: string, anchor?: HTMLElement): void;
     connectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * 어떤 속성이 바뀌었을 때 `setValidity()`를 다시 호출할지 결정합니다.
+     * 기본값은 `value`/`required`. `checked`처럼 다른 속성으로 상태를
+     * 표현하는 컴포넌트는 override합니다 (`super.shouldValidate(changed) || changed.has('checked')`).
+     */
+    protected shouldValidate(changed: PropertyValues): boolean;
+    /**
+     * 지금 상태를 검증해 `internals.setValidity(flags, message, anchor)`를 호출합니다.
+     * 각 컴포넌트가 자신의 검증 규칙과 메시지 조회(`Locale.getValue()`)를 직접 구현합니다.
+     */
+    protected abstract setValidity(): void;
     /**
-     * 컴포넌트 자체 유효성을 검증하고 `invalid` 상태를 갱신합니다.
-     * 각 컴포넌트가 자신의 검증 로직으로 구현합니다.
+     * 컴포넌트 자체 유효성을 검증합니다.
      *
+     * @param report `true`(기본값)면 `invalid` 상태(및 에러 메시지 표시)를 갱신한다.
+     *   `false`면 화면에 아무 영향 없이 유효 여부만 조용히 확인한다 — 네이티브
+     *   `checkValidity()`(조용히 확인) vs `reportValidity()`(UI 갱신)와 같은 관계.
      * @returns 유효하면 `true`, 아니면 `false`
      */
-    abstract validate(): boolean;
+    validate(report?: boolean): boolean;
     /**
      * 폼이 리셋될 때 호출되는 메서드입니다.
      * 각 컴포넌트가 자신의 초기 상태로 리셋하는 로직을 구현합니다.

package/dist/components/UFormControlElement.js

@@ -1,7 +1,7 @@
 import { UElement } from "./UElement.js";
-import { styles } from "./UFormControlElement.styles.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 "./UFormControlElement.styles.js";
 import { property } from "lit/decorators.js";
 //#region src/components/UFormControlElement.ts
 /**
@@ -16,6 +16,7 @@ var UFormControlElement = class extends UElement {
 		this.required = false;
 		this.invalid = false;
 		this.novalidate = false;
+		this.customMessage = "";
 	}
 	static {
 		this.styles = [super.styles, styles];
@@ -23,24 +24,80 @@ var UFormControlElement = class extends UElement {
 	static {
 		this.formAssociated = true;
 	}
-	/** 
+	/**
 	* 폼과의 연동을 위해 `form` 속성을 제공합니다. ElementInternals를 지원하는 브라우저에서 폼 요소에 접근할 수 있습니다.
-	* 지원하지 않는 브라우저에서는 null을 반환합니다. 
+	* 지원하지 않는 브라우저에서는 null을 반환합니다.
 	*/
 	get form() {
 		return this.internals?.form ?? null;
 	}
-	/** 
+	/**
 	* 각 컴포넌트가 자신의 검증 로직으로 validity 상태를 갱신하면, 이 객체를 통해 유효성 상태를 확인할 수 있습니다.
 	* ElementInternals를 지원하지 않는 브라우저에서는 undefined를 반환합니다.
 	*/
 	get validity() {
 		return this.internals?.validity;
 	}
+	/**
+	* 지금 `internals`에 설정된 유효성 메시지입니다. `setValidity()`가 계산한 값을
+	* 그대로 반영하는 읽기 전용 파생값이며, 별도로 저장하지 않는다.
+	* ElementInternals를 지원하지 않는 브라우저에서는 빈 문자열을 반환한다.
+	*/
+	get validationMessage() {
+		return this.internals?.validationMessage ?? "";
+	}
+	/**
+	* 네이티브 `HTMLInputElement.setCustomValidity()`와 동일한 API입니다.
+	* 상태(및 `internals`)만 갱신할 뿐 화면은 건드리지 않는다 — UI 반영은 항상 `validate()`의 몫이다.
+	* 빈 문자열을 넘기면 해제되어 원래 자동 계산된 메시지로 돌아간다.
+	*/
+	setCustomValidity(message) {
+		this.customMessage = message;
+		this.setValidity();
+	}
+	/**
+	* 각 컴포넌트의 `setValidity()`가 계산한 flags/message를 `internals.setValidity()`로
+	* 반영하는 공통 헬퍼입니다. `setCustomValidity()`로 커스텀 메시지가 주입돼 있으면
+	* 네이티브와 동일하게 그 메시지가 다른 모든 검증 결과보다 우선한다.
+	*/
+	commit(flags, message, anchor) {
+		if (this.customMessage) this.internals?.setValidity({ customError: true }, this.customMessage, anchor);
+		else this.internals?.setValidity(flags, message, anchor);
+	}
 	connectedCallback() {
 		super.connectedCallback();
 		if ("attachInternals" in this) this.internals = this.attachInternals();
 	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (this.shouldValidate(changedProperties)) {
+			this.setValidity();
+			this.requestUpdate();
+		}
+	}
+	/**
+	* 어떤 속성이 바뀌었을 때 `setValidity()`를 다시 호출할지 결정합니다.
+	* 기본값은 `value`/`required`. `checked`처럼 다른 속성으로 상태를
+	* 표현하는 컴포넌트는 override합니다 (`super.shouldValidate(changed) || changed.has('checked')`).
+	*/
+	shouldValidate(changed) {
+		return changed.has("value") || changed.has("required");
+	}
+	/**
+	* 컴포넌트 자체 유효성을 검증합니다.
+	*
+	* @param report `true`(기본값)면 `invalid` 상태(및 에러 메시지 표시)를 갱신한다.
+	*   `false`면 화면에 아무 영향 없이 유효 여부만 조용히 확인한다 — 네이티브
+	*   `checkValidity()`(조용히 확인) vs `reportValidity()`(UI 갱신)와 같은 관계.
+	* @returns 유효하면 `true`, 아니면 `false`
+	*/
+	validate(report = true) {
+		this.setValidity();
+		this.requestUpdate();
+		const valid = this.internals ? this.internals.checkValidity() : true;
+		if (report) this.invalid = !valid;
+		return valid;
+	}
 };
 __decorate([property({
 	type: Boolean,
@@ -61,8 +118,6 @@ __decorate([property({
 __decorate([property({ type: Boolean }), __decorateMetadata("design:type", Boolean)], UFormControlElement.prototype, "novalidate", void 0);
 __decorate([property({ type: String }), __decorateMetadata("design:type", String)], UFormControlElement.prototype, "label", void 0);
 __decorate([property({ type: String }), __decorateMetadata("design:type", String)], UFormControlElement.prototype, "description", void 0);
-__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UFormControlElement.prototype, "validationMessage", void 0);
-__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UFormControlElement.prototype, "locale", void 0);
 __decorate([property({ type: String }), __decorateMetadata("design:type", String)], UFormControlElement.prototype, "name", void 0);
 __decorate([property({ type: Object }), __decorateMetadata("design:type", Object)], UFormControlElement.prototype, "value", void 0);
 //#endregion

package/dist/components/UOverlayElement.d.ts

@@ -52,6 +52,10 @@ export declare abstract class UOverlayElement extends UElement {
     /**
      * 오버레이를 숨깁니다. `hide` 이벤트가 취소되면 닫히지 않습니다.
      * (이벤트 이름은 `hide`, prefix 없음 — `addEventListener('hide', ...)`로 수신)
+     *
+     * bubbles:false — 중첩된 다이얼로그/드로어/팝오버 조합에서 자식의 hide가
+     * 조상 오버레이까지 버블링되어 조상이 자신의 hide로 오인해 닫히는 사고를 방지한다.
+     * 이 이벤트는 항상 자기 자신(target)에 리스너를 붙이는 패턴으로만 소비된다.
      */
     hide(): boolean;
     /** closeOn 정책에 따라 닫기를 시도합니다. */

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) {
@@ -39,7 +39,7 @@ var UAlert = class UAlert extends UElement {
             variant="ghost"
             ?hidden=${!this.closable}
             @click=${this.hide}>
-            <u-icon lib="internal" name="x-lg"></u-icon>
+            <u-icon lib="internal" name="x"></u-icon>
           </u-button>
         </div>
         <div class="content" part="content" scrollable>
@@ -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;
 		}
@@ -76,9 +82,9 @@ var UAlert = class UAlert extends UElement {
 	/** Alert 상태에 따른 아이콘 이름을 반환합니다. */
 	mapIcon(status) {
 		switch (status) {
-			case "error": return "exclamation-circle-fill";
-			case "warning": return "exclamation-triangle-fill";
-			case "success": return "check-circle-fill";
+			case "error": return "alert-circle-fill";
+			case "warning": return "alert-triangle-fill";
+			case "success": return "circle-check-fill";
 			case "info": return "info-circle-fill";
 			case "notice": return "bell-fill";
 			default: return "bell-fill";

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) {