@iyulab/flex-table 0.24.0 → 0.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # Changelog
2
2
 
3
+ ## [0.25.0] - 2026-08-07
4
+
5
+ ### Added
6
+
7
+ - **`--ft-font-size` now reads `var(--u-density, 14px)`.** When a consumer sets the design
8
+ system's `--u-density` switch on an ancestor, the table's base font size (and everything
9
+ derived from it) follows automatically. Unset, behavior is unchanged.
10
+
11
+ ### Fixed
12
+
13
+ - **Hovering an odd (striped) row produced no visible feedback in dark mode.** Odd rows sit on
14
+ the raised-surface background, and the hover style used the same global hover token that raised
15
+ happened to equal in dark — so the row simply didn't respond. Odd-row hover now reads a
16
+ dedicated raised-surface hover token when the design system sheet provides one, falling back to
17
+ the previous behavior otherwise. Even rows are unaffected.
18
+
3
19
  ## [0.24.0] - 2026-08-05
4
20
 
5
21
  ### Changed
@@ -5,7 +5,8 @@ var s = t`
5
5
  /* --- Theme Variables (Light defaults) --- */
6
6
  :host {
7
7
  --ft-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
8
- --ft-font-size: 14px;
8
+ /* 밀도 스위치 진입점 — components 의 --u-density 를 그대로 읽는다(묶음 결정 DL-253-1). */
9
+ --ft-font-size: var(--u-density, 14px);
9
10
 
10
11
  /* --- 치수·위계 축 (기본값 = 종전 렌더값) ---
11
12
  이 표는 가상 스크롤이라 행 높이가 **JS 로 계산된다**(index * rowHeight).
@@ -29,6 +30,13 @@ var s = t`
29
30
  --ft-row-even-bg: var(--u-bg-color, #FFFFFF);
30
31
  --ft-row-odd-bg: var(--u-bg-color-raised, #FAFAFA);
31
32
  --ft-row-hover-bg: var(--u-bg-color-hover, #F5F5F5);
33
+ /* ★홀수 행은 --ft-row-odd-bg(=raised) 위에 앉는다 — 짝수 행과 같은
34
+ --ft-row-hover-bg(=전역 hover) 를 쓰면 다크에서 raised==hover 라 «올려도 아무
35
+ 일도 안 일어난다»(§D-14, L2-11-1). --u-bg-color-raised-hover 는 다크에서
36
+ color-mix 로 새로 계산되고, 라이트에서는 기존 hover 에 별칭된다(components
37
+ light.css) — 두 테마 다 늘 선언돼 있으므로 폴백 리터럴은 시트 미로드 시에만
38
+ 쓰인다(다른 토큰들과 같은 관례). */
39
+ --ft-row-odd-hover-bg: var(--u-bg-color-raised-hover, #F5F5F5);
32
40
  --ft-active-color: var(--u-primary-color, #1976D2);
33
41
  --ft-selection-bg: var(--u-primary-bg-color, #E3F2FD);
34
42
  --ft-bool-color: var(--u-primary-color, #1976D2);
@@ -72,6 +80,7 @@ var s = t`
72
80
  --ft-row-even-bg: var(--u-bg-color, #FFFFFF);
73
81
  --ft-row-odd-bg: var(--u-bg-color-raised, #FAFAFA);
74
82
  --ft-row-hover-bg: var(--u-bg-color-hover, #F5F5F5);
83
+ --ft-row-odd-hover-bg: var(--u-bg-color-raised-hover, #F5F5F5);
75
84
  --ft-active-color: var(--u-primary-color, #1976D2);
76
85
  --ft-selection-bg: var(--u-primary-bg-color, #E3F2FD);
77
86
  --ft-bool-color: var(--u-primary-color, #1976D2);
@@ -92,6 +101,7 @@ var s = t`
92
101
  --ft-row-even-bg: var(--u-bg-color, #FFFFFF);
93
102
  --ft-row-odd-bg: var(--u-bg-color-raised, #FAFAFA);
94
103
  --ft-row-hover-bg: var(--u-bg-color-hover, #F5F5F5);
104
+ --ft-row-odd-hover-bg: var(--u-bg-color-raised-hover, #F5F5F5);
95
105
  --ft-active-color: var(--u-primary-color, #1976D2);
96
106
  --ft-selection-bg: var(--u-primary-bg-color, #E3F2FD);
97
107
  --ft-bool-color: var(--u-primary-color, #1976D2);
@@ -241,7 +251,8 @@ var s = t`
241
251
 
242
252
  .ft-row-even .ft-cell { background: var(--ft-row-even-bg); }
243
253
  .ft-row-odd .ft-cell { background: var(--ft-row-odd-bg); }
244
- .ft-row:hover .ft-cell { background: var(--ft-row-hover-bg); }
254
+ .ft-row-even:hover .ft-cell { background: var(--ft-row-hover-bg); }
255
+ .ft-row-odd:hover .ft-cell { background: var(--ft-row-odd-hover-bg); }
245
256
 
246
257
  .ft-cell.ft-active {
247
258
  outline: 2px solid var(--ft-active-color);
@@ -407,7 +418,8 @@ var s = t`
407
418
  }
408
419
 
409
420
  .ft-row-odd .ft-row-num { background: var(--ft-row-odd-bg); }
410
- .ft-row:hover .ft-row-num { background: var(--ft-row-hover-bg); }
421
+ .ft-row-even:hover .ft-row-num { background: var(--ft-row-hover-bg); }
422
+ .ft-row-odd:hover .ft-row-num { background: var(--ft-row-odd-hover-bg); }
411
423
 
412
424
  .ft-row-num:hover {
413
425
  background: var(--ft-header-hover-bg);
@@ -425,7 +437,8 @@ var s = t`
425
437
 
426
438
  .ft-row-even .ft-cell.ft-pinned { background: var(--ft-row-even-bg); }
427
439
  .ft-row-odd .ft-cell.ft-pinned { background: var(--ft-row-odd-bg); }
428
- .ft-row:hover .ft-cell.ft-pinned { background: var(--ft-row-hover-bg); }
440
+ .ft-row-even:hover .ft-cell.ft-pinned { background: var(--ft-row-hover-bg); }
441
+ .ft-row-odd:hover .ft-cell.ft-pinned { background: var(--ft-row-odd-hover-bg); }
429
442
  .ft-cell.ft-pinned.ft-selected { background: var(--ft-selection-bg) !important; }
430
443
 
431
444
  /* --- Filter UI --- */
@@ -576,7 +589,8 @@ var s = t`
576
589
  }
577
590
 
578
591
  .ft-row-odd .ft-checkbox-cell { background: var(--ft-row-odd-bg); }
579
- .ft-row:hover .ft-checkbox-cell { background: var(--ft-row-hover-bg); }
592
+ .ft-row-even:hover .ft-checkbox-cell { background: var(--ft-row-hover-bg); }
593
+ .ft-row-odd:hover .ft-checkbox-cell { background: var(--ft-row-odd-hover-bg); }
580
594
  .ft-row-selected .ft-checkbox-cell { background: var(--ft-selection-bg); }
581
595
  .ft-row-selected .ft-cell { background: var(--ft-selection-bg) !important; }
582
596
  .ft-row-selected .ft-row-num { background: var(--ft-selection-bg); }
@@ -1228,12 +1242,13 @@ function O(e) {
1228
1242
  }
1229
1243
  if (t[i] === "\"") {
1230
1244
  let e = "";
1231
- for (i++; i < a;) if (t[i] === "\"") if (i + 1 < a && t[i + 1] === "\"") e += "\"", i += 2;
1232
- else {
1233
- i++;
1234
- break;
1235
- }
1236
- else e += t[i], i++;
1245
+ for (i++; i < a;) if (t[i] === "\"") {
1246
+ if (i + 1 < a && t[i + 1] === "\"") e += "\"", i += 2;
1247
+ else {
1248
+ i++;
1249
+ break;
1250
+ }
1251
+ } else e += t[i], i++;
1237
1252
  r.push(e), i < a && t[i] === " " ? i++ : i < a && t[i] === "\n" && (n.push(r), r = [], i++);
1238
1253
  } else {
1239
1254
  let e = "";
@@ -1520,7 +1535,7 @@ async function xe(e) {
1520
1535
  };
1521
1536
  }
1522
1537
  //#endregion
1523
- //#region \0@oxc-project+runtime@0.142.0/helpers/esm/decorate.js
1538
+ //#region \0@oxc-project+runtime@0.143.0/helpers/esm/decorate.js
1524
1539
  function q(e, t, n, r) {
1525
1540
  var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
1526
1541
  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
@@ -1,2 +1,2 @@
1
- import { a as e, i as t, n, r, t as i } from "./flex-table-D-OLUYir.js";
1
+ import { a as e, i as t, n, r, t as i } from "./flex-table-DZFtW02v.js";
2
2
  export { i as FlexTable, t as RowSelectionState, r as UndoStack, n as exportData, e as renderCell };
package/dist/react.js CHANGED
@@ -1,4 +1,4 @@
1
- import { t as e } from "./flex-table-D-OLUYir.js";
1
+ import { t as e } from "./flex-table-DZFtW02v.js";
2
2
  import t from "react";
3
3
  import { createComponent as n } from "@lit/react";
4
4
  var r = n({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@iyulab/flex-table",
3
- "version": "0.24.0",
3
+ "version": "0.25.0",
4
4
  "description": "A minimalist, input-centric data grid web component",
5
5
  "type": "module",
6
6
  "main": "./dist/flex-table.js",