@operato/data-grist 10.8.1 → 10.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "10.8.1",
+  "version": "10.10.0",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "type": "module",
@@ -69,11 +69,12 @@
   "dependencies": {
     "@material/web": "^2.0.0",
     "@operato/headroom": "^10.0.0",
-    "@operato/input": "^10.8.1",
-    "@operato/p13n": "^10.8.1",
-    "@operato/popup": "^10.8.1",
+    "@operato/i18n": "^10.0.0",
+    "@operato/input": "^10.10.0",
+    "@operato/p13n": "^10.10.0",
+    "@operato/popup": "^10.10.0",
     "@operato/pull-to-refresh": "^10.0.0",
-    "@operato/styles": "^10.8.1",
+    "@operato/styles": "^10.10.0",
     "@operato/time-calculator": "^10.0.0",
     "@operato/utils": "^10.7.0",
     "i18next": "^24.2.1",
@@ -114,5 +115,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "fab8f4d2205af38c407507213746ccca0210efa5"
+  "gitHead": "15f722c8131e5a04b5b4186ac71ada9f94ef9a4f"
 }

package/test/accessible-name.test.ts

@@ -0,0 +1,408 @@
+import { expect, fixture } from '@open-wc/testing'
+import { html } from 'lit'
+
+import '../src/data-grid/data-grid.js'
+import '../src/data-grid/data-grid-body.js'
+import { buildColumn } from '../src/configure/column-builder.js'
+import { columnText } from '../src/utils/column-text.js'
+import { ZERO_CONFIG, ZERO_DATA } from '../src/configure/zero-config.js'
+
+/**
+ * 입력칸의 이름.
+ *
+ * ## 왜 시험이 필요한가
+ *
+ * 이 grid 안에는 이름 없는 입력칸이 여럿 있었다 — 줄을 고르는 체크박스, 머리줄의 filter 상자,
+ * 그리고 포커스를 담고 있는 IME buffer. 눈으로 보는 사람에게는 **자리**가 뜻을 말해 준다(맨 왼쪽
+ * 좁은 칸이면 줄 선택, 머리줄 이름 바로 아래면 그 column 의 filter). 그런데 자리는 그림일 뿐이고
+ * 관계가 아니라서, 화면을 못 보는 사람에게는 이름 없는 상자들만 남는다.
+ *
+ * ## 무엇을 지키려는가
+ *
+ * 이름의 출처가 하나여야 한다. `header` 를 고쳤을 때 읽히는 이름도 함께 바뀌어야 하고, 그러려면
+ * 부르는 쪽이 이름을 다시 적어 두면 안 된다. `columnText()` 가 그 유일한 출처다.
+ *
+ * `buildColumn` 이 문자열 header 를 `() => header` 함수로 바꿔 버리는 자리가 있었는데, 그 함수가
+ * 돌려주는 것은 lit template 이라 이름을 되꺼낼 수 없다 — 여기서 이름이 사라지고 있었다.
+ */
+
+describe('column 이름의 출처는 하나다', () => {
+  it('문자열로 준 header 는 함수로 바뀌어도 글자가 남는다', () => {
+    const column = buildColumn({ type: 'string', name: 'palletId', header: '파렛트 번호' })
+
+    expect(columnText(column)).to.equal('파렛트 번호')
+  })
+
+  it('header.renderer 에 문자열을 준 경우도 같다', () => {
+    const column = buildColumn({ type: 'string', name: 'palletId', header: { renderer: '파렛트 번호' } })
+
+    expect(columnText(column)).to.equal('파렛트 번호')
+  })
+
+  it('label: true 는 header 의 이름을 물려받는다', () => {
+    const column = buildColumn({ type: 'string', name: 'palletId', header: '파렛트 번호', label: true })
+
+    expect(columnText(column)).to.equal('파렛트 번호')
+  })
+
+  it('header 를 함수로 그리면 이름을 되꺼낼 수 없다 — 그때는 column 이름으로 물러난다', () => {
+    const column = buildColumn({ type: 'string', name: 'palletId', header: { renderer: () => html`<i>x</i>` } })
+
+    expect(columnText(column)).to.equal('palletId')
+  })
+
+  it('column 이 없으면 이름을 지어내지 않는다', () => {
+    expect(columnText(undefined)).to.equal('')
+    expect(columnText(null)).to.equal('')
+  })
+})
+
+describe('줄을 고르는 칸에는 이름이 있다', () => {
+  const columns = [
+    { type: 'gutter', gutterName: 'row-selector', name: '__selected__', multiple: true },
+    { type: 'string', name: 'palletId', header: '파렛트 번호' }
+  ].map(buildColumn)
+
+  it('행마다 놓인 체크박스가 몇 번째 줄인지 말한다', async () => {
+    const body: any = await fixture(html`
+      <ox-grid-body
+        .config=${{ ...ZERO_CONFIG, columns }}
+        .columns=${columns}
+        .data=${{ ...ZERO_DATA, records: [{ palletId: 'P-0001' }, { palletId: 'P-0002' }] }}
+      ></ox-grid-body>
+    `)
+
+    await body.updateComplete
+
+    /* 체크박스는 각 칸(ox-grid-field)의 shadow root 안에 그려진다 — 한 겹 더 들어가야 보인다. */
+    const fields = Array.from(body.renderRoot.querySelectorAll('ox-grid-field')) as any[]
+
+    await Promise.all(fields.map(field => field.updateComplete))
+
+    const boxes = fields.flatMap(field =>
+      Array.from(field.renderRoot?.querySelectorAll('input[type=checkbox], input[type=radio]') || [])
+    ) as HTMLInputElement[]
+
+    expect(boxes.length, '줄을 고르는 칸을 찾지 못했다').to.be.greaterThan(0)
+    boxes.forEach(box =>
+      expect(box.getAttribute('aria-label'), '이름 없는 체크박스가 남아 있다').to.be.a('string').and.not.equal('')
+    )
+  })
+})
+
+describe('포커스를 담고 있는 IME buffer 가 지금 선 칸을 말한다', () => {
+  const columns = [
+    { type: 'string', name: 'palletId', header: '파렛트 번호' },
+    { type: 'string', name: 'location', header: '보관 위치' }
+  ].map(buildColumn)
+
+  async function bodyFocusedAt(column: number) {
+    const body: any = await fixture(html`
+      <ox-grid-body
+        .config=${{ ...ZERO_CONFIG, columns }}
+        .columns=${columns}
+        .data=${{ ...ZERO_DATA, records: [{ palletId: 'P-0001', location: 'A-01' }] }}
+        .focused=${{ row: 0, column }}
+      ></ox-grid-body>
+    `)
+
+    await body.updateComplete
+
+    return body.renderRoot.querySelector('#ime-buffer') as HTMLInputElement
+  }
+
+  it('첫 칸에 서 있으면 첫 칸의 이름을 읽는다', async () => {
+    expect((await bodyFocusedAt(0)).getAttribute('aria-label')).to.contain('파렛트 번호')
+  })
+
+  it('옆 칸으로 옮기면 읽히는 이름도 바뀐다 — 안 바뀌면 어디에 선 것인지 알 수 없다', async () => {
+    expect((await bodyFocusedAt(1)).getAttribute('aria-label')).to.contain('보관 위치')
+  })
+
+  it('보조기술에서 지우지 않는다 — 포커스를 받는 자리다', async () => {
+    expect((await bodyFocusedAt(0)).getAttribute('aria-hidden')).to.be.null
+  })
+})
+
+/**
+ * 표를 표라고 선언했나.
+ *
+ * ## 왜 시험이 필요한가
+ *
+ * 이 표는 CSS grid 로 그린다 — 칸이 평평하게 놓여 있고 **줄이라는 요소가 없다.** 보기에는 줄이
+ * 있지만 그것은 같은 높이에 놓였다는 그림일 뿐이다. 그래서 스크린 리더에게 이 화면은 「여기가
+ * 표다」도, 「지금 3행 3열이다」도, 「전체는 40행이다」도 아닌 **입력칸 더미**였다.
+ *
+ * 줄 감싸개를 넣으면서 두 가지가 동시에 깨질 수 있다.
+ *
+ * ```
+ * 뜻이 서나    role=grid / row / columnheader / gridcell 이 제대로 겹쳐 있나
+ * 모양이 사나  display: contents 가 정말로 상자를 안 만드나 — 만들면 표가 한 줄로 무너진다
+ * ```
+ *
+ * 두 번째가 특히 중요하다. `display: contents` 를 잘못 걸면 칸들이 grid 항목이 아니게 되어
+ * 열이 사라진다. 그래서 **자리를 실제로 확인한다** — 한 줄 안의 칸은 왼쪽으로 갈수록 x 가 커지고,
+ * 줄과 줄은 y 가 달라야 한다.
+ */
+describe('표를 표라고 선언한다', () => {
+  /* ox-grid 는 이미 다듬어진 column 을 받는다 — 다듬는 것은 ox-grist 의 일이다. */
+  const columns = [
+    { type: 'gutter', gutterName: 'row-selector', name: '__selected__', multiple: true },
+    { type: 'string', name: 'palletId', header: '파렛트 번호', sortable: true },
+    { type: 'string', name: 'location', header: '보관 위치', sortable: true }
+  ].map(buildColumn)
+
+  async function grid(overrides: any = {}) {
+    const el: any = await fixture(html`
+      <ox-grid
+        aria-label="입고 대기 목록"
+        .config=${{ ...ZERO_CONFIG, columns, rows: { ...ZERO_CONFIG.rows } }}
+        .data=${{
+          page: 1,
+          limit: 20,
+          total: 40,
+          records: [
+            { palletId: 'P-0001', location: 'A-01' },
+            { palletId: 'P-0002', location: 'A-02' }
+          ],
+          ...overrides
+        }}
+      ></ox-grid>
+    `)
+
+    await el.updateComplete
+
+    const header = el.renderRoot.querySelector('ox-grid-header')
+    const body = el.renderRoot.querySelector('ox-grid-body')
+
+    await header?.updateComplete
+    await body?.updateComplete
+
+    return { el, header, body }
+  }
+
+  it('표 · 줄 · 칸이 겹쳐 있다', async () => {
+    const { el, header, body } = await grid()
+
+    const grid_ = el.renderRoot.querySelector('[role=grid]')
+
+    expect(grid_, 'role=grid 가 없다').to.exist
+    expect(header.getAttribute('role')).to.equal('rowgroup')
+    expect(body.getAttribute('role')).to.equal('rowgroup')
+
+    expect(header.renderRoot.querySelectorAll('[role=row]').length).to.equal(1)
+    expect(body.renderRoot.querySelectorAll('[role=row]').length).to.equal(2)
+    expect(header.renderRoot.querySelectorAll('[role=columnheader]').length).to.equal(3)
+  })
+
+  it('전체가 몇 줄 몇 열인지 말한다 — 지금 페이지가 아니라', async () => {
+    const { el } = await grid()
+
+    const grid_ = el.renderRoot.querySelector('[role=grid]')
+
+    /* 머리 한 줄 + 전체 40건. 화면에 두 줄만 그려도 40건짜리 표다. */
+    expect(grid_.getAttribute('aria-rowcount')).to.equal('41')
+    expect(grid_.getAttribute('aria-colcount')).to.equal('3')
+    expect(grid_.getAttribute('aria-label')).to.equal('입고 대기 목록')
+  })
+
+  it('2페이지의 첫 줄은 21번째 줄이다 — 페이지마다 1번으로 돌아가지 않는다', async () => {
+    const { body } = await grid({ page: 2 })
+
+    const rows = Array.from(body.renderRoot.querySelectorAll('[role=row]')) as HTMLElement[]
+
+    /* 머리 한 줄(1) + 앞 페이지 20건 = 22번째부터 */
+    expect(rows[0].getAttribute('aria-rowindex')).to.equal('22')
+    expect(rows[1].getAttribute('aria-rowindex')).to.equal('23')
+  })
+
+  it('칸이 몇 번째 열인지 말한다 — 남는 폭을 메우는 칸은 세지 않는다', async () => {
+    const { body } = await grid()
+
+    const row = body.renderRoot.querySelector('[role=row]') as HTMLElement
+    const cells = Array.from(row.querySelectorAll('[role=gridcell]')) as HTMLElement[]
+
+    expect(cells.map(cell => cell.getAttribute('aria-colindex'))).to.deep.equal(['1', '2', '3'])
+    expect(row.querySelectorAll('[role=presentation]').length, '메우는 칸이 표의 칸으로 세어졌다').to.equal(1)
+  })
+
+  it('정렬 상태를 글자로도 말한다 — 화살표는 눈으로만 읽힌다', async () => {
+    const el: any = await fixture(html`
+      <ox-grid
+        .config=${{ ...ZERO_CONFIG, columns, rows: { ...ZERO_CONFIG.rows } }}
+        .sorters=${[{ name: 'palletId', desc: true }]}
+        .data=${{ records: [{ palletId: 'P-0001', location: 'A-01' }] }}
+      ></ox-grid>
+    `)
+
+    await el.updateComplete
+
+    const header = el.renderRoot.querySelector('ox-grid-header')
+    await header.updateComplete
+
+    const headers = Array.from(header.renderRoot.querySelectorAll('[role=columnheader]')) as HTMLElement[]
+    const sorts = headers.map(cell => cell.getAttribute('aria-sort'))
+
+    /* 거터는 정렬할 수 없다 — 있지도 않은 기능을 있다고 말하지 않는다. */
+    expect(sorts[0]).to.be.null
+    expect(sorts[1], '내림차순으로 정렬된 열').to.equal('descending')
+    expect(sorts[2], '정렬할 수 있으나 지금은 아닌 열').to.equal('none')
+  })
+
+  it('줄 감싸개가 배치를 건드리지 않는다 — 상자를 만들면 표가 무너진다', async () => {
+    const { body } = await grid()
+
+    const rows = Array.from(body.renderRoot.querySelectorAll('[role=row]')) as HTMLElement[]
+    const first = Array.from(rows[0].children) as HTMLElement[]
+
+    /* 감싸개 자신은 상자가 없다 */
+    expect(getComputedStyle(rows[0]).display).to.equal('contents')
+
+    /* 한 줄 안의 칸은 오른쪽으로 나아간다 — 한 자리에 겹쳐 있으면 열이 사라진 것이다 */
+    const lefts = first.map(cell => cell.offsetLeft)
+    expect(new Set(lefts).size, '칸들이 같은 x 에 겹쳐 있다').to.be.greaterThan(1)
+    lefts.slice(1).forEach((left, index) => expect(left).to.be.greaterThan(lefts[index]))
+
+    /* 줄과 줄은 아래로 내려간다 */
+    const firstTop = (rows[0].children[0] as HTMLElement).offsetTop
+    const secondTop = (rows[1].children[0] as HTMLElement).offsetTop
+    expect(secondTop, '두 줄이 같은 y 에 있다').to.be.greaterThan(firstTop)
+  })
+})
+
+/**
+ * 묶음 머리가 있는 표.
+ *
+ * 머리가 두 줄이 되고, 묶이지 않은 열은 두 줄에 걸친다(`.span-both`). 배치가 CSS grid 의
+ * `grid-row` / `grid-column` 으로 이루어지므로 **줄 감싸개가 가장 위험한 자리**다.
+ */
+describe('묶음 머리 — 머리가 두 줄이다', () => {
+  const columns = [
+    { type: 'string', name: 'palletId', header: '파렛트 번호' },
+    { type: 'string', name: 'width', header: { renderer: '폭', group: '치수' } },
+    { type: 'string', name: 'height', header: { renderer: '높이', group: '치수' } }
+  ].map(buildColumn)
+
+  async function grouped() {
+    const el: any = await fixture(html`
+      <ox-grid
+        .config=${{ ...ZERO_CONFIG, columns, rows: { ...ZERO_CONFIG.rows } }}
+        .data=${{ total: 1, records: [{ palletId: 'P-0001', width: '1200', height: '900' }] }}
+      ></ox-grid>
+    `)
+
+    await el.updateComplete
+
+    const header = el.renderRoot.querySelector('ox-grid-header')
+    const body = el.renderRoot.querySelector('ox-grid-body')
+
+    await header.updateComplete
+    await body.updateComplete
+
+    return { el, header, body }
+  }
+
+  it('머리가 두 줄로 세어진다 — 본문은 3번째 줄부터', async () => {
+    const { el, header, body } = await grouped()
+
+    expect(header.renderRoot.querySelectorAll('[role=row]').length).to.equal(2)
+
+    /* 머리 두 줄 + 1건 */
+    expect(el.renderRoot.querySelector('[role=grid]').getAttribute('aria-rowcount')).to.equal('3')
+
+    const rows = Array.from(body.renderRoot.querySelectorAll('[role=row]')) as HTMLElement[]
+    expect(rows[0].getAttribute('aria-rowindex')).to.equal('3')
+  })
+
+  it('묶음 머리가 몇 열을 덮는지 말한다', async () => {
+    const { header } = await grouped()
+
+    const cells = Array.from(header.renderRoot.querySelectorAll('[role=columnheader]')) as HTMLElement[]
+    const first = cells[0]
+    const group = cells.find(cell => cell.getAttribute('aria-colspan'))
+
+    /* 묶이지 않은 열은 두 줄에 걸친다 */
+    expect(first.getAttribute('aria-rowspan')).to.equal('2')
+    expect(first.getAttribute('aria-colindex')).to.equal('1')
+
+    /* 치수 묶음은 2 · 3열을 덮는다 */
+    expect(group, '묶음 머리를 찾지 못했다').to.exist
+    expect(group!.getAttribute('aria-colindex')).to.equal('2')
+    expect(group!.getAttribute('aria-colspan')).to.equal('2')
+  })
+
+  it('두 줄짜리 머리의 배치가 그대로다 — 묶음이 아래 줄보다 위에 있다', async () => {
+    const { header } = await grouped()
+
+    const cells = Array.from(header.renderRoot.querySelectorAll('[role=columnheader]')) as HTMLElement[]
+    const group = cells.find(cell => cell.getAttribute('aria-colspan'))!
+    const leaf = cells.find(cell => !cell.getAttribute('aria-colspan') && cell !== cells[0])!
+
+    expect(leaf.offsetTop, '묶음 머리와 그 아래 열이 같은 높이에 있다').to.be.greaterThan(group.offsetTop)
+    expect(group.offsetWidth, '묶음 머리가 두 열을 덮지 않는다').to.be.greaterThan(leaf.offsetWidth)
+  })
+})
+
+/**
+ * 표 감싸개가 바깥 배치를 건드리지 않나.
+ *
+ * `role=grid` 안에는 줄만 들어갈 수 있어서, 설정 단추 자리와 페이지 넘김은 감싸개 **밖**으로
+ * 나왔다. 그러면서 두 가지가 이 구조에 매인다.
+ *
+ * ```
+ * 세로 배치   호스트는 flex column 이다. 감싸개가 상자를 만들면 머리와 몸이 그 안으로 들어가
+ *            flex 항목이 하나가 되고, 몸의 flex: 1 이 듣지 않아 높이가 무너진다
+ * 형제 선택자 「머리에 올렸을 때 설정 단추를 보인다」가 인접 형제 선택자다. 설정 단추가 감싸개
+ *            바로 뒤에 있어야 그 규칙이 성립한다
+ * ```
+ */
+describe('표 감싸개는 배치에 끼어들지 않는다', () => {
+  const columns = [
+    { type: 'string', name: 'palletId', header: '파렛트 번호' },
+    { type: 'string', name: 'location', header: '보관 위치' }
+  ].map(buildColumn)
+
+  it('설정 단추는 표 바로 뒤에 있다 — 표 안이 아니라', async () => {
+    const el: any = await fixture(html`
+      <ox-grid
+        .config=${{ ...ZERO_CONFIG, columns, rows: { ...ZERO_CONFIG.rows } }}
+        .data=${{ total: 1, records: [{ palletId: 'P-0001', location: 'A-01' }] }}
+      ></ox-grid>
+    `)
+
+    await el.updateComplete
+
+    const grid = el.renderRoot.querySelector('[role=grid]') as HTMLElement
+    const setting = el.renderRoot.querySelector('div[setting]') as HTMLElement
+
+    expect(setting, '설정 단추 자리가 없다').to.exist
+    expect(grid.contains(setting), '설정 단추가 표 안에 들어갔다 — 표 읽기가 깨진다').to.be.false
+    expect(grid.nextElementSibling, '인접 형제 규칙이 성립하지 않는다').to.equal(setting)
+  })
+
+  it('머리와 몸이 그대로 호스트의 세로 배치를 쓴다', async () => {
+    const el: any = await fixture(html`
+      <div style="height: 300px; display: flex">
+        <ox-grid
+          style="flex: 1"
+          .config=${{ ...ZERO_CONFIG, columns, rows: { ...ZERO_CONFIG.rows } }}
+          .data=${{ total: 1, records: [{ palletId: 'P-0001', location: 'A-01' }] }}
+        ></ox-grid>
+      </div>
+    `)
+
+    const grid = el.querySelector('ox-grid') as any
+    await grid.updateComplete
+
+    const wrapper = grid.renderRoot.querySelector('[role=grid]') as HTMLElement
+    const header = grid.renderRoot.querySelector('ox-grid-header') as HTMLElement
+    const body = grid.renderRoot.querySelector('ox-grid-body') as HTMLElement
+
+    expect(getComputedStyle(wrapper).display).to.equal('contents')
+
+    /* 몸이 남는 높이를 다 쓴다 — 감싸개가 상자를 만들면 이 값이 머리 높이만큼으로 줄어든다 */
+    expect(body.offsetHeight, '몸이 남는 높이를 쓰지 못한다').to.be.greaterThan(100)
+    expect(body.offsetTop, '몸이 머리 아래에 있지 않다').to.be.greaterThan(0)
+    expect(header.offsetTop).to.equal(0)
+  })
+})

package/test/row-hover-visible.test.ts

@@ -1,5 +1,4 @@
-import { expect, fixture } from '@open-wc/testing'
-import { html } from 'lit'
+import { expect } from '@open-wc/testing'
 
 import { DataGrist } from '../src/data-grist.js'
 import { DataGrid } from '../src/data-grid/data-grid.js'
@@ -13,7 +12,7 @@ import { DataGrid } from '../src/data-grid/data-grid.js'
  * 줄과 띠가 나란히 안 보여도 그 시험은 전부 초록이다. 실제로 그랬다.
  *
  * ```
- * [재봤음] 2026-09-04 · operato-plant 인원 화면(어두운 모드)
+ * [확인함] 2026-09-04 · operato-plant 인원 화면(어두운 모드)
  *   줄 rgb(30 34 40) · 띠 rgb(26 30 35) → 대비 1.048   보이지 않는다
  *   그때 고정 열 시험 열여섯 건은 전부 초록이었다
  * ```
@@ -72,15 +71,32 @@ const 대비 = (a: string, b: string) => {
   return (x + 0.05) / (y + 0.05)
 }
 
-/** 그 팔레트에서 선언값이 실제로 무슨 색이 되는지 — 브라우저에게 계산시킨다. */
-async function 칠해보다(값: string, 팔레트: { 줄: string; 잉크: string; 사다리: string }) {
-  const probe = (await fixture(html`
-    <div
-      style="${팔레트.사다리} --grid-record-background-color:${팔레트.줄}; --grid-record-color:${팔레트.잉크}; background-color:${값};"
-    ></div>
-  `)) as HTMLElement
+/**
+ * 그 팔레트에서 선언값이 실제로 무슨 색이 되는지 — 브라우저에게 계산시킨다.
+ *
+ * ── 기다리지 않는다 (2026-09-05) ──────────────────────────────────────────
+ * 전에는 fixture() 로 세우고 await 했다. 잴 것은 div 하나의 계산된 색뿐이라 렌더링을 기다릴
+ * 이유가 없는데, 그 await 가 mocha 의 2초 문턱에 걸려 **기계가 바쁠 때만 붉어졌다** —
+ * 빌드와 웹팩이 함께 돌던 동안 어두운 팔레트 두 건이 시간초과로 넘어갔고, 혼자 돌리면 초록이었다.
+ * 색 판정은 한 번도 실패한 적이 없다.
+ *
+ * 붙이고 재고 떼는 것으로 충분하다. 기다림이 없으니 부하와 무관하게 같은 답이 나온다.
+ */
+function 칠해보다(값: string, 팔레트: { 줄: string; 잉크: string; 사다리: string }) {
+  const probe = document.createElement('div')
 
-  return getComputedStyle(probe).backgroundColor
+  probe.setAttribute(
+    'style',
+    `${팔레트.사다리} --grid-record-background-color:${팔레트.줄}; --grid-record-color:${팔레트.잉크}; background-color:${값};`
+  )
+
+  document.body.appendChild(probe)
+
+  try {
+    return getComputedStyle(probe).backgroundColor
+  } finally {
+    probe.remove()
+  }
 }
 
 /**
@@ -107,7 +123,7 @@ const 팔레트들 = {
  * 얼마나 벌어져야 보이나.
  *
  * 지나는 줄 표시는 **훨씬 옅어야 한다** — 고른 줄과 같은 무게로 그리면 무엇이 골라졌는지 흐려진다.
- * 그래서 큰 값을 요구하지 않는다. 다만 1.05 는 눈에 안 들어온다(위 [재봤음]). 눈으로 확인한 값이
+ * 그래서 큰 값을 요구하지 않는다. 다만 1.05 는 눈에 안 들어온다(위 [확인함]). 눈으로 확인한 값이
  * 1.11 · 1.14 이므로 그 아래에 문턱을 둔다.
  */
 const 최소분리 = 1.08
@@ -120,8 +136,8 @@ describe('마우스가 지나는 줄이 보인다', () => {
   })
 
   Object.entries(팔레트들).forEach(([이름, 팔레트]) => {
-    it(`${이름} 팔레트에서 줄과 띠가 갈린다`, async () => {
-      const 띠 = await 칠해보다(값!, 팔레트)
+    it(`${이름} 팔레트에서 줄과 띠가 갈린다`, () => {
+      const 띠 = 칠해보다(값!, 팔레트)
       const 벌어짐 = 대비(띠, 팔레트.줄)
 
       expect(
@@ -130,8 +146,8 @@ describe('마우스가 지나는 줄이 보인다', () => {
       ).to.be.greaterThan(최소분리)
     })
 
-    it(`${이름} 팔레트에서 띠가 줄을 덮지 않는다 — 옅어야 한다`, async () => {
-      const 띠 = await 칠해보다(값!, 팔레트)
+    it(`${이름} 팔레트에서 띠가 줄을 덮지 않는다 — 옅어야 한다`, () => {
+      const 띠 = 칠해보다(값!, 팔레트)
 
       expect(대비(띠, 팔레트.줄), '고른 줄과 같은 무게가 되면 무엇이 골라졌는지 흐려진다').to.be.lessThan(1.6)
     })

package/translations/en.json

@@ -1,20 +1,30 @@
 {
-  "button.save": "save",
   "button.delete": "delete",
-  "label.accumulator_sum": "sum",
+  "button.save": "save",
   "label.accumulator_avg": "avg",
   "label.accumulator_count": "cnt",
   "label.accumulator_max": "min",
   "label.accumulator_min": "max",
-  "text.validation-reason.MANDATORY": "mandatory",
-  "text.validation-reason.FORMAT": "invalid format",
-  "text.validation-reason.RANGE": "out of range",
-  "text.validation-reason.UNIQUE": "duplicate value",
+  "label.accumulator_sum": "sum",
+  "label.filter": "filter",
+  "text.grid-cell-input": "{name} input",
+  "text.grid-cell-input-plain": "cell input",
+  "text.grid-clear-search": "clear the search or filters to see everything",
+  "text.grid-filter-from": "{name} filter, from",
+  "text.grid-filter-of": "{name} filter",
+  "text.grid-filter-to": "{name} filter, to",
+  "text.grid-no-records": "nothing to show",
+  "text.grid-nothing-found": "nothing found",
+  "text.grid-open-editor": "press to edit",
+  "text.grid-select-all-records": "select all rows",
+  "text.grid-select-record": "select row {row}",
+  "text.grid-total-records": "{total} in total",
+  "text.input-secret-hide": "hide",
   "text.input-secret-placeholder": "enter secret information",
   "text.input-secret-show": "show",
-  "text.input-secret-hide": "hide",
   "text.input-secret-toggle": "show/hide",
-  "text.grid-no-records": "nothing to show",
-  "text.grid-total-records": "{total} in total",
-  "text.grid-column-editable": "editable"
+  "text.validation-reason.FORMAT": "invalid format",
+  "text.validation-reason.MANDATORY": "mandatory",
+  "text.validation-reason.RANGE": "out of range",
+  "text.validation-reason.UNIQUE": "duplicate value"
 }

package/translations/ja.json

@@ -1,20 +1,30 @@
 {
   "button.delete": "削除",
   "button.save": "保存",
-  "label.accumulator_sum": "合計",
   "label.accumulator_avg": "平均",
   "label.accumulator_count": "カウント",
   "label.accumulator_max": "最小",
   "label.accumulator_min": "最大",
-  "text.validation-reason.MANDATORY": "必須",
-  "text.validation-reason.FORMAT": "形式が正しくありません",
-  "text.validation-reason.RANGE": "範囲外",
-  "text.validation-reason.UNIQUE": "重複",
+  "label.accumulator_sum": "合計",
+  "label.filter": "フィルター",
+  "text.grid-cell-input": "{name} 入力",
+  "text.grid-cell-input-plain": "セル入力",
+  "text.grid-clear-search": "検索語やフィルターを消すと全体が表示されます",
+  "text.grid-filter-from": "{name} フィルター 開始値",
+  "text.grid-filter-of": "{name} フィルター",
+  "text.grid-filter-to": "{name} フィルター 終了値",
+  "text.grid-no-records": "まだ何もありません",
+  "text.grid-nothing-found": "見つかりませんでした",
+  "text.grid-open-editor": "押して編集します",
+  "text.grid-select-all-records": "すべての行を選択",
+  "text.grid-select-record": "{row} 行目を選択",
+  "text.grid-total-records": "全 {total} 件",
+  "text.input-secret-hide": "非表示",
   "text.input-secret-placeholder": "機密情報を入力",
   "text.input-secret-show": "表示",
-  "text.input-secret-hide": "非表示",
   "text.input-secret-toggle": "表示/非表示",
-  "text.grid-no-records": "該当するものがありません",
-  "text.grid-total-records": "全 {total} 件",
-  "text.grid-column-editable": "編集できる列"
+  "text.validation-reason.FORMAT": "形式が正しくありません",
+  "text.validation-reason.MANDATORY": "必須",
+  "text.validation-reason.RANGE": "範囲外",
+  "text.validation-reason.UNIQUE": "重複"
 }

package/translations/ko.json

@@ -1,21 +1,30 @@
 {
   "button.delete": "삭제",
   "button.save": "저장",
-  "label.accumulator_sum": "합계",
   "label.accumulator_avg": "평균",
   "label.accumulator_count": "계수",
   "label.accumulator_max": "최소",
   "label.accumulator_min": "최대",
-  "text.validation-reason.MANDATORY": "필수 입력 항목입니다.",
-  "text.validation-reason.FORMAT": "잘못된 형식입니다.",
-  "text.validation-reason.RANGE": "범위를 벗어났습니다.",
-  "text.validation-reason.UNIQUE": "중복된 값입니다.",
+  "label.accumulator_sum": "합계",
+  "label.filter": "필터",
+  "text.grid-cell-input": "{name} 입력",
+  "text.grid-cell-input-plain": "칸 입력",
+  "text.grid-clear-search": "검색어나 필터를 지우면 전체가 보입니다",
+  "text.grid-filter-from": "{name} 필터 시작값",
+  "text.grid-filter-of": "{name} 필터",
+  "text.grid-filter-to": "{name} 필터 끝값",
+  "text.grid-no-records": "아직 아무것도 없습니다",
+  "text.grid-nothing-found": "찾는 것이 없습니다",
+  "text.grid-open-editor": "눌러서 고칩니다",
+  "text.grid-select-all-records": "모든 행 선택",
+  "text.grid-select-record": "{row}번째 행 선택",
+  "text.grid-total-records": "모두 {total}건",
+  "text.input-secret-hide": "숨기기",
   "text.input-secret-placeholder": "보안 정보 입력",
   "text.input-secret-show": "보기",
-  "text.input-secret-hide": "숨기기",
   "text.input-secret-toggle": "보기/숨기기",
-  "label.filter": "필터",
-  "text.grid-no-records": "해당하는 것이 없습니다",
-  "text.grid-total-records": "모두 {total}건",
-  "text.grid-column-editable": "고칠 수 있는 칸"
+  "text.validation-reason.FORMAT": "잘못된 형식입니다.",
+  "text.validation-reason.MANDATORY": "필수 입력 항목입니다.",
+  "text.validation-reason.RANGE": "범위를 벗어났습니다.",
+  "text.validation-reason.UNIQUE": "중복된 값입니다."
 }