@iyulab/components 1.9.0 → 1.12.0

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: 6px;
+    border-radius: var(--u-radius-lg);
     background: var(--u-panel-bg-color, Canvas);
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
     pointer-events: auto;
@@ -98,7 +98,7 @@ var styles = css`
     flex-shrink: 0;
     padding: 4px;
     font-size: inherit;
-    border-radius: 4px;
+    border-radius: var(--u-radius-md);
   }
 
   .body {

package/dist/components/divider/UDivider.js

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

package/dist/components/drawer/UDrawer.d.ts

@@ -13,7 +13,7 @@ export type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
  * @csspart body - 본문 영역
  * @csspart close-btn - 닫기 버튼
  *
- * @cssproperty [--drawer-size=28rem] - 드로어 패널의 슬라이드 축 방향 크기.
+ * @cssprop --drawer-size - 드로어 패널의 슬라이드 축 방향 크기 (기본값: 좌우 28rem / 상하 16rem).
  *   좌우(left/right) placement는 너비, 상하(top/bottom) placement는 높이로 적용된다(상하 기본 16rem).
  *   화면이 좁으면 max-width/max-height:100%로 자동 축소된다.
  */

package/dist/components/drawer/UDrawer.js

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

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

@@ -86,7 +86,7 @@ var styles = css`
     flex-shrink: 0;
     padding: 4px;
     font-size: inherit;
-    border-radius: 4px;
+    border-radius: var(--u-radius-md);
   }
 
   .body {

package/dist/components/field/UField.js

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

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

@@ -12,7 +12,7 @@ var styles = css`
     cursor: not-allowed;
   }
   :host([invalid]) .footer {
-    color: var(--u-red-600);
+    color: var(--u-danger-color);
   }
 
   .header {
@@ -32,7 +32,7 @@ var styles = css`
   }
 
   .required {
-    color: var(--u-red-600);
+    color: var(--u-danger-color);
     margin-right: 0.2em;
   }
   

package/dist/components/form/UForm.js

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

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

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

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

@@ -11,7 +11,7 @@ var styles = css`
     color: #fff;
   }
   :host([variant="link"]) {
-    color: var(--u-blue-500);
+    color: var(--u-primary-color-weak);
   }
 
   u-button {

package/dist/components/input/UInput.d.ts

@@ -23,6 +23,10 @@ export type InputVariant = 'outlined' | 'filled' | 'underlined' | 'borderless';
  *    docs/theming.md 참고)
  * @csspart popover - 드롭다운 팝오버 요소
  *
+ * @cssprop --u-input-display - 호스트의 display (기본값: inline-block). 폼/그리드 셀에서
+ *   컨테이너 폭을 채우려면 `block`으로 지정한다.
+ * @cssprop --u-input-width - 호스트의 width (기본값: auto). flex 컨테이너처럼 block만으로는
+ *   늘어나지 않는 맥락에서 `100%`로 지정한다.
  * @cssprop --input-popover-width - 드롭다운 팝오버의 너비 (기본값: 앵커(트리거) 너비)
  * @cssprop --input-popover-min-height - 드롭다운 팝오버의 최소 높이 (기본값: 0px)
  * @cssprop --input-popover-max-height - 드롭다운 팝오버의 최대 높이 (기본값: 50vh)

package/dist/components/input/UInput.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { UFormControlElement } from "../UFormControlElement.js";
 import "../spinner/USpinner.js";
 import "../icon/UIcon.js";
@@ -71,7 +71,6 @@ var UInput = class UInput extends UFormControlElement {
 				case "Escape":
 					e.preventDefault();
 					this.popoverEl?.hide();
-					break;
 			}
 		};
 		this.handlePasswordTogglerClick = (e) => {
@@ -115,7 +114,6 @@ var UInput = class UInput extends UFormControlElement {
 					e.preventDefault();
 					this.popoverEl?.hide();
 					this.focus();
-					break;
 			}
 		};
 		this.handlePopoverShow = (e) => {

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

@@ -8,7 +8,10 @@ var styles = css`
 
   :host {
     position: relative;
+    /* 폼/그리드 셀에서 컨테이너 폭을 채우려면 소비자가 --u-input-display: block 을 준다.
+       flex 컨테이너처럼 block 만으로 늘어나지 않는 맥락을 위해 width 경로도 함께 연다. */
     display: var(--u-input-display, inline-block);
+    width: var(--u-input-width, auto);
     color: var(--u-txt-color);
     font-size: inherit;
     font-family: var(--u-font-base);
@@ -72,7 +75,7 @@ var styles = css`
     padding-left: 0;
     padding-right: 0;
     border: none;
-    border-radius: 0;
+    border-radius: var(--u-radius-none);
     border-bottom: 1px solid var(--u-input-border-color);
     background-color: transparent;
   }
@@ -98,7 +101,7 @@ var styles = css`
   /* ===== Variant: borderless ===== */
   :host([variant="borderless"]) .container {
     border: none;
-    border-radius: 0;
+    border-radius: var(--u-radius-none);
     background-color: transparent;
     padding: 0;
     box-shadow: none;
@@ -170,7 +173,7 @@ var styles = css`
     max-height: var(--input-popover-max-height);
     padding: 4px;
     border: 1px solid var(--u-border-color);
-    border-radius: 6px;
+    border-radius: var(--u-radius-lg);
     background-color: var(--u-panel-bg-color);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
     overflow-x: auto;

package/dist/components/menu/UMenu.d.ts

@@ -8,6 +8,9 @@ export type MenuSelection = 'none' | 'single' | 'multiple';
  * @slot - 메뉴 아이템 (u-menu-item, u-divider)
  *
  * @cssprop --menu-indent-size - 하위 메뉴 아이템의 들여쓰기 크기 (기본값: 20px)
+ * @cssprop --menu-padding - 내부 여백 (`borderless` 는 0)
+ * @cssprop --menu-border-width - 테두리 두께 (`borderless` 는 0)
+ * @cssprop --menu-border-color - 테두리 색
  *
  * @event change - 선택된 아이템이 변경될 때 발생
  */

package/dist/components/menu/UMenu.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { UMenuItem } from "../menu-item/UMenuItem.js";
 import { styles } from "./UMenu.styles.js";
 import { html } from "lit";
@@ -88,7 +88,6 @@ var UMenu = class UMenu extends UElement {
 					e.preventDefault();
 					if (!focused.leaf && focused.expanded) focused.expanded = false;
 					else if (focused.parentItem) focused.parentItem.focus();
-					break;
 			}
 		};
 	}
@@ -121,7 +120,9 @@ var UMenu = class UMenu extends UElement {
 		].some((k) => changedProperties.has(k))) this.propagate();
 	}
 	render() {
-		return html`<slot @slotchange=${this.handleSlotChange}></slot>`;
+		return html`<div class="base" part="base">
+      <slot @slotchange=${this.handleSlotChange}></slot>
+    </div>`;
 	}
 	getItems(fn) {
 		const result = [];

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

@@ -8,16 +8,29 @@ var styles = css`
   :host {
     display: flex;
     flex-direction: column;
-    padding: 4px;
     min-width: 160px;
-    border: 1px solid var(--u-border-color);
-    border-radius: 6px;
+    border-radius: var(--u-radius-lg);
     background-color: var(--u-panel-bg-color);
+
+    --menu-padding: 4px;
+    --menu-border-width: 1px;
+    --menu-border-color: var(--u-border-color);
+  }
+
+  /* 여백/테두리는 내부 요소가 진다 — :host 에 두면 소비 앱 CSS 리셋에 지워진다. */
+  .base {
+    box-sizing: border-box;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: var(--menu-padding);
+    border: var(--menu-border-width) solid var(--menu-border-color);
+    border-radius: inherit;
   }
   :host([borderless]) {
-    padding: 0;
-    border: none;
-    border-radius: 0;
+    --menu-padding: 0;
+    --menu-border-width: 0;
+    border-radius: var(--u-radius-none);
     background-color: transparent;
   }
 `;

package/dist/components/menu-item/UMenuItem.d.ts

@@ -16,6 +16,8 @@ export type MenuItemAlign = 'left' | 'center' | 'right';
  * @csspart popover - 팝오버 모드에서 하위 메뉴 컨테이너
  *
  * @event pick - 아이템 선택 시 발생 (하위 메뉴가 없는 경우)
+ *
+ * @cssprop --menu-item-color - 선택/활성 상태의 기준색 (기본: --u-primary-color)
  */
 export declare class UMenuItem extends UElement {
     static styles: import('lit').CSSResultGroup[];

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

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import "../icon/UIcon.js";
 import { UDivider } from "../divider/UDivider.js";
 import "../popover/UPopover.js";
@@ -121,6 +121,7 @@ var UMenuItem = class UMenuItem extends UElement {
             trigger="hover"
             placement="right-start"
             offset="4"
+            strategy="fixed"
           >
             <slot name="children" @slotchange=${this.handleChildrenSlotChange}></slot>
           </u-popover>`}

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, var(--u-blue-600));
+    --menu-item-color: var(--u-primary-color);
   }
 
   :host {
@@ -137,7 +137,7 @@ var styles = css`
     flex-direction: column;
     padding: 4px;
     border: 1px solid var(--u-border-color);
-    border-radius: 4px;
+    border-radius: var(--u-radius-md);
     background-color: var(--u-panel-bg-color);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     transform: scale(0.8);

package/dist/components/option/UOption.d.ts

@@ -20,6 +20,10 @@ export type OptionMarker = 'radio' | 'check';
  * @cssprop --option-color-active-interactive - 선택된 상태에서 호버/포커스 시 텍스트 색상
  * @cssprop --option-border-color-active-interactive - 선택된 상태에서 호버/포커스 시 테두리 색상
  * @cssprop --option-background-color-active-interactive - 선택된 상태에서 호버/포커스 시 배경 색상
+ * @cssprop --option-color - 선택 상태의 기준색. 위 active 계열이 이 값에서 파생된다
+ *   (기본: --u-primary-color)
+ * @cssprop --option-padding-block - 세로 여백
+ * @cssprop --option-padding-inline - 가로 여백
  */
 export declare class UOption extends UElement {
     static styles: import('lit').CSSResultGroup[];

package/dist/components/option/UOption.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import "../icon/UIcon.js";
 import { styles } from "./UOption.styles.js";
 import { html, nothing } from "lit";
@@ -32,12 +32,14 @@ var UOption = class UOption extends UElement {
 	}
 	render() {
 		return html`
-      ${this.renderMarker()}
-      <slot name="prefix"></slot>
-      <div class="content" part="content">
-        <slot></slot>
+      <div class="base" part="base">
+        ${this.renderMarker()}
+        <slot name="prefix"></slot>
+        <div class="content" part="content">
+          <slot></slot>
+        </div>
+        <slot name="suffix"></slot>
       </div>
-      <slot name="suffix"></slot>
     `;
 	}
 	renderMarker() {

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

@@ -2,7 +2,7 @@ import { css } from "lit";
 //#region src/components/option/UOption.styles.ts
 var styles = css`
   :host {
-    --option-color: var(--u-primary-color, var(--u-blue-600));
+    --option-color: var(--u-primary-color);
     --option-color-interactive: inherit;
     --option-border-color-interactive: var(--u-border-color-hover);
     --option-background-color-interactive: var(--u-bg-color-hover);
@@ -18,12 +18,23 @@ var styles = css`
 
   :host {
     display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 0.25em 0.5em;
     transition: background-color 0.15s ease, color 0.15s ease;
     user-select: none;
     cursor: pointer;
+
+    --option-padding-block: 0.25em;
+    --option-padding-inline: 0.5em;
+  }
+
+  /* 여백은 내부 요소가 진다 — :host 에 두면 소비 앱 CSS 리셋에 지워진다. */
+  .base {
+    box-sizing: border-box;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: var(--option-padding-block) var(--option-padding-inline);
+    border-radius: inherit;
   }
   :host(:focus-visible) {
     outline: none;
@@ -89,7 +100,7 @@ var styles = css`
     width: 1.25em;
     height: 1.25em;
     border: 2px solid var(--u-neutral-400);
-    border-radius: 50%;
+    border-radius: var(--u-radius-circle);
     background-color: var(--u-bg-color);
     transition: border-color 0.2s ease, background-color 0.2s ease;
   }
@@ -113,7 +124,7 @@ var styles = css`
     display: block;
     width: 0.45em;
     height: 0.45em;
-    border-radius: 50%;
+    border-radius: var(--u-radius-circle);
     background-color: var(--option-color-active);
     transform: scale(0);
     transition: transform 0.15s ease;

package/dist/components/panel/UPanel.js

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

package/dist/components/popover/UPopover.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { UFloatingElement } from "../UFloatingElement.js";
 import { arrayAttrConverter } from "../../utilities/converters.js";
 import { styles } from "./UPopover.styles.js";
@@ -171,7 +171,6 @@ var UPopover = class UPopover extends UFloatingElement {
 				}
 				this.addEventListener("focusin", this.handlePopoverFocusIn);
 				this.addEventListener("focusout", this.handlePopoverFocusOut);
-				break;
 		}
 		const dismissList = new Set(this.dismiss);
 		if (dismissList.has("click")) document.addEventListener("click", this.handleDocumentClick);

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

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { styles } from "./UProgressBar.styles.js";
 import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
@@ -49,7 +49,8 @@ var UProgressBar = class UProgressBar extends UElement {
 
       <div class="segments" part="segments" ?hidden=${!hasSegments}>
         ${Array.from({ length: Math.max(this.segments - 1, 0) }, (_, i) => {
-			return html`<div class="segment-gap" style="left: ${(i + 1) / this.segments * 100}%; width: ${this.segmentGap}px;"></div>`;
+			const left = (i + 1) / this.segments * 100;
+			return html`<div class="segment-gap" style="left: ${left}%; width: ${this.segmentGap}px;"></div>`;
 		})}
       </div>
 

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, var(--u-blue-600));
+    --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);
   }
 
   /* === Status Colors === */
   :host([status="success"]) { 
-    --progress-bar-color: var(--u-green-600); 
-    --progress-bar-buffer-color: var(--u-green-200); 
+    --progress-bar-color: var(--u-success-color); 
+    --progress-bar-buffer-color: var(--u-success-color-weakest); 
   }
   :host([status="warning"]) { 
-    --progress-bar-color: var(--u-yellow-500); 
-    --progress-bar-buffer-color: var(--u-yellow-200); 
+    --progress-bar-color: var(--u-warning-color-weak); 
+    --progress-bar-buffer-color: var(--u-warning-color-weakest); 
   }
   :host([status="error"]) { 
-    --progress-bar-color: var(--u-red-600); 
-    --progress-bar-buffer-color: var(--u-red-200); 
+    --progress-bar-color: var(--u-danger-color); 
+    --progress-bar-buffer-color: var(--u-danger-color-weakest); 
   }
   :host([status="info"]) { 
-    --progress-bar-color: var(--u-blue-500); 
-    --progress-bar-buffer-color: var(--u-blue-200); 
+    --progress-bar-color: var(--u-info-color-weak); 
+    --progress-bar-buffer-color: var(--u-info-color-weakest); 
   }
 
   :host {
@@ -37,7 +37,7 @@ var styles = css`
 
   /* === Rounded === */
   :host([rounded]) {
-    border-radius: 9999px;
+    border-radius: var(--u-radius-pill);
   }
 
   /* === Indeterminate === */

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

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

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, var(--u-blue-600));
+    --progress-ring-color: var(--u-primary-color);
     --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));
@@ -11,20 +11,20 @@ var styles = css`
 
   /* === Status Colors === */
   :host([status="success"]) { 
-    --progress-ring-color: var(--u-green-600);
-    --progress-ring-buffer-color: var(--u-green-200);
+    --progress-ring-color: var(--u-success-color);
+    --progress-ring-buffer-color: var(--u-success-color-weakest);
   }
   :host([status="warning"]) { 
-    --progress-ring-color: var(--u-yellow-500);
-    --progress-ring-buffer-color: var(--u-yellow-200);
+    --progress-ring-color: var(--u-warning-color-weak);
+    --progress-ring-buffer-color: var(--u-warning-color-weakest);
   }
   :host([status="error"]) { 
-    --progress-ring-color: var(--u-red-600);
-    --progress-ring-buffer-color: var(--u-red-200);
+    --progress-ring-color: var(--u-danger-color);
+    --progress-ring-buffer-color: var(--u-danger-color-weakest);
   }
   :host([status="info"]) { 
-    --progress-ring-color: var(--u-blue-500);
-    --progress-ring-buffer-color: var(--u-blue-200);
+    --progress-ring-color: var(--u-info-color-weak);
+    --progress-ring-buffer-color: var(--u-info-color-weakest);
   }
 
   /* === Host === */

package/dist/components/radio/URadio.d.ts

@@ -11,6 +11,9 @@ export type RadioOrientation = "vertical" | "horizontal";
  * @csspart field - u-field 요소
  * @csspart container - 옵션들을 감싸는 컨테이너
  *
+ * @cssprop --radio-color - 선택 상태의 기준색 (기본: --u-primary-color)
+ * @cssprop --radio-color-active - 선택 상태 active 톤 (기본: --radio-color 85% + black)
+ *
  * @event change - 사용자 상호작용(옵션 클릭·키보드)으로 선택 값이 변경될 때 발생.
  *   네이티브 라디오와 동일하게 프로그램적 value 세팅·옵션 등록으로는 발화하지 않는다.
  */

package/dist/components/radio/URadio.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { UFormControlElement } from "../UFormControlElement.js";
 import { Locale } from "../../utilities/Locale.js";
 import "../field/UField.js";
@@ -59,7 +59,6 @@ var URadio = class URadio extends UFormControlElement {
 				case "End":
 					e.preventDefault();
 					options[options.length - 1].focus();
-					break;
 			}
 		};
 	}

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, var(--u-blue-600));
+    --radio-color: var(--u-primary-color);
     --radio-color-active: color-mix(in srgb, var(--radio-color) 85%, black);
   }
 
@@ -38,7 +38,7 @@ var styles = css`
     border-radius: 0.35em;
   }
   :host([invalid]) .container {
-    border-color: var(--u-red-600);
+    border-color: var(--u-danger-color);
   }
 
   /* Type: default */

package/dist/components/rating/URating.js

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

package/dist/components/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-yellow-500);
+    --rating-symbol-color: var(--u-warning-color-weak);
     --rating-symbol-off-color: var(--u-neutral-300);
   }
 
@@ -32,7 +32,7 @@ var styles = css`
     transition: color 0.15s ease, transform 0.15s ease;
   }
   .symbol:focus-visible {
-    outline: 2px solid var(--u-blue-500);
+    outline: 2px solid var(--u-primary-color-weak);
     outline-offset: 2px;
   }
   :host(:not([disabled]):not([readonly])) .symbol:hover {