@iyulab/components 1.10.0 → 1.13.0

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);
   }
 
   /* 애니메이션 효과 설정 */

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

@@ -2,7 +2,7 @@ import { css } from "lit";
 //#region src/components/slider/USlider.styles.ts
 var styles = css`
   :host {
-    --slider-fill-color: var(--u-primary-color, var(--u-blue-600));
+    --slider-fill-color: var(--u-primary-color);
     --slider-track-color: var(--u-neutral-300);
     --slider-track-height: 6px;
     --slider-thumb-size: 18px;
@@ -65,7 +65,7 @@ var styles = css`
     align-items: center;
     justify-content: center;
     border: 2px solid var(--slider-thumb-border-color);
-    border-radius: 50%;
+    border-radius: var(--u-radius-circle);
     background: var(--slider-thumb-color);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
     transition: transform 0.15s ease, box-shadow 0.15s ease;
@@ -85,7 +85,7 @@ var styles = css`
     width: auto;
     height: auto;
     border: none;
-    border-radius: 0;
+    border-radius: var(--u-radius-none);
     background: transparent;
     box-shadow: none;
   }
@@ -104,13 +104,13 @@ var styles = css`
     width: var(--slider-mark-size);
     height: var(--slider-mark-size);
     border: 2px solid var(--slider-mark-border-color);
-    border-radius: 50%;
+    border-radius: var(--u-radius-circle);
     background: var(--slider-mark-color);
   }
 
   .mark-labels {
     position: relative;
-    margin-top: 12px;
+    margin-top: var(--u-space-md, 12px);
   }
 
   .mark-label {

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

@@ -4,7 +4,7 @@ var styles = css`
   :host {
     --spinner-track-width: 0.125em;
     --spinner-track-color: var(--u-neutral-200);
-    --spinner-indicator-color: var(--u-primary-color, var(--u-blue-600));
+    --spinner-indicator-color: var(--u-primary-color);
     --spinner-indicator-speed: 2s;
   }
 

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

@@ -4,8 +4,8 @@ var styles = css`
   :host {
     --splitter-size: 4px;
     --splitter-color: var(--u-neutral-200);
-    --splitter-color-hover: var(--u-blue-300);
-    --splitter-color-active: var(--u-blue-500);
+    --splitter-color-hover: var(--u-primary-color-weaker);
+    --splitter-color-active: var(--u-primary-color-weak);
   }
 
   :host {

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

@@ -5,7 +5,7 @@ var styles = css`
     --switch-track-width: 2.4em;
     --switch-track-height: 1.4em;
     --switch-track-color: var(--u-neutral-300);
-    --switch-track-color-checked: var(--u-primary-color, var(--u-blue-600));
+    --switch-track-color-checked: var(--u-primary-color);
     --switch-thumb-size: 1.1em;
     --switch-thumb-offset: 0.15em;
     --switch-thumb-color: #fff;
@@ -34,7 +34,7 @@ var styles = css`
     cursor: default;
   }
   :host([invalid]) .track {
-    outline: 2px solid var(--u-red-600);
+    outline: 2px solid var(--u-danger-color);
     outline-offset: 1px;
   }
   :host(:not([disabled]):not([readonly]):hover) .track {
@@ -176,7 +176,7 @@ var styles = css`
   }
 
   .required {
-    color: var(--u-red-600);
+    color: var(--u-danger-color);
     font-weight: 500;
   }
 
@@ -188,7 +188,7 @@ var styles = css`
   }
 
   :host([invalid]) .description {
-    color: var(--u-red-600);
+    color: var(--u-danger-color);
   }
 `;
 //#endregion

package/dist/components/tab/UTab.d.ts

@@ -9,6 +9,8 @@ import { UElement } from '../UElement.js';
  * @csspart remove-btn - 탭 닫기 버튼
  *
  * @event remove - 탭이 닫힐 때 발생. 이벤트 리스너에서 preventDefault()를 호출하면 탭이 닫히지 않습니다.
+ * @cssprop --tab-padding-block - 세로 여백
+ * @cssprop --tab-padding-inline - 가로 여백
  */
 export declare class UTab extends UElement {
     static styles: import('lit').CSSResultGroup[];

package/dist/components/tab/UTab.js

@@ -34,11 +34,12 @@ var UTab = class UTab extends UElement {
 	}
 	render() {
 		return html`
-      <slot name="prefix"></slot>
-      <slot></slot>
-      <slot name="suffix"></slot>
-      
-      <u-button class="remove-btn" part="remove-btn"
+      <div class="base" part="base">
+        <slot name="prefix"></slot>
+        <slot></slot>
+        <slot name="suffix"></slot>
+
+        <u-button class="remove-btn" part="remove-btn"
         ?hidden=${!this.removable}
         variant="ghost"
         tabindex="-1"
@@ -47,6 +48,7 @@ var UTab = class UTab extends UElement {
       >
         <u-icon lib="internal" name="x"></u-icon>
       </u-button>
+      </div>
     `;
 	}
 };

package/dist/components/tab/UTab.styles.js

@@ -5,16 +5,28 @@ var styles = css`
     flex-shrink: 0;
     position: relative;
     display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 0.5em 0.75em;
     font-size: 0.9em;
     font-weight: 500;
     color: var(--u-txt-color-weak);
     white-space: nowrap;
     user-select: none;
     cursor: pointer;
+
+    --tab-padding-block: 0.5em;
+    --tab-padding-inline: 0.75em;
   }
+
+  /* 여백은 내부 요소가 진다 — :host 에 두면 소비 앱 CSS 리셋에 지워진다. */
+  .base {
+    box-sizing: border-box;
+    width: 100%;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    padding: var(--tab-padding-block) var(--tab-padding-inline);
+    border-radius: inherit;
+  }
+
   :host(:hover:not([disabled])) {
     color: var(--u-txt-color);
   }

package/dist/components/tab-panel/UTabPanel.d.ts

@@ -13,7 +13,7 @@ export type TabPanelPlacement = 'top' | 'bottom' | 'left' | 'right';
  * @csspart toolbar - 탭 헤더 내 툴바 영역
  * @csspart content - 탭 패널이 있는 콘텐츠 영역
  *
- * @cssprop --tab-panel-color - 활성 탭의 기준색 (기본: --u-primary-color, 미지정 시 blue-600)
+ * @cssprop --tab-panel-color - 활성 탭의 기준색 (기본: --u-primary-color)
  *
  * @event change - 탭을 클릭하거나 키보드로 선택했을 때만 발생한다. 최초 마운트 시 첫 탭이
  *   자동 선택되는 경우나 `value` 프로퍼티를 직접 대입하는 경우는 사용자 조작이 아니므로

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

@@ -2,7 +2,7 @@ import { css } from "lit";
 //#region src/components/tab-panel/UTabPanel.styles.ts
 var styles = css`
   :host {
-    --tab-panel-color: var(--u-primary-color, var(--u-blue-600));
+    --tab-panel-color: var(--u-primary-color);
   }
 
   :host {
@@ -179,11 +179,11 @@ var styles = css`
     gap: 0.25em;
     padding: 0.25em;
     background-color: var(--u-neutral-100);
-    border-radius: 8px;
+    border-radius: var(--u-radius-xl);
   }
   :host([variant="pill"]) ::slotted(u-tab) {
     border: 1px solid transparent;
-    border-radius: 6px;
+    border-radius: var(--u-radius-lg);
   }
   :host([variant="pill"]) ::slotted(u-tab[active]) {
     border-color: var(--u-border-color);

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

@@ -13,7 +13,10 @@ export type TagColor = "neutral" | "blue" | "green" | "yellow" | "red" | "orange
  * @cssprop --tag-color - 텍스트 색상
  * @cssprop --tag-bg-color - 배경 색상
  * @cssprop --tag-border-color - 테두리 색상
- * @cssprop --tag-fill-color - variant 별 채움 기준색 (기본: --u-primary-color, 미지정 시 blue-600)
+ * @cssprop --tag-fill-color - variant 별 채움 기준색 (기본: --u-primary-color)
+ * @cssprop --tag-padding-block - 세로 여백
+ * @cssprop --tag-padding-inline - 가로 여백
+ * @cssprop --tag-gap - prefix/본문/suffix 사이 간격
  */
 export declare class UTag extends UElement {
     static styles: import('lit').CSSResultGroup[];

package/dist/components/tag/UTag.js

@@ -17,11 +17,13 @@ var UTag = class UTag extends UElement {
 	}
 	render() {
 		return html`
-      <slot name="prefix"></slot>
-      <span class="content" part="content">
-        <slot></slot>
-      </span>
-      <slot name="suffix"></slot>
+      <div class="base" part="base">
+        <slot name="prefix"></slot>
+        <span class="content" part="content">
+          <slot></slot>
+        </span>
+        <slot name="suffix"></slot>
+      </div>
     `;
 	}
 };