@iyulab/modern-app 0.42.2 → 0.44.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [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
+
+- **Sidebar toggle buttons** — `SidebarButtonConfig.pressed` (`boolean` or a function). The button carries
+  `aria-pressed` and, when on, a soft surface and an accented icon (`--app-sidebar-pressed-bg`,
+  `--app-sidebar-pressed-icon-color`), visible in the slim sidebar and distinct from the current page's link. A
+  setting such as a field or dark mode no longer has to rename itself "turn on / turn off" to show its state. The
+  shell reads `pressed` on every render and re-renders after the button's `onClick`.
+
 ## [0.42.2] - 2026-10-07
 
 ### Fixed

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/components/SidebarButton.d.ts

@@ -12,6 +12,13 @@ export interface SidebarButtonConfig extends SidebarPermissionGuard {
     lib?: string;
     label?: string | DirectiveResult;
     styles?: StyleMap<ElementParts>;
+    /**
+     * 켬/끔 버튼(토글)의 지금 상태 — 지정하면 안쪽 버튼이 `aria-pressed` 를 싣고 켜졌을 때 눌린 모양(옅은 면 · 강조 아이콘)으로
+     * 그려진다(슬림 모드에서도 아이콘으로 보인다). 이름은 상태와 무관하게 하나로 둔다(«현장 모드» — «켜기/끄기» 가 아니라).
+     * 셸은 렌더마다 읽는다: 값이면 설정 객체의 그 값을, 함수면 그 결과를. 그 버튼의 `onClick` 뒤에는 셸이 다시 그리므로,
+     * 클릭이 상태를 바꾸는 흔한 경우는 따로 할 일이 없다. 미지정이면 일반 버튼이다.
+     */
+    pressed?: boolean | (() => boolean);
     onClick?: (event?: Event) => void;
 }
 /**
@@ -25,6 +32,8 @@ export declare class SidebarButton extends StyledElement<ElementParts> {
     icon?: string;
     /** `icon`을 해석할 등록 라이브러리 이름 */
     lib?: string;
+    /** 켬/끔 상태 — 지정되면 토글 버튼(`aria-pressed`). 미지정이면 일반 버튼. */
+    pressed?: boolean;
     /** 버튼 텍스트 라벨 */
     label?: string | DirectiveResult;
     /** 이 버튼이 여는 팝업의 종류 — 안쪽 `<button>` 의 `aria-haspopup` 으로 간다(셸의 `type: 'menu'` 트리거). */

package/dist/components/SidebarButton.js

@@ -22,7 +22,8 @@ var l = class extends n {
 		return a`
       <button part="base" ?compact=${this.compact}
         aria-haspopup=${c(this.haspopup)}
-        aria-expanded=${c(this.haspopup ? String(this.expanded) : void 0)}>
+        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}
@@ -38,6 +39,9 @@ var l = class extends n {
 t([s({
 	type: Boolean,
 	reflect: !0
-}), 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: 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", 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);
 //#endregion
 export { l as SidebarButton };

package/dist/components/SidebarButton.styles.js

@@ -18,6 +18,14 @@ var t = e`
   :host(:active) {
     background-color: var(--u-bg-color-active, #EEEEEE);
   }
+  /* 켜진 토글 — «현재 페이지»(활성 링크의 진한 면)와 구별되는 옅은 면 + 강조 아이콘. 위치와 설정이 같은 모양이면 섞인다.
+     아이콘 색이 상태를 나르므로 라벨이 숨는 슬림 모드에서도 보인다. */
+  :host([pressed]) {
+    background-color: var(--app-sidebar-pressed-bg, var(--u-bg-color-active, #EEEEEE));
+  }
+  :host([pressed]) u-icon {
+    color: var(--app-sidebar-pressed-icon-color, var(--u-primary-color, #1976D2));
+  }
 
   button {
     all: unset;

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/dist/layouts/SidebarLayout.d.ts

@@ -97,6 +97,11 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
     private renderItem;
     /** 현재 경로와 패턴 매칭 여부 확인 */
     private isMatchedLink;
+    /**
+     * 버튼 항목 클릭 — 소비자의 `onClick` 을 부른 뒤 다시 그린다. 켬/끔 버튼(`pressed`)은 그 클릭이 상태를 바꾸는 것이
+     * 흔하고, 설정 객체의 값이나 함수의 결과는 셸이 렌더할 때만 읽힌다.
+     */
+    private handleButtonItemClick;
     /** 브랜드 로고 클릭 핸들러: `href` 지정 시 해당 경로로, 아니면 홈으로 이동 */
     /**
      * 로고 렌더링: 아이콘명(문자열, 기존 동작) | 이미지({src,alt,href}) | 커스텀 렌더 함수.

package/dist/layouts/SidebarLayout.js

@@ -328,7 +328,8 @@ var M = class extends i {
           .lib="${e.lib}"
           .label="${e.label}"
           .styles="${e.styles}"
-          @click="${e.onClick}"
+          .pressed=${typeof e.pressed == "function" ? e.pressed() : e.pressed}
+          @click=${(t) => this.handleButtonItemClick(e, t)}
         ></u-sidebar-button>
       `;
 		if (e.type === "menu") return this.renderMenu(e);
@@ -376,6 +377,10 @@ var M = class extends i {
 		}
 		return d;
 	}
+	handleButtonItemClick(e, t) {
+		let n = e.onClick?.(t);
+		this.requestUpdate(), n instanceof Promise && n.finally(() => this.requestUpdate());
+	}
 	static {
 		this.DEFAULT_ICONS = {
 			lib: "internal",
@@ -403,6 +408,7 @@ var M = class extends i {
 			return u`
         <u-link class="logo-link" aria-label=${t}>
           <span class="logo">
+            <!-- html-sink: documented HTML contract — a logo function returns markup the developer writes -->
             ${typeof n == "string" ? g(n) : n}
           </span>
         </u-link>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.42.2",
+  "version": "0.44.0",
   "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/layout.md

@@ -181,6 +181,7 @@ interface SidebarButtonConfig {
   label: string | DirectiveResult;
   onClick: () => void;
   styles?: StyleMap<string>;
+  pressed?: boolean | (() => boolean);   // a toggle: aria-pressed + the pressed look
 }
 ```
 
@@ -190,6 +191,21 @@ Example:
 { type: 'button', icon: 'logout', label: 'Sign Out', onClick: () => auth.signOut() }
 ```
 
+A setting the person turns on and off (dark mode, a field or compact mode, notifications) is a toggle: give it
+`pressed`. The button then carries `aria-pressed`, and when on it shows a soft surface and an accented icon
+(`--app-sidebar-pressed-bg`, `--app-sidebar-pressed-icon-color`) — visible when the sidebar is slim, and distinct
+from the current page's link. Keep one name for both states. The shell reads `pressed` on every render — a value
+from the config object, or a function's result — and re-renders after the button's `onClick`, so a click that
+flips the state needs nothing more:
+
+```typescript
+const fieldMode = {
+  type: 'button', icon: 'hand', label: 'Field mode',
+  pressed: () => density.isField(),
+  onClick: () => density.toggleField(),
+};
+```
+
 For a button that opens a menu, use `type: 'menu'` below — not a button plus your own popover.
 
 ---