@iyulab/modern-app 0.56.1 → 0.57.0

package/dist/components/SidebarLink.js

@@ -1,21 +1,24 @@
-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 { getLocaleStrings as r } from "../internals/locale.js";
 import { DEFAULT_NAV_ICON as i } from "../internals/nav-icon.js";
 import { styles as a } from "./SidebarLink.styles.js";
 import "@iyulab/router";
 import { html as o, nothing as s } from "lit";
-import { customElement as c, property as l } from "lit/decorators.js";
+import { customElement as c, property as l, state as u } from "lit/decorators.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";
-//#region src/components/SidebarLink.ts
-var u = class extends n {
+// src/components/SidebarLink.ts
+var d = class extends n {
 	constructor(...e) {
-		super(...e), this.selected = !1, this.compact = !1;
+		super(...e), this.selected = !1, this.compact = !1, this.nested = !1;
 	}
 	static {
 		this.styles = [super.styles, a];
 	}
+	connectedCallback() {
+		super.connectedCallback(), this.nested = this.parentElement?.localName === "u-sidebar-group";
+	}
 	render() {
 		return o`
       <u-link
@@ -25,11 +28,11 @@ var u = class extends n {
         aria-current=${this.selected ? "page" : s}
       >
         <div class="container" part="base" ?compact=${this.compact}>
-          <u-icon part="icon"
-            .lib=${this.lib}
-            .name=${this.icon}
-            .fallback=${i}
-          ></u-icon>
+          ${this.icon || !this.nested ? o`<u-icon part="icon"
+                .lib=${this.lib}
+                .name=${this.icon}
+                .fallback=${i}
+              ></u-icon>` : s}
           <span part="label" ?compact=${this.compact}>
             ${this.label}
           </span>
@@ -43,6 +46,5 @@ var u = class extends n {
 t([l({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Object)], u.prototype, "selected", void 0), t([l({ type: Boolean }), e("design:type", Object)], u.prototype, "compact", 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), t([l({ type: String }), e("design:type", String)], u.prototype, "href", void 0), t([l({ type: String }), e("design:type", Object)], u.prototype, "pattern", void 0), t([l({ type: String }), e("design:type", String)], u.prototype, "navigate", void 0), t([l({ type: String }), e("design:type", String)], u.prototype, "target", void 0), t([l(), e("design:type", Object)], u.prototype, "count", void 0), u = t([c("u-sidebar-link")], u);
-//#endregion
-export { u as SidebarLink };
+}), e("design:type", Object)], d.prototype, "selected", void 0), t([l({ type: Boolean }), e("design:type", Object)], d.prototype, "compact", void 0), t([l({ type: String }), e("design:type", String)], d.prototype, "icon", void 0), t([l({ type: String }), e("design:type", String)], d.prototype, "lib", void 0), t([l({ type: String }), e("design:type", Object)], d.prototype, "label", void 0), t([l({ type: String }), e("design:type", String)], d.prototype, "href", void 0), t([l({ type: String }), e("design:type", Object)], d.prototype, "pattern", void 0), t([l({ type: String }), e("design:type", String)], d.prototype, "navigate", void 0), t([l({ type: String }), e("design:type", String)], d.prototype, "target", void 0), t([l(), e("design:type", Object)], d.prototype, "count", void 0), t([u(), e("design:type", Object)], d.prototype, "nested", void 0), d = t([c("u-sidebar-link")], d);
+export { d as SidebarLink };

package/dist/components/SidebarLink.styles.js

@@ -1,5 +1,5 @@
 import { css as e } from "lit";
-//#region src/components/SidebarLink.styles.ts
+// src/components/SidebarLink.styles.ts
 var t = e`
   :host {
     
@@ -124,5 +124,4 @@ var t = e`
     white-space: nowrap;
   }
 `;
-//#endregion
 export { t as styles };

package/dist/components/SidebarSection.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 "./SidebarSection.styles.js";
 import { html as i } from "lit";
 import { customElement as a, property as o } from "lit/decorators.js";
-//#region src/components/SidebarSection.ts
+// src/components/SidebarSection.ts
 var s = class extends n {
 	constructor(...e) {
 		super(...e), this.compact = !1;
@@ -30,5 +30,4 @@ var s = class extends n {
 	}
 };
 t([o({ type: Boolean }), e("design:type", Object)], s.prototype, "compact", void 0), t([o({ type: String }), e("design:type", Object)], s.prototype, "mainTitle", void 0), t([o({ type: String }), e("design:type", Object)], s.prototype, "subTitle", void 0), s = t([a("u-sidebar-section")], s);
-//#endregion
 export { s as SidebarSection };

package/dist/components/SidebarSection.styles.js

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

package/dist/components/Timeline.js

@@ -1,10 +1,10 @@
-import e from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { StyledElement as t } from "../internals/StyledElement.js";
 import "./TimelineItem.js";
 import { styles as n } from "./Timeline.styles.js";
 import { html as r } from "lit";
 import { customElement as i } from "lit/decorators.js";
-//#region src/components/Timeline.ts
+// src/components/Timeline.ts
 var a = class extends t {
 	static {
 		this.styles = [super.styles, n];
@@ -17,5 +17,4 @@ var a = class extends t {
 	}
 };
 a = e([i("u-timeline")], a);
-//#endregion
 export { a as Timeline };

package/dist/components/Timeline.styles.js

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

package/dist/components/TimelineItem.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 { styles as i } from "./TimelineItem.styles.js";
@@ -7,7 +7,7 @@ import { html as a, nothing as o } from "lit";
 import { customElement as s, property as c, state as l } from "lit/decorators.js";
 import { formatDate as u } from "@iyulab/components/dist/utilities/format.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";
-//#region src/components/TimelineItem.ts
+// src/components/TimelineItem.ts
 var d = class extends n {
 	constructor(...e) {
 		super(...e), this.heading = "", this.datetime = "", this.color = "neutral", this.hasBody = !1;
@@ -52,5 +52,4 @@ t([c({ type: String }), e("design:type", Object)], d.prototype, "heading", void
 	type: String,
 	reflect: !0
 }), e("design:type", Object)], d.prototype, "color", void 0), t([c({ type: String }), e("design:type", String)], d.prototype, "icon", void 0), t([c({ type: String }), e("design:type", String)], d.prototype, "lib", void 0), t([l(), e("design:type", Object)], d.prototype, "hasBody", void 0), d = t([s("u-timeline-item")], d);
-//#endregion
 export { d as TimelineItem };

package/dist/components/TimelineItem.styles.js

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

package/dist/components/Wizard.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 { getLocaleStrings as r } from "../internals/locale.js";
 import { styles as i } from "./Wizard.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 "@iyulab/components/dist/components/button/UButton.js";
-//#region src/components/Wizard.ts
+// src/components/Wizard.ts
 var u = class extends n {
 	constructor(...e) {
 		super(...e), this.steps = [], this.active = 0, this.orientation = "vertical", this.linear = !0, this.locale = "", this.announcement = "", this.handleTabKeydown = (e, t) => {
@@ -118,5 +118,4 @@ t([c({
 	type: Boolean,
 	reflect: !0
 }), e("design:type", Object)], u.prototype, "linear", void 0), t([c({ type: String }), e("design:type", Object)], u.prototype, "locale", void 0), t([l(), e("design:type", Object)], u.prototype, "announcement", void 0), u = t([s("u-wizard")], u);
-//#endregion
 export { u as Wizard };

package/dist/components/Wizard.styles.js

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

package/dist/defaultFallback.js

@@ -1,6 +1,6 @@
 import { getLocaleStrings as e } from "./internals/locale.js";
 import { EmptyState as t } from "./components/EmptyState.js";
-//#region src/defaultFallback.ts
+// src/defaultFallback.ts
 function n(e) {
 	switch (String(e.code)) {
 		case "403": return "no-access";
@@ -23,5 +23,4 @@ var i = {
 		return i.variant = n(e.error), i.variant === "error" && (i.title = r(e), i.description = e.error.message), i;
 	}
 };
-//#endregion
 export { i as defaultFallback, n as variantOf };

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export type { SidebarPermissionGuard } from './layouts/SidebarPermission';
 export type { RouteConfig, RouteContext, FallbackRouteConfig, RouteLeaveContext } from '@iyulab/router';
 export { RouteError, NotFoundError, AccessDeniedError, ContentLoadError, ContentRenderError, OutletMissingError, } from '@iyulab/router';
 export { defaultFallback } from './defaultFallback.js';
-export type { SidebarIconsConfig, SidebarLayoutConfig, SidebarItem, SidebarLogoConfig, SidebarLinkConfig, SidebarSectionConfig, SidebarGroupConfig, SidebarButtonConfig, SidebarMenuConfig, SidebarMenuItemConfig, SidebarHtmlConfig, SidebarState, } from './layouts/SidebarLayout.types';
+export type { SidebarIconsConfig, SidebarLayoutConfig, SidebarItem, SidebarLogoConfig, SidebarLogoIcon, SidebarLinkConfig, SidebarSectionConfig, SidebarGroupConfig, SidebarButtonConfig, SidebarMenuConfig, SidebarMenuItemConfig, SidebarHtmlConfig, SidebarState, } from './layouts/SidebarLayout.types';
 export type { SidebarAvatar } from './components/SidebarButton.js';
 export type { SidebarLayoutEventMap } from './layouts/SidebarLayout.js';
 export { filterSidebarItems } from './layouts/filterSidebarItems.js';

package/dist/index.js

@@ -16,7 +16,6 @@ import { MasterDetailLayout as x } from "./components/MasterDetailLayout.js";
 import { Wizard as S } from "./components/Wizard.js";
 import { translate as C } from "./translate.js";
 import { AccessDeniedError as w, ContentLoadError as T, ContentRenderError as E, NotFoundError as D, OutletMissingError as O, RouteError as k } from "@iyulab/router";
-//#region src/index.ts
+// src/index.ts
 var A = d;
-//#endregion
 export { w as AccessDeniedError, b as ActionBar, T as ContentLoadError, E as ContentRenderError, i as EmptyState, m as GroupBox, g as InfoField, h as InfoSection, x as MasterDetailLayout, D as NotFoundError, O as OutletMissingError, p as PageHeader, k as RouteError, e as ScreenObserver, y as Timeline, v as TimelineItem, o as UnsavedChangesController, S as Wizard, d as app, s as confirmDiscardChanges, A as default, a as defaultFallback, f as filterSidebarItems, t as getDefaultLocale, n as getLocaleStrings, c as hasUnsavedChanges, _ as isBlank, r as modernAppLocale, l as trackUnsavedChanges, C as translate, u as unsavedChangesGuard };

package/dist/internals/ScreenObserver.js

@@ -1,4 +1,4 @@
-//#region src/internals/ScreenObserver.ts
+// src/internals/ScreenObserver.ts
 var e = class {
 	constructor(e) {
 		this._breakpoints = e.breakpoints, this._observer = new ResizeObserver((e) => {
@@ -19,5 +19,4 @@ var e = class {
 		return e < t ? "small" : e < n ? "medium" : "large";
 	}
 };
-//#endregion
 export { e as ScreenObserver };

package/dist/internals/StyledElement.js

@@ -1,8 +1,8 @@
-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 { property as n } from "lit/decorators.js";
 import { UElement as r } from "@iyulab/components/dist/components/UElement.js";
-//#region src/internals/StyledElement.ts
+// src/internals/StyledElement.ts
 var i = class extends r {
 	static {
 		this.styles = super.styles;
@@ -39,5 +39,4 @@ t([n({
 	type: Object,
 	attribute: !1
 }), e("design:type", Object)], i.prototype, "styles", void 0);
-//#endregion
 export { i as StyledElement };

package/dist/internals/locale.js

@@ -1,5 +1,5 @@
 import { Locale as e } from "@iyulab/components/dist/utilities/Locale.js";
-//#region src/internals/locale.ts
+// src/internals/locale.ts
 var t = {
 	back: "Back",
 	noDataTitle: "Nothing here yet",
@@ -98,5 +98,4 @@ function a() {
 		wizardStepAnnouncement: (e, t, n) => `Step ${e} of ${t}: ${n}`
 	};
 }
-//#endregion
 export { a as getDefaultLocale, i as getLocaleStrings, n as modernAppLocale };

package/dist/internals/nav-icon.js

@@ -1,4 +1,3 @@
-//#region src/internals/nav-icon.ts
+// src/internals/nav-icon.ts
 var e = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5 8 5.961 14.154 3.5zM15 4.239l-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464z\"/></svg>";
-//#endregion
 export { e as DEFAULT_NAV_ICON };

package/dist/internals/slotted.js

@@ -1,6 +1,5 @@
-//#region src/internals/slotted.ts
+// src/internals/slotted.ts
 function e(e) {
 	return e ? e.assignedNodes({ flatten: !0 }).some((e) => e.nodeType !== Node.TEXT_NODE || (e.textContent ?? "").trim() !== "") : !1;
 }
-//#endregion
 export { e as slotHasContent };

package/dist/layouts/SidebarLayout.d.ts

@@ -40,6 +40,15 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
      */
     private mainTabStop;
     private mainSizeObserver?;
+    /**
+     * 모바일 머리 줄(`.mobile-header`)의 실제 높이 — 모바일 패널이 그 아래에서 시작한다(`--_mobile-header-block-size`).
+     * 종전에는 패널이 맨 위(0)에서 시작하고 패널 안의 자기 머리 줄이 모바일 머리 줄 밑에 깔려 높이를 채웠다. 두 머리 줄의
+     * 높이가 같다는 우연에 기댄 배치라 한쪽만 바뀌어도 내용이 머리 줄 밑으로 들어갔고, 깔린 머리 줄의 버튼은 보이지 않는데
+     * Tab 으로 포커스가 갔다. 그리고 패널이 덮인 자리까지 «자기 상자» 로 가져 위치 계산이 머리 줄 밑을 빈 자리로 봤다.
+     * 높이는 밀도 토큰에 따라 달라 재서 쓴다.
+     */
+    private mobileHeaderBlockSize;
+    private mobileHeaderObserver?;
     /**
      * 오버레이를 연 컨트롤 — 닫힐 때 포커스를 되돌릴 곳.
      * ★슬롯 배정 «시점» 에 잡는다. 렌더가 본문에 `inert` 를 걸면 그 컨트롤이 쥐던 포커스는
@@ -149,6 +158,7 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
      * ⚠`.main-content` 는 `display: contents` 라 상자가 없다 — 관찰 대상은 슬롯에 배정된 요소들이고, 배정이 바뀔 때마다 다시 건다.
      */
     private observeMainSize;
+    private observeMobileHeader;
     private observedContent;
     private observeContentSize;
     private handleMainSlotChange;

package/dist/layouts/SidebarLayout.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";
@@ -25,7 +25,7 @@ import { createDevWarner as v } from "@iyulab/components/dist/utilities/devWarni
 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 "@iyulab/components/dist/components/progress-bar/UProgressBar.js";
-//#region src/layouts/SidebarLayout.ts
+// src/layouts/SidebarLayout.ts
 var S, C = v("@iyulab/modern-app"), w = 0;
 function T(e) {
 	let t = e.tagName;
@@ -79,7 +79,7 @@ var M = class extends n {
 		S = this;
 	}
 	constructor(...e) {
-		super(...e), 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 = () => {
+		super(...e), 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.mobileHeaderBlockSize = 0, 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 e = this.screenSize ?? a.screen ?? "large";
 			e === "large" ? this.state = this.state === "default" ? "slim" : "default" : e === "medium" ? this.state = this.state === "slim" ? "modal" : "slim" : e === "small" ? this.state = this.state === "mobile" ? "mobile-open" : "mobile" : console.warn("[@iyulab/modern-app] unknown screen size:", e);
 		}, this.handleBackdropClick = () => {
@@ -171,13 +171,13 @@ var M = class extends n {
 		super.connectedCallback(), this.currentPath = l(), window.addEventListener("route-begin", this.handleRouteBegin), window.addEventListener("route-done", this.handleRouteDone), window.addEventListener("route-progress", this.handleRouteProgress), window.addEventListener("route-error", this.handleRouteError), window.addEventListener("screen-resize", this.handleScreenResize);
 	}
 	disconnectedCallback() {
-		window.removeEventListener("route-begin", this.handleRouteBegin), window.removeEventListener("route-done", this.handleRouteDone), window.removeEventListener("route-progress", this.handleRouteProgress), window.removeEventListener("route-error", this.handleRouteError), window.removeEventListener("screen-resize", this.handleScreenResize), x.closeLayer(this), this.mainSizeObserver?.disconnect(), this.mainSizeObserver = void 0, super.disconnectedCallback();
+		window.removeEventListener("route-begin", this.handleRouteBegin), window.removeEventListener("route-done", this.handleRouteDone), window.removeEventListener("route-progress", this.handleRouteProgress), window.removeEventListener("route-error", this.handleRouteError), window.removeEventListener("screen-resize", this.handleScreenResize), x.closeLayer(this), this.mainSizeObserver?.disconnect(), this.mainSizeObserver = void 0, this.mobileHeaderObserver?.disconnect(), this.mobileHeaderObserver = void 0, super.disconnectedCallback();
 	}
 	willUpdate(e) {
 		super.willUpdate(e), e.has("config") && (this.styles = this.config?.styles);
 	}
 	updated(e) {
-		super.updated(e), this.observeMainSize(), e.has("hasOverlay") && (this.internals?.states?.[this.hasOverlay ? "add" : "delete"]("overlay"), this.hasOverlay ? (x.openLayer(this, this.handleOverlayEscape), this.focusOverlay()) : e.get("hasOverlay") === !0 && (x.closeLayer(this), this.restoreOverlayFocus()));
+		super.updated(e), this.observeMainSize(), this.observeMobileHeader(), e.has("hasOverlay") && (this.internals?.states?.[this.hasOverlay ? "add" : "delete"]("overlay"), this.hasOverlay ? (x.openLayer(this, this.handleOverlayEscape), this.focusOverlay()) : e.get("hasOverlay") === !0 && (x.closeLayer(this), this.restoreOverlayFocus()));
 	}
 	firstUpdated(e) {
 		super.firstUpdated(e), this.warnIfUnsized();
@@ -213,12 +213,14 @@ var M = class extends n {
       </div>
 
       <!-- Sidebar -->
-      <aside class="sidebar" part="sidebar" state="${this.state}">
+      <aside class="sidebar" part="sidebar" state="${this.state}"
+        style="--_mobile-header-block-size: ${this.mobileHeaderBlockSize}px">
         <!-- Sidebar Header -->
         <div class="sidebar-header" part="sidebar-header">
           ${this.renderLogo()}
           <span class="title" ?hidden=${this.state === "slim"}>
             ${this.config.title}
+            ${this.config.subtitle ? u`<span class="subtitle" part="subtitle">${this.config.subtitle}</span>` : d}
           </span>
           <u-button class="toggler" appearance="plain"
             aria-label=${i(this.locale || void 0).toggleSidebar}
@@ -405,6 +407,15 @@ var M = class extends n {
           ></u-icon>
         </u-link>
       ` : d;
+		if (typeof e == "object" && "icon" in e) return u`
+        <u-link class="logo-link" aria-label=${t}>
+          <u-icon class="logo"
+            .lib=${e.lib}
+            .name="${e.icon}"
+            .fallback=${s}
+          ></u-icon>
+        </u-link>
+      `;
 		if (typeof e == "function") {
 			let n = e(this.state);
 			return u`
@@ -430,6 +441,14 @@ var M = class extends n {
 		let e = this.shadowRoot?.querySelector(".main");
 		e && (this.mainSizeObserver = new ResizeObserver(() => this.syncMainTabStop()), this.mainSizeObserver.observe(e), this.observeContentSize());
 	}
+	observeMobileHeader() {
+		if (this.mobileHeaderObserver || typeof ResizeObserver > "u") return;
+		let e = this.shadowRoot?.querySelector(".mobile-header");
+		e && (this.mobileHeaderObserver = new ResizeObserver(([t]) => {
+			let n = t?.borderBoxSize?.[0]?.blockSize ?? e.getBoundingClientRect().height;
+			n !== this.mobileHeaderBlockSize && (this.mobileHeaderBlockSize = n);
+		}), this.mobileHeaderObserver.observe(e));
+	}
 	observeContentSize() {
 		let e = this.mainSizeObserver;
 		if (e) {
@@ -475,6 +494,5 @@ var M = class extends n {
 t([p({
 	type: String,
 	reflect: !0
-}), e("design:type", Object)], M.prototype, "state", void 0), t([p({ type: Object }), e("design:type", Object)], M.prototype, "config", void 0), t([p({ type: Object }), e("design:type", typeof Record > "u" ? Object : Record)], M.prototype, "counts", void 0), t([p({ type: String }), e("design:type", Object)], M.prototype, "locale", void 0), t([m("u-progress-bar"), e("design:type", Object)], M.prototype, "progressBarEl", void 0), t([h(), e("design:type", Object)], M.prototype, "hasOverlay", void 0), t([h(), e("design:type", Object)], M.prototype, "openMenu", void 0), t([h(), e("design:type", Object)], M.prototype, "hasNotice", void 0), t([h(), e("design:type", Object)], M.prototype, "routeLoading", void 0), t([h(), e("design:type", Object)], M.prototype, "mainTabStop", void 0), t([h(), e("design:type", Object)], M.prototype, "currentPath", void 0), M = S = t([f("u-sidebar-layout")], M);
-//#endregion
+}), e("design:type", Object)], M.prototype, "state", void 0), t([p({ type: Object }), e("design:type", Object)], M.prototype, "config", void 0), t([p({ type: Object }), e("design:type", typeof Record > "u" ? Object : Record)], M.prototype, "counts", void 0), t([p({ type: String }), e("design:type", Object)], M.prototype, "locale", void 0), t([m("u-progress-bar"), e("design:type", Object)], M.prototype, "progressBarEl", void 0), t([h(), e("design:type", Object)], M.prototype, "hasOverlay", void 0), t([h(), e("design:type", Object)], M.prototype, "openMenu", void 0), t([h(), e("design:type", Object)], M.prototype, "hasNotice", void 0), t([h(), e("design:type", Object)], M.prototype, "routeLoading", void 0), t([h(), e("design:type", Object)], M.prototype, "mainTabStop", void 0), t([h(), e("design:type", Object)], M.prototype, "mobileHeaderBlockSize", void 0), t([h(), e("design:type", Object)], M.prototype, "currentPath", void 0), M = S = t([f("u-sidebar-layout")], M);
 export { M as SidebarLayout };

package/dist/layouts/SidebarLayout.styles.js

@@ -1,5 +1,5 @@
 import { css as e } from "lit";
-//#region src/layouts/SidebarLayout.styles.ts
+// src/layouts/SidebarLayout.styles.ts
 var t = e`
   :host {
     position: relative;
@@ -62,6 +62,17 @@ var t = e`
     overflow: hidden;
     text-overflow: ellipsis;
   }
+  
+  .title .subtitle {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--u-txt-color-weak, #616161);
+    font-size: var(--u-text-caption-size, 12px);
+    line-height: var(--u-text-caption-leading, 1.5);
+    font-weight: var(--u-text-caption-weight, 400);
+    letter-spacing: var(--u-text-caption-tracking, 0);
+  }
 
   
 
@@ -74,11 +85,14 @@ var t = e`
 
 
 
+  
   .toggler {
     color: inherit;
-    font-size: 20px;
     padding: 0px;
   }
+  .toggler u-icon {
+    font-size: 20px;
+  }
   .toggler:hover {
     color: var(--u-txt-color-hover, #1565C0);
   }
@@ -154,21 +168,32 @@ var t = e`
     bottom: 0;
     left: 0;
   }
+  
+
+  .sidebar[state="mobile"] .sidebar-header,
+  .sidebar[state="mobile-open"] .sidebar-header {
+    display: none;
+  }
   .sidebar[state="mobile"] {
     position: absolute;
-    top: 0;
+    top: var(--_mobile-header-block-size, 0px);
     bottom: 0;
     left: 0;
     right: 0;
     transform: translateY(-100%);
   }
+  
+
+
+
   .sidebar[state="mobile-open"] {
     position: absolute;
-    top: 0;
+    top: var(--_mobile-header-block-size, 0px);
     bottom: 0;
     left: 0;
     right: 0;
     transform: translateY(0);
+    overflow: hidden;
   }
 
   
@@ -180,7 +205,7 @@ var t = e`
     align-items: center;
     justify-content: space-between;
     gap: 12px;
-    padding: 16px;
+    padding: 12px 16px;
     background: var(--app-header-bg, var(--u-bg-color-raised, #FAFAFA));
     color: var(--app-header-fg, var(--u-txt-color, #212121));
     border-bottom: 1px solid var(--u-border-color-weak, #EEEEEE);
@@ -194,7 +219,7 @@ var t = e`
     align-items: center;
     justify-content: space-between;
     gap: 12px;
-    padding: 16px;
+    padding: 12px 16px;
     border-bottom: 1px solid var(--u-border-color-weak, #EEEEEE);
     user-select: none;
   }
@@ -439,5 +464,4 @@ var t = e`
     }
   }
 `;
-//#endregion
 export { t as styles };

package/dist/layouts/SidebarLayout.types.d.ts

@@ -57,8 +57,17 @@ export interface SidebarLogoImage {
 }
 /** 커스텀 로고 렌더 함수. `SidebarHtmlConfig.render`와 동일한 반환 타입 */
 export type SidebarLogoRenderer = (state: SidebarState) => TemplateResult<1> | HTMLElement | string;
-/** 최상단 앱 로고 설정: 아이콘명(문자열, 기존 동작) | 이미지 | 커스텀 렌더 함수 */
-export type SidebarLogoConfig = string | SidebarLogoImage | SidebarLogoRenderer;
+/**
+ * 등록된 아이콘 라이브러리의 아이콘 로고 — 메뉴 항목과 같은 `icon` + `lib` 짝.
+ * 문자열 로고는 라이브러리를 고르지 못해 `u-icon` 의 기본 경로(`iconBasepath`)에서만 찾는다.
+ */
+export interface SidebarLogoIcon {
+    icon: string;
+    /** `icon` 을 찾을 등록 라이브러리(`IconRegistry`). 없으면 문자열 로고와 같다. */
+    lib?: string;
+}
+/** 최상단 앱 로고 설정: 아이콘명(문자열, 기존 동작) | 라이브러리 아이콘 | 이미지 | 커스텀 렌더 함수 */
+export type SidebarLogoConfig = string | SidebarLogoIcon | SidebarLogoImage | SidebarLogoRenderer;
 /** One entry of a `type: 'menu'` popup. */
 export interface SidebarMenuItemConfig extends SidebarPermissionGuard {
     label: string | DirectiveResult;
@@ -101,6 +110,11 @@ export interface SidebarLayoutConfig {
     logo?: SidebarLogoConfig;
     /** 앱 제목 */
     title?: string;
+    /**
+     * 제목 아래 한 줄 — 앱이 무엇인지(«여신 서류 보관 시스템»). 펼친 사이드바의 머리에만 보인다: 접힌 사이드바는 제목과 함께 숨고,
+     * 모바일 머리 줄은 한 줄을 지킨다.
+     */
+    subtitle?: string;
     /** 상단/메인 메뉴 아이템 항목들 */
     main?: SidebarItem[];
     /** 하단(footer)에 고정해서 렌더할 항목들 */

package/dist/layouts/filterSidebarItems.js

@@ -1,4 +1,4 @@
-//#region src/layouts/filterSidebarItems.ts
+// src/layouts/filterSidebarItems.ts
 function e(e, t) {
 	return !(e.requirePermission && !t(e.requirePermission) || e.requireAnyPermission && e.requireAnyPermission.length > 0 && !e.requireAnyPermission.some((e) => t(e)));
 }
@@ -24,5 +24,4 @@ function t(n, r) {
 	}
 	return a;
 }
-//#endregion
 export { t as filterSidebarItems };

package/dist/react.js

@@ -4,7 +4,7 @@ import { Wizard as n } from "./components/Wizard.js";
 import { SidebarLayout as r } from "./layouts/SidebarLayout.js";
 import i from "react";
 import { createComponent as a } from "@lit/react";
-//#region src/react.ts
+// src/react.ts
 function o(e) {
 	let n = i.useRef(e);
 	n.current = e;
@@ -26,5 +26,4 @@ var s = a({
 	elementClass: n,
 	events: { onStepChange: "step-change" }
 });
-//#endregion
 export { e as ScreenObserver, s as SidebarLayout, c as Wizard, o as useUnsavedChanges };

package/dist/translate.js

@@ -27,5 +27,4 @@ var r = n(class extends t {
 		this.subscribed && (this.subscribed = !1, e.off("languageChanged", this.refresh), e.off("initialized", this.refresh), e.store?.off("added", this.refresh));
 	}
 });
-//#endregion
 export { r as translate };