@iyulab/modern-app 0.12.0 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Changelog
 
+## [0.14.0] - 2026-08-10
+
+### Added
+
+- **`SidebarButtonConfig`, `SidebarLinkConfig`, and `SidebarGroupConfig` accept `lib?: string`.**
+  When set, `icon` resolves through `@iyulab/components`' `IconRegistry.resolve(lib, name)`
+  (a named, registered icon library) instead of only the default URL-fetch fallback path.
+  Existing usage without `lib` is unaffected.
+
+### Fixed
+
+- **`SidebarLink` selected-state icon color no longer gets overridden by a consumer-set
+  icon tint.** Adds a `--link-icon-color` custom property and a `:host([selected]) u-icon`
+  rule so the selected state's contrast wins regardless of an inherited or inline icon
+  color.
+
+## [0.13.0] - 2026-08-08
+
+### Added
+
+- **`u-info-field` accepts `format` (`'number' | 'currency' | 'date'`) and `currency`.**
+  When set, the value renders through `@iyulab/components`' `formatNumber`/`formatCurrency`/
+  `formatDate` instead of a plain `String(value)`, and `format="number"`/`"currency"` implies
+  the existing `numeric` (right-aligned, tabular-nums) styling automatically. `currency` has
+  no default — omitting it while `format="currency"` degrades to plain number formatting
+  rather than throwing. Existing usage without `format` is unaffected.
+
+### Changed
+
+- **`@iyulab/components` dependency floor raised to `^1.27.0`** (the feature above needs
+  `formatNumber`/`formatCurrency`/`formatDate`, added in that release).
+
 ## [0.12.0] - 2026-08-07
 
 ### Added

package/dist/components/InfoField.d.ts

@@ -1,5 +1,6 @@
 import { StyledElement } from '../internals/StyledElement.js';
 type ElementParts = 'host' | 'label' | 'value';
+export type InfoFieldFormat = 'number' | 'currency' | 'date';
 /** 값이 "아직 없음"인가 — `0` 과 `false` 는 **값이다**. */
 export declare function isBlank(v: unknown): boolean;
 /**
@@ -16,6 +17,7 @@ export declare function isBlank(v: unknown): boolean;
  * ```html
  * <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>
  * ```
  */
 export declare class InfoField extends StyledElement<ElementParts> {
@@ -27,7 +29,8 @@ export declare class InfoField extends StyledElement<ElementParts> {
      * ⚠`0`·`false` 는 **대체되지 않는다** — 값이기 때문이다.
      * 속성(`value="…"`)과 프로퍼티(`.value=`) 둘 다 받는다 — HTML 속성은 항상 문자열이라
      * `type: String` 변환기가 붙어도 `.value=${order.quantity}` 같은 비-문자열 프로퍼티
-     * 바인딩은 그대로 통과한다(변환기는 속성 파싱에만 관여한다). 렌더는 항상 `String(value)`.
+     * 바인딩은 그대로 통과한다(변환기는 속성 파싱에만 관여한다). 렌더는 `format` 이 없으면
+     * 항상 `String(value)`.
      */
     value?: unknown;
     /** "아직 없음"을 나타낼 문구. */
@@ -35,9 +38,21 @@ export declare class InfoField extends StyledElement<ElementParts> {
     /**
      * 숫자 값 — 우정렬 + 고정폭 숫자(`tabular-nums`).
      * ★자릿수가 세로로 맞아야 크기 비교가 눈으로 된다. LOB 화면은 금액·수량이 절반이다.
+     * `format` 이 `'number'`/`'currency'` 면 이 정렬이 자동으로 함의된다 — 따로 켤 필요 없다.
      */
     numeric: boolean;
+    /**
+     * Renders the value through `@iyulab/components`' `formatNumber`/`formatCurrency`/
+     * `formatDate`. When unset (default), falls back to plain `String(value)` as before.
+     */
+    format?: InfoFieldFormat;
+    /**
+     * Currency code to use when `format="currency"` (e.g. `'KRW'`). **No default** — if
+     * omitted, degrades to plain number formatting without a currency symbol (does not throw).
+     */
+    currency?: string;
     private get hasSlotted();
+    private formatValue;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/components/InfoField.js

@@ -4,11 +4,12 @@ import { StyledElement as n } from "../internals/StyledElement.js";
 import { styles as r } from "./InfoField.styles.js";
 import { html as i } from "lit";
 import { customElement as a, property as o } from "lit/decorators.js";
+import { formatCurrency as s, formatDate as c, formatNumber as l } from "@iyulab/components";
 //#region src/components/InfoField.ts
-function s(e) {
+function u(e) {
 	return e == null || typeof e == "string" && e.trim() === "";
 }
-var c = class extends n {
+var d = class extends n {
 	constructor(...e) {
 		super(...e), this.label = "", this.blank = "—", this.numeric = !1;
 	}
@@ -18,16 +19,19 @@ var c = class extends n {
 	get hasSlotted() {
 		return this.childNodes.length > 0 && [...this.childNodes].some((e) => e.nodeType !== Node.TEXT_NODE || (e.textContent ?? "").trim() !== "");
 	}
+	formatValue() {
+		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 && s(this.value);
+		let e = !this.hasSlotted && u(this.value), t = this.numeric || this.format === "number" || this.format === "currency";
 		return i`
       <div class="label" part="label">${this.label}</div>
-      <div class="value ${this.numeric ? "numeric" : ""} ${e ? "blank" : ""}" part="value">
-        ${this.hasSlotted ? i`<slot></slot>` : e ? this.blank : String(this.value)}
+      <div class="value ${t ? "numeric" : ""} ${e ? "blank" : ""}" part="value">
+        ${this.hasSlotted ? i`<slot></slot>` : e ? this.blank : this.formatValue()}
       </div>
     `;
 	}
 };
-t([o({ type: String }), e("design:type", Object)], c.prototype, "label", void 0), t([o({ type: String }), e("design:type", Object)], c.prototype, "value", void 0), t([o({ type: String }), e("design:type", Object)], c.prototype, "blank", void 0), t([o({ type: Boolean }), e("design:type", Object)], c.prototype, "numeric", void 0), c = t([a("u-info-field")], c);
+t([o({ type: String }), e("design:type", Object)], d.prototype, "label", void 0), t([o({ type: String }), e("design:type", Object)], d.prototype, "value", void 0), t([o({ type: String }), e("design:type", Object)], d.prototype, "blank", void 0), t([o({ type: Boolean }), e("design:type", Object)], d.prototype, "numeric", void 0), t([o({ type: String }), e("design:type", Object)], d.prototype, "format", void 0), t([o({ type: String }), e("design:type", String)], d.prototype, "currency", void 0), d = t([a("u-info-field")], d);
 //#endregion
-export { c as InfoField, s as isBlank };
+export { d as InfoField, u as isBlank };

package/dist/components/SidebarButton.d.ts

@@ -7,6 +7,9 @@ type ElementParts = 'host' | 'base' | 'icon' | 'label';
 export interface SidebarButtonConfig extends SidebarPermissionGuard {
     type: 'button';
     icon?: string;
+    /** `icon`을 어느 등록 라이브러리에서 찾을지. 미지정 시 `u-icon`의 기본 URL 경로로
+     *  해석된다(`IconRegistry.register()`로 등록한 이름 있는 세트를 쓰려면 지정해야 함). */
+    lib?: string;
     label?: string | DirectiveResult;
     styles?: StyleMap<ElementParts>;
     onClick?: (event?: Event) => void;
@@ -20,6 +23,8 @@ export declare class SidebarButton extends StyledElement<ElementParts> {
     compact: boolean;
     /** 기본 u-icon 경로의 아이콘 이름 */
     icon?: string;
+    /** `icon`을 해석할 등록 라이브러리 이름 */
+    lib?: string;
     /** 버튼 텍스트 라벨 */
     label?: string | DirectiveResult;
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/SidebarButton.js

@@ -18,6 +18,7 @@ var c = class extends n {
 		return a`
       <button part="base" ?compact=${this.compact}>
         <u-icon part="icon"
+          .lib=${this.lib}
           .name=${this.icon}
           .fallback=${r}
         ></u-icon>
@@ -31,6 +32,6 @@ var c = class extends n {
 t([s({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Object)], c.prototype, "compact", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "icon", void 0), t([s({ type: String }), e("design:type", Object)], c.prototype, "label", void 0), c = t([o("u-sidebar-button")], c);
+}), e("design:type", Object)], c.prototype, "compact", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "icon", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "lib", void 0), t([s({ type: String }), e("design:type", Object)], c.prototype, "label", void 0), c = t([o("u-sidebar-button")], c);
 //#endregion
 export { c as SidebarButton };

package/dist/components/SidebarGroup.d.ts

@@ -9,6 +9,7 @@ export interface SidebarGroupConfig extends SidebarPermissionGuard {
     /** 기본 접힘 상태 */
     collapsed?: boolean;
     icon: string;
+    lib?: string;
     label: string | DirectiveResult;
     items: SidebarLinkConfig[];
     styles?: StyleMap<ElementParts>;
@@ -26,6 +27,8 @@ export declare class SidebarGroup extends StyledElement<ElementParts> {
     collapsed: boolean;
     /** 네비게이션 아이템 데이터 */
     icon?: string;
+    /** `icon`을 해석할 등록 라이브러리 이름 */
+    lib?: string;
     /** 네비게이션 아이템 데이터 */
     label?: string | DirectiveResult;
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/SidebarGroup.js

@@ -30,6 +30,7 @@ var l = class extends n {
             빠져 있었다.
         -->
         <u-icon class="icon" part="icon"
+          .lib=${this.lib}
           .name=${this.icon}
           .fallback=${r}
         ></u-icon>
@@ -59,6 +60,6 @@ t([c({
 }), e("design:type", Boolean)], l.prototype, "selected", void 0), t([c({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Boolean)], l.prototype, "collapsed", void 0), t([c({ type: String }), e("design:type", String)], l.prototype, "icon", void 0), t([c({ type: String }), e("design:type", Object)], l.prototype, "label", void 0), l = t([s("u-sidebar-group")], l);
+}), e("design:type", Boolean)], l.prototype, "collapsed", void 0), t([c({ type: String }), e("design:type", String)], l.prototype, "icon", void 0), t([c({ type: String }), e("design:type", String)], l.prototype, "lib", void 0), t([c({ type: String }), e("design:type", Object)], l.prototype, "label", void 0), l = t([s("u-sidebar-group")], l);
 //#endregion
 export { l as SidebarGroup };

package/dist/components/SidebarLink.d.ts

@@ -6,6 +6,7 @@ type ElementParts = 'host' | 'base' | 'icon' | 'label';
 export interface SidebarLinkConfig extends SidebarPermissionGuard {
     type: 'link';
     icon?: string;
+    lib?: string;
     label: string | DirectiveResult;
     href: string;
     pattern?: string | URLPattern;
@@ -42,6 +43,8 @@ export declare class SidebarLink extends StyledElement<ElementParts> {
     compact: boolean;
     /** 네비게이션 아이템 데이터 */
     icon?: string;
+    /** `icon`을 해석할 등록 라이브러리 이름 */
+    lib?: string;
     /** 네비게이션 아이템 데이터 */
     label?: string | DirectiveResult;
     /** 네비게이션 링크 */

package/dist/components/SidebarLink.js

@@ -23,6 +23,7 @@ var c = class extends n {
       >
         <div class="container" part="base" ?compact=${this.compact}>
           <u-icon part="icon"
+            .lib=${this.lib}
             .name=${this.icon}
             .fallback=${r}
           ></u-icon>
@@ -37,6 +38,6 @@ var c = class extends n {
 t([s({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Object)], c.prototype, "selected", void 0), t([s({ type: Boolean }), e("design:type", Object)], c.prototype, "compact", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "icon", void 0), t([s({ type: String }), e("design:type", Object)], c.prototype, "label", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "href", void 0), t([s({ type: String }), e("design:type", Object)], c.prototype, "pattern", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "navigate", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "target", void 0), c = t([o("u-sidebar-link")], c);
+}), e("design:type", Object)], c.prototype, "selected", void 0), t([s({ type: Boolean }), e("design:type", Object)], c.prototype, "compact", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "icon", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "lib", void 0), t([s({ type: String }), e("design:type", Object)], c.prototype, "label", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "href", void 0), t([s({ type: String }), e("design:type", Object)], c.prototype, "pattern", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "navigate", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "target", void 0), c = t([o("u-sidebar-link")], c);
 //#endregion
 export { c as SidebarLink };

package/dist/components/SidebarLink.styles.js

@@ -46,9 +46,14 @@ var t = e`
 
   u-icon {
     flex-shrink: 0;
-    color: inherit;
+    color: var(--link-icon-color, inherit);
     font-size: 20px;
   }
+  /* Selected always wins over any consumer-supplied --link-icon-color — a
+   * high-contrast icon on the active background matters more than a brand tint. */
+  :host([selected]) u-icon {
+    color: var(--app-sidebar-active-fg, var(--u-txt-color-inverse, #FFFFFF));
+  }
 
   /*
    * ★내비 항목은 «대상의 짧은 이름» = label 단이다(용도 배정 — DL-157-4).

package/dist/layouts/SidebarLayout.js

@@ -157,6 +157,7 @@ var g = class extends i {
         <u-sidebar-button
           ?compact=${this.state === "slim"}
           .icon="${e.icon}"
+          .lib="${e.lib}"
           .label="${e.label}"
           .styles="${e.styles}"
           @click="${e.onClick}"
@@ -169,6 +170,7 @@ var g = class extends i {
           ?compact=${this.state === "slim"}
           ?selected=${t}
           .icon="${e.icon}"
+          .lib="${e.lib}"
           .label="${e.label}"
           .href="${e.href}"
           .pattern="${e.pattern}"
@@ -195,6 +197,7 @@ var g = class extends i {
           ?selected=${t}
           ?collapsed="${e.collapsed ?? !1}"
           .icon="${e.icon}"
+          .lib="${e.lib}"
           .label="${e.label}"
           .styles="${e.styles}">
           ${p(e.items, (e, t) => t, (e) => this.renderItem(e))}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -53,7 +53,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@iyulab/components": "^1.24.0",
+    "@iyulab/components": "^1.27.0",
     "@iyulab/router": "^0.11.0",
     "i18next": "^26.3.6",
     "lit": "^3.3.3"

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

@@ -34,10 +34,16 @@ and those are different states of the business. So the component owns the rule.
 | `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 |
+| `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 |
 
 ⚠ `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.
 
+```html
+<u-info-field label="Total" format="currency" currency="KRW" .value=${order.total}></u-info-field>
+```
+
 ## CSS Parts
 
 | Part | Description |

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

@@ -39,6 +39,7 @@ interface SidebarLinkConfig {
   label: string | DirectiveResult;
   href: string;
   icon?: string;
+  lib?: string;
   /** Override the URL matching pattern. Accepts a string or URLPattern. */
   pattern?: string | URLPattern;
   /** Let the browser navigate instead of the router. For same-origin, non-SPA paths. */
@@ -81,6 +82,7 @@ Collapsible group that contains links.
 interface SidebarGroupConfig {
   type: 'group';
   icon: string;
+  lib?: string;
   label: string | DirectiveResult;
   items: SidebarLinkConfig[];
   /** Start collapsed. Default: true */
@@ -143,6 +145,7 @@ Action button — triggers a callback instead of navigating.
 interface SidebarButtonConfig {
   type: 'button';
   icon?: string;
+  lib?: string;
   label: string | DirectiveResult;
   onClick: () => void;
   styles?: StyleMap<string>;