@iyulab/modern-app 0.17.0 → 0.18.2

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # Changelog
 
+## [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
+
+- **`SidebarLink` now sets `aria-current="page"` on its inner `<u-link>` when `selected` is
+  true.** Previously `selected` only drove visual emphasis (a host attribute for CSS) — a
+  screen-reader user had no way to tell which item was the current page.
+- **`SidebarLayoutConfig.mainAriaLabel?: string`.** When set, it's reflected as `aria-label`
+  on the sidebar's main `<nav>` landmark. That `<nav>` lives inside `SidebarLayout`'s shadow
+  root, so a consumer had no way to name it from the outside. Unset behaves exactly as
+  before (no landmark name) — not a breaking change.
+- **`InfoField`'s `tone` now colors the value text itself, not just the trend indicator.**
+  Previously `.trend.tone-*` was the only CSS surface for `tone`, so a static figure shown
+  without a `trend` (e.g. a balance due) couldn't be toned at all. `trend`'s existing
+  behavior is unchanged; this only widens where `tone` is visible.
+- **`ScreenObserver` is now exported from both the main entry and `/react`.** `SidebarLayout`'s
+  responsive state (large→slim, medium→modal, small→mobile) depends entirely on the
+  `screen-resize` event this class dispatches; `app.load()` instantiates it internally, but a
+  consumer mounting `SidebarLayout` standalone through `/react` (without `app.load()`) had no
+  public way to drive that behavior.
+
 ## [0.17.0] - 2026-08-11
 
 ### Added

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

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.143.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.143.0 → _@oxc-project_runtime@0.146.0}/helpers/esm/decorateMetadata.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.143.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.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.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.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.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.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.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.d.ts

@@ -77,6 +77,10 @@ export declare class InfoField extends StyledElement<ElementParts> {
      * Explicit tone override. When unset, resolves from `trend` (`up→positive`, `down→negative`,
      * `flat`/unset→`neutral`). **Always wins over inference** — some metrics invert the usual
      * direction-to-sentiment mapping (e.g. a falling "open tickets" count is `positive`).
+     *
+     * Colors the value text itself, independent of `trend` — a static "balance due" figure can be
+     * toned `negative` without a trend arrow. `neutral` has no visual effect on the value text
+     * (it already renders at full strength; only `positive`/`negative` stand out from it).
      */
     tone?: InfoFieldTone;
     private get hasSlotted();

package/dist/components/InfoField.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.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";
@@ -29,7 +29,7 @@ var f = class extends n {
 		let e = !this.hasSlotted && d(this.value), t = this.numeric || this.format === "number" || this.format === "currency", n = this.trend !== void 0 || this.trendLabel !== void 0, r = this.tone ?? u(this.trend), a = this.trend === "up" ? "▲" : this.trend === "down" ? "▼" : "";
 		return i`
       <div class="label" part="label">${this.label}</div>
-      <div class="value ${t ? "numeric" : ""} ${e ? "blank" : ""}" part="value">
+      <div class="value ${t ? "numeric" : ""} ${e ? "blank" : ""} tone-${r}" part="value">
         ${this.hasSlotted ? i`<slot></slot>` : e ? this.blank : this.formatValue()}
       </div>
       ${n ? i`

package/dist/components/InfoField.styles.js

@@ -46,6 +46,17 @@ var t = e`
     font-weight: var(--u-text-body-weight, 400);
   }
 
+  /* tone은 trend 유무와 무관하게 값 텍스트 자체에도 적용된다(neutral은 무규칙 — 기본
+     .value 색과 시각적으로 같은 자리라 별도 규칙을 두면 오히려 "옅어 보이는" 부작용이
+     생긴다, .trend.tone-neutral과 달리 .value는 이미 강한 색이 기본값이다). */
+  .value.tone-positive {
+    color: var(--u-success-color-strong, #1B5E20);
+  }
+
+  .value.tone-negative {
+    color: var(--u-danger-color-strong, #C62828);
+  }
+
   .trend {
     font-size: var(--u-text-caption-size, 12px);
     margin-top: var(--u-space-3xs, 2px);

package/dist/components/InfoSection.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.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.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.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.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.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.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.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.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.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.d.ts

@@ -37,7 +37,7 @@ export interface SidebarLinkConfig extends SidebarPermissionGuard {
  */
 export declare class SidebarLink extends StyledElement<ElementParts> {
     static styles: import('lit').CSSResultGroup[];
-    /** selected 상태 */
+    /** selected 상태. `true`면 내부 `<u-link>`에 `aria-current="page"`도 함께 세팅한다. */
     selected: boolean;
     /** 콤팩트 모드 여부 */
     compact: boolean;

package/dist/components/SidebarLink.js

@@ -1,13 +1,13 @@
-import e from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.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";
-import { html as a } from "lit";
-import { customElement as o, property as s } from "lit/decorators.js";
+import { html as a, nothing as o } from "lit";
+import { customElement as s, property as c } from "lit/decorators.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";
 //#region src/components/SidebarLink.ts
-var c = class extends n {
+var l = class extends n {
 	constructor(...e) {
 		super(...e), this.selected = !1, this.compact = !1;
 	}
@@ -20,6 +20,7 @@ var c = class extends n {
         .href=${this.href || "#"}
         .navigate=${this.navigate}
         .target=${this.target}
+        aria-current=${this.selected ? "page" : o}
       >
         <div class="container" part="base" ?compact=${this.compact}>
           <u-icon part="icon"
@@ -35,9 +36,9 @@ var c = class extends n {
     `;
 	}
 };
-t([s({
+t([c({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Object)], c.prototype, "selected", void 0), t([s({ type: Boolean }), e("design:type", Object)], c.prototype, "compact", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "icon", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "lib", void 0), t([s({ type: String }), e("design:type", Object)], c.prototype, "label", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "href", void 0), t([s({ type: String }), e("design:type", Object)], c.prototype, "pattern", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "navigate", void 0), t([s({ type: String }), e("design:type", String)], c.prototype, "target", void 0), c = t([o("u-sidebar-link")], c);
+}), e("design:type", Object)], l.prototype, "selected", void 0), t([c({ type: Boolean }), e("design:type", Object)], l.prototype, "compact", 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), t([c({ type: String }), e("design:type", String)], l.prototype, "href", void 0), t([c({ type: String }), e("design:type", Object)], l.prototype, "pattern", void 0), t([c({ type: String }), e("design:type", String)], l.prototype, "navigate", void 0), t([c({ type: String }), e("design:type", String)], l.prototype, "target", void 0), l = t([s("u-sidebar-link")], l);
 //#endregion
-export { c as SidebarLink };
+export { l as SidebarLink };

package/dist/components/SidebarSection.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.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.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.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/index.d.ts

@@ -15,5 +15,7 @@ export { Wizard } from './components/Wizard.js';
 export type { WizardStep, WizardStepState, WizardStepChangeDetail } from './components/Wizard.js';
 export { registerLocale, setDefaultLocale, getLocaleStrings, getDefaultLocale, } from './internals/locale.js';
 export type { ModernAppLocaleStrings } from './internals/locale.js';
+export { ScreenObserver } from './internals/ScreenObserver.js';
+export type { ScreenSize, ScreenObserverConfig, ScreenResizeEvent } from './internals/ScreenObserver.js';
 export { app };
 export default app;

package/dist/index.js

@@ -1,15 +1,16 @@
-import { app as e } from "./App.js";
-import { filterSidebarItems as t } from "./layouts/filterSidebarItems.js";
-import { getDefaultLocale as n, getLocaleStrings as r, registerLocale as i, setDefaultLocale as a } from "./internals/locale.js";
-import { PageHeader as o } from "./components/PageHeader.js";
-import { GroupBox as s } from "./components/GroupBox.js";
-import { InfoSection as c } from "./components/InfoSection.js";
-import { InfoField as l, isBlank as u } from "./components/InfoField.js";
-import { EmptyState as d } from "./components/EmptyState.js";
-import { ActionBar as f } from "./components/ActionBar.js";
-import { MasterDetailLayout as p } from "./components/MasterDetailLayout.js";
-import { Wizard as m } from "./components/Wizard.js";
+import { ScreenObserver as e } from "./internals/ScreenObserver.js";
+import { app as t } from "./App.js";
+import { filterSidebarItems as n } from "./layouts/filterSidebarItems.js";
+import { getDefaultLocale as r, getLocaleStrings as i, registerLocale as a, setDefaultLocale as o } from "./internals/locale.js";
+import { PageHeader as s } from "./components/PageHeader.js";
+import { GroupBox as c } from "./components/GroupBox.js";
+import { InfoSection as l } from "./components/InfoSection.js";
+import { InfoField as u, isBlank as d } from "./components/InfoField.js";
+import { EmptyState as f } from "./components/EmptyState.js";
+import { ActionBar as p } from "./components/ActionBar.js";
+import { MasterDetailLayout as m } from "./components/MasterDetailLayout.js";
+import { Wizard as h } from "./components/Wizard.js";
 //#region src/index.ts
-var h = e;
+var g = t;
 //#endregion
-export { f as ActionBar, d as EmptyState, s as GroupBox, l as InfoField, c as InfoSection, p as MasterDetailLayout, o as PageHeader, m as Wizard, e as app, h as default, t as filterSidebarItems, n as getDefaultLocale, r as getLocaleStrings, u as isBlank, i as registerLocale, a as setDefaultLocale };
+export { p as ActionBar, f as EmptyState, c as GroupBox, u as InfoField, l as InfoSection, m as MasterDetailLayout, s as PageHeader, e as ScreenObserver, h as Wizard, t as app, g as default, n as filterSidebarItems, r as getDefaultLocale, i as getLocaleStrings, d as isBlank, a as registerLocale, o as setDefaultLocale };

package/dist/internals/StyledElement.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.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,13 +9,15 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
     state: SidebarState;
     /** 사이드바 레이아웃 설정 */
     config?: SidebarLayoutConfig;
+    /** 크롬 문자열(토글 버튼 접근성 라벨 등) 로케일 — `registerLocale`로 등록한 언어 태그 */
+    locale: string;
     progressBarEl: UProgressBar;
     /** 현재 라우터 컨텍스트 */
     context: RouteContext | null;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues): void;
-    render(): import('lit-html').TemplateResult<1> | typeof nothing;
+    render(): typeof nothing | import('lit-html').TemplateResult<1>;
     /** 사이드바 아이템 렌더링 */
     private renderItem;
     /** 현재 경로와 패턴 매칭 여부 확인 */

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.143.0/helpers/esm/decorateMetadata.js";
-import r from "../_virtual/_@oxc-project_runtime@0.143.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"
@@ -124,13 +128,14 @@ var g = class extends i {
         </div>
 
         <!-- Sidebar Navigation Menu -->
-        <nav class="sidebar-main" part="sidebar-main" scrollable>
-          ${p(t(this.config.main ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
+        <nav class="sidebar-main" part="sidebar-main" scrollable
+          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>
 
@@ -145,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}"
@@ -165,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}
@@ -180,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}
@@ -200,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()}
@@ -216,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 ?? ""}"
@@ -231,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/dist/layouts/SidebarLayout.types.d.ts

@@ -42,6 +42,13 @@ export interface SidebarLayoutConfig {
     main?: SidebarItem[];
     /** 하단(footer)에 고정해서 렌더할 항목들 */
     footer?: SidebarItem[];
+    /**
+     * 메인 내비게이션(`<nav class="sidebar-main">`)의 접근 가능한 이름. 지정하면
+     * `aria-label`로 반영돼 스크린리더가 랜드마크를 "주 메뉴" 같은 이름으로 발표한다.
+     * `title`은 사이드바 헤더에 표시되는 브랜드 텍스트일 뿐 이 `<nav>`와 연결되지 않는다 —
+     * 별개 값이다. 미지정 시 종전과 동일하게 랜드마크 이름이 없다(breaking 아님).
+     */
+    mainAriaLabel?: string;
     /**
      * 메뉴 항목 권한 필터 판정. 지정하면 `requirePermission`/`requireAnyPermission` 를 만족하지
      * 않는 항목을 숨기고, 항목이 모두 걸러진 section/group 은 통째로 숨긴다.

package/dist/react.d.ts

@@ -2,6 +2,8 @@ import { default as React } from 'react';
 import { EventName } from '@lit/react';
 import { SidebarLayout as SidebarLayoutElement } from './layouts/SidebarLayout.js';
 import { Wizard as WizardElement, WizardStepChangeDetail } from './components/Wizard.js';
+export { ScreenObserver } from './internals/ScreenObserver.js';
+export type { ScreenSize, ScreenObserverConfig, ScreenResizeEvent } from './internals/ScreenObserver.js';
 /**
  * React wrapper for `<u-sidebar-layout>`. `config` is an `@property({ type: Object })` —
  * a raw custom element handles that correctly under React 19 (property assignment) but not

package/dist/react.js

@@ -1,18 +1,19 @@
-import { Wizard as e } from "./components/Wizard.js";
-import { SidebarLayout as t } from "./layouts/SidebarLayout.js";
-import n from "react";
-import { createComponent as r } from "@lit/react";
+import { ScreenObserver as e } from "./internals/ScreenObserver.js";
+import { Wizard as t } from "./components/Wizard.js";
+import { SidebarLayout as n } from "./layouts/SidebarLayout.js";
+import r from "react";
+import { createComponent as i } from "@lit/react";
 //#region src/react.ts
-var i = r({
-	react: n,
+var a = i({
+	react: r,
 	tagName: "u-sidebar-layout",
-	elementClass: t,
+	elementClass: n,
 	events: {}
-}), a = r({
-	react: n,
+}), o = i({
+	react: r,
 	tagName: "u-wizard",
-	elementClass: e,
+	elementClass: t,
 	events: { onStepChange: "step-change" }
 });
 //#endregion
-export { i as SidebarLayout, a as Wizard };
+export { e as ScreenObserver, a as SidebarLayout, o as Wizard };

package/package.json

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

package/skills/modern-app/references/components/info-field.md

@@ -39,7 +39,7 @@ and those are different states of the business. So the component owns the rule.
 | `size` | `'default'\|'lg'` | `'default'` | ✓ | `'lg'` renders the value at the `title` type-scale step — for dashboard KPI tiles composed inside `u-info-section` |
 | `trend` | `'up'\|'down'\|'flat'` | — | | Trend direction; renders a trend indicator when set, alongside `trendLabel`; pair with trendLabel for an accessible name — trend alone conveys direction by color only |
 | `trendLabel` | `string` | — | | Trend copy, e.g. `"+12% vs last month"` — wording is the consumer's responsibility |
-| `tone` | `'positive'\|'negative'\|'neutral'` | — | | Explicit tone override; resolves from `trend` when unset (`up→positive`, `down→negative`, `flat`/unset→`neutral`) but always wins over inference |
+| `tone` | `'positive'\|'negative'\|'neutral'` | — | | Explicit tone override; resolves from `trend` when unset (`up→positive`, `down→negative`, `flat`/unset→`neutral`) but always wins over inference. Colors the value text itself, independent of `trend` — a static figure (e.g. a balance due) can be toned `negative` with no trend arrow |
 
 ⚠ `numeric` earns its keep in **tables**, where columns of figures are compared by eye. On a
 lone field it just pushes the value away from its label.