@iyulab/modern-app 0.56.2 → 0.58.0

package/dist/layouts/SidebarLayout.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { slotHasContent as r } from "../internals/slotted.js";
 import { getLocaleStrings as i } from "../internals/locale.js";
@@ -12,28 +12,29 @@ import "../components/SidebarGroup.js";
 import "../components/SidebarButton.js";
 import { styles as c } from "./SidebarLayout.styles.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 { Theme as u } from "@iyulab/components/dist/utilities/Theme.js";
+import { html as d, nothing as f } from "lit";
+import { customElement as p, property as m, query as h, state as g } from "lit/decorators.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";
 import "@iyulab/components/dist/components/button/UButton.js";
-import { unsafeHTML as g } from "lit/directives/unsafe-html.js";
-import { repeat as _ } from "lit/directives/repeat.js";
+import { unsafeHTML as _ } from "lit/directives/unsafe-html.js";
+import { repeat as v } 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 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 { createDevWarner as y } from "@iyulab/components/dist/utilities/devWarning.js";
+import { isFocusCandidate as b, querySelectorDeep as x } from "@iyulab/components/dist/utilities/elements.js";
+import { OverlayManager as S } from "@iyulab/components/dist/utilities/OverlayManager.js";
 import "@iyulab/components/dist/components/progress-bar/UProgressBar.js";
-//#region src/layouts/SidebarLayout.ts
-var S, C = v("@iyulab/modern-app"), w = 0;
-function T(e) {
+// src/layouts/SidebarLayout.ts
+var C, w = y("@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",
@@ -46,27 +47,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;
@@ -74,12 +75,12 @@ function j(e, t) {
 	}
 	return !1;
 }
-var M = class extends n {
+var N = class extends n {
 	static {
-		S = this;
+		C = this;
 	}
 	constructor(...e) {
-		super(...e), this.state = "default", this.counts = {}, this.locale = "", this.hasOverlay = !1, this.openMenu = null, this.menuIds = /* @__PURE__ */ new WeakMap(), this.hasNotice = !1, this.routeLoading = !1, this.mainTabStop = !1, this.overlayTrigger = null, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : void 0, this.currentPath = null, this.unsizedWarnKey = `unsized:${++w}`, 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 = () => {
+		super(...e), this.state = "default", this.immersive = !1, this.routeTheme = !1, this.counts = {}, this.locale = "", this.hasOverlay = !1, this.openMenu = null, this.menuIds = /* @__PURE__ */ new WeakMap(), this.hasNotice = !1, this.routeLoading = !1, this.mainTabStop = !1, this.mobileHeaderBlockSize = 0, 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 e = this.screenSize ?? a.screen ?? "large";
 			e === "large" ? this.state = this.state === "default" ? "slim" : "default" : e === "medium" ? this.state = this.state === "slim" ? "modal" : "slim" : e === "small" ? this.state = this.state === "mobile" ? "mobile-open" : "mobile" : console.warn("[@iyulab/modern-app] unknown screen size:", e);
 		}, this.handleBackdropClick = () => {
@@ -89,17 +90,19 @@ var M = class extends n {
 		}, this.handleRouteProgress = (e) => {
 			this.progressBarEl.value = e.progress;
 		}, this.handleRouteDone = (e) => {
-			this.progressBarEl.value = 100, setTimeout(() => {
+			this.immersive = e.context.metadata?.shell === "hidden";
+			let t = e.context.metadata?.theme, n = t === "dark" || t === "light" ? t : null;
+			(n || this.routeTheme) && u.override(n), this.routeTheme = n !== null, this.progressBarEl.value = 100, setTimeout(() => {
 				this.routeLoading = !1;
 			}, 300);
-			let t = this.shadowRoot?.querySelector(".main");
-			t && (this.config?.scrollBehavior?.(e.context, t), this.focusRoute(t), requestAnimationFrame(this.syncMainTabStop));
+			let r = this.shadowRoot?.querySelector(".main");
+			r && (this.config?.scrollBehavior?.(e.context, r), this.focusRoute(r), requestAnimationFrame(this.syncMainTabStop));
 		}, this.observedContent = [], this.handleMainSlotChange = () => {
 			this.observeContentSize(), this.syncMainTabStop();
 		}, this.syncMainTabStop = () => {
 			let e = this.shadowRoot?.querySelector(".main");
 			if (!e) return;
-			let t = e.scrollHeight > e.clientHeight + 1 || e.scrollWidth > e.clientWidth + 1, n = t && !!b([...this.noticeContent(), ...this.routeContent()], "*", (e) => y(e) && e.tabIndex >= 0);
+			let t = e.scrollHeight > e.clientHeight + 1 || e.scrollWidth > e.clientWidth + 1, n = t && !!x([...this.noticeContent(), ...this.routeContent()], "*", (e) => b(e) && e.tabIndex >= 0);
 			this.mainTabStop = t && !n;
 		}, this.handleSkipLinkClick = (e) => {
 			e.preventDefault();
@@ -112,7 +115,7 @@ var M = class extends n {
 		}, this.handleOverlaySlotChange = (e) => {
 			let t = r(e.target);
 			if (t && !this.hasOverlay) {
-				let e = A();
+				let e = j();
 				this.overlayTrigger = e && e !== document.body ? e : null;
 			}
 			this.hasOverlay = t;
@@ -126,9 +129,9 @@ var M = class extends n {
 		}, 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 " ":
@@ -171,13 +174,13 @@ var M = class extends n {
 		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), x.closeLayer(this), this.mainSizeObserver?.disconnect(), this.mainSizeObserver = void 0, super.disconnectedCallback();
+		this.routeTheme &&= (u.override(null), !1), 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), S.closeLayer(this), this.mainSizeObserver?.disconnect(), this.mainSizeObserver = void 0, this.mobileHeaderObserver?.disconnect(), this.mobileHeaderObserver = void 0, super.disconnectedCallback();
 	}
 	willUpdate(e) {
 		super.willUpdate(e), e.has("config") && (this.styles = this.config?.styles);
 	}
 	updated(e) {
-		super.updated(e), this.observeMainSize(), 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()));
+		super.updated(e), this.observeMainSize(), this.observeMobileHeader(), e.has("hasOverlay") && (this.internals?.states?.[this.hasOverlay ? "add" : "delete"]("overlay"), this.hasOverlay ? (S.openLayer(this, this.handleOverlayEscape), this.focusOverlay()) : e.get("hasOverlay") === !0 && (S.closeLayer(this), this.restoreOverlayFocus()));
 	}
 	firstUpdated(e) {
 		super.firstUpdated(e), this.warnIfUnsized();
@@ -186,11 +189,11 @@ var M = class extends n {
 		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 ? u`
+		return this.config ? d`
       <!-- 반복 영역 건너뛰기(WCAG 2.4.1) — 셸의 첫 Tab. 포커스될 때만 보인다. -->
       <a class="skip-link" part="skip-link" href="#" @click=${this.handleSkipLinkClick}>
         ${i(this.locale || void 0).skipToContent}
@@ -213,12 +216,14 @@ var M = class extends n {
       </div>
 
       <!-- Sidebar -->
-      <aside class="sidebar" part="sidebar" state="${this.state}">
+      <aside class="sidebar" part="sidebar" state="${this.state}"
+        style="--_mobile-header-block-size: ${this.mobileHeaderBlockSize}px">
         <!-- Sidebar Header -->
         <div class="sidebar-header" part="sidebar-header">
           ${this.renderLogo()}
           <span class="title" ?hidden=${this.state === "slim"}>
             ${this.config.title}
+            ${this.config.subtitle ? d`<span class="subtitle" part="subtitle">${this.config.subtitle}</span>` : f}
           </span>
           <u-button class="toggler" appearance="plain"
             aria-label=${i(this.locale || void 0).toggleSidebar}
@@ -232,13 +237,13 @@ var M = class extends n {
 
         <!-- Sidebar Navigation Menu -->
         <nav class="sidebar-main" part="sidebar-main" scrollable
-          aria-label=${this.config.mainAriaLabel ?? d}>
-          ${_(o(this.config.main ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
+          aria-label=${this.config.mainAriaLabel ?? f}>
+          ${v(o(this.config.main ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
         </nav>
 
         <!-- Sidebar Footer -->
         <div class="sidebar-footer" part="sidebar-footer">
-          ${_(o(this.config.footer ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
+          ${v(o(this.config.footer ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
         </div>
       </aside>
 
@@ -246,13 +251,13 @@ var M = class extends n {
       <div class="main-region">
         <main class="main" part="main" scrollable tabindex=${this.mainTabStop ? "0" : "-1"} @keydown=${this._handleMainKeydown}>
           <u-progress-bar part="progress" class=${this.routeLoading ? "loading" : ""}
-            aria-hidden=${this.routeLoading ? d : "true"}
+            aria-hidden=${this.routeLoading ? f : "true"}
             aria-label=${i(this.locale || void 0).pageLoading}></u-progress-bar>
 
           <div class="main-content" part="main-content" ?inert=${this.hasOverlay}>
             <div class="notices ${this.hasNotice ? "" : "empty"}" part="notices"
-              role=${this.config.noticesAriaLabel ? "region" : d}
-              aria-label=${this.config.noticesAriaLabel ?? d}>
+              role=${this.config.noticesAriaLabel ? "region" : f}
+              aria-label=${this.config.noticesAriaLabel ?? f}>
               <slot name="notice" @slotchange=${this.handleNoticeSlotChange}></slot>
             </div>
             <slot @slotchange=${this.handleMainSlotChange}></slot>
@@ -273,13 +278,13 @@ var M = class extends n {
       <div class="backdrop" ?hidden="${this.state !== "modal"}"
         @click="${this.handleBackdropClick}"
       ></div>
-    ` : d;
+    ` : f;
 	}
 	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 u`
+		return d`
       <u-sidebar-button
         id=${n}
         haspopup="menu"
@@ -298,9 +303,9 @@ var M = class extends n {
         @hide=${(e) => this.handleMenuHide(e, n)}
         @pick=${(t) => this.handleMenuPick(t, e)}>
         <u-menu>
-          ${_(e.items, (e, t) => t, (e, t) => u`
+          ${v(e.items, (e, t) => t, (e, t) => d`
             <u-menu-item value=${String(t)} ?disabled=${e.disabled === !0}>
-              ${e.icon ? u`<u-icon slot="prefix" .lib=${e.lib} .name=${e.icon}></u-icon>` : d}
+              ${e.icon ? d`<u-icon slot="prefix" .lib=${e.lib} .name=${e.icon}></u-icon>` : f}
               ${e.label}
             </u-menu-item>
           `)}
@@ -314,16 +319,16 @@ var M = class extends n {
 	}
 	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 d;
+		if (!e) return f;
 		if (e.type === "html") {
 			let t = e.render(this.state);
-			return typeof t == "string" ? g(t) : u`${t}`;
+			return typeof t == "string" ? _(t) : d`${t}`;
 		}
-		if (e.type === "button") return u`
+		if (e.type === "button") return d`
         <u-sidebar-button
           ?compact=${this.state === "slim"}
           .icon="${e.icon}"
@@ -337,7 +342,7 @@ var M = class extends n {
 		if (e.type === "menu") return this.renderMenu(e);
 		if (e.type === "link") {
 			let t = this.isMatchedLink(e.pattern || e.href);
-			return u`
+			return d`
         <u-sidebar-link
           ?compact=${this.state === "slim"}
           ?selected=${t}
@@ -353,18 +358,18 @@ var M = class extends n {
         ></u-sidebar-link>
       `;
 		}
-		if (e.type === "section") return u`
+		if (e.type === "section") return d`
         <u-sidebar-section
           ?compact=${this.state === "slim"}
           .mainTitle="${e.title}"
           .subTitle="${e.subTitle}"
           .styles="${e.styles}">
-          ${_(e.items, (e, t) => t, (e) => this.renderItem(e))}
+          ${v(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 u`
+			return d`
         <u-sidebar-group
           ?compact=${this.state === "slim"}
           ?selected=${t}
@@ -373,11 +378,11 @@ var M = class extends n {
           .lib="${e.lib}"
           .label="${e.label}"
           .styles="${e.styles}">
-          ${_(e.items, (e, t) => t, (e) => this.renderItem(e))}
+          ${v(e.items, (e, t) => t, (e) => this.renderItem(e))}
         </u-sidebar-group>
       `;
 		}
-		return d;
+		return f;
 	}
 	handleButtonItemClick(e, t) {
 		let n = e.onClick?.(t);
@@ -393,31 +398,40 @@ var M = class extends n {
 		};
 	}
 	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 ? u`
+		if (!e || typeof e == "string") return e ? d`
         <u-link class="logo-link" aria-label=${t}>
           <u-icon class="logo"
             .name="${e}"
             .fallback=${s}
           ></u-icon>
         </u-link>
-      ` : d;
+      ` : f;
+		if (typeof e == "object" && "icon" in e) return d`
+        <u-link class="logo-link" aria-label=${t}>
+          <u-icon class="logo"
+            .lib=${e.lib}
+            .name="${e.icon}"
+            .fallback=${s}
+          ></u-icon>
+        </u-link>
+      `;
 		if (typeof e == "function") {
 			let n = e(this.state);
-			return u`
+			return d`
         <u-link class="logo-link" aria-label=${t}>
           <span class="logo">
             <!-- html-sink: documented HTML contract — a logo function returns markup the developer writes -->
-            ${typeof n == "string" ? g(n) : n}
+            ${typeof n == "string" ? _(n) : n}
           </span>
         </u-link>
       `;
 		}
-		return u`
-      <u-link class="logo-link" .href=${e.href} aria-label=${e.alt ? d : t}>
+		return d`
+      <u-link class="logo-link" .href=${e.href} aria-label=${e.alt ? f : t}>
         <img class="logo"
           src="${e.src}"
           alt="${e.alt ?? ""}"
@@ -430,6 +444,14 @@ var M = class extends n {
 		let e = this.shadowRoot?.querySelector(".main");
 		e && (this.mainSizeObserver = new ResizeObserver(() => this.syncMainTabStop()), this.mainSizeObserver.observe(e), this.observeContentSize());
 	}
+	observeMobileHeader() {
+		if (this.mobileHeaderObserver || typeof ResizeObserver > "u") return;
+		let e = this.shadowRoot?.querySelector(".mobile-header");
+		e && (this.mobileHeaderObserver = new ResizeObserver(([t]) => {
+			let n = t?.borderBoxSize?.[0]?.blockSize ?? e.getBoundingClientRect().height;
+			n !== this.mobileHeaderBlockSize && (this.mobileHeaderBlockSize = n);
+		}), this.mobileHeaderObserver.observe(e));
+	}
 	observeContentSize() {
 		let e = this.mainSizeObserver;
 		if (e) {
@@ -447,14 +469,14 @@ var M = class extends n {
 	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 = b(e, "[autofocus]", y);
+		let n = x(e, "[autofocus]", b);
 		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 }) ?? [];
@@ -462,19 +484,21 @@ var M = class extends n {
 	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)) || (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();
+		let t = j();
+		t && e.some((e) => M(e, t)) || (x(e, "[autofocus]", b) ?? x(e, "input, select, textarea, u-input, u-textarea, u-select, u-checkbox, u-radio, u-switch, u-slider", b) ?? 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 }));
 	}
 };
-t([p({
+t([m({
 	type: String,
 	reflect: !0
-}), e("design:type", Object)], M.prototype, "state", void 0), t([p({ type: Object }), e("design:type", Object)], M.prototype, "config", void 0), t([p({ type: Object }), e("design:type", typeof Record > "u" ? Object : Record)], M.prototype, "counts", void 0), t([p({ type: String }), e("design:type", Object)], M.prototype, "locale", void 0), t([m("u-progress-bar"), e("design:type", Object)], M.prototype, "progressBarEl", void 0), t([h(), e("design:type", Object)], M.prototype, "hasOverlay", void 0), t([h(), e("design:type", Object)], M.prototype, "openMenu", void 0), t([h(), e("design:type", Object)], M.prototype, "hasNotice", void 0), t([h(), e("design:type", Object)], M.prototype, "routeLoading", void 0), t([h(), e("design:type", Object)], M.prototype, "mainTabStop", void 0), t([h(), e("design:type", Object)], M.prototype, "currentPath", void 0), M = S = t([f("u-sidebar-layout")], M);
-//#endregion
-export { M as SidebarLayout };
+}), e("design:type", Object)], N.prototype, "state", void 0), t([m({ type: Object }), e("design:type", Object)], N.prototype, "config", void 0), t([m({
+	type: Boolean,
+	reflect: !0
+}), e("design:type", Object)], N.prototype, "immersive", void 0), t([m({ type: Object }), e("design:type", typeof Record > "u" ? Object : Record)], N.prototype, "counts", void 0), t([m({ type: String }), e("design:type", Object)], N.prototype, "locale", void 0), t([h("u-progress-bar"), e("design:type", Object)], N.prototype, "progressBarEl", void 0), t([g(), e("design:type", Object)], N.prototype, "hasOverlay", void 0), t([g(), e("design:type", Object)], N.prototype, "openMenu", void 0), t([g(), e("design:type", Object)], N.prototype, "hasNotice", void 0), t([g(), e("design:type", Object)], N.prototype, "routeLoading", void 0), t([g(), e("design:type", Object)], N.prototype, "mainTabStop", void 0), t([g(), e("design:type", Object)], N.prototype, "mobileHeaderBlockSize", void 0), t([g(), e("design:type", Object)], N.prototype, "currentPath", void 0), N = C = t([p("u-sidebar-layout")], N);
+export { N as SidebarLayout };

package/dist/layouts/SidebarLayout.styles.js

@@ -1,5 +1,5 @@
 import { css as e } from "lit";
-//#region src/layouts/SidebarLayout.styles.ts
+// src/layouts/SidebarLayout.styles.ts
 var t = e`
   :host {
     position: relative;
@@ -19,6 +19,16 @@ var t = e`
   :host([state="mobile-open"]) {
     flex-direction: column;
   }
+  
+  :host([immersive]) .sidebar,
+  :host([immersive]) .mobile-header,
+  :host([immersive]) .backdrop,
+  :host([immersive]) .skip-link {
+    display: none;
+  }
+  :host([immersive]) .main {
+    padding: 0;
+  }
 
   .logo {
     color: var(--u-txt-color, #212121);
@@ -62,6 +72,17 @@ var t = e`
     overflow: hidden;
     text-overflow: ellipsis;
   }
+  
+  .title .subtitle {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--u-txt-color-weak, #616161);
+    font-size: var(--u-text-caption-size, 12px);
+    line-height: var(--u-text-caption-leading, 1.5);
+    font-weight: var(--u-text-caption-weight, 400);
+    letter-spacing: var(--u-text-caption-tracking, 0);
+  }
 
   
 
@@ -74,11 +95,14 @@ var t = e`
 
 
 
+  
   .toggler {
     color: inherit;
-    font-size: 20px;
     padding: 0px;
   }
+  .toggler u-icon {
+    font-size: 20px;
+  }
   .toggler:hover {
     color: var(--u-txt-color-hover, #1565C0);
   }
@@ -154,21 +178,32 @@ var t = e`
     bottom: 0;
     left: 0;
   }
+  
+
+  .sidebar[state="mobile"] .sidebar-header,
+  .sidebar[state="mobile-open"] .sidebar-header {
+    display: none;
+  }
   .sidebar[state="mobile"] {
     position: absolute;
-    top: 0;
+    top: var(--_mobile-header-block-size, 0px);
     bottom: 0;
     left: 0;
     right: 0;
     transform: translateY(-100%);
   }
+  
+
+
+
   .sidebar[state="mobile-open"] {
     position: absolute;
-    top: 0;
+    top: var(--_mobile-header-block-size, 0px);
     bottom: 0;
     left: 0;
     right: 0;
     transform: translateY(0);
+    overflow: hidden;
   }
 
   
@@ -180,7 +215,7 @@ var t = e`
     align-items: center;
     justify-content: space-between;
     gap: 12px;
-    padding: 16px;
+    padding: 12px 16px;
     background: var(--app-header-bg, var(--u-bg-color-raised, #FAFAFA));
     color: var(--app-header-fg, var(--u-txt-color, #212121));
     border-bottom: 1px solid var(--u-border-color-weak, #EEEEEE);
@@ -194,7 +229,7 @@ var t = e`
     align-items: center;
     justify-content: space-between;
     gap: 12px;
-    padding: 16px;
+    padding: 12px 16px;
     border-bottom: 1px solid var(--u-border-color-weak, #EEEEEE);
     user-select: none;
   }
@@ -439,5 +474,4 @@ var t = e`
     }
   }
 `;
-//#endregion
 export { t as styles };

package/dist/layouts/SidebarLayout.types.d.ts

@@ -57,8 +57,17 @@ export interface SidebarLogoImage {
 }
 /** 커스텀 로고 렌더 함수. `SidebarHtmlConfig.render`와 동일한 반환 타입 */
 export type SidebarLogoRenderer = (state: SidebarState) => TemplateResult<1> | HTMLElement | string;
-/** 최상단 앱 로고 설정: 아이콘명(문자열, 기존 동작) | 이미지 | 커스텀 렌더 함수 */
-export type SidebarLogoConfig = string | SidebarLogoImage | SidebarLogoRenderer;
+/**
+ * 등록된 아이콘 라이브러리의 아이콘 로고 — 메뉴 항목과 같은 `icon` + `lib` 짝.
+ * 문자열 로고는 라이브러리를 고르지 못해 `u-icon` 의 기본 경로(`iconBasepath`)에서만 찾는다.
+ */
+export interface SidebarLogoIcon {
+    icon: string;
+    /** `icon` 을 찾을 등록 라이브러리(`IconRegistry`). 없으면 문자열 로고와 같다. */
+    lib?: string;
+}
+/** 최상단 앱 로고 설정: 아이콘명(문자열, 기존 동작) | 라이브러리 아이콘 | 이미지 | 커스텀 렌더 함수 */
+export type SidebarLogoConfig = string | SidebarLogoIcon | SidebarLogoImage | SidebarLogoRenderer;
 /** One entry of a `type: 'menu'` popup. */
 export interface SidebarMenuItemConfig extends SidebarPermissionGuard {
     label: string | DirectiveResult;
@@ -101,6 +110,11 @@ export interface SidebarLayoutConfig {
     logo?: SidebarLogoConfig;
     /** 앱 제목 */
     title?: string;
+    /**
+     * 제목 아래 한 줄 — 앱이 무엇인지(«여신 서류 보관 시스템»). 펼친 사이드바의 머리에만 보인다: 접힌 사이드바는 제목과 함께 숨고,
+     * 모바일 머리 줄은 한 줄을 지킨다.
+     */
+    subtitle?: string;
     /** 상단/메인 메뉴 아이템 항목들 */
     main?: SidebarItem[];
     /** 하단(footer)에 고정해서 렌더할 항목들 */

package/dist/layouts/filterSidebarItems.js

@@ -1,4 +1,4 @@
-//#region src/layouts/filterSidebarItems.ts
+// src/layouts/filterSidebarItems.ts
 function e(e, t) {
 	return !(e.requirePermission && !t(e.requirePermission) || e.requireAnyPermission && e.requireAnyPermission.length > 0 && !e.requireAnyPermission.some((e) => t(e)));
 }
@@ -24,5 +24,4 @@ function t(n, r) {
 	}
 	return a;
 }
-//#endregion
 export { t as filterSidebarItems };

package/dist/react.js

@@ -4,7 +4,7 @@ import { Wizard as n } from "./components/Wizard.js";
 import { SidebarLayout as r } from "./layouts/SidebarLayout.js";
 import i from "react";
 import { createComponent as a } from "@lit/react";
-//#region src/react.ts
+// src/react.ts
 function o(e) {
 	let n = i.useRef(e);
 	n.current = e;
@@ -26,5 +26,4 @@ var s = a({
 	elementClass: n,
 	events: { onStepChange: "step-change" }
 });
-//#endregion
 export { e as ScreenObserver, s as SidebarLayout, c as Wizard, o as useUnsavedChanges };

package/dist/translate.js

@@ -27,5 +27,4 @@ var r = n(class extends t {
 		this.subscribed && (this.subscribed = !1, e.off("languageChanged", this.refresh), e.off("initialized", this.refresh), e.store?.off("added", this.refresh));
 	}
 });
-//#endregion
 export { r as translate };

package/dist/unsaved.js

@@ -1,5 +1,5 @@
 import { getLocaleStrings as e } from "./internals/locale.js";
-//#region src/unsaved.ts
+// src/unsaved.ts
 var t = /* @__PURE__ */ new Set(), n = (e) => {
 	i() && (e.preventDefault(), e.returnValue = "");
 };
@@ -56,5 +56,4 @@ var l = class {
 		this.release?.(), this.release = void 0;
 	}
 };
-//#endregion
 export { l as UnsavedChangesController, a as confirmDiscardChanges, i as hasUnsavedChanges, r as trackUnsavedChanges, c as unsavedChangesGuard };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.56.2",
+  "version": "0.58.0",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -64,7 +64,7 @@
     "lit": "^3.3.3"
   },
   "peerDependencies": {
-    "@iyulab/components": ">=2.8.0",
+    "@iyulab/components": ">=2.32.0",
     "@iyulab/router": "^0.24.0",
     "@lit/react": "^1.0.8",
     "react": "^18.0.0 || ^19.0.0"
@@ -78,7 +78,7 @@
     }
   },
   "devDependencies": {
-    "@iyulab/components": "^2.20.3",
+    "@iyulab/components": "^2.32.0",
     "@iyulab/router": "^0.24.0",
     "@lit/react": "^1.0.8",
     "@types/node": "^26.1.1",