@iyulab/data-components 0.8.0 → 0.9.1

package/CHANGELOG.md

@@ -1,5 +1,77 @@
 # Changelog
 
+## [0.9.1] - 2026-08-03
+
+### Fixed
+
+- **포커스 테두리의 폴백 리터럴 2곳이 낡아 있었다** — `@iyulab/components` 시트가
+  상태 테두리를 한 단 진하게 옮기면서(다크 대비 미달 해소) 여기 구워 둔 값이 어긋났다.
+  ⚠**토큰 시트를 로드한 환경에서는 드러나지 않는다** — 폴백이 평가되지 않기 때문이다.
+  깨지는 곳은 시트 없이 이 패키지를 쓰는 소비자의 화면이다.
+- **검색 입력의 포커스 링이 팔레트에 없는 색이었다** — `rgba(59, 130, 246, .2)`
+  (Tailwind blue-500)를 굽고 있어 브랜드를 덮어도 따라오지 않았고 다크에서도 같은 값이었다.
+  역할 토큰에서 `color-mix()` 로 파생하도록 고쳤다.
+
+## [0.9.0] - 2026-08-02
+
+### Fixed
+
+- ★**URichTable 의 다크 테마가 Firefox·Safari 에서 동작하지 않던 문제.**
+
+  툴바·표 헤더·상세 행·페이지네이션의 다크 배경이 `:host-context([theme="dark"])` 로만
+  선언돼 있었는데, 그 선택자는 **Firefox·Safari 에서 미지원**이다. 두 브라우저에서는
+  그 색이 적용된 적이 없다 — 라이트용 밝은 회색이 다크 화면에 그대로 남았다.
+
+  우회가 아니라 원인을 없앴다: `@iyulab/components` 1.18.0 의 **`--u-bg-color-raised`**
+  가 그 면을 표현하므로 base 규칙 하나로 두 테마가 성립하고, **다크 전용 블록이 통째로
+  사라졌다**(이 파일의 다크 규칙 3 → **0**). 토큰 층은 브라우저를 가리지 않는다.
+
+- ★**`@iyulab/data-components/init` 이 게시본에 존재하지 않던 문제.**
+  `exports['./init']` 이 선언돼 있고 `src/init.ts` 도 있는데, **빌드 진입점 목록에 없어서**
+  `dist/init.js` 가 한 번도 생성되지 않았다(타입 선언 `dist/init.d.ts` 만 남아 더 눈에 띄지
+  않았다). 이 서브패스를 임포트하는 소비자는 `ERR_MODULE_NOT_FOUND` 를 받는다.
+
+  ⚠**이 리포 안에서는 아무 증상이 없다** — 로컬은 상대 경로로 소스를 직접 읽는다.
+  게시본을 설치한 쪽에서만 드러나는 부류이며, 같은 성질의 결함이 과거에 네 번의 릴리스를
+  지나 잠복한 적이 있다. 모노레포 `npm run doctor` 에 **게시 계약 스윕**을 추가해 12개
+  패키지 전부를 대조하도록 했다.
+
+### Changed
+
+- ⚠**`@iyulab/components` 의존 범위를 `^1.18.0` 으로 올린다.** 이 버전은 1.18.0 이 신설한
+  `--u-bg-color-raised` 를 쓴다. 1.15.0~1.17.0 과 짝지으면 토큰이 없어 폴백(`#FAFAFA`)이
+  발동하는데, 그 값은 라이트 기준이라 **다크에서 툴바·헤더가 밝은 회색으로 칠해진다.**
+  범위를 올리지 않으면 조용히 깨지는 조합이 생긴다.
+- 다크 툴바·헤더·상세 행·페이지네이션이 `#1E1E1E` → **`#2A2A2A`** 로 한 단 밝아진다.
+  기존 오버라이드가 해결하려던 증상(*"툴바·헤더가 배경에 묻힌다"*)에 대해 바탕 대비가
+  1.15 → **1.42** 로 개선된다.
+- 다크 페이지네이션 버튼이 `#2A2A2A` → **`#1E1E1E`** 로 한 단 안쪽이 된다. 크롬 면 위의
+  **컨트롤**이므로 입력 계열 토큰(`--u-input-bg-color`)을 쓴다 — 면과 같은 단이면 묻힌다.
+- 라이트 표 헤더가 `#F5F5F5` → **`#FAFAFA`** 로 툴바와 같은 단이 된다. 두 단의 실측 수요는
+  라이트 한쪽뿐이었고, 헤더는 이미 2px 테두리로 분리돼 있다.
+
+## [0.8.1] - 2026-08-02
+
+### Fixed
+
+- ★**토큰 폴백 리터럴 108곳이 정본 시트와 어긋나 있던 문제.** 세 부류가 섞여 있었다:
+
+  1. **다른 팔레트가 박혀 있던 것** (~80곳) — `#3b82f6`·`#e2e8f0`·`#94a3b8`·`#0f172a`·
+     `#ef4444`·`#10b981` 등. `@iyulab/components` 의 값이었던 적이 **한 번도 없다.**
+     시트를 로드하지 않은 소비자에게는 이 패키지만 전혀 다른 색 체계로 보였다.
+  2. ★★**다크 시트 값이 라이트 폴백으로 구워져 있던 것** (4곳) —
+     `--u-neutral-200: #1E1E1E`·`--u-neutral-300: #2A2A2A`. 시트가 없는 **라이트 화면에
+     다크 회색**이 칠해진다. 폴백 정본은 light 여야 한다.
+  3. 1.16.0 의 역할 단 재매핑을 받지 못한 것 (~24곳).
+
+  특히 `--u-txt-color-weak` 12곳은 `#94a3b8`(흰 배경 대비 **2.56**, AA 미달 — 시트 값 #757575 는 4.61)이었다 —
+  업스트림이 1.15.0 에서 바로 이 토큰의 AA 미달을 고쳤는데, 이 패키지의 폴백은 그 수정을
+  받은 적이 없었다.
+
+  ⚠**이 결함은 개발 환경에서 절대 드러나지 않는다.** 토큰 시트가 있으면 폴백은 아예
+  평가되지 않는다 — 깨지는 곳은 시트를 로드하지 않은 소비자의 화면이고, 우리가 보지
+  못하는 자리다. 모노레포 루트의 `npm run tokens:sync` 가 이제 정본 시트와 대조한다.
+
 ## [0.8.0] - 2026-08-02
 
 ### Changed

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

@@ -18,8 +18,8 @@ var styles = [css`
     align-items: center;
     justify-content: space-between;
     padding: 0.75rem;
-    background: var(--u-bg-color, #fff);
-    border: 1px solid var(--u-border-color, #e2e8f0);
+    background: var(--u-bg-color, #FFFFFF);
+    border: 1px solid var(--u-border-color, #E0E0E0);
     border-radius: 8px;
   }
 
@@ -29,18 +29,18 @@ var styles = [css`
   }
 
   .view-toggles u-button[active] {
-    background: var(--u-primary-color, #1E88E5);
+    background: var(--u-primary-color, #1976D2);
     /* 예외 1 — "주색 위의 글자" 역할 토큰이 없다.
        역할 층의 유채색은 전경 5단(--u-primary-color-*)뿐이고, 그 위에 얹는 글자색을
        가리키는 토큰은 없다. 실측: 라이트 #FFFFFF/#1E88E5 = 3.68, 다크 #000000/#2A659D
        = 3.45 — 다크는 흰 글자였다면 6.09 였다. 즉 현재 값이 최선이 아니지만, 팔레트를
        직접 바꾸면 게시된 시각이 움직이므로 토큰 추가 결정까지 현행을 유지한다. */
-    color: var(--u-neutral-0, #fff);
+    color: var(--u-neutral-0, #FFFFFF);
   }
 
   .info {
     font-size: 0.875rem;
-    color: var(--u-txt-color-weak, #64748b);
+    color: var(--u-txt-color-weak, #757575);
     font-weight: 500;
   }
 
@@ -60,8 +60,8 @@ var styles = [css`
 
   /* Card Styles */
   .card {
-    background: var(--u-bg-color, #fff);
-    border: 1px solid var(--u-border-color, #e2e8f0);
+    background: var(--u-bg-color, #FFFFFF);
+    border: 1px solid var(--u-border-color, #E0E0E0);
     border-radius: 8px;
     padding: 1.25rem;
     cursor: pointer;
@@ -69,13 +69,13 @@ var styles = [css`
   }
 
   .card:hover {
-    border-color: var(--u-primary-color, #1E88E5);
+    border-color: var(--u-primary-color, #1976D2);
     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-primary-color, #1E88E5);
+    border-color: var(--u-primary-color, #1976D2);
     background: var(--u-bg-color-active, #EEEEEE);
     box-shadow: 0 0 0 3px var(--u-primary-color-weakest, #90CAF9);
   }
@@ -95,14 +95,14 @@ var styles = [css`
   .card-field .label {
     font-size: 0.875rem;
     font-weight: 600;
-    color: var(--u-txt-color-weak, #64748b);
+    color: var(--u-txt-color-weak, #757575);
     min-width: 80px;
     flex-shrink: 0;
   }
 
   .card-field .value {
     font-size: 0.9375rem;
-    color: var(--u-txt-color, #0f172a);
+    color: var(--u-txt-color, #212121);
     word-break: break-word;
   }
 
@@ -120,14 +120,14 @@ var styles = [css`
   /* Table */
   .table-wrapper {
     overflow-x: auto;
-    border: 1px solid var(--u-border-color, #e2e8f0);
+    border: 1px solid var(--u-border-color, #E0E0E0);
     border-radius: 8px;
   }
 
   table {
     width: 100%;
     border-collapse: collapse;
-    background: var(--u-bg-color, #fff);
+    background: var(--u-bg-color, #FFFFFF);
   }
 
   thead {
@@ -136,7 +136,7 @@ var styles = [css`
        "바탕보다 한 단 올라온 면"을 뜻하는 토큰이 없다. 헤더에 -hover 를 쓰면
        마우스 상태를 뜻하게 되므로 팔레트를 직접 읽는다. neutral-50 은 두 테마에서
        각각 #FAFAFA/#0A0A0A 로 반전되므로 다크 보정은 필요 없다. */
-    background: var(--u-neutral-50, #f8fafc);
+    background: var(--u-neutral-50, #FAFAFA);
     position: sticky;
     top: 0;
     z-index: 10;
@@ -147,8 +147,8 @@ var styles = [css`
     text-align: left;
     font-size: 0.875rem;
     font-weight: 600;
-    color: var(--u-txt-color-weak, #64748b);
-    border-bottom: 2px solid var(--u-border-color, #e2e8f0);
+    color: var(--u-txt-color-weak, #757575);
+    border-bottom: 2px solid var(--u-border-color, #E0E0E0);
     white-space: nowrap;
   }
 
@@ -166,13 +166,13 @@ var styles = [css`
   }
 
   tbody tr:not(:last-child) {
-    border-bottom: 1px solid var(--u-border-color-weak, #f1f5f9);
+    border-bottom: 1px solid var(--u-border-color-weak, #EEEEEE);
   }
 
   td {
     padding: 0.875rem 1rem;
     font-size: 0.9375rem;
-    color: var(--u-txt-color, #0f172a);
+    color: var(--u-txt-color, #212121);
   }
 
   /* Empty State */
@@ -181,7 +181,7 @@ var styles = [css`
     align-items: center;
     justify-content: center;
     min-height: 300px;
-    color: var(--u-txt-color-weak, #64748b);
+    color: var(--u-txt-color-weak, #757575);
     font-size: 1rem;
   }
 `];

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

@@ -12,14 +12,14 @@ var baseStyles = css`
     height: 100%;
     overflow: hidden;
     outline: none;
-    border: 1px solid var(--u-border-color, #e2e8f0);
+    border: 1px solid var(--u-border-color, #E0E0E0);
     border-radius: 4px;
-    background: var(--u-bg-color, #fff);
+    background: var(--u-bg-color, #FFFFFF);
   }
 
   .sheet-container:focus-within {
-    border-color: var(--u-blue-500, #3b82f6);
-    box-shadow: 0 0 0 2px var(--u-blue-100, #dbeafe);
+    border-color: var(--u-blue-500, #2196F3);
+    box-shadow: 0 0 0 2px var(--u-blue-100, #BBDEFB);
   }
 
   .sheet-scroll {
@@ -43,15 +43,15 @@ var baseStyles = css`
     z-index: 4;
     width: 48px;
     min-width: 48px;
-    background: var(--u-neutral-100, #f1f5f9);
-    border-right: 1px solid var(--u-border-color, #e2e8f0);
-    border-bottom: 2px solid var(--u-border-color, #e2e8f0);
+    background: var(--u-neutral-100, #F5F5F5);
+    border-right: 1px solid var(--u-border-color, #E0E0E0);
+    border-bottom: 2px solid var(--u-border-color, #E0E0E0);
     cursor: pointer;
     user-select: none;
   }
 
   .corner:hover {
-    background: var(--u-neutral-200, #e2e8f0);
+    background: var(--u-neutral-200, #EEEEEE);
   }
 
   /* Column headers (A, B, C...) */
@@ -59,14 +59,14 @@ var baseStyles = css`
     position: sticky;
     top: 0;
     z-index: 2;
-    background: var(--u-neutral-100, #f1f5f9);
+    background: var(--u-neutral-100, #F5F5F5);
     padding: 4px 8px;
     text-align: center;
     font-size: 12px;
     font-weight: 600;
-    color: var(--u-txt-color-weak, #64748b);
-    border-right: 1px solid var(--u-border-color, #e2e8f0);
-    border-bottom: 2px solid var(--u-border-color, #e2e8f0);
+    color: var(--u-txt-color-weak, #757575);
+    border-right: 1px solid var(--u-border-color, #E0E0E0);
+    border-bottom: 2px solid var(--u-border-color, #E0E0E0);
     white-space: nowrap;
     min-width: 80px;
     cursor: pointer;
@@ -75,8 +75,8 @@ var baseStyles = css`
   }
 
   .col-header.col-selected {
-    background: var(--u-blue-200, #bfdbfe);
-    color: var(--u-blue-800, #1e40af);
+    background: var(--u-blue-200, #90CAF9);
+    color: var(--u-blue-800, #1565C0);
   }
 
   .resize-handle {
@@ -102,7 +102,7 @@ var baseStyles = css`
   }
 
   .resize-handle:hover::after {
-    background: var(--u-blue-500, #3b82f6);
+    background: var(--u-blue-500, #2196F3);
   }
 
   .sheet-container.is-resizing {
@@ -124,31 +124,31 @@ var baseStyles = css`
     text-align: right;
     padding: 0 6px;
     font-size: 11px;
-    color: var(--u-txt-color-weak, #64748b);
+    color: var(--u-txt-color-weak, #757575);
     /* 예외 — 표면 높이 축이 없다. 행번호 여백은 "비활성"이 아니라 시트 바탕보다
        한 단 내려간 면이다. --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);
+    background: var(--u-neutral-50, #FAFAFA);
+    border-right: 1px solid var(--u-border-color, #E0E0E0);
+    border-bottom: 1px solid var(--u-border-color-weak, #EEEEEE);
     cursor: pointer;
     user-select: none;
     vertical-align: middle;
   }
 
   .row-num.row-selected {
-    background: var(--u-blue-100, #dbeafe);
-    color: var(--u-blue-800, #1e40af);
+    background: var(--u-blue-100, #BBDEFB);
+    color: var(--u-blue-800, #1565C0);
     font-weight: 600;
   }
 
   /* Data cells */
   .cell {
     padding: 0 6px;
-    border-right: 1px solid var(--u-border-color-weak, #f1f5f9);
-    border-bottom: 1px solid var(--u-border-color-weak, #f1f5f9);
+    border-right: 1px solid var(--u-border-color-weak, #EEEEEE);
+    border-bottom: 1px solid var(--u-border-color-weak, #EEEEEE);
     font-size: 13px;
-    color: var(--u-txt-color, #0f172a);
+    color: var(--u-txt-color, #212121);
     min-width: 80px;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -167,8 +167,8 @@ var baseStyles = css`
 
   /* The anchor cell (top-left of selection) */
   .cell.anchor {
-    background: var(--u-bg-color, #fff);
-    outline: 2px solid var(--u-blue-500, #3b82f6);
+    background: var(--u-bg-color, #FFFFFF);
+    outline: 2px solid var(--u-blue-500, #2196F3);
     outline-offset: -2px;
     overflow: visible;
     z-index: 1;
@@ -188,13 +188,13 @@ var baseStyles = css`
     min-width: 100%;
     height: calc(100% + 2px);
     border: none;
-    outline: 2px solid var(--u-blue-500, #3b82f6);
+    outline: 2px solid var(--u-blue-500, #2196F3);
     outline-offset: -1px;
     padding: 0 6px;
     font-size: 13px;
     font-family: inherit;
-    color: var(--u-txt-color, #0f172a);
-    background: var(--u-bg-color, #fff);
+    color: var(--u-txt-color, #212121);
+    background: var(--u-bg-color, #FFFFFF);
     box-sizing: border-box;
     z-index: 10;
     box-shadow: 0 2px 8px var(--u-shadow-color-strong, rgba(0, 0, 0, 0.16));
@@ -209,8 +209,8 @@ var baseStyles = css`
     min-width: 120px;
     max-height: 200px;
     overflow-y: auto;
-    background: var(--u-bg-color, #fff);
-    border: 1px solid var(--u-border-color, #e2e8f0);
+    background: var(--u-bg-color, #FFFFFF);
+    border: 1px solid var(--u-border-color, #E0E0E0);
     border-top: none;
     border-radius: 0 0 4px 4px;
     box-shadow: 0 4px 12px var(--u-shadow-color-normal, rgba(0, 0, 0, 0.12));
@@ -220,7 +220,7 @@ var baseStyles = css`
   .dropdown-item {
     padding: 4px 8px;
     font-size: 13px;
-    color: var(--u-txt-color, #0f172a);
+    color: var(--u-txt-color, #212121);
     cursor: pointer;
     white-space: nowrap;
     overflow: hidden;
@@ -228,18 +228,18 @@ var baseStyles = css`
   }
 
   .dropdown-item:hover {
-    background: var(--u-neutral-100, #f1f5f9);
+    background: var(--u-neutral-100, #F5F5F5);
   }
 
   .dropdown-item.highlighted {
     background: var(--u-primary-bg-color, #E3F2FD);
-    color: var(--u-blue-800, #1e40af);
+    color: var(--u-blue-800, #1565C0);
   }
 
   .dropdown-empty {
     padding: 6px 8px;
     font-size: 12px;
-    color: var(--u-txt-color-weak, #64748b);
+    color: var(--u-txt-color-weak, #757575);
     font-style: italic;
   }
 
@@ -251,12 +251,12 @@ var baseStyles = css`
   /* Readonly column/cell */
   .cell.cell-readonly {
     background: var(--u-bg-color-disabled, #FAFAFA);
-    color: var(--u-txt-color-weak, #64748b);
+    color: var(--u-txt-color-weak, #757575);
     cursor: default;
   }
 
   .cell.cell-readonly.selected {
-    background: var(--u-neutral-100, #f1f5f9);
+    background: var(--u-neutral-100, #F5F5F5);
   }
 
   .cell.cell-readonly.anchor {
@@ -266,13 +266,13 @@ var baseStyles = css`
   /* Computed column/cell */
   .cell.cell-computed {
     background: var(--u-primary-bg-color, #E3F2FD);
-    color: var(--u-txt-color, #0f172a);
+    color: var(--u-txt-color, #212121);
     font-style: italic;
     cursor: default;
   }
 
   .cell.cell-computed.selected {
-    background: var(--u-blue-100, #dbeafe);
+    background: var(--u-blue-100, #BBDEFB);
   }
 
   .cell.cell-computed.anchor {
@@ -292,20 +292,20 @@ var DARK_PREFIXES = [
 ];
 var darkRules = (host) => `
   ${host} .col-header.col-selected {
-    background: var(--u-blue-100, #1e3a5f);
+    background: var(--u-blue-100, #BBDEFB);
   }
 
   ${host} .cell.cell-readonly.selected {
-    background: var(--u-neutral-200, #2A2A2A);
+    background: var(--u-neutral-200, #EEEEEE);
   }
 
 
   ${host} .cell.cell-computed.selected {
-    background: var(--u-blue-200, #2a4a6f);
+    background: var(--u-blue-200, #90CAF9);
   }
 
   ${host} .cell.cell-computed.anchor {
-    background: var(--u-blue-100, #1e3a5f);
+    background: var(--u-blue-100, #BBDEFB);
   }
 
 `;

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

@@ -5,8 +5,8 @@ var richTableStyles = css`
     display: block;
     font-family: system-ui, -apple-system, sans-serif;
     font-size: 13px;
-    color: var(--u-txt-color, #0f172a);
-    border: 1px solid var(--u-border-color, #e2e8f0);
+    color: var(--u-txt-color, #212121);
+    border: 1px solid var(--u-border-color, #E0E0E0);
     border-radius: 8px;
     overflow: hidden;
   }
@@ -16,8 +16,8 @@ var richTableStyles = css`
     align-items: center;
     gap: 8px;
     padding: 8px 12px;
-    background: var(--u-neutral-50, #f8fafc);
-    border-bottom: 1px solid var(--u-border-color, #e2e8f0);
+    background: var(--u-bg-color-raised, #FAFAFA);
+    border-bottom: 1px solid var(--u-border-color, #E0E0E0);
   }
 
   .toolbar .selection-info {
@@ -27,15 +27,15 @@ var richTableStyles = css`
 
   .toolbar .search-input {
     padding: 4px 10px;
-    border: 1px solid var(--u-input-border-color, #d1d5db);
+    border: 1px solid var(--u-input-border-color, #E0E0E0);
     border-radius: 4px;
     font-size: 12px;
     outline: none;
   }
 
   .toolbar .search-input:focus {
-    border-color: var(--u-input-border-color-focus, #3b82f6);
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+    border-color: var(--u-input-border-color-focus, #1565C0);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--u-primary-color-strong, #1565C0) 20%, transparent);
   }
 
   .toolbar .btn {
@@ -50,10 +50,10 @@ var richTableStyles = css`
     color: white;
   }
 
-  .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); }
+  .toolbar .btn-primary { background: var(--u-primary-color, #1976D2); }
+  .toolbar .btn-primary:hover { background: var(--u-primary-color-strong, #1565C0); }
+  .toolbar .btn-success { background: var(--u-success-color, #2E7D32); }
+  .toolbar .btn-success:hover { background: var(--u-success-color-strong, #1B5E20); }
 
   table {
     width: 100%;
@@ -62,10 +62,10 @@ var richTableStyles = css`
 
   thead th {
     padding: 8px;
-    background: var(--u-neutral-100, #f1f5f9);
+    background: var(--u-bg-color-raised, #FAFAFA);
     font-weight: 600;
     text-align: left;
-    border-bottom: 2px solid var(--u-border-color, #e2e8f0);
+    border-bottom: 2px solid var(--u-border-color, #E0E0E0);
     user-select: none;
     position: relative;
   }
@@ -75,37 +75,37 @@ var richTableStyles = css`
   }
 
   thead th.sortable:hover {
-    background: var(--u-bg-color-active, #e2e8f0);
+    background: var(--u-bg-color-active, #EEEEEE);
   }
 
   .sort-indicator {
     font-size: 10px;
-    color: var(--u-txt-color-weak, #94a3b8);
+    color: var(--u-txt-color-weak, #757575);
     margin-left: 4px;
   }
 
   .filter-row td {
     padding: 4px;
-    background: var(--u-yellow-0, #fefce8);
-    border-bottom: 1px solid var(--u-border-color, #e2e8f0);
+    background: var(--u-yellow-0, #FFFDE7);
+    border-bottom: 1px solid var(--u-border-color, #E0E0E0);
   }
 
   .filter-row input,
   .filter-row select {
     width: 100%;
     padding: 2px 6px;
-    border: 1px solid var(--u-input-border-color, #d1d5db);
+    border: 1px solid var(--u-input-border-color, #E0E0E0);
     border-radius: 3px;
     font-size: 11px;
     outline: none;
   }
 
   tbody tr {
-    border-bottom: 1px solid var(--u-border-color-weak, #e2e8f0);
+    border-bottom: 1px solid var(--u-border-color-weak, #EEEEEE);
   }
 
   tbody tr:hover {
-    background: var(--u-bg-color-hover, #f8fafc);
+    background: var(--u-bg-color-hover, #F5F5F5);
   }
 
   tbody tr.selected {
@@ -113,13 +113,13 @@ var richTableStyles = css`
   }
 
   tbody tr.focused td.focused-cell {
-    outline: 2px solid var(--u-primary-color, #3b82f6);
+    outline: 2px solid var(--u-primary-color, #1976D2);
     outline-offset: -2px;
   }
 
   tbody tr.editing {
-    background: var(--u-yellow-0, #fefce8);
-    outline: 2px solid var(--u-warning-color-weak, #eab308);
+    background: var(--u-yellow-0, #FFFDE7);
+    outline: 2px solid var(--u-warning-color-weak, #FFEB3B);
   }
 
   tbody tr.error {
@@ -133,19 +133,19 @@ var richTableStyles = css`
   tbody td .cell-edit-input {
     width: 100%;
     padding: 4px 6px;
-    border: 1px solid var(--u-primary-color, #3b82f6);
+    border: 1px solid var(--u-primary-color, #1976D2);
     border-radius: 3px;
     font-size: 13px;
     outline: none;
   }
 
   tbody td .cell-edit-input.invalid {
-    border-color: var(--u-danger-color, #ef4444);
+    border-color: var(--u-danger-color, #D32F2F);
   }
 
   .validation-error {
     font-size: 10px;
-    color: var(--u-danger-color, #ef4444);
+    color: var(--u-danger-color, #D32F2F);
     margin-top: 2px;
   }
 
@@ -158,11 +158,11 @@ var richTableStyles = css`
     width: 30px;
     text-align: center;
     cursor: pointer;
-    color: var(--u-txt-color-weak, #94a3b8);
+    color: var(--u-txt-color-weak, #757575);
   }
 
   .expand-cell:hover {
-    color: var(--u-primary-color, #3b82f6);
+    color: var(--u-primary-color, #1976D2);
   }
 
   .actions-cell {
@@ -179,7 +179,7 @@ var richTableStyles = css`
   .new-row input {
     width: 100%;
     padding: 4px 6px;
-    border: 1px dashed var(--u-success-color-weaker, #86efac);
+    border: 1px dashed var(--u-success-color-weaker, #81C784);
     border-radius: 3px;
     background: transparent;
     font-size: 12px;
@@ -188,15 +188,15 @@ var richTableStyles = css`
   }
 
   .new-row input:focus {
-    border-color: var(--u-success-color, #10b981);
-    background: var(--u-bg-color, white);
+    border-color: var(--u-success-color, #2E7D32);
+    background: var(--u-bg-color, #FFFFFF);
     opacity: 1;
   }
 
   .detail-row td {
     padding: 8px 8px 8px 70px;
-    background: var(--u-neutral-50, #f8fafc);
-    border-bottom: 2px solid var(--u-border-color, #e2e8f0);
+    background: var(--u-bg-color-raised, #FAFAFA);
+    border-bottom: 2px solid var(--u-border-color, #E0E0E0);
   }
 
   .badge {
@@ -212,8 +212,8 @@ var richTableStyles = css`
     justify-content: space-between;
     align-items: center;
     padding: 8px 12px;
-    background: var(--u-neutral-50, #f8fafc);
-    border-top: 1px solid var(--u-border-color, #e2e8f0);
+    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);
   }
@@ -226,22 +226,24 @@ var richTableStyles = css`
 
   .pagination button {
     padding: 2px 8px;
-    border: 1px solid var(--u-input-border-color, #d1d5db);
+    border: 1px solid var(--u-input-border-color, #E0E0E0);
     border-radius: 3px;
-    background: var(--u-bg-color, white);
+    /* 크롬 면 위의 컨트롤이다 — 면과 같은 단이면 묻힌다. 입력 계열은 두 테마 모두
+       크롬 면보다 한 단 안쪽이라(라이트 흰색 / 다크 #1E1E1E) 자연히 구분된다. */
+    background: var(--u-input-bg-color, #FFFFFF);
     font-size: 11px;
     cursor: pointer;
   }
 
   .pagination button.active {
-    background: var(--u-primary-color, #3b82f6);
-    color: var(--u-txt-color-inverse, white);
-    border-color: var(--u-input-border-color-focus, #3b82f6);
+    background: var(--u-primary-color, #1976D2);
+    color: var(--u-txt-color-inverse, #FFFFFF);
+    border-color: var(--u-input-border-color-focus, #1565C0);
   }
 
   .pagination select {
     padding: 2px 4px;
-    border: 1px solid var(--u-input-border-color, #d1d5db);
+    border: 1px solid var(--u-input-border-color, #E0E0E0);
     border-radius: 3px;
     font-size: 11px;
     margin-left: 8px;
@@ -260,7 +262,7 @@ var richTableStyles = css`
     align-items: center;
     justify-content: center;
     padding: 40px;
-    color: var(--u-txt-color-weak, #9ca3af);
+    color: var(--u-txt-color-weak, #757575);
   }
 
 
@@ -268,52 +270,35 @@ var richTableStyles = css`
      .styles.ts 만 훑는 정리로는 보이지 않는 자리다. */
   .row-menu {
     cursor: pointer;
-    color: var(--u-txt-color-weak, #94a3b8);
+    color: var(--u-txt-color-weak, #757575);
   }
 
   .row-error-cell {
     padding: 2px 8px;
     background: var(--u-danger-bg-color, #FFEBEE);
-    color: var(--u-danger-color, #ef4444);
+    color: var(--u-danger-color, #D32F2F);
     font-size: 11px;
   }
 
   .new-row-marker {
-    color: var(--u-success-color-weaker, #86efac);
+    color: var(--u-success-color-weaker, #81C784);
   }
 
   /* ── 다크 보정 ──
-     ⚠**여기 남은 규칙은 "다크 테마 구현"이 아니다.** 역할 토큰의 중립 계열은 두 테마에서
-     서로 다른 팔레트 단에 매핑돼 있어(--u-bg-color = neutral-0 라이트 / neutral-100 다크,
-     --u-border-color = neutral-300 / neutral-400) 테마 보정이 토큰 층에 이미 들어 있다.
-     그래서 base 규칙 하나로 두 테마가 성립한다.
-
-     종전에는 이 자리에 57개 선언이 있었고, base 레이어가 토큰을 전혀 쓰지 않았기 때문에
-     (Tailwind 계열 hex 하드코딩) 다크를 통째로 재구현할 수밖에 없었다. base 를 역할 토큰으로
-     옮기면서 그 대부분이 불필요해졌다.
+     ★**이 블록은 비어 있다. 그것이 목표 상태다.**
 
-     남긴 것은 역할 층에 자리가 없는 하나뿐이다:
+     종전에는 여기 57개 선언이 있었고, base 레이어가 토큰을 전혀 쓰지 않아(하드코딩 hex)
+     다크를 통째로 재구현할 수밖에 없었다. base 를 역할 토큰으로 옮기며 대부분이 사라졌고,
+     마지막까지 남은 것은 **표면 높이 축의 부재** 하나였다 — 배경 역할 토큰이 상호작용
+     상태 이름(-hover/-active/-disabled)뿐이라 "바탕보다 한 단 올라온 면"을 뜻할 수단이
+     없었다. 라이트에서는 neutral-50/100 이 흰 바탕 위에서 읽히지만 다크에서는 그 단이
+     #0A0A0A/#121212 로 거의 검정이라 툴바·헤더·페이지네이션이 배경에 묻혔다.
 
-     **표면 높이 축이 없다.** 배경 역할 토큰은 상호작용 상태 이름(-hover/-active/
-        -disabled)뿐이라 "바탕보다 한 단 올라온 면"을 뜻하는 토큰이 없다. 라이트에서는
-        neutral-50/100 이 흰 바탕 위에서 충분히 읽히지만, 다크에서는 그 단이 각각
-        #0A0A0A/#121212 로 거의 검정이라 툴바·헤더·페이지네이션이 배경에 묻힌다.
+     @iyulab/components 1.18.0 이 --u-bg-color-raised 를 신설해 그 자리를 채웠고,
+     base 규칙이 그것을 쓰므로 다크 전용 규칙이 필요 없다.
 
-
-     ⚠: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);
-  }
-
-  :host-context([theme="dark"]) .pagination button {
-    background: var(--u-neutral-300, #2A2A2A);
-  }
+     ⇒ **부수 효과로 Firefox·Safari 의 다크가 완성된다.** :host-context 는 그 둘에서
+     미지원이라 이 블록의 색은 애초에 적용된 적이 없었다. 토큰 층은 브라우저를 가리지 않는다. */
 `;
 //#endregion
 export { richTableStyles };

package/dist/init.js

@@ -0,0 +1 @@
+import "./utilities/shadowDomProtection.js";

package/package.json

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