@iyulab/router 0.14.0 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # Changelog
 
+## [0.15.0] - 2026-09-16
+
+### Changed
+
+- **`<u-outlet>` now grows when a screen overflows a fixed-height parent.** 0.14.0 declared
+  `display: block; height: 100%`, which gives a screen the height it needs to fill a sized
+  parent but also pins the outlet to exactly that height. A screen taller than the parent
+  therefore overflowed the outlet's box instead of growing it, and a scrolling ancestor adds
+  its end padding to the scrollable area of its *in-flow children*, not of what those children
+  overflow with. The end gutter dropped out of the scrollable area: scrolling to the bottom of
+  a long screen left the content flush against the container's edge, while the gutter survived
+  on the other three sides.
+
+  Swapping `height` for `min-height` is not the fix. A percentage height only resolves against
+  a parent whose `height` is specified, and a minimum does not satisfy that — so on a block (or
+  flex) box a descendant's `height: 100%` computes to `auto`, and every layout built to fill the
+  viewport collapses to its content height.
+
+  A grid container gives both behaviors at once. A grid item stretches to its area by default,
+  which fills without resolving a percentage, so the chain survives while the container's own
+  height is indefinite — and because that height is `auto`, the box grows past the minimum when
+  content demands it. The rule is now:
+
+  ```css
+  :where(u-outlet) { display: grid; min-height: 100%; }
+  ```
+
+  Multiple children behave as before: a track stretches, but an item with a definite height does
+  not. The rule deliberately omits `align-content` and relies on the initial `normal` — setting
+  `align-content: start` stops the track from stretching and silently voids the fill chain.
+
+  Specificity is still zero, so an application's own `u-outlet { … }` rule wins without
+  `!important`, exactly as in 0.14.0. `u-outlet { display: block; height: 100% }` restores the
+  0.14.0 box model and `u-outlet { display: inline }` restores the pre-0.14.0 one.
+
+### Contract addition
+
+- **Making the outlet *smaller* now takes two declarations.** `min-height` is a floor, so
+  `u-outlet { height: 200px }` on its own still measures the parent's height. Write
+  `u-outlet { min-height: 0; height: 200px }`. Making the outlet larger, or replacing its
+  `display`, needs nothing extra. This is the only behavioral difference for an application
+  that was already overriding the rule.
+
+### Tests
+
+- The browser suite covering the outlet's box model grows from 9 cases to 15. The overflow
+  topology — a parent with a definite height holding a taller child — was not covered before,
+  which is why the previous rule shipped green: the suite pinned "an auto-height parent leaves
+  the outlet auto" but never its opposite. Also pinned now: the two-declaration override above,
+  multiple children keeping their own heights, and `align-content` breaking the fill chain.
+
 ## [0.14.0] - 2026-09-16
 
 ### Changed

package/README.md

@@ -143,33 +143,62 @@ const routes = [
 
 ## Outlet Layout
 
-`<u-outlet>` declares its own `display: block`. 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 one):
+`<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
+one):
 
 ```css
-:where(u-outlet) { display: block; height: 100%; }
+:where(u-outlet) { display: grid; min-height: 100%; }
 ```
 
-`height: 100%` is part of the same rule for a reason. A percentage height resolves against
-the nearest block container, so making the outlet a block moves that reference from the box
-*above* the outlet onto the outlet itself — and an `auto` height there voids the percentage
-silently, collapsing a full-height screen to its content height. Declaring `height: 100%`
-keeps the chain intact, and resolves to `auto` whenever the parent's height is `auto`, so
-ordinary document flow and printing are unaffected.
+The outlet has to be two things at once, and no single declaration gives both:
 
-The `:where()` wrapper makes the rule's specificity zero, so **any** `u-outlet { … }`
-rule your application writes wins, regardless of sheet order and without `!important`:
+1. **It passes a sized parent's height down**, so a screen's `height: 100%` resolves here.
+2. **It grows with a screen taller than the parent**, so the overflow stays inside the
+   outlet's box rather than escaping it.
+
+`height: 100%` gives only the first. It pins the outlet to the parent's height, so a taller
+screen overflows the outlet — and a scrolling ancestor adds its end padding to the scrollable
+area of its in-flow children, not of what those children overflow with. The end gutter drops
+out: scrolling to the bottom of a long screen leaves the content flush against the container's
+edge while the gutter survives on the other three sides.
+
+`min-height: 100%` alone breaks the first. A percentage height only resolves against a parent
+whose `height` is specified, and a minimum does not satisfy that — so on a block (or flex) box
+a descendant's `height: 100%` computes to `auto` and every fill-the-viewport layout collapses
+to its content height.
+
+A grid container gives both. A grid item stretches to its area by default, which fills without
+resolving a percentage, so the chain survives while the container's own height is indefinite —
+and because that height is `auto`, the box grows past the minimum when content demands it.
+Multiple children are unaffected: a track stretches, but an item with a definite height does not.
+
+The rule deliberately omits `align-content`; it relies on the initial `normal`. Setting
+`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.
+
+### Overriding it
+
+The `:where()` wrapper makes the rule's specificity zero, so **any** `u-outlet { … }` rule your
+application writes wins, regardless of sheet order and without `!important`:
 
 ```css
-u-outlet { display: flex; }          /* wins */
-u-outlet { height: auto; }           /* keep the box, drop the fill */
-u-outlet { display: inline; }        /* restores the pre-0.14.0 behavior */
-@media print { u-outlet { … } }      /* wins */
+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 */
 ```
 
-The rule is not media-scoped: the outlet is a block box on screen and in print alike.
+> **Making the outlet *smaller* takes two declarations, not one.** `min-height` is a floor, so
+> `u-outlet { height: 200px }` on its own still measures the parent's height. Write
+> `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-tRZgJ1SR.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-RyrbTDel.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-tRZgJ1SR.js";
+import { s as UOutlet$1, t as ULink$1 } from "./share-RyrbTDel.js";
 import React from "react";
 import { createComponent } from "@lit/react";
 //#region src/react.ts

package/dist/{share-tRZgJ1SR.js → share-RyrbTDel.js}

@@ -15,17 +15,49 @@ import { ifDefined } from "lit/directives/if-defined.js";
 * ⚠매체를 가르지 않는다 — 인라인 컨테이너는 화면에서도 의도된 적이 없다(라인 박스 때문에
 *   높이를 줄 수도, 백분율로 채울 수도 없었다). 인쇄에만 한정하면 화면·인쇄가 서로 다른
 *   상자 모델을 갖게 되어 같은 부류의 차이가 다음에 또 난다.
-* 🔴`height: 100%` 가 함께 있어야 한다 — `display` 만 바꾸면 **백분율 높이의 기준 상자가
-*   바뀐다.** 종전(inline)에는 아웃렛이 블록 컨테이너가 아니라, 라우트 화면의 `height: 100%`
-*   가 그 «위» 의 블록(셸의 본문 영역)에 대해 풀렸다. 아웃렛을 block 으로 만들면 기준이
-*   아웃렛 자신이 되는데 그 높이가 `auto` 라 백분율이 무효가 되고, 화면을 채우도록 만들어진
-*   레이아웃(`u-master-detail-layout` 의 `:host{height:100%}` 등)이 내용 높이로 무너진다.
-*   실측(chromium): 같은 화면이 inline 747px → block 60px → block+height:100% 747px.
-*   ⚠부모 높이가 `auto` 면 `100%` 는 `auto` 로 풀리므로 인쇄(셸이 높이를 놓는다)와 일반
-*   문서 흐름에는 영향이 없다 — 이 선언이 «채우기» 를 강요하는 것은 부모가 높이를 가진
-*   경우뿐이고, 그것이 종전 동작이다.
+*
+* ## 왜 `grid` + `min-height` 인가 — 두 요구가 한 선언으로는 안 된다
+*
+* 아웃렛은 **동시에 두 가지**여야 한다:
+*   ⑴부모가 높이를 가지면 **그 높이를 자손에게 물려준다**(자손의 `height:100%` 가 여기서 풀린다)
+*   ⑵화면이 부모보다 크면 **자기도 함께 자란다**(넘침이 아웃렛 «밖» 으로 새지 않는다)
+*
+* 🔴`height: 100%` 는 ⑴만 준다. 0.14.0 이 그 판이었다 — 콘텐츠 영역이 고정 높이일 때
+*   아웃렛이 그 높이로 **못 박히고**
+*   화면이 밖으로 넘쳐, 스크롤 컨테이너의 끝 패딩이 스크롤 영역에서 빠진다 — 긴 화면을 끝까지
+*   내리면 **내용이 바닥에 붙는다**(거터가 위·좌·우에만 남는다).
+* 🔴`min-height: 100%` 만으로는 ⑴이 깨진다. 백분율 높이는 부모의 **`height`** 가 명시됐을 때만
+*   풀리고 `min-height` 는 그 조건을 만족시키지 않는다(CSS2.1 §10.5) — 그래서 `block` 이든
+*   `flex` 든 `min-height` 로 바꾸면 자손의 `height:100%` 가 `auto` 로 풀려 화면이 무너진다.
+* ✅`grid` 만 둘을 함께 준다. 그리드 항목의 기본 `align-self: stretch` 가 «백분율을 푸는 것» 이
+*   아니라 **영역을 채우는 것**이라, 컨테이너 높이가 부정(indefinite)이어도 ⑴이 성립한다.
+*   그리고 컨테이너 높이가 `auto` 라 내용이 크면 ⑵대로 자란다.
+*
+* 실측(chromium · 셸 본문 720px `padding:32px` `overflow:auto` / 화면 1588px):
+*
+* | 규칙                             | 전체높이: 표 | 넘침: `scrollHeight` | 아웃렛 박스 |
+* |----------------------------------|-------------:|---------------------:|------------:|
+* | `inline`(0.13.0 이전)            |          616 |                    — |           — |
+* | `block; height:100%`(0.14.0)     |          616 |            🔴 1620   |  656(고정)  |
+* | `contents`                       |          616 |                 1652 |  0(박스 없음)|
+* | **`grid; min-height:100%`**      |      **616** |             **1652** | **1588**    |
+* | `flex column; min-height:100%`   |        🔴 0  |                 1652 |        1588 |
+* | `block; min-height:100%`         |        🔴 0  |                 1652 |        1588 |
+*
+* ⚠**`contents` 를 택하지 않은 이유는 수치가 아니라 박스다** — 박스가 사라지면 소비자의
+*   `u-outlet { padding }`·`{ background }` 와 `getBoundingClientRect()` 가 **오류 없이 아무 일도
+*   안 하게** 된다. 아웃렛이 높이를 끊는 증상 자체가 「내 CSS 가 안 먹는다」로 나타나므로,
+*   그 부류를 새로 만들지 않는다. grid 는 `contents` 의 두 수치를 내면서 박스를 남긴다.
+* ⚠**`align-content` 를 선언하지 말 것** — `start` 를 주면 트랙이 늘어나지 않아 ⑴이 조용히
+*   깨진다(실측: 자손 400px → 0px). 기본값 `normal` 이어야 한다.
+* ⚠**자식이 둘 이상이어도 block 과 같다**(실측: 20px·30px 자식이 각각 20·30 그대로) — 트랙은
+*   늘어나지만 높이가 정해진 항목은 `stretch` 대상이 아니다.
+* ⚠**부모 높이가 `auto` 면 `min-height:100%` 도 `auto` 로 풀린다** — 일반 문서 흐름과 인쇄를
+*   가두지 않는다.
+* 🔴**소비자가 아웃렛을 «줄이려면» `height` 만으로는 부족하고 `min-height: 0` 이 함께 필요하다**
+*   — 0.14.0 대비 유일한 계약 추가이며 README·CHANGELOG·참조 문서에 적혀 있다.
 */
-var OUTLET_DISPLAY_CSS = ":where(u-outlet) { display: block; height: 100%; }";
+var OUTLET_DISPLAY_CSS = ":where(u-outlet) { display: grid; min-height: 100%; }";
 /** 시트를 이미 채택한 트리 — 같은 트리에 두 번 넣지 않는다. */
 var styledRoots = /* @__PURE__ */ new WeakSet();
 /**
@@ -1114,12 +1146,12 @@ function catchBasepath(basepath) {
 	return basepath;
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.150.0/helpers/esm/decorateMetadata.js
 function __decorateMetadata(k, v) {
 	if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.150.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/router",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "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

@@ -40,33 +40,63 @@ export function AppRoot() {
 
 ## Outlet Layout
 
-`<u-outlet>` declares its own `display: block`. 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 one):
+`<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
+one):
 
 ```css
-:where(u-outlet) { display: block; height: 100%; }
+:where(u-outlet) { display: grid; min-height: 100%; }
 ```
 
-`height: 100%` is part of the same rule for a reason. A percentage height resolves against
-the nearest block container, so making the outlet a block moves that reference from the box
-*above* the outlet onto the outlet itself — and an `auto` height there voids the percentage
-silently, collapsing a full-height screen to its content height. Declaring `height: 100%`
-keeps the chain intact, and resolves to `auto` whenever the parent's height is `auto`, so
-ordinary document flow and printing are unaffected.
+The outlet has to be two things at once, and no single declaration gives both:
 
-The `:where()` wrapper makes the rule's specificity zero, so **any** `u-outlet { … }`
-rule your application writes wins, regardless of sheet order and without `!important`:
+1. **It passes a sized parent's height down**, so a screen's `height: 100%` resolves here.
+2. **It grows with a screen taller than the parent**, so the overflow stays inside the
+   outlet's box rather than escaping it.
+
+`height: 100%` gives only the first. It pins the outlet to the parent's height, so a taller
+screen overflows the outlet — and a scrolling ancestor adds its end padding to the scrollable
+area of its in-flow children, not of what those children overflow with. The end gutter drops
+out: scrolling to the bottom of a long screen leaves the content flush against the container's
+edge while the gutter survives on the other three sides.
+
+`min-height: 100%` alone breaks the first. A percentage height only resolves against a parent
+whose `height` is specified, and a minimum does not satisfy that — so on a block (or flex) box
+a descendant's `height: 100%` computes to `auto` and every fill-the-viewport layout collapses
+to its content height.
+
+A grid container gives both. A grid item stretches to its area by default, which fills without
+resolving a percentage, so the chain survives while the container's own height is indefinite —
+and because that height is `auto`, the box grows past the minimum when content demands it.
+Multiple children are unaffected: a track stretches, but an item with a definite height does not.
+
+The rule deliberately omits `align-content`; it relies on the initial `normal`. Setting
+`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.
+
+### Overriding it
+
+The `:where()` wrapper makes the rule's specificity zero, so **any** `u-outlet { … }` rule your
+application writes wins, regardless of sheet order and without `!important`:
 
 ```css
-u-outlet { display: flex; }          /* wins */
-u-outlet { height: auto; }           /* keep the box, drop the fill */
-u-outlet { display: inline; }        /* restores the pre-0.14.0 behavior */
-@media print { u-outlet { … } }      /* wins */
+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 */
 ```
 
-The rule is not media-scoped: the outlet is a block box on screen and in print alike.
+> **Making the outlet *smaller* takes two declarations, not one.** `min-height` is a floor, so
+> `u-outlet { height: 200px }` on its own still measures the parent's height. Write
+> `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