@iyulab/components 1.12.0 → 1.14.0

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

@@ -6,18 +6,18 @@ var styles = css`
   }
 
   :host {
-    color: var(--u-tooltip-txt-color);
+    color: var(--u-tooltip-txt-color, #FFFFFF);
     font-family: var(--u-font-display, inherit);
     font-size: 12px;
     line-height: 1.25;
-    border-radius: var(--u-radius-md);
-    background-color: var(--u-tooltip-bg-color);
+    border-radius: var(--u-radius-md, 4px);
+    background-color: var(--u-tooltip-bg-color, rgba(0, 0, 0, 0.75));
     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;
+    --tooltip-padding-block: var(--u-space-xs, 6px);
+    --tooltip-padding-inline: var(--u-space-sm, 8px);
   }
 
   /* 여백은 내부 요소가 진다 — :host 에 두면 소비 앱 CSS 리셋에 지워진다. */

package/dist/components/tree/UTree.d.ts

@@ -10,7 +10,7 @@ import { UTreeItem, TreeItemTrigger } from '../tree-item/UTreeItem.js';
  * @cssprop tree-indent-guide-offset - 들여쓰기 가이드 선의 좌측 간격 (기본값: 8px)
  * @cssprop tree-indent-guide-width - 들여쓰기 가이드 선의 두께 (기본값: 1px)
  * @cssprop tree-indent-guide-style - 들여쓰기 가이드 선의 스타일 (기본값: solid)
- * @cssprop tree-indent-guide-color - 들여쓰기 가이드 선의 색상 (기본값: var(--u-border-color-weak))
+ * @cssprop tree-indent-guide-color - 들여쓰기 가이드 선의 색상 (기본값: var(--u-border-color-weak, #EEEEEE))
  *
  * @event change - 선택된 아이템이 변경될 때 발생
  *

package/dist/components/tree/UTree.styles.js

@@ -6,13 +6,16 @@ var styles = css`
     --tree-indent-guide-offset: 8px;
     --tree-indent-guide-width: 1px;
     --tree-indent-guide-style: solid;
-    --tree-indent-guide-color: var(--u-border-color-weak);
+    --tree-indent-guide-color: var(--u-border-color-weak, #EEEEEE);
   }
 
   :host {
     display: block;
-    font-size: 0.875rem;
-    color: var(--u-txt-color);
+    /* rem 이 아니라 em 이다 — 루트 기준이면 소비자가 컨테이너 타이포를 키워도
+       트리만 따라오지 않는다. 기본 상황(루트 16px)에서는 두 단위가 같은 14px 이므로
+       시각은 바뀌지 않고, 상속 컨텍스트에서만 동작이 달라진다. */
+    font-size: 0.875em;
+    color: var(--u-txt-color, #212121);
   }
 `;
 //#endregion

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);
+    --tree-item-color: var(--u-primary-color, #1E88E5);
   }
 
   :host {
@@ -33,12 +33,12 @@ var styles = css`
   }
   :host(:not([disabled])[trigger="item"]) .header:hover,
   :host(:not([disabled])[trigger="item"]:focus-visible) .header {
-    background-color: var(--u-bg-color-hover);
+    background-color: var(--u-bg-color-hover, #F5F5F5);
   }
   .header[selected] {
     color: color-mix(in srgb, var(--tree-item-color) 85%, black);
     font-weight: 600;
-    background-color: color-mix(in srgb, var(--tree-item-color) 15%, var(--u-bg-color));
+    background-color: color-mix(in srgb, var(--tree-item-color) 15%, var(--u-bg-color, #FFFFFF));
   }
 
   ::slotted([slot="prefix"]) {
@@ -67,14 +67,14 @@ var styles = css`
     justify-content: center;
     width: 18px;
     height: 18px;
-    border-radius: var(--u-radius-sm);
+    border-radius: var(--u-radius-sm, 3px);
   }
   .prefix-toggler u-icon {
     font-size: 12px;
   }
   :host(:not([disabled])[trigger="icon"]) .prefix-toggler:hover,
   :host(:not([disabled])[trigger="icon"]:focus-visible) .prefix-toggler {
-    background-color: var(--u-bg-color-hover);
+    background-color: var(--u-bg-color-hover, #F5F5F5);
   }
 
   /* ── checkbox ── */
@@ -86,8 +86,8 @@ var styles = css`
     justify-content: center;
     width: 16px;
     height: 16px;
-    border-radius: var(--u-radius-sm);
-    border: 1.5px solid var(--u-input-border-color);
+    border-radius: var(--u-radius-sm, 3px);
+    border: 1.5px solid var(--u-input-border-color, #E0E0E0);
     background-color: transparent;
     transition: background-color 0.15s ease, border-color 0.15s ease;
     cursor: pointer;

package/dist/styles/dark.css

@@ -188,6 +188,20 @@
   --u-radius-pill:   9999px;
   --u-radius-circle: 50%;
 
+  /* ==========================================================================
+     Space Scale — 컨테이너·오버레이의 절대 여백
+     ⚠**여백은 하나의 축이 아니다.** 이 스케일은 컨테이너/오버레이의 **레이아웃 여백**만
+     담당한다. 폼·인라인 요소의 `em` 여백은 상속된 `font-size` 에 비례하는 것이 의도이므로
+     **여기로 흡수하지 않는다.** 반경과 마찬가지로 테마와 무관하므로 두 시트가 같다.
+     축 구분과 근거는 docs/design-tokens.md 참조.
+     ========================================================================== */
+  --u-space-3xs:  2px;
+  --u-space-2xs:  4px;
+  --u-space-xs:   6px;
+  --u-space-sm:   8px;
+  --u-space-md:  12px;
+  --u-space-lg:  16px;
+
   /* Text Colors */
   --u-txt-color:             var(--u-neutral-900);
   --u-txt-color-inverse:     var(--u-neutral-100);

package/dist/styles/light.css

@@ -188,6 +188,21 @@
   --u-radius-pill:   9999px;
   --u-radius-circle: 50%;
 
+  /* ==========================================================================
+     Space Scale — 컨테이너·오버레이의 절대 여백
+     ⚠**여백은 하나의 축이 아니다.** 이 스케일은 컨테이너/오버레이(카드·대화상자·드로어·
+     알림·메뉴·툴팁 등)의 **레이아웃 여백**만 담당한다. 폼·인라인 요소의 `em` 여백은
+     상속된 `font-size` 에 비례하는 것이 의도이므로 **여기로 흡수하지 않는다** —
+     흡수하면 타이포를 키운 소비자의 여백이 따라 커지지 않는다.
+     축 구분과 근거는 docs/design-tokens.md 참조.
+     ========================================================================== */
+  --u-space-3xs:  2px;
+  --u-space-2xs:  4px;
+  --u-space-xs:   6px;
+  --u-space-sm:   8px;
+  --u-space-md:  12px;
+  --u-space-lg:  16px;
+
   /* Text Colors */
   --u-txt-color:             var(--u-neutral-900);
   --u-txt-color-inverse:     var(--u-neutral-0);

package/dist/utilities/Theme.d.ts

@@ -41,9 +41,24 @@ export declare class Theme {
      */
     static init(options?: ThemeInitOptions): Promise<void>;
     /**
-     * 현재 문서에 적용된 테마를 가져옵니다.
+     * 사용자가 **선택한** 테마를 가져옵니다 — `'system'` 을 포함합니다.
+     *
+     * ⚠**이 값을 밝기 판단에 그대로 쓰지 마십시오.** `'system'` 은 실제로 적용된 색이
+     * 아니라 *"OS 를 따른다"* 는 선호이며, 기본값이기도 합니다. 스타일이나 서드파티
+     * 에디터 테마를 고를 때는 {@link resolved} 를 쓰십시오.
      */
     static get(): ThemeType | undefined;
+    /**
+     * 문서에 **실제로 적용된** 테마를 가져옵니다 — 항상 `'light'` 또는 `'dark'` 입니다.
+     *
+     * `get()` 과 갈리는 지점은 `'system'` 일 때입니다. 선호가 system 이면 실효 테마는
+     * OS 설정에 따라 갈리는데, `get()` 은 그것을 알려주지 못합니다. 그래서 소비자가
+     * `get() === 'dark'` 로 분기하면 **system + OS 다크에서 밝은 화면을 그리게 됩니다**
+     * — 기본 설정이 system 이라 이 경로가 가장 흔합니다.
+     *
+     * 판정 순서: `<html theme>`(항상 실효값이 적힘) → 명시 선호 → `prefers-color-scheme`.
+     */
+    static resolved(): 'light' | 'dark';
     /**
      * 현재 문서에 적용할 테마를 설정합니다.
      */

package/dist/utilities/Theme.js

@@ -83,7 +83,11 @@ var Theme = class {
 		this.log("theme initialized");
 	}
 	/**
-	* 현재 문서에 적용된 테마를 가져옵니다.
+	* 사용자가 **선택한** 테마를 가져옵니다 — `'system'` 을 포함합니다.
+	*
+	* ⚠**이 값을 밝기 판단에 그대로 쓰지 마십시오.** `'system'` 은 실제로 적용된 색이
+	* 아니라 *"OS 를 따른다"* 는 선호이며, 기본값이기도 합니다. 스타일이나 서드파티
+	* 에디터 테마를 고를 때는 {@link resolved} 를 쓰십시오.
 	*/
 	static get() {
 		switch (document.documentElement.getAttribute("data-theme")) {
@@ -94,6 +98,23 @@ var Theme = class {
 		}
 	}
 	/**
+	* 문서에 **실제로 적용된** 테마를 가져옵니다 — 항상 `'light'` 또는 `'dark'` 입니다.
+	*
+	* `get()` 과 갈리는 지점은 `'system'` 일 때입니다. 선호가 system 이면 실효 테마는
+	* OS 설정에 따라 갈리는데, `get()` 은 그것을 알려주지 못합니다. 그래서 소비자가
+	* `get() === 'dark'` 로 분기하면 **system + OS 다크에서 밝은 화면을 그리게 됩니다**
+	* — 기본 설정이 system 이라 이 경로가 가장 흔합니다.
+	*
+	* 판정 순서: `<html theme>`(항상 실효값이 적힘) → 명시 선호 → `prefers-color-scheme`.
+	*/
+	static resolved() {
+		const applied = document.documentElement.getAttribute("theme");
+		if (applied === "dark" || applied === "light") return applied;
+		const preference = this.get();
+		if (preference === "dark" || preference === "light") return preference;
+		return typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+	}
+	/**
 	* 현재 문서에 적용할 테마를 설정합니다.
 	*/
 	static set(theme) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/components",
   "description": "web-components library based on lit-element made by iyulab",
-  "version": "1.12.0",
+  "version": "1.14.0",
   "keywords": [
     "iyulab",
     "components",