@iyulab/modern-app 0.23.0 → 0.25.0

package/CHANGELOG.md

@@ -1,5 +1,96 @@
 # 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
+
+- **The shell draws its own chrome without reaching the network.** The mobile and sidebar
+  toggles were hard-coded to `lib="bootstrap"`, which `@iyulab/components` resolves over a CDN.
+  An app that registers its own bundled icons still could not reach those two, because the shell
+  never routed through that registration — so on a network-isolated deployment the toggles
+  stayed blank and a failing request repeated on every render. Working around it from outside
+  meant intercepting a globally registered library name, with an unclear blast radius. Both
+  toggles now resolve from the bundled internal set, as the overlay close button already did.
+- That asymmetry was a small defect of its own: one shell drew two different close glyphs, a
+  CDN-backed one in the mobile header and a bundled one on the overlay. **The visible change is
+  a slightly different stroke on three controls.**
+
+### Added
+
+- **`icons` config.** Overrides both the source and the individual names, per key. It takes
+  names as well as the library because the defaults are bundled-set names and another set is not
+  guaranteed to carry them — pointing the shell at your own icons needs both halves. See
+  `docs/configuration.md`.
+
+### Changed
+
+- 🔴 **The `@iyulab/components` peer range is now `>=1.43.0`** (was `>=1.42.0`). The shell's
+  chrome depends on `menu-2` and `layout-sidebar` existing in that package's built-in set, and
+  those names arrive in **1.43.0**. The old range admitted 1.42.x, which would have let
+  `components@1.42.4` install alongside this version with no warning at all — and then the shell
+  icons would be blank whether or not the deployment had network access, which is a wider
+  failure than the one this release fixes. Publishing in the right order does not prevent that:
+  ordering is a property of how we release, while the range is what a consumer is allowed to
+  install.
+
+### Notes
+
+- The regression test resolves each default name **against the bundle** rather than only
+  asserting which name the shell asks for. Asserting the name alone would let a typo blank the
+  icon with every assertion still passing.
+
 ## [0.23.0] - 2026-09-21
 
 ### 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/index.d.ts

@@ -3,6 +3,7 @@ export type * from './types/AppConfigs';
 export type * from './types/AppOptions';
 export type * from './types/AuthConfig';
 export type { SidebarPermissionGuard } from './layouts/SidebarPermission';
+export type { SidebarIconsConfig } from './layouts/SidebarLayout.types';
 export { filterSidebarItems } from './layouts/filterSidebarItems.js';
 export { PageHeader } from './components/PageHeader.js';
 export { GroupBox } from './components/GroupBox.js';

package/dist/layouts/SidebarLayout.d.ts

@@ -55,7 +55,29 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
      * 🔴로고는 홈(또는 `href`)으로 가는 **링크**다 — 종전엔 클릭만 받는 `img`·`span`·`u-icon` 이라 키보드로 닿지 않았고
      *   보조기술에 링크로 드러나지 않았다. `u-link` 는 `href` 가 없으면 basepath 로 SPA 이동하므로 종전 `app.navigate('')` 와 같다.
      */
+    /**
+     * 셸이 **자기 chrome 으로** 그리는 아이콘의 기본값 — 전부 `internal` 번들이라 네트워크를 타지 않는다.
+     *
+     * 🔴**0.24.0 이전에는 토글러 둘이 `bootstrap`(= jsdelivr CDN 조회)이었다.** 소비앱이 자기
+     * 아이콘을 빌드 시점에 전부 구워 등록해도 **셸이 쓰는 것만은 그 등록을 타지 않아**, 폐쇄망
+     * 배포에서 사이드바 토글이 빈 채로 남고 매번 실패하는 요청이 쌓였다. ⚠그리고 셸이 스스로
+     * 갈려 있었다 — 오버레이 닫기는 `internal`, 모바일 닫기는 `bootstrap` 이라 **한 셸이 서로
+     * 다른 X 를 둘 그렸다.**
+     */
+    private static readonly DEFAULT_ICONS;
+    /** 설정이 준 값이 있으면 그것을, 없으면 기본값을 돌려준다(키 단위 부분 오버라이드). */
+    private icon;
     private renderLogo;
+    /**
+     * 이 레이아웃이 마지막으로 받은 화면 크기.
+     *
+     * 크기 «전환» 은 `screen-resize` 이벤트로 받으므로 토글도 같은 출처를 읽어야 한다.
+     * 종전에는 토글이 싱글턴 `app.screen` 을 읽었는데, 그것은 `app.load()` 가 옵저버를 만들
+     * 때만 존재한다 — `/react` 처럼 레이아웃과 `ScreenObserver` 를 직접 조립하면 항상 비어
+     * `'large'` 로 떨어졌고, 모바일 폭에서 메뉴를 열면 데스크톱 사이드바가 펼쳐졌다.
+     * `app.screen` 은 이벤트를 아직 못 받았을 때의 폴백으로만 남긴다.
+     */
+    private screenSize?;
     /** 사이드바 토글 핸들러 */
     private handleToggleButtonClick;
     /**

package/dist/layouts/SidebarLayout.js

@@ -21,28 +21,31 @@ import { ifDefined as _ } from "lit/directives/if-defined.js";
 import { createDevWarner as v } from "@iyulab/components/dist/utilities/devWarning.js";
 import { UProgressBar as y } from "@iyulab/components/dist/components/progress-bar/UProgressBar.js";
 //#region src/layouts/SidebarLayout.ts
-var b = v("@iyulab/modern-app"), x = 0;
-function S(e) {
+var b, x = v("@iyulab/modern-app"), S = 0;
+function C(e) {
 	let t = e.tagName;
 	if (t === "INPUT" || t === "TEXTAREA" || t === "SELECT" || e.isContentEditable) return !0;
 	let n = e.getAttribute("role");
 	return n === "textbox" || n === "searchbox" || n === "combobox" || n === "spinbutton";
 }
-function C(e) {
+function w(e) {
 	let t = getComputedStyle(e);
 	return (t.overflowY === "auto" || t.overflowY === "scroll") && e.scrollHeight > e.clientHeight;
 }
-function w(e, t) {
+function T(e, t) {
 	for (let n of e) if (n instanceof HTMLElement) {
-		if (C(n)) return n === t;
+		if (w(n)) return n === t;
 		if (n === t) break;
 	}
 	return !0;
 }
-var T = class extends i {
+var E = class extends i {
+	static {
+		b = this;
+	}
 	constructor(...t) {
-		super(...t), this.state = "default", this.locale = "", this.hasOverlay = !1, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : void 0, this.context = null, this.unsizedWarnKey = `unsized:${++x}`, 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";
+		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 = 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";
@@ -66,9 +69,9 @@ var T = class extends i {
 			this.fire("overlay-close", { cancelable: !1 });
 		}, this._handleMainKeydown = (e) => {
 			let t = e.composedPath()[0];
-			if (t instanceof HTMLElement && S(t)) return;
+			if (t instanceof HTMLElement && C(t)) return;
 			let n = this.shadowRoot?.querySelector(".main");
-			if (!n || !w(e.composedPath(), n)) return;
+			if (!n || !T(e.composedPath(), n)) return;
 			let r = n.clientHeight;
 			switch (e.key) {
 				case " ":
@@ -95,7 +98,7 @@ var T = 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 {
@@ -123,7 +126,7 @@ var T = class extends i {
 		process.env.NODE_ENV !== "production" && requestAnimationFrame(() => {
 			if (!this.isConnected) return;
 			let e = this.getBoundingClientRect().height;
-			e >= 200 || b(this.unsizedWarnKey, `u-sidebar-layout is only ${Math.round(e)}px tall — its height: 100% found no sized ancestor, so the shell sits at its own chrome height and the route area has almost no room. Give the root element a height (e.g. #app { height: 100vh } — app.load() does this for document.body).`);
+			e >= 200 || x(this.unsizedWarnKey, `u-sidebar-layout is only ${Math.round(e)}px tall — its height: 100% found no sized ancestor, so the shell sits at its own chrome height and the route area has almost no room. Give the root element a height (e.g. #app { height: 100vh } — app.load() does this for document.body).`);
 		});
 	}
 	render() {
@@ -138,8 +141,8 @@ var T = class extends i {
           aria-label=${a(this.locale || void 0).toggleMobileMenu}
           @click=${this.handleToggleButtonClick}>
           <u-icon
-            lib="bootstrap"
-            name=${this.state === "mobile-open" ? "x-lg" : "list"}
+            lib=${this.icon("lib")}
+            name=${this.state === "mobile-open" ? this.icon("close") : this.icon("menu")}
           ></u-icon>
         </u-button>
       </div>
@@ -156,8 +159,8 @@ var T = class extends i {
             aria-label=${a(this.locale || void 0).toggleSidebar}
             @click=${this.handleToggleButtonClick}>
             <u-icon
-              lib="bootstrap"
-              name="layout-sidebar"
+              lib=${this.icon("lib")}
+              name=${this.icon("sidebarToggle")}
             ></u-icon>
           </u-button>
         </div>
@@ -188,7 +191,7 @@ var T = class extends i {
           <u-button class="overlay-close" part="overlay-close" variant="ghost"
             aria-label=${a(this.locale || void 0).detailClose}
             @click=${this.handleOverlayClose}>
-            <u-icon lib="internal" name="x"></u-icon>
+            <u-icon lib=${this.icon("lib")} name=${this.icon("overlayClose")}></u-icon>
           </u-button>
           <slot name="overlay" @slotchange=${this.handleOverlaySlotChange}></slot>
         </div>
@@ -260,6 +263,18 @@ var T = class extends i {
 		}
 		return u;
 	}
+	static {
+		this.DEFAULT_ICONS = {
+			lib: "internal",
+			menu: "menu-2",
+			close: "x",
+			sidebarToggle: "layout-sidebar",
+			overlayClose: "x"
+		};
+	}
+	icon(e) {
+		return this.config?.icons?.[e] ?? b.DEFAULT_ICONS[e];
+	}
 	renderLogo() {
 		let e = this.config?.logo, t = this.config?.title ?? "Home";
 		if (!e || typeof e == "string") return e ? l`
@@ -293,6 +308,6 @@ var T = class extends i {
 r([f({
 	type: String,
 	reflect: !0
-}), n("design:type", Object)], T.prototype, "state", void 0), r([f({ type: Object }), n("design:type", Object)], T.prototype, "config", void 0), r([f({ type: String }), n("design:type", Object)], T.prototype, "locale", void 0), r([p("u-progress-bar"), n("design:type", y === void 0 ? Object : y)], T.prototype, "progressBarEl", void 0), r([m(), n("design:type", Object)], T.prototype, "hasOverlay", void 0), r([m(), n("design:type", Object)], T.prototype, "context", void 0), T = r([d("u-sidebar-layout")], T);
+}), n("design:type", Object)], E.prototype, "state", void 0), r([f({ type: Object }), n("design:type", Object)], E.prototype, "config", void 0), r([f({ type: String }), n("design:type", Object)], E.prototype, "locale", void 0), r([p("u-progress-bar"), n("design:type", y === void 0 ? Object : y)], E.prototype, "progressBarEl", void 0), r([m(), n("design:type", Object)], E.prototype, "hasOverlay", void 0), r([m(), n("design:type", Object)], E.prototype, "context", void 0), E = b = r([d("u-sidebar-layout")], E);
 //#endregion
-export { T as SidebarLayout };
+export { E as SidebarLayout };

package/dist/layouts/SidebarLayout.types.d.ts

@@ -11,6 +11,34 @@ export type { SidebarLinkConfig } from '../components/SidebarLink';
 export type { SidebarSectionConfig } from '../components/SidebarSection';
 export type { SidebarGroupConfig } from '../components/SidebarGroup';
 export type { SidebarButtonConfig } from '../components/SidebarButton';
+/**
+ * 셸이 **자기 chrome 으로** 그리는 아이콘의 출처와 이름. 지정한 키만 기본값을 대체한다.
+ *
+ * 🔴**기본값은 네트워크를 타지 않는다.** `internal` 은 `@iyulab/components` 가 빌드 시점에
+ * 굽는 번들이라, 폐쇄망·오프라인 배포에서도 셸 아이콘이 비지 않는다. 0.24.0 이전에는 셸의
+ * 토글러 둘이 `bootstrap`(= jsdelivr CDN 조회)을 썼고, 소비자가 자기 아이콘을 전부 번들로
+ * 구워 등록해도 **셸이 쓰는 것만은 그 등록을 타지 않았다.**
+ *
+ * ⚠**`lib` 만 바꿀 때는 이름도 함께 봐야 한다** — 기본 이름들은 `internal` 번들의 이름이고,
+ * 다른 lib 이 같은 이름을 갖는다는 보장이 없다. 자기 아이콘 세트로 갈아끼울 때는 보통
+ * `lib` 과 이름을 함께 준다:
+ *
+ * ```ts
+ * icons: { lib: 'app', menu: 'list', close: 'x-lg', sidebarToggle: 'layout-sidebar' }
+ * ```
+ */
+export interface SidebarIconsConfig {
+    /** 아래 이름들을 해석할 아이콘 lib. 기본 `'internal'`(번들 — 네트워크 없음). */
+    lib?: string;
+    /** 모바일 헤더의 메뉴 «열기». 기본 `'menu-2'`. */
+    menu?: string;
+    /** 모바일 헤더의 메뉴 «닫기». 기본 `'x'`. */
+    close?: string;
+    /** 사이드바 접기/펼치기 토글. 기본 `'layout-sidebar'`. */
+    sidebarToggle?: string;
+    /** 오버레이 닫기 버튼. 기본 `'x'`. */
+    overlayClose?: string;
+}
 /** 사이드바 레이아웃 컴포넌트의 요소(part) 타입 */
 export type SidebarParts = 'host' | 'mobile-header' | 'sidebar' | 'sidebar-header' | 'sidebar-main' | 'sidebar-footer' | 'main' | 'main-content' | 'progress' | 'overlay' | 'overlay-close';
 /** 사이드바 상태 타입 */
@@ -64,6 +92,11 @@ export interface SidebarLayoutConfig {
      * "아무것도 안 함" — Vue Router의 `scrollBehavior` 미지정 기본값과 동일하다(breaking 아님).
      */
     scrollBehavior?: (context: RouteContext, main: HTMLElement) => void;
+    /**
+     * 셸 chrome 아이콘의 출처·이름 오버라이드. 지정한 키만 기본값을 대체한다.
+     * 기본값은 전부 `internal` 번들이라 **네트워크를 타지 않는다** — `SidebarIconsConfig` 참조.
+     */
+    icons?: SidebarIconsConfig;
     /** 사이드바 스타일 맵 */
     styles?: StyleMap<SidebarParts>;
 }

package/package.json

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

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) |

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

@@ -27,6 +27,9 @@ interface SidebarLayoutConfig {
   /** Called on `route-done` (before focus moves to the container) with the new route's `RouteContext` and the scroll container itself — implement reset/save/restore here. Unset does nothing (same default as Vue Router's unset `scrollBehavior`). Also reachable outside the hook via the element's `.mainElement` accessor. */
   scrollBehavior?: (context: RouteContext, main: HTMLElement) => void;
 
+  /** Shell chrome icon source and names — `{ lib?, menu?, close?, sidebarToggle?, overlayClose? }`, only the keys you set replace the defaults. Defaults come from the bundled `internal` set, so the shell needs no network to draw its own toggles; give `lib` **and** the names to point it at your own set. */
+  icons?: SidebarIconsConfig;
+
   /** Per-part style overrides (CSS custom properties / inline styles). */
   styles?: StyleMap<SidebarParts>;
 }