@iyulab/modern-app 0.43.0 → 0.44.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [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
+
+- **`u-empty-state variant="error"`** — the list could not be loaded, a third fact next to `no-data` (create one)
+  and `no-results` (change the query); its next step is trying again. Its own default wording (English and Korean
+  built in, `errorTitle` / `errorDescription` for other languages), and its title is announced (`role="alert"`) —
+  the other two variants are not alarms and stay quiet. `variant` now reflects to the attribute.
+
 ## [0.43.0] - 2026-10-07
 
 ### Added

package/dist/components/EmptyState.d.ts

@@ -15,6 +15,10 @@ type ElementParts = 'host' | 'icon' | 'title' | 'description' | 'actions';
  * </u-empty-state>
  *
  * <u-empty-state variant="no-results"></u-empty-state>
+ *
+ * <u-empty-state variant="error" .description=${error.message}>
+ *   <u-button slot="actions" @click=${retry}>Try again</u-button>
+ * </u-empty-state>
  * ```
  *
  * ⚠**기본 문구는 영어다** — 이 패키지는 범용 층이라 특정 언어를 기본값으로 가질 수 없다.
@@ -27,8 +31,11 @@ type ElementParts = 'host' | 'icon' | 'title' | 'description' | 'actions';
  */
 export declare class EmptyState extends StyledElement<ElementParts> {
     static styles: import('lit').CSSResultGroup[];
-    /** `no-data` = 아직 없음 / `no-results` = 조건에 맞는 것이 없음. */
-    variant: 'no-data' | 'no-results';
+    /**
+     * `no-data` = 아직 없음 / `no-results` = 조건에 맞는 것이 없음 / `error` = 불러오지 못함.
+     * 셋은 다음 행동이 다르다(만들기 · 조건 바꾸기 · 다시 시도) — `error` 의 제목은 보조기기에 알린다(`role="alert"`).
+     */
+    variant: 'no-data' | 'no-results' | 'error';
     /** 제목. 비우면 variant 기본 문구. */
     title: string;
     /** 보조 설명. 비우면 variant 기본 문구. */

package/dist/components/EmptyState.js

@@ -16,7 +16,11 @@ var d = class extends n {
 	}
 	get defaults() {
 		let e = r(this.locale || void 0);
-		return this.variant === "no-results" ? {
+		return this.variant === "error" ? {
+			icon: "⚠️",
+			title: e.errorTitle,
+			description: e.errorDescription
+		} : this.variant === "no-results" ? {
 			icon: "🔍",
 			title: e.noResultsTitle,
 			description: e.noResultsDescription
@@ -32,7 +36,7 @@ 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">${this.title || e.title}</p>
+      <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="actions ${this.hasActions ? "" : "empty"}" part="actions">
         <slot name="actions"
@@ -42,6 +46,9 @@ var d = class extends n {
     `;
 	}
 };
-t([l({ type: String }), e("design:type", String)], d.prototype, "variant", void 0), t([l({ type: String }), e("design:type", Object)], d.prototype, "title", void 0), t([l({ type: String }), e("design:type", Object)], d.prototype, "description", void 0), t([l({ type: String }), e("design:type", Object)], d.prototype, "locale", void 0), t([u(), e("design:type", Object)], d.prototype, "hasActions", void 0), d = t([c("u-empty-state")], d);
+t([l({
+	type: String,
+	reflect: !0
+}), e("design:type", String)], d.prototype, "variant", void 0), t([l({ type: String }), e("design:type", Object)], d.prototype, "title", void 0), t([l({ type: String }), e("design:type", Object)], d.prototype, "description", void 0), t([l({ type: String }), e("design:type", Object)], d.prototype, "locale", void 0), t([u(), e("design:type", Object)], d.prototype, "hasActions", void 0), d = t([c("u-empty-state")], d);
 //#endregion
 export { d as EmptyState };

package/dist/internals/locale.d.ts

@@ -7,6 +7,9 @@ export interface ModernAppLocaleStrings {
     /** Empty state — records exist but the current query matched none. */
     noResultsTitle: string;
     noResultsDescription: string;
+    /** Empty state — the list could not be loaded (`variant="error"`). */
+    errorTitle: string;
+    errorDescription: string;
     /** Accessible label for an overlay-mode close button (master-detail layout, sidebar layout overlay). */
     detailClose: string;
     /** Sidebar layout — accessible label for the mobile-header menu toggle button. */

package/dist/internals/locale.js

@@ -6,6 +6,8 @@ var t = {
 	noDataDescription: "",
 	noResultsTitle: "No matching results",
 	noResultsDescription: "Try changing your search terms or filters.",
+	errorTitle: "Couldn’t load this list",
+	errorDescription: "Something went wrong while loading. Try again.",
 	detailClose: "Close",
 	toggleMobileMenu: "Toggle menu",
 	toggleSidebar: "Toggle sidebar",
@@ -22,6 +24,8 @@ n.register("en", t), n.register("ko", {
 	noDataDescription: "",
 	noResultsTitle: "일치하는 결과가 없습니다",
 	noResultsDescription: "검색어나 필터를 바꿔 보세요.",
+	errorTitle: "목록을 불러오지 못했습니다",
+	errorDescription: "불러오는 중 문제가 생겼습니다. 다시 시도해 주세요.",
 	detailClose: "닫기",
 	toggleMobileMenu: "메뉴 열고 닫기",
 	toggleSidebar: "사이드바 열고 닫기",
@@ -56,6 +60,8 @@ function l(e) {
 		noDataDescription: t("noDataDescription"),
 		noResultsTitle: t("noResultsTitle"),
 		noResultsDescription: t("noResultsDescription"),
+		errorTitle: t("errorTitle"),
+		errorDescription: t("errorDescription"),
 		detailClose: t("detailClose"),
 		toggleMobileMenu: t("toggleMobileMenu"),
 		toggleSidebar: t("toggleSidebar"),

package/package.json

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

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

@@ -15,6 +15,11 @@ for both and a user with a filter still applied reads it as *"my data disappeare
 </u-empty-state>
 
 <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"). -->
+<u-empty-state variant="error" description="Request failed (503)">
+  <u-button slot="actions">Try again</u-button>
+</u-empty-state>
 ```
 
 ## Slots
@@ -28,7 +33,7 @@ for both and a user with a filter still applied reads it as *"my data disappeare
 
 | Property | Type | Default | Reflect | Description |
 |----------|------|---------|---------|-------------|
-| `variant` | `'no-data'\|'no-results'` | `'no-data'` | | Which fact is being shown; changes the default wording |
+| `variant` | `'no-data'\|'no-results'\|'error'` | `'no-data'` | ✓ | Which fact is being shown; changes the default wording. `error` (could not load) announces its title |
 | `title` | `string` | `''` | | Override the default title |
 | `description` | `string` | `''` | | Override the default description |
 | `locale` | `string` | `''` | | Locale tag override for built-in strings |

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>