@iyulab/modern-app 0.53.0 → 0.54.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Changelog
 
+## [0.54.0] - 2026-10-14
+
+### Added
+
+- **`u-action-bar` `summary` slot** — what the main action will do («1 change · Order number»). It follows the
+  danger actions and fills the free width; below 420px it takes its own line between the main actions (on top) and
+  the danger actions. Label-size, weak text.
+- `--action-bar-padding-inline` — inline padding for a bar that runs to a side sheet's edges (default `0`).
+- **`u-info-section layout="strip"` — a stat strip.** The totals of a result as cells on one bordered surface, split
+  by 1px dividers: all side by side, or all stacked once the strip is narrower than 640px — never three plus one.
+- `u-info-field` `description` — a supporting line below the value (its basis, or the same amount in another unit).
+
+### Fixed
+
+- The `u-action-bar` skill reference placed the main actions at the leading edge and the danger actions at the
+  trailing edge — the reverse of what the bar does. It now describes the actual layout.
+
+## [0.53.1] - 2026-10-13
+
+### Fixed
+
+- **Group headers and sidebar buttons follow the navigation item tokens.** `--app-sidebar-item-gap`,
+  `--app-sidebar-item-padding` and `--app-sidebar-item-radius` were read by links only, and `--app-sidebar-icon-size` by
+  links and group headers — a theme that set them got three different label starts in one sidebar (links, group
+  headers, and footer buttons such as a theme toggle). All three item kinds now read all four. Without the tokens the
+  defaults are unchanged.
+
+### Documentation
+
+- The unsaved-changes examples are complete snippets for Lit and React, and hold `UnsavedChangesController` in a
+  `readonly` field (a `private` one is flagged by `noUnusedLocals`).
+
 ## [0.53.0] - 2026-10-13
 
 ### Added

package/dist/components/ActionBar.d.ts

@@ -1,5 +1,5 @@
 import { StyledElement } from '../internals/StyledElement.js';
-type ElementParts = 'host' | 'danger' | 'main';
+type ElementParts = 'host' | 'danger' | 'summary' | 'main';
 /**
  * 푸터 액션 바 — 상세·편집 화면 맨 아래의 같은 골격.
  *
@@ -17,10 +17,13 @@ type ElementParts = 'host' | 'danger' | 'main';
  * ```
  *
  * 배치 규칙: **위험 액션은 왼쪽 끝, 주 액션은 오른쪽 끝** — 거리가 안전장치다.
- * 좁아지면 두 무리가 각자 한 줄을 갖고 **주 액션이 위로** 온다(엄지 위치에 위험 액션을
+ * 좁아지면 무리마다 한 줄을 갖고 **주 액션이 위로** 온다(엄지 위치에 위험 액션을
  * 두지 않기 위해서다).
  *
- * 오버라이드: `part`(host·danger·main) + slot 치환.
+ * `summary` 슬롯은 주 액션이 무엇을 할지 말하는 글이다(«변경 1건 · 주문 번호») — 위험 액션 뒤에서
+ * 남는 폭을 채운다. 시트 가장자리에 붙는 바닥이면 `--action-bar-padding-inline` 으로 안쪽 여백을 준다.
+ *
+ * 오버라이드: `part`(host·danger·summary·main) + slot 치환.
  */
 export declare class ActionBar extends StyledElement<ElementParts> {
     static styles: import('lit').CSSResultGroup[];
@@ -35,6 +38,8 @@ export declare class ActionBar extends StyledElement<ElementParts> {
      * (`internals/slotted.ts` 참조). 빈 래퍼가 남으면 주 액션이 가운데로 밀린다.
      */
     private hasDanger;
+    /** 요약 슬롯 배정 상태 — 비면 래퍼를 접는다(위와 같은 이유). */
+    private hasSummary;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/components/ActionBar.js

@@ -8,7 +8,7 @@ import { customElement as o, property as s, state as c } from "lit/decorators.js
 //#region src/components/ActionBar.ts
 var l = class extends n {
 	constructor(...e) {
-		super(...e), this.sticky = !1, this.hasDanger = !1;
+		super(...e), this.sticky = !1, this.hasDanger = !1, this.hasSummary = !1;
 	}
 	static {
 		this.styles = [super.styles, i];
@@ -20,6 +20,11 @@ var l = class extends n {
           @slotchange=${(e) => this.hasDanger = r(e.target)}
         ></slot>
       </div>
+      <div class="summary ${this.hasSummary ? "" : "empty"}" part="summary">
+        <slot name="summary"
+          @slotchange=${(e) => this.hasSummary = r(e.target)}
+        ></slot>
+      </div>
       <div class="main" part="main"><slot></slot></div>
     `;
 	}
@@ -27,6 +32,6 @@ var l = class extends n {
 t([s({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Object)], l.prototype, "sticky", void 0), t([c(), e("design:type", Object)], l.prototype, "hasDanger", void 0), l = t([o("u-action-bar")], l);
+}), e("design:type", Object)], l.prototype, "sticky", void 0), t([c(), e("design:type", Object)], l.prototype, "hasDanger", void 0), t([c(), e("design:type", Object)], l.prototype, "hasSummary", void 0), l = t([o("u-action-bar")], l);
 //#endregion
 export { l as ActionBar };

package/dist/components/ActionBar.styles.js

@@ -5,7 +5,7 @@ var t = e`
     display: flex;
     align-items: center;
     gap: var(--u-space-sm, 8px);
-    padding: var(--u-space-md, 12px) 0;
+    padding: var(--u-space-md, 12px) var(--action-bar-padding-inline, 0);
     
 
 
@@ -36,6 +36,18 @@ var t = e`
     display: none;
   }
 
+  
+
+  .summary {
+    flex: 1 1 calc((420px - 100%) * 999);
+    min-width: 0;
+    font-size: var(--u-text-label-size, 13px);
+    color: var(--u-txt-color-weak, #616161);
+  }
+  .summary.empty {
+    display: none;
+  }
+
   .main {
     display: flex;
     align-items: center;
@@ -56,7 +68,7 @@ var t = e`
     bottom: 0;
     background-color: var(--u-bg-color, #FFFFFF);
     border-top: 1px solid var(--u-border-color-weak, #EEEEEE);
-    padding: var(--u-space-md, 12px) 0;
+    padding: var(--u-space-md, 12px) var(--action-bar-padding-inline, 0);
   }
 `;
 //#endregion

package/dist/components/InfoField.d.ts

@@ -97,6 +97,11 @@ export declare class InfoField extends StyledElement<ElementParts> {
      * `--u-success|danger|warning-color-strong`.
      */
     tone?: InfoFieldTone;
+    /**
+     * 값 아래의 보조 줄 — 그 값의 근거나 다른 단위의 같은 양(«1,764,211 units» · «Settled ₩743,188,120»).
+     * 추세 문구는 `trendLabel` 이다(방향과 색을 갖는다).
+     */
+    description?: string;
     /** 라벨을 이름으로 준 슬롯 위젯과 그때의 라벨 — 소비자가 바꾼 이름은 우리 것이 아니다. */
     private readonly namedWidgets;
     /**

package/dist/components/InfoField.js

@@ -48,12 +48,13 @@ var f = class extends n {
           ${a ? i`<span aria-hidden="true">${a}</span> ` : ""}${this.trendLabel ?? ""}
         </div>
       ` : ""}
+      ${this.description ? i`<div class="description" part="description">${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), 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 }), 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);
 //#endregion
 export { f as InfoField, d as isBlank };

package/dist/components/InfoField.styles.js

@@ -82,6 +82,14 @@ var t = e`
     margin-top: var(--u-space-3xs, 2px);
   }
 
+  
+  .description {
+    font-size: var(--u-text-caption-size, 12px);
+    line-height: var(--u-text-caption-leading, 1.5);
+    color: var(--u-txt-color-weaker, #757575);
+    margin-top: var(--u-space-3xs, 2px);
+  }
+
   .trend.tone-positive {
     color: var(--u-success-color-strong, #1B5E20);
   }

package/dist/components/InfoSection.d.ts

@@ -1,5 +1,7 @@
 import { StyledElement } from '../internals/StyledElement.js';
 type ElementParts = 'host' | 'grid';
+/** 배치 — `grid` 라벨-값 칸의 반응형 그리드 · `strip` 지표 띠(구분선으로 나뉜 한 면의 칸). */
+export type InfoSectionLayout = 'grid' | 'strip';
 /**
  * 정보 섹션 — `u-info-field` 들의 반응형 그리드.
  *
@@ -16,11 +18,18 @@ type ElementParts = 'host' | 'grid';
  * ```
  *
  * `min` 으로 한 칸의 최소 폭을 조절한다(기본 160px). 라벨이 긴 도메인은 값을 올린다.
+ *
+ * `layout="strip"` 은 지표 띠다 — 결과의 합계를 문장이 아니라 칸으로(목록 위 «주문 962 · 청구 ₩…»).
+ * 한 면 위에 1px 구분선으로 나뉜 칸들이 **전부 나란히, 아니면 전부 쌓인다**(띠 폭 640px 미만 — 들쭉날쭉한 줄을
+ * 만들지 않는다). 임계는 크기 containment 가 아니라 칸의 flex-basis 가 건다(«Holy Albatross» — u-action-bar 와 같은
+ * 근거). 구분선은 칸 사이 1px 간격으로 비치는 면의 테두리 색이라 가로·세로가 저절로 바뀐다. 이 배치에서 `min` 은 쓰지 않는다.
  */
 export declare class InfoSection extends StyledElement<ElementParts> {
     static styles: import('lit').CSSResultGroup[];
     /** 한 칸의 최소 폭(px). 이 값보다 좁아지면 열 수가 줄어든다. */
     min: number;
+    /** 배치 — `grid`(기본) · `strip`(지표 띠). */
+    layout: InfoSectionLayout;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/components/InfoSection.js

@@ -7,7 +7,7 @@ import { customElement as a, property as o } from "lit/decorators.js";
 //#region src/components/InfoSection.ts
 var s = class extends n {
 	constructor(...e) {
-		super(...e), this.min = 160;
+		super(...e), this.min = 160, this.layout = "grid";
 	}
 	static {
 		this.styles = [super.styles, r];
@@ -18,6 +18,9 @@ var s = class extends n {
     `;
 	}
 };
-t([o({ type: Number }), e("design:type", Object)], s.prototype, "min", void 0), s = t([a("u-info-section")], s);
+t([o({ type: Number }), e("design:type", Object)], s.prototype, "min", void 0), t([o({
+	type: String,
+	reflect: !0
+}), e("design:type", Object)], s.prototype, "layout", void 0), s = t([a("u-info-section")], s);
 //#endregion
 export { s as InfoSection };

package/dist/components/InfoSection.styles.js

@@ -13,6 +13,24 @@ var t = e`
     grid-template-columns: repeat(auto-fit, minmax(var(--info-min, 160px), 1fr));
     gap: var(--u-space-lg, 16px) var(--u-space-xl, 20px);
   }
+
+  
+
+  :host([layout="strip"]) .grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1px;
+    background: var(--u-border-color, #E0E0E0);
+    border: 1px solid var(--u-border-color, #E0E0E0);
+    border-radius: var(--u-radius-xl, 8px);
+    overflow: hidden;
+  }
+  :host([layout="strip"]) ::slotted(*) {
+    flex: 1 1 calc((640px - 100%) * 999);
+    min-width: 0;
+    padding: var(--u-space-md, 12px) var(--u-space-lg, 16px);
+    background: var(--u-bg-color, #FFFFFF);
+  }
 `;
 //#endregion
 export { t as styles };

package/dist/components/SidebarButton.styles.js

@@ -7,7 +7,7 @@ var t = e`
     color: var(--app-sidebar-fg, var(--u-txt-color, #212121));
     background-color: transparent;
     border: none;
-    border-radius: 8px;
+    border-radius: var(--app-sidebar-item-radius, 8px);
     transition: all var(--u-duration-normal, 220ms) ease;
     cursor: pointer;
   }
@@ -34,8 +34,9 @@ var t = e`
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
-    gap: 12px;
-    padding: 8px 12px;
+    
+    gap: var(--app-sidebar-item-gap, 12px);
+    padding: var(--app-sidebar-item-padding, 8px 12px);
     
     min-height: var(--u-target-size, 0px);
   }
@@ -52,7 +53,7 @@ var t = e`
   u-icon {
     flex-shrink: 0;
     color: inherit;
-    font-size: 20px;
+    font-size: var(--app-sidebar-icon-size, 20px);
   }
 
   

package/dist/components/SidebarGroup.styles.js

@@ -17,13 +17,14 @@ var t = e`
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    gap: 12px;
-    padding: 8px 12px;
+    
+    gap: var(--app-sidebar-item-gap, 12px);
+    padding: var(--app-sidebar-item-padding, 8px 12px);
     
     min-height: var(--u-target-size, 0px);
     background-color: transparent;
     border: none;
-    border-radius: 8px;
+    border-radius: var(--app-sidebar-item-radius, 8px);
     transition: all var(--u-duration-normal, 220ms) ease;
     cursor: pointer;
   }

package/dist/unsaved.d.ts

@@ -36,7 +36,7 @@ export declare function unsavedChangesGuard(_ctx?: RouteLeaveContext): boolean |
  * @example
  * ```ts
  * class OrderPage extends LitElement {
- *   private unsaved = new UnsavedChangesController(this, () => this.form.dirty);
+ *   readonly unsaved = new UnsavedChangesController(this, () => this.form.dirty);
  * }
  * ```
  */

package/package.json

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

package/skills/modern-app/SKILL.md

@@ -244,7 +244,7 @@ Back/Forward included) and the browser asks before the document is left (`before
 ```ts
 import { UnsavedChangesController, confirmDiscardChanges } from '@iyulab/modern-app';
 // Lit
-private unsaved = new UnsavedChangesController(this, () => this.form.dirty);
+readonly unsaved = new UnsavedChangesController(this, () => this.form.dirty);
 // React: useUnsavedChanges(dirty) from '@iyulab/modern-app/react'
 // Plain: const release = trackUnsavedChanges(() => dirty);
 // A modal drawer's close is not a navigation — ask from its cancellable `hide` event:

package/skills/modern-app/references/components/action-bar.md

@@ -2,23 +2,29 @@
 
 **Tag:** `u-action-bar`
 
-The row of actions that closes a form or a detail screen: primary actions on the leading edge,
-destructive ones separated on the trailing edge.
+The row of actions that closes a form or a detail screen: destructive actions at the leading edge, the main
+actions at the trailing edge — the distance between them is the safeguard. Below 420px each group takes its own
+line with the main actions on top, so a destructive action never sits under the thumb.
 
 ```html
 <u-action-bar sticky>
-  <u-button appearance="solid">Save</u-button>
+  <u-button slot="danger" color="danger" appearance="plain">Delete</u-button>
+  <span slot="summary">1 change · Order number</span>
   <u-button appearance="outlined">Cancel</u-button>
-  <u-button slot="danger" color="danger">Delete</u-button>
+  <u-button>Save</u-button>
 </u-action-bar>
 ```
 
+A side sheet's footer runs to the sheet's edges — give it the sheet's inset with `--action-bar-padding-inline`
+rather than negative margins (the bar cannot know its parent's padding).
+
 ## Slots
 
 | Name | Description |
 |------|-------------|
-| *(default)* | Primary actions |
-| `danger` | Destructive actions, pushed to the trailing edge |
+| *(default)* | Main actions, at the trailing edge |
+| `danger` | Destructive actions, at the leading edge |
+| `summary` | What the main action will do — «1 change · Order number». Follows the danger actions and fills the free width |
 
 ## Properties
 
@@ -30,8 +36,9 @@ destructive ones separated on the trailing edge.
 
 | Part | Description |
 |------|-------------|
-| `main` | Primary action group |
+| `main` | Main action group |
 | `danger` | Destructive action group |
+| `summary` | Summary text wrapper |
 
 ## CSS Custom Properties
 
@@ -41,6 +48,7 @@ destructive ones separated on the trailing edge.
 | `--u-border-color-weak` | Top border when `sticky` |
 | `--u-space-sm` | Gap between actions within a group |
 | `--u-space-md` | Host and sticky-mode vertical padding |
+| `--action-bar-padding-inline` | Inline padding (default `0`) — the sheet inset for a footer that runs edge to edge |
 
 ⚠ `sticky` adds **vertical** padding only. It deliberately does not stretch to the container
 edges with negative margins — that would assume the parent has exactly that much horizontal

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

@@ -40,6 +40,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 |
+| `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 |
 
 ⚠ `numeric` no longer right-aligns (it did before 0.25.0). A field is a label/value pair that owns
@@ -83,6 +84,7 @@ as well once it exists.
 |------|-------------|
 | `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) |
 
 ## CSS Custom Properties
 

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

@@ -16,6 +16,16 @@ markup works inside a side panel.
 </u-info-section>
 ```
 
+A stat strip — the totals above a list, as cells rather than a sentence:
+
+```html
+<u-info-section layout="strip">
+  <u-info-field label="Orders" value="962" unit="orders" description="1,764,211 units" size="lg"></u-info-field>
+  <u-info-field label="Due in 7 days" value="14" tone="warning" description="3 not started" size="lg"></u-info-field>
+  <u-info-field label="Overdue" value="₩0" tone="negative" description="0 orders" size="lg"></u-info-field>
+</u-info-section>
+```
+
 ## Slots
 
 | Name | Description |
@@ -26,7 +36,8 @@ markup works inside a side panel.
 
 | Property | Type | Default | Reflect | Description |
 |----------|------|---------|---------|-------------|
-| `min` | `number` | `160` | | Minimum column width in px. Raise it for domains with long labels |
+| `min` | `number` | `160` | | Minimum column width in px. Raise it for domains with long labels. Not used by `layout="strip"` |
+| `layout` | `'grid'\|'strip'` | `'grid'` | ✓ | `grid` — label-value cells in a responsive grid · `strip` — a stat strip: cells on one bordered surface split by 1px dividers, all side by side or all stacked once the strip is narrower than 640px (never a ragged row) |
 
 ## CSS Parts
 
@@ -39,6 +50,8 @@ markup works inside a side panel.
 | Property | Description |
 |----------|-------------|
 | `--u-space-lg` / `--u-space-xl` | Grid gap (row / column) |
+| `--u-border-color` · `--u-radius-xl` · `--u-bg-color` | Strip surface, dividers and corner; cell background |
+| `--u-space-md` / `--u-space-lg` | Strip cell padding (block / inline) |
 
 ⚠ Column width is set via the `min` property, not a custom property — it's applied as an inline
 style per instance, so a `--info-min` override in a stylesheet would lose to it.