@iyulab/components 1.18.0 → 1.21.0

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

@@ -2,7 +2,18 @@ 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";
+/**
+ * 두 축이 한 속성에 병존한다.
+ *
+ * - **역할 축**(`primary`·`info`·`success`·`warning`·`danger`) — *의미*를 말한다.
+ *   색은 소비자의 역할 토큰이 정하므로 **리브랜딩을 따라오고**, 대비 계약을 물려받는다.
+ * - **장식 축**(`blue`·`purple` …) — *색 자체*를 말한다. 소비자가 고른 색이므로
+ *   리브랜딩에 **의도적으로 면역**이다.
+ *
+ * ★브랜드가 빨강인 제품에서 `color="red"` 는 브랜드와 위험을 같은 이름으로 만든다 —
+ * 그래서 위험은 `color="danger"` 로 쓴다.
+ */
+export type ButtonColor = "neutral" | "primary" | "info" | "success" | "warning" | "danger" | "blue" | "green" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink";
 export type ButtonSize = "sm" | "md" | "lg";
 /**
  * 클릭 가능한 버튼 컴포넌트입니다. href가 설정되면 앵커 태그로 렌더링됩니다.
@@ -19,11 +30,19 @@ export type ButtonSize = "sm" | "md" | "lg";
  *
  * @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-padding-inline - 내부 버튼의 좌우 여백 (기본: 1em, variant="link"는 0).
+ *   ⚠1.20.0 에서 0.5em → 1em. 세로와 같은 값이라 글자가 테두리에 붙어 있었다.
+ *   최소높이는 상하 여백에서 파생되므로(`1.5em + 상하×2 + 2px`) 이 값을 덮어도 높이는 안 변한다.
  * @cssprop --btn-border-color - 내부 버튼의 테두리 색. variant/hover/active 규칙이 이 값을 정한다
  *   (기본: transparent)
- * @cssprop --btn-color - 버튼의 기준색. 아래 파생 토큰이 전부 이 값에서 color-mix()로 계산된다 —
+ * @cssprop --btn-color - 버튼의 **면** 색. 아래 파생 토큰이 전부 이 값에서 color-mix()로 계산된다 —
  *   보통 이것 하나만 덮으면 된다.
+ * @cssprop --btn-txt-color - 그 **면 위**의 글자색 — variant="solid" 가 읽는다
+ *   (기본: #fff · 역할 값 지정 시 --u-{role}-txt-color)
+ * @cssprop --btn-color-strong - **바탕 위**의 글자색 — variant="link" 가 읽는다.
+ *   면과 요구가 반대라 슬롯이 따로 있다 (기본: --btn-color 와 동일 · 역할 값 지정 시 --u-{role}-color-strong)
+ * @cssprop --btn-color-strong-hover - 바탕 위 글자 hover (기본: 85% + black · 역할 값은 움직이지 않고 밑줄로 강조)
+ * @cssprop --btn-color-strong-active - 바탕 위 글자 active (기본: 70% + black · 역할 값은 고정)
  * @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% + 배경색)

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

@@ -4,6 +4,23 @@ var styles = css`
   :host {
     /* --btn-color 하나만 정해지면 hover/active/surface/outline 톤이 전부 자동 파생 */
     --btn-color: var(--u-primary-color, #1976D2);
+
+    /* ★색 슬롯이 셋인 이유 — 같은 색이 세 자리에서 요구가 다르다.
+       시트의 역할 층이 이미 이 구분을 갖고 있어(-color = 면 · -strong = 바탕 위 글자 ·
+       -txt-color = 면 위 글자) 슬롯 이름을 그 어법에 1:1 로 맞춘다.
+
+         --btn-color         면(solid 배경 · 테두리 · surface 혼합의 원료)
+         --btn-txt-color     그 면 **위**의 글자   ← solid
+         --btn-color-strong  바탕 **위**의 글자    ← link
+
+       ⚠셋을 하나로 접으면 다크에서 깨진다: 바탕(#121212)과 on-color(#FFFFFF)가 정반대라
+       한 단이 둘을 맡을 수 없다(Cycle 141 실측 — 다크 primary 면 6.09 ✓ / 바탕 3.07 ✗).
+       장식 축(color="purple" 등)은 세 슬롯이 종전 값으로 수렴하므로 렌더가 변하지 않는다. */
+    --btn-txt-color: #fff;
+    --btn-color-strong: var(--btn-color);
+    --btn-color-strong-hover: color-mix(in srgb, var(--btn-color-strong) 85%, black);
+    --btn-color-strong-active: color-mix(in srgb, var(--btn-color-strong) 70%, black);
+
     --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, #FFFFFF));
@@ -26,13 +43,59 @@ var styles = css`
     border-radius: var(--u-radius-lg, 6px);
     background-color: transparent;
 
-    transition: all 0.2s ease;
+    transition: all var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
     overflow: hidden;
     user-select: none;
     cursor: pointer;
   }
 
-  /* === Color tokens === */
+  /* === Role tokens (의미 축) ===
+     color="danger" 는 *"위험한 동작"* 을 뜻하고, 그 색이 무엇인지는 소비자의 역할 토큰이
+     정한다. 장식 축과 반대로 **리브랜딩을 따라오고**, 대비 계약(token-contrast.test.ts)이
+     지키는 짝을 그대로 물려받는다.
+
+     ★장식 램프(shade-600)로 해석하면 안 된다 — 라이트에서 그 단 위의 흰 글자는 8색 중
+     6색이 AA 미달이다(green 3.30 · orange 2.37 · cyan 2.74 …). 역할 값을 쓰는 이유가
+     *의미 이름*인데 그 대가로 대비를 잃으면 앞뒤가 맞지 않는다. */
+  :host([color="primary"]) {
+    --btn-color: var(--u-primary-color, #1976D2);
+    --btn-color-strong: var(--u-primary-color-strong, #1565C0);
+    --btn-txt-color: var(--u-primary-txt-color, #FFFFFF);
+  }
+  :host([color="info"]) {
+    --btn-color: var(--u-info-color, #1976D2);
+    --btn-color-strong: var(--u-info-color-strong, #1565C0);
+    --btn-txt-color: var(--u-info-txt-color, #FFFFFF);
+  }
+  :host([color="success"]) {
+    --btn-color: var(--u-success-color, #2E7D32);
+    --btn-color-strong: var(--u-success-color-strong, #1B5E20);
+    --btn-txt-color: var(--u-success-txt-color, #FFFFFF);
+  }
+  :host([color="warning"]) {
+    --btn-color: var(--u-warning-color, #FDD835);
+    --btn-color-strong: var(--u-warning-color-strong, #8A4A00);
+    --btn-txt-color: var(--u-warning-txt-color, #000000);
+  }
+  :host([color="danger"]) {
+    --btn-color: var(--u-danger-color, #D32F2F);
+    --btn-color-strong: var(--u-danger-color-strong, #C62828);
+    --btn-txt-color: var(--u-danger-txt-color, #FFFFFF);
+  }
+
+  /* 역할 축의 link 는 쉬는 상태가 **이미 대비로 선택된 단**(-strong)이라 더 어둡게 하면
+     계약을 벗어난다. 강조는 밑줄이 맡는다 — neutral link 가 쓰는 어법과 같다.
+     장식 축은 종전대로 혼합 파생을 유지한다. */
+  :host([color="primary"]),
+  :host([color="info"]),
+  :host([color="success"]),
+  :host([color="warning"]),
+  :host([color="danger"]) {
+    --btn-color-strong-hover: var(--btn-color-strong);
+    --btn-color-strong-active: var(--btn-color-strong);
+  }
+
+  /* === Color tokens (장식 축) === */
   :host([color="blue"])   { --btn-color: var(--u-blue-600, #1E88E5); }
   :host([color="green"])  { --btn-color: var(--u-green-600, #43A047); }
   :host([color="red"])    { --btn-color: var(--u-red-600, #E53935); }
@@ -42,7 +105,20 @@ var styles = css`
   :host([color="purple"]) { --btn-color: var(--u-purple-600, #8E24AA); }
   :host([color="pink"])   { --btn-color: var(--u-pink-600, #D81B60); }
 
-  /* === Size === */
+  /* === Size ===
+   *
+   * ★**크기 축은 font-size 하나로 움직인다** — 여백·최소높이가 전부 em 이라 비례로 따라온다.
+   *   이것은 결손이 아니라 설계다: 폼·인라인 요소의 여백은 상속된 font-size 에 비례하는 것이
+   *   의도이며(--u-space-* 는 컨테이너/오버레이의 레이아웃 여백 축이라 여기 닿지 않는다),
+   *   px 계단을 따로 두면 두 축이 갈라진다.
+   *
+   * ⚠**그런데 두 값이 그 비례에서 빠져 있었다** (1.20.0 에서 해소):
+   *   ⑴ 가로 여백이 세로와 **같은 0.5em** 이라 글자가 테두리에 붙었다(실측 md 7px/7px).
+   *   ⑵ min-height 가 **없어서** 아이콘만 든 버튼이 글자 버튼과 높이가 달랐다 —
+   *      실측: 같은 size 인데 md 아이콘 32px vs 글자 37px. 툴바에서 5px 어긋난다.
+   *      그리고 아이콘 버튼의 계단(30/32/34)이 글자 버튼(32/37/42)과 기울기가 달라
+   *      size 를 올릴수록 어긋남이 커졌다.
+   */
   :host([size="sm"]) {
     font-size: 12px;
   }
@@ -79,7 +155,7 @@ var styles = css`
 
   /* solid: 강한 채움 (기본 color="neutral") */
   :host([variant="solid"]) {
-    color: #fff;
+    color: var(--btn-txt-color);
     background-color: var(--btn-color);
     --btn-border-color: var(--btn-color);
   }
@@ -164,15 +240,17 @@ var styles = css`
     color: var(--u-primary-color-strong, #1565C0);
     text-decoration: underline;
   }
-  /* link + 명시적 non-neutral color: 링크 자체 색상을 재정의 (예: 파괴적 액션 링크) */
+  /* link + 명시적 non-neutral color: 링크 자체 색상을 재정의 (예: 파괴적 액션 링크)
+     ★여기는 **바탕 위의 글자**다 — 면 슬롯(--btn-color)이 아니라 --btn-color-strong 을
+     읽는다. 장식 축에서는 둘이 같은 값이라 렌더가 변하지 않고, 역할 축에서만 갈린다. */
   :host([variant="link"][color]:not([color="neutral"])) {
-    color: var(--btn-color);
+    color: var(--btn-color-strong);
   }
   :host([variant="link"][color]:not([color="neutral"]):hover) {
-    color: var(--btn-color-hover);
+    color: var(--btn-color-strong-hover);
   }
   :host([variant="link"][color]:not([color="neutral"]):active) {
-    color: var(--btn-color-active);
+    color: var(--btn-color-strong-active);
   }
 
   /* === Inner ===
@@ -194,9 +272,20 @@ var styles = css`
     align-items: center;
     justify-content: space-between;
 
-    padding: var(--btn-padding-block, 0.5em) var(--btn-padding-inline, 0.5em);
+    padding: var(--btn-padding-block, 0.5em) var(--btn-padding-inline, 1em);
     border: 1px solid var(--btn-border-color, transparent);
     border-radius: inherit;
+
+    /* ★**글자 버튼의 자연 높이를 그대로 바닥값으로 쓴다** — 값을 새로 고른 것이 아니라
+     * 같은 식을 다시 쓴 것이다:
+     *
+     *     line-height(1.5em) + 상하 여백 ×2 + 테두리 ×2
+     *
+     * 그래서 글자 버튼의 높이는 **변하지 않고**(sm 32 · md 37 · lg 42 그대로),
+     * 아이콘만 든 버튼이 같은 높이로 올라온다. 상수를 박으면 이 성질이 깨진다 —
+     * 소비자가 --btn-padding-block 을 덮는 순간 둘이 다시 갈라진다. */
+    min-height: calc(1.5em + 2 * var(--btn-padding-block, 0.5em) + 2px);
+
   }
   a {
     text-decoration: none;

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

@@ -5,7 +5,7 @@ var styles = css`
     display: flex;
     border-radius: var(--u-radius-xl, 8px);
     background-color: var(--u-panel-bg-color, #FFFFFF);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--u-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.05));
     overflow: hidden;
 
     --card-border-width: 1px;
@@ -37,11 +37,11 @@ var styles = css`
   }
   :host([hoverable]) {
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: all var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
   }
   :host([hoverable]:hover) {
     transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--u-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.06));
   }
 
   .media {

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

@@ -39,7 +39,7 @@ var styles = css`
     width: 100%;
     height: 100%;
     gap: var(--slide-gap, 0px);
-    transition: transform 0.3s ease-in-out;
+    transition: transform var(--u-duration-slow, 320ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
   }
 
   ::slotted(*) {
@@ -60,11 +60,11 @@ var styles = css`
     font-size: 20px;
     color: var(--u-neutral-900, #212121);
     background-color: var(--u-neutral-100, #F5F5F5);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--u-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.05));
   }
   .nav-button:hover {
     background-color: var(--u-neutral-200, #EEEEEE);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--u-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.06));
     transform: translateY(-50%) scale(1.1);
   }
   .nav-button:active {
@@ -97,7 +97,7 @@ var styles = css`
     border-radius: var(--u-radius-circle, 50%);
     background-color: var(--u-neutral-400, #BDBDBD);
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: all var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
   }
   .dot:hover {
     background-color: var(--u-neutral-200, #EEEEEE);

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

@@ -1,7 +1,8 @@
 import { PropertyValues } from 'lit';
 import { UFormControlElement } from '../UFormControlElement.js';
 export type CheckboxVariant = "filled" | "outline";
-export type CheckboxColor = "blue" | "green" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink" | "neutral";
+/** 역할 축(`primary`…`danger`, 의미 · 리브랜딩을 따라옴)과 장식 축(`blue`…, 색 자체 · 면역)이 병존한다. */
+export type CheckboxColor = "primary" | "info" | "success" | "warning" | "danger" | "blue" | "green" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink" | "neutral";
 /**
  * 선택/해제 상태를 토글하는 체크박스 컴포넌트입니다.
  * indeterminate 상태도 지원합니다.

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

@@ -43,7 +43,8 @@ var styles = css`
   /* === Variant: filled - 배경 채움 === */
   :host([variant="filled"][checked]),
   :host([variant="filled"][indeterminate]) {
-    --checkbox-color: var(--u-neutral-100, #F5F5F5);
+    /* 체크 표시가 **채운 면 위**에 선다 — 역할 축에서만 on-color 로 갈린다(장식 축은 폴백). */
+    --checkbox-color: var(--checkbox-hue-on-fill, var(--u-neutral-100, #F5F5F5));
     --checkbox-border-color: var(--checkbox-hue, var(--checkbox-fill-color));
     --checkbox-background-color: var(--checkbox-hue, var(--checkbox-fill-color));
   }
@@ -51,11 +52,43 @@ var styles = css`
   /* === Variant: outline - 테두리만 === */
   :host([variant="outline"][checked]),
   :host([variant="outline"][indeterminate]) {
-    --checkbox-color: var(--checkbox-hue, var(--checkbox-fill-color));
+    /* 여기서는 같은 표시가 **바탕 위**에 선다 — 면 단이 아니라 -strong 이 맡는다. */
+    --checkbox-color: var(--checkbox-hue-strong, var(--checkbox-hue, var(--checkbox-fill-color)));
     --checkbox-border-color: var(--checkbox-hue, var(--checkbox-fill-color));
     --checkbox-background-color: transparent;
   }
 
+  /* ==========================================================================
+     역할 축 — 의미 슬롯. 장식 축(아래)과 달리 팔레트가 아니라 역할 토큰을 읽는다.
+     슬롯이 셋인 이유는 체크 표시가 두 자리에 서기 때문이다 —
+     filled 는 **채운 면 위**(그래서 on-color), outline 은 **바탕 위**(그래서 -strong).
+     ========================================================================== */
+  :host([color="primary"]) {
+    --checkbox-hue: var(--u-primary-color, #1976D2);
+    --checkbox-hue-on-fill: var(--u-primary-txt-color, #FFFFFF);
+    --checkbox-hue-strong: var(--u-primary-color-strong, #1565C0);
+  }
+  :host([color="info"]) {
+    --checkbox-hue: var(--u-info-color, #1976D2);
+    --checkbox-hue-on-fill: var(--u-info-txt-color, #FFFFFF);
+    --checkbox-hue-strong: var(--u-info-color-strong, #1565C0);
+  }
+  :host([color="success"]) {
+    --checkbox-hue: var(--u-success-color, #2E7D32);
+    --checkbox-hue-on-fill: var(--u-success-txt-color, #FFFFFF);
+    --checkbox-hue-strong: var(--u-success-color-strong, #1B5E20);
+  }
+  :host([color="warning"]) {
+    --checkbox-hue: var(--u-warning-color, #FDD835);
+    --checkbox-hue-on-fill: var(--u-warning-txt-color, #000000);
+    --checkbox-hue-strong: var(--u-warning-color-strong, #8A4A00);
+  }
+  :host([color="danger"]) {
+    --checkbox-hue: var(--u-danger-color, #D32F2F);
+    --checkbox-hue-on-fill: var(--u-danger-txt-color, #FFFFFF);
+    --checkbox-hue-strong: var(--u-danger-color-strong, #C62828);
+  }
+
   /* ==========================================================================
      장식 축 — color= 는 hue 슬롯만 채운다. variant 규칙이 폴백과 함께 읽는다.
      기본값 blue 는 규칙이 없다 = 슬롯이 비어 브랜드 훅(--checkbox-fill-color)을 탄다.
@@ -104,8 +137,8 @@ var styles = css`
   }
   input:focus-visible ~ .checkbox {
     box-shadow:
-      0 0 0 1px var(--u-input-border-color-focus, #1976D2),
-      0 0 0 3px rgba(59, 130, 246, 0.22);
+      0 0 0 1px var(--u-input-border-color-focus, #1565C0),
+      0 0 0 3px color-mix(in srgb, var(--u-primary-color-strong, #1565C0) 22%, transparent);
   }
 
   /* 체크박스 외형 */
@@ -121,14 +154,14 @@ var styles = css`
     border: 2px solid var(--checkbox-border-color);
     border-radius: 0.2em;
     background-color: var(--checkbox-background-color);
-    transition: border-color 0.2s ease, background-color 0.2s ease;
+    transition: border-color var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1)), background-color var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
   }
 
   /* 체크박스 아이콘 */
   .checkbox u-icon {
     font-size: 0.85em;
     transform: scale(0);
-    transition: transform 0.15s ease;
+    transition: transform var(--u-duration-fast, 140ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
   }
 
   .label {

package/dist/components/dialog/UDialog.styles.js

@@ -70,11 +70,11 @@ var styles = css`
     border: 1px solid var(--u-border-color, color-mix(in srgb, CanvasText 20%, Canvas));
     border-radius: var(--u-radius-lg, 6px);
     background: var(--u-panel-bg-color, Canvas);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--u-shadow-xl, 0 6px 18px rgba(0, 0, 0, 0.24), 0 2px 6px rgba(0, 0, 0, 0.08));
     pointer-events: auto;
     opacity: 0;
     transform: scale(0.92);
-    transition: opacity 0.3s ease, transform 0.3s ease;
+    transition: opacity var(--u-duration-slow, 320ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1)), transform var(--u-duration-slow, 320ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
   }
   :host([open]) .panel {
     opacity: 1;

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

@@ -57,7 +57,7 @@ var styles = css`
     display: flex;
     flex-direction: column;
     background: var(--u-panel-bg-color, Canvas);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--u-shadow-xl, 0 6px 18px rgba(0, 0, 0, 0.24), 0 2px 6px rgba(0, 0, 0, 0.08));
     pointer-events: auto;
     /*
      * easeOutQuart (cubic-bezier(0.22, 1, 0.36, 1)) — 빠르게 시작해서 부드럽게 정착.
@@ -66,7 +66,7 @@ var styles = css`
      * UOverlayElement의 backdrop opacity transition과 동일 duration/easing으로 맞춤.
      * 호스트 앱이 ::part(panel) { transition: ... }로 추가 override 가능.
      */
-    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+    transition: transform var(--u-duration-slow, 320ms) var(--u-ease-decelerate, cubic-bezier(0, 0, 0, 1));
   }
 
   .header {

package/dist/components/input/UInput.styles.js

@@ -26,7 +26,7 @@ var styles = css`
     border: 1px solid var(--u-input-border-color, #E0E0E0);
     border-radius: 0.25em;
     background-color: var(--u-input-bg-color, #FFFFFF);
-    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    transition: border-color var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1)), box-shadow var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
     overflow: hidden;
   }
   :host([readonly]) .container,
@@ -38,10 +38,10 @@ var styles = css`
     box-shadow: 0 0 0 1px var(--u-input-border-color-hover, #BDBDBD);
   }
   :host(:not([readonly]):not([disabled])) .container:focus-within {
-    box-shadow: 0 0 0 1px var(--u-input-border-color-focus, #1976D2);
+    box-shadow: 0 0 0 1px var(--u-input-border-color-focus, #1565C0);
   }
   :host([invalid]:not([readonly]):not([disabled])) .container {
-    box-shadow: 0 0 0 1px var(--u-input-border-color-invalid, #D32F2F);
+    box-shadow: 0 0 0 1px var(--u-input-border-color-invalid, #C62828);
   }
 
   /* ===== Variant: filled ===== */
@@ -63,11 +63,11 @@ var styles = css`
   }
   :host([variant="filled"]:not([readonly]):not([disabled])) .container:focus-within {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-focus, #1976D2);
+    border-bottom-color: var(--u-input-border-color-focus, #1565C0);
   }
   :host([variant="filled"][invalid]:not([readonly]):not([disabled])) .container {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-invalid, #D32F2F);
+    border-bottom-color: var(--u-input-border-color-invalid, #C62828);
   }
 
   /* ===== Variant: underlined ===== */
@@ -90,12 +90,12 @@ var styles = css`
   }
   :host([variant="underlined"]:not([readonly]):not([disabled])) .container:focus-within {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-focus, #1976D2);
+    border-bottom-color: var(--u-input-border-color-focus, #1565C0);
     border-bottom-width: 2px;
   }
   :host([variant="underlined"][invalid]:not([readonly]):not([disabled])) .container {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-invalid, #D32F2F);
+    border-bottom-color: var(--u-input-border-color-invalid, #C62828);
   }
 
   /* ===== Variant: borderless ===== */
@@ -157,7 +157,7 @@ var styles = css`
     margin-left: 0.25em;
     color: var(--u-icon-color, #616161);
     font-size: 1em;
-    transition: color 0.2s ease;
+    transition: color var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
     cursor: pointer;
   }
   .suffix-item:hover {
@@ -175,7 +175,7 @@ var styles = css`
     border: 1px solid var(--u-border-color, #E0E0E0);
     border-radius: var(--u-radius-lg, 6px);
     background-color: var(--u-panel-bg-color, #FFFFFF);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    box-shadow: var(--u-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.06));
     overflow-x: auto;
     overflow-y: auto;
   }

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

@@ -25,7 +25,7 @@ var styles = css`
     padding: 0.25em 0.5em;
     padding-left: calc(var(--menu-indent-size) * var(--menu-item-depth) + 0.5em);
     background-color: transparent;
-    transition: background-color 0.15s ease, color 0.15s ease;
+    transition: background-color var(--u-duration-fast, 140ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1)), color var(--u-duration-fast, 140ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
     user-select: none;
     cursor: pointer;
   }
@@ -77,7 +77,7 @@ var styles = css`
     position: absolute;
     border-radius: 1px;
     background-color: currentColor;
-    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: transform var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
   }
   /* 기본: 위 방향 chevron (∧) */
   .suffix-toggler::before {
@@ -139,9 +139,9 @@ var styles = css`
     border: 1px solid var(--u-border-color, #E0E0E0);
     border-radius: var(--u-radius-md, 4px);
     background-color: var(--u-panel-bg-color, #FFFFFF);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--u-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.05));
     transform: scale(0.8);
-    transition: opacity 0.2s ease, visibility 0s 0.2s, transform 0.2s ease;
+    transition: opacity var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1)), visibility 0s var(--u-duration-normal, 220ms), transform var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
   }
   .popover[open] {
     transform: scale(1);

package/dist/components/option/UOption.styles.js

@@ -18,7 +18,7 @@ var styles = css`
 
   :host {
     display: flex;
-    transition: background-color 0.15s ease, color 0.15s ease;
+    transition: background-color var(--u-duration-fast, 140ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1)), color var(--u-duration-fast, 140ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
     user-select: none;
     cursor: pointer;
 
@@ -102,7 +102,7 @@ var styles = css`
     border: 2px solid var(--u-neutral-400, #BDBDBD);
     border-radius: var(--u-radius-circle, 50%);
     background-color: var(--u-bg-color, #FFFFFF);
-    transition: border-color 0.2s ease, background-color 0.2s ease;
+    transition: border-color var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1)), background-color var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
   }
   :host([marker="radio"]:not([disabled]):hover) .radio-marker,
   :host([marker="radio"]:not([disabled]):focus-visible) .radio-marker {
@@ -127,7 +127,7 @@ var styles = css`
     border-radius: var(--u-radius-circle, 50%);
     background-color: var(--option-color-active);
     transform: scale(0);
-    transition: transform 0.15s ease;
+    transition: transform var(--u-duration-fast, 140ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
   }
   :host([marker="radio"][selected]) .radio-marker::after {
     transform: scale(1);

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

@@ -3,26 +3,26 @@ import { css } from "lit";
 var styles = css`
   :host {
     --progress-bar-height: 0.5em;
-    --progress-bar-color: var(--u-primary-color, #1976D2);
+    --progress-bar-color: var(--u-primary-color-strong, #1565C0);
     --progress-bar-buffer-color: color-mix(in srgb, var(--progress-bar-color) 35%, var(--u-bg-color, #FFFFFF));
     --progress-bar-track-color: var(--u-neutral-200, #EEEEEE);
   }
 
   /* === Status Colors === */
   :host([status="success"]) { 
-    --progress-bar-color: var(--u-success-color, #2E7D32); 
+    --progress-bar-color: var(--u-success-color-strong, #1B5E20); 
     --progress-bar-buffer-color: var(--u-success-color-weakest, #A5D6A7); 
   }
   :host([status="warning"]) { 
-    --progress-bar-color: var(--u-warning-color-weak, #FFEB3B); 
+    --progress-bar-color: var(--u-warning-color-strong, #8A4A00); 
     --progress-bar-buffer-color: var(--u-warning-color-weakest, #FFF59D); 
   }
   :host([status="error"]) { 
-    --progress-bar-color: var(--u-danger-color, #D32F2F); 
+    --progress-bar-color: var(--u-danger-color-strong, #C62828); 
     --progress-bar-buffer-color: var(--u-danger-color-weakest, #EF9A9A); 
   }
   :host([status="info"]) { 
-    --progress-bar-color: var(--u-info-color-weak, #2196F3); 
+    --progress-bar-color: var(--u-info-color-strong, #1565C0); 
     --progress-bar-buffer-color: var(--u-info-color-weakest, #90CAF9); 
   }
 
@@ -77,7 +77,7 @@ var styles = css`
     background-color: var(--progress-bar-color);
     transform-origin: left center;
     transform: scaleX(0);
-    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: transform var(--u-duration-slow, 320ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
     will-change: transform;
   }
 
@@ -89,7 +89,7 @@ var styles = css`
     background-color: var(--progress-bar-buffer-color);
     transform-origin: left center;
     transform: scaleX(0);
-    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: transform var(--u-duration-slow, 320ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
     will-change: transform;
   }
 

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

@@ -3,7 +3,7 @@ import { css } from "lit";
 var styles = css`
   :host {
     --progress-ring-size: 6em;
-    --progress-ring-color: var(--u-primary-color, #1976D2);
+    --progress-ring-color: var(--u-primary-color-strong, #1565C0);
     --progress-ring-track-width: 6;
     --progress-ring-track-color: var(--u-neutral-200, #EEEEEE);
     --progress-ring-buffer-color: color-mix(in srgb, var(--progress-ring-color) 35%, var(--u-bg-color, #FFFFFF));
@@ -11,19 +11,19 @@ var styles = css`
 
   /* === Status Colors === */
   :host([status="success"]) { 
-    --progress-ring-color: var(--u-success-color, #2E7D32);
+    --progress-ring-color: var(--u-success-color-strong, #1B5E20);
     --progress-ring-buffer-color: var(--u-success-color-weakest, #A5D6A7);
   }
   :host([status="warning"]) { 
-    --progress-ring-color: var(--u-warning-color-weak, #FFEB3B);
+    --progress-ring-color: var(--u-warning-color-strong, #8A4A00);
     --progress-ring-buffer-color: var(--u-warning-color-weakest, #FFF59D);
   }
   :host([status="error"]) { 
-    --progress-ring-color: var(--u-danger-color, #D32F2F);
+    --progress-ring-color: var(--u-danger-color-strong, #C62828);
     --progress-ring-buffer-color: var(--u-danger-color-weakest, #EF9A9A);
   }
   :host([status="info"]) { 
-    --progress-ring-color: var(--u-info-color-weak, #2196F3);
+    --progress-ring-color: var(--u-info-color-strong, #1565C0);
     --progress-ring-buffer-color: var(--u-info-color-weakest, #90CAF9);
   }
 
@@ -60,7 +60,7 @@ var styles = css`
   /* === Mask === */
   .mask-progress,
   .mask-buffer {
-    transition: stroke-dashoffset 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: stroke-dashoffset var(--u-duration-slow, 320ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
   }
 
   /* === Track === */

package/dist/components/rating/URating.styles.js

@@ -2,7 +2,7 @@ import { css } from "lit";
 //#region src/components/rating/URating.styles.ts
 var styles = css`
   :host {
-    --rating-symbol-color: var(--u-warning-color-weak, #FFEB3B);
+    --rating-symbol-color: var(--u-warning-color-strong, #8A4A00);
     --rating-symbol-off-color: var(--u-neutral-300, #E0E0E0);
   }
 
@@ -29,10 +29,10 @@ var styles = css`
     outline: none;
     border-radius: 0.15em;
     color: var(--rating-symbol-off-color);
-    transition: color 0.15s ease, transform 0.15s ease;
+    transition: color var(--u-duration-fast, 140ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1)), transform var(--u-duration-fast, 140ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
   }
   .symbol:focus-visible {
-    outline: 2px solid var(--u-primary-color-weak, #2196F3);
+    outline: 2px solid var(--u-primary-color-strong, #1565C0);
     outline-offset: 2px;
   }
   :host(:not([disabled]):not([readonly])) .symbol:hover {