@iyulab/data-components 0.7.1 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,163 @@
 # Changelog
 
+## [0.8.0] - 2026-08-02
+
+### Changed
+
+- **UDataView 가 역할 토큰만 읽는다.** 다크 전용 규칙 92줄을 제거하고, 팔레트 참조
+  4곳을 역할 토큰으로 옮겼다(`--u-blue-600` → `--u-primary-color`, `--u-blue-200` →
+  `--u-primary-color-weakest`). **두 테마의 계산색은 그대로다** — 브라우저에서
+  변경 전후 계산값 스냅샷을 대조해 확인했다.
+
+  제거한 다크 블록의 24개 선언은 전부 base 규칙과 **같은 토큰**을 가리키고 있었다.
+  역할 토큰(`--u-bg-color`, `--u-border-color`, `--u-txt-color-weak` …)은 두 테마에서
+  서로 다른 팔레트 단에 매핑돼 있어(예: `--u-bg-color` = neutral-0 라이트 /
+  neutral-100 다크) 테마 보정이 이미 토큰 층에 들어 있다. 따라서 그 블록은 토큰 시트가
+  로드된 환경에서 계산값을 하나도 바꾸지 못했다.
+
+- **USimpleSheet 의 다크 블록을 24개 선언 → 6개로 줄였다.** 지운 것은 base 와 같은 토큰을
+  가리켜 계산값을 바꾸지 못하던 규칙들이다. **남긴 6개는 죽은 규칙이 아니다** — 유채색
+  표면(계산 셀·선택된 열 헤더·강조된 드롭다운 항목)이며, 역할 층에 유채색 표면 토큰이
+  없어서 손으로 메운 보정이다. 비활성화하면 실제로 색이 달라짐을 확인했다.
+- **USimpleSheet 그림자 2곳이 `--u-shadow-color-*` 를 읽는다.** 종전에는 라이트/다크가
+  각각 하드코딩된 `rgba(0,0,0,0.15)` / `0.5` 였다. 역할 토큰은 테마별로 불투명도가
+  튜닝돼 있다(0.16/0.45, 0.12/0.35) — 다크에서 그림자가 아주 조금 옅어진다.
+- **USimpleSheet 읽기전용 셀이 `--u-bg-color-disabled` 를 읽는다.** 이 토큰의 테마별
+  매핑(neutral-50 라이트 / neutral-100 다크)이 종전 다크 블록이 손으로 쓴 단과 **정확히
+  같다** — 그래서 해당 다크 규칙이 불필요해졌다. 계산색은 두 테마 모두 그대로다.
+
+### Added
+
+- **UI 문구를 프로퍼티로 열었다** — URichTable 의 `loadingMessage`·`filterPlaceholder`·
+  `filterAllLabel`·`addRowLabel`·`pageInfoFormatter`, USimpleSheet 의 `noMatchMessage`.
+  종전에는 `emptyMessage` 하나만 열려 있고 나머지는 한국어로 하드코딩돼 있었다.
+  `pageInfoFormatter` 만 함수인 것은 **언어마다 어순이 달라** 템플릿 문자열로는 열 수
+  없기 때문이다.
+
+  ⚠로케일 레지스트리를 도입하지는 않았다 — 이 패키지에 없는 레이어를 새로 들이는
+  일이고, 현재 수요가 그것을 요구할 만큼 모이지 않았다. 기존 `emptyMessage` 어법을
+  따르는 순수 가산이다.
+
+### Changed
+
+- **업스트림 토큰 채택 (`@iyulab/components` 1.15.0).** 이 릴리스에서 소비 측 우회 둘이
+  사라졌다:
+  - **보조 텍스트 AA 우회 해제** — URichTable 4곳이 역할 토큰을 피해 고정값을 쓰고
+    있었다(`--u-txt-color-weak` 가 라이트에서 2.68 로 AA 미달이었기 때문). 업스트림이
+    neutral-600(4.61)으로 고쳐져 **역할 토큰으로 되돌렸다.** 그 넷을 위해 남겨 둔
+    다크 규칙도 함께 사라졌다 — 이제 이 색은 테마 오버라이드를 따른다.
+  - **유채색 표면 토큰 채택** — `--u-primary-bg-color`·`--u-success-bg-color`·
+    `--u-danger-bg-color` 로 옮겼다. 이 토큰들은 두 테마가 **같은 세기**가 되도록
+    짝지어져 있어(라이트 shade-0 ↔ 다크 shade-100), 손으로 쓰던 다크 보정 2개가
+    불필요해졌다. **다크에서 선택된 행·계산 셀 틴트가 제 세기로 보인다** —
+    종전에는 팔레트 유채색이 다크에서 짓눌려 절반 이하로 옅었다.
+
+  ⇒ 다크 전용 규칙이 **8 → 3**, 팔레트 직접 참조가 **40 → 31** 로 줄었다.
+
+### Fixed
+
+- **URichTable 템플릿에 인라인으로 박혀 있던 색 3곳**(행 메뉴 `⋯`, 행 오류 줄, 새 행
+  표시)을 클래스 + 역할 토큰으로 옮겼다. `style="…#94a3b8"` 형태라 **스타일 시트만
+  훑는 정리에는 보이지 않는 자리**였다. 색이 조금 바뀐다 — 행 오류 줄 배경
+  `#FEF2F2` → `#FFEBEE`, 행 메뉴 `#94A3B8` → `#9E9E9E`, 새 행 표시 `#86EFAC` →
+  `#A5D6A7`. (이 셋은 계산색 스냅샷이 덮지 못한다 — 렌더 조건이 내부 상태다.)
+
+- ★**URichTable 에서 `_id` 없는 행을 넘기면 한 행 선택이 전체 선택으로 번지던 문제.**
+  선택·확장·행 오류 상태가 전부 `_id` 로 추적되는데 그 값을 **어디서도 부여하지 않아**,
+  소비자가 넣지 않으면 모든 행이 `undefined` 로 같은 키를 갖게 됐다. 이제 `_id` 가 없으면
+  **위치로 식별하고 개발 경고**를 낸다. 위치 기반 식별은 데이터가 재정렬·재페이징되면
+  선택이 다른 행으로 옮겨가므로 안전망일 뿐이다 — 정렬·필터·페이지가 소비자 책임인
+  컴포넌트이니 `_id` 를 주는 것이 옳다.
+
+### Documentation
+
+- **`docs/URichTable.md` 신설.** 종전에는 README 가 *"문서 작성 예정"* 이라며 `types.ts`
+  를 가리키고 있었다. 타입만으로는 드러나지 않는 두 계약을 먼저 적었다 — ⑴ `data` 는
+  그대로 렌더되며 **정렬·필터·페이지는 소비자 책임**이다(헤더 클릭은 이벤트만 낸다),
+  ⑵ 각 행에 `_id` 가 필요하다. 속성·이벤트 9종·키보드/클립보드 표 포함.
+- **README 의 Theming 절을 실제 동작에 맞게 고쳤다** — 토큰 시트가 필요하다는 것,
+  없을 때의 폴백 규약, 브랜드 색 한 줄 변경, 그리고 알려진 제약 둘(AA 미달, Chromium
+  한정 규칙)을 명시했다.
+
+- **`--u-blue-50` 은 토큰 시트에 정의가 없다.** USimpleSheet 4곳(계산 셀·선택 셀·강조된
+  드롭다운 항목)이 이 이름을 참조해 **두 테마 모두에서** 항상 리터럴 폴백으로 떨어지고
+  있었다 — 즉 토큰 층과 무관하게 고정색이었다. 팔레트의 틴트 끝인 `--u-blue-0` 로
+  고쳤다. **라이트에서 색이 바뀐다**: `#EFF6FF` → `#E3F2FD`. 다크는 종전과 동일하다.
+
+- ★**URichTable 이 디자인 토큰을 읽기 시작한다 — 라이트 재도색.** 이 컴포넌트는 base
+  레이어가 토큰을 **하나도** 쓰지 않고 고정 hex 를 박아 두었다. 즉 라이트에서 테마·브랜드
+  설정에 전혀 반응하지 않았고, 다크는 그 위에 얹은 별도 재구현(57개 선언)이었다.
+  base 를 역할 토큰으로 옮기면서 다크 블록은 **2개 규칙**만 남았다.
+
+  **라이트에서 색이 바뀐다** — 주요 항목:
+
+  | 자리 | 전 | 후 |
+  |---|---|---|
+  | 테두리 | `#E2E8F0` | `#E0E0E0` (`--u-border-color`) |
+  | 입력 테두리 | `#D1D5DB` | `#E0E0E0` (`--u-input-border-color`) |
+  | 툴바·페이지네이션 배경 | `#F8FAFC` | `#FAFAFA` |
+  | 헤더 배경 | `#F1F5F9` | `#F5F5F5` |
+  | 주 버튼 | `#3B82F6` | `#1E88E5` (`--u-primary-color`) |
+  | 성공 버튼 | `#10B981` | `#43A047` (`--u-success-color`) |
+  | 선택된 행 | `#EFF6FF` | `#E3F2FD` |
+  | 편집·필터 행 | `#FEFCE8` | `#FFFDE7` |
+  | 오류 행 | `#FEF2F2` | `#FFEBEE` |
+  | 새 행 | `#F0FDF4` | `#E8F5E9` |
+
+  ⇒ 이제 `:root { --u-primary-color: … }` 한 줄로 이 표의 버튼·강조색이 따라온다.
+
+  **다크에서는 성공 버튼만 바뀐다**(green-500 → `--u-success-color`). 나머지가 종전
+  값 그대로임을 계산색 스냅샷으로 확인했다 — 두 테마 × 14개 선택자(상태 틴트 포함:
+  선택된 행·필터 줄·새 행). 스냅샷이 덮지 못한 자리는 `tbody tr.error`(내부 상태 필요)
+  와 `.dropdown-item.highlighted` 두 곳이다.
+
+  ⚠**`:host` 가 이제 글자색을 정한다.** 종전에는 base 에 `color` 선언이 없어 페이지에서
+  **상속**받았고, 다크 블록만 그것을 덮었다. 이제 base 가 `--u-txt-color` 를 읽는다.
+  토큰 시트를 쓰는 환경에서는 개선이지만, 시트 없이 페이지 글자색을 직접 지정하던
+  소비자는 그 상속을 잃는다 — 필요하면 `--u-txt-color` 를 지정하세요.
+
+  ⚠**Firefox/Safari 에서 다크가 동작하기 시작한다.** 종전에는 다크가 전부
+  `:host-context()` 안에 있었고 그 선택자는 Chromium 전용이라, 다른 브라우저에서는
+  **다크 모드가 아예 적용되지 않았다.** 이제 색의 대부분이 토큰 층에서 테마를 따르므로
+  전 브라우저에서 동작한다. 남은 2개 규칙(표면 높이·보조 텍스트)만 Chromium 한정으로
+  남는다.
+
+### Removed
+
+- **UDataView 의 `theme` 속성이 더 이상 색을 바꾸지 않는다.**
+  토큰 시트를 로드한 환경에서는 원래부터 효과가 없었다(위 참조). 시트를 로드하지 않는
+  환경에서는 요소에 `theme="dark"` 를 걸면 다크 고정값이 적용됐으나, 이제는 적용되지
+  않는다 — 토큰 미공급 시 폴백은 라이트 기준 고정값이라는 규약을 따른다.
+  **다크가 필요하면 토큰 시트를 로드할 것**(`@iyulab/components/styles/tokens.css`).
+  문서 단위 다크(`<html theme="dark">`)는 종전과 동일하게 동작한다.
+
+### Added
+
+- 브라우저 테스트 프로젝트(playwright chromium). 계산색을 실제로 측정한다 —
+  기존 유닛 테스트는 스타일 **문자열**에서 셀렉터를 세므로, 규칙이 적혀 있음은 보여도
+  그 규칙이 무언가를 바꾸는지는 말하지 못한다. 위 24개 선언이 정확히 그 사각에 있었다.
+  - `data-view-colors.browser.test.ts` — 두 테마 계산색 스냅샷 회귀망
+  - `theme-resolution.browser.test.ts` — 역할 토큰의 테마별 매핑, 팔레트 틴트 비대칭
+
+### Known issues
+
+- **유채색에는 테마 보정 층이 없다.** 역할 토큰의 중립 계열 17종은 두 테마에서 다른
+  팔레트 단에 매핑되지만, `--u-primary/success/danger/warning-*` 는 양 테마가 같은 단을
+  가리킨다. 그런데 팔레트의 틴트 세기는 계열마다 비대칭이다 — 바탕 대비 델타 실측:
+  중립은 다크가 라이트의 1.34~1.62배, 청색은 0.38~0.54배, 적색은 0.25~0.58배,
+  황색은 4.2~6.1배. 그래서 유채색 표면을 쓰는 컴포넌트는 다크 보정을 손으로 써야 한다.
+- **"주색 위의 글자" 역할 토큰이 없다.** 활성 뷰 버튼은 다크에서 대비 3.45 이며
+  흰 글자였다면 6.09 다. 팔레트를 직접 바꾸면 게시된 시각이 움직이므로 보류했다.
+- **UI 문자열이 한국어로 하드코딩돼 있다** — `URichTable` 의 `로딩 중...`·`필터...`·
+  `전체`·`전체 N건 중 X-Y 표시`, `USimpleSheet` 의 `일치하는 항목 없음`. `emptyMessage`
+  만 프로퍼티로 열려 있고 나머지는 소비자가 바꿀 수 없다. 이 패키지에는 로케일 레이어가
+  없어 단순 프로퍼티 추가로 갈지 로케일 레지스트리를 도입할지가 설계 결정이다.
+- ★**`--u-txt-color-weak` 의 라이트 매핑이 WCAG AA 에 미달한다** — neutral-500(#9E9E9E)
+  = 흰 배경 대비 **2.68**(AA 기준 4.5). 다크는 neutral-700 = **5.43** 으로 정상이므로
+  **라이트 한쪽만의 결함**이다. 그래서 URichTable 의 보조 텍스트 4곳은 역할 토큰으로
+  옮기지 못했다(옮기면 4.76 → 2.68 로 후퇴). 업스트림에서 라이트 매핑을
+  **neutral-600(4.61)** 으로 한 단 내리면 해소된다.
+
 ## [0.7.1] - 2026-08-01
 
 ### Documentation

package/README.md

@@ -124,12 +124,12 @@ const sheet = document.querySelector('u-simple-sheet'); // USimpleSheet | null
 
 - [USimpleSheet](./docs/USimpleSheet.md)
 - [UDataView](./docs/UDataView.md)
-- URichTable — 문서 작성 예정([types.ts](./src/components/u-rich-table/types.ts) 참고)
+- [URichTable](./docs/URichTable.md)
 - [UDataGrid 마이그레이션 가이드](./docs/migrating-from-datagrid.md)
 
 ## Theming
 
-`@iyulab/components`의 테마 시스템을 사용합니다. 라이트/다크 모드 자동 지원.
+`@iyulab/components`의 디자인 토큰을 읽습니다. **토큰 시트가 문서에 있어야 테마가 동작합니다.**
 
 ```typescript
 import { Theme } from '@iyulab/components';
@@ -138,6 +138,40 @@ Theme.init({ default: 'system' });
 Theme.set('dark'); // 'light' | 'dark' | 'system'
 ```
 
+`Theme.init()`을 쓰지 않는다면 정적 진입점을 대신 임포트하세요:
+
+```typescript
+import '@iyulab/components/styles/tokens.css';
+```
+
+### 토큰 시트가 없으면
+
+컴포넌트는 렌더되지만 **라이트 기준 고정값**으로 그려지며, 다크 테마와 테마 변수
+오버라이드가 적용되지 않습니다. 이는 의도된 폴백 규약입니다.
+
+### 브랜드 색 바꾸기
+
+색은 역할 토큰을 통해 읽으므로, 주색 한 줄로 버튼·선택 강조·포커스가 함께 따라옵니다:
+
+```css
+:root { --u-primary-color: #7B1FA2; }
+```
+
+### 알려진 제약
+
+- **표면 높이를 뜻하는 토큰이 없습니다** — 배경 역할 토큰은 상호작용 상태 이름
+  (`-hover`/`-active`/`-disabled`)뿐이라 "바탕보다 한 단 올라온 면"을 표현할 수 없습니다.
+  라이트에서는 팔레트 음영이 흰 바탕 위에서 충분히 읽히지만 다크에서는 거의 검정이라,
+  툴바·표 헤더 등 몇 자리는 `:host-context()`로 보정합니다. **이 선택자는
+  Firefox/Safari에서 동작하지 않습니다** — 해당 브라우저에서 그 면들이 배경에 묻힙니다.
+  그 밖의 색은 전 브라우저에서 테마를 따릅니다.
+- **경고(노랑) 표면에는 역할 토큰이 없습니다** — 라이트 황색 틴트가 거의 보이지 않아
+  두 테마의 세기를 맞출 단 짝이 없습니다(업스트림 미해결). 필터 줄·편집 중 행은
+  팔레트를 직접 읽습니다.
+
+> `--u-txt-color-weak`의 WCAG AA 미달(2.68)은 `@iyulab/components` 1.15.0에서
+> 해소됐습니다(4.61). 이 패키지가 쓰던 우회도 함께 제거됐습니다.
+
 ## License
 
 MIT

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

@@ -1,6 +1,5 @@
-import { css, unsafeCSS } from "lit";
-//#region src/components/data-view/UDataView.styles.ts
-var baseStyles = css`
+import { css } from "lit";
+var styles = [css`
   :host {
     display: block;
     width: 100%;
@@ -30,7 +29,12 @@ var baseStyles = css`
   }
 
   .view-toggles u-button[active] {
-    background: var(--u-blue-600, #1E88E5);
+    background: var(--u-primary-color, #1E88E5);
+    /* 예외 1 — "주색 위의 글자" 역할 토큰이 없다.
+       역할 층의 유채색은 전경 5단(--u-primary-color-*)뿐이고, 그 위에 얹는 글자색을
+       가리키는 토큰은 없다. 실측: 라이트 #FFFFFF/#1E88E5 = 3.68, 다크 #000000/#2A659D
+       = 3.45 — 다크는 흰 글자였다면 6.09 였다. 즉 현재 값이 최선이 아니지만, 팔레트를
+       직접 바꾸면 게시된 시각이 움직이므로 토큰 추가 결정까지 현행을 유지한다. */
     color: var(--u-neutral-0, #fff);
   }
 
@@ -65,15 +69,15 @@ var baseStyles = css`
   }
 
   .card:hover {
-    border-color: var(--u-blue-600, #1E88E5);
+    border-color: var(--u-primary-color, #1E88E5);
     box-shadow: 0 4px 12px var(--u-shadow-color-weak, rgba(0, 0, 0, 0.08));
     transform: translateY(-2px);
   }
 
   .card.selected {
-    border-color: var(--u-blue-600, #1E88E5);
+    border-color: var(--u-primary-color, #1E88E5);
     background: var(--u-bg-color-active, #EEEEEE);
-    box-shadow: 0 0 0 3px var(--u-blue-200, #90CAF9);
+    box-shadow: 0 0 0 3px var(--u-primary-color-weakest, #90CAF9);
   }
 
   .card-content {
@@ -127,6 +131,11 @@ var baseStyles = css`
   }
 
   thead {
+    /* 예외 2 — 표면 높이 축이 없다.
+       배경 역할 토큰은 상호작용 상태 이름(-hover/-active/-disabled)뿐이라,
+       "바탕보다 한 단 올라온 면"을 뜻하는 토큰이 없다. 헤더에 -hover 를 쓰면
+       마우스 상태를 뜻하게 되므로 팔레트를 직접 읽는다. neutral-50 은 두 테마에서
+       각각 #FAFAFA/#0A0A0A 로 반전되므로 다크 보정은 필요 없다. */
     background: var(--u-neutral-50, #f8fafc);
     position: sticky;
     top: 0;
@@ -175,88 +184,6 @@ var baseStyles = css`
     color: var(--u-txt-color-weak, #64748b);
     font-size: 1rem;
   }
-`;
-var DARK_PREFIXES = [
-	":host([theme=\"dark\"])",
-	":host-context([theme=\"dark\"])",
-	":host-context([data-theme=\"dark\"])"
-];
-var darkRules = (host) => `
-  ${host} .toolbar {
-    background: var(--u-bg-color, #121212);
-    border-color: var(--u-border-color, #3D3D3D);
-  }
-
-  ${host} .view-toggles u-button[active] {
-    background: var(--u-blue-600, #87B8F5);
-    color: var(--u-neutral-0, #000);
-  }
-
-  ${host} .info {
-    color: var(--u-txt-color-weak, #8A8A8A);
-  }
-
-  ${host} .card {
-    background: var(--u-bg-color, #121212);
-    border-color: var(--u-border-color, #3D3D3D);
-  }
-
-  ${host} .card:hover {
-    border-color: var(--u-blue-600, #87B8F5);
-    box-shadow: 0 4px 12px var(--u-shadow-color-weak, rgba(0, 0, 0, 0.25));
-  }
-
-  ${host} .card.selected {
-    border-color: var(--u-blue-600, #87B8F5);
-    background: var(--u-bg-color-active, #3D3D3D);
-    box-shadow: 0 0 0 3px var(--u-blue-200, #2B4F7E);
-  }
-
-  ${host} .card-field .label {
-    color: var(--u-txt-color-weak, #8A8A8A);
-  }
-
-  ${host} .card-field .value {
-    color: var(--u-txt-color, #D4D4D4);
-  }
-
-  ${host} .table-wrapper {
-    border-color: var(--u-border-color, #3D3D3D);
-  }
-
-  ${host} table {
-    background: var(--u-bg-color, #121212);
-  }
-
-  ${host} thead {
-    background: var(--u-neutral-50, #0A0A0A);
-  }
-
-  ${host} th {
-    color: var(--u-txt-color-weak, #8A8A8A);
-    border-bottom-color: var(--u-border-color, #3D3D3D);
-  }
-
-  ${host} tbody tr:hover {
-    background: var(--u-bg-color-hover, #2A2A2A);
-  }
-
-  ${host} tbody tr.selected {
-    background: var(--u-bg-color-active, #3D3D3D);
-  }
-
-  ${host} tbody tr:not(:last-child) {
-    border-bottom-color: var(--u-border-color-weak, #2A2A2A);
-  }
-
-  ${host} td {
-    color: var(--u-txt-color, #D4D4D4);
-  }
-
-  ${host} .empty {
-    color: var(--u-txt-color-weak, #8A8A8A);
-  }
-`;
-var styles = [baseStyles, unsafeCSS(DARK_PREFIXES.map(darkRules).join("\n"))];
+`];
 //#endregion
 export { styles };

package/dist/components/simple-sheet/USimpleSheet.d.ts

@@ -48,6 +48,8 @@ export declare class USimpleSheet extends UElement {
     cols: number;
     /** 읽기 전용 모드 */
     readonly: boolean;
+    /** 드롭다운에 일치 항목이 없을 때 문구 */
+    noMatchMessage: string;
     /**
      * 명시 테마. 'dark'이면 다크 스타일을 적용합니다.
      * 미설정 시 조상 컨텍스트의 theme/data-theme 속성에 따릅니다 (:host-context, Chromium 한정).

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

@@ -25,6 +25,7 @@ var USimpleSheet = class USimpleSheet extends UElement {
 		this.rows = 20;
 		this.cols = 10;
 		this.readonly = false;
+		this.noMatchMessage = "일치하는 항목 없음";
 		this._sel = null;
 		this._editing = null;
 		this._editVal = "";
@@ -611,7 +612,7 @@ var USimpleSheet = class USimpleSheet extends UElement {
             </div>
           ` : noMatch && isStrict ? html`
             <div class="cell-dropdown">
-              <div class="dropdown-empty">일치하는 항목 없음</div>
+              <div class="dropdown-empty">${this.noMatchMessage}</div>
             </div>
           ` : ""}
         ` : this._formatValue(value, c, r)}
@@ -924,6 +925,7 @@ __decorate([property({ type: Array }), __decorateMetadata("design:type", Array)]
 __decorate([property({ type: Number }), __decorateMetadata("design:type", Object)], USimpleSheet.prototype, "rows", void 0);
 __decorate([property({ type: Number }), __decorateMetadata("design:type", Object)], USimpleSheet.prototype, "cols", void 0);
 __decorate([property({ type: Boolean }), __decorateMetadata("design:type", Object)], USimpleSheet.prototype, "readonly", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], USimpleSheet.prototype, "noMatchMessage", void 0);
 __decorate([property({
 	type: String,
 	reflect: true

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

@@ -125,6 +125,9 @@ var baseStyles = css`
     padding: 0 6px;
     font-size: 11px;
     color: var(--u-txt-color-weak, #64748b);
+    /* 예외 — 표면 높이 축이 없다. 행번호 여백은 "비활성"이 아니라 시트 바탕보다
+       한 단 내려간 면이다. --u-bg-color-disabled 를 쓰면 다크에서 바탕(neutral-100)과
+       같은 값이 되어 여백 구분이 사라진다 — 스냅샷이 그것을 잡았다. */
     background: var(--u-neutral-50, #f8fafc);
     border-right: 1px solid var(--u-border-color, #e2e8f0);
     border-bottom: 1px solid var(--u-border-color-weak, #f1f5f9);
@@ -159,7 +162,7 @@ var baseStyles = css`
   }
 
   .cell.selected {
-    background: var(--u-blue-50, #eff6ff);
+    background: var(--u-primary-bg-color, #E3F2FD);
   }
 
   /* The anchor cell (top-left of selection) */
@@ -194,7 +197,7 @@ var baseStyles = css`
     background: var(--u-bg-color, #fff);
     box-sizing: border-box;
     z-index: 10;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 2px 8px var(--u-shadow-color-strong, rgba(0, 0, 0, 0.16));
   }
 
   /* Dropdown overlay */
@@ -210,7 +213,7 @@ var baseStyles = css`
     border: 1px solid var(--u-border-color, #e2e8f0);
     border-top: none;
     border-radius: 0 0 4px 4px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    box-shadow: 0 4px 12px var(--u-shadow-color-normal, rgba(0, 0, 0, 0.12));
     z-index: 20;
   }
 
@@ -229,7 +232,7 @@ var baseStyles = css`
   }
 
   .dropdown-item.highlighted {
-    background: var(--u-blue-50, #eff6ff);
+    background: var(--u-primary-bg-color, #E3F2FD);
     color: var(--u-blue-800, #1e40af);
   }
 
@@ -247,7 +250,7 @@ var baseStyles = css`
 
   /* Readonly column/cell */
   .cell.cell-readonly {
-    background: var(--u-neutral-50, #f8fafc);
+    background: var(--u-bg-color-disabled, #FAFAFA);
     color: var(--u-txt-color-weak, #64748b);
     cursor: default;
   }
@@ -257,12 +260,12 @@ var baseStyles = css`
   }
 
   .cell.cell-readonly.anchor {
-    background: var(--u-neutral-50, #f8fafc);
+    background: var(--u-bg-color-disabled, #FAFAFA);
   }
 
   /* Computed column/cell */
   .cell.cell-computed {
-    background: var(--u-blue-50, #eff6ff);
+    background: var(--u-primary-bg-color, #E3F2FD);
     color: var(--u-txt-color, #0f172a);
     font-style: italic;
     cursor: default;
@@ -273,7 +276,7 @@ var baseStyles = css`
   }
 
   .cell.cell-computed.anchor {
-    background: var(--u-blue-50, #eff6ff);
+    background: var(--u-primary-bg-color, #E3F2FD);
   }
 
   /* Readonly mode (whole sheet) */
@@ -288,71 +291,14 @@ var DARK_PREFIXES = [
 	":host-context([data-theme=\"dark\"])"
 ];
 var darkRules = (host) => `
-  ${host} .sheet-container {
-    background: var(--u-bg-color, #121212);
-    border-color: var(--u-border-color, #3D3D3D);
-  }
-
-  ${host} .sheet-container:focus-within {
-    border-color: var(--u-blue-500, #6ba3e3);
-    box-shadow: 0 0 0 2px var(--u-blue-100, #1e3a5f);
-  }
-
-  ${host} .corner {
-    background: var(--u-neutral-100, #121212);
-    border-color: var(--u-border-color, #3D3D3D);
-  }
-
-  ${host} .corner:hover {
-    background: var(--u-neutral-200, #1E1E1E);
-  }
-
-  ${host} .col-header {
-    background: var(--u-neutral-100, #121212);
-    color: var(--u-txt-color-weak, #8A8A8A);
-    border-color: var(--u-border-color, #3D3D3D);
-  }
-
   ${host} .col-header.col-selected {
     background: var(--u-blue-100, #1e3a5f);
-    color: var(--u-blue-800, #c2deff);
-  }
-
-  ${host} .row-num {
-    background: var(--u-neutral-50, #0A0A0A);
-    color: var(--u-txt-color-weak, #8A8A8A);
-    border-right-color: var(--u-border-color, #3D3D3D);
-    border-bottom-color: var(--u-border-color-weak, #2A2A2A);
-  }
-
-  ${host} .row-num.row-selected {
-    background: var(--u-blue-100, #1e3a5f);
-    color: var(--u-blue-800, #c2deff);
-  }
-
-  ${host} .cell {
-    color: var(--u-txt-color, #D4D4D4);
-    border-right-color: var(--u-border-color-weak, #2A2A2A);
-    border-bottom-color: var(--u-border-color-weak, #2A2A2A);
-  }
-
-  ${host} .cell.cell-readonly {
-    background: var(--u-neutral-100, #1E1E1E);
-    color: var(--u-txt-color-weak, #8A8A8A);
   }
 
   ${host} .cell.cell-readonly.selected {
     background: var(--u-neutral-200, #2A2A2A);
   }
 
-  ${host} .cell.cell-readonly.anchor {
-    background: var(--u-neutral-100, #1E1E1E);
-  }
-
-  ${host} .cell.cell-computed {
-    background: var(--u-blue-100, #1e3a5f);
-    color: var(--u-txt-color, #D4D4D4);
-  }
 
   ${host} .cell.cell-computed.selected {
     background: var(--u-blue-200, #2a4a6f);
@@ -362,48 +308,6 @@ var darkRules = (host) => `
     background: var(--u-blue-100, #1e3a5f);
   }
 
-  ${host} .cell.selected {
-    background: var(--u-blue-0, #0a1e3d);
-  }
-
-  ${host} .cell.anchor {
-    background: var(--u-bg-color, #121212);
-    outline-color: var(--u-blue-500, #6ba3e3);
-  }
-
-  ${host} .resize-handle:hover::after {
-    background: var(--u-blue-500, #6ba3e3);
-  }
-
-  ${host} .cell-input {
-    background: var(--u-bg-color, #121212);
-    color: var(--u-txt-color, #D4D4D4);
-    outline-color: var(--u-blue-500, #6ba3e3);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
-  }
-
-  ${host} .cell-dropdown {
-    background: var(--u-bg-color, #121212);
-    border-color: var(--u-border-color, #3D3D3D);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
-  }
-
-  ${host} .dropdown-item {
-    color: var(--u-txt-color, #D4D4D4);
-  }
-
-  ${host} .dropdown-item:hover {
-    background: var(--u-neutral-100, #1E1E1E);
-  }
-
-  ${host} .dropdown-item.highlighted {
-    background: var(--u-blue-100, #1e3a5f);
-    color: var(--u-blue-800, #c2deff);
-  }
-
-  ${host} .dropdown-empty {
-    color: var(--u-txt-color-weak, #8A8A8A);
-  }
 `;
 var styles = [baseStyles, unsafeCSS(DARK_PREFIXES.map(darkRules).join("\n"))];
 //#endregion

package/dist/components/u-rich-table/URichTable.d.ts

@@ -9,6 +9,19 @@ export declare class URichTable extends LitElement {
     currentPage: number;
     loading: boolean;
     emptyMessage: string;
+    /** 로딩 표시 문구 */
+    loadingMessage: string;
+    /** 필터 입력 placeholder */
+    filterPlaceholder: string;
+    /** 필터 select 의 "전체" 항목 문구 */
+    filterAllLabel: string;
+    /** 새 행 추가 버튼 문구 */
+    addRowLabel: string;
+    /**
+     * 페이지 정보 문구. (전체, 시작, 끝) 을 받아 문자열을 만든다.
+     * 언어마다 어순이 달라 템플릿 문자열이 아니라 함수로 연다.
+     */
+    pageInfoFormatter: (total: number, start: number, end: number) => string;
     selectable: boolean;
     editable: boolean;
     addable: boolean;
@@ -27,6 +40,18 @@ export declare class URichTable extends LitElement {
     revertRow(_rowId: string): void;
     setRowError(rowId: string, message: string): void;
     clearRowError(rowId: string): void;
+    /**
+     * 행의 식별자. 선택·확장·행 오류 상태가 전부 이 값으로 추적된다.
+     *
+     * ⚠`_id` 는 이 컴포넌트가 **부여하지 않는다.** 소비자가 넣어 주지 않으면 모든 행의
+     * `_id` 가 `undefined` 가 되고, Set 은 그 하나만 담으므로 **한 행을 고르면 전부
+     * 골라진다.** 그래서 없을 때는 위치를 대신 쓴다 — 다만 위치 기반 식별은 데이터가
+     * 재정렬·재페이징되면 **선택이 다른 행으로 옮겨간다.** 정렬/필터/페이지가 소비자
+     * 책임인 컴포넌트이므로, 실제 사용에서는 `_id` 를 주는 것이 옳다.
+     */
+    private _rowId;
+    private _warnedMissingRowId;
+    private _warnMissingRowId;
     getSelectedRows(): Record<string, unknown>[];
     render(): TemplateResult;
     private _renderToolbar;

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

@@ -15,6 +15,11 @@ var URichTable = class URichTable extends LitElement {
 		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.selectable = false;
 		this.editable = false;
 		this.addable = false;
@@ -29,6 +34,7 @@ var URichTable = class URichTable extends LitElement {
 		this.filters = {};
 		this.validationErrors = /* @__PURE__ */ new Map();
 		this.rowErrors = /* @__PURE__ */ new Map();
+		this._warnedMissingRowId = false;
 		this._lastSelectedIndex = -1;
 		this._onGlobalKeyDown = (e) => {
 			if (e.ctrlKey || e.metaKey) {
@@ -65,7 +71,8 @@ var URichTable = class URichTable extends LitElement {
 				}
 				if (e.key === " " && this.selectable) {
 					e.preventDefault();
-					const rowId = this.data[this.focusedCell.rowIndex]?._id;
+					const r = this.data[this.focusedCell.rowIndex];
+					const rowId = r ? this._rowId(r, this.focusedCell.rowIndex) : void 0;
 					if (rowId) this._onRowSelect(rowId);
 				}
 				if (e.key === "Delete" && this.selectedIds.size > 0) for (const row of this.getSelectedRows()) this.dispatchEvent(new CustomEvent("row-delete", {
@@ -88,8 +95,28 @@ var URichTable = class URichTable extends LitElement {
 		next.delete(rowId);
 		this.rowErrors = next;
 	}
+	/**
+	* 행의 식별자. 선택·확장·행 오류 상태가 전부 이 값으로 추적된다.
+	*
+	* ⚠`_id` 는 이 컴포넌트가 **부여하지 않는다.** 소비자가 넣어 주지 않으면 모든 행의
+	* `_id` 가 `undefined` 가 되고, Set 은 그 하나만 담으므로 **한 행을 고르면 전부
+	* 골라진다.** 그래서 없을 때는 위치를 대신 쓴다 — 다만 위치 기반 식별은 데이터가
+	* 재정렬·재페이징되면 **선택이 다른 행으로 옮겨간다.** 정렬/필터/페이지가 소비자
+	* 책임인 컴포넌트이므로, 실제 사용에서는 `_id` 를 주는 것이 옳다.
+	*/
+	_rowId(row, index) {
+		const id = row._id;
+		if (id !== void 0 && id !== null) return String(id);
+		this._warnMissingRowId();
+		return `#${index}`;
+	}
+	_warnMissingRowId() {
+		if (this._warnedMissingRowId) return;
+		this._warnedMissingRowId = true;
+		console.warn("[@iyulab/data-components] u-rich-table: 행에 `_id` 가 없어 **위치**로 식별합니다. 데이터가 재정렬·재페이징되면 선택 상태가 다른 행으로 옮겨갑니다. 각 행에 고유한 `_id` 를 부여하세요.");
+	}
 	getSelectedRows() {
-		return this.data.filter((row) => this.selectedIds.has(row._id));
+		return this.data.filter((row, i) => this.selectedIds.has(this._rowId(row, i)));
 	}
 	render() {
 		return html`
@@ -122,7 +149,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}>+ 새 행</button>
+          <button class="btn btn-success" @click=${this._onAddRowClick}>${this.addRowLabel}</button>
         ` : ""}
       </div>
     `;
@@ -157,10 +184,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="">전체</option>
+                    <option value="">${this.filterAllLabel}</option>
                     ${col.options.map((o) => html`<option value=${o.value}>${o.label}</option>`)}
                   </select>` : html`<input
-                    placeholder="필터..."
+                    placeholder=${this.filterPlaceholder}
                     @input=${(e) => this._onFilterChange(col.key, e.target.value)} />` : ""}
           </td>
         `)}
@@ -169,10 +196,10 @@ var URichTable = class URichTable extends LitElement {
     `;
 	}
 	_renderBody() {
-		if (this.loading) return html`<tr><td colspan=${this._colSpan()}><div class="loading-overlay">로딩 중...</div></td></tr>`;
+		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>`;
 		return this.data.map((row, rowIdx) => {
-			const rowId = row._id;
+			const rowId = this._rowId(row, rowIdx);
 			const isSelected = this.selectedIds.has(rowId);
 			const isExpanded = this.expandedIds.has(rowId);
 			const hasError = this.rowErrors.has(rowId);
@@ -192,7 +219,7 @@ var URichTable = class URichTable extends LitElement {
           ` : ""}
           ${this.columns.map((col, colIdx) => this._renderCell(row, rowIdx, col, colIdx))}
           <td class="actions-cell">
-            <span style="cursor:pointer;color:#94a3b8" @click=${() => this._onRowMenu(row)}>⋯</span>
+            <span class="row-menu" @click=${() => this._onRowMenu(row)}>⋯</span>
           </td>
         </tr>
         ${isExpanded && this.detailRenderer ? html`
@@ -201,7 +228,7 @@ var URichTable = class URichTable extends LitElement {
           </tr>
         ` : ""}
         ${hasError ? html`
-          <tr><td colspan=${this._colSpan()} style="padding:2px 8px;background:#fef2f2;color:#ef4444;font-size:11px;">
+          <tr><td colspan=${this._colSpan()} class="row-error-cell">
             ${this.rowErrors.get(rowId)}
           </td></tr>
         ` : ""}
@@ -264,7 +291,7 @@ var URichTable = class URichTable extends LitElement {
 	_renderNewRow() {
 		return html`
       <tr class="new-row">
-        ${this.selectable ? html`<td class="checkbox-cell"><span style="color:#86efac">+</span></td>` : ""}
+        ${this.selectable ? html`<td class="checkbox-cell"><span class="new-row-marker">+</span></td>` : ""}
         ${this.expandable ? html`<td></td>` : ""}
         ${this.columns.map((col, colIdx) => html`
           <td>
@@ -287,7 +314,7 @@ var URichTable = class URichTable extends LitElement {
 		const end = Math.min(this.currentPage * this.pageSize, this.totalCount);
 		return html`
       <div class="pagination">
-        <span>전체 ${this.totalCount.toLocaleString()}건 중 ${start}-${end} 표시</span>
+        <span>${this.pageInfoFormatter(this.totalCount, start, end)}</span>
         <div class="page-buttons">
           <button ?disabled=${this.currentPage <= 1} @click=${() => this._onPageChange(this.currentPage - 1)}>◀</button>
           ${this._getPageNumbers(totalPages).map((p) => html`
@@ -306,7 +333,7 @@ var URichTable = class URichTable extends LitElement {
     `;
 	}
 	_onSelectAll(e) {
-		if (e.target.checked) this.selectedIds = new Set(this.data.map((r) => r._id));
+		if (e.target.checked) this.selectedIds = new Set(this.data.map((r, i) => this._rowId(r, i)));
 		else this.selectedIds = /* @__PURE__ */ new Set();
 		this._fireSelectionChange();
 	}
@@ -322,7 +349,7 @@ var URichTable = class URichTable extends LitElement {
 		const start = Math.min(this._lastSelectedIndex, rowIdx);
 		const end = Math.max(this._lastSelectedIndex, rowIdx);
 		const next = new Set(this.selectedIds);
-		for (let i = start; i <= end; i++) next.add(this.data[i]._id);
+		for (let i = start; i <= end; i++) next.add(this._rowId(this.data[i], i));
 		this.selectedIds = next;
 		this._fireSelectionChange();
 	}
@@ -445,7 +472,7 @@ var URichTable = class URichTable extends LitElement {
 		this.expandedIds = next;
 		this.dispatchEvent(new CustomEvent("row-expand", {
 			detail: {
-				row: this.data.find((r) => r._id === rowId),
+				row: this.data.find((r, i) => this._rowId(r, i) === rowId),
 				expanded
 			},
 			bubbles: true,
@@ -588,7 +615,7 @@ var URichTable = class URichTable extends LitElement {
 		};
 	}
 	_selectAll() {
-		this.selectedIds = new Set(this.data.map((r) => r._id));
+		this.selectedIds = new Set(this.data.map((r, i) => this._rowId(r, i)));
 		this._fireSelectionChange();
 	}
 	static define(tagName = "u-rich-table") {
@@ -602,6 +629,11 @@ __decorate([property({ type: Number }), __decorateMetadata("design:type", Object
 __decorate([property({ type: Number }), __decorateMetadata("design:type", Object)], URichTable.prototype, "currentPage", void 0);
 __decorate([property({ type: Boolean }), __decorateMetadata("design:type", Object)], URichTable.prototype, "loading", void 0);
 __decorate([property({ type: String }), __decorateMetadata("design:type", Object)], URichTable.prototype, "emptyMessage", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], URichTable.prototype, "loadingMessage", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], URichTable.prototype, "filterPlaceholder", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], URichTable.prototype, "filterAllLabel", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], URichTable.prototype, "addRowLabel", void 0);
+__decorate([property({ attribute: false }), __decorateMetadata("design:type", Function)], URichTable.prototype, "pageInfoFormatter", void 0);
 __decorate([property({ type: Boolean }), __decorateMetadata("design:type", Object)], URichTable.prototype, "selectable", void 0);
 __decorate([property({ type: Boolean }), __decorateMetadata("design:type", Object)], URichTable.prototype, "editable", void 0);
 __decorate([property({ type: Boolean }), __decorateMetadata("design:type", Object)], URichTable.prototype, "addable", void 0);

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

@@ -5,7 +5,8 @@ var richTableStyles = css`
     display: block;
     font-family: system-ui, -apple-system, sans-serif;
     font-size: 13px;
-    border: 1px solid #e2e8f0;
+    color: var(--u-txt-color, #0f172a);
+    border: 1px solid var(--u-border-color, #e2e8f0);
     border-radius: 8px;
     overflow: hidden;
   }
@@ -15,25 +16,25 @@ var richTableStyles = css`
     align-items: center;
     gap: 8px;
     padding: 8px 12px;
-    background: #f8fafc;
-    border-bottom: 1px solid #e2e8f0;
+    background: var(--u-neutral-50, #f8fafc);
+    border-bottom: 1px solid var(--u-border-color, #e2e8f0);
   }
 
   .toolbar .selection-info {
     font-size: 12px;
-    color: #64748b;
+    color: var(--u-txt-color-weak, #757575);
   }
 
   .toolbar .search-input {
     padding: 4px 10px;
-    border: 1px solid #d1d5db;
+    border: 1px solid var(--u-input-border-color, #d1d5db);
     border-radius: 4px;
     font-size: 12px;
     outline: none;
   }
 
   .toolbar .search-input:focus {
-    border-color: #3b82f6;
+    border-color: var(--u-input-border-color-focus, #3b82f6);
     box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
   }
 
@@ -43,13 +44,16 @@ var richTableStyles = css`
     border-radius: 4px;
     font-size: 12px;
     cursor: pointer;
+    /* 예외 — "색 배경 위의 글자" 역할 토큰이 없다. --u-txt-color-inverse 는
+       다크에서 neutral-100(#121212) 이라 파랑/초록 버튼 위에서 읽히지 않는다.
+       버튼 배경은 두 테마 모두 유채색이므로 흰 글자가 맞다. */
     color: white;
   }
 
-  .toolbar .btn-primary { background: #3b82f6; }
-  .toolbar .btn-primary:hover { background: #2563eb; }
-  .toolbar .btn-success { background: #10b981; }
-  .toolbar .btn-success:hover { background: #059669; }
+  .toolbar .btn-primary { background: var(--u-primary-color, #3b82f6); }
+  .toolbar .btn-primary:hover { background: var(--u-primary-color-strong, #2563eb); }
+  .toolbar .btn-success { background: var(--u-success-color, #10b981); }
+  .toolbar .btn-success:hover { background: var(--u-success-color-strong, #059669); }
 
   table {
     width: 100%;
@@ -58,10 +62,10 @@ var richTableStyles = css`
 
   thead th {
     padding: 8px;
-    background: #f1f5f9;
+    background: var(--u-neutral-100, #f1f5f9);
     font-weight: 600;
     text-align: left;
-    border-bottom: 2px solid #e2e8f0;
+    border-bottom: 2px solid var(--u-border-color, #e2e8f0);
     user-select: none;
     position: relative;
   }
@@ -71,55 +75,55 @@ var richTableStyles = css`
   }
 
   thead th.sortable:hover {
-    background: #e2e8f0;
+    background: var(--u-bg-color-active, #e2e8f0);
   }
 
   .sort-indicator {
     font-size: 10px;
-    color: #94a3b8;
+    color: var(--u-txt-color-weak, #94a3b8);
     margin-left: 4px;
   }
 
   .filter-row td {
     padding: 4px;
-    background: #fefce8;
-    border-bottom: 1px solid #e2e8f0;
+    background: var(--u-yellow-0, #fefce8);
+    border-bottom: 1px solid var(--u-border-color, #e2e8f0);
   }
 
   .filter-row input,
   .filter-row select {
     width: 100%;
     padding: 2px 6px;
-    border: 1px solid #d1d5db;
+    border: 1px solid var(--u-input-border-color, #d1d5db);
     border-radius: 3px;
     font-size: 11px;
     outline: none;
   }
 
   tbody tr {
-    border-bottom: 1px solid #e2e8f0;
+    border-bottom: 1px solid var(--u-border-color-weak, #e2e8f0);
   }
 
   tbody tr:hover {
-    background: #f8fafc;
+    background: var(--u-bg-color-hover, #f8fafc);
   }
 
   tbody tr.selected {
-    background: #eff6ff;
+    background: var(--u-primary-bg-color, #E3F2FD);
   }
 
   tbody tr.focused td.focused-cell {
-    outline: 2px solid #3b82f6;
+    outline: 2px solid var(--u-primary-color, #3b82f6);
     outline-offset: -2px;
   }
 
   tbody tr.editing {
-    background: #fefce8;
-    outline: 2px solid #eab308;
+    background: var(--u-yellow-0, #fefce8);
+    outline: 2px solid var(--u-warning-color-weak, #eab308);
   }
 
   tbody tr.error {
-    background: #fef2f2;
+    background: var(--u-danger-bg-color, #FFEBEE);
   }
 
   tbody td {
@@ -129,19 +133,19 @@ var richTableStyles = css`
   tbody td .cell-edit-input {
     width: 100%;
     padding: 4px 6px;
-    border: 1px solid #3b82f6;
+    border: 1px solid var(--u-primary-color, #3b82f6);
     border-radius: 3px;
     font-size: 13px;
     outline: none;
   }
 
   tbody td .cell-edit-input.invalid {
-    border-color: #ef4444;
+    border-color: var(--u-danger-color, #ef4444);
   }
 
   .validation-error {
     font-size: 10px;
-    color: #ef4444;
+    color: var(--u-danger-color, #ef4444);
     margin-top: 2px;
   }
 
@@ -154,11 +158,11 @@ var richTableStyles = css`
     width: 30px;
     text-align: center;
     cursor: pointer;
-    color: #94a3b8;
+    color: var(--u-txt-color-weak, #94a3b8);
   }
 
   .expand-cell:hover {
-    color: #3b82f6;
+    color: var(--u-primary-color, #3b82f6);
   }
 
   .actions-cell {
@@ -168,31 +172,31 @@ var richTableStyles = css`
 
   .new-row td {
     padding: 4px 8px;
-    background: #f0fdf4;
+    background: var(--u-success-bg-color, #E8F5E9);
     opacity: 0.8;
   }
 
   .new-row input {
     width: 100%;
     padding: 4px 6px;
-    border: 1px dashed #86efac;
+    border: 1px dashed var(--u-success-color-weaker, #86efac);
     border-radius: 3px;
     background: transparent;
     font-size: 12px;
-    color: #6b7280;
+    color: var(--u-txt-color-weak, #757575);
     outline: none;
   }
 
   .new-row input:focus {
-    border-color: #10b981;
-    background: white;
+    border-color: var(--u-success-color, #10b981);
+    background: var(--u-bg-color, white);
     opacity: 1;
   }
 
   .detail-row td {
     padding: 8px 8px 8px 70px;
-    background: #f8fafc;
-    border-bottom: 2px solid #e2e8f0;
+    background: var(--u-neutral-50, #f8fafc);
+    border-bottom: 2px solid var(--u-border-color, #e2e8f0);
   }
 
   .badge {
@@ -208,10 +212,10 @@ var richTableStyles = css`
     justify-content: space-between;
     align-items: center;
     padding: 8px 12px;
-    background: #f8fafc;
-    border-top: 1px solid #e2e8f0;
+    background: var(--u-neutral-50, #f8fafc);
+    border-top: 1px solid var(--u-border-color, #e2e8f0);
     font-size: 12px;
-    color: #64748b;
+    color: var(--u-txt-color-weak, #757575);
   }
 
   .pagination .page-buttons {
@@ -222,22 +226,22 @@ var richTableStyles = css`
 
   .pagination button {
     padding: 2px 8px;
-    border: 1px solid #d1d5db;
+    border: 1px solid var(--u-input-border-color, #d1d5db);
     border-radius: 3px;
-    background: white;
+    background: var(--u-bg-color, white);
     font-size: 11px;
     cursor: pointer;
   }
 
   .pagination button.active {
-    background: #3b82f6;
-    color: white;
-    border-color: #3b82f6;
+    background: var(--u-primary-color, #3b82f6);
+    color: var(--u-txt-color-inverse, white);
+    border-color: var(--u-input-border-color-focus, #3b82f6);
   }
 
   .pagination select {
     padding: 2px 4px;
-    border: 1px solid #d1d5db;
+    border: 1px solid var(--u-input-border-color, #d1d5db);
     border-radius: 3px;
     font-size: 11px;
     margin-left: 8px;
@@ -248,7 +252,7 @@ var richTableStyles = css`
     align-items: center;
     justify-content: center;
     padding: 40px;
-    color: #6b7280;
+    color: var(--u-txt-color-weak, #757575);
   }
 
   .empty-message {
@@ -256,177 +260,59 @@ var richTableStyles = css`
     align-items: center;
     justify-content: center;
     padding: 40px;
-    color: #9ca3af;
-  }
-
-  /* ── Dark mode ──
-     외부에서 --u-* CSS 변수가 제공되면 그 값을 사용하고,
-     제공되지 않으면 자체 dark fallback 값을 적용한다. */
-
-  :host-context([theme="dark"]) {
-    border-color: var(--u-border-color, #3D3D3D);
-    color: var(--u-txt-color, #D4D4D4);
-  }
-
-  :host-context([theme="dark"]) .toolbar {
-    background: var(--u-neutral-200, #1E1E1E);
-    border-bottom-color: var(--u-border-color, #3D3D3D);
-  }
-
-  :host-context([theme="dark"]) .toolbar .selection-info {
-    color: var(--u-txt-color-weak, #8A8A8A);
-  }
-
-  :host-context([theme="dark"]) .toolbar .search-input {
-    background: var(--u-input-bg-color, #1E1E1E);
-    color: var(--u-txt-color, #D4D4D4);
-    border-color: var(--u-input-border-color, #3D3D3D);
-  }
-
-  :host-context([theme="dark"]) .toolbar .search-input:focus {
-    border-color: var(--u-blue-500, #6ba3e3);
-    box-shadow: 0 0 0 2px rgba(107, 163, 227, 0.2);
-  }
-
-  :host-context([theme="dark"]) .toolbar .btn-primary {
-    background: var(--u-blue-500, #6ba3e3);
-  }
-
-  :host-context([theme="dark"]) .toolbar .btn-primary:hover {
-    background: var(--u-blue-600, #87B8F5);
-  }
-
-  :host-context([theme="dark"]) .toolbar .btn-success {
-    background: var(--u-green-500, #66B584);
-  }
-
-  :host-context([theme="dark"]) .toolbar .btn-success:hover {
-    background: var(--u-green-600, #81D19D);
-  }
-
-  :host-context([theme="dark"]) thead th {
-    background: var(--u-neutral-200, #1E1E1E);
-    color: var(--u-txt-color, #D4D4D4);
-    border-bottom-color: var(--u-border-color, #3D3D3D);
+    color: var(--u-txt-color-weak, #9ca3af);
   }
 
-  :host-context([theme="dark"]) thead th.sortable:hover {
-    background: var(--u-neutral-300, #2A2A2A);
-  }
-
-  :host-context([theme="dark"]) .sort-indicator {
-    color: var(--u-txt-color-weak, #8A8A8A);
-  }
-
-  :host-context([theme="dark"]) .filter-row td {
-    background: var(--u-yellow-0, #2E2200);
-    border-bottom-color: var(--u-border-color, #3D3D3D);
-  }
-
-  :host-context([theme="dark"]) .filter-row input,
-  :host-context([theme="dark"]) .filter-row select {
-    background: var(--u-input-bg-color, #1E1E1E);
-    color: var(--u-txt-color, #D4D4D4);
-    border-color: var(--u-input-border-color, #3D3D3D);
-  }
 
-  :host-context([theme="dark"]) tbody tr {
-    border-bottom-color: var(--u-border-color-weak, #2A2A2A);
-  }
-
-  :host-context([theme="dark"]) tbody tr:hover {
-    background: var(--u-neutral-200, #1E1E1E);
-  }
-
-  :host-context([theme="dark"]) tbody tr.selected {
-    background: var(--u-blue-0, #0a1e3d);
-  }
-
-  :host-context([theme="dark"]) tbody tr.focused td.focused-cell {
-    outline-color: var(--u-blue-500, #6ba3e3);
+  /* 종전에는 아래 셋이 템플릿 안에 style="…#94a3b8" 형태로 박혀 있었다.
+     .styles.ts 만 훑는 정리로는 보이지 않는 자리다. */
+  .row-menu {
+    cursor: pointer;
+    color: var(--u-txt-color-weak, #94a3b8);
   }
 
-  :host-context([theme="dark"]) tbody tr.editing {
-    background: var(--u-yellow-0, #2E2200);
-    outline-color: var(--u-yellow-500, #D4A712);
+  .row-error-cell {
+    padding: 2px 8px;
+    background: var(--u-danger-bg-color, #FFEBEE);
+    color: var(--u-danger-color, #ef4444);
+    font-size: 11px;
   }
 
-  :host-context([theme="dark"]) tbody tr.error {
-    background: var(--u-red-0, #2E0A0A);
+  .new-row-marker {
+    color: var(--u-success-color-weaker, #86efac);
   }
 
-  :host-context([theme="dark"]) tbody td .cell-edit-input {
-    background: var(--u-input-bg-color, #1E1E1E);
-    color: var(--u-txt-color, #D4D4D4);
-    border-color: var(--u-blue-500, #6ba3e3);
-  }
+  /* ── 다크 보정 ──
+     ⚠**여기 남은 규칙은 "다크 테마 구현"이 아니다.** 역할 토큰의 중립 계열은 두 테마에서
+     서로 다른 팔레트 단에 매핑돼 있어(--u-bg-color = neutral-0 라이트 / neutral-100 다크,
+     --u-border-color = neutral-300 / neutral-400) 테마 보정이 토큰 층에 이미 들어 있다.
+     그래서 base 규칙 하나로 두 테마가 성립한다.
 
-  :host-context([theme="dark"]) tbody td .cell-edit-input.invalid {
-    border-color: var(--u-red-500, #D66060);
-  }
+     종전에는 이 자리에 57개 선언이 있었고, base 레이어가 토큰을 전혀 쓰지 않았기 때문에
+     (Tailwind 계열 hex 하드코딩) 다크를 통째로 재구현할 수밖에 없었다. base 를 역할 토큰으로
+     옮기면서 그 대부분이 불필요해졌다.
 
-  :host-context([theme="dark"]) .validation-error {
-    color: var(--u-red-500, #D66060);
-  }
+     남긴 것은 역할 층에 자리가 없는 하나뿐이다:
 
-  :host-context([theme="dark"]) .expand-cell {
-    color: var(--u-txt-color-weak, #8A8A8A);
-  }
+     **표면 높이 축이 없다.** 배경 역할 토큰은 상호작용 상태 이름(-hover/-active/
+        -disabled)뿐이라 "바탕보다 한 단 올라온 면"을 뜻하는 토큰이 없다. 라이트에서는
+        neutral-50/100 이 흰 바탕 위에서 충분히 읽히지만, 다크에서는 그 단이 각각
+        #0A0A0A/#121212 로 거의 검정이라 툴바·헤더·페이지네이션이 배경에 묻힌다.
 
-  :host-context([theme="dark"]) .expand-cell:hover {
-    color: var(--u-blue-500, #6ba3e3);
-  }
 
-  :host-context([theme="dark"]) .new-row td {
-    background: var(--u-green-0, #0D2818);
-  }
-
-  :host-context([theme="dark"]) .new-row input {
-    border-color: var(--u-green-500, #66B584);
-    color: var(--u-txt-color-weak, #8A8A8A);
-  }
-
-  :host-context([theme="dark"]) .new-row input:focus {
-    border-color: var(--u-green-600, #81D19D);
-    background: var(--u-input-bg-color, #1E1E1E);
-    color: var(--u-txt-color, #D4D4D4);
-  }
-
-  :host-context([theme="dark"]) .detail-row td {
-    background: var(--u-neutral-200, #1E1E1E);
-    border-bottom-color: var(--u-border-color, #3D3D3D);
-  }
+     ⚠:host-context 는 Firefox/Safari 미지원이다. 그러나 위 base 마이그레이션으로
+     **색의 대부분이 이제 토큰 층에서 테마를 따르므로**, 그 브라우저에서도 다크가
+     동작한다 — 종전에는 이 블록이 전부였기 때문에 다크가 아예 없었다. */
 
+  :host-context([theme="dark"]) .toolbar,
+  :host-context([theme="dark"]) thead th,
+  :host-context([theme="dark"]) .detail-row td,
   :host-context([theme="dark"]) .pagination {
     background: var(--u-neutral-200, #1E1E1E);
-    border-top-color: var(--u-border-color, #3D3D3D);
-    color: var(--u-txt-color-weak, #8A8A8A);
   }
 
   :host-context([theme="dark"]) .pagination button {
     background: var(--u-neutral-300, #2A2A2A);
-    color: var(--u-txt-color, #D4D4D4);
-    border-color: var(--u-border-color, #3D3D3D);
-  }
-
-  :host-context([theme="dark"]) .pagination button.active {
-    background: var(--u-blue-500, #6ba3e3);
-    color: var(--u-neutral-1000, #FFFFFF);
-    border-color: var(--u-blue-500, #6ba3e3);
-  }
-
-  :host-context([theme="dark"]) .pagination select {
-    background: var(--u-input-bg-color, #1E1E1E);
-    color: var(--u-txt-color, #D4D4D4);
-    border-color: var(--u-input-border-color, #3D3D3D);
-  }
-
-  :host-context([theme="dark"]) .loading-overlay {
-    color: var(--u-txt-color-weak, #8A8A8A);
-  }
-
-  :host-context([theme="dark"]) .empty-message {
-    color: var(--u-txt-color-disabled, #525252);
   }
 `;
 //#endregion

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/data-components",
   "description": "iyulab data visualization components",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "keywords": [
     "iyulab",
     "web-components",
@@ -58,7 +58,7 @@
     "lint:fix": "eslint src/ --fix"
   },
   "dependencies": {
-    "@iyulab/components": "^1.8.0",
+    "@iyulab/components": "^1.15.0",
     "lit": "^3.3.3"
   },
   "peerDependencies": {