@iyulab/modern-app 0.42.1 → 0.43.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [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
+
+- The sidebar layout registers the `u-progress-bar` it renders with an explicit import. It imported `UProgressBar` for
+  a type only, and the published module kept the import by accident (decorator metadata).
+
 ## [0.42.1] - 2026-10-07
 
 ### Fixed

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/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

@@ -24,16 +24,16 @@ import "@iyulab/components/dist/components/menu-item/UMenuItem.js";
 import { createDevWarner as v } from "@iyulab/components/dist/utilities/devWarning.js";
 import { isFocusCandidate as y, querySelectorDeep as b } from "@iyulab/components/dist/utilities/elements.js";
 import { OverlayManager as x } from "@iyulab/components/dist/utilities/OverlayManager.js";
-import { UProgressBar as S } from "@iyulab/components/dist/components/progress-bar/UProgressBar.js";
+import "@iyulab/components/dist/components/progress-bar/UProgressBar.js";
 //#region src/layouts/SidebarLayout.ts
-var C, w = v("@iyulab/modern-app"), T = 0;
-function E(e) {
+var S, C = v("@iyulab/modern-app"), w = 0;
+function T(e) {
 	let t = e.tagName;
 	if (t === "INPUT" || t === "TEXTAREA" || t === "SELECT" || e.isContentEditable) return !0;
 	let n = e.getAttribute("role");
 	return n === "textbox" || n === "searchbox" || n === "combobox" || n === "spinbutton";
 }
-var D = /* @__PURE__ */ new Set([
+var E = /* @__PURE__ */ new Set([
 	"button",
 	"link",
 	"checkbox",
@@ -46,27 +46,27 @@ var D = /* @__PURE__ */ new Set([
 	"tab",
 	"treeitem"
 ]);
-function O(e) {
+function D(e) {
 	let t = e.tagName;
-	return t === "BUTTON" || t === "SUMMARY" || t === "A" && e.hasAttribute("href") ? !0 : D.has(e.getAttribute("role") ?? "");
+	return t === "BUTTON" || t === "SUMMARY" || t === "A" && e.hasAttribute("href") ? !0 : E.has(e.getAttribute("role") ?? "");
 }
-function k(e) {
+function O(e) {
 	let t = getComputedStyle(e);
 	return (t.overflowY === "auto" || t.overflowY === "scroll") && e.scrollHeight > e.clientHeight;
 }
-function A(e, t) {
+function k(e, t) {
 	for (let n of e) if (n instanceof HTMLElement) {
-		if (k(n)) return n === t;
+		if (O(n)) return n === t;
 		if (n === t) break;
 	}
 	return !0;
 }
-function j() {
+function A() {
 	let e = document.activeElement;
 	for (; e?.shadowRoot?.activeElement;) e = e.shadowRoot.activeElement;
 	return e;
 }
-function M(e, t) {
+function j(e, t) {
 	let n = t;
 	for (; n;) {
 		if (n === e) return !0;
@@ -74,12 +74,12 @@ function M(e, t) {
 	}
 	return !1;
 }
-var N = class extends i {
+var M = class extends i {
 	static {
-		C = this;
+		S = this;
 	}
 	constructor(...t) {
-		super(...t), this.state = "default", this.counts = {}, this.locale = "", this.hasOverlay = !1, this.openMenu = null, this.menuIds = /* @__PURE__ */ new WeakMap(), this.hasNotice = !1, this.routeLoading = !1, this.mainTabStop = !1, this.overlayTrigger = null, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : void 0, this.currentPath = null, this.unsizedWarnKey = `unsized:${++T}`, this.isMatchedLink = (e) => this.currentPath === null || !e ? !1 : (e = typeof e == "string" ? new URLPattern(e, window.location.origin) : e, e.test(this.currentPath, window.location.origin)), this.handleToggleButtonClick = () => {
+		super(...t), this.state = "default", this.counts = {}, this.locale = "", this.hasOverlay = !1, this.openMenu = null, this.menuIds = /* @__PURE__ */ new WeakMap(), this.hasNotice = !1, this.routeLoading = !1, this.mainTabStop = !1, this.overlayTrigger = null, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : void 0, this.currentPath = null, this.unsizedWarnKey = `unsized:${++w}`, this.isMatchedLink = (e) => this.currentPath === null || !e ? !1 : (e = typeof e == "string" ? new URLPattern(e, window.location.origin) : e, e.test(this.currentPath, window.location.origin)), this.handleToggleButtonClick = () => {
 			let t = this.screenSize ?? e.screen ?? "large";
 			t === "large" ? this.state = this.state === "default" ? "slim" : "default" : t === "medium" ? this.state = this.state === "slim" ? "modal" : "slim" : t === "small" ? this.state = this.state === "mobile" ? "mobile-open" : "mobile" : console.warn("Unknown screen size:", t);
 		}, this.handleBackdropClick = () => {
@@ -112,7 +112,7 @@ var N = class extends i {
 		}, this.handleOverlaySlotChange = (e) => {
 			let t = o(e.target);
 			if (t && !this.hasOverlay) {
-				let e = j();
+				let e = A();
 				this.overlayTrigger = e && e !== document.body ? e : null;
 			}
 			this.hasOverlay = t;
@@ -126,9 +126,9 @@ var N = class extends i {
 		}, this._handleMainKeydown = (e) => {
 			if (e.defaultPrevented) return;
 			let t = e.composedPath()[0];
-			if (t instanceof HTMLElement && E(t) || e.key === " " && t instanceof HTMLElement && O(t)) return;
+			if (t instanceof HTMLElement && T(t) || e.key === " " && t instanceof HTMLElement && D(t)) return;
 			let n = this.shadowRoot?.querySelector(".main");
-			if (!n || !A(e.composedPath(), n)) return;
+			if (!n || !k(e.composedPath(), n)) return;
 			let r = n.clientHeight;
 			switch (e.key) {
 				case " ":
@@ -186,7 +186,7 @@ var N = class extends i {
 		process.env.NODE_ENV !== "production" && requestAnimationFrame(() => {
 			if (!this.isConnected) return;
 			let e = this.getBoundingClientRect().height;
-			e >= 200 || w(this.unsizedWarnKey, `u-sidebar-layout is only ${Math.round(e)}px tall — its height: 100% found no sized ancestor, so the shell sits at its own chrome height and the route area has almost no room. Give the root element a height (e.g. #app { height: 100vh } — app.load() does this for document.body).`);
+			e >= 200 || C(this.unsizedWarnKey, `u-sidebar-layout is only ${Math.round(e)}px tall — its height: 100% found no sized ancestor, so the shell sits at its own chrome height and the route area has almost no room. Give the root element a height (e.g. #app { height: 100vh } — app.load() does this for document.body).`);
 		});
 	}
 	render() {
@@ -277,7 +277,7 @@ var N = class extends i {
 	}
 	renderMenu(e) {
 		let t = this.menuIds.get(e);
-		t || (t = `u-sidebar-menu-${++C.menuSeq}`, this.menuIds.set(e, t));
+		t || (t = `u-sidebar-menu-${++S.menuSeq}`, this.menuIds.set(e, t));
 		let n = t, r = this.state === "mobile" || this.state === "mobile-open" ? "bottom-start" : "right-start";
 		return u`
       <u-sidebar-button
@@ -312,8 +312,8 @@ var N = class extends i {
 	}
 	handleMenuHide(e, t) {
 		this.openMenu === t && (this.openMenu = null);
-		let n = e.currentTarget, r = j();
-		r && M(n, r) && this.shadowRoot?.querySelector(`#${t}`)?.focus();
+		let n = e.currentTarget, r = A();
+		r && j(n, r) && this.shadowRoot?.querySelector(`#${t}`)?.focus();
 	}
 	renderItem(e) {
 		if (!e) return d;
@@ -328,7 +328,8 @@ var N = 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 N = 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",
@@ -386,7 +391,7 @@ var N = class extends i {
 		};
 	}
 	icon(e) {
-		return this.config?.icons?.[e] ?? C.DEFAULT_ICONS[e];
+		return this.config?.icons?.[e] ?? S.DEFAULT_ICONS[e];
 	}
 	renderLogo() {
 		let e = this.config?.logo, t = this.config?.title ?? "Home";
@@ -403,6 +408,7 @@ var N = 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>
@@ -439,14 +445,14 @@ var N = class extends i {
 	async focusRoute(e) {
 		let t = this.routeContent();
 		if (await Promise.all(t.map((e) => e.updateComplete)), this.hasOverlay || !e.isConnected) return;
-		let n = j();
-		n && t.some((e) => M(e, n)) || this.focusContentStart(t, e);
+		let n = A();
+		n && t.some((e) => j(e, n)) || this.focusContentStart(t, e);
 	}
 	focusContentStart(e, t) {
 		let n = b(e, "[autofocus]", y);
 		n?.focus();
-		let r = j();
-		n && r && M(n, r) || t.focus({ preventScroll: !0 });
+		let r = A();
+		n && r && j(n, r) || t.focus({ preventScroll: !0 });
 	}
 	overlayPanels() {
 		return (this.shadowRoot?.querySelector("slot[name=\"overlay\"]"))?.assignedElements({ flatten: !0 }) ?? [];
@@ -454,19 +460,19 @@ var N = class extends i {
 	async focusOverlay() {
 		let e = this.overlayPanels();
 		if (await Promise.all(e.map((e) => e.updateComplete)), !this.hasOverlay) return;
-		let t = j();
-		t && e.some((e) => M(e, t)) || (b(e, "[autofocus]", y) ?? b(e, "input, select, textarea, u-input, u-textarea, u-select, u-checkbox, u-radio, u-switch, u-slider", y) ?? this.shadowRoot?.querySelector(".overlay-close"))?.focus();
+		let t = A();
+		t && e.some((e) => j(e, t)) || (b(e, "[autofocus]", y) ?? b(e, "input, select, textarea, u-input, u-textarea, u-select, u-checkbox, u-radio, u-switch, u-slider", y) ?? this.shadowRoot?.querySelector(".overlay-close"))?.focus();
 	}
 	restoreOverlayFocus() {
 		let e = this.overlayTrigger;
 		this.overlayTrigger = null;
-		let t = j();
+		let t = A();
 		t && t !== document.body || (e?.isConnected ? e.focus() : this.mainElement?.focus({ preventScroll: !0 }));
 	}
 };
 r([p({
 	type: String,
 	reflect: !0
-}), n("design:type", Object)], N.prototype, "state", void 0), r([p({ type: Object }), n("design:type", Object)], N.prototype, "config", void 0), r([p({ type: Object }), n("design:type", typeof Record > "u" ? Object : Record)], N.prototype, "counts", void 0), r([p({ type: String }), n("design:type", Object)], N.prototype, "locale", void 0), r([m("u-progress-bar"), n("design:type", S === void 0 ? Object : S)], N.prototype, "progressBarEl", void 0), r([h(), n("design:type", Object)], N.prototype, "hasOverlay", void 0), r([h(), n("design:type", Object)], N.prototype, "openMenu", void 0), r([h(), n("design:type", Object)], N.prototype, "hasNotice", void 0), r([h(), n("design:type", Object)], N.prototype, "routeLoading", void 0), r([h(), n("design:type", Object)], N.prototype, "mainTabStop", void 0), r([h(), n("design:type", Object)], N.prototype, "currentPath", void 0), N = C = r([f("u-sidebar-layout")], N);
+}), n("design:type", Object)], M.prototype, "state", void 0), r([p({ type: Object }), n("design:type", Object)], M.prototype, "config", void 0), r([p({ type: Object }), n("design:type", typeof Record > "u" ? Object : Record)], M.prototype, "counts", void 0), r([p({ type: String }), n("design:type", Object)], M.prototype, "locale", void 0), r([m("u-progress-bar"), n("design:type", Object)], M.prototype, "progressBarEl", void 0), r([h(), n("design:type", Object)], M.prototype, "hasOverlay", void 0), r([h(), n("design:type", Object)], M.prototype, "openMenu", void 0), r([h(), n("design:type", Object)], M.prototype, "hasNotice", void 0), r([h(), n("design:type", Object)], M.prototype, "routeLoading", void 0), r([h(), n("design:type", Object)], M.prototype, "mainTabStop", void 0), r([h(), n("design:type", Object)], M.prototype, "currentPath", void 0), M = S = r([f("u-sidebar-layout")], M);
 //#endregion
-export { N as SidebarLayout };
+export { M as SidebarLayout };

package/package.json

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

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.
 
 ---