@iyulab/modern-app 0.57.0 → 0.59.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # Changelog
 
+## [0.59.0] - 2026-10-23
+
+### Fixed
+
+- **`<u-info-section layout="strip">` type-checks in JSX.** The `@iyulab/modern-app/react` augmentation of
+  `JSX.IntrinsicElements` declared only `min` for `u-info-section`, so the documented strip layout was a `TS2322`
+  for raw-tag JSX consumers. It now takes `layout?: InfoSectionLayout`. Types only — runtime is unchanged. A test now
+  compares every augmented tag with the attributes its element declares, so the two cannot drift apart again.
+- **Padding, borders and spacing survive a document-wide reset.** Under Tailwind's preflight
+  (`* { padding: 0; border: 0 solid; margin: 0 }`) a `u-info-section layout="strip"` cell lost its padding, a
+  `u-info-field appearance="tile"` lost its border and padding, a `u-group-box` lost its border, and `u-empty-state`,
+  `u-action-bar` and `u-page-header` lost their padding or the space under them, and a `u-info-field` trend icon
+  touched its caption. Document rules beat `:host` and
+  `::slotted()` rules whatever their specificity, so a box drawn on the host is a box any reset removes. These elements
+  now draw their box on a new `base` part inside the shadow root; the host only takes its place in the layout.
+  Restyle the box with `::part(base)` — padding or a border you set on the host now adds outside it. A strip cell that
+  is not a `u-info-field` still gets its padding as host padding.
+
+## [0.58.0] - 2026-10-23
+
+### Added
+
+- **A screen without the shell.** A route with `metadata: { shell: 'hidden' }` takes the whole viewport while it is
+  current — no sidebar, mobile header or page padding — for a wall display or a kiosk. The next ordinary route gets
+  the chrome back. The layout reflects it as `immersive`.
+- **A screen with its own theme.** `metadata: { theme: 'dark' | 'light' }` applies that theme while the route is
+  current without changing or storing the user's choice, and the next route returns to it. Needs `@iyulab/components`
+  with `Theme.override` (the next minor).
+
+### Fixed
+
+- **A sidebar link's count meets the text contrast floor under every palette.** It was dimmed with `opacity: 0.8`,
+  which fell below 4.5:1 where the resting link colour is already a mid grey (about 4.2:1 for `#5B5E63` on white).
+  The count now paints in the label's colour; it stays one type step smaller.
+
 ## [0.57.0] - 2026-10-23
 
 ### Added

package/dist/components/ActionBar.js

@@ -15,17 +15,19 @@ var l = class extends n {
 	}
 	render() {
 		return a`
-      <div class="danger ${this.hasDanger ? "" : "empty"}" part="danger">
-        <slot name="danger"
-          @slotchange=${(e) => this.hasDanger = r(e.target)}
-        ></slot>
+      <div class="base" part="base">
+        <div class="danger ${this.hasDanger ? "" : "empty"}" part="danger">
+          <slot name="danger"
+            @slotchange=${(e) => this.hasDanger = r(e.target)}
+          ></slot>
+        </div>
+        <div class="summary ${this.hasSummary ? "" : "empty"}" part="summary">
+          <slot name="summary"
+            @slotchange=${(e) => this.hasSummary = r(e.target)}
+          ></slot>
+        </div>
+        <div class="main" part="main"><slot></slot></div>
       </div>
-      <div class="summary ${this.hasSummary ? "" : "empty"}" part="summary">
-        <slot name="summary"
-          @slotchange=${(e) => this.hasSummary = r(e.target)}
-        ></slot>
-      </div>
-      <div class="main" part="main"><slot></slot></div>
     `;
 	}
 };

package/dist/components/ActionBar.styles.js

@@ -1,7 +1,13 @@
 import { css as e } from "lit";
 // src/components/ActionBar.styles.ts
 var t = e`
+  
+
   :host {
+    display: block;
+  }
+
+  .base {
     display: flex;
     align-items: center;
     gap: var(--u-space-sm, 8px);
@@ -67,8 +73,9 @@ var t = e`
     position: sticky;
     bottom: 0;
     background-color: var(--u-bg-color, #FFFFFF);
+  }
+  :host([sticky]) .base {
     border-top: 1px solid var(--u-border-color-weak, #EEEEEE);
-    padding: var(--u-space-md, 12px) var(--action-bar-padding-inline, 0);
   }
 `;
 export { t as styles };

package/dist/components/EmptyState.js

@@ -47,19 +47,21 @@ var d = class extends n {
 	render() {
 		let e = this.defaults, t = this.description || e.description;
 		return o`
-      <div class="icon" part="icon" aria-hidden="true">
-        <slot name="icon">${e.icon}</slot>
-      </div>
-      <!-- 오류는 경보다 — 그 범위는 이 상태가 전하는 사실 전체(제목 + 사유)다. 사유가 다음 행동(다시 시도 · 권한 요청 ·
-           조건 고치기)을 가르므로 제목만 읽히면 듣는 사람이 다른 사실을 받는다. 행동 슬롯은 밖. -->
-      <div class="message" part="message" role=${this.variant === "error" ? "alert" : s}>
-        <p class="title" part="title">${this.title || e.title}</p>
-        ${t ? o`<p class="description" part="description">${t}</p>` : s}
-      </div>
-      <div class="actions ${this.hasActions ? "" : "empty"}" part="actions">
-        <slot name="actions"
-          @slotchange=${(e) => this.hasActions = r(e.target)}
-        ></slot>
+      <div class="base" part="base">
+        <div class="icon" part="icon" aria-hidden="true">
+          <slot name="icon">${e.icon}</slot>
+        </div>
+        <!-- 오류는 경보다 — 그 범위는 이 상태가 전하는 사실 전체(제목 + 사유)다. 사유가 다음 행동(다시 시도 · 권한 요청 ·
+             조건 고치기)을 가르므로 제목만 읽히면 듣는 사람이 다른 사실을 받는다. 행동 슬롯은 밖. -->
+        <div class="message" part="message" role=${this.variant === "error" ? "alert" : s}>
+          <p class="title" part="title">${this.title || e.title}</p>
+          ${t ? o`<p class="description" part="description">${t}</p>` : s}
+        </div>
+        <div class="actions ${this.hasActions ? "" : "empty"}" part="actions">
+          <slot name="actions"
+            @slotchange=${(e) => this.hasActions = r(e.target)}
+          ></slot>
+        </div>
       </div>
     `;
 	}

package/dist/components/EmptyState.styles.js

@@ -1,7 +1,13 @@
 import { css as e } from "lit";
 // src/components/EmptyState.styles.ts
 var t = e`
+  
+
   :host {
+    display: block;
+  }
+
+  .base {
     display: flex;
     flex-direction: column;
     align-items: center;

package/dist/components/GroupBox.js

@@ -34,18 +34,21 @@ var f, p = {
 	render() {
 		let e = !!this.title || !!this.description || this.hasActions;
 		return a`
-      <div class="header ${this.divider ? "divider" : ""} ${e ? "" : "empty"}" part="header">
-        <div class="titles">
-          ${u`<${p[this.headingLevel]} class="title" part="title">${this.title}${this.title && this.meta ? a` <span class="meta" part="meta">${this.meta}</span>` : ""}</${p[this.headingLevel]}>`}
-          ${this.description ? a`<p class="description" part="description">${this.description}</p>` : o}
-        </div>
-        <div class="actions ${this.hasActions ? "" : "empty"}" part="actions">
-          <slot name="actions"
-            @slotchange=${(e) => this.hasActions = r(e.target)}
-          ></slot>
+      <div class="base" part="base">
+        <div class="header ${this.divider ? "divider" : ""} ${e ? "" : "empty"}" part="header">
+          <div class="titles">
+            ${u`<${p[this.headingLevel]} class="title" part="title">${this.title}${this.title && this.meta ? a` <span class="meta" part="meta">${this.meta}</span>` : ""}</${p[this.headingLevel]}>`}
+            ${this.description ? a`<p class="description" part="description">${this.description}</p>` : o}
+          </div>
+          <div class="actions ${this.hasActions ? "" : "empty"}" part="actions">
+            <slot name="actions"
+              @slotchange=${(e) => this.hasActions = r(e.target)}
+            ></slot>
+          </div>
         </div>
+        <div class="body ${this.flush ? "flush" : ""}" part="body"><slot></slot></div>
       </div>
-      <div class="body ${this.flush ? "flush" : ""}" part="body"><slot></slot></div>`;
+    `;
 	}
 };
 t([c({ type: String }), e("design:type", Object)], m.prototype, "title", void 0), t([c({ type: String }), e("design:type", String)], m.prototype, "meta", void 0), t([c({ type: String }), e("design:type", String)], m.prototype, "description", void 0), t([c({ type: Boolean }), e("design:type", Object)], m.prototype, "divider", void 0), t([c({ type: Boolean }), e("design:type", Object)], m.prototype, "flush", void 0), t([c({

package/dist/components/GroupBox.styles.js

@@ -1,8 +1,14 @@
 import { css as e } from "lit";
 // src/components/GroupBox.styles.ts
 var t = e`
+  
+
   :host {
     display: block;
+  }
+
+  .base {
+    display: block;
     
 
 

package/dist/components/InfoField.d.ts

@@ -31,6 +31,7 @@ export declare function isBlank(v: unknown): boolean;
  * @slot trend-icon - 추세 줄 앞의 상태 표시(예: 주의 아이콘). 추세 줄이 있을 때(`trend` · `trendLabel`) 그린다.
  * @slot visual - 값과 같은 줄 끝의 작은 그림(추세 미니 차트 · 진행 고리 등). 값을 대신하지 않는다 — 장식이면 `aria-hidden="true"`,
  *   그 자체로 정보면 자기 이름(`role="img"` + `aria-label`)을 준다. 비면 자리를 차지하지 않는다.
+ * @csspart base - 칸의 상자 — 타일의 면 · 테두리 · 여백과 지표 띠 칸의 여백을 호스트가 아니라 여기서 그린다(문서 전역 리셋에 지지 않게)
  * @csspart label - 라벨
  * @csspart value - 값
  * @csspart unit - 단위
@@ -141,6 +142,8 @@ export declare class InfoField extends StyledElement<ElementParts> {
     private nameSlottedWidgets;
     protected updated(changed: PropertyValues): void;
     /** `visual` 슬롯에 든 것이 있는가 — 비면 그 상자를 그리지 않는다(값 옆에 빈 간격을 남기지 않게). */
+    /** 추세 아이콘 슬롯이 찼는가 — 그 옆 간격은 섀도 안 상자가 갖는다(`::slotted` 여백은 문서의 전역 리셋에 진다). */
+    private hasTrendIcon;
     private hasVisual;
     private get hasSlotted();
     private formatValue;

package/dist/components/InfoField.js

@@ -14,7 +14,7 @@ function f(e) {
 }
 var p = class extends n {
 	constructor(...e) {
-		super(...e), this.label = "", this.blank = "—", this.numeric = !1, this.size = "default", this.appearance = "plain", this.namedWidgets = /* @__PURE__ */ new WeakMap(), this.hasVisual = !1;
+		super(...e), this.label = "", this.blank = "—", this.numeric = !1, this.size = "default", this.appearance = "plain", this.namedWidgets = /* @__PURE__ */ new WeakMap(), this.hasTrendIcon = !1, this.hasVisual = !1;
 	}
 	static {
 		this.styles = [super.styles, r];
@@ -41,21 +41,25 @@ var p = class extends n {
 	render() {
 		let e = !this.hasSlotted && f(this.value), t = e && this.blankReason ? this.blankReason : void 0, n = this.numeric || this.format === "number" || this.format === "currency", r = this.trend !== void 0 || this.trendLabel !== void 0, a = this.tone ?? d(this.trend), o = this.trend === "up" ? "▲" : this.trend === "down" ? "▼" : "", s = !e && this.unit ? i`<span class="unit" part="unit">${this.unit}</span>` : "";
 		return i`
-      <div class="label" part="label">${this.label}</div>
-      <div class="value-row">
-        <div class="value ${n ? "numeric" : ""} ${e ? "blank" : ""} ${t ? "reasoned" : ""} tone-${a}" part="value">${this.hasSlotted ? i`<slot @slotchange=${() => void this.nameSlottedWidgets()}></slot>` : e ? this.blank : this.formatValue()}${s}</div>
-        <div class="visual" part="visual" ?hidden=${!this.hasVisual}>
-          <slot name="visual" @slotchange=${(e) => {
+      <div class="base" part="base">
+        <div class="label" part="label">${this.label}</div>
+        <div class="value-row">
+          <div class="value ${n ? "numeric" : ""} ${e ? "blank" : ""} ${t ? "reasoned" : ""} tone-${a}" part="value">${this.hasSlotted ? i`<slot @slotchange=${() => void this.nameSlottedWidgets()}></slot>` : e ? this.blank : this.formatValue()}${s}</div>
+          <div class="visual" part="visual" ?hidden=${!this.hasVisual}>
+            <slot name="visual" @slotchange=${(e) => {
 			this.hasVisual = e.target.assignedElements().length > 0;
 		}}></slot>
+          </div>
         </div>
+        ${r ? i`
+          <div class="trend tone-${a}" part="trend">
+            <span class="trend-icon" ?hidden=${!this.hasTrendIcon}><slot name="trend-icon" @slotchange=${(e) => {
+			this.hasTrendIcon = e.target.assignedElements().length > 0;
+		}}></slot></span>${o ? i`<span aria-hidden="true">${o}</span> ` : ""}${this.trendLabel ?? ""}
+          </div>
+        ` : ""}
+        ${t ?? this.description ? i`<div class="description" part="description">${t ?? this.description}</div>` : ""}
       </div>
-      ${r ? i`
-        <div class="trend tone-${a}" part="trend">
-          <slot name="trend-icon"></slot>${o ? i`<span aria-hidden="true">${o}</span> ` : ""}${this.trendLabel ?? ""}
-        </div>
-      ` : ""}
-      ${t ?? this.description ? i`<div class="description" part="description">${t ?? this.description}</div>` : ""}
     `;
 	}
 };
@@ -71,5 +75,5 @@ t([o({ type: String }), e("design:type", Object)], p.prototype, "label", void 0)
 }), e("design:type", Object)], p.prototype, "appearance", void 0), t([o({
 	type: String,
 	attribute: "blank-reason"
-}), e("design:type", String)], p.prototype, "blankReason", void 0), t([o({ type: String }), e("design:type", String)], p.prototype, "description", void 0), t([s(), e("design:type", Object)], p.prototype, "hasVisual", void 0), p = t([a("u-info-field")], p);
+}), e("design:type", String)], p.prototype, "blankReason", void 0), t([o({ type: String }), e("design:type", String)], p.prototype, "description", void 0), t([s(), e("design:type", Object)], p.prototype, "hasTrendIcon", void 0), t([s(), e("design:type", Object)], p.prototype, "hasVisual", void 0), p = t([a("u-info-field")], p);
 export { p as InfoField, f as isBlank };

package/dist/components/InfoField.styles.js

@@ -6,6 +6,17 @@ var t = e`
     min-width: 0;
   }
 
+  
+
+
+
+  .base {
+    padding: var(--_info-field-padding, 0);
+  }
+  .base > * {
+    --_info-field-padding: initial;
+  }
+
   .label {
     font-size: var(--u-text-caption-size, 12px);
     font-weight: var(--u-text-caption-weight, 400);
@@ -63,28 +74,29 @@ var t = e`
   }
 
   
-  :host([appearance="tile"]) {
-    padding: var(--u-space-md, 12px);
+  :host([appearance="tile"]) .base {
+    box-sizing: border-box;
+    height: 100%;
+    padding: var(--_info-field-padding, var(--u-space-md, 12px));
     border: 1px solid var(--u-border-color, #E0E0E0);
     border-radius: var(--u-radius-xl, 8px); 
     background-color: var(--u-bg-color, #FFFFFF);
-    box-sizing: border-box;
   }
   
-  :host([appearance="tile"][tone="warning"]) {
+  :host([appearance="tile"][tone="warning"]) .base {
     background-color: var(--u-warning-bg-color, #FFF59D);
     border-color: var(--u-warning-color-weak, #FFEB3B);
   }
-  :host([appearance="tile"][tone="negative"]) {
+  :host([appearance="tile"][tone="negative"]) .base {
     background-color: var(--u-danger-bg-color, #FFEBEE);
     border-color: var(--u-danger-color-weak, #F44336);
   }
-  :host([appearance="tile"][tone="positive"]) {
+  :host([appearance="tile"][tone="positive"]) .base {
     background-color: var(--u-success-bg-color, #E8F5E9);
     border-color: var(--u-success-color-weak, #4CAF50);
   }
   @media (forced-colors: active) {
-    :host([appearance="tile"]) { border-color: CanvasText; }
+    :host([appearance="tile"]) .base { border-color: CanvasText; }
   }
 
   
@@ -146,8 +158,14 @@ var t = e`
     margin-top: var(--u-space-3xs, 2px);
   }
   
-  ::slotted([slot="trend-icon"]) {
+
+  .trend-icon {
     margin-inline-end: 0.3em;
+  }
+  .trend-icon[hidden] {
+    display: none;
+  }
+  ::slotted([slot="trend-icon"]) {
     vertical-align: -0.125em;
   }
 

package/dist/components/InfoSection.styles.js

@@ -25,11 +25,18 @@ var t = e`
     border-radius: var(--u-radius-xl, 8px);
     overflow: hidden;
   }
+  
+
+
   :host([layout="strip"]) ::slotted(*) {
     flex: 1 1 calc((640px - 100%) * 999);
     min-width: 0;
-    padding: var(--u-space-md, 12px) var(--u-space-lg, 16px);
     background: var(--u-bg-color, #FFFFFF);
+    --_info-field-padding: var(--u-space-md, 12px) var(--u-space-lg, 16px);
+  }
+  
+  :host([layout="strip"]) ::slotted(:not(u-info-field)) {
+    padding: var(--u-space-md, 12px) var(--u-space-lg, 16px);
   }
 `;
 export { t as styles };

package/dist/components/PageHeader.js

@@ -16,27 +16,29 @@ var d = class extends n {
 	}
 	render() {
 		return o`
-      ${this.back ? o`<a class="back" part="back" href=${this.back}>${this.backLabel || i(this.locale || void 0).back}</a>` : s}
-      <div class="heading" part="heading">
-        <div class="eyebrow ${this.eyebrow || this.hasEyebrow ? "" : "empty"}" part="eyebrow">
-          <slot name="eyebrow"
-            @slotchange=${(e) => this.hasEyebrow = r(e.target)}
-          >${this.eyebrow ?? s}</slot>
+      <div class="base" part="base">
+        ${this.back ? o`<a class="back" part="back" href=${this.back}>${this.backLabel || i(this.locale || void 0).back}</a>` : s}
+        <div class="heading" part="heading">
+          <div class="eyebrow ${this.eyebrow || this.hasEyebrow ? "" : "empty"}" part="eyebrow">
+            <slot name="eyebrow"
+              @slotchange=${(e) => this.hasEyebrow = r(e.target)}
+            >${this.eyebrow ?? s}</slot>
+          </div>
+          <div class="title-row">
+            <h1 class="title" part="title">${this.title}</h1>
+            <span class="status ${this.hasStatus ? "" : "empty"}" part="status">
+              <slot name="status"
+                @slotchange=${(e) => this.hasStatus = r(e.target)}
+              ></slot>
+            </span>
+          </div>
+          ${this.subtitle ? o`<p class="subtitle" part="subtitle">${this.subtitle}</p>` : s}
         </div>
-        <div class="title-row">
-          <h1 class="title" part="title">${this.title}</h1>
-          <span class="status ${this.hasStatus ? "" : "empty"}" part="status">
-            <slot name="status"
-              @slotchange=${(e) => this.hasStatus = r(e.target)}
-            ></slot>
-          </span>
+        <div class="actions ${this.hasActions ? "" : "empty"}" part="actions">
+          <slot name="actions"
+            @slotchange=${(e) => this.hasActions = r(e.target)}
+          ></slot>
         </div>
-        ${this.subtitle ? o`<p class="subtitle" part="subtitle">${this.subtitle}</p>` : s}
-      </div>
-      <div class="actions ${this.hasActions ? "" : "empty"}" part="actions">
-        <slot name="actions"
-          @slotchange=${(e) => this.hasActions = r(e.target)}
-        ></slot>
       </div>
     `;
 	}

package/dist/components/PageHeader.styles.js

@@ -1,7 +1,13 @@
 import { css as e } from "lit";
 // src/components/PageHeader.styles.ts
 var t = e`
+  
+
   :host {
+    display: block;
+  }
+
+  .base {
     display: flex;
     align-items: flex-start;
     gap: var(--u-space-md, 12px);

package/dist/components/SidebarLink.styles.js

@@ -106,13 +106,13 @@ var t = e`
 
   
 
+
   .count {
     flex: none;
     margin-inline-start: auto;
     font-size: var(--u-text-overline-size, 11px);
     font-weight: var(--u-text-caption-weight, 400);
     font-variant-numeric: tabular-nums;
-    opacity: 0.8;
   }
   .count[compact] {
     position: absolute;

package/dist/components/SidebarSection.js

@@ -14,17 +14,19 @@ var s = class extends n {
 	}
 	render() {
 		return i`
-      <div class="header" part="header" ?hidden=${this.compact}>
-        <span class="title" part="title">
-          ${this.mainTitle}
-        </span>
-        <span class="subtitle" part="subtitle" ?hidden=${!this.subTitle}>
-          ${this.subTitle}
-        </span>
-      </div>
+      <div class="base" part="base">
+        <div class="header" part="header" ?hidden=${this.compact}>
+          <span class="title" part="title">
+            ${this.mainTitle}
+          </span>
+          <span class="subtitle" part="subtitle" ?hidden=${!this.subTitle}>
+            ${this.subTitle}
+          </span>
+        </div>
       
-      <div class="items" part="items">
-        <slot></slot>
+        <div class="items" part="items">
+          <slot></slot>
+        </div>
       </div>
     `;
 	}

package/dist/components/SidebarSection.styles.js

@@ -1,7 +1,13 @@
 import { css as e } from "lit";
 // src/components/SidebarSection.styles.ts
 var t = e`
+  
+
   :host {
+    display: block;
+  }
+
+  .base {
     display: flex;
     flex-direction: column;
     gap: 8px;

package/dist/layouts/SidebarLayout.d.ts

@@ -8,6 +8,14 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
     state: SidebarState;
     /** 사이드바 레이아웃 설정 */
     config?: SidebarLayoutConfig;
+    /**
+     * The current screen takes the whole viewport: no sidebar, no mobile header, no page padding — a wall
+     * display, a kiosk, a full-screen viewer. Set by the route (`metadata: { shell: 'hidden' }`) and cleared when the
+     * next screen does not ask for it; the screen itself gives the way back.
+     */
+    immersive: boolean;
+    /** 지금 화면이 건 일시 테마가 있는가 — 다음 화면이 아무것도 묻지 않으면 걷어 사용자 선호로 돌려준다. */
+    private routeTheme;
     /**
      * Live counts for link items, keyed by the item's `href` — overrides the static `count` of the
      * item config. Set through `app.setNavCount(href, value)`; assigning a new object re-renders.

package/dist/layouts/SidebarLayout.js

@@ -12,28 +12,29 @@ import "../components/SidebarGroup.js";
 import "../components/SidebarButton.js";
 import { styles as c } from "./SidebarLayout.styles.js";
 import { currentRoutePath as l } from "@iyulab/router";
-import { html as u, nothing as d } from "lit";
-import { customElement as f, property as p, query as m, state as h } from "lit/decorators.js";
+import { Theme as u } from "@iyulab/components/dist/utilities/Theme.js";
+import { html as d, nothing as f } from "lit";
+import { customElement as p, property as m, query as h, state as g } from "lit/decorators.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";
 import "@iyulab/components/dist/components/button/UButton.js";
-import { unsafeHTML as g } from "lit/directives/unsafe-html.js";
-import { repeat as _ } from "lit/directives/repeat.js";
+import { unsafeHTML as _ } from "lit/directives/unsafe-html.js";
+import { repeat as v } from "lit/directives/repeat.js";
 import "@iyulab/components/dist/components/popover/UPopover.js";
 import "@iyulab/components/dist/components/menu/UMenu.js";
 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 { createDevWarner as y } from "@iyulab/components/dist/utilities/devWarning.js";
+import { isFocusCandidate as b, querySelectorDeep as x } from "@iyulab/components/dist/utilities/elements.js";
+import { OverlayManager as S } from "@iyulab/components/dist/utilities/OverlayManager.js";
 import "@iyulab/components/dist/components/progress-bar/UProgressBar.js";
 // src/layouts/SidebarLayout.ts
-var S, C = v("@iyulab/modern-app"), w = 0;
-function T(e) {
+var C, w = y("@iyulab/modern-app"), T = 0;
+function E(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 E = /* @__PURE__ */ new Set([
+var D = /* @__PURE__ */ new Set([
 	"button",
 	"link",
 	"checkbox",
@@ -46,27 +47,27 @@ var E = /* @__PURE__ */ new Set([
 	"tab",
 	"treeitem"
 ]);
-function D(e) {
+function O(e) {
 	let t = e.tagName;
-	return t === "BUTTON" || t === "SUMMARY" || t === "A" && e.hasAttribute("href") ? !0 : E.has(e.getAttribute("role") ?? "");
+	return t === "BUTTON" || t === "SUMMARY" || t === "A" && e.hasAttribute("href") ? !0 : D.has(e.getAttribute("role") ?? "");
 }
-function O(e) {
+function k(e) {
 	let t = getComputedStyle(e);
 	return (t.overflowY === "auto" || t.overflowY === "scroll") && e.scrollHeight > e.clientHeight;
 }
-function k(e, t) {
+function A(e, t) {
 	for (let n of e) if (n instanceof HTMLElement) {
-		if (O(n)) return n === t;
+		if (k(n)) return n === t;
 		if (n === t) break;
 	}
 	return !0;
 }
-function A() {
+function j() {
 	let e = document.activeElement;
 	for (; e?.shadowRoot?.activeElement;) e = e.shadowRoot.activeElement;
 	return e;
 }
-function j(e, t) {
+function M(e, t) {
 	let n = t;
 	for (; n;) {
 		if (n === e) return !0;
@@ -74,12 +75,12 @@ function j(e, t) {
 	}
 	return !1;
 }
-var M = class extends n {
+var N = class extends n {
 	static {
-		S = this;
+		C = this;
 	}
 	constructor(...e) {
-		super(...e), 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.mobileHeaderBlockSize = 0, 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 = () => {
+		super(...e), this.state = "default", this.immersive = !1, this.routeTheme = !1, 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.mobileHeaderBlockSize = 0, 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 = () => {
 			let e = this.screenSize ?? a.screen ?? "large";
 			e === "large" ? this.state = this.state === "default" ? "slim" : "default" : e === "medium" ? this.state = this.state === "slim" ? "modal" : "slim" : e === "small" ? this.state = this.state === "mobile" ? "mobile-open" : "mobile" : console.warn("[@iyulab/modern-app] unknown screen size:", e);
 		}, this.handleBackdropClick = () => {
@@ -89,17 +90,19 @@ var M = class extends n {
 		}, this.handleRouteProgress = (e) => {
 			this.progressBarEl.value = e.progress;
 		}, this.handleRouteDone = (e) => {
-			this.progressBarEl.value = 100, setTimeout(() => {
+			this.immersive = e.context.metadata?.shell === "hidden";
+			let t = e.context.metadata?.theme, n = t === "dark" || t === "light" ? t : null;
+			(n || this.routeTheme) && u.override(n), this.routeTheme = n !== null, this.progressBarEl.value = 100, setTimeout(() => {
 				this.routeLoading = !1;
 			}, 300);
-			let t = this.shadowRoot?.querySelector(".main");
-			t && (this.config?.scrollBehavior?.(e.context, t), this.focusRoute(t), requestAnimationFrame(this.syncMainTabStop));
+			let r = this.shadowRoot?.querySelector(".main");
+			r && (this.config?.scrollBehavior?.(e.context, r), this.focusRoute(r), 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);
+			let t = e.scrollHeight > e.clientHeight + 1 || e.scrollWidth > e.clientWidth + 1, n = t && !!x([...this.noticeContent(), ...this.routeContent()], "*", (e) => b(e) && e.tabIndex >= 0);
 			this.mainTabStop = t && !n;
 		}, this.handleSkipLinkClick = (e) => {
 			e.preventDefault();
@@ -112,7 +115,7 @@ var M = class extends n {
 		}, this.handleOverlaySlotChange = (e) => {
 			let t = r(e.target);
 			if (t && !this.hasOverlay) {
-				let e = A();
+				let e = j();
 				this.overlayTrigger = e && e !== document.body ? e : null;
 			}
 			this.hasOverlay = t;
@@ -126,9 +129,9 @@ var M = class extends n {
 		}, this._handleMainKeydown = (e) => {
 			if (e.defaultPrevented) return;
 			let t = e.composedPath()[0];
-			if (t instanceof HTMLElement && T(t) || e.key === " " && t instanceof HTMLElement && D(t)) return;
+			if (t instanceof HTMLElement && E(t) || e.key === " " && t instanceof HTMLElement && O(t)) return;
 			let n = this.shadowRoot?.querySelector(".main");
-			if (!n || !k(e.composedPath(), n)) return;
+			if (!n || !A(e.composedPath(), n)) return;
 			let r = n.clientHeight;
 			switch (e.key) {
 				case " ":
@@ -171,13 +174,13 @@ var M = class extends n {
 		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), this.mainSizeObserver?.disconnect(), this.mainSizeObserver = void 0, this.mobileHeaderObserver?.disconnect(), this.mobileHeaderObserver = void 0, super.disconnectedCallback();
+		this.routeTheme &&= (u.override(null), !1), 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), S.closeLayer(this), this.mainSizeObserver?.disconnect(), this.mainSizeObserver = void 0, this.mobileHeaderObserver?.disconnect(), this.mobileHeaderObserver = void 0, super.disconnectedCallback();
 	}
 	willUpdate(e) {
 		super.willUpdate(e), e.has("config") && (this.styles = this.config?.styles);
 	}
 	updated(e) {
-		super.updated(e), this.observeMainSize(), this.observeMobileHeader(), 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(), this.observeMobileHeader(), e.has("hasOverlay") && (this.internals?.states?.[this.hasOverlay ? "add" : "delete"]("overlay"), this.hasOverlay ? (S.openLayer(this, this.handleOverlayEscape), this.focusOverlay()) : e.get("hasOverlay") === !0 && (S.closeLayer(this), this.restoreOverlayFocus()));
 	}
 	firstUpdated(e) {
 		super.firstUpdated(e), this.warnIfUnsized();
@@ -186,11 +189,11 @@ var M = class extends n {
 		process.env.NODE_ENV !== "production" && requestAnimationFrame(() => {
 			if (!this.isConnected) return;
 			let e = this.getBoundingClientRect().height;
-			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).`);
+			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).`);
 		});
 	}
 	render() {
-		return this.config ? u`
+		return this.config ? d`
       <!-- 반복 영역 건너뛰기(WCAG 2.4.1) — 셸의 첫 Tab. 포커스될 때만 보인다. -->
       <a class="skip-link" part="skip-link" href="#" @click=${this.handleSkipLinkClick}>
         ${i(this.locale || void 0).skipToContent}
@@ -220,7 +223,7 @@ var M = class extends n {
           ${this.renderLogo()}
           <span class="title" ?hidden=${this.state === "slim"}>
             ${this.config.title}
-            ${this.config.subtitle ? u`<span class="subtitle" part="subtitle">${this.config.subtitle}</span>` : d}
+            ${this.config.subtitle ? d`<span class="subtitle" part="subtitle">${this.config.subtitle}</span>` : f}
           </span>
           <u-button class="toggler" appearance="plain"
             aria-label=${i(this.locale || void 0).toggleSidebar}
@@ -234,13 +237,13 @@ var M = class extends n {
 
         <!-- Sidebar Navigation Menu -->
         <nav class="sidebar-main" part="sidebar-main" scrollable
-          aria-label=${this.config.mainAriaLabel ?? d}>
-          ${_(o(this.config.main ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
+          aria-label=${this.config.mainAriaLabel ?? f}>
+          ${v(o(this.config.main ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
         </nav>
 
         <!-- Sidebar Footer -->
         <div class="sidebar-footer" part="sidebar-footer">
-          ${_(o(this.config.footer ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
+          ${v(o(this.config.footer ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
         </div>
       </aside>
 
@@ -248,13 +251,13 @@ var M = class extends n {
       <div class="main-region">
         <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-hidden=${this.routeLoading ? f : "true"}
             aria-label=${i(this.locale || void 0).pageLoading}></u-progress-bar>
 
           <div class="main-content" part="main-content" ?inert=${this.hasOverlay}>
             <div class="notices ${this.hasNotice ? "" : "empty"}" part="notices"
-              role=${this.config.noticesAriaLabel ? "region" : d}
-              aria-label=${this.config.noticesAriaLabel ?? d}>
+              role=${this.config.noticesAriaLabel ? "region" : f}
+              aria-label=${this.config.noticesAriaLabel ?? f}>
               <slot name="notice" @slotchange=${this.handleNoticeSlotChange}></slot>
             </div>
             <slot @slotchange=${this.handleMainSlotChange}></slot>
@@ -275,13 +278,13 @@ var M = class extends n {
       <div class="backdrop" ?hidden="${this.state !== "modal"}"
         @click="${this.handleBackdropClick}"
       ></div>
-    ` : d;
+    ` : f;
 	}
 	renderMenu(e) {
 		let t = this.menuIds.get(e);
-		t || (t = `u-sidebar-menu-${++S.menuSeq}`, this.menuIds.set(e, t));
+		t || (t = `u-sidebar-menu-${++C.menuSeq}`, this.menuIds.set(e, t));
 		let n = t, r = this.state === "mobile" || this.state === "mobile-open" ? "bottom-start" : "right-start";
-		return u`
+		return d`
       <u-sidebar-button
         id=${n}
         haspopup="menu"
@@ -300,9 +303,9 @@ var M = class extends n {
         @hide=${(e) => this.handleMenuHide(e, n)}
         @pick=${(t) => this.handleMenuPick(t, e)}>
         <u-menu>
-          ${_(e.items, (e, t) => t, (e, t) => u`
+          ${v(e.items, (e, t) => t, (e, t) => d`
             <u-menu-item value=${String(t)} ?disabled=${e.disabled === !0}>
-              ${e.icon ? u`<u-icon slot="prefix" .lib=${e.lib} .name=${e.icon}></u-icon>` : d}
+              ${e.icon ? d`<u-icon slot="prefix" .lib=${e.lib} .name=${e.icon}></u-icon>` : f}
               ${e.label}
             </u-menu-item>
           `)}
@@ -316,16 +319,16 @@ var M = class extends n {
 	}
 	handleMenuHide(e, t) {
 		this.openMenu === t && (this.openMenu = null);
-		let n = e.currentTarget, r = A();
-		r && j(n, r) && this.shadowRoot?.querySelector(`#${t}`)?.focus();
+		let n = e.currentTarget, r = j();
+		r && M(n, r) && this.shadowRoot?.querySelector(`#${t}`)?.focus();
 	}
 	renderItem(e) {
-		if (!e) return d;
+		if (!e) return f;
 		if (e.type === "html") {
 			let t = e.render(this.state);
-			return typeof t == "string" ? g(t) : u`${t}`;
+			return typeof t == "string" ? _(t) : d`${t}`;
 		}
-		if (e.type === "button") return u`
+		if (e.type === "button") return d`
         <u-sidebar-button
           ?compact=${this.state === "slim"}
           .icon="${e.icon}"
@@ -339,7 +342,7 @@ var M = class extends n {
 		if (e.type === "menu") return this.renderMenu(e);
 		if (e.type === "link") {
 			let t = this.isMatchedLink(e.pattern || e.href);
-			return u`
+			return d`
         <u-sidebar-link
           ?compact=${this.state === "slim"}
           ?selected=${t}
@@ -355,18 +358,18 @@ var M = class extends n {
         ></u-sidebar-link>
       `;
 		}
-		if (e.type === "section") return u`
+		if (e.type === "section") return d`
         <u-sidebar-section
           ?compact=${this.state === "slim"}
           .mainTitle="${e.title}"
           .subTitle="${e.subTitle}"
           .styles="${e.styles}">
-          ${_(e.items, (e, t) => t, (e) => this.renderItem(e))}
+          ${v(e.items, (e, t) => t, (e) => this.renderItem(e))}
         </u-sidebar-section>
       `;
 		if (e.type === "group") {
 			let t = e.items.some((e) => this.isMatchedLink(e.pattern || e.href));
-			return u`
+			return d`
         <u-sidebar-group
           ?compact=${this.state === "slim"}
           ?selected=${t}
@@ -375,11 +378,11 @@ var M = class extends n {
           .lib="${e.lib}"
           .label="${e.label}"
           .styles="${e.styles}">
-          ${_(e.items, (e, t) => t, (e) => this.renderItem(e))}
+          ${v(e.items, (e, t) => t, (e) => this.renderItem(e))}
         </u-sidebar-group>
       `;
 		}
-		return d;
+		return f;
 	}
 	handleButtonItemClick(e, t) {
 		let n = e.onClick?.(t);
@@ -395,19 +398,19 @@ var M = class extends n {
 		};
 	}
 	icon(e) {
-		return this.config?.icons?.[e] ?? S.DEFAULT_ICONS[e];
+		return this.config?.icons?.[e] ?? C.DEFAULT_ICONS[e];
 	}
 	renderLogo() {
 		let e = this.config?.logo, t = this.config?.title ?? "Home";
-		if (!e || typeof e == "string") return e ? u`
+		if (!e || typeof e == "string") return e ? d`
         <u-link class="logo-link" aria-label=${t}>
           <u-icon class="logo"
             .name="${e}"
             .fallback=${s}
           ></u-icon>
         </u-link>
-      ` : d;
-		if (typeof e == "object" && "icon" in e) return u`
+      ` : f;
+		if (typeof e == "object" && "icon" in e) return d`
         <u-link class="logo-link" aria-label=${t}>
           <u-icon class="logo"
             .lib=${e.lib}
@@ -418,17 +421,17 @@ var M = class extends n {
       `;
 		if (typeof e == "function") {
 			let n = e(this.state);
-			return u`
+			return d`
         <u-link class="logo-link" aria-label=${t}>
           <span class="logo">
             <!-- html-sink: documented HTML contract — a logo function returns markup the developer writes -->
-            ${typeof n == "string" ? g(n) : n}
+            ${typeof n == "string" ? _(n) : n}
           </span>
         </u-link>
       `;
 		}
-		return u`
-      <u-link class="logo-link" .href=${e.href} aria-label=${e.alt ? d : t}>
+		return d`
+      <u-link class="logo-link" .href=${e.href} aria-label=${e.alt ? f : t}>
         <img class="logo"
           src="${e.src}"
           alt="${e.alt ?? ""}"
@@ -466,14 +469,14 @@ var M = class extends n {
 	async focusRoute(e) {
 		let t = this.routeContent();
 		if (await Promise.all(t.map((e) => e.updateComplete)), this.hasOverlay || !e.isConnected) return;
-		let n = A();
-		n && t.some((e) => j(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);
+		let n = x(e, "[autofocus]", b);
 		n?.focus();
-		let r = A();
-		n && r && j(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 }) ?? [];
@@ -481,18 +484,21 @@ var M = class extends n {
 	async focusOverlay() {
 		let e = this.overlayPanels();
 		if (await Promise.all(e.map((e) => e.updateComplete)), !this.hasOverlay) return;
-		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();
+		let t = j();
+		t && e.some((e) => M(e, t)) || (x(e, "[autofocus]", b) ?? x(e, "input, select, textarea, u-input, u-textarea, u-select, u-checkbox, u-radio, u-switch, u-slider", b) ?? this.shadowRoot?.querySelector(".overlay-close"))?.focus();
 	}
 	restoreOverlayFocus() {
 		let e = this.overlayTrigger;
 		this.overlayTrigger = null;
-		let t = A();
+		let t = j();
 		t && t !== document.body || (e?.isConnected ? e.focus() : this.mainElement?.focus({ preventScroll: !0 }));
 	}
 };
-t([p({
+t([m({
 	type: String,
 	reflect: !0
-}), e("design:type", Object)], M.prototype, "state", void 0), t([p({ type: Object }), e("design:type", Object)], M.prototype, "config", void 0), t([p({ type: Object }), e("design:type", typeof Record > "u" ? Object : Record)], M.prototype, "counts", void 0), t([p({ type: String }), e("design:type", Object)], M.prototype, "locale", void 0), t([m("u-progress-bar"), e("design:type", Object)], M.prototype, "progressBarEl", void 0), t([h(), e("design:type", Object)], M.prototype, "hasOverlay", void 0), t([h(), e("design:type", Object)], M.prototype, "openMenu", void 0), t([h(), e("design:type", Object)], M.prototype, "hasNotice", void 0), t([h(), e("design:type", Object)], M.prototype, "routeLoading", void 0), t([h(), e("design:type", Object)], M.prototype, "mainTabStop", void 0), t([h(), e("design:type", Object)], M.prototype, "mobileHeaderBlockSize", void 0), t([h(), e("design:type", Object)], M.prototype, "currentPath", void 0), M = S = t([f("u-sidebar-layout")], M);
-export { M as SidebarLayout };
+}), e("design:type", Object)], N.prototype, "state", void 0), t([m({ type: Object }), e("design:type", Object)], N.prototype, "config", void 0), t([m({
+	type: Boolean,
+	reflect: !0
+}), e("design:type", Object)], N.prototype, "immersive", void 0), t([m({ type: Object }), e("design:type", typeof Record > "u" ? Object : Record)], N.prototype, "counts", void 0), t([m({ type: String }), e("design:type", Object)], N.prototype, "locale", void 0), t([h("u-progress-bar"), e("design:type", Object)], N.prototype, "progressBarEl", void 0), t([g(), e("design:type", Object)], N.prototype, "hasOverlay", void 0), t([g(), e("design:type", Object)], N.prototype, "openMenu", void 0), t([g(), e("design:type", Object)], N.prototype, "hasNotice", void 0), t([g(), e("design:type", Object)], N.prototype, "routeLoading", void 0), t([g(), e("design:type", Object)], N.prototype, "mainTabStop", void 0), t([g(), e("design:type", Object)], N.prototype, "mobileHeaderBlockSize", void 0), t([g(), e("design:type", Object)], N.prototype, "currentPath", void 0), N = C = t([p("u-sidebar-layout")], N);
+export { N as SidebarLayout };

package/dist/layouts/SidebarLayout.styles.js

@@ -19,6 +19,16 @@ var t = e`
   :host([state="mobile-open"]) {
     flex-direction: column;
   }
+  
+  :host([immersive]) .sidebar,
+  :host([immersive]) .mobile-header,
+  :host([immersive]) .backdrop,
+  :host([immersive]) .skip-link {
+    display: none;
+  }
+  :host([immersive]) .main {
+    padding: 0;
+  }
 
   .logo {
     color: var(--u-txt-color, #212121);

package/dist/react.d.ts

@@ -5,6 +5,7 @@ import { Wizard as WizardElement, WizardEventMap } from './components/Wizard.js'
 import { GroupBoxLevel } from './components/GroupBox.js';
 import { EmptyStateVariant } from './components/EmptyState.js';
 import { TimelineItemColor } from './components/TimelineItem.js';
+import { InfoSectionLayout } from './components/InfoSection.js';
 import { InfoFieldFormat, InfoFieldSize, InfoFieldTrend, InfoFieldTone, InfoFieldAppearance } from './components/InfoField.js';
 export { ScreenObserver } from './internals/ScreenObserver.js';
 export type { ScreenSize, ScreenObserverConfig, ScreenResizeEvent } from './internals/ScreenObserver.js';
@@ -100,6 +101,7 @@ declare module 'react' {
             };
             'u-info-section': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
                 min?: number | string;
+                layout?: InfoSectionLayout;
             };
             'u-timeline': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
             'u-timeline-item': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.57.0",
+  "version": "0.59.0",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -64,7 +64,7 @@
     "lit": "^3.3.3"
   },
   "peerDependencies": {
-    "@iyulab/components": ">=2.8.0",
+    "@iyulab/components": ">=2.32.0",
     "@iyulab/router": "^0.24.0",
     "@lit/react": "^1.0.8",
     "react": "^18.0.0 || ^19.0.0"
@@ -78,7 +78,7 @@
     }
   },
   "devDependencies": {
-    "@iyulab/components": "^2.20.3",
+    "@iyulab/components": "^2.32.0",
     "@iyulab/router": "^0.24.0",
     "@lit/react": "^1.0.8",
     "@types/node": "^26.1.1",

package/skills/modern-app/references/components/action-bar.md

@@ -36,10 +36,13 @@ rather than negative margins (the bar cannot know its parent's padding).
 
 | Part | Description |
 |------|-------------|
+| `base` | The bar's box — layout, padding and the sticky top border are drawn here rather than on the host |
 | `main` | Main action group |
 | `danger` | Destructive action group |
 | `summary` | Summary text wrapper |
 
+The host only takes its place in the layout. Padding, borders and spacing live on `base` inside the shadow root, so a document-wide reset such as Tailwind's preflight (`* { padding: 0; border: 0 }`) cannot strip them — document rules beat `:host` rules whatever their specificity. Restyle the box with `::part(base)`.
+
 ## CSS Custom Properties
 
 | Property | Description |

package/skills/modern-app/references/components/empty-state.md

@@ -50,9 +50,12 @@ action is **asking for access**.
 
 | Part | Description |
 |------|-------------|
+| `base` | The block's box — layout and padding are drawn here rather than on the host |
 | `icon` · `title` · `description` · `actions` | The four regions |
 | `message` | Wraps `title` and `description` — the alert of `variant="error"` |
 
+The host only takes its place in the layout. Padding, borders and spacing live on `base` inside the shadow root, so a document-wide reset such as Tailwind's preflight (`* { padding: 0; border: 0 }`) cannot strip them — document rules beat `:host` rules whatever their specificity. Restyle the box with `::part(base)`.
+
 ## CSS Custom Properties
 
 | Property | Description |

package/skills/modern-app/references/components/group-box.md

@@ -46,11 +46,14 @@ do).
 
 | Part | Description |
 |------|-------------|
+| `base` | The card's box — surface, border, corner and shadow are drawn here rather than on the host |
 | `header` · `title` · `actions` | Header row |
 | `meta` | Secondary text inside the title |
 | `description` | One-line description under the title |
 | `body` | Body wrapper |
 
+The host only takes its place in the layout. Padding, borders and spacing live on `base` inside the shadow root, so a document-wide reset such as Tailwind's preflight (`* { padding: 0; border: 0 }`) cannot strip them — document rules beat `:host` rules whatever their specificity. Restyle the box with `::part(base)`.
+
 ## CSS Custom Properties
 
 | Property | Description |

package/skills/modern-app/references/components/info-field.md

@@ -130,11 +130,14 @@ name (`role="img"` and `aria-label`) (`0.57.0~`):
 
 | Part | Description |
 |------|-------------|
+| `base` | The field's box — a tile's surface, border and padding (and a strip cell's padding) are drawn here rather than on the host |
 | `label` · `value` · `trend` | The label, the value, and the (optional) trend indicator |
 | `unit` | The unit, inside `value` (only when `unit` is set and the value is not blank) |
 | `description` | The supporting line (when `description` is set, or the value is blank and `blankReason` is set) |
 | `visual` | The box holding the `visual` slot (not drawn when the slot is empty) |
 
+The host only takes its place in the layout. Padding, borders and spacing live on `base` inside the shadow root, so a document-wide reset such as Tailwind's preflight (`* { padding: 0; border: 0 }`) cannot strip them — document rules beat `:host` rules whatever their specificity. Restyle the box with `::part(base)`.
+
 ## CSS Custom Properties
 
 | Property | Description |

package/skills/modern-app/references/components/info-section.md

@@ -51,7 +51,7 @@ A stat strip — the totals above a list, as cells rather than a sentence:
 |----------|-------------|
 | `--u-space-lg` / `--u-space-xl` | Grid gap (row / column) |
 | `--u-border-color` · `--u-radius-xl` · `--u-bg-color` | Strip surface, dividers and corner; cell background |
-| `--u-space-md` / `--u-space-lg` | Strip cell padding (block / inline) |
+| `--u-space-md` / `--u-space-lg` | Strip cell padding (block / inline) — a `u-info-field` cell draws it inside its own `base` part, so a document-wide reset cannot strip it; any other child element gets it as host padding |
 
 ⚠ Column width is set via the `min` property, not a custom property — it's applied as an inline
 style per instance, so a `--info-min` override in a stylesheet would lose to it.

package/skills/modern-app/references/components/page-header.md

@@ -39,12 +39,15 @@ screens nobody opens.
 
 | Part | Description |
 |------|-------------|
+| `base` | The header's box — layout and the space under it are drawn here rather than on the host |
 | `back` | Back link |
 | `heading` | Eyebrow + title + subtitle wrapper |
 | `eyebrow` | Eyebrow row (hidden when empty) |
 | `title` · `subtitle` | Text elements |
 | `status` · `actions` | Slot wrappers |
 
+The host only takes its place in the layout. Padding, borders and spacing live on `base` inside the shadow root, so a document-wide reset such as Tailwind's preflight (`* { padding: 0; border: 0 }`) cannot strip them — document rules beat `:host` rules whatever their specificity. Restyle the box with `::part(base)`.
+
 ## CSS Custom Properties
 
 | Property | Description |

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

@@ -448,6 +448,30 @@ on a component such as `UInput`) — `@iyulab/router` 0.16.1 and later report `r
 React has committed the screen. While the overlay is open the shell does none of this: the route
 underneath is inert and focus stays in the panel.
 
+## A screen without the shell
+
+A screen that owns the whole viewport — a wall display on the production floor, a kiosk, a full-screen viewer —
+asks for it in its route. While that screen is current the shell draws no sidebar, no mobile header and no page
+padding; the next screen that does not ask gets them back.
+
+```ts
+routes: [
+  { path: 'board', metadata: { shell: 'hidden' }, render: () => html`<floor-board></floor-board>` },
+]
+```
+
+The screen gives the way back itself (a link to the menu) — the shell has nothing on screen to return with. The
+state is the reflected `immersive` attribute on `u-sidebar-layout` (`0.58.0~`).
+
+A screen can also own its background: `metadata: { theme: 'dark' }` (or `'light'`) applies that theme while the screen
+is current, without changing or storing the user's choice (`Theme.override` from `@iyulab/components`), and the next
+screen that does not ask returns to it. A floor board stays dark on the TV and in a browser where the user picked
+light.
+
+```ts
+{ path: 'board', metadata: { shell: 'hidden', theme: 'dark' }, render: () => html`<floor-board></floor-board>` }
+```
+
 ## Printing
 
 On print media the shell drops its app chrome and lets the content flow across pages: the