@iyulab/modern-app 0.30.0 → 0.30.2

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## [0.30.2] - 2026-09-28
+
+### Fixed
+
+- **An overlay panel that is a component now gets focus inside it.** The shell looked for the
+  panel's `[autofocus]` element and first input control with `querySelector`, which stops at shadow
+  roots — so when the panel was a custom element rendering its controls in its own template, the
+  shell found neither and fell back to the close button. The search now goes through shadow roots
+  and waits for the panel's first render, as route focus does since 0.30.1.
+- **Route and overlay focus skip a `u-select`'s closed popover.** Searching through shadow roots
+  (0.30.1) also reached the popover every `u-select` keeps inside, which carries an `autofocus`
+  attribute of its own — a screen with a `u-select` before its `autofocus` field got the content
+  area instead. Only elements that can actually take focus are candidates now.
+
+### Changed
+
+- **Requires `@iyulab/components` 1.47.1 or later** (peer) — the shell now uses its
+  `querySelectorDeep` / `isFocusCandidate`, the same lookup `u-dialog` and `u-drawer` use.
+
+## [0.30.1] - 2026-09-28
+
+### Fixed
+
+- **A route screen can declare its first focus.** On every route change the shell moved focus to
+  the content area unconditionally, so a screen that focused its own input on entry — a scan field,
+  a search box — had that focus taken back, and `autofocus` in the screen did nothing. Route
+  changes now follow the overlay panel's rule: focus the screen already moved into the content
+  stays; else an `[autofocus]` element in the content (through shadow roots, after the screen's
+  first render) receives it; else the content area, as before.
+
 ## [0.30.0] - 2026-09-27
 
 ### Added

package/dist/layouts/SidebarLayout.d.ts

@@ -98,6 +98,19 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
     private handleRouteProgress;
     /** 라우트 변경 완료 핸들러 */
     private handleRouteDone;
+    /** 라우트 본문(기본 슬롯)에 배정된 요소들 */
+    private routeContent;
+    /**
+     * 라우트 완료 후 포커스 — 오버레이 패널과 같은 규칙이다.
+     * ① 화면이 이미 본문 안으로 옮겨 두었으면 건드리지 않는다
+     * ② 본문 안의 `[autofocus]`(섀도 경계 안쪽까지)
+     * ③ 그 밖에는 `.main` — 마우스 없이 키보드로 스크롤할 수 있고, 새 화면의 시작이 된다.
+     * 오버레이가 열려 있으면 아무것도 하지 않는다 — 아래 라우트는 inert 이고 사용자의 포커스는 패널에 있다.
+     *
+     * 판정은 본문 요소들의 첫 렌더를 기다린 뒤에 한다 — `route-done` 은 화면이 자기 템플릿을
+     * 그리기 전에 올 수 있고, 그때 찾으면 `[autofocus]` 가 아직 없다.
+     */
+    private focusRoute;
     /** 라우트 에러 핸들러 */
     private handleRouteError;
     private handleOverlaySlotChange;
@@ -109,6 +122,7 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
      * `[autofocus]` → 첫 입력 컨트롤 → (없으면) 셸의 닫기 버튼.
      * 닫기 버튼으로 떨어지는 것은 의도다 — 포커스가 `<body>` 에 남는 것보다 항상 낫고,
      * 셸이 늘 가진 유일한 컨트롤이다. 소비자가 이미 패널 안으로 옮겨 두었으면 건드리지 않는다.
+     * 탐색은 섀도 경계 안쪽까지 한다 — 패널이 컴포넌트면 컨트롤은 그 섀도 루트에 있다.
      */
     private focusOverlay;
     /**

package/dist/layouts/SidebarLayout.js

@@ -19,32 +19,33 @@ import { unsafeHTML as h } from "lit/directives/unsafe-html.js";
 import { repeat as g } from "lit/directives/repeat.js";
 import { ifDefined as _ } from "lit/directives/if-defined.js";
 import { createDevWarner as v } from "@iyulab/components/dist/utilities/devWarning.js";
-import { UProgressBar as y } from "@iyulab/components/dist/components/progress-bar/UProgressBar.js";
+import { isFocusCandidate as y, querySelectorDeep as b } from "@iyulab/components/dist/utilities/elements.js";
+import { UProgressBar as x } from "@iyulab/components/dist/components/progress-bar/UProgressBar.js";
 //#region src/layouts/SidebarLayout.ts
-var b, x = v("@iyulab/modern-app"), S = 0;
-function C(e) {
+var S, C = v("@iyulab/modern-app"), w = 0;
+function T(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";
 }
-function w(e) {
+function E(e) {
 	let t = getComputedStyle(e);
 	return (t.overflowY === "auto" || t.overflowY === "scroll") && e.scrollHeight > e.clientHeight;
 }
-function T(e, t) {
+function D(e, t) {
 	for (let n of e) if (n instanceof HTMLElement) {
-		if (w(n)) return n === t;
+		if (E(n)) return n === t;
 		if (n === t) break;
 	}
 	return !0;
 }
-function E() {
+function O() {
 	let e = document.activeElement;
 	for (; e?.shadowRoot?.activeElement;) e = e.shadowRoot.activeElement;
 	return e;
 }
-function D(e, t) {
+function k(e, t) {
 	let n = t;
 	for (; n;) {
 		if (n === e) return !0;
@@ -52,12 +53,12 @@ function D(e, t) {
 	}
 	return !1;
 }
-var O = class extends i {
+var A = class extends i {
 	static {
-		b = this;
+		S = this;
 	}
 	constructor(...t) {
-		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 = () => {
+		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:${++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 = () => {
 			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 = () => {
@@ -71,7 +72,7 @@ var O = class extends i {
 				this.progressBarEl.removeAttribute("visible");
 			}, 300);
 			let t = this.shadowRoot?.querySelector(".main");
-			t && (this.config?.scrollBehavior?.(e.context, t), this.hasOverlay || t.focus({ preventScroll: !0 }));
+			t && (this.config?.scrollBehavior?.(e.context, t), this.focusRoute(t));
 		}, this.handleRouteError = (e) => {
 			this.progressBarEl.status = "error", this.progressBarEl.value = 100, setTimeout(() => {
 				this.progressBarEl.removeAttribute("visible"), this.progressBarEl.status = "default";
@@ -79,7 +80,7 @@ var O = class extends i {
 		}, this.handleOverlaySlotChange = (e) => {
 			let t = o(e.target);
 			if (t && !this.hasOverlay) {
-				let e = E();
+				let e = O();
 				this.overlayTrigger = e && e !== document.body ? e : null;
 			}
 			this.hasOverlay = t;
@@ -95,9 +96,9 @@ var O = class extends i {
 			this.fire("overlay-close", { cancelable: !1 });
 		}, this._handleMainKeydown = (e) => {
 			let t = e.composedPath()[0];
-			if (t instanceof HTMLElement && C(t)) return;
+			if (t instanceof HTMLElement && T(t)) return;
 			let n = this.shadowRoot?.querySelector(".main");
-			if (!n || !T(e.composedPath(), n)) return;
+			if (!n || !D(e.composedPath(), n)) return;
 			let r = n.clientHeight;
 			switch (e.key) {
 				case " ":
@@ -152,7 +153,7 @@ var O = class extends i {
 		process.env.NODE_ENV !== "production" && requestAnimationFrame(() => {
 			if (!this.isConnected) return;
 			let e = this.getBoundingClientRect().height;
-			e >= 200 || x(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 || 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).`);
 		});
 	}
 	render() {
@@ -304,7 +305,7 @@ var O = class extends i {
 		};
 	}
 	icon(e) {
-		return this.config?.icons?.[e] ?? b.DEFAULT_ICONS[e];
+		return this.config?.icons?.[e] ?? S.DEFAULT_ICONS[e];
 	}
 	renderLogo() {
 		let e = this.config?.logo, t = this.config?.title ?? "Home";
@@ -335,32 +336,38 @@ var O = class extends i {
       </u-link>
     `;
 	}
+	routeContent() {
+		return (this.shadowRoot?.querySelector(".main-content > slot:not([name])"))?.assignedElements({ flatten: !0 }) ?? [];
+	}
+	async focusRoute(e) {
+		let t = this.routeContent();
+		if (await Promise.all(t.map((e) => e.updateComplete)), this.hasOverlay || !e.isConnected) return;
+		let n = O();
+		if (n && t.some((e) => k(e, n))) return;
+		let r = b(t, "[autofocus]", y);
+		r?.focus();
+		let i = O();
+		r && i && k(r, i) || e.focus({ preventScroll: !0 });
+	}
 	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();
+	async focusOverlay() {
+		let e = this.overlayPanels();
+		if (await Promise.all(e.map((e) => e.updateComplete)), !this.hasOverlay) return;
+		let t = O();
+		t && e.some((e) => k(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 = E();
+		let t = O();
 		t && t !== document.body || (e?.isConnected ? e.focus() : this.mainElement?.focus({ preventScroll: !0 }));
 	}
 };
 r([f({
 	type: String,
 	reflect: !0
-}), 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);
+}), n("design:type", Object)], A.prototype, "state", void 0), r([f({ type: Object }), n("design:type", Object)], A.prototype, "config", void 0), r([f({ type: String }), n("design:type", Object)], A.prototype, "locale", void 0), r([p("u-progress-bar"), n("design:type", x === void 0 ? Object : x)], A.prototype, "progressBarEl", void 0), r([m(), n("design:type", Object)], A.prototype, "hasOverlay", void 0), r([m(), n("design:type", Object)], A.prototype, "hasNotice", void 0), r([m(), n("design:type", Object)], A.prototype, "context", void 0), A = S = r([d("u-sidebar-layout")], A);
 //#endregion
-export { O as SidebarLayout };
+export { A as SidebarLayout };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.30.0",
+  "version": "0.30.2",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -64,7 +64,7 @@
     "lit": "^3.3.3"
   },
   "peerDependencies": {
-    "@iyulab/components": ">=1.45.2",
+    "@iyulab/components": ">=1.47.1",
     "@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.45.2"
+    "@iyulab/components": ">=1.47.1"
   }
 }

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

@@ -27,7 +27,7 @@ interface SidebarLayoutConfig {
   /** Permission filter — hides items (and emptied section/groups) whose requirement fails. Unset shows everything. See "권한 기반 메뉴 필터" below. */
   hasPermission?: (code: string) => boolean;
 
-  /** Called on `route-done` (before focus moves to the container) with the new route's `RouteContext` and the scroll container itself — implement reset/save/restore here. Unset does nothing (same default as Vue Router's unset `scrollBehavior`). Also reachable outside the hook via the element's `.mainElement` accessor. */
+  /** Called on `route-done` (before the shell places focus — see *Focus when a route finishes*) with the new route's `RouteContext` and the scroll container itself — implement reset/save/restore here. Unset does nothing (same default as Vue Router's unset `scrollBehavior`). Also reachable outside the hook via the element's `.mainElement` accessor. */
   scrollBehavior?: (context: RouteContext, main: HTMLElement) => void;
 
   /** Shell chrome icon source and names — `{ lib?, menu?, close?, sidebarToggle?, overlayClose? }`, only the keys you set replace the defaults. Defaults come from the bundled `internal` set, so the shell needs no network to draw its own toggles; give `lib` **and** the names to point it at your own set. */
@@ -333,6 +333,23 @@ told apart in CSS; notices are rare and short-lived.
 While the overlay is open, `part="main-content"` becomes a box at the area's height, because a
 stacking context needs one — route content is inert and under the overlay then.
 
+### Focus when a route finishes
+
+On every `route-done` the shell places focus so the keyboard works on the new screen without a
+click — by the same rule as the overlay panel (see *What the shell owns, and what it does not*):
+
+1. **If your screen already moved focus into the route content** (a `focus()` in `firstUpdated`,
+   say), the shell leaves it there.
+2. **Else an `[autofocus]` element in the route content** — found through shadow roots, so an input
+   inside your page component's own template counts. The shell waits for the screen's first render
+   before looking.
+3. **Else `part="main"`**, the scroll container — arrow keys and Page Down scroll the new screen,
+   and it marks where the new screen starts.
+
+So a screen that must receive input on entry — a barcode scan field, a search box — only needs
+`autofocus` on that control. While the overlay is open the shell does none of this: the route
+underneath is inert and focus stays in the panel.
+
 ## Printing
 
 On print media the shell drops its app chrome and lets the content flow across pages: the
@@ -397,7 +414,7 @@ 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 | 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 |
+| Moving focus into the panel when it opens | shell | an `[autofocus]` element in your panel, else its first input control, else `part="overlay-close"` — searched through shadow roots, after the panel's first render, so a panel that is itself a component works the same. 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. The shell decides **after** every layer inside the panel has: an Escape consumed there (`preventDefault()` — an open list, popover, drawer or dialog, whenever it was opened) closes only that layer. The shell does not mark the Escape consumed itself |
 | **A backdrop / dimmed scrim** | **consumer** | the panel is opaque and full-bleed by design; add a scrim inside your panel if you want one |