@operato/data-grist 10.8.1 → 10.10.0

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

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
-import i18next from 'i18next';
 import '../empty-note.js';
 import './data-grid-header.js';
 import './data-grid-body.js';
 import './data-grid-footer.js';
 import { css, html, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
 import { ScrollbarStyles } from '@operato/styles';
 import { DataManipulator } from '../data-manipulator.js';
@@ -16,7 +16,7 @@ let DataGrid = class DataGrid extends DataManipulator {
     constructor() {
         super(...arguments);
         /**
-         * 이 표에 고칠 수 있는 열이 하나라도 있나 — **겉모습이 이것으로 갈린다.**
+         * 이 표에 고칠 수 있는 열이 하나라도 있는지. **겉모습이 이것으로 달라진다.**
          *
          * 셀 하나를 가리키는 점선과 열 폭 조절 손잡이는 **고칠 셀을 겨누는 장치**다. 고치지 않는 목록에서는
          * 셀 하나가 뜻을 갖지 않아, 줄을 고르려고 누른 자리에 점선이 남고 세로 선이 줄 읽기를 방해한다.
@@ -150,19 +150,51 @@ let DataGrid = class DataGrid extends DataManipulator {
         })
             .concat(['auto'])
             .join(' ');
-        /* 겉모습이 이 사실로 갈린다(위 editableGrid 주석 참조). 열이 정해지는 이 시점이 그 자리다. */
+        /* 겉모습이 이 사실로 달라진다(위 editableGrid 주석 참조). 열이 정해지는 이 시점이 그 자리다. */
         this.editableGrid = columns.some(column => { var _a; return !column.hidden && !column.gutterName && !!((_a = column.record) === null || _a === void 0 ? void 0 : _a.editable); });
         this.style.setProperty('--grid-template-columns', widths);
         /* 인쇄는 종이 폭에 맞춰 비율로 나눈다. `220px` → `220fr` 로 바뀐다. */
         this.style.setProperty('--grid-template-print-columns', widths.replace(/px/gi, 'fr'));
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         var { pagination = {}, columns = [], filters } = this.config;
         var paginatable = !pagination.infinite;
         var data = this.data;
+        /*
+         * ── 표를 표라고 선언한다 (2026-09-06) ─────────────────────────────────
+         *
+         * 이 표에는 role 이 하나도 없었다(전체 소스에 aria- 가 페이지 번호 하나뿐이었다). 그래서
+         * 스크린 리더에게 이 화면은 **입력칸이 잔뜩 늘어선 더미**였다. 칸마다 이름을 손으로 붙여도
+         * 「여기가 표다」 「지금 3행 3열이다」 「전체는 40행이다」는 여전히 말하지 못한다.
+         * 표에서 하는 일은 훑고 견주는 것인데, 그 조작 자체가 없는 것이다.
+         *
+         * role=grid 를 세우면 칸의 이름을 아무 데도 안 적어도 **열 머리가 그 칸의 이름이 된다** —
+         * HTML table 이 원래 그렇게 동작하고, 표준이 그렇게 설계된 이유가 이것이다.
+         *
+         * ── 왜 감싸개가 하나 더 필요한가 ──────────────────────────────────────
+         * grid 안에는 줄(또는 줄 묶음)만 들어갈 수 있다. 그런데 이 요소 밑에는 설정 단추 자리와
+         * 페이지 넘김도 있어서, 호스트에 role 을 걸면 표 안에 표가 아닌 것이 섞인다. 보조기술은 그때
+         * 표 읽기 모드를 포기한다.
+         *
+         * 그래서 머리와 몸만 감싼다. display: contents 라 상자를 만들지 않으므로 세로 flex 배치는
+         * 그대로다.
+         */
+        const headerRows = columns.some(column => { var _a; return !column.hidden && ((_a = column.header) === null || _a === void 0 ? void 0 : _a.group); }) ? 2 : 1;
+        const visibleColumns = columns.filter(column => !column.hidden).length;
+        const total = typeof data.total == 'number' && data.total > 0 ? data.total : ((_a = data.records) === null || _a === void 0 ? void 0 : _a.length) || 0;
+        const page = Number(data.page) > 0 ? Number(data.page) : 1;
+        const limit = Number(data.limit) > 0 ? Number(data.limit) : ((_b = data.records) === null || _b === void 0 ? void 0 : _b.length) || 0;
         return html `
+      <div
+        grid
+        role="grid"
+        aria-label=${ifDefined(this.gridLabel)}
+        aria-rowcount=${headerRows + total}
+        aria-colcount=${visibleColumns}
+      >
       <ox-grid-header
+        role="rowgroup"
         class="md-typescale-label-medium-prominent"
         .columns=${columns}
         .sorters=${this.sorters}
@@ -178,12 +210,36 @@ let DataGrid = class DataGrid extends DataManipulator {
       >
       </ox-grid-header>
 
+      <ox-grid-body
+        role="rowgroup"
+        class="md-typescale-body-medium"
+        .config=${this.config}
+        .columns=${columns}
+        .data=${data}
+        .focused=${this.focused}
+        .fixedLefts=${this.fixedLefts}
+        .ariaRowIndexBase=${headerRows + (page - 1) * limit + 1}
+      >
+        ${this.empty
+            ? html `<ox-empty-note
+              icon=${(_d = (_c = this.emptyNote) === null || _c === void 0 ? void 0 : _c.icon) !== null && _d !== void 0 ? _d : nothing}
+              title=${(_f = (_e = this.emptyNote) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : ''}
+              description=${(_h = (_g = this.emptyNote) === null || _g === void 0 ? void 0 : _g.description) !== null && _h !== void 0 ? _h : nothing}
+            ></ox-empty-note>`
+            : html ``}
+      </ox-grid-body>
+      </div>
+
       <!--
-        헤더 **다음**에 둔다. CSS 로 「헤더에 올렸을 때만」을 표현하려면 형제 선택자가 필요하고, 형제
+        표 **다음**에 둔다. CSS 로 「머리에 올렸을 때만」을 표현하려면 형제 선택자가 필요하고, 형제
         선택자는 뒤쪽 형제만 고를 수 있다.
 
         :host(:has(ox-grid-header:hover)) 로는 안 된다 — :host() 의 인수는 바깥 트리에서 평가되므로
         섀도 트리 안의 ox-grid-header 를 보지 못한다. 실제로 그렇게 써 봤고 hover 에 반응하지 않았다.
+        표 감싸개에 건 :has() 는 섀도 트리 안에서 평가되므로 문제가 없다.
+
+        설정 단추는 표의 일부가 아니라 표를 **다루는** 것이라 role=grid 안에 두지 않는다 — grid 안에는
+        줄만 들어갈 수 있고, 아닌 것이 섞이면 보조기술이 표 읽기 모드를 포기한다.
 
         순서를 바꿔도 보이는 자리는 같다 — 아래 스타일에서 호스트의 오른쪽 위에 절대 좌표로 붙인다.
       -->
@@ -191,33 +247,6 @@ let DataGrid = class DataGrid extends DataManipulator {
         <slot name="setting"></slot>
       </div>
 
-      <ox-grid-body
-        class="md-typescale-body-medium"
-        .config=${this.config}
-        .columns=${columns}
-        .data=${data}
-        .focused=${this.focused}
-        .fixedLefts=${this.fixedLefts}
-      >
-        ${this.empty
-            ? html `
-              <!--
-                아직 아무것도 없을 때 **화면이 자기 말을 넣을 수 있다.**
-
-                전에는 「NO RECORDS」가 박혀 있었다. 그 문장은 다음에 무엇을 할지 알려 주지 않는다 —
-                비어 있는 화면이야말로 「여기서 무엇을 만들 수 있고 그것이 무엇에 쓰이나」를 말해야 하는
-                자리다. 처음 오는 사람이 가장 먼저 보는 화면이기도 하다.
-
-                화면이 config.emptyNote 로 말하고, 말하지 않으면 예전 문장이 그대로 나온다.
-              -->
-              <ox-empty-note
-                icon=${(_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.emptyNote) === null || _b === void 0 ? void 0 : _b.icon) !== null && _c !== void 0 ? _c : nothing}
-                title=${(_f = (_e = (_d = this.config) === null || _d === void 0 ? void 0 : _d.emptyNote) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : i18next.t('text.grid-no-records', { defaultValue: 'NO RECORDS' })}
-                description=${(_j = (_h = (_g = this.config) === null || _g === void 0 ? void 0 : _g.emptyNote) === null || _h === void 0 ? void 0 : _h.description) !== null && _j !== void 0 ? _j : nothing}
-              ></ox-empty-note>
-            `
-            : html ``}
-      </ox-grid-body>
       ${paginatable
             ? html `
             <!--
@@ -226,7 +255,7 @@ let DataGrid = class DataGrid extends DataManipulator {
               그 클래스는 font 축약형으로 0.875rem 를 넣는데, **바깥 트리의 규칙이라 푸터의
               :host { font-size } 를 이긴다**(그림자 캐스케이드에서 호스트 요소는 바깥 트리 규칙이
               우선한다). 그래서 푸터가 자기 크기를 못 정하고 본문과 같은 14px 로 남아 있었다.
-              [재봤음] 리터럴 :host { font-size: 7px } 도 안 먹었다. 2026-09-02
+              [확인함] 리터럴 :host { font-size: 7px } 도 안 먹었다. 2026-09-02
 
               푸터는 본문이 아니다. 크기는 --grid-footer-font-size 가 정한다.
             -->
@@ -254,7 +283,7 @@ DataGrid.styles = [
        * ── 고치는 표만 셀을 겨눈다 ─────────────────────────────────────────
        *
        * 셀 하나를 가리키는 점선과 열 폭 조절 손잡이는 **고칠 셀을 겨누는 장치**다. 기본 겉모습에서는
-       * 둘을 두지 않는다(data-grist.ts 의 한 벌). 고칠 수 있는 열이 하나라도 있으면 여기서 되살린다.
+       * 둘을 두지 않는다(data-grist.ts 와 같은 값). 고칠 수 있는 열이 하나라도 있으면 여기서 되살린다.
        *
        * 화면이 고르는 모드가 아니다 — 표가 스스로 아는 사실이다(위 editableGrid 주석 참조).
        */
@@ -298,6 +327,14 @@ DataGrid.styles = [
         border-width: var(--grid-container-border-width);
       }
 
+      /*
+       * 표 감싸개(role=grid) — 상자를 만들지 않는다. 머리와 몸은 그대로 호스트의 flex 항목으로
+       * 남는다.
+       */
+      div[grid] {
+        display: contents;
+      }
+
       ox-grid-body {
         flex: 1;
         position: relative;
@@ -322,7 +359,7 @@ DataGrid.styles = [
       }
 
       /*
-       * 컬럼 설정 단추는 **헤더에 마우스를 올릴 때만** 보인다.
+       * 컬럼 설정 버튼은 **헤더에 마우스를 올릴 때만** 보인다.
        *
        * 늘 보이면 목록 화면마다 오른쪽 위에 눈에 걸리는 것이 하나 생긴다. 자주 쓰는 것도 아니다.
        *
@@ -331,13 +368,13 @@ DataGrid.styles = [
        *
        * 세 갈래로 켠다.
        *   헤더에 올렸을 때        :has(ox-grid-header:hover)
-       *   단추 자체에 올렸을 때   단추가 헤더 위에 떠 있으므로, 커서가 단추로 옮겨오면 헤더는 더 이상
+       *   버튼 자체에 올렸을 때   버튼이 헤더 위에 떠 있으므로, 커서가 버튼으로 옮겨오면 헤더는 더 이상
        *                          hover 가 아니다. 이 갈래가 없으면 커서 아래에서 사라진다
        *   키보드 초점            focus-within
        */
       div[setting] {
         /*
-         * 크기 없이 호스트의 오른쪽 위에 붙는다. 안에 들어오는 단추가 [slot='setting'] 규칙으로
+         * 크기 없이 호스트의 오른쪽 위에 붙는다. 안에 들어오는 버튼이 [slot='setting'] 규칙으로
          * top: -3px · right: 0 을 스스로 잡으므로, 이 div 는 기준점 노릇만 한다.
          */
         position: absolute;
@@ -352,10 +389,10 @@ DataGrid.styles = [
       }
 
       /*
-       * 단추 자체에 올렸을 때도 켜 둔다 — 단추가 헤더 위에 떠 있어서, 커서가 단추로 옮겨오면 헤더는
+       * 버튼 자체에 올렸을 때도 켜 둔다. 버튼이 헤더 위에 떠 있어서, 커서가 버튼으로 옮겨오면 헤더는
        * 더 이상 hover 가 아니다. 이 갈래가 없으면 커서 아래에서 사라진다.
        */
-      ox-grid-header:hover + div[setting],
+      div[grid]:has(ox-grid-header:hover) + div[setting],
       div[setting]:hover,
       div[setting]:focus-within {
         opacity: 1;
@@ -366,7 +403,7 @@ DataGrid.styles = [
        * 손가락으로 쓰는 장치 — hover 가 없으므로 감추면 닿을 방법이 없다. 늘 두고 평소에는 흐리게,
        * 누르는 동안 선명하게 한다.
        *
-       * 화면 폭이 아니라 입력 장치로 가른다. 창을 좁힌 데스크톱은 여기에 걸리지 않고, 큰 태블릿은
+       * 화면 폭이 아니라 입력 장치로 구분한다. 창을 좁힌 데스크톱은 여기에 걸리지 않고, 큰 태블릿은
        * 폭이 넓어도 걸린다.
        */
       @media (pointer: coarse) {
@@ -394,6 +431,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], DataGrid.prototype, "empty", void 0);
+__decorate([
+    property({ type: Object })
+], DataGrid.prototype, "emptyNote", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'editable-grid' })
 ], DataGrid.prototype, "editableGrid", void 0);
@@ -409,6 +449,9 @@ __decorate([
 __decorate([
     state()
 ], DataGrid.prototype, "fixedLefts", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-label' })
+], DataGrid.prototype, "gridLabel", void 0);
 DataGrid = __decorate([
     customElement('ox-grid')
 ], DataGrid);

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

@@ -1 +1 @@
-{"version":3,"file":"data-grid.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid.ts"],"names":[],"mappings":"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","sourcesContent":["import i18next from 'i18next'\nimport '../empty-note.js'\nimport './data-grid-header.js'\nimport './data-grid-body.js'\nimport './data-grid-footer.js'\n\nimport { css, html, LitElement, PropertyValues, nothing} from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { DataManipulator } from '../data-manipulator.js'\nimport { ColumnConfig, GristRecord, PaginationConfig } from '../types.js'\n// import { supportsPassive } from '../utils/index.js'\nimport { DataGridHeader } from './data-grid-header.js'\n\n/**\n * DataGrid\n */\n@customElement('ox-grid')\nexport class DataGrid extends DataManipulator {\n  static styles = [\n    MDTypeScaleStyles,\n    ScrollbarStyles,\n    css`\n      /*\n       * ── 고치는 표만 셀을 겨눈다 ─────────────────────────────────────────\n       *\n       * 셀 하나를 가리키는 점선과 열 폭 조절 손잡이는 **고칠 셀을 겨누는 장치**다. 기본 겉모습에서는\n       * 둘을 두지 않는다(data-grist.ts 의 한 벌). 고칠 수 있는 열이 하나라도 있으면 여기서 되살린다.\n       *\n       * 화면이 고르는 모드가 아니다 — 표가 스스로 아는 사실이다(위 editableGrid 주석 참조).\n       */\n      :host([editable-grid]) {\n        --grid-record-focused-cell-border: 1px dashed var(--ui-faint, #8a959c);\n        /*\n         * 정렬 표식의 자리는 이 값에서 **파생된다** — 손잡이가 보이면 표식이 칸 오른쪽 끝으로 가고,\n         * 안 보이면 이름에 붙는다(data-grid-header.ts 의 스타일 질의). 여기서 따로 정하지 않는다.\n         */\n        --grid-header-splitter-display: flex;\n        /*\n         * ── 지나는 줄 표시를 **비우지 않는다** ──────────────────────────────\n         *\n         * 여기 hover 색을 transparent 로 두었었다. 「점선 셀 테두리가 이미 「지금 여기」를 말하므로\n         * 줄 배경까지 움직일 필요가 없다」는 뜻이었는데, **그 값은 「칠하지 않는다」가 아니라\n         * 「칸의 색을 지운다」였다.**\n         *\n         * 칸은 자기 바탕을 갖는다(흰색). 그것을 지우면 그 자리에 **구멍이 뚫려 표 뒤의 페이지가\n         * 비친다.** 이 앱에서 그 색이 회색이라(rgb 240·242·244) 회색 띠처럼 보였고, 그래서\n         * 「지나는 줄 표시」가 실제로는 있었다 — 아무도 정하지 않은 색으로.\n         *\n         * 그리고 **고정 열에서 그 띠가 끊긴다.** 고정 열은 스크롤되는 열 위에 떠 있어야 하니\n         * 불투명해야 하고, 그래서 구멍이 안 뚫린다. 줄 하나가 두 색으로 갈렸다.\n         *\n         * 표 뒤에 무엇이 있느냐로 줄 색이 정해지는 것 자체가 결함이다. 어두운 페이지에 이 표를\n         * 놓으면 마우스를 올린 줄이 검게 된다.\n         *\n         * 그래서 이 예외를 걷는다. 모든 표가 같은 hover 색을 쓰고, 그 색은 칸마다 실제로 칠하는\n         * 색이므로 고정 열에도 똑같이 걸린다.\n         */\n      }\n\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        /* div[setting] 의 절대 좌표 기준. */\n        position: relative;\n        overflow: hidden;\n\n        border-width: var(--grid-container-border-width);\n      }\n\n      ox-grid-body {\n        flex: 1;\n        position: relative;\n\n        font-variation-settings: 'FILL' 1;\n      }\n\n      ox-grid-header {\n        font-variation-settings: 'FILL' 1;\n      }\n\n      ox-grid-footer {\n        font-variation-settings: 'FILL' 1;\n      }\n\n      ox-empty-note {\n        display: block;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n      }\n\n      /*\n       * 컬럼 설정 단추는 **헤더에 마우스를 올릴 때만** 보인다.\n       *\n       * 늘 보이면 목록 화면마다 오른쪽 위에 눈에 걸리는 것이 하나 생긴다. 자주 쓰는 것도 아니다.\n       *\n       * 감춰 있는 동안에는 pointer-events 도 끈다 — 안 보이는데 눌리는 자리가 있으면, 헤더의 마지막\n       * 컬럼을 누르려던 사람이 엉뚱한 팝업을 만난다.\n       *\n       * 세 갈래로 켠다.\n       *   헤더에 올렸을 때        :has(ox-grid-header:hover)\n       *   단추 자체에 올렸을 때   단추가 헤더 위에 떠 있으므로, 커서가 단추로 옮겨오면 헤더는 더 이상\n       *                          hover 가 아니다. 이 갈래가 없으면 커서 아래에서 사라진다\n       *   키보드 초점            focus-within\n       */\n      div[setting] {\n        /*\n         * 크기 없이 호스트의 오른쪽 위에 붙는다. 안에 들어오는 단추가 [slot='setting'] 규칙으로\n         * top: -3px · right: 0 을 스스로 잡으므로, 이 div 는 기준점 노릇만 한다.\n         */\n        position: absolute;\n        top: 0;\n        right: 0;\n        width: 0;\n        height: 0;\n        z-index: 5;\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity 0.12s ease-out;\n      }\n\n      /*\n       * 단추 자체에 올렸을 때도 켜 둔다 — 단추가 헤더 위에 떠 있어서, 커서가 단추로 옮겨오면 헤더는\n       * 더 이상 hover 가 아니다. 이 갈래가 없으면 커서 아래에서 사라진다.\n       */\n      ox-grid-header:hover + div[setting],\n      div[setting]:hover,\n      div[setting]:focus-within {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      /*\n       * 손가락으로 쓰는 장치 — hover 가 없으므로 감추면 닿을 방법이 없다. 늘 두고 평소에는 흐리게,\n       * 누르는 동안 선명하게 한다.\n       *\n       * 화면 폭이 아니라 입력 장치로 가른다. 창을 좁힌 데스크톱은 여기에 걸리지 않고, 큰 태블릿은\n       * 폭이 넓어도 걸린다.\n       */\n      @media (pointer: coarse) {\n        div[setting] {\n          opacity: 0.35;\n          pointer-events: auto;\n        }\n\n        div[setting]:active,\n        div[setting]:focus-within {\n          opacity: 1;\n        }\n      }\n\n      @media print {\n        :host {\n          zoom: 80%;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) focused?: { row: number; column: number }\n  @property({ type: Boolean }) empty?: boolean\n\n  /**\n   * 이 표에 고칠 수 있는 열이 하나라도 있나 — **겉모습이 이것으로 갈린다.**\n   *\n   * 셀 하나를 가리키는 점선과 열 폭 조절 손잡이는 **고칠 셀을 겨누는 장치**다. 고치지 않는 목록에서는\n   * 셀 하나가 뜻을 갖지 않아, 줄을 고르려고 누른 자리에 점선이 남고 세로 선이 줄 읽기를 방해한다.\n   *\n   * 그래서 모드를 따로 두지 않는다. 화면이 고를 일이 아니라 **표가 스스로 아는 사실**이다 —\n   * 열에 `record.editable` 이 있으면 고치는 표다.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'editable-grid' }) editableGrid: boolean = false\n\n  @query('ox-grid-body', true) body!: LitElement\n  @query('ox-grid-header', true) header!: DataGridHeader\n  @query('ox-grid-footer', true) footer!: LitElement\n\n  @state() fixedLefts: number[] = []\n\n  firstUpdated() {\n    /* header and body scroll synchronization */\n    this.header.addEventListener('scroll', e => {\n      if (this.body.scrollLeft !== this.header.scrollLeft) {\n        this.body.scrollLeft = this.header.scrollLeft\n      }\n    })\n\n    this.body.addEventListener('scroll', e => {\n      if (this.body.scrollLeft !== this.header.scrollLeft) {\n        this.header.scrollLeft = this.body.scrollLeft\n      }\n    })\n\n    this.header.addEventListener('wheel', this.onWheelEvent.bind(this))\n    this.footer && this.footer.addEventListener('wheel', this.onWheelEvent.bind(this))\n\n    /* record selection processing */\n    this.addEventListener('select-all-change', e => {\n      if (this.data.records.length == 0) {\n        return\n      }\n\n      var { selected } = (e as CustomEvent).detail\n      var { records } = this.data\n\n      records.forEach(record => (record['__selected__'] = selected))\n\n      this.header.requestUpdate()\n      this.body.requestUpdate()\n    })\n\n    this.addEventListener('focus-change', e => {\n      const { row, column } = (e as CustomEvent).detail || {}\n      if (!this.focused || this.focused.row != row || this.focused.column != column) {\n        this.focused = { row, column }\n        this.focus()\n        this.requestUpdate()\n      }\n    })\n  }\n\n  onWheelEvent(e: WheelEvent) {\n    if (this.body.scrollWidth > this.body.clientWidth) {\n      var delta = Math.max(-1, Math.min(1, e.deltaY || 0))\n      this.body.scrollLeft = Math.max(0, this.body.scrollLeft - delta * 30)\n\n      var maxScrollLeft = this.body.scrollWidth - this.body.clientWidth\n\n      var atStart = this.body.scrollLeft === 0\n      var atEnd = this.body.scrollLeft === maxScrollLeft\n\n      // 스크롤이 맨 앞으로 와 있는 상태에서 휠을 올리는 경우 또는\n      // 스크롤이 맨 끝으로 가 있는 상태에서 휠을 내리는 경우에만 디폴트 동작 허용\n      if ((atStart && delta > 0) || (atEnd && delta < 0)) {\n        return true\n      }\n\n      e.preventDefault()\n    }\n  }\n\n  onSelectRecordChanged({\n    selectedRecords,\n    added,\n    removed\n  }: {\n    selectedRecords: GristRecord[]\n    added: GristRecord[]\n    removed: GristRecord[]\n  }): void {\n    super.onSelectRecordChanged({ selectedRecords, added, removed })\n\n    this.header.requestUpdate()\n    this.body.requestUpdate()\n  }\n\n  onRecordChanged(\n    recordData: GristRecord,\n    row: number,\n    column: ColumnConfig | null /* TODO column should be removed */\n  ) {\n    /* record-viewer 등 grid 외에서 변경되는 경우에도 header와 body를 refresh 하도록 한다. */\n    super.onRecordChanged(recordData, row, column)\n\n    this.header.requestUpdate()\n    this.body.requestUpdate()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('data')) {\n      /*\n       * 데이타 내용에 따라 동적으로 컬럼의 폭이 달라지는 경우(예를 들면, sequence field)가 있으므로,\n       * data의 변동에 대해서도 다시 계산되어야 한다.\n       */\n      this.calculateWidths(this.config.columns)\n\n      if (this.focused && 'row' in this.focused) {\n        var { row = 0, column = 0 } = this.focused\n        var { records: oldrecords = [] } = changes.get('data') || {}\n        var { records: newrecords } = this.data\n\n        var oldrecord = oldrecords[row]\n\n        if (oldrecord && oldrecord !== newrecords[row]) {\n          var newrecord = newrecords.find(\n            record =>\n              /* TODO keyfields를 정의하고, keyfields의 동일성으로 확정해야 한다. */\n              oldrecord === record ||\n              ('id' in oldrecord\n                ? record.id == oldrecord.id\n                : 'name' in oldrecord\n                  ? record.name == oldrecord.name\n                  : false)\n          )\n\n          this.focused = {\n            row: newrecord ? newrecords.indexOf(newrecord) : row,\n            column\n          }\n        }\n      }\n    } else if (changes.has('config')) {\n      this.calculateWidths(this.config.columns)\n    }\n\n    /* grid fetch 후에 grid로 focus를 주어야 하는 지 검토가 필요하다. */\n    // this.focus()\n  }\n\n  calculateWidths(columns: ColumnConfig[]) {\n    /*\n     * 컬럼 모델 마지막에 'auto' cell을 추가하여, 자투리 영역을 꽉 채워서 표시한다.\n     *\n     * 숫자로 준 폭은 **그 폭 그대로** 쓴다. 합이 보이는 폭보다 크면 표는 가로로 넘치고, 나머지는\n     * 가로 스크롤로 본다 — 표의 정상 거동이다.\n     *\n     * 한때 minmax(0, Npx) 로 두어 넘칠 때 열들이 함께 줄게 했다가 되돌렸다. 그렇게 하면 어떤 표도\n     * 가로로 넘치지 않으므로 **가로 스크롤이 아예 사라진다.** 열 열다섯 개를 700px 에 밀어 넣으면\n     * 모든 열이 못 읽을 만큼 좁아지고, 화면은 그것을 알릴 방법이 없다.\n     *\n     * 열이 좁아 잘리는 것은 화면이 열 폭을 정해서 풀 일이다 — 부품이 대신 줄이면 화면의 뜻이 사라진다.\n     */\n    const widths = columns\n      .filter(column => !column.hidden)\n      .map(column => {\n        switch (typeof column.width) {\n          case 'number':\n            return `${column.width}px`\n          case 'string':\n            return column.width\n          case 'function':\n            return column.width.call(this, column)\n          default:\n            return 'auto'\n        }\n      })\n      .concat(['auto'])\n      .join(' ')\n\n    /* 겉모습이 이 사실로 갈린다(위 editableGrid 주석 참조). 열이 정해지는 이 시점이 그 자리다. */\n    this.editableGrid = columns.some(column => !column.hidden && !column.gutterName && !!column.record?.editable)\n\n    this.style.setProperty('--grid-template-columns', widths)\n    /* 인쇄는 종이 폭에 맞춰 비율로 나눈다. `220px` → `220fr` 로 바뀐다. */\n    this.style.setProperty('--grid-template-print-columns', widths.replace(/px/gi, 'fr'))\n  }\n\n  render() {\n    var { pagination = {} as PaginationConfig, columns = [], filters } = this.config\n\n    var paginatable = !pagination.infinite\n    var data = this.data\n\n    return html`\n      <ox-grid-header\n        class=\"md-typescale-label-medium-prominent\"\n        .columns=${columns}\n        .sorters=${this.sorters}\n        .filters=${this.filters}\n        .data=${data}\n        ?filtering-feature=${filters?.header}\n        @column-width-change=${(e: CustomEvent) => {\n          let { idx, width } = e.detail\n          columns[idx].width = width\n          this.calculateWidths(columns)\n        }}\n        @fixed-lefts-change=${(e: CustomEvent) => (this.fixedLefts = e.detail)}\n      >\n      </ox-grid-header>\n\n      <!--\n        헤더 **다음**에 둔다. CSS 로 「헤더에 올렸을 때만」을 표현하려면 형제 선택자가 필요하고, 형제\n        선택자는 뒤쪽 형제만 고를 수 있다.\n\n        :host(:has(ox-grid-header:hover)) 로는 안 된다 — :host() 의 인수는 바깥 트리에서 평가되므로\n        섀도 트리 안의 ox-grid-header 를 보지 못한다. 실제로 그렇게 써 봤고 hover 에 반응하지 않았다.\n\n        순서를 바꿔도 보이는 자리는 같다 — 아래 스타일에서 호스트의 오른쪽 위에 절대 좌표로 붙인다.\n      -->\n      <div setting>\n        <slot name=\"setting\"></slot>\n      </div>\n\n      <ox-grid-body\n        class=\"md-typescale-body-medium\"\n        .config=${this.config}\n        .columns=${columns}\n        .data=${data}\n        .focused=${this.focused!}\n        .fixedLefts=${this.fixedLefts}\n      >\n        ${this.empty\n          ? html`\n              <!--\n                아직 아무것도 없을 때 **화면이 자기 말을 넣을 수 있다.**\n\n                전에는 「NO RECORDS」가 박혀 있었다. 그 문장은 다음에 무엇을 할지 알려 주지 않는다 —\n                비어 있는 화면이야말로 「여기서 무엇을 만들 수 있고 그것이 무엇에 쓰이나」를 말해야 하는\n                자리다. 처음 오는 사람이 가장 먼저 보는 화면이기도 하다.\n\n                화면이 config.emptyNote 로 말하고, 말하지 않으면 예전 문장이 그대로 나온다.\n              -->\n              <ox-empty-note\n                icon=${this.config?.emptyNote?.icon ?? nothing}\n                title=${this.config?.emptyNote?.title ?? i18next.t('text.grid-no-records', { defaultValue: 'NO RECORDS' })}\n                description=${this.config?.emptyNote?.description ?? nothing}\n              ></ox-empty-note>\n            `\n          : html``}\n      </ox-grid-body>\n      ${paginatable\n        ? html`\n            <!--\n              푸터에는 본문 타이프스케일을 씌우지 않는다.\n\n              그 클래스는 font 축약형으로 0.875rem 를 넣는데, **바깥 트리의 규칙이라 푸터의\n              :host { font-size } 를 이긴다**(그림자 캐스케이드에서 호스트 요소는 바깥 트리 규칙이\n              우선한다). 그래서 푸터가 자기 크기를 못 정하고 본문과 같은 14px 로 남아 있었다.\n              [재봤음] 리터럴 :host { font-size: 7px } 도 안 먹었다. 2026-09-02\n\n              푸터는 본문이 아니다. 크기는 --grid-footer-font-size 가 정한다.\n            -->\n            <ox-grid-footer\n              .data=${data}\n              .pagination=${this.pagination}\n            ></ox-grid-footer>\n          `\n        : html``}\n    `\n  }\n\n  focus() {\n    super.focus()\n\n    this.body.focus()\n  }\n\n  get pullToRefreshTarget() {\n    return this.body\n  }\n}\n"]}
+{"version":3,"file":"data-grid.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid.ts"],"names":[],"mappings":";AACA,OAAO,kBAAkB,CAAA;AACzB,OAAO,uBAAuB,CAAA;AAC9B,OAAO,qBAAqB,CAAA;AAC5B,OAAO,uBAAuB,CAAA;AAE9B,OAAO,EAAE,GAAG,EAAE,IAAI,EAA8B,OAAO,EAAC,MAAM,KAAK,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAKxD;;GAEG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,eAAe;IAAtC;;QAgKL;;;;;;;;WAQG;QACqE,iBAAY,GAAY,KAAK,CAAA;QAM5F,eAAU,GAAa,EAAE,CAAA;IA8SpC,CAAC;IA5SC,YAAY;QACV,4CAA4C;QAC5C,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE;YACzC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC;gBACpD,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAA;YAC/C,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE;YACvC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC;gBACpD,IAAI,CAAC,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAA;YAC/C,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;QACnE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;QAElF,iCAAiC;QACjC,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,CAAC,CAAC,EAAE;YAC7C,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;gBAClC,OAAM;YACR,CAAC;YAED,IAAI,EAAE,QAAQ,EAAE,GAAI,CAAiB,CAAC,MAAM,CAAA;YAC5C,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,IAAI,CAAA;YAE3B,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAA;YAE9D,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,CAAA;YAC3B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAA;QAC3B,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,CAAC,CAAC,EAAE;YACxC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAI,CAAiB,CAAC,MAAM,IAAI,EAAE,CAAA;YACvD,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,MAAM,EAAE,CAAC;gBAC9E,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,CAAA;gBAC9B,IAAI,CAAC,KAAK,EAAE,CAAA;gBACZ,IAAI,CAAC,aAAa,EAAE,CAAA;YACtB,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,YAAY,CAAC,CAAa;QACxB,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YAClD,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAA;YACpD,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,KAAK,GAAG,EAAE,CAAC,CAAA;YAErE,IAAI,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAA;YAEjE,IAAI,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,KAAK,CAAC,CAAA;YACxC,IAAI,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,KAAK,aAAa,CAAA;YAElD,oCAAoC;YACpC,6CAA6C;YAC7C,IAAI,CAAC,OAAO,IAAI,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC;gBACnD,OAAO,IAAI,CAAA;YACb,CAAC;YAED,CAAC,CAAC,cAAc,EAAE,CAAA;QACpB,CAAC;IACH,CAAC;IAED,qBAAqB,CAAC,EACpB,eAAe,EACf,KAAK,EACL,OAAO,EAKR;QACC,KAAK,CAAC,qBAAqB,CAAC,EAAE,eAAe,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAA;QAEhE,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,CAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAA;IAC3B,CAAC;IAED,eAAe,CACb,UAAuB,EACvB,GAAW,EACX,MAA2B,CAAC,mCAAmC;QAE/D,sEAAsE;QACtE,KAAK,CAAC,eAAe,CAAC,UAAU,EAAE,GAAG,EAAE,MAAM,CAAC,CAAA;QAE9C,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,CAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAA;IAC3B,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB;;;eAGG;YACH,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;YAEzC,IAAI,IAAI,CAAC,OAAO,IAAI,KAAK,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBAC1C,IAAI,EAAE,GAAG,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,OAAO,CAAA;gBAC1C,IAAI,EAAE,OAAO,EAAE,UAAU,GAAG,EAAE,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,CAAA;gBAC5D,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,IAAI,CAAA;gBAEvC,IAAI,SAAS,GAAG,UAAU,CAAC,GAAG,CAAC,CAAA;gBAE/B,IAAI,SAAS,IAAI,SAAS,KAAK,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;oBAC/C,IAAI,SAAS,GAAG,UAAU,CAAC,IAAI,CAC7B,MAAM,CAAC,EAAE;oBACP,qDAAqD;oBACrD,SAAS,KAAK,MAAM;wBACpB,CAAC,IAAI,IAAI,SAAS;4BAChB,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,SAAS,CAAC,EAAE;4BAC3B,CAAC,CAAC,MAAM,IAAI,SAAS;gCACnB,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,SAAS,CAAC,IAAI;gCAC/B,CAAC,CAAC,KAAK,CAAC,CACf,CAAA;oBAED,IAAI,CAAC,OAAO,GAAG;wBACb,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG;wBACpD,MAAM;qBACP,CAAA;gBACH,CAAC;YACH,CAAC;QACH,CAAC;aAAM,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YACjC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;QAC3C,CAAC;QAED,mDAAmD;QACnD,eAAe;IACjB,CAAC;IAED,eAAe,CAAC,OAAuB;QACrC;;;;;;;;;;;WAWG;QACH,MAAM,MAAM,GAAG,OAAO;aACnB,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;aAChC,GAAG,CAAC,MAAM,CAAC,EAAE;YACZ,QAAQ,OAAO,MAAM,CAAC,KAAK,EAAE,CAAC;gBAC5B,KAAK,QAAQ;oBACX,OAAO,GAAG,MAAM,CAAC,KAAK,IAAI,CAAA;gBAC5B,KAAK,QAAQ;oBACX,OAAO,MAAM,CAAC,KAAK,CAAA;gBACrB,KAAK,UAAU;oBACb,OAAO,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;gBACxC;oBACE,OAAO,MAAM,CAAA;YACjB,CAAC;QACH,CAAC,CAAC;aACD,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;aAChB,IAAI,CAAC,GAAG,CAAC,CAAA;QAEZ,iEAAiE;QACjE,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,WAAC,OAAA,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,UAAU,IAAI,CAAC,CAAC,CAAA,MAAA,MAAM,CAAC,MAAM,0CAAE,QAAQ,CAAA,CAAA,EAAA,CAAC,CAAA;QAE7G,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAA;QACzD,oDAAoD;QACpD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,+BAA+B,EAAE,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAA;IACvF,CAAC;IAWD,MAAM;;QACJ,IAAI,EAAE,UAAU,GAAG,EAAsB,EAAE,OAAO,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QAEhF,IAAI,WAAW,GAAG,CAAC,UAAU,CAAC,QAAQ,CAAA;QACtC,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;QAEpB;;;;;;;;;;;;;;;;;;WAkBG;QACH,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,WAAC,OAAA,CAAC,MAAM,CAAC,MAAM,KAAI,MAAA,MAAM,CAAC,MAAM,0CAAE,KAAK,CAAA,CAAA,EAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QACzF,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAA;QACtE,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,QAAQ,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,KAAI,CAAC,CAAA;QACtG,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QAC1D,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,KAAI,CAAC,CAAA;QAErF,OAAO,IAAI,CAAA;;;;qBAIM,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;wBACtB,UAAU,GAAG,KAAK;wBAClB,cAAc;;;;;mBAKnB,OAAO;mBACP,IAAI,CAAC,OAAO;mBACZ,IAAI,CAAC,OAAO;gBACf,IAAI;6BACS,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM;+BACb,CAAC,CAAc,EAAE,EAAE;YACxC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,MAAM,CAAA;YAC7B,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,KAAK,CAAA;YAC1B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAA;QAC/B,CAAC;8BACqB,CAAC,CAAc,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC;;;;;;;kBAO5D,IAAI,CAAC,MAAM;mBACV,OAAO;gBACV,IAAI;mBACD,IAAI,CAAC,OAAQ;sBACV,IAAI,CAAC,UAAU;4BACT,UAAU,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC;;UAErD,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA;qBACK,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,mCAAI,OAAO;sBAC9B,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,mCAAI,EAAE;4BACrB,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,WAAW,mCAAI,OAAO;8BACpC;YACpB,CAAC,CAAC,IAAI,CAAA,EAAE;;;;;;;;;;;;;;;;;;;;;QAqBV,WAAW;YACX,CAAC,CAAC,IAAI,CAAA;;;;;;;;;;;;sBAYQ,IAAI;4BACE,IAAI,CAAC,UAAU;;WAEhC;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;KACX,CAAA;IACH,CAAC;IAED,KAAK;QACH,KAAK,CAAC,KAAK,EAAE,CAAA;QAEb,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;IACnB,CAAC;IAED,IAAI,mBAAmB;QACrB,OAAO,IAAI,CAAC,IAAI,CAAA;IAClB,CAAC;;AA3dM,eAAM,GAAG;IACd,iBAAiB;IACjB,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiJF;CACF,AArJY,CAqJZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAA0C;AACxC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCAAgB;AAGhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAmE;AAatB;IAAvE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;8CAA8B;AAExE;IAA5B,KAAK,CAAC,cAAc,EAAE,IAAI,CAAC;sCAAkB;AACf;IAA9B,KAAK,CAAC,gBAAgB,EAAE,IAAI,CAAC;wCAAwB;AACvB;IAA9B,KAAK,CAAC,gBAAgB,EAAE,IAAI,CAAC;wCAAoB;AAEzC;IAAR,KAAK,EAAE;4CAA0B;AAiLmB;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;2CAAmB;AAhW5D,QAAQ;IADpB,aAAa,CAAC,SAAS,CAAC;GACZ,QAAQ,CA6dpB","sourcesContent":["import i18next from 'i18next'\nimport '../empty-note.js'\nimport './data-grid-header.js'\nimport './data-grid-body.js'\nimport './data-grid-footer.js'\n\nimport { css, html, LitElement, PropertyValues, nothing} from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { DataManipulator } from '../data-manipulator.js'\nimport { ColumnConfig, GristRecord, PaginationConfig } from '../types.js'\n// import { supportsPassive } from '../utils/index.js'\nimport { DataGridHeader } from './data-grid-header.js'\n\n/**\n * DataGrid\n */\n@customElement('ox-grid')\nexport class DataGrid extends DataManipulator {\n  static styles = [\n    MDTypeScaleStyles,\n    ScrollbarStyles,\n    css`\n      /*\n       * ── 고치는 표만 셀을 겨눈다 ─────────────────────────────────────────\n       *\n       * 셀 하나를 가리키는 점선과 열 폭 조절 손잡이는 **고칠 셀을 겨누는 장치**다. 기본 겉모습에서는\n       * 둘을 두지 않는다(data-grist.ts 와 같은 값). 고칠 수 있는 열이 하나라도 있으면 여기서 되살린다.\n       *\n       * 화면이 고르는 모드가 아니다 — 표가 스스로 아는 사실이다(위 editableGrid 주석 참조).\n       */\n      :host([editable-grid]) {\n        --grid-record-focused-cell-border: 1px dashed var(--ui-faint, #8a959c);\n        /*\n         * 정렬 표식의 자리는 이 값에서 **파생된다** — 손잡이가 보이면 표식이 칸 오른쪽 끝으로 가고,\n         * 안 보이면 이름에 붙는다(data-grid-header.ts 의 스타일 질의). 여기서 따로 정하지 않는다.\n         */\n        --grid-header-splitter-display: flex;\n        /*\n         * ── 지나는 줄 표시를 **비우지 않는다** ──────────────────────────────\n         *\n         * 여기 hover 색을 transparent 로 두었었다. 「점선 셀 테두리가 이미 「지금 여기」를 말하므로\n         * 줄 배경까지 움직일 필요가 없다」는 뜻이었는데, **그 값은 「칠하지 않는다」가 아니라\n         * 「칸의 색을 지운다」였다.**\n         *\n         * 칸은 자기 바탕을 갖는다(흰색). 그것을 지우면 그 자리에 **구멍이 뚫려 표 뒤의 페이지가\n         * 비친다.** 이 앱에서 그 색이 회색이라(rgb 240·242·244) 회색 띠처럼 보였고, 그래서\n         * 「지나는 줄 표시」가 실제로는 있었다 — 아무도 정하지 않은 색으로.\n         *\n         * 그리고 **고정 열에서 그 띠가 끊긴다.** 고정 열은 스크롤되는 열 위에 떠 있어야 하니\n         * 불투명해야 하고, 그래서 구멍이 안 뚫린다. 줄 하나가 두 색으로 갈렸다.\n         *\n         * 표 뒤에 무엇이 있느냐로 줄 색이 정해지는 것 자체가 결함이다. 어두운 페이지에 이 표를\n         * 놓으면 마우스를 올린 줄이 검게 된다.\n         *\n         * 그래서 이 예외를 걷는다. 모든 표가 같은 hover 색을 쓰고, 그 색은 칸마다 실제로 칠하는\n         * 색이므로 고정 열에도 똑같이 걸린다.\n         */\n      }\n\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        /* div[setting] 의 절대 좌표 기준. */\n        position: relative;\n        overflow: hidden;\n\n        border-width: var(--grid-container-border-width);\n      }\n\n      /*\n       * 표 감싸개(role=grid) — 상자를 만들지 않는다. 머리와 몸은 그대로 호스트의 flex 항목으로\n       * 남는다.\n       */\n      div[grid] {\n        display: contents;\n      }\n\n      ox-grid-body {\n        flex: 1;\n        position: relative;\n\n        font-variation-settings: 'FILL' 1;\n      }\n\n      ox-grid-header {\n        font-variation-settings: 'FILL' 1;\n      }\n\n      ox-grid-footer {\n        font-variation-settings: 'FILL' 1;\n      }\n\n      ox-empty-note {\n        display: block;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n      }\n\n      /*\n       * 컬럼 설정 버튼은 **헤더에 마우스를 올릴 때만** 보인다.\n       *\n       * 늘 보이면 목록 화면마다 오른쪽 위에 눈에 걸리는 것이 하나 생긴다. 자주 쓰는 것도 아니다.\n       *\n       * 감춰 있는 동안에는 pointer-events 도 끈다 — 안 보이는데 눌리는 자리가 있으면, 헤더의 마지막\n       * 컬럼을 누르려던 사람이 엉뚱한 팝업을 만난다.\n       *\n       * 세 갈래로 켠다.\n       *   헤더에 올렸을 때        :has(ox-grid-header:hover)\n       *   버튼 자체에 올렸을 때   버튼이 헤더 위에 떠 있으므로, 커서가 버튼으로 옮겨오면 헤더는 더 이상\n       *                          hover 가 아니다. 이 갈래가 없으면 커서 아래에서 사라진다\n       *   키보드 초점            focus-within\n       */\n      div[setting] {\n        /*\n         * 크기 없이 호스트의 오른쪽 위에 붙는다. 안에 들어오는 버튼이 [slot='setting'] 규칙으로\n         * top: -3px · right: 0 을 스스로 잡으므로, 이 div 는 기준점 노릇만 한다.\n         */\n        position: absolute;\n        top: 0;\n        right: 0;\n        width: 0;\n        height: 0;\n        z-index: 5;\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity 0.12s ease-out;\n      }\n\n      /*\n       * 버튼 자체에 올렸을 때도 켜 둔다. 버튼이 헤더 위에 떠 있어서, 커서가 버튼으로 옮겨오면 헤더는\n       * 더 이상 hover 가 아니다. 이 갈래가 없으면 커서 아래에서 사라진다.\n       */\n      div[grid]:has(ox-grid-header:hover) + div[setting],\n      div[setting]:hover,\n      div[setting]:focus-within {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      /*\n       * 손가락으로 쓰는 장치 — hover 가 없으므로 감추면 닿을 방법이 없다. 늘 두고 평소에는 흐리게,\n       * 누르는 동안 선명하게 한다.\n       *\n       * 화면 폭이 아니라 입력 장치로 구분한다. 창을 좁힌 데스크톱은 여기에 걸리지 않고, 큰 태블릿은\n       * 폭이 넓어도 걸린다.\n       */\n      @media (pointer: coarse) {\n        div[setting] {\n          opacity: 0.35;\n          pointer-events: auto;\n        }\n\n        div[setting]:active,\n        div[setting]:focus-within {\n          opacity: 1;\n        }\n      }\n\n      @media print {\n        :host {\n          zoom: 80%;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) focused?: { row: number; column: number }\n  @property({ type: Boolean }) empty?: boolean\n\n  /** 비었을 때 무슨 말을 하나 — 판단은 data-grist 가 하고 여기서는 그리기만 한다. */\n  @property({ type: Object }) emptyNote?: { icon?: string; title: string; description?: string }\n\n\n\n  /**\n   * 이 표에 고칠 수 있는 열이 하나라도 있는지. **겉모습이 이것으로 달라진다.**\n   *\n   * 셀 하나를 가리키는 점선과 열 폭 조절 손잡이는 **고칠 셀을 겨누는 장치**다. 고치지 않는 목록에서는\n   * 셀 하나가 뜻을 갖지 않아, 줄을 고르려고 누른 자리에 점선이 남고 세로 선이 줄 읽기를 방해한다.\n   *\n   * 그래서 모드를 따로 두지 않는다. 화면이 고를 일이 아니라 **표가 스스로 아는 사실**이다 —\n   * 열에 `record.editable` 이 있으면 고치는 표다.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'editable-grid' }) editableGrid: boolean = false\n\n  @query('ox-grid-body', true) body!: LitElement\n  @query('ox-grid-header', true) header!: DataGridHeader\n  @query('ox-grid-footer', true) footer!: LitElement\n\n  @state() fixedLefts: number[] = []\n\n  firstUpdated() {\n    /* header and body scroll synchronization */\n    this.header.addEventListener('scroll', e => {\n      if (this.body.scrollLeft !== this.header.scrollLeft) {\n        this.body.scrollLeft = this.header.scrollLeft\n      }\n    })\n\n    this.body.addEventListener('scroll', e => {\n      if (this.body.scrollLeft !== this.header.scrollLeft) {\n        this.header.scrollLeft = this.body.scrollLeft\n      }\n    })\n\n    this.header.addEventListener('wheel', this.onWheelEvent.bind(this))\n    this.footer && this.footer.addEventListener('wheel', this.onWheelEvent.bind(this))\n\n    /* record selection processing */\n    this.addEventListener('select-all-change', e => {\n      if (this.data.records.length == 0) {\n        return\n      }\n\n      var { selected } = (e as CustomEvent).detail\n      var { records } = this.data\n\n      records.forEach(record => (record['__selected__'] = selected))\n\n      this.header.requestUpdate()\n      this.body.requestUpdate()\n    })\n\n    this.addEventListener('focus-change', e => {\n      const { row, column } = (e as CustomEvent).detail || {}\n      if (!this.focused || this.focused.row != row || this.focused.column != column) {\n        this.focused = { row, column }\n        this.focus()\n        this.requestUpdate()\n      }\n    })\n  }\n\n  onWheelEvent(e: WheelEvent) {\n    if (this.body.scrollWidth > this.body.clientWidth) {\n      var delta = Math.max(-1, Math.min(1, e.deltaY || 0))\n      this.body.scrollLeft = Math.max(0, this.body.scrollLeft - delta * 30)\n\n      var maxScrollLeft = this.body.scrollWidth - this.body.clientWidth\n\n      var atStart = this.body.scrollLeft === 0\n      var atEnd = this.body.scrollLeft === maxScrollLeft\n\n      // 스크롤이 맨 앞으로 와 있는 상태에서 휠을 올리는 경우 또는\n      // 스크롤이 맨 끝으로 가 있는 상태에서 휠을 내리는 경우에만 디폴트 동작 허용\n      if ((atStart && delta > 0) || (atEnd && delta < 0)) {\n        return true\n      }\n\n      e.preventDefault()\n    }\n  }\n\n  onSelectRecordChanged({\n    selectedRecords,\n    added,\n    removed\n  }: {\n    selectedRecords: GristRecord[]\n    added: GristRecord[]\n    removed: GristRecord[]\n  }): void {\n    super.onSelectRecordChanged({ selectedRecords, added, removed })\n\n    this.header.requestUpdate()\n    this.body.requestUpdate()\n  }\n\n  onRecordChanged(\n    recordData: GristRecord,\n    row: number,\n    column: ColumnConfig | null /* TODO column should be removed */\n  ) {\n    /* record-viewer 등 grid 외에서 변경되는 경우에도 header와 body를 refresh 하도록 한다. */\n    super.onRecordChanged(recordData, row, column)\n\n    this.header.requestUpdate()\n    this.body.requestUpdate()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('data')) {\n      /*\n       * 데이타 내용에 따라 동적으로 컬럼의 폭이 달라지는 경우(예를 들면, sequence field)가 있으므로,\n       * data의 변동에 대해서도 다시 계산되어야 한다.\n       */\n      this.calculateWidths(this.config.columns)\n\n      if (this.focused && 'row' in this.focused) {\n        var { row = 0, column = 0 } = this.focused\n        var { records: oldrecords = [] } = changes.get('data') || {}\n        var { records: newrecords } = this.data\n\n        var oldrecord = oldrecords[row]\n\n        if (oldrecord && oldrecord !== newrecords[row]) {\n          var newrecord = newrecords.find(\n            record =>\n              /* TODO keyfields를 정의하고, keyfields의 동일성으로 확정해야 한다. */\n              oldrecord === record ||\n              ('id' in oldrecord\n                ? record.id == oldrecord.id\n                : 'name' in oldrecord\n                  ? record.name == oldrecord.name\n                  : false)\n          )\n\n          this.focused = {\n            row: newrecord ? newrecords.indexOf(newrecord) : row,\n            column\n          }\n        }\n      }\n    } else if (changes.has('config')) {\n      this.calculateWidths(this.config.columns)\n    }\n\n    /* grid fetch 후에 grid로 focus를 주어야 하는 지 검토가 필요하다. */\n    // this.focus()\n  }\n\n  calculateWidths(columns: ColumnConfig[]) {\n    /*\n     * 컬럼 모델 마지막에 'auto' cell을 추가하여, 자투리 영역을 꽉 채워서 표시한다.\n     *\n     * 숫자로 준 폭은 **그 폭 그대로** 쓴다. 합이 보이는 폭보다 크면 표는 가로로 넘치고, 나머지는\n     * 가로 스크롤로 본다 — 표의 정상 거동이다.\n     *\n     * 한때 minmax(0, Npx) 로 두어 넘칠 때 열들이 함께 줄게 했다가 되돌렸다. 그렇게 하면 어떤 표도\n     * 가로로 넘치지 않으므로 **가로 스크롤이 아예 사라진다.** 열 열다섯 개를 700px 에 밀어 넣으면\n     * 모든 열이 못 읽을 만큼 좁아지고, 화면은 그것을 알릴 방법이 없다.\n     *\n     * 열이 좁아 잘리는 것은 화면이 열 폭을 정해서 풀 일이다 — 부품이 대신 줄이면 화면의 뜻이 사라진다.\n     */\n    const widths = columns\n      .filter(column => !column.hidden)\n      .map(column => {\n        switch (typeof column.width) {\n          case 'number':\n            return `${column.width}px`\n          case 'string':\n            return column.width\n          case 'function':\n            return column.width.call(this, column)\n          default:\n            return 'auto'\n        }\n      })\n      .concat(['auto'])\n      .join(' ')\n\n    /* 겉모습이 이 사실로 달라진다(위 editableGrid 주석 참조). 열이 정해지는 이 시점이 그 자리다. */\n    this.editableGrid = columns.some(column => !column.hidden && !column.gutterName && !!column.record?.editable)\n\n    this.style.setProperty('--grid-template-columns', widths)\n    /* 인쇄는 종이 폭에 맞춰 비율로 나눈다. `220px` → `220fr` 로 바뀐다. */\n    this.style.setProperty('--grid-template-print-columns', widths.replace(/px/gi, 'fr'))\n  }\n\n  /**\n   * 이 표의 이름 — `<ox-grid aria-label=\"입고 대기 목록\">` 처럼 쓰는 쪽이 정한다.\n   *\n   * role=grid 는 안쪽 감싸개에 걸려 있어서 호스트에 적은 aria-label 이 거기까지 닿지 않는다.\n   * 그래서 값을 받아 넘긴다. 이름을 여기서 지어내지는 않는다 — 한 화면에 표가 여럿일 때\n   * 무엇을 보는 표인지는 화면이 아는 것이고, 부품이 지어낼 수 있는 것이 아니다.\n   */\n  @property({ type: String, attribute: 'aria-label' }) gridLabel?: string\n\n  render() {\n    var { pagination = {} as PaginationConfig, columns = [], filters } = this.config\n\n    var paginatable = !pagination.infinite\n    var data = this.data\n\n    /*\n     * ── 표를 표라고 선언한다 (2026-09-06) ─────────────────────────────────\n     *\n     * 이 표에는 role 이 하나도 없었다(전체 소스에 aria- 가 페이지 번호 하나뿐이었다). 그래서\n     * 스크린 리더에게 이 화면은 **입력칸이 잔뜩 늘어선 더미**였다. 칸마다 이름을 손으로 붙여도\n     * 「여기가 표다」 「지금 3행 3열이다」 「전체는 40행이다」는 여전히 말하지 못한다.\n     * 표에서 하는 일은 훑고 견주는 것인데, 그 조작 자체가 없는 것이다.\n     *\n     * role=grid 를 세우면 칸의 이름을 아무 데도 안 적어도 **열 머리가 그 칸의 이름이 된다** —\n     * HTML table 이 원래 그렇게 동작하고, 표준이 그렇게 설계된 이유가 이것이다.\n     *\n     * ── 왜 감싸개가 하나 더 필요한가 ──────────────────────────────────────\n     * grid 안에는 줄(또는 줄 묶음)만 들어갈 수 있다. 그런데 이 요소 밑에는 설정 단추 자리와\n     * 페이지 넘김도 있어서, 호스트에 role 을 걸면 표 안에 표가 아닌 것이 섞인다. 보조기술은 그때\n     * 표 읽기 모드를 포기한다.\n     *\n     * 그래서 머리와 몸만 감싼다. display: contents 라 상자를 만들지 않으므로 세로 flex 배치는\n     * 그대로다.\n     */\n    const headerRows = columns.some(column => !column.hidden && column.header?.group) ? 2 : 1\n    const visibleColumns = columns.filter(column => !column.hidden).length\n    const total = typeof data.total == 'number' && data.total > 0 ? data.total : data.records?.length || 0\n    const page = Number(data.page) > 0 ? Number(data.page) : 1\n    const limit = Number(data.limit) > 0 ? Number(data.limit) : data.records?.length || 0\n\n    return html`\n      <div\n        grid\n        role=\"grid\"\n        aria-label=${ifDefined(this.gridLabel)}\n        aria-rowcount=${headerRows + total}\n        aria-colcount=${visibleColumns}\n      >\n      <ox-grid-header\n        role=\"rowgroup\"\n        class=\"md-typescale-label-medium-prominent\"\n        .columns=${columns}\n        .sorters=${this.sorters}\n        .filters=${this.filters}\n        .data=${data}\n        ?filtering-feature=${filters?.header}\n        @column-width-change=${(e: CustomEvent) => {\n          let { idx, width } = e.detail\n          columns[idx].width = width\n          this.calculateWidths(columns)\n        }}\n        @fixed-lefts-change=${(e: CustomEvent) => (this.fixedLefts = e.detail)}\n      >\n      </ox-grid-header>\n\n      <ox-grid-body\n        role=\"rowgroup\"\n        class=\"md-typescale-body-medium\"\n        .config=${this.config}\n        .columns=${columns}\n        .data=${data}\n        .focused=${this.focused!}\n        .fixedLefts=${this.fixedLefts}\n        .ariaRowIndexBase=${headerRows + (page - 1) * limit + 1}\n      >\n        ${this.empty\n          ? html`<ox-empty-note\n              icon=${this.emptyNote?.icon ?? nothing}\n              title=${this.emptyNote?.title ?? ''}\n              description=${this.emptyNote?.description ?? nothing}\n            ></ox-empty-note>`\n          : html``}\n      </ox-grid-body>\n      </div>\n\n      <!--\n        표 **다음**에 둔다. CSS 로 「머리에 올렸을 때만」을 표현하려면 형제 선택자가 필요하고, 형제\n        선택자는 뒤쪽 형제만 고를 수 있다.\n\n        :host(:has(ox-grid-header:hover)) 로는 안 된다 — :host() 의 인수는 바깥 트리에서 평가되므로\n        섀도 트리 안의 ox-grid-header 를 보지 못한다. 실제로 그렇게 써 봤고 hover 에 반응하지 않았다.\n        표 감싸개에 건 :has() 는 섀도 트리 안에서 평가되므로 문제가 없다.\n\n        설정 단추는 표의 일부가 아니라 표를 **다루는** 것이라 role=grid 안에 두지 않는다 — grid 안에는\n        줄만 들어갈 수 있고, 아닌 것이 섞이면 보조기술이 표 읽기 모드를 포기한다.\n\n        순서를 바꿔도 보이는 자리는 같다 — 아래 스타일에서 호스트의 오른쪽 위에 절대 좌표로 붙인다.\n      -->\n      <div setting>\n        <slot name=\"setting\"></slot>\n      </div>\n\n      ${paginatable\n        ? html`\n            <!--\n              푸터에는 본문 타이프스케일을 씌우지 않는다.\n\n              그 클래스는 font 축약형으로 0.875rem 를 넣는데, **바깥 트리의 규칙이라 푸터의\n              :host { font-size } 를 이긴다**(그림자 캐스케이드에서 호스트 요소는 바깥 트리 규칙이\n              우선한다). 그래서 푸터가 자기 크기를 못 정하고 본문과 같은 14px 로 남아 있었다.\n              [확인함] 리터럴 :host { font-size: 7px } 도 안 먹었다. 2026-09-02\n\n              푸터는 본문이 아니다. 크기는 --grid-footer-font-size 가 정한다.\n            -->\n            <ox-grid-footer\n              .data=${data}\n              .pagination=${this.pagination}\n            ></ox-grid-footer>\n          `\n        : html``}\n    `\n  }\n\n  focus() {\n    super.focus()\n\n    this.body.focus()\n  }\n\n  get pullToRefreshTarget() {\n    return this.body\n  }\n}\n"]}

package/dist/src/data-grist.d.ts

@@ -22,6 +22,13 @@ export declare class DataGrist extends LitElement implements DataConsumer {
      * @property {string}
      */
     mode: 'GRID' | 'LIST' | 'CARD';
+    /**
+     * 이 표의 이름 — `<ox-grist aria-label="입고 대기 목록">` 처럼 쓰는 쪽이 정한다.
+     *
+     * role=grid 는 안쪽 감싸개에 붙어 있어서 호스트에 적은 aria-label 이 거기까지 닿지 않는다.
+     * 그래서 값을 받아 ox-grid 로 넘긴다.
+     */
+    gridLabel?: string;
     /**
      * The configuration object for the data grist.
      *
@@ -92,6 +99,13 @@ export declare class DataGrist extends LitElement implements DataConsumer {
     _data: GristData;
     _config: GristConfig;
     private _showSpinner;
+    /**
+     * 한 번이라도 조회했는가. 빈 목록에 대한 안내를 낼지 이 값이 정한다.
+     *
+     * 조회 전에도 records 는 비어 있다. 그러나 그것은 「없다」가 아니라 「아직 모른다」이다.
+     * 둘을 같게 두면 확인하지 않은 사실을 화면이 단정하게 된다.
+     */
+    private _fetched;
     head: HTMLElement;
     grist: DataGrid | DataList | DataCard;
     private wrap;
@@ -305,6 +319,24 @@ export declare class DataGrist extends LitElement implements DataConsumer {
      * @method
      * @public
      */
+    /**
+     * 목록이 비었을 때 무슨 말을 하나. **판단은 여기서 한 번만** 한다.
+     *
+     * 모드가 셋이고(GRID · CARD · LIST) 셋 다 자기 자리에 안내를 그린다. 판단까지 각자 하면 세 벌이
+     * 되고, 실제로 그랬다 — 셋이 같은 문장을 하드코딩하고 있었다. 여기서 정해 내려보낸다.
+     *
+     * ── 빈 목록은 두 가지 다른 사실을 말해야 한다 ──────────────────────────────
+     *
+     *   아직 아무것도 없다    이 표에 만들어진 것이 없다
+     *   찾는 것이 없다        찾거나 걸러 본 결과가 없다
+     *
+     * 합치면 결함이 「고를 게 없다」로 보인다. 질의가 빈 배열을 내는데 화면이 「해당하는 것이
+     * 없습니다」라고 말하면 아무도 그것이 결함인 줄 모른다.
+     *
+     * 조건이 걸렸을 때는 **화면이 준 emptyNote 를 쓰지 않는다.** 그 말은 「아직 없다」를 위해 쓴
+     * 것이라 조건이 걸린 자리에서는 거짓이 된다.
+     */
+    private noteWhenEmpty;
     reset(): void;
     private traverseReset;
     private traverseExpanded;