@iyulab/modern-app 0.6.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,70 @@
 # Changelog
 
+## [0.8.0] - 2026-08-01
+
+### Added
+
+- ★**셸을 브랜드 색으로 다시 칠할 수 있다** — 사이드바의 활성 메뉴 색이 파랑 프리미티브
+  (`--u-blue-600`)에 하드와이어돼 있었다. 소비자가 브랜드를 다른 색으로 잡아도 **화면에서
+  가장 눈에 띄는 좌측 메뉴만 파랑으로 남았고**, 이를 고치는 길이 둘 다 나빴다 — 팔레트를
+  덮으면 *진짜 파랑*이 필요한 배지·차트까지 오염되고(팔레트는 이름이 곧 값의 약속이다),
+  섀도 DOM 내부 CSS 를 뚫으면 구조 변경에 조용히 깨진다.
+
+  이제 셸은 역할 토큰을 경유한다. **재브랜딩이 한 줄이다**:
+
+  ```css
+  :root { --u-primary-color: #7B1FA2; }
+  ```
+
+- **셸 표면 토큰을 소비자 계약으로 공개했다** — `--app-sidebar-{bg,fg,active-bg,active-fg,width,width-slim}`
+  · `--app-header-{bg,fg}`. **전부 선택**이며 미지정 시 역할 토큰에서 파생되므로, 아무것도
+  하지 않으면 브랜드를 따라오고 원하면 셸만 따로 조절한다. 문서: [docs/theme.md](docs/theme.md).
+
+  활성 메뉴의 hover 는 **별도 토큰이 아니라 파생**(`color-mix(… 85%, black)`)이다 — 한쪽만
+  덮은 소비자가 어긋난 색 쌍을 얻는 것이 이 계약이 막으려는 결함이기 때문이다.
+
+- **브라우저 테스트 프로젝트** — 실제 렌더에서만 드러나는 것을 검증한다
+  (`npm run test:browser`). `color-mix` 계산과 커스텀 프로퍼티 캐스케이드는 jsdom 이
+  재현하지 못한다.
+
+### Fixed
+
+- **라우팅 실패 표시가 컴포넌트의 위험색 규약을 따르지 않던 문제 수정** — `u-progress-bar` 의
+  API 에 없는 `error` 속성을 세우고 색을 자체 CSS 로 덮고 있었다. 컴포넌트가 제공하는
+  `status="error"` 를 쓰도록 고쳤다 — 막대 색이 규약값으로 정정되고, 종전에는 정정되지 않던
+  버퍼 색도 함께 따라온다.
+- **진행 표시 트랙 색 지정이 오타로 동작하지 않던 문제 수정** — `--progres-bar-track-color`
+  (`s` 누락)라 트랙이 투명해지지 않고 기본 회색으로 남아 있었다.
+- **키보드 포커스 링이 테마를 따르지 않던 문제 수정** — 사이드바 그룹·버튼의 포커스 윤곽선이
+  하드코딩된 색(`#6666ff`)이었다. 브랜드와 무관했고 다크 테마에서도 그대로였다.
+
+### Changed
+
+- ⚠**활성 메뉴 hover 배경이 미세하게 어두워진다** — 고정된 `--u-blue-700`(#1976D2) 대신
+  활성 색에서 파생하므로 기본 팔레트에서 #1A74C3 이 된다. 소비자가 브랜드를 바꿔도 hover 가
+  함께 따라오게 하려면 파생이어야 한다(고정 단은 따라오지 않는다).
+- ⚠**사이드바 그룹의 강조 텍스트 색이 바뀐다** — 같은 파생식을 쓴다. 대비는 오히려
+  올라간다(4.60:1 → 4.85:1, WCAG AA 통과 유지).
+- **사이드바 본문 텍스트가 `--u-neutral-800` 에서 시맨틱 토큰 `--u-txt-color` 로 바뀌었다.**
+  소비자의 텍스트 색 지정을 따르게 된다.
+
+## [0.7.0] - 2026-08-01
+
+### Fixed
+
+- ★**토큰 시트를 로드하지 않으면 앱 셸이 깨지던 문제 수정** — 사이드바·레이아웃의 색 선언
+  **34곳**이 `@iyulab/components` 의 시트 토큰을 폴백 없이 참조하고 있었다. 시트가 없으면
+  `var(--u-*)` 가 무효가 되어 **그 선언이 통째로 버려지므로**, 메뉴 텍스트가 보이지 않고
+  사이드바 배경이 투명해졌다. 앱 셸이라 화면 전체가 영향을 받는다.
+
+  이제 각 참조가 기본 테마 값을 폴백으로 갖는다(`var(--u-txt-color, #212121)`).
+  **시트를 로드하는 경우 시각 변화는 없다** — 폴백은 시트가 없을 때만 평가된다.
+  리터럴이 업스트림 시트와 어긋나지 않도록 대조 테스트가 강제하며, 폴백은 손으로 쓰지 않고
+  생성한다.
+
+  ⚠**폰트(`--u-font-base`)는 예외**다 — 폴백을 배선하지 않았다. 시트가 없으면 브라우저 기본
+  폰트로 대체되어 화면이 깨지지 않는다(색은 깨진다).
+
 ## [0.6.0] - 2026-07-03
 
 ### Added

package/README.md

@@ -77,6 +77,15 @@ app.theme.set('dark');
 app.theme.isInitialized; // boolean
 ```
 
+Rebranding the shell is one declaration — the sidebar's active menu follows it:
+
+```css
+:root { --u-primary-color: #7B1FA2; }
+```
+
+Shell surfaces can also be tuned on their own (`--app-sidebar-bg`, `--app-sidebar-width`, …).
+See [theme.md](./docs/theme.md).
+
 ### Notifications
 
 ```typescript
@@ -171,7 +180,7 @@ await app.load({
 | [getting-started.md](./docs/getting-started.md) | Bootstrap, architecture, entry point setup |
 | [routing.md](./docs/routing.md) | Route config, URL params, async routes, progress, auth guards |
 | [layout.md](./docs/layout.md) | Sidebar layout, all menu item types, responsive behaviour |
-| [theme.md](./docs/theme.md) | Theme init, runtime switching, CSS tokens |
+| [theme.md](./docs/theme.md) | Theme init, runtime switching, token layers, shell surface tokens |
 | [notifications.md](./docs/notifications.md) | Toast methods and options |
 | [i18n.md](./docs/i18n.md) | i18next setup, plugins, lit-i18n usage |
 | [configuration.md](./docs/configuration.md) | Full TypeScript interface reference |

package/dist/_virtual/{_@oxc-project_runtime@0.138.0 → _@oxc-project_runtime@0.142.0}/helpers/esm/decorate.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.138.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.142.0/helpers/esm/decorate.js
 function e(e, t, n, r) {
 	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
 	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);

package/dist/_virtual/{_@oxc-project_runtime@0.138.0 → _@oxc-project_runtime@0.142.0}/helpers/esm/decorateMetadata.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.138.0/helpers/esm/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.142.0/helpers/esm/decorateMetadata.js
 function e(e, t) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
 }

package/dist/components/SidebarButton.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { styles as r } from "./SidebarButton.styles.js";
 import { html as i } from "lit";

package/dist/components/SidebarButton.styles.js

@@ -4,7 +4,7 @@ var t = e`
   :host {
     display: block;
     width: 100%;
-    color: var(--u-txt-color);
+    color: var(--app-sidebar-fg, var(--u-txt-color, #212121));
     background-color: transparent;
     border: none;
     border-radius: 8px;
@@ -12,11 +12,11 @@ var t = e`
     cursor: pointer;
   }
   :host(:hover) {
-    color: var(--u-txt-color-hover);
-    background-color: var(--u-bg-color-hover);
+    color: var(--u-txt-color-hover, #1E88E5);
+    background-color: var(--u-bg-color-hover, #F5F5F5);
   }
   :host(:active) {
-    background-color: var(--u-bg-color-active);
+    background-color: var(--u-bg-color-active, #EEEEEE);
   }
 
   button {
@@ -35,7 +35,7 @@ var t = e`
     padding: 8px;
   }
   button:focus-visible {
-    outline: 2px solid #6666ff;
+    outline: 2px solid var(--u-primary-color-weak, #2196F3);
     outline-offset: 2px;
   }
   

package/dist/components/SidebarGroup.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { SidebarLink as r } from "./SidebarLink.js";
 import { styles as i } from "./SidebarGroup.styles.js";

package/dist/components/SidebarGroup.styles.js

@@ -2,9 +2,12 @@ import { css as e } from "lit";
 //#region src/components/SidebarGroup.styles.ts
 var t = e`
   :host {
+    /* SidebarLink 과 같은 원천 — 그룹 강조는 활성 링크와 같은 색 계열이어야 한다 */
+    --group-accent: var(--app-sidebar-active-bg, var(--u-primary-color, #1E88E5));
+
     display: flex;
     flex-direction: column;
-    color: var(--u-neutral-800);
+    color: var(--app-sidebar-fg, var(--u-txt-color, #212121));
   }
 
   button {
@@ -28,17 +31,19 @@ var t = e`
     padding: 8px;
   }
   button[selected] {
-    color: var(--u-blue-700);
+    /* 패널 위 텍스트라 강조색을 그대로 쓰면 대비가 부족하다(blue-600 = 3.68:1).
+       활성 배경과 같은 파생식으로 한 단 어둡게 해 AA 를 넘긴다(4.85:1). */
+    color: color-mix(in srgb, var(--group-accent) 85%, black);
   }
   button:hover {
-    color: var(--u-txt-color-hover);
-    background-color: var(--u-bg-color-hover);
+    color: var(--u-txt-color-hover, #1E88E5);
+    background-color: var(--u-bg-color-hover, #F5F5F5);
   }
   button:active {
-    background-color: var(--u-bg-color-active);
+    background-color: var(--u-bg-color-active, #EEEEEE);
   }
   button:focus-visible {
-    outline: 2px solid #6666ff;
+    outline: 2px solid var(--u-primary-color-weak, #2196F3);
     outline-offset: 2px;
   }
 
@@ -73,7 +78,7 @@ var t = e`
     gap: 4px;
     margin-top: 4px;
     margin-left: 32px;
-    border-left: 2px solid var(--u-border-color-weak);
+    border-left: 2px solid var(--u-border-color-weak, #EEEEEE);
     padding-left: 8px;
     overflow: hidden;
     transition: all 0.3s ease;

package/dist/components/SidebarLink.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { styles as r } from "./SidebarLink.styles.js";
 import { html as i } from "lit";

package/dist/components/SidebarLink.styles.js

@@ -2,26 +2,32 @@ import { css as e } from "lit";
 //#region src/components/SidebarLink.styles.ts
 var t = e`
   :host {
+    /* 활성 배경의 단일 원천. 소비자는 셸 계약 토큰(--app-sidebar-active-bg) 또는
+       역할 토큰(--u-primary-color) 어느 쪽을 덮어도 hover 파생까지 함께 따라온다.
+       팔레트(--u-blue-600)를 직접 읽으면 브랜드를 바꾸려는 소비자가 "진짜 파랑"이
+       필요한 배지·차트까지 함께 오염시키는 길밖에 없다. */
+    --link-active-bg: var(--app-sidebar-active-bg, var(--u-primary-color, #1E88E5));
+
     display: block;
-    color: var(--u-neutral-800);
+    color: var(--app-sidebar-fg, var(--u-txt-color, #212121));
     background-color: transparent;
     border-radius: 8px;
     transition: all 0.2s ease;
     cursor: pointer;
   }
   :host(:hover) {
-    color: var(--u-txt-color-hover);
-    background-color: var(--u-bg-color-hover);
+    color: var(--u-txt-color-hover, #1E88E5);
+    background-color: var(--u-bg-color-hover, #F5F5F5);
   }
   :host([selected]) {
-    color: var(--u-txt-color-inverse);
-    background-color: var(--u-blue-600);
-    box-shadow: 0 1px 3px var(--u-shadow-color-weak);
+    color: var(--app-sidebar-active-fg, var(--u-txt-color-inverse, #FFFFFF));
+    background-color: var(--link-active-bg);
+    box-shadow: 0 1px 3px var(--u-shadow-color-weak, rgba(0, 0, 0, 0.08));
   }
   :host([selected]:hover) {
-    color: var(--u-txt-color-inverse);
-    background-color: var(--u-blue-700);
-    box-shadow: 0 2px 6px var(--u-shadow-color-normal);
+    color: var(--app-sidebar-active-fg, var(--u-txt-color-inverse, #FFFFFF));
+    background-color: color-mix(in srgb, var(--link-active-bg) 85%, black);
+    box-shadow: 0 2px 6px var(--u-shadow-color-normal, rgba(0, 0, 0, 0.12));
   }
   
   .container {

package/dist/components/SidebarSection.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { styles as r } from "./SidebarSection.styles.js";
 import { html as i } from "lit";

package/dist/components/SidebarSection.styles.js

@@ -14,8 +14,13 @@ var t = e`
     padding: 8px 12px 4px;
   }
 
+  /* ⚠아래 두 색만 팔레트를 직접 읽는다 — 시맨틱 토큰으로 옮기면 대비가 무너지기 때문이다.
+     섹션 제목·부제는 본문(neutral-800)보다 약한 3단 위계를 이루는데, 역할 층의 보조
+     텍스트 단은 --u-txt-color-weak 하나뿐이고 그 값은 흰 배경에서 2.68:1 이라
+     WCAG AA(4.5:1)에 미달한다. 현행 두 값은 6.19:1 · 4.61:1 로 통과한다.
+     ⇒ 역할 층에 AA 를 넘는 보조 텍스트 단이 생기면 그때 옮긴다. */
   .title {
-    color: var(--u-neutral-700);
+    color: var(--u-neutral-700, #616161);
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.5px;
@@ -25,7 +30,7 @@ var t = e`
   }
   
   .subtitle {
-    color: var(--u-neutral-600);
+    color: var(--u-neutral-600, #757575);
     font-size: 11px;
     font-weight: 300;
   }

package/dist/internals/StyledElement.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { property as n } from "lit/decorators.js";
 import { UElement as r } from "@iyulab/components/dist/components/UElement.js";
 //#region src/internals/StyledElement.ts

package/dist/layouts/SidebarLayout.js

@@ -1,7 +1,7 @@
 import { app as e } from "../App.js";
 import { filterSidebarItems as t } from "./filterSidebarItems.js";
-import n from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
-import r from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import r from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { StyledElement as i } from "../internals/StyledElement.js";
 import "../components/SidebarSection.js";
 import "../components/SidebarLink.js";
@@ -40,8 +40,8 @@ var g = class extends i {
 				this.progressBarEl.removeAttribute("visible");
 			}, 300), (this.shadowRoot?.querySelector(".main"))?.focus({ preventScroll: !0 });
 		}, this.handleRouteError = (e) => {
-			this.progressBarEl.setAttribute("error", ""), this.progressBarEl.value = 100, setTimeout(() => {
-				this.progressBarEl.removeAttribute("visible"), this.progressBarEl.removeAttribute("error");
+			this.progressBarEl.status = "error", this.progressBarEl.value = 100, setTimeout(() => {
+				this.progressBarEl.removeAttribute("visible"), this.progressBarEl.status = "default";
 			}, 300);
 		}, this._handleMainKeydown = (e) => {
 			let t = e.composedPath()[0];
@@ -152,7 +152,8 @@ var g = class extends i {
 		if (e.type === "html") {
 			let t = e.render(this.state);
 			return typeof t == "string" ? f(t) : o`${t}`;
-		} else if (e.type === "button") return o`
+		}
+		if (e.type === "button") return o`
         <u-sidebar-button
           ?compact=${this.state === "slim"}
           .icon="${e.icon}"
@@ -161,7 +162,7 @@ var g = class extends i {
           @click="${e.onClick}"
         ></u-sidebar-button>
       `;
-		else if (e.type === "link") {
+		if (e.type === "link") {
 			let t = this.isMatchedLink(e.pattern || e.href);
 			return o`
         <u-sidebar-link
@@ -174,7 +175,8 @@ var g = class extends i {
           .styles="${e.styles}"
         ></u-sidebar-link>
       `;
-		} else if (e.type === "section") return o`
+		}
+		if (e.type === "section") return o`
         <u-sidebar-section
           ?compact=${this.state === "slim"}
           .mainTitle="${e.title}"
@@ -183,7 +185,7 @@ var g = class extends i {
           ${p(e.items, (e, t) => t, (e) => this.renderItem(e))}
         </u-sidebar-section>
       `;
-		else if (e.type === "group") {
+		if (e.type === "group") {
 			let t = e.items.some((e) => this.isMatchedLink(e.pattern || e.href));
 			return o`
         <u-sidebar-group
@@ -196,7 +198,8 @@ var g = class extends i {
           ${p(e.items, (e, t) => t, (e) => this.renderItem(e))}
         </u-sidebar-group>
       `;
-		} else return s;
+		}
+		return s;
 	}
 	renderLogo() {
 		let e = this.config?.logo;

package/dist/layouts/SidebarLayout.styles.js

@@ -16,12 +16,12 @@ var t = e`
   }
 
   .logo {
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #212121);
     font-size: 24px;
     cursor: pointer;
   }
   .logo:hover {
-    color: var(--u-txt-color-hover);
+    color: var(--u-txt-color-hover, #1E88E5);
   }
   img.logo {
     height: 24px;
@@ -31,7 +31,7 @@ var t = e`
 
   .title {
     flex: 1;
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #212121);
     font-size: 18px;
     line-height: 24px;
     font-weight: 700;
@@ -48,7 +48,7 @@ var t = e`
     background: transparent;
   }
   .toggler:hover {
-    color: var(--u-txt-color-hover);
+    color: var(--u-txt-color-hover, #1E88E5);
   }
 
   /* Sidebar Container */
@@ -60,16 +60,17 @@ var t = e`
     justify-content: space-between;
     gap: 8px;
     height: 100%;
-    background: var(--u-panel-bg-color);
-    border-right: 1px solid var(--u-border-color);
+    background: var(--app-sidebar-bg, var(--u-panel-bg-color, #FFFFFF));
+    color: var(--app-sidebar-fg, var(--u-txt-color, #212121));
+    border-right: 1px solid var(--u-border-color, #E0E0E0);
     transition: all 0.3s ease;
   }
   /* Sidebar states */
   .sidebar[state="default"] {
-    width: 260px;
+    width: var(--app-sidebar-width, 260px);
   }
   .sidebar[state="slim"] {
-    width: 64px;
+    width: var(--app-sidebar-width-slim, 64px);
   }
   .sidebar[state="slim"] .sidebar-header {
     flex-direction: column;
@@ -77,7 +78,7 @@ var t = e`
     padding: 16px;
   }
   .sidebar[state="modal"] {
-    width: 260px;
+    width: var(--app-sidebar-width, 260px);
     position: absolute;
     top: 0;
     left: 0;
@@ -107,8 +108,9 @@ var t = e`
     justify-content: space-between;
     gap: 12px;
     padding: 16px;
-    background: var(--u-panel-bg-color);
-    border-bottom: 1px solid var(--u-border-color-weak);
+    background: var(--app-header-bg, var(--u-panel-bg-color, #FFFFFF));
+    color: var(--app-header-fg, var(--u-txt-color, #212121));
+    border-bottom: 1px solid var(--u-border-color-weak, #EEEEEE);
     user-select: none;
   }
 
@@ -120,7 +122,7 @@ var t = e`
     justify-content: space-between;
     gap: 12px;
     padding: 16px;
-    border-bottom: 1px solid var(--u-border-color-weak);
+    border-bottom: 1px solid var(--u-border-color-weak, #EEEEEE);
     user-select: none;
   }
 
@@ -141,7 +143,7 @@ var t = e`
     flex-direction: column;
     gap: 4px;
     padding: 8px;
-    border-top: 1px solid var(--u-border-color-weak);
+    border-top: 1px solid var(--u-border-color-weak, #EEEEEE);
   }
   .sidebar-footer:empty {
     display: none;
@@ -151,14 +153,14 @@ var t = e`
   .main {
     position: relative;
     flex: 1;
-    background: var(--u-bg-color);
+    background: var(--u-bg-color, #FFFFFF);
     overflow: auto;
     outline: none;
   }
 
   .main u-progress-bar {
     --progress-bar-height: 4px;
-    --progres-bar-track-color: transparent;
+    --progress-bar-track-color: transparent;
     
     position: absolute;
     z-index: 100;
@@ -174,9 +176,6 @@ var t = e`
     opacity: 1;
     transform: translateY(0);
   }
-  .main u-progress-bar[error] {
-    --progress-bar-color: var(--u-red-500);
-  }
 
   /* Backdrop for modal mode */
   .backdrop {
@@ -186,7 +185,7 @@ var t = e`
     left: 0;
     right: 0;
     bottom: 0;
-    background: var(--u-overlay-bg-color);
+    background: var(--u-overlay-bg-color, rgba(0, 0, 0, 0.5));
   }
 `;
 //#endregion

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -37,20 +37,22 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "start": "vite",
-    "build": "vite build"
+    "build": "vite build",
+    "test:browser": "vitest run --project=browser"
   },
   "dependencies": {
-    "@iyulab/components": "^1.1.1",
-    "@iyulab/router": "^0.10.0",
-    "i18next": "^26.2.0",
+    "@iyulab/components": "^1.8.0",
+    "@iyulab/router": "^0.10.2",
+    "i18next": "^26.3.6",
     "lit": "^3.3.3"
   },
   "devDependencies": {
-    "@types/node": "^25.8.0",
-    "happy-dom": "^20.10.2",
+    "@types/node": "^26.1.1",
+    "@vitest/browser-playwright": "^4.1.10",
+    "happy-dom": "^20.10.6",
     "typescript": "^5.9.3",
-    "vite": "^8.0.13",
-    "vite-plugin-dts": "^5.0.0",
-    "vitest": "^4.1.8"
+    "vite": "^8.1.4",
+    "vite-plugin-dts": "^5.0.3",
+    "vitest": "^4.1.10"
   }
 }