@iyulab/components 1.9.0 → 1.12.0

package/dist/components/badge/UBadge.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { styles } from "./UBadge.styles.js";
 import { html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
@@ -17,9 +17,11 @@ var UBadge = class UBadge extends UElement {
 	render() {
 		if (this.variant === "dot") return nothing;
 		return html`
-      <slot name="prefix"></slot>
-      <slot></slot>
-      <slot name="suffix"></slot>
+      <div class="base" part="base">
+        <slot name="prefix"></slot>
+        <slot></slot>
+        <slot name="suffix"></slot>
+      </div>
     `;
 	}
 };

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

@@ -16,21 +16,32 @@ var styles = css`
   }
 
   /* === Variant (형태) === */
+  /* 여백은 내부 요소가 진다 — :host 에 두면 소비 앱 CSS 리셋에 지워진다. */
+  .base {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: inherit;
+    padding: var(--badge-padding-block, 0.2em) var(--badge-padding-inline, 0.5em);
+    border-radius: inherit;
+  }
+
   :host([variant="square"]) {
-    padding: 0.2em 0.5em;
     border-radius: 0.2em;
   }
   :host([variant="pill"]) {
-    padding: 0.2em 0.5em;
-    border-radius: 999px;
+    border-radius: var(--u-radius-pill);
   }
   :host([variant="dot"]) {
     width: 0.6em;
     height: 0.6em;
     min-width: 0.6em;
     min-height: 0.6em;
-    padding: 0;
-    border-radius: 50%;
+    border-radius: var(--u-radius-circle);
   }
 
   /* === Color (색상) === */

package/dist/components/breadcrumb/UBreadcrumb.js

@@ -1,5 +1,5 @@
 import { UElement } from "../UElement.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import "../icon/UIcon.js";
 import { styles } from "./UBreadcrumb.styles.js";
 import { html } from "lit";

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

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { styles } from "./UBreadcrumbItem.styles.js";
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";

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

@@ -12,7 +12,7 @@ var styles = css`
     cursor: pointer;
   }
   :host:hover {
-    color: var(--u-blue-700);
+    color: var(--u-primary-color-strong);
   }
   :host([disabled]) {
     opacity: 0.5;

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

@@ -18,6 +18,22 @@ export type ButtonSize = "sm" | "md" | "lg";
  * @csspart mask - 로딩 마스크 영역
  *
  * @cssprop --u-primary-color - color="neutral"일 때 버튼 기준색. 지정 시 hover/active/surface 톤이 color-mix()로 자동 파생.
+ * @cssprop --btn-padding-block - 내부 버튼의 상하 여백 (기본: 0.5em)
+ * @cssprop --btn-padding-inline - 내부 버튼의 좌우 여백 (기본: 0.5em, variant="link"는 0)
+ * @cssprop --btn-border-color - 내부 버튼의 테두리 색. variant/hover/active 규칙이 이 값을 정한다
+ *   (기본: transparent)
+ * @cssprop --btn-color - 버튼의 기준색. 아래 파생 토큰이 전부 이 값에서 color-mix()로 계산된다 —
+ *   보통 이것 하나만 덮으면 된다.
+ * @cssprop --btn-color-hover - solid 배경 hover (기본: --btn-color 85% + black)
+ * @cssprop --btn-color-active - solid 배경 active (기본: --btn-color 70% + black)
+ * @cssprop --btn-color-surface - surface 배경 (기본: --btn-color 12% + 배경색)
+ * @cssprop --btn-color-surface-hover - surface 배경 hover (기본: 22%)
+ * @cssprop --btn-color-surface-active - surface 배경 active (기본: 32%)
+ * @cssprop --btn-color-border - 테두리 (기본: --btn-color 45% + 배경색)
+ * @cssprop --btn-color-border-hover - 테두리 hover (기본: 60%)
+ * @cssprop --btn-color-border-active - 테두리 active (기본: 75%)
+ * @cssprop --btn-color-outline-hover - outline 배경 hover (기본: 6%)
+ * @cssprop --btn-color-outline-active - outline 배경 active (기본: 12%)
  */
 export declare class UButton extends UElement {
     static styles: import('lit').CSSResultGroup[];
@@ -25,8 +41,9 @@ export declare class UButton extends UElement {
     /** 버튼 스타일 변형 */
     variant: ButtonVariant;
     /**
-     * Semantic 색상. 기본값 `neutral`은 --u-primary-color 미지정 시 blue로 렌더링(회색에서 변경됨).
-     * `link`는 neutral일 때 기존 파랑 유지, 다른 색 지정 시 재정의. `ghost`는 영향받지 않음.
+     * Semantic 색상. 기본값 `neutral`은 `--u-primary-color`(역할 토큰)로 렌더링된다 —
+     * 즉 브랜드 색을 덮으면 기본 버튼이 함께 따라온다.
+     * `link`는 neutral일 때 primary 계열 유지, 다른 색 지정 시 재정의. `ghost`는 영향받지 않음.
      */
     color: ButtonColor;
     /** 버튼 크기. `font-size`만 변경하며 나머지는 `em` 단위라 비례 조정됨. */

package/dist/components/button/UButton.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import "../spinner/USpinner.js";
 import { styles } from "./UButton.styles.js";
 import { html } from "lit";

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

@@ -3,7 +3,7 @@ import { css } from "lit";
 var styles = css`
   :host {
     /* --btn-color 하나만 정해지면 hover/active/surface/outline 톤이 전부 자동 파생 */
-    --btn-color: var(--u-primary-color, var(--u-blue-600));
+    --btn-color: var(--u-primary-color);
     --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));
@@ -23,9 +23,7 @@ var styles = css`
     font-size: 14px;
     font-weight: 500;
     line-height: 1.5;
-    padding: 0.5em;
-    border: 1px solid transparent;
-    border-radius: 6px;
+    border-radius: var(--u-radius-lg);
     background-color: transparent;
 
     transition: all 0.2s ease;
@@ -71,7 +69,7 @@ var styles = css`
     visibility: hidden;
   }
   :host([rounded]) {
-    border-radius: 9999px;
+    border-radius: var(--u-radius-pill);
   }
   :host([has-spinner]) u-spinner {
     display: none;
@@ -83,37 +81,37 @@ var styles = css`
   :host([variant="solid"]) {
     color: #fff;
     background-color: var(--btn-color);
-    border-color: var(--btn-color);
+    --btn-border-color: var(--btn-color);
   }
   :host([variant="solid"]:hover) {
     background-color: var(--btn-color-hover);
-    border-color: var(--btn-color-hover);
+    --btn-border-color: var(--btn-color-hover);
   }
   :host([variant="solid"]:active) {
     background-color: var(--btn-color-active);
-    border-color: var(--btn-color-active);
+    --btn-border-color: var(--btn-color-active);
   }
 
   /* surface: 채우기 + 경계 */
   :host([variant="surface"]) {
     color: var(--u-txt-color);
     background-color: var(--btn-color-surface);
-    border-color: var(--btn-color-border);
+    --btn-border-color: var(--btn-color-border);
   }
   :host([variant="surface"]:hover) {
     background-color: var(--btn-color-surface-hover);
-    border-color: var(--btn-color-border-hover);
+    --btn-border-color: var(--btn-color-border-hover);
   }
   :host([variant="surface"]:active) {
     background-color: var(--btn-color-surface-active);
-    border-color: var(--btn-color-border-active);
+    --btn-border-color: var(--btn-color-border-active);
   }
 
   /* filled: 채우기만 */
   :host([variant="filled"]) {
     color: var(--u-txt-color);
     background-color: var(--btn-color-surface);
-    border-color: transparent;
+    --btn-border-color: transparent;
   }
   :host([variant="filled"]:hover) {
     background-color: var(--btn-color-surface-hover);
@@ -125,22 +123,22 @@ var styles = css`
   /* outlined: 경계만 */
   :host([variant="outlined"]) {
     color: var(--u-txt-color);
-    border-color: var(--btn-color-border);
+    --btn-border-color: var(--btn-color-border);
     background-color: transparent;
   }
   :host([variant="outlined"]:hover) {
-    border-color: var(--btn-color-border-hover);
+    --btn-border-color: var(--btn-color-border-hover);
     background-color: var(--btn-color-outline-hover);
   }
   :host([variant="outlined"]:active) {
-    border-color: var(--btn-color-border-active);
+    --btn-border-color: var(--btn-color-border-active);
     background-color: var(--btn-color-outline-active);
   }
 
   /* ghost: transparent */
   :host([variant="ghost"]) {
     color: var(--u-txt-color);
-    border-color: transparent;
+    --btn-border-color: transparent;
     background-color: transparent;
   }
   :host([variant="ghost"]:hover) {
@@ -152,18 +150,17 @@ var styles = css`
 
   /* link: blue 링크 스타일 (기본값, color="neutral"일 때도 유지 — 기존 동작 보존) */
   :host([variant="link"]) {
-    color: var(--u-blue-500, #3b82f6);
-    border-color: transparent;
+    color: var(--u-primary-color-weak, #3b82f6);
+    --btn-border-color: transparent;
     background-color: transparent;
-    padding-left: 0;
-    padding-right: 0;
+    --btn-padding-inline: 0;
   }
   :host([variant="link"]:hover) {
-    color: var(--u-blue-600, #2563eb);
+    color: var(--u-primary-color, #2563eb);
     text-decoration: underline;
   }
   :host([variant="link"]:active) {
-    color: var(--u-blue-700, #1d4ed8);
+    color: var(--u-primary-color-strong, #1d4ed8);
   }
   /* link + 명시적 non-neutral color: 링크 자체 색상을 재정의 (예: 파괴적 액션 링크) */
   :host([variant="link"][color]:not([color="neutral"])) {
@@ -176,14 +173,28 @@ var styles = css`
     color: var(--btn-color-active);
   }
 
-  /* === Inner === */
+  /* === Inner ===
+   *
+   * 여백·테두리는 내부 요소가 그린다. :host 에 두면 소비 앱의 CSS 리셋
+   * (* { padding:0; border:0 } — Tailwind preflight 등 사실상 표준 관행)에 지워진다.
+   * 호스트 요소에 대해서는 문서 작성자 스타일이 섀도의 :host 규칙을 이기기 때문이며,
+   * 그 결과 버튼이 글자 높이만 남는다(에러는 없다). 내부 요소는 문서 리셋의 사정권 밖이다.
+   *
+   * 테두리 색은 여전히 :host([variant=...]) 가 정한다 — --btn-border-color 로 내려보내므로
+   * variant/hover/active 규칙은 호스트에 그대로 남는다.
+   */
   button, a {
     all: unset;
+    box-sizing: border-box;   /* all:unset 이 content-box 로 되돌리므로 다시 지정 */
     width: 100%;
     display: inline-flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
+
+    padding: var(--btn-padding-block, 0.5em) var(--btn-padding-inline, 0.5em);
+    border: 1px solid var(--btn-border-color, transparent);
+    border-radius: inherit;
   }
   a {
     text-decoration: none;

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

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { UButton } from "../button/UButton.js";
 import { UIconButton } from "../icon-button/UIconButton.js";
 import { styles } from "./UButtonGroup.styles.js";

package/dist/components/card/UCard.d.ts

@@ -13,6 +13,8 @@ export type CardOrientation = 'vertical' | 'horizontal';
  * @csspart header - 헤더 영역 컨테이너
  * @csspart body - 본문 영역 컨테이너
  * @csspart footer - 푸터 영역 컨테이너
+ * @cssprop --card-border-width - 테두리 두께 (`borderless` 는 0)
+ * @cssprop --card-border-color - 테두리 색
  */
 export declare class UCard extends UElement {
     static styles: import('lit').CSSResultGroup[];

package/dist/components/card/UCard.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { styles } from "./UCard.styles.js";
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
@@ -18,6 +18,7 @@ var UCard = class UCard extends UElement {
 	}
 	render() {
 		return html`
+      <div class="base" part="base">
       <div class="media" part="media">
         <slot name="media" @slotchange=${this.handleSlotChange}></slot>
       </div>
@@ -32,6 +33,7 @@ var UCard = class UCard extends UElement {
           <slot name="footer" @slotchange=${this.handleSlotChange}></slot>
         </footer>
       </div>
+      </div>
     `;
 	}
 	handleSlotChange(e) {

package/dist/components/card/UCard.styles.js

@@ -3,12 +3,26 @@ import { css } from "lit";
 var styles = css`
   :host {
     display: flex;
-    border: 1px solid var(--u-border-color);
-    border-radius: 8px;
+    border-radius: var(--u-radius-xl);
     background-color: var(--u-panel-bg-color);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     overflow: hidden;
+
+    --card-border-width: 1px;
+    --card-border-color: var(--u-border-color);
+  }
+
+  /* 테두리는 내부 요소가 진다 — :host 에 두면 소비 앱 CSS 리셋에 지워진다. */
+  .base {
+    box-sizing: border-box;
+    width: 100%;
+    display: flex;
+    flex-direction: inherit;
+    border: var(--card-border-width) solid var(--card-border-color);
+    border-radius: inherit;
+    overflow: hidden;
   }
+
   :host([orientation="vertical"]) {
     flex-direction: column;
   }
@@ -16,7 +30,7 @@ var styles = css`
     flex-direction: row;
   }
   :host([borderless]) {
-    border: none;
+    --card-border-width: 0;
   }
   :host([shadowless]) {
     box-shadow: none;

package/dist/components/carousel/UCarousel.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import "../button/UButton.js";
 import "../icon/UIcon.js";
 import { styles } from "./UCarousel.styles.js";

package/dist/components/carousel/UCarousel.styles.js

@@ -94,7 +94,7 @@ var styles = css`
     height: 10px;
     padding: 0;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--u-radius-circle);
     background-color: var(--u-neutral-400);
     cursor: pointer;
     transition: all 0.2s ease;

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

@@ -19,6 +19,8 @@ export type CheckboxColor = "blue" | "green" | "red" | "orange" | "teal" | "cyan
  * @cssprop --checkbox-background-color - 체크박스 배경색 (filled variant)
  *
  * @event change - 체크 상태 변경 시 발생
+ *
+ * @cssprop --checkbox-fill-color - 체크된 상태의 채움색 (기본: --u-primary-color)
  */
 export declare class UCheckbox extends UFormControlElement<string> {
     static styles: import('lit').CSSResultGroup[];

package/dist/components/checkbox/UCheckbox.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { UFormControlElement } from "../UFormControlElement.js";
 import "../icon/UIcon.js";
 import { Locale } from "../../utilities/Locale.js";

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

@@ -2,7 +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-fill-color: var(--u-primary-color);
     --checkbox-color: inherit;
     --checkbox-border-color: var(--u-input-border-color);
     --checkbox-background-color: var(--u-input-bg-color);
@@ -27,10 +27,10 @@ var styles = css`
     cursor: default;
   }
   :host([invalid]) {
-    --checkbox-border-color: var(--u-red-600);
+    --checkbox-border-color: var(--u-danger-color);
   }
   :host([invalid]) .footer {
-    color: var(--u-red-600);
+    color: var(--u-danger-color);
   }
   :host([checked]) .checkbox u-icon,
   :host([indeterminate]) .checkbox u-icon {
@@ -44,110 +44,50 @@ var styles = css`
   :host([variant="filled"][checked]),
   :host([variant="filled"][indeterminate]) {
     --checkbox-color: var(--u-neutral-100);
-    --checkbox-border-color: var(--checkbox-fill-color);
-    --checkbox-background-color: var(--checkbox-fill-color);
+    --checkbox-border-color: var(--checkbox-hue, var(--checkbox-fill-color));
+    --checkbox-background-color: var(--checkbox-hue, var(--checkbox-fill-color));
   }
 
   /* === Variant: outline - 테두리만 === */
   :host([variant="outline"][checked]),
   :host([variant="outline"][indeterminate]) {
-    --checkbox-border-color: var(--checkbox-fill-color);
+    --checkbox-color: var(--checkbox-hue, var(--checkbox-fill-color));
+    --checkbox-border-color: var(--checkbox-hue, 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(--checkbox-fill-color);
-    --checkbox-background-color: var(--checkbox-fill-color);
-  }
-  :host([variant="filled"][color="green"][checked]),
-  :host([variant="filled"][color="green"][indeterminate]) {
-    --checkbox-border-color: var(--u-green-600);
-    --checkbox-background-color: var(--u-green-600);
-  }
-  :host([variant="filled"][color="red"][checked]),
-  :host([variant="filled"][color="red"][indeterminate]) {
-    --checkbox-border-color: var(--u-red-600);
-    --checkbox-background-color: var(--u-red-600);
-  }
-  :host([variant="filled"][color="orange"][checked]),
-  :host([variant="filled"][color="orange"][indeterminate]) {
-    --checkbox-border-color: var(--u-orange-600);
-    --checkbox-background-color: var(--u-orange-600);
-  }
-  :host([variant="filled"][color="teal"][checked]),
-  :host([variant="filled"][color="teal"][indeterminate]) {
-    --checkbox-border-color: var(--u-teal-600);
-    --checkbox-background-color: var(--u-teal-600);
-  }
-  :host([variant="filled"][color="cyan"][checked]),
-  :host([variant="filled"][color="cyan"][indeterminate]) {
-    --checkbox-border-color: var(--u-cyan-600);
-    --checkbox-background-color: var(--u-cyan-600);
-  }
-  :host([variant="filled"][color="purple"][checked]),
-  :host([variant="filled"][color="purple"][indeterminate]) {
-    --checkbox-border-color: var(--u-purple-600);
-    --checkbox-background-color: var(--u-purple-600);
-  }
-  :host([variant="filled"][color="pink"][checked]),
-  :host([variant="filled"][color="pink"][indeterminate]) {
-    --checkbox-border-color: var(--u-pink-600);
-    --checkbox-background-color: var(--u-pink-600);
-  }
-  :host([variant="filled"][color="neutral"][checked]),
-  :host([variant="filled"][color="neutral"][indeterminate]) {
-    --checkbox-border-color: var(--u-neutral-600);
-    --checkbox-background-color: var(--u-neutral-600);
+  /* ==========================================================================
+     장식 축 — color= 는 hue 슬롯만 채운다. variant 규칙이 폴백과 함께 읽는다.
+     기본값 blue 는 규칙이 없다 = 슬롯이 비어 브랜드 훅(--checkbox-fill-color)을 탄다.
+     u-tag 와 같은 방식이다 — 슬롯이 채워지면 color= 가 최종 권한을 갖는다.
+     즉 blue 는 장식 축의 한 값이 아니라 "색을 지정하지 않음" 의 표기다.
+     ========================================================================== */
+  :host([color="green"]) {
+    --checkbox-hue: var(--u-green-600);
   }
-
-  /* === Color variants (outline) === */
-  :host([variant="outline"][color="blue"][checked]),
-  :host([variant="outline"][color="blue"][indeterminate]) {
-    --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]) {
-    --checkbox-color: var(--u-green-600);
-    --checkbox-border-color: var(--u-green-600);
-  }
-  :host([variant="outline"][color="red"][checked]),
-  :host([variant="outline"][color="red"][indeterminate]) {
-    --checkbox-color: var(--u-red-600);
-    --checkbox-border-color: var(--u-red-600);
-  }
-  :host([variant="outline"][color="orange"][checked]),
-  :host([variant="outline"][color="orange"][indeterminate]) {
-    --checkbox-color: var(--u-orange-600);
-    --checkbox-border-color: var(--u-orange-600);
-  }
-  :host([variant="outline"][color="teal"][checked]),
-  :host([variant="outline"][color="teal"][indeterminate]) {
-    --checkbox-color: var(--u-teal-600);
-    --checkbox-border-color: var(--u-teal-600);
-  }
-  :host([variant="outline"][color="cyan"][checked]),
-  :host([variant="outline"][color="cyan"][indeterminate]) {
-    --checkbox-color: var(--u-cyan-600);
-    --checkbox-border-color: var(--u-cyan-600);
-  }
-  :host([variant="outline"][color="purple"][checked]),
-  :host([variant="outline"][color="purple"][indeterminate]) {
-    --checkbox-color: var(--u-purple-600);
-    --checkbox-border-color: var(--u-purple-600);
-  }
-  :host([variant="outline"][color="pink"][checked]),
-  :host([variant="outline"][color="pink"][indeterminate]) {
-    --checkbox-color: var(--u-pink-600);
-    --checkbox-border-color: var(--u-pink-600);
-  }
-  :host([variant="outline"][color="neutral"][checked]),
-  :host([variant="outline"][color="neutral"][indeterminate]) {
-    --checkbox-color: var(--u-neutral-600);
-    --checkbox-border-color: var(--u-neutral-600);
+  :host([color="red"]) {
+    --checkbox-hue: var(--u-red-600);
+  }
+  :host([color="orange"]) {
+    --checkbox-hue: var(--u-orange-600);
+  }
+  :host([color="teal"]) {
+    --checkbox-hue: var(--u-teal-600);
+  }
+  :host([color="cyan"]) {
+    --checkbox-hue: var(--u-cyan-600);
+  }
+  :host([color="purple"]) {
+    --checkbox-hue: var(--u-purple-600);
   }
+  :host([color="pink"]) {
+    --checkbox-hue: var(--u-pink-600);
+  }
+  :host([color="neutral"]) {
+    --checkbox-hue: var(--u-neutral-600);
+  }
+
+
 
   .wrapper {
     display: inline-flex;
@@ -197,7 +137,7 @@ var styles = css`
   }
 
   .required {
-    color: var(--u-red-600);
+    color: var(--u-danger-color);
     font-weight: 500;
   }
 
@@ -209,7 +149,7 @@ var styles = css`
   }
 
   :host([invalid]) .description {
-    color: var(--u-red-600);
+    color: var(--u-danger-color);
   }
 `;
 //#endregion

package/dist/components/chip/UChip.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import "../button/UButton.js";
 import "../icon/UIcon.js";
 import "../tooltip/UTooltip.js";

package/dist/components/copy-button/UCopyButton.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import "../button/UButton.js";
 import "../icon/UIcon.js";
 import "../icon-button/UIconButton.js";

package/dist/components/copy-button/UCopyButton.styles.js

@@ -14,12 +14,12 @@ var styles = css`
   }
 
   :host([copied]) u-icon-button {
-    color: var(--u-green-500);
+    color: var(--u-success-color-weak);
   }
 
   /* 라벨 형태(아이콘+텍스트): 복사 완료 시 아이콘/텍스트를 성공색으로 강조 */
   :host([copied]) u-button {
-    color: var(--u-green-500);
+    color: var(--u-success-color-weak);
   }
 `;
 //#endregion

package/dist/components/dialog/UDialog.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { UOverlayElement } from "../UOverlayElement.js";
 import "../button/UButton.js";
 import "../icon/UIcon.js";