@iyulab/modern-app 0.27.0 → 0.28.1

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # Changelog
 
+## [0.28.1] - 2026-09-24
+
+### Fixed
+
+- **No logo, no logo element.** With no `logo` configured, the shell rendered an empty `u-icon` as
+  a placeholder. Even at zero width it took one gap in the header, indenting the title; with
+  `@iyulab/components` 1.46.0, where icons reserve their box before loading, it became an
+  invisible 24px box. It is gone — update both together if you do not configure a logo.
+- `u-sidebar-link` now defines the `<u-link>` it renders instead of relying on the shell having
+  loaded the router first.
+
+## [0.28.0] - 2026-09-24
+
+### Added
+
+- **`slot="notice"` on `u-sidebar-layout` — a place for app-level notices.** A connection-lost
+  banner or a new-version notice belongs to the shell, not to one screen; a screen that places its
+  own fixed banner collides with the next notice someone adds. Slotted notices stack at the top of
+  the route content, in flow (they scroll away with the content instead of holding a strip of a
+  small screen, and never cover it), each at the full content width. The stack takes no space
+  while empty and goes inert with the route content while the overlay is open. New `notices` part.
+
+### Changed
+
+- **The shell now owns the overlay's keyboard contract.** It already made route content `inert`
+  while the overlay is open — and the control that opened the overlay lives in that content, so
+  its focus fell to `<body>` the moment the panel appeared. Every consumer re-implemented the same
+  three steps; the shell now does them:
+  - **focus moves into the panel** when it opens — an `[autofocus]` element, else the first input
+    control, else the close button. If you already moved focus into the panel, it stays there.
+  - **focus returns to the opening control** when it closes, if focus fell to `<body>`; if you
+    moved it elsewhere on purpose, that stands. With no opening control, it goes to `part="main"`.
+  - **Escape inside the panel fires `overlay-close`**, the same event as the close button — you
+    still empty the slot. An Escape already consumed inside the panel (an open list or popover)
+    closes only that layer.
+  Existing consumer code that does any of this itself keeps working: the shell steps aside when
+  focus is already where it would put it, and emptying the slot twice is harmless.
+- Requires `@iyulab/components` 1.45.2 or later (`u-button.focus()`).
+
+### Fixed
+
+- A route transition that completes while the overlay is open no longer pulls focus out of the
+  panel onto the (inert) route's scroll container.
+
 ## [0.27.0] - 2026-09-24
 
 ### Added

package/dist/components/SidebarLink.js

@@ -3,6 +3,7 @@ import t from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { DEFAULT_NAV_ICON as r } from "../internals/nav-icon.js";
 import { styles as i } from "./SidebarLink.styles.js";
+import "@iyulab/router";
 import { html as a, nothing as o } from "lit";
 import { customElement as s, property as c } from "lit/decorators.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";

package/dist/layouts/SidebarLayout.d.ts

@@ -14,6 +14,14 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
     progressBarEl: UProgressBar;
     /** overlay 슬롯 배정 상태 — CSS `:has()`로는 알 수 없다(`internals/slotted.ts` 참조). */
     private hasOverlay;
+    /** notice 슬롯 배정 상태 — 비었으면 스택 자체가 자리를 차지하지 않는다. */
+    private hasNotice;
+    /**
+     * 오버레이를 연 컨트롤 — 닫힐 때 포커스를 되돌릴 곳.
+     * ★슬롯 배정 «시점» 에 잡는다. 렌더가 본문에 `inert` 를 걸면 그 컨트롤이 쥐던 포커스는
+     *   `<body>` 로 떨어지므로, `updated()` 에서 읽으면 이미 늦다.
+     */
+    private overlayTrigger;
     /**
      * `:state(overlay)`를 싣는 자리. `MasterDetailLayout`과 동일 패턴.
      * ⚠생성자에서 한 번만 붙인다 — `attachInternals()`는 같은 인스턴스에 두 번 부르면
@@ -93,6 +101,29 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
     /** 라우트 에러 핸들러 */
     private handleRouteError;
     private handleOverlaySlotChange;
+    private handleNoticeSlotChange;
+    /** 오버레이 패널에 배정된 요소들 */
+    private overlayPanels;
+    /**
+     * 열린 패널로 포커스를 옮긴다 — 순서는 `UOverlayElement` 와 같다:
+     * `[autofocus]` → 첫 입력 컨트롤 → (없으면) 셸의 닫기 버튼.
+     * 닫기 버튼으로 떨어지는 것은 의도다 — 포커스가 `<body>` 에 남는 것보다 항상 낫고,
+     * 셸이 늘 가진 유일한 컨트롤이다. 소비자가 이미 패널 안으로 옮겨 두었으면 건드리지 않는다.
+     */
+    private focusOverlay;
+    /**
+     * 닫힌 뒤 포커스를 연 컨트롤로 되돌린다. 포커스가 `<body>` 로 떨어졌을 때만 —
+     * 소비자가 닫으며 다른 곳으로 옮겼다면 그것을 존중한다.
+     * 연 컨트롤이 없으면(프로그램이 연 경우) 메인 스크롤러로 — 라우트 완료 때와 같은 자리다.
+     */
+    private restoreOverlayFocus;
+    /**
+     * 패널 안의 Escape 는 닫기 버튼과 같은 `overlay-close` 를 낸다.
+     * window 버블 단계에서 받는다 — 패널 안의 목록·팝오버가 자기 층을 닫으며 먹은 키
+     * (`defaultPrevented`)는 그 층의 몫이다. 한 번의 Escape 는 한 층만 닫는다.
+     * 경로에 패널이 없으면(사이드바, 패널 위에 띄운 대화상자) 받지 않는다.
+     */
+    private handleOverlayEscape;
     private handleOverlayClose;
     /** .main 키보드 스크롤 핸들러 (WCAG 2.1 SC 2.1.1) */
     private _handleMainKeydown;

package/dist/layouts/SidebarLayout.js

@@ -39,12 +39,25 @@ function T(e, t) {
 	}
 	return !0;
 }
-var E = class extends i {
+function E() {
+	let e = document.activeElement;
+	for (; e?.shadowRoot?.activeElement;) e = e.shadowRoot.activeElement;
+	return e;
+}
+function D(e, t) {
+	let n = t;
+	for (; n;) {
+		if (n === e) return !0;
+		n = n.parentNode ?? n.host ?? null;
+	}
+	return !1;
+}
+var O = class extends i {
 	static {
 		b = this;
 	}
 	constructor(...t) {
-		super(...t), this.state = "default", this.locale = "", this.hasOverlay = !1, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : void 0, this.context = null, this.unsizedWarnKey = `unsized:${++S}`, 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.locale = "", this.hasOverlay = !1, this.hasNotice = !1, this.overlayTrigger = null, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : void 0, this.context = null, this.unsizedWarnKey = `unsized:${++S}`, 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 = () => {
 			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 = () => {
@@ -58,13 +71,24 @@ var E = class extends i {
 				this.progressBarEl.removeAttribute("visible");
 			}, 300);
 			let t = this.shadowRoot?.querySelector(".main");
-			t && (this.config?.scrollBehavior?.(e.context, t), t.focus({ preventScroll: !0 }));
+			t && (this.config?.scrollBehavior?.(e.context, t), this.hasOverlay || t.focus({ preventScroll: !0 }));
 		}, this.handleRouteError = (e) => {
 			this.progressBarEl.status = "error", this.progressBarEl.value = 100, setTimeout(() => {
 				this.progressBarEl.removeAttribute("visible"), this.progressBarEl.status = "default";
 			}, 300);
 		}, this.handleOverlaySlotChange = (e) => {
-			this.hasOverlay = o(e.target);
+			let t = o(e.target);
+			if (t && !this.hasOverlay) {
+				let e = E();
+				this.overlayTrigger = e && e !== document.body ? e : null;
+			}
+			this.hasOverlay = t;
+		}, this.handleNoticeSlotChange = (e) => {
+			this.hasNotice = o(e.target);
+		}, this.handleOverlayEscape = (e) => {
+			if (e.key !== "Escape" || e.defaultPrevented || e.isComposing || !this.hasOverlay) return;
+			let t = this.shadowRoot?.querySelector(".overlay");
+			t && e.composedPath().includes(t) && (e.preventDefault(), this.handleOverlayClose());
 		}, this.handleOverlayClose = () => {
 			this.fire("overlay-close", { cancelable: !1 });
 		}, this._handleMainKeydown = (e) => {
@@ -111,13 +135,13 @@ var E = class extends i {
 		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);
 	}
 	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), 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), window.removeEventListener("keydown", this.handleOverlayEscape), 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");
+		super.updated(e), e.has("hasOverlay") && (this.internals?.states?.[this.hasOverlay ? "add" : "delete"]("overlay"), this.hasOverlay ? (window.addEventListener("keydown", this.handleOverlayEscape), this.focusOverlay()) : e.get("hasOverlay") === !0 && (window.removeEventListener("keydown", this.handleOverlayEscape), this.restoreOverlayFocus()));
 	}
 	firstUpdated(e) {
 		super.firstUpdated(e), this.warnIfUnsized();
@@ -183,6 +207,9 @@ var E = class extends i {
           <u-progress-bar part="progress"></u-progress-bar>
 
           <div class="main-content" part="main-content" ?inert=${this.hasOverlay}>
+            <div class="notices ${this.hasNotice ? "" : "empty"}" part="notices">
+              <slot name="notice" @slotchange=${this.handleNoticeSlotChange}></slot>
+            </div>
             <slot></slot>
           </div>
         </div>
@@ -284,7 +311,7 @@ var E = class extends i {
             .fallback=${s}
           ></u-icon>
         </u-link>
-      ` : l`<u-icon class="logo"></u-icon>`;
+      ` : u;
 		if (typeof e == "function") {
 			let n = e(this.state);
 			return l`
@@ -304,10 +331,32 @@ var E = class extends i {
       </u-link>
     `;
 	}
+	overlayPanels() {
+		return (this.shadowRoot?.querySelector("slot[name=\"overlay\"]"))?.assignedElements({ flatten: !0 }) ?? [];
+	}
+	focusOverlay() {
+		let e = this.overlayPanels(), t = E();
+		if (t && e.some((e) => D(e, t))) return;
+		let n = (t) => {
+			for (let n of e) {
+				if (n.matches(t)) return n;
+				let e = n.querySelector(t);
+				if (e) return e;
+			}
+			return null;
+		};
+		(n("[autofocus]") ?? n("input, select, textarea, u-input, u-textarea, u-select, u-checkbox, u-radio, u-switch, u-slider") ?? this.shadowRoot?.querySelector(".overlay-close"))?.focus();
+	}
+	restoreOverlayFocus() {
+		let e = this.overlayTrigger;
+		this.overlayTrigger = null;
+		let t = E();
+		t && t !== document.body || (e?.isConnected ? e.focus() : this.mainElement?.focus({ preventScroll: !0 }));
+	}
 };
 r([f({
 	type: String,
 	reflect: !0
-}), n("design:type", Object)], E.prototype, "state", void 0), r([f({ type: Object }), n("design:type", Object)], E.prototype, "config", void 0), r([f({ type: String }), n("design:type", Object)], E.prototype, "locale", void 0), r([p("u-progress-bar"), n("design:type", y === void 0 ? Object : y)], E.prototype, "progressBarEl", void 0), r([m(), n("design:type", Object)], E.prototype, "hasOverlay", void 0), r([m(), n("design:type", Object)], E.prototype, "context", void 0), E = b = r([d("u-sidebar-layout")], E);
+}), n("design:type", Object)], O.prototype, "state", void 0), r([f({ type: Object }), n("design:type", Object)], O.prototype, "config", void 0), r([f({ type: String }), n("design:type", Object)], O.prototype, "locale", void 0), r([p("u-progress-bar"), n("design:type", y === void 0 ? Object : y)], O.prototype, "progressBarEl", void 0), r([m(), n("design:type", Object)], O.prototype, "hasOverlay", void 0), r([m(), n("design:type", Object)], O.prototype, "hasNotice", void 0), r([m(), n("design:type", Object)], O.prototype, "context", void 0), O = b = r([d("u-sidebar-layout")], O);
 //#endregion
-export { E as SidebarLayout };
+export { O as SidebarLayout };

package/dist/layouts/SidebarLayout.styles.js

@@ -211,6 +211,31 @@ var t = e`
     height: 100%;
   }
 
+  /*
+   * 앱 수준 공지 스택 — 한 화면이 아니라 셸에 속한다.
+   * 본문 맨 위 «흐름 안»에 둔다. 세 대안을 소비자가 먼저 실측해 기각했다:
+   *   · fixed → 본문을 덮는다.
+   *   · 셸 바깥 흐름 → 셸 높이에 더해져 이중 스크롤.
+   *   · .main 안 sticky → 좁은 화면에서 공지 둘이 상시 3할을 점유한다. 배너는
+   *     «막지 않는 것»이 값이라 상시 점유가 그 값을 깎는다.
+   * .main-content 안에 있으므로 오버레이가 열리면 본문과 함께 inert 가 된다.
+   * 폭은 스택이 정한다 — 공지(u-alert)는 자기 폭이 fit-content 라 문구 길이대로
+   * 들쭉날쭉해진다. 배치 컨테이너의 결정이다.
+   */
+  .notices {
+    display: flex;
+    flex-direction: column;
+    gap: var(--u-space-sm, 8px);
+    margin-bottom: var(--u-space-lg, 16px);
+  }
+  .notices.empty {
+    display: none;
+  }
+  slot[name="notice"]::slotted(*) {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
   /*
    * 오버레이가 열린 동안 «본문 영역»을 스태킹 컨텍스트로 만든다.
    *

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.27.0",
+  "version": "0.28.1",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -64,7 +64,7 @@
     "lit": "^3.3.3"
   },
   "peerDependencies": {
-    "@iyulab/components": ">=1.45.0",
+    "@iyulab/components": ">=1.45.2",
     "@lit/react": ">=1.0.8",
     "react": ">=18.0.0"
   },
@@ -89,6 +89,6 @@
     "vite": "^8.1.4",
     "vite-plugin-dts": "^5.0.3",
     "vitest": "^5.0.0",
-    "@iyulab/components": ">=1.42.0"
+    "@iyulab/components": ">=1.45.2"
   }
 }

package/skills/modern-app/references/layout.md

@@ -264,6 +264,7 @@ Parts available for `styles` overrides on the root layout:
 | `progress` | Top progress bar |
 | `overlay` | Route-independent overlay panel above `main` |
 | `overlay-close` | Overlay's close button |
+| `notices` | Stack of app-level notices at the top of the route content (`slot="notice"`) |
 
 ---
 
@@ -350,9 +351,9 @@ from either re-implementing what the shell already does, or dropping what it doe
 | Making route content non-interactive | shell | `inert` on `part="main-content"`, which propagates through the slot into your route content |
 | A close affordance | shell | `part="overlay-close"`, firing the non-cancelable `overlay-close` event |
 | Keeping the route mounted underneath | shell | the overlay is independent of routing |
-| **Moving focus into the panel when it opens** | **consumer** | focus the panel or its first control yourself |
-| **Restoring focus when it closes** | **consumer** | remember the trigger and re-focus it |
-| **Escape to close** | **consumer** | the shell binds no key; listen for it and empty the slot |
+| Moving focus into the panel when it opens | shell | an `[autofocus]` element in your panel, else its first input control, else `part="overlay-close"`. If you already moved focus into the panel, the shell leaves it there |
+| Restoring focus when it closes | shell | back to the control that held focus when the panel opened — only if focus fell to `<body>`; if you moved it somewhere on purpose, that stands. With no such control (opened from code), focus goes to `part="main"` |
+| Escape to close | shell | Escape inside the panel fires the same `overlay-close` as the button — you still empty the slot. An Escape already consumed inside the panel (an open list or popover calling `preventDefault()`) closes only that layer |
 | **A backdrop / dimmed scrim** | **consumer** | the panel is opaque and full-bleed by design; add a scrim inside your panel if you want one |
 | **Announcing the panel to assistive tech** | **consumer** | put `role`/`aria-label` (or `aria-modal`, if you have made it modal) on *your* panel — the shell does not know what it holds |
 
@@ -371,6 +372,29 @@ No `overlayBreakpoint`/responsive toggle exists here — unlike `u-master-detail
 overlay is always an overlay, never a side-by-side pane. Use `u-master-detail-layout` instead
 when you want the panel to sit *beside* content on wide screens.
 
+
+## App-level notices
+
+App-level notices — the server is unreachable, a new version is ready — belong to the shell, not to
+one screen: a screen that places its own fixed banner collides with the next notice someone adds.
+Put them in `slot="notice"`; the shell stacks them at the top of the route content.
+
+```html
+<u-sidebar-layout>
+  <u-alert slot="notice" status="warning" open>Server unreachable — retrying.</u-alert>
+  <u-alert slot="notice" status="info" open closable>A new version is ready.</u-alert>
+</u-sidebar-layout>
+```
+
+- **In flow, above the route content.** Notices scroll away with the content rather than holding a
+  strip of a small screen, and they never cover it. A banner's value is that it does not block;
+  a permanently pinned stack would eat into that on a phone.
+- **Full width.** Each notice takes the width of the content box, whatever its text length.
+- **Empty takes no space** — the stack has no margin while nothing is slotted.
+- **Inert with the route content** while the overlay is open.
+- Which surface a notice is (toast, banner or modal) is decided by *who ends it* — a notice the time
+  ends is a toast (`app.success`), not a slotted banner.
+
 ## Responsive behaviour
 
 | Screen width | Sidebar state |