@qijenchen/design-system 0.1.0-beta.10

package/src/components/DataTable/data-table.css

@@ -0,0 +1,165 @@
+/* DataTable Cell Padding
+   ─────────────────────────────────────────────────────────
+   py = (table-row-height - 1lh) / 2 — 單行時行高 = table-row token
+   px = 12px（固定，不隨 density 變;Phase C 2026-05-05 從 magic 0.75rem
+        提升為 token --table-cell-px,SSOT 給 cellPadding consumer)
+   1lh 在使用時解析，跟隨元素的 computed line-height
+   ───────────────────────────────────────────────────────── */
+
+:root {
+  --table-cell-px: 0.75rem;
+}
+
+[data-table-size="sm"] {
+  --table-cell-py: calc((var(--table-row-sm) - 1lh) / 2);
+}
+
+:root,
+[data-table-size="md"] {
+  --table-cell-py: calc((var(--table-row-md) - 1lh) / 2);
+}
+
+[data-table-size="lg"] {
+  --table-cell-py: calc((var(--table-row-lg) - 1lh) / 2);
+}
+
+/* ────────────────────────────────────────────────────────────
+   DataTable scrollbar canonical(2026-05-07 v15.13 Bug H interim CSS parity)
+   ────────────────────────────────────────────────────────────
+   **Problem**:Windows 原生 V scrollbar (~17px) + 圓角 outer wrapper (`rounded-md
+   overflow-hidden`)→ scrollbar 一半被圓角 mask 裁切;corner(V/H 交叉處)用
+   browser default 灰色,跟 table surface 不一致 → user 看到「scrollbar 溢出 table」。
+   macOS overlay scrollbar(0px)沒這問題。
+
+   **Interim fix**(non-ScrollArea 路徑;ScrollArea migration 是獨立 RFC,本案不上):
+   - V scrollbar 也 customize(width 10px 對稱 H)
+   - `::-webkit-scrollbar-corner` themed(跟 track 同色,消除 cross-OS 視覺差)
+   - Firefox `scrollbar-width: thin` + `scrollbar-color`(已 set,line 55-56)
+
+   **對齊**:AG Grid theme-level scrollbar customization / MUI DataGrid scrollbar override
+   / Polaris IndexTable native+CSS pattern(world-class 派 native+CSS,非 ScrollArea)。
+
+   ── 關鍵 fix(2026-04-30):scope 只給 :horizontal ──
+   原本 `::-webkit-scrollbar { display:block }` 套到雙軸 → V 軸也被強制顯
+   (即使無 overflow),使 content 小時仍見 V 捲軸 + 觸發 ~2px scrollHeight
+   discrepancy 讓 hasVScroll=true。修正:`:horizontal` only,V 軸跟隨
+   browser default(只在 overflow 顯)。
+*/
+[data-datatable-hscroll]::-webkit-scrollbar:horizontal {
+  height: 10px;
+  /* 移 display:block — 讓 browser overflow 時自動顯,不顯示空 bar */
+}
+[data-datatable-hscroll]::-webkit-scrollbar:vertical {
+  width: 10px;
+  /* 對稱 H,Windows native ~17px → 10px,跟 table 圓角 outer 兼容 */
+}
+[data-datatable-hscroll]::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+}
+[data-datatable-hscroll]::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 5px;
+}
+[data-datatable-hscroll]::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+}
+[data-datatable-hscroll]::-webkit-scrollbar-corner {
+  background: var(--scrollbar-track);
+  /* V/H 交叉 corner 跟 track 同色,消除 Windows default 灰格 */
+}
+/* Firefox fallback:standard scrollbar properties only(no `::-webkit-scrollbar` support)。
+   Static thumb color;Firefox 沒 hover pseudo,本來就只能 static。 */
+[data-datatable-hscroll] {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+
+/* Chromium / Safari fix(2026-05-10 user-reported scrollbar-thumb hover 顏色失效)。
+   Root cause(codex Q3.10 deep-dive):Chrome 121+ 支援標準 `scrollbar-color` 後,
+   標準屬性 override `::-webkit-scrollbar-thumb:hover` 的 background → hover rule 失效。
+   Cite: MDN ::-webkit-scrollbar / developer.chrome.com/docs/css-ui/scrollbar-styling
+   Fix: `@supports selector(::-webkit-scrollbar)` 偵測 webkit 引擎 → unset 標準屬性 →
+   webkit pseudo path 接管 → `:hover` rule 重新生效。 */
+@supports selector(::-webkit-scrollbar) {
+  [data-datatable-hscroll] {
+    scrollbar-width: auto;
+    scrollbar-color: auto;
+  }
+}
+
+/* ────────────────────────────────────────────────────────────
+   Cell grid geometry(Phase 9 Issue 8 fix,2026-05-10)
+   ────────────────────────────────────────────────────────────
+   Per codex Layer B 重比稿 verdict + user 「保全 field border 在 cell 內也能完美 SSOT」
+   approval keyword「就接受」:
+
+   **Architecture**:
+   - DataTable owns 4-edge cell grid lines(本 class)
+   - Field naked edit owns its own border(per `field-controls.spec.md` + Field state machine SSOT)
+   - DataTable layer owns hover / selection / range overlay paint(measured rect,4-edge consistent)
+
+   **Implementation**:`box-shadow: inset` 4 邊 1px divider,**不佔 layout space**,**不影響
+   content 起始位置**(per user verbatim「在 cell 內容起始位置不變的前提下」原則):
+   - 之前 cell 用 `border-r border-divider` 只右邊 → hover overlay outline:-1px 只右邊壓
+     cell border,上左下 sub-pixel 不一致(user 抓到「右 1px / 上左下 2px」bug)
+   - 改用 inset box-shadow 4 邊 → cell 4 邊都有 grid divider line → overlay outline -1px
+     在 4 邊都剛好壓 cell border line in-place → 4 邊 SSOT 視覺一致
+
+   Cell wrapper 加此 class 取代 `border-r border-divider`(inline edit + spreadsheet mode)。
+
+   World-class cite:AG Grid javascript-data-grid/cell-editing-start-stop / MUI X Data Grid
+   editing — separation of grid interaction model from editor component。
+   ──────────────────────────────────────────────────────────── */
+.dtCellGrid {
+  /* 2026-05-10 fix v2:只保 right shadow(`inset -1px 0`),bottom 由 row.border-b 接管。
+     2026-05-12 fix v3(user 抓「pinned 分隔線還是 2px,不是說整個 table 格線 1px 嗎?」):
+     每個 panel(left/center/right)最右 cell 不該 paint shadow,因為:
+       - Left panel 最右 cell 旁:panel `border-r border-divider`(data-table.tsx:2169/2213)
+       - Center panel 最右 cell 旁:outer container border(rounded-md)
+       - Right panel 最右 cell 旁:outer container border
+     若 cell shadow 跟 panel/outer border 重疊 = 2px 視覺。
+     Fix v3:`:not(:last-child)` 排除每 panel 最右 cell,讓 panel/outer border 唯一 own
+     panel-boundary 視覺。對齊 spec.md L462 grid line 1px SSOT canonical。 */
+  box-shadow: inset -1px 0 0 var(--divider);
+}
+
+.dtCellGrid:last-child {
+  /* 每 panel 最右 cell:panel border-r 或 outer rounded border 接管。
+     cell shadow set 為 none 避免 2px 重疊。 */
+  box-shadow: none;
+}
+
+/* Phase 9 Issue 1 fix(2026-05-10):range cells bg fill — cell 自身 bg layer
+   (在 cell content 之下),non-overlay。Per codex Q1 verdict 對齊 row selected idiom
+   `--primary-subtle`(`data-table.spec.md` L170-174)。
+   Layer 不再畫 RangeFill div(避免 layer fixed positioned bg 蓋 cell content)。 */
+/* 2026-05-13 V1.6 fix(codex caught medium severity):disabled cell bg dominance — disabled cell
+   included in spreadsheet range 不該被 range fill 蓋過,disabled state visual 必勝。 */
+[data-range-cell]:not([data-cell-disabled="true"]) {
+  background: var(--primary-subtle);
+}
+
+/* First-row / first-column variants:turn transparent top/left into real divider 若 outer container
+   沒有自己 border 提供。當前 DataTable outer 有 rounded border 包整 table → first row top + first col
+   left 視覺由 outer border 接,所以本 class 4 邊全 divider OK 不重複。 */
+
+/* ────────────────────────────────────────────────────────────
+   `__select__` ad-hoc cell-shadow rule retire(2026-05-12 Round 5,user Q5 拍板)+
+   Panel boundary divider canonical(Round 5.2 re-apply per user「你們都同意就做」):
+   ────────────────────────────────────────────────────────────
+   原 `[data-column-id="__select__"]:not(:last-child)` retire — 走 inlineEdit canonical。
+
+   Panel boundary mechanism 用 `box-shadow: inset` 畫 divider 在 panel 內側 1px,**不用**
+   `border-r/l border-divider` outer edge。為何:Windows V scrollbar paint 蓋 outer-edge
+   border(Roadmap demo right panel border invisible per 2026-05-12 user 抓)。inset shadow
+   paint-only 不入 box model,跟 `.dtCellGrid` SSOT pattern 一致。對齊 MUI X column pinning
+   border+shadow option / AG Grid issue #1220。Codex M31 Layer C evaluated YES。
+   ──────────────────────────────────────────────────────────── */
+.dtPanelBoundaryRight {
+  box-shadow: inset -1px 0 0 var(--divider);
+}
+
+.dtPanelBoundaryLeft {
+  box-shadow: inset 1px 0 0 var(--divider);
+}
+