@iyulab/modern-app 0.53.1 → 0.55.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # Changelog
 
+## [0.55.0] - 2026-10-16
+
+### Added
+
+- `u-master-detail-layout` `detail-size`: the detail pane takes that width and the master fills the rest — a wide
+  list with a record summary beside it. `masterSize` keeps the opposite shape (narrow list, wide detail).
+- `u-master-detail-layout` `slot="detail-placeholder"`: shown in the detail place while nothing is chosen (side by side).
+- `useUnsavedChanges(dirty)` returns `{ markClean }`, and `UnsavedChangesController` has `markClean()`: the current state
+  is saved, so navigations until the next render (React) or update (Lit) do not ask. A save handler that navigates in
+  the same tick — `await post(draft); navigate(...)` — was asked «Discard unsaved changes?», because the check still
+  read the pre-save render’s `dirty`.
+
+### Changed
+
+- Console diagnostics begin with `[@iyulab/modern-app]`, so a message in a console shared by several packages says which one wrote it (several also say what to do next).
+- **Breaking:** `u-master-detail-layout`: while the `detail` slot is empty the master takes the whole width (it stayed at
+  `masterSize` beside an empty area). To keep the narrow master with a message beside it, use `detail-placeholder`.
+
+### Removed
+
+- An unused custom property on `u-sidebar-group` (`--group-accent`) — nothing read it; group colours come from the
+  `--app-sidebar-group-*` tokens.
+
+## [0.54.0] - 2026-10-14
+
+### Added
+
+- **`u-action-bar` `summary` slot** — what the main action will do («1 change · Order number»). It follows the
+  danger actions and fills the free width; below 420px it takes its own line between the main actions (on top) and
+  the danger actions. Label-size, weak text.
+- `--action-bar-padding-inline` — inline padding for a bar that runs to a side sheet's edges (default `0`).
+- **`u-info-section layout="strip"` — a stat strip.** The totals of a result as cells on one bordered surface, split
+  by 1px dividers: all side by side, or all stacked once the strip is narrower than 640px — never three plus one.
+- `u-info-field` `description` — a supporting line below the value (its basis, or the same amount in another unit).
+
+### Fixed
+
+- The `u-action-bar` skill reference placed the main actions at the leading edge and the danger actions at the
+  trailing edge — the reverse of what the bar does. It now describes the actual layout.
+
 ## [0.53.1] - 2026-10-13
 
 ### Fixed

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

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.154.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.153.0 → _@oxc-project_runtime@0.154.0}/helpers/esm/decorateMetadata.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.154.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.d.ts

@@ -1,5 +1,5 @@
 import { StyledElement } from '../internals/StyledElement.js';
-type ElementParts = 'host' | 'danger' | 'main';
+type ElementParts = 'host' | 'danger' | 'summary' | 'main';
 /**
  * 푸터 액션 바 — 상세·편집 화면 맨 아래의 같은 골격.
  *
@@ -17,10 +17,13 @@ type ElementParts = 'host' | 'danger' | 'main';
  * ```
  *
  * 배치 규칙: **위험 액션은 왼쪽 끝, 주 액션은 오른쪽 끝** — 거리가 안전장치다.
- * 좁아지면 두 무리가 각자 한 줄을 갖고 **주 액션이 위로** 온다(엄지 위치에 위험 액션을
+ * 좁아지면 무리마다 한 줄을 갖고 **주 액션이 위로** 온다(엄지 위치에 위험 액션을
  * 두지 않기 위해서다).
  *
- * 오버라이드: `part`(host·danger·main) + slot 치환.
+ * `summary` 슬롯은 주 액션이 무엇을 할지 말하는 글이다(«변경 1건 · 주문 번호») — 위험 액션 뒤에서
+ * 남는 폭을 채운다. 시트 가장자리에 붙는 바닥이면 `--action-bar-padding-inline` 으로 안쪽 여백을 준다.
+ *
+ * 오버라이드: `part`(host·danger·summary·main) + slot 치환.
  */
 export declare class ActionBar extends StyledElement<ElementParts> {
     static styles: import('lit').CSSResultGroup[];
@@ -35,6 +38,8 @@ export declare class ActionBar extends StyledElement<ElementParts> {
      * (`internals/slotted.ts` 참조). 빈 래퍼가 남으면 주 액션이 가운데로 밀린다.
      */
     private hasDanger;
+    /** 요약 슬롯 배정 상태 — 비면 래퍼를 접는다(위와 같은 이유). */
+    private hasSummary;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/components/ActionBar.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.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";
@@ -8,7 +8,7 @@ import { customElement as o, property as s, state as c } from "lit/decorators.js
 //#region src/components/ActionBar.ts
 var l = class extends n {
 	constructor(...e) {
-		super(...e), this.sticky = !1, this.hasDanger = !1;
+		super(...e), this.sticky = !1, this.hasDanger = !1, this.hasSummary = !1;
 	}
 	static {
 		this.styles = [super.styles, i];
@@ -20,6 +20,11 @@ var l = class extends n {
           @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>
     `;
 	}
@@ -27,6 +32,6 @@ var l = class extends n {
 t([s({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Object)], l.prototype, "sticky", void 0), t([c(), e("design:type", Object)], l.prototype, "hasDanger", void 0), l = t([o("u-action-bar")], l);
+}), e("design:type", Object)], l.prototype, "sticky", void 0), t([c(), e("design:type", Object)], l.prototype, "hasDanger", void 0), t([c(), e("design:type", Object)], l.prototype, "hasSummary", void 0), l = t([o("u-action-bar")], l);
 //#endregion
 export { l as ActionBar };

package/dist/components/ActionBar.styles.js

@@ -5,7 +5,7 @@ var t = e`
     display: flex;
     align-items: center;
     gap: var(--u-space-sm, 8px);
-    padding: var(--u-space-md, 12px) 0;
+    padding: var(--u-space-md, 12px) var(--action-bar-padding-inline, 0);
     
 
 
@@ -36,6 +36,18 @@ var t = e`
     display: none;
   }
 
+  
+
+  .summary {
+    flex: 1 1 calc((420px - 100%) * 999);
+    min-width: 0;
+    font-size: var(--u-text-label-size, 13px);
+    color: var(--u-txt-color-weak, #616161);
+  }
+  .summary.empty {
+    display: none;
+  }
+
   .main {
     display: flex;
     align-items: center;
@@ -56,7 +68,7 @@ var t = e`
     bottom: 0;
     background-color: var(--u-bg-color, #FFFFFF);
     border-top: 1px solid var(--u-border-color-weak, #EEEEEE);
-    padding: var(--u-space-md, 12px) 0;
+    padding: var(--u-space-md, 12px) var(--action-bar-padding-inline, 0);
   }
 `;
 //#endregion

package/dist/components/EmptyState.js

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

package/dist/components/GroupBox.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.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.d.ts

@@ -97,6 +97,11 @@ export declare class InfoField extends StyledElement<ElementParts> {
      * `--u-success|danger|warning-color-strong`.
      */
     tone?: InfoFieldTone;
+    /**
+     * 값 아래의 보조 줄 — 그 값의 근거나 다른 단위의 같은 양(«1,764,211 units» · «Settled ₩743,188,120»).
+     * 추세 문구는 `trendLabel` 이다(방향과 색을 갖는다).
+     */
+    description?: string;
     /** 라벨을 이름으로 준 슬롯 위젯과 그때의 라벨 — 소비자가 바꾼 이름은 우리 것이 아니다. */
     private readonly namedWidgets;
     /**

package/dist/components/InfoField.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.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";
@@ -48,12 +48,13 @@ var f = class extends n {
           ${a ? i`<span aria-hidden="true">${a}</span> ` : ""}${this.trendLabel ?? ""}
         </div>
       ` : ""}
+      ${this.description ? i`<div class="description" part="description">${this.description}</div>` : ""}
     `;
 	}
 };
 t([o({ type: String }), e("design:type", Object)], f.prototype, "label", void 0), t([o({ type: String }), e("design:type", Object)], f.prototype, "value", void 0), t([o({ type: String }), e("design:type", Object)], f.prototype, "blank", void 0), t([o({ type: Boolean }), e("design:type", Object)], f.prototype, "numeric", void 0), t([o({ type: String }), e("design:type", Object)], f.prototype, "format", void 0), t([o({ type: String }), e("design:type", String)], f.prototype, "currency", void 0), t([o({ type: String }), e("design:type", String)], f.prototype, "unit", void 0), t([o({
 	type: String,
 	reflect: !0
-}), e("design:type", Object)], f.prototype, "size", void 0), t([o({ type: String }), e("design:type", Object)], f.prototype, "trend", void 0), t([o({ type: String }), e("design:type", String)], f.prototype, "trendLabel", void 0), t([o({ type: String }), e("design:type", Object)], f.prototype, "tone", void 0), f = t([a("u-info-field")], f);
+}), e("design:type", Object)], f.prototype, "size", void 0), t([o({ type: String }), e("design:type", Object)], f.prototype, "trend", void 0), t([o({ type: String }), e("design:type", String)], f.prototype, "trendLabel", void 0), t([o({ type: String }), e("design:type", Object)], f.prototype, "tone", void 0), t([o({ type: String }), e("design:type", String)], f.prototype, "description", void 0), f = t([a("u-info-field")], f);
 //#endregion
 export { f as InfoField, d as isBlank };

package/dist/components/InfoField.styles.js

@@ -82,6 +82,14 @@ var t = e`
     margin-top: var(--u-space-3xs, 2px);
   }
 
+  
+  .description {
+    font-size: var(--u-text-caption-size, 12px);
+    line-height: var(--u-text-caption-leading, 1.5);
+    color: var(--u-txt-color-weaker, #757575);
+    margin-top: var(--u-space-3xs, 2px);
+  }
+
   .trend.tone-positive {
     color: var(--u-success-color-strong, #1B5E20);
   }

package/dist/components/InfoSection.d.ts

@@ -1,5 +1,7 @@
 import { StyledElement } from '../internals/StyledElement.js';
 type ElementParts = 'host' | 'grid';
+/** 배치 — `grid` 라벨-값 칸의 반응형 그리드 · `strip` 지표 띠(구분선으로 나뉜 한 면의 칸). */
+export type InfoSectionLayout = 'grid' | 'strip';
 /**
  * 정보 섹션 — `u-info-field` 들의 반응형 그리드.
  *
@@ -16,11 +18,18 @@ type ElementParts = 'host' | 'grid';
  * ```
  *
  * `min` 으로 한 칸의 최소 폭을 조절한다(기본 160px). 라벨이 긴 도메인은 값을 올린다.
+ *
+ * `layout="strip"` 은 지표 띠다 — 결과의 합계를 문장이 아니라 칸으로(목록 위 «주문 962 · 청구 ₩…»).
+ * 한 면 위에 1px 구분선으로 나뉜 칸들이 **전부 나란히, 아니면 전부 쌓인다**(띠 폭 640px 미만 — 들쭉날쭉한 줄을
+ * 만들지 않는다). 임계는 크기 containment 가 아니라 칸의 flex-basis 가 건다(«Holy Albatross» — u-action-bar 와 같은
+ * 근거). 구분선은 칸 사이 1px 간격으로 비치는 면의 테두리 색이라 가로·세로가 저절로 바뀐다. 이 배치에서 `min` 은 쓰지 않는다.
  */
 export declare class InfoSection extends StyledElement<ElementParts> {
     static styles: import('lit').CSSResultGroup[];
     /** 한 칸의 최소 폭(px). 이 값보다 좁아지면 열 수가 줄어든다. */
     min: number;
+    /** 배치 — `grid`(기본) · `strip`(지표 띠). */
+    layout: InfoSectionLayout;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/components/InfoSection.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.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";
@@ -7,7 +7,7 @@ import { customElement as a, property as o } from "lit/decorators.js";
 //#region src/components/InfoSection.ts
 var s = class extends n {
 	constructor(...e) {
-		super(...e), this.min = 160;
+		super(...e), this.min = 160, this.layout = "grid";
 	}
 	static {
 		this.styles = [super.styles, r];
@@ -18,6 +18,9 @@ var s = class extends n {
     `;
 	}
 };
-t([o({ type: Number }), e("design:type", Object)], s.prototype, "min", void 0), s = t([a("u-info-section")], s);
+t([o({ type: Number }), e("design:type", Object)], s.prototype, "min", void 0), t([o({
+	type: String,
+	reflect: !0
+}), e("design:type", Object)], s.prototype, "layout", void 0), s = t([a("u-info-section")], s);
 //#endregion
 export { s as InfoSection };

package/dist/components/InfoSection.styles.js

@@ -13,6 +13,24 @@ var t = e`
     grid-template-columns: repeat(auto-fit, minmax(var(--info-min, 160px), 1fr));
     gap: var(--u-space-lg, 16px) var(--u-space-xl, 20px);
   }
+
+  
+
+  :host([layout="strip"]) .grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1px;
+    background: var(--u-border-color, #E0E0E0);
+    border: 1px solid var(--u-border-color, #E0E0E0);
+    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);
+  }
 `;
 //#endregion
 export { t as styles };

package/dist/components/MasterDetailLayout.d.ts

@@ -37,8 +37,13 @@ type ElementParts = 'host' | 'master' | 'divider' | 'detail' | 'detail-close';
  */
 export declare class MasterDetailLayout extends StyledElement<ElementParts> {
     static styles: import('lit').CSSResultGroup[];
-    /** master 영역의 고정 폭(CSS 길이). detail 은 나머지 공간을 채운다. */
+    /** master 영역의 고정 폭(CSS 길이). detail 은 나머지 공간을 채운다. detail 이 비면 master 가 전부 쓴다. */
     masterSize: string;
+    /**
+     * detail 영역의 고정 폭(CSS 길이) — 주면 detail 이 이 폭이고 master 가 나머지를 채운다(`masterSize` 는 쓰지 않는다).
+     * 넓은 목록 곁에 레코드 요약을 붙이는 «곁 패널» 배치. 비우면 종전대로 master 가 고정 폭이다.
+     */
+    detailSize?: string;
     /**
      * 이 값(px, 자기 폭 기준) 미만이면 detail 이 전체 오버레이로 전환된다.
      * `masterSize` + 최소한의 읽기 가능한 detail 폭을 더한 값보다 커야 두 패널이
@@ -52,6 +57,8 @@ export declare class MasterDetailLayout extends StyledElement<ElementParts> {
     locale: string;
     /** detail 슬롯 배정 상태 — CSS `:has()` 로는 알 수 없다(`internals/slotted.ts` 참조). */
     private hasDetail;
+    /** `detail-placeholder` 슬롯 배정 상태 — detail 이 비었을 때 그 자리에 보인다. */
+    private hasPlaceholder;
     /**
      * `:state(detail)` 을 싣는 자리. 인쇄 규칙이 «한 판만 보이는가» 를 호스트에서 갈라야 해서
      * 생겼다(styles 의 인쇄 절 참조).
@@ -84,6 +91,7 @@ export declare class MasterDetailLayout extends StyledElement<ElementParts> {
      */
     private handleDetailClose;
     private handleDetailSlotChange;
+    private handlePlaceholderSlotChange;
     render(): import('lit-html').TemplateResult<1>;
 }
 /** Events `<u-master-detail-layout>` dispatches — bubbling and composed. */

package/dist/components/MasterDetailLayout.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { slotHasContent as r } from "../internals/slotted.js";
 import { getLocaleStrings as i } from "../internals/locale.js";
@@ -11,10 +11,12 @@ import "@iyulab/components/dist/components/button/UButton.js";
 //#region src/components/MasterDetailLayout.ts
 var u = class extends n {
 	constructor(...e) {
-		super(...e), this.masterSize = "22rem", this.overlayBreakpoint = 760, this.locale = "", this.hasDetail = !1, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : void 0, this.handleDetailClose = () => {
+		super(...e), this.masterSize = "22rem", this.overlayBreakpoint = 760, this.locale = "", this.hasDetail = !1, this.hasPlaceholder = !1, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : void 0, this.handleDetailClose = () => {
 			this.fire("detail-close", { cancelable: !1 });
 		}, this.handleDetailSlotChange = (e) => {
 			this.hasDetail = r(e.target);
+		}, this.handlePlaceholderSlotChange = (e) => {
+			this.hasPlaceholder = r(e.target);
 		};
 	}
 	static {
@@ -32,13 +34,14 @@ var u = class extends n {
 		super.disconnectedCallback(), this.resizeObserver?.disconnect();
 	}
 	updated(e) {
-		super.updated(e), e.has("masterSize") && this.style.setProperty("--_master-size", this.masterSize), e.has("hasDetail") && this.internals?.states?.[this.hasDetail ? "add" : "delete"]("detail"), e.has("overlayBreakpoint") && this.applyOverlay(this.getBoundingClientRect().width);
+		super.updated(e), e.has("masterSize") && this.style.setProperty("--_master-size", this.masterSize), e.has("detailSize") && (this.detailSize ? this.style.setProperty("--_detail-size", this.detailSize) : this.style.removeProperty("--_detail-size")), e.has("hasDetail") && this.internals?.states?.[this.hasDetail ? "add" : "delete"]("detail"), e.has("overlayBreakpoint") && this.applyOverlay(this.getBoundingClientRect().width);
 	}
 	render() {
+		let e = this.hasDetail ? "" : this.hasPlaceholder ? "placeholder" : "empty";
 		return o`
-      <div class="master ${this.hasDetail ? "covered" : ""}" part="master"><slot></slot></div>
-      <div class="divider ${this.hasDetail ? "" : "empty"}" part="divider"></div>
-      <div class="detail ${this.hasDetail ? "" : "empty"}" part="detail">
+      <div class="master ${this.hasDetail ? "covered" : ""} ${e === "empty" ? "alone" : ""}" part="master"><slot></slot></div>
+      <div class="divider ${e}" part="divider"></div>
+      <div class="detail ${e}" part="detail">
         <u-button class="detail-close" part="detail-close" appearance="plain"
           aria-label=${i(this.locale || void 0).detailClose}
           @click=${this.handleDetailClose}
@@ -46,6 +49,7 @@ var u = class extends n {
           <u-icon lib="internal" name="x"></u-icon>
         </u-button>
         <slot name="detail" @slotchange=${this.handleDetailSlotChange}></slot>
+        <slot name="detail-placeholder" ?hidden=${this.hasDetail} @slotchange=${this.handlePlaceholderSlotChange}></slot>
       </div>
     `;
 	}
@@ -54,8 +58,12 @@ t([c({
 	type: String,
 	attribute: "master-size"
 }), e("design:type", Object)], u.prototype, "masterSize", void 0), t([c({
+	type: String,
+	attribute: "detail-size",
+	reflect: !0
+}), e("design:type", String)], u.prototype, "detailSize", void 0), t([c({
 	type: Number,
 	attribute: "overlay-breakpoint"
-}), e("design:type", Object)], u.prototype, "overlayBreakpoint", void 0), t([c({ type: String }), e("design:type", Object)], u.prototype, "locale", void 0), t([l(), e("design:type", Object)], u.prototype, "hasDetail", void 0), u = t([s("u-master-detail-layout")], u);
+}), e("design:type", Object)], u.prototype, "overlayBreakpoint", void 0), t([c({ type: String }), e("design:type", Object)], u.prototype, "locale", void 0), t([l(), e("design:type", Object)], u.prototype, "hasDetail", void 0), t([l(), e("design:type", Object)], u.prototype, "hasPlaceholder", void 0), u = t([s("u-master-detail-layout")], u);
 //#endregion
 export { u as MasterDetailLayout };

package/dist/components/MasterDetailLayout.styles.js

@@ -17,6 +17,18 @@ var t = e`
   }
 
   
+  .master.alone {
+    flex: 1 1 auto;
+  }
+  
+  :host([detail-size]) .master {
+    flex: 1 1 auto;
+  }
+  :host([detail-size]:not([overlay])) .detail {
+    flex: 0 0 var(--_detail-size);
+  }
+
+  
 
   :host([overlay]) .master {
     flex: 1 1 auto;
@@ -34,6 +46,10 @@ var t = e`
   :host([overlay]) .divider {
     display: none;
   }
+  
+  :host([overlay]) .detail.placeholder {
+    display: none;
+  }
 
   .detail {
     flex: 1 1 auto;
@@ -102,6 +118,7 @@ var t = e`
       overflow: visible;
     }
     .detail-close,
+    .detail.placeholder,
     :host([overlay]) .detail-close,
     :host([overlay]) .master.covered {
       display: none;

package/dist/components/PageHeader.js

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

package/dist/components/SidebarButton.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.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/SidebarGroup.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.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

@@ -2,9 +2,6 @@ import { css as e } from "lit";
 //#region src/components/SidebarGroup.styles.ts
 var t = e`
   :host {
-    
-    --group-accent: var(--app-sidebar-active-bg, var(--u-primary-color, #1976D2));
-
     display: flex;
     flex-direction: column;
     color: var(--app-sidebar-fg, var(--u-txt-color, #212121));

package/dist/components/SidebarLink.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.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/SidebarSection.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.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/Timeline.js

@@ -1,4 +1,4 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.js";
 import { StyledElement as t } from "../internals/StyledElement.js";
 import "./TimelineItem.js";
 import { styles as n } from "./Timeline.styles.js";

package/dist/components/TimelineItem.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.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 "./TimelineItem.styles.js";

package/dist/components/Wizard.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.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.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.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,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { slotHasContent as r } from "../internals/slotted.js";
 import { getLocaleStrings as i } from "../internals/locale.js";
@@ -81,7 +81,7 @@ var M = class extends n {
 	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.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 = () => {
 			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("Unknown screen size:", e);
+			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 = () => {
 			this.state = "slim";
 		}, this.handleRouteBegin = (e) => {
@@ -155,7 +155,7 @@ var M = class extends n {
 			e.preventDefault();
 		}, this.handleScreenResize = (e) => {
 			let t = e.detail.size;
-			this.screenSize = t, t === "large" ? this.state = "default" : t === "medium" ? this.state = "slim" : t === "small" ? this.state = "mobile" : console.warn("Unknown screen size:", t);
+			this.screenSize = t, t === "large" ? this.state = "default" : t === "medium" ? this.state = "slim" : t === "small" ? this.state = "mobile" : console.warn("[@iyulab/modern-app] unknown screen size:", t);
 		};
 	}
 	static {

package/dist/react.d.ts

@@ -8,6 +8,14 @@ import { TimelineItemColor } from './components/TimelineItem.js';
 import { InfoFieldFormat, InfoFieldSize, InfoFieldTrend, InfoFieldTone } from './components/InfoField.js';
 export { ScreenObserver } from './internals/ScreenObserver.js';
 export type { ScreenSize, ScreenObserverConfig, ScreenResizeEvent } from './internals/ScreenObserver.js';
+/** `useUnsavedChanges` 가 돌려주는 것. */
+export interface UnsavedChangesHandle {
+    /**
+     * 지금 값은 저장됐다(또는 버려도 된다) — 다음 렌더 전까지의 이동은 묻지 않는다. 저장 · 삭제 성공 뒤 같은 틱에 떠날 때 부른다:
+     * 이동 순간의 판정은 아직 저장 전 렌더의 `dirty` 를 본다. 다음 렌더부터는 다시 그 렌더의 값을 본다.
+     */
+    markClean(): void;
+}
 /**
  * React 화면의 «저장 안 한 변경» — 마운트된 동안 판정을 등록한다(`trackUnsavedChanges`). 셸(`app.load()`)이 떠나기 전에
  * «변경을 버릴까요?» 를 묻고, 문서 이탈(새로 고침 · 탭 닫기)에는 브라우저 확인이 걸린다. 값은 매 렌더의 것을 본다.
@@ -15,11 +23,16 @@ export type { ScreenSize, ScreenObserverConfig, ScreenResizeEvent } from './inte
  * ```tsx
  * function OrderForm() {
  *   const [draft, setDraft] = useState(initial);
- *   useUnsavedChanges(draft !== initial);
+ *   const unsaved = useUnsavedChanges(draft !== initial);
+ *   async function save() {
+ *     const row = await post(draft);
+ *     unsaved.markClean();          // 저장했다 — 이어지는 이동은 묻지 않는다
+ *     navigate(`/orders/${row.id}`);
+ *   }
  * }
  * ```
  */
-export declare function useUnsavedChanges(dirty: boolean): void;
+export declare function useUnsavedChanges(dirty: boolean): UnsavedChangesHandle;
 /**
  * React wrapper for `<u-sidebar-layout>`. `config` is an `@property({ type: Object })` —
  * a raw custom element handles that correctly under React 19 (property assignment) but not

package/dist/react.js

@@ -7,7 +7,13 @@ import { createComponent as a } from "@lit/react";
 //#region src/react.ts
 function o(e) {
 	let n = i.useRef(e);
-	n.current = e, i.useEffect(() => t(() => n.current), []);
+	n.current = e;
+	let r = i.useRef(!1);
+	return i.useEffect(() => {
+		r.current = !1;
+	}), i.useEffect(() => t(() => !r.current && n.current), []), i.useMemo(() => ({ markClean: () => {
+		r.current = !0;
+	} }), []);
 }
 var s = a({
 	react: i,

package/dist/unsaved.d.ts

@@ -32,7 +32,8 @@ export declare function confirmDiscardChanges(options?: DiscardChangesOptions):
  */
 export declare function unsavedChangesGuard(_ctx?: RouteLeaveContext): boolean | Promise<boolean>;
 /**
- * Lit 요소의 «저장 안 한 변경» — 연결된 동안 판정을 등록하고, 떨어지면 해제한다.
+ * Lit 요소의 «저장 안 한 변경» — 연결된 동안 판정을 등록하고, 떨어지면 해제한다. 저장 · 삭제 뒤 같은 틱에 떠날 때는
+ * `markClean()` — 다음 갱신 전까지의 이동은 묻지 않는다(판정이 폼 상태를 아직 내리지 않았어도).
  * @example
  * ```ts
  * class OrderPage extends LitElement {
@@ -43,7 +44,12 @@ export declare function unsavedChangesGuard(_ctx?: RouteLeaveContext): boolean |
 export declare class UnsavedChangesController implements ReactiveController {
     private readonly isDirty;
     private release?;
+    private clean;
+    private readonly check;
     constructor(host: ReactiveControllerHost, isDirty: () => boolean);
+    /** 지금 상태는 저장됐다 — 호스트의 다음 갱신 전까지의 이동은 묻지 않는다. */
+    markClean(): void;
     hostConnected(): void;
+    hostUpdated(): void;
     hostDisconnected(): void;
 }

package/dist/unsaved.js

@@ -12,7 +12,7 @@ function i() {
 	for (let e of t) try {
 		if (e()) return !0;
 	} catch (e) {
-		return console.error("Unsaved-changes check failed — treating the screen as unsaved:", e), !0;
+		return console.error("[@iyulab/modern-app] the unsaved-changes check threw — treating the screen as unsaved:", e), !0;
 	}
 	return !1;
 }
@@ -30,10 +30,16 @@ function o(e) {
 }
 var s = class {
 	constructor(e, t) {
-		this.isDirty = t, e.addController(this);
+		this.isDirty = t, this.clean = !1, this.check = () => !this.clean && this.isDirty(), e.addController(this);
+	}
+	markClean() {
+		this.clean = !0;
 	}
 	hostConnected() {
-		this.release ??= r(this.isDirty);
+		this.release ??= r(this.check);
+	}
+	hostUpdated() {
+		this.clean = !1;
 	}
 	hostDisconnected() {
 		this.release?.(), this.release = void 0;

package/package.json

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

package/skills/modern-app/SKILL.md

@@ -245,7 +245,8 @@ Back/Forward included) and the browser asks before the document is left (`before
 import { UnsavedChangesController, confirmDiscardChanges } from '@iyulab/modern-app';
 // Lit
 readonly unsaved = new UnsavedChangesController(this, () => this.form.dirty);
-// React: useUnsavedChanges(dirty) from '@iyulab/modern-app/react'
+// React: const unsaved = useUnsavedChanges(dirty) from '@iyulab/modern-app/react'
+// Saved (or deleted) and leaving in the same tick: unsaved.markClean() before navigate() — until the next render
 // Plain: const release = trackUnsavedChanges(() => dirty);
 // A modal drawer's close is not a navigation — ask from its cancellable `hide` event:
 drawer.addEventListener('hide', async (e) => {

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

@@ -2,23 +2,29 @@
 
 **Tag:** `u-action-bar`
 
-The row of actions that closes a form or a detail screen: primary actions on the leading edge,
-destructive ones separated on the trailing edge.
+The row of actions that closes a form or a detail screen: destructive actions at the leading edge, the main
+actions at the trailing edge — the distance between them is the safeguard. Below 420px each group takes its own
+line with the main actions on top, so a destructive action never sits under the thumb.
 
 ```html
 <u-action-bar sticky>
-  <u-button appearance="solid">Save</u-button>
+  <u-button slot="danger" color="danger" appearance="plain">Delete</u-button>
+  <span slot="summary">1 change · Order number</span>
   <u-button appearance="outlined">Cancel</u-button>
-  <u-button slot="danger" color="danger">Delete</u-button>
+  <u-button>Save</u-button>
 </u-action-bar>
 ```
 
+A side sheet's footer runs to the sheet's edges — give it the sheet's inset with `--action-bar-padding-inline`
+rather than negative margins (the bar cannot know its parent's padding).
+
 ## Slots
 
 | Name | Description |
 |------|-------------|
-| *(default)* | Primary actions |
-| `danger` | Destructive actions, pushed to the trailing edge |
+| *(default)* | Main actions, at the trailing edge |
+| `danger` | Destructive actions, at the leading edge |
+| `summary` | What the main action will do — «1 change · Order number». Follows the danger actions and fills the free width |
 
 ## Properties
 
@@ -30,8 +36,9 @@ destructive ones separated on the trailing edge.
 
 | Part | Description |
 |------|-------------|
-| `main` | Primary action group |
+| `main` | Main action group |
 | `danger` | Destructive action group |
+| `summary` | Summary text wrapper |
 
 ## CSS Custom Properties
 
@@ -41,6 +48,7 @@ destructive ones separated on the trailing edge.
 | `--u-border-color-weak` | Top border when `sticky` |
 | `--u-space-sm` | Gap between actions within a group |
 | `--u-space-md` | Host and sticky-mode vertical padding |
+| `--action-bar-padding-inline` | Inline padding (default `0`) — the sheet inset for a footer that runs edge to edge |
 
 ⚠ `sticky` adds **vertical** padding only. It deliberately does not stretch to the container
 edges with negative margins — that would assume the parent has exactly that much horizontal

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

@@ -40,6 +40,7 @@ and those are different states of the business. So the component owns the rule.
 | `size` | `'default'\|'lg'` | `'default'` | ✓ | `'lg'` renders the value at the `title` type-scale step — for dashboard KPI tiles composed inside `u-info-section` |
 | `trend` | `'up'\|'down'\|'flat'` | — | | Trend direction; renders a trend indicator when set, alongside `trendLabel`; pair with trendLabel for an accessible name — trend alone conveys direction by color only |
 | `trendLabel` | `string` | — | | Trend copy, e.g. `"+12% vs last month"` — wording is the consumer's responsibility |
+| `description` | `string` | — | | A supporting line below the value — its basis, or the same amount in another unit (`"1,764,211 units"`). Trend copy belongs in `trendLabel` |
 | `tone` | `'positive'\|'negative'\|'warning'\|'neutral'` | — | | Explicit tone override; resolves from `trend` when unset (`up→positive`, `down→negative`, `flat`/unset→`neutral`) but always wins over inference. Colors the value text itself, independent of `trend` — a static figure (e.g. a balance due) can be toned `negative` with no trend arrow. `warning` means "needs attention, not wrong" (a deadline coming up, a rate under target but within limits) and is never inferred |
 
 ⚠ `numeric` no longer right-aligns (it did before 0.25.0). A field is a label/value pair that owns
@@ -83,6 +84,7 @@ as well once it exists.
 |------|-------------|
 | `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 (only when `description` is set) |
 
 ## CSS Custom Properties
 

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

@@ -16,6 +16,16 @@ markup works inside a side panel.
 </u-info-section>
 ```
 
+A stat strip — the totals above a list, as cells rather than a sentence:
+
+```html
+<u-info-section layout="strip">
+  <u-info-field label="Orders" value="962" unit="orders" description="1,764,211 units" size="lg"></u-info-field>
+  <u-info-field label="Due in 7 days" value="14" tone="warning" description="3 not started" size="lg"></u-info-field>
+  <u-info-field label="Overdue" value="₩0" tone="negative" description="0 orders" size="lg"></u-info-field>
+</u-info-section>
+```
+
 ## Slots
 
 | Name | Description |
@@ -26,7 +36,8 @@ markup works inside a side panel.
 
 | Property | Type | Default | Reflect | Description |
 |----------|------|---------|---------|-------------|
-| `min` | `number` | `160` | | Minimum column width in px. Raise it for domains with long labels |
+| `min` | `number` | `160` | | Minimum column width in px. Raise it for domains with long labels. Not used by `layout="strip"` |
+| `layout` | `'grid'\|'strip'` | `'grid'` | ✓ | `grid` — label-value cells in a responsive grid · `strip` — a stat strip: cells on one bordered surface split by 1px dividers, all side by side or all stacked once the strip is narrower than 640px (never a ragged row) |
 
 ## CSS Parts
 
@@ -39,6 +50,8 @@ markup works inside a side panel.
 | Property | Description |
 |----------|-------------|
 | `--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) |
 
 ⚠ 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/master-detail-layout.md

@@ -20,6 +20,24 @@ Swap the `detail` slot's content when the selection changes:
 </u-master-detail-layout>
 ```
 
+While nothing is in the `detail` slot the master takes the whole width — a fixed master with an
+empty two-thirds beside it reads as a broken page. To keep the detail place visible with a «pick a
+record» message instead, put it in `slot="detail-placeholder"`; it shows while `detail` is empty
+and steps aside once it is filled (not in overlay mode, where it would cover the master).
+
+## A wide list with a side panel
+
+`masterSize` fixes the master — the mail / settings shape (narrow list, wide detail). For the
+opposite — a wide table with a record summary beside it — set `detail-size`: the detail takes that
+width and the master fills the rest. With the detail empty the table takes everything.
+
+```html
+<u-master-detail-layout detail-size="24rem">
+  <u-rich-table …></u-rich-table>
+  <aside slot="detail">…selected record…</aside>
+</u-master-detail-layout>
+```
+
 On a narrow container (self width, not viewport — see below) the detail pane switches to a
 full overlay above the master pane, with a small close button that fires `detail-close`.
 Clearing the detail slot yourself (in response to the event) is what actually dismisses it —
@@ -72,13 +90,15 @@ own margin; that is inherent to printing two columns.
 | Name | Description |
 |------|-------------|
 | *(default)* | Master area |
-| `detail` | Detail area — present ⇒ shown, empty ⇒ hidden |
+| `detail` | Detail area — present ⇒ shown, empty ⇒ hidden (the master then takes the whole width) |
+| `detail-placeholder` | Shown in the detail place while `detail` is empty — side by side only |
 
 ## Properties
 
 | Property | Type | Default | Reflect | Description |
 |----------|------|---------|---------|-------------|
 | `masterSize` | `string` | `'22rem'` | | Fixed width of the master pane, a CSS length (`master-size`) |
+| `detailSize` | `string | undefined` | `undefined` | ✓ | Fixed width of the detail pane (`detail-size`) — the master then fills the rest and `masterSize` is not used |
 | `overlayBreakpoint` | `number` | `760` | | Below this self width in px, detail becomes a full overlay (`overlay-breakpoint`) |
 | `locale` | `string` | `''` | | Language tag for the close button's accessible label |