@iyulab/modern-app 0.18.0 → 0.18.3

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # Changelog
 
+## [0.18.3] - 2026-08-22
+
+### Fixed
+
+- **`SidebarButtonConfig.id`'s docs no longer claim external light-DOM `u-popover` anchoring
+  works.** It doesn't: the rendered `<u-sidebar-button>` lives inside `<u-sidebar-layout>`'s own
+  shadow root, and `for="#id"` lookups never cross a shadow boundary — a popover placed outside
+  the layout can never find the anchor, no matter how the `id` is passed. Documents the recipe
+  that does work instead: assemble the trigger and its `u-popover` together inside a single
+  `type: 'html'` item, with `placement` chosen from the sidebar's own state (a sideways flyout
+  has no room once the sidebar widens on mobile; a vertical one always does). Not a code change —
+  `id` still passes through exactly as before.
+
+## [0.18.2] - 2026-08-19
+
+### Fixed
+
+- **`SidebarLayout`'s mobile-header and sidebar-header toggle buttons now have an accessible
+  name.** Both are icon-only `<u-button>`s with no `aria-label`, text, or `title` — a
+  screen-reader user only ever heard an unnamed "button". Wired through the same locale
+  registry `MasterDetailLayout.detailClose` already uses (`toggleMobileMenu` /
+  `toggleSidebar`), so translations follow `registerLocale` automatically; default English
+  labels preserve current behavior for everyone who hasn't set a `locale`.
+
+### Added
+
+- **`SidebarButtonConfig.id?: string`.** Passed straight through to the rendered
+  `<u-sidebar-button>` host, so a consumer can anchor a `u-popover` (or any `for="#id"`
+  pattern) to a sidebar button using only public API — previously the only way to get an
+  anchorable id was to reach into the internal, unexported `<u-sidebar-button>` tag name.
+  Unset behaves exactly as before (no `id` attribute) — not a breaking change.
+
+## [0.18.1] - 2026-08-19
+
+### Fixed
+
+- **`GroupBox`'s background no longer matches the surrounding page/sidebar in light mode, or
+  input fields in dark mode.** It referenced the same token as those surfaces
+  (`--u-panel-bg-color`); switched to `--u-bg-color-raised`, which both themes already define
+  distinctly.
+
 ## [0.18.0] - 2026-08-17
 
 ### Added

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

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.144.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.146.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);

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

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.144.0/helpers/esm/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.146.0/helpers/esm/decorateMetadata.js
 function e(e, t) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
 }

package/dist/components/ActionBar.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.146.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";

package/dist/components/EmptyState.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { getLocaleStrings as r } from "../internals/locale.js";
 import { slotHasContent as i } from "../internals/slotted.js";

package/dist/components/GroupBox.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.146.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";

package/dist/components/GroupBox.styles.js

@@ -7,7 +7,7 @@ var t = e`
        사이드바가 열린 1280px 화면의 좁은 본문에서도, 넓은 본문을 가진 태블릿에서도
        같은 판단을 하려면 기준이 자기 폭이어야 한다. */
     container-type: inline-size;
-    background-color: var(--u-panel-bg-color, #FFFFFF);
+    background-color: var(--u-bg-color-raised, #FAFAFA);
     border: 1px solid var(--u-border-color-weak, #EEEEEE);
     /* 면(surface) 단 — 컨트롤과 같은 반경을 쓰면 큰 사각형이 각져 보인다. */
     border-radius: var(--u-radius-2xl, 12px);

package/dist/components/InfoField.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.146.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";

package/dist/components/InfoSection.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.146.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";

package/dist/components/MasterDetailLayout.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { getLocaleStrings as r } from "../internals/locale.js";
 import { slotHasContent as i } from "../internals/slotted.js";

package/dist/components/PageHeader.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { getLocaleStrings as r } from "../internals/locale.js";
 import { slotHasContent as i } from "../internals/slotted.js";

package/dist/components/SidebarButton.d.ts

@@ -6,6 +6,9 @@ type ElementParts = 'host' | 'base' | 'icon' | 'label';
 /** 버튼 항목 구성 */
 export interface SidebarButtonConfig extends SidebarPermissionGuard {
     type: 'button';
+    /** 렌더된 `<u-sidebar-button>` 호스트에 그대로 전달된다 — `u-popover[for="#id"]` 같은
+     *  외부 앵커링에 쓴다. */
+    id?: string;
     icon?: string;
     /** `icon`을 어느 등록 라이브러리에서 찾을지. 미지정 시 `u-icon`의 기본 URL 경로로
      *  해석된다(`IconRegistry.register()`로 등록한 이름 있는 세트를 쓰려면 지정해야 함). */

package/dist/components/SidebarButton.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.146.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";

package/dist/components/SidebarGroup.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.146.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";

package/dist/components/SidebarLink.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.146.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 "./SidebarLink.styles.js";

package/dist/components/SidebarSection.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.146.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";

package/dist/components/Wizard.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.146.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";

package/dist/internals/StyledElement.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.146.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

package/dist/internals/locale.d.ts

@@ -28,6 +28,10 @@ export interface ModernAppLocaleStrings {
     noResultsDescription: string;
     /** Master-detail layout — accessible label for the overlay-mode close button. */
     detailClose: string;
+    /** Sidebar layout — accessible label for the mobile-header menu toggle button. */
+    toggleMobileMenu: string;
+    /** Sidebar layout — accessible label for the sidebar-header collapse/expand toggle button. */
+    toggleSidebar: string;
     /** Wizard — default Back/Next action labels ("Submit" wording is the consumer's call). */
     wizardBack: string;
     wizardNext: string;

package/dist/internals/locale.js

@@ -6,6 +6,8 @@ var e = {
 	noResultsTitle: "No matching results",
 	noResultsDescription: "Try changing your search terms or filters.",
 	detailClose: "Close",
+	toggleMobileMenu: "Toggle menu",
+	toggleSidebar: "Toggle sidebar",
 	wizardBack: "Back",
 	wizardNext: "Next",
 	wizardStepAnnouncement: (e, t, n) => `Step ${e} of ${t}: ${n}`

package/dist/layouts/SidebarLayout.d.ts

@@ -9,6 +9,8 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
     state: SidebarState;
     /** 사이드바 레이아웃 설정 */
     config?: SidebarLayoutConfig;
+    /** 크롬 문자열(토글 버튼 접근성 라벨 등) 로케일 — `registerLocale`로 등록한 언어 태그 */
+    locale: string;
     progressBarEl: UProgressBar;
     /** 현재 라우터 컨텍스트 */
     context: RouteContext | null;

package/dist/layouts/SidebarLayout.js

@@ -1,30 +1,32 @@
 import { app as e } from "../App.js";
 import { filterSidebarItems as t } from "./filterSidebarItems.js";
-import n from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
-import r from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorateMetadata.js";
+import r from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
 import { StyledElement as i } from "../internals/StyledElement.js";
+import { getLocaleStrings as a } from "../internals/locale.js";
 import "../components/SidebarSection.js";
 import "../components/SidebarLink.js";
 import "../components/SidebarGroup.js";
 import "../components/SidebarButton.js";
-import { styles as a } from "./SidebarLayout.styles.js";
-import { html as o, nothing as s } from "lit";
-import { customElement as c, property as l, query as u, state as d } from "lit/decorators.js";
+import { styles as o } from "./SidebarLayout.styles.js";
+import { html as s, nothing as c } from "lit";
+import { customElement as l, property as u, query as d, state as f } from "lit/decorators.js";
 import "@iyulab/components/dist/components/button/UButton.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";
-import { unsafeHTML as f } from "lit/directives/unsafe-html.js";
-import { repeat as p } from "lit/directives/repeat.js";
-import { UProgressBar as m } from "@iyulab/components/dist/components/progress-bar/UProgressBar.js";
+import { unsafeHTML as p } from "lit/directives/unsafe-html.js";
+import { repeat as m } from "lit/directives/repeat.js";
+import { ifDefined as h } from "lit/directives/if-defined.js";
+import { UProgressBar as g } from "@iyulab/components/dist/components/progress-bar/UProgressBar.js";
 //#region src/layouts/SidebarLayout.ts
-function h(e) {
+function _(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 g = class extends i {
+var v = class extends i {
 	constructor(...t) {
-		super(...t), this.state = "default", this.context = null, this.isMatchedLink = (e) => !this.context || !e ? !1 : (e = typeof e == "string" ? new URLPattern(e, window.location.origin) : e, e.test(this.context.path, window.location.origin)), this.handleBrandLogoClick = (t) => () => {
+		super(...t), this.state = "default", this.locale = "", this.context = null, this.isMatchedLink = (e) => !this.context || !e ? !1 : (e = typeof e == "string" ? new URLPattern(e, window.location.origin) : e, e.test(this.context.path, window.location.origin)), this.handleBrandLogoClick = (t) => () => {
 			e.navigate(t ?? "");
 		}, this.handleToggleButtonClick = () => {
 			let t = e.screen ?? "large";
@@ -45,7 +47,7 @@ var g = class extends i {
 			}, 300);
 		}, this._handleMainKeydown = (e) => {
 			let t = e.composedPath()[0];
-			if (t instanceof HTMLElement && h(t)) return;
+			if (t instanceof HTMLElement && _(t)) return;
 			let n = this.shadowRoot?.querySelector(".main");
 			if (!n) return;
 			let r = n.clientHeight;
@@ -78,7 +80,7 @@ var g = class extends i {
 		};
 	}
 	static {
-		this.styles = [super.styles, a];
+		this.styles = [super.styles, o];
 	}
 	connectedCallback() {
 		super.connectedCallback(), 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);
@@ -90,7 +92,7 @@ var g = class extends i {
 		super.willUpdate(e), e.has("config") && (this.styles = this.config?.styles);
 	}
 	render() {
-		return this.config ? o`
+		return this.config ? s`
       <!-- Mobile Header -->
       <div class="mobile-header" part="mobile-header" ?hidden="${!this.state.startsWith("mobile")}">
         ${this.renderLogo()}
@@ -98,6 +100,7 @@ var g = class extends i {
           ${this.config.title}
         </span>
         <u-button class="toggler" variant="ghost"
+          aria-label=${a(this.locale || void 0).toggleMobileMenu}
           @click=${this.handleToggleButtonClick}>
           <u-icon
             lib="bootstrap"
@@ -115,6 +118,7 @@ var g = class extends i {
             ${this.config.title}
           </span>
           <u-button class="toggler" variant="ghost"
+            aria-label=${a(this.locale || void 0).toggleSidebar}
             @click=${this.handleToggleButtonClick}>
             <u-icon
               lib="bootstrap"
@@ -125,13 +129,13 @@ var g = class extends i {
 
         <!-- Sidebar Navigation Menu -->
         <nav class="sidebar-main" part="sidebar-main" scrollable
-          aria-label=${this.config.mainAriaLabel ?? s}>
-          ${p(t(this.config.main ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
+          aria-label=${this.config.mainAriaLabel ?? c}>
+          ${m(t(this.config.main ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
         </nav>
 
         <!-- Sidebar Footer -->
         <div class="sidebar-footer" part="sidebar-footer">
-          ${p(t(this.config.footer ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
+          ${m(t(this.config.footer ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
         </div>
       </aside>
 
@@ -146,16 +150,17 @@ var g = class extends i {
       <div class="backdrop" ?hidden="${this.state !== "modal"}"
         @click="${this.handleBackdropClick}"
       ></div>
-    ` : s;
+    ` : c;
 	}
 	renderItem(e) {
-		if (!e) return s;
+		if (!e) return c;
 		if (e.type === "html") {
 			let t = e.render(this.state);
-			return typeof t == "string" ? f(t) : o`${t}`;
+			return typeof t == "string" ? p(t) : s`${t}`;
 		}
-		if (e.type === "button") return o`
+		if (e.type === "button") return s`
         <u-sidebar-button
+          id=${h(e.id)}
           ?compact=${this.state === "slim"}
           .icon="${e.icon}"
           .lib="${e.lib}"
@@ -166,7 +171,7 @@ var g = class extends i {
       `;
 		if (e.type === "link") {
 			let t = this.isMatchedLink(e.pattern || e.href);
-			return o`
+			return s`
         <u-sidebar-link
           ?compact=${this.state === "slim"}
           ?selected=${t}
@@ -181,18 +186,18 @@ var g = class extends i {
         ></u-sidebar-link>
       `;
 		}
-		if (e.type === "section") return o`
+		if (e.type === "section") return s`
         <u-sidebar-section
           ?compact=${this.state === "slim"}
           .mainTitle="${e.title}"
           .subTitle="${e.subTitle}"
           .styles="${e.styles}">
-          ${p(e.items, (e, t) => t, (e) => this.renderItem(e))}
+          ${m(e.items, (e, t) => t, (e) => this.renderItem(e))}
         </u-sidebar-section>
       `;
 		if (e.type === "group") {
 			let t = e.items.some((e) => this.isMatchedLink(e.pattern || e.href));
-			return o`
+			return s`
         <u-sidebar-group
           ?compact=${this.state === "slim"}
           ?selected=${t}
@@ -201,15 +206,15 @@ var g = class extends i {
           .lib="${e.lib}"
           .label="${e.label}"
           .styles="${e.styles}">
-          ${p(e.items, (e, t) => t, (e) => this.renderItem(e))}
+          ${m(e.items, (e, t) => t, (e) => this.renderItem(e))}
         </u-sidebar-group>
       `;
 		}
-		return s;
+		return c;
 	}
 	renderLogo() {
 		let e = this.config?.logo;
-		if (!e || typeof e == "string") return o`
+		if (!e || typeof e == "string") return s`
         <u-icon class="logo"
           .name="${e}"
           @click=${this.handleBrandLogoClick()}
@@ -217,13 +222,13 @@ var g = class extends i {
       `;
 		if (typeof e == "function") {
 			let t = e(this.state);
-			return o`
+			return s`
         <span class="logo" @click=${this.handleBrandLogoClick()}>
-          ${typeof t == "string" ? f(t) : t}
+          ${typeof t == "string" ? p(t) : t}
         </span>
       `;
 		}
-		return o`
+		return s`
       <img class="logo"
         src="${e.src}"
         alt="${e.alt ?? ""}"
@@ -232,9 +237,9 @@ var g = class extends i {
     `;
 	}
 };
-r([l({
+r([u({
 	type: String,
 	reflect: !0
-}), n("design:type", Object)], g.prototype, "state", void 0), r([l({ type: Object }), n("design:type", Object)], g.prototype, "config", void 0), r([u("u-progress-bar"), n("design:type", m === void 0 ? Object : m)], g.prototype, "progressBarEl", void 0), r([d(), n("design:type", Object)], g.prototype, "context", void 0), g = r([c("u-sidebar-layout")], g);
+}), n("design:type", Object)], v.prototype, "state", void 0), r([u({ type: Object }), n("design:type", Object)], v.prototype, "config", void 0), r([u({ type: String }), n("design:type", Object)], v.prototype, "locale", void 0), r([d("u-progress-bar"), n("design:type", g === void 0 ? Object : g)], v.prototype, "progressBarEl", void 0), r([f(), n("design:type", Object)], v.prototype, "context", void 0), v = r([l("u-sidebar-layout")], v);
 //#endregion
-export { g as SidebarLayout };
+export { v as SidebarLayout };

package/package.json

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

package/skills/modern-app/references/layout.md

@@ -144,6 +144,7 @@ Action button — triggers a callback instead of navigating.
 ```typescript
 interface SidebarButtonConfig {
   type: 'button';
+  id?: string;
   icon?: string;
   lib?: string;
   label: string | DirectiveResult;
@@ -158,6 +159,12 @@ Example:
 { type: 'button', icon: 'logout', label: 'Sign Out', onClick: () => auth.signOut() }
 ```
 
+`id` is passed straight through to the rendered `<u-sidebar-button>` host. **It does not enable
+anchoring a `u-popover` you place outside the layout** — the button lives inside
+`<u-sidebar-layout>`'s own shadow root, and `querySelector`/`for="#id"` never crosses a shadow
+boundary. If you need a popover anchored to a sidebar item, use `type: 'html'` and assemble both
+inside the same template — see [popup-style submenus](#popup-style-submenus-u-popover) below.
+
 ---
 
 ### `SidebarHtmlConfig` — `type: 'html'`
@@ -190,6 +197,38 @@ Example:
 
 ---
 
+### Popup-style submenus (`u-popover`)
+
+For a submenu that flies out from a sidebar item (rather than expanding in place like
+`SidebarGroupConfig`), assemble a `u-popover` and its trigger together inside a single
+`type: 'html'` item — both then live in the sidebar layout's own shadow root, which is required
+for `for="#id"` anchoring to resolve (see the `id` note above).
+
+```typescript
+{
+  type: 'html',
+  render: (state) => html`
+    <u-sidebar-button id="more-trigger" icon="three-dots" label="More"></u-sidebar-button>
+    <u-popover for="#more-trigger" placement=${state.startsWith('mobile') ? 'bottom-start' : 'right-start'}>
+      <u-menu>
+        <u-menu-item @click=${doA}>Action A</u-menu-item>
+        <u-menu-item @click=${doB}>Action B</u-menu-item>
+      </u-menu>
+    </u-popover>
+  `,
+}
+```
+
+⚠**Pick `placement` based on `state`, not a fixed value.** On `mobile`/`mobile-open`, the sidebar
+itself widens to occupy nearly the full screen — a sideways placement (`right-start`, the natural
+choice for a desktop flyout) then has no room on either side, and `flip()` correctly declines to
+flip when the opposite side has none either. The popover renders off-screen and is invisible. A
+vertical placement (`bottom-start`) has room regardless of sidebar width and works at every state.
+Confirmed empirically in `tests/browser/sidebar-popover-submenu.browser.test.ts` — this is not a
+`strategy="absolute"` vs `"fixed"` distinction, switching strategy does not change the outcome.
+
+---
+
 ## Sidebar parts
 
 Parts available for `styles` overrides on the root layout: