@iyulab/modern-app 0.38.0 → 0.40.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Changelog
 
+## [0.40.0] - 2026-10-07
+
+### Changed
+
+- **With `i18n` configured, i18next's language drives the whole app** — at load and on every `changeLanguage()` it is
+  handed to `@iyulab/components`' `Locale` (shell, primitives and component chrome follow, re-rendering on screen) and
+  to `<html lang>` (WCAG 3.1.1). Before, `changeLanguage('ko')` changed the app's own text while button names, empty
+  states and validation messages stayed in the old language, and a first load could show two languages when i18next's
+  `lng` differed from `<html lang>` or the browser's. Without `i18n` nothing changes — `Locale.set()` chooses.
+- **Requires `@iyulab/components` 2.8.0** (peer `>=2.8.0`) — the version whose components re-render on a locale switch.
+
+## [0.39.0] - 2026-10-06
+
+### Fixed
+
+- **`u-sidebar-layout` marks the current menu on arrival.** It learned the current route only from `route-begin`, so
+  when the layout is rendered by a route (a React shell as a nested route's parent), the first navigation's event
+  had passed before the layout connected: after typing an address or reloading, no link was `selected` and none
+  had `aria-current`, until the user navigated once. It now starts from the current location (`currentRoutePath()`
+  from `@iyulab/router` 0.20).
+- **Sidebar group icons follow `--app-sidebar-icon-size`**, like links. They used a fixed 20px, so a theme setting
+  the token (16px in `@iyulab/house-style`) drew two icon sizes in one rail.
+
+### Added
+
+- **`--app-sidebar-group-active-fg`** — text of a group header whose group holds the active menu. It sits on the
+  panel, but its default is derived from the active *background* (85% + black), which works for a dark active
+  background and leaves a light one (`--hs-brand-soft`) with near-invisible text (about 1.6:1). A theme with a
+  light active background sets this to its ink color. Unset, nothing changes.
+
+### Changed
+
+- Requires `@iyulab/router` `^0.20.0`.
+
 ## [0.38.0] - 2026-10-06
 
 ### Added

package/README.md

@@ -148,7 +148,9 @@ html`<p>${translate('common::greeting')}</p>`;
 The package's own strings — the page header's back link, empty-state copy, the shell's toggle and
 close labels, the wizard's buttons and step announcement — live in the `modern-app` namespace of
 `@iyulab/components`' `Locale`. English and Korean are built in, English being the default; pick the
-language once, with `Locale.set()` — the primitives and `@iyulab/flex-table` follow the same call.
+language once, with `Locale.set()` — the primitives and `@iyulab/flex-table` follow the same call. With
+`i18n` configured you do not call it: i18next's language (at load and on every `changeLanguage()`) is
+handed to `Locale` and to `<html lang>`.
 Register other languages, or your own wording, in the same namespace:
 
 ```typescript

package/dist/App.d.ts

@@ -14,6 +14,8 @@ declare class App {
     private _screen?;
     private _user?;
     private _gateTeardown?;
+    /** i18next 언어 → components `Locale` 동기화 해제(`unload`). */
+    private _languageSync?;
     private constructor();
     /** 싱글톤 인스턴스 반환 */
     static get instance(): App;
@@ -32,6 +34,13 @@ declare class App {
     /** 앱 로드 및 초기화 */
     load(config: AppConfig): Promise<void>;
     /** 앱 언로드 */
+    /**
+     * i18next 를 설정한 앱에서는 **i18next 가 언어의 정본**이다 — 그 언어를 셸·컴포넌트 chrome(`@iyulab/components` 의
+     * `Locale`, 이 패키지의 `modernAppLocale` 이 그것을 따른다)과 문서 `<html lang>`(WCAG 3.1.1, 낭독기 발음)에 잇는다.
+     * 종전에는 둘이 따로였다: `i18next.changeLanguage('ko')` 가 앱 문장만 바꾸고 버튼 이름·빈 상태·검증 메시지는 옛 언어로,
+     * 첫 로드에서도 i18next `lng` 와 `<html lang>`/브라우저 언어가 다르면 한 화면에 두 언어가 섰다.
+     */
+    private syncLanguage;
     unload(): void;
     /** 페이지 이동 */
     navigate(path: string): void;

package/dist/App.js

@@ -4,23 +4,24 @@ import { Router as n } from "@iyulab/router";
 import { setDefaultBaseUrl as r } from "@iyulab/components/dist/utilities/icons.js";
 import { Theme as i } from "@iyulab/components/dist/utilities/Theme.js";
 import { Toast as a } from "@iyulab/components/dist/utilities/Toast.js";
+import { Locale as o } from "@iyulab/components/dist/utilities/Locale.js";
 //#region src/App.ts
-var o = "\n:where(body) { margin: 0; }\n@media screen {\n  :where(body) { width: 100vw; height: 100vh; }\n}\n", s;
-function c() {
-	if (!s) {
+var s = "\n:where(body) { margin: 0; }\n@media screen {\n  :where(body) { width: 100vw; height: 100vh; }\n}\n", c;
+function l() {
+	if (!c) {
 		if ("adoptedStyleSheets" in document && typeof CSSStyleSheet < "u" && typeof CSSStyleSheet.prototype.replaceSync == "function") {
 			let e = new CSSStyleSheet();
-			e.replaceSync(o), document.adoptedStyleSheets = [...document.adoptedStyleSheets, e], s = e;
+			e.replaceSync(s), document.adoptedStyleSheets = [...document.adoptedStyleSheets, e], c = e;
 		} else {
 			let e = document.createElement("style");
-			e.textContent = o, document.head.prepend(e), s = e;
+			e.textContent = s, document.head.prepend(e), c = e;
 		}
 	}
 }
-var l = class o {
+var u = class s {
 	constructor() {}
 	static get instance() {
-		return o._instance ||= new o(), o._instance;
+		return s._instance ||= new s(), s._instance;
 	}
 	get config() {
 		return this._config;
@@ -43,7 +44,7 @@ var l = class o {
 	async load(a) {
 		if (this.unload(), this._config = a, await i.init(a.theme), a.iconBasepath && r(a.iconBasepath), a.i18n) {
 			for (let e of a.i18n.plugins || []) t.use(e);
-			await t.init(a.i18n);
+			await t.init(a.i18n), this.syncLanguage();
 		}
 		if (a.auth) {
 			let e = a.root || document.body, t = () => {
@@ -88,8 +89,16 @@ var l = class o {
 			useIntercept: a.useIntercept
 		});
 	}
+	syncLanguage() {
+		let e = (e) => {
+			e && e !== "cimode" && (o.set(e), typeof document < "u" && (document.documentElement.lang = e));
+		};
+		e(t.resolvedLanguage ?? t.language);
+		let n = (n) => e(t.resolvedLanguage ?? n);
+		t.on("languageChanged", n), this._languageSync = () => t.off("languageChanged", n);
+	}
 	unload() {
-		this._gateTeardown &&= (this._gateTeardown(), void 0), this._user = void 0, this._screen &&= (this._screen.destroy(), void 0), this._layout &&= (this._layout.remove(), void 0), this._router &&= (this._router.destroy(), void 0), this._config &&= void 0;
+		this._languageSync?.(), this._languageSync = void 0, this._gateTeardown &&= (this._gateTeardown(), void 0), this._user = void 0, this._screen &&= (this._screen.destroy(), void 0), this._layout &&= (this._layout.remove(), void 0), this._router &&= (this._router.destroy(), void 0), this._config &&= void 0;
 	}
 	navigate(e) {
 		this._router?.go(e);
@@ -116,7 +125,7 @@ var l = class o {
 		await a.error(e, { ...t });
 	}
 	async createLayout(e, t) {
-		e === document.body && c();
+		e === document.body && l();
 		let n;
 		if (t.type === "sidebar") {
 			let { SidebarLayout: e } = await import("./layouts/SidebarLayout.js"), r = new e();
@@ -126,4 +135,4 @@ var l = class o {
 	}
 }.instance;
 //#endregion
-export { l as app };
+export { u as app };

package/dist/components/SidebarGroup.styles.js

@@ -34,8 +34,10 @@ var t = e`
   }
   button[selected] {
     /* 패널 위 텍스트라 강조색을 그대로 쓰면 대비가 부족하다(blue-600 = 3.68:1).
-       활성 배경과 같은 파생식으로 한 단 어둡게 해 AA 를 넘긴다(4.85:1). */
-    color: color-mix(in srgb, var(--group-accent) 85%, black);
+       기본은 활성 배경과 같은 파생식으로 한 단 어둡게 해 AA 를 넘긴다(4.85:1) — 활성 면이 «진한» 색이라는 전제다.
+       연한 활성 면(+ 진한 글자)을 쓰는 테마에서는 그 면을 15% 어둡게 한 색이 패널 위에서 1.6:1 로 묻혔다.
+       그런 테마는 --app-sidebar-group-active-fg 를 «패널 위 강조 글자» 로 정한다. */
+    color: var(--app-sidebar-group-active-fg, color-mix(in srgb, var(--app-sidebar-active-bg, var(--u-primary-color, #1976D2)) 85%, black));
   }
   button:hover {
     color: var(--u-txt-color-hover, #1565C0);
@@ -52,7 +54,8 @@ var t = e`
   .icon {
     flex-shrink: 0;
     color: inherit;
-    font-size: 20px;
+    /* 링크와 같은 토큰 — 한 레일의 아이콘은 한 크기다(위계는 들여쓰기·캐럿·레일이 진다). */
+    font-size: var(--app-sidebar-icon-size, 20px);
   }
 
   /*

package/dist/layouts/SidebarLayout.d.ts

@@ -1,6 +1,5 @@
 import { nothing, PropertyValues } from 'lit';
 import { UProgressBar } from '@iyulab/components/dist/components/progress-bar/UProgressBar.js';
-import { RouteContext } from '@iyulab/router';
 import { StyledElement } from '../internals/StyledElement.js';
 import { SidebarLayoutConfig, SidebarState, SidebarParts } from './SidebarLayout.types';
 export declare class SidebarLayout extends StyledElement<SidebarParts> {
@@ -38,8 +37,12 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
      *   `NotSupportedError`이고, `connectedCallback`은 재연결마다 다시 돈다.
      */
     private readonly internals;
-    /** 현재 라우터 컨텍스트 */
-    context: RouteContext | null;
+    /**
+     * 현재 라우트 경로(`RouteContext.path` 형식) — 메뉴의 «현재 항목» 판정 원천.
+     * 붙을 때 지금 위치로 시작한다: 셸이 라우트 결과물로 그려지면(React 중첩 라우트의 부모) 첫 `route-begin` 은
+     * 셸이 붙기 **전에** 지나가, 주소창 진입·새로 고침 직후 현재 항목이 하나도 없었다.
+     */
+    private currentPath;
     /**
      * 라우트 컨텐츠의 실제 스크롤 컨테이너(섀도 DOM `[part="main"]`). `scrollTop`을 읽어
      * 위치를 저장하거나, 써서 복원한다 — `part="main"`은 스타일링용 CSS 훅일 뿐 JS 접근

package/dist/layouts/SidebarLayout.js

@@ -11,28 +11,29 @@ import "../components/SidebarLink.js";
 import "../components/SidebarGroup.js";
 import "../components/SidebarButton.js";
 import { styles as c } from "./SidebarLayout.styles.js";
-import { html as l, nothing as u } from "lit";
-import { customElement as d, property as f, query as p, state as m } from "lit/decorators.js";
+import { currentRoutePath as l } from "@iyulab/router";
+import { html as u, nothing as d } from "lit";
+import { customElement as f, property as p, query as m, state as h } from "lit/decorators.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";
 import "@iyulab/components/dist/components/button/UButton.js";
-import { unsafeHTML as h } from "lit/directives/unsafe-html.js";
-import { repeat as g } from "lit/directives/repeat.js";
+import { unsafeHTML as g } from "lit/directives/unsafe-html.js";
+import { repeat as _ } from "lit/directives/repeat.js";
 import "@iyulab/components/dist/components/popover/UPopover.js";
 import "@iyulab/components/dist/components/menu/UMenu.js";
 import "@iyulab/components/dist/components/menu-item/UMenuItem.js";
-import { createDevWarner as _ } from "@iyulab/components/dist/utilities/devWarning.js";
-import { isFocusCandidate as v, querySelectorDeep as y } from "@iyulab/components/dist/utilities/elements.js";
-import { OverlayManager as b } from "@iyulab/components/dist/utilities/OverlayManager.js";
-import { UProgressBar as x } from "@iyulab/components/dist/components/progress-bar/UProgressBar.js";
+import { createDevWarner as v } from "@iyulab/components/dist/utilities/devWarning.js";
+import { isFocusCandidate as y, querySelectorDeep as b } from "@iyulab/components/dist/utilities/elements.js";
+import { OverlayManager as x } from "@iyulab/components/dist/utilities/OverlayManager.js";
+import { UProgressBar as S } from "@iyulab/components/dist/components/progress-bar/UProgressBar.js";
 //#region src/layouts/SidebarLayout.ts
-var S, C = _("@iyulab/modern-app"), w = 0;
-function T(e) {
+var C, w = v("@iyulab/modern-app"), T = 0;
+function E(e) {
 	let t = e.tagName;
 	if (t === "INPUT" || t === "TEXTAREA" || t === "SELECT" || e.isContentEditable) return !0;
 	let n = e.getAttribute("role");
 	return n === "textbox" || n === "searchbox" || n === "combobox" || n === "spinbutton";
 }
-var E = /* @__PURE__ */ new Set([
+var D = /* @__PURE__ */ new Set([
 	"button",
 	"link",
 	"checkbox",
@@ -45,27 +46,27 @@ var E = /* @__PURE__ */ new Set([
 	"tab",
 	"treeitem"
 ]);
-function D(e) {
+function O(e) {
 	let t = e.tagName;
-	return t === "BUTTON" || t === "SUMMARY" || t === "A" && e.hasAttribute("href") ? !0 : E.has(e.getAttribute("role") ?? "");
+	return t === "BUTTON" || t === "SUMMARY" || t === "A" && e.hasAttribute("href") ? !0 : D.has(e.getAttribute("role") ?? "");
 }
-function O(e) {
+function k(e) {
 	let t = getComputedStyle(e);
 	return (t.overflowY === "auto" || t.overflowY === "scroll") && e.scrollHeight > e.clientHeight;
 }
-function k(e, t) {
+function A(e, t) {
 	for (let n of e) if (n instanceof HTMLElement) {
-		if (O(n)) return n === t;
+		if (k(n)) return n === t;
 		if (n === t) break;
 	}
 	return !0;
 }
-function A() {
+function j() {
 	let e = document.activeElement;
 	for (; e?.shadowRoot?.activeElement;) e = e.shadowRoot.activeElement;
 	return e;
 }
-function j(e, t) {
+function M(e, t) {
 	let n = t;
 	for (; n;) {
 		if (n === e) return !0;
@@ -73,18 +74,18 @@ function j(e, t) {
 	}
 	return !1;
 }
-var M = class extends i {
+var N = class extends i {
 	static {
-		S = this;
+		C = this;
 	}
 	constructor(...t) {
-		super(...t), this.state = "default", this.counts = {}, this.locale = "", this.hasOverlay = !1, this.openMenu = null, this.menuIds = /* @__PURE__ */ new WeakMap(), this.hasNotice = !1, this.overlayTrigger = null, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : void 0, this.context = null, this.unsizedWarnKey = `unsized:${++w}`, this.isMatchedLink = (e) => !this.context || !e ? !1 : (e = typeof e == "string" ? new URLPattern(e, window.location.origin) : e, e.test(this.context.path, window.location.origin)), this.handleToggleButtonClick = () => {
+		super(...t), this.state = "default", this.counts = {}, this.locale = "", this.hasOverlay = !1, this.openMenu = null, this.menuIds = /* @__PURE__ */ new WeakMap(), this.hasNotice = !1, this.overlayTrigger = null, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : void 0, this.currentPath = null, this.unsizedWarnKey = `unsized:${++T}`, this.isMatchedLink = (e) => this.currentPath === null || !e ? !1 : (e = typeof e == "string" ? new URLPattern(e, window.location.origin) : e, e.test(this.currentPath, window.location.origin)), this.handleToggleButtonClick = () => {
 			let t = this.screenSize ?? e.screen ?? "large";
 			t === "large" ? this.state = this.state === "default" ? "slim" : "default" : t === "medium" ? this.state = this.state === "slim" ? "modal" : "slim" : t === "small" ? this.state = this.state === "mobile" ? "mobile-open" : "mobile" : console.warn("Unknown screen size:", t);
 		}, this.handleBackdropClick = () => {
 			this.state = "slim";
 		}, this.handleRouteBegin = (e) => {
-			this.progressBarEl.setAttribute("visible", ""), this.progressBarEl.value = 0, this.state === "modal" && (this.state = "slim"), this.state === "mobile-open" && (this.state = "mobile"), this.context = e.context;
+			this.progressBarEl.setAttribute("visible", ""), this.progressBarEl.value = 0, this.state === "modal" && (this.state = "slim"), this.state === "mobile-open" && (this.state = "mobile"), this.currentPath = e.context.path;
 		}, this.handleRouteProgress = (e) => {
 			this.progressBarEl.value = e.progress;
 		}, this.handleRouteDone = (e) => {
@@ -104,7 +105,7 @@ var M = class extends i {
 		}, this.handleOverlaySlotChange = (e) => {
 			let t = o(e.target);
 			if (t && !this.hasOverlay) {
-				let e = A();
+				let e = j();
 				this.overlayTrigger = e && e !== document.body ? e : null;
 			}
 			this.hasOverlay = t;
@@ -118,9 +119,9 @@ var M = class extends i {
 		}, this._handleMainKeydown = (e) => {
 			if (e.defaultPrevented) return;
 			let t = e.composedPath()[0];
-			if (t instanceof HTMLElement && T(t) || e.key === " " && t instanceof HTMLElement && D(t)) return;
+			if (t instanceof HTMLElement && E(t) || e.key === " " && t instanceof HTMLElement && O(t)) return;
 			let n = this.shadowRoot?.querySelector(".main");
-			if (!n || !k(e.composedPath(), n)) return;
+			if (!n || !A(e.composedPath(), n)) return;
 			let r = n.clientHeight;
 			switch (e.key) {
 				case " ":
@@ -160,16 +161,16 @@ var M = class extends i {
 		return this.shadowRoot?.querySelector(".main") ?? null;
 	}
 	connectedCallback() {
-		super.connectedCallback(), window.addEventListener("route-begin", this.handleRouteBegin), window.addEventListener("route-done", this.handleRouteDone), window.addEventListener("route-progress", this.handleRouteProgress), window.addEventListener("route-error", this.handleRouteError), window.addEventListener("screen-resize", this.handleScreenResize);
+		super.connectedCallback(), this.currentPath = l(), window.addEventListener("route-begin", this.handleRouteBegin), window.addEventListener("route-done", this.handleRouteDone), window.addEventListener("route-progress", this.handleRouteProgress), window.addEventListener("route-error", this.handleRouteError), window.addEventListener("screen-resize", this.handleScreenResize);
 	}
 	disconnectedCallback() {
-		window.removeEventListener("route-begin", this.handleRouteBegin), window.removeEventListener("route-done", this.handleRouteDone), window.removeEventListener("route-progress", this.handleRouteProgress), window.removeEventListener("route-error", this.handleRouteError), window.removeEventListener("screen-resize", this.handleScreenResize), b.closeLayer(this), super.disconnectedCallback();
+		window.removeEventListener("route-begin", this.handleRouteBegin), window.removeEventListener("route-done", this.handleRouteDone), window.removeEventListener("route-progress", this.handleRouteProgress), window.removeEventListener("route-error", this.handleRouteError), window.removeEventListener("screen-resize", this.handleScreenResize), x.closeLayer(this), super.disconnectedCallback();
 	}
 	willUpdate(e) {
 		super.willUpdate(e), e.has("config") && (this.styles = this.config?.styles);
 	}
 	updated(e) {
-		super.updated(e), e.has("hasOverlay") && (this.internals?.states?.[this.hasOverlay ? "add" : "delete"]("overlay"), this.hasOverlay ? (b.openLayer(this, this.handleOverlayEscape), this.focusOverlay()) : e.get("hasOverlay") === !0 && (b.closeLayer(this), this.restoreOverlayFocus()));
+		super.updated(e), e.has("hasOverlay") && (this.internals?.states?.[this.hasOverlay ? "add" : "delete"]("overlay"), this.hasOverlay ? (x.openLayer(this, this.handleOverlayEscape), this.focusOverlay()) : e.get("hasOverlay") === !0 && (x.closeLayer(this), this.restoreOverlayFocus()));
 	}
 	firstUpdated(e) {
 		super.firstUpdated(e), this.warnIfUnsized();
@@ -178,11 +179,11 @@ var M = class extends i {
 		process.env.NODE_ENV !== "production" && requestAnimationFrame(() => {
 			if (!this.isConnected) return;
 			let e = this.getBoundingClientRect().height;
-			e >= 200 || C(this.unsizedWarnKey, `u-sidebar-layout is only ${Math.round(e)}px tall — its height: 100% found no sized ancestor, so the shell sits at its own chrome height and the route area has almost no room. Give the root element a height (e.g. #app { height: 100vh } — app.load() does this for document.body).`);
+			e >= 200 || w(this.unsizedWarnKey, `u-sidebar-layout is only ${Math.round(e)}px tall — its height: 100% found no sized ancestor, so the shell sits at its own chrome height and the route area has almost no room. Give the root element a height (e.g. #app { height: 100vh } — app.load() does this for document.body).`);
 		});
 	}
 	render() {
-		return this.config ? l`
+		return this.config ? u`
       <!-- 반복 영역 건너뛰기(WCAG 2.4.1) — 셸의 첫 Tab. 포커스될 때만 보인다. -->
       <a class="skip-link" part="skip-link" href="#" @click=${this.handleSkipLinkClick}>
         ${a(this.locale || void 0).skipToContent}
@@ -224,13 +225,13 @@ var M = class extends i {
 
         <!-- Sidebar Navigation Menu -->
         <nav class="sidebar-main" part="sidebar-main" scrollable
-          aria-label=${this.config.mainAriaLabel ?? u}>
-          ${g(t(this.config.main ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
+          aria-label=${this.config.mainAriaLabel ?? d}>
+          ${_(t(this.config.main ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
         </nav>
 
         <!-- Sidebar Footer -->
         <div class="sidebar-footer" part="sidebar-footer">
-          ${g(t(this.config.footer ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
+          ${_(t(this.config.footer ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
         </div>
       </aside>
 
@@ -241,8 +242,8 @@ var M = class extends i {
 
           <div class="main-content" part="main-content" ?inert=${this.hasOverlay}>
             <div class="notices ${this.hasNotice ? "" : "empty"}" part="notices"
-              role=${this.config.noticesAriaLabel ? "region" : u}
-              aria-label=${this.config.noticesAriaLabel ?? u}>
+              role=${this.config.noticesAriaLabel ? "region" : d}
+              aria-label=${this.config.noticesAriaLabel ?? d}>
               <slot name="notice" @slotchange=${this.handleNoticeSlotChange}></slot>
             </div>
             <slot></slot>
@@ -263,13 +264,13 @@ var M = class extends i {
       <div class="backdrop" ?hidden="${this.state !== "modal"}"
         @click="${this.handleBackdropClick}"
       ></div>
-    ` : u;
+    ` : d;
 	}
 	renderMenu(e) {
 		let t = this.menuIds.get(e);
-		t || (t = `u-sidebar-menu-${++S.menuSeq}`, this.menuIds.set(e, t));
+		t || (t = `u-sidebar-menu-${++C.menuSeq}`, this.menuIds.set(e, t));
 		let n = t, r = this.state === "mobile" || this.state === "mobile-open" ? "bottom-start" : "right-start";
-		return l`
+		return u`
       <u-sidebar-button
         id=${n}
         haspopup="menu"
@@ -286,9 +287,9 @@ var M = class extends i {
         @hide=${(e) => this.handleMenuHide(e, n)}
         @pick=${(t) => this.handleMenuPick(t, e)}>
         <u-menu>
-          ${g(e.items, (e, t) => t, (e, t) => l`
+          ${_(e.items, (e, t) => t, (e, t) => u`
             <u-menu-item value=${String(t)} ?disabled=${e.disabled === !0}>
-              ${e.icon ? l`<u-icon slot="prefix" .lib=${e.lib} .name=${e.icon}></u-icon>` : u}
+              ${e.icon ? u`<u-icon slot="prefix" .lib=${e.lib} .name=${e.icon}></u-icon>` : d}
               ${e.label}
             </u-menu-item>
           `)}
@@ -302,16 +303,16 @@ var M = class extends i {
 	}
 	handleMenuHide(e, t) {
 		this.openMenu === t && (this.openMenu = null);
-		let n = e.currentTarget, r = A();
-		r && j(n, r) && this.shadowRoot?.querySelector(`#${t}`)?.focus();
+		let n = e.currentTarget, r = j();
+		r && M(n, r) && this.shadowRoot?.querySelector(`#${t}`)?.focus();
 	}
 	renderItem(e) {
-		if (!e) return u;
+		if (!e) return d;
 		if (e.type === "html") {
 			let t = e.render(this.state);
-			return typeof t == "string" ? h(t) : l`${t}`;
+			return typeof t == "string" ? g(t) : u`${t}`;
 		}
-		if (e.type === "button") return l`
+		if (e.type === "button") return u`
         <u-sidebar-button
           ?compact=${this.state === "slim"}
           .icon="${e.icon}"
@@ -324,7 +325,7 @@ var M = class extends i {
 		if (e.type === "menu") return this.renderMenu(e);
 		if (e.type === "link") {
 			let t = this.isMatchedLink(e.pattern || e.href);
-			return l`
+			return u`
         <u-sidebar-link
           ?compact=${this.state === "slim"}
           ?selected=${t}
@@ -340,18 +341,18 @@ var M = class extends i {
         ></u-sidebar-link>
       `;
 		}
-		if (e.type === "section") return l`
+		if (e.type === "section") return u`
         <u-sidebar-section
           ?compact=${this.state === "slim"}
           .mainTitle="${e.title}"
           .subTitle="${e.subTitle}"
           .styles="${e.styles}">
-          ${g(e.items, (e, t) => t, (e) => this.renderItem(e))}
+          ${_(e.items, (e, t) => t, (e) => this.renderItem(e))}
         </u-sidebar-section>
       `;
 		if (e.type === "group") {
 			let t = e.items.some((e) => this.isMatchedLink(e.pattern || e.href));
-			return l`
+			return u`
         <u-sidebar-group
           ?compact=${this.state === "slim"}
           ?selected=${t}
@@ -360,11 +361,11 @@ var M = class extends i {
           .lib="${e.lib}"
           .label="${e.label}"
           .styles="${e.styles}">
-          ${g(e.items, (e, t) => t, (e) => this.renderItem(e))}
+          ${_(e.items, (e, t) => t, (e) => this.renderItem(e))}
         </u-sidebar-group>
       `;
 		}
-		return u;
+		return d;
 	}
 	static {
 		this.DEFAULT_ICONS = {
@@ -376,30 +377,30 @@ var M = class extends i {
 		};
 	}
 	icon(e) {
-		return this.config?.icons?.[e] ?? S.DEFAULT_ICONS[e];
+		return this.config?.icons?.[e] ?? C.DEFAULT_ICONS[e];
 	}
 	renderLogo() {
 		let e = this.config?.logo, t = this.config?.title ?? "Home";
-		if (!e || typeof e == "string") return e ? l`
+		if (!e || typeof e == "string") return e ? u`
         <u-link class="logo-link" aria-label=${t}>
           <u-icon class="logo"
             .name="${e}"
             .fallback=${s}
           ></u-icon>
         </u-link>
-      ` : u;
+      ` : d;
 		if (typeof e == "function") {
 			let n = e(this.state);
-			return l`
+			return u`
         <u-link class="logo-link" aria-label=${t}>
           <span class="logo">
-            ${typeof n == "string" ? h(n) : n}
+            ${typeof n == "string" ? g(n) : n}
           </span>
         </u-link>
       `;
 		}
-		return l`
-      <u-link class="logo-link" .href=${e.href} aria-label=${e.alt ? u : t}>
+		return u`
+      <u-link class="logo-link" .href=${e.href} aria-label=${e.alt ? d : t}>
         <img class="logo"
           src="${e.src}"
           alt="${e.alt ?? ""}"
@@ -413,14 +414,14 @@ var M = class extends i {
 	async focusRoute(e) {
 		let t = this.routeContent();
 		if (await Promise.all(t.map((e) => e.updateComplete)), this.hasOverlay || !e.isConnected) return;
-		let n = A();
-		n && t.some((e) => j(e, n)) || this.focusContentStart(t, e);
+		let n = j();
+		n && t.some((e) => M(e, n)) || this.focusContentStart(t, e);
 	}
 	focusContentStart(e, t) {
-		let n = y(e, "[autofocus]", v);
+		let n = b(e, "[autofocus]", y);
 		n?.focus();
-		let r = A();
-		n && r && j(n, r) || t.focus({ preventScroll: !0 });
+		let r = j();
+		n && r && M(n, r) || t.focus({ preventScroll: !0 });
 	}
 	overlayPanels() {
 		return (this.shadowRoot?.querySelector("slot[name=\"overlay\"]"))?.assignedElements({ flatten: !0 }) ?? [];
@@ -428,19 +429,19 @@ var M = class extends i {
 	async focusOverlay() {
 		let e = this.overlayPanels();
 		if (await Promise.all(e.map((e) => e.updateComplete)), !this.hasOverlay) return;
-		let t = A();
-		t && e.some((e) => j(e, t)) || (y(e, "[autofocus]", v) ?? y(e, "input, select, textarea, u-input, u-textarea, u-select, u-checkbox, u-radio, u-switch, u-slider", v) ?? this.shadowRoot?.querySelector(".overlay-close"))?.focus();
+		let t = j();
+		t && e.some((e) => M(e, t)) || (b(e, "[autofocus]", y) ?? b(e, "input, select, textarea, u-input, u-textarea, u-select, u-checkbox, u-radio, u-switch, u-slider", y) ?? this.shadowRoot?.querySelector(".overlay-close"))?.focus();
 	}
 	restoreOverlayFocus() {
 		let e = this.overlayTrigger;
 		this.overlayTrigger = null;
-		let t = A();
+		let t = j();
 		t && t !== document.body || (e?.isConnected ? e.focus() : this.mainElement?.focus({ preventScroll: !0 }));
 	}
 };
-r([f({
+r([p({
 	type: String,
 	reflect: !0
-}), n("design:type", Object)], M.prototype, "state", void 0), r([f({ type: Object }), n("design:type", Object)], M.prototype, "config", void 0), r([f({ type: Object }), n("design:type", typeof Record > "u" ? Object : Record)], M.prototype, "counts", void 0), r([f({ type: String }), n("design:type", Object)], M.prototype, "locale", void 0), r([p("u-progress-bar"), n("design:type", x === void 0 ? Object : x)], M.prototype, "progressBarEl", void 0), r([m(), n("design:type", Object)], M.prototype, "hasOverlay", void 0), r([m(), n("design:type", Object)], M.prototype, "openMenu", void 0), r([m(), n("design:type", Object)], M.prototype, "hasNotice", void 0), r([m(), n("design:type", Object)], M.prototype, "context", void 0), M = S = r([d("u-sidebar-layout")], M);
+}), n("design:type", Object)], N.prototype, "state", void 0), r([p({ type: Object }), n("design:type", Object)], N.prototype, "config", void 0), r([p({ type: Object }), n("design:type", typeof Record > "u" ? Object : Record)], N.prototype, "counts", void 0), r([p({ type: String }), n("design:type", Object)], N.prototype, "locale", void 0), r([m("u-progress-bar"), n("design:type", S === void 0 ? Object : S)], N.prototype, "progressBarEl", void 0), r([h(), n("design:type", Object)], N.prototype, "hasOverlay", void 0), r([h(), n("design:type", Object)], N.prototype, "openMenu", void 0), r([h(), n("design:type", Object)], N.prototype, "hasNotice", void 0), r([h(), n("design:type", Object)], N.prototype, "currentPath", void 0), N = C = r([f("u-sidebar-layout")], N);
 //#endregion
-export { M as SidebarLayout };
+export { N as SidebarLayout };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.38.0",
+  "version": "0.40.0",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -60,12 +60,12 @@
     "test:react-types": "tsc -p tsconfig.react-smoke.json"
   },
   "dependencies": {
-    "@iyulab/router": "^0.19.1",
+    "@iyulab/router": "^0.20.0",
     "i18next": "^26.3.6",
     "lit": "^3.3.3"
   },
   "peerDependencies": {
-    "@iyulab/components": ">=2.0.0",
+    "@iyulab/components": ">=2.8.0",
     "@lit/react": "^1.0.8",
     "react": "^18.0.0 || ^19.0.0"
   },
@@ -78,7 +78,7 @@
     }
   },
   "devDependencies": {
-    "@iyulab/components": ">=2.0.0",
+    "@iyulab/components": ">=2.8.0",
     "@lit/react": "^1.0.8",
     "@types/node": "^26.1.1",
     "@types/react": "^19.2.14",