@iyulab/modern-app 0.56.1 → 0.57.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # Changelog
 
+## [0.57.0] - 2026-10-23
+
+### Added
+
+- **Sidebar `subtitle`** — one line under the app title (what the app is), in the expanded sidebar header. It hides with
+  the title when the sidebar is slim; the mobile header keeps one line.
+- **`u-info-field` `visual` slot** — a small picture at the end of the value line (a trend sparkline, a progress ring),
+  for KPI tiles. The field gives it a place and draws nothing itself; an empty slot takes no room.
+- **Logo from a registered icon library** — `logo: { icon, lib }`, the same pair the menu items take. A string logo
+  could only be found at `u-icon`'s default path. `SidebarLogoIcon` is exported.
+
+### Changed
+
+- **The sidebar group holding the current screen opens.** A group whose link matches the current address expands when
+  it becomes current and folds again when the current screen moves elsewhere — a group the user opened or folded by
+  hand stays as they left it. The group header now states its state with `aria-expanded`.
+- Links inside a sidebar group draw no icon unless one is given. The default icon keeps a link visible when the sidebar
+  is slim, and inside a group the group's own icon does that.
+
+### Fixed
+
+- The sidebar header is no taller than its content: the collapse button's icon is 20px, but the size was set on the
+  button, so its em-based height and padding grew with it (the header was 85px tall). The header's vertical padding is
+  also 12px instead of 16px, and the mobile header matches it.
+- The open mobile panel starts below the mobile header. It used to start at the top of the screen and rely on its own
+  header, hidden under the mobile header, being the same height — when the two differed, the first menu item slid
+  under the mobile header, and the hidden header's toggle still took keyboard focus. The panel no longer draws that
+  duplicate header, and a popover opened inside the panel no longer flips up under the mobile header.
+
+## [0.56.2] - 2026-10-17
+
+### Fixed
+
+- The unsaved-changes guard still asks when its dialog cannot load — a deployment replaced the hashed chunk while a tab
+  with an edited form stayed open, or the network is gone. The import failure reached the router as «the guard threw»,
+  so the screen stayed and every navigation was silently blocked; it now asks the same question with `window.confirm`
+  (and warns). The dialog module also loads when the first screen registers a check, not at the moment of asking.
+
 ## [0.56.1] - 2026-10-17
 
 ### Fixed

package/dist/App.js

@@ -7,7 +7,7 @@ import { setDefaultBaseUrl as a } from "@iyulab/components/dist/utilities/icons.
 import { Theme as o } from "@iyulab/components/dist/utilities/Theme.js";
 import { Toast as s } from "@iyulab/components/dist/utilities/Toast.js";
 import { Locale as c } from "@iyulab/components/dist/utilities/Locale.js";
-//#region src/App.ts
+// src/App.ts
 var l = "\n:where(body) { margin: 0; }\n@media screen {\n  :where(body) { width: 100vw; height: 100vh; }\n}\n", u;
 function d() {
 	if (!u) {
@@ -148,5 +148,4 @@ var f = class l {
 		return e.appendChild(n), "updateComplete" in n && await n.updateComplete, n;
 	}
 }.instance;
-//#endregion
 export { f as app };

package/dist/_virtual/{_@oxc-project_runtime@0.154.0 → _@oxc-project_runtime@0.155.0}/helpers/esm/decorate.js

@@ -1,9 +1,8 @@
-//#region \0@oxc-project+runtime@0.154.0/helpers/esm/decorate.js
+// \0@oxc-project+runtime@0.155.0/helpers/esm/decorate.js
 function e(e, t, n, r) {
 	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
 	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
 	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
 	return i > 3 && a && Object.defineProperty(t, n, a), a;
 }
-//#endregion
 export { e as default };

package/dist/_virtual/{_@oxc-project_runtime@0.154.0 → _@oxc-project_runtime@0.155.0}/helpers/esm/decorateMetadata.js

@@ -1,6 +1,5 @@
-//#region \0@oxc-project+runtime@0.154.0/helpers/esm/decorateMetadata.js
+// \0@oxc-project+runtime@0.155.0/helpers/esm/decorateMetadata.js
 function e(e, t) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
 }
-//#endregion
 export { e as default };

package/dist/components/ActionBar.js

@@ -1,11 +1,11 @@
-import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { slotHasContent as r } from "../internals/slotted.js";
 import { styles as i } from "./ActionBar.styles.js";
 import { html as a } from "lit";
 import { customElement as o, property as s, state as c } from "lit/decorators.js";
-//#region src/components/ActionBar.ts
+// src/components/ActionBar.ts
 var l = class extends n {
 	constructor(...e) {
 		super(...e), this.sticky = !1, this.hasDanger = !1, this.hasSummary = !1;
@@ -33,5 +33,4 @@ 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), 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

@@ -1,5 +1,5 @@
 import { css as e } from "lit";
-//#region src/components/ActionBar.styles.ts
+// src/components/ActionBar.styles.ts
 var t = e`
   :host {
     display: flex;
@@ -71,5 +71,4 @@ var t = e`
     padding: var(--u-space-md, 12px) var(--action-bar-padding-inline, 0);
   }
 `;
-//#endregion
 export { t as styles };

package/dist/components/EmptyState.js

@@ -1,12 +1,12 @@
-import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { slotHasContent as r } from "../internals/slotted.js";
 import { getLocaleStrings as i } from "../internals/locale.js";
 import { styles as a } from "./EmptyState.styles.js";
 import { html as o, nothing as s } from "lit";
 import { customElement as c, property as l, state as u } from "lit/decorators.js";
-//#region src/components/EmptyState.ts
+// src/components/EmptyState.ts
 var d = class extends n {
 	constructor(...e) {
 		super(...e), this.variant = "no-data", this.title = "", this.description = "", this.locale = "", this.hasActions = !1;
@@ -68,5 +68,4 @@ t([l({
 	type: String,
 	reflect: !0
 }), e("design:type", Object)], 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/EmptyState.styles.js

@@ -1,5 +1,5 @@
 import { css as e } from "lit";
-//#region src/components/EmptyState.styles.ts
+// src/components/EmptyState.styles.ts
 var t = e`
   :host {
     display: flex;
@@ -54,5 +54,4 @@ var t = e`
     display: none;
   }
 `;
-//#endregion
 export { t as styles };

package/dist/components/GroupBox.js

@@ -1,12 +1,12 @@
-import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { slotHasContent as r } from "../internals/slotted.js";
 import { styles as i } from "./GroupBox.styles.js";
 import { html as a, nothing as o } from "lit";
 import { customElement as s, property as c, state as l } from "lit/decorators.js";
 import { html as u, literal as d } from "lit/static-html.js";
-//#region src/components/GroupBox.ts
+// src/components/GroupBox.ts
 var f, p = {
 	2: d`h2`,
 	3: d`h3`,
@@ -52,5 +52,4 @@ t([c({ type: String }), e("design:type", Object)], m.prototype, "title", void 0)
 	type: Number,
 	reflect: !0
 }), e("design:type", Object)], m.prototype, "level", void 0), t([l(), e("design:type", Object)], m.prototype, "hasActions", void 0), m = f = t([s("u-group-box")], m);
-//#endregion
 export { m as GroupBox };

package/dist/components/GroupBox.styles.js

@@ -1,5 +1,5 @@
 import { css as e } from "lit";
-//#region src/components/GroupBox.styles.ts
+// src/components/GroupBox.styles.ts
 var t = e`
   :host {
     display: block;
@@ -123,5 +123,4 @@ var t = e`
     padding-top: var(--u-space-md, 12px);
   }
 `;
-//#endregion
 export { t as styles };

package/dist/components/InfoField.d.ts

@@ -29,10 +29,13 @@ export declare function isBlank(v: unknown): boolean;
  *
  * @slot - 값(문자열 `value` 대신 — 슬롯이 이긴다)
  * @slot trend-icon - 추세 줄 앞의 상태 표시(예: 주의 아이콘). 추세 줄이 있을 때(`trend` · `trendLabel`) 그린다.
+ * @slot visual - 값과 같은 줄 끝의 작은 그림(추세 미니 차트 · 진행 고리 등). 값을 대신하지 않는다 — 장식이면 `aria-hidden="true"`,
+ *   그 자체로 정보면 자기 이름(`role="img"` + `aria-label`)을 준다. 비면 자리를 차지하지 않는다.
  * @csspart label - 라벨
  * @csspart value - 값
  * @csspart unit - 단위
  * @csspart trend - 추세 줄
+ * @csspart visual - `visual` 슬롯을 담는 상자
  * @csspart description - 값 아래 보조 줄(값이 비고 `blankReason` 이 있으면 그 사유)
  * @cssprop --info-field-xl-size - `size="xl"` 값의 글자 크기(기본 `--u-text-display-size`)
  */
@@ -137,6 +140,8 @@ export declare class InfoField extends StyledElement<ElementParts> {
      */
     private nameSlottedWidgets;
     protected updated(changed: PropertyValues): void;
+    /** `visual` 슬롯에 든 것이 있는가 — 비면 그 상자를 그리지 않는다(값 옆에 빈 간격을 남기지 않게). */
+    private hasVisual;
     private get hasSlotted();
     private formatValue;
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/InfoField.js

@@ -1,20 +1,20 @@
-import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { styles as r } from "./InfoField.styles.js";
 import { html as i } from "lit";
-import { customElement as a, property as o } from "lit/decorators.js";
-import { formatCurrency as s, formatDate as c, formatNumber as l } from "@iyulab/components/dist/utilities/format.js";
-//#region src/components/InfoField.ts
-function u(e) {
+import { customElement as a, property as o, state as s } from "lit/decorators.js";
+import { formatCurrency as c, formatDate as l, formatNumber as u } from "@iyulab/components/dist/utilities/format.js";
+// src/components/InfoField.ts
+function d(e) {
 	return e === "up" ? "positive" : e === "down" ? "negative" : "neutral";
 }
-function d(e) {
+function f(e) {
 	return e == null || typeof e == "string" && e.trim() === "";
 }
-var f = class extends n {
+var p = class extends n {
 	constructor(...e) {
-		super(...e), this.label = "", this.blank = "—", this.numeric = !1, this.size = "default", this.appearance = "plain", this.namedWidgets = /* @__PURE__ */ new WeakMap();
+		super(...e), this.label = "", this.blank = "—", this.numeric = !1, this.size = "default", this.appearance = "plain", this.namedWidgets = /* @__PURE__ */ new WeakMap(), this.hasVisual = !1;
 	}
 	static {
 		this.styles = [super.styles, r];
@@ -36,13 +36,20 @@ var f = class extends n {
 		return [...this.childNodes].some((e) => e.nodeType === Node.ELEMENT_NODE ? !e.hasAttribute("slot") : e.nodeType === Node.TEXT_NODE && (e.textContent ?? "").trim() !== "");
 	}
 	formatValue() {
-		return this.format === "currency" ? this.currency ? s(Number(this.value), this.currency) : l(Number(this.value)) : this.format === "number" ? l(Number(this.value)) : this.format === "date" ? c(this.value) : String(this.value);
+		return this.format === "currency" ? this.currency ? c(Number(this.value), this.currency) : u(Number(this.value)) : this.format === "number" ? u(Number(this.value)) : this.format === "date" ? l(this.value) : String(this.value);
 	}
 	render() {
-		let e = !this.hasSlotted && d(this.value), t = e && this.blankReason ? this.blankReason : void 0, n = this.numeric || this.format === "number" || this.format === "currency", r = this.trend !== void 0 || this.trendLabel !== void 0, a = this.tone ?? u(this.trend), o = this.trend === "up" ? "▲" : this.trend === "down" ? "▼" : "", s = !e && this.unit ? i`<span class="unit" part="unit">${this.unit}</span>` : "";
+		let e = !this.hasSlotted && f(this.value), t = e && this.blankReason ? this.blankReason : void 0, n = this.numeric || this.format === "number" || this.format === "currency", r = this.trend !== void 0 || this.trendLabel !== void 0, a = this.tone ?? d(this.trend), o = this.trend === "up" ? "▲" : this.trend === "down" ? "▼" : "", s = !e && this.unit ? i`<span class="unit" part="unit">${this.unit}</span>` : "";
 		return i`
       <div class="label" part="label">${this.label}</div>
-      <div class="value ${n ? "numeric" : ""} ${e ? "blank" : ""} ${t ? "reasoned" : ""} tone-${a}" part="value">${this.hasSlotted ? i`<slot @slotchange=${() => void this.nameSlottedWidgets()}></slot>` : e ? this.blank : this.formatValue()}${s}</div>
+      <div class="value-row">
+        <div class="value ${n ? "numeric" : ""} ${e ? "blank" : ""} ${t ? "reasoned" : ""} tone-${a}" part="value">${this.hasSlotted ? i`<slot @slotchange=${() => void this.nameSlottedWidgets()}></slot>` : e ? this.blank : this.formatValue()}${s}</div>
+        <div class="visual" part="visual" ?hidden=${!this.hasVisual}>
+          <slot name="visual" @slotchange=${(e) => {
+			this.hasVisual = e.target.assignedElements().length > 0;
+		}}></slot>
+        </div>
+      </div>
       ${r ? i`
         <div class="trend tone-${a}" part="trend">
           <slot name="trend-icon"></slot>${o ? i`<span aria-hidden="true">${o}</span> ` : ""}${this.trendLabel ?? ""}
@@ -52,18 +59,17 @@ var f = class extends n {
     `;
 	}
 };
-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({
+t([o({ type: String }), e("design:type", Object)], p.prototype, "label", void 0), t([o({ type: String }), e("design:type", Object)], p.prototype, "value", void 0), t([o({ type: String }), e("design:type", Object)], p.prototype, "blank", void 0), t([o({ type: Boolean }), e("design:type", Object)], p.prototype, "numeric", void 0), t([o({ type: String }), e("design:type", Object)], p.prototype, "format", void 0), t([o({ type: String }), e("design:type", String)], p.prototype, "currency", void 0), t([o({ type: String }), e("design:type", String)], p.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({
+}), e("design:type", Object)], p.prototype, "size", void 0), t([o({ type: String }), e("design:type", Object)], p.prototype, "trend", void 0), t([o({ type: String }), e("design:type", String)], p.prototype, "trendLabel", void 0), t([o({
 	type: String,
 	reflect: !0
-}), e("design:type", Object)], f.prototype, "tone", void 0), t([o({
+}), e("design:type", Object)], p.prototype, "tone", void 0), t([o({
 	type: String,
 	reflect: !0
-}), e("design:type", Object)], f.prototype, "appearance", void 0), t([o({
+}), e("design:type", Object)], p.prototype, "appearance", void 0), t([o({
 	type: String,
 	attribute: "blank-reason"
-}), e("design:type", String)], f.prototype, "blankReason", 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 };
+}), e("design:type", String)], p.prototype, "blankReason", void 0), t([o({ type: String }), e("design:type", String)], p.prototype, "description", void 0), t([s(), e("design:type", Object)], p.prototype, "hasVisual", void 0), p = t([a("u-info-field")], p);
+export { p as InfoField, f as isBlank };

package/dist/components/InfoField.styles.js

@@ -1,5 +1,5 @@
 import { css as e } from "lit";
-//#region src/components/InfoField.styles.ts
+// src/components/InfoField.styles.ts
 var t = e`
   :host {
     display: block;
@@ -14,7 +14,26 @@ var t = e`
     margin-bottom: var(--u-space-3xs, 2px);
   }
 
+  
+  .value-row {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: var(--u-space-sm, 8px);
+    min-width: 0;
+  }
+  .visual {
+    flex: none;
+    display: flex;
+    align-items: flex-end;
+  }
+  .visual[hidden] {
+    display: none;
+  }
+
   .value {
+    flex: 1 1 auto;
+    min-width: 0;
     font-size: var(--u-text-body-size, 14px);
     font-weight: var(--u-text-label-weight, 600);
     line-height: var(--u-text-body-leading, 1.6);
@@ -156,5 +175,4 @@ var t = e`
     color: var(--u-txt-color-weak, #616161);
   }
 `;
-//#endregion
 export { t as styles };

package/dist/components/InfoSection.js

@@ -1,10 +1,10 @@
-import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { styles as r } from "./InfoSection.styles.js";
 import { html as i } from "lit";
 import { customElement as a, property as o } from "lit/decorators.js";
-//#region src/components/InfoSection.ts
+// src/components/InfoSection.ts
 var s = class extends n {
 	constructor(...e) {
 		super(...e), this.min = 160, this.layout = "grid";
@@ -22,5 +22,4 @@ t([o({ type: Number }), e("design:type", Object)], s.prototype, "min", void 0),
 	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

@@ -1,5 +1,5 @@
 import { css as e } from "lit";
-//#region src/components/InfoSection.styles.ts
+// src/components/InfoSection.styles.ts
 var t = e`
   :host {
     display: block;
@@ -32,5 +32,4 @@ var t = e`
     background: var(--u-bg-color, #FFFFFF);
   }
 `;
-//#endregion
 export { t as styles };

package/dist/components/MasterDetailLayout.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { slotHasContent as r } from "../internals/slotted.js";
 import { getLocaleStrings as i } from "../internals/locale.js";
@@ -8,7 +8,7 @@ import { html as o } from "lit";
 import { customElement as s, property as c, state as l } from "lit/decorators.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";
 import "@iyulab/components/dist/components/button/UButton.js";
-//#region src/components/MasterDetailLayout.ts
+// src/components/MasterDetailLayout.ts
 var u = class extends n {
 	constructor(...e) {
 		super(...e), this.masterSize = "22rem", this.overlayBreakpoint = 760, this.locale = "", this.hasDetail = !1, this.hasPlaceholder = !1, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : void 0, this.scroller = null, this.detailFrame = 0, this.scheduleDetailMax = () => {
@@ -81,5 +81,4 @@ function d(e) {
 		if (/(auto|scroll|hidden|overlay)/.test(getComputedStyle(t).overflowY)) return t;
 	}
 }
-//#endregion
 export { u as MasterDetailLayout };

package/dist/components/MasterDetailLayout.styles.js

@@ -1,5 +1,5 @@
 import { css as e } from "lit";
-//#region src/components/MasterDetailLayout.styles.ts
+// src/components/MasterDetailLayout.styles.ts
 var t = e`
   :host {
     display: flex;
@@ -165,5 +165,4 @@ var t = e`
     }
   }
 `;
-//#endregion
 export { t as styles };

package/dist/components/PageHeader.js

@@ -1,12 +1,12 @@
-import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { slotHasContent as r } from "../internals/slotted.js";
 import { getLocaleStrings as i } from "../internals/locale.js";
 import { styles as a } from "./PageHeader.styles.js";
 import { html as o, nothing as s } from "lit";
 import { customElement as c, property as l, state as u } from "lit/decorators.js";
-//#region src/components/PageHeader.ts
+// src/components/PageHeader.ts
 var d = class extends n {
 	constructor(...e) {
 		super(...e), this.title = "", this.backLabel = "", this.locale = "", this.hasEyebrow = !1, this.hasStatus = !1, this.hasActions = !1;
@@ -45,5 +45,4 @@ t([l({ type: String }), e("design:type", Object)], d.prototype, "title", void 0)
 	type: String,
 	attribute: "back-label"
 }), e("design:type", Object)], d.prototype, "backLabel", void 0), t([l({ type: String }), e("design:type", Object)], d.prototype, "locale", void 0), t([u(), e("design:type", Object)], d.prototype, "hasEyebrow", void 0), t([u(), e("design:type", Object)], d.prototype, "hasStatus", void 0), t([u(), e("design:type", Object)], d.prototype, "hasActions", void 0), d = t([c("u-page-header")], d);
-//#endregion
 export { d as PageHeader };

package/dist/components/PageHeader.styles.js

@@ -1,5 +1,5 @@
 import { css as e } from "lit";
-//#region src/components/PageHeader.styles.ts
+// src/components/PageHeader.styles.ts
 var t = e`
   :host {
     display: flex;
@@ -111,5 +111,4 @@ var t = e`
     display: none;
   }
 `;
-//#endregion
 export { t as styles };

package/dist/components/SidebarButton.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { DEFAULT_NAV_ICON as r } from "../internals/nav-icon.js";
 import { styles as i } from "./SidebarButton.styles.js";
@@ -8,7 +8,7 @@ import { customElement as o, property as s } from "lit/decorators.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";
 import { ifDefined as c } from "lit/directives/if-defined.js";
 import "@iyulab/components/dist/components/avatar/UAvatar.js";
-//#region src/components/SidebarButton.ts
+// src/components/SidebarButton.ts
 var l = class extends n {
 	constructor(...e) {
 		super(...e), this.compact = !1, this.expanded = !1;
@@ -44,5 +44,4 @@ 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), t([s({ type: Object }), e("design:type", Object)], l.prototype, "avatar", void 0), t([s({ type: String }), e("design:type", Object)], l.prototype, "description", void 0), l = t([o("u-sidebar-button")], l);
-//#endregion
 export { l as SidebarButton };

package/dist/components/SidebarButton.styles.js

@@ -1,5 +1,5 @@
 import { css as e } from "lit";
-//#region src/components/SidebarButton.styles.ts
+// src/components/SidebarButton.styles.ts
 var t = e`
   :host {
     display: block;
@@ -105,5 +105,4 @@ var t = e`
     border: 0;
   }
 `;
-//#endregion
 export { t as styles };

package/dist/components/SidebarGroup.d.ts

@@ -1,3 +1,4 @@
+import { PropertyValues } from 'lit';
 import { DirectiveResult } from 'lit/directive.js';
 import { StyledElement, StyleMap } from '../internals/StyledElement.js';
 import { SidebarLinkConfig } from './SidebarLink.js';
@@ -31,6 +32,14 @@ export declare class SidebarGroup extends StyledElement<ElementParts> {
     lib?: string;
     /** 네비게이션 아이템 데이터 */
     label?: string | DirectiveResult;
+    /** 현재 화면 때문에 스스로 펼친 상태인가 — 사용자가 머리를 누르면 그 뒤로는 사용자의 상태다. */
+    private openedForCurrent;
+    /**
+     * 현재 화면을 품은 묶음은 펼친다 — 접힌 채면 «지금 어디인가» 가 메뉴에 보이지 않는다.
+     * 그렇게 스스로 연 묶음은 현재 화면이 떠나면 다시 접는다(옮겨 다닐수록 메뉴가 길어지지 않게).
+     * 사용자가 연 묶음 · 사용자가 다시 접은 묶음은 건드리지 않는다.
+     */
+    protected willUpdate(changed: PropertyValues<this>): void;
     render(): import('lit-html').TemplateResult<1>;
     /** 버튼 클릭 핸들러 */
     private handleButtonClick;

package/dist/components/SidebarGroup.js

@@ -1,27 +1,31 @@
-import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { DEFAULT_NAV_ICON as r } from "../internals/nav-icon.js";
 import { SidebarLink as i } from "./SidebarLink.js";
 import { styles as a } from "./SidebarGroup.styles.js";
-import { html as o } from "lit";
-import { customElement as s, property as c } from "lit/decorators.js";
+import { html as o, nothing as s } from "lit";
+import { customElement as c, property as l } from "lit/decorators.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";
-//#region src/components/SidebarGroup.ts
-var l = class extends n {
+// src/components/SidebarGroup.ts
+var u = class extends n {
 	constructor(...e) {
-		super(...e), this.compact = !1, this.selected = !1, this.collapsed = !0, this.handleButtonClick = (e) => {
-			this.compact ? ((this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: !0 }).find((e) => e instanceof i))?.renderRoot.querySelector("u-link"))?.click() : this.collapsed = !this.collapsed;
+		super(...e), this.compact = !1, this.selected = !1, this.collapsed = !0, this.openedForCurrent = !1, this.handleButtonClick = (e) => {
+			this.compact ? ((this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: !0 }).find((e) => e instanceof i))?.renderRoot.querySelector("u-link"))?.click() : (this.collapsed = !this.collapsed, this.openedForCurrent = !1);
 		};
 	}
 	static {
 		this.styles = [super.styles, a];
 	}
+	willUpdate(e) {
+		e.has("selected") && (this.selected && this.collapsed ? (this.collapsed = !1, this.openedForCurrent = !0) : !this.selected && this.openedForCurrent && (this.collapsed = !0, this.openedForCurrent = !1));
+	}
 	render() {
 		return o`
       <button part="header"
         ?compact=${this.compact}
         ?selected=${this.selected}
+        aria-expanded=${this.compact ? s : String(!this.collapsed)}
         @click=${this.handleButtonClick}>
         <!--
           ⚠ ?hidden 을 걸지 않는다. 접힌 상태에서는 라벨과 캐럿이 모두 숨으므로,
@@ -51,15 +55,14 @@ var l = class extends n {
     `;
 	}
 };
-t([c({
+t([l({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Boolean)], l.prototype, "compact", void 0), t([c({
+}), e("design:type", Boolean)], u.prototype, "compact", void 0), t([l({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Boolean)], l.prototype, "selected", void 0), t([c({
+}), e("design:type", Boolean)], u.prototype, "selected", void 0), t([l({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Boolean)], l.prototype, "collapsed", void 0), t([c({ type: String }), e("design:type", String)], l.prototype, "icon", void 0), t([c({ type: String }), e("design:type", String)], l.prototype, "lib", void 0), t([c({ type: String }), e("design:type", Object)], l.prototype, "label", void 0), l = t([s("u-sidebar-group")], l);
-//#endregion
-export { l as SidebarGroup };
+}), e("design:type", Boolean)], u.prototype, "collapsed", void 0), t([l({ type: String }), e("design:type", String)], u.prototype, "icon", void 0), t([l({ type: String }), e("design:type", String)], u.prototype, "lib", void 0), t([l({ type: String }), e("design:type", Object)], u.prototype, "label", void 0), u = t([c("u-sidebar-group")], u);
+export { u as SidebarGroup };

package/dist/components/SidebarGroup.styles.js

@@ -1,5 +1,5 @@
 import { css as e } from "lit";
-//#region src/components/SidebarGroup.styles.ts
+// src/components/SidebarGroup.styles.ts
 var t = e`
   :host {
     display: flex;
@@ -113,5 +113,4 @@ var t = e`
     border: 0;
   }
 `;
-//#endregion
 export { t as styles };

package/dist/components/SidebarLink.d.ts

@@ -65,6 +65,12 @@ export declare class SidebarLink extends StyledElement<ElementParts> {
     target?: '_self' | '_blank';
     /** 항목 끝의 건수 — 처리할 일이 있을 때만. `undefined`·빈 문자열이면 그리지 않는다. */
     count?: number | string;
+    /**
+     * 묶음(`u-sidebar-group`) 안의 링크인가. 기본 아이콘은 사이드바가 접혀 라벨이 숨을 때 항목이 빈 줄이 되지 않게 하는
+     * 것인데, 묶음 안 링크는 접히면 묶음 머리가 대신 남는다 — 그래서 아이콘을 주지 않은 묶음 안 링크에는 폴백을 그리지 않는다.
+     */
+    private nested;
+    connectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
 }
 export {};