@operato/data-grist 10.9.0 → 10.10.1

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [10.10.1](https://github.com/hatiolab/operato/compare/v10.10.0...v10.10.1) (2026-09-06)
+
+
+### :memo: Documentation
+
+* **data-grist, input, attachment:** rewrite today's comments and test names in English ([09983c0](https://github.com/hatiolab/operato/commit/09983c01bd7d47962180e7d5557a20bc5901b174))
+
+
+
+## [10.10.0](https://github.com/hatiolab/operato/compare/v10.9.0...v10.10.0) (2026-09-06)
+
+
+### :memo: Documentation
+
+* **webcomponents:** 주석의 지어낸 한국어를 고친다 ([2553211](https://github.com/hatiolab/operato/commit/255321196bcfc6dc2fce0a8b9806d1341a6a7ce3))
+* 지어낸 말 「재보니·재봤음」을 걷는다 ([0b2a04d](https://github.com/hatiolab/operato/commit/0b2a04d874f2e6f3bc44be4d04f4b3eafde998ef))
+
+
+### :rocket: New Features
+
+* **data-grist:** 표를 표라고 선언하고, 입력칸에 이름을 붙인다 ([e45922b](https://github.com/hatiolab/operato/commit/e45922b51c0bd38f220a618ddc387459a92bef20))
+
+
+
 ## [10.9.0](https://github.com/hatiolab/operato/compare/v10.8.1...v10.9.0) (2026-09-05)
 
 

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

@@ -13,15 +13,26 @@ import { getRenderer } from '../renderers/index.js';
  */
 const RIGHT_ALIGNED_TYPES = ['integer', 'float', 'number'];
 export const buildColumn = (column) => {
-    var _a, _b;
+    var _a, _b, _c;
     var compiled = { ...column };
     if (column.type == 'gutter') {
         compiled = generateGutterColumn(column);
     }
     var { name, header, record, handlers, label, filter } = compiled;
     /* header */
+    /*
+     * Keep the name as text too — with only a renderer, the name disappears here.
+     *
+     * `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.
+     *
+     * Store what to draw and what it is called. `columnText()` reads this.
+     */
     if (typeof header == 'string') {
         compiled.header = {
+            text: header,
             renderer: () => header
         };
     }
@@ -29,6 +40,7 @@ export const buildColumn = (column) => {
         const text = compiled.header.renderer;
         compiled.header = {
             ...compiled.header,
+            text,
             renderer: () => text
         };
     }
@@ -38,11 +50,13 @@ export const buildColumn = (column) => {
         switch (type) {
             case 'boolean':
                 compiled.label = {
-                    renderer: ((_b = compiled.header) === null || _b === void 0 ? void 0 : _b.renderer) || (() => name)
+                    text: ((_b = compiled.header) === null || _b === void 0 ? void 0 : _b.text) || name,
+                    renderer: ((_c = compiled.header) === null || _c === void 0 ? void 0 : _c.renderer) || (() => name)
                 };
                 break;
             case 'string':
                 compiled.label = {
+                    text: label,
                     renderer: () => label
                 };
                 break;

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  if (typeof header == 'string') {\n    compiled.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      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          renderer: compiled.header?.renderer || (() => name)\n        }\n        break\n      case 'string':\n        compiled.label = {\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/configure/config-builder.js

@@ -24,7 +24,7 @@ export const buildConfig = (config) => {
     }
     /*
      * ── 선택 표식의 모양은 `rows.selectable` 이 정한다 (2026-08-31) ────────────
-     * `row-selector` 거터는 **자기 열의 `multiple`** 을 보고 체크박스와 라디오를 가른다. 그런데
+     * `row-selector` 거터는 **자기 열의 `multiple`** 을 보고 체크박스와 라디오를 구분한다. 그런데
      * 「여러 건 고를 수 있나」는 원래 `rows.selectable.multiple` 이 정하는 것이다.
      *
      * 두 곳이 같은 것을 따로 정하고 있어서, 화면이 `rows.selectable.multiple: true` 만 주면

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

@@ -1 +1 @@
-{"version":3,"file":"config-builder.js","sourceRoot":"","sources":["../../../src/configure/config-builder.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAEjE,SAAS,0BAA0B,CAAC,GAAmB,EAAE,SAAuC;IAC9F,KAAK,IAAI,CAAC,GAAG,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;QACzC,IAAI,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACtB,OAAO,CAAC,CAAA;QACV,CAAC;IACH,CAAC;IACD,OAAO,CAAC,CAAC,CAAA;AACX,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,MAAW,EAAe,EAAE;;IACtD,IAAI,EAAE,OAAO,GAAG,EAAE,EAAE,IAAI,GAAG,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,MAAM,CAAA;IAExF,+CAA+C;IAC/C,MAAM,cAAc,GAAG,0BAA0B,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;IAC1E,IAAI,cAAc,IAAI,CAAC,EAAE,CAAC;QACxB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,cAAc,EAAE,CAAC,EAAE,EAAE,CAAC;YACxC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,CAAA;QACzB,CAAC;IACH,CAAC;IAED;;;;;;;;;;;OAWG;IACH,MAAM,gBAAgB,GAAG,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,0CAAE,QAAQ,CAAA;IAEnD,OAAO;QACL,GAAG,MAAM;QACT,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAW,EAAE,EAAE,CACnC,WAAW,CACT,MAAM,CAAC,IAAI,KAAK,QAAQ,IAAI,MAAM,CAAC,UAAU,KAAK,cAAc,IAAI,MAAM,CAAC,QAAQ,KAAK,SAAS;YAC/F,CAAC,CAAC,EAAE,GAAG,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,gBAAgB,EAAE;YAC7C,CAAC,CAAC,MAAM,CACX,CACF;QACD,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC;QAC5B,UAAU;QACV,OAAO;QACP,OAAO,EAAE,mBAAmB,CAAC,OAAO,CAAC;QACrC,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC;QAC5B,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC;QAC5B,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC;KAC7B,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { GristConfig, ColumnConfig } from '../types.js'\nimport { buildColumn } from './column-builder.js'\nimport { buildImexOptions } from './imex-option-builder.js'\nimport { buildListOptions } from './list-option-builder.js'\nimport { buildTreeOptions } from './tree-option-builder.js'\nimport { buildRowsOptions } from './rows-option-builder.js'\nimport { buildFiltersOptions } from './filters-option-builder.js'\n\nfunction findLastIndexWithCondition(arr: ColumnConfig[], condition: (x: ColumnConfig) => boolean) {\n  for (let i = arr.length - 1; i >= 0; i--) {\n    if (condition(arr[i])) {\n      return i\n    }\n  }\n  return -1\n}\n\nexport const buildConfig = (config: any): GristConfig => {\n  var { columns = [], rows = {}, pagination, sorters, filters, list, tree, imex } = config\n\n  /* 마지막 fixed 컬럼 앞의 모든 컬럼의 fixed를 true로 설정한다. */\n  const lastFixedIndex = findLastIndexWithCondition(columns, x => !!x.fixed)\n  if (lastFixedIndex >= 0) {\n    for (let i = 0; i < lastFixedIndex; i++) {\n      columns[i].fixed = true\n    }\n  }\n\n  /*\n   * ── 선택 표식의 모양은 `rows.selectable` 이 정한다 (2026-08-31) ────────────\n   * `row-selector` 거터는 **자기 열의 `multiple`** 을 보고 체크박스와 라디오를 가른다. 그런데\n   * 「여러 건 고를 수 있나」는 원래 `rows.selectable.multiple` 이 정하는 것이다.\n   *\n   * 두 곳이 같은 것을 따로 정하고 있어서, 화면이 `rows.selectable.multiple: true` 만 주면\n   * **여러 건이 골라지는데 모양은 라디오**가 됐다 — 화면이 「하나만 된다」고 말하면서 여럿을 받는다.\n   * 실제로 작업지시 목록이 그 상태였다.\n   *\n   * 거터 열이 스스로 `multiple` 을 적지 않았으면 `rows.selectable` 에서 이어받는다. 적었으면\n   * 그 화면의 뜻이므로 그대로 둔다.\n   */\n  const selectorMultiple = rows?.selectable?.multiple\n\n  return {\n    ...config,\n    columns: columns.map((column: any) =>\n      buildColumn(\n        column.type === 'gutter' && column.gutterName === 'row-selector' && column.multiple === undefined\n          ? { ...column, multiple: !!selectorMultiple }\n          : column\n      )\n    ),\n    rows: buildRowsOptions(rows),\n    pagination,\n    sorters,\n    filters: buildFiltersOptions(filters),\n    list: buildListOptions(list),\n    tree: buildTreeOptions(tree),\n    imex: buildImexOptions(imex)\n  }\n}\n"]}
+{"version":3,"file":"config-builder.js","sourceRoot":"","sources":["../../../src/configure/config-builder.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAEjE,SAAS,0BAA0B,CAAC,GAAmB,EAAE,SAAuC;IAC9F,KAAK,IAAI,CAAC,GAAG,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;QACzC,IAAI,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACtB,OAAO,CAAC,CAAA;QACV,CAAC;IACH,CAAC;IACD,OAAO,CAAC,CAAC,CAAA;AACX,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,MAAW,EAAe,EAAE;;IACtD,IAAI,EAAE,OAAO,GAAG,EAAE,EAAE,IAAI,GAAG,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,MAAM,CAAA;IAExF,+CAA+C;IAC/C,MAAM,cAAc,GAAG,0BAA0B,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;IAC1E,IAAI,cAAc,IAAI,CAAC,EAAE,CAAC;QACxB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,cAAc,EAAE,CAAC,EAAE,EAAE,CAAC;YACxC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,CAAA;QACzB,CAAC;IACH,CAAC;IAED;;;;;;;;;;;OAWG;IACH,MAAM,gBAAgB,GAAG,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,0CAAE,QAAQ,CAAA;IAEnD,OAAO;QACL,GAAG,MAAM;QACT,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAW,EAAE,EAAE,CACnC,WAAW,CACT,MAAM,CAAC,IAAI,KAAK,QAAQ,IAAI,MAAM,CAAC,UAAU,KAAK,cAAc,IAAI,MAAM,CAAC,QAAQ,KAAK,SAAS;YAC/F,CAAC,CAAC,EAAE,GAAG,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,gBAAgB,EAAE;YAC7C,CAAC,CAAC,MAAM,CACX,CACF;QACD,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC;QAC5B,UAAU;QACV,OAAO;QACP,OAAO,EAAE,mBAAmB,CAAC,OAAO,CAAC;QACrC,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC;QAC5B,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC;QAC5B,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC;KAC7B,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { GristConfig, ColumnConfig } from '../types.js'\nimport { buildColumn } from './column-builder.js'\nimport { buildImexOptions } from './imex-option-builder.js'\nimport { buildListOptions } from './list-option-builder.js'\nimport { buildTreeOptions } from './tree-option-builder.js'\nimport { buildRowsOptions } from './rows-option-builder.js'\nimport { buildFiltersOptions } from './filters-option-builder.js'\n\nfunction findLastIndexWithCondition(arr: ColumnConfig[], condition: (x: ColumnConfig) => boolean) {\n  for (let i = arr.length - 1; i >= 0; i--) {\n    if (condition(arr[i])) {\n      return i\n    }\n  }\n  return -1\n}\n\nexport const buildConfig = (config: any): GristConfig => {\n  var { columns = [], rows = {}, pagination, sorters, filters, list, tree, imex } = config\n\n  /* 마지막 fixed 컬럼 앞의 모든 컬럼의 fixed를 true로 설정한다. */\n  const lastFixedIndex = findLastIndexWithCondition(columns, x => !!x.fixed)\n  if (lastFixedIndex >= 0) {\n    for (let i = 0; i < lastFixedIndex; i++) {\n      columns[i].fixed = true\n    }\n  }\n\n  /*\n   * ── 선택 표식의 모양은 `rows.selectable` 이 정한다 (2026-08-31) ────────────\n   * `row-selector` 거터는 **자기 열의 `multiple`** 을 보고 체크박스와 라디오를 구분한다. 그런데\n   * 「여러 건 고를 수 있나」는 원래 `rows.selectable.multiple` 이 정하는 것이다.\n   *\n   * 두 곳이 같은 것을 따로 정하고 있어서, 화면이 `rows.selectable.multiple: true` 만 주면\n   * **여러 건이 골라지는데 모양은 라디오**가 됐다 — 화면이 「하나만 된다」고 말하면서 여럿을 받는다.\n   * 실제로 작업지시 목록이 그 상태였다.\n   *\n   * 거터 열이 스스로 `multiple` 을 적지 않았으면 `rows.selectable` 에서 이어받는다. 적었으면\n   * 그 화면의 뜻이므로 그대로 둔다.\n   */\n  const selectorMultiple = rows?.selectable?.multiple\n\n  return {\n    ...config,\n    columns: columns.map((column: any) =>\n      buildColumn(\n        column.type === 'gutter' && column.gutterName === 'row-selector' && column.multiple === undefined\n          ? { ...column, multiple: !!selectorMultiple }\n          : column\n      )\n    ),\n    rows: buildRowsOptions(rows),\n    pagination,\n    sorters,\n    filters: buildFiltersOptions(filters),\n    list: buildListOptions(list),\n    tree: buildTreeOptions(tree),\n    imex: buildImexOptions(imex)\n  }\n}\n"]}

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

@@ -11,7 +11,7 @@ export const dataGridBodyStyle = css `
      *
      * 머리는 overflow: hidden 이라 스크롤바에 자리를 내주지 않고, 몸은 긴 목록에서 스크롤바 폭만큼
      * 좁아진다. 그래서 갈 수 있는 거리가 몸이 그만큼 더 길었고, 오른쪽 끝에서 몸만 더 갔다.
-     * 재보니 정확히 --scrollbar-width 만큼(5px)이었다.
+     * 확인해 보니 정확히 --scrollbar-width 만큼(5px)이었다.
      *
      * 자리를 늘 비워 두면 목록 길이와 무관하게 두 폭이 같다. 목록이 길어질 때 열이 움찔하는 것도
      * 함께 없어진다 — 스크롤바가 생기는 순간 폭이 바뀌지 않는다.
@@ -23,6 +23,17 @@ export const dataGridBodyStyle = css `
     border-bottom: var(--grid-body-bottom-border);
   }
 
+  /*
+   * Row wrapper — generates no box.
+   *
+   * 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;
+  }
+
   ox-grid-field[odd] {
     background-color: var(--grid-record-odd-background-color);
   }

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2InC,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  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

@@ -13,6 +13,13 @@ export declare class DataGridBody extends LitElement {
         row: number;
         column: number;
     };
+    /**
+     * Where this body's first row sits in the whole table, counting from 1.
+     *
+     * 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: {
         row: number;
         column: number;
@@ -47,6 +54,16 @@ export declare class DataGridBody extends LitElement {
     private _hoveredRow;
     /** 지나는 줄을 옮긴다. 같은 줄이면 아무것도 하지 않는다. */
     private setHoveredRow;
+    /**
+     * One row — the element holding that row's cells.
+     *
+     * 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.
+     *
+     * Rows are real elements now (role=row), so there is nothing to count.
+     */
+    private rowElementAt;
     private markRow;
     getFieldByIndex(rowIndex: number, columnIndex: number, residue?: boolean): DataGridField | undefined;
     /**
@@ -72,6 +89,13 @@ export declare class DataGridBody extends LitElement {
     paste(): Promise<void>;
     setSelectBlock(start?: DataGridField, end?: DataGridField): void;
     buildAccumulatorRecord(): GristRecord;
+    /**
+     * Which cell the IME buffer currently stands in for — the name a screen reader reads.
+     *
+     * 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를 포커스된 셀 위에 위치시킨다 */
     private _positionIMEBuffer;
     /** IME buffer 값을 field-change 이벤트로 커밋한다 */

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

@@ -6,9 +6,11 @@ import { customElement, property, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import debounce from 'lodash-es/debounce.js';
 import isEmpty from 'lodash-es/isEmpty.js';
+import { i18next } from '@operato/i18n';
 import { sleep, parseToNumberOrNull, closestElement } from '@operato/utils';
 import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config.js';
 import { RecordViewHandler } from '../record-view/record-view-handler.js';
+import { columnText } from '../utils/column-text.js';
 // import { supportsPassive } from '../utils/index.js'
 import { dataGridBodyStyle } from './data-grid-body-style.js';
 import { dataGridBodyClickHandler } from './event-handlers/data-grid-body-click-handler.js';
@@ -86,6 +88,13 @@ let DataGridBody = class DataGridBody extends LitElement {
         this.columns = [];
         this.data = ZERO_DATA;
         this.focused = ZERO_FOCUS;
+        /**
+         * Where this body's first row sits in the whole table, counting from 1.
+         *
+         * 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;
         this.from = -1;
         this.to = -1;
@@ -123,6 +132,14 @@ let DataGridBody = class DataGridBody extends LitElement {
         var { records } = data;
         var { appendable, classifier, accumulator } = this.config.rows;
         const { start, end } = this._selectBlock || {};
+        /*
+         * Only emit aria-selected where rows can actually be selected.
+         *
+         * 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');
         /*
          * 레코드를 추가할 수 있는 경우에는 항상 추가 레코드를 보여준다.
          * 만약, 이전 방식처럼, 커서를 옮겨야만 새로운 레코드가 보이게 하고 싶다면, 조건부를 다음의 코드로 대체한다.
@@ -134,6 +151,15 @@ let DataGridBody = class DataGridBody extends LitElement {
         if (accumulator) {
             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.
+         *
+         * 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 `
       ${records.map((record, idxRow) => {
             var attrFocusedRow = idxRow === focusedRow;
@@ -142,8 +168,17 @@ let DataGridBody = class DataGridBody extends LitElement {
             var dirtyFields = record['__dirtyfields__'] || {};
             var { emphasized } = classifier.call(null, record, idxRow) || {};
             return html `
+          <div
+            grid-row
+            role="row"
+            aria-rowindex=${rowIndexBase + idxRow}
+            aria-selected=${ifDefined(selectable ? !!attrSelected : undefined)}
+          >
           ${columns.map((column, idxColumn) => html `
               <ox-grid-field
+                id=${'cell-' + idxRow + '-' + idxColumn}
+                role="gridcell"
+                aria-colindex=${idxColumn + 1}
                 .data=${data}
                 .type=${column.type}
                 .rowIndex=${idxRow}
@@ -165,7 +200,12 @@ let DataGridBody = class DataGridBody extends LitElement {
                 fixed=${ifDefined(this.fixedLefts[idxColumn])}
               ></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"
             .data=${data}
             .rowIndex=${idxRow}
             .columnIndex=${-1}
@@ -175,31 +215,54 @@ let DataGridBody = class DataGridBody extends LitElement {
             ?focused-row=${attrFocusedRow}
             ?selected-row=${attrSelected}
           ></ox-grid-field>
+          </div>
         `;
         })}
       ${accumulator
             ? html `
-            ${columns.map((column, idxColumn) => html `
-                <ox-grid-accum-field
-                  .data=${data}
-                  .columnIndex=${idxColumn}
-                  .rowIndex=${records.length}
-                  .column=${column}
-                  .record=${accumRecord}
-                  .value=${accumRecord[column.name]}
-                  fixed=${ifDefined(this.fixedLefts[idxColumn])}
-                ></ox-grid-accum-field>
-              `)}
-            <ox-grid-accum-field
-              .data=${data}
-              .columnIndex=${-1}
-              .rowIndex=${records.length}
-              .record=${accumRecord}
-            ></ox-grid-accum-field>
+            <div grid-row role="row" aria-rowindex=${rowIndexBase + records.length}>
+              ${columns.map((column, idxColumn) => html `
+                  <ox-grid-accum-field
+                    role="gridcell"
+                    aria-colindex=${idxColumn + 1}
+                    .data=${data}
+                    .columnIndex=${idxColumn}
+                    .rowIndex=${records.length}
+                    .column=${column}
+                    .record=${accumRecord}
+                    .value=${accumRecord[column.name]}
+                    fixed=${ifDefined(this.fixedLefts[idxColumn])}
+                  ></ox-grid-accum-field>
+                `)}
+              <ox-grid-accum-field
+                role="presentation"
+                .data=${data}
+                .columnIndex=${-1}
+                .rowIndex=${records.length}
+                .record=${accumRecord}
+              ></ox-grid-accum-field>
+            </div>
           `
             : nothing}
       ${start && end && start !== end ? html ` <div select-block></div> ` : html ``}
-      <input id="ime-buffer" type="text" />
+      <!--
+        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.
+
+        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 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"
+        type="text"
+        aria-label=${this._imeBufferLabel(columns[focusedColumn])}
+        aria-activedescendant=${ifDefined(focusedRow >= 0 && focusedColumn >= 0 ? `cell-${focusedRow}-${focusedColumn}` : undefined)}
+      />
       <slot></slot>
     `;
     }
@@ -362,7 +425,7 @@ let DataGridBody = class DataGridBody extends LitElement {
          * 표를 벗어나면 지운다 — 남겨 두면 마지막 줄이 골라진 것처럼 보인다.
          *
          * **요소에 붙인다.** renderRoot 는 ShadowRoot 이고 pointerleave 는 요소에 가는 사건이라 거기서는
-         * 안 먹었다. [재봤음] 표를 벗어난 뒤에도 표식 8개가 남아 있었다. 2026-09-02
+         * 안 먹었다. [확인함] 표를 벗어난 뒤에도 표식 8개가 남아 있었다. 2026-09-02
          */
         this.addEventListener('pointerleave', () => this.setHoveredRow(-1));
         this.renderRoot.addEventListener('click', dataGridBodyClickHandler.bind(this));
@@ -407,37 +470,44 @@ let DataGridBody = class DataGridBody extends LitElement {
         this.markRow(rowIndex, true);
         this._hoveredRow = rowIndex;
     }
-    markRow(rowIndex, on) {
+    /**
+     * One row — the element holding that row's cells.
+     *
+     * 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.
+     *
+     * Rows are real elements now (role=row), so there is nothing to count.
+     */
+    rowElementAt(rowIndex) {
         var _a;
         if (rowIndex < 0) {
+            return null;
+        }
+        return (_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('div[grid-row]').item(rowIndex);
+    }
+    markRow(rowIndex, on) {
+        const row = this.rowElementAt(rowIndex);
+        if (!row) {
             return;
         }
-        const columns = this.columns.filter(column => !column.hidden).length;
         /*
-         * 한 줄은 칸 수보다 **하나 많은** 자식을 갖는다. 마지막 하나는 남는 폭을 메우는 빈 칸이다
-         * (`columnIndex` 가 -1 인 `ox-grid-field` — 위 render 참조).
-         *
-         * 전에는 칸 수만큼만 돌아서 **그 빈 칸만 색이 안 바뀌었다.** 표가 화면보다 좁으면 줄 오른쪽이
-         * 잘려 보인다.
-         *
-         * `getFieldByIndex` 로는 그 칸에 닿을 수 없다 — 열 번호를 `% columns` 로 감기 때문에 칸 수를
-         * 넘기면 0번으로 돌아온다. 그래서 자식을 직접 센다.
+         * 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.
          */
-        const cells = columns + 1;
-        const first = rowIndex * cells;
-        for (let index = 0; index < cells; index++) {
-            (_a = this.renderRoot.children.item(first + index)) === null || _a === void 0 ? void 0 : _a.toggleAttribute('hovered-row', on);
-        }
+        Array.from(row.children).forEach(cell => cell.toggleAttribute('hovered-row', on));
     }
     getFieldByIndex(rowIndex, columnIndex, residue = true) {
-        if (rowIndex < 0) {
+        const row = this.rowElementAt(rowIndex);
+        if (!row) {
             return;
         }
         var columns = this.columns.filter(column => !column.hidden).length;
         if (!residue && columnIndex >= columns) {
             return;
         }
-        return this.renderRoot.children.item(rowIndex * (columns + 1) /* 1 means last dummy column */ + ((columnIndex + columns) % columns));
+        /* Column index wraps: moving right from the last column returns to the first (residue). */
+        return row.children.item((columnIndex + columns) % columns);
     }
     /**
      * 칸의 **팝업 표식**을 눌렀다 — 그 칸의 편집을 연다.
@@ -759,7 +829,7 @@ let DataGridBody = class DataGridBody extends LitElement {
                         this.focusedField.isWorking = false;
                     }
                 }
-                /* 엑셀식 타일링: 타겟 선택 영역이 소스 크기의 정수배이면 그 차원으로 반복, 아니면 1회 (차원별 독립 판정) */
+                /* 엑셀식 타일링: 타겟 선택 영역이 소스 크기의 정수배이면 그 차원으로 반복하고, 아니면 한 번만 붙여 넣는다 (차원마다 따로 판단) */
                 const trs = Array.from(table.querySelectorAll('tr')).filter((r) => r instanceof HTMLTableRowElement);
                 if (!trs.length) {
                     return;
@@ -879,7 +949,7 @@ let DataGridBody = class DataGridBody extends LitElement {
             }
             else if (type === 'text/plain') {
                 /* TSV 포맷 파싱: 줄바꿈으로 행 분리, 탭으로 열 분리 (엑셀 등 외부 소스 붙여넣기 지원) */
-                /* CRLF 정규화 + 마지막 빈 줄 제거 (엑셀 TSV는 개행으로 끝남 — 빈 행이 소스 크기 판정을 깨뜨림) */
+                /* CRLF 정규화 + 마지막 빈 줄 제거 (엑셀 TSV 는 개행으로 끝난다. 빈 행이 소스 크기 판단을 깨뜨린다) */
                 const tsvRows = content
                     .replace(/\r\n/g, '\n')
                     .replace(/\n$/, '')
@@ -888,7 +958,7 @@ let DataGridBody = class DataGridBody extends LitElement {
                 if (!tsvRows.length) {
                     return;
                 }
-                /* 엑셀식 타일링: 타겟 선택 영역이 소스 크기의 정수배이면 그 차원으로 반복, 아니면 1회 (차원별 독립 판정) */
+                /* 엑셀식 타일링: 타겟 선택 영역이 소스 크기의 정수배이면 그 차원으로 반복하고, 아니면 한 번만 붙여 넣는다 (차원마다 따로 판단) */
                 const srcRows = tsvRows.length;
                 const srcCols = Math.max(...tsvRows.map(r => r.length));
                 const repeatR = srcRows > 0 && tgtRows % srcRows === 0 ? tgtRows / srcRows : 1;
@@ -977,6 +1047,18 @@ let DataGridBody = class DataGridBody extends LitElement {
             return record;
         }, {});
     }
+    /**
+     * Which cell the IME buffer currently stands in for — the name a screen reader reads.
+     *
+     * 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);
+        return name
+            ? i18next.t('text.grid-cell-input', { name, defaultValue: name })
+            : i18next.t('text.grid-cell-input-plain', { defaultValue: 'cell input' });
+    }
     /** IME buffer를 포커스된 셀 위에 위치시킨다 */
     _positionIMEBuffer() {
         var _a;
@@ -1129,7 +1211,7 @@ DataGridBody.styles = [
       }
 
       @media (pointer: coarse) {
-        /* 터치 디바이스에서는 길게 눌러 텍스트 선택 허용 */
+        /* 터치 기기에서는 길게 누르면 텍스트를 선택할 수 있게 둔다 */
         :host {
           user-select: auto;
         }
@@ -1173,6 +1255,9 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], DataGridBody.prototype, "focused", void 0);
+__decorate([
+    property({ type: Number })
+], DataGridBody.prototype, "ariaRowIndexBase", void 0);
 __decorate([
     property({ type: Object })
 ], DataGridBody.prototype, "editTarget", void 0);