@iyulab/modern-app 0.26.0 → 0.27.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # 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

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.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.26.0",
+  "version": "0.27.0",
   "keywords": [
     "iyulab",
     "web-framework",

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: … })`.