@iyulab/modern-app 0.25.0 → 0.27.0

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # Changelog
 
+## [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
+
+- 🔴 **Built-in strings follow `Locale` of `@iyulab/components` — the language is chosen once, with
+  `Locale.set()`.** This package kept a registry of its own (`registerLocale`/`setDefaultLocale`)
+  while the primitives and `@iyulab/flex-table` follow `Locale`, so an app that set the language
+  once got the shell's `Toggle sidebar`/`Toggle menu`/`Close` labels, the back link and empty-state
+  copy in English in the middle of a translated screen — silently. The strings now live in a
+  `Locale.namespace('modern-app')`, and resolve through the same chain as the primitives (so
+  `lang="zh"` reaches a `zh-CN` table). An element's own `locale` attribute still overrides the
+  active language for that element.
+
+### Added
+
+- **`modernAppLocale`** — the namespace handle, for translations:
+  `modernAppLocale.register('ko', { back: '뒤로' })`, the same shape as `flexTableLocale.register`.
+  `wizardStepAnnouncement` is a template there (`'{total}단계 중 {index}단계: {label}'`).
+  **`ModernAppMessageKey`** is its key type.
+
+### Deprecated
+
+- **`registerLocale` and `setDefaultLocale`.** Both keep working: `registerLocale` forwards to
+  the namespace (a function-valued `wizardStepAnnouncement` still works), and a `setDefaultLocale()`
+  call still takes precedence over `Locale` until it is called with `undefined` — an app that
+  calls both with the same language sees no change and can drop `setDefaultLocale` at its leisure.
+
+⚠ **Requires `@iyulab/components` 1.45.0** (for `LocaleNamespace.textIn`, which resolves an
+element's own `locale`).
+
 ## [0.25.0] - 2026-09-23
 
 ### Added

package/README.md

@@ -118,6 +118,33 @@ import { translate } from '@iyulab/modern-app';
 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 — 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';
+
+Locale.set('ko');                       // built-in Korean — nothing to register
+
+modernAppLocale.register('ja', {
+  back: '戻る',
+  toggleSidebar: 'サイドバーの切り替え',
+  wizardStepAnnouncement: 'ステップ {index}/{total}: {label}',
+});
+```
+
+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`.
+
 ### 부팅 인증 게이트 (`auth`)
 
 셸을 만들기 전에 세션을 판정한다. 소비앱이 `app.load()` 앞단에 손으로 짜던 "me 조회 → 미인증이면 로그인, 인증이면 앱 로드" 게이트를 표준화한다. 세션 조회/로그인 HTTP 는 `@iyulab/enterprise` 의 `createAuthClient` 가, 세션-중 401 은 `createODataService` 의 `onUnauthorized` 가 담당한다(프레임워크는 오케스트레이션만 소유).

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';
  * ```
  *
  * ⚠**기본 문구는 영어다** — 이 패키지는 범용 층이라 특정 언어를 기본값으로 가질 수 없다.
- * 한국어는 `registerLocale('ko', …)` 로 소비자가 등록하고, 화면별로 덮으려면
+ * 한국어 표는 내장돼 있고(언어는 `Locale.set()`), 다른 언어는 `modernAppLocale.register(lang, …)` 로 소비자가 등록한다. 화면별로 덮으려면
  * `title`·`description` 을 준다.
  *
  * ★이 줄은 «한국어다»라고 적혀 있었고 **같은 파일의 `locale` 프로퍼티 주석이 «영어다»라고
@@ -35,9 +35,9 @@ export declare class EmptyState extends StyledElement<ElementParts> {
     /** 보조 설명. 비우면 variant 기본 문구. */
     description: string;
     /**
-     * 언어 태그. 비우면 `setDefaultLocale()` 값, 그것도 없으면 **영어**.
+     * 언어 태그 — 이 요소만 문서와 다른 언어로 쓸 때. 비우면 `Locale` 의 활성 로케일.
      * ⚠기본 문구는 영어다 — 이 패키지는 범용 층이라 특정 언어를 기본값으로 가질 수 없다.
-     * 한국어는 `registerLocale('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.d.ts

@@ -47,7 +47,7 @@ export declare class MasterDetailLayout extends StyledElement<ElementParts> {
      */
     overlayBreakpoint: number;
     /**
-     * 언어 태그. 비우면 `setDefaultLocale()` 값, 그것도 없으면 영어.
+     * 언어 태그 — 이 요소만 문서와 다른 언어로 쓸 때. 비우면 `Locale` 의 활성 로케일.
      * 닫기 버튼의 접근성 라벨에만 쓰인다.
      */
     locale: string;

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

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/index.d.ts

@@ -15,8 +15,8 @@ export { MasterDetailLayout } from './components/MasterDetailLayout.js';
 export { Wizard } from './components/Wizard.js';
 export type { WizardStep, WizardStepState, WizardStepChangeDetail } from './components/Wizard.js';
 export { translate } from './translate.js';
-export { registerLocale, setDefaultLocale, getLocaleStrings, getDefaultLocale, } from './internals/locale.js';
-export type { ModernAppLocaleStrings } from './internals/locale.js';
+export { modernAppLocale, registerLocale, setDefaultLocale, getLocaleStrings, getDefaultLocale, } from './internals/locale.js';
+export type { ModernAppLocaleStrings, ModernAppMessageKey } from './internals/locale.js';
 export { ScreenObserver } from './internals/ScreenObserver.js';
 export type { ScreenSize, ScreenObserverConfig, ScreenResizeEvent } from './internals/ScreenObserver.js';
 export { app };

package/dist/index.js

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

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.d.ts

@@ -1,22 +1,3 @@
-/**
- * Lightweight locale registry for modern-app chrome strings.
- *
- * Scope: library-internal chrome strings only (empty-state copy, back label).
- * NOT a general i18n framework — the app's own content is the app's business.
- *
- * ★**English is the built-in default.** This package sits in the *generic* layer
- * (see the three-layer split: `components` = neutral primitives, `modern-app` =
- * what a modern app usually provides, `enterprise` = iyulab house style).
- * A generic layer that ships Korean defaults excludes every non-Korean consumer —
- * the same objection this repo raised against baking a house aesthetic into
- * `components`. Language excludes harder than aesthetics: an odd-looking default
- * is awkward, an unreadable one is unusable.
- *
- * Mirrors the registry already established in `u-widgets` — one pattern, not two.
- *
- *   registerLocale('ko', { back: '뒤로', noDataTitle: '아직 등록된 항목이 없습니다' });
- *   setDefaultLocale('ko');
- */
 export interface ModernAppLocaleStrings {
     /** Back button label in the page header. */
     back: string;
@@ -39,18 +20,26 @@ export interface ModernAppLocaleStrings {
     wizardStepAnnouncement: (index: number, total: number, label: string) => string;
 }
 /**
- * Register a locale. Partial overrides are merged with the English defaults,
- * so a consumer can translate one string without restating the rest.
+ * Keys of the `modern-app` namespace. All strings — `wizardStepAnnouncement` is a template with
+ * `{index}`, `{total}` and `{label}` placeholders (`'Step {index} of {total}: {label}'`).
+ */
+export type ModernAppMessageKey = keyof ModernAppLocaleStrings;
+/** The `modern-app` chrome-string namespace. Register translations here; pick the language with `Locale.set()`. */
+export declare const modernAppLocale: import('@iyulab/components/dist/utilities/Locale.js').LocaleNamespace<keyof ModernAppLocaleStrings>;
+/**
+ * @deprecated Register with `modernAppLocale.register(lang, strings)` and choose the language with
+ * `Locale.set()`. This forwards to the namespace; a function-valued `wizardStepAnnouncement` keeps
+ * working (the namespace form is a `{index}`/`{total}`/`{label}` template).
  */
 export declare function registerLocale(lang: string, strings: Partial<ModernAppLocaleStrings>): void;
-/** Set the locale used when a component does not specify one. */
+/**
+ * @deprecated Choose the language with `Locale.set()` of `@iyulab/components` — this package now
+ * follows it. When called, this still takes precedence over `Locale` for elements without their
+ * own `locale`; `setDefaultLocale(undefined)` hands the choice back to `Locale`.
+ */
 export declare function setDefaultLocale(lang: string | undefined): void;
 /**
- * Resolve strings for a language tag.
- *
- * Order: exact match (`ko-KR`) → base language (`ko`) → English.
- * ⚠The base-language step matters: consumers register `ko` but browsers report
- * `ko-KR`, and without it every registration would silently miss.
+ * Resolve every chrome string for a language tag (empty → `setDefaultLocale` → active `Locale`).
  */
 export declare function getLocaleStrings(lang?: string): ModernAppLocaleStrings;
 /** The English defaults — for tests and reference. */

package/dist/internals/locale.js

@@ -1,5 +1,6 @@
+import { Locale as e } from "@iyulab/components/dist/utilities/Locale.js";
 //#region src/internals/locale.ts
-var e = {
+var t = {
 	back: "Back",
 	noDataTitle: "Nothing here yet",
 	noDataDescription: "",
@@ -10,26 +11,65 @@ var e = {
 	toggleSidebar: "Toggle sidebar",
 	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(), {
-		...e,
-		...r
-	});
+	wizardStepAnnouncement: "Step {index} of {total}: {label}"
+}, n = e.namespace("modern-app");
+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 };
+	if (r) {
+		let t = e.toLowerCase();
+		i.set(t, r), s.wizardStepAnnouncement = a + t;
+	}
+	n.register(e, s);
+}
+function s(e) {
+	r = e;
 }
-function i(e) {
-	n = e;
+function c(e, t, i) {
+	let a = n.textIn(e || r, t, i);
+	return a === t ? "" : a;
 }
-function a(r) {
-	let i = (r ?? n)?.toLowerCase();
-	if (!i) return e;
-	if (t.has(i)) return t.get(i);
-	let a = i.split("-")[0];
-	return a !== i && t.has(a) ? t.get(a) : e;
+function l(e) {
+	let t = (t) => c(e, t);
+	return {
+		back: t("back"),
+		noDataTitle: t("noDataTitle"),
+		noDataDescription: t("noDataDescription"),
+		noResultsTitle: t("noResultsTitle"),
+		noResultsDescription: t("noResultsDescription"),
+		detailClose: t("detailClose"),
+		toggleMobileMenu: t("toggleMobileMenu"),
+		toggleSidebar: t("toggleSidebar"),
+		wizardBack: t("wizardBack"),
+		wizardNext: t("wizardNext"),
+		wizardStepAnnouncement: (t, n, r) => {
+			let o = c(e, "wizardStepAnnouncement", {
+				index: t,
+				total: n,
+				label: r
+			});
+			return o.startsWith(a) ? i.get(o.slice(22))(t, n, r) : o;
+		}
+	};
 }
-function o() {
-	return { ...e };
+function u() {
+	return {
+		...t,
+		wizardStepAnnouncement: (e, t, n) => `Step ${e} of ${t}: ${n}`
+	};
 }
 //#endregion
-export { o as getDefaultLocale, a as getLocaleStrings, r as registerLocale, i as setDefaultLocale };
+export { u as getDefaultLocale, l as getLocaleStrings, n as modernAppLocale, o as registerLocale, s as setDefaultLocale };

package/dist/layouts/SidebarLayout.d.ts

@@ -9,7 +9,7 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
     state: SidebarState;
     /** 사이드바 레이아웃 설정 */
     config?: SidebarLayoutConfig;
-    /** 크롬 문자열(토글 버튼 접근성 라벨 등) 로케일 — `registerLocale`로 등록한 언어 태그 */
+    /** 크롬 문자열(토글 버튼 접근성 라벨 등) 로케일 — 이 요소만 다른 언어로 쓸 때. 비우면 `Locale` 의 활성 로케일 */
     locale: string;
     progressBarEl: UProgressBar;
     /** overlay 슬롯 배정 상태 — CSS `:has()`로는 알 수 없다(`internals/slotted.ts` 참조). */

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";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.25.0",
+  "version": "0.27.0",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -64,7 +64,7 @@
     "lit": "^3.3.3"
   },
   "peerDependencies": {
-    "@iyulab/components": ">=1.43.0",
+    "@iyulab/components": ">=1.45.0",
     "@lit/react": ">=1.0.8",
     "react": ">=18.0.0"
   },

package/skills/modern-app/SKILL.md

@@ -141,6 +141,33 @@ html`<p>${translate('namespace::greeting')}</p>`;
 // layout: { main: [{ type: 'link', label: translate('nav::home'), href: '/' }] }
 ```
 
+### 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 — 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';
+
+Locale.set('ko');                       // built-in Korean — nothing to register
+
+modernAppLocale.register('ja', {
+  back: '戻る',
+  toggleSidebar: 'サイドバーの切り替え',
+  wizardStepAnnouncement: 'ステップ {index}/{total}: {label}',
+});
+```
+
+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`.
+
 ---
 
 ## Sidebar Layout

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

@@ -54,5 +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 `registerLocale('ko', …)`, or pass
+⚠ 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/info-field.md

@@ -73,6 +73,10 @@ stay level:
   blank="No downtime recorded for the failures"></u-info-field>
 ```
 
+`tone` colors a blank value too, so a reason that needs attention takes `tone="negative"`. Set it
+conditionally (`tone=${mttr == null ? 'negative' : undefined}`) — otherwise the value is toned
+as well once it exists.
+
 ## CSS Parts
 
 | Part | Description |

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

@@ -58,5 +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 `registerLocale('ko', { back: '뒤로' })`.
+⚠ 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: … })`.