@iyulab/components 1.13.0 → 1.14.0

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

@@ -2,9 +2,9 @@ import { css } from "lit";
 //#region src/components/tag/UTag.styles.ts
 var styles = css`
   :host {
-    --tag-fill-color: var(--u-primary-color);
-    --tag-color: var(--u-neutral-800);
-    --tag-bg-color: var(--u-neutral-100);
+    --tag-fill-color: var(--u-primary-color, #1E88E5);
+    --tag-color: var(--u-neutral-800, #424242);
+    --tag-bg-color: var(--u-neutral-100, #F5F5F5);
     --tag-border-color: transparent;
   }
 
@@ -16,73 +16,73 @@ var styles = css`
      슬롯이 비면(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);
+    --tag-hue-solid: var(--u-blue-500, #2196F3);
+    --tag-hue-line: var(--u-blue-300, #64B5F6);
+    --tag-hue-surface: var(--u-blue-100, #BBDEFB);
+    --tag-hue-text: var(--u-blue-800, #1565C0);
+    --tag-hue-text-outlined: var(--u-blue-600, #1E88E5);
   }
   :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);
+    --tag-hue-solid: var(--u-green-500, #4CAF50);
+    --tag-hue-line: var(--u-green-300, #81C784);
+    --tag-hue-surface: var(--u-green-100, #C8E6C9);
+    --tag-hue-text: var(--u-green-800, #2E7D32);
+    --tag-hue-text-outlined: var(--u-green-600, #43A047);
   }
    /* 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);
+    --tag-hue-solid: var(--u-yellow-600, #FDD835);
+    --tag-hue-line: var(--u-yellow-300, #FFF176);
+    --tag-hue-surface: var(--u-yellow-100, #FFF9C4);
+    --tag-hue-text: var(--u-yellow-800, #F9A825);
+    --tag-hue-text-outlined: var(--u-yellow-700, #FBC02D);
   }
   :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);
+    --tag-hue-solid: var(--u-red-500, #F44336);
+    --tag-hue-line: var(--u-red-300, #E57373);
+    --tag-hue-surface: var(--u-red-100, #FFCDD2);
+    --tag-hue-text: var(--u-red-800, #C62828);
+    --tag-hue-text-outlined: var(--u-red-600, #E53935);
   }
   :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);
+    --tag-hue-solid: var(--u-orange-500, #FF9800);
+    --tag-hue-line: var(--u-orange-300, #FFB74D);
+    --tag-hue-surface: var(--u-orange-100, #FFE0B2);
+    --tag-hue-text: var(--u-orange-800, #EF6C00);
+    --tag-hue-text-outlined: var(--u-orange-600, #FB8C00);
   }
   :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);
+    --tag-hue-solid: var(--u-teal-500, #009688);
+    --tag-hue-line: var(--u-teal-300, #4DB6AC);
+    --tag-hue-surface: var(--u-teal-100, #B2DFDB);
+    --tag-hue-text: var(--u-teal-800, #00695C);
+    --tag-hue-text-outlined: var(--u-teal-600, #00897B);
   }
   :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);
+    --tag-hue-solid: var(--u-cyan-500, #00BCD4);
+    --tag-hue-line: var(--u-cyan-300, #4DD0E1);
+    --tag-hue-surface: var(--u-cyan-100, #B2EBF2);
+    --tag-hue-text: var(--u-cyan-800, #00838F);
+    --tag-hue-text-outlined: var(--u-cyan-600, #00ACC1);
   }
   :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);
+    --tag-hue-solid: var(--u-purple-500, #9C27B0);
+    --tag-hue-line: var(--u-purple-300, #BA68C8);
+    --tag-hue-surface: var(--u-purple-100, #E1BEE7);
+    --tag-hue-text: var(--u-purple-800, #6A1B9A);
+    --tag-hue-text-outlined: var(--u-purple-600, #8E24AA);
   }
   :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);
+    --tag-hue-solid: var(--u-pink-500, #E91E63);
+    --tag-hue-line: var(--u-pink-300, #F06292);
+    --tag-hue-surface: var(--u-pink-100, #F8BBD0);
+    --tag-hue-text: var(--u-pink-800, #AD1457);
+    --tag-hue-text-outlined: var(--u-pink-600, #D81B60);
   }
 
   /* Variant: solid (강한 채움, 색 미지정 시 --tag-fill-color = 브랜드) */
   :host([variant="solid"]) {
-    --tag-color: var(--u-neutral-0);
+    --tag-color: var(--u-neutral-0, #FFFFFF);
     --tag-bg-color: var(--tag-hue-solid, var(--tag-fill-color));
     --tag-border-color: var(--tag-hue-solid, var(--tag-fill-color));
   }
@@ -90,14 +90,14 @@ var styles = css`
   /* Variant: surface (채우기 + 테두리, 기본 색상은 --u-primary-color) */
   :host([variant="surface"]) {
     --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)));
+    --tag-bg-color: var(--tag-hue-surface, color-mix(in srgb, var(--tag-fill-color) 15%, var(--u-bg-color, #FFFFFF)));
+    --tag-border-color: var(--tag-hue-line, color-mix(in srgb, var(--tag-fill-color) 40%, var(--u-bg-color, #FFFFFF)));
   }
 
   /* Variant: filled (채우기만, 테두리 없음, 기본 색상은 --u-primary-color) */
   :host([variant="filled"]) {
     --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-bg-color: var(--tag-hue-surface, color-mix(in srgb, var(--tag-fill-color) 15%, var(--u-bg-color, #FFFFFF)));
     --tag-border-color: transparent;
   }
 
@@ -105,14 +105,14 @@ var styles = css`
   :host([variant="outlined"]) {
     --tag-color: var(--tag-hue-text-outlined, color-mix(in srgb, var(--tag-fill-color) 85%, black));
     --tag-bg-color: transparent;
-    --tag-border-color: var(--tag-hue-line, color-mix(in srgb, var(--tag-fill-color) 40%, var(--u-bg-color)));
+    --tag-border-color: var(--tag-hue-line, color-mix(in srgb, var(--tag-fill-color) 40%, var(--u-bg-color, #FFFFFF)));
   }
 
   :host {
     display: inline-flex;
     font-size: 12px;
     font-weight: 500;
-    border-radius: var(--u-radius-md);
+    border-radius: var(--u-radius-md, 4px);
 
     --tag-padding-block: 0.25em;
     --tag-padding-inline: 0.5em;
@@ -137,7 +137,7 @@ var styles = css`
     border-radius: inherit;
   }
   :host([rounded]) {
-    border-radius: var(--u-radius-pill);
+    border-radius: var(--u-radius-pill, 9999px);
   }
 
   /*

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

@@ -3,7 +3,7 @@ import { css } from "lit";
 var styles = css`
   :host {
     display: inline-block;
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #212121);
     font-size: inherit;
     font-family: var(--u-font-base);
   }
@@ -12,84 +12,84 @@ var styles = css`
   .container {
     display: flex;
     padding: 0.3em 0.6em;
-    border: 1px solid var(--u-input-border-color);
+    border: 1px solid var(--u-input-border-color, #E0E0E0);
     border-radius: 0.25em;
-    background-color: var(--u-input-bg-color);
+    background-color: var(--u-input-bg-color, #FFFFFF);
     transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
   }
   :host([readonly]) .container,
   :host([disabled]) .container {
-    border-color: var(--u-border-color-weak);
-    background-color: var(--u-bg-color-disabled);
+    border-color: var(--u-border-color-weak, #EEEEEE);
+    background-color: var(--u-bg-color-disabled, #FAFAFA);
   }
   :host(:not([readonly]):not([disabled])) .container:hover {
-    box-shadow: 0 0 0 1px var(--u-input-border-color-hover);
+    box-shadow: 0 0 0 1px var(--u-input-border-color-hover, #BDBDBD);
   }
   :host(:not([readonly]):not([disabled])) .container:focus-within {
-    box-shadow: 0 0 0 1px var(--u-input-border-color-focus);
+    box-shadow: 0 0 0 1px var(--u-input-border-color-focus, #1E88E5);
   }
   :host([invalid]:not([readonly]):not([disabled])) .container {
-    box-shadow: 0 0 0 1px var(--u-input-border-color-invalid);
+    box-shadow: 0 0 0 1px var(--u-input-border-color-invalid, #E53935);
   }
 
   /* ===== Variant: filled ===== */
   :host([variant="filled"]) .container {
     border-color: transparent;
-    background-color: var(--u-neutral-200);
+    background-color: var(--u-neutral-200, #EEEEEE);
     border-radius: 0.25em 0.25em 0 0;
-    border-bottom: 2px solid var(--u-input-border-color);
+    border-bottom: 2px solid var(--u-input-border-color, #E0E0E0);
   }
   :host([variant="filled"][readonly]) .container,
   :host([variant="filled"][disabled]) .container {
-    background-color: var(--u-bg-color-disabled);
-    border-bottom-color: var(--u-border-color-weak);
+    background-color: var(--u-bg-color-disabled, #FAFAFA);
+    border-bottom-color: var(--u-border-color-weak, #EEEEEE);
   }
   :host([variant="filled"]:not([readonly]):not([disabled])) .container:hover {
     box-shadow: none;
-    background-color: var(--u-neutral-300);
-    border-bottom-color: var(--u-input-border-color-hover);
+    background-color: var(--u-neutral-300, #E0E0E0);
+    border-bottom-color: var(--u-input-border-color-hover, #BDBDBD);
   }
   :host([variant="filled"]:not([readonly]):not([disabled])) .container:focus-within {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-focus);
+    border-bottom-color: var(--u-input-border-color-focus, #1E88E5);
   }
   :host([variant="filled"][invalid]:not([readonly]):not([disabled])) .container {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-invalid);
+    border-bottom-color: var(--u-input-border-color-invalid, #E53935);
   }
 
   /* ===== Variant: underlined ===== */
   :host([variant="underlined"]) .container {
     border: none;
-    border-radius: var(--u-radius-none);
+    border-radius: var(--u-radius-none, 0);
     background-color: transparent;
     padding-left: 0;
     padding-right: 0;
-    border-bottom: 1px solid var(--u-input-border-color);
+    border-bottom: 1px solid var(--u-input-border-color, #E0E0E0);
   }
   :host([variant="underlined"][readonly]) .container,
   :host([variant="underlined"][disabled]) .container {
     background-color: transparent;
-    border-bottom-color: var(--u-border-color-weak);
+    border-bottom-color: var(--u-border-color-weak, #EEEEEE);
   }
   :host([variant="underlined"]:not([readonly]):not([disabled])) .container:hover {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-hover);
+    border-bottom-color: var(--u-input-border-color-hover, #BDBDBD);
   }
   :host([variant="underlined"]:not([readonly]):not([disabled])) .container:focus-within {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-focus);
+    border-bottom-color: var(--u-input-border-color-focus, #1E88E5);
     border-bottom-width: 2px;
   }
   :host([variant="underlined"][invalid]:not([readonly]):not([disabled])) .container {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-invalid);
+    border-bottom-color: var(--u-input-border-color-invalid, #E53935);
   }
 
   /* ===== Variant: borderless ===== */
   :host([variant="borderless"]) .container {
     border: none;
-    border-radius: var(--u-radius-none);
+    border-radius: var(--u-radius-none, 0);
     background-color: transparent;
     padding: 0;
     box-shadow: none;
@@ -117,7 +117,7 @@ var styles = css`
     word-wrap: break-word;
   }
   textarea::placeholder {
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #9E9E9E);
   }
   textarea:disabled {
     cursor: not-allowed;
@@ -155,7 +155,7 @@ var styles = css`
   .counter {
     margin-top: 0.25em;
     text-align: right;
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #9E9E9E);
     font-size: 0.75em;
     line-height: 1.2;
   }

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

@@ -6,12 +6,12 @@ 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;

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/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.13.0",
+  "version": "1.14.0",
   "keywords": [
     "iyulab",
     "components",