@iyulab/modern-app 0.24.0 → 0.25.0

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # Changelog
 
+## [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/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/layouts/SidebarLayout.d.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.25.0",
   "keywords": [
     "iyulab",
     "web-framework",

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,52 @@ 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>
+```
+
 ## 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 +92,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) |