@iyulab/modern-app 0.42.0 → 0.42.2

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [0.42.2] - 2026-10-07
+
+### Fixed
+
+- The sidebar layout registers the `u-progress-bar` it renders with an explicit import. It imported `UProgressBar` for
+  a type only, and the published module kept the import by accident (decorator metadata).
+
+## [0.42.1] - 2026-10-07
+
+### Fixed
+
+- **A long screen with no controls can be scrolled from the keyboard.** The sidebar layout's content region carries
+  `tabindex="-1"` for programmatic focus (skip link, route change) — and a negative tabindex is the explicit opt-out
+  from the browser's own rule that makes a scroller with nothing focusable inside a Tab stop (Chrome 130). So a
+  keyboard user who tabbed past a document or notice screen had no way to scroll it (axe
+  `scrollable-region-focusable`). The region is now a Tab stop exactly when it overflows and holds nothing reachable
+  by Tab (shadow roots included), and re-judges when the content's size or slotted elements change; screens with
+  controls keep `-1`.
+
 ## [0.42.0] - 2026-10-07
 
 ### Added

package/dist/layouts/SidebarLayout.d.ts

@@ -30,6 +30,16 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
      * 숨어 이름 없는 진행 막대가 모든 화면의 접근성 트리에 떠 있었다(axe `aria-progressbar-name`).
      */
     private routeLoading;
+    /**
+     * 본문이 탭 정지인가 — 넘쳐서 스크롤되는데 안에 탭으로 닿을 것이 하나도 없을 때만.
+     *
+     * 브라우저 규칙(«키보드 포커스 가능한 스크롤러», Chrome 130)을 셸이 재현한다: 그런 스크롤러는 브라우저가 스스로
+     * 탭 정지로 만들지만, `tabindex="-1"` 이 그 규칙의 명시적 opt-out 이다. 셸은 프로그램 포커스(skip link · 라우트
+     * 완료) 때문에 `-1` 을 달았고, 그래서 컨트롤 없는 긴 화면(문서 · 안내)을 Tab 으로 지나치면 스크롤할 길이 없었다
+     * (axe `scrollable-region-focusable`). 컨트롤이 있는 화면은 그 컨트롤에서 스크롤 키가 듣는다 — 정지를 더하지 않는다.
+     */
+    private mainTabStop;
+    private mainSizeObserver?;
     /**
      * 오버레이를 연 컨트롤 — 닫힐 때 포커스를 되돌릴 곳.
      * ★슬롯 배정 «시점» 에 잡는다. 렌더가 본문에 `inert` 를 걸면 그 컨트롤이 쥐던 포커스는
@@ -129,6 +139,17 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
     private handleRouteProgress;
     /** 라우트 변경 완료 핸들러 */
     private handleRouteDone;
+    /**
+     * 본문과 그 내용의 크기가 바뀌면(넘침 · 내용이 그려짐) 탭 정지를 다시 판정한다. 본문이 처음 그려질 때 한 번 건다.
+     * ⚠`.main-content` 는 `display: contents` 라 상자가 없다 — 관찰 대상은 슬롯에 배정된 요소들이고, 배정이 바뀔 때마다 다시 건다.
+     */
+    private observeMainSize;
+    private observedContent;
+    private observeContentSize;
+    private handleMainSlotChange;
+    private syncMainTabStop;
+    /** 공지 슬롯에 배정된 요소들 */
+    private noticeContent;
     /** 라우트 본문(기본 슬롯)에 배정된 요소들 */
     private routeContent;
     /**

package/dist/layouts/SidebarLayout.js

@@ -24,16 +24,16 @@ 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 { UProgressBar as S } from "@iyulab/components/dist/components/progress-bar/UProgressBar.js";
+import "@iyulab/components/dist/components/progress-bar/UProgressBar.js";
 //#region src/layouts/SidebarLayout.ts
-var C, w = v("@iyulab/modern-app"), T = 0;
-function E(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";
 }
-var D = /* @__PURE__ */ new Set([
+var E = /* @__PURE__ */ new Set([
 	"button",
 	"link",
 	"checkbox",
@@ -46,27 +46,27 @@ var D = /* @__PURE__ */ new Set([
 	"tab",
 	"treeitem"
 ]);
-function O(e) {
+function D(e) {
 	let t = e.tagName;
-	return t === "BUTTON" || t === "SUMMARY" || t === "A" && e.hasAttribute("href") ? !0 : D.has(e.getAttribute("role") ?? "");
+	return t === "BUTTON" || t === "SUMMARY" || t === "A" && e.hasAttribute("href") ? !0 : E.has(e.getAttribute("role") ?? "");
 }
-function k(e) {
+function O(e) {
 	let t = getComputedStyle(e);
 	return (t.overflowY === "auto" || t.overflowY === "scroll") && e.scrollHeight > e.clientHeight;
 }
-function A(e, t) {
+function k(e, t) {
 	for (let n of e) if (n instanceof HTMLElement) {
-		if (k(n)) return n === t;
+		if (O(n)) return n === t;
 		if (n === t) break;
 	}
 	return !0;
 }
-function j() {
+function A() {
 	let e = document.activeElement;
 	for (; e?.shadowRoot?.activeElement;) e = e.shadowRoot.activeElement;
 	return e;
 }
-function M(e, t) {
+function j(e, t) {
 	let n = t;
 	for (; n;) {
 		if (n === e) return !0;
@@ -74,12 +74,12 @@ function M(e, t) {
 	}
 	return !1;
 }
-var N = class extends i {
+var M = class extends i {
 	static {
-		C = this;
+		S = 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.routeLoading = !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 = () => {
+		super(...t), 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 = () => {
 			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 = () => {
@@ -93,7 +93,14 @@ var N = class extends i {
 				this.routeLoading = !1;
 			}, 300);
 			let t = this.shadowRoot?.querySelector(".main");
-			t && (this.config?.scrollBehavior?.(e.context, t), this.focusRoute(t));
+			t && (this.config?.scrollBehavior?.(e.context, t), this.focusRoute(t), 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);
+			this.mainTabStop = t && !n;
 		}, this.handleSkipLinkClick = (e) => {
 			e.preventDefault();
 			let t = this.shadowRoot?.querySelector(".main");
@@ -105,12 +112,12 @@ var N = class extends i {
 		}, this.handleOverlaySlotChange = (e) => {
 			let t = o(e.target);
 			if (t && !this.hasOverlay) {
-				let e = j();
+				let e = A();
 				this.overlayTrigger = e && e !== document.body ? e : null;
 			}
 			this.hasOverlay = t;
 		}, this.handleNoticeSlotChange = (e) => {
-			this.hasNotice = o(e.target);
+			this.hasNotice = o(e.target), this.handleMainSlotChange();
 		}, this.handleOverlayEscape = (e) => {
 			let t = this.shadowRoot?.querySelector(".overlay");
 			return !this.hasOverlay || !t || !e.composedPath().includes(t) ? !1 : (this.handleOverlayClose(), !0);
@@ -119,9 +126,9 @@ var N = class extends i {
 		}, this._handleMainKeydown = (e) => {
 			if (e.defaultPrevented) return;
 			let t = e.composedPath()[0];
-			if (t instanceof HTMLElement && E(t) || e.key === " " && t instanceof HTMLElement && O(t)) return;
+			if (t instanceof HTMLElement && T(t) || e.key === " " && t instanceof HTMLElement && D(t)) return;
 			let n = this.shadowRoot?.querySelector(".main");
-			if (!n || !A(e.composedPath(), n)) return;
+			if (!n || !k(e.composedPath(), n)) return;
 			let r = n.clientHeight;
 			switch (e.key) {
 				case " ":
@@ -164,13 +171,13 @@ var N = class extends i {
 		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), 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), this.mainSizeObserver?.disconnect(), this.mainSizeObserver = void 0, 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 ? (x.openLayer(this, this.handleOverlayEscape), this.focusOverlay()) : e.get("hasOverlay") === !0 && (x.closeLayer(this), this.restoreOverlayFocus()));
+		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()));
 	}
 	firstUpdated(e) {
 		super.firstUpdated(e), this.warnIfUnsized();
@@ -179,7 +186,7 @@ var N = class extends i {
 		process.env.NODE_ENV !== "production" && requestAnimationFrame(() => {
 			if (!this.isConnected) return;
 			let e = this.getBoundingClientRect().height;
-			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).`);
+			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() {
@@ -237,7 +244,7 @@ var N = class extends i {
 
       <!-- Main Content -->
       <div class="main-region">
-        <main class="main" part="main" scrollable tabindex="-1" @keydown=${this._handleMainKeydown}>
+        <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-label=${a(this.locale || void 0).pageLoading}></u-progress-bar>
@@ -248,7 +255,7 @@ var N = class extends i {
               aria-label=${this.config.noticesAriaLabel ?? d}>
               <slot name="notice" @slotchange=${this.handleNoticeSlotChange}></slot>
             </div>
-            <slot></slot>
+            <slot @slotchange=${this.handleMainSlotChange}></slot>
           </div>
         </main>
 
@@ -270,7 +277,7 @@ var N = class extends i {
 	}
 	renderMenu(e) {
 		let t = this.menuIds.get(e);
-		t || (t = `u-sidebar-menu-${++C.menuSeq}`, this.menuIds.set(e, t));
+		t || (t = `u-sidebar-menu-${++S.menuSeq}`, this.menuIds.set(e, t));
 		let n = t, r = this.state === "mobile" || this.state === "mobile-open" ? "bottom-start" : "right-start";
 		return u`
       <u-sidebar-button
@@ -305,8 +312,8 @@ var N = class extends i {
 	}
 	handleMenuHide(e, t) {
 		this.openMenu === t && (this.openMenu = null);
-		let n = e.currentTarget, r = j();
-		r && M(n, r) && this.shadowRoot?.querySelector(`#${t}`)?.focus();
+		let n = e.currentTarget, r = A();
+		r && j(n, r) && this.shadowRoot?.querySelector(`#${t}`)?.focus();
 	}
 	renderItem(e) {
 		if (!e) return d;
@@ -379,7 +386,7 @@ var N = class extends i {
 		};
 	}
 	icon(e) {
-		return this.config?.icons?.[e] ?? C.DEFAULT_ICONS[e];
+		return this.config?.icons?.[e] ?? S.DEFAULT_ICONS[e];
 	}
 	renderLogo() {
 		let e = this.config?.logo, t = this.config?.title ?? "Home";
@@ -410,20 +417,36 @@ var N = class extends i {
       </u-link>
     `;
 	}
+	observeMainSize() {
+		if (this.mainSizeObserver || typeof ResizeObserver > "u") return;
+		let e = this.shadowRoot?.querySelector(".main");
+		e && (this.mainSizeObserver = new ResizeObserver(() => this.syncMainTabStop()), this.mainSizeObserver.observe(e), this.observeContentSize());
+	}
+	observeContentSize() {
+		let e = this.mainSizeObserver;
+		if (e) {
+			for (let t of this.observedContent) e.unobserve(t);
+			this.observedContent = [...this.noticeContent(), ...this.routeContent()];
+			for (let t of this.observedContent) e.observe(t);
+		}
+	}
+	noticeContent() {
+		return (this.shadowRoot?.querySelector("slot[name=\"notice\"]"))?.assignedElements({ flatten: !0 }) ?? [];
+	}
 	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 = j();
-		n && t.some((e) => M(e, n)) || this.focusContentStart(t, e);
+		let n = A();
+		n && t.some((e) => j(e, n)) || this.focusContentStart(t, e);
 	}
 	focusContentStart(e, t) {
 		let n = b(e, "[autofocus]", y);
 		n?.focus();
-		let r = j();
-		n && r && M(n, r) || t.focus({ preventScroll: !0 });
+		let r = A();
+		n && r && j(n, r) || t.focus({ preventScroll: !0 });
 	}
 	overlayPanels() {
 		return (this.shadowRoot?.querySelector("slot[name=\"overlay\"]"))?.assignedElements({ flatten: !0 }) ?? [];
@@ -431,19 +454,19 @@ var N = class extends i {
 	async focusOverlay() {
 		let e = this.overlayPanels();
 		if (await Promise.all(e.map((e) => e.updateComplete)), !this.hasOverlay) return;
-		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();
+		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();
 	}
 	restoreOverlayFocus() {
 		let e = this.overlayTrigger;
 		this.overlayTrigger = null;
-		let t = j();
+		let t = A();
 		t && t !== document.body || (e?.isConnected ? e.focus() : this.mainElement?.focus({ preventScroll: !0 }));
 	}
 };
 r([p({
 	type: String,
 	reflect: !0
-}), 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, "routeLoading", void 0), r([h(), n("design:type", Object)], N.prototype, "currentPath", void 0), N = C = r([f("u-sidebar-layout")], N);
+}), n("design:type", Object)], M.prototype, "state", void 0), r([p({ type: Object }), n("design:type", Object)], M.prototype, "config", void 0), r([p({ type: Object }), n("design:type", typeof Record > "u" ? Object : Record)], M.prototype, "counts", void 0), r([p({ type: String }), n("design:type", Object)], M.prototype, "locale", void 0), r([m("u-progress-bar"), n("design:type", Object)], M.prototype, "progressBarEl", void 0), r([h(), n("design:type", Object)], M.prototype, "hasOverlay", void 0), r([h(), n("design:type", Object)], M.prototype, "openMenu", void 0), r([h(), n("design:type", Object)], M.prototype, "hasNotice", void 0), r([h(), n("design:type", Object)], M.prototype, "routeLoading", void 0), r([h(), n("design:type", Object)], M.prototype, "mainTabStop", void 0), r([h(), n("design:type", Object)], M.prototype, "currentPath", void 0), M = S = r([f("u-sidebar-layout")], M);
 //#endregion
-export { N as SidebarLayout };
+export { M as SidebarLayout };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.42.0",
+  "version": "0.42.2",
   "keywords": [
     "iyulab",
     "web-framework",