@iyulab/data-components 0.5.0 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [0.6.0] - 2026-06-11
+
+### Added
+- `USimpleSheet`: `theme` 속성 1급 지원 (`'light' | 'dark'`, attribute 리플렉트) — per-element 테마 지정 가능, `:host-context` 미지원 브라우저(Firefox/Safari)에서도 동작 (ISSUE-20260610-usimplesheet-darkmode-inconsistent)
+- `USimpleSheet`: 조상 `data-theme="dark"` 컨텍스트에서도 다크 모드 적용 — Theme 유틸 없이 `data-theme`만 설정하는 앱에서 도구별 다크 적용이 비일관하던 문제 해소
+
+### Changed
+- 다크 모드 CSS를 단일 소스에서 3가지 컨텍스트(`:host([theme="dark"])` / `:host-context([theme="dark"])` / `:host-context([data-theme="dark"])`) 개별 규칙으로 생성 — 셀렉터 리스트 결합 시 `:host-context` 미지원 브라우저가 리스트 전체를 무효화하는 문제 회피
+
 ## [0.5.0] - 2026-06-10
 
 ### Added

package/dist/components/data-view/UDataView.styles.d.ts

@@ -1 +1 @@
-export declare const styles: import('lit').CSSResult;
+export declare const styles: import('lit').CSSResult[];

package/dist/components/data-view/UDataView.styles.js

@@ -1,6 +1,6 @@
-import { css } from "lit";
+import { css, unsafeCSS } from "lit";
 //#region src/components/data-view/UDataView.styles.ts
-var styles = css`
+var baseStyles = css`
   :host {
     display: block;
     width: 100%;
@@ -19,8 +19,8 @@ var styles = css`
     align-items: center;
     justify-content: space-between;
     padding: 0.75rem;
-    background: var(--u-bg-color);
-    border: 1px solid var(--u-border-color);
+    background: var(--u-bg-color, #fff);
+    border: 1px solid var(--u-border-color, #e2e8f0);
     border-radius: 8px;
   }
 
@@ -30,13 +30,13 @@ var styles = css`
   }
 
   .view-toggles u-button[active] {
-    background: var(--u-blue-600);
-    color: var(--u-neutral-0);
+    background: var(--u-blue-600, #1E88E5);
+    color: var(--u-neutral-0, #fff);
   }
 
   .info {
     font-size: 0.875rem;
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #64748b);
     font-weight: 500;
   }
 
@@ -56,8 +56,8 @@ var styles = css`
 
   /* Card Styles */
   .card {
-    background: var(--u-bg-color);
-    border: 1px solid var(--u-border-color);
+    background: var(--u-bg-color, #fff);
+    border: 1px solid var(--u-border-color, #e2e8f0);
     border-radius: 8px;
     padding: 1.25rem;
     cursor: pointer;
@@ -65,15 +65,15 @@ var styles = css`
   }
 
   .card:hover {
-    border-color: var(--u-blue-600);
-    box-shadow: 0 4px 12px var(--u-shadow-color-weak);
+    border-color: var(--u-blue-600, #1E88E5);
+    box-shadow: 0 4px 12px var(--u-shadow-color-weak, rgba(0, 0, 0, 0.08));
     transform: translateY(-2px);
   }
 
   .card.selected {
-    border-color: var(--u-blue-600);
-    background: var(--u-bg-color-active);
-    box-shadow: 0 0 0 3px var(--u-blue-200);
+    border-color: var(--u-blue-600, #1E88E5);
+    background: var(--u-bg-color-active, #EEEEEE);
+    box-shadow: 0 0 0 3px var(--u-blue-200, #90CAF9);
   }
 
   .card-content {
@@ -91,14 +91,14 @@ var styles = css`
   .card-field .label {
     font-size: 0.875rem;
     font-weight: 600;
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #64748b);
     min-width: 80px;
     flex-shrink: 0;
   }
 
   .card-field .value {
     font-size: 0.9375rem;
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #0f172a);
     word-break: break-word;
   }
 
@@ -116,18 +116,18 @@ var styles = css`
   /* Table */
   .table-wrapper {
     overflow-x: auto;
-    border: 1px solid var(--u-border-color);
+    border: 1px solid var(--u-border-color, #e2e8f0);
     border-radius: 8px;
   }
 
   table {
     width: 100%;
     border-collapse: collapse;
-    background: var(--u-bg-color);
+    background: var(--u-bg-color, #fff);
   }
 
   thead {
-    background: var(--u-neutral-50);
+    background: var(--u-neutral-50, #f8fafc);
     position: sticky;
     top: 0;
     z-index: 10;
@@ -138,8 +138,8 @@ var styles = css`
     text-align: left;
     font-size: 0.875rem;
     font-weight: 600;
-    color: var(--u-txt-color-weak);
-    border-bottom: 2px solid var(--u-border-color);
+    color: var(--u-txt-color-weak, #64748b);
+    border-bottom: 2px solid var(--u-border-color, #e2e8f0);
     white-space: nowrap;
   }
 
@@ -149,21 +149,21 @@ var styles = css`
   }
 
   tbody tr:hover {
-    background: var(--u-bg-color-hover);
+    background: var(--u-bg-color-hover, #F5F5F5);
   }
 
   tbody tr.selected {
-    background: var(--u-bg-color-active);
+    background: var(--u-bg-color-active, #EEEEEE);
   }
 
   tbody tr:not(:last-child) {
-    border-bottom: 1px solid var(--u-border-color-weak);
+    border-bottom: 1px solid var(--u-border-color-weak, #f1f5f9);
   }
 
   td {
     padding: 0.875rem 1rem;
     font-size: 0.9375rem;
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #0f172a);
   }
 
   /* Empty State */
@@ -172,9 +172,91 @@ var styles = css`
     align-items: center;
     justify-content: center;
     min-height: 300px;
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #64748b);
     font-size: 1rem;
   }
 `;
+var DARK_PREFIXES = [
+	":host([theme=\"dark\"])",
+	":host-context([theme=\"dark\"])",
+	":host-context([data-theme=\"dark\"])"
+];
+var darkRules = (host) => `
+  ${host} .toolbar {
+    background: var(--u-bg-color, #121212);
+    border-color: var(--u-border-color, #3D3D3D);
+  }
+
+  ${host} .view-toggles u-button[active] {
+    background: var(--u-blue-600, #87B8F5);
+    color: var(--u-neutral-0, #000);
+  }
+
+  ${host} .info {
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
+
+  ${host} .card {
+    background: var(--u-bg-color, #121212);
+    border-color: var(--u-border-color, #3D3D3D);
+  }
+
+  ${host} .card:hover {
+    border-color: var(--u-blue-600, #87B8F5);
+    box-shadow: 0 4px 12px var(--u-shadow-color-weak, rgba(0, 0, 0, 0.25));
+  }
+
+  ${host} .card.selected {
+    border-color: var(--u-blue-600, #87B8F5);
+    background: var(--u-bg-color-active, #3D3D3D);
+    box-shadow: 0 0 0 3px var(--u-blue-200, #2B4F7E);
+  }
+
+  ${host} .card-field .label {
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
+
+  ${host} .card-field .value {
+    color: var(--u-txt-color, #D4D4D4);
+  }
+
+  ${host} .table-wrapper {
+    border-color: var(--u-border-color, #3D3D3D);
+  }
+
+  ${host} table {
+    background: var(--u-bg-color, #121212);
+  }
+
+  ${host} thead {
+    background: var(--u-neutral-50, #0A0A0A);
+  }
+
+  ${host} th {
+    color: var(--u-txt-color-weak, #8A8A8A);
+    border-bottom-color: var(--u-border-color, #3D3D3D);
+  }
+
+  ${host} tbody tr:hover {
+    background: var(--u-bg-color-hover, #2A2A2A);
+  }
+
+  ${host} tbody tr.selected {
+    background: var(--u-bg-color-active, #3D3D3D);
+  }
+
+  ${host} tbody tr:not(:last-child) {
+    border-bottom-color: var(--u-border-color-weak, #2A2A2A);
+  }
+
+  ${host} td {
+    color: var(--u-txt-color, #D4D4D4);
+  }
+
+  ${host} .empty {
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
+`;
+var styles = [baseStyles, unsafeCSS(DARK_PREFIXES.map(darkRules).join("\n"))];
 //#endregion
 export { styles };

package/dist/components/simple-sheet/USimpleSheet.d.ts

@@ -48,6 +48,11 @@ export declare class USimpleSheet extends UElement {
     cols: number;
     /** 읽기 전용 모드 */
     readonly: boolean;
+    /**
+     * 명시 테마. 'dark'이면 다크 스타일을 적용합니다.
+     * 미설정 시 조상 컨텍스트의 theme/data-theme 속성에 따릅니다 (:host-context, Chromium 한정).
+     */
+    theme?: 'light' | 'dark';
     private _sel;
     private _editing;
     private _editVal;

package/dist/components/simple-sheet/USimpleSheet.js

@@ -924,6 +924,10 @@ __decorate([property({ type: Array }), __decorateMetadata("design:type", Array)]
 __decorate([property({ type: Number }), __decorateMetadata("design:type", Object)], USimpleSheet.prototype, "rows", void 0);
 __decorate([property({ type: Number }), __decorateMetadata("design:type", Object)], USimpleSheet.prototype, "cols", void 0);
 __decorate([property({ type: Boolean }), __decorateMetadata("design:type", Object)], USimpleSheet.prototype, "readonly", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", String)], USimpleSheet.prototype, "theme", void 0);
 __decorate([state(), __decorateMetadata("design:type", Object)], USimpleSheet.prototype, "_sel", void 0);
 __decorate([state(), __decorateMetadata("design:type", Object)], USimpleSheet.prototype, "_editing", void 0);
 __decorate([state(), __decorateMetadata("design:type", Object)], USimpleSheet.prototype, "_editVal", void 0);

package/dist/components/simple-sheet/USimpleSheet.styles.d.ts

@@ -1 +1 @@
-export declare const styles: import('lit').CSSResult;
+export declare const styles: import('lit').CSSResult[];

package/dist/components/simple-sheet/USimpleSheet.styles.js

@@ -1,6 +1,6 @@
-import { css } from "lit";
+import { css, unsafeCSS } from "lit";
 //#region src/components/simple-sheet/USimpleSheet.styles.ts
-var styles = css`
+var baseStyles = css`
   :host {
     display: block;
     width: 100%;
@@ -281,126 +281,130 @@ var styles = css`
     cursor: default;
   }
 
-  /* ── Dark mode ──
-     외부에서 --u-* CSS 변수가 제공되면 그 값을 사용하고,
-     제공되지 않으면 자체 dark fallback 값을 적용한다. */
-
-  :host-context([theme="dark"]) .sheet-container {
+`;
+var DARK_PREFIXES = [
+	":host([theme=\"dark\"])",
+	":host-context([theme=\"dark\"])",
+	":host-context([data-theme=\"dark\"])"
+];
+var darkRules = (host) => `
+  ${host} .sheet-container {
     background: var(--u-bg-color, #121212);
     border-color: var(--u-border-color, #3D3D3D);
   }
 
-  :host-context([theme="dark"]) .sheet-container:focus-within {
+  ${host} .sheet-container:focus-within {
     border-color: var(--u-blue-500, #6ba3e3);
     box-shadow: 0 0 0 2px var(--u-blue-100, #1e3a5f);
   }
 
-  :host-context([theme="dark"]) .corner {
+  ${host} .corner {
     background: var(--u-neutral-100, #121212);
     border-color: var(--u-border-color, #3D3D3D);
   }
 
-  :host-context([theme="dark"]) .corner:hover {
+  ${host} .corner:hover {
     background: var(--u-neutral-200, #1E1E1E);
   }
 
-  :host-context([theme="dark"]) .col-header {
+  ${host} .col-header {
     background: var(--u-neutral-100, #121212);
     color: var(--u-txt-color-weak, #8A8A8A);
     border-color: var(--u-border-color, #3D3D3D);
   }
 
-  :host-context([theme="dark"]) .col-header.col-selected {
+  ${host} .col-header.col-selected {
     background: var(--u-blue-100, #1e3a5f);
     color: var(--u-blue-800, #c2deff);
   }
 
-  :host-context([theme="dark"]) .row-num {
+  ${host} .row-num {
     background: var(--u-neutral-50, #0A0A0A);
     color: var(--u-txt-color-weak, #8A8A8A);
     border-right-color: var(--u-border-color, #3D3D3D);
     border-bottom-color: var(--u-border-color-weak, #2A2A2A);
   }
 
-  :host-context([theme="dark"]) .row-num.row-selected {
+  ${host} .row-num.row-selected {
     background: var(--u-blue-100, #1e3a5f);
     color: var(--u-blue-800, #c2deff);
   }
 
-  :host-context([theme="dark"]) .cell {
+  ${host} .cell {
     color: var(--u-txt-color, #D4D4D4);
     border-right-color: var(--u-border-color-weak, #2A2A2A);
     border-bottom-color: var(--u-border-color-weak, #2A2A2A);
   }
 
-  :host-context([theme="dark"]) .cell.cell-readonly {
+  ${host} .cell.cell-readonly {
     background: var(--u-neutral-100, #1E1E1E);
     color: var(--u-txt-color-weak, #8A8A8A);
   }
 
-  :host-context([theme="dark"]) .cell.cell-readonly.selected {
+  ${host} .cell.cell-readonly.selected {
     background: var(--u-neutral-200, #2A2A2A);
   }
 
-  :host-context([theme="dark"]) .cell.cell-readonly.anchor {
+  ${host} .cell.cell-readonly.anchor {
     background: var(--u-neutral-100, #1E1E1E);
   }
 
-  :host-context([theme="dark"]) .cell.cell-computed {
+  ${host} .cell.cell-computed {
     background: var(--u-blue-100, #1e3a5f);
     color: var(--u-txt-color, #D4D4D4);
   }
 
-  :host-context([theme="dark"]) .cell.cell-computed.selected {
+  ${host} .cell.cell-computed.selected {
     background: var(--u-blue-200, #2a4a6f);
   }
 
-  :host-context([theme="dark"]) .cell.cell-computed.anchor {
+  ${host} .cell.cell-computed.anchor {
     background: var(--u-blue-100, #1e3a5f);
   }
 
-  :host-context([theme="dark"]) .cell.selected {
+  ${host} .cell.selected {
     background: var(--u-blue-0, #0a1e3d);
   }
 
-  :host-context([theme="dark"]) .cell.anchor {
+  ${host} .cell.anchor {
     background: var(--u-bg-color, #121212);
     outline-color: var(--u-blue-500, #6ba3e3);
   }
 
-  :host-context([theme="dark"]) .resize-handle:hover::after {
+  ${host} .resize-handle:hover::after {
     background: var(--u-blue-500, #6ba3e3);
   }
 
-  :host-context([theme="dark"]) .cell-input {
+  ${host} .cell-input {
     background: var(--u-bg-color, #121212);
     color: var(--u-txt-color, #D4D4D4);
     outline-color: var(--u-blue-500, #6ba3e3);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
   }
 
-  :host-context([theme="dark"]) .cell-dropdown {
+  ${host} .cell-dropdown {
     background: var(--u-bg-color, #121212);
     border-color: var(--u-border-color, #3D3D3D);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
   }
 
-  :host-context([theme="dark"]) .dropdown-item {
+  ${host} .dropdown-item {
     color: var(--u-txt-color, #D4D4D4);
   }
 
-  :host-context([theme="dark"]) .dropdown-item:hover {
+  ${host} .dropdown-item:hover {
     background: var(--u-neutral-100, #1E1E1E);
   }
 
-  :host-context([theme="dark"]) .dropdown-item.highlighted {
+  ${host} .dropdown-item.highlighted {
     background: var(--u-blue-100, #1e3a5f);
     color: var(--u-blue-800, #c2deff);
   }
 
-  :host-context([theme="dark"]) .dropdown-empty {
+  ${host} .dropdown-empty {
     color: var(--u-txt-color-weak, #8A8A8A);
   }
 `;
+var styles = [baseStyles, unsafeCSS(DARK_PREFIXES.map(darkRules).join("\n"))];
 //#endregion
 export { styles };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/data-components",
   "description": "iyulab data visualization components",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "keywords": [
     "iyulab",
     "web-components",
@@ -51,7 +51,9 @@
   ],
   "scripts": {
     "start": "vite",
-    "build": "eslint && vite build"
+    "build": "eslint && vite build",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@iyulab/components": "^1.0.6",
@@ -72,15 +74,17 @@
   "devDependencies": {
     "@eslint/js": "^9.39.4",
     "@lit/react": "^1.0.8",
-    "@types/react": "^19.2.14",
     "@types/node": "^25.8.0",
+    "@types/react": "^19.2.14",
     "eslint": "^9.39.4",
     "glob": "^13.0.6",
     "globals": "^17.6.0",
+    "happy-dom": "^20.10.2",
     "react": "^19.2.6",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.59.3",
     "vite": "^8.0.13",
-    "vite-plugin-dts": "^5.0.0"
+    "vite-plugin-dts": "^5.0.0",
+    "vitest": "^4.1.8"
   }
 }