@operato/data-grist 10.10.0 → 10.10.2

package/dist/src/configure/column-builder.js

@@ -21,15 +21,14 @@ export const buildColumn = (column) => {
     var { name, header, record, handlers, label, filter } = compiled;
     /* header */
     /*
-     * 이름을 글자로도 남긴다 — renderer 하나만 두면 이름이 여기서 사라진다.
+     * Keep the name as text too — with only a renderer, the name disappears here.
      *
-     * 설정이 header: '상태' 처럼 문자열로 들어와도 여기를 지나면 () => '상태' 한 개만 남는다.
-     * 그 함수가 돌려주는 것은 화면에 그릴 조각(대개 lit template)이라 되읽을 수 없다. 그래서 화면 밖에서
-     * 이름이 필요한 곳 — 스크린 리더가 읽을 이름, filter 입력칸의 이름 — 이 이름을 구할 데가 없었고,
-     * 결국 각자 다시 적어 두는 수밖에 없었다. 한 사실에 출처가 둘이 되면 header 를 고쳐도 나머지가
-     * 그대로 남는다.
+     * `header: 'Status'` leaves this block as `() => 'Status'` and nothing else. That function returns
+     * a lit template, which cannot be read back, so everything that needs the name outside of
+     * rendering — accessible names, header filter inputs — had nowhere to get it and ended up
+     * spelling it out again. Two sources for one fact means editing `header` leaves the rest behind.
      *
-     * 그리는 것과 이름을 함께 남긴다. columnText() 가 이것을 읽는다.
+     * Store what to draw and what it is called. `columnText()` reads this.
      */
     if (typeof header == 'string') {
         compiled.header = {

package/dist/src/configure/column-builder.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-builder.js","sourceRoot":"","sources":["../../../src/configure/column-builder.ts"],"names":[],"mappings":"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","sourcesContent":["import { FilterConfigObject, FilterOperator } from '../index.js'\nimport { NOOP } from '../const.js'\nimport { getEditor } from '../editors/index.js'\nimport { generateGutterColumn } from '../gutters/index.js'\nimport { getGristEventHandler } from '../handlers/index.js'\nimport { getRenderer } from '../renderers/index.js'\nimport { ColumnConfig } from '../types.js'\n\n/**\n * 값을 오른쪽에 붙이는 칸.\n *\n * 자릿수가 세로로 맞아야 값을 견줄 수 있다. 왼쪽으로 두면 24 와 1,200 이 시작점만 같고 끝이 어긋나서\n * 어느 쪽이 큰지 눈으로 읽히지 않는다.\n *\n * progress 는 뺀다 — 막대로 그리므로 정렬이 뜻을 갖지 않는다.\n */\nconst RIGHT_ALIGNED_TYPES = ['integer', 'float', 'number']\n\nexport const buildColumn = (column: any): ColumnConfig => {\n  var compiled: ColumnConfig = { ...column }\n\n  if (column.type == 'gutter') {\n    compiled = generateGutterColumn(column)\n  }\n\n  var { name, header, record, handlers, label, filter } = compiled\n\n  /* header */\n\n  /*\n   * 이름을 글자로도 남긴다 — renderer 하나만 두면 이름이 여기서 사라진다.\n   *\n   * 설정이 header: '상태' 처럼 문자열로 들어와도 여기를 지나면 () => '상태' 한 개만 남는다.\n   * 그 함수가 돌려주는 것은 화면에 그릴 조각(대개 lit template)이라 되읽을 수 없다. 그래서 화면 밖에서\n   * 이름이 필요한 곳 — 스크린 리더가 읽을 이름, filter 입력칸의 이름 — 이 이름을 구할 데가 없었고,\n   * 결국 각자 다시 적어 두는 수밖에 없었다. 한 사실에 출처가 둘이 되면 header 를 고쳐도 나머지가\n   * 그대로 남는다.\n   *\n   * 그리는 것과 이름을 함께 남긴다. columnText() 가 이것을 읽는다.\n   */\n  if (typeof header == 'string') {\n    compiled.header = {\n      text: header,\n      renderer: () => header\n    }\n  }\n\n  if (typeof compiled.header?.renderer == 'string') {\n    const text = compiled.header.renderer\n    compiled.header = {\n      ...compiled.header,\n      text,\n      renderer: () => text\n    }\n  }\n\n  /* label */\n  if (label) {\n    let type = typeof label\n    switch (type) {\n      case 'boolean':\n        compiled.label = {\n          text: compiled.header?.text || name,\n          renderer: compiled.header?.renderer || (() => name)\n        }\n        break\n      case 'string':\n        compiled.label = {\n          text: label as string,\n          renderer: () => label\n        }\n        break\n      default:\n        compiled.label = label\n    }\n  } else {\n    compiled.label = false\n  }\n\n  /*\n   * record\n   */\n  var { renderer: recordRenderer, editor, editable, classifier } = record || {}\n\n  recordRenderer = getRenderer(recordRenderer || column.type)\n\n  if (editable !== false && typeof editor !== 'function') {\n    editor = getEditor(column.type)\n  }\n\n  if (typeof classifier !== 'function') {\n    classifier = NOOP\n  }\n\n  compiled.record = {\n    /*\n     * 숫자 칸의 기본 정렬. 화면이 align 을 주면 그것이 이긴다 — 자릿수를 견줄 값이 아닌 숫자\n     * (전화번호 · 우편번호 같은 것)는 화면이 따로 정한다.\n     *\n     * 머리글도 따라온다. data-grid-header 가 열 제목을 그릴 때 record.align 을 본다.\n     */\n    ...(RIGHT_ALIGNED_TYPES.includes(column.type) ? { align: 'right' } : {}),\n    ...record,\n    classifier,\n    renderer: recordRenderer,\n    editor\n  }\n\n  /* filter */\n  if (filter) {\n    let type = typeof filter\n    switch (type) {\n      case 'boolean':\n        compiled.filter = {\n          type: column.type,\n          operator: 'eq'\n        }\n        break\n      case 'string':\n        compiled.filter = {\n          type: column.type,\n          operator: filter as FilterOperator\n        }\n        break\n      default:\n        compiled.filter = {\n          //@ts-ignore\n          type: column.type,\n          operator: 'eq',\n          ...(filter as FilterConfigObject)\n        }\n    }\n  }\n\n  /* handler */\n  var { click, dblclick, focus, contextmenu } = handlers || {}\n\n  compiled.handlers = {\n    click: click && getGristEventHandler(click),\n    dblclick: dblclick && getGristEventHandler(dblclick),\n    focus: focus && getGristEventHandler(focus),\n    contextmenu: contextmenu && getGristEventHandler(contextmenu)\n  }\n\n  return compiled\n}\n"]}
+{"version":3,"file":"column-builder.js","sourceRoot":"","sources":["../../../src/configure/column-builder.ts"],"names":[],"mappings":"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","sourcesContent":["import { FilterConfigObject, FilterOperator } from '../index.js'\nimport { NOOP } from '../const.js'\nimport { getEditor } from '../editors/index.js'\nimport { generateGutterColumn } from '../gutters/index.js'\nimport { getGristEventHandler } from '../handlers/index.js'\nimport { getRenderer } from '../renderers/index.js'\nimport { ColumnConfig } from '../types.js'\n\n/**\n * 값을 오른쪽에 붙이는 칸.\n *\n * 자릿수가 세로로 맞아야 값을 견줄 수 있다. 왼쪽으로 두면 24 와 1,200 이 시작점만 같고 끝이 어긋나서\n * 어느 쪽이 큰지 눈으로 읽히지 않는다.\n *\n * progress 는 뺀다 — 막대로 그리므로 정렬이 뜻을 갖지 않는다.\n */\nconst RIGHT_ALIGNED_TYPES = ['integer', 'float', 'number']\n\nexport const buildColumn = (column: any): ColumnConfig => {\n  var compiled: ColumnConfig = { ...column }\n\n  if (column.type == 'gutter') {\n    compiled = generateGutterColumn(column)\n  }\n\n  var { name, header, record, handlers, label, filter } = compiled\n\n  /* header */\n\n  /*\n   * Keep the name as text too — with only a renderer, the name disappears here.\n   *\n   * `header: 'Status'` leaves this block as `() => 'Status'` and nothing else. That function returns\n   * a lit template, which cannot be read back, so everything that needs the name outside of\n   * rendering — accessible names, header filter inputs — had nowhere to get it and ended up\n   * spelling it out again. Two sources for one fact means editing `header` leaves the rest behind.\n   *\n   * Store what to draw and what it is called. `columnText()` reads this.\n   */\n  if (typeof header == 'string') {\n    compiled.header = {\n      text: header,\n      renderer: () => header\n    }\n  }\n\n  if (typeof compiled.header?.renderer == 'string') {\n    const text = compiled.header.renderer\n    compiled.header = {\n      ...compiled.header,\n      text,\n      renderer: () => text\n    }\n  }\n\n  /* label */\n  if (label) {\n    let type = typeof label\n    switch (type) {\n      case 'boolean':\n        compiled.label = {\n          text: compiled.header?.text || name,\n          renderer: compiled.header?.renderer || (() => name)\n        }\n        break\n      case 'string':\n        compiled.label = {\n          text: label as string,\n          renderer: () => label\n        }\n        break\n      default:\n        compiled.label = label\n    }\n  } else {\n    compiled.label = false\n  }\n\n  /*\n   * record\n   */\n  var { renderer: recordRenderer, editor, editable, classifier } = record || {}\n\n  recordRenderer = getRenderer(recordRenderer || column.type)\n\n  if (editable !== false && typeof editor !== 'function') {\n    editor = getEditor(column.type)\n  }\n\n  if (typeof classifier !== 'function') {\n    classifier = NOOP\n  }\n\n  compiled.record = {\n    /*\n     * 숫자 칸의 기본 정렬. 화면이 align 을 주면 그것이 이긴다 — 자릿수를 견줄 값이 아닌 숫자\n     * (전화번호 · 우편번호 같은 것)는 화면이 따로 정한다.\n     *\n     * 머리글도 따라온다. data-grid-header 가 열 제목을 그릴 때 record.align 을 본다.\n     */\n    ...(RIGHT_ALIGNED_TYPES.includes(column.type) ? { align: 'right' } : {}),\n    ...record,\n    classifier,\n    renderer: recordRenderer,\n    editor\n  }\n\n  /* filter */\n  if (filter) {\n    let type = typeof filter\n    switch (type) {\n      case 'boolean':\n        compiled.filter = {\n          type: column.type,\n          operator: 'eq'\n        }\n        break\n      case 'string':\n        compiled.filter = {\n          type: column.type,\n          operator: filter as FilterOperator\n        }\n        break\n      default:\n        compiled.filter = {\n          //@ts-ignore\n          type: column.type,\n          operator: 'eq',\n          ...(filter as FilterConfigObject)\n        }\n    }\n  }\n\n  /* handler */\n  var { click, dblclick, focus, contextmenu } = handlers || {}\n\n  compiled.handlers = {\n    click: click && getGristEventHandler(click),\n    dblclick: dblclick && getGristEventHandler(dblclick),\n    focus: focus && getGristEventHandler(focus),\n    contextmenu: contextmenu && getGristEventHandler(contextmenu)\n  }\n\n  return compiled\n}\n"]}

package/dist/src/data-grid/data-grid-body-style.js

@@ -24,11 +24,11 @@ export const dataGridBodyStyle = css `
   }
 
   /*
-   * 줄 감싸개 — 상자를 만들지 않는다.
+   * Row wrapper — generates no box.
    *
-   * role=row 를 담기 위한 요소일 뿐이라 배치에는 끼어들면 안 된다. display: contents 면 이 요소는
-   * 상자를 만들지 않고 자식이 그대로 바깥 grid 의 항목이 된다 — 열 폭 · 고정 열 · 묶음 머리의
-   * grid-column 배치가 그대로다.
+   * It exists only to carry role=row, so it must stay out of layout. With display: contents the
+   * element produces no box and its children remain items of the outer grid — column widths, fixed
+   * columns and the grid-column placement of group headers are untouched.
    */
   div[grid-row] {
     display: contents;

package/dist/src/data-grid/data-grid-body-style.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-grid-body-style.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-body-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsJnC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const dataGridBodyStyle = css`\n  :host {\n    display: grid;\n    grid-template-columns: var(--grid-template-columns);\n    grid-auto-rows: var(--grid-record-height, min-content);\n\n    overflow: auto;\n    /*\n     * 세로 스크롤바 자리를 늘 비워 둔다 — 머리와 가로 스크롤 범위를 같게 만들기 위해서다.\n     *\n     * 머리는 overflow: hidden 이라 스크롤바에 자리를 내주지 않고, 몸은 긴 목록에서 스크롤바 폭만큼\n     * 좁아진다. 그래서 갈 수 있는 거리가 몸이 그만큼 더 길었고, 오른쪽 끝에서 몸만 더 갔다.\n     * 확인해 보니 정확히 --scrollbar-width 만큼(5px)이었다.\n     *\n     * 자리를 늘 비워 두면 목록 길이와 무관하게 두 폭이 같다. 목록이 길어질 때 열이 움찔하는 것도\n     * 함께 없어진다 — 스크롤바가 생기는 순간 폭이 바뀌지 않는다.\n     */\n    scrollbar-gutter: stable;\n    outline: none;\n    color: var(--grid-record-color);\n    position: relative;\n    border-bottom: var(--grid-body-bottom-border);\n  }\n\n  /*\n   * 줄 감싸개 — 상자를 만들지 않는다.\n   *\n   * role=row 를 담기 위한 요소일 뿐이라 배치에는 끼어들면 안 된다. display: contents 면 이 요소는\n   * 상자를 만들지 않고 자식이 그대로 바깥 grid 의 항목이 된다 — 열 폭 · 고정 열 · 묶음 머리의\n   * grid-column 배치가 그대로다.\n   */\n  div[grid-row] {\n    display: contents;\n  }\n\n  ox-grid-field[odd] {\n    background-color: var(--grid-record-odd-background-color);\n  }\n\n  ox-grid-field[disabled] {\n    background-color: var(--grid-record-disabled-background-color, var(--grid-record-background-color));\n    color: var(--grid-record-disabled-color, var(--grid-record-color));\n    opacity: var(--grid-record-disabled-opacity, 1);\n  }\n  ox-grid-field[odd][disabled] {\n    background-color: var(\n      --grid-odd-record-disabled-background-color,\n      var(--grid-record-disabled-background-color, var(--grid-record-odd-background-color))\n    );\n    color: var(--grid-odd-record-disabled-color, var(--grid-record-disabled-color, var(--grid-record-color)));\n    opacity: var(--grid-odd-record-disabled-opacity, var(--grid-record-disabled-opacity, 1));\n  }\n\n  ox-grid-field[selected-row] {\n    background-color: var(--grid-record-selected-background-color);\n    color: var(--grid-record-selected-color);\n  }\n\n  /*\n   * 마우스가 지나는 줄.\n   *\n   * 고른 줄보다 **훨씬 옅다.** 지나는 것은 사실이 아니고 눈이 어디 있는지 알려 주는 것뿐이라, 고른\n   * 줄과 같은 무게로 그리면 무엇이 골라졌는지 헷갈린다. 그래서 고른 줄 규칙 뒤에 둔다 — 둘이 겹칠\n   * 때는 고른 쪽이 이겨야 하므로 색을 옅게 두고 순서로 다투지 않는다.\n   *\n   * 값은 표가 정한다. 고치는 표에서는 비운다(data-grid.ts) — 거기서는 점선 셀 테두리가 이미 자리를\n   * 말하고, 둘이 함께 있으면 시끄럽다.\n   */\n  @media (hover: hover) {\n    ox-grid-field[hovered-row]:not([selected-row]) {\n      background-color: var(--grid-record-hover-background-color, transparent);\n    }\n  }\n\n  ox-grid-field[focused-row] {\n    box-shadow: var(--grid-record-focused-box-shadow);\n    font-weight: bold;\n    color: var(--grid-record-focused-color);\n    background-image: var(--focused-background-image);\n    background-blend-mode: darken;\n  }\n\n  /*\n   * 초점 셀 표식 — border 가 아니라 outline 으로 그린다.\n   *\n   * border 로 그리면 두 가지가 깨진다.\n   *   · 네 면 테두리가 셀 크기를 바꿔 줄이 어긋난다\n   *   · 아래 면이 **줄을 나누는 선 자리**를 차지해, 그 셀만 줄 선이 사라진다\n   *\n   * outline 은 자리를 차지하지 않는다. outline-offset: -1px 로 안쪽에 그려 옆 셀과 겹치지 않게 한다.\n   * 표식을 감추고 싶은 화면은 토큰을 none 으로 두면 되고, 그래도 줄 선은 남는다.\n   */\n  ox-grid-field[focused] {\n    outline: var(--grid-record-focused-cell-border);\n    outline-offset: -1px;\n  }\n\n  ox-grid-field[emphasized-row],\n  ox-grid-field[emphasized-row][focused] {\n    background-color: var(--grid-record-emphasized-background-color);\n    color: var(--grid-record-emphasized-color);\n  }\n\n  ox-grid-field[editing] {\n    background-color: var(--grid-record-editing-background-color);\n  }\n\n  @media print {\n    :host {\n      grid-template-columns: var(--grid-template-print-columns);\n    }\n    ox-grid-field[focused] {\n      outline: none;\n    }\n\n    ox-grid-field[selected-row] {\n      background-color: transparent;\n    }\n\n    /* 종이에는 마우스가 없다. */\n    ox-grid-field[hovered-row] {\n      background-color: transparent;\n    }\n\n    ox-grid-field[emphasized-row] {\n      background-color: transparent;\n      color: initial;\n    }\n\n    ox-grid-field[focused-row] {\n      background-color: transparent;\n      color: initial;\n    }\n\n    ox-grid-field[editing] {\n      background-color: transparent;\n    }\n  }\n\n  @media (prefers-color-scheme: dark) {\n    ox-grid-field[focused-row] {\n      background-blend-mode: lighten;\n    }\n  }\n\n  @media (prefers-color-scheme: light) {\n    ox-grid-field[focused-row] {\n      background-blend-mode: darken;\n    }\n  }\n`\n"]}
+{"version":3,"file":"data-grid-body-style.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-body-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsJnC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const dataGridBodyStyle = css`\n  :host {\n    display: grid;\n    grid-template-columns: var(--grid-template-columns);\n    grid-auto-rows: var(--grid-record-height, min-content);\n\n    overflow: auto;\n    /*\n     * 세로 스크롤바 자리를 늘 비워 둔다 — 머리와 가로 스크롤 범위를 같게 만들기 위해서다.\n     *\n     * 머리는 overflow: hidden 이라 스크롤바에 자리를 내주지 않고, 몸은 긴 목록에서 스크롤바 폭만큼\n     * 좁아진다. 그래서 갈 수 있는 거리가 몸이 그만큼 더 길었고, 오른쪽 끝에서 몸만 더 갔다.\n     * 확인해 보니 정확히 --scrollbar-width 만큼(5px)이었다.\n     *\n     * 자리를 늘 비워 두면 목록 길이와 무관하게 두 폭이 같다. 목록이 길어질 때 열이 움찔하는 것도\n     * 함께 없어진다 — 스크롤바가 생기는 순간 폭이 바뀌지 않는다.\n     */\n    scrollbar-gutter: stable;\n    outline: none;\n    color: var(--grid-record-color);\n    position: relative;\n    border-bottom: var(--grid-body-bottom-border);\n  }\n\n  /*\n   * Row wrapper — generates no box.\n   *\n   * It exists only to carry role=row, so it must stay out of layout. With display: contents the\n   * element produces no box and its children remain items of the outer grid — column widths, fixed\n   * columns and the grid-column placement of group headers are untouched.\n   */\n  div[grid-row] {\n    display: contents;\n  }\n\n  ox-grid-field[odd] {\n    background-color: var(--grid-record-odd-background-color);\n  }\n\n  ox-grid-field[disabled] {\n    background-color: var(--grid-record-disabled-background-color, var(--grid-record-background-color));\n    color: var(--grid-record-disabled-color, var(--grid-record-color));\n    opacity: var(--grid-record-disabled-opacity, 1);\n  }\n  ox-grid-field[odd][disabled] {\n    background-color: var(\n      --grid-odd-record-disabled-background-color,\n      var(--grid-record-disabled-background-color, var(--grid-record-odd-background-color))\n    );\n    color: var(--grid-odd-record-disabled-color, var(--grid-record-disabled-color, var(--grid-record-color)));\n    opacity: var(--grid-odd-record-disabled-opacity, var(--grid-record-disabled-opacity, 1));\n  }\n\n  ox-grid-field[selected-row] {\n    background-color: var(--grid-record-selected-background-color);\n    color: var(--grid-record-selected-color);\n  }\n\n  /*\n   * 마우스가 지나는 줄.\n   *\n   * 고른 줄보다 **훨씬 옅다.** 지나는 것은 사실이 아니고 눈이 어디 있는지 알려 주는 것뿐이라, 고른\n   * 줄과 같은 무게로 그리면 무엇이 골라졌는지 헷갈린다. 그래서 고른 줄 규칙 뒤에 둔다 — 둘이 겹칠\n   * 때는 고른 쪽이 이겨야 하므로 색을 옅게 두고 순서로 다투지 않는다.\n   *\n   * 값은 표가 정한다. 고치는 표에서는 비운다(data-grid.ts) — 거기서는 점선 셀 테두리가 이미 자리를\n   * 말하고, 둘이 함께 있으면 시끄럽다.\n   */\n  @media (hover: hover) {\n    ox-grid-field[hovered-row]:not([selected-row]) {\n      background-color: var(--grid-record-hover-background-color, transparent);\n    }\n  }\n\n  ox-grid-field[focused-row] {\n    box-shadow: var(--grid-record-focused-box-shadow);\n    font-weight: bold;\n    color: var(--grid-record-focused-color);\n    background-image: var(--focused-background-image);\n    background-blend-mode: darken;\n  }\n\n  /*\n   * 초점 셀 표식 — border 가 아니라 outline 으로 그린다.\n   *\n   * border 로 그리면 두 가지가 깨진다.\n   *   · 네 면 테두리가 셀 크기를 바꿔 줄이 어긋난다\n   *   · 아래 면이 **줄을 나누는 선 자리**를 차지해, 그 셀만 줄 선이 사라진다\n   *\n   * outline 은 자리를 차지하지 않는다. outline-offset: -1px 로 안쪽에 그려 옆 셀과 겹치지 않게 한다.\n   * 표식을 감추고 싶은 화면은 토큰을 none 으로 두면 되고, 그래도 줄 선은 남는다.\n   */\n  ox-grid-field[focused] {\n    outline: var(--grid-record-focused-cell-border);\n    outline-offset: -1px;\n  }\n\n  ox-grid-field[emphasized-row],\n  ox-grid-field[emphasized-row][focused] {\n    background-color: var(--grid-record-emphasized-background-color);\n    color: var(--grid-record-emphasized-color);\n  }\n\n  ox-grid-field[editing] {\n    background-color: var(--grid-record-editing-background-color);\n  }\n\n  @media print {\n    :host {\n      grid-template-columns: var(--grid-template-print-columns);\n    }\n    ox-grid-field[focused] {\n      outline: none;\n    }\n\n    ox-grid-field[selected-row] {\n      background-color: transparent;\n    }\n\n    /* 종이에는 마우스가 없다. */\n    ox-grid-field[hovered-row] {\n      background-color: transparent;\n    }\n\n    ox-grid-field[emphasized-row] {\n      background-color: transparent;\n      color: initial;\n    }\n\n    ox-grid-field[focused-row] {\n      background-color: transparent;\n      color: initial;\n    }\n\n    ox-grid-field[editing] {\n      background-color: transparent;\n    }\n  }\n\n  @media (prefers-color-scheme: dark) {\n    ox-grid-field[focused-row] {\n      background-blend-mode: lighten;\n    }\n  }\n\n  @media (prefers-color-scheme: light) {\n    ox-grid-field[focused-row] {\n      background-blend-mode: darken;\n    }\n  }\n`\n"]}

package/dist/src/data-grid/data-grid-body.d.ts

@@ -14,10 +14,10 @@ export declare class DataGridBody extends LitElement {
         column: number;
     };
     /**
-     * 이 판의 첫 줄이 표 전체에서 몇 번째인가(1부터).
+     * Where this body's first row sits in the whole table, counting from 1.
      *
-     * 머리줄 수와 페이지 자리를 합한 값이라 ox-grid 가 계산해서 내려 준다 — 여기서 다시 세면
-     * 머리가 한 줄인지 두 줄인지(묶음 머리)를 몸이 알아야 한다.
+     * It combines header row count and page offset, so ox-grid computes it and passes it down —
+     * working it out here would mean the body has to know whether the header is one row or two.
      */
     ariaRowIndexBase: number;
     editTarget: {
@@ -55,13 +55,13 @@ export declare class DataGridBody extends LitElement {
     /** 지나는 줄을 옮긴다. 같은 줄이면 아무것도 하지 않는다. */
     private setHoveredRow;
     /**
-     * 줄 하나 — 그 줄의 칸을 담고 있는 요소.
+     * One row — the element holding that row's cells.
      *
-     * ── 자식을 세지 않는다 (2026-09-06) ────────────────────────────────────
-     * 전에는 `renderRoot.children` 을 `줄번호 * (칸수 + 1)` 로 셌다. 「+1」은 남는 폭을 메우는
-     * 빈 칸이고, 그 앞의 주석은 그 셈이 왜 필요한지를 설명하고 있었다 — 셈이 맞아야만 도는 코드였다.
+     * This used to index `renderRoot.children` at `rowIndex * (columns + 1)`, where the +1 was the
+     * width filler; the comment above it existed to explain why that arithmetic was necessary. The
+     * code only worked while the count stayed correct.
      *
-     * 지금은 줄이 **실제 요소**다(role=row). 셀 필요가 없다.
+     * Rows are real elements now (role=row), so there is nothing to count.
      */
     private rowElementAt;
     private markRow;
@@ -90,10 +90,10 @@ export declare class DataGridBody extends LitElement {
     setSelectBlock(start?: DataGridField, end?: DataGridField): void;
     buildAccumulatorRecord(): GristRecord;
     /**
-     * IME buffer 가 지금 어느 칸을 대신하고 있는지 — 스크린 리더가 읽을 이름.
+     * Which cell the IME buffer currently stands in for — the name a screen reader reads.
      *
-     * 이름의 출처는 column 정의 하나다(columnText). 포커스가 아직 아무 칸에도 없거나 이름을 구할 수
-     * 없으면 「칸 입력」으로 물러난다 — 이름을 지어내지 않고, 그렇다고 이름을 비우지도 않는다.
+     * The name comes from the column definition alone (columnText). When focus is on no cell, or the
+     * column yields no name, it falls back to "cell input" — no invented name, and no empty one.
      */
     private _imeBufferLabel;
     /** IME buffer를 포커스된 셀 위에 위치시킨다 */

package/dist/src/data-grid/data-grid-body.js

@@ -89,10 +89,10 @@ let DataGridBody = class DataGridBody extends LitElement {
         this.data = ZERO_DATA;
         this.focused = ZERO_FOCUS;
         /**
-         * 이 판의 첫 줄이 표 전체에서 몇 번째인가(1부터).
+         * Where this body's first row sits in the whole table, counting from 1.
          *
-         * 머리줄 수와 페이지 자리를 합한 값이라 ox-grid 가 계산해서 내려 준다 — 여기서 다시 세면
-         * 머리가 한 줄인지 두 줄인지(묶음 머리)를 몸이 알아야 한다.
+         * It combines header row count and page offset, so ox-grid computes it and passes it down —
+         * working it out here would mean the body has to know whether the header is one row or two.
          */
         this.ariaRowIndexBase = 2;
         this.editTarget = null;
@@ -133,11 +133,11 @@ let DataGridBody = class DataGridBody extends LitElement {
         var { appendable, classifier, accumulator } = this.config.rows;
         const { start, end } = this._selectBlock || {};
         /*
-         * 줄을 고를 수 있는 표에서만 aria-selected 를 낸다.
+         * Only emit aria-selected where rows can actually be selected.
          *
-         * 이 속성은 「고를 수 있는데 지금은 안 골랐다」는 뜻이라, 고를 수 없는 표의 모든 줄에 false 를
-         * 달면 있지도 않은 기능을 있다고 말하게 된다. 고르는 장치가 있는지는 표가 스스로 안다 —
-         * 줄 선택 거터가 있느냐다.
+         * The attribute means "selectable, currently not selected", so putting false on every row of a
+         * grid without selection announces a control that is not there. Whether selection exists is
+         * something the grid already knows: it has a row-selector gutter or it does not.
          */
         const selectable = columns.some(column => column.gutterName === 'row-selector');
         /*
@@ -152,13 +152,12 @@ let DataGridBody = class DataGridBody extends LitElement {
             var accumRecord = this.buildAccumulatorRecord();
         }
         /*
-         * ── 줄이 몇 번째인가 ──────────────────────────────────────────────────
+         * aria-rowindex is the position in the whole table, not within the page on screen. The first
+         * row of page 2 is row 22, not row 1 again — otherwise every page turn resets the count and
+         * there is no way to tell how far through the data you are.
          *
-         * aria-rowindex 는 **표 전체에서의 자리**다 — 지금 페이지 안의 자리가 아니다. 2페이지 첫 줄은
-         * 21번째 줄이지 이 페이지의 1번째 줄이 아니다. 그렇게 읽어 주지 않으면 페이지를 넘길 때마다
-         * 「1번째 줄」로 돌아가서 어디까지 봤는지 알 수 없다.
-         *
-         * 머리줄도 센다(1부터). 묶음 머리가 있으면 머리가 두 줄이라 본문은 3번부터 시작한다.
+         * Header rows count too, from 1. With a grouped header that is two rows, so the body starts
+         * at 3.
          */
         const rowIndexBase = this.ariaRowIndexBase;
         return html `
@@ -202,8 +201,8 @@ let DataGridBody = class DataGridBody extends LitElement {
               ></ox-grid-field>
             `)}
           <!--
-            남는 폭을 메우는 칸 — 읽을 것이 없다. 줄 안에는 두되(색이 함께 바뀌어야 한다) 표의
-            칸으로는 세지 않는다.
+            Width filler — nothing to read. It stays inside the row so hover and selection colour it
+            with the rest, but it is not counted as a cell.
           -->
           <ox-grid-field
             role="presentation"
@@ -247,16 +246,16 @@ let DataGridBody = class DataGridBody extends LitElement {
             : nothing}
       ${start && end && start !== end ? html ` <div select-block></div> ` : html ``}
       <!--
-        이 grid 의 키 입력은 이 입력칸이 받는다 — 칸을 눌러 편집을 열기 전까지 포커스가 여기에 있고,
-        한글 IME 의 조합 중간 글자도 여기에 쌓인다. 곧 **포커스가 실제로 놓이는 자리**다.
+        This input takes the grid's keystrokes. Focus rests here until a cell opens for editing, and
+        IME composition builds up in it — this is where focus actually lives.
 
-        전에는 이름이 없었다. 눈에 보이지 않으니(opacity: 0) 문제가 아니라고 볼 수 있는데, 그렇지 않다.
-        보이지 않는 것과 없는 것은 다르다 — 포커스를 받고 글자를 받는 입력칸이므로 스크린 리더는 이것을
-        읽는다. 이름이 없으면 「편집 텍스트」 하나로만 읽히고, grid 안에서 화살표로 아무리 옮겨 다녀도
-        읽히는 것이 바뀌지 않는다. 어느 칸에 서 있는지 알 방법이 없다.
+        It had no name. opacity: 0 makes that look harmless, but invisible is not the same as absent:
+        it receives focus and receives text, so a screen reader reads it. Unnamed, it reads as one
+        "edit text" and never changes, no matter how far the arrow keys travel — there is no way to
+        tell which cell you are on.
 
-        aria-hidden 으로 감추는 것은 답이 아니다. 포커스를 받는 것을 보조기술에서 지우면 포커스가
-        허공으로 사라진 것처럼 된다. 감추는 대신 **지금 서 있는 칸의 이름**을 말한다.
+        aria-hidden is not the fix. Hiding the thing that holds focus makes focus vanish into
+        nothing. Instead of hiding it, name it after the cell it currently stands in for.
       -->
       <input
         id="ime-buffer"
@@ -472,13 +471,13 @@ let DataGridBody = class DataGridBody extends LitElement {
         this._hoveredRow = rowIndex;
     }
     /**
-     * 줄 하나 — 그 줄의 칸을 담고 있는 요소.
+     * One row — the element holding that row's cells.
      *
-     * ── 자식을 세지 않는다 (2026-09-06) ────────────────────────────────────
-     * 전에는 `renderRoot.children` 을 `줄번호 * (칸수 + 1)` 로 셌다. 「+1」은 남는 폭을 메우는
-     * 빈 칸이고, 그 앞의 주석은 그 셈이 왜 필요한지를 설명하고 있었다 — 셈이 맞아야만 도는 코드였다.
+     * This used to index `renderRoot.children` at `rowIndex * (columns + 1)`, where the +1 was the
+     * width filler; the comment above it existed to explain why that arithmetic was necessary. The
+     * code only worked while the count stayed correct.
      *
-     * 지금은 줄이 **실제 요소**다(role=row). 셀 필요가 없다.
+     * Rows are real elements now (role=row), so there is nothing to count.
      */
     rowElementAt(rowIndex) {
         var _a;
@@ -493,9 +492,8 @@ let DataGridBody = class DataGridBody extends LitElement {
             return;
         }
         /*
-         * 줄 안의 칸을 모두 바꾼다 — 남는 폭을 메우는 빈 칸까지.
-         *
-         * 전에는 그 빈 칸이 빠져서, 표가 화면보다 좁으면 줄 오른쪽이 잘려 보였다.
+         * Mark every cell in the row, width filler included. It used to be left out, so on a grid
+         * narrower than the viewport the right end of the row stayed uncoloured.
          */
         Array.from(row.children).forEach(cell => cell.toggleAttribute('hovered-row', on));
     }
@@ -508,7 +506,7 @@ let DataGridBody = class DataGridBody extends LitElement {
         if (!residue && columnIndex >= columns) {
             return;
         }
-        /* 열 번호는 감는다 — 끝에서 오른쪽으로 가면 첫 열로 돌아온다(residue). */
+        /* Column index wraps: moving right from the last column returns to the first (residue). */
         return row.children.item((columnIndex + columns) % columns);
     }
     /**
@@ -1050,10 +1048,10 @@ let DataGridBody = class DataGridBody extends LitElement {
         }, {});
     }
     /**
-     * IME buffer 가 지금 어느 칸을 대신하고 있는지 — 스크린 리더가 읽을 이름.
+     * Which cell the IME buffer currently stands in for — the name a screen reader reads.
      *
-     * 이름의 출처는 column 정의 하나다(columnText). 포커스가 아직 아무 칸에도 없거나 이름을 구할 수
-     * 없으면 「칸 입력」으로 물러난다 — 이름을 지어내지 않고, 그렇다고 이름을 비우지도 않는다.
+     * The name comes from the column definition alone (columnText). When focus is on no cell, or the
+     * column yields no name, it falls back to "cell input" — no invented name, and no empty one.
      */
     _imeBufferLabel(column) {
         const name = columnText(column);