@iyulab/components 1.18.0 → 1.20.0

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));
     overflow: hidden;
 
     --card-border-width: 1px;
@@ -41,7 +41,7 @@ var styles = css`
   }
   :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));
   }
 
   .media {

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

@@ -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));
   }
   .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));
     transform: translateY(-50%) scale(1.1);
   }
   .nav-button:active {

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);
   }
 
   /* 체크박스 외형 */

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

@@ -70,7 +70,7 @@ 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));
     pointer-events: auto;
     opacity: 0;
     transform: scale(0.92);

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));
     pointer-events: auto;
     /*
      * easeOutQuart (cubic-bezier(0.22, 1, 0.36, 1)) — 빠르게 시작해서 부드럽게 정착.

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

@@ -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 ===== */
@@ -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));
     overflow-x: auto;
     overflow-y: auto;
   }

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

@@ -139,7 +139,7 @@ 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));
     transform: scale(0.8);
     transition: opacity 0.2s ease, visibility 0s 0.2s, transform 0.2s ease;
   }

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); 
   }
 

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);
   }
 

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);
   }
 
@@ -32,7 +32,7 @@ var styles = css`
     transition: color 0.15s ease, transform 0.15s ease;
   }
   .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 {

package/dist/components/select/USelect.styles.js

@@ -44,10 +44,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 ===== */
@@ -69,11 +69,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 ===== */
@@ -96,12 +96,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 ===== */
@@ -120,6 +120,8 @@ var styles = css`
   .count {
     color: var(--u-txt-color-weak, #757575);
     line-height: 1.25;
+    /* n / m 은 제자리에서 n 이 바뀐다 — 비례폭이면 선택할 때마다 라벨 줄이 흔들린다 */
+    font-variant-numeric: tabular-nums;
   }
 
   .text-content {
@@ -173,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));
     overflow-x: hidden;
     overflow-y: auto;
   }

package/dist/components/slider/USlider.styles.js

@@ -21,6 +21,14 @@ var styles = css`
     font-family: var(--u-font-base);
   }
 
+  /* 라이브러리가 **스스로 그리는 숫자**는 고정폭 자릿수로 낸다.
+     둘 다 제자리에서 값이 바뀌는 자리라 비례폭이면 드래그 중 글자가 흔들린다.
+     ★툴팁은 슬롯을 건너 상속으로 닿는다 — font-variant-numeric 은 상속 프로퍼티다. */
+  [slot="label-aside"],
+  u-tooltip[part="thumb-tooltip"] {
+    font-variant-numeric: tabular-nums;
+  }
+
   .container {
     position: relative;
     height: var(--slider-thumb-size);
@@ -67,14 +75,14 @@ var styles = css`
     border: 2px solid var(--slider-thumb-border-color);
     border-radius: var(--u-radius-circle, 50%);
     background: var(--slider-thumb-color);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--u-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
     transition: transform 0.15s ease, box-shadow 0.15s ease;
     cursor: pointer;
   }
   .thumb:hover .thumb-content,
   .thumb:active .thumb-content {
     transform: scale(1.15);
-    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
+    box-shadow: var(--u-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.12));
   }
   .thumb:focus-visible .thumb-content {
     box-shadow: 0 0 0 1px var(--slider-fill-color);

package/dist/components/spinner/USpinner.d.ts

@@ -1,5 +1,6 @@
 import { UElement } from '../UElement.js';
-export type SpinnerColor = "neutral" | "blue" | "green" | "yellow" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink";
+/** 역할 축(`primary`…`danger`, 의미 · 리브랜딩을 따라옴)과 장식 축(`blue`…, 색 자체 · 면역)이 병존한다. */
+export type SpinnerColor = "neutral" | "primary" | "info" | "success" | "warning" | "danger" | "blue" | "green" | "yellow" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink";
 /**
  * 로딩 상태를 나타내는 회전 스피너 컴포넌트입니다.
  *

package/dist/components/spinner/USpinner.styles.js

@@ -9,6 +9,14 @@ var styles = css`
   }
 
   /* Color variants */
+  /* 역할 축 — 스피너는 **바탕 위의 그래픽**이므로 면 단(-color)이 아니라 -strong 을
+     읽는다. 다크에서 -color 는 바탕 위 3.07 까지 떨어진다(Cycle 141 실측). */
+  :host([color="primary"]) { --spinner-indicator-color: var(--u-primary-color-strong, #1565C0); }
+  :host([color="info"])    { --spinner-indicator-color: var(--u-info-color-strong, #1565C0); }
+  :host([color="success"]) { --spinner-indicator-color: var(--u-success-color-strong, #1B5E20); }
+  :host([color="warning"]) { --spinner-indicator-color: var(--u-warning-color-strong, #8A4A00); }
+  :host([color="danger"])  { --spinner-indicator-color: var(--u-danger-color-strong, #C62828); }
+
   :host([color="blue"]) { --spinner-indicator-color: var(--u-blue-600, #1E88E5); }
   :host([color="green"]) { --spinner-indicator-color: var(--u-green-600, #43A047); }
   :host([color="yellow"]) { --spinner-indicator-color: var(--u-yellow-600, #FDD835); }

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

@@ -5,7 +5,7 @@ var styles = css`
     --splitter-size: 4px;
     --splitter-color: var(--u-neutral-200, #EEEEEE);
     --splitter-color-hover: var(--u-primary-color-weaker, #64B5F6);
-    --splitter-color-active: var(--u-primary-color-weak, #2196F3);
+    --splitter-color-active: var(--u-primary-color-strong, #1565C0);
   }
 
   :host {

package/dist/components/switch/USwitch.styles.js

@@ -56,8 +56,8 @@ var styles = css`
   }
   input:focus-visible ~ .track {
     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);
   }
 
   /* === 트랙 === */
@@ -123,7 +123,7 @@ var styles = css`
     height: var(--switch-thumb-size);
     border-radius: var(--switch-radius);
     background: var(--switch-thumb-color);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--u-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
     overflow: hidden;
     transition:
       transform var(--switch-duration) cubic-bezier(0.4, 0, 0.2, 1),

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

@@ -188,7 +188,7 @@ var styles = css`
   :host([variant="pill"]) ::slotted(u-tab[active]) {
     border-color: var(--u-border-color, #E0E0E0);
     background-color: var(--u-neutral-0, #FFFFFF);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--u-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
   }
 
   /* Variant: plain */

package/dist/components/tag/UTag.d.ts

@@ -1,6 +1,11 @@
 import { UElement } from '../UElement.js';
 export type TagVariant = "solid" | "surface" | "filled" | "outlined";
-export type TagColor = "neutral" | "blue" | "green" | "yellow" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink";
+/**
+ * 두 축이 병존한다 — **역할 축**(`primary`·`info`·`success`·`warning`·`danger`)은 *의미*를
+ * 말하고 리브랜딩을 따라오며 대비 계약을 물려받는다. **장식 축**(`blue`·`purple` …)은
+ * *색 자체*를 말하고 리브랜딩에 의도적으로 면역이다.
+ */
+export type TagColor = "neutral" | "primary" | "info" | "success" | "warning" | "danger" | "blue" | "green" | "yellow" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink";
 /**
  * 레이블, 카테고리, 상태 등을 표시하는 태그 컴포넌트입니다.
  *

package/dist/components/tag/UTag.styles.js

@@ -8,6 +8,57 @@ var styles = css`
     --tag-border-color: transparent;
   }
 
+  /* ==========================================================================
+     역할 축 — 의미 슬롯 매핑
+     color="danger" 는 색이 아니라 *"위험"* 을 뜻한다. 장식 축(아래)과 달리 팔레트가 아니라
+     **역할 토큰**을 읽으므로 리브랜딩을 따라오고, 대비 계약이 지키는 짝을 물려받는다.
+
+     슬롯이 여섯인 이유는 자리마다 대비 요구가 다르기 때문이다(실측, 두 테마 전건 AA):
+       solid    면 --u-{role}-color        + 그 위 글자 --u-{role}-txt-color   (4.60~15.05)
+       surface  연한 면 --u-{role}-bg-color + 그 위 글자 --u-{role}-color-strong (4.58~7.00)
+       outlined 바탕 위 글자 --u-{role}-color-strong                            (계약 검사 대상)
+     ========================================================================== */
+  :host([color="primary"]) {
+    --tag-hue-solid: var(--u-primary-color, #1976D2);
+    --tag-hue-on-solid: var(--u-primary-txt-color, #FFFFFF);
+    --tag-hue-line: var(--u-primary-color-weak, #2196F3);
+    --tag-hue-surface: var(--u-primary-bg-color, #E3F2FD);
+    --tag-hue-text: var(--u-primary-color-strong, #1565C0);
+    --tag-hue-text-outlined: var(--u-primary-color-strong, #1565C0);
+  }
+  :host([color="info"]) {
+    --tag-hue-solid: var(--u-info-color, #1976D2);
+    --tag-hue-on-solid: var(--u-info-txt-color, #FFFFFF);
+    --tag-hue-line: var(--u-info-color-weak, #2196F3);
+    --tag-hue-surface: var(--u-info-bg-color, #E3F2FD);
+    --tag-hue-text: var(--u-info-color-strong, #1565C0);
+    --tag-hue-text-outlined: var(--u-info-color-strong, #1565C0);
+  }
+  :host([color="success"]) {
+    --tag-hue-solid: var(--u-success-color, #2E7D32);
+    --tag-hue-on-solid: var(--u-success-txt-color, #FFFFFF);
+    --tag-hue-line: var(--u-success-color-weak, #4CAF50);
+    --tag-hue-surface: var(--u-success-bg-color, #E8F5E9);
+    --tag-hue-text: var(--u-success-color-strong, #1B5E20);
+    --tag-hue-text-outlined: var(--u-success-color-strong, #1B5E20);
+  }
+  :host([color="warning"]) {
+    --tag-hue-solid: var(--u-warning-color, #FDD835);
+    --tag-hue-on-solid: var(--u-warning-txt-color, #000000);
+    --tag-hue-line: var(--u-warning-color-weak, #FFEB3B);
+    --tag-hue-surface: var(--u-warning-bg-color, #FFF59D);
+    --tag-hue-text: var(--u-warning-color-strong, #8A4A00);
+    --tag-hue-text-outlined: var(--u-warning-color-strong, #8A4A00);
+  }
+  :host([color="danger"]) {
+    --tag-hue-solid: var(--u-danger-color, #D32F2F);
+    --tag-hue-on-solid: var(--u-danger-txt-color, #FFFFFF);
+    --tag-hue-line: var(--u-danger-color-weak, #F44336);
+    --tag-hue-surface: var(--u-danger-bg-color, #FFEBEE);
+    --tag-hue-text: var(--u-danger-color-strong, #C62828);
+    --tag-hue-text-outlined: var(--u-danger-color-strong, #C62828);
+  }
+
   /* ==========================================================================
      장식 축 — 색 슬롯 매핑
      color="purple" 에는 역할 의미가 없다(장식이다). 그래서 역할 토큰이 아니라
@@ -82,7 +133,9 @@ var styles = css`
 
   /* Variant: solid (강한 채움, 색 미지정 시 --tag-fill-color = 브랜드) */
   :host([variant="solid"]) {
-    --tag-color: var(--u-neutral-0, #FFFFFF);
+    /* 면 위의 글자. 장식 축은 슬롯이 비어 흰색으로 떨어진다(현행 보존) — 역할 축에서만
+       갈린다. warning 이 그 이유다: 노란 면 위의 흰 글자는 읽히지 않는다. */
+    --tag-color: var(--tag-hue-on-solid, var(--u-neutral-0, #FFFFFF));
     --tag-bg-color: var(--tag-hue-solid, var(--tag-fill-color));
     --tag-border-color: var(--tag-hue-solid, var(--tag-fill-color));
   }

package/dist/components/textarea/UTextarea.styles.js

@@ -26,10 +26,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 ===== */
@@ -51,11 +51,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 ===== */
@@ -78,12 +78,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 ===== */

package/dist/components/tooltip/UTooltip.styles.js

@@ -12,7 +12,7 @@ var styles = css`
     line-height: 1.25;
     border-radius: var(--u-radius-md, 4px);
     background-color: var(--u-tooltip-bg-color, rgba(0, 0, 0, 0.75));
-    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--u-shadow-xl, 0 6px 18px rgba(0, 0, 0, 0.24));
     transform: scale(0.9);
     transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
 

package/dist/styles/dark.css

@@ -246,10 +246,12 @@
   --u-border-color-strong:   var(--u-neutral-500);
   --u-border-color-hover:    var(--u-neutral-500);
 
+  /* ★상태 테두리는 `-strong` 단이다 — light.css 의 같은 자리 주석 참조.
+     이 테마가 실제로 미달이었다: focus 2.74 · invalid 2.44 → 4.74 / 4.34. */
   --u-input-border-color:         var(--u-neutral-400);
   --u-input-border-color-hover:   var(--u-neutral-500);
-  --u-input-border-color-focus:   var(--u-primary-color);
-  --u-input-border-color-invalid: var(--u-danger-color);
+  --u-input-border-color-focus:   var(--u-primary-color-strong);
+  --u-input-border-color-invalid: var(--u-danger-color-strong);
 
   /* Background Colors */
   --u-bg-color:              var(--u-neutral-100);
@@ -285,6 +287,14 @@
   --u-shadow-color-strong:   rgba(0, 0, 0, 0.45);
   --u-shadow-color-stronger: rgba(0, 0, 0, 0.60);
 
+  /* Elevation Scale — 근거는 light.css 의 같은 자리 주석 참조.
+     ★다크는 알파가 3배 가까이 진하다 — 리터럴로 흩어져 있던 종전에는 이 차이가
+     적용되지 않아 다크에서 그림자가 사실상 보이지 않았다. */
+  --u-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);    /* = shadow-color-weak */
+  --u-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35);    /* = shadow-color-normal */
+  --u-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.45);   /* = shadow-color-strong */
+  --u-shadow-xl: 0 6px 18px rgba(0, 0, 0, 0.60);   /* = shadow-color-stronger */
+
   /* Scrollbar Colors */
   --u-scrollbar-color:       var(--u-neutral-500);
   --u-scrollbar-color-hover: var(--u-neutral-600);