@iyulab/components 1.13.0 → 1.14.1

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

@@ -2,16 +2,16 @@ import { css } from "lit";
 //#region src/components/checkbox/UCheckbox.styles.ts
 var styles = css`
   :host {
-    --checkbox-fill-color: var(--u-primary-color);
+    --checkbox-fill-color: var(--u-primary-color, #1E88E5);
     --checkbox-color: inherit;
-    --checkbox-border-color: var(--u-input-border-color);
-    --checkbox-background-color: var(--u-input-bg-color);
+    --checkbox-border-color: var(--u-input-border-color, #E0E0E0);
+    --checkbox-background-color: var(--u-input-bg-color, #FFFFFF);
   }
 
   :host {
     display: inline-flex;
     flex-direction: column;
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #212121);
     font-size: inherit;
     font-family: var(--u-font-base);
     user-select: none;
@@ -27,23 +27,23 @@ var styles = css`
     cursor: default;
   }
   :host([invalid]) {
-    --checkbox-border-color: var(--u-danger-color);
+    --checkbox-border-color: var(--u-danger-color, #E53935);
   }
   :host([invalid]) .footer {
-    color: var(--u-danger-color);
+    color: var(--u-danger-color, #E53935);
   }
   :host([checked]) .checkbox u-icon,
   :host([indeterminate]) .checkbox u-icon {
     transform: scale(1);
   }
   :host(:not([disabled]):not([readonly]):hover) {
-    --checkbox-border-color: var(--u-input-border-color-hover);
+    --checkbox-border-color: var(--u-input-border-color-hover, #BDBDBD);
   }
 
   /* === Variant: filled - 배경 채움 === */
   :host([variant="filled"][checked]),
   :host([variant="filled"][indeterminate]) {
-    --checkbox-color: var(--u-neutral-100);
+    --checkbox-color: 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));
   }
@@ -63,28 +63,28 @@ var styles = css`
      즉 blue 는 장식 축의 한 값이 아니라 "색을 지정하지 않음" 의 표기다.
      ========================================================================== */
   :host([color="green"]) {
-    --checkbox-hue: var(--u-green-600);
+    --checkbox-hue: var(--u-green-600, #43A047);
   }
   :host([color="red"]) {
-    --checkbox-hue: var(--u-red-600);
+    --checkbox-hue: var(--u-red-600, #E53935);
   }
   :host([color="orange"]) {
-    --checkbox-hue: var(--u-orange-600);
+    --checkbox-hue: var(--u-orange-600, #FB8C00);
   }
   :host([color="teal"]) {
-    --checkbox-hue: var(--u-teal-600);
+    --checkbox-hue: var(--u-teal-600, #00897B);
   }
   :host([color="cyan"]) {
-    --checkbox-hue: var(--u-cyan-600);
+    --checkbox-hue: var(--u-cyan-600, #00ACC1);
   }
   :host([color="purple"]) {
-    --checkbox-hue: var(--u-purple-600);
+    --checkbox-hue: var(--u-purple-600, #8E24AA);
   }
   :host([color="pink"]) {
-    --checkbox-hue: var(--u-pink-600);
+    --checkbox-hue: var(--u-pink-600, #D81B60);
   }
   :host([color="neutral"]) {
-    --checkbox-hue: var(--u-neutral-600);
+    --checkbox-hue: var(--u-neutral-600, #757575);
   }
 
 
@@ -104,7 +104,7 @@ var styles = css`
   }
   input:focus-visible ~ .checkbox {
     box-shadow:
-      0 0 0 1px var(--u-input-border-color-focus),
+      0 0 0 1px var(--u-input-border-color-focus, #1E88E5),
       0 0 0 3px rgba(59, 130, 246, 0.22);
   }
 
@@ -137,19 +137,19 @@ var styles = css`
   }
 
   .required {
-    color: var(--u-danger-color);
+    color: var(--u-danger-color, #E53935);
     font-weight: 500;
   }
 
   .description {
     margin-top: 0.5em;
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #9E9E9E);
     font-size: 0.75em;
     line-height: 1.2;
   }
 
   :host([invalid]) .description {
-    color: var(--u-danger-color);
+    color: var(--u-danger-color, #E53935);
   }
 `;
 //#endregion

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

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

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

@@ -68,7 +68,7 @@ var styles = css`
      * 테두리는 CanvasText 원색이 과해 옅게 혼합.
      */
     border: 1px solid var(--u-border-color, color-mix(in srgb, CanvasText 20%, Canvas));
-    border-radius: var(--u-radius-lg);
+    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);
     pointer-events: auto;
@@ -92,13 +92,13 @@ var styles = css`
     font-size: 18px;
     font-weight: 600;
     line-height: 1.3;
-    border-bottom: 1px solid var(--u-border-color);
+    border-bottom: 1px solid var(--u-border-color, #E0E0E0);
   }
   .header .close-btn {
     flex-shrink: 0;
     padding: var(--u-space-2xs, 4px);
     font-size: inherit;
-    border-radius: var(--u-radius-md);
+    border-radius: var(--u-radius-md, 4px);
   }
 
   .body {
@@ -116,7 +116,7 @@ var styles = css`
     justify-content: flex-end;
     gap: var(--u-space-sm, 8px);
     padding: var(--u-space-md, 12px) var(--u-space-lg, 16px);
-    border-top: 1px solid var(--u-border-color);
+    border-top: 1px solid var(--u-border-color, #E0E0E0);
   }
 `;
 //#endregion

package/dist/components/divider/UDivider.styles.js

@@ -3,7 +3,7 @@ import { css } from "lit";
 var styles = css`
   :host {
     --divider-size: 1px;
-    --divider-color: var(--u-neutral-300);
+    --divider-color: var(--u-neutral-300, #E0E0E0);
     --divider-spacing: 8px;
   }
 
@@ -58,7 +58,7 @@ var styles = css`
   .label {
     display: none;
     padding: 0 var(--u-space-md, 12px);
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #9E9E9E);
     font-size: 0.85em;
     white-space: nowrap;
     user-select: none;

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

@@ -80,13 +80,13 @@ var styles = css`
     font-size: 18px;
     font-weight: 600;
     line-height: 1.3;
-    border-bottom: 1px solid var(--u-border-color);
+    border-bottom: 1px solid var(--u-border-color, #E0E0E0);
   }
   .header .close-btn {
     flex-shrink: 0;
     padding: var(--u-space-2xs, 4px);
     font-size: inherit;
-    border-radius: var(--u-radius-md);
+    border-radius: var(--u-radius-md, 4px);
   }
 
   .body {
@@ -104,7 +104,7 @@ var styles = css`
     justify-content: flex-end;
     gap: var(--u-space-sm, 8px);
     padding: var(--u-space-md, 12px) var(--u-space-lg, 16px);
-    border-top: 1px solid var(--u-border-color);
+    border-top: 1px solid var(--u-border-color, #E0E0E0);
   }
 `;
 //#endregion

package/dist/components/field/UField.styles.js

@@ -3,7 +3,7 @@ import { css } from "lit";
 var styles = css`
   :host {
     display: block;
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #212121);
     font-size: inherit;
     font-family: var(--u-font-base);
   }
@@ -12,7 +12,7 @@ var styles = css`
     cursor: not-allowed;
   }
   :host([invalid]) .footer {
-    color: var(--u-danger-color);
+    color: var(--u-danger-color, #E53935);
   }
 
   .header {
@@ -32,12 +32,12 @@ var styles = css`
   }
 
   .required {
-    color: var(--u-danger-color);
+    color: var(--u-danger-color, #E53935);
     margin-right: 0.2em;
   }
   
   .footer {
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #9E9E9E);
     font-size: 0.75em;
     line-height: 1.2;
     margin-top: 0.5em;

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

@@ -3,7 +3,7 @@ import { css } from "lit";
 var styles = css`
   :host {
     display: inline-flex;
-    color: var(--u-icon-color);
+    color: var(--u-icon-color, #616161);
     font-size: 20px;
   }
 
@@ -11,7 +11,7 @@ var styles = css`
     color: #fff;
   }
   :host([variant="link"]) {
-    color: var(--u-primary-color-weak);
+    color: var(--u-primary-color-weak, #2196F3);
   }
 
   u-button {

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

@@ -12,7 +12,7 @@ var styles = css`
        flex 컨테이너처럼 block 만으로 늘어나지 않는 맥락을 위해 width 경로도 함께 연다. */
     display: var(--u-input-display, inline-block);
     width: var(--u-input-width, auto);
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #212121);
     font-size: inherit;
     font-family: var(--u-font-base);
   }
@@ -23,51 +23,51 @@ var styles = css`
     flex-direction: row;
     align-items: center;
     padding: 0.3em 0.6em;
-    border: 1px solid var(--u-input-border-color);
+    border: 1px solid var(--u-input-border-color, #E0E0E0);
     border-radius: 0.25em;
-    background-color: var(--u-input-bg-color);
+    background-color: var(--u-input-bg-color, #FFFFFF);
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
     overflow: hidden;
   }
   :host([readonly]) .container,
   :host([disabled]) .container {
-    border-color: var(--u-border-color-weak);
-    background-color: var(--u-bg-color-disabled);
+    border-color: var(--u-border-color-weak, #EEEEEE);
+    background-color: var(--u-bg-color-disabled, #FAFAFA);
   }
   :host(:not([readonly]):not([disabled])) .container:hover {
-    box-shadow: 0 0 0 1px var(--u-input-border-color-hover);
+    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);
+    box-shadow: 0 0 0 1px var(--u-input-border-color-focus, #1E88E5);
   }
   :host([invalid]:not([readonly]):not([disabled])) .container {
-    box-shadow: 0 0 0 1px var(--u-input-border-color-invalid);
+    box-shadow: 0 0 0 1px var(--u-input-border-color-invalid, #E53935);
   }
 
   /* ===== Variant: filled ===== */
   :host([variant="filled"]) .container {
     border: none;
     border-radius: 0.25em 0.25em 0 0;
-    border-bottom: 2px solid var(--u-input-border-color);
-    background-color: var(--u-neutral-200);
+    border-bottom: 2px solid var(--u-input-border-color, #E0E0E0);
+    background-color: var(--u-neutral-200, #EEEEEE);
   }
   :host([variant="filled"][readonly]) .container,
   :host([variant="filled"][disabled]) .container {
-    background-color: var(--u-bg-color-disabled);
-    border-bottom-color: var(--u-border-color-weak);
+    background-color: var(--u-bg-color-disabled, #FAFAFA);
+    border-bottom-color: var(--u-border-color-weak, #EEEEEE);
   }
   :host([variant="filled"]:not([readonly]):not([disabled])) .container:hover {
     box-shadow: none;
-    background-color: var(--u-neutral-300);
-    border-bottom-color: var(--u-input-border-color-hover);
+    background-color: var(--u-neutral-300, #E0E0E0);
+    border-bottom-color: var(--u-input-border-color-hover, #BDBDBD);
   }
   :host([variant="filled"]:not([readonly]):not([disabled])) .container:focus-within {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-focus);
+    border-bottom-color: var(--u-input-border-color-focus, #1E88E5);
   }
   :host([variant="filled"][invalid]:not([readonly]):not([disabled])) .container {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-invalid);
+    border-bottom-color: var(--u-input-border-color-invalid, #E53935);
   }
 
   /* ===== Variant: underlined ===== */
@@ -75,33 +75,33 @@ var styles = css`
     padding-left: 0;
     padding-right: 0;
     border: none;
-    border-radius: var(--u-radius-none);
-    border-bottom: 1px solid var(--u-input-border-color);
+    border-radius: var(--u-radius-none, 0);
+    border-bottom: 1px solid var(--u-input-border-color, #E0E0E0);
     background-color: transparent;
   }
   :host([variant="underlined"][readonly]) .container,
   :host([variant="underlined"][disabled]) .container {
     background-color: transparent;
-    border-bottom-color: var(--u-border-color-weak);
+    border-bottom-color: var(--u-border-color-weak, #EEEEEE);
   }
   :host([variant="underlined"]:not([readonly]):not([disabled])) .container:hover {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-hover);
+    border-bottom-color: var(--u-input-border-color-hover, #BDBDBD);
   }
   :host([variant="underlined"]:not([readonly]):not([disabled])) .container:focus-within {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-focus);
+    border-bottom-color: var(--u-input-border-color-focus, #1E88E5);
     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);
+    border-bottom-color: var(--u-input-border-color-invalid, #E53935);
   }
 
   /* ===== Variant: borderless ===== */
   :host([variant="borderless"]) .container {
     border: none;
-    border-radius: var(--u-radius-none);
+    border-radius: var(--u-radius-none, 0);
     background-color: transparent;
     padding: 0;
     box-shadow: none;
@@ -120,7 +120,7 @@ var styles = css`
     line-height: 1.5;
   }
   input::placeholder {
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #9E9E9E);
   }
   input:disabled {
     cursor: not-allowed;
@@ -155,16 +155,16 @@ var styles = css`
   /* 아이콘 영역 (clear, password toggle 등) */
   .suffix-item {
     margin-left: 0.25em;
-    color: var(--u-icon-color);
+    color: var(--u-icon-color, #616161);
     font-size: 1em;
     transition: color 0.2s ease;
     cursor: pointer;
   }
   .suffix-item:hover {
-    color: var(--u-icon-color-hover);
+    color: var(--u-icon-color-hover, #1E88E5);
   }
   .suffix-item:active {
-    color: var(--u-icon-color-active);
+    color: var(--u-icon-color-active, #1E88E5);
   }
 
   u-popover {
@@ -172,9 +172,9 @@ var styles = css`
     min-height: var(--input-popover-min-height);
     max-height: var(--input-popover-max-height);
     padding: 4px;
-    border: 1px solid var(--u-border-color);
-    border-radius: var(--u-radius-lg);
-    background-color: var(--u-panel-bg-color);
+    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);
     overflow-x: auto;
     overflow-y: auto;

package/dist/components/menu/UMenu.styles.js

@@ -9,12 +9,12 @@ var styles = css`
     display: flex;
     flex-direction: column;
     min-width: 160px;
-    border-radius: var(--u-radius-lg);
-    background-color: var(--u-panel-bg-color);
+    border-radius: var(--u-radius-lg, 6px);
+    background-color: var(--u-panel-bg-color, #FFFFFF);
 
     --menu-padding: var(--u-space-2xs, 4px);
     --menu-border-width: 1px;
-    --menu-border-color: var(--u-border-color);
+    --menu-border-color: var(--u-border-color, #E0E0E0);
   }
 
   /* 여백/테두리는 내부 요소가 진다 — :host 에 두면 소비 앱 CSS 리셋에 지워진다. */
@@ -30,7 +30,7 @@ var styles = css`
   :host([borderless]) {
     --menu-padding: 0;
     --menu-border-width: 0;
-    border-radius: var(--u-radius-none);
+    border-radius: var(--u-radius-none, 0);
     background-color: transparent;
   }
 `;

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

@@ -3,7 +3,7 @@ import { css } from "lit";
 var styles = css`
   :host {
     --menu-item-depth: 0;
-    --menu-item-color: var(--u-primary-color);
+    --menu-item-color: var(--u-primary-color, #1E88E5);
   }
 
   :host {
@@ -44,18 +44,18 @@ var styles = css`
   /* hover & focus */
   :host(:not([disabled])) .header:hover,
   :host(:not([disabled]):focus-visible) .header {
-    background-color: var(--u-bg-color-hover);
+    background-color: var(--u-bg-color-hover, #F5F5F5);
   }
 
   /* indicator: highlight */
   :host([selected][indicator="highlight"]) .header {
     font-weight: 600;
     color: color-mix(in srgb, var(--menu-item-color) 85%, black);
-    background-color: color-mix(in srgb, var(--menu-item-color) 15%, var(--u-bg-color));
+    background-color: color-mix(in srgb, var(--menu-item-color) 15%, var(--u-bg-color, #FFFFFF));
   }
   :host([selected][indicator="highlight"]) .header:hover,
   :host([selected][indicator="highlight"]:focus-visible) .header {
-    background-color: color-mix(in srgb, var(--menu-item-color) 25%, var(--u-bg-color));
+    background-color: color-mix(in srgb, var(--menu-item-color) 25%, var(--u-bg-color, #FFFFFF));
   }
 
   .prefix-checker {
@@ -136,9 +136,9 @@ var styles = css`
     display: flex;
     flex-direction: column;
     padding: 4px;
-    border: 1px solid var(--u-border-color);
-    border-radius: var(--u-radius-md);
-    background-color: var(--u-panel-bg-color);
+    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);
     transform: scale(0.8);
     transition: opacity 0.2s ease, visibility 0s 0.2s, transform 0.2s ease;

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

@@ -2,18 +2,18 @@ import { css } from "lit";
 //#region src/components/option/UOption.styles.ts
 var styles = css`
   :host {
-    --option-color: var(--u-primary-color);
+    --option-color: var(--u-primary-color, #1E88E5);
     --option-color-interactive: inherit;
-    --option-border-color-interactive: var(--u-border-color-hover);
-    --option-background-color-interactive: var(--u-bg-color-hover);
+    --option-border-color-interactive: var(--u-border-color-hover, #BDBDBD);
+    --option-background-color-interactive: var(--u-bg-color-hover, #F5F5F5);
 
     --option-color-active: inherit;
     --option-border-color-active: var(--option-color);
-    --option-background-color-active: color-mix(in srgb, var(--option-color) 15%, var(--u-bg-color));
+    --option-background-color-active: color-mix(in srgb, var(--option-color) 15%, var(--u-bg-color, #FFFFFF));
 
     --option-color-active-interactive: inherit;
     --option-border-color-active-interactive: var(--option-color);
-    --option-background-color-active-interactive: color-mix(in srgb, var(--option-color) 25%, var(--u-bg-color));
+    --option-background-color-active-interactive: color-mix(in srgb, var(--option-color) 25%, var(--u-bg-color, #FFFFFF));
   }
 
   :host {
@@ -99,9 +99,9 @@ var styles = css`
     justify-content: center;
     width: 1.25em;
     height: 1.25em;
-    border: 2px solid var(--u-neutral-400);
-    border-radius: var(--u-radius-circle);
-    background-color: var(--u-bg-color);
+    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;
   }
   :host([marker="radio"]:not([disabled]):hover) .radio-marker,
@@ -124,7 +124,7 @@ var styles = css`
     display: block;
     width: 0.45em;
     height: 0.45em;
-    border-radius: var(--u-radius-circle);
+    border-radius: var(--u-radius-circle, 50%);
     background-color: var(--option-color-active);
     transform: scale(0);
     transition: transform 0.15s ease;

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

@@ -3,27 +3,27 @@ import { css } from "lit";
 var styles = css`
   :host {
     --progress-bar-height: 0.5em;
-    --progress-bar-color: var(--u-primary-color);
-    --progress-bar-buffer-color: color-mix(in srgb, var(--progress-bar-color) 35%, var(--u-bg-color));
-    --progress-bar-track-color: var(--u-neutral-200);
+    --progress-bar-color: var(--u-primary-color, #1E88E5);
+    --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); 
-    --progress-bar-buffer-color: var(--u-success-color-weakest); 
+    --progress-bar-color: var(--u-success-color, #43A047); 
+    --progress-bar-buffer-color: var(--u-success-color-weakest, #A5D6A7); 
   }
   :host([status="warning"]) { 
-    --progress-bar-color: var(--u-warning-color-weak); 
-    --progress-bar-buffer-color: var(--u-warning-color-weakest); 
+    --progress-bar-color: var(--u-warning-color-weak, #FFEB3B); 
+    --progress-bar-buffer-color: var(--u-warning-color-weakest, #FFF59D); 
   }
   :host([status="error"]) { 
-    --progress-bar-color: var(--u-danger-color); 
-    --progress-bar-buffer-color: var(--u-danger-color-weakest); 
+    --progress-bar-color: var(--u-danger-color, #E53935); 
+    --progress-bar-buffer-color: var(--u-danger-color-weakest, #EF9A9A); 
   }
   :host([status="info"]) { 
-    --progress-bar-color: var(--u-info-color-weak); 
-    --progress-bar-buffer-color: var(--u-info-color-weakest); 
+    --progress-bar-color: var(--u-info-color-weak, #2196F3); 
+    --progress-bar-buffer-color: var(--u-info-color-weakest, #90CAF9); 
   }
 
   :host {
@@ -37,7 +37,7 @@ var styles = css`
 
   /* === Rounded === */
   :host([rounded]) {
-    border-radius: var(--u-radius-pill);
+    border-radius: var(--u-radius-pill, 9999px);
   }
 
   /* === Indeterminate === */

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

@@ -3,28 +3,28 @@ import { css } from "lit";
 var styles = css`
   :host {
     --progress-ring-size: 6em;
-    --progress-ring-color: var(--u-primary-color);
+    --progress-ring-color: var(--u-primary-color, #1E88E5);
     --progress-ring-track-width: 6;
-    --progress-ring-track-color: var(--u-neutral-200);
-    --progress-ring-buffer-color: color-mix(in srgb, var(--progress-ring-color) 35%, var(--u-bg-color));
+    --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));
   }
 
   /* === Status Colors === */
   :host([status="success"]) { 
-    --progress-ring-color: var(--u-success-color);
-    --progress-ring-buffer-color: var(--u-success-color-weakest);
+    --progress-ring-color: var(--u-success-color, #43A047);
+    --progress-ring-buffer-color: var(--u-success-color-weakest, #A5D6A7);
   }
   :host([status="warning"]) { 
-    --progress-ring-color: var(--u-warning-color-weak);
-    --progress-ring-buffer-color: var(--u-warning-color-weakest);
+    --progress-ring-color: var(--u-warning-color-weak, #FFEB3B);
+    --progress-ring-buffer-color: var(--u-warning-color-weakest, #FFF59D);
   }
   :host([status="error"]) { 
-    --progress-ring-color: var(--u-danger-color);
-    --progress-ring-buffer-color: var(--u-danger-color-weakest);
+    --progress-ring-color: var(--u-danger-color, #E53935);
+    --progress-ring-buffer-color: var(--u-danger-color-weakest, #EF9A9A);
   }
   :host([status="info"]) { 
-    --progress-ring-color: var(--u-info-color-weak);
-    --progress-ring-buffer-color: var(--u-info-color-weakest);
+    --progress-ring-color: var(--u-info-color-weak, #2196F3);
+    --progress-ring-buffer-color: var(--u-info-color-weakest, #90CAF9);
   }
 
   /* === Host === */

package/dist/components/radio/URadio.styles.js

@@ -2,7 +2,7 @@ import { css } from "lit";
 //#region src/components/radio/URadio.styles.ts
 var styles = css`
   :host {
-    --radio-color: var(--u-primary-color);
+    --radio-color: var(--u-primary-color, #1E88E5);
     --radio-color-active: color-mix(in srgb, var(--radio-color) 85%, black);
   }
 
@@ -12,7 +12,7 @@ var styles = css`
     gap: 0.5em;
     font-size: inherit;
     font-family: var(--u-font-base);
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #212121);
   }
   :host([disabled]) {
     opacity: 0.6;
@@ -34,11 +34,11 @@ var styles = css`
   }
   :host([type="button"]) .container {
     gap: 0;
-    border: 1px solid var(--u-neutral-300);
+    border: 1px solid var(--u-neutral-300, #E0E0E0);
     border-radius: 0.35em;
   }
   :host([invalid]) .container {
-    border-color: var(--u-danger-color);
+    border-color: var(--u-danger-color, #E53935);
   }
 
   /* Type: default */
@@ -94,7 +94,7 @@ var styles = css`
     border-radius: 0 0.35em 0.35em 0;
   }
   :host([type="button"][orientation="horizontal"]) ::slotted(u-option:not(:last-child)) {
-    border-right: 1px solid var(--u-neutral-300);
+    border-right: 1px solid var(--u-neutral-300, #E0E0E0);
   }
 
   /* === Button - Vertical 배치 === */
@@ -109,7 +109,7 @@ var styles = css`
     border-radius: 0 0 0.35em 0.35em;
   }
   :host([type="button"][orientation="vertical"]) ::slotted(u-option:not(:last-child)) {
-    border-bottom: 1px solid var(--u-neutral-300);
+    border-bottom: 1px solid var(--u-neutral-300, #E0E0E0);
   }
 `;
 //#endregion