@iyulab/modern-app 0.44.0 → 0.44.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [0.44.2] - 2026-10-07
+
+### Fixed
+
+- **`u-empty-state variant="error"` announces the reason, not only the title.** The alert was the title alone, so a
+  screen reader heard "Couldn't load" while the screen showed why — and the reason decides the next step (try again,
+  ask for permission, change the query). The alert is now the title and the description together (a new `message`
+  part wraps them); the actions stay outside it. The other variants stay quiet.
+
+## [0.44.1] - 2026-10-07
+
+### Fixed
+
+- The master›detail examples (`docs/lob-primitives.md` and the `u-master-detail-layout` skill reference) read the
+  selection from `e.detail.selected`, which `u-rich-table`'s `selection-change` does not carry, and typed the event as
+  a `SelectionChangeEvent` that no package exports. They read `e.detail.selectedRows[0]`, typed by `RichTableEventMap`.
+
 ## [0.44.0] - 2026-10-07
 
 ### Added

package/dist/components/EmptyState.d.ts

@@ -1,5 +1,5 @@
 import { StyledElement } from '../internals/StyledElement.js';
-type ElementParts = 'host' | 'icon' | 'title' | 'description' | 'actions';
+type ElementParts = 'host' | 'icon' | 'message' | 'title' | 'description' | 'actions';
 /**
  * 빈 상태 — 목록·검색 결과가 비었을 때.
  *

package/dist/components/EmptyState.js

@@ -36,8 +36,12 @@ var d = class extends n {
       <div class="icon" part="icon" aria-hidden="true">
         <slot name="icon">${e.icon}</slot>
       </div>
-      <p class="title" part="title" role=${this.variant === "error" ? "alert" : s}>${this.title || e.title}</p>
-      ${t ? o`<p class="description" part="description">${t}</p>` : s}
+      <!-- 오류는 경보다 — 그 범위는 이 상태가 전하는 사실 전체(제목 + 사유)다. 사유가 다음 행동(다시 시도 · 권한 요청 ·
+           조건 고치기)을 가르므로 제목만 읽히면 듣는 사람이 다른 사실을 받는다. 행동 슬롯은 밖. -->
+      <div class="message" part="message" role=${this.variant === "error" ? "alert" : s}>
+        <p class="title" part="title">${this.title || e.title}</p>
+        ${t ? o`<p class="description" part="description">${t}</p>` : s}
+      </div>
       <div class="actions ${this.hasActions ? "" : "empty"}" part="actions">
         <slot name="actions"
           @slotchange=${(e) => this.hasActions = i(e.target)}

package/dist/components/EmptyState.styles.js

@@ -19,6 +19,13 @@ var t = e`
     opacity: 0.7;
   }
 
+  /* 제목과 사유의 묶음 — 오류 변형의 경보 범위. 배치는 호스트와 같은 가운데 세로 줄. */
+  .message {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
   .title {
     margin: 0;
     font-size: var(--u-text-subtitle-size, 16px);

package/package.json

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

package/skills/modern-app/references/components/empty-state.md

@@ -16,7 +16,7 @@ for both and a user with a filter still applied reads it as *"my data disappeare
 
 <u-empty-state variant="no-results"></u-empty-state>
 
-<!-- The list could not be loaded — the next step is trying again. The title is announced (role="alert"). -->
+<!-- The list could not be loaded — the next step is trying again. The title and the reason (description) are announced together (role="alert") — the reason decides what to do next. -->
 <u-empty-state variant="error" description="Request failed (503)">
   <u-button slot="actions">Try again</u-button>
 </u-empty-state>
@@ -43,6 +43,7 @@ for both and a user with a filter still applied reads it as *"my data disappeare
 | Part | Description |
 |------|-------------|
 | `icon` · `title` · `description` · `actions` | The four regions |
+| `message` | Wraps `title` and `description` — the alert of `variant="error"` |
 
 ## CSS Custom Properties
 

package/skills/modern-app/references/components/master-detail-layout.md

@@ -13,7 +13,7 @@ Swap the `detail` slot's content when the selection changes:
 
 ```html
 <u-master-detail-layout>
-  <u-rich-table @selection-change=${e => (detail = renderRecord(e.detail.selected))}>
+  <u-rich-table @selection-change=${e => (detail = renderRecord(e.detail.selectedRows[0]))}>
     …
   </u-rich-table>
   <div slot="detail">${detail}</div>