@iyulab/data-components 0.5.0 → 0.6.0

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/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.0",
   "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"
   }
 }