@iyulab/modern-app 0.17.0 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [0.18.0] - 2026-08-17
+
+### Added
+
+- **`SidebarLink` now sets `aria-current="page"` on its inner `<u-link>` when `selected` is
+  true.** Previously `selected` only drove visual emphasis (a host attribute for CSS) — a
+  screen-reader user had no way to tell which item was the current page.
+- **`SidebarLayoutConfig.mainAriaLabel?: string`.** When set, it's reflected as `aria-label`
+  on the sidebar's main `<nav>` landmark. That `<nav>` lives inside `SidebarLayout`'s shadow
+  root, so a consumer had no way to name it from the outside. Unset behaves exactly as
+  before (no landmark name) — not a breaking change.
+- **`InfoField`'s `tone` now colors the value text itself, not just the trend indicator.**
+  Previously `.trend.tone-*` was the only CSS surface for `tone`, so a static figure shown
+  without a `trend` (e.g. a balance due) couldn't be toned at all. `trend`'s existing
+  behavior is unchanged; this only widens where `tone` is visible.
+- **`ScreenObserver` is now exported from both the main entry and `/react`.** `SidebarLayout`'s
+  responsive state (large→slim, medium→modal, small→mobile) depends entirely on the
+  `screen-resize` event this class dispatches; `app.load()` instantiates it internally, but a
+  consumer mounting `SidebarLayout` standalone through `/react` (without `app.load()`) had no
+  public way to drive that behavior.
+
 ## [0.17.0] - 2026-08-11
 
 ### Added

package/dist/_virtual/{_@oxc-project_runtime@0.143.0 → _@oxc-project_runtime@0.144.0}/helpers/esm/decorate.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.143.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.144.0/helpers/esm/decorate.js
 function e(e, t, n, r) {
 	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
 	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);

package/dist/_virtual/{_@oxc-project_runtime@0.143.0 → _@oxc-project_runtime@0.144.0}/helpers/esm/decorateMetadata.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.143.0/helpers/esm/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.144.0/helpers/esm/decorateMetadata.js
 function e(e, t) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
 }

package/dist/components/ActionBar.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { slotHasContent as r } from "../internals/slotted.js";
 import { styles as i } from "./ActionBar.styles.js";

package/dist/components/EmptyState.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { getLocaleStrings as r } from "../internals/locale.js";
 import { slotHasContent as i } from "../internals/slotted.js";

package/dist/components/GroupBox.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { slotHasContent as r } from "../internals/slotted.js";
 import { styles as i } from "./GroupBox.styles.js";

package/dist/components/InfoField.d.ts

@@ -77,6 +77,10 @@ export declare class InfoField extends StyledElement<ElementParts> {
      * Explicit tone override. When unset, resolves from `trend` (`up→positive`, `down→negative`,
      * `flat`/unset→`neutral`). **Always wins over inference** — some metrics invert the usual
      * direction-to-sentiment mapping (e.g. a falling "open tickets" count is `positive`).
+     *
+     * Colors the value text itself, independent of `trend` — a static "balance due" figure can be
+     * toned `negative` without a trend arrow. `neutral` has no visual effect on the value text
+     * (it already renders at full strength; only `positive`/`negative` stand out from it).
      */
     tone?: InfoFieldTone;
     private get hasSlotted();

package/dist/components/InfoField.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { styles as r } from "./InfoField.styles.js";
 import { html as i } from "lit";
@@ -29,7 +29,7 @@ var f = class extends n {
 		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" ? "▼" : "";
 		return i`
       <div class="label" part="label">${this.label}</div>
-      <div class="value ${t ? "numeric" : ""} ${e ? "blank" : ""}" part="value">
+      <div class="value ${t ? "numeric" : ""} ${e ? "blank" : ""} tone-${r}" part="value">
         ${this.hasSlotted ? i`<slot></slot>` : e ? this.blank : this.formatValue()}
       </div>
       ${n ? i`

package/dist/components/InfoField.styles.js

@@ -46,6 +46,17 @@ var t = e`
     font-weight: var(--u-text-body-weight, 400);
   }
 
+  /* tone은 trend 유무와 무관하게 값 텍스트 자체에도 적용된다(neutral은 무규칙 — 기본
+     .value 색과 시각적으로 같은 자리라 별도 규칙을 두면 오히려 "옅어 보이는" 부작용이
+     생긴다, .trend.tone-neutral과 달리 .value는 이미 강한 색이 기본값이다). */
+  .value.tone-positive {
+    color: var(--u-success-color-strong, #1B5E20);
+  }
+
+  .value.tone-negative {
+    color: var(--u-danger-color-strong, #C62828);
+  }
+
   .trend {
     font-size: var(--u-text-caption-size, 12px);
     margin-top: var(--u-space-3xs, 2px);

package/dist/components/InfoSection.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { styles as r } from "./InfoSection.styles.js";
 import { html as i } from "lit";

package/dist/components/MasterDetailLayout.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { getLocaleStrings as r } from "../internals/locale.js";
 import { slotHasContent as i } from "../internals/slotted.js";

package/dist/components/PageHeader.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { getLocaleStrings as r } from "../internals/locale.js";
 import { slotHasContent as i } from "../internals/slotted.js";

package/dist/components/SidebarButton.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { DEFAULT_NAV_ICON as r } from "../internals/nav-icon.js";
 import { styles as i } from "./SidebarButton.styles.js";

package/dist/components/SidebarGroup.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { DEFAULT_NAV_ICON as r } from "../internals/nav-icon.js";
 import { SidebarLink as i } from "./SidebarLink.js";

package/dist/components/SidebarLink.d.ts

@@ -37,7 +37,7 @@ export interface SidebarLinkConfig extends SidebarPermissionGuard {
  */
 export declare class SidebarLink extends StyledElement<ElementParts> {
     static styles: import('lit').CSSResultGroup[];
-    /** selected 상태 */
+    /** selected 상태. `true`면 내부 `<u-link>`에 `aria-current="page"`도 함께 세팅한다. */
     selected: boolean;
     /** 콤팩트 모드 여부 */
     compact: boolean;

package/dist/components/SidebarLink.js

@@ -1,13 +1,13 @@
-import e from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { DEFAULT_NAV_ICON as r } from "../internals/nav-icon.js";
 import { styles as i } from "./SidebarLink.styles.js";
-import { html as a } from "lit";
-import { customElement as o, property as s } from "lit/decorators.js";
+import { html as a, nothing as o } from "lit";
+import { customElement as s, property as c } from "lit/decorators.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";
 //#region src/components/SidebarLink.ts
-var c = class extends n {
+var l = class extends n {
 	constructor(...e) {
 		super(...e), this.selected = !1, this.compact = !1;
 	}
@@ -20,6 +20,7 @@ var c = class extends n {
         .href=${this.href || "#"}
         .navigate=${this.navigate}
         .target=${this.target}
+        aria-current=${this.selected ? "page" : o}
       >
         <div class="container" part="base" ?compact=${this.compact}>
           <u-icon part="icon"
@@ -35,9 +36,9 @@ var c = class extends n {
     `;
 	}
 };
-t([s({
+t([c({
 	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", 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);
+}), e("design:type", Object)], l.prototype, "selected", void 0), t([c({ type: Boolean }), e("design:type", Object)], l.prototype, "compact", 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), t([c({ type: String }), e("design:type", String)], l.prototype, "href", void 0), t([c({ type: String }), e("design:type", Object)], l.prototype, "pattern", void 0), t([c({ type: String }), e("design:type", String)], l.prototype, "navigate", void 0), t([c({ type: String }), e("design:type", String)], l.prototype, "target", void 0), l = t([s("u-sidebar-link")], l);
 //#endregion
-export { c as SidebarLink };
+export { l as SidebarLink };

package/dist/components/SidebarSection.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { styles as r } from "./SidebarSection.styles.js";
 import { html as i } from "lit";

package/dist/components/Wizard.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { getLocaleStrings as r } from "../internals/locale.js";
 import { styles as i } from "./Wizard.styles.js";

package/dist/index.d.ts

@@ -15,5 +15,7 @@ export { Wizard } from './components/Wizard.js';
 export type { WizardStep, WizardStepState, WizardStepChangeDetail } from './components/Wizard.js';
 export { registerLocale, setDefaultLocale, getLocaleStrings, getDefaultLocale, } from './internals/locale.js';
 export type { ModernAppLocaleStrings } from './internals/locale.js';
+export { ScreenObserver } from './internals/ScreenObserver.js';
+export type { ScreenSize, ScreenObserverConfig, ScreenResizeEvent } from './internals/ScreenObserver.js';
 export { app };
 export default app;

package/dist/index.js

@@ -1,15 +1,16 @@
-import { app as e } from "./App.js";
-import { filterSidebarItems as t } from "./layouts/filterSidebarItems.js";
-import { getDefaultLocale as n, getLocaleStrings as r, registerLocale as i, setDefaultLocale as a } from "./internals/locale.js";
-import { PageHeader as o } from "./components/PageHeader.js";
-import { GroupBox as s } from "./components/GroupBox.js";
-import { InfoSection as c } from "./components/InfoSection.js";
-import { InfoField as l, isBlank as u } from "./components/InfoField.js";
-import { EmptyState as d } from "./components/EmptyState.js";
-import { ActionBar as f } from "./components/ActionBar.js";
-import { MasterDetailLayout as p } from "./components/MasterDetailLayout.js";
-import { Wizard as m } from "./components/Wizard.js";
+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";
 //#region src/index.ts
-var h = e;
+var g = t;
 //#endregion
-export { f as ActionBar, d as EmptyState, s as GroupBox, l as InfoField, c as InfoSection, p as MasterDetailLayout, o as PageHeader, m as Wizard, e as app, h as default, t as filterSidebarItems, n as getDefaultLocale, r as getLocaleStrings, u as isBlank, i as registerLocale, a as setDefaultLocale };
+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, g as default, n as filterSidebarItems, r as getDefaultLocale, i as getLocaleStrings, d as isBlank, a as registerLocale, o as setDefaultLocale };

package/dist/internals/StyledElement.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
 import { property as n } from "lit/decorators.js";
 import { UElement as r } from "@iyulab/components/dist/components/UElement.js";
 //#region src/internals/StyledElement.ts

package/dist/layouts/SidebarLayout.d.ts

@@ -15,7 +15,7 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues): void;
-    render(): import('lit-html').TemplateResult<1> | typeof nothing;
+    render(): typeof nothing | import('lit-html').TemplateResult<1>;
     /** 사이드바 아이템 렌더링 */
     private renderItem;
     /** 현재 경로와 패턴 매칭 여부 확인 */

package/dist/layouts/SidebarLayout.js

@@ -1,7 +1,7 @@
 import { app as e } from "../App.js";
 import { filterSidebarItems as t } from "./filterSidebarItems.js";
-import n from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
-import r from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
+import r from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
 import { StyledElement as i } from "../internals/StyledElement.js";
 import "../components/SidebarSection.js";
 import "../components/SidebarLink.js";
@@ -124,7 +124,8 @@ var g = class extends i {
         </div>
 
         <!-- Sidebar Navigation Menu -->
-        <nav class="sidebar-main" part="sidebar-main" scrollable>
+        <nav class="sidebar-main" part="sidebar-main" scrollable
+          aria-label=${this.config.mainAriaLabel ?? s}>
           ${p(t(this.config.main ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
         </nav>
 

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

@@ -42,6 +42,13 @@ export interface SidebarLayoutConfig {
     main?: SidebarItem[];
     /** 하단(footer)에 고정해서 렌더할 항목들 */
     footer?: SidebarItem[];
+    /**
+     * 메인 내비게이션(`<nav class="sidebar-main">`)의 접근 가능한 이름. 지정하면
+     * `aria-label`로 반영돼 스크린리더가 랜드마크를 "주 메뉴" 같은 이름으로 발표한다.
+     * `title`은 사이드바 헤더에 표시되는 브랜드 텍스트일 뿐 이 `<nav>`와 연결되지 않는다 —
+     * 별개 값이다. 미지정 시 종전과 동일하게 랜드마크 이름이 없다(breaking 아님).
+     */
+    mainAriaLabel?: string;
     /**
      * 메뉴 항목 권한 필터 판정. 지정하면 `requirePermission`/`requireAnyPermission` 를 만족하지
      * 않는 항목을 숨기고, 항목이 모두 걸러진 section/group 은 통째로 숨긴다.

package/dist/react.d.ts

@@ -2,6 +2,8 @@ import { default as React } from 'react';
 import { EventName } from '@lit/react';
 import { SidebarLayout as SidebarLayoutElement } from './layouts/SidebarLayout.js';
 import { Wizard as WizardElement, WizardStepChangeDetail } from './components/Wizard.js';
+export { ScreenObserver } from './internals/ScreenObserver.js';
+export type { ScreenSize, ScreenObserverConfig, ScreenResizeEvent } from './internals/ScreenObserver.js';
 /**
  * React wrapper for `<u-sidebar-layout>`. `config` is an `@property({ type: Object })` —
  * a raw custom element handles that correctly under React 19 (property assignment) but not

package/dist/react.js

@@ -1,18 +1,19 @@
-import { Wizard as e } from "./components/Wizard.js";
-import { SidebarLayout as t } from "./layouts/SidebarLayout.js";
-import n from "react";
-import { createComponent as r } from "@lit/react";
+import { ScreenObserver as e } from "./internals/ScreenObserver.js";
+import { Wizard as t } from "./components/Wizard.js";
+import { SidebarLayout as n } from "./layouts/SidebarLayout.js";
+import r from "react";
+import { createComponent as i } from "@lit/react";
 //#region src/react.ts
-var i = r({
-	react: n,
+var a = i({
+	react: r,
 	tagName: "u-sidebar-layout",
-	elementClass: t,
+	elementClass: n,
 	events: {}
-}), a = r({
-	react: n,
+}), o = i({
+	react: r,
 	tagName: "u-wizard",
-	elementClass: e,
+	elementClass: t,
 	events: { onStepChange: "step-change" }
 });
 //#endregion
-export { i as SidebarLayout, a as Wizard };
+export { e as ScreenObserver, a as SidebarLayout, o as Wizard };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "keywords": [
     "iyulab",
     "web-framework",

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

@@ -39,7 +39,7 @@ and those are different states of the business. So the component owns the rule.
 | `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 |
+| `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.