@iyulab/components 1.1.1 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## [1.2.0] - 2026-07-02
+
+### Added
+- `UButton`: `color` property (`"neutral" | "blue" | "green" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink"`, default `"neutral"`) — semantic color axis independent of `variant`, e.g. `variant="solid" color="red"` for a destructive action button.
+  - Default `"neutral"` renders identically to the previous (pre-1.2.0) output — fully backward compatible.
+  - Applies to `solid`/`surface`/`filled`/`outlined` (background/border) and `link` (text color, only when explicitly set to a non-neutral color — the default blue `link` look is preserved). `ghost` is unaffected: its hover/active backgrounds use the generic `--u-bg-color-hover`/`--u-bg-color-active` tokens rather than the neutral color scale, so there is no palette to redirect.
+  - Verified visually via a live browser render (all variant × color combinations) in addition to `npm run build`/`npm test`.
+- `UButton`: `size` property (`"sm" | "md" | "lg"`, default `"md"`) — scales the button by changing `font-size` only; padding, the spinner, and prefix/suffix margins are already `em`-relative so they scale proportionally with zero extra CSS.
+  - Default `"md"` (14px) renders identically to the previous (pre-1.2.0) output — fully backward compatible. `sm` = 12px, `lg` = 16px.
+  - Verified visually via a live browser render (sm/md/lg, including with `loading` and prefix icon slots).
+
 ## [1.1.1] - 2026-06-26
 
 ### Fixed

package/dist/_virtual/{_@oxc-project_runtime@0.137.0 → _@oxc-project_runtime@0.138.0}/helpers/esm/decorate.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.138.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);

package/dist/_virtual/{_@oxc-project_runtime@0.137.0 → _@oxc-project_runtime@0.138.0}/helpers/esm/decorateMetadata.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.138.0/helpers/esm/decorateMetadata.js
 function __decorateMetadata(k, v) {
 	if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 }

package/dist/components/UFloatingElement.js

@@ -1,6 +1,6 @@
 import { UElement } from "./UElement.js";
-import __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { property, state } from "lit/decorators.js";

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.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 } from "lit/decorators.js";
 //#region src/components/UFormControlElement.ts
 /**

package/dist/components/UOverlayElement.js

@@ -1,6 +1,6 @@
 import { UElement } from "./UElement.js";
-import __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { OverlayManager } from "../utilities/OverlayManager.js";
 import { arrayAttrConverter } from "../utilities/converters.js";
 import { styles } from "./UOverlayElement.styles.js";

package/dist/components/alert/UAlert.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { styles } from "./UAlert.styles.js";

package/dist/components/avatar/UAvatar.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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";

package/dist/components/badge/UBadge.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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";

package/dist/components/breadcrumb/UBreadcrumb.js

@@ -1,5 +1,5 @@
 import { UElement } from "../UElement.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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";

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

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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";

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

@@ -2,6 +2,8 @@ import { TemplateResult } from 'lit';
 import { UElement } from '../UElement.js';
 export type ButtonVariant = "solid" | "surface" | "filled" | "outlined" | "ghost" | "link";
 export type ButtonType = "button" | "submit" | "reset";
+export type ButtonColor = "neutral" | "blue" | "green" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink";
+export type ButtonSize = "sm" | "md" | "lg";
 /**
  * 클릭 가능한 버튼 컴포넌트입니다. href가 설정되면 앵커 태그로 렌더링됩니다.
  *
@@ -20,6 +22,18 @@ export declare class UButton extends UElement {
     static formAssociated: boolean;
     /** 버튼 스타일 변형 */
     variant: ButtonVariant;
+    /**
+     * Semantic 색상. 기본값 `"neutral"`은 기존(v1.1.x 이전) 렌더링과 동일 — 하위 호환.
+     * `variant`가 사용하는 색상 스케일을 이 값으로 교체한다(예: `color="red"` + `variant="solid"` → 파괴적 액션 버튼).
+     * `variant="link"`는 `color="neutral"`(기본값)일 때 기존 동작(파랑)을 유지하고, 다른 색을 명시하면 그 색으로 재정의된다.
+     * `variant="ghost"`는 hover/active 배경이 중립 팔레트에 묶여 있지 않아 이 속성의 영향을 받지 않는다.
+     */
+    color: ButtonColor;
+    /**
+     * 버튼 크기. 기본값 `"md"`는 기존(v1.2.0 이전) 렌더링과 동일 — 하위 호환.
+     * `font-size`만 변경하며, padding/spinner/prefix·suffix 여백은 이미 `em` 단위라 함께 비례 축소·확대된다.
+     */
+    size: ButtonSize;
     /** 경계선 둥글게 여부 */
     rounded: boolean;
     /** 비활성화 여부 */

package/dist/components/button/UButton.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 "../spinner/USpinner.js";
 import { styles } from "./UButton.styles.js";
 import { customElement, property } from "lit/decorators.js";
@@ -11,6 +11,8 @@ var UButton = class UButton extends UElement {
 	constructor(..._args) {
 		super(..._args);
 		this.variant = "solid";
+		this.color = "neutral";
+		this.size = "md";
 		this.rounded = false;
 		this.disabled = false;
 		this.loading = false;
@@ -97,6 +99,14 @@ __decorate([property({
 	type: String,
 	reflect: true
 }), __decorateMetadata("design:type", Object)], UButton.prototype, "variant", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UButton.prototype, "color", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UButton.prototype, "size", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true

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

@@ -17,6 +17,40 @@ var styles = css`
     overflow: hidden;
     user-select: none;
     cursor: pointer;
+
+    /* 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. */
+  :host([size="sm"]) {
+    font-size: 12px;
+  }
+  :host([size="lg"]) {
+    font-size: 16px;
   }
 
   /* === States === */
@@ -46,62 +80,62 @@ var styles = css`
 
   /* === Variant styles === */
 
-  /* solid: 강한 채움 (neutral) */
+  /* solid: 강한 채움 (기본 color="neutral") */
   :host([variant="solid"]) {
     color: #fff;
-    background-color: var(--u-neutral-600, #525252);
-    border-color: var(--u-neutral-600, #525252);
+    background-color: var(--btn-c-600);
+    border-color: var(--btn-c-600);
   }
   :host([variant="solid"]:hover) {
-    background-color: var(--u-neutral-700, #404040);
-    border-color: var(--u-neutral-700, #404040);
+    background-color: var(--btn-c-700);
+    border-color: var(--btn-c-700);
   }
   :host([variant="solid"]:active) {
-    background-color: var(--u-neutral-800, #262626);
-    border-color: var(--u-neutral-800, #262626);
+    background-color: var(--btn-c-800);
+    border-color: var(--btn-c-800);
   }
 
   /* surface: 채우기 + 경계 */
   :host([variant="surface"]) {
     color: var(--u-txt-color);
-    background-color: var(--u-neutral-100, #f5f5f5);
-    border-color: var(--u-neutral-300, #d4d4d4);
+    background-color: var(--btn-c-100);
+    border-color: var(--btn-c-300);
   }
   :host([variant="surface"]:hover) {
-    background-color: var(--u-neutral-200, #e5e5e5);
-    border-color: var(--u-neutral-400, #a3a3a3);
+    background-color: var(--btn-c-200);
+    border-color: var(--btn-c-400);
   }
   :host([variant="surface"]:active) {
-    background-color: var(--u-neutral-300, #d4d4d4);
-    border-color: var(--u-neutral-500, #737373);
+    background-color: var(--btn-c-300);
+    border-color: var(--btn-c-500);
   }
 
   /* filled: 채우기만 */
   :host([variant="filled"]) {
     color: var(--u-txt-color);
-    background-color: var(--u-neutral-100, #f5f5f5);
+    background-color: var(--btn-c-100);
     border-color: transparent;
   }
   :host([variant="filled"]:hover) {
-    background-color: var(--u-neutral-200, #e5e5e5);
+    background-color: var(--btn-c-200);
   }
   :host([variant="filled"]:active) {
-    background-color: var(--u-neutral-300, #d4d4d4);
+    background-color: var(--btn-c-300);
   }
 
   /* outlined: 경계만 */
   :host([variant="outlined"]) {
     color: var(--u-txt-color);
-    border-color: var(--u-neutral-300, #d4d4d4);
+    border-color: var(--btn-c-300);
     background-color: transparent;
   }
   :host([variant="outlined"]:hover) {
-    border-color: var(--u-neutral-400, #a3a3a3);
-    background-color: var(--u-neutral-50, #fafafa);
+    border-color: var(--btn-c-400);
+    background-color: var(--btn-c-50);
   }
   :host([variant="outlined"]:active) {
-    border-color: var(--u-neutral-500, #737373);
-    background-color: var(--u-neutral-100, #f5f5f5);
+    border-color: var(--btn-c-500);
+    background-color: var(--btn-c-100);
   }
 
   /* ghost: transparent */
@@ -117,7 +151,7 @@ var styles = css`
     background-color: var(--u-bg-color-active);
   }
 
-  /* link: blue 링크 스타일 */
+  /* link: blue 링크 스타일 (기본값, color="neutral"일 때도 유지 — 기존 동작 보존) */
   :host([variant="link"]) {
     color: var(--u-blue-500, #3b82f6);
     border-color: transparent;
@@ -132,6 +166,16 @@ var styles = css`
   :host([variant="link"]:active) {
     color: var(--u-blue-700, #1d4ed8);
   }
+  /* link + 명시적 non-neutral color: 링크 자체 색상을 재정의 (예: 파괴적 액션 링크) */
+  :host([variant="link"][color]:not([color="neutral"])) {
+    color: var(--btn-c-500);
+  }
+  :host([variant="link"][color]:not([color="neutral"]):hover) {
+    color: var(--btn-c-600);
+  }
+  :host([variant="link"][color]:not([color="neutral"]):active) {
+    color: var(--btn-c-700);
+  }
 
   /* === Inner === */
   button, a {

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

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { UButton } from "../button/UButton.js";
 import { UIconButton } from "../icon-button/UIconButton.js";
 import { styles } from "./UButtonGroup.styles.js";

package/dist/components/card/UCard.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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";

package/dist/components/carousel/UCarousel.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { styles } from "./UCarousel.styles.js";

package/dist/components/checkbox/UCheckbox.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { UFormControlElement } from "../UFormControlElement.js";
 import "../icon/UIcon.js";
 import { styles } from "./UCheckbox.styles.js";

package/dist/components/chip/UChip.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 "../tooltip/UTooltip.js";

package/dist/components/dialog/UDialog.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { UOverlayElement } from "../UOverlayElement.js";
 import "../button/UButton.js";

package/dist/components/divider/UDivider.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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";

package/dist/components/drawer/UDrawer.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { UOverlayElement } from "../UOverlayElement.js";
 import "../button/UButton.js";

package/dist/components/field/UField.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 "./UField.styles.js";
 import { customElement, property } from "lit/decorators.js";
 import { html, nothing } from "lit";

package/dist/components/form/UForm.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { UFormControlElement } from "../UFormControlElement.js";
 import { arrayAttrConverter } from "../../utilities/converters.js";
 import { styles } from "./UForm.styles.js";

package/dist/components/icon/UIcon.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { IconRegistry, getDefaultBaseUrl } from "../../utilities/icons.js";
 import { styles } from "./UIcon.styles.js";
 import { customElement, property } from "lit/decorators.js";

package/dist/components/icon-button/UIconButton.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 "../tooltip/UTooltip.js";

package/dist/components/input/UInput.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { UFormControlElement } from "../UFormControlElement.js";
 import "../icon/UIcon.js";
 import "../spinner/USpinner.js";

package/dist/components/menu/UMenu.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { UMenuItem } from "../menu-item/UMenuItem.js";
 import { styles } from "./UMenu.styles.js";
 import { customElement, property } from "lit/decorators.js";

package/dist/components/menu-item/UMenuItem.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { UDivider } from "../divider/UDivider.js";
 import "../popover/UPopover.js";

package/dist/components/option/UOption.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { styles } from "./UOption.styles.js";
 import { customElement, property } from "lit/decorators.js";

package/dist/components/panel/UPanel.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 "./UPanel.styles.js";
 import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";

package/dist/components/popover/UPopover.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { UFloatingElement } from "../UFloatingElement.js";
 import { arrayAttrConverter } from "../../utilities/converters.js";
 import { styles } from "./UPopover.styles.js";

package/dist/components/progress-bar/UProgressBar.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 "./UProgressBar.styles.js";
 import { customElement, property, state } from "lit/decorators.js";
 import { html } from "lit";

package/dist/components/progress-ring/UProgressRing.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 "./UProgressRing.styles.js";
 import { customElement, property, state } from "lit/decorators.js";
 import { html } from "lit";

package/dist/components/radio/URadio.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { UFormControlElement } from "../UFormControlElement.js";
 import "../field/UField.js";
 import { UOption } from "../option/UOption.js";

package/dist/components/rating/URating.js

@@ -1,6 +1,6 @@
 import { formatTemplate, getLocaleStrings, resolveLocale } from "../../core/locale.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { UFormControlElement } from "../UFormControlElement.js";
 import "../icon/UIcon.js";
 import "../field/UField.js";

package/dist/components/select/USelect.js

@@ -1,6 +1,6 @@
 import { formatTemplate, getLocaleStrings, resolveLocale } from "../../core/locale.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { UFormControlElement } from "../UFormControlElement.js";
 import "../icon/UIcon.js";
 import "../spinner/USpinner.js";

package/dist/components/skeleton/USkeleton.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 "./USkeleton.styles.js";
 import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";

package/dist/components/slider/USlider.js

@@ -1,6 +1,6 @@
 import { formatTemplate, getLocaleStrings, resolveLocale } from "../../core/locale.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { UFormControlElement } from "../UFormControlElement.js";
 import "../tooltip/UTooltip.js";
 import "../field/UField.js";

package/dist/components/spinner/USpinner.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 "./USpinner.styles.js";
 import { customElement, property, state } from "lit/decorators.js";
 import { html } from "lit";

package/dist/components/split-panel/USplitPanel.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { arrayAttrConverter } from "../../utilities/converters.js";
 import { styles } from "./USplitPanel.styles.js";
 import { customElement, property, query } from "lit/decorators.js";

package/dist/components/switch/USwitch.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { UFormControlElement } from "../UFormControlElement.js";
 import { styles } from "./USwitch.styles.js";
 import { customElement, property } from "lit/decorators.js";

package/dist/components/tab/UTab.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { styles } from "./UTab.styles.js";

package/dist/components/tab-panel/UTabPanel.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { UPanel } from "../panel/UPanel.js";
 import { UTab } from "../tab/UTab.js";
 import { styles } from "./UTabPanel.styles.js";

package/dist/components/tag/UTag.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 "./UTag.styles.js";
 import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";

package/dist/components/textarea/UTextarea.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { UFormControlElement } from "../UFormControlElement.js";
 import "../field/UField.js";
 import { styles } from "./UTextarea.styles.js";

package/dist/components/tooltip/UTooltip.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { UFloatingElement } from "../UFloatingElement.js";
 import { styles } from "./UTooltip.styles.js";
 import { customElement, property } from "lit/decorators.js";

package/dist/components/tree/UTree.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 { UTreeItem } from "../tree-item/UTreeItem.js";
 import { styles } from "./UTree.styles.js";
 import { customElement, property, state } from "lit/decorators.js";

package/dist/components/tree-item/UTreeItem.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.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 "../spinner/USpinner.js";
 import { styles } from "./UTreeItem.styles.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/components",
   "description": "web-components library based on lit-element made by iyulab",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "keywords": [
     "iyulab",
     "components",

package/skills/iyulab-components/references/components/button.md

@@ -14,6 +14,14 @@ Versatile button with multiple visual variants. Renders as an `<a>` element when
 <u-button variant="ghost" loading>Loading</u-button>
 <u-button href="https://example.com" target="_blank">Link</u-button>
 
+<!-- Semantic color (independent of variant) -->
+<u-button variant="solid" color="red">Delete</u-button>
+<u-button variant="surface" color="green">Approve</u-button>
+
+<!-- Size -->
+<u-button size="sm">Small</u-button>
+<u-button size="lg">Large</u-button>
+
 <!-- With prefix/suffix icons -->
 <u-button variant="solid">
   <u-icon slot="prefix" lib="tabler" name="download"></u-icon>
@@ -37,6 +45,8 @@ Versatile button with multiple visual variants. Renders as an `<a>` element when
 | Property | Type | Default | Reflect | Description |
 |----------|------|---------|---------|-------------|
 | `variant` | `'solid'\|'surface'\|'filled'\|'outlined'\|'ghost'\|'link'` | `'solid'` | ✓ | Visual style |
+| `color` | `'neutral'\|'blue'\|'green'\|'red'\|'orange'\|'teal'\|'cyan'\|'purple'\|'pink'` | `'neutral'` | ✓ | Semantic color, independent of `variant`. `ghost` is unaffected (see notes below). |
+| `size` | `'sm'\|'md'\|'lg'` | `'md'` | ✓ | Button size (12px/14px/16px font-size; padding, spinner, and icon slots scale proportionally). |
 | `rounded` | `boolean` | `false` | ✓ | Pill-shaped border radius |
 | `disabled` | `boolean` | `false` | ✓ | Disable the button |
 | `loading` | `boolean` | `false` | ✓ | Show loading spinner; disables interaction |
@@ -46,6 +56,12 @@ Versatile button with multiple visual variants. Renders as an `<a>` element when
 | `rel` | `string` | — | — | Link `rel` |
 | `download` | `string` | — | — | Download filename |
 
+### `color` notes
+
+- `solid`/`surface`/`filled`/`outlined`: background/border switch to the chosen color's scale.
+- `link`: text color switches, but only when `color` is set to something other than `"neutral"` — the default `link` look stays blue (backward compatible).
+- `ghost`: no visual effect — its hover/active backgrounds use generic surface tokens (`--u-bg-color-hover`/`--u-bg-color-active`), not the neutral color scale.
+
 ## CSS Parts
 
 | Part | Description |