@operato/data-grist 10.5.0 → 10.7.0

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

@@ -4,7 +4,7 @@ import '../empty-note.js';
 import './data-grid-header.js';
 import './data-grid-body.js';
 import './data-grid-footer.js';
-import { css, html } from 'lit';
+import { css, html, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
 import { ScrollbarStyles } from '@operato/styles';
@@ -157,6 +157,7 @@ let DataGrid = class DataGrid extends DataManipulator {
         this.style.setProperty('--grid-template-print-columns', widths.replace(/px/gi, 'fr'));
     }
     render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         var { pagination = {}, columns = [], filters } = this.config;
         var paginatable = !pagination.infinite;
         var data = this.data;
@@ -198,12 +199,38 @@ let DataGrid = class DataGrid extends DataManipulator {
         .focused=${this.focused}
         .fixedLefts=${this.fixedLefts}
       >
-        ${this.empty ? html ` <ox-empty-note title=${i18next.t('text.grid-no-records', { defaultValue: 'NO RECORDS' })}></ox-empty-note> ` : html ``}
+        ${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 `
+            <!--
+              푸터에는 본문 타이프스케일을 씌우지 않는다.
+
+              그 클래스는 font 축약형으로 0.875rem 를 넣는데, **바깥 트리의 규칙이라 푸터의
+              :host { font-size } 를 이긴다**(그림자 캐스케이드에서 호스트 요소는 바깥 트리 규칙이
+              우선한다). 그래서 푸터가 자기 크기를 못 정하고 본문과 같은 14px 로 남아 있었다.
+              [재봤음] 리터럴 :host { font-size: 7px } 도 안 먹었다. 2026-09-02
+
+              푸터는 본문이 아니다. 크기는 --grid-footer-font-size 가 정한다.
+            -->
             <ox-grid-footer
-              class="md-typescale-body-medium"
               .data=${data}
               .pagination=${this.pagination}
             ></ox-grid-footer>
@@ -233,7 +260,16 @@ DataGrid.styles = [
        */
       :host([editable-grid]) {
         --grid-record-focused-cell-border: 1px dashed var(--ui-faint, #8a959c);
+        /*
+         * 정렬 표식의 자리는 이 값에서 **파생된다** — 손잡이가 보이면 표식이 칸 오른쪽 끝으로 가고,
+         * 안 보이면 이름에 붙는다(data-grid-header.ts 의 스타일 질의). 여기서 따로 정하지 않는다.
+         */
         --grid-header-splitter-display: flex;
+        /*
+         * 지나는 줄 표시를 비운다. 여기서는 점선 셀 테두리가 이미 「지금 여기」를 말하고, 줄 배경까지
+         * 함께 움직이면 눈이 둘을 따라가야 한다.
+         */
+        --grid-record-hover-background-color: transparent;
       }
 
       :host {

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 } 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        --grid-header-splitter-display: flex;\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 ? html` <ox-empty-note title=${i18next.t('text.grid-no-records', { defaultValue: 'NO RECORDS' })}></ox-empty-note> ` : html``}\n      </ox-grid-body>\n      ${paginatable\n        ? html`\n            <ox-grid-footer\n              class=\"md-typescale-body-medium\"\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":"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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         */\n        --grid-record-hover-background-color: transparent;\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"]}

package/dist/src/data-grist.js

@@ -288,9 +288,22 @@ let DataGrist = class DataGrist extends LitElement {
             this.headResizeObserver = new ResizeObserver(() => this.applyHeadOffset());
             this.headResizeObserver.observe(this.head);
         }
-        else if (this.orginPaddingTop) {
-            this.grist.style.paddingTop = this.orginPaddingTop;
-            this.grist.style.marginTop = this.originMarginTop;
+        else if (this.grist) {
+            /*
+             * 머리를 감췄으면 **밀어 둔 값을 지운다.** 저장해 둔 「원래 값」을 되돌리지 않는다.
+             *
+             * 그 변수들은 믿을 수 없다 — 미는 쪽(onTop · onNotTop)이 같은 변수에 **밀어 놓은 값을** 다시
+             * 담는다. 그래서 감출 때 되돌릴 값이 이미 오염돼 있다.
+             *
+             * [재봤음] 머리를 감춰도 표가 그대로였다. 2026-09-02
+             *
+             *   전        머리 78px   margin-top 78px   표 시작 191
+             *   감춘 뒤    머리 0px    margin-top 78px   표 시작 191   ← 안 움직인다
+             *
+             * 인라인 값을 지우면 CSS 가 정한 값으로 돌아간다. 머리가 없을 때 옳은 값은 그것뿐이다.
+             */
+            this.grist.style.removeProperty('margin-top');
+            this.grist.style.removeProperty('padding-top');
         }
     }
     render() {
@@ -1054,11 +1067,37 @@ DataGrist.styles = [
          */
         --grid-header-top-border: 1px solid var(--ui-line, #d5dce0);
         --grid-header-bottom-border: 1px solid var(--ui-line, #d5dce0);
-        --grid-header-padding: 8px 10px;
+        /*
+         * 머리와 몸의 여백은 **같은 값이다.** 1px 이라도 다르면 머리글과 첫 줄의 리듬이 어긋난다.
+         *
+         * 9px 에서 7px 로 내렸다. 한 줄 표는 40 → 36px, 세 줄 표는 74 → 70px 이 되고, 줄과 줄 사이는
+         * 안 변한다 — 그것은 셀 여백이 아니라 .sub 의 margin-top 이다. [재봤음] 2026-09-02
+         *
+         * 이 화면들이 하는 일은 훑고 고치는 것이라 한 화면에 줄이 많을수록 낫다.
+         */
+        --grid-header-padding: 7px 10px;
         --grid-header-color: var(--ui-muted, #57676f);
-        --grid-header-font: 600 var(--ui-t-micro, 11px) / 1 var(--ui-mono, ui-monospace, Menlo, monospace);
-        --grid-header-text-transform: uppercase;
-        --grid-header-letter-spacing: 0.07em;
+        /*
+         * ── 머리글은 라틴 전용 설정이었다 (2026-09-02) ──────────────────────
+         * 전에는 600 11px/1 고정폭 · uppercase · 자간 0.07em 이었다. NAME · DESCRIPTION 같은 영문
+         * 머리글에는 맞는 조합이지만 한글에는 셋 다 어긋난다.
+         *
+         *   uppercase   한글에는 아무 일도 하지 않는다. 라틴 머리글만 대문자가 되어 규칙이 섞인다
+         *   고정폭       한글 글자가 없어 대체 글꼴로 떨어진다 — 한 줄에 두 글꼴이 그려진다
+         *   자간 0.07em  11px 에서 글자마다 0.77px. 「ISA-95 계층 단」이 140px 칸에서 잘렸다
+         *
+         * 그리고 11px 은 푸터(13px)보다 작았다. 머리는 값의 이름이고 푸터는 보조 정보인데 위계가
+         * 뒤집혀 있었다. 이제 **본문 14 › 머리 13 = 푸터 13** 이고, 머리는 크기가 아니라 굵기와
+         * 바탕색으로 구별된다.
+         */
+        /*
+         * 축약형은 글꼴 이름을 반드시 요구한다. 없이 두면 선언이 통째로 버려진다 — 실제로 그렇게 되어
+         * 물려받은 12px/700 이 나왔다. 여기 적는 sans-serif 는 자리를 채우는 값이고, 바로 뒤의
+         * font-family(기본 inherit)가 덮는다.
+         */
+        --grid-header-font: 600 13px / 1.2 sans-serif;
+        --grid-header-text-transform: none;
+        --grid-header-letter-spacing: 0.01em;
         --grid-header-sorter-size: 14px;
         --grid-header-mark-size: 14px;
         /* 세로 선을 그리는 것이 폭 조절 손잡이다 — 감추면 둘이 함께 사라진다. */
@@ -1066,16 +1105,58 @@ DataGrist.styles = [
 
         --grid-record-background-color: var(--ui-panel, #ffffff);
         --grid-record-odd-background-color: var(--ui-panel, #ffffff);
-        --grid-record-padding: 9px 10px;
+        --grid-record-padding: 7px 10px;
         --grid-record-color: var(--ui-ink, #17242c);
         --grid-record-border-bottom: 1px solid var(--ui-line-soft, #e6eaed);
+        /*
+         * 마우스가 지나는 줄. **고른 줄보다 훨씬 옅다** — 지나는 것은 사실이 아니라 눈이 어디 있는지
+         * 알려 주는 것뿐이다.
+         *
+         * 읽기 전용 표에만 쓴다. 고치는 표는 점선 셀 테두리가 그 일을 하고, 거기서는 이 값을 비운다
+         * (data-grid.ts) — 둘이 함께 있으면 시끄럽다.
+         *
+         * ── 면의 단계에서 가져온다 ───────────────────────────────────────────
+         * 줄은 흰 바탕이고 표 바깥은 회색이다. 그 사이에 자리를 잡아야 한다 — 흰 줄과 구별되면서 「줄이
+         * 없는 자리」로도 안 읽혀야 한다.
+         *
+         *   흰 줄                        255 255 255
+         *   surface-container-low        247 248 250   이것 — 줄보다 살짝 눌리고
+         *   표 바깥(surface-container)    240 242 244   바깥보다는 밝다
+         *
+         * 잉크를 얹는 방식으로도 해 봤는데, 겹치지 않을 만큼 진하게 하면(10%) 232 233 234 로 **바깥보다
+         * 어두워져** 무겁게 느껴졌다. 옅게 하면(6%) 바깥과 정확히 겹쳤다. [재봤음] 2026-09-02
+         *
+         * 면 단계를 쓰면 그 사이에 자리가 잡히고, **어두운 모드에서 함께 뒤집힌다** — 색을 직접 적으면
+         * 어두운 줄에 잉크를 얹어 보이지 않게 된다.
+         */
+        --grid-record-hover-background-color: var(--md-sys-color-surface-container-low, #f7f8fa);
         /* 초점 표식을 없앤다. outline 으로 그리므로 줄 선은 그대로 남는다. */
         --grid-record-focused-cell-border: none;
         --grid-record-focused-box-shadow: none;
 
+        /*
+         * ── 푸터는 표의 셋째 위계다 ────────────────────────────────────────
+         * 머리글 11px · 본문 14px · 푸터 13px. 전에는 푸터가 본문과 같은 14px 이라 쪽 이동과 건수가
+         * 값만큼 눈에 걸렸다. 푸터가 말하는 것은 「지금 어디를 보고 있나」이지 값이 아니다.
+         */
         --grid-footer-background-color: var(--ui-bg, #f6f7f9);
+        --grid-footer-font-size: 13px;
+        /* 지금 고른 것 — 이 색에 굵기가 더해진다. */
         --grid-footer-color: var(--ui-muted, #57676f);
-        --grid-footer-padding: 8px 12px;
+        /* 누를 수 있지만 지금 것이 아닌 것. 한 단 흐리다. */
+        --grid-footer-limit-color: var(--ui-faint, #8a959c);
+        /*
+         * 쪽 번호 입력 상자의 테두리.
+         *
+         * 전에는 --grid-footer-color(본문 글자색)를 썼다. 그래서 40×21 짜리 상자 하나가 **표의 어떤
+         * 경계선보다 진했다.** 행 아래선 #e6eaed · 머리 구분선 #d6dbe0 인데 상자만 #57676f 였다.
+         */
+        --grid-footer-input-border: 1px solid var(--ui-line, #d6dbe0);
+        /*
+         * 푸터는 표에 **붙어 있어야 한다.** 8px 위아래로 띄웠더니 표와 따로 떠 있는 띠로 보였다.
+         * 이 줄이 말하는 것(몇 쪽 · 몇 건)은 바로 위 표에 대한 것이라 표에 붙는 편이 읽힌다.
+         */
+        --grid-footer-padding: 3px 6px;
       }
 
       :host {