@iyulab/modern-app 0.55.1 → 0.56.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [0.56.0] - 2026-10-17
+
+### Added
+
+- `u-info-field` KPI tiles: `appearance="tile"` (a bordered surface — border, radius, padding, surface colour; with a
+  `tone` the whole tile takes that tone's soft face and border), `size="xl"` (the figure read at a glance — the
+  `display` step, or `--info-field-xl-size`), `blank-reason` (`—` stays on the value line at figure size, the reason
+  goes on the line under it) and a `trend-icon` slot at the start of the trend line. `tone` now reflects to the
+  attribute.
+- Sidebar `type: 'menu'`: `avatar` (`{ src, initials }`, drawn in place of the icon) and `description` (a second,
+  weaker line) — the account block at the foot of the sidebar. The trigger's accessible name is both lines; a slim
+  sidebar shows the avatar alone. `SidebarAvatar` is exported.
+
+## [0.55.2] - 2026-10-17
+
+### Fixed
+
+- `u-master-detail-layout` overlay mode in a right-to-left document: the covering detail pane sat outside the layout
+  (0.55.1 placed it with a physical left margin). It now covers the list in both directions.
+- `u-master-detail-layout` overlay mode: something in the list with its own `z-index` — a table's sticky header row —
+  was painted over the covering detail pane. While covered, the list is its own stacking context.
+
 ## [0.55.1] - 2026-10-17
 
 ### Fixed

package/dist/components/InfoField.d.ts

@@ -2,7 +2,8 @@ import { PropertyValues } from 'lit';
 import { StyledElement } from '../internals/StyledElement.js';
 type ElementParts = 'host' | 'label' | 'value' | 'unit' | 'trend';
 export type InfoFieldFormat = 'number' | 'currency' | 'date';
-export type InfoFieldSize = 'default' | 'lg';
+export type InfoFieldSize = 'default' | 'lg' | 'xl';
+export type InfoFieldAppearance = 'plain' | 'tile';
 export type InfoFieldTrend = 'up' | 'down' | 'flat';
 export type InfoFieldTone = 'positive' | 'negative' | 'warning' | 'neutral';
 /** 값이 "아직 없음"인가 — `0` 과 `false` 는 **값이다**. */
@@ -23,7 +24,17 @@ export declare function isBlank(v: unknown): boolean;
  * <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>
+ * <u-info-field appearance="tile" size="xl" label="MTBF" .value=${412} unit="h" tone="warning" .trendLabel=${'목표 500h 미달'}></u-info-field>
  * ```
+ *
+ * @slot - 값(문자열 `value` 대신 — 슬롯이 이긴다)
+ * @slot trend-icon - 추세 줄 앞의 상태 표시(예: 주의 아이콘). 추세 줄이 있을 때(`trend` · `trendLabel`) 그린다.
+ * @csspart label - 라벨
+ * @csspart value - 값
+ * @csspart unit - 단위
+ * @csspart trend - 추세 줄
+ * @csspart description - 값 아래 보조 줄(값이 비고 `blankReason` 이 있으면 그 사유)
+ * @cssprop --info-field-xl-size - `size="xl"` 값의 글자 크기(기본 `--u-text-display-size`)
  */
 export declare class InfoField extends StyledElement<ElementParts> {
     static styles: import('lit').CSSResultGroup[];
@@ -68,7 +79,8 @@ export declare class InfoField extends StyledElement<ElementParts> {
     /**
      * 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
-     * composed inside `u-info-section`. Reflects to the `size` attribute so
+     * composed inside `u-info-section`. `'xl'` is the figure read at a glance (the `display`
+     * step, or `--info-field-xl-size`). Reflects to the `size` attribute so
      * `:host([size="lg"])` styling works.
      */
     size: InfoFieldSize;
@@ -97,6 +109,18 @@ export declare class InfoField extends StyledElement<ElementParts> {
      * `--u-success|danger|warning-color-strong`.
      */
     tone?: InfoFieldTone;
+    /**
+     * `tile` — a bordered surface (border · radius · padding · surface colour) for a grid of KPI tiles; with a `tone`
+     * of `warning` / `negative` / `positive` the whole tile takes that tone's soft face and border. `plain` (default) is
+     * the bare label-value pair.
+     */
+    appearance: InfoFieldAppearance;
+    /**
+     * Why the value is blank — shown on the line under the value (where the description goes) while the value line keeps
+     * the `blank` placeholder at full size. Without it a blank `lg`/`xl` value shrinks to body text, since the placeholder
+     * may itself be a sentence.
+     */
+    blankReason?: string;
     /**
      * 값 아래의 보조 줄 — 그 값의 근거나 다른 단위의 같은 양(«1,764,211 units» · «Settled ₩743,188,120»).
      * 추세 문구는 `trendLabel` 이다(방향과 색을 갖는다).

package/dist/components/InfoField.js

@@ -14,7 +14,7 @@ function d(e) {
 }
 var f = class extends n {
 	constructor(...e) {
-		super(...e), this.label = "", this.blank = "—", this.numeric = !1, this.size = "default", this.namedWidgets = /* @__PURE__ */ new WeakMap();
+		super(...e), this.label = "", this.blank = "—", this.numeric = !1, this.size = "default", this.appearance = "plain", this.namedWidgets = /* @__PURE__ */ new WeakMap();
 	}
 	static {
 		this.styles = [super.styles, r];
@@ -33,28 +33,37 @@ var f = class extends n {
 		super.updated(e), e.has("label") && this.nameSlottedWidgets();
 	}
 	get hasSlotted() {
-		return this.childNodes.length > 0 && [...this.childNodes].some((e) => e.nodeType !== Node.TEXT_NODE || (e.textContent ?? "").trim() !== "");
+		return [...this.childNodes].some((e) => e.nodeType === Node.ELEMENT_NODE ? !e.hasAttribute("slot") : 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 && 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>` : "";
+		let e = !this.hasSlotted && d(this.value), t = e && this.blankReason ? this.blankReason : void 0, n = this.numeric || this.format === "number" || this.format === "currency", r = this.trend !== void 0 || this.trendLabel !== void 0, a = this.tone ?? u(this.trend), o = this.trend === "up" ? "▲" : this.trend === "down" ? "▼" : "", s = !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 @slotchange=${() => void this.nameSlottedWidgets()}></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 ?? ""}
+      <div class="value ${n ? "numeric" : ""} ${e ? "blank" : ""} ${t ? "reasoned" : ""} tone-${a}" part="value">${this.hasSlotted ? i`<slot @slotchange=${() => void this.nameSlottedWidgets()}></slot>` : e ? this.blank : this.formatValue()}${s}</div>
+      ${r ? i`
+        <div class="trend tone-${a}" part="trend">
+          <slot name="trend-icon"></slot>${o ? i`<span aria-hidden="true">${o}</span> ` : ""}${this.trendLabel ?? ""}
         </div>
       ` : ""}
-      ${this.description ? i`<div class="description" part="description">${this.description}</div>` : ""}
+      ${t ?? this.description ? i`<div class="description" part="description">${t ?? this.description}</div>` : ""}
     `;
 	}
 };
 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), t([o({ type: String }), e("design:type", String)], f.prototype, "description", void 0), f = t([a("u-info-field")], f);
+}), 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,
+	reflect: !0
+}), e("design:type", Object)], f.prototype, "tone", void 0), t([o({
+	type: String,
+	reflect: !0
+}), e("design:type", Object)], f.prototype, "appearance", void 0), t([o({
+	type: String,
+	attribute: "blank-reason"
+}), e("design:type", String)], f.prototype, "blankReason", void 0), t([o({ type: String }), e("design:type", String)], f.prototype, "description", void 0), f = t([a("u-info-field")], f);
 //#endregion
 export { f as InfoField, d as isBlank };

package/dist/components/InfoField.styles.js

@@ -36,6 +36,39 @@ var t = e`
   }
 
   
+  :host([size="xl"]) .value {
+    font-size: var(--info-field-xl-size, var(--u-text-display-size, 26px));
+    font-weight: var(--u-text-display-weight, 700);
+    line-height: var(--u-text-display-leading, 1.4);
+    letter-spacing: var(--u-text-display-tracking, -0.02em);
+  }
+
+  
+  :host([appearance="tile"]) {
+    padding: var(--u-space-md, 12px);
+    border: 1px solid var(--u-border-color, #E0E0E0);
+    border-radius: var(--u-radius-lg, 6px);
+    background-color: var(--u-bg-color, #FFFFFF);
+    box-sizing: border-box;
+  }
+  
+  :host([appearance="tile"][tone="warning"]) {
+    background-color: var(--u-warning-bg-color, #FFF59D);
+    border-color: var(--u-warning-color-weak, #FFEB3B);
+  }
+  :host([appearance="tile"][tone="negative"]) {
+    background-color: var(--u-danger-bg-color, #FFEBEE);
+    border-color: var(--u-danger-color-weak, #F44336);
+  }
+  :host([appearance="tile"][tone="positive"]) {
+    background-color: var(--u-success-bg-color, #E8F5E9);
+    border-color: var(--u-success-color-weak, #4CAF50);
+  }
+  @media (forced-colors: active) {
+    :host([appearance="tile"]) { border-color: CanvasText; }
+  }
+
+  
 
 
   .value.blank {
@@ -52,6 +85,18 @@ var t = e`
     font-weight: var(--u-text-body-weight, 400);
     min-height: calc(var(--u-text-title-size, 20px) * var(--u-text-body-leading, 1.6));
   }
+  :host([size="xl"]) .value.blank {
+    font-size: var(--u-text-body-size, 14px);
+    font-weight: var(--u-text-body-weight, 400);
+    min-height: calc(var(--info-field-xl-size, var(--u-text-display-size, 26px)) * var(--u-text-display-leading, 1.4));
+  }
+  
+  :host([size="lg"]) .value.blank.reasoned {
+    font-size: var(--u-text-title-size, 20px);
+  }
+  :host([size="xl"]) .value.blank.reasoned {
+    font-size: var(--info-field-xl-size, var(--u-text-display-size, 26px));
+  }
 
   
 

package/dist/components/MasterDetailLayout.styles.js

@@ -33,6 +33,12 @@ var t = e`
   :host([overlay]) .master {
     flex: 1 1 auto;
   }
+  
+
+
+  :host([overlay]) .master.covered {
+    isolation: isolate;
+  }
 
   .divider {
     flex: 0 0 auto;
@@ -84,7 +90,7 @@ var t = e`
 
   :host([overlay]) .detail {
     flex: 0 0 100%;
-    margin-left: -100%;
+    margin-inline-start: -100%;
     height: var(--_detail-max, 100%);
     min-height: 0;
     max-height: none;
@@ -146,7 +152,7 @@ var t = e`
       display: none;
     }
     :host([overlay]) .detail {
-      margin-left: 0;
+      margin-inline-start: 0;
       height: auto;
       box-shadow: none;
     }

package/dist/components/SidebarButton.d.ts

@@ -2,7 +2,12 @@ import { DirectiveResult } from 'lit/directive.js';
 import { StyledElement, StyleMap } from '../internals/StyledElement.js';
 import { SidebarPermissionGuard } from '../layouts/SidebarPermission.js';
 /** 버튼 항목 부분 */
-type ElementParts = 'host' | 'base' | 'icon' | 'label';
+type ElementParts = 'host' | 'base' | 'icon' | 'avatar' | 'label' | 'description';
+/** 사이드바 버튼의 정체 표시 — 사진, 없으면 머리글자(두 글자까지). */
+export interface SidebarAvatar {
+    src?: string;
+    initials?: string;
+}
 /** 버튼 항목 구성 */
 export interface SidebarButtonConfig extends SidebarPermissionGuard {
     type: 'button';
@@ -40,6 +45,13 @@ export declare class SidebarButton extends StyledElement<ElementParts> {
     haspopup?: 'menu';
     /** 팝업이 열려 있는가 — `haspopup` 과 함께 `aria-expanded` 로 간다. 팝업이 없는 버튼에는 붙이지 않는다. */
     expanded: boolean;
+    /**
+     * 아이콘 대신 그리는 정체 표시(셸의 계정 메뉴) — 사진(`src`), 없으면 머리글자(`initials`). 꾸밈이라 보조기기에서 숨긴다:
+     * 이름은 라벨과 `description` 이 준다.
+     */
+    avatar?: SidebarAvatar;
+    /** 라벨 아래 둘째 줄(역할 · 소속) — 더 작고 약한 글자. 접힌(slim) 사이드바에서는 라벨과 함께 숨고 이름에는 남는다. */
+    description?: string | DirectiveResult;
     /** 포커스는 안쪽 `<button>` 으로 — 호스트는 포커스를 받지 않는다(팝업을 닫을 때 셸이 이것으로 되돌린다). */
     focus(options?: FocusOptions): void;
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/SidebarButton.js

@@ -7,6 +7,7 @@ import { html as a } from "lit";
 import { customElement as o, property as s } from "lit/decorators.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";
 import { ifDefined as c } from "lit/directives/if-defined.js";
+import "@iyulab/components/dist/components/avatar/UAvatar.js";
 //#region src/components/SidebarButton.ts
 var l = class extends n {
 	constructor(...e) {
@@ -24,13 +25,13 @@ var l = class extends n {
         aria-haspopup=${c(this.haspopup)}
         aria-expanded=${c(this.haspopup ? String(this.expanded) : void 0)}
         aria-pressed=${c(this.pressed === void 0 ? void 0 : String(this.pressed))}>
-        <u-icon part="icon"
-          .lib=${this.lib}
-          .name=${this.icon}
-          .fallback=${r}
-        ></u-icon>
+        ${this.avatar ? a`<u-avatar part="avatar" aria-hidden="true" .image=${this.avatar.src} .label=${this.avatar.initials}></u-avatar>` : a`<u-icon part="icon"
+              .lib=${this.lib}
+              .name=${this.icon}
+              .fallback=${r}
+            ></u-icon>`}
         <span part="label" ?compact=${this.compact}>
-          ${this.label}
+          ${this.description ? a`<span class="line">${this.label}</span><span class="description" part="description">${this.description}</span>` : this.label}
         </span>
       </button>
     `;
@@ -42,6 +43,6 @@ t([s({
 }), e("design:type", Object)], l.prototype, "compact", void 0), t([s({ type: String }), e("design:type", String)], l.prototype, "icon", void 0), t([s({ type: String }), e("design:type", String)], l.prototype, "lib", void 0), t([s({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Boolean)], l.prototype, "pressed", void 0), t([s({ type: String }), e("design:type", Object)], l.prototype, "label", void 0), t([s({ type: String }), e("design:type", String)], l.prototype, "haspopup", void 0), t([s({ type: Boolean }), e("design:type", Object)], l.prototype, "expanded", void 0), l = t([o("u-sidebar-button")], l);
+}), e("design:type", Boolean)], l.prototype, "pressed", void 0), t([s({ type: String }), e("design:type", Object)], l.prototype, "label", void 0), t([s({ type: String }), e("design:type", String)], l.prototype, "haspopup", void 0), t([s({ type: Boolean }), e("design:type", Object)], l.prototype, "expanded", void 0), t([s({ type: Object }), e("design:type", Object)], l.prototype, "avatar", void 0), t([s({ type: String }), e("design:type", Object)], l.prototype, "description", void 0), l = t([o("u-sidebar-button")], l);
 //#endregion
 export { l as SidebarButton };

package/dist/components/SidebarButton.styles.js

@@ -68,6 +68,28 @@ var t = e`
   }
 
   
+  u-avatar {
+    flex-shrink: 0;
+    width: calc(var(--app-sidebar-icon-size, 20px) + 8px);
+    height: calc(var(--app-sidebar-icon-size, 20px) + 8px);
+    font-size: var(--u-text-caption-size, 12px);
+  }
+
+  
+  .line,
+  .description {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .description {
+    font-size: var(--u-text-caption-size, 12px);
+    font-weight: var(--u-text-body-weight, 400);
+    line-height: var(--u-text-caption-leading, 1.5);
+    color: var(--u-txt-color-weak, #616161);
+  }
+
+  
 
 
 

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export type { RouteConfig, RouteContext, FallbackRouteConfig, RouteLeaveContext
 export { RouteError, NotFoundError, AccessDeniedError, ContentLoadError, ContentRenderError, OutletMissingError, } from '@iyulab/router';
 export { defaultFallback } from './defaultFallback.js';
 export type { SidebarIconsConfig, SidebarLayoutConfig, SidebarItem, SidebarLogoConfig, SidebarLinkConfig, SidebarSectionConfig, SidebarGroupConfig, SidebarButtonConfig, SidebarMenuConfig, SidebarMenuItemConfig, SidebarHtmlConfig, SidebarState, } from './layouts/SidebarLayout.types';
+export type { SidebarAvatar } from './components/SidebarButton.js';
 export type { SidebarLayoutEventMap } from './layouts/SidebarLayout.js';
 export { filterSidebarItems } from './layouts/filterSidebarItems.js';
 export { PageHeader } from './components/PageHeader.js';

package/dist/layouts/SidebarLayout.js

@@ -288,6 +288,8 @@ var M = class extends n {
         .icon="${e.icon}"
         .lib="${e.lib}"
         .label="${e.label}"
+        .avatar=${e.avatar}
+        .description=${e.description}
       ></u-sidebar-button>
       <u-popover for="#${n}" placement=${r} autofocus
         @show=${() => {

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

@@ -5,7 +5,7 @@ import { StyleMap } from '../internals/StyledElement';
 import { SidebarLinkConfig } from '../components/SidebarLink';
 import { SidebarSectionConfig } from '../components/SidebarSection';
 import { SidebarGroupConfig } from '../components/SidebarGroup';
-import { SidebarButtonConfig } from '../components/SidebarButton';
+import { SidebarButtonConfig, SidebarAvatar } from '../components/SidebarButton';
 import { SidebarPermissionGuard } from './SidebarPermission';
 export type { SidebarPermissionGuard } from './SidebarPermission';
 export type { SidebarLinkConfig } from '../components/SidebarLink';
@@ -82,6 +82,14 @@ export interface SidebarMenuConfig extends SidebarPermissionGuard {
     label: string | DirectiveResult;
     icon?: string;
     lib?: string;
+    /**
+     * Who the menu belongs to (an account menu at the foot of the sidebar) — drawn in place of the icon: a picture
+     * (`src`), else up to two `initials`. Decorative: the name comes from `label` and `description`. A slim sidebar shows
+     * the avatar alone.
+     */
+    avatar?: SidebarAvatar;
+    /** A second, weaker line under the label — a role, an organisation. Part of the trigger's accessible name. */
+    description?: string | DirectiveResult;
     items: SidebarMenuItemConfig[];
 }
 /** union: section | group | link | button | menu | html */

package/dist/react.d.ts

@@ -5,7 +5,7 @@ import { Wizard as WizardElement, WizardEventMap } from './components/Wizard.js'
 import { GroupBoxLevel } from './components/GroupBox.js';
 import { EmptyStateVariant } from './components/EmptyState.js';
 import { TimelineItemColor } from './components/TimelineItem.js';
-import { InfoFieldFormat, InfoFieldSize, InfoFieldTrend, InfoFieldTone } from './components/InfoField.js';
+import { InfoFieldFormat, InfoFieldSize, InfoFieldTrend, InfoFieldTone, InfoFieldAppearance } from './components/InfoField.js';
 export { ScreenObserver } from './internals/ScreenObserver.js';
 export type { ScreenSize, ScreenObserverConfig, ScreenResizeEvent } from './internals/ScreenObserver.js';
 /** `useUnsavedChanges` 가 돌려주는 것. */
@@ -55,6 +55,7 @@ export declare const Wizard: import('@lit/react').ReactWebComponent<WizardElemen
 export type WizardProps = React.ComponentProps<typeof Wizard>;
 export type { SidebarLayoutElement, WizardElement };
 export type { SidebarLayoutConfig, SidebarItem, SidebarLogoConfig, SidebarLinkConfig, SidebarSectionConfig, SidebarGroupConfig, SidebarButtonConfig, SidebarMenuConfig, SidebarMenuItemConfig, SidebarHtmlConfig, } from './layouts/SidebarLayout.types.js';
+export type { SidebarAvatar } from './components/SidebarButton.js';
 export type { WizardStep, WizardStepState, WizardStepChangeDetail } from './components/Wizard.js';
 declare module 'react' {
     namespace JSX {
@@ -93,6 +94,9 @@ declare module 'react' {
                  *  아님)상 실제 HTML 속성명은 `trendlabel`이다. */
                 trendlabel?: string;
                 tone?: InfoFieldTone;
+                appearance?: InfoFieldAppearance;
+                'blank-reason'?: string;
+                description?: string;
             };
             'u-info-section': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
                 min?: number | string;

package/package.json

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

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

@@ -37,11 +37,13 @@ and those are different states of the business. So the component owns the rule.
 | `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` |
+| `size` | `'default'\|'lg'\|'xl'` | `'default'` | ✓ | `'lg'` renders the value at the `title` type-scale step — for dashboard KPI tiles composed inside `u-info-section`. `'xl'` is the figure read at a glance — the `display` step, or `--info-field-xl-size` |
+| `appearance` | `'plain'\|'tile'` | `'plain'` | ✓ | `'tile'` draws a bordered surface (border · radius · padding · surface) for a grid of KPI tiles; with `tone` `warning`/`negative`/`positive` the whole tile takes that tone's soft face and border |
+| `blankReason` | `string` | — | | Attribute `blank-reason`. Why the value is blank — on the line under the value, while the value line keeps `blank` (`—`) at figure size. Hidden once there is a value |
 | `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 |
 | `description` | `string` | — | | A supporting line below the value — its basis, or the same amount in another unit (`"1,764,211 units"`). Trend copy belongs in `trendLabel` |
-| `tone` | `'positive'\|'negative'\|'warning'\|'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. `warning` means "needs attention, not wrong" (a deadline coming up, a rate under target but within limits) and is never inferred |
+| `tone` | `'positive'\|'negative'\|'warning'\|'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. `warning` means "needs attention, not wrong" (a deadline coming up, a rate under target but within limits) and is never inferred |
 
 ⚠ `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
@@ -78,13 +80,38 @@ stay level:
 conditionally (`tone=${mttr == null ? 'warning' : undefined}`) — otherwise the value is toned
 as well once it exists.
 
+To keep the dash and the reason apart — `—` on the value line at figure size, the reason on the
+line under it — use `blank-reason` instead of a sentence in `blank`:
+
+```html
+<u-info-field appearance="tile" size="xl" label="MTTR" .value=${mttr} unit="h"
+  blank-reason="No repairs in this period"></u-info-field>
+```
+
+### Tiles
+
+`appearance="tile"` makes the field a tile of a KPI grid — the grid's gap is the container's. A
+tile with `tone` takes that tone's face and border, so a figure that needs attention stands out
+in the grid, not only by its text color. Put a status icon at the start of the trend line with
+the `trend-icon` slot:
+
+```html
+<u-info-section min="190px">
+  <u-info-field appearance="tile" size="xl" label="PM compliance" .value=${71} unit="%"
+    tone="warning" .trendLabel=${'Below the 90% target'}>
+    <u-icon slot="trend-icon" name="exclamation-triangle"></u-icon>
+  </u-info-field>
+  <u-info-field appearance="tile" size="xl" label="MTBF" .value=${412} unit="h"></u-info-field>
+</u-info-section>
+```
+
 ## 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) |
-| `description` | The supporting line (only when `description` is set) |
+| `description` | The supporting line (when `description` is set, or the value is blank and `blankReason` is set) |
 
 ## CSS Custom Properties
 

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

@@ -221,6 +221,8 @@ interface SidebarMenuConfig {
   label: string | DirectiveResult;   // the trigger's label (its accessible name when slim)
   icon?: string;
   lib?: string;
+  avatar?: { src?: string; initials?: string };   // in place of the icon — an account menu
+  description?: string | DirectiveResult;         // a second, weaker line; part of the name
   items: SidebarMenuItemConfig[];
 }
 
@@ -255,6 +257,22 @@ The shell owns what only it knows:
 - **Permissions** — each entry takes `requirePermission`/`requireAnyPermission`; with
   `hasPermission` set, a menu left with no entries is dropped.
 
+**Account menu.** `avatar` and `description` turn the trigger into the account block at the foot of
+the sidebar — the avatar in place of the icon, the name on the label line, a role or organisation
+on a smaller line under it. The accessible name is both lines; a slim sidebar shows the avatar
+alone.
+
+```typescript
+footer: [{
+  type: 'menu', label: user.name, description: user.role,
+  avatar: { src: user.photoUrl, initials: user.initials },
+  items: [
+    { label: 'Change password', onClick: () => app.navigate('/account/password') },
+    { label: 'Sign out', onClick: () => auth.signOut() },
+  ],
+}]
+```
+
 ---
 
 ### `SidebarHtmlConfig` — `type: 'html'`