@iyulab/modern-app 0.26.0 → 0.28.0

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # Changelog
 
+## [0.28.0] - 2026-09-24
+
+### Added
+
+- **`slot="notice"` on `u-sidebar-layout` — a place for app-level notices.** A connection-lost
+  banner or a new-version notice belongs to the shell, not to one screen; a screen that places its
+  own fixed banner collides with the next notice someone adds. Slotted notices stack at the top of
+  the route content, in flow (they scroll away with the content instead of holding a strip of a
+  small screen, and never cover it), each at the full content width. The stack takes no space
+  while empty and goes inert with the route content while the overlay is open. New `notices` part.
+
+### Changed
+
+- **The shell now owns the overlay's keyboard contract.** It already made route content `inert`
+  while the overlay is open — and the control that opened the overlay lives in that content, so
+  its focus fell to `<body>` the moment the panel appeared. Every consumer re-implemented the same
+  three steps; the shell now does them:
+  - **focus moves into the panel** when it opens — an `[autofocus]` element, else the first input
+    control, else the close button. If you already moved focus into the panel, it stays there.
+  - **focus returns to the opening control** when it closes, if focus fell to `<body>`; if you
+    moved it elsewhere on purpose, that stands. With no opening control, it goes to `part="main"`.
+  - **Escape inside the panel fires `overlay-close`**, the same event as the close button — you
+    still empty the slot. An Escape already consumed inside the panel (an open list or popover)
+    closes only that layer.
+  Existing consumer code that does any of this itself keeps working: the shell steps aside when
+  focus is already where it would put it, and emptying the slot twice is harmless.
+- Requires `@iyulab/components` 1.45.2 or later (`u-button.focus()`).
+
+### Fixed
+
+- A route transition that completes while the overlay is open no longer pulls focus out of the
+  panel onto the (inert) route's scroll container.
+
+## [0.27.0] - 2026-09-24
+
+### Added
+
+- **`u-group-box[meta]` — secondary text beside the title.** List-like sections of a detail screen
+  almost always carry a count (`3 items`, `2/5 done`), and with `title` being a plain string the
+  count was drawn at the title's size, weight and color, so the section name and its current
+  state read as one heading. `meta` draws that text one step below the title — body size and
+  weight, weak color, tabular figures — on the same baseline. It sits inside the heading, so the
+  heading's accessible name includes it. It is not drawn without a `title`. New `meta` part.
+- **Korean built-in strings.** 0.26.0 moved the language choice to `Locale.set()`, but the namespace
+  held only an English table, so an app that already called `Locale.set('ko')` still got the
+  sidebar toggle's and overlay close button's accessible names, the back link, empty-state copy and
+  wizard labels in English. A Korean table now ships alongside English — the same scope as
+  `@iyulab/flex-table`. English stays the default; a Korean registration of your own overrides only
+  the keys it gives.
+
 ## [0.26.0] - 2026-09-23
 
 ### Changed

package/README.md

@@ -121,23 +121,26 @@ html`<p>${translate('common::greeting')}</p>`;
 ### Built-in strings
 
 The package's own strings — the page header's back link, empty-state copy, the shell's toggle and
-close labels, the wizard's buttons and step announcement — are English by default and live in the
-`modern-app` namespace of `@iyulab/components`' `Locale`. Register translations there and pick the
-language once, with `Locale.set()`; the primitives and `@iyulab/flex-table` follow the same call:
+close labels, the wizard's buttons and step announcement — live in the `modern-app` namespace of
+`@iyulab/components`' `Locale`. English and Korean are built in, English being the default; pick the
+language once, with `Locale.set()` — the primitives and `@iyulab/flex-table` follow the same call.
+Register other languages, or your own wording, in the same namespace:
 
 ```typescript
 import { Locale } from '@iyulab/components';
 import { modernAppLocale } from '@iyulab/modern-app';
 
-modernAppLocale.register('ko', {
-  back: '뒤로',
-  toggleSidebar: '사이드바 접기/펼치기',
-  wizardStepAnnouncement: '{total}단계 중 {index}단계: {label}',
+Locale.set('ko');                       // built-in Korean — nothing to register
+
+modernAppLocale.register('ja', {
+  back: '戻る',
+  toggleSidebar: 'サイドバーの切り替え',
+  wizardStepAnnouncement: 'ステップ {index}/{total}: {label}',
 });
-Locale.set('ko');
 ```
 
-A partial table is enough — untranslated keys fall back to English. An element's own `locale`
+A partial table is enough — untranslated keys fall back to English, and a registration for a
+built-in language overrides only the keys it gives. An element's own `locale`
 attribute overrides the active language for that element. `registerLocale`/`setDefaultLocale` still
 work but are deprecated: a `setDefaultLocale()` call takes precedence over `Locale` until it is
 called with `undefined`.

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

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.150.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.151.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.150.0 → _@oxc-project_runtime@0.151.0}/helpers/esm/decorateMetadata.js

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

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

package/dist/components/EmptyState.d.ts

@@ -19,7 +19,7 @@ type ElementParts = 'host' | 'icon' | 'title' | 'description' | 'actions';
  * ```
  *
  * ⚠**기본 문구는 영어다** — 이 패키지는 범용 층이라 특정 언어를 기본값으로 가질 수 없다.
- * 한국어는 `modernAppLocale.register('ko', …)` 로 소비자가 등록하고(언어는 `Locale.set()`), 화면별로 덮으려면
+ * 한국어 표는 내장돼 있고(언어는 `Locale.set()`), 다른 언어는 `modernAppLocale.register(lang, …)` 로 소비자가 등록한다. 화면별로 덮으려면
  * `title`·`description` 을 준다.
  *
  * ★이 줄은 «한국어다»라고 적혀 있었고 **같은 파일의 `locale` 프로퍼티 주석이 «영어다»라고
@@ -37,7 +37,7 @@ export declare class EmptyState extends StyledElement<ElementParts> {
     /**
      * 언어 태그 — 이 요소만 문서와 다른 언어로 쓸 때. 비우면 `Locale` 의 활성 로케일.
      * ⚠기본 문구는 영어다 — 이 패키지는 범용 층이라 특정 언어를 기본값으로 가질 수 없다.
-     * 한국어는 `modernAppLocale.register('ko', …)` 로 소비자가 등록한다.
+     * 한국어 표는 내장돼 있다 — 다른 언어는 `modernAppLocale.register(lang, …)` 로 소비자가 등록한다.
      */
     locale: string;
     /** 액션 슬롯 배정 상태 — CSS `:has()` 로는 알 수 없다(`internals/slotted.ts` 참조). */

package/dist/components/EmptyState.js

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

package/dist/components/GroupBox.d.ts

@@ -1,6 +1,6 @@
 import { StyledElement } from '../internals/StyledElement.js';
 import { default as React } from 'react';
-type ElementParts = 'host' | 'header' | 'title' | 'actions' | 'body';
+type ElementParts = 'host' | 'header' | 'title' | 'meta' | 'actions' | 'body';
 /** 제목 단계 — 페이지 제목(h1)은 `u-page-header` 몫이라 2 부터다. */
 export type GroupBoxLevel = 2 | 3 | 4 | 5 | 6;
 /**
@@ -18,13 +18,21 @@ export type GroupBoxLevel = 2 | 3 | 4 | 5 | 6;
  * </u-group-box>
  * ```
  *
- * 오버라이드: `part`(host·header·title·actions·body) + slot 치환.
+ * 오버라이드: `part`(host·header·title·meta·actions·body) + slot 치환.
  * `divider` 속성으로 제목과 본문 사이 구분선을 켠다(기본 꺼짐 — 선이 많으면 화면이 시끄럽다).
  */
 export declare class GroupBox extends StyledElement<ElementParts> {
     static styles: import('lit').CSSResultGroup[];
     /** 카드 제목. 비우면 헤더 자체를 렌더하지 않는다. */
     title: string;
+    /**
+     * Secondary text shown after the title — a count, progress or short status
+     * (`3 items`, `2/5 done`), drawn one step below the title: body size and weight, weak color.
+     *
+     * It sits inside the title's heading, so the heading's accessible name reads it too. Not drawn
+     * without a `title`: it describes the title.
+     */
+    meta?: string;
     /** 제목과 본문 사이에 구분선을 넣는다. */
     divider: boolean;
     /** 본문 여백을 없앤다 — 표를 카드 가장자리까지 붙일 때. */
@@ -60,6 +68,7 @@ declare module 'react' {
                 divider?: boolean;
                 flush?: boolean;
                 level?: GroupBoxLevel;
+                meta?: string;
             };
         }
     }

package/dist/components/GroupBox.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.151.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";
@@ -24,7 +24,7 @@ var d = {
 		let e = !!this.title || this.hasActions;
 		return a`
       <div class="header ${this.divider ? "divider" : ""} ${e ? "" : "empty"}" part="header">
-        ${l`<${d[this.level] ?? d[3]} class="title" part="title">${this.title}</${d[this.level] ?? d[3]}>`}
+        ${l`<${d[this.level] ?? d[3]} class="title" part="title">${this.title}${this.title && this.meta ? a` <span class="meta" part="meta">${this.meta}</span>` : ""}</${d[this.level] ?? d[3]}>`}
         <div class="actions ${this.hasActions ? "" : "empty"}" part="actions">
           <slot name="actions"
             @slotchange=${(e) => this.hasActions = r(e.target)}
@@ -35,7 +35,7 @@ var d = {
     `;
 	}
 };
-t([s({ type: String }), e("design:type", Object)], f.prototype, "title", void 0), t([s({ type: Boolean }), e("design:type", Object)], f.prototype, "divider", void 0), t([s({ type: Boolean }), e("design:type", Object)], f.prototype, "flush", void 0), t([s({
+t([s({ type: String }), e("design:type", Object)], f.prototype, "title", void 0), t([s({ type: String }), e("design:type", String)], f.prototype, "meta", void 0), t([s({ type: Boolean }), e("design:type", Object)], f.prototype, "divider", void 0), t([s({ type: Boolean }), e("design:type", Object)], f.prototype, "flush", void 0), t([s({
 	type: Number,
 	reflect: !0
 }), e("design:type", Object)], f.prototype, "level", void 0), t([c(), e("design:type", Object)], f.prototype, "hasActions", void 0), f = t([o("u-group-box")], f);

package/dist/components/GroupBox.styles.js

@@ -42,6 +42,14 @@ var t = e`
     letter-spacing: var(--u-text-subtitle-tracking, 0);
     color: var(--u-txt-color, #212121);
   }
+  /* 제목 옆 보조 메타(건수·진척) — 제목보다 한 단 아래. 헤딩 안의 인라인이라 기준선을 공유하고,
+     접근성 이름에도 함께 읽힌다. 숫자가 바뀌어도 폭이 흔들리지 않게 고정폭 숫자. */
+  .meta {
+    font-size: var(--u-text-body-size, 14px);
+    font-weight: var(--u-text-body-weight, 400);
+    color: var(--u-txt-color-weak, #616161);
+    font-variant-numeric: tabular-nums;
+  }
 
   .actions {
     flex: 0 0 auto;

package/dist/components/InfoField.js

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

package/dist/components/InfoSection.js

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

package/dist/components/MasterDetailLayout.js

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

package/dist/components/PageHeader.d.ts

@@ -33,7 +33,7 @@ export declare class PageHeader extends StyledElement<ElementParts> {
     /**
      * 뒤로가기 링크 문구. 비우면 locale 레지스트리 값, 그것도 없으면 **영어**(`Back`).
      * ⚠이 패키지는 범용 층이라 특정 언어를 기본값으로 가질 수 없다 —
-     * 한국어는 `modernAppLocale.register('ko', { back: '뒤로' })` 로 소비자가 등록한다.
+     * 한국어 표는 내장돼 있다 — 다른 언어는 `modernAppLocale.register(lang, { back: … })` 로 소비자가 등록한다.
      */
     backLabel: string;
     /** 언어 태그 — 이 요소만 문서와 다른 언어로 쓸 때. 비우면 `Locale` 의 활성 로케일. */

package/dist/components/PageHeader.js

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

package/dist/components/SidebarButton.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.151.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.150.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.151.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/SidebarLink.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.151.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 "./SidebarLink.styles.js";

package/dist/components/SidebarSection.js

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

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.151.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.150.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.151.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/internals/locale.js

@@ -13,7 +13,19 @@ var t = {
 	wizardNext: "Next",
 	wizardStepAnnouncement: "Step {index} of {total}: {label}"
 }, n = e.namespace("modern-app");
-n.register("en", t);
+n.register("en", t), n.register("ko", {
+	back: "뒤로",
+	noDataTitle: "아직 항목이 없습니다",
+	noDataDescription: "",
+	noResultsTitle: "일치하는 결과가 없습니다",
+	noResultsDescription: "검색어나 필터를 바꿔 보세요.",
+	detailClose: "닫기",
+	toggleMobileMenu: "메뉴 열고 닫기",
+	toggleSidebar: "사이드바 열고 닫기",
+	wizardBack: "이전",
+	wizardNext: "다음",
+	wizardStepAnnouncement: "{total}단계 중 {index}단계: {label}"
+});
 var r, i = /* @__PURE__ */ new Map(), a = "\0modern-app:announcer:";
 function o(e, t) {
 	let { wizardStepAnnouncement: r, ...o } = t, s = { ...o };

package/dist/layouts/SidebarLayout.d.ts

@@ -14,6 +14,14 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
     progressBarEl: UProgressBar;
     /** overlay 슬롯 배정 상태 — CSS `:has()`로는 알 수 없다(`internals/slotted.ts` 참조). */
     private hasOverlay;
+    /** notice 슬롯 배정 상태 — 비었으면 스택 자체가 자리를 차지하지 않는다. */
+    private hasNotice;
+    /**
+     * 오버레이를 연 컨트롤 — 닫힐 때 포커스를 되돌릴 곳.
+     * ★슬롯 배정 «시점» 에 잡는다. 렌더가 본문에 `inert` 를 걸면 그 컨트롤이 쥐던 포커스는
+     *   `<body>` 로 떨어지므로, `updated()` 에서 읽으면 이미 늦다.
+     */
+    private overlayTrigger;
     /**
      * `:state(overlay)`를 싣는 자리. `MasterDetailLayout`과 동일 패턴.
      * ⚠생성자에서 한 번만 붙인다 — `attachInternals()`는 같은 인스턴스에 두 번 부르면
@@ -93,6 +101,29 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
     /** 라우트 에러 핸들러 */
     private handleRouteError;
     private handleOverlaySlotChange;
+    private handleNoticeSlotChange;
+    /** 오버레이 패널에 배정된 요소들 */
+    private overlayPanels;
+    /**
+     * 열린 패널로 포커스를 옮긴다 — 순서는 `UOverlayElement` 와 같다:
+     * `[autofocus]` → 첫 입력 컨트롤 → (없으면) 셸의 닫기 버튼.
+     * 닫기 버튼으로 떨어지는 것은 의도다 — 포커스가 `<body>` 에 남는 것보다 항상 낫고,
+     * 셸이 늘 가진 유일한 컨트롤이다. 소비자가 이미 패널 안으로 옮겨 두었으면 건드리지 않는다.
+     */
+    private focusOverlay;
+    /**
+     * 닫힌 뒤 포커스를 연 컨트롤로 되돌린다. 포커스가 `<body>` 로 떨어졌을 때만 —
+     * 소비자가 닫으며 다른 곳으로 옮겼다면 그것을 존중한다.
+     * 연 컨트롤이 없으면(프로그램이 연 경우) 메인 스크롤러로 — 라우트 완료 때와 같은 자리다.
+     */
+    private restoreOverlayFocus;
+    /**
+     * 패널 안의 Escape 는 닫기 버튼과 같은 `overlay-close` 를 낸다.
+     * window 버블 단계에서 받는다 — 패널 안의 목록·팝오버가 자기 층을 닫으며 먹은 키
+     * (`defaultPrevented`)는 그 층의 몫이다. 한 번의 Escape 는 한 층만 닫는다.
+     * 경로에 패널이 없으면(사이드바, 패널 위에 띄운 대화상자) 받지 않는다.
+     */
+    private handleOverlayEscape;
     private handleOverlayClose;
     /** .main 키보드 스크롤 핸들러 (WCAG 2.1 SC 2.1.1) */
     private _handleMainKeydown;

package/dist/layouts/SidebarLayout.js

@@ -1,7 +1,7 @@
 import { app as e } from "../App.js";
 import { filterSidebarItems as t } from "./filterSidebarItems.js";
-import n from "../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorateMetadata.js";
-import r from "../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
+import r from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
 import { StyledElement as i } from "../internals/StyledElement.js";
 import { getLocaleStrings as a } from "../internals/locale.js";
 import { slotHasContent as o } from "../internals/slotted.js";
@@ -39,12 +39,25 @@ function T(e, t) {
 	}
 	return !0;
 }
-var E = class extends i {
+function E() {
+	let e = document.activeElement;
+	for (; e?.shadowRoot?.activeElement;) e = e.shadowRoot.activeElement;
+	return e;
+}
+function D(e, t) {
+	let n = t;
+	for (; n;) {
+		if (n === e) return !0;
+		n = n.parentNode ?? n.host ?? null;
+	}
+	return !1;
+}
+var O = class extends i {
 	static {
 		b = this;
 	}
 	constructor(...t) {
-		super(...t), this.state = "default", this.locale = "", this.hasOverlay = !1, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : void 0, this.context = null, this.unsizedWarnKey = `unsized:${++S}`, this.isMatchedLink = (e) => !this.context || !e ? !1 : (e = typeof e == "string" ? new URLPattern(e, window.location.origin) : e, e.test(this.context.path, window.location.origin)), this.handleToggleButtonClick = () => {
+		super(...t), this.state = "default", this.locale = "", this.hasOverlay = !1, this.hasNotice = !1, this.overlayTrigger = null, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : void 0, this.context = null, this.unsizedWarnKey = `unsized:${++S}`, this.isMatchedLink = (e) => !this.context || !e ? !1 : (e = typeof e == "string" ? new URLPattern(e, window.location.origin) : e, e.test(this.context.path, window.location.origin)), this.handleToggleButtonClick = () => {
 			let t = this.screenSize ?? e.screen ?? "large";
 			t === "large" ? this.state = this.state === "default" ? "slim" : "default" : t === "medium" ? this.state = this.state === "slim" ? "modal" : "slim" : t === "small" ? this.state = this.state === "mobile" ? "mobile-open" : "mobile" : console.warn("Unknown screen size:", t);
 		}, this.handleBackdropClick = () => {
@@ -58,13 +71,24 @@ var E = class extends i {
 				this.progressBarEl.removeAttribute("visible");
 			}, 300);
 			let t = this.shadowRoot?.querySelector(".main");
-			t && (this.config?.scrollBehavior?.(e.context, t), t.focus({ preventScroll: !0 }));
+			t && (this.config?.scrollBehavior?.(e.context, t), this.hasOverlay || t.focus({ preventScroll: !0 }));
 		}, this.handleRouteError = (e) => {
 			this.progressBarEl.status = "error", this.progressBarEl.value = 100, setTimeout(() => {
 				this.progressBarEl.removeAttribute("visible"), this.progressBarEl.status = "default";
 			}, 300);
 		}, this.handleOverlaySlotChange = (e) => {
-			this.hasOverlay = o(e.target);
+			let t = o(e.target);
+			if (t && !this.hasOverlay) {
+				let e = E();
+				this.overlayTrigger = e && e !== document.body ? e : null;
+			}
+			this.hasOverlay = t;
+		}, this.handleNoticeSlotChange = (e) => {
+			this.hasNotice = o(e.target);
+		}, this.handleOverlayEscape = (e) => {
+			if (e.key !== "Escape" || e.defaultPrevented || e.isComposing || !this.hasOverlay) return;
+			let t = this.shadowRoot?.querySelector(".overlay");
+			t && e.composedPath().includes(t) && (e.preventDefault(), this.handleOverlayClose());
 		}, this.handleOverlayClose = () => {
 			this.fire("overlay-close", { cancelable: !1 });
 		}, this._handleMainKeydown = (e) => {
@@ -111,13 +135,13 @@ var E = class extends i {
 		super.connectedCallback(), 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), super.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), window.removeEventListener("keydown", this.handleOverlayEscape), super.disconnectedCallback();
 	}
 	willUpdate(e) {
 		super.willUpdate(e), e.has("config") && (this.styles = this.config?.styles);
 	}
 	updated(e) {
-		super.updated(e), e.has("hasOverlay") && this.internals?.states?.[this.hasOverlay ? "add" : "delete"]("overlay");
+		super.updated(e), e.has("hasOverlay") && (this.internals?.states?.[this.hasOverlay ? "add" : "delete"]("overlay"), this.hasOverlay ? (window.addEventListener("keydown", this.handleOverlayEscape), this.focusOverlay()) : e.get("hasOverlay") === !0 && (window.removeEventListener("keydown", this.handleOverlayEscape), this.restoreOverlayFocus()));
 	}
 	firstUpdated(e) {
 		super.firstUpdated(e), this.warnIfUnsized();
@@ -183,6 +207,9 @@ var E = class extends i {
           <u-progress-bar part="progress"></u-progress-bar>
 
           <div class="main-content" part="main-content" ?inert=${this.hasOverlay}>
+            <div class="notices ${this.hasNotice ? "" : "empty"}" part="notices">
+              <slot name="notice" @slotchange=${this.handleNoticeSlotChange}></slot>
+            </div>
             <slot></slot>
           </div>
         </div>
@@ -304,10 +331,32 @@ var E = class extends i {
       </u-link>
     `;
 	}
+	overlayPanels() {
+		return (this.shadowRoot?.querySelector("slot[name=\"overlay\"]"))?.assignedElements({ flatten: !0 }) ?? [];
+	}
+	focusOverlay() {
+		let e = this.overlayPanels(), t = E();
+		if (t && e.some((e) => D(e, t))) return;
+		let n = (t) => {
+			for (let n of e) {
+				if (n.matches(t)) return n;
+				let e = n.querySelector(t);
+				if (e) return e;
+			}
+			return null;
+		};
+		(n("[autofocus]") ?? n("input, select, textarea, u-input, u-textarea, u-select, u-checkbox, u-radio, u-switch, u-slider") ?? this.shadowRoot?.querySelector(".overlay-close"))?.focus();
+	}
+	restoreOverlayFocus() {
+		let e = this.overlayTrigger;
+		this.overlayTrigger = null;
+		let t = E();
+		t && t !== document.body || (e?.isConnected ? e.focus() : this.mainElement?.focus({ preventScroll: !0 }));
+	}
 };
 r([f({
 	type: String,
 	reflect: !0
-}), n("design:type", Object)], E.prototype, "state", void 0), r([f({ type: Object }), n("design:type", Object)], E.prototype, "config", void 0), r([f({ type: String }), n("design:type", Object)], E.prototype, "locale", void 0), r([p("u-progress-bar"), n("design:type", y === void 0 ? Object : y)], E.prototype, "progressBarEl", void 0), r([m(), n("design:type", Object)], E.prototype, "hasOverlay", void 0), r([m(), n("design:type", Object)], E.prototype, "context", void 0), E = b = r([d("u-sidebar-layout")], E);
+}), n("design:type", Object)], O.prototype, "state", void 0), r([f({ type: Object }), n("design:type", Object)], O.prototype, "config", void 0), r([f({ type: String }), n("design:type", Object)], O.prototype, "locale", void 0), r([p("u-progress-bar"), n("design:type", y === void 0 ? Object : y)], O.prototype, "progressBarEl", void 0), r([m(), n("design:type", Object)], O.prototype, "hasOverlay", void 0), r([m(), n("design:type", Object)], O.prototype, "hasNotice", void 0), r([m(), n("design:type", Object)], O.prototype, "context", void 0), O = b = r([d("u-sidebar-layout")], O);
 //#endregion
-export { E as SidebarLayout };
+export { O as SidebarLayout };

package/dist/layouts/SidebarLayout.styles.js

@@ -211,6 +211,31 @@ var t = e`
     height: 100%;
   }
 
+  /*
+   * 앱 수준 공지 스택 — 한 화면이 아니라 셸에 속한다.
+   * 본문 맨 위 «흐름 안»에 둔다. 세 대안을 소비자가 먼저 실측해 기각했다:
+   *   · fixed → 본문을 덮는다.
+   *   · 셸 바깥 흐름 → 셸 높이에 더해져 이중 스크롤.
+   *   · .main 안 sticky → 좁은 화면에서 공지 둘이 상시 3할을 점유한다. 배너는
+   *     «막지 않는 것»이 값이라 상시 점유가 그 값을 깎는다.
+   * .main-content 안에 있으므로 오버레이가 열리면 본문과 함께 inert 가 된다.
+   * 폭은 스택이 정한다 — 공지(u-alert)는 자기 폭이 fit-content 라 문구 길이대로
+   * 들쭉날쭉해진다. 배치 컨테이너의 결정이다.
+   */
+  .notices {
+    display: flex;
+    flex-direction: column;
+    gap: var(--u-space-sm, 8px);
+    margin-bottom: var(--u-space-lg, 16px);
+  }
+  .notices.empty {
+    display: none;
+  }
+  slot[name="notice"]::slotted(*) {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
   /*
    * 오버레이가 열린 동안 «본문 영역»을 스태킹 컨텍스트로 만든다.
    *

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.26.0",
+  "version": "0.28.0",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -64,7 +64,7 @@
     "lit": "^3.3.3"
   },
   "peerDependencies": {
-    "@iyulab/components": ">=1.45.0",
+    "@iyulab/components": ">=1.45.2",
     "@lit/react": ">=1.0.8",
     "react": ">=18.0.0"
   },
@@ -89,6 +89,6 @@
     "vite": "^8.1.4",
     "vite-plugin-dts": "^5.0.3",
     "vitest": "^5.0.0",
-    "@iyulab/components": ">=1.42.0"
+    "@iyulab/components": ">=1.45.2"
   }
 }

package/skills/modern-app/SKILL.md

@@ -144,23 +144,26 @@ html`<p>${translate('namespace::greeting')}</p>`;
 ### Built-in strings (`modernAppLocale`)
 
 The package's own strings — the page header's back link, empty-state copy, the shell's toggle and
-close labels, the wizard's buttons and step announcement — are English by default and live in the
-`modern-app` namespace of `@iyulab/components`' `Locale`. Register translations there and pick the
-language once, with `Locale.set()`; the primitives and `@iyulab/flex-table` follow the same call:
+close labels, the wizard's buttons and step announcement — live in the `modern-app` namespace of
+`@iyulab/components`' `Locale`. English and Korean are built in, English being the default; pick the
+language once, with `Locale.set()` — the primitives and `@iyulab/flex-table` follow the same call.
+Register other languages, or your own wording, in the same namespace:
 
 ```typescript
 import { Locale } from '@iyulab/components';
 import { modernAppLocale } from '@iyulab/modern-app';
 
-modernAppLocale.register('ko', {
-  back: '뒤로',
-  toggleSidebar: '사이드바 접기/펼치기',
-  wizardStepAnnouncement: '{total}단계 중 {index}단계: {label}',
+Locale.set('ko');                       // built-in Korean — nothing to register
+
+modernAppLocale.register('ja', {
+  back: '戻る',
+  toggleSidebar: 'サイドバーの切り替え',
+  wizardStepAnnouncement: 'ステップ {index}/{total}: {label}',
 });
-Locale.set('ko');
 ```
 
-A partial table is enough — untranslated keys fall back to English. An element's own `locale`
+A partial table is enough — untranslated keys fall back to English, and a registration for a
+built-in language overrides only the keys it gives. An element's own `locale`
 attribute overrides the active language for that element. `registerLocale`/`setDefaultLocale` still
 work but are deprecated: a `setDefaultLocale()` call takes precedence over `Locale` until it is
 called with `undefined`.

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

@@ -54,6 +54,6 @@ for both and a user with a filter still applied reads it as *"my data disappeare
 | `--u-space-lg` | Actions row top spacing |
 | `--u-space-sm` | Gap between actions |
 
-⚠ Default wording is **English** — register others with `modernAppLocale.register('ko', …)` and
-choose the language with `Locale.set()` of `@iyulab/components`, or pass `title`/`description` per
-screen.
+⚠ Default wording is **English**, with Korean built in — choose the language with `Locale.set()` of
+`@iyulab/components`, register others with `modernAppLocale.register(lang, …)`, or pass
+`title`/`description` per screen.

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

@@ -9,7 +9,7 @@ trailing actions*, and assembling that by hand is how title sizes, padding, and
 up different on every screen.
 
 ```html
-<u-group-box title="Receivables">
+<u-group-box title="Receivables" meta="3 items">
   <a slot="actions" href="/receivables">Payments</a>
   …body…
 </u-group-box>
@@ -30,6 +30,7 @@ a left edge without any consumer CSS.
 | Property | Type | Default | Reflect | Description |
 |----------|------|---------|---------|-------------|
 | `title` | `string` | `''` | | Header title |
+| `meta` | `string` | — | | Secondary text after the title — a count, progress or short status (`3 items`, `2/5 done`), one step below the title: body size and weight, weak color, tabular figures. It sits inside the heading, so the heading's accessible name includes it. Not drawn without `title` |
 | `divider` | `boolean` | `false` | | Rule between header and body. Off by default — many rules make a screen noisy |
 | `flush` | `boolean` | `false` | | Remove body padding, for tables and lists that draw their own edges |
 | `level` | `2|3|4|5|6` | `3` | ✓ | Heading level of the title in the document outline. Set `2` for a box directly under `u-page-header` (the page's `h1`), so the outline does not skip a level. Semantics only — the title looks the same at every level |
@@ -39,6 +40,7 @@ a left edge without any consumer CSS.
 | Part | Description |
 |------|-------------|
 | `header` · `title` · `actions` | Header row |
+| `meta` | Secondary text inside the title |
 | `body` | Body wrapper |
 
 ## CSS Custom Properties
@@ -49,6 +51,7 @@ a left edge without any consumer CSS.
 | `--u-text-subtitle-weight` | Title font weight |
 | `--u-text-subtitle-leading` | Title line height |
 | `--u-text-subtitle-tracking` | Title letter spacing |
+| `--u-text-body-size` / `--u-text-body-weight` / `--u-txt-color-weak` | `meta` size, weight and color |
 | `--u-bg-color-raised` | Surface background |
 | `--u-border-color-weak` | Border and header divider color |
 | `--u-radius-2xl` | Corner radius |

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

@@ -58,6 +58,5 @@ screens nobody opens.
 | `--u-space-2xs` | Title-to-subtitle spacing |
 | `--u-space-3xs` | Back-arrow-to-label spacing |
 
-⚠ Built-in strings default to **English** — this package is a generic layer and cannot pick a
-language. Register others with `modernAppLocale.register('ko', { back: '뒤로' })` and choose the
-language with `Locale.set()` of `@iyulab/components`.
+⚠ Built-in strings default to **English**, with Korean built in — choose the language with
+`Locale.set()` of `@iyulab/components`. Register others with `modernAppLocale.register(lang, { back: … })`.

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

@@ -264,6 +264,7 @@ Parts available for `styles` overrides on the root layout:
 | `progress` | Top progress bar |
 | `overlay` | Route-independent overlay panel above `main` |
 | `overlay-close` | Overlay's close button |
+| `notices` | Stack of app-level notices at the top of the route content (`slot="notice"`) |
 
 ---
 
@@ -350,9 +351,9 @@ from either re-implementing what the shell already does, or dropping what it doe
 | Making route content non-interactive | shell | `inert` on `part="main-content"`, which propagates through the slot into your route content |
 | A close affordance | shell | `part="overlay-close"`, firing the non-cancelable `overlay-close` event |
 | Keeping the route mounted underneath | shell | the overlay is independent of routing |
-| **Moving focus into the panel when it opens** | **consumer** | focus the panel or its first control yourself |
-| **Restoring focus when it closes** | **consumer** | remember the trigger and re-focus it |
-| **Escape to close** | **consumer** | the shell binds no key; listen for it and empty the slot |
+| Moving focus into the panel when it opens | shell | an `[autofocus]` element in your panel, else its first input control, else `part="overlay-close"`. If you already moved focus into the panel, the shell leaves it there |
+| Restoring focus when it closes | shell | back to the control that held focus when the panel opened — only if focus fell to `<body>`; if you moved it somewhere on purpose, that stands. With no such control (opened from code), focus goes to `part="main"` |
+| Escape to close | shell | Escape inside the panel fires the same `overlay-close` as the button — you still empty the slot. An Escape already consumed inside the panel (an open list or popover calling `preventDefault()`) closes only that layer |
 | **A backdrop / dimmed scrim** | **consumer** | the panel is opaque and full-bleed by design; add a scrim inside your panel if you want one |
 | **Announcing the panel to assistive tech** | **consumer** | put `role`/`aria-label` (or `aria-modal`, if you have made it modal) on *your* panel — the shell does not know what it holds |
 
@@ -371,6 +372,29 @@ No `overlayBreakpoint`/responsive toggle exists here — unlike `u-master-detail
 overlay is always an overlay, never a side-by-side pane. Use `u-master-detail-layout` instead
 when you want the panel to sit *beside* content on wide screens.
 
+
+## App-level notices
+
+App-level notices — the server is unreachable, a new version is ready — belong to the shell, not to
+one screen: a screen that places its own fixed banner collides with the next notice someone adds.
+Put them in `slot="notice"`; the shell stacks them at the top of the route content.
+
+```html
+<u-sidebar-layout>
+  <u-alert slot="notice" status="warning" open>Server unreachable — retrying.</u-alert>
+  <u-alert slot="notice" status="info" open closable>A new version is ready.</u-alert>
+</u-sidebar-layout>
+```
+
+- **In flow, above the route content.** Notices scroll away with the content rather than holding a
+  strip of a small screen, and they never cover it. A banner's value is that it does not block;
+  a permanently pinned stack would eat into that on a phone.
+- **Full width.** Each notice takes the width of the content box, whatever its text length.
+- **Empty takes no space** — the stack has no margin while nothing is slotted.
+- **Inert with the route content** while the overlay is open.
+- Which surface a notice is (toast, banner or modal) is decided by *who ends it* — a notice the time
+  ends is a toast (`app.success`), not a slotted banner.
+
 ## Responsive behaviour
 
 | Screen width | Sidebar state |