@iyulab/modern-app 0.34.0 → 0.34.2

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## [0.34.2] - 2026-10-06
+
+### Fixed
+
+- **The content area's scroll keys yield to the control that owns them** (`SidebarLayout`). With focus
+  on a button in the content, Space scrolled the page by a screen and the button never fired; with
+  focus in a widget that moves with the arrows itself (a tree, a menu, a radio group, a grid), each
+  arrow moved inside the widget and also scrolled the content. A key a widget already handled is left
+  alone, and Space on a button or link presses it.
+
+## [0.34.1] - 2026-10-05
+
+### Fixed
+
+- **The sidebar footer was cut off when the menu was longer than the screen** and the shell's parent
+  had no height of its own (a custom `root`, or `SidebarLayout` mounted from React). The shell is
+  capped at the viewport, but the sidebar took `height: 100%`, which cannot resolve against a cap, so
+  it grew to the menu's length and the shell clipped the footer out of reach. The sidebar now takes
+  the shell's height, the menu scrolls inside `part="sidebar-main"`, and the footer stays at the
+  bottom — in the default, slim, drawer and mobile states.
+
+### Documentation
+
+- The layout guide now says that a custom `root` also keeps the browser's default body margin, and
+  shows `:where(body) { margin: 0; }` next to the height rule.
+
 ## [0.34.0] - 2026-10-05
 
 ### Added

package/dist/layouts/SidebarLayout.js

@@ -30,23 +30,40 @@ function E(e) {
 	let n = e.getAttribute("role");
 	return n === "textbox" || n === "searchbox" || n === "combobox" || n === "spinbutton";
 }
-function D(e) {
+var D = /* @__PURE__ */ new Set([
+	"button",
+	"link",
+	"checkbox",
+	"switch",
+	"radio",
+	"menuitem",
+	"menuitemcheckbox",
+	"menuitemradio",
+	"option",
+	"tab",
+	"treeitem"
+]);
+function O(e) {
+	let t = e.tagName;
+	return t === "BUTTON" || t === "SUMMARY" || t === "A" && e.hasAttribute("href") ? !0 : D.has(e.getAttribute("role") ?? "");
+}
+function k(e) {
 	let t = getComputedStyle(e);
 	return (t.overflowY === "auto" || t.overflowY === "scroll") && e.scrollHeight > e.clientHeight;
 }
-function O(e, t) {
+function A(e, t) {
 	for (let n of e) if (n instanceof HTMLElement) {
-		if (D(n)) return n === t;
+		if (k(n)) return n === t;
 		if (n === t) break;
 	}
 	return !0;
 }
-function k() {
+function j() {
 	let e = document.activeElement;
 	for (; e?.shadowRoot?.activeElement;) e = e.shadowRoot.activeElement;
 	return e;
 }
-function A(e, t) {
+function M(e, t) {
 	let n = t;
 	for (; n;) {
 		if (n === e) return !0;
@@ -54,7 +71,7 @@ function A(e, t) {
 	}
 	return !1;
 }
-var j = class extends i {
+var N = class extends i {
 	static {
 		C = this;
 	}
@@ -85,7 +102,7 @@ var j = class extends i {
 		}, this.handleOverlaySlotChange = (e) => {
 			let t = o(e.target);
 			if (t && !this.hasOverlay) {
-				let e = k();
+				let e = j();
 				this.overlayTrigger = e && e !== document.body ? e : null;
 			}
 			this.hasOverlay = t;
@@ -97,10 +114,11 @@ var j = class extends i {
 		}, this.handleOverlayClose = () => {
 			this.fire("overlay-close", { cancelable: !1 });
 		}, this._handleMainKeydown = (e) => {
+			if (e.defaultPrevented) return;
 			let t = e.composedPath()[0];
-			if (t instanceof HTMLElement && E(t)) return;
+			if (t instanceof HTMLElement && E(t) || e.key === " " && t instanceof HTMLElement && O(t)) return;
 			let n = this.shadowRoot?.querySelector(".main");
-			if (!n || !O(e.composedPath(), n)) return;
+			if (!n || !A(e.composedPath(), n)) return;
 			let r = n.clientHeight;
 			switch (e.key) {
 				case " ":
@@ -350,14 +368,14 @@ var j = 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 = k();
-		n && t.some((e) => A(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);
 		n?.focus();
-		let r = k();
-		n && r && A(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 }) ?? [];
@@ -365,19 +383,19 @@ var j = class extends i {
 	async focusOverlay() {
 		let e = this.overlayPanels();
 		if (await Promise.all(e.map((e) => e.updateComplete)), !this.hasOverlay) return;
-		let t = k();
-		t && e.some((e) => A(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)) || (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 = k();
+		let t = j();
 		t && t !== document.body || (e?.isConnected ? e.focus() : this.mainElement?.focus({ preventScroll: !0 }));
 	}
 };
 r([f({
 	type: String,
 	reflect: !0
-}), n("design:type", Object)], j.prototype, "state", void 0), r([f({ type: Object }), n("design:type", Object)], j.prototype, "config", void 0), r([f({ type: Object }), n("design:type", typeof Record > "u" ? Object : Record)], j.prototype, "counts", void 0), r([f({ type: String }), n("design:type", Object)], j.prototype, "locale", void 0), r([p("u-progress-bar"), n("design:type", S === void 0 ? Object : S)], j.prototype, "progressBarEl", void 0), r([m(), n("design:type", Object)], j.prototype, "hasOverlay", void 0), r([m(), n("design:type", Object)], j.prototype, "hasNotice", void 0), r([m(), n("design:type", Object)], j.prototype, "context", void 0), j = C = r([d("u-sidebar-layout")], j);
+}), n("design:type", Object)], N.prototype, "state", void 0), r([f({ type: Object }), n("design:type", Object)], N.prototype, "config", void 0), r([f({ type: Object }), n("design:type", typeof Record > "u" ? Object : Record)], N.prototype, "counts", void 0), r([f({ type: String }), n("design:type", Object)], N.prototype, "locale", void 0), r([p("u-progress-bar"), n("design:type", S === void 0 ? Object : S)], N.prototype, "progressBarEl", void 0), r([m(), n("design:type", Object)], N.prototype, "hasOverlay", void 0), r([m(), n("design:type", Object)], N.prototype, "hasNotice", void 0), r([m(), n("design:type", Object)], N.prototype, "context", void 0), N = C = r([d("u-sidebar-layout")], N);
 //#endregion
-export { j as SidebarLayout };
+export { N as SidebarLayout };

package/dist/layouts/SidebarLayout.styles.js

@@ -120,7 +120,12 @@ var t = e`
     flex-direction: column;
     justify-content: space-between;
     gap: 8px;
-    height: 100%;
+    /* 높이는 백분율이 아니라 flex 의 stretch 로 받는다 — 셸의 높이가 «부모의 확정 높이» 가 아니라
+       max-height 상한에서 나오면 height: 100% 는 풀리지 않아(auto) 사이드바가 메뉴 길이로 커지고,
+       셸의 overflow: hidden 이 아래쪽 계정 영역을 잘라 닿을 수 없게 된다. 늘어난 항목의 높이는
+       그 경우에도 셸의 (상한으로 잘린) 높이다. .main-region 과 같은 해법이다. 떠 있는 상태
+       (modal · mobile*)는 절대배치라 top/bottom 으로 채운다. */
+    min-height: 0;
     /* --u-panel-bg-color 가 아니라 --u-bg-color-raised — 사이드바는 카드·메뉴류의
        "떠 있는 패널"이 아니라 상시 크롬이고, 그 구분이 정확히 두 토큰이 갈리는 지점이다
        (light.css 293~298행 참조). 미설정 시 페이지(--u-bg-color)와 같은 흰색으로 앉아
@@ -146,11 +151,13 @@ var t = e`
     width: var(--app-sidebar-width, 260px);
     position: absolute;
     top: 0;
+    bottom: 0;
     left: 0;
   }
   .sidebar[state="mobile"] {
     position: absolute;
     top: 0;
+    bottom: 0;
     left: 0;
     right: 0;
     transform: translateY(-100%);
@@ -158,6 +165,7 @@ var t = e`
   .sidebar[state="mobile-open"] {
     position: absolute;
     top: 0;
+    bottom: 0;
     left: 0;
     right: 0;
     transform: translateY(0);
@@ -194,6 +202,8 @@ var t = e`
   /* Sidebar Main Menu */
   .sidebar-main {
     flex: 1;
+    /* 열 방향 flex 항목의 자동 최소 높이는 내용 길이다 — 0 으로 풀어야 남는 높이 안에서 스크롤한다. */
+    min-height: 0;
     display: flex;
     flex-direction: column;
     gap: 4px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.34.0",
+  "version": "0.34.2",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -50,6 +50,7 @@
   },
   "scripts": {
     "preversion": "node -e \"if(require('fs').existsSync('../../scripts/preversion-check.mjs'))require('child_process').execFileSync('node',['../../scripts/preversion-check.mjs'],{stdio:'inherit'})\"",
+    "pretest": "node -e \"if(require('fs').existsSync('../../scripts/sibling-dist-check.js'))require('child_process').execFileSync('node',['../../scripts/sibling-dist-check.js'],{stdio:'inherit'})\"",
     "test": "vitest run",
     "test:watch": "vitest",
     "start": "vite",

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

@@ -304,9 +304,12 @@ rule of your own wins.
 `height: 100%` has nothing to resolve against: the shell renders at whatever its own chrome
 resolves to (measured: about 133px) instead of filling the screen — no error, only a
 development-mode console warning when it is shorter than 200px. (With a long screen the shell grows
-to the viewport cap instead, so the symptom only shows on short screens.) Give that container a height — for screen only, so printing is not cut at one page:
+to the viewport cap instead, so the symptom only shows on short screens.) The body margin is not
+removed either, so the browser's default 8px stays around the shell. Give that container a height —
+for screen only, so printing is not cut at one page — and clear the margin:
 
 ```css
+:where(body) { margin: 0; }
 @media screen {
   #app { height: 100vh; }   /* or 100%, inside an already-constrained ancestor */
 }