@iyulab/data-components 0.9.1 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,97 @@
 # Changelog
 
+## [0.11.0] - 2026-08-04
+
+### Changed
+
+- **`u-rich-table` 의 `_id` 부재 경고가 영어로 이주했다** — 개발자 대면 진단이므로 로케일
+  레지스트리에 넣지 않는다(사용자가 읽는 문자열이 아니다).
+
+- ⚠**표 문구가 «영어 기본 + 로케일 레지스트리»로 이주했다** — 기본값 7건이 한국어 리터럴이었다
+  (`u-rich-table` 6 · `u-simple-sheet` 1).
+
+  ```ts
+  import { Locale } from '@iyulab/components';
+  import { messages } from '@iyulab/data-components';
+
+  Locale.set('ko');                                  // 검증 메시지와 함께 전환된다
+  messages.register('ja', { empty: 'データなし' });   // 언어를 더하거나 문구를 덮는다
+  ```
+
+  ⚠**한국어 환경은 종전과 같은 문구를 본다**(내장 `ko` · `ko-KR` → `ko`).
+  ⚠**소비자가 준 값은 여전히 이긴다** — `emptyMessage` 등 프로퍼티 계약은 그대로다.
+
+  ★**기본값을 «비우고» 렌더에서 해석한다.** 프로퍼티 초기값에 문자열을 박으면 **생성 시점의
+  로케일에 고정**돼 나중에 `Locale.set()` 을 불러도 이미 만들어진 표는 따라오지 않는다.
+  ⚠**따라서 프로퍼티를 읽으면 기본 상태에서 `''` 가 나온다**(종전에는 한국어 리터럴).
+  화면 문구는 렌더 결과가 계약이다.
+
+  ★검증 메시지(`필수 항목입니다`)는 **`@iyulab/components` 의 키셋**을 쓴다
+  (`Locale.getValue('valueMissing')` · 14로케일). 같은 문장을 두 곳에 두지 않는다.
+
+### Requires
+
+- `@iyulab/components >= 1.23.0` (`Locale.namespace`).
+
+### Added
+
+- **`u-simple-sheet` 의 행 높이·여백·글자 크기를 소비자가 정할 수 있다** — 조절점 6종.
+
+  ```
+  --dc-row-height           24px   셀 height · line-height (둘 다)
+  --dc-cell-padding-block    0px   셀 · 편집 입력의 세로 여백 (행 높이에 가산)
+  --dc-cell-padding-inline   6px   〃 가로 여백
+  --dc-font-size            13px   본문 셀 · 편집 입력 · 드롭다운 항목
+  --dc-header-font-size     12px   열 머리
+  --dc-header-font-weight    600   〃
+  ```
+
+  종전에는 치수가 전부 리터럴이라, 한 화면에 표가 여럿일 때 **시트만 다른 높이로 남아도
+  맞출 방법이 없었다**(공개 API 에 치수 노브 0건 · `part` 0건). 0.10.0 이 연 색 축과 같은
+  자리이고, 색을 맞추고 나서야 높이 차이가 드러난 형태다.
+
+  ⚠**행 높이와 `line-height` 는 한 토큰이 정한다.** 따로 열면 소비자가 한쪽만 바꿔 글자가
+  세로로 어긋난다 — 그 묶임이 이 축의 유일한 제약이다.
+
+  ⚠**색 축과 달리 역할 토큰에서 파생하지 않는다** — 역할 층에 치수 축이 없다. 그래서
+  `:host` 리터럴 기본값이고, 소비자는 **요소 선택자**로 덮는다(`:root` 는 닿지 않는다).
+
+  ⚠**기본 렌더는 변하지 않는다.** 선언하지 않으면 종전 값으로 그려진다.
+
+  ⚠**선언값과 읽히는 행 높이는 1.5px 다르다** — `border-collapse` 로 접힌 테두리가 사용값에
+  더해진다(`24px` 선언 → `25.5px` 로 읽힘). 32px 로 맞추려면 `30.5px` 를 선언한다.
+
+  `tests/browser/simple-sheet-density.browser.test.ts` 가 **실제 크로미움 계산값으로** 효력을
+  잰다 — 소스 대조는 «적혀 있음»만 증명하고, 문서 스코프 선언이 섀도의 `:host` 를 이기는지는
+  캐스케이드 문제라 계산값으로만 갈린다.
+
+## [0.10.0] - 2026-08-03
+
+### Added
+
+- **표의 보조 전경을 «표 안에서만» 조절할 수 있다** — 파생 토큰 5단.
+
+  ```
+  --dc-empty-color      빈 상태 안내문              data-view · simple-sheet · rich-table
+  --dc-header-color     열 머리 · 행 머리           data-view · simple-sheet
+  --dc-muted-color      보조 텍스트 · 라벨          data-view · rich-table
+  --dc-icon-color       정렬 표시 · 확장 · 행 메뉴  rich-table
+  --dc-readonly-color   읽기 전용 셀                simple-sheet
+  ```
+
+  종전에는 세 컴포넌트가 보조 전경을 전부 `--u-txt-color-weak` 로 **섀도 안에서 직독**해,
+  문서 전체의 보조 텍스트를 바꾸지 않고는 표만 맞출 방법이 없었다(소비자 토큰 0 · `part` 0).
+
+  ⚠**기본 렌더는 변하지 않는다.** 다섯 단이 전부 `--u-txt-color-weak` 에서 파생되고
+  다크 대응도 그 역할 토큰이 이미 갖고 있다 — 다크 전용 선언을 더하지 않았다.
+
+  ★**한 토큰으로 접지 않았다.** 전 컬럼이 읽기 전용인 시트에서는 데이터가 통째로 흐려
+  보이는데, 단이 하나면 *"읽기 전용 셀만 진하게"* 가 원리적으로 불가능해진다.
+
+  ⚠**컴포넌트가 «읽는» 단만 선언한다** — 다섯을 어디서나 선언하면 소비자가 바꿔도 아무 일이
+  없는 자리가 생긴다. 어느 단이 어디에 있는지는 README 의 표가 정본이고,
+  `tests/consumer-tokens.test.ts` 가 **선언과 사용을 양방향으로** 대조한다.
+
 ## [0.9.1] - 2026-08-03
 
 ### Fixed

package/README.md

@@ -157,6 +157,73 @@ import '@iyulab/components/styles/tokens.css';
 :root { --u-primary-color: #7B1FA2; }
 ```
 
+### 보조 전경 조절 (0.10.0~)
+
+표의 **보조 전경**(빈 상태 안내문·열 머리·읽기 전용 셀 등)은 역할 토큰
+`--u-txt-color-weak` 에서 파생된 단으로 그려집니다. 그 단을 **표 안에서만** 조절할 수
+있습니다 — 문서 전체의 보조 텍스트를 건드리지 않고 표만 맞출 때 씁니다.
+
+| 토큰 | 무엇을 칠하나 | `u-data-view` | `u-simple-sheet` | `u-rich-table` |
+|---|---|:---:|:---:|:---:|
+| `--dc-empty-color` | 빈 상태 안내문 | ● | ● | ● |
+| `--dc-header-color` | 열 머리 · 행 머리 | ● | ● | |
+| `--dc-muted-color` | 보조 텍스트 · 라벨 | ● | | ● |
+| `--dc-icon-color` | 정렬 표시 · 확장 · 행 메뉴 | | | ● |
+| `--dc-readonly-color` | 읽기 전용 셀 | | ● | |
+
+⚠**빈 칸은 그 컴포넌트가 그 단을 «읽지 않는다»는 뜻**입니다. 값을 줘도 아무 일이
+일어나지 않습니다 — 읽지 않는 토큰을 선언해 두지 않는 것이 이 패키지의 방침입니다.
+
+커스텀 프로퍼티는 상속되므로 **범위는 선택자로 정합니다**:
+
+```css
+/* 세 표를 한꺼번에 */
+:root { --dc-empty-color: #9AA0A6; }
+
+/* 한 컴포넌트만 */
+u-rich-table { --dc-icon-color: #B0B0B0; }
+```
+
+★**한 토큰으로 접지 않은 이유**: 전 컬럼이 읽기 전용인 시트에서는 데이터가 통째로
+흐려 보이는데, 단이 하나면 *"읽기 전용 셀만 진하게"* 가 원리적으로 불가능합니다.
+
+⚠**`0.10.0` 은 조절점만 엽니다 — 기본 렌더는 변하지 않습니다.** 다섯 단이 전부
+`--u-txt-color-weak` 에서 파생되며, 다크 대응도 그 역할 토큰이 이미 갖고 있습니다.
+
+### 시트 밀도·타이포 조절 (`u-simple-sheet` · 0.11.0~)
+
+한 화면에 표가 여럿일 때 **행 높이를 서로 맞추기 위한** 조절점입니다. 색 축(위)과 같은
+이유로 열렸습니다 — 어느 높이가 옳은지는 소비자가 정할 일인데, 종전에는 치수가 전부
+리터럴이라 정할 방법이 없었습니다.
+
+| 토큰 | 기본값 | 무엇을 정하나 |
+|---|---|---|
+| `--dc-row-height` | `24px` | 셀 `height` 와 `line-height` **둘 다** |
+| `--dc-cell-padding-block` | `0px` | 셀·편집 입력의 세로 여백 (행 높이에 **가산**) |
+| `--dc-cell-padding-inline` | `6px` | 〃 가로 여백 |
+| `--dc-font-size` | `13px` | 본문 셀 · 편집 입력 · 드롭다운 항목 |
+| `--dc-header-font-size` | `12px` | 열 머리 |
+| `--dc-header-font-weight` | `600` | 〃 |
+
+```css
+/* ⚠요소 선택자로 겨눕니다 — :root 는 닿지 않습니다(아래 참조) */
+u-simple-sheet {
+  --dc-row-height: 30.5px;   /* 읽히는 행 높이 32px */
+}
+```
+
+⚠**`:root` 로는 닿지 않습니다.** 커스텀 프로퍼티 상속값은 섀도 루트의 `:host` 선언에
+집니다. 색 축과 달리 이 여섯은 `:host` 에 리터럴 기본값을 갖고 있으므로(역할 층에 치수
+축이 없어 파생할 곳이 없습니다) **요소 선택자**(`u-simple-sheet { … }`)로 선언하십시오.
+
+⚠**선언값과 «읽히는» 행 높이는 1.5px 다릅니다.** `border-collapse` 로 접힌 테두리가
+사용값에 더해집니다 — 기본 `24px` 선언이 `25.5px` 로 읽힙니다. 32px 로 맞추려면
+`30.5px` 를 선언하십시오. (같은 이유로 **빈 행은 데이터 행보다 1.5px 낮습니다** —
+`0.11.0` 이전부터 그랬고, 교정하면 기본 렌더가 바뀌므로 이 릴리스에서는 두었습니다.)
+
+⚠**`0.11.0` 도 조절점만 엽니다** — 선언하지 않으면 종전과 같은 값으로 그려집니다.
+이 여섯은 `u-simple-sheet` 전용입니다(`u-data-view`·`u-rich-table` 은 읽지 않습니다).
+
 ### 알려진 제약
 
 - **표면 높이를 뜻하는 토큰이 없습니다** — 배경 역할 토큰은 상호작용 상태 이름

package/dist/components/data-view/UDataView.styles.js

@@ -1,6 +1,22 @@
 import { css } from "lit";
 var styles = [css`
   :host {
+
+    /* ── 소비자 조절점 — 보조 전경 5단 ──
+       ★이 셋의 보조 전경이 전부 --u-txt-color-weak 직독이라 «표 안에서만» 조절할 방법이
+       없었다(소비자 토큰 0 · part 0). 소비앱은 한 제품 안에 표를 넷 두는데, 그중 업스트림
+       표만 조절되지 않으면 나머지에 맞출 수가 없다.
+       ⚠**한 토큰으로 접지 않는다** — 실측상 16곳의 역할이 갈리고, 접으면 "읽기 전용 셀만
+       진하게" 같은 요청이 원리적으로 불가능해진다. 그것이 이 요청의 발단이었다.
+       ⚠**다크 블록에 다시 선언하지 않는다.** --u-txt-color-weak 자체가 테마 변형이므로
+       시트가 있으면 따라온다. 이 패키지의 다크 블록이 «비어 있는 것»이 목표 상태다.
+       ⚠**폴백 리터럴은 라이트 시트 값의 복제다**(루트 tokens:sync 가 대조한다).
+       ⚠**이 컴포넌트가 «읽는» 단만 선언한다.** 다섯을 어디서나 선언하면 소비자가
+       바꿔도 아무 일이 없는 자리가 생긴다 — 이 리포가 반복해서 본 «토큰 존재 ≠ 배선»
+       이다. 어느 단이 어디에 있는지는 README 의 표가 정본이다. */
+    --dc-muted-color:    var(--u-txt-color-weak, #757575);   /* 보조 텍스트 · 라벨 */
+    --dc-header-color:   var(--u-txt-color-weak, #757575);   /* 열 머리 · 행 머리 */
+    --dc-empty-color:    var(--u-txt-color-weak, #757575);   /* 빈 상태 안내문 */
     display: block;
     width: 100%;
   }
@@ -40,7 +56,7 @@ var styles = [css`
 
   .info {
     font-size: 0.875rem;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-muted-color);
     font-weight: 500;
   }
 
@@ -95,7 +111,7 @@ var styles = [css`
   .card-field .label {
     font-size: 0.875rem;
     font-weight: 600;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-muted-color);
     min-width: 80px;
     flex-shrink: 0;
   }
@@ -147,7 +163,7 @@ var styles = [css`
     text-align: left;
     font-size: 0.875rem;
     font-weight: 600;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-header-color);
     border-bottom: 2px solid var(--u-border-color, #E0E0E0);
     white-space: nowrap;
   }
@@ -181,7 +197,7 @@ var styles = [css`
     align-items: center;
     justify-content: center;
     min-height: 300px;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-empty-color);
     font-size: 1rem;
   }
 `];

package/dist/components/simple-sheet/USimpleSheet.js

@@ -1,5 +1,6 @@
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
+import { messages } from "../../utilities/messages.js";
 import { styles } from "./USimpleSheet.styles.js";
 import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
@@ -25,7 +26,7 @@ var USimpleSheet = class USimpleSheet extends UElement {
 		this.rows = 20;
 		this.cols = 10;
 		this.readonly = false;
-		this.noMatchMessage = "일치하는 항목 없음";
+		this.noMatchMessage = "";
 		this._sel = null;
 		this._editing = null;
 		this._editVal = "";
@@ -612,7 +613,7 @@ var USimpleSheet = class USimpleSheet extends UElement {
             </div>
           ` : noMatch && isStrict ? html`
             <div class="cell-dropdown">
-              <div class="dropdown-empty">${this.noMatchMessage}</div>
+              <div class="dropdown-empty">${this.noMatchMessage || messages.text("noMatch")}</div>
             </div>
           ` : ""}
         ` : this._formatValue(value, c, r)}

package/dist/components/simple-sheet/USimpleSheet.styles.js

@@ -2,6 +2,41 @@ import { css, unsafeCSS } from "lit";
 //#region src/components/simple-sheet/USimpleSheet.styles.ts
 var baseStyles = css`
   :host {
+
+    /* ── 소비자 조절점 — 보조 전경 5단 ──
+       ★이 셋의 보조 전경이 전부 --u-txt-color-weak 직독이라 «표 안에서만» 조절할 방법이
+       없었다(소비자 토큰 0 · part 0). 소비앱은 한 제품 안에 표를 넷 두는데, 그중 업스트림
+       표만 조절되지 않으면 나머지에 맞출 수가 없다.
+       ⚠**한 토큰으로 접지 않는다** — 실측상 16곳의 역할이 갈리고, 접으면 "읽기 전용 셀만
+       진하게" 같은 요청이 원리적으로 불가능해진다. 그것이 이 요청의 발단이었다.
+       ⚠**다크 블록에 다시 선언하지 않는다.** --u-txt-color-weak 자체가 테마 변형이므로
+       시트가 있으면 따라온다. 이 패키지의 다크 블록이 «비어 있는 것»이 목표 상태다.
+       ⚠**폴백 리터럴은 라이트 시트 값의 복제다**(루트 tokens:sync 가 대조한다).
+       ⚠**이 컴포넌트가 «읽는» 단만 선언한다.** 다섯을 어디서나 선언하면 소비자가
+       바꿔도 아무 일이 없는 자리가 생긴다 — 이 리포가 반복해서 본 «토큰 존재 ≠ 배선»
+       이다. 어느 단이 어디에 있는지는 README 의 표가 정본이다. */
+    --dc-header-color:   var(--u-txt-color-weak, #757575);   /* 열 머리 · 행 머리 */
+    --dc-empty-color:    var(--u-txt-color-weak, #757575);   /* 빈 상태 안내문 */
+    --dc-readonly-color: var(--u-txt-color-weak, #757575);   /* 읽기 전용 셀 */
+
+    /* ── 소비자 조절점 — 밀도·타이포 ──
+       ★색 축(위)과 같은 이유로 열었다. 한 제품 안에 표가 여럿일 때 «어느 높이가 옳은가»는
+       소비자가 정할 일인데, 이 컴포넌트는 치수가 전부 리터럴이라 정할 방법이 없었다.
+       ⚠**행 높이와 line-height 는 한 토큰이 정한다.** 따로 열면 소비자가 한쪽만 바꿔
+       글자가 세로로 어긋난다 — 그 묶임이 이 축의 유일한 제약이다.
+       ⚠**여백 축은 «가산»이다**: 실제 행 높이 = --dc-row-height + 2×--dc-cell-padding-block.
+       기본값이 0 이라 선언하지 않으면 종전과 같다.
+       ⚠**색 축과 달리 역할 토큰에서 파생하지 않는다** — 역할 층에 치수 축이 없다.
+       그래서 폴백이 아니라 :host 리터럴 기본값이고, 소비자는 **요소 선택자**로 덮는다
+       (:host 선언은 상속값을 이기므로 :root 로는 닿지 않는다).
+       ⚠**이 컴포넌트가 «읽는» 단만 선언한다** — 색 축과 같은 규칙이다. */
+    --dc-row-height:          24px;   /* 셀 height · line-height (묶임) */
+    --dc-cell-padding-block:   0px;   /* 셀 · 편집 입력의 세로 여백 (가산) */
+    --dc-cell-padding-inline:  6px;   /* 〃 가로 여백 */
+    --dc-font-size:           13px;   /* 본문 셀 · 편집 입력 · 드롭다운 항목 */
+    --dc-header-font-size:    12px;   /* 열 머리 */
+    --dc-header-font-weight:   600;   /* 〃 */
+
     display: block;
     width: 100%;
     height: 400px;
@@ -62,9 +97,9 @@ var baseStyles = css`
     background: var(--u-neutral-100, #F5F5F5);
     padding: 4px 8px;
     text-align: center;
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--u-txt-color-weak, #757575);
+    font-size: var(--dc-header-font-size);
+    font-weight: var(--dc-header-font-weight);
+    color: var(--dc-header-color);
     border-right: 1px solid var(--u-border-color, #E0E0E0);
     border-bottom: 2px solid var(--u-border-color, #E0E0E0);
     white-space: nowrap;
@@ -124,7 +159,7 @@ var baseStyles = css`
     text-align: right;
     padding: 0 6px;
     font-size: 11px;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-header-color);
     /* 예외 — 표면 높이 축이 없다. 행번호 여백은 "비활성"이 아니라 시트 바탕보다
        한 단 내려간 면이다. --u-bg-color-disabled 를 쓰면 다크에서 바탕(neutral-100)과
        같은 값이 되어 여백 구분이 사라진다 — 스냅샷이 그것을 잡았다. */
@@ -144,18 +179,20 @@ var baseStyles = css`
 
   /* Data cells */
   .cell {
-    padding: 0 6px;
+    padding: var(--dc-cell-padding-block) var(--dc-cell-padding-inline);
     border-right: 1px solid var(--u-border-color-weak, #EEEEEE);
     border-bottom: 1px solid var(--u-border-color-weak, #EEEEEE);
-    font-size: 13px;
+    font-size: var(--dc-font-size);
     color: var(--u-txt-color, #212121);
     min-width: 80px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     cursor: cell;
-    height: 24px;
-    line-height: 24px;
+    /* ⚠height 는 «빈 셀»을 정한다 — 내용이 있는 셀의 높이는 line-height 가 만든다.
+       둘 중 하나만 배선하면 데이터 행과 빈 행의 높이가 갈린다(네거티브 컨트롤이 잡은 자리). */
+    height: var(--dc-row-height);
+    line-height: var(--dc-row-height);
     vertical-align: middle;
     position: relative;
     box-sizing: border-box;
@@ -190,8 +227,9 @@ var baseStyles = css`
     border: none;
     outline: 2px solid var(--u-blue-500, #2196F3);
     outline-offset: -1px;
-    padding: 0 6px;
-    font-size: 13px;
+    /* ⚠셀과 «같은 값»이어야 한다 — 어긋나면 편집 진입 순간 글자가 튄다. */
+    padding: var(--dc-cell-padding-block) var(--dc-cell-padding-inline);
+    font-size: var(--dc-font-size);
     font-family: inherit;
     color: var(--u-txt-color, #212121);
     background: var(--u-bg-color, #FFFFFF);
@@ -219,7 +257,8 @@ var baseStyles = css`
 
   .dropdown-item {
     padding: 4px 8px;
-    font-size: 13px;
+    /* 셀 값의 후보를 보이는 자리다 — 본문 글자 축을 따른다. */
+    font-size: var(--dc-font-size);
     color: var(--u-txt-color, #212121);
     cursor: pointer;
     white-space: nowrap;
@@ -239,7 +278,7 @@ var baseStyles = css`
   .dropdown-empty {
     padding: 6px 8px;
     font-size: 12px;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-empty-color);
     font-style: italic;
   }
 
@@ -251,7 +290,7 @@ var baseStyles = css`
   /* Readonly column/cell */
   .cell.cell-readonly {
     background: var(--u-bg-color-disabled, #FAFAFA);
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-readonly-color);
     cursor: default;
   }
 

package/dist/components/u-rich-table/URichTable.js

@@ -1,9 +1,11 @@
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
+import { messages } from "../../utilities/messages.js";
 import { richTableStyles } from "./styles.js";
 import { parseTSV, toTSV } from "./utils/clipboard.js";
 import { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { Locale } from "@iyulab/components/dist/utilities/Locale.js";
 //#region src/components/u-rich-table/URichTable.ts
 var URichTable = class URichTable extends LitElement {
 	constructor(..._args) {
@@ -14,12 +16,16 @@ var URichTable = class URichTable extends LitElement {
 		this.pageSize = 25;
 		this.currentPage = 1;
 		this.loading = false;
-		this.emptyMessage = "데이터가 없습니다";
-		this.loadingMessage = "로딩 중...";
-		this.filterPlaceholder = "필터...";
-		this.filterAllLabel = "전체";
-		this.addRowLabel = "+ 새 행";
-		this.pageInfoFormatter = (total, start, end) => `전체 ${total.toLocaleString()}건 중 ${start}-${end} 표시`;
+		this.emptyMessage = "";
+		this.loadingMessage = "";
+		this.filterPlaceholder = "";
+		this.filterAllLabel = "";
+		this.addRowLabel = "";
+		this.pageInfoFormatter = (total, start, end) => messages.text("pageInfo", {
+			total: total.toLocaleString(),
+			start,
+			end
+		});
 		this.selectable = false;
 		this.editable = false;
 		this.addable = false;
@@ -113,7 +119,7 @@ var URichTable = class URichTable extends LitElement {
 	_warnMissingRowId() {
 		if (this._warnedMissingRowId) return;
 		this._warnedMissingRowId = true;
-		console.warn("[@iyulab/data-components] u-rich-table: 행에 `_id` 가 없어 **위치**로 식별합니다. 데이터가 재정렬·재페이징되면 선택 상태가 다른 행으로 옮겨갑니다. 각 행에 고유한 `_id` 를 부여하세요.");
+		console.warn("[@iyulab/data-components] u-rich-table: rows have no `_id`, so selection is tracked by **position**. Re-sorting or re-paging the data moves the selection to a different row. Give every row a unique `_id`.");
 	}
 	getSelectedRows() {
 		return this.data.filter((row, i) => this.selectedIds.has(this._rowId(row, i)));
@@ -149,7 +155,7 @@ var URichTable = class URichTable extends LitElement {
         <div style="flex:1"></div>
         <slot name="toolbar-end"></slot>
         ${this.addable ? html`
-          <button class="btn btn-success" @click=${this._onAddRowClick}>${this.addRowLabel}</button>
+          <button class="btn btn-success" @click=${this._onAddRowClick}>${this.addRowLabel || messages.text("addRow")}</button>
         ` : ""}
       </div>
     `;
@@ -184,10 +190,10 @@ var URichTable = class URichTable extends LitElement {
         ${this.columns.map((col) => html`
           <td>
             ${col.filterable !== false ? col.filterType === "select" && col.options ? html`<select @change=${(e) => this._onFilterChange(col.key, e.target.value)}>
-                    <option value="">${this.filterAllLabel}</option>
+                    <option value="">${this.filterAllLabel || messages.text("filterAll")}</option>
                     ${col.options.map((o) => html`<option value=${o.value}>${o.label}</option>`)}
                   </select>` : html`<input
-                    placeholder=${this.filterPlaceholder}
+                    placeholder=${this.filterPlaceholder || messages.text("filterPlaceholder")}
                     @input=${(e) => this._onFilterChange(col.key, e.target.value)} />` : ""}
           </td>
         `)}
@@ -196,8 +202,8 @@ var URichTable = class URichTable extends LitElement {
     `;
 	}
 	_renderBody() {
-		if (this.loading) return html`<tr><td colspan=${this._colSpan()}><div class="loading-overlay">${this.loadingMessage}</div></td></tr>`;
-		if (this.data.length === 0) return html`<tr><td colspan=${this._colSpan()}><div class="empty-message">${this.emptyMessage}</div></td></tr>`;
+		if (this.loading) return html`<tr><td colspan=${this._colSpan()}><div class="loading-overlay">${this.loadingMessage || messages.text("loading")}</div></td></tr>`;
+		if (this.data.length === 0) return html`<tr><td colspan=${this._colSpan()}><div class="empty-message">${this.emptyMessage || messages.text("empty")}</div></td></tr>`;
 		return this.data.map((row, rowIdx) => {
 			const rowId = this._rowId(row, rowIdx);
 			const isSelected = this.selectedIds.has(rowId);
@@ -438,7 +444,7 @@ var URichTable = class URichTable extends LitElement {
 		let newValue = this.editValue;
 		if (col.type === "number") newValue = Number(newValue);
 		if (col.required && !newValue && newValue !== 0) {
-			this.validationErrors = new Map(this.validationErrors).set(`${rowIndex}-${colIndex}`, "필수 항목입니다");
+			this.validationErrors = new Map(this.validationErrors).set(`${rowIndex}-${colIndex}`, Locale.getValue("valueMissing"));
 			return;
 		}
 		if (col.validator) {

package/dist/components/u-rich-table/styles.js

@@ -2,6 +2,20 @@ import { css } from "lit";
 //#region src/components/u-rich-table/styles.ts
 var richTableStyles = css`
   :host {
+    /* ── 소비자 조절점 — 보조 전경 ──
+       ★이 패키지 표 셋의 보조 전경이 전부 --u-txt-color-weak 직독이라 «표 안에서만»
+       조절할 방법이 없었다(소비자 토큰 0 · part 0). 소비앱은 한 제품 안에 표를 넷 두는데,
+       그중 업스트림 표만 조절되지 않으면 나머지에 맞출 수가 없다.
+       ⚠**한 토큰으로 접지 않는다** — 실측상 역할이 갈리고, 접으면 "읽기 전용 셀만 진하게"
+       같은 요청이 원리적으로 불가능해진다. 그것이 이 요청의 발단이었다.
+       ⚠**이 컴포넌트가 «읽는» 단만 선언한다.** 다섯을 어디서나 선언하면 소비자가 바꿔도
+       아무 일이 없는 자리가 생긴다 — 이 리포가 반복해서 본 «토큰 존재 ≠ 배선»이다.
+       ⚠**다크 블록에 다시 선언하지 않는다.** --u-txt-color-weak 자체가 테마 변형이므로
+       시트가 있으면 따라온다. 이 패키지의 다크 블록이 «비어 있는 것»이 목표 상태다.
+       ⚠**폴백 리터럴은 라이트 시트 값의 복제다**(루트 tokens:sync 가 대조한다). */
+    --dc-muted-color: var(--u-txt-color-weak, #757575);   /* 보조 텍스트 · 라벨 */
+    --dc-icon-color:  var(--u-txt-color-weak, #757575);   /* 정렬 표시 · 확장 · 행 메뉴 */
+    --dc-empty-color: var(--u-txt-color-weak, #757575);   /* 빈 상태 안내문 */
     display: block;
     font-family: system-ui, -apple-system, sans-serif;
     font-size: 13px;
@@ -22,7 +36,7 @@ var richTableStyles = css`
 
   .toolbar .selection-info {
     font-size: 12px;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-muted-color);
   }
 
   .toolbar .search-input {
@@ -80,7 +94,7 @@ var richTableStyles = css`
 
   .sort-indicator {
     font-size: 10px;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-icon-color);
     margin-left: 4px;
   }
 
@@ -158,7 +172,7 @@ var richTableStyles = css`
     width: 30px;
     text-align: center;
     cursor: pointer;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-icon-color);
   }
 
   .expand-cell:hover {
@@ -183,7 +197,7 @@ var richTableStyles = css`
     border-radius: 3px;
     background: transparent;
     font-size: 12px;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-muted-color);
     outline: none;
   }
 
@@ -215,7 +229,7 @@ var richTableStyles = css`
     background: var(--u-bg-color-raised, #FAFAFA);
     border-top: 1px solid var(--u-border-color, #E0E0E0);
     font-size: 12px;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-muted-color);
   }
 
   .pagination .page-buttons {
@@ -254,7 +268,7 @@ var richTableStyles = css`
     align-items: center;
     justify-content: center;
     padding: 40px;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-muted-color);
   }
 
   .empty-message {
@@ -262,7 +276,7 @@ var richTableStyles = css`
     align-items: center;
     justify-content: center;
     padding: 40px;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-empty-color);
   }
 
 
@@ -270,7 +284,7 @@ var richTableStyles = css`
      .styles.ts 만 훑는 정리로는 보이지 않는 자리다. */
   .row-menu {
     cursor: pointer;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-icon-color);
   }
 
   .row-error-cell {

package/dist/utilities/messages.d.ts

@@ -0,0 +1,25 @@
+/**
+ * `@iyulab/data-components` 의 화면 문자열 — **영어 기본 + 로케일 레지스트리**.
+ *
+ * ## 왜 생겼나
+ *
+ * 표 컴포넌트의 기본 문구가 **한국어 리터럴**이었다(실측 7건). 소비자가 `emptyMessage` 등을
+ * 넘겨 덮을 수는 있었지만, **덮지 않으면 한국어가 나온다** — 로케일 표준(영어 기본 +
+ * 레지스트리)을 채택한 리포에서 그것은 미이주다.
+ *
+ * ## 기본값을 «비워» 두고 렌더에서 해석한다
+ *
+ * 프로퍼티 초기값으로 문자열을 박으면 **생성 시점의 로케일에 고정**된다 — `Locale.set()` 을
+ * 나중에 부르면 이미 만들어진 표는 따라오지 않는다. 그래서 기본값은 빈 문자열이고,
+ * 렌더가 `this.x || messages.text(...)` 로 해석한다.
+ *
+ * ⚠**소비자가 덮는 경로는 그대로다** — 값을 주면 그 값이 이긴다.
+ *
+ * ## 검증 메시지는 여기 두지 않는다
+ *
+ * `필수 항목입니다` 는 `@iyulab/components` 의 **검증 메시지 키셋에 이미 있고 14로케일이
+ * 딸려 온다**(`Locale.getValue('valueMissing')`). 같은 문장을 이 표에 복제하면 두 곳이
+ * 갈라진다.
+ */
+export type DataMessageKey = 'empty' | 'loading' | 'filterPlaceholder' | 'filterAll' | 'addRow' | 'pageInfo' | 'noMatch';
+export declare const messages: import('@iyulab/components/dist/utilities/Locale.js').LocaleNamespace<DataMessageKey>;

package/dist/utilities/messages.js

@@ -0,0 +1,23 @@
+import { Locale } from "@iyulab/components/dist/utilities/Locale.js";
+//#region src/utilities/messages.ts
+var messages = Locale.namespace("@iyulab/data-components");
+messages.register("en", {
+	empty: "No data",
+	loading: "Loading…",
+	filterPlaceholder: "Filter…",
+	filterAll: "All",
+	addRow: "+ New row",
+	pageInfo: "Showing {start}-{end} of {total}",
+	noMatch: "No matching item"
+});
+messages.register("ko", {
+	empty: "데이터가 없습니다",
+	loading: "로딩 중...",
+	filterPlaceholder: "필터...",
+	filterAll: "전체",
+	addRow: "+ 새 행",
+	pageInfo: "전체 {total}건 중 {start}-{end} 표시",
+	noMatch: "일치하는 항목 없음"
+});
+//#endregion
+export { messages };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/data-components",
   "description": "iyulab data visualization components",
-  "version": "0.9.1",
+  "version": "0.11.0",
   "keywords": [
     "iyulab",
     "web-components",
@@ -58,7 +58,7 @@
     "lint:fix": "eslint src/ --fix"
   },
   "dependencies": {
-    "@iyulab/components": "^1.18.0",
+    "@iyulab/components": "^1.23.0",
     "lit": "^3.3.3"
   },
   "peerDependencies": {
@@ -78,6 +78,7 @@
     "@lit/react": "^1.0.8",
     "@types/node": "^26.1.1",
     "@types/react": "^19.2.17",
+    "@vitest/browser-playwright": "^4.1.10",
     "eslint": "^9.39.4",
     "glob": "^13.0.6",
     "globals": "^17.7.0",