@iyulab/components 1.10.0 → 1.12.0

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

@@ -94,7 +94,7 @@ var styles = css`
     height: 10px;
     padding: 0;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--u-radius-circle);
     background-color: var(--u-neutral-400);
     cursor: pointer;
     transition: all 0.2s ease;

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

@@ -20,7 +20,7 @@ export type CheckboxColor = "blue" | "green" | "red" | "orange" | "teal" | "cyan
  *
  * @event change - 체크 상태 변경 시 발생
  *
- * @cssprop --checkbox-fill-color - 체크된 상태의 채움색 (기본: --u-primary-color, 미지정 시 blue-600)
+ * @cssprop --checkbox-fill-color - 체크된 상태의 채움색 (기본: --u-primary-color)
  */
 export declare class UCheckbox extends UFormControlElement<string> {
     static styles: import('lit').CSSResultGroup[];

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

@@ -2,7 +2,7 @@ import { css } from "lit";
 //#region src/components/checkbox/UCheckbox.styles.ts
 var styles = css`
   :host {
-    --checkbox-fill-color: var(--u-primary-color, var(--u-blue-600));
+    --checkbox-fill-color: var(--u-primary-color);
     --checkbox-color: inherit;
     --checkbox-border-color: var(--u-input-border-color);
     --checkbox-background-color: var(--u-input-bg-color);
@@ -27,10 +27,10 @@ var styles = css`
     cursor: default;
   }
   :host([invalid]) {
-    --checkbox-border-color: var(--u-red-600);
+    --checkbox-border-color: var(--u-danger-color);
   }
   :host([invalid]) .footer {
-    color: var(--u-red-600);
+    color: var(--u-danger-color);
   }
   :host([checked]) .checkbox u-icon,
   :host([indeterminate]) .checkbox u-icon {
@@ -44,110 +44,50 @@ var styles = css`
   :host([variant="filled"][checked]),
   :host([variant="filled"][indeterminate]) {
     --checkbox-color: var(--u-neutral-100);
-    --checkbox-border-color: var(--checkbox-fill-color);
-    --checkbox-background-color: var(--checkbox-fill-color);
+    --checkbox-border-color: var(--checkbox-hue, var(--checkbox-fill-color));
+    --checkbox-background-color: var(--checkbox-hue, var(--checkbox-fill-color));
   }
 
   /* === Variant: outline - 테두리만 === */
   :host([variant="outline"][checked]),
   :host([variant="outline"][indeterminate]) {
-    --checkbox-border-color: var(--checkbox-fill-color);
+    --checkbox-color: var(--checkbox-hue, var(--checkbox-fill-color));
+    --checkbox-border-color: var(--checkbox-hue, var(--checkbox-fill-color));
     --checkbox-background-color: transparent;
   }
 
-  /* === Color variants (filled) === */
-  :host([variant="filled"][color="blue"][checked]),
-  :host([variant="filled"][color="blue"][indeterminate]) {
-    --checkbox-border-color: var(--checkbox-fill-color);
-    --checkbox-background-color: var(--checkbox-fill-color);
-  }
-  :host([variant="filled"][color="green"][checked]),
-  :host([variant="filled"][color="green"][indeterminate]) {
-    --checkbox-border-color: var(--u-green-600);
-    --checkbox-background-color: var(--u-green-600);
-  }
-  :host([variant="filled"][color="red"][checked]),
-  :host([variant="filled"][color="red"][indeterminate]) {
-    --checkbox-border-color: var(--u-red-600);
-    --checkbox-background-color: var(--u-red-600);
-  }
-  :host([variant="filled"][color="orange"][checked]),
-  :host([variant="filled"][color="orange"][indeterminate]) {
-    --checkbox-border-color: var(--u-orange-600);
-    --checkbox-background-color: var(--u-orange-600);
-  }
-  :host([variant="filled"][color="teal"][checked]),
-  :host([variant="filled"][color="teal"][indeterminate]) {
-    --checkbox-border-color: var(--u-teal-600);
-    --checkbox-background-color: var(--u-teal-600);
-  }
-  :host([variant="filled"][color="cyan"][checked]),
-  :host([variant="filled"][color="cyan"][indeterminate]) {
-    --checkbox-border-color: var(--u-cyan-600);
-    --checkbox-background-color: var(--u-cyan-600);
-  }
-  :host([variant="filled"][color="purple"][checked]),
-  :host([variant="filled"][color="purple"][indeterminate]) {
-    --checkbox-border-color: var(--u-purple-600);
-    --checkbox-background-color: var(--u-purple-600);
-  }
-  :host([variant="filled"][color="pink"][checked]),
-  :host([variant="filled"][color="pink"][indeterminate]) {
-    --checkbox-border-color: var(--u-pink-600);
-    --checkbox-background-color: var(--u-pink-600);
-  }
-  :host([variant="filled"][color="neutral"][checked]),
-  :host([variant="filled"][color="neutral"][indeterminate]) {
-    --checkbox-border-color: var(--u-neutral-600);
-    --checkbox-background-color: var(--u-neutral-600);
+  /* ==========================================================================
+     장식 축 — color= 는 hue 슬롯만 채운다. variant 규칙이 폴백과 함께 읽는다.
+     기본값 blue 는 규칙이 없다 = 슬롯이 비어 브랜드 훅(--checkbox-fill-color)을 탄다.
+     u-tag 와 같은 방식이다 — 슬롯이 채워지면 color= 가 최종 권한을 갖는다.
+     즉 blue 는 장식 축의 한 값이 아니라 "색을 지정하지 않음" 의 표기다.
+     ========================================================================== */
+  :host([color="green"]) {
+    --checkbox-hue: var(--u-green-600);
   }
-
-  /* === Color variants (outline) === */
-  :host([variant="outline"][color="blue"][checked]),
-  :host([variant="outline"][color="blue"][indeterminate]) {
-    --checkbox-color: var(--checkbox-fill-color);
-    --checkbox-border-color: var(--checkbox-fill-color);
-  }
-  :host([variant="outline"][color="green"][checked]),
-  :host([variant="outline"][color="green"][indeterminate]) {
-    --checkbox-color: var(--u-green-600);
-    --checkbox-border-color: var(--u-green-600);
-  }
-  :host([variant="outline"][color="red"][checked]),
-  :host([variant="outline"][color="red"][indeterminate]) {
-    --checkbox-color: var(--u-red-600);
-    --checkbox-border-color: var(--u-red-600);
-  }
-  :host([variant="outline"][color="orange"][checked]),
-  :host([variant="outline"][color="orange"][indeterminate]) {
-    --checkbox-color: var(--u-orange-600);
-    --checkbox-border-color: var(--u-orange-600);
-  }
-  :host([variant="outline"][color="teal"][checked]),
-  :host([variant="outline"][color="teal"][indeterminate]) {
-    --checkbox-color: var(--u-teal-600);
-    --checkbox-border-color: var(--u-teal-600);
-  }
-  :host([variant="outline"][color="cyan"][checked]),
-  :host([variant="outline"][color="cyan"][indeterminate]) {
-    --checkbox-color: var(--u-cyan-600);
-    --checkbox-border-color: var(--u-cyan-600);
-  }
-  :host([variant="outline"][color="purple"][checked]),
-  :host([variant="outline"][color="purple"][indeterminate]) {
-    --checkbox-color: var(--u-purple-600);
-    --checkbox-border-color: var(--u-purple-600);
-  }
-  :host([variant="outline"][color="pink"][checked]),
-  :host([variant="outline"][color="pink"][indeterminate]) {
-    --checkbox-color: var(--u-pink-600);
-    --checkbox-border-color: var(--u-pink-600);
-  }
-  :host([variant="outline"][color="neutral"][checked]),
-  :host([variant="outline"][color="neutral"][indeterminate]) {
-    --checkbox-color: var(--u-neutral-600);
-    --checkbox-border-color: var(--u-neutral-600);
+  :host([color="red"]) {
+    --checkbox-hue: var(--u-red-600);
+  }
+  :host([color="orange"]) {
+    --checkbox-hue: var(--u-orange-600);
+  }
+  :host([color="teal"]) {
+    --checkbox-hue: var(--u-teal-600);
+  }
+  :host([color="cyan"]) {
+    --checkbox-hue: var(--u-cyan-600);
+  }
+  :host([color="purple"]) {
+    --checkbox-hue: var(--u-purple-600);
   }
+  :host([color="pink"]) {
+    --checkbox-hue: var(--u-pink-600);
+  }
+  :host([color="neutral"]) {
+    --checkbox-hue: var(--u-neutral-600);
+  }
+
+
 
   .wrapper {
     display: inline-flex;
@@ -197,7 +137,7 @@ var styles = css`
   }
 
   .required {
-    color: var(--u-red-600);
+    color: var(--u-danger-color);
     font-weight: 500;
   }
 
@@ -209,7 +149,7 @@ var styles = css`
   }
 
   :host([invalid]) .description {
-    color: var(--u-red-600);
+    color: var(--u-danger-color);
   }
 `;
 //#endregion

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

@@ -14,12 +14,12 @@ var styles = css`
   }
 
   :host([copied]) u-icon-button {
-    color: var(--u-green-500);
+    color: var(--u-success-color-weak);
   }
 
   /* 라벨 형태(아이콘+텍스트): 복사 완료 시 아이콘/텍스트를 성공색으로 강조 */
   :host([copied]) u-button {
-    color: var(--u-green-500);
+    color: var(--u-success-color-weak);
   }
 `;
 //#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: 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/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.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/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.styles.js

@@ -75,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;
   }
@@ -101,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;
@@ -173,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

@@ -120,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

@@ -17,7 +17,7 @@ export type MenuItemAlign = 'left' | 'center' | 'right';
  *
  * @event pick - 아이템 선택 시 발생 (하위 메뉴가 없는 경우)
  *
- * @cssprop --menu-item-color - 선택/활성 상태의 기준색 (기본: --u-primary-color, 미지정 시 blue-600)
+ * @cssprop --menu-item-color - 선택/활성 상태의 기준색 (기본: --u-primary-color)
  */
 export declare class UMenuItem extends UElement {
     static styles: import('lit').CSSResultGroup[];

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

@@ -21,7 +21,9 @@ export type OptionMarker = 'radio' | 'check';
  * @cssprop --option-border-color-active-interactive - 선택된 상태에서 호버/포커스 시 테두리 색상
  * @cssprop --option-background-color-active-interactive - 선택된 상태에서 호버/포커스 시 배경 색상
  * @cssprop --option-color - 선택 상태의 기준색. 위 active 계열이 이 값에서 파생된다
- *   (기본: --u-primary-color, 미지정 시 blue-600)
+ *   (기본: --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

@@ -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/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.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,7 +11,7 @@ export type RadioOrientation = "vertical" | "horizontal";
  * @csspart field - u-field 요소
  * @csspart container - 옵션들을 감싸는 컨테이너
  *
- * @cssprop --radio-color - 선택 상태의 기준색 (기본: --u-primary-color, 미지정 시 blue-600)
+ * @cssprop --radio-color - 선택 상태의 기준색 (기본: --u-primary-color)
  * @cssprop --radio-color-active - 선택 상태 active 톤 (기본: --radio-color 85% + black)
  *
  * @event change - 사용자 상호작용(옵션 클릭·키보드)으로 선택 값이 변경될 때 발생.

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.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 {

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

@@ -79,7 +79,7 @@ var styles = css`
   /* ===== Variant: underlined ===== */
   :host([variant="underlined"]) .container {
     border: none;
-    border-radius: 0;
+    border-radius: var(--u-radius-none);
     background-color: transparent;
     padding-left: 0;
     padding-right: 0;
@@ -107,7 +107,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;
@@ -171,7 +171,7 @@ var styles = css`
     max-height: var(--select-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: hidden;

package/dist/components/skeleton/USkeleton.styles.js

@@ -18,13 +18,13 @@ var styles = css`
 
   /* 모양 설정 */
   :host([shape="rectangle"]) {
-    border-radius: 4px;
+    border-radius: var(--u-radius-md);
   }
   :host([shape="circle"]) {
-    border-radius: 50%;
+    border-radius: var(--u-radius-circle);
   }
   :host([shape="rounded"]) {
-    border-radius: 9999px;
+    border-radius: var(--u-radius-pill);
   }
 
   /* 애니메이션 효과 설정 */