@iyulab/flex-table 0.24.0 → 0.26.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [0.26.0] - 2026-08-20
+
+### Added
+
+- **`ColumnDefinition.headerAlign`** (`'start' | 'center' | 'end'`, default `'start'`). Header
+  label alignment was previously fixed to the left regardless of how the column's own content is
+  rendered. A column whose `renderer` centers its content (an icon-only action column, for
+  example) had no way to make the header label match, so the two visually drifted apart. Setting
+  `headerAlign: 'center'` (or `'end'`) aligns the header text independently of cell content
+  alignment, which the consumer already fully controls via `renderer`.
+
+## [0.25.0] - 2026-08-07
+
+### Added
+
+- **`--ft-font-size` now reads `var(--u-density, 14px)`.** When a consumer sets the design
+  system's `--u-density` switch on an ancestor, the table's base font size (and everything
+  derived from it) follows automatically. Unset, behavior is unchanged.
+
+### Fixed
+
+- **Hovering an odd (striped) row produced no visible feedback in dark mode.** Odd rows sit on
+  the raised-surface background, and the hover style used the same global hover token that raised
+  happened to equal in dark — so the row simply didn't respond. Odd-row hover now reads a
+  dedicated raised-surface hover token when the design system sheet provides one, falling back to
+  the previous behavior otherwise. Even rows are unaffected.
+
 ## [0.24.0] - 2026-08-05
 
 ### Changed

package/README.md

@@ -4,6 +4,12 @@ A lightweight, schema-agnostic data grid web component built with [Lit](https://
 
 Designed for effortless data input and crystal-clear visibility. Bridges the gap between spreadsheet freedom and database structural integrity.
 
+**`flex-table` vs. `URichTable`** (`@iyulab/data-components`): both can consume external data
+sources such as OData — the choice is about scale and interaction, not the data source.
+
+- **`flex-table`** — large datasets, cell-level editing, spreadsheet-grade interaction
+- **`URichTable`** — small-to-medium datasets, row-level CRUD, selection/filter-focused UX
+
 ## Install
 
 ```bash

package/dist/{flex-table-D-OLUYir.js → flex-table-BSxnKOL3.js}

@@ -5,7 +5,8 @@ var s = t`
   /* --- Theme Variables (Light defaults) --- */
   :host {
     --ft-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    --ft-font-size: 14px;
+    /* 밀도 스위치 진입점 — components 의 --u-density 를 그대로 읽는다(묶음 결정 DL-253-1). */
+    --ft-font-size: var(--u-density, 14px);
 
     /* --- 치수·위계 축 (기본값 = 종전 렌더값) ---
        이 표는 가상 스크롤이라 행 높이가 **JS 로 계산된다**(index * rowHeight).
@@ -29,6 +30,13 @@ var s = t`
     --ft-row-even-bg: var(--u-bg-color, #FFFFFF);
     --ft-row-odd-bg: var(--u-bg-color-raised, #FAFAFA);
     --ft-row-hover-bg: var(--u-bg-color-hover, #F5F5F5);
+    /* ★홀수 행은 --ft-row-odd-bg(=raised) 위에 앉는다 — 짝수 행과 같은
+       --ft-row-hover-bg(=전역 hover) 를 쓰면 다크에서 raised==hover 라 «올려도 아무
+       일도 안 일어난다»(§D-14, L2-11-1). --u-bg-color-raised-hover 는 다크에서
+       color-mix 로 새로 계산되고, 라이트에서는 기존 hover 에 별칭된다(components
+       light.css) — 두 테마 다 늘 선언돼 있으므로 폴백 리터럴은 시트 미로드 시에만
+       쓰인다(다른 토큰들과 같은 관례). */
+    --ft-row-odd-hover-bg: var(--u-bg-color-raised-hover, #F5F5F5);
     --ft-active-color: var(--u-primary-color, #1976D2);
     --ft-selection-bg: var(--u-primary-bg-color, #E3F2FD);
     --ft-bool-color: var(--u-primary-color, #1976D2);
@@ -72,6 +80,7 @@ var s = t`
       --ft-row-even-bg: var(--u-bg-color, #FFFFFF);
       --ft-row-odd-bg: var(--u-bg-color-raised, #FAFAFA);
       --ft-row-hover-bg: var(--u-bg-color-hover, #F5F5F5);
+      --ft-row-odd-hover-bg: var(--u-bg-color-raised-hover, #F5F5F5);
       --ft-active-color: var(--u-primary-color, #1976D2);
       --ft-selection-bg: var(--u-primary-bg-color, #E3F2FD);
       --ft-bool-color: var(--u-primary-color, #1976D2);
@@ -92,6 +101,7 @@ var s = t`
     --ft-row-even-bg: var(--u-bg-color, #FFFFFF);
     --ft-row-odd-bg: var(--u-bg-color-raised, #FAFAFA);
     --ft-row-hover-bg: var(--u-bg-color-hover, #F5F5F5);
+    --ft-row-odd-hover-bg: var(--u-bg-color-raised-hover, #F5F5F5);
     --ft-active-color: var(--u-primary-color, #1976D2);
     --ft-selection-bg: var(--u-primary-bg-color, #E3F2FD);
     --ft-bool-color: var(--u-primary-color, #1976D2);
@@ -143,6 +153,9 @@ var s = t`
   .ft-header-cell.ft-sortable { cursor: pointer; }
   .ft-header-cell.ft-sortable:hover { background: var(--ft-header-hover-bg); }
 
+  .ft-header-cell.ft-header-align-center { justify-content: center; }
+  .ft-header-cell.ft-header-align-end { justify-content: flex-end; }
+
   .ft-resize-handle {
     position: absolute;
     right: 0; top: 0; bottom: 0;
@@ -241,7 +254,8 @@ var s = t`
 
   .ft-row-even .ft-cell { background: var(--ft-row-even-bg); }
   .ft-row-odd .ft-cell { background: var(--ft-row-odd-bg); }
-  .ft-row:hover .ft-cell { background: var(--ft-row-hover-bg); }
+  .ft-row-even:hover .ft-cell { background: var(--ft-row-hover-bg); }
+  .ft-row-odd:hover .ft-cell { background: var(--ft-row-odd-hover-bg); }
 
   .ft-cell.ft-active {
     outline: 2px solid var(--ft-active-color);
@@ -407,7 +421,8 @@ var s = t`
   }
 
   .ft-row-odd .ft-row-num { background: var(--ft-row-odd-bg); }
-  .ft-row:hover .ft-row-num { background: var(--ft-row-hover-bg); }
+  .ft-row-even:hover .ft-row-num { background: var(--ft-row-hover-bg); }
+  .ft-row-odd:hover .ft-row-num { background: var(--ft-row-odd-hover-bg); }
 
   .ft-row-num:hover {
     background: var(--ft-header-hover-bg);
@@ -425,7 +440,8 @@ var s = t`
 
   .ft-row-even .ft-cell.ft-pinned { background: var(--ft-row-even-bg); }
   .ft-row-odd .ft-cell.ft-pinned { background: var(--ft-row-odd-bg); }
-  .ft-row:hover .ft-cell.ft-pinned { background: var(--ft-row-hover-bg); }
+  .ft-row-even:hover .ft-cell.ft-pinned { background: var(--ft-row-hover-bg); }
+  .ft-row-odd:hover .ft-cell.ft-pinned { background: var(--ft-row-odd-hover-bg); }
   .ft-cell.ft-pinned.ft-selected { background: var(--ft-selection-bg) !important; }
 
   /* --- Filter UI --- */
@@ -576,7 +592,8 @@ var s = t`
   }
 
   .ft-row-odd .ft-checkbox-cell { background: var(--ft-row-odd-bg); }
-  .ft-row:hover .ft-checkbox-cell { background: var(--ft-row-hover-bg); }
+  .ft-row-even:hover .ft-checkbox-cell { background: var(--ft-row-hover-bg); }
+  .ft-row-odd:hover .ft-checkbox-cell { background: var(--ft-row-odd-hover-bg); }
   .ft-row-selected .ft-checkbox-cell { background: var(--ft-selection-bg); }
   .ft-row-selected .ft-cell { background: var(--ft-selection-bg) !important; }
   .ft-row-selected .ft-row-num { background: var(--ft-selection-bg); }
@@ -1228,12 +1245,13 @@ function O(e) {
 		}
 		if (t[i] === "\"") {
 			let e = "";
-			for (i++; i < a;) if (t[i] === "\"") if (i + 1 < a && t[i + 1] === "\"") e += "\"", i += 2;
-			else {
-				i++;
-				break;
-			}
-			else e += t[i], i++;
+			for (i++; i < a;) if (t[i] === "\"") {
+				if (i + 1 < a && t[i + 1] === "\"") e += "\"", i += 2;
+				else {
+					i++;
+					break;
+				}
+			} else e += t[i], i++;
 			r.push(e), i < a && t[i] === "	" ? i++ : i < a && t[i] === "\n" && (n.push(r), r = [], i++);
 		} else {
 			let e = "";
@@ -1520,7 +1538,7 @@ async function xe(e) {
 	};
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.142.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.146.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);
@@ -2778,7 +2796,9 @@ var J = {
 		let i = e.sortable !== !1, a = this._sortCriteria.find((t) => t.key === e.key), o = this._sortCriteria.length > 1 ? this._sortCriteria.findIndex((t) => t.key === e.key) : -1, s = this._filters.some((t) => t.key === e.key), c = e.pinned === "left", l = e.pinned === "right", u = [
 			"ft-header-cell",
 			i ? "ft-sortable" : "",
-			c || l ? "ft-pinned" : ""
+			c || l ? "ft-pinned" : "",
+			e.headerAlign === "center" ? "ft-header-align-center" : "",
+			e.headerAlign === "end" ? "ft-header-align-end" : ""
 		].filter(Boolean).join(" "), d = i ? a ? a.direction === "asc" ? "ascending" : "descending" : "none" : void 0, f = this._getColWidth(e), p = this.headerHeight, m = this._colLeftOffsets[t] ?? 0, h;
 		h = c ? `position: absolute; top: 0; left: ${this._scrollLeft + this._getPinnedLeft(t)}px; width: ${f}px; height: ${p}px; z-index: 4;` : l ? `position: absolute; top: 0; right: ${-this._scrollLeft + this._getPinnedRight(t)}px; width: ${f}px; height: ${p}px; z-index: 4;` : `left: ${m}px; width: ${f}px; height: ${p}px;`;
 		let g = this._colDrag?.active && this._colDrag.colIndex === t, _ = [...u.split(" "), g ? "ft-col-dragging" : ""].filter(Boolean).join(" "), v = this.columns, y = v.findIndex((t) => t.key === e.key), b = [];

package/dist/flex-table.js

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

package/dist/models/types.d.ts

@@ -59,6 +59,13 @@ export interface ColumnDefinition<T = DataRow> {
     hidden?: boolean;
     /** Whether the column is sortable (default: true) */
     sortable?: boolean;
+    /**
+     * Horizontal alignment of the header label (default: 'start').
+     * Independent of cell content alignment — a consumer centering cell content
+     * via a custom `renderer` (e.g. an icon-only action column) sets this to
+     * 'center' so the header visually matches.
+     */
+    headerAlign?: 'start' | 'center' | 'end';
     /** Custom cell renderer — overrides built-in type rendering */
     renderer?: CellRenderer<T>;
     /** Whether the column is editable (default: true — follows global editable setting) */

package/dist/react.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/flex-table",
-  "version": "0.24.0",
+  "version": "0.26.0",
   "description": "A minimalist, input-centric data grid web component",
   "type": "module",
   "main": "./dist/flex-table.js",