@iyulab/components 1.10.0 → 1.12.0

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,7 +104,7 @@ 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);
   }
 

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

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

@@ -2,202 +2,121 @@ import { css } from "lit";
 //#region src/components/tag/UTag.styles.ts
 var styles = css`
   :host {
-    --tag-fill-color: var(--u-primary-color, var(--u-blue-600));
+    --tag-fill-color: var(--u-primary-color);
     --tag-color: var(--u-neutral-800);
     --tag-bg-color: var(--u-neutral-100);
     --tag-border-color: transparent;
   }
 
-  /* Variant: solid (강한 채움, 기본 색상은 --u-primary-color) */
+  /* ==========================================================================
+     장식 축 — 색 슬롯 매핑
+     color="purple" 에는 역할 의미가 없다(장식이다). 그래서 역할 토큰이 아니라
+     팔레트를 직접 읽으며, 브랜드 오버라이드에 의도적으로 면역이다.
+     아래 9개 규칙이 hue 슬롯을 채우고, variant 규칙이 그것을 소비한다.
+     슬롯이 비면(color="neutral") variant 규칙의 폴백 = 브랜드 경로를 탄다.
+     ========================================================================== */
+  :host([color="blue"]) {
+    --tag-hue-solid: var(--u-blue-500);
+    --tag-hue-line: var(--u-blue-300);
+    --tag-hue-surface: var(--u-blue-100);
+    --tag-hue-text: var(--u-blue-800);
+    --tag-hue-text-outlined: var(--u-blue-600);
+  }
+  :host([color="green"]) {
+    --tag-hue-solid: var(--u-green-500);
+    --tag-hue-line: var(--u-green-300);
+    --tag-hue-surface: var(--u-green-100);
+    --tag-hue-text: var(--u-green-800);
+    --tag-hue-text-outlined: var(--u-green-600);
+  }
+   /* yellow 는 명도가 높아 solid·outlined 텍스트를 한 단 진하게 쓴다 */
+  :host([color="yellow"]) {
+    --tag-hue-solid: var(--u-yellow-600);
+    --tag-hue-line: var(--u-yellow-300);
+    --tag-hue-surface: var(--u-yellow-100);
+    --tag-hue-text: var(--u-yellow-800);
+    --tag-hue-text-outlined: var(--u-yellow-700);
+  }
+  :host([color="red"]) {
+    --tag-hue-solid: var(--u-red-500);
+    --tag-hue-line: var(--u-red-300);
+    --tag-hue-surface: var(--u-red-100);
+    --tag-hue-text: var(--u-red-800);
+    --tag-hue-text-outlined: var(--u-red-600);
+  }
+  :host([color="orange"]) {
+    --tag-hue-solid: var(--u-orange-500);
+    --tag-hue-line: var(--u-orange-300);
+    --tag-hue-surface: var(--u-orange-100);
+    --tag-hue-text: var(--u-orange-800);
+    --tag-hue-text-outlined: var(--u-orange-600);
+  }
+  :host([color="teal"]) {
+    --tag-hue-solid: var(--u-teal-500);
+    --tag-hue-line: var(--u-teal-300);
+    --tag-hue-surface: var(--u-teal-100);
+    --tag-hue-text: var(--u-teal-800);
+    --tag-hue-text-outlined: var(--u-teal-600);
+  }
+  :host([color="cyan"]) {
+    --tag-hue-solid: var(--u-cyan-500);
+    --tag-hue-line: var(--u-cyan-300);
+    --tag-hue-surface: var(--u-cyan-100);
+    --tag-hue-text: var(--u-cyan-800);
+    --tag-hue-text-outlined: var(--u-cyan-600);
+  }
+  :host([color="purple"]) {
+    --tag-hue-solid: var(--u-purple-500);
+    --tag-hue-line: var(--u-purple-300);
+    --tag-hue-surface: var(--u-purple-100);
+    --tag-hue-text: var(--u-purple-800);
+    --tag-hue-text-outlined: var(--u-purple-600);
+  }
+  :host([color="pink"]) {
+    --tag-hue-solid: var(--u-pink-500);
+    --tag-hue-line: var(--u-pink-300);
+    --tag-hue-surface: var(--u-pink-100);
+    --tag-hue-text: var(--u-pink-800);
+    --tag-hue-text-outlined: var(--u-pink-600);
+  }
+
+  /* Variant: solid (강한 채움, 색 미지정 시 --tag-fill-color = 브랜드) */
   :host([variant="solid"]) {
     --tag-color: var(--u-neutral-0);
-    --tag-bg-color: var(--tag-fill-color);
-    --tag-border-color: var(--tag-fill-color);
-  }
-  :host([variant="solid"][color="blue"]) {
-    --tag-bg-color: var(--u-blue-500);
-    --tag-border-color: var(--u-blue-500);
-  }
-  :host([variant="solid"][color="green"]) {
-    --tag-bg-color: var(--u-green-500);
-    --tag-border-color: var(--u-green-500);
-  }
-  :host([variant="solid"][color="yellow"]) {
-    --tag-bg-color: var(--u-yellow-600);
-    --tag-border-color: var(--u-yellow-600);
-  }
-  :host([variant="solid"][color="red"]) {
-    --tag-bg-color: var(--u-red-500);
-    --tag-border-color: var(--u-red-500);
-  }
-  :host([variant="solid"][color="orange"]) {
-    --tag-bg-color: var(--u-orange-500);
-    --tag-border-color: var(--u-orange-500);
-  }
-  :host([variant="solid"][color="teal"]) {
-    --tag-bg-color: var(--u-teal-500);
-    --tag-border-color: var(--u-teal-500);
-  }
-  :host([variant="solid"][color="cyan"]) {
-    --tag-bg-color: var(--u-cyan-500);
-    --tag-border-color: var(--u-cyan-500);
-  }
-  :host([variant="solid"][color="purple"]) {
-    --tag-bg-color: var(--u-purple-500);
-    --tag-border-color: var(--u-purple-500);
-  }
-  :host([variant="solid"][color="pink"]) {
-    --tag-bg-color: var(--u-pink-500);
-    --tag-border-color: var(--u-pink-500);
+    --tag-bg-color: var(--tag-hue-solid, var(--tag-fill-color));
+    --tag-border-color: var(--tag-hue-solid, var(--tag-fill-color));
   }
 
   /* Variant: surface (채우기 + 테두리, 기본 색상은 --u-primary-color) */
   :host([variant="surface"]) {
-    --tag-color: color-mix(in srgb, var(--tag-fill-color) 70%, black);
-    --tag-bg-color: color-mix(in srgb, var(--tag-fill-color) 15%, var(--u-bg-color));
-    --tag-border-color: color-mix(in srgb, var(--tag-fill-color) 40%, var(--u-bg-color));
-  }
-  :host([variant="surface"][color="blue"]) {
-    --tag-color: var(--u-blue-800);
-    --tag-bg-color: var(--u-blue-100);
-    --tag-border-color: var(--u-blue-300);
-  }
-  :host([variant="surface"][color="green"]) {
-    --tag-color: var(--u-green-800);
-    --tag-bg-color: var(--u-green-100);
-    --tag-border-color: var(--u-green-300);
-  }
-  :host([variant="surface"][color="yellow"]) {
-    --tag-color: var(--u-yellow-800);
-    --tag-bg-color: var(--u-yellow-100);
-    --tag-border-color: var(--u-yellow-300);
-  }
-  :host([variant="surface"][color="red"]) {
-    --tag-color: var(--u-red-800);
-    --tag-bg-color: var(--u-red-100);
-    --tag-border-color: var(--u-red-300);
-  }
-  :host([variant="surface"][color="orange"]) {
-    --tag-color: var(--u-orange-800);
-    --tag-bg-color: var(--u-orange-100);
-    --tag-border-color: var(--u-orange-300);
-  }
-  :host([variant="surface"][color="teal"]) {
-    --tag-color: var(--u-teal-800);
-    --tag-bg-color: var(--u-teal-100);
-    --tag-border-color: var(--u-teal-300);
-  }
-  :host([variant="surface"][color="cyan"]) {
-    --tag-color: var(--u-cyan-800);
-    --tag-bg-color: var(--u-cyan-100);
-    --tag-border-color: var(--u-cyan-300);
-  }
-  :host([variant="surface"][color="purple"]) {
-    --tag-color: var(--u-purple-800);
-    --tag-bg-color: var(--u-purple-100);
-    --tag-border-color: var(--u-purple-300);
-  }
-  :host([variant="surface"][color="pink"]) {
-    --tag-color: var(--u-pink-800);
-    --tag-bg-color: var(--u-pink-100);
-    --tag-border-color: var(--u-pink-300);
+    --tag-color: var(--tag-hue-text, color-mix(in srgb, var(--tag-fill-color) 70%, black));
+    --tag-bg-color: var(--tag-hue-surface, color-mix(in srgb, var(--tag-fill-color) 15%, var(--u-bg-color)));
+    --tag-border-color: var(--tag-hue-line, color-mix(in srgb, var(--tag-fill-color) 40%, var(--u-bg-color)));
   }
 
   /* Variant: filled (채우기만, 테두리 없음, 기본 색상은 --u-primary-color) */
   :host([variant="filled"]) {
-    --tag-color: color-mix(in srgb, var(--tag-fill-color) 70%, black);
-    --tag-bg-color: color-mix(in srgb, var(--tag-fill-color) 15%, var(--u-bg-color));
+    --tag-color: var(--tag-hue-text, color-mix(in srgb, var(--tag-fill-color) 70%, black));
+    --tag-bg-color: var(--tag-hue-surface, color-mix(in srgb, var(--tag-fill-color) 15%, var(--u-bg-color)));
     --tag-border-color: transparent;
   }
-  :host([variant="filled"][color="blue"]) {
-    --tag-color: var(--u-blue-800);
-    --tag-bg-color: var(--u-blue-100);
-  }
-  :host([variant="filled"][color="green"]) {
-    --tag-color: var(--u-green-800);
-    --tag-bg-color: var(--u-green-100);
-  }
-  :host([variant="filled"][color="yellow"]) {
-    --tag-color: var(--u-yellow-800);
-    --tag-bg-color: var(--u-yellow-100);
-  }
-  :host([variant="filled"][color="red"]) {
-    --tag-color: var(--u-red-800);
-    --tag-bg-color: var(--u-red-100);
-  }
-  :host([variant="filled"][color="orange"]) {
-    --tag-color: var(--u-orange-800);
-    --tag-bg-color: var(--u-orange-100);
-  }
-  :host([variant="filled"][color="teal"]) {
-    --tag-color: var(--u-teal-800);
-    --tag-bg-color: var(--u-teal-100);
-  }
-  :host([variant="filled"][color="cyan"]) {
-    --tag-color: var(--u-cyan-800);
-    --tag-bg-color: var(--u-cyan-100);
-  }
-  :host([variant="filled"][color="purple"]) {
-    --tag-color: var(--u-purple-800);
-    --tag-bg-color: var(--u-purple-100);
-  }
-  :host([variant="filled"][color="pink"]) {
-    --tag-color: var(--u-pink-800);
-    --tag-bg-color: var(--u-pink-100);
-  }
 
   /* Variant: outlined (테두리만, 기본 색상은 --u-primary-color) */
   :host([variant="outlined"]) {
-    --tag-color: color-mix(in srgb, var(--tag-fill-color) 85%, black);
+    --tag-color: var(--tag-hue-text-outlined, color-mix(in srgb, var(--tag-fill-color) 85%, black));
     --tag-bg-color: transparent;
-    --tag-border-color: color-mix(in srgb, var(--tag-fill-color) 40%, var(--u-bg-color));
-  }
-  :host([variant="outlined"][color="blue"]) {
-    --tag-color: var(--u-blue-600);
-    --tag-border-color: var(--u-blue-300);
-  }
-  :host([variant="outlined"][color="green"]) {
-    --tag-color: var(--u-green-600);
-    --tag-border-color: var(--u-green-300);
-  }
-  :host([variant="outlined"][color="yellow"]) {
-    --tag-color: var(--u-yellow-700);
-    --tag-border-color: var(--u-yellow-300);
-  }
-  :host([variant="outlined"][color="red"]) {
-    --tag-color: var(--u-red-600);
-    --tag-border-color: var(--u-red-300);
-  }
-  :host([variant="outlined"][color="orange"]) {
-    --tag-color: var(--u-orange-600);
-    --tag-border-color: var(--u-orange-300);
-  }
-  :host([variant="outlined"][color="teal"]) {
-    --tag-color: var(--u-teal-600);
-    --tag-border-color: var(--u-teal-300);
-  }
-  :host([variant="outlined"][color="cyan"]) {
-    --tag-color: var(--u-cyan-600);
-    --tag-border-color: var(--u-cyan-300);
-  }
-  :host([variant="outlined"][color="purple"]) {
-    --tag-color: var(--u-purple-600);
-    --tag-border-color: var(--u-purple-300);
-  }
-  :host([variant="outlined"][color="pink"]) {
-    --tag-color: var(--u-pink-600);
-    --tag-border-color: var(--u-pink-300);
+    --tag-border-color: var(--tag-hue-line, color-mix(in srgb, var(--tag-fill-color) 40%, var(--u-bg-color)));
   }
 
   :host {
     display: inline-flex;
-    align-items: center;
-    gap: 4px;
     font-size: 12px;
     font-weight: 500;
-    padding: 0.25em 0.5em;
-    border: 1px solid var(--tag-border-color);
-    border-radius: 4px;
+    border-radius: var(--u-radius-md);
+
+    --tag-padding-block: 0.25em;
+    --tag-padding-inline: 0.5em;
+    --tag-gap: 4px;
     color: var(--tag-color);
     background-color: var(--tag-bg-color);
     line-height: 1.5em;
@@ -205,8 +124,20 @@ var styles = css`
     user-select: none;
     box-sizing: border-box;
   }
+
+  /* 여백/테두리는 내부 요소가 진다 — :host 에 두면 소비 앱 CSS 리셋에 지워진다. */
+  .base {
+    box-sizing: border-box;
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--tag-gap);
+    padding: var(--tag-padding-block) var(--tag-padding-inline);
+    border: 1px solid var(--tag-border-color);
+    border-radius: inherit;
+  }
   :host([rounded]) {
-    border-radius: 999px;
+    border-radius: var(--u-radius-pill);
   }
 
   /* === Slots === */

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

@@ -61,7 +61,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;
@@ -89,7 +89,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;

package/dist/components/tooltip/UTooltip.d.ts

@@ -8,6 +8,8 @@ import { UFloatingElement } from '../UFloatingElement.js';
  *
  * @event show - 툴팁을 표시하기 직전 발생 (취소 가능)
  * @event hide - 툴팁을 숨기기 직전 발생 (취소 가능)
+ * @cssprop --tooltip-padding-block - 세로 여백
+ * @cssprop --tooltip-padding-inline - 가로 여백
  */
 export declare class UTooltip extends UFloatingElement {
     static styles: import('lit').CSSResultGroup[];

package/dist/components/tooltip/UTooltip.js

@@ -67,7 +67,9 @@ var UTooltip = class UTooltip extends UFloatingElement {
 	}
 	render() {
 		return html`
-      <slot @slotchange=${this.handleSlotChange}></slot>
+      <div class="base" part="base">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
     `;
 	}
 	bind(anchors) {

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

@@ -6,17 +6,26 @@ var styles = css`
   }
 
   :host {
-    padding: 6px 8px;
     color: var(--u-tooltip-txt-color);
     font-family: var(--u-font-display, inherit);
     font-size: 12px;
     line-height: 1.25;
-    border: none;
-    border-radius: 4px;
+    border-radius: var(--u-radius-md);
     background-color: var(--u-tooltip-bg-color);
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
     transform: scale(0.9);
     transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
+
+    --tooltip-padding-block: 6px;
+    --tooltip-padding-inline: 8px;
+  }
+
+  /* 여백은 내부 요소가 진다 — :host 에 두면 소비 앱 CSS 리셋에 지워진다. */
+  .base {
+    box-sizing: border-box;
+    width: 100%;
+    padding: var(--tooltip-padding-block) var(--tooltip-padding-inline);
+    border-radius: inherit;
   }
   :host([open]) {
     transform: scale(1);

package/dist/components/tree-item/UTreeItem.d.ts

@@ -17,7 +17,7 @@ export type TreeItemTrigger = 'item' | 'icon';
  * @event pick - 선택 시 발생
  * @event check - 체크 시 발생
  *
- * @cssprop --tree-item-color - 선택/활성 상태의 기준색 (기본: --u-primary-color, 미지정 시 blue-600)
+ * @cssprop --tree-item-color - 선택/활성 상태의 기준색 (기본: --u-primary-color)
  */
 export declare class UTreeItem extends UElement {
     static styles: import('lit').CSSResultGroup[];

package/dist/components/tree-item/UTreeItem.styles.js

@@ -3,7 +3,7 @@ import { css } from "lit";
 var styles = css`
   :host {
     --tree-item-depth: 0;
-    --tree-item-color: var(--u-primary-color, var(--u-blue-600));
+    --tree-item-color: var(--u-primary-color);
   }
 
   :host {
@@ -67,7 +67,7 @@ var styles = css`
     justify-content: center;
     width: 18px;
     height: 18px;
-    border-radius: 3px;
+    border-radius: var(--u-radius-sm);
   }
   .prefix-toggler u-icon {
     font-size: 12px;
@@ -86,7 +86,7 @@ var styles = css`
     justify-content: center;
     width: 16px;
     height: 16px;
-    border-radius: 3px;
+    border-radius: var(--u-radius-sm);
     border: 1.5px solid var(--u-input-border-color);
     background-color: transparent;
     transition: background-color 0.15s ease, border-color 0.15s ease;