@iyulab/modern-app 0.33.1 → 0.33.3

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [0.33.3] - 2026-10-05
+
+### Fixed
+
+- **The sidebar stays on screen while a long screen scrolls.** The shell is now capped at the
+  viewport height (`max-height: 100dvh`), so route content always scrolls inside `part="main"`.
+  Before, a shell whose parent gave it no height grew to the length of the route content; the
+  document scrolled instead of `part="main"`, and the navigation and the sidebar footer scrolled off
+  the top with the content (the mobile header too). A parent that gives the shell a height lower
+  than the viewport still sets it.
+
+## [0.33.2] - 2026-10-03
+
+### Changed
+
+- **Sidebar transitions follow the motion tokens**, so the sidebar's open/close, group expand and
+  hover transitions stop for users who prefer reduced motion (`--u-duration-*` from
+  `@iyulab/components` drops to zero under `prefers-reduced-motion: reduce`). The slide-in moves from
+  300ms to the scale's `slow` step (320ms).
+
 ## [0.33.1] - 2026-09-30
 
 ### Fixed

package/dist/_virtual/{_@oxc-project_runtime@0.151.0 → _@oxc-project_runtime@0.152.0}/helpers/esm/decorate.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.151.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.152.0/helpers/esm/decorate.js
 function e(e, t, n, r) {
 	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
 	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);

package/dist/_virtual/{_@oxc-project_runtime@0.151.0 → _@oxc-project_runtime@0.152.0}/helpers/esm/decorateMetadata.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.151.0/helpers/esm/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.152.0/helpers/esm/decorateMetadata.js
 function e(e, t) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
 }

package/dist/components/ActionBar.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { slotHasContent as r } from "../internals/slotted.js";
 import { styles as i } from "./ActionBar.styles.js";

package/dist/components/EmptyState.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { getLocaleStrings as r } from "../internals/locale.js";
 import { slotHasContent as i } from "../internals/slotted.js";

package/dist/components/GroupBox.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { slotHasContent as r } from "../internals/slotted.js";
 import { styles as i } from "./GroupBox.styles.js";

package/dist/components/InfoField.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { styles as r } from "./InfoField.styles.js";
 import { html as i } from "lit";

package/dist/components/InfoSection.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { styles as r } from "./InfoSection.styles.js";
 import { html as i } from "lit";

package/dist/components/MasterDetailLayout.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { getLocaleStrings as r } from "../internals/locale.js";
 import { slotHasContent as i } from "../internals/slotted.js";

package/dist/components/PageHeader.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { getLocaleStrings as r } from "../internals/locale.js";
 import { slotHasContent as i } from "../internals/slotted.js";

package/dist/components/SidebarButton.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.152.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 "./SidebarButton.styles.js";

package/dist/components/SidebarButton.styles.js

@@ -8,7 +8,7 @@ var t = e`
     background-color: transparent;
     border: none;
     border-radius: 8px;
-    transition: all 0.2s ease;
+    transition: all var(--u-duration-normal, 220ms) ease;
     cursor: pointer;
   }
   :host(:hover) {

package/dist/components/SidebarGroup.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.152.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 { SidebarLink as i } from "./SidebarLink.js";

package/dist/components/SidebarGroup.styles.js

@@ -22,7 +22,7 @@ var t = e`
     background-color: transparent;
     border: none;
     border-radius: 8px;
-    transition: all 0.2s ease;
+    transition: all var(--u-duration-normal, 220ms) ease;
     cursor: pointer;
   }
   button[compact] {
@@ -71,7 +71,7 @@ var t = e`
   .caret {
     color: inherit;
     font-size: 16px !important;
-    transition: transform 0.2s ease;
+    transition: transform var(--u-duration-normal, 220ms) ease;
   }
   .caret[collapsed] {
     transform: rotate(-90deg);
@@ -86,7 +86,7 @@ var t = e`
     border-left: 2px solid var(--u-border-color-weak, #EEEEEE);
     padding-left: 8px;
     overflow: hidden;
-    transition: all 0.3s ease;
+    transition: all var(--u-duration-slow, 320ms) ease;
   }
   .items[collapsed] {
     margin-top: 0;

package/dist/components/SidebarLink.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { getLocaleStrings as r } from "../internals/locale.js";
 import { DEFAULT_NAV_ICON as i } from "../internals/nav-icon.js";

package/dist/components/SidebarLink.styles.js

@@ -12,7 +12,7 @@ var t = e`
     color: var(--app-sidebar-fg, var(--u-txt-color, #212121));
     background-color: transparent;
     border-radius: 8px;
-    transition: all 0.2s ease;
+    transition: all var(--u-duration-normal, 220ms) ease;
     cursor: pointer;
   }
   :host(:hover) {

package/dist/components/SidebarSection.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { styles as r } from "./SidebarSection.styles.js";
 import { html as i } from "lit";

package/dist/components/Wizard.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { getLocaleStrings as r } from "../internals/locale.js";
 import { styles as i } from "./Wizard.styles.js";

package/dist/internals/StyledElement.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { property as n } from "lit/decorators.js";
 import { UElement as r } from "@iyulab/components/dist/components/UElement.js";
 //#region src/internals/StyledElement.ts

package/dist/layouts/SidebarLayout.js

@@ -1,7 +1,7 @@
 import { app as e } from "../App.js";
 import { filterSidebarItems as t } from "./filterSidebarItems.js";
-import n from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
-import r from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import r from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { StyledElement as i } from "../internals/StyledElement.js";
 import { getLocaleStrings as a } from "../internals/locale.js";
 import { slotHasContent as o } from "../internals/slotted.js";

package/dist/layouts/SidebarLayout.styles.js

@@ -7,6 +7,11 @@ var t = e`
     flex-direction: row;
     width: 100%;
     height: 100%;
+    /* 셸은 뷰포트보다 커지지 않는다 — 부모에 높이가 없으면 height: 100% 가 걸릴 곳이 없어 셸이
+       본문 길이로 커지고, 그러면 .main 대신 문서가 스크롤해 사이드바가 본문과 함께 밀려 나간다.
+       상한을 두면 본문은 언제나 .main 안에서 스크롤하고 크롬은 제자리에 있다. 부모가 뷰포트보다
+       낮은 높이를 주면 그 높이가 그대로 이긴다. */
+    max-height: 100dvh;
     font-family: var(--u-font-base);
     overflow: hidden;
   }
@@ -117,7 +122,7 @@ var t = e`
     background: var(--app-sidebar-bg, var(--u-bg-color-raised, #FAFAFA));
     color: var(--app-sidebar-fg, var(--u-txt-color, #212121));
     border-right: 1px solid var(--u-border-color, #E0E0E0);
-    transition: all 0.3s ease;
+    transition: all var(--u-duration-slow, 320ms) ease;
   }
   /* Sidebar states */
   .sidebar[state="default"] {
@@ -225,11 +230,17 @@ var t = e`
            뷰포트 밖으로 밀어 오른쪽 열이 잘리고 가로 스크롤도 생기지 않는다. */
     min-height: 0;
     min-width: 0;
+    /* .main 의 높이를 백분율이 아니라 flex 로 준다 — 셸의 높이가 «부모의 확정 높이» 가 아니라
+       max-height 상한에서 나올 때 백분율은 풀리지 않는다(auto 로 떨어져 .main 이 본문 길이가 된다).
+       늘어난(stretch) 항목의 크기는 그 경우에도 이 래퍼에 정해진다. */
+    display: flex;
+    flex-direction: column;
   }
 
   .main {
     position: relative;
-    height: 100%;
+    flex: 1 1 auto;
+    min-height: 0;
     padding: var(--u-space-3xl, 32px);
     background: var(--u-bg-color, #FFFFFF);
     overflow: auto;
@@ -327,7 +338,7 @@ var t = e`
     right: 0;
     opacity: 0;
     transform: translateY(-4px);
-    transition: opacity 0.3s ease, transform 0.3s ease;
+    transition: opacity var(--u-duration-slow, 320ms) ease, transform var(--u-duration-slow, 320ms) ease;
     pointer-events: none;
   }
   .main u-progress-bar[visible] {
@@ -377,6 +388,7 @@ var t = e`
     :host {
       display: block;
       height: auto;
+      max-height: none;
       overflow: visible;
     }
     .sidebar,
@@ -385,7 +397,10 @@ var t = e`
     .main u-progress-bar {
       display: none;
     }
+    /* block 으로 되돌린다 — flex 컨테이너는 자식의 여백 접힘을 막아, 화면 마지막 블록의 아래
+       여백이 종이 위에서 셸을 뚫고 접히지 못한다. */
     .main-region {
+      display: block;
       height: auto;
     }
     .main {

package/package.json

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

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

@@ -275,7 +275,10 @@ Parts available for `styles` overrides on the root layout:
 ## Sizing
 
 `<u-sidebar-layout>` is a shell: `:host` is `height: 100%` with `overflow: hidden`, so **its
-height comes from the parent** — it never sizes itself. `app.load()` covers the default case: when
+height comes from the parent** — it never sizes itself. It is also capped at `max-height: 100dvh`:
+whatever the parent does, the shell is never taller than the viewport, so the route content always
+scrolls inside `part="main"` and the sidebar (navigation and footer) stays on screen. A parent
+shorter than the viewport still wins. `app.load()` covers the default case: when
 `root` is `document.body` it gives the body `margin: 0`, and on screen `width: 100vw; height: 100vh`.
 These come from a document stylesheet at zero specificity, not inline styles — any `body { … }`
 rule of your own wins.
@@ -283,7 +286,8 @@ rule of your own wins.
 ⚠ **A custom `root` receives no styling.** Hand it a container with no height of its own and
 `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 — with no error and nothing in
-the console. Give that container a height — for screen only, so printing is not cut at one page:
+the console. (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:
 
 ```css
 @media screen {