@iyulab/modern-app 0.14.0 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## [0.16.0] - 2026-08-11
+
+### Changed
+
+- **`SidebarLayout`'s main content area now ships a default padding**
+  (`var(--u-space-3xl, 32px)`) instead of none. Every consumer previously had to add this
+  themselves to keep route content off the viewport/sidebar edge. Full-bleed layouts (e.g. a
+  dashboard whose table should reach the panel edge) can still opt back to `0` via
+  `styles.main`. This is a visible rendering change for any consumer that never set
+  `styles.main` — hence the minor bump rather than a patch.
+
+## [0.15.0] - 2026-08-11
+
+### Added
+
+- **`u-info-field` accepts `size` (`'default' | 'lg'`), `trend` (`'up' | 'down' | 'flat'`),
+  `trendLabel`, and `tone` (`'positive' | 'negative' | 'neutral'`).** `size="lg"` renders the
+  value at title type-scale for dashboard KPI tiles, composed inside the existing
+  `u-info-section` grid — no new component. `tone` resolves from `trend` when unset
+  (`up→positive`, `down→negative`, `flat→neutral`) but an explicit `tone` always wins, since some
+  metrics invert the usual direction-to-sentiment mapping. `trendLabel` wording is the consumer's
+  responsibility. New `trend` part.
+- **`u-master-detail-layout`** — a responsive master›detail split-pane shell (default slot =
+  master, `slot="detail"` = detail; appears when filled, disappears when emptied). Below
+  `overlayBreakpoint` (self width, default 760px) the detail pane becomes a full overlay with a
+  close button that fires `detail-close`. `masterSize` sets the fixed master-pane width. Parts:
+  `master`, `divider`, `detail`, `detail-close`.
+- **`u-wizard`** — a step indicator + panel + Back/Next for multi-step flows. `steps`/
+  `active`(controlled)/`orientation`/`linear` props; cancelable `step-change` event
+  (`{from, to}`) for validation gating; validation and save/resume stay outside the component.
+  Keyboard-operable end to end, focus moves to the panel on every step change, and an
+  `aria-live` region announces each transition. Parts: `indicator`, `step`, `panel`, `actions`.
+
 ## [0.14.0] - 2026-08-10
 
 ### Added

package/dist/components/InfoField.d.ts

@@ -1,6 +1,9 @@
 import { StyledElement } from '../internals/StyledElement.js';
-type ElementParts = 'host' | 'label' | 'value';
+type ElementParts = 'host' | 'label' | 'value' | 'trend';
 export type InfoFieldFormat = 'number' | 'currency' | 'date';
+export type InfoFieldSize = 'default' | 'lg';
+export type InfoFieldTrend = 'up' | 'down' | 'flat';
+export type InfoFieldTone = 'positive' | 'negative' | 'neutral';
 /** 값이 "아직 없음"인가 — `0` 과 `false` 는 **값이다**. */
 export declare function isBlank(v: unknown): boolean;
 /**
@@ -51,6 +54,31 @@ export declare class InfoField extends StyledElement<ElementParts> {
      * omitted, degrades to plain number formatting without a currency symbol (does not throw).
      */
     currency?: string;
+    /**
+     * Display size. `'lg'` renders the value at the `title` type-scale step
+     * (`--u-text-title-size`/`--u-text-title-weight`) — intended for dashboard KPI tiles
+     * composed inside `u-info-section`. Reflects to the `size` attribute so
+     * `:host([size="lg"])` styling works.
+     */
+    size: InfoFieldSize;
+    /**
+     * Trend direction (optional). Renders a trend indicator when set. The directional glyph
+     * (▲/▼) is decorative (`aria-hidden`) — **pair `trend` with `trendLabel`** so the indicator
+     * has an accessible name; `trend` alone conveys direction by color only.
+     */
+    trend?: InfoFieldTrend;
+    /**
+     * Trend copy, e.g. `"+12% vs last month"`. **Wording is the consumer's responsibility** — this
+     * component does not compose domain phrasing. Setting this alone (without `trend`) still shows
+     * the trend part, toned `neutral` unless `tone` is set.
+     */
+    trendLabel?: string;
+    /**
+     * Explicit tone override. When unset, resolves from `trend` (`up→positive`, `down→negative`,
+     * `flat`/unset→`neutral`). **Always wins over inference** — some metrics invert the usual
+     * direction-to-sentiment mapping (e.g. a falling "open tickets" count is `positive`).
+     */
+    tone?: InfoFieldTone;
     private get hasSlotted();
     private formatValue;
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/InfoField.js

@@ -7,11 +7,14 @@ import { customElement as a, property as o } from "lit/decorators.js";
 import { formatCurrency as s, formatDate as c, formatNumber as l } from "@iyulab/components";
 //#region src/components/InfoField.ts
 function u(e) {
+	return e === "up" ? "positive" : e === "down" ? "negative" : "neutral";
+}
+function d(e) {
 	return e == null || typeof e == "string" && e.trim() === "";
 }
-var d = class extends n {
+var f = class extends n {
 	constructor(...e) {
-		super(...e), this.label = "", this.blank = "—", this.numeric = !1;
+		super(...e), this.label = "", this.blank = "—", this.numeric = !1, this.size = "default";
 	}
 	static {
 		this.styles = [super.styles, r];
@@ -23,15 +26,23 @@ var d = class extends n {
 		return this.format === "currency" ? this.currency ? s(Number(this.value), this.currency) : l(Number(this.value)) : this.format === "number" ? l(Number(this.value)) : this.format === "date" ? c(this.value) : String(this.value);
 	}
 	render() {
-		let e = !this.hasSlotted && u(this.value), t = this.numeric || this.format === "number" || this.format === "currency";
+		let e = !this.hasSlotted && d(this.value), t = this.numeric || this.format === "number" || this.format === "currency", n = this.trend !== void 0 || this.trendLabel !== void 0, r = this.tone ?? u(this.trend), a = this.trend === "up" ? "▲" : this.trend === "down" ? "▼" : "";
 		return i`
       <div class="label" part="label">${this.label}</div>
       <div class="value ${t ? "numeric" : ""} ${e ? "blank" : ""}" part="value">
         ${this.hasSlotted ? i`<slot></slot>` : e ? this.blank : this.formatValue()}
       </div>
+      ${n ? i`
+        <div class="trend tone-${r}" part="trend">
+          ${a ? i`<span aria-hidden="true">${a}</span> ` : ""}${this.trendLabel ?? ""}
+        </div>
+      ` : ""}
     `;
 	}
 };
-t([o({ type: String }), e("design:type", Object)], d.prototype, "label", void 0), t([o({ type: String }), e("design:type", Object)], d.prototype, "value", void 0), t([o({ type: String }), e("design:type", Object)], d.prototype, "blank", void 0), t([o({ type: Boolean }), e("design:type", Object)], d.prototype, "numeric", void 0), t([o({ type: String }), e("design:type", Object)], d.prototype, "format", void 0), t([o({ type: String }), e("design:type", String)], d.prototype, "currency", void 0), d = t([a("u-info-field")], d);
+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,
+	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);
 //#endregion
-export { d as InfoField, u as isBlank };
+export { f as InfoField, d as isBlank };

package/dist/components/InfoField.styles.js

@@ -28,6 +28,11 @@ var t = e`
     font-variant-numeric: tabular-nums;
   }
 
+  :host([size="lg"]) .value {
+    font-size: var(--u-text-title-size, 20px);
+    font-weight: var(--u-text-title-weight, 700);
+  }
+
   /* "아직 없음"은 값보다 약하게 — 다만 **읽을 수 있어야 한다.**
      ⚠더 흐리게 만들고 싶은 유혹이 있는데, 이 자리가 안 읽히면 사용자는 빈 칸인지
      로딩 중인지 구별하지 못한다. */
@@ -35,6 +40,28 @@ var t = e`
     color: var(--u-txt-color-weak, #757575);
     font-weight: var(--u-text-body-weight, 400);
   }
+
+  /* size="lg" 보다 우선해야 한다 — blank 는 lg 모드에서도 계속 de-emphasize 상태를 유지해야 한다. */
+  :host([size="lg"]) .value.blank {
+    font-weight: var(--u-text-body-weight, 400);
+  }
+
+  .trend {
+    font-size: var(--u-text-caption-size, 12px);
+    margin-top: var(--u-space-3xs, 2px);
+  }
+
+  .trend.tone-positive {
+    color: var(--u-success-color-strong, #1B5E20);
+  }
+
+  .trend.tone-negative {
+    color: var(--u-danger-color-strong, #C62828);
+  }
+
+  .trend.tone-neutral {
+    color: var(--u-txt-color-weak, #757575);
+  }
 `;
 //#endregion
 export { t as styles };

package/dist/components/MasterDetailLayout.d.ts

@@ -0,0 +1,70 @@
+import { PropertyValues } from 'lit';
+import { StyledElement } from '../internals/StyledElement.js';
+type ElementParts = 'host' | 'master' | 'divider' | 'detail' | 'detail-close';
+/**
+ * master›detail 반응형 split-pane 셸.
+ *
+ * ★**Vaadin `MasterDetailLayout` 을 선례로 삼되 범위를 의도적으로 줄였다.** 드래그 가능한
+ *   스플리터는 v1 스코프 아웃(`masterSize` 는 고정 prop) — "얇은 구조" 원칙상 과하다.
+ *
+ * 기본 슬롯 = master 영역, `slot="detail"` = detail 영역. **detail 은 채워지면 나타나고
+ * 비우면 사라진다** — Vaadin 과 동일 계약. 선택 상태 관리(무엇을 detail 에 보여줄지)는
+ * 이 컴포넌트가 하지 않는다 — "그릇이지 디자인이 아니다"(`lob-layers.md` §3). 소비자가
+ * `u-rich-table` 의 `selection-change` 등으로 `slot="detail"` 자식을 직접 갈아끼운다.
+ *
+ * ```html
+ * <u-master-detail-layout>
+ *   <u-rich-table @selection-change=${onSelect}>…</u-rich-table>
+ *   <div slot="detail">…선택된 레코드 상세…</div>
+ * </u-master-detail-layout>
+ * ```
+ *
+ * 좁은 화면(자기 폭 기준, `overlayBreakpoint` 미만)에서 detail 이 master 위 전체 오버레이로
+ * 전환된다 — 오버레이 모드에서만 보이는 작은 닫기 버튼이 `detail-close` 이벤트를 낸다.
+ * 이건 구조적 기능(레이아웃 역학)이라 도메인 로직이 아니므로 컴포넌트가 가져도 된다.
+ *
+ * ★**왜 `@container` 미디어 질의가 아니라 `ResizeObserver` 인가**: `overlayBreakpoint` 는
+ *   prop 이라 인스턴스마다 다른 값을 가질 수 있는데, CSS `@container` 조건은 빌드 시점에
+ *   고정된 값만 받는다(런타임 커스텀 프로퍼티를 조건절에 못 쓴다) — 그래서 자기 폭을 직접
+ *   재서 `overlay` 속성을 반영한다. `masterSize`/`overlayBreakpoint` 가 고정 디자인값이
+ *   아니라 소비자가 화면마다 바꿀 구조 파라미터이기 때문에 생기는 필연적 차이이지,
+ *   `PageHeader`/`GroupBox`/`ActionBar` 의 고정 중단점 관행을 벗어나려는 것이 아니다.
+ *
+ * 오버라이드: `part`(host·master·divider·detail·detail-close) + slot 치환.
+ */
+export declare class MasterDetailLayout extends StyledElement<ElementParts> {
+    static styles: import('lit').CSSResultGroup[];
+    /** master 영역의 고정 폭(CSS 길이). detail 은 나머지 공간을 채운다. */
+    masterSize: string;
+    /**
+     * 이 값(px, 자기 폭 기준) 미만이면 detail 이 전체 오버레이로 전환된다.
+     * `masterSize` + 최소한의 읽기 가능한 detail 폭을 더한 값보다 커야 두 패널이
+     * 동시에 설 자리가 있다.
+     */
+    overlayBreakpoint: number;
+    /**
+     * 언어 태그. 비우면 `setDefaultLocale()` 값, 그것도 없으면 영어.
+     * 닫기 버튼의 접근성 라벨에만 쓰인다.
+     */
+    locale: string;
+    /** detail 슬롯 배정 상태 — CSS `:has()` 로는 알 수 없다(`internals/slotted.ts` 참조). */
+    private hasDetail;
+    private resizeObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    /**
+     * 오버레이 모드의 닫기 버튼이 눌렸을 때. detail 내용을 지우는 것은 소비자 몫이라
+     * 컴포넌트 내부에 취소로 막을 동작이 없다 — 그래서 취소 불가 이벤트다(`fire()` 기본값인
+     * `cancelable: true` 를 명시적으로 끈다).
+     */
+    private handleDetailClose;
+    private handleDetailSlotChange;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-master-detail-layout': MasterDetailLayout;
+    }
+}
+export {};

package/dist/components/MasterDetailLayout.js

@@ -0,0 +1,59 @@
+import e from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { StyledElement as n } from "../internals/StyledElement.js";
+import { getLocaleStrings as r } from "../internals/locale.js";
+import { slotHasContent as i } from "../internals/slotted.js";
+import { styles as a } from "./MasterDetailLayout.styles.js";
+import { html as o } from "lit";
+import { customElement as s, property as c, state as l } from "lit/decorators.js";
+import "@iyulab/components/dist/components/button/UButton.js";
+import "@iyulab/components/dist/components/icon/UIcon.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.handleDetailClose = () => {
+			this.fire("detail-close", { cancelable: !1 });
+		}, this.handleDetailSlotChange = (e) => {
+			this.hasDetail = i(e.target);
+		};
+	}
+	static {
+		this.styles = [super.styles, a];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.resizeObserver = new ResizeObserver((e) => {
+			let t = e[0]?.contentRect.width ?? 0;
+			t !== 0 && this.toggleAttribute("overlay", t < this.overlayBreakpoint);
+		}), this.resizeObserver.observe(this);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.resizeObserver?.disconnect();
+	}
+	updated(e) {
+		super.updated(e), e.has("masterSize") && this.style.setProperty("--_master-size", this.masterSize);
+	}
+	render() {
+		return o`
+      <div class="master" part="master"><slot></slot></div>
+      <div class="divider ${this.hasDetail ? "" : "empty"}" part="divider"></div>
+      <div class="detail ${this.hasDetail ? "" : "empty"}" part="detail">
+        <u-button class="detail-close" part="detail-close" variant="ghost"
+          aria-label=${r(this.locale || void 0).detailClose}
+          @click=${this.handleDetailClose}
+        >
+          <u-icon lib="internal" name="x"></u-icon>
+        </u-button>
+        <slot name="detail" @slotchange=${this.handleDetailSlotChange}></slot>
+      </div>
+    `;
+	}
+};
+t([c({
+	type: String,
+	attribute: "master-size"
+}), e("design:type", Object)], u.prototype, "masterSize", 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);
+//#endregion
+export { u as MasterDetailLayout };

package/dist/components/MasterDetailLayout.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

package/dist/components/MasterDetailLayout.styles.js

@@ -0,0 +1,72 @@
+import { css as e } from "lit";
+//#region src/components/MasterDetailLayout.styles.ts
+var t = e`
+  :host {
+    display: flex;
+    position: relative;
+    min-width: 0;
+    height: 100%;
+    /* 부모(페이지 셸)가 높이를 정해 준다는 전제 — GroupBox/ActionBar 와 달리 이 컴포넌트는
+       "화면을 채우는 셸"이 역할이라 자기 높이를 스스로 갖지 않는다. */
+  }
+
+  .master {
+    flex: 0 0 var(--_master-size, 22rem);
+    min-width: 0;
+    overflow: auto;
+  }
+
+  /* 좁을 때(자기 폭 기준, JS 로 잰 'overlay' 속성 — @container 아님, 클래스 상단 주석 참조):
+     master 가 전체 폭을 채운다. detail 은 그 위 오버레이로 뜬다. */
+  :host([overlay]) .master {
+    flex: 1 1 auto;
+  }
+
+  .divider {
+    flex: 0 0 auto;
+    width: 0;
+    border-left: 1px solid var(--u-border-color-weak, #EEEEEE);
+  }
+  /* detail 이 비어 있으면 나눌 것이 없다 — 슬롯 배정은 slotchange 로 추적한다
+     (internals/slotted.ts). ⚠CSS :has() 로는 못 한다: <slot> 자신이 자식이라 :has(*) 가
+     항상 참이다. */
+  .divider.empty,
+  :host([overlay]) .divider {
+    display: none;
+  }
+
+  .detail {
+    flex: 1 1 auto;
+    min-width: 0;
+    position: relative;
+    overflow: auto;
+  }
+  .detail.empty {
+    display: none;
+  }
+
+  /* 오버레이 모드: detail 이 master 위에 뜬다. master 의 flex-basis 를 넘겨받으므로
+     master 를 가리는 만큼만 자리를 차지하면 된다 — inset:0 로 host 전체를 덮는다. */
+  :host([overlay]) .detail {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    background-color: var(--u-panel-bg-color, #FFFFFF);
+    box-shadow: var(--u-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.06));
+  }
+
+  /* 작은 닫기 버튼 — 오버레이 모드에서만 보인다. 나란히 배치될 때는 detail 이 이미
+     제자리(패널)라 닫을 이유가 없다 — "구조적 기능"의 범위를 오버레이 전환 자체로 좁힌다. */
+  .detail-close {
+    display: none;
+    position: absolute;
+    top: var(--u-space-sm, 8px);
+    right: var(--u-space-sm, 8px);
+    z-index: 2;
+  }
+  :host([overlay]) .detail-close {
+    display: inline-flex;
+  }
+`;
+//#endregion
+export { t as styles };

package/dist/components/Wizard.d.ts

@@ -0,0 +1,97 @@
+import { PropertyValues } from 'lit';
+import { StyledElement } from '../internals/StyledElement.js';
+type ElementParts = 'host' | 'indicator' | 'step' | 'panel' | 'actions';
+/** 스텝 상태. `done`은 마디를 채워 표시, `error`는 위험색, `disabled`는 도달 불가로 만든다. */
+export type WizardStepState = 'done' | 'error' | 'disabled';
+/** 스텝 정의 — `steps` 배열의 순서가 곧 스텝 순서다. */
+export interface WizardStep {
+    id: string;
+    label: string;
+    state?: WizardStepState;
+}
+/** `step-change` 이벤트의 detail. */
+export interface WizardStepChangeDetail {
+    from: number;
+    to: number;
+}
+/**
+ * 마법사/스테퍼 — 다단계 흐름의 스텝 인디케이터 + 패널 + 전진/후진 액션.
+ *
+ * ★**검증(validation)과 저장/재개는 의도적으로 컴포넌트 밖이다.** 도메인 상태 관리라
+ *   `lob-layers.md` §4("도메인 변환은 소비앱의 어댑터 층에 산다")와 정면으로 맞물린다.
+ *   `active` 는 controlled prop — 소비자가 외부에서 영속화·복원한다(`UExpander` 의
+ *   `open` 과 같은 패턴: 컴포넌트가 스스로 갱신하되, 소비자도 직접 대입할 수 있다).
+ *
+ * 기본 슬롯에 스텝 개수만큼 자식을 넣으면(문서 순서 = `steps` 순서) 활성 스텝만 보이고
+ * 나머지는 `hidden`. `slot="actions"` 로 기본 Back/Next 버튼을 완전히 대체할 수 있다
+ * ("Submit"이냐 "Next"냐는 라이브러리가 정할 도메인 어휘가 아니다 — 소비자 책임).
+ *
+ * ```html
+ * <u-wizard .steps=${[
+ *   { id: 'info', label: '기본 정보' },
+ *   { id: 'payment', label: '결제', state: 'error' },
+ *   { id: 'review', label: '확인' },
+ * ]} active=${1}
+ *   @step-change=${(e: CustomEvent<WizardStepChangeDetail>) => {
+ *     if (!isValid()) e.preventDefault();
+ *   }}>
+ *   <section>…info 패널…</section>
+ *   <section>…payment 패널…</section>
+ *   <section>…review 패널…</section>
+ * </u-wizard>
+ * ```
+ *
+ * `linear`(기본 `true`)이면 인디케이터 클릭으로 미방문 스텝을 건너뛸 수 없다 — 이미 지나온
+ * 스텝(또는 `state="done"`으로 명시된 스텝)으로만 돌아갈 수 있다. `linear=false`("editable")면
+ * 비활성(`disabled`)이 아닌 스텝은 전부 클릭으로 바로 이동 가능.
+ *
+ * **접근성**: 키보드만으로 완주 가능(인디케이터는 화살표로 포커스 이동 + Enter/Space로
+ * 이동, `Home`/`End`로 처음/끝 도달 가능 스텝) · 스텝 전환 시 포커스가 패널로 이동 ·
+ * 상태 변화가 `aria-live="polite"` 영역으로 announce.
+ *
+ * 오버라이드: `part`(host·indicator·step·panel·actions) + `actions` slot 완전 치환.
+ */
+export declare class Wizard extends StyledElement<ElementParts> {
+    static styles: import('lit').CSSResultGroup[];
+    /** 스텝 정의 배열. 문서 순서로 기본 슬롯의 자식과 매칭된다. */
+    steps: WizardStep[];
+    /** 현재 스텝 인덱스(controlled) — 소비자가 외부에서 영속화·복원할 수 있다. */
+    active: number;
+    /** 인디케이터 방향. 대시보드형 앱엔 세로가 권장(리서치 근거는 계획 문서 §4). */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * 순차 강제 여부. `true`(기본)면 인디케이터 클릭으로 미방문 스텝을 건너뛸 수 없다 —
+     * 이미 지나온 스텝이나 `state="done"` 스텝으로만 돌아갈 수 있다. `false`면 `disabled`가
+     * 아닌 모든 스텝을 클릭으로 바로 이동 가능.
+     */
+    linear: boolean;
+    /** 언어 태그. 기본 Back/Next 라벨과 live region 문구에 쓰인다. */
+    locale: string;
+    /** `aria-live` 영역에 낼 문구 — 스텝이 바뀔 때만 갱신된다. */
+    private announcement;
+    protected updated(changed: PropertyValues): void;
+    /** 기본 슬롯의 각 자식(문서 순서)을 `steps` 인덱스와 맞춰 활성 패널만 보이게 한다. */
+    private syncPanels;
+    private isReachable;
+    private nextReachable;
+    /** 다음 스텝으로. 도달 가능한 스텝이 없으면(마지막 스텝) 아무 일도 하지 않는다. */
+    next(): boolean;
+    /** 이전 스텝으로. */
+    back(): boolean;
+    /**
+     * 임의 스텝으로 이동. `step-change`(취소 가능)가 막히면(`preventDefault()`) 이동하지
+     * 않고 `false`를 돌려준다.
+     */
+    goTo(i: number): boolean;
+    private announceStep;
+    private moveFocusToPanel;
+    private handleTabKeydown;
+    private renderStep;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-wizard': Wizard;
+    }
+}
+export {};

package/dist/components/Wizard.js

@@ -0,0 +1,122 @@
+import e from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.143.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";
+import { html as a, nothing as o } from "lit";
+import { customElement as s, property as c, state as l } from "lit/decorators.js";
+import "@iyulab/components/dist/components/button/UButton.js";
+//#region src/components/Wizard.ts
+var u = class extends n {
+	constructor(...e) {
+		super(...e), this.steps = [], this.active = 0, this.orientation = "vertical", this.linear = !0, this.locale = "", this.announcement = "", this.handleTabKeydown = (e, t) => {
+			let n = this.orientation === "horizontal", r = n ? "ArrowRight" : "ArrowDown", i = n ? "ArrowLeft" : "ArrowUp", a = -1;
+			if (e.key === r) a = this.nextReachable(t, 1);
+			else if (e.key === i) a = this.nextReachable(t, -1);
+			else if (e.key === "Home") a = this.nextReachable(-1, 1);
+			else if (e.key === "End") a = this.nextReachable(this.steps.length, -1);
+			else return;
+			e.preventDefault(), a !== -1 && this.renderRoot.querySelectorAll("[part=\"step\"]")[a]?.focus();
+		};
+	}
+	static {
+		this.styles = [super.styles, i];
+	}
+	updated(e) {
+		super.updated(e), (e.has("active") || e.has("steps")) && this.syncPanels();
+	}
+	syncPanels() {
+		Array.from(this.children).filter((e) => !e.hasAttribute("slot")).forEach((e, t) => {
+			e.hidden = t !== this.active;
+		});
+	}
+	isReachable(e) {
+		let t = this.steps[e];
+		return !t || t.state === "disabled" ? !1 : !this.linear || e <= this.active + 1 || t.state === "done";
+	}
+	nextReachable(e, t) {
+		for (let n = e + t; n >= 0 && n < this.steps.length; n += t) if (this.isReachable(n)) return n;
+		return -1;
+	}
+	next() {
+		return this.goTo(this.active + 1);
+	}
+	back() {
+		return this.goTo(this.active - 1);
+	}
+	goTo(e) {
+		if (e < 0 || e >= this.steps.length || e === this.active || !this.isReachable(e)) return !1;
+		let t = this.active;
+		return this.fire("step-change", { detail: {
+			from: t,
+			to: e
+		} }) ? (this.active = e, this.announceStep(e), this.moveFocusToPanel(), !0) : !1;
+	}
+	announceStep(e) {
+		let t = this.steps[e], n = r(this.locale || void 0);
+		this.announcement = n.wizardStepAnnouncement(e + 1, this.steps.length, t?.label ?? "");
+	}
+	async moveFocusToPanel() {
+		await this.updateComplete, this.renderRoot.querySelector("[part=\"panel\"]")?.focus();
+	}
+	renderStep(e, t) {
+		let n = t === this.active, r = this.isReachable(t);
+		return a`
+      <button type="button"
+        class="step ${n ? "active" : ""} ${e.state ? `state-${e.state}` : ""}"
+        part="step"
+        role="tab"
+        id="tab-${t}"
+        aria-selected=${n ? "true" : "false"}
+        aria-controls="panel"
+        aria-disabled=${r ? o : "true"}
+        tabindex=${n ? "0" : "-1"}
+        ?disabled=${e.state === "disabled"}
+        @click=${() => this.goTo(t)}
+        @keydown=${(e) => this.handleTabKeydown(e, t)}
+      >
+        <span class="marker" aria-hidden="true">${e.state === "done" ? "✓" : t + 1}</span>
+        <span class="label">${e.label}</span>
+      </button>
+    `;
+	}
+	render() {
+		let e = r(this.locale || void 0), t = this.active >= this.steps.length - 1;
+		return a`
+      <div class="indicator" part="indicator" role="tablist" aria-orientation=${this.orientation}>
+        ${this.steps.map((e, t) => this.renderStep(e, t))}
+      </div>
+      <div class="content">
+        <div class="panel" part="panel" tabindex="-1" id="panel" aria-labelledby="tab-${this.active}">
+          <slot @slotchange=${() => this.syncPanels()}></slot>
+        </div>
+        <div class="actions" part="actions">
+          <slot name="actions">
+            <u-button variant="ghost" ?disabled=${this.active === 0} @click=${() => this.back()}>
+              ${e.wizardBack}
+            </u-button>
+            ${t ? o : a`
+              <u-button color="primary" @click=${() => this.next()}>${e.wizardNext}</u-button>
+            `}
+          </slot>
+        </div>
+        <div class="announcement" aria-live="polite" role="status">${this.announcement}</div>
+      </div>
+    `;
+	}
+};
+t([c({
+	type: Array,
+	attribute: !1
+}), e("design:type", Array)], u.prototype, "steps", void 0), t([c({
+	type: Number,
+	reflect: !0
+}), e("design:type", Object)], u.prototype, "active", void 0), t([c({
+	type: String,
+	reflect: !0
+}), e("design:type", String)], u.prototype, "orientation", void 0), t([c({
+	type: Boolean,
+	reflect: !0
+}), e("design:type", Object)], u.prototype, "linear", void 0), t([c({ type: String }), e("design:type", Object)], u.prototype, "locale", void 0), t([l(), e("design:type", Object)], u.prototype, "announcement", void 0), u = t([s("u-wizard")], u);
+//#endregion
+export { u as Wizard };

package/dist/components/Wizard.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

package/dist/components/Wizard.styles.js

@@ -0,0 +1,114 @@
+import { css as e } from "lit";
+//#region src/components/Wizard.styles.ts
+var t = e`
+  :host {
+    display: flex;
+    flex-direction: row;
+    gap: var(--u-space-xl, 20px);
+    min-width: 0;
+  }
+  :host([orientation="horizontal"]) {
+    flex-direction: column;
+  }
+
+  .indicator {
+    display: flex;
+    flex-direction: column;
+    gap: var(--u-space-sm, 8px);
+    flex: 0 0 auto;
+    margin: 0;
+    padding: 0;
+  }
+  :host([orientation="horizontal"]) .indicator {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .content {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--u-space-lg, 16px);
+  }
+
+  .step {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--u-space-sm, 8px);
+    background: none;
+    border: none;
+    padding: var(--u-space-2xs, 4px) 0;
+    font: inherit;
+    color: var(--u-txt-color-weak, #757575);
+    cursor: pointer;
+    text-align: left;
+  }
+  .step[disabled] {
+    color: var(--u-txt-color-disabled, #BDBDBD);
+    cursor: not-allowed;
+  }
+  /* 도달은 못 하지만(linear 모드에서 아직 안 지나온 스텝) disabled 는 아니다 —
+     소비자가 미리 그 존재는 보여주고 싶을 수 있어 시각적으로 흐리되 마우스 커서는
+     "막혔다"가 아니라 "여기는 아직"으로 남긴다. */
+  .step[aria-disabled="true"]:not([disabled]) {
+    cursor: default;
+    opacity: 0.6;
+  }
+
+  .marker {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5em;
+    height: 1.5em;
+    border-radius: 50%;
+    border: 1px solid var(--u-border-color-strong, #BDBDBD);
+    font-size: var(--u-text-caption-size, 12px);
+    font-weight: var(--u-text-label-weight, 600);
+  }
+  .step.active .marker {
+    border-color: var(--u-primary-color, #1976D2);
+    color: var(--u-primary-color, #1976D2);
+  }
+  .step.state-done .marker {
+    background-color: var(--u-primary-color, #1976D2);
+    border-color: var(--u-primary-color, #1976D2);
+    color: var(--u-txt-color-inverse, #FFFFFF);
+  }
+  .step.state-error .marker {
+    border-color: var(--u-danger-color, #D32F2F);
+    color: var(--u-danger-color, #D32F2F);
+  }
+
+  .label {
+    font-size: var(--u-text-label-size, 13px);
+  }
+
+  .panel {
+    min-width: 0;
+  }
+
+  .actions {
+    display: flex;
+    gap: var(--u-space-sm, 8px);
+  }
+
+  /* live region — 화면엔 안 보이지만 스크린리더는 읽는다. 폭/높이는 디자인 토큰이 아니라
+     "존재는 하되 렌더 크기는 0에 가까워야" 하는 구조값이라 var() 로 감싼다(리터럴 스캔
+     예외 — 시트 자체와 무관한 값이라 시트에 실을 이유가 없다). */
+  .announcement {
+    position: absolute;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    width: var(--_a11y-unit, 1px);
+    height: var(--_a11y-unit, 1px);
+    margin: calc(-1 * var(--_a11y-unit, 1px));
+    padding: 0;
+    border: 0;
+  }
+`;
+//#endregion
+export { t as styles };

package/dist/index.d.ts

@@ -10,6 +10,9 @@ export { InfoSection } from './components/InfoSection.js';
 export { InfoField, isBlank } from './components/InfoField.js';
 export { EmptyState } from './components/EmptyState.js';
 export { ActionBar } from './components/ActionBar.js';
+export { MasterDetailLayout } from './components/MasterDetailLayout.js';
+export { Wizard } from './components/Wizard.js';
+export type { WizardStep, WizardStepState, WizardStepChangeDetail } from './components/Wizard.js';
 export { registerLocale, setDefaultLocale, getLocaleStrings, getDefaultLocale, } from './internals/locale.js';
 export type { ModernAppLocaleStrings } from './internals/locale.js';
 export { app };

package/dist/index.js

@@ -7,7 +7,9 @@ import { InfoSection as c } from "./components/InfoSection.js";
 import { InfoField as l, isBlank as u } from "./components/InfoField.js";
 import { EmptyState as d } from "./components/EmptyState.js";
 import { ActionBar as f } from "./components/ActionBar.js";
+import { MasterDetailLayout as p } from "./components/MasterDetailLayout.js";
+import { Wizard as m } from "./components/Wizard.js";
 //#region src/index.ts
-var p = e;
+var h = e;
 //#endregion
-export { f as ActionBar, d as EmptyState, s as GroupBox, l as InfoField, c as InfoSection, o as PageHeader, e as app, p as default, t as filterSidebarItems, n as getDefaultLocale, r as getLocaleStrings, u as isBlank, i as registerLocale, a as setDefaultLocale };
+export { f as ActionBar, d as EmptyState, s as GroupBox, l as InfoField, c as InfoSection, p as MasterDetailLayout, o as PageHeader, m as Wizard, e as app, h as default, t as filterSidebarItems, n as getDefaultLocale, r as getLocaleStrings, u as isBlank, i as registerLocale, a as setDefaultLocale };

package/dist/internals/locale.d.ts

@@ -26,6 +26,13 @@ export interface ModernAppLocaleStrings {
     /** Empty state — records exist but the current query matched none. */
     noResultsTitle: string;
     noResultsDescription: string;
+    /** Master-detail layout — accessible label for the overlay-mode close button. */
+    detailClose: string;
+    /** Wizard — default Back/Next action labels ("Submit" wording is the consumer's call). */
+    wizardBack: string;
+    wizardNext: string;
+    /** Wizard — live-region announcement read out on every step change. */
+    wizardStepAnnouncement: (index: number, total: number, label: string) => string;
 }
 /**
  * Register a locale. Partial overrides are merged with the English defaults,

package/dist/internals/locale.js

@@ -4,7 +4,11 @@ var e = {
 	noDataTitle: "Nothing here yet",
 	noDataDescription: "",
 	noResultsTitle: "No matching results",
-	noResultsDescription: "Try changing your search terms or filters."
+	noResultsDescription: "Try changing your search terms or filters.",
+	detailClose: "Close",
+	wizardBack: "Back",
+	wizardNext: "Next",
+	wizardStepAnnouncement: (e, t, n) => `Step ${e} of ${t}: ${n}`
 }, t = /* @__PURE__ */ new Map(), n;
 function r(n, r) {
 	t.set(n.toLowerCase(), {

package/dist/layouts/SidebarLayout.js

@@ -10,10 +10,10 @@ import "../components/SidebarButton.js";
 import { styles as a } from "./SidebarLayout.styles.js";
 import { html as o, nothing as s } from "lit";
 import { customElement as c, property as l, query as u, state as d } from "lit/decorators.js";
+import "@iyulab/components/dist/components/button/UButton.js";
+import "@iyulab/components/dist/components/icon/UIcon.js";
 import { unsafeHTML as f } from "lit/directives/unsafe-html.js";
 import { repeat as p } from "lit/directives/repeat.js";
-import "@iyulab/components/dist/components/icon/UIcon.js";
-import "@iyulab/components/dist/components/button/UButton.js";
 import { UProgressBar as m } from "@iyulab/components/dist/components/progress-bar/UProgressBar.js";
 //#region src/layouts/SidebarLayout.ts
 function h(e) {

package/dist/layouts/SidebarLayout.styles.js

@@ -165,10 +165,19 @@ var t = e`
     display: none;
   }
 
-  /* Main Content */
+  /* Main Content
+   * ★기본 패딩을 준다 — 라우트 콘텐츠가 뷰포트/사이드바 경계에 그대로 맞닿아 모든
+   *   소비자가 같은 배선을 재구현하던 문제였다. 값은 이 라이브러리의 spacing 스케일
+   *   상단 근처(3xl)에서 골랐다 — LOB 화면의 표준 여백으로 쓰기에 과하지 않은 최대값.
+   * ⚠«패딩 박스» 기준 절대배치는 이 padding 의 영향을 받지 않는다 — 바로 아래
+   *   u-progress-bar 가 top/left/right:0 으로 여전히 테두리에 꽉 차게 붙는 이유다
+   *   (CSS 2.1 §10.6.4: 절대배치 자손의 containing block 은 가장 가까운 positioned
+   *   조상의 «패딩 박스»이고, 그 경계는 조상 자신의 padding 값에 밀리지 않는다).
+   *   풀블리드를 원하는 소비자는 layout.styles.main = { padding: '0' } 로 되돌린다. */
   .main {
     position: relative;
     flex: 1;
+    padding: var(--u-space-3xl, 32px);
     background: var(--u-bg-color, #FFFFFF);
     overflow: auto;
     outline: none;

package/package.json

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

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

@@ -36,6 +36,10 @@ and those are different states of the business. So the component owns the rule.
 | `numeric` | `boolean` | `false` | | Right-align with tabular figures so digits line up vertically |
 | `format` | `'number'\|'currency'\|'date'` | — | | Renders `value` through `@iyulab/components`' `formatNumber`/`formatCurrency`/`formatDate`; unset falls back to plain `String(value)` |
 | `currency` | `string` | — | | Currency code for `format="currency"` (e.g. `'KRW'`); omitted degrades to plain number formatting, does not throw |
+| `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 |
+| `tone` | `'positive'\|'negative'\|'neutral'` | — | | Explicit tone override; resolves from `trend` when unset (`up→positive`, `down→negative`, `flat`/unset→`neutral`) but always wins over inference |
 
 ⚠ `numeric` earns its keep in **tables**, where columns of figures are compared by eye. On a
 lone field it just pushes the value away from its label.
@@ -48,4 +52,4 @@ lone field it just pushes the value away from its label.
 
 | Part | Description |
 |------|-------------|
-| `label` · `value` | The two elements |
+| `label` · `value` · `trend` | The label, the value, and the (optional) trend indicator |

package/skills/modern-app/references/components/master-detail-layout.md

@@ -0,0 +1,66 @@
+# u-master-detail-layout
+
+**Tag:** `u-master-detail-layout`
+
+A responsive master›detail split-pane shell. Modeled on Vaadin's `MasterDetailLayout`, with a
+deliberately smaller surface — no draggable splitter (`masterSize` is a fixed prop, not a v1
+feature).
+
+The default slot is the master area. `slot="detail"` is the detail area, and it **appears when
+filled and disappears when emptied** — the same contract as Vaadin's. Selection state (what to
+show in the detail pane) is not this component's job — it's a shell, not a design decision.
+Swap the `detail` slot's content when the selection changes:
+
+```html
+<u-master-detail-layout>
+  <u-rich-table @selection-change=${e => (detail = renderRecord(e.detail.selected))}>
+    …
+  </u-rich-table>
+  <div slot="detail">${detail}</div>
+</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 —
+the component does not own the detail content, so it does not clear it for you.
+
+## Why `ResizeObserver`, not `@container`
+
+Every other primitive in this package (`u-page-header`, `u-group-box`, `u-action-bar`) folds at
+a **fixed** self-width breakpoint via CSS `@container`. This component's breakpoint
+(`overlayBreakpoint`) is a per-instance **prop** instead, because two panels sharing a screen
+need more room than either alone — the right threshold depends on what the consumer puts in
+each pane. CSS container-query conditions cannot read a runtime custom property, so honoring a
+configurable breakpoint means measuring the host's own width in JavaScript and reflecting an
+`overlay` attribute — same self-width philosophy, different mechanism, for a fixed reason.
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| *(default)* | Master area |
+| `detail` | Detail area — present ⇒ shown, empty ⇒ hidden |
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `masterSize` | `string` | `'22rem'` | | Fixed width of the master pane, a CSS length (`master-size`) |
+| `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 |
+
+## Events
+
+| Event | Detail | Cancelable | Description |
+|-------|--------|------------|--------------|
+| `detail-close` | — | No | Overlay-mode close button clicked. Clear the `detail` slot's content in response — the component does not do this for you |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `master` | Master pane |
+| `divider` | Hairline between panes — hidden when there's no detail, or in overlay mode |
+| `detail` | Detail pane |
+| `detail-close` | Overlay-mode close button — hidden outside overlay mode |

package/skills/modern-app/references/components/wizard.md

@@ -0,0 +1,84 @@
+# u-wizard
+
+**Tag:** `u-wizard`
+
+A step indicator + panel + Back/Next actions for multi-step flows.
+
+Validation and save/resume are deliberately outside this component — that's domain state
+management, the consumer's adapter layer owns it. `active` is a controlled prop (same pattern
+as `u-expander`'s `open`): the component advances it itself when a transition isn't blocked,
+but a consumer can also assign it directly to restore a saved step.
+
+```html
+<u-wizard .steps=${[
+  { id: 'info', label: 'Basic info' },
+  { id: 'payment', label: 'Payment' },
+  { id: 'review', label: 'Review' },
+]} active=${1}
+  @step-change=${(e) => { if (!isValid()) e.preventDefault(); }}>
+  <section>…info panel…</section>
+  <section>…payment panel…</section>
+  <section>…review panel…</section>
+</u-wizard>
+```
+
+The default slot holds one child per step, matched to the `steps` array by **document order** —
+only the active one is visible, the rest get the `hidden` attribute. `slot="actions"` fully
+replaces the built-in Back/Next buttons — whether the last step says "Next" or "Submit" is
+consumer wording, not something the library decides.
+
+## `linear` reachability
+
+With `linear` (default `true`), clicking a step in the indicator can't skip ahead past unvisited
+steps — only steps you've already passed, or ones explicitly marked `state: 'done'`, are directly
+reachable that way. `next()` can still always advance exactly one step forward regardless — linear
+mode blocks *skipping*, not progression. Set `linear={false}` to let any non-`disabled'` step be
+clicked directly (a non-linear/"editable" stepper).
+
+## Accessibility
+
+- Keyboard-operable end to end: indicator tabs use roving `tabindex` (arrow keys move focus among
+  reachable steps, `Home`/`End` jump to the first/last reachable one; `Enter`/`Space` activate via
+  native `<button>` semantics).
+- Focus moves to the panel after every step change.
+- An `aria-live="polite"` region announces `"Step N of M: <label>"` on every change.
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| *(default)* | Step panels, one per `steps` entry, matched by document order |
+| `actions` | Replaces the default Back/Next buttons entirely |
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `steps` | `WizardStep[]` | `[]` | | `{ id, label, state? }[]`; `state` is `'done'\|'error'\|'disabled'` |
+| `active` | `number` | `0` | ✓ | Current step index (controlled) |
+| `orientation` | `'horizontal'\|'vertical'` | `'vertical'` | ✓ | Indicator layout |
+| `linear` | `boolean` | `true` | ✓ | See "linear reachability" above |
+| `locale` | `string` | `''` | | Language tag for default Back/Next labels and the live-region announcement |
+
+## Methods
+
+| Method | Description |
+|--------|-------------|
+| `next()` | Advance one step. No-op (returns `false`) on the last step or if `step-change` is canceled |
+| `back()` | Go back one step. No-op on the first step |
+| `goTo(i)` | Jump to step `i` if reachable and `step-change` isn't canceled |
+
+## Events
+
+| Event | Detail | Cancelable | Description |
+|-------|--------|------------|--------------|
+| `step-change` | `{ from: number, to: number }` | Yes | Fires before any transition (Back/Next, indicator click, or `goTo()`). `preventDefault()` blocks it — this is where validation runs |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `indicator` | The step list (`role="tablist"`) |
+| `step` | Each step button (`role="tab"`) |
+| `panel` | Wrapper around the active step's slotted content (`role="tabpanel"`) |
+| `actions` | Back/Next (or overridden) action row |