@iyulab/router 0.15.0 → 0.15.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [0.15.1] - 2026-09-17
+
+### Fixed
+
+- **Printing no longer adds a trailing blank page when a screen's last block has a bottom
+  margin.** 0.15.0 made `<u-outlet>` a grid container in every medium. A grid container keeps
+  its children's margins inside its own box, so the last block's bottom margin added to the
+  outlet's height; when the content ended within that margin of a page boundary, the outlet
+  spilled onto a page that held only the margin. In print media the outlet is now a block box,
+  which lets the margin collapse past it and be truncated at the page break:
+
+  ```css
+  @media print { :where(u-outlet) { display: block; } }
+  ```
+
+  Screen layout is unchanged. The grid only matters when the parent has a definite height, and
+  an application shell normally sets one for screen media only.
+
 ## [0.15.0] - 2026-09-16
 
 ### Changed

package/README.md

@@ -144,12 +144,13 @@ const routes = [
 ## Outlet Layout
 
 `<u-outlet>` declares its own box model. A custom element's UA default is `inline`, which
-would put a route's block-level screen inside an inline box — so the outlet adopts a single
-rule on whichever tree it is connected to (the document, or the shadow root if it lives in
+would put a route's block-level screen inside an inline box — so the outlet adopts its
+rules on whichever tree it is connected to (the document, or the shadow root if it lives in
 one):
 
 ```css
 :where(u-outlet) { display: grid; min-height: 100%; }
+@media print { :where(u-outlet) { display: block; } }
 ```
 
 The outlet has to be two things at once, and no single declaration gives both:
@@ -178,11 +179,25 @@ The rule deliberately omits `align-content`; it relies on the initial `normal`.
 `align-content: start` stops the track from stretching and silently voids case 1.
 
 When the parent's own height is `auto`, `min-height: 100%` resolves to `auto` too, so ordinary
-document flow and printing are unaffected.
+document flow is unaffected.
+
+### Printing
+
+In print media the outlet is a plain block box instead of a grid container. A grid container is
+an independent formatting context, so the bottom margin of a screen's last block cannot collapse
+through it — the margin lands *inside* the outlet's box and adds to its height. On screen that is
+harmless. On paper it is not: when content ends within that margin of a page boundary, the box
+spills onto a new page that holds nothing but the margin. As a block box, the outlet lets the
+margin collapse past it to the end of the document, and a margin that meets a page break is
+truncated there, so no trailing blank page appears.
+
+Print loses nothing by this. The grid exists to pass a *sized* parent's height down, and an
+application shell normally sizes itself to the viewport only for screen media; in print the
+parent's height is `auto`, and `min-height: 100%` resolves to nothing.
 
 ### Overriding it
 
-The `:where()` wrapper makes the rule's specificity zero, so **any** `u-outlet { … }` rule your
+The `:where()` wrapper makes both rules' specificity zero, so **any** `u-outlet { … }` rule your
 application writes wins, regardless of sheet order and without `!important`:
 
 ```css
@@ -190,7 +205,7 @@ u-outlet { display: flex; }                    /* wins */
 u-outlet { display: contents; }                /* remove the box entirely */
 u-outlet { display: block; height: 100%; }     /* restores the 0.14.0 behavior */
 u-outlet { display: inline; }                  /* restores the pre-0.14.0 behavior */
-@media print { u-outlet { … } }                /* wins */
+@media print { u-outlet { display: grid; } }  /* restores the 0.15.0 print behavior */
 ```
 
 > **Making the outlet *smaller* takes two declarations, not one.** `min-height` is a floor, so
@@ -198,7 +213,6 @@ u-outlet { display: inline; }                  /* restores the pre-0.14.0 behavi
 > `u-outlet { min-height: 0; height: 200px }`. Making it *larger*, or replacing `display`, needs
 > nothing extra. This is the only contract addition in 0.15.0.
 
-The rule is not media-scoped: the outlet is a block-level box on screen and in print alike.
 
 `<u-link>` supports `href`, `target`, `rel`, and `navigate`.
 

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as isExternalUrl, i as absolutePath, n as __decorate, o as parseUrl, r as __decorateMetadata, s as UOutlet, t as ULink } from "./share-RyrbTDel.js";
+import { a as isExternalUrl, i as absolutePath, n as __decorate, o as parseUrl, r as __decorateMetadata, s as UOutlet, t as ULink } from "./share-Cwn-vX3y.js";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 //#region src/types/RouteError.ts

package/dist/react.js

@@ -1,4 +1,4 @@
-import { s as UOutlet$1, t as ULink$1 } from "./share-RyrbTDel.js";
+import { s as UOutlet$1, t as ULink$1 } from "./share-Cwn-vX3y.js";
 import React from "react";
 import { createComponent } from "@lit/react";
 //#region src/react.ts

package/dist/{share-RyrbTDel.js → share-Cwn-vX3y.js}

@@ -12,9 +12,10 @@ import { ifDefined } from "lit/directives/if-defined.js";
 *   무관하게 `!important` 없이 이긴다.
 * ⚠constructable 시트(`adoptedStyleSheets`)를 쓴다 — `<style>` 요소와 달리 CSP 의 인라인
 *   스타일 제한에 걸리지 않는다. 지원하지 않는 환경에서는 `<style>` 로 대신한다.
-* ⚠매체를 가르지 않는다 — 인라인 컨테이너는 화면에서도 의도된 적이 없다(라인 박스 때문에
-*   높이를 줄 수도, 백분율로 채울 수도 없었다). 인쇄에만 한정하면 화면·인쇄가 서로 다른
-*   상자 모델을 갖게 되어 같은 부류의 차이가 다음에 또 난다.
+* ⚠«인라인이 아니다» 는 매체를 가르지 않는다 — 인라인 컨테이너는 화면에서도 의도된 적이 없다
+*   (라인 박스 때문에 높이를 줄 수도, 백분율로 채울 수도 없었다). 인라인 결함을 인쇄에만 고치면
+*   화면에 같은 결함이 남는다.
+* 🔴**그러나 «어떤 블록 레벨 상자인가» 는 매체를 가른다** — 아래 「인쇄 매체」 절.
 *
 * ## 왜 `grid` + `min-height` 인가 — 두 요구가 한 선언으로는 안 된다
 *
@@ -56,8 +57,20 @@ import { ifDefined } from "lit/directives/if-defined.js";
 *   가두지 않는다.
 * 🔴**소비자가 아웃렛을 «줄이려면» `height` 만으로는 부족하고 `min-height: 0` 이 함께 필요하다**
 *   — 0.14.0 대비 유일한 계약 추가이며 README·CHANGELOG·참조 문서에 적혀 있다.
+*
+* ## 인쇄 매체 — `block` 으로 돌아간다 (0.15.1)
+*
+* 🔴**grid 는 자기 안에서 여백 접힘을 막는다.** 라우트 화면의 마지막 블록이 `margin-bottom` 을
+*   가지면 그 여백이 아웃렛 높이 «안으로» 들어온다(실측: 내용 300 + 여백 24 → 아웃렛 324).
+*   화면에서는 무해하지만, 인쇄에서는 내용 끝이 쪽 경계에서 그 여백 이내에 있으면 **빈 꼬리 쪽**
+*   이 생긴다. `block` 이면 여백이 문서 끝까지 접혀 나가고, 쪽 경계에 닿은 여백은 조각화에서
+*   잘린다(CSS Fragmentation §5.2) — 소비자 실측: `block` 1쪽 ↔ `grid` 2쪽.
+* ✅**인쇄에서 grid 가 주던 이득은 없다.** grid 의 존재 이유는 ⑴(정해진 부모 높이를 자손에게)
+*   인데, 셸은 뷰포트 높이를 `@media screen` 안에서만 건다 — 인쇄에서 부모 높이는 `auto` 이고
+*   `min-height: 100%` 도 0 으로 풀린다. ⇒ 인쇄에서 grid 는 **여백을 가두기만** 한다.
+* ⚠같은 `:where()` 라 특이도 0 그대로다 — 소비자 규칙은 인쇄에서도 `!important` 없이 이긴다.
 */
-var OUTLET_DISPLAY_CSS = ":where(u-outlet) { display: grid; min-height: 100%; }";
+var OUTLET_DISPLAY_CSS = [":where(u-outlet) { display: grid; min-height: 100%; }", "@media print { :where(u-outlet) { display: block; } }"].join("\n");
 /** 시트를 이미 채택한 트리 — 같은 트리에 두 번 넣지 않는다. */
 var styledRoots = /* @__PURE__ */ new WeakSet();
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/router",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "A modern client-side router for web applications with support for Lit and React components",
   "keywords": [
     "lit",

package/skills/iyulab-router/references/components.md

@@ -41,12 +41,13 @@ export function AppRoot() {
 ## Outlet Layout
 
 `<u-outlet>` declares its own box model. A custom element's UA default is `inline`, which
-would put a route's block-level screen inside an inline box — so the outlet adopts a single
-rule on whichever tree it is connected to (the document, or the shadow root if it lives in
+would put a route's block-level screen inside an inline box — so the outlet adopts its
+rules on whichever tree it is connected to (the document, or the shadow root if it lives in
 one):
 
 ```css
 :where(u-outlet) { display: grid; min-height: 100%; }
+@media print { :where(u-outlet) { display: block; } }
 ```
 
 The outlet has to be two things at once, and no single declaration gives both:
@@ -75,11 +76,25 @@ The rule deliberately omits `align-content`; it relies on the initial `normal`.
 `align-content: start` stops the track from stretching and silently voids case 1.
 
 When the parent's own height is `auto`, `min-height: 100%` resolves to `auto` too, so ordinary
-document flow and printing are unaffected.
+document flow is unaffected.
+
+### Printing
+
+In print media the outlet is a plain block box instead of a grid container. A grid container is
+an independent formatting context, so the bottom margin of a screen's last block cannot collapse
+through it — the margin lands *inside* the outlet's box and adds to its height. On screen that is
+harmless. On paper it is not: when content ends within that margin of a page boundary, the box
+spills onto a new page that holds nothing but the margin. As a block box, the outlet lets the
+margin collapse past it to the end of the document, and a margin that meets a page break is
+truncated there, so no trailing blank page appears.
+
+Print loses nothing by this. The grid exists to pass a *sized* parent's height down, and an
+application shell normally sizes itself to the viewport only for screen media; in print the
+parent's height is `auto`, and `min-height: 100%` resolves to nothing.
 
 ### Overriding it
 
-The `:where()` wrapper makes the rule's specificity zero, so **any** `u-outlet { … }` rule your
+The `:where()` wrapper makes both rules' specificity zero, so **any** `u-outlet { … }` rule your
 application writes wins, regardless of sheet order and without `!important`:
 
 ```css
@@ -87,7 +102,7 @@ u-outlet { display: flex; }                    /* wins */
 u-outlet { display: contents; }                /* remove the box entirely */
 u-outlet { display: block; height: 100%; }     /* restores the 0.14.0 behavior */
 u-outlet { display: inline; }                  /* restores the pre-0.14.0 behavior */
-@media print { u-outlet { … } }                /* wins */
+@media print { u-outlet { display: grid; } }  /* restores the 0.15.0 print behavior */
 ```
 
 > **Making the outlet *smaller* takes two declarations, not one.** `min-height` is a floor, so
@@ -95,7 +110,6 @@ u-outlet { display: inline; }                  /* restores the pre-0.14.0 behavi
 > `u-outlet { min-height: 0; height: 200px }`. Making it *larger*, or replacing `display`, needs
 > nothing extra. This is the only contract addition in 0.15.0.
 
-The rule is not media-scoped: the outlet is a block-level box on screen and in print alike.
 
 
 ## Nested Outlet Rule