@iyulab/modern-app 0.24.0 → 0.26.0

package/CHANGELOG.md

@@ -1,5 +1,87 @@
 # Changelog
 
+## [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
+
+- **`u-info-field` takes a `unit` — `'건'`, `'%'`, `'h'` — drawn after the value one step below
+  it: label size, body weight, weak color.** A KPI figure almost always carries a unit, and
+  written into the value it was drawn at the `size="lg"` title step, as large and as bold as the
+  number; the only way back was restating size, weight and color by hand at every tile, and a tile
+  that missed one showed a unit as big as its figure. The unit is hidden while the value is blank
+  (`— 건` is not a reading) and follows slotted value content too. Exposed as `::part(unit)`.
+- **`u-group-box` takes a `level` (`2`–`6`, default `3`) for its title's place in the document
+  outline.** The title was always an `h3`. A box placed directly under `u-page-header` (the
+  page's `h1`) — the usual spot on a detail screen — skipped a level and sat deeper than its sibling
+  sections, which screen-reader heading navigation exposes. The box cannot know its own depth, so
+  the page that composes it says so: `<u-group-box level="2">`. The level changes semantics only;
+  the title looks the same at every level. The default is unchanged.
+
+### Fixed
+
+- 🔴 **`SidebarLayout`'s toggle follows the screen size it was told about, with or without
+  `app.load()`.** Size *changes* arrived as `screen-resize` events, but the toggle read the
+  `app.screen` singleton, which only exists when `app.load()` created the observer. Assembling the
+  shell yourself — as the `/react` entry point does, with `SidebarLayout` and `ScreenObserver` —
+  left it empty, so it fell back to `'large'`: on a phone-width screen, opening the menu switched to
+  the desktop sidebar squeezed beside the content instead of the mobile overlay, and the close glyph
+  never appeared. The layout now remembers the last size it received; `app.screen` remains a
+  fallback before the first event.
+
+### Changed
+
+- **At `size="lg"`, a blank value is drawn at body size rather than the title step**, so `blank`
+  can carry a short reason when a figure cannot be computed. The value row keeps its height, so
+  tiles in one strip stay level.
+
+- 🔴 **`u-info-field`'s `numeric` no longer right-aligns the value — it only sets tabular
+  figures.** The same applies to `format="number"` and `format="currency"`, which imply it. A
+  field is a label/value pair that owns one `u-info-section` grid cell; there are no
+  neighbouring figures in that cell to line up, so right-aligning only pushed the value to the far
+  side of the cell from its label. It was most visible in `size="lg"` KPI tiles — label at the
+  top left, value at the bottom right — and it was inconsistent: in one tile strip a currency
+  figure sat on the right while a plain count sat on the left. Tabular figures stay, so digits
+  keep their width as a value changes.
+
+⚠ **Visible change:** numeric values in info fields now start under their label. If a layout of
+yours genuinely needs right-aligned figures, style the part:
+`u-info-field::part(value) { text-align: end; }`.
+
+### Documentation
+
+- The `u-info-field` reference describes `numeric` as tabular figures only, says why it no longer
+  aligns, and gives the `::part(value)` rule for layouts that need it.
+
 ## [0.24.0] - 2026-09-22
 
 ### Fixed

package/README.md

@@ -118,6 +118,30 @@ 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 — 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:
+
+```typescript
+import { Locale } from '@iyulab/components';
+import { modernAppLocale } from '@iyulab/modern-app';
+
+modernAppLocale.register('ko', {
+  back: '뒤로',
+  toggleSidebar: '사이드바 접기/펼치기',
+  wizardStepAnnouncement: '{total}단계 중 {index}단계: {label}',
+});
+Locale.set('ko');
+```
+
+A partial table is enough — untranslated keys fall back to English. 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/components/EmptyState.d.ts

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

package/dist/components/GroupBox.d.ts

@@ -1,6 +1,8 @@
 import { StyledElement } from '../internals/StyledElement.js';
 import { default as React } from 'react';
 type ElementParts = 'host' | 'header' | 'title' | 'actions' | 'body';
+/** 제목 단계 — 페이지 제목(h1)은 `u-page-header` 몫이라 2 부터다. */
+export type GroupBoxLevel = 2 | 3 | 4 | 5 | 6;
 /**
  * 그룹 박스 — 제목이 붙은 카드. LOB 상세 화면의 기본 단위다.
  *
@@ -27,6 +29,15 @@ export declare class GroupBox extends StyledElement<ElementParts> {
     divider: boolean;
     /** 본문 여백을 없앤다 — 표를 카드 가장자리까지 붙일 때. */
     flush: boolean;
+    /**
+     * Heading level of the title in the document outline (`2`–`6`, default `3`).
+     *
+     * The box cannot know how deep it sits in the page, so whoever composes the page says so — a
+     * box placed directly under `u-page-header` (the page's `h1`) is usually `2`, and leaving it at
+     * `3` skips a level and puts it deeper than its sibling sections. This changes semantics only:
+     * the title keeps its visual size at every level. Out-of-range values fall back to `3`.
+     */
+    level: GroupBoxLevel;
     /**
      * 액션 슬롯 배정 상태.
      * ★종전에는 'render()' 안에서 'this.querySelector()' 로 라이트 DOM 을 읽었다. 그것은
@@ -48,6 +59,7 @@ declare module 'react' {
                 title?: string;
                 divider?: boolean;
                 flush?: boolean;
+                level?: GroupBoxLevel;
             };
         }
     }

package/dist/components/GroupBox.js

@@ -5,10 +5,17 @@ import { slotHasContent as r } from "../internals/slotted.js";
 import { styles as i } from "./GroupBox.styles.js";
 import { html as a } from "lit";
 import { customElement as o, property as s, state as c } from "lit/decorators.js";
+import { html as l, literal as u } from "lit/static-html.js";
 //#region src/components/GroupBox.ts
-var l = class extends n {
+var d = {
+	2: u`h2`,
+	3: u`h3`,
+	4: u`h4`,
+	5: u`h5`,
+	6: u`h6`
+}, f = class extends n {
 	constructor(...e) {
-		super(...e), this.title = "", this.divider = !1, this.flush = !1, this.hasActions = !1;
+		super(...e), this.title = "", this.divider = !1, this.flush = !1, this.level = 3, this.hasActions = !1;
 	}
 	static {
 		this.styles = [super.styles, i];
@@ -17,7 +24,7 @@ var l = class extends n {
 		let e = !!this.title || this.hasActions;
 		return a`
       <div class="header ${this.divider ? "divider" : ""} ${e ? "" : "empty"}" part="header">
-        <h3 class="title" part="title">${this.title}</h3>
+        ${l`<${d[this.level] ?? d[3]} class="title" part="title">${this.title}</${d[this.level] ?? d[3]}>`}
         <div class="actions ${this.hasActions ? "" : "empty"}" part="actions">
           <slot name="actions"
             @slotchange=${(e) => this.hasActions = r(e.target)}
@@ -28,6 +35,9 @@ var l = class extends n {
     `;
 	}
 };
-t([s({ type: String }), e("design:type", Object)], l.prototype, "title", void 0), t([s({ type: Boolean }), e("design:type", Object)], l.prototype, "divider", void 0), t([s({ type: Boolean }), e("design:type", Object)], l.prototype, "flush", void 0), t([c(), e("design:type", Object)], l.prototype, "hasActions", void 0), l = t([o("u-group-box")], l);
+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({
+	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);
 //#endregion
-export { l as GroupBox };
+export { f as GroupBox };

package/dist/components/InfoField.d.ts

@@ -1,6 +1,6 @@
 import { StyledElement } from '../internals/StyledElement.js';
 import { default as React } from 'react';
-type ElementParts = 'host' | 'label' | 'value' | 'trend';
+type ElementParts = 'host' | 'label' | 'value' | 'unit' | 'trend';
 export type InfoFieldFormat = 'number' | 'currency' | 'date';
 export type InfoFieldSize = 'default' | 'lg';
 export type InfoFieldTrend = 'up' | 'down' | 'flat';
@@ -22,6 +22,7 @@ export declare function isBlank(v: unknown): boolean;
  * <u-info-field label="부수" .value=${order.quantity} numeric></u-info-field>
  * <u-info-field label="거래처">동서인쇄</u-info-field>   <!-- 슬롯이 value 를 이긴다 -->
  * <u-info-field label="합계" format="currency" currency="KRW" .value=${order.total}></u-info-field>
+ * <u-info-field label="미결 작업지시" size="lg" .value=${12} unit="건"></u-info-field>
  * ```
  */
 export declare class InfoField extends StyledElement<ElementParts> {
@@ -40,9 +41,12 @@ export declare class InfoField extends StyledElement<ElementParts> {
     /** "아직 없음"을 나타낼 문구. */
     blank: string;
     /**
-     * 숫자 값 — 우정렬 + 고정폭 숫자(`tabular-nums`).
-     * ★자릿수가 세로로 맞아야 크기 비교가 눈으로 된다. LOB 화면은 금액·수량이 절반이다.
-     * `format` 이 `'number'`/`'currency'` 면 이 정렬이 자동으로 함의된다 — 따로 켤 필요 없다.
+     * Numeric value — renders with tabular figures (`tabular-nums`) so digits keep their width
+     * when the value changes. Implied by `format="number"`/`"currency"`.
+     *
+     * It does **not** change alignment: this is a label/value pair, not a table cell, so there are
+     * no neighbouring figures to line up and right-aligning only pushes the value away from its
+     * label. Where a layout does need right-aligned figures, style `::part(value)`.
      */
     numeric: boolean;
     /**
@@ -55,6 +59,12 @@ export declare class InfoField extends StyledElement<ElementParts> {
      * omitted, degrades to plain number formatting without a currency symbol (does not throw).
      */
     currency?: string;
+    /**
+     * Unit shown after the value — e.g. `'건'`, `'%'`, `'h'`. Drawn one step below the value (label
+     * size, body weight, weak color) so a KPI figure keeps its emphasis at `size="lg"`. Hidden while
+     * the value is blank: a placeholder has no unit. Follows slotted value content too.
+     */
+    unit?: string;
     /**
      * Display size. `'lg'` renders the value at the `title` type-scale step
      * (`--u-text-title-size`/`--u-text-title-weight`) — intended for dashboard KPI tiles
@@ -105,6 +115,7 @@ declare module 'react' {
                 numeric?: boolean;
                 format?: InfoFieldFormat;
                 currency?: string;
+                unit?: string;
                 size?: InfoFieldSize;
                 trend?: InfoFieldTrend;
                 /** 프로퍼티는 `trendLabel`이지만 Lit 기본 속성명 규칙(소문자화, kebab

package/dist/components/InfoField.js

@@ -26,12 +26,10 @@ var f = class extends n {
 		return this.format === "currency" ? this.currency ? s(Number(this.value), this.currency) : l(Number(this.value)) : this.format === "number" ? l(Number(this.value)) : this.format === "date" ? c(this.value) : String(this.value);
 	}
 	render() {
-		let e = !this.hasSlotted && d(this.value), t = this.numeric || this.format === "number" || this.format === "currency", n = this.trend !== void 0 || this.trendLabel !== void 0, r = this.tone ?? u(this.trend), a = this.trend === "up" ? "▲" : this.trend === "down" ? "▼" : "";
+		let e = !this.hasSlotted && d(this.value), t = this.numeric || this.format === "number" || this.format === "currency", n = this.trend !== void 0 || this.trendLabel !== void 0, r = this.tone ?? u(this.trend), a = this.trend === "up" ? "▲" : this.trend === "down" ? "▼" : "", o = !e && this.unit ? i`<span class="unit" part="unit">${this.unit}</span>` : "";
 		return i`
       <div class="label" part="label">${this.label}</div>
-      <div class="value ${t ? "numeric" : ""} ${e ? "blank" : ""} tone-${r}" part="value">
-        ${this.hasSlotted ? i`<slot></slot>` : e ? this.blank : this.formatValue()}
-      </div>
+      <div class="value ${t ? "numeric" : ""} ${e ? "blank" : ""} tone-${r}" part="value">${this.hasSlotted ? i`<slot></slot>` : e ? this.blank : this.formatValue()}${o}</div>
       ${n ? i`
         <div class="trend tone-${r}" part="trend">
           ${a ? i`<span aria-hidden="true">${a}</span> ` : ""}${this.trendLabel ?? ""}
@@ -40,7 +38,7 @@ var f = class extends n {
     `;
 	}
 };
-t([o({ type: String }), e("design:type", Object)], f.prototype, "label", void 0), t([o({ type: String }), e("design:type", Object)], f.prototype, "value", void 0), t([o({ type: String }), e("design:type", Object)], f.prototype, "blank", void 0), t([o({ type: Boolean }), e("design:type", Object)], f.prototype, "numeric", void 0), t([o({ type: String }), e("design:type", Object)], f.prototype, "format", void 0), t([o({ type: String }), e("design:type", String)], f.prototype, "currency", void 0), t([o({
+t([o({ type: String }), e("design:type", Object)], f.prototype, "label", void 0), t([o({ type: String }), e("design:type", Object)], f.prototype, "value", void 0), t([o({ type: String }), e("design:type", Object)], f.prototype, "blank", void 0), t([o({ type: Boolean }), e("design:type", Object)], f.prototype, "numeric", void 0), t([o({ type: String }), e("design:type", Object)], f.prototype, "format", void 0), t([o({ type: String }), e("design:type", String)], f.prototype, "currency", void 0), t([o({ type: String }), e("design:type", String)], f.prototype, "unit", void 0), t([o({
 	type: String,
 	reflect: !0
 }), e("design:type", Object)], f.prototype, "size", void 0), t([o({ type: String }), e("design:type", Object)], f.prototype, "trend", void 0), t([o({ type: String }), e("design:type", String)], f.prototype, "trendLabel", void 0), t([o({ type: String }), e("design:type", Object)], f.prototype, "tone", void 0), f = t([a("u-info-field")], f);

package/dist/components/InfoField.styles.js

@@ -23,8 +23,10 @@ var t = e`
     overflow-wrap: anywhere;
   }
 
+  /* 고정폭 숫자만 — 정렬은 건드리지 않는다. 이 요소는 표의 칸이 아니라 라벨-값 한 쌍이라
+     세로로 맞출 이웃 숫자가 없다. 우정렬하면 값이 라벨에서 칸 반대편으로 밀려날 뿐이다.
+     표처럼 열을 맞춰야 하는 배치라면 소비자가 ::part(value) 로 정렬한다. */
   .value.numeric {
-    text-align: right;
     font-variant-numeric: tabular-nums;
   }
 
@@ -41,9 +43,23 @@ var t = e`
     font-weight: var(--u-text-body-weight, 400);
   }
 
-  /* size="lg" 보다 우선해야 한다 — blank 는 lg 모드에서도 계속 de-emphasize 상태를 유지해야 한다. */
+  /* size="lg" 보다 우선해야 한다 — blank 는 lg 모드에서도 계속 de-emphasize 상태를 유지해야 한다.
+     크기도 본문 단으로 내린다: blank 문구가 «값을 낼 수 없는 사유» 문장일 수 있고, 제목 단에서는
+     타일에 담기지 않는다. 대신 값 줄의 높이는 지켜 한 줄에 놓인 타일들의 높이가 갈리지 않게 한다
+     (lg 값 줄 = 제목 크기 × 본문 행간 — 위 .value 가 행간을 본문 단에 두기 때문이다). */
   :host([size="lg"]) .value.blank {
+    font-size: var(--u-text-body-size, 14px);
     font-weight: var(--u-text-body-weight, 400);
+    min-height: calc(var(--u-text-title-size, 20px) * var(--u-text-body-leading, 1.6));
+  }
+
+  /* 단위는 값보다 한 단 아래 — 크기·굵기·색 셋을 함께 낮춰야 KPI 숫자가 강조를 지킨다.
+     이 세트를 소비자가 기억해 되돌리게 두면 한 곳이라도 빠진 자리에서 단위가 숫자만큼 커진다. */
+  .unit {
+    margin-inline-start: 0.25em;
+    font-size: var(--u-text-label-size, 13px);
+    font-weight: var(--u-text-body-weight, 400);
+    color: var(--u-txt-color-weak, #616161);
   }
 
   /* tone은 trend 유무와 무관하게 값 텍스트 자체에도 적용된다(neutral은 무규칙 — 기본

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

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

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/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,53 @@ 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);
+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 i(e) {
-	n = e;
+function s(e) {
+	r = e;
 }
-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 c(e, t, i) {
+	let a = n.textIn(e || r, t, i);
+	return a === t ? "" : a;
 }
-function o() {
-	return { ...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 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` 참조). */
@@ -68,6 +68,16 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
     /** 설정이 준 값이 있으면 그것을, 없으면 기본값을 돌려준다(키 단위 부분 오버라이드). */
     private icon;
     private renderLogo;
+    /**
+     * 이 레이아웃이 마지막으로 받은 화면 크기.
+     *
+     * 크기 «전환» 은 `screen-resize` 이벤트로 받으므로 토글도 같은 출처를 읽어야 한다.
+     * 종전에는 토글이 싱글턴 `app.screen` 을 읽었는데, 그것은 `app.load()` 가 옵저버를 만들
+     * 때만 존재한다 — `/react` 처럼 레이아웃과 `ScreenObserver` 를 직접 조립하면 항상 비어
+     * `'large'` 로 떨어졌고, 모바일 폭에서 메뉴를 열면 데스크톱 사이드바가 펼쳐졌다.
+     * `app.screen` 은 이벤트를 아직 못 받았을 때의 폴백으로만 남긴다.
+     */
+    private screenSize?;
     /** 사이드바 토글 핸들러 */
     private handleToggleButtonClick;
     /**

package/dist/layouts/SidebarLayout.js

@@ -45,7 +45,7 @@ var E = class extends i {
 	}
 	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 = () => {
-			let t = e.screen ?? "large";
+			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 = () => {
 			this.state = "slim";
@@ -98,7 +98,7 @@ var E = class extends i {
 			e.preventDefault();
 		}, this.handleScreenResize = (e) => {
 			let t = e.detail.size;
-			t === "large" ? this.state = "default" : t === "medium" ? this.state = "slim" : t === "small" ? this.state = "mobile" : console.warn("Unknown screen size:", t);
+			this.screenSize = t, t === "large" ? this.state = "default" : t === "medium" ? this.state = "slim" : t === "small" ? this.state = "mobile" : console.warn("Unknown screen size:", t);
 		};
 	}
 	static {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.24.0",
+  "version": "0.26.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,30 @@ 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 — 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:
+
+```typescript
+import { Locale } from '@iyulab/components';
+import { modernAppLocale } from '@iyulab/modern-app';
+
+modernAppLocale.register('ko', {
+  back: '뒤로',
+  toggleSidebar: '사이드바 접기/펼치기',
+  wizardStepAnnouncement: '{total}단계 중 {index}단계: {label}',
+});
+Locale.set('ko');
+```
+
+A partial table is enough — untranslated keys fall back to English. 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
-`title`/`description` per screen.
+⚠ 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.

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

@@ -32,6 +32,7 @@ a left edge without any consumer CSS.
 | `title` | `string` | `''` | | Header 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 |
 
 ## CSS Parts
 

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

@@ -33,26 +33,56 @@ and those are different states of the business. So the component owns the rule.
 | `label` | `string` | `''` | | Field label |
 | `value` | `unknown` | — | | Value; property only (`attribute: false`) |
 | `blank` | `string` | `'—'` | | Placeholder for null/undefined/empty — **not** for `0` or `false` |
-| `numeric` | `boolean` | `false` | | Right-align with tabular figures so digits line up vertically |
+| `numeric` | `boolean` | `false` | | Tabular figures, so digits keep their width as the value changes; implied by `format="number"`/`"currency"`. Does **not** change alignment |
 | `format` | `'number'\|'currency'\|'date'` | — | | Renders `value` through `@iyulab/components`' `formatNumber`/`formatCurrency`/`formatDate`; unset falls back to plain `String(value)` |
 | `currency` | `string` | — | | Currency code for `format="currency"` (e.g. `'KRW'`); omitted degrades to plain number formatting, does not throw |
+| `unit` | `string` | — | | Unit after the value (e.g. `'건'`, `'%'`, `'h'`), drawn one step below it — label size, body weight, weak color. Hidden while the value is blank. Also follows slotted value content |
 | `size` | `'default'\|'lg'` | `'default'` | ✓ | `'lg'` renders the value at the `title` type-scale step — for dashboard KPI tiles composed inside `u-info-section` |
 | `trend` | `'up'\|'down'\|'flat'` | — | | Trend direction; renders a trend indicator when set, alongside `trendLabel`; pair with trendLabel for an accessible name — trend alone conveys direction by color only |
 | `trendLabel` | `string` | — | | Trend copy, e.g. `"+12% vs last month"` — wording is the consumer's responsibility |
 | `tone` | `'positive'\|'negative'\|'neutral'` | — | | Explicit tone override; resolves from `trend` when unset (`up→positive`, `down→negative`, `flat`/unset→`neutral`) but always wins over inference. Colors the value text itself, independent of `trend` — a static figure (e.g. a balance due) can be toned `negative` with no trend arrow |
 
-⚠ `numeric` earns its keep in **tables**, where columns of figures are compared by eye. On a
-lone field it just pushes the value away from its label.
+⚠ `numeric` no longer right-aligns (it did before 0.25.0). A field is a label/value pair that owns
+one grid cell, with no neighbouring figures to line up, so right-aligning only pushed the value
+to the far side of the cell from its label — most visibly in `size="lg"` KPI tiles, and
+inconsistently, because `format="currency"` implied it while a plain count did not. If a layout
+genuinely needs right-aligned figures, style the part: `u-info-field::part(value) { text-align: end; }`.
 
 ```html
 <u-info-field label="Total" format="currency" currency="KRW" .value=${order.total}></u-info-field>
 ```
 
+### Units and KPI tiles
+
+A KPI figure almost always carries a unit. Put it in `unit` rather than in the value: the value
+is drawn at the `title` step in `size="lg"`, and a unit written into the value (or the slot) is
+drawn that large and that bold too — undoing it by hand means restating size, weight and color at
+every tile.
+
+```html
+<u-info-field label="Open work orders" size="lg" .value=${openCount} unit="건"></u-info-field>
+<u-info-field label="Availability" size="lg" format="number" .value=${98.2} unit="%"></u-info-field>
+```
+
+At `size="lg"` a blank value is drawn at body size, not the title step, so `blank` can carry a
+short reason when a figure cannot be computed — the row keeps its height, so tiles in one strip
+stay level:
+
+```html
+<u-info-field label="MTTR" size="lg" .value=${mttr} unit="h"
+  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 |
 |------|-------------|
 | `label` · `value` · `trend` | The label, the value, and the (optional) trend indicator |
+| `unit` | The unit, inside `value` (only when `unit` is set and the value is not blank) |
 
 ## CSS Custom Properties
 
@@ -66,5 +96,6 @@ lone field it just pushes the value away from its label.
 | `--u-text-body-weight` | Value font weight when `blank` |
 | `--u-txt-color` | Value color |
 | `--u-text-title-size` / `-weight` | Value typography when `size="lg"` |
+| `--u-text-label-size` | Unit size |
 | `--u-success-color-strong` | `tone="positive"` color (value and trend) |
 | `--u-danger-color-strong` | `tone="negative"` color (value and trend) |

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

@@ -59,4 +59,5 @@ screens nobody opens.
 | `--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: '뒤로' })`.
+language. Register others with `modernAppLocale.register('ko', { back: '뒤로' })` and choose the
+language with `Locale.set()` of `@iyulab/components`.