@operato/data-grist 10.5.0 → 10.6.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.6.0](https://github.com/hatiolab/operato/compare/v10.5.0...v10.6.0) (2026-09-02)
+
+
+### :rocket: New Features
+
+* **data-grist:** 값과 표식을 한 줄에 담는 .line ([1c1e91c](https://github.com/hatiolab/operato/commit/1c1e91ca308cb9bc0de201ba1abcbd61d2ccd938))
+* **data-grist:** 셀 안 아이콘 단추 · 거터 머리 정렬 · 빈 화면 문구 ([c9b5a11](https://github.com/hatiolab/operato/commit/c9b5a110b3d6c312b1d76779fd6b97cdda5aeb1b))
+
+
+### :sparkles: Styling
+
+* **data-grist:** 머리글 · 푸터의 위계를 세우고 행 높이를 되돌린다 ([8c29e0b](https://github.com/hatiolab/operato/commit/8c29e0b04538a84a42de6713ce296fdbdc0817e8)), closes [#57676](https://github.com/hatiolab/operato/issues/57676) [#d6dbe0](https://github.com/hatiolab/operato/issues/d6dbe0) [#5f5f5](https://github.com/hatiolab/operato/issues/5f5f5) [#86909](https://github.com/hatiolab/operato/issues/86909)
+* **data-grist:** 숫자는 오른쪽으로 · 셀 여백을 7px 로 ([d066d88](https://github.com/hatiolab/operato/commit/d066d885e1842e09232487d55795acc67e3c6ebe))
+
+
+### :bug: Bug Fix
+
+* **data-grist,input:** 날짜는 앱 언어를 따른다 · 거르개는 목록보다 조용하다 ([1022153](https://github.com/hatiolab/operato/commit/10221535e5a2ea9699443a64109a16fdeefc1926))
+* **data-grist:** 재사용된 셀의 낡은 정렬 · 머리글 정렬 · 헤드룸을 감출 때 표가 넓어지지 않던 것 ([475dfd8](https://github.com/hatiolab/operato/commit/475dfd8b38aee4c0632b4ca54c6e0138c3f1dbd8))
+* **data-grist:** 카드가 없는 이미지의 자리를 만들지 않는다 · 별 크기와 quiet ([5a94f77](https://github.com/hatiolab/operato/commit/5a94f7799349bb9c1f3d3e0de057786e774b387a))
+* **data-grist:** 푸터가 자기 크기를 정하지 못하던 원인 · 읽기 전용에서 소터를 이름에 붙인다 ([617936f](https://github.com/hatiolab/operato/commit/617936fc69f4ce049fb631d14f52da94c20380d5))
+
+
+
 ## [10.5.0](https://github.com/hatiolab/operato/compare/v10.4.0...v10.5.0) (2026-08-31)
 
 

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

@@ -3,6 +3,15 @@ import { getEditor } from '../editors/index.js';
 import { generateGutterColumn } from '../gutters/index.js';
 import { getGristEventHandler } from '../handlers/index.js';
 import { getRenderer } from '../renderers/index.js';
+/**
+ * 값을 오른쪽에 붙이는 칸.
+ *
+ * 자릿수가 세로로 맞아야 값을 견줄 수 있다. 왼쪽으로 두면 24 와 1,200 이 시작점만 같고 끝이 어긋나서
+ * 어느 쪽이 큰지 눈으로 읽히지 않는다.
+ *
+ * progress 는 뺀다 — 막대로 그리므로 정렬이 뜻을 갖지 않는다.
+ */
+const RIGHT_ALIGNED_TYPES = ['integer', 'float', 'number'];
 export const buildColumn = (column) => {
     var _a, _b;
     var compiled = { ...column };
@@ -56,6 +65,13 @@ export const buildColumn = (column) => {
         classifier = NOOP;
     }
     compiled.record = {
+        /*
+         * 숫자 칸의 기본 정렬. 화면이 align 을 주면 그것이 이긴다 — 자릿수를 견줄 값이 아닌 숫자
+         * (전화번호 · 우편번호 같은 것)는 화면이 따로 정한다.
+         *
+         * 머리글도 따라온다. data-grid-header 가 열 제목을 그릴 때 record.align 을 본다.
+         */
+        ...(RIGHT_ALIGNED_TYPES.includes(column.type) ? { align: 'right' } : {}),
         ...record,
         classifier,
         renderer: recordRenderer,

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

@@ -1 +1 @@
-{"version":3,"file":"column-builder.js","sourceRoot":"","sources":["../../../src/configure/column-builder.ts"],"names":[],"mappings":"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","sourcesContent":["import { FilterConfigObject, FilterOperator } from '../index.js'\nimport { NOOP } from '../const.js'\nimport { getEditor } from '../editors/index.js'\nimport { generateGutterColumn } from '../gutters/index.js'\nimport { getGristEventHandler } from '../handlers/index.js'\nimport { getRenderer } from '../renderers/index.js'\nimport { ColumnConfig } from '../types.js'\n\nexport const buildColumn = (column: any): ColumnConfig => {\n  var compiled: ColumnConfig = { ...column }\n\n  if (column.type == 'gutter') {\n    compiled = generateGutterColumn(column)\n  }\n\n  var { name, header, record, handlers, label, filter } = compiled\n\n  /* header */\n\n  if (typeof header == 'string') {\n    compiled.header = {\n      renderer: () => header\n    }\n  }\n\n  if (typeof compiled.header?.renderer == 'string') {\n    const text = compiled.header.renderer\n    compiled.header = {\n      ...compiled.header,\n      renderer: () => text\n    }\n  }\n\n  /* label */\n  if (label) {\n    let type = typeof label\n    switch (type) {\n      case 'boolean':\n        compiled.label = {\n          renderer: compiled.header?.renderer || (() => name)\n        }\n        break\n      case 'string':\n        compiled.label = {\n          renderer: () => label\n        }\n        break\n      default:\n        compiled.label = label\n    }\n  } else {\n    compiled.label = false\n  }\n\n  /*\n   * record\n   */\n  var { renderer: recordRenderer, editor, editable, classifier } = record || {}\n\n  recordRenderer = getRenderer(recordRenderer || column.type)\n\n  if (editable !== false && typeof editor !== 'function') {\n    editor = getEditor(column.type)\n  }\n\n  if (typeof classifier !== 'function') {\n    classifier = NOOP\n  }\n\n  compiled.record = {\n    ...record,\n    classifier,\n    renderer: recordRenderer,\n    editor\n  }\n\n  /* filter */\n  if (filter) {\n    let type = typeof filter\n    switch (type) {\n      case 'boolean':\n        compiled.filter = {\n          type: column.type,\n          operator: 'eq'\n        }\n        break\n      case 'string':\n        compiled.filter = {\n          type: column.type,\n          operator: filter as FilterOperator\n        }\n        break\n      default:\n        compiled.filter = {\n          //@ts-ignore\n          type: column.type,\n          operator: 'eq',\n          ...(filter as FilterConfigObject)\n        }\n    }\n  }\n\n  /* handler */\n  var { click, dblclick, focus, contextmenu } = handlers || {}\n\n  compiled.handlers = {\n    click: click && getGristEventHandler(click),\n    dblclick: dblclick && getGristEventHandler(dblclick),\n    focus: focus && getGristEventHandler(focus),\n    contextmenu: contextmenu && getGristEventHandler(contextmenu)\n  }\n\n  return compiled\n}\n"]}
+{"version":3,"file":"column-builder.js","sourceRoot":"","sources":["../../../src/configure/column-builder.ts"],"names":[],"mappings":"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","sourcesContent":["import { FilterConfigObject, FilterOperator } from '../index.js'\nimport { NOOP } from '../const.js'\nimport { getEditor } from '../editors/index.js'\nimport { generateGutterColumn } from '../gutters/index.js'\nimport { getGristEventHandler } from '../handlers/index.js'\nimport { getRenderer } from '../renderers/index.js'\nimport { ColumnConfig } from '../types.js'\n\n/**\n * 값을 오른쪽에 붙이는 칸.\n *\n * 자릿수가 세로로 맞아야 값을 견줄 수 있다. 왼쪽으로 두면 24 와 1,200 이 시작점만 같고 끝이 어긋나서\n * 어느 쪽이 큰지 눈으로 읽히지 않는다.\n *\n * progress 는 뺀다 — 막대로 그리므로 정렬이 뜻을 갖지 않는다.\n */\nconst RIGHT_ALIGNED_TYPES = ['integer', 'float', 'number']\n\nexport const buildColumn = (column: any): ColumnConfig => {\n  var compiled: ColumnConfig = { ...column }\n\n  if (column.type == 'gutter') {\n    compiled = generateGutterColumn(column)\n  }\n\n  var { name, header, record, handlers, label, filter } = compiled\n\n  /* header */\n\n  if (typeof header == 'string') {\n    compiled.header = {\n      renderer: () => header\n    }\n  }\n\n  if (typeof compiled.header?.renderer == 'string') {\n    const text = compiled.header.renderer\n    compiled.header = {\n      ...compiled.header,\n      renderer: () => text\n    }\n  }\n\n  /* label */\n  if (label) {\n    let type = typeof label\n    switch (type) {\n      case 'boolean':\n        compiled.label = {\n          renderer: compiled.header?.renderer || (() => name)\n        }\n        break\n      case 'string':\n        compiled.label = {\n          renderer: () => label\n        }\n        break\n      default:\n        compiled.label = label\n    }\n  } else {\n    compiled.label = false\n  }\n\n  /*\n   * record\n   */\n  var { renderer: recordRenderer, editor, editable, classifier } = record || {}\n\n  recordRenderer = getRenderer(recordRenderer || column.type)\n\n  if (editable !== false && typeof editor !== 'function') {\n    editor = getEditor(column.type)\n  }\n\n  if (typeof classifier !== 'function') {\n    classifier = NOOP\n  }\n\n  compiled.record = {\n    /*\n     * 숫자 칸의 기본 정렬. 화면이 align 을 주면 그것이 이긴다 — 자릿수를 견줄 값이 아닌 숫자\n     * (전화번호 · 우편번호 같은 것)는 화면이 따로 정한다.\n     *\n     * 머리글도 따라온다. data-grid-header 가 열 제목을 그릴 때 record.align 을 본다.\n     */\n    ...(RIGHT_ALIGNED_TYPES.includes(column.type) ? { align: 'right' } : {}),\n    ...record,\n    classifier,\n    renderer: recordRenderer,\n    editor\n  }\n\n  /* filter */\n  if (filter) {\n    let type = typeof filter\n    switch (type) {\n      case 'boolean':\n        compiled.filter = {\n          type: column.type,\n          operator: 'eq'\n        }\n        break\n      case 'string':\n        compiled.filter = {\n          type: column.type,\n          operator: filter as FilterOperator\n        }\n        break\n      default:\n        compiled.filter = {\n          //@ts-ignore\n          type: column.type,\n          operator: 'eq',\n          ...(filter as FilterConfigObject)\n        }\n    }\n  }\n\n  /* handler */\n  var { click, dblclick, focus, contextmenu } = handlers || {}\n\n  compiled.handlers = {\n    click: click && getGristEventHandler(click),\n    dblclick: dblclick && getGristEventHandler(dblclick),\n    focus: focus && getGristEventHandler(focus),\n    contextmenu: contextmenu && getGristEventHandler(contextmenu)\n  }\n\n  return compiled\n}\n"]}

package/dist/src/data-card/data-card-field.js

@@ -80,6 +80,20 @@ DataCardField.styles = [
         min-width: 100%;
       }
 
+      /*
+       * 카드의 제목은 두 줄까지 읽힌다.
+       *
+       * 한 줄로 자르면 「[처분 승인] D-1788231051788-B · …」 처럼 **구별되는 부분이 잘려 나간다.**
+       * 카드는 표와 달리 세로로 여유가 있고, 그 여유를 제목에 주는 것이 맞다.
+       */
+      :host([name]) > span {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        white-space: normal;
+        overflow: hidden;
+      }
+
       @media only screen and (max-width: 460px) {
         *[center] {
           margin: initial;

package/dist/src/data-card/data-card-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-card-field.js","sourceRoot":"","sources":["../../../src/data-card/data-card-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAI/D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAqEuB,WAAM,GAAgB,WAAW,CAAA;QACjC,WAAM,GAAiB,WAAW,CAAA;QAClC,aAAQ,GAAW,CAAC,CAAC,CAAA;IAkBnD,CAAC;IAfC,MAAM;QACJ,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAE9C,IAAI,EACF,KAAK,EACL,MAAM,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,EACrC,GAAG,MAAM,CAAA;QAEV,IAAI,OAAO,KAAK,IAAI,QAAQ,EAAE,CAAC;YAC7B,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;YACvC,OAAO,IAAI,CAAA,UAAU,aAAa,CAAC,MAAM,CAAC,WAAW,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;QAC9G,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAA,GAAG,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;QACvE,CAAC;IACH,CAAC;;AAvFM,oBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+DF;CACF,AAjEY,CAiEZ;AAE8B;IAA9B,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;4CAAe;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAe;AAxE/B,aAAa;IADzB,aAAa,CAAC,eAAe,CAAC;GAClB,aAAa,CAyFzB","sourcesContent":["import { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config.js'\nimport { ColumnConfig, GristRecord } from '../types.js'\n\n@customElement('ox-card-field')\nexport class DataCardField extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        position: relative;\n\n        white-space: nowrap;\n\n        font: inherit;\n      }\n\n      :host([thumbnail]) {\n        flex-direction: column;\n        justify-content: center;\n      }\n\n      :host([thumbnail]) > * {\n        object-fit: contain;\n        max-width: 100%;\n        max-height: 100%;\n        /* 그림 본체 모서리도 둥글게 — wrapper 의 radius 와 동일 (record-card 의\n         * [thumbnail] wrapper 와 같은 변수 / fallback). */\n        border-radius: var(--data-card-thumbnail-radius, var(--md-sys-shape-corner-small));\n      }\n\n      :host > * {\n        margin: var(--spacing-none);\n\n        overflow: hidden;\n\n        text-overflow: ellipsis;\n        text-align: left;\n      }\n\n      :host > *[center] {\n        flex: none;\n        margin: var(--spacing-none) auto;\n      }\n\n      :host([name]) label {\n        display: none;\n      }\n\n      label {\n        flex: none;\n        width: 33%;\n        padding-bottom: 2px;\n        font: var(--data-card-item-etc-label-font);\n        text-transform: capitalize;\n      }\n\n      :host([name]) > span,\n      label + a {\n        display: block;\n        min-width: 100%;\n      }\n\n      @media only screen and (max-width: 460px) {\n        *[center] {\n          margin: initial;\n        }\n      }\n    `\n  ]\n\n  @property({ attribute: true }) align?: string\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Number }) rowIndex: number = -1\n  @property({ type: Object }) value?: object\n\n  render(): TemplateResult {\n    var { value, column, record, rowIndex } = this\n\n    var {\n      label,\n      record: { renderer: recordRenderer }\n    } = column\n\n    if (typeof label == 'object') {\n      let { renderer: labelRenderer } = label\n      return html`<label>${labelRenderer(column)}</label>${recordRenderer(value, column, record, rowIndex, this)}`\n    } else {\n      return html`${recordRenderer(value, column, record, rowIndex, this)}`\n    }\n  }\n}\n"]}
+{"version":3,"file":"data-card-field.js","sourceRoot":"","sources":["../../../src/data-card/data-card-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAI/D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAmFuB,WAAM,GAAgB,WAAW,CAAA;QACjC,WAAM,GAAiB,WAAW,CAAA;QAClC,aAAQ,GAAW,CAAC,CAAC,CAAA;IAkBnD,CAAC;IAfC,MAAM;QACJ,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAE9C,IAAI,EACF,KAAK,EACL,MAAM,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,EACrC,GAAG,MAAM,CAAA;QAEV,IAAI,OAAO,KAAK,IAAI,QAAQ,EAAE,CAAC;YAC7B,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;YACvC,OAAO,IAAI,CAAA,UAAU,aAAa,CAAC,MAAM,CAAC,WAAW,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;QAC9G,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAA,GAAG,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;QACvE,CAAC;IACH,CAAC;;AArGM,oBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6EF;CACF,AA/EY,CA+EZ;AAE8B;IAA9B,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;4CAAe;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAe;AAtF/B,aAAa;IADzB,aAAa,CAAC,eAAe,CAAC;GAClB,aAAa,CAuGzB","sourcesContent":["import { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config.js'\nimport { ColumnConfig, GristRecord } from '../types.js'\n\n@customElement('ox-card-field')\nexport class DataCardField extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        position: relative;\n\n        white-space: nowrap;\n\n        font: inherit;\n      }\n\n      :host([thumbnail]) {\n        flex-direction: column;\n        justify-content: center;\n      }\n\n      :host([thumbnail]) > * {\n        object-fit: contain;\n        max-width: 100%;\n        max-height: 100%;\n        /* 그림 본체 모서리도 둥글게 — wrapper 의 radius 와 동일 (record-card 의\n         * [thumbnail] wrapper 와 같은 변수 / fallback). */\n        border-radius: var(--data-card-thumbnail-radius, var(--md-sys-shape-corner-small));\n      }\n\n      :host > * {\n        margin: var(--spacing-none);\n\n        overflow: hidden;\n\n        text-overflow: ellipsis;\n        text-align: left;\n      }\n\n      :host > *[center] {\n        flex: none;\n        margin: var(--spacing-none) auto;\n      }\n\n      :host([name]) label {\n        display: none;\n      }\n\n      label {\n        flex: none;\n        width: 33%;\n        padding-bottom: 2px;\n        font: var(--data-card-item-etc-label-font);\n        text-transform: capitalize;\n      }\n\n      :host([name]) > span,\n      label + a {\n        display: block;\n        min-width: 100%;\n      }\n\n      /*\n       * 카드의 제목은 두 줄까지 읽힌다.\n       *\n       * 한 줄로 자르면 「[처분 승인] D-1788231051788-B · …」 처럼 **구별되는 부분이 잘려 나간다.**\n       * 카드는 표와 달리 세로로 여유가 있고, 그 여유를 제목에 주는 것이 맞다.\n       */\n      :host([name]) > span {\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        white-space: normal;\n        overflow: hidden;\n      }\n\n      @media only screen and (max-width: 460px) {\n        *[center] {\n          margin: initial;\n        }\n      }\n    `\n  ]\n\n  @property({ attribute: true }) align?: string\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Number }) rowIndex: number = -1\n  @property({ type: Object }) value?: object\n\n  render(): TemplateResult {\n    var { value, column, record, rowIndex } = this\n\n    var {\n      label,\n      record: { renderer: recordRenderer }\n    } = column\n\n    if (typeof label == 'object') {\n      let { renderer: labelRenderer } = label\n      return html`<label>${labelRenderer(column)}</label>${recordRenderer(value, column, record, rowIndex, this)}`\n    } else {\n      return html`${recordRenderer(value, column, record, rowIndex, this)}`\n    }\n  }\n}\n"]}

package/dist/src/data-card/record-card.js

@@ -83,6 +83,17 @@ let RecordCard = class RecordCard extends LitElement {
         const briefFields = fields.map(field => columns.find(column => column.name == field)).filter(column => column) || [];
         const detailFields = details.map(field => columns.find(column => column.name == field)).filter(column => column) || [];
         const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined;
+        /*
+         * 값이 없으면 썸네일 자리를 만들지 않는다.
+         *
+         * 전에는 설정에 썸네일 컬럼 이름이 있으면 **레코드에 값이 있는지 보지 않고** 그렸다. 그래서 이미지를
+         * 갖지 않는 목록(결재함 · 업무함)에서 카드마다 깨진 이미지 표시가 세로의 절반을 차지하고, 정작
+         * 제목은 잘렸다. 없는 것의 자리를 비워 두는 것이다.
+         */
+        const thumbnailValue = thumbnailColumn ? record === null || record === void 0 ? void 0 : record[thumbnailColumn.name] : undefined;
+        const hasThumbnail = Array.isArray(thumbnailValue)
+            ? thumbnailValue.length > 0
+            : thumbnailValue !== null && thumbnailValue !== undefined && thumbnailValue !== '';
         const gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList);
         if (this.hasAttribute('dirty')) {
             var dirtyIcon;
@@ -100,7 +111,7 @@ let RecordCard = class RecordCard extends LitElement {
         }
         return html `
       ${dirtyIcon ? html ` <md-icon dirty>${dirtyIcon}</md-icon> ` : html ``}
-      ${thumbnailColumn
+      ${thumbnailColumn && hasThumbnail
             ? html ` <ox-card-field
             thumbnail
             .rowIndex=${rowIndex}

package/dist/src/data-card/record-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"record-card.js","sourceRoot":"","sources":["../../../src/data-card/record-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../record-view/record-view.js'\nimport './data-card-field.js'\nimport './data-card-gutter.js'\nimport './data-card-gutter-menu.js'\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { GristConfig, GristData, GristRecord } from '../types.js'\nimport { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config.js'\nimport { RecordViewHandler } from '../record-view/record-view-handler.js'\nimport { recordCardClickHandler } from './event-handlers/record-card-click-handler.js'\nimport { recordCardDblClickHandler } from './event-handlers/record-card-dblclick-handler.js'\n\n// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.\nconst OPTIONS: Intl.DateTimeFormatOptions = {\n  year: 'numeric',\n  month: 'numeric',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: false\n  // timeZone: 'America/Los_Angeles'\n}\n\nfunction getSafeFormatter(locale: string, options: Intl.DateTimeFormatOptions) {\n  try {\n    const safeLocale = locale || 'en-US'\n    return new Intl.DateTimeFormat(safeLocale, options)\n  } catch (e) {\n    return new Intl.DateTimeFormat('en-US', options)\n  }\n}\n\nconst formatter = getSafeFormatter(navigator.language, OPTIONS)\n\n@customElement('ox-record-card')\nexport class RecordCard extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-items: stretch;\n        position: relative;\n        background-color: var(--data-card-record-card-background-color);\n        /* Theme 정의가 누락된 application 에서도 합리적 radius 보장. */\n        border-radius: var(--data-card-record-card-border-radius, var(--md-sys-shape-corner-medium));\n        border: var(--data-card-record-card-border);\n        height: min-content;\n        padding: var(--spacing-small) var(--spacing-none);\n      }\n\n      :host(:hover) {\n        background-color: var(--md-sys-color-surface);\n        border: var(--data-card-record-card-border-hover);\n        box-shadow: var(--data-card-record-card-boxshadow-hover);\n      }\n\n      :host([dirty])::before {\n        content: '';\n        position: absolute;\n        left: var(--spacing-none);\n        top: var(--spacing-none);\n\n        width: var(--spacing-none);\n        height: var(--spacing-none);\n        border-top: var(--grid-record-dirty-border-top);\n        border-right: var(--grid-record-dirty-border-left);\n      }\n\n      :host[emphasized-row] {\n        background-color: var(--grid-record-emphasized-background-color);\n        color: var(--grid-record-emphasized-color);\n      }\n\n      [dirty] {\n        position: absolute;\n        margin: var(--spacing-none);\n        height: 20px;\n\n        font: var(--grid-record-dirty-icon-font);\n        text-indent: 1px;\n        left: var(--spacing-none);\n        top: var(--spacing-none);\n        color: var(--grid-record-dirty-color, var(--md-sys-color-error));\n      }\n\n      [thumbnail] {\n        height: var(--data-card-thumbnail-height);\n        padding: var(--spacing-large);\n        box-sizing: border-box;\n        /* 동심 안쪽 radius — Material 3 shape token (외곽 = corner-medium, 안쪽 =\n         * corner-small). board-ui 카드와 동일 톤. */\n        border-radius: var(--data-card-thumbnail-radius, var(--md-sys-shape-corner-small));\n        overflow: hidden;\n      }\n\n      [content] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-tiny);\n        margin: var(--data-card-item-margin);\n      }\n\n      [brief] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-tiny);\n        overflow: hidden;\n      }\n\n      [gutters] {\n        display: flex;\n        flex-direction: row;\n        gap: var(--spacing-small);\n        margin: var(--spacing-small) var(--spacing-medium);\n        justify-content: end;\n        align-items: stretch;\n      }\n\n      ox-card-field {\n        font: var(--data-card-item-etc-font);\n        color: var(--data-card-item-etc-color, var(--md-sys-color-on-surface));\n      }\n\n      ox-card-field[name] {\n        font: var(--data-card-item-name-font);\n        color: var(--data-card-item-name-color, var(--md-sys-color-secondary));\n      }\n\n      ox-card-field[desc] {\n        font: var(--data-card-item-disc-font);\n        color: var(--data-card-item-disc-color, var(--md-sys-color-tertiary));\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex: number = -1\n  /*\n   * row-selector를 사용자가 변경할 때, record-card의 update를 유도하기 위해 selected-row attribute를 property에 추가함.\n   * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)\n   */\n  @property({ type: Boolean, attribute: 'selected-row' }) selectedRow: boolean = false\n  @property({ attribute: false }) emphasized: any = false\n\n  private _recordView: any\n  private clickHandler = recordCardClickHandler.bind(this) as EventListener\n  private dblclickHandler = recordCardDblClickHandler.bind(this) as EventListener\n\n  firstUpdated() {\n    /*\n      long-press\n      TODO. performance를 확인한 후에 활성화하자.\n    */\n    // longpressable(this.renderRoot.querySelector('[content]'))\n    // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))\n    this.renderRoot.addEventListener('click', this.clickHandler)\n    this.renderRoot.addEventListener('dblclick', this.dblclickHandler)\n\n    this.addEventListener('show-record-view', () => this.popupRecordView())\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('record') && this._recordView) {\n      this._recordView.record = this.record\n    }\n\n    const emphasized = this.emphasized\n\n    if (!!emphasized) {\n      this.setAttribute('emphasized-row', '')\n\n      if (Symbol.iterator in Object(emphasized)) {\n        const [backgroundColor, foregroundColor] = emphasized as string[]\n        backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor)\n        foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor)\n      }\n    } else {\n      this.removeAttribute('emphasized-row')\n    }\n  }\n\n  render() {\n    const record = this.record\n    const rowIndex = this.rowIndex\n    const { columns, list } = this.config\n    const { thumbnail, fields, details } = list || {}\n\n    const briefFields = fields.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n    const detailFields =\n      details.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n\n    const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined\n\n    const gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList)\n\n    if (this.hasAttribute('dirty')) {\n      var dirtyIcon\n\n      switch (this.record['__dirty__']) {\n        case 'M':\n          dirtyIcon = 'done'\n          break\n        case '+':\n          dirtyIcon = 'add'\n          break\n        case '-':\n          dirtyIcon = 'remove'\n          break\n      }\n    }\n\n    return html`\n      ${dirtyIcon ? html` <md-icon dirty>${dirtyIcon}</md-icon> ` : html``}\n      ${thumbnailColumn\n        ? html` <ox-card-field\n            thumbnail\n            .rowIndex=${rowIndex}\n            .column=${thumbnailColumn}\n            .record=${record}\n            .value=${record[thumbnailColumn?.name || '']}\n          ></ox-card-field>`\n        : html``}\n\n      <div content>\n        <div brief>\n          ${briefFields.map(\n            (column, idx) => html`\n              <ox-card-field\n                .rowIndex=${rowIndex}\n                .column=${column}\n                .record=${record}\n                .value=${record[column?.name || '']}\n                ?name=${idx == 0}\n                ?desc=${idx == 1}\n              ></ox-card-field>\n            `\n          )}\n        </div>\n        ${detailFields.length > 0\n          ? html`\n              <div detail>\n                ${detailFields.map(\n                  (column, idx) => html`\n                    <ox-card-field\n                      .rowIndex=${rowIndex}\n                      .column=${column}\n                      .record=${record}\n                      .value=${record[column?.name || '']}\n                    ></ox-card-field>\n                  `\n                )}\n              </div>\n            `\n          : html``}\n      </div>\n\n      <div gutters>\n        ${gutters.map(gutter => {\n          return html`\n            <ox-card-gutter\n              .rowIndex=${rowIndex}\n              .column=${gutter}\n              .record=${record}\n              .value=${record[gutter.name]}\n            ></ox-card-gutter>\n          `\n        })}\n      </div>\n    `\n  }\n\n  popupRecordView() {\n    var titleField = this.config.list.fields[0] || 'name'\n    var title = this.record[titleField]\n\n    /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */\n    if (typeof title == 'object') {\n      var column = this.config.columns.find(column => column.name == titleField)\n      title = column?.record.renderer(title, column, this.record, this.rowIndex, this /* cautious */)\n    }\n\n    this._recordView = RecordViewHandler(\n      this.config.columns,\n      this.record,\n      this.rowIndex,\n      this,\n      {\n        title\n      },\n      () => {\n        delete this._recordView\n      }\n    )\n  }\n}\n"]}
+{"version":3,"file":"record-card.js","sourceRoot":"","sources":["../../../src/data-card/record-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../record-view/record-view.js'\nimport './data-card-field.js'\nimport './data-card-gutter.js'\nimport './data-card-gutter-menu.js'\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { GristConfig, GristData, GristRecord } from '../types.js'\nimport { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config.js'\nimport { RecordViewHandler } from '../record-view/record-view-handler.js'\nimport { recordCardClickHandler } from './event-handlers/record-card-click-handler.js'\nimport { recordCardDblClickHandler } from './event-handlers/record-card-dblclick-handler.js'\n\n// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.\nconst OPTIONS: Intl.DateTimeFormatOptions = {\n  year: 'numeric',\n  month: 'numeric',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: false\n  // timeZone: 'America/Los_Angeles'\n}\n\nfunction getSafeFormatter(locale: string, options: Intl.DateTimeFormatOptions) {\n  try {\n    const safeLocale = locale || 'en-US'\n    return new Intl.DateTimeFormat(safeLocale, options)\n  } catch (e) {\n    return new Intl.DateTimeFormat('en-US', options)\n  }\n}\n\nconst formatter = getSafeFormatter(navigator.language, OPTIONS)\n\n@customElement('ox-record-card')\nexport class RecordCard extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-items: stretch;\n        position: relative;\n        background-color: var(--data-card-record-card-background-color);\n        /* Theme 정의가 누락된 application 에서도 합리적 radius 보장. */\n        border-radius: var(--data-card-record-card-border-radius, var(--md-sys-shape-corner-medium));\n        border: var(--data-card-record-card-border);\n        height: min-content;\n        padding: var(--spacing-small) var(--spacing-none);\n      }\n\n      :host(:hover) {\n        background-color: var(--md-sys-color-surface);\n        border: var(--data-card-record-card-border-hover);\n        box-shadow: var(--data-card-record-card-boxshadow-hover);\n      }\n\n      :host([dirty])::before {\n        content: '';\n        position: absolute;\n        left: var(--spacing-none);\n        top: var(--spacing-none);\n\n        width: var(--spacing-none);\n        height: var(--spacing-none);\n        border-top: var(--grid-record-dirty-border-top);\n        border-right: var(--grid-record-dirty-border-left);\n      }\n\n      :host[emphasized-row] {\n        background-color: var(--grid-record-emphasized-background-color);\n        color: var(--grid-record-emphasized-color);\n      }\n\n      [dirty] {\n        position: absolute;\n        margin: var(--spacing-none);\n        height: 20px;\n\n        font: var(--grid-record-dirty-icon-font);\n        text-indent: 1px;\n        left: var(--spacing-none);\n        top: var(--spacing-none);\n        color: var(--grid-record-dirty-color, var(--md-sys-color-error));\n      }\n\n      [thumbnail] {\n        height: var(--data-card-thumbnail-height);\n        padding: var(--spacing-large);\n        box-sizing: border-box;\n        /* 동심 안쪽 radius — Material 3 shape token (외곽 = corner-medium, 안쪽 =\n         * corner-small). board-ui 카드와 동일 톤. */\n        border-radius: var(--data-card-thumbnail-radius, var(--md-sys-shape-corner-small));\n        overflow: hidden;\n      }\n\n      [content] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-tiny);\n        margin: var(--data-card-item-margin);\n      }\n\n      [brief] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-tiny);\n        overflow: hidden;\n      }\n\n      [gutters] {\n        display: flex;\n        flex-direction: row;\n        gap: var(--spacing-small);\n        margin: var(--spacing-small) var(--spacing-medium);\n        justify-content: end;\n        align-items: stretch;\n      }\n\n      ox-card-field {\n        font: var(--data-card-item-etc-font);\n        color: var(--data-card-item-etc-color, var(--md-sys-color-on-surface));\n      }\n\n      ox-card-field[name] {\n        font: var(--data-card-item-name-font);\n        color: var(--data-card-item-name-color, var(--md-sys-color-secondary));\n      }\n\n      ox-card-field[desc] {\n        font: var(--data-card-item-disc-font);\n        color: var(--data-card-item-disc-color, var(--md-sys-color-tertiary));\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex: number = -1\n  /*\n   * row-selector를 사용자가 변경할 때, record-card의 update를 유도하기 위해 selected-row attribute를 property에 추가함.\n   * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)\n   */\n  @property({ type: Boolean, attribute: 'selected-row' }) selectedRow: boolean = false\n  @property({ attribute: false }) emphasized: any = false\n\n  private _recordView: any\n  private clickHandler = recordCardClickHandler.bind(this) as EventListener\n  private dblclickHandler = recordCardDblClickHandler.bind(this) as EventListener\n\n  firstUpdated() {\n    /*\n      long-press\n      TODO. performance를 확인한 후에 활성화하자.\n    */\n    // longpressable(this.renderRoot.querySelector('[content]'))\n    // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))\n    this.renderRoot.addEventListener('click', this.clickHandler)\n    this.renderRoot.addEventListener('dblclick', this.dblclickHandler)\n\n    this.addEventListener('show-record-view', () => this.popupRecordView())\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('record') && this._recordView) {\n      this._recordView.record = this.record\n    }\n\n    const emphasized = this.emphasized\n\n    if (!!emphasized) {\n      this.setAttribute('emphasized-row', '')\n\n      if (Symbol.iterator in Object(emphasized)) {\n        const [backgroundColor, foregroundColor] = emphasized as string[]\n        backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor)\n        foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor)\n      }\n    } else {\n      this.removeAttribute('emphasized-row')\n    }\n  }\n\n  render() {\n    const record = this.record\n    const rowIndex = this.rowIndex\n    const { columns, list } = this.config\n    const { thumbnail, fields, details } = list || {}\n\n    const briefFields = fields.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n    const detailFields =\n      details.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n\n    const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined\n    /*\n     * 값이 없으면 썸네일 자리를 만들지 않는다.\n     *\n     * 전에는 설정에 썸네일 컬럼 이름이 있으면 **레코드에 값이 있는지 보지 않고** 그렸다. 그래서 이미지를\n     * 갖지 않는 목록(결재함 · 업무함)에서 카드마다 깨진 이미지 표시가 세로의 절반을 차지하고, 정작\n     * 제목은 잘렸다. 없는 것의 자리를 비워 두는 것이다.\n     */\n    const thumbnailValue = thumbnailColumn ? record?.[thumbnailColumn.name] : undefined\n    const hasThumbnail = Array.isArray(thumbnailValue)\n      ? thumbnailValue.length > 0\n      : thumbnailValue !== null && thumbnailValue !== undefined && thumbnailValue !== ''\n\n    const gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList)\n\n    if (this.hasAttribute('dirty')) {\n      var dirtyIcon\n\n      switch (this.record['__dirty__']) {\n        case 'M':\n          dirtyIcon = 'done'\n          break\n        case '+':\n          dirtyIcon = 'add'\n          break\n        case '-':\n          dirtyIcon = 'remove'\n          break\n      }\n    }\n\n    return html`\n      ${dirtyIcon ? html` <md-icon dirty>${dirtyIcon}</md-icon> ` : html``}\n      ${thumbnailColumn && hasThumbnail\n        ? html` <ox-card-field\n            thumbnail\n            .rowIndex=${rowIndex}\n            .column=${thumbnailColumn}\n            .record=${record}\n            .value=${record[thumbnailColumn?.name || '']}\n          ></ox-card-field>`\n        : html``}\n\n      <div content>\n        <div brief>\n          ${briefFields.map(\n            (column, idx) => html`\n              <ox-card-field\n                .rowIndex=${rowIndex}\n                .column=${column}\n                .record=${record}\n                .value=${record[column?.name || '']}\n                ?name=${idx == 0}\n                ?desc=${idx == 1}\n              ></ox-card-field>\n            `\n          )}\n        </div>\n        ${detailFields.length > 0\n          ? html`\n              <div detail>\n                ${detailFields.map(\n                  (column, idx) => html`\n                    <ox-card-field\n                      .rowIndex=${rowIndex}\n                      .column=${column}\n                      .record=${record}\n                      .value=${record[column?.name || '']}\n                    ></ox-card-field>\n                  `\n                )}\n              </div>\n            `\n          : html``}\n      </div>\n\n      <div gutters>\n        ${gutters.map(gutter => {\n          return html`\n            <ox-card-gutter\n              .rowIndex=${rowIndex}\n              .column=${gutter}\n              .record=${record}\n              .value=${record[gutter.name]}\n            ></ox-card-gutter>\n          `\n        })}\n      </div>\n    `\n  }\n\n  popupRecordView() {\n    var titleField = this.config.list.fields[0] || 'name'\n    var title = this.record[titleField]\n\n    /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */\n    if (typeof title == 'object') {\n      var column = this.config.columns.find(column => column.name == titleField)\n      title = column?.record.renderer(title, column, this.record, this.rowIndex, this /* cautious */)\n    }\n\n    this._recordView = RecordViewHandler(\n      this.config.columns,\n      this.record,\n      this.rowIndex,\n      this,\n      {\n        title\n      },\n      () => {\n        delete this._recordView\n      }\n    )\n  }\n}\n"]}

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

@@ -58,8 +58,21 @@ let DataGridField = class DataGridField extends LitElement {
             }
         }
         if (changes.has('column')) {
+            /*
+             * 정렬은 **넣을 때만이 아니라 되돌릴 때도** 손대야 한다.
+             *
+             * 이 요소는 재사용된다. 전에는 기본값이 아닐 때만 인라인 값을 넣고 지우지 않았다. 그래서 한 번
+             * 오른쪽 정렬 칸을 그린 셀이 다음에 왼쪽 정렬 칸을 그려도 오른쪽에 남았다.
+             *
+             * [재봤음] 품질 화면 「판단」 칸에서 머리글은 x=380(왼쪽)인데 값은 x=452(flex-end)였다. 숫자 칸을
+             * 오른쪽으로 바꾼 뒤 드러났다 — 오른쪽 정렬 칸이 드물던 동안은 눈에 안 띄었다. 2026-09-02
+             */
             var align = this.column.record.align || DEFAULT_TEXT_ALIGN;
-            if (align != DEFAULT_TEXT_ALIGN) {
+            if (align == DEFAULT_TEXT_ALIGN) {
+                this.style.removeProperty('--data-grid-field-justify-content');
+                this.style.removeProperty('--data-grid-field-text-align');
+            }
+            else {
                 let justify = 'center';
                 switch (align) {
                     case 'right':
@@ -204,6 +217,152 @@ DataGridField.styles = [
         font-weight: 640;
       }
 
+      /*
+       * 값과 표식을 한 줄에 담는 자리 — **간격과 높이를 여기서 잡는다.**
+       *
+       * 처음에는 :not(.pill) + .pill { margin-left } 로 띄우려 했는데 안 걸렸다. 렌더러가 값을
+       * 텍스트 노드로 내므로 알약의 앞 형제가 **요소가 아니고**, CSS 형제 선택자는 텍스트 노드를 보지
+       * 못한다. 알약이 첫 요소이기도 해서 :first-child 로도 가려지지 않는다(실측 확인).
+       *
+       * 높이도 같은 자리에서 잡는다. baseline 으로 두면 14px 글자와 11.5px 알약의 기준선을 맞추느라
+       * 알약이 내려앉는다.
+       */
+      /* 값이 있지만 눈에 걸릴 것은 아닌 것 — 「보통」 같은 기본값. .none(값 없음)과 구별한다. */
+      .quiet {
+        color: var(--ui-muted, #57676f);
+      }
+
+      /*
+       * 별 같은 작은 기호를 글자 크기로 맞춘다. md-icon 의 기본은 24px 이라 줄 높이를 밀어낸다.
+       * 색은 물려받는다 — 개수가 크기를 말하고 색은 담는 쪽이 정한다.
+       */
+      .star {
+        --md-icon-size: 15px;
+        font-size: 15px;
+        width: 15px;
+        height: 15px;
+        color: inherit;
+      }
+
+      /* 별처럼 여럿이 붙는 기호는 사이를 좁게 — 낱말 사이의 6px 은 여기서 너무 넓다. */
+      .line:has(.star) {
+        gap: 1px;
+      }
+
+      /*
+       * 셀 안의 아이콘 단추 — 그 줄에 하는 동작(들어가기 · 열기)을 담는다.
+       *
+       * 셀의 클릭 경로를 타지 않고 스스로 받으려는 렌더러가 쓴다. 그 경로에는 동작이 견딜 수 없는 관문이
+       * 둘 있다.
+       *
+       *   data-grid-body-click-handler.ts   if (this.editTarget) return
+       *   data-grid-body-click-handler.ts   (e.target).closest("ox-grid-field")
+       *
+       * 앞은 다른 칸이 편집 중이면 첫 누름을 먹고, 뒤는 셀 경계를 스치면 칸을 못 찾는다. 진짜 button 을
+       * 그리면 둘을 다 피하고 키보드로도 닿는다.
+       *
+       * 이 규칙이 여기 있는 이유: 렌더러의 결과는 이 셀의 그림자 안에 그려지므로 **페이지의 스타일이
+       * 닿지 않는다.** 셀 안의 어휘는 셀이 갖는다.
+       *
+       * host 자식으로 적은 이유: 이 파일 아래의 host 자식 button 규칙이 채운 단추를 그리고, 특이도가
+       * 같으면 **뒤에 오는 쪽이 이긴다.** 그것 없이 두면 이 단추가 채운 단추의 모양으로 나왔다
+       * (어두운 바탕 · 흰 글자, 실측 rgb(38, 46, 56)).
+       *
+       * 둘의 뜻이 다르다 — 채운 단추는 **저지르는 동작**, 이 단추는 **옮겨 가기**다. 그래서 평소에는
+       * 흐리고 배경이 없다.
+       *
+       * 배경은 **칸을 채우지 않고 동그라미로** 든다. 칸을 다 채우면 「이 셀이 골라졌다」로 읽힌다 —
+       * 표에서 채워진 사각형은 선택의 뜻이다. 동그라미는 단추의 뜻이다.
+       */
+      :host > button.icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 26px;
+        height: 26px;
+        flex: none;
+        /*
+         * 누를 자리는 26px 로 두되 **줄 높이는 밀지 않는다.**
+         *
+         * 이 단추가 든 칸 하나 때문에 표의 모든 줄이 46px 이 됐다(글자만 있는 줄은 38px). 스무 줄이면
+         * 240px 을 잃는다. [재봤음] grid-template-rows: 46px 34px
+         *
+         * 그렇다고 26px 아래로 줄이면 손가락으로 못 누른다(가로세로 24px 이 최소다). 그래서 상자는 26px
+         * 로 두고 위아래 3px 씩을 여백에서 되돌려, 자리는 20px 만 차지하게 한다 — 글자 한 줄과 같다.
+         */
+        margin-top: -3px;
+        margin-bottom: -3px;
+        border: none;
+        border-radius: 50%;
+        background: transparent;
+        padding: 0;
+        color: var(--ui-faint, #8a959c);
+        cursor: pointer;
+        transition:
+          background-color 0.12s ease,
+          color 0.12s ease;
+      }
+
+      :host > button.icon:hover {
+        background-color: var(--ui-hover, rgba(0, 0, 0, 0.06));
+        color: var(--ui-ink, #17272f);
+      }
+
+      :host > button.icon:active {
+        background-color: var(--ui-active, rgba(0, 0, 0, 0.12));
+      }
+
+      /* 키보드로 온 초점만 테를 보인다 — 눌러서 온 초점에는 보이지 않는다. */
+      :host > button.icon:focus-visible {
+        outline: 2px solid var(--ui-accent, #00727e);
+        outline-offset: -2px;
+      }
+
+      /*
+       * 값을 함께 담는 단추 — 「4 ›」처럼 숫자와 화살이 나란히 선다.
+       *
+       * 아이콘만으로는 그 줄에 무엇이 있는지 말하지 못한다. 값이 뜻을 나르고 화살이 「누를 수 있다」를
+       * 말한다. 그래서 동그라미가 아니라 알약 모양이다.
+       */
+      :host > button.icon.wide {
+        width: auto;
+        min-width: 44px;
+        gap: 0;
+        padding: 0 2px 0 7px;
+        border-radius: 999px;
+        font: inherit;
+        font-size: var(--grid-record-wide-fontsize);
+        font-variant-numeric: tabular-nums;
+      }
+
+      :host > button.icon.wide md-icon {
+        --md-icon-size: 16px;
+        font-size: 16px;
+        width: 16px;
+        height: 16px;
+      }
+
+      :host > button.icon md-icon {
+        --md-icon-size: 18px;
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+      }
+
+      .line {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        min-width: 0;
+      }
+
+      /* 값이 길면 값이 줄고 표식은 그대로 남는다 — 표식이 먼저 잘리면 읽을 수 없다. */
+      .line > :first-child {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
       /* 표식 — 상태 같은 짧은 값에 두른다. 점이 색을 나르고 글자가 뜻을 나른다. */
       .pill {
         display: inline-flex;

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

@@ -1 +1 @@
-{"version":3,"file":"data-grid-field.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-field.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\n// import { guard } from 'lit/directives/guard.js'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { TooltipReactiveController } from '@operato/utils'\n\nimport { ZERO_COLUMN } from '../configure/zero-config.js'\nimport { ColumnConfig, GristRecord } from '../types.js'\n\nconst DEFAULT_TEXT_ALIGN = 'left'\n\n@customElement('ox-grid-field')\nexport class DataGridField extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n\n        align-items: center;\n        justify-content: var(--data-grid-field-justify-content, flex-start);\n        position: relative;\n\n        white-space: nowrap;\n        background-color: var(--grid-record-background-color);\n        padding: var(--grid-record-padding);\n        border: 1px solid transparent;\n        border-width: 1px 0;\n        border-bottom: var(--grid-record-border-bottom);\n\n        font-size: var(--grid-record-wide-fontsize);\n        min-height: 30px;\n        box-sizing: border-box;\n      }\n\n      :host([multiline]) {\n        white-space: pre-line;\n      }\n\n      /*\n       * ── 칸이 쓸 수 있는 낱말 (2026-08-31) ──────────────────────────────────\n       * 렌더러가 그린 것은 이 부품의 shadow DOM 안에 들어간다. 그래서 **화면의 CSS 가 닿지 않는다.**\n       * 두 줄 칸이나 상태 알약을 그리려던 화면들이 그 벽에 막혀, 값에 인라인 style 을 박거나 칸마다\n       * 부품을 새로 만들었다.\n       *\n       * 목록이면 어디서나 같은 것을 필요로 하므로 여기서 준다. 이름은 뜻으로 짓는다 —\n       * 「늦었다」가 아니라 「심각하다(crit)」다. 늦은 것은 이 표의 일이 아니고 화면의 일이다.\n       *\n       *   .sub    둘째 줄. 「1,200 EA」 아래의 「BOLT-8」처럼 딸린 사실\n       *   .mono   고정폭. 번호·시각·수량처럼 자릿수를 견주는 값\n       *   .none   값이 없음. 빈 칸으로 두면 「아직 안 읽었다」와 구별되지 않는다\n       *   .pill   알약. good·warn·crit·info 로 뜻을 준다\n       *   .crit · .warn · .good   글자 강조\n       *\n       * 값은 --ui-* 토큰에서 오고 폴백을 둔다 — 테마가 없어도 무너지지 않는다.\n       */\n      :host([twoline]) {\n        display: block;\n        white-space: normal;\n        line-height: 1.35;\n      }\n\n      .sub {\n        display: block;\n        margin-top: 2px;\n        font-size: var(--ui-t-small, 11.5px);\n        color: var(--ui-faint, #8a959c);\n      }\n\n      .mono {\n        font-family: var(--ui-mono, ui-monospace, Menlo, monospace);\n        font-variant-numeric: tabular-nums;\n      }\n\n      /*\n       * 그 줄이 무엇인지 가리키는 값 — 작업지시 번호, 설비 이름처럼. 두 줄 칸의 첫 줄이 이것이고\n       * 둘째 줄(.sub)이 딸린 사실이다. 굵기만 올린다. 고정폭은 쓰지 않는다 — 자릿수를 세로로 견줄\n       * 값이 아니고, 같은 글자 수에도 폭이 넓어져 옆 칸을 밀어낸다.\n       */\n      .id {\n        font-weight: 620;\n      }\n\n      .none {\n        color: var(--ui-faint, #8a959c);\n      }\n\n      .crit {\n        color: var(--ui-crit, #c93f30);\n        font-weight: 640;\n      }\n\n      .warn {\n        color: var(--ui-warn, #9f5e02);\n        font-weight: 640;\n      }\n\n      .good {\n        color: var(--ui-good, #297d39);\n        font-weight: 640;\n      }\n\n      /* 표식 — 상태 같은 짧은 값에 두른다. 점이 색을 나르고 글자가 뜻을 나른다. */\n      .pill {\n        display: inline-flex;\n        align-items: center;\n        gap: 5px;\n        padding: 1px 8px;\n        border: 1px solid var(--ui-line, #d5dce0);\n        border-radius: 999px;\n        font-size: var(--ui-t-small, 11.5px);\n        font-weight: 400;\n        color: var(--ui-muted, #57676f);\n        white-space: nowrap;\n      }\n\n      /*\n       * 색만으로 뜻을 전하지 않는다 — 알약 안의 글자가 함께 말한다. 점은 거드는 것이다.\n       *\n       * align-self: center 가 필요하다. 알약은 flex 이고 점은 그 안의 항목인데, 높이를 6px 로\n       * 주어도 교차축에서 늘어나 **6×11.5 짜리 세로 타원**이 됐다(원이 아니라 길쭉했다).\n       * .pill 의 align-items: center 는 부모 쪽 값이라 이 항목의 stretch 를 막지 못한다.\n       */\n      .pill .dot {\n        align-self: center;\n        width: 6px;\n        height: 6px;\n        /*\n         * 이 파일 아래에 span, pre 의 min-height: 1em 이 있다. 값이 빈 칸에서도 줄 높이를\n         * 유지하려는 규칙인데, 점도 span 이라 거기 걸려 **높이가 1em(11.5px)까지 늘어났다** —\n         * 그래서 6px 을 줘도 6×11.5 세로 타원이 됐다. 여기서 되돌린다.\n         */\n        min-height: 0;\n        border-radius: 50%;\n        background: currentColor;\n        flex: none;\n      }\n\n      .pill.good {\n        color: var(--ui-good, #297d39);\n        border-color: color-mix(in srgb, var(--ui-good, #297d39) 40%, transparent);\n        font-weight: 400;\n      }\n\n      .pill.info {\n        color: var(--ui-accent, #00727e);\n        border-color: color-mix(in srgb, var(--ui-accent, #00727e) 40%, transparent);\n        font-weight: 400;\n      }\n\n      .pill.warn {\n        color: var(--ui-warn, #9f5e02);\n        border-color: color-mix(in srgb, var(--ui-warn, #9f5e02) 40%, transparent);\n        font-weight: 400;\n      }\n\n      .pill.crit {\n        color: var(--ui-crit, #c93f30);\n        border-color: color-mix(in srgb, var(--ui-crit, #c93f30) 40%, transparent);\n        font-weight: 400;\n      }\n\n      .pill.quiet {\n        color: var(--ui-faint, #8a959c);\n      }\n\n      :host([gutter]) {\n        padding: var(--grid-gutter-padding);\n        text-align: center;\n      }\n\n      :host([gutter]) * {\n        cursor: default;\n        overflow: hidden;\n      }\n\n      :host([editing]) {\n        border-top: var(--grid-record-editing-border);\n        border-bottom: var(--grid-record-editing-border);\n      }\n\n      /*\n       * 초점이 갔다고 **줄을 나누는 선을 바꾸지 않는다.**\n       *\n       * 전에는 여기서 --grid-record-border-bottom 을 초점 표식 값으로 덮어썼다. 그래서 표식을\n       * 감추려고 그 토큰을 none 이나 투명으로 두면 **그 셀만 줄 선이 사라졌다.** 한 토큰이 「초점\n       * 표식」과 「줄을 나누는 선」 두 가지를 겸하고 있었던 것이다.\n       *\n       * 초점 표식은 outline 이 그린다(data-grid-body-style.ts). 줄 선은 줄 선으로 남는다.\n       */\n\n      :host([dirty])::after {\n        content: '';\n        position: absolute;\n        right: 0;\n        top: 0;\n\n        width: 0px;\n        height: 0px;\n        border-top: 9px solid red;\n        border-left: 9px solid transparent;\n      }\n\n      span,\n      pre {\n        display: block;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        min-height: 1em;\n      }\n\n      :host([multiline]) span,\n      :host([multiline]) pre {\n        text-overflow: initial;\n        overflow: visible;\n        white-space: pre-line;\n        word-break: break-word;\n        overflow-wrap: anywhere;\n      }\n\n      * {\n        margin: 0;\n        text-align: var(--data-grid-field-text-align);\n      }\n\n      *[center] {\n        flex: none;\n        margin: 0 auto;\n      }\n\n      :host > button {\n        display: flex;\n        gap: var(--spacing-small);\n        border: 0;\n        align-items: center;\n        padding: var(--spacing-small);\n\n        color: var(--md-sys-color-on-primary);\n        background-color: var(--md-sys-color-primary);\n        border-radius: var(--data-card-item-btn-border-radius, var(--md-sys-shape-corner-tiny));\n\n        font-size: 0.8rem;\n        line-height: 0.8rem;\n\n        md-icon {\n          border: 0;\n          padding: 0;\n          background-color: unset;\n        }\n      }\n\n      :host([danger]) > button {\n        color: var(--md-sys-color-on-primary);\n        background-color: var(--md-sys-color-error);\n        border-color: var(--md-sys-color-error);\n      }\n\n      :host([danger]) > button:hover {\n        color: var(--md-sys-color-on-secondary);\n        background-color: var(--md-sys-color-secondary);\n        border-color: var(--md-sys-color-secondary);\n      }\n    `\n  ]\n\n  @property({ type: String, attribute: true }) align = DEFAULT_TEXT_ALIGN\n  @property({ type: Object }) record: GristRecord = {}\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Number }) rowIndex = 0\n  @property({ type: Number }) columnIndex = 0\n  @property({ type: Boolean }) editing = false\n  @property({ type: Boolean, reflect: true }) multiline = false\n  @property({ type: Object }) value = {}\n  @property({ type: String }) valueWith: string | null = null\n  @property({ attribute: false }) emphasized: any = false\n  @property({ type: String, attribute: true }) fixed?: string\n  @property({ type: String }) type?: string\n  @property({ type: Boolean }) isWorking: boolean = false\n\n  /* check in tree의 변화에 대응하기 위함임. 만일, record control 오브젝트로 통일되면 대체될 것임. */\n  @property({ type: String }) checked?: string\n\n  private _editCancelled?: boolean\n  private _onFieldChange: (e: Event) => void = e => {}\n  private _onKeydownInEditingMode: (e: KeyboardEvent) => void = e => {}\n\n  private tooltipController?: TooltipReactiveController = new TooltipReactiveController(this)\n\n  render(): TemplateResult {\n    if (!this.column) {\n      return html``\n    }\n\n    var { value, column, record, rowIndex } = this\n    var { renderer, editor } = column.record\n\n    return html`\n      ${this.editing\n        ? editor?.call(this, value, column, record, rowIndex, this)\n        : renderer?.call(this, value, column, record, rowIndex, this)}\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('editing')) {\n      if (this.editing) {\n        this._onKeydownInEditingMode = ((e: KeyboardEvent) => {\n          if (e.key === 'Esc' || e.key === 'Escape') {\n            /* 편집 취소 */\n            this._editCancelled = true\n          }\n        }).bind(this)\n\n        this._onFieldChange = ((e: Event) => {\n          this._editCancelled && e.stopPropagation()\n        }).bind(this)\n\n        delete this._editCancelled\n        this.addEventListener('field-change', this._onFieldChange)\n        this.addEventListener('keydown', this._onKeydownInEditingMode)\n      } else {\n        this.removeEventListener('field-change', this._onFieldChange)\n        this.removeEventListener('keydown', this._onKeydownInEditingMode)\n      }\n    }\n\n    if (changes.has('column')) {\n      var align = this.column.record.align || DEFAULT_TEXT_ALIGN\n      if (align != DEFAULT_TEXT_ALIGN) {\n        let justify = 'center'\n        switch (align) {\n          case 'right':\n            justify = 'flex-end'\n            break\n        }\n        this.style.setProperty('--data-grid-field-justify-content', justify)\n        this.style.setProperty('--data-grid-field-text-align', align)\n      }\n\n      const { danger } = this.column\n      if (danger) {\n        this.setAttribute('danger', '')\n      } else {\n        this.removeAttribute('danger')\n      }\n    }\n\n    if (changes.has('fixed')) {\n      if (this.fixed) {\n        this.style.left = this.fixed + 'px'\n      } else {\n        this.style.left = 'unset'\n      }\n    }\n\n    let disabled = this.column.record.disabled || false\n    if (typeof disabled === 'function') {\n      disabled = disabled.call(this, this.record[this.column.name], this.column, this.record, this.rowIndex, this)\n    }\n\n    if (!!disabled) {\n      // 비황성화 여부 표시\n      this.setAttribute('disabled', '')\n    } else {\n      // 비황성화 여부 제거\n      this.removeAttribute('disabled')\n    }\n\n    const emphasized =\n      this.column.record.classifier.call(this, this.record, this.rowIndex)?.emphasized || this.emphasized\n\n    if (!!emphasized) {\n      this.setAttribute('emphasized-row', '')\n\n      if (Symbol.iterator in Object(emphasized)) {\n        const [backgroundColor, foregroundColor] = emphasized as string[]\n        backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor)\n        foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor)\n      }\n    } else {\n      this.removeAttribute('emphasized-row')\n    }\n  }\n\n  get editableOnClick() {\n    const renderer = this.renderRoot.firstElementChild as HTMLElement\n    //@ts-ignore\n    return renderer && 'editableOnClick' in renderer ? renderer.editableOnClick : true\n  }\n}\n"]}
+{"version":3,"file":"data-grid-field.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-field.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\n// import { guard } from 'lit/directives/guard.js'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { TooltipReactiveController } from '@operato/utils'\n\nimport { ZERO_COLUMN } from '../configure/zero-config.js'\nimport { ColumnConfig, GristRecord } from '../types.js'\n\nconst DEFAULT_TEXT_ALIGN = 'left'\n\n@customElement('ox-grid-field')\nexport class DataGridField extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n\n        align-items: center;\n        justify-content: var(--data-grid-field-justify-content, flex-start);\n        position: relative;\n\n        white-space: nowrap;\n        background-color: var(--grid-record-background-color);\n        padding: var(--grid-record-padding);\n        border: 1px solid transparent;\n        border-width: 1px 0;\n        border-bottom: var(--grid-record-border-bottom);\n\n        font-size: var(--grid-record-wide-fontsize);\n        min-height: 30px;\n        box-sizing: border-box;\n      }\n\n      :host([multiline]) {\n        white-space: pre-line;\n      }\n\n      /*\n       * ── 칸이 쓸 수 있는 낱말 (2026-08-31) ──────────────────────────────────\n       * 렌더러가 그린 것은 이 부품의 shadow DOM 안에 들어간다. 그래서 **화면의 CSS 가 닿지 않는다.**\n       * 두 줄 칸이나 상태 알약을 그리려던 화면들이 그 벽에 막혀, 값에 인라인 style 을 박거나 칸마다\n       * 부품을 새로 만들었다.\n       *\n       * 목록이면 어디서나 같은 것을 필요로 하므로 여기서 준다. 이름은 뜻으로 짓는다 —\n       * 「늦었다」가 아니라 「심각하다(crit)」다. 늦은 것은 이 표의 일이 아니고 화면의 일이다.\n       *\n       *   .sub    둘째 줄. 「1,200 EA」 아래의 「BOLT-8」처럼 딸린 사실\n       *   .mono   고정폭. 번호·시각·수량처럼 자릿수를 견주는 값\n       *   .none   값이 없음. 빈 칸으로 두면 「아직 안 읽었다」와 구별되지 않는다\n       *   .pill   알약. good·warn·crit·info 로 뜻을 준다\n       *   .crit · .warn · .good   글자 강조\n       *\n       * 값은 --ui-* 토큰에서 오고 폴백을 둔다 — 테마가 없어도 무너지지 않는다.\n       */\n      :host([twoline]) {\n        display: block;\n        white-space: normal;\n        line-height: 1.35;\n      }\n\n      .sub {\n        display: block;\n        margin-top: 2px;\n        font-size: var(--ui-t-small, 11.5px);\n        color: var(--ui-faint, #8a959c);\n      }\n\n      .mono {\n        font-family: var(--ui-mono, ui-monospace, Menlo, monospace);\n        font-variant-numeric: tabular-nums;\n      }\n\n      /*\n       * 그 줄이 무엇인지 가리키는 값 — 작업지시 번호, 설비 이름처럼. 두 줄 칸의 첫 줄이 이것이고\n       * 둘째 줄(.sub)이 딸린 사실이다. 굵기만 올린다. 고정폭은 쓰지 않는다 — 자릿수를 세로로 견줄\n       * 값이 아니고, 같은 글자 수에도 폭이 넓어져 옆 칸을 밀어낸다.\n       */\n      .id {\n        font-weight: 620;\n      }\n\n      .none {\n        color: var(--ui-faint, #8a959c);\n      }\n\n      .crit {\n        color: var(--ui-crit, #c93f30);\n        font-weight: 640;\n      }\n\n      .warn {\n        color: var(--ui-warn, #9f5e02);\n        font-weight: 640;\n      }\n\n      .good {\n        color: var(--ui-good, #297d39);\n        font-weight: 640;\n      }\n\n      /*\n       * 값과 표식을 한 줄에 담는 자리 — **간격과 높이를 여기서 잡는다.**\n       *\n       * 처음에는 :not(.pill) + .pill { margin-left } 로 띄우려 했는데 안 걸렸다. 렌더러가 값을\n       * 텍스트 노드로 내므로 알약의 앞 형제가 **요소가 아니고**, CSS 형제 선택자는 텍스트 노드를 보지\n       * 못한다. 알약이 첫 요소이기도 해서 :first-child 로도 가려지지 않는다(실측 확인).\n       *\n       * 높이도 같은 자리에서 잡는다. baseline 으로 두면 14px 글자와 11.5px 알약의 기준선을 맞추느라\n       * 알약이 내려앉는다.\n       */\n      /* 값이 있지만 눈에 걸릴 것은 아닌 것 — 「보통」 같은 기본값. .none(값 없음)과 구별한다. */\n      .quiet {\n        color: var(--ui-muted, #57676f);\n      }\n\n      /*\n       * 별 같은 작은 기호를 글자 크기로 맞춘다. md-icon 의 기본은 24px 이라 줄 높이를 밀어낸다.\n       * 색은 물려받는다 — 개수가 크기를 말하고 색은 담는 쪽이 정한다.\n       */\n      .star {\n        --md-icon-size: 15px;\n        font-size: 15px;\n        width: 15px;\n        height: 15px;\n        color: inherit;\n      }\n\n      /* 별처럼 여럿이 붙는 기호는 사이를 좁게 — 낱말 사이의 6px 은 여기서 너무 넓다. */\n      .line:has(.star) {\n        gap: 1px;\n      }\n\n      /*\n       * 셀 안의 아이콘 단추 — 그 줄에 하는 동작(들어가기 · 열기)을 담는다.\n       *\n       * 셀의 클릭 경로를 타지 않고 스스로 받으려는 렌더러가 쓴다. 그 경로에는 동작이 견딜 수 없는 관문이\n       * 둘 있다.\n       *\n       *   data-grid-body-click-handler.ts   if (this.editTarget) return\n       *   data-grid-body-click-handler.ts   (e.target).closest(\"ox-grid-field\")\n       *\n       * 앞은 다른 칸이 편집 중이면 첫 누름을 먹고, 뒤는 셀 경계를 스치면 칸을 못 찾는다. 진짜 button 을\n       * 그리면 둘을 다 피하고 키보드로도 닿는다.\n       *\n       * 이 규칙이 여기 있는 이유: 렌더러의 결과는 이 셀의 그림자 안에 그려지므로 **페이지의 스타일이\n       * 닿지 않는다.** 셀 안의 어휘는 셀이 갖는다.\n       *\n       * host 자식으로 적은 이유: 이 파일 아래의 host 자식 button 규칙이 채운 단추를 그리고, 특이도가\n       * 같으면 **뒤에 오는 쪽이 이긴다.** 그것 없이 두면 이 단추가 채운 단추의 모양으로 나왔다\n       * (어두운 바탕 · 흰 글자, 실측 rgb(38, 46, 56)).\n       *\n       * 둘의 뜻이 다르다 — 채운 단추는 **저지르는 동작**, 이 단추는 **옮겨 가기**다. 그래서 평소에는\n       * 흐리고 배경이 없다.\n       *\n       * 배경은 **칸을 채우지 않고 동그라미로** 든다. 칸을 다 채우면 「이 셀이 골라졌다」로 읽힌다 —\n       * 표에서 채워진 사각형은 선택의 뜻이다. 동그라미는 단추의 뜻이다.\n       */\n      :host > button.icon {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        width: 26px;\n        height: 26px;\n        flex: none;\n        /*\n         * 누를 자리는 26px 로 두되 **줄 높이는 밀지 않는다.**\n         *\n         * 이 단추가 든 칸 하나 때문에 표의 모든 줄이 46px 이 됐다(글자만 있는 줄은 38px). 스무 줄이면\n         * 240px 을 잃는다. [재봤음] grid-template-rows: 46px 34px\n         *\n         * 그렇다고 26px 아래로 줄이면 손가락으로 못 누른다(가로세로 24px 이 최소다). 그래서 상자는 26px\n         * 로 두고 위아래 3px 씩을 여백에서 되돌려, 자리는 20px 만 차지하게 한다 — 글자 한 줄과 같다.\n         */\n        margin-top: -3px;\n        margin-bottom: -3px;\n        border: none;\n        border-radius: 50%;\n        background: transparent;\n        padding: 0;\n        color: var(--ui-faint, #8a959c);\n        cursor: pointer;\n        transition:\n          background-color 0.12s ease,\n          color 0.12s ease;\n      }\n\n      :host > button.icon:hover {\n        background-color: var(--ui-hover, rgba(0, 0, 0, 0.06));\n        color: var(--ui-ink, #17272f);\n      }\n\n      :host > button.icon:active {\n        background-color: var(--ui-active, rgba(0, 0, 0, 0.12));\n      }\n\n      /* 키보드로 온 초점만 테를 보인다 — 눌러서 온 초점에는 보이지 않는다. */\n      :host > button.icon:focus-visible {\n        outline: 2px solid var(--ui-accent, #00727e);\n        outline-offset: -2px;\n      }\n\n      /*\n       * 값을 함께 담는 단추 — 「4 ›」처럼 숫자와 화살이 나란히 선다.\n       *\n       * 아이콘만으로는 그 줄에 무엇이 있는지 말하지 못한다. 값이 뜻을 나르고 화살이 「누를 수 있다」를\n       * 말한다. 그래서 동그라미가 아니라 알약 모양이다.\n       */\n      :host > button.icon.wide {\n        width: auto;\n        min-width: 44px;\n        gap: 0;\n        padding: 0 2px 0 7px;\n        border-radius: 999px;\n        font: inherit;\n        font-size: var(--grid-record-wide-fontsize);\n        font-variant-numeric: tabular-nums;\n      }\n\n      :host > button.icon.wide md-icon {\n        --md-icon-size: 16px;\n        font-size: 16px;\n        width: 16px;\n        height: 16px;\n      }\n\n      :host > button.icon md-icon {\n        --md-icon-size: 18px;\n        font-size: 18px;\n        width: 18px;\n        height: 18px;\n      }\n\n      .line {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        min-width: 0;\n      }\n\n      /* 값이 길면 값이 줄고 표식은 그대로 남는다 — 표식이 먼저 잘리면 읽을 수 없다. */\n      .line > :first-child {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      /* 표식 — 상태 같은 짧은 값에 두른다. 점이 색을 나르고 글자가 뜻을 나른다. */\n      .pill {\n        display: inline-flex;\n        align-items: center;\n        gap: 5px;\n        padding: 1px 8px;\n        border: 1px solid var(--ui-line, #d5dce0);\n        border-radius: 999px;\n        font-size: var(--ui-t-small, 11.5px);\n        font-weight: 400;\n        color: var(--ui-muted, #57676f);\n        white-space: nowrap;\n      }\n\n      /*\n       * 색만으로 뜻을 전하지 않는다 — 알약 안의 글자가 함께 말한다. 점은 거드는 것이다.\n       *\n       * align-self: center 가 필요하다. 알약은 flex 이고 점은 그 안의 항목인데, 높이를 6px 로\n       * 주어도 교차축에서 늘어나 **6×11.5 짜리 세로 타원**이 됐다(원이 아니라 길쭉했다).\n       * .pill 의 align-items: center 는 부모 쪽 값이라 이 항목의 stretch 를 막지 못한다.\n       */\n      .pill .dot {\n        align-self: center;\n        width: 6px;\n        height: 6px;\n        /*\n         * 이 파일 아래에 span, pre 의 min-height: 1em 이 있다. 값이 빈 칸에서도 줄 높이를\n         * 유지하려는 규칙인데, 점도 span 이라 거기 걸려 **높이가 1em(11.5px)까지 늘어났다** —\n         * 그래서 6px 을 줘도 6×11.5 세로 타원이 됐다. 여기서 되돌린다.\n         */\n        min-height: 0;\n        border-radius: 50%;\n        background: currentColor;\n        flex: none;\n      }\n\n      .pill.good {\n        color: var(--ui-good, #297d39);\n        border-color: color-mix(in srgb, var(--ui-good, #297d39) 40%, transparent);\n        font-weight: 400;\n      }\n\n      .pill.info {\n        color: var(--ui-accent, #00727e);\n        border-color: color-mix(in srgb, var(--ui-accent, #00727e) 40%, transparent);\n        font-weight: 400;\n      }\n\n      .pill.warn {\n        color: var(--ui-warn, #9f5e02);\n        border-color: color-mix(in srgb, var(--ui-warn, #9f5e02) 40%, transparent);\n        font-weight: 400;\n      }\n\n      .pill.crit {\n        color: var(--ui-crit, #c93f30);\n        border-color: color-mix(in srgb, var(--ui-crit, #c93f30) 40%, transparent);\n        font-weight: 400;\n      }\n\n      .pill.quiet {\n        color: var(--ui-faint, #8a959c);\n      }\n\n      :host([gutter]) {\n        padding: var(--grid-gutter-padding);\n        text-align: center;\n      }\n\n      :host([gutter]) * {\n        cursor: default;\n        overflow: hidden;\n      }\n\n      :host([editing]) {\n        border-top: var(--grid-record-editing-border);\n        border-bottom: var(--grid-record-editing-border);\n      }\n\n      /*\n       * 초점이 갔다고 **줄을 나누는 선을 바꾸지 않는다.**\n       *\n       * 전에는 여기서 --grid-record-border-bottom 을 초점 표식 값으로 덮어썼다. 그래서 표식을\n       * 감추려고 그 토큰을 none 이나 투명으로 두면 **그 셀만 줄 선이 사라졌다.** 한 토큰이 「초점\n       * 표식」과 「줄을 나누는 선」 두 가지를 겸하고 있었던 것이다.\n       *\n       * 초점 표식은 outline 이 그린다(data-grid-body-style.ts). 줄 선은 줄 선으로 남는다.\n       */\n\n      :host([dirty])::after {\n        content: '';\n        position: absolute;\n        right: 0;\n        top: 0;\n\n        width: 0px;\n        height: 0px;\n        border-top: 9px solid red;\n        border-left: 9px solid transparent;\n      }\n\n      span,\n      pre {\n        display: block;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        min-height: 1em;\n      }\n\n      :host([multiline]) span,\n      :host([multiline]) pre {\n        text-overflow: initial;\n        overflow: visible;\n        white-space: pre-line;\n        word-break: break-word;\n        overflow-wrap: anywhere;\n      }\n\n      * {\n        margin: 0;\n        text-align: var(--data-grid-field-text-align);\n      }\n\n      *[center] {\n        flex: none;\n        margin: 0 auto;\n      }\n\n      :host > button {\n        display: flex;\n        gap: var(--spacing-small);\n        border: 0;\n        align-items: center;\n        padding: var(--spacing-small);\n\n        color: var(--md-sys-color-on-primary);\n        background-color: var(--md-sys-color-primary);\n        border-radius: var(--data-card-item-btn-border-radius, var(--md-sys-shape-corner-tiny));\n\n        font-size: 0.8rem;\n        line-height: 0.8rem;\n\n        md-icon {\n          border: 0;\n          padding: 0;\n          background-color: unset;\n        }\n      }\n\n      :host([danger]) > button {\n        color: var(--md-sys-color-on-primary);\n        background-color: var(--md-sys-color-error);\n        border-color: var(--md-sys-color-error);\n      }\n\n      :host([danger]) > button:hover {\n        color: var(--md-sys-color-on-secondary);\n        background-color: var(--md-sys-color-secondary);\n        border-color: var(--md-sys-color-secondary);\n      }\n    `\n  ]\n\n  @property({ type: String, attribute: true }) align = DEFAULT_TEXT_ALIGN\n  @property({ type: Object }) record: GristRecord = {}\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Number }) rowIndex = 0\n  @property({ type: Number }) columnIndex = 0\n  @property({ type: Boolean }) editing = false\n  @property({ type: Boolean, reflect: true }) multiline = false\n  @property({ type: Object }) value = {}\n  @property({ type: String }) valueWith: string | null = null\n  @property({ attribute: false }) emphasized: any = false\n  @property({ type: String, attribute: true }) fixed?: string\n  @property({ type: String }) type?: string\n  @property({ type: Boolean }) isWorking: boolean = false\n\n  /* check in tree의 변화에 대응하기 위함임. 만일, record control 오브젝트로 통일되면 대체될 것임. */\n  @property({ type: String }) checked?: string\n\n  private _editCancelled?: boolean\n  private _onFieldChange: (e: Event) => void = e => {}\n  private _onKeydownInEditingMode: (e: KeyboardEvent) => void = e => {}\n\n  private tooltipController?: TooltipReactiveController = new TooltipReactiveController(this)\n\n  render(): TemplateResult {\n    if (!this.column) {\n      return html``\n    }\n\n    var { value, column, record, rowIndex } = this\n    var { renderer, editor } = column.record\n\n    return html`\n      ${this.editing\n        ? editor?.call(this, value, column, record, rowIndex, this)\n        : renderer?.call(this, value, column, record, rowIndex, this)}\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('editing')) {\n      if (this.editing) {\n        this._onKeydownInEditingMode = ((e: KeyboardEvent) => {\n          if (e.key === 'Esc' || e.key === 'Escape') {\n            /* 편집 취소 */\n            this._editCancelled = true\n          }\n        }).bind(this)\n\n        this._onFieldChange = ((e: Event) => {\n          this._editCancelled && e.stopPropagation()\n        }).bind(this)\n\n        delete this._editCancelled\n        this.addEventListener('field-change', this._onFieldChange)\n        this.addEventListener('keydown', this._onKeydownInEditingMode)\n      } else {\n        this.removeEventListener('field-change', this._onFieldChange)\n        this.removeEventListener('keydown', this._onKeydownInEditingMode)\n      }\n    }\n\n    if (changes.has('column')) {\n      /*\n       * 정렬은 **넣을 때만이 아니라 되돌릴 때도** 손대야 한다.\n       *\n       * 이 요소는 재사용된다. 전에는 기본값이 아닐 때만 인라인 값을 넣고 지우지 않았다. 그래서 한 번\n       * 오른쪽 정렬 칸을 그린 셀이 다음에 왼쪽 정렬 칸을 그려도 오른쪽에 남았다.\n       *\n       * [재봤음] 품질 화면 「판단」 칸에서 머리글은 x=380(왼쪽)인데 값은 x=452(flex-end)였다. 숫자 칸을\n       * 오른쪽으로 바꾼 뒤 드러났다 — 오른쪽 정렬 칸이 드물던 동안은 눈에 안 띄었다. 2026-09-02\n       */\n      var align = this.column.record.align || DEFAULT_TEXT_ALIGN\n\n      if (align == DEFAULT_TEXT_ALIGN) {\n        this.style.removeProperty('--data-grid-field-justify-content')\n        this.style.removeProperty('--data-grid-field-text-align')\n      } else {\n        let justify = 'center'\n        switch (align) {\n          case 'right':\n            justify = 'flex-end'\n            break\n        }\n        this.style.setProperty('--data-grid-field-justify-content', justify)\n        this.style.setProperty('--data-grid-field-text-align', align)\n      }\n\n      const { danger } = this.column\n      if (danger) {\n        this.setAttribute('danger', '')\n      } else {\n        this.removeAttribute('danger')\n      }\n    }\n\n    if (changes.has('fixed')) {\n      if (this.fixed) {\n        this.style.left = this.fixed + 'px'\n      } else {\n        this.style.left = 'unset'\n      }\n    }\n\n    let disabled = this.column.record.disabled || false\n    if (typeof disabled === 'function') {\n      disabled = disabled.call(this, this.record[this.column.name], this.column, this.record, this.rowIndex, this)\n    }\n\n    if (!!disabled) {\n      // 비황성화 여부 표시\n      this.setAttribute('disabled', '')\n    } else {\n      // 비황성화 여부 제거\n      this.removeAttribute('disabled')\n    }\n\n    const emphasized =\n      this.column.record.classifier.call(this, this.record, this.rowIndex)?.emphasized || this.emphasized\n\n    if (!!emphasized) {\n      this.setAttribute('emphasized-row', '')\n\n      if (Symbol.iterator in Object(emphasized)) {\n        const [backgroundColor, foregroundColor] = emphasized as string[]\n        backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor)\n        foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor)\n      }\n    } else {\n      this.removeAttribute('emphasized-row')\n    }\n  }\n\n  get editableOnClick() {\n    const renderer = this.renderRoot.firstElementChild as HTMLElement\n    //@ts-ignore\n    return renderer && 'editableOnClick' in renderer ? renderer.editableOnClick : true\n  }\n}\n"]}

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

@@ -121,8 +121,21 @@ DataGridFooter.styles = [
         flex: 1;
       }
 
-      md-icon {
-        font-size: 1.5em;
+      /*
+       * 아이콘 상자와 글리프 크기를 같이 준다.
+       *
+       * font-size: 1.5em 만 두면 글리프가 21px 인데 상자는 --md-icon-size(14px)라 **글리프가 상자
+       * 밖으로 넘친다.** 둘을 같은 값으로 못박는다.
+       */
+      /*
+       * host 를 앞에 붙여 특이도를 올린다. 위의 host 자식 규칙이 (0,1,0)이고 이 규칙이 (0,0,1)이라
+       * **아이콘까지 글자 크기로 줄어들었다** — 앞뒤 화살표가 12px 이 됐다. [재봤음] 2026-09-02
+       */
+      :host md-icon {
+        --md-icon-size: 18px;
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
         vertical-align: middle;
 
         font-variation-settings: 'FILL' 1;
@@ -139,10 +152,15 @@ DataGridFooter.styles = [
         color: var(--grid-footer-limit-color);
       }
 
+      /*
+       * 지금 고른 것은 **굵기만**으로 말한다.
+       *
+       * 밑줄은 「누를 수 있다」의 표시이고 굵기는 「지금 이것」의 표시다. 겹쳐 쓰면 두 뜻이 섞이고,
+       * 안 고른 것들도 누를 수 있는데 아무 표시가 없어진다.
+       */
       .limit a[selected] {
         color: var(--grid-footer-color);
-        font-weight: bold;
-        text-decoration: underline;
+        font-weight: 600;
       }
 
       a[inactive] * {
@@ -163,8 +181,7 @@ DataGridFooter.styles = [
 
       .pages a[selected] {
         color: var(--grid-footer-color);
-        font-weight: bold;
-        text-decoration: underline;
+        font-weight: 600;
         cursor: default;
       }
 
@@ -175,11 +192,21 @@ DataGridFooter.styles = [
       .page-input {
         width: 30px;
         text-align: center;
-        color: var(--grid-footer-limit-color);
+        /*
+         * 글꼴을 물려받는다. input 은 기본으로 물려받지 않아서 한 줄 안에 13.33px 과 14px 이 섞여
+         * 있었다 — 상자 안은 브라우저 기본, 바로 옆 「/ 1」 은 푸터 크기였다.
+         */
+        font: inherit;
+        /*
+         * 줄 높이를 못박는다. font: inherit 만으로는 물려받은 줄 높이(20px)가 그대로 와서 상자가 26px 이
+         * 되고, 옆 글자(20px)보다 튀어나온다 — 푸터에서 가장 큰 것이 쪽 번호 상자가 된다.
+         */
+        line-height: 17px;
+        color: var(--grid-footer-color);
         background: transparent;
-        border: 1px solid var(--grid-footer-color);
+        border: var(--grid-footer-input-border);
         border-radius: 4px;
-        padding: 0.125rem 0.25rem;
+        padding: 1px 4px;
       }
 
       @media screen and (max-width: 460px) {