@iyulab/flex-table 0.21.1 → 0.23.0

package/README.md

@@ -67,7 +67,7 @@ npm install @iyulab/flex-table
 |----------|-----------|------|---------|-------------|
 | `columns` | — | `ColumnDefinition[]` | `[]` | Column definitions |
 | `data` | — | `DataRow[]` | `[]` | Data rows (`Record<string, unknown>[]`) |
-| `rowHeight` | `row-height` | `number` | `32` | Row height in pixels |
+| `rowHeight` | `row-height` | `number` | `32` | Row height in pixels. Falls back to the `--ft-row-height` token when not set — see [Density](#density-and-header-hierarchy) |
 | `showRowNumbers` | `show-row-numbers` | `boolean` | `false` | Show row number column |
 | `theme` | `theme` | `'light' \| 'dark'` | auto | Force theme; auto-detects `prefers-color-scheme` |
 | `editable` | `editable` | `boolean` | `true` | Global read-only mode when `false` |
@@ -269,30 +269,83 @@ All events use `CustomEvent` with `bubbles: true, composed: true`.
 
 ## CSS Custom Properties
 
-All colors and styles are customizable via CSS custom properties:
+All colors and styles are customizable via CSS custom properties.
+
+**Two levels, pick whichever fits.** Since 0.22.0 every `--ft-*` colour is derived from
+the `@iyulab/components` design tokens, so if you already load that token sheet the table
+follows your brand with no per-table configuration:
+
+```css
+:root { --u-primary-color: #7b1fa2; }   /* the table's accent, selection and boolean
+                                           markers follow — so do the buttons and shell */
+```
+
+Override an individual `--ft-*` when you want the table to differ from the rest of the app:
 
 ```css
 flex-table {
   --ft-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --ft-font-size: 14px;
-  --ft-border-color: #e0e0e0;
-  --ft-bg: #fff;
-  --ft-text-color: #202124;
-  --ft-header-bg: #f8f9fa;
-  --ft-header-hover-bg: #e8eaed;
-  --ft-header-text-color: #202124;
-  --ft-row-even-bg: #fff;
-  --ft-row-odd-bg: #fafafa;
-  --ft-row-hover-bg: #f0f4ff;
-  --ft-active-color: #1a73e8;
-  --ft-selection-bg: #e8f0fe;
-  --ft-bool-color: #2196f3;
-  --ft-sort-indicator-color: #5f6368;
-  --ft-editor-bg: #fff;
-  --ft-empty-color: #999;
+
+  /* Surfaces and text            derived from */
+  --ft-bg: #fff;                     /* --u-bg-color */
+  --ft-text-color: #202124;          /* --u-txt-color */
+  --ft-border-color: #e0e0e0;        /* --u-border-color */
+  --ft-header-bg: #f8f9fa;           /* --u-bg-color-raised */
+  --ft-header-hover-bg: #e8eaed;     /* --u-bg-color-active */
+  --ft-header-text-color: #202124;   /* --u-txt-color */
+  --ft-row-even-bg: #fff;            /* --u-bg-color */
+  --ft-row-odd-bg: #fafafa;          /* --u-bg-color-raised */
+  --ft-row-hover-bg: #f0f4ff;        /* --u-bg-color-hover */
+  --ft-editor-bg: #fff;              /* --u-input-bg-color */
+  --ft-sort-indicator-color: #5f6368;/* --u-txt-color-weak */
+  --ft-empty-color: #5f6368;         /* --u-txt-color-weak */
+
+  /* Accent */
+  --ft-active-color: #1a73e8;        /* --u-primary-color */
+  --ft-selection-bg: #e8f0fe;        /* --u-primary-bg-color */
+  --ft-bool-color: #2196f3;          /* --u-primary-color */
+
+  /* State overlays — these are translucent on purpose, so the row striping and
+     selection underneath stay visible. Set the *-color and the background follows. */
+  --ft-invalid-color: #d93025;       /* --u-danger-color */
+  --ft-drop-color: #1a73e8;          /* --u-primary-color */
+  --ft-find-color: #f9a825;          /* --u-warning-color */
+}
+```
+
+### Density and header hierarchy
+
+Since 0.23.0 the vertical rhythm and the header's typographic weight are adjustable, so a
+table can be matched to the other tables on the page:
+
+```css
+flex-table {
+  --ft-row-height: 32px;           /* body row height */
+  --ft-cell-padding-block: 6px;    /* text placement inside that height */
+  --ft-cell-padding-inline: 12px;
+  --ft-header-font-size: 14px;     /* defaults to --ft-font-size */
+  --ft-header-font-weight: 600;
 }
 ```
 
+⚠ **`--ft-row-height` is read once, at first render.** The grid is virtualised — rows are
+positioned at `index × rowHeight`, so the height cannot come from the cascade the way
+padding does. Declare it in a stylesheet that is in effect before the table is attached; to
+change it later, set the `rowHeight` property (or the `row-height` attribute) instead. An
+explicitly set property or attribute always wins over the token, and a value in any unit
+other than `px` is ignored.
+
+⚠ **Row height is fixed, and padding places the text within it.** Cells are single-line
+(`nowrap` + ellipsis) by design. If you reduce `--ft-row-height`, reduce
+`--ft-cell-padding-block` to match — keep `padding-block × 2 + line box ≤ row-height`, or
+the text is clipped at the bottom.
+
+**Without the token sheet nothing changes.** Every reference carries the literal above as
+its fallback, and the built-in dark theme (`prefers-color-scheme` or `theme="dark"`) still
+applies — the table remains usable standalone. Referencing the tokens does not add a
+package dependency; CSS custom properties are resolved at render time, not imported.
+
 ## Keyboard Shortcuts
 
 | Key | Action |

package/dist/{flex-table-DNUTTZ1m.js → flex-table-DReUAeUh.js}

@@ -6,64 +6,98 @@ var s = t`
   :host {
     --ft-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     --ft-font-size: 14px;
-    --ft-border-color: #e0e0e0;
-    --ft-bg: #fff;
-    --ft-text-color: #202124;
-    --ft-header-bg: #f8f9fa;
-    --ft-header-hover-bg: #e8eaed;
-    --ft-header-text-color: #202124;
-    --ft-row-even-bg: #fff;
-    --ft-row-odd-bg: #fafafa;
-    --ft-row-hover-bg: #f0f4ff;
-    --ft-active-color: #1a73e8;
-    --ft-selection-bg: #e8f0fe;
-    --ft-bool-color: #2196f3;
-    --ft-sort-indicator-color: #5f6368;
-    --ft-editor-bg: #fff;
+
+    /* --- 치수·위계 축 (기본값 = 종전 렌더값) ---
+       이 표는 가상 스크롤이라 행 높이가 **JS 로 계산된다**(index * rowHeight).
+       그래서 --ft-row-height 는 CSS 만으로는 닿지 않고, 컴포넌트가 첫 렌더에서
+       판독해 가상화 계산에 넣는다. 그 결과가 rowHeight 프로퍼티의 기본값이다.
+
+       ⚠여백과 행 높이의 관계: 행 높이는 **고정**이고 여백은 그 안에서 글자를
+       배치한다. 행 높이를 줄이면서 여백을 그대로 두면 아래가 잘린다
+       (padding-block * 2 + 한 줄 높이 <= row-height 를 유지할 것). */
+    --ft-row-height: 32px;
+    --ft-cell-padding-block: 6px;
+    --ft-cell-padding-inline: 12px;
+    --ft-header-font-size: var(--ft-font-size);
+    --ft-header-font-weight: 600;
+    --ft-border-color: var(--u-border-color, #e0e0e0);
+    --ft-bg: var(--u-bg-color, #fff);
+    --ft-text-color: var(--u-txt-color, #202124);
+    --ft-header-bg: var(--u-bg-color-raised, #f8f9fa);
+    --ft-header-hover-bg: var(--u-bg-color-active, #e8eaed);
+    --ft-header-text-color: var(--u-txt-color, #202124);
+    --ft-row-even-bg: var(--u-bg-color, #fff);
+    --ft-row-odd-bg: var(--u-bg-color-raised, #fafafa);
+    --ft-row-hover-bg: var(--u-bg-color-hover, #f0f4ff);
+    --ft-active-color: var(--u-primary-color, #1a73e8);
+    --ft-selection-bg: var(--u-primary-bg-color, #e8f0fe);
+    --ft-bool-color: var(--u-primary-color, #2196f3);
+    --ft-sort-indicator-color: var(--u-txt-color-weak, #5f6368);
+    --ft-editor-bg: var(--u-input-bg-color, #fff);
     /* #999 was 2.85 against --ft-bg (#fff); AA needs 4.5. The dark value (#9aa0a6 on
        #1e1e2e = 6.31) was already fine, so this was a light-only defect. #5f6368 is the
        same grey the sort indicator uses, which keeps the palette to one family. */
-    --ft-empty-color: #5f6368;
-  }
-
-  /* --- Dark Theme (auto via prefers-color-scheme) --- */
+    --ft-empty-color: var(--u-txt-color-weak, #5f6368);
+
+    /* 상태 색 — 종전에는 규칙 안에 리터럴로 박혀 있어 소비자가 덮을 경로가 없었고
+       테마도 따라오지 않았다(다크에서 라이트용 값 그대로).
+
+       ★**셀 배경은 불투명 면이 아니라 반투명 겹침이다.** 줄무늬(홀/짝 행)와 선택 표시가
+       아래에 있고 그것이 비쳐야 "어느 행의 어떤 셀"인지 읽힌다. 그래서 면 토큰
+       (--u-*-bg-color)이 아니라 **상태 색에서 알파를 뽑는다** — 부수 효과로 두 테마
+       모두에서 성립하므로 아래 다크 블록에 이 셋을 다시 적을 필요가 없다. */
+    --ft-invalid-color: var(--u-danger-color, #d93025);
+    --ft-invalid-bg: color-mix(in srgb, var(--ft-invalid-color) 8%, transparent);
+    --ft-drop-color: var(--u-primary-color, #1a73e8);
+    --ft-drop-bg: color-mix(in srgb, var(--ft-drop-color) 15%, transparent);
+    --ft-find-color: var(--u-warning-color, #f9a825);
+    --ft-find-bg: color-mix(in srgb, var(--ft-find-color) 25%, transparent);
+    --ft-find-current-bg: color-mix(in srgb, var(--ft-find-color) 50%, transparent);
+  }
+
+  /* --- Dark Theme (auto via prefers-color-scheme) ---
+     ★**토큰 시트가 로드된 환경에서 아래 두 블록은 아무 일도 하지 않는다** — --u-* 가
+     이미 테마별로 다른 값을 가리키므로 base 규칙만으로 두 테마가 성립한다.
+     남겨 두는 이유는 **시트가 없는 소비자**다: 그때는 각 var() 의 리터럴 폴백이
+     발동하고, 아래 블록이 그 폴백을 다크 값으로 바꿔 준다.
+     ⇒ 즉 이 표는 시트 없이도 종전처럼 자체 테마를 갖는다(그것이 이 패키지의 계약이었다). */
   @media (prefers-color-scheme: dark) {
     :host(:not([theme="light"])) {
-      --ft-border-color: #3c4043;
-      --ft-bg: #1e1e1e;
-      --ft-text-color: #e8eaed;
-      --ft-header-bg: #292a2d;
-      --ft-header-hover-bg: #3c4043;
-      --ft-header-text-color: #e8eaed;
-      --ft-row-even-bg: #1e1e1e;
-      --ft-row-odd-bg: #252526;
-      --ft-row-hover-bg: #2a2d2e;
-      --ft-active-color: #4da3ff;
-      --ft-selection-bg: #264f78;
-      --ft-bool-color: #64b5f6;
-      --ft-sort-indicator-color: #9aa0a6;
-      --ft-editor-bg: #2d2d2d;
-      --ft-empty-color: #9aa0a6;
+      --ft-border-color: var(--u-border-color, #3c4043);
+      --ft-bg: var(--u-bg-color, #1e1e1e);
+      --ft-text-color: var(--u-txt-color, #e8eaed);
+      --ft-header-bg: var(--u-bg-color-raised, #292a2d);
+      --ft-header-hover-bg: var(--u-bg-color-active, #3c4043);
+      --ft-header-text-color: var(--u-txt-color, #e8eaed);
+      --ft-row-even-bg: var(--u-bg-color, #1e1e1e);
+      --ft-row-odd-bg: var(--u-bg-color-raised, #252526);
+      --ft-row-hover-bg: var(--u-bg-color-hover, #2a2d2e);
+      --ft-active-color: var(--u-primary-color, #4da3ff);
+      --ft-selection-bg: var(--u-primary-bg-color, #264f78);
+      --ft-bool-color: var(--u-primary-color, #64b5f6);
+      --ft-sort-indicator-color: var(--u-txt-color-weak, #9aa0a6);
+      --ft-editor-bg: var(--u-input-bg-color, #2d2d2d);
+      --ft-empty-color: var(--u-txt-color-weak, #9aa0a6);
     }
   }
 
   /* --- Force dark via attribute --- */
   :host([theme="dark"]) {
-    --ft-border-color: #3c4043;
-    --ft-bg: #1e1e1e;
-    --ft-text-color: #e8eaed;
-    --ft-header-bg: #292a2d;
-    --ft-header-hover-bg: #3c4043;
-    --ft-header-text-color: #e8eaed;
-    --ft-row-even-bg: #1e1e1e;
-    --ft-row-odd-bg: #252526;
-    --ft-row-hover-bg: #2a2d2e;
-    --ft-active-color: #4da3ff;
-    --ft-selection-bg: #264f78;
-    --ft-bool-color: #64b5f6;
-    --ft-sort-indicator-color: #9aa0a6;
-    --ft-editor-bg: #2d2d2d;
-    --ft-empty-color: #9aa0a6;
+    --ft-border-color: var(--u-border-color, #3c4043);
+    --ft-bg: var(--u-bg-color, #1e1e1e);
+    --ft-text-color: var(--u-txt-color, #e8eaed);
+    --ft-header-bg: var(--u-bg-color-raised, #292a2d);
+    --ft-header-hover-bg: var(--u-bg-color-active, #3c4043);
+    --ft-header-text-color: var(--u-txt-color, #e8eaed);
+    --ft-row-even-bg: var(--u-bg-color, #1e1e1e);
+    --ft-row-odd-bg: var(--u-bg-color-raised, #252526);
+    --ft-row-hover-bg: var(--u-bg-color-hover, #2a2d2e);
+    --ft-active-color: var(--u-primary-color, #4da3ff);
+    --ft-selection-bg: var(--u-primary-bg-color, #264f78);
+    --ft-bool-color: var(--u-primary-color, #64b5f6);
+    --ft-sort-indicator-color: var(--u-txt-color-weak, #9aa0a6);
+    --ft-editor-bg: var(--u-input-bg-color, #2d2d2d);
+    --ft-empty-color: var(--u-txt-color-weak, #9aa0a6);
   }
 
   /* --- Layout --- */
@@ -89,10 +123,12 @@ var s = t`
   .ft-header-cell {
     position: absolute;
     top: 0;
-    padding: 8px 12px;
+    /* 머리행은 종전에도 본문보다 상하 2px 넉넉했다 — 그 관계를 유지한다. */
+    padding: calc(var(--ft-cell-padding-block) + 2px) var(--ft-cell-padding-inline);
     background: var(--ft-header-bg);
     color: var(--ft-header-text-color);
-    font-weight: 600;
+    font-size: var(--ft-header-font-size);
+    font-weight: var(--ft-header-font-weight);
     user-select: none;
     border-bottom: 2px solid var(--ft-border-color);
     overflow: hidden;
@@ -194,7 +230,7 @@ var s = t`
   .ft-cell {
     position: absolute;
     top: 0;
-    padding: 6px 12px;
+    padding: var(--ft-cell-padding-block) var(--ft-cell-padding-inline);
     border-bottom: 1px solid var(--ft-border-color);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -218,9 +254,9 @@ var s = t`
   }
 
   .ft-cell.ft-invalid {
-    outline: 2px solid #d93025;
+    outline: 2px solid var(--ft-invalid-color);
     outline-offset: -2px;
-    background: rgba(217, 48, 37, 0.08);
+    background: var(--ft-invalid-bg);
   }
 
   .ft-cell.ft-editing { padding: 0; overflow: visible; }
@@ -228,7 +264,8 @@ var s = t`
   .ft-editor {
     width: 100%; height: 100%;
     border: none; outline: none;
-    padding: 6px 12px;
+    /* 편집기는 셀 위에 겹쳐 뜬다 — 여백이 어긋나면 글자가 튄다. */
+    padding: var(--ft-cell-padding-block) var(--ft-cell-padding-inline);
     font: inherit;
     color: var(--ft-text-color);
     background: var(--ft-editor-bg);
@@ -312,14 +349,14 @@ var s = t`
     position: absolute;
     inset: 0;
     z-index: 100;
-    background: rgba(59, 130, 246, 0.15);
-    border: 2px dashed rgba(59, 130, 246, 0.8);
+    background: var(--ft-drop-bg);
+    border: 2px dashed var(--ft-drop-color);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     font-weight: 500;
-    color: rgb(37, 99, 235);
+    color: var(--ft-drop-color);
     pointer-events: none;
     border-radius: 4px;
   }
@@ -692,7 +729,7 @@ var s = t`
 
   .ft-comment-popup-textarea:focus {
     border-color: var(--ft-active-color, #3b82f6);
-    box-shadow: 0 0 0 2px rgba(59,130,246,0.2);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ft-active-color) 20%, transparent);
   }
 
   .ft-comment-popup-buttons {
@@ -801,12 +838,12 @@ var s = t`
 
   /* Find highlight */
   .ft-cell.ft-find-match {
-    background: rgba(255, 200, 0, 0.25) !important;
+    background: var(--ft-find-bg) !important;
   }
 
   .ft-cell.ft-find-current {
-    background: rgba(255, 160, 0, 0.5) !important;
-    outline: 2px solid orange;
+    background: var(--ft-find-current-bg) !important;
+    outline: 2px solid var(--ft-find-color);
     outline-offset: -2px;
   }
 `;
@@ -1290,7 +1327,7 @@ function oe(e, t) {
   <sheetData>${n.join("")}</sheetData>
 </worksheet>`;
 }
-function z(e, t) {
+function se(e, t) {
 	let n = oe(e, t);
 	return ne([
 		{
@@ -1321,24 +1358,24 @@ function z(e, t) {
 }
 //#endregion
 //#region src/export/export.ts
-function B(e, t, n) {
+function z(e, t, n) {
 	switch (n) {
-		case "csv": return H(e, t, ",");
-		case "tsv": return H(e, t, "	");
-		case "json": return W(e, t);
-		case "xlsx": return z(e, t);
+		case "csv": return V(e, t, ",");
+		case "tsv": return V(e, t, "	");
+		case "json": return U(e, t);
+		case "xlsx": return se(e, t);
 	}
 }
-function V(e, t) {
+function B(e, t) {
 	return e == null ? "" : (t.type === "date" || t.type === "datetime") && e instanceof Date ? e.toISOString() : String(e);
 }
-function H(e, t, n) {
-	return [t.map((e) => U(e.header, n)).join(n), ...e.map((e) => t.map((t) => U(V(e[t.key], t), n)).join(n))].join("\n");
+function V(e, t, n) {
+	return [t.map((e) => H(e.header, n)).join(n), ...e.map((e) => t.map((t) => H(B(e[t.key], t), n)).join(n))].join("\n");
 }
-function U(e, t) {
+function H(e, t) {
 	return e.includes(t) || e.includes("\"") || e.includes("\n") || e.includes("\r") ? "\"" + e.replace(/"/g, "\"\"") + "\"" : e;
 }
-function W(e, t) {
+function U(e, t) {
 	let n = e.map((e) => {
 		let n = {};
 		for (let r of t) {
@@ -1349,35 +1386,35 @@ function W(e, t) {
 	});
 	return JSON.stringify(n, null, 2);
 }
-function G(e, t, n) {
+function W(e, t, n) {
 	let r = new Blob([e], { type: n }), i = URL.createObjectURL(r), a = document.createElement("a");
 	a.href = i, a.download = t, a.style.display = "none", document.body.appendChild(a), a.click(), document.body.removeChild(a), setTimeout(() => URL.revokeObjectURL(i), 100);
 }
-var K = {
+var G = {
 	csv: "text/csv;charset=utf-8",
 	tsv: "text/tab-separated-values;charset=utf-8",
 	json: "application/json;charset=utf-8",
 	xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
-}, se = {
+}, ce = {
 	csv: ".csv",
 	tsv: ".tsv",
 	json: ".json",
 	xlsx: ".xlsx"
 };
-function ce(e) {
-	return K[e];
-}
 function le(e) {
-	return se[e];
+	return G[e];
+}
+function ue(e) {
+	return ce[e];
 }
 //#endregion
 //#region src/export/xlsx-reader.ts
-function ue(e) {
+function de(e) {
 	for (let t = e.byteLength - 22; t >= 0; t--) if (e.getUint32(t, !0) === 101010256) return t;
 	throw Error("XLSX: End of central directory not found — not a valid ZIP file");
 }
-function de(e) {
-	let t = ue(e), n = e.getUint32(t + 16, !0), r = e.getUint32(t + 12, !0), i = new TextDecoder("utf-8"), a = [], o = n, s = n + r;
+function fe(e) {
+	let t = de(e), n = e.getUint32(t + 16, !0), r = e.getUint32(t + 12, !0), i = new TextDecoder("utf-8"), a = [], o = n, s = n + r;
 	for (; o < s && e.getUint32(o, !0) === 33639248;) {
 		let t = e.getUint16(o + 10, !0), n = e.getUint32(o + 20, !0), r = e.getUint32(o + 24, !0), s = e.getUint16(o + 28, !0), c = e.getUint16(o + 30, !0), l = e.getUint16(o + 32, !0), u = e.getUint32(o + 42, !0), d = i.decode(new Uint8Array(e.buffer, o + 46, s));
 		a.push({
@@ -1390,7 +1427,7 @@ function de(e) {
 	}
 	return a;
 }
-async function fe(e) {
+async function pe(e) {
 	let t = new DecompressionStream("deflate-raw"), n = t.writable.getWriter(), r = t.readable.getReader();
 	n.write(e), n.close();
 	let i = [];
@@ -1403,40 +1440,40 @@ async function fe(e) {
 	for (let e of i) o.set(e, s), s += e.length;
 	return o;
 }
-async function pe(e, t) {
+async function me(e, t) {
 	let n = t.localHeaderOffset, r = e.getUint16(n + 26, !0), i = e.getUint16(n + 28, !0), a = n + 30 + r + i, o = new Uint8Array(e.buffer, a, t.compressedSize);
 	if (t.compressionMethod === 0) return o.slice();
-	if (t.compressionMethod === 8) return fe(o);
+	if (t.compressionMethod === 8) return pe(o);
 	throw Error(`XLSX: Unsupported compression method ${t.compressionMethod}`);
 }
-async function me(e) {
-	let t = new DataView(e), n = de(t), r = /* @__PURE__ */ new Map();
-	for (let e of n) e.compressedSize === 0 && e.name.endsWith("/") || r.set(e.name, await pe(t, e));
+async function he(e) {
+	let t = new DataView(e), n = fe(t), r = /* @__PURE__ */ new Map();
+	for (let e of n) e.compressedSize === 0 && e.name.endsWith("/") || r.set(e.name, await me(t, e));
 	return r;
 }
-var he = new TextDecoder("utf-8");
-function q(e) {
-	let t = he.decode(e);
+var ge = new TextDecoder("utf-8");
+function K(e) {
+	let t = ge.decode(e);
 	return new DOMParser().parseFromString(t, "application/xml");
 }
-function ge(e) {
+function _e(e) {
 	if (!e) return [];
-	let t = q(e);
+	let t = K(e);
 	return Array.from(t.querySelectorAll("si")).map((e) => Array.from(e.querySelectorAll("t")).map((e) => e.textContent ?? "").join(""));
 }
-function _e(e) {
+function ve(e) {
 	let t = (e - 1) * 864e5 + Date.UTC(1899, 11, 30);
 	return new Date(t).toISOString().slice(0, 10);
 }
-function ve(e, t) {
-	let n = q(e).querySelectorAll("row");
+function ye(e, t) {
+	let n = K(e).querySelectorAll("row");
 	if (n.length === 0) return [];
 	let r = 0, i = /* @__PURE__ */ new Map();
 	for (let e of n) {
 		let n = parseInt(e.getAttribute("r") ?? "1", 10) - 1, a = /* @__PURE__ */ new Map();
 		i.set(n, a);
 		for (let n of e.querySelectorAll("c")) {
-			let e = ye(n.getAttribute("r") ?? "");
+			let e = be(n.getAttribute("r") ?? "");
 			e > r && (r = e);
 			let i = n.getAttribute("t") ?? "", o = n.getAttribute("s") ?? "", s = n.querySelector("v")?.textContent ?? "", c = n.querySelector("is > t")?.textContent ?? null, l;
 			if (i === "s") l = t[parseInt(s, 10)] ?? "";
@@ -1445,7 +1482,7 @@ function ve(e, t) {
 			else if (s === "") l = "";
 			else {
 				let e = parseFloat(s);
-				l = !isNaN(e) && o !== "" && parseInt(o, 10) > 0 && e >= 1 && e <= 73050 ? _e(e) : s;
+				l = !isNaN(e) && o !== "" && parseInt(o, 10) > 0 && e >= 1 && e <= 73050 ? ve(e) : s;
 			}
 			a.set(e, l);
 		}
@@ -1459,13 +1496,13 @@ function ve(e, t) {
 	}
 	return o;
 }
-function ye(e) {
+function be(e) {
 	let t = 0, n = 0;
 	for (; n < e.length && e[n] >= "A" && e[n] <= "Z";) t = t * 26 + (e.charCodeAt(n) - 64), n++;
 	return t - 1;
 }
-async function be(e) {
-	let t = await me(e), n = ge(t.get("xl/sharedStrings.xml")), r = t.get("xl/worksheets/sheet1.xml");
+async function xe(e) {
+	let t = await he(e), n = _e(t.get("xl/sharedStrings.xml")), r = t.get("xl/worksheets/sheet1.xml");
 	if (!r) {
 		for (let [e, n] of t) if (e.toLowerCase().includes("worksheets/sheet")) {
 			r = n;
@@ -1473,7 +1510,7 @@ async function be(e) {
 		}
 	}
 	if (!r) throw Error("XLSX: No worksheet found");
-	let i = ve(r, n);
+	let i = ye(r, n);
 	return i.length === 0 ? {
 		headers: [],
 		rows: []
@@ -1483,8 +1520,8 @@ async function be(e) {
 	};
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorate.js
-function J(e, t, n, r) {
+//#region \0@oxc-project+runtime@0.142.0/helpers/esm/decorate.js
+function q(e, t, n, r) {
 	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
 	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
 	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
@@ -1492,16 +1529,16 @@ function J(e, t, n, r) {
 }
 //#endregion
 //#region src/flex-table.ts
-var Y = {
+var J = {
 	eq: "=",
 	neq: "≠",
 	gt: ">",
 	lt: "<",
 	gte: "≥",
 	lte: "≤"
-}, X = 120, Z = 40, xe = 32, Q = 5, $ = class extends e {
+}, Y = 120, X = 40, Z = 32, Q = 5, $ = class extends e {
 	constructor(...e) {
-		super(...e), this.columns = [], this._data = [], this._inUndoRedo = !1, this.clearUndoOnDataChange = !1, this.clearSelectionOnDataChange = !1, this.rowHeight = xe, this.showRowNumbers = !1, this.theme = void 0, this.maxRows = 0, this.editable = !0, this.showFilters = !1, this.showContextMenu = !1, this.frozenRows = 0, this.loading = !1, this.importEnabled = !1, this.selectable = !1, this.dataMode = "client", this.footerData = null, this._scrollTop = 0, this._scrollLeft = 0, this._viewportHeight = 0, this._viewportWidth = 0, this._colLeftOffsets = [], this._totalRowWidth = 0, this._activeCell = null, this._editingCell = null, this._sortCriteria = [], this._selection = new y(), this._editing = new b(), this._rowSelection = new x(), this._undo = new D(), this._filters = [], this._filteredIndices = [], this._sortedIndices = [], this._openFilterKey = null, this._rowSelectionVersion = 0, this._autocompleteState = null, this._headerMenu = null, this._bodyContextMenu = null, this._commentPopup = null, this._viewDirty = !0, this._isDragging = !1, this._wasDrag = !1, this._resizing = null, this._resizeCleanup = null, this._colDrag = null, this._colDragIndicatorLeft = null, this._fillDrag = null, this._rowDrag = null, this._rowDragIndicatorY = null, this._findState = null, this._columnWidths = /* @__PURE__ */ new Map(), this._hostResizeObserver = null, this._comments = /* @__PURE__ */ new Map(), this._isDragOver = !1, this._onCommentPopupOutsideClick = () => {
+		super(...e), this.columns = [], this._data = [], this._inUndoRedo = !1, this.clearUndoOnDataChange = !1, this.clearSelectionOnDataChange = !1, this._rowHeightFromCss = Z, this.showRowNumbers = !1, this.theme = void 0, this.maxRows = 0, this.editable = !0, this.showFilters = !1, this.showContextMenu = !1, this.frozenRows = 0, this.loading = !1, this.importEnabled = !1, this.selectable = !1, this.dataMode = "client", this.footerData = null, this._scrollTop = 0, this._scrollLeft = 0, this._viewportHeight = 0, this._viewportWidth = 0, this._colLeftOffsets = [], this._totalRowWidth = 0, this._activeCell = null, this._editingCell = null, this._sortCriteria = [], this._selection = new y(), this._editing = new b(), this._rowSelection = new x(), this._undo = new D(), this._filters = [], this._filteredIndices = [], this._sortedIndices = [], this._openFilterKey = null, this._rowSelectionVersion = 0, this._autocompleteState = null, this._headerMenu = null, this._bodyContextMenu = null, this._commentPopup = null, this._viewDirty = !0, this._isDragging = !1, this._wasDrag = !1, this._resizing = null, this._resizeCleanup = null, this._colDrag = null, this._colDragIndicatorLeft = null, this._fillDrag = null, this._rowDrag = null, this._rowDragIndicatorY = null, this._findState = null, this._columnWidths = /* @__PURE__ */ new Map(), this._hostResizeObserver = null, this._comments = /* @__PURE__ */ new Map(), this._isDragOver = !1, this._onCommentPopupOutsideClick = () => {
 			this._commitCommentPopup();
 		}, this._invalidCells = /* @__PURE__ */ new Map(), this._textFilterState = /* @__PURE__ */ new Map(), this._numberFilterState = /* @__PURE__ */ new Map(), this._dateFilterState = /* @__PURE__ */ new Map(), this._emptyFilterState = /* @__PURE__ */ new Map();
 	}
@@ -1515,6 +1552,13 @@ var Y = {
 		let t = this._data, n = e !== t;
 		this._data = e, n && !this._inUndoRedo && (this.clearUndoOnDataChange && this._undo.clear(), this.clearSelectionOnDataChange && this._rowSelection.selectedCount > 0 && (this._rowSelection.deselectAll(), this._rowSelectionVersion++, this._dispatchRowSelectionEvent())), this.requestUpdate("data", t);
 	}
+	get rowHeight() {
+		return this._rowHeightExplicit ?? this._rowHeightFromCss ?? Z;
+	}
+	set rowHeight(e) {
+		let t = this.rowHeight;
+		this._rowHeightExplicit = e, this.requestUpdate("rowHeight", t);
+	}
 	set selectionMode(e) {
 		this._rowSelection.mode = e, this.requestUpdate();
 	}
@@ -1850,12 +1894,12 @@ var Y = {
 			if (!t) return "";
 			let n = this.visibleColumns.slice(t.startCol, t.endCol + 1), r = [];
 			for (let e = t.startRow; e <= t.endRow; e++) r.push(this.data[this._toDataIndex(e)]);
-			return B(r, n, e);
+			return z(r, n, e);
 		}
-		return B(this._sortedIndices.map((e) => this.data[e]), this.visibleColumns, e);
+		return z(this._sortedIndices.map((e) => this.data[e]), this.visibleColumns, e);
 	}
 	exportToFile(e, t) {
-		G(this.exportToString(e), t ?? `export${le(e)}`, ce(e));
+		W(this.exportToString(e), t ?? `export${ue(e)}`, le(e));
 	}
 	setComment(e, t, n) {
 		let r = this.getComment(e, t);
@@ -1912,7 +1956,7 @@ var Y = {
 	async importFromFile(e) {
 		let t = e.name.toLowerCase();
 		if (t.endsWith(".xlsx")) {
-			let t = await be(await e.arrayBuffer());
+			let t = await xe(await e.arrayBuffer());
 			this._applyImportedSheet(t);
 		} else if (t.endsWith(".csv") || t.endsWith(".tsv")) {
 			let t = O(await e.text());
@@ -2004,8 +2048,8 @@ var Y = {
 		return this._columnWidths.get(e);
 	}
 	_getColWidth(e) {
-		let t = this._columnWidths.get(e.key) ?? e.width ?? X;
-		return Math.max(t, e.minWidth ?? Z);
+		let t = this._columnWidths.get(e.key) ?? e.width ?? Y;
+		return Math.max(t, e.minWidth ?? X);
 	}
 	get headerHeight() {
 		return this.rowHeight + 8;
@@ -2036,7 +2080,15 @@ var Y = {
 		super.disconnectedCallback(), this.removeEventListener("scroll", this._onScroll), this.removeEventListener("keydown", this._onKeyDown), this.removeEventListener("contextmenu", this._onContextMenu), this.removeEventListener("dragover", this._onDragover), this.removeEventListener("dragleave", this._onDragleave), this.removeEventListener("drop", this._onDrop), document.removeEventListener("click", this._onDocumentClick), document.removeEventListener("mousedown", this._onCommentPopupOutsideClick), this._isDragging = !1, this._wasDrag = !1, this._resizeCleanup &&= (this._resizeCleanup(), null), this._hostResizeObserver &&= (this._hostResizeObserver.disconnect(), null);
 	}
 	firstUpdated() {
-		this._measureViewport();
+		this._readDensityTokens(), this._measureViewport();
+	}
+	_readDensityTokens() {
+		let e = getComputedStyle(this).getPropertyValue("--ft-row-height").trim();
+		if (!e) return;
+		let t = parseFloat(e);
+		if (!Number.isFinite(t) || t <= 0 || !/px\s*$/.test(e) || t === this._rowHeightFromCss) return;
+		let n = this.rowHeight;
+		this._rowHeightFromCss = t, this._rowHeightExplicit === void 0 && this.requestUpdate("rowHeight", n);
 	}
 	_updateColOffsets() {
 		let e = this.visibleColumns, t = [], n = this._prefixWidth;
@@ -2364,7 +2416,7 @@ var Y = {
 				"y"
 			].includes(t) && this._handleCtrlKey(e)) return;
 		}
-		if (!(t.length === 0 || this._visibleRowCount === 0)) {
+		if (t.length !== 0 && this._visibleRowCount !== 0) {
 			if ((e.key === "Enter" || e.key === "F2") && this._activeCell) {
 				e.preventDefault(), this._startEdit();
 				return;
@@ -2418,7 +2470,7 @@ var Y = {
 		e.preventDefault();
 		let n = t[this._activeCell.col];
 		if (!n) return !0;
-		let r = this._columnWidths.get(n.key) ?? n.width ?? X, i = e.key === "ArrowRight" ? 20 : -20, a = n.minWidth ?? Z, o = Math.max(a, r + i);
+		let r = this._columnWidths.get(n.key) ?? n.width ?? Y, i = e.key === "ArrowRight" ? 20 : -20, a = n.minWidth ?? X, o = Math.max(a, r + i);
 		return this._columnWidths.set(n.key, o), this.requestUpdate(), this.dispatchEvent(new CustomEvent("column-resize", {
 			detail: {
 				key: n.key,
@@ -2825,9 +2877,9 @@ var Y = {
 		if (!o) return r;
 		let s = this.data[t]?.[o.key], c = this._filters.some((e) => e.key === o.key), l = () => {
 			this._bodyContextMenu = null;
-		};
+		}, u = i + 200 > window.innerWidth ? i - 200 : i, d = a + 280 > window.innerHeight ? a - 280 : a;
 		return n`
-      <div class="ft-body-context-menu" style="position: fixed; left: ${i + 200 > window.innerWidth ? i - 200 : i}px; top: ${a + 280 > window.innerHeight ? a - 280 : a}px; z-index: 200;"
+      <div class="ft-body-context-menu" style="position: fixed; left: ${u}px; top: ${d}px; z-index: 200;"
         @mousedown=${(e) => e.stopPropagation()}>
         <div class="ft-context-menu-item"
           @click=${() => {
@@ -2928,10 +2980,10 @@ var Y = {
 	}
 	_renderCommentPopup() {
 		if (!this._commentPopup) return r;
-		let { x: e, y: t } = this._commentPopup;
+		let { x: e, y: t } = this._commentPopup, i = e + 240 > window.innerWidth ? e - 240 : e, a = t + 150 > window.innerHeight ? t - 150 : t;
 		return n`
       <div class="ft-comment-popup"
-        style="position: fixed; left: ${e + 240 > window.innerWidth ? e - 240 : e}px; top: ${t + 150 > window.innerHeight ? t - 150 : t}px; z-index: 201;"
+        style="position: fixed; left: ${i}px; top: ${a}px; z-index: 201;"
         @mousedown=${(e) => e.stopPropagation()}>
         <textarea class="ft-comment-popup-textarea"
           rows="4"
@@ -3007,11 +3059,12 @@ var Y = {
 		return e === "empty" ? (e) => e == null || e === "" : (e) => e != null && e !== "";
 	}
 	_renderEmptyFilterRow(e, t) {
+		let r = this._emptyFilterState.get(e) ?? "";
 		return n`
       <div class="ft-filter-empty-row">
         <label>Blank cells</label>
         <select class="ft-filter-mode-select"
-          .value=${this._emptyFilterState.get(e) ?? ""}
+          .value=${r}
           @change=${(n) => {
 			let r = n.target.value;
 			(r === "" || r === "empty" || r === "non-empty") && (r ? this._emptyFilterState.set(e, r) : this._emptyFilterState.delete(e), t?.(), this._applyFilterForKey(e));
@@ -3152,7 +3205,7 @@ var Y = {
           @keydown=${(e) => {
 			e.key === "Escape" && (this._openFilterKey = null), e.stopPropagation();
 		}}>
-          ${Object.keys(Y).map((e) => n`<option value=${e}>${Y[e]}</option>`)}
+          ${Object.keys(J).map((e) => n`<option value=${e}>${J[e]}</option>`)}
         </select>
         <input class="ft-filter-input ft-num-cond-input" type="number" placeholder="Value"
           .value=${r.value == null ? "" : String(r.value)}
@@ -3263,7 +3316,7 @@ var Y = {
 		if (!n) return;
 		let r = this.shadowRoot?.querySelectorAll(`.ft-cell[data-col-index="${t}"]`), i = 0, a = this.shadowRoot?.querySelector(`.ft-header-cell[data-col-index="${t}"]`);
 		if (a && (i = Math.max(i, a.scrollWidth)), r) for (let e of r) i = Math.max(i, e.scrollWidth);
-		let o = n.minWidth ?? Z, s = Math.max(o, i + 8);
+		let o = n.minWidth ?? X, s = Math.max(o, i + 8);
 		this._columnWidths.set(n.key, s), this.requestUpdate(), this.dispatchEvent(new CustomEvent("column-resize", {
 			detail: {
 				key: n.key,
@@ -3276,7 +3329,7 @@ var Y = {
 	}
 	_onResizeStart(e, t) {
 		e.preventDefault(), e.stopPropagation();
-		let n = this.visibleColumns[t], r = this._columnWidths.get(n.key) ?? n.width ?? X;
+		let n = this.visibleColumns[t], r = this._columnWidths.get(n.key) ?? n.width ?? Y;
 		this._resizing = {
 			colIndex: t,
 			startX: e.clientX,
@@ -3284,13 +3337,13 @@ var Y = {
 		};
 		let i = (e) => {
 			if (!this._resizing) return;
-			let t = e.clientX - this._resizing.startX, r = n.minWidth ?? Z, i = Math.max(r, this._resizing.startWidth + t);
+			let t = e.clientX - this._resizing.startX, r = n.minWidth ?? X, i = Math.max(r, this._resizing.startWidth + t);
 			this._columnWidths.set(n.key, i), this.requestUpdate();
 		}, a = () => {
 			document.removeEventListener("mousemove", i), document.removeEventListener("mouseup", o), this._resizeCleanup = null;
 		}, o = () => {
 			if (a(), this._resizing) {
-				let e = this._columnWidths.get(n.key) ?? X;
+				let e = this._columnWidths.get(n.key) ?? Y;
 				this.dispatchEvent(new CustomEvent("column-resize", {
 					detail: {
 						key: n.key,
@@ -3456,8 +3509,10 @@ var Y = {
 		let t = this.visibleColumns;
 		if (e.endCol >= t.length || e.endRow >= this._visibleRowCount) return "";
 		let r = (this._colLeftOffsets[e.endCol] ?? 0) + this._getColWidth(t[e.endCol]) - this._scrollLeft - 4, i = this.headerHeight + (e.endRow + 1) * this.rowHeight - this._scrollTop - 4;
-		return r < 0 || i < this.headerHeight ? "" : n`
-      ${this._fillDrag?.active && this._fillDrag.targetRange ? this._renderFillPreview(this._fillDrag.targetRange) : ""}
+		if (r < 0 || i < this.headerHeight) return "";
+		let a = this._fillDrag?.active && this._fillDrag.targetRange ? this._renderFillPreview(this._fillDrag.targetRange) : "";
+		return n`
+      ${a}
       <div class="ft-fill-handle"
         style="left:${r}px;top:${i}px;"
         @mousedown=${(e) => this._onFillHandleMouseDown(e)}>
@@ -3466,7 +3521,9 @@ var Y = {
 	}
 	_renderFillPreview(e) {
 		let t = this.visibleColumns;
-		return e.endCol >= t.length || e.endRow >= this._visibleRowCount ? "" : n`<div class="ft-fill-preview" style="left:${(this._colLeftOffsets[e.startCol] ?? 0) - this._scrollLeft}px;top:${this.headerHeight + e.startRow * this.rowHeight - this._scrollTop}px;width:${(this._colLeftOffsets[e.endCol] ?? 0) + this._getColWidth(t[e.endCol]) - (this._colLeftOffsets[e.startCol] ?? 0)}px;height:${(e.endRow - e.startRow + 1) * this.rowHeight}px;"></div>`;
+		if (e.endCol >= t.length || e.endRow >= this._visibleRowCount) return "";
+		let r = (this._colLeftOffsets[e.startCol] ?? 0) - this._scrollLeft, i = this.headerHeight + e.startRow * this.rowHeight - this._scrollTop, a = (this._colLeftOffsets[e.endCol] ?? 0) + this._getColWidth(t[e.endCol]) - (this._colLeftOffsets[e.startCol] ?? 0), o = (e.endRow - e.startRow + 1) * this.rowHeight;
+		return n`<div class="ft-fill-preview" style="left:${r}px;top:${i}px;width:${a}px;height:${o}px;"></div>`;
 	}
 	_onRowNumMouseDown(e, t) {
 		if (e.button !== 0) return;
@@ -3716,15 +3773,18 @@ var Y = {
 		for (let t of l) m.push(this._renderHeaderCell(e[t], t));
 		for (let t = s; t < c; t++) m.push(this._renderHeaderCell(e[t], t));
 		let h = this._colDragIndicatorLeft == null ? "" : n`<div class="ft-drop-indicator" style="left:${this._colDragIndicatorLeft}px"></div>`;
-		if (this.data.length === 0 || this._visibleRowCount === 0) return n`
+		if (this.data.length === 0 || this._visibleRowCount === 0) {
+			let e = this.data.length === 0 ? "No data" : "No matching data";
+			return n`
         ${i}
         <div class="ft-header" role="row" style="width: ${o}px; height: ${a}px;">
           ${f}${p}
           ${m}
           ${h}
         </div>
-        <div class="ft-empty">${this.data.length === 0 ? "No data" : "No matching data"}</div>
+        <div class="ft-empty">${e}</div>
       `;
+		}
 		let { start: g, end: _ } = this.visibleRange, v = this._frozenRowCount, y = [];
 		for (let e = g; e < _; e++) y.push(this._renderRow(e, s, c, l, (e - v) * this.rowHeight));
 		let b = this._renderFillHandle(), x = this._rowDragIndicatorY == null ? "" : n`<div class="ft-row-drop-indicator" style="top:${this._rowDragIndicatorY}px;width:${o + this._prefixWidth}px;"></div>`;
@@ -3875,18 +3935,24 @@ var Y = {
           @keydown=${this._onEditorKeyDown}
           @blur=${() => this._commitEdit()}>
       `;
-		if (t.type === "date") return n`
+		if (t.type === "date") {
+			let e = this._toDateInputValue(i);
+			return n`
         <input class="ft-editor" type="date"
-          .value=${this._toDateInputValue(i)}
+          .value=${e}
           @keydown=${this._onEditorKeyDown}
           @blur=${() => this._commitEdit()}>
       `;
-		if (t.type === "datetime") return n`
+		}
+		if (t.type === "datetime") {
+			let e = this._toDateTimeInputValue(i);
+			return n`
         <input class="ft-editor" type="datetime-local"
-          .value=${this._toDateTimeInputValue(i)}
+          .value=${e}
           @keydown=${this._onEditorKeyDown}
           @blur=${() => this._commitEdit()}>
       `;
+		}
 		if (t.type === "select" && t.options && t.options.length > 0) {
 			let e = t.options, r = typeof e[0] == "string";
 			return n`
@@ -3938,54 +4004,54 @@ var Y = {
 		return isNaN(t.getTime()) ? "" : `${t.getFullYear()}-${String(t.getMonth() + 1).padStart(2, "0")}-${String(t.getDate()).padStart(2, "0")}T${String(t.getHours()).padStart(2, "0")}:${String(t.getMinutes()).padStart(2, "0")}`;
 	}
 };
-J([a({ type: Array })], $.prototype, "columns", void 0), J([a({
+q([a({ type: Array })], $.prototype, "columns", void 0), q([a({
 	type: Array,
 	hasChanged: () => !0
-})], $.prototype, "data", null), J([a({
+})], $.prototype, "data", null), q([a({
 	type: Boolean,
 	attribute: "clear-undo-on-data-change"
-})], $.prototype, "clearUndoOnDataChange", void 0), J([a({
+})], $.prototype, "clearUndoOnDataChange", void 0), q([a({
 	type: Boolean,
 	attribute: "clear-selection-on-data-change"
-})], $.prototype, "clearSelectionOnDataChange", void 0), J([a({
+})], $.prototype, "clearSelectionOnDataChange", void 0), q([a({
 	type: Number,
 	attribute: "row-height"
-})], $.prototype, "rowHeight", void 0), J([a({
+})], $.prototype, "rowHeight", null), q([a({
 	type: Boolean,
 	attribute: "show-row-numbers"
-})], $.prototype, "showRowNumbers", void 0), J([a({
+})], $.prototype, "showRowNumbers", void 0), q([a({
 	type: String,
 	reflect: !0
-})], $.prototype, "theme", void 0), J([a({
+})], $.prototype, "theme", void 0), q([a({
 	type: Number,
 	attribute: "max-rows"
-})], $.prototype, "maxRows", void 0), J([a({ type: Boolean })], $.prototype, "editable", void 0), J([a({
+})], $.prototype, "maxRows", void 0), q([a({ type: Boolean })], $.prototype, "editable", void 0), q([a({
 	type: Boolean,
 	attribute: "show-filters"
-})], $.prototype, "showFilters", void 0), J([a({
+})], $.prototype, "showFilters", void 0), q([a({
 	type: Boolean,
 	attribute: "show-context-menu"
-})], $.prototype, "showContextMenu", void 0), J([a({
+})], $.prototype, "showContextMenu", void 0), q([a({
 	type: Number,
 	attribute: "frozen-rows"
-})], $.prototype, "frozenRows", void 0), J([a({
+})], $.prototype, "frozenRows", void 0), q([a({
 	type: Boolean,
 	reflect: !0
-})], $.prototype, "loading", void 0), J([a({
+})], $.prototype, "loading", void 0), q([a({
 	type: Boolean,
 	attribute: "import-enabled"
-})], $.prototype, "importEnabled", void 0), J([a({ type: Boolean })], $.prototype, "selectable", void 0), J([a({
+})], $.prototype, "importEnabled", void 0), q([a({ type: Boolean })], $.prototype, "selectable", void 0), q([a({
 	type: String,
 	attribute: "selection-mode"
-})], $.prototype, "selectionMode", null), J([a({
+})], $.prototype, "selectionMode", null), q([a({
 	type: String,
 	attribute: "data-mode"
-})], $.prototype, "dataMode", void 0), J([a({
+})], $.prototype, "dataMode", void 0), q([a({
 	type: Object,
 	attribute: "footer-data"
-})], $.prototype, "footerData", void 0), J([a({
+})], $.prototype, "footerData", void 0), q([a({
 	type: Number,
 	attribute: "max-undo-size"
-})], $.prototype, "maxUndoSize", null), J([o()], $.prototype, "_scrollTop", void 0), J([o()], $.prototype, "_scrollLeft", void 0), J([o()], $.prototype, "_viewportHeight", void 0), J([o()], $.prototype, "_viewportWidth", void 0), J([o()], $.prototype, "_activeCell", void 0), J([o()], $.prototype, "_editingCell", void 0), J([o()], $.prototype, "_sortCriteria", void 0), J([o()], $.prototype, "_openFilterKey", void 0), J([o()], $.prototype, "_rowSelectionVersion", void 0), J([o()], $.prototype, "_autocompleteState", void 0), J([o()], $.prototype, "_headerMenu", void 0), J([o()], $.prototype, "_bodyContextMenu", void 0), J([o()], $.prototype, "_commentPopup", void 0), J([o()], $.prototype, "_isDragOver", void 0), $ = J([i("flex-table")], $);
+})], $.prototype, "maxUndoSize", null), q([o()], $.prototype, "_scrollTop", void 0), q([o()], $.prototype, "_scrollLeft", void 0), q([o()], $.prototype, "_viewportHeight", void 0), q([o()], $.prototype, "_viewportWidth", void 0), q([o()], $.prototype, "_activeCell", void 0), q([o()], $.prototype, "_editingCell", void 0), q([o()], $.prototype, "_sortCriteria", void 0), q([o()], $.prototype, "_openFilterKey", void 0), q([o()], $.prototype, "_rowSelectionVersion", void 0), q([o()], $.prototype, "_autocompleteState", void 0), q([o()], $.prototype, "_headerMenu", void 0), q([o()], $.prototype, "_bodyContextMenu", void 0), q([o()], $.prototype, "_commentPopup", void 0), q([o()], $.prototype, "_isDragOver", void 0), $ = q([i("flex-table")], $);
 //#endregion
-export { f as a, x as i, B as n, D as r, $ as t };
+export { f as a, x as i, z as n, D as r, $ as t };

package/dist/flex-table.d.ts

@@ -35,7 +35,23 @@ export declare class FlexTable extends LitElement {
      * (e.g. server-mode grids refreshed via `useODataSource`).
      */
     clearSelectionOnDataChange: boolean;
-    rowHeight: number;
+    /**
+     * 행 높이(px).
+     *
+     * ⚠**이 표는 가상 스크롤이라 행 높이가 CSS 가 아니라 여기서 정해진다** — 행은
+     * `index * rowHeight` 로 절대 배치되고 셀 높이도 인라인으로 박힌다. 그래서 셀 여백을
+     * 아무리 조절해도 행 높이는 따라오지 않는다.
+     *
+     * 소비자가 표를 **문서 스코프 한 규칙**으로 맞출 수 있도록 CSS 토큰
+     * `--ft-row-height` 도 읽는다. 우선순위는 **프로퍼티/속성 > CSS 토큰 > 32px** 이다 —
+     * 명시적으로 지정한 쪽이 항상 이긴다.
+     */
+    get rowHeight(): number;
+    set rowHeight(value: number);
+    /** 프로퍼티·속성으로 **명시 지정된** 값. 지정 전에는 undefined 라 CSS 가 이긴다. */
+    private _rowHeightExplicit?;
+    /** `--ft-row-height` 판독 결과. 판독 전·판독 실패 시 기본값. */
+    private _rowHeightFromCss;
     showRowNumbers: boolean;
     theme: 'light' | 'dark' | undefined;
     maxRows: number;
@@ -256,6 +272,14 @@ export declare class FlexTable extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(): void;
+    /**
+     * `--ft-row-height` 를 판독해 가상화 계산에 넣는다.
+     *
+     * ⚠**`_measureViewport` 안에 두지 않는다** — 그쪽은 ResizeObserver 가 호스트 크기가
+     * 바뀔 때마다 부른다. `getComputedStyle` 은 그 빈도로 돌릴 것이 아니다. 이 토큰은
+     * 문서 스코프의 정적 선언으로 쓰이므로 첫 렌더에 한 번 읽으면 충분하다.
+     */
+    private _readDensityTokens;
     private _updateColOffsets;
     private get visibleColRange();
     protected willUpdate(changedProperties: Map<string, unknown>): void;

package/dist/flex-table.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, r, t as i } from "./flex-table-DNUTTZ1m.js";
+import { a as e, i as t, n, r, t as i } from "./flex-table-DReUAeUh.js";
 export { i as FlexTable, t as RowSelectionState, r as UndoStack, n as exportData, e as renderCell };

package/dist/react.js

@@ -1,4 +1,4 @@
-import { t as e } from "./flex-table-DNUTTZ1m.js";
+import { t as e } from "./flex-table-DReUAeUh.js";
 import t from "react";
 import { createComponent as n } from "@lit/react";
 var r = n({

package/dist/styles/density-tokens.test.d.ts

@@ -0,0 +1 @@
+import '../flex-table';

package/dist/styles/token-derivation.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/flex-table",
-  "version": "0.21.1",
+  "version": "0.23.0",
   "description": "A minimalist, input-centric data grid web component",
   "type": "module",
   "main": "./dist/flex-table.js",
@@ -69,6 +69,7 @@
   },
   "devDependencies": {
     "@lit/react": "^1.0.8",
+    "@types/node": "^26.1.1",
     "@types/react": "^19.2.17",
     "@typescript-eslint/eslint-plugin": "^8.64.0",
     "@typescript-eslint/parser": "^8.64.0",