@iyulab/components 1.9.0 → 1.12.0

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.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";

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

@@ -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 { styles } from "./UTooltip.styles.js";
 import { html } from "lit";
@@ -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/UTree.d.ts

@@ -13,6 +13,12 @@ import { UTreeItem, TreeItemTrigger } from '../tree-item/UTreeItem.js';
  * @cssprop tree-indent-guide-color - 들여쓰기 가이드 선의 색상 (기본값: var(--u-border-color-weak))
  *
  * @event change - 선택된 아이템이 변경될 때 발생
+ *
+ * @cssprop --tree-indent-size - 깊이 한 단계당 들여쓰기 폭 (기본: 14px). 하위 u-tree-item 이 상속받는다.
+ * @cssprop --tree-indent-guide-offset - 들여쓰기 가이드 선의 좌측 오프셋 (기본: 8px)
+ * @cssprop --tree-indent-guide-width - 가이드 선 두께 (기본: 1px)
+ * @cssprop --tree-indent-guide-style - 가이드 선 스타일 (기본: solid)
+ * @cssprop --tree-indent-guide-color - 가이드 선 색상 (기본: --u-border-color-weak)
  */
 export declare class UTree extends UElement {
     static styles: import('lit').CSSResultGroup[];

package/dist/components/tree/UTree.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 { UTreeItem } from "../tree-item/UTreeItem.js";
 import { styles } from "./UTree.styles.js";
 import { html } from "lit";

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

@@ -16,6 +16,8 @@ export type TreeItemTrigger = 'item' | 'icon';
  * @event collapse - 노드 접힐 시 발생
  * @event pick - 선택 시 발생
  * @event check - 체크 시 발생
+ *
+ * @cssprop --tree-item-color - 선택/활성 상태의 기준색 (기본: --u-primary-color)
  */
 export declare class UTreeItem extends UElement {
     static styles: import('lit').CSSResultGroup[];

package/dist/components/tree-item/UTreeItem.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 "../spinner/USpinner.js";
 import "../icon/UIcon.js";
 import { styles } from "./UTreeItem.styles.js";

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;

package/dist/react/UDialog.d.ts

@@ -1,11 +1,15 @@
 import React from 'react';
 import { UDialog as UDialogElement } from '../components/dialog/UDialog';
+import { type ShowEventDetail } from '../events/ShowEvent';
+import { type HideEventDetail } from '../events/HideEvent';
 
 export declare const UDialog: React.ForwardRefExoticComponent<
   Omit<Partial<UDialogElement>, keyof React.HTMLAttributes<UDialogElement>>
-    & Omit<React.HTMLAttributes<UDialogElement>, never>
+    & Omit<React.HTMLAttributes<UDialogElement>, 'onShow' | 'onHide'>
     & React.RefAttributes<UDialogElement>
     & {
+  onShow?: (event: CustomEvent<ShowEventDetail>) => void;
+  onHide?: (event: CustomEvent<HideEventDetail>) => void;
   }
 >;
 

package/dist/react/UDialog.js

@@ -6,5 +6,8 @@ export const UDialog = createComponent({
   react: React,
   tagName: 'u-dialog',
   elementClass: UDialogElement,
-  events: {},
+  events: {
+    onShow: 'show',
+    onHide: 'hide',
+  },
 });

package/dist/react/UDrawer.d.ts

@@ -1,11 +1,15 @@
 import React from 'react';
 import { UDrawer as UDrawerElement } from '../components/drawer/UDrawer';
+import { type ShowEventDetail } from '../events/ShowEvent';
+import { type HideEventDetail } from '../events/HideEvent';
 
 export declare const UDrawer: React.ForwardRefExoticComponent<
   Omit<Partial<UDrawerElement>, keyof React.HTMLAttributes<UDrawerElement>>
-    & Omit<React.HTMLAttributes<UDrawerElement>, never>
+    & Omit<React.HTMLAttributes<UDrawerElement>, 'onShow' | 'onHide'>
     & React.RefAttributes<UDrawerElement>
     & {
+  onShow?: (event: CustomEvent<ShowEventDetail>) => void;
+  onHide?: (event: CustomEvent<HideEventDetail>) => void;
   }
 >;
 

package/dist/react/UDrawer.js

@@ -6,5 +6,8 @@ export const UDrawer = createComponent({
   react: React,
   tagName: 'u-drawer',
   elementClass: UDrawerElement,
-  events: {},
+  events: {
+    onShow: 'show',
+    onHide: 'hide',
+  },
 });

package/dist/react/UPopover.d.ts

@@ -1,13 +1,15 @@
 import React from 'react';
 import { UPopover as UPopoverElement } from '../components/popover/UPopover';
+import { type ShowEventDetail } from '../events/ShowEvent';
+import { type HideEventDetail } from '../events/HideEvent';
 
 export declare const UPopover: React.ForwardRefExoticComponent<
   Omit<Partial<UPopoverElement>, keyof React.HTMLAttributes<UPopoverElement>>
     & Omit<React.HTMLAttributes<UPopoverElement>, 'onShow' | 'onHide'>
     & React.RefAttributes<UPopoverElement>
     & {
-  onShow?: (event: CustomEvent) => void;
-  onHide?: (event: CustomEvent) => void;
+  onShow?: (event: CustomEvent<ShowEventDetail>) => void;
+  onHide?: (event: CustomEvent<HideEventDetail>) => void;
   }
 >;
 

package/dist/react/UTooltip.d.ts

@@ -1,13 +1,15 @@
 import React from 'react';
 import { UTooltip as UTooltipElement } from '../components/tooltip/UTooltip';
+import { type ShowEventDetail } from '../events/ShowEvent';
+import { type HideEventDetail } from '../events/HideEvent';
 
 export declare const UTooltip: React.ForwardRefExoticComponent<
   Omit<Partial<UTooltipElement>, keyof React.HTMLAttributes<UTooltipElement>>
     & Omit<React.HTMLAttributes<UTooltipElement>, 'onShow' | 'onHide'>
     & React.RefAttributes<UTooltipElement>
     & {
-  onShow?: (event: CustomEvent) => void;
-  onHide?: (event: CustomEvent) => void;
+  onShow?: (event: CustomEvent<ShowEventDetail>) => void;
+  onHide?: (event: CustomEvent<HideEventDetail>) => void;
   }
 >;
 

package/dist/styles/dark.css

@@ -132,34 +132,91 @@
   --u-pink-900:      #E095C7;
   --u-pink-1000:     #EBB5D9;
 
+  /* ==========================================================================
+     Role Colors — 의미 역할 층
+     컴포넌트는 팔레트 프리미티브가 아니라 이 층을 참조한다.
+     브랜드 색 교체는 아래 25개만 재정의하면 시맨틱 층까지 따라온다.
+
+     단은 '강도' 축이다 (weakest -> strong). 용도(배경/테두리/텍스트)는
+     소비처가 정한다 -- 단을 속성에 묶으면 primary 버튼의 배경이 어느
+     단인지 같은 모순이 생긴다.
+     ========================================================================== */
+
+  /* primary — 브랜드 · 강조 · 포커스 · 링크 */
+  --u-primary-color-weakest:     var(--u-blue-200);
+  --u-primary-color-weaker:      var(--u-blue-300);
+  --u-primary-color-weak:        var(--u-blue-500);
+  --u-primary-color:             var(--u-blue-600);
+  --u-primary-color-strong:      var(--u-blue-700);
+
+  /* info — 정보 안내 (primary 와 기본값은 같으나 역할이 다르다 — 브랜딩은 primary 만 바꾼다) */
+  --u-info-color-weakest:        var(--u-blue-200);
+  --u-info-color-weaker:         var(--u-blue-300);
+  --u-info-color-weak:           var(--u-blue-500);
+  --u-info-color:                var(--u-blue-600);
+  --u-info-color-strong:         var(--u-blue-700);
+
+  /* success — 성공 · 완료 */
+  --u-success-color-weakest:     var(--u-green-200);
+  --u-success-color-weaker:      var(--u-green-300);
+  --u-success-color-weak:        var(--u-green-500);
+  --u-success-color:             var(--u-green-600);
+  --u-success-color-strong:      var(--u-green-700);
+
+  /* warning — 주의 */
+  --u-warning-color-weakest:     var(--u-yellow-200);
+  --u-warning-color-weaker:      var(--u-yellow-300);
+  --u-warning-color-weak:        var(--u-yellow-500);
+  --u-warning-color:             var(--u-yellow-600);
+  --u-warning-color-strong:      var(--u-yellow-700);
+
+  /* danger — 오류 · 위험 · 유효성 실패 */
+  --u-danger-color-weakest:      var(--u-red-200);
+  --u-danger-color-weaker:       var(--u-red-300);
+  --u-danger-color-weak:         var(--u-red-500);
+  --u-danger-color:              var(--u-red-600);
+  --u-danger-color-strong:       var(--u-red-700);
+  /* ==========================================================================
+     Radius Scale — 모서리 반경
+     리터럴을 흩뿌리면 값이 갈린다(실제로 pill 이 999px/9999px 두 표기로 나뉘어 있었다).
+     ========================================================================== */
+  --u-radius-none:   0;
+  --u-radius-sm:     3px;
+  --u-radius-md:     4px;
+  --u-radius-lg:     6px;
+  --u-radius-xl:     8px;
+  --u-radius-pill:   9999px;
+  --u-radius-circle: 50%;
+
   /* Text Colors */
   --u-txt-color:             var(--u-neutral-900);
   --u-txt-color-inverse:     var(--u-neutral-100);
-  --u-txt-color-hover:       var(--u-blue-600);
-  --u-txt-color-active:      var(--u-blue-600);
+  --u-txt-color-hover:       var(--u-primary-color);
+  --u-txt-color-active:      var(--u-primary-color);
   --u-txt-color-disabled:    var(--u-neutral-500);
   --u-txt-color-weak:        var(--u-neutral-700);
   --u-txt-color-strong:      var(--u-neutral-1000);
 
-  --u-link-txt-color:        var(--u-blue-700);
+  --u-link-txt-color:        var(--u-primary-color-strong);
   --u-tooltip-txt-color:     var(--u-neutral-100);
 
   /* Icon Colors */
   --u-icon-color:            var(--u-neutral-800);
   --u-icon-color-inverse:    var(--u-neutral-100);
-  --u-icon-color-hover:      var(--u-blue-600);
-  --u-icon-color-active:     var(--u-blue-600);
+  --u-icon-color-hover:      var(--u-primary-color);
+  --u-icon-color-active:     var(--u-primary-color);
   --u-icon-color-disabled:   var(--u-neutral-500);
 
   /* Border Colors */
   --u-border-color:          var(--u-neutral-400);
   --u-border-color-weak:     var(--u-neutral-300);
   --u-border-color-strong:   var(--u-neutral-500);
+  --u-border-color-hover:    var(--u-neutral-500);
 
   --u-input-border-color:         var(--u-neutral-400);
   --u-input-border-color-hover:   var(--u-neutral-500);
-  --u-input-border-color-focus:   var(--u-blue-600);
-  --u-input-border-color-invalid: var(--u-red-600);
+  --u-input-border-color-focus:   var(--u-primary-color);
+  --u-input-border-color-invalid: var(--u-danger-color);
 
   /* Background Colors */
   --u-bg-color:              var(--u-neutral-100);