@iyulab/modern-app 0.16.0 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## [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
+
+- **`/react` subpath**, wrapping `SidebarLayout` and `Wizard` with `@lit/react`'s
+  `createComponent`. `Wizard` is the only component that dispatches a custom event
+  (`step-change`) — a raw custom element in JSX maps an `onStepChange` prop to a listener
+  for a literal `"StepChange"` DOM event, which `Wizard` never fires, so the event never
+  reaches a consumer without this wrapper. Both components also carry object/array
+  properties (`config`, `steps`) that a raw custom element handles correctly under React 19
+  (which assigns matching properties directly) but not under React 18 (where non-primitive
+  JSX attributes stringify) — the wrapper keeps that working on both. Every component in
+  this package (not just these two) also inherits an object-typed `styles` property from its
+  base class for part-level style overrides; on React 18 that still needs a ref without a
+  wrapper.
+
 ## [0.16.0] - 2026-08-11
 
 ### Changed

package/README.md

@@ -173,6 +173,38 @@ await app.load({
 - `hasPermission` 미지정 시 필터링하지 않는다(모든 항목 표시 — 하위호환).
 - 순수 헬퍼 `filterSidebarItems(items, hasPermission)` 를 직접 재사용할 수도 있다.
 
+## React
+
+A `@lit/react`-based wrapper for `SidebarLayout` and `Wizard` is available under `/react`.
+Every other exported component works as a plain custom element in JSX; these two specifically
+need the wrapper because `Wizard` dispatches a `step-change` custom event (a raw element maps
+`onStepChange` to a literal `"StepChange"` DOM event it never fires) and both carry object/array
+properties that a raw element only handles correctly under React 19.
+
+`@lit/react` and `react` are optional peer dependencies — install them to use this subpath:
+
+```bash
+npm install @iyulab/modern-app @lit/react react
+```
+
+```tsx
+import { SidebarLayout, Wizard, type SidebarItem, type WizardStep } from '@iyulab/modern-app/react';
+
+const main: SidebarItem[] = [{ type: 'link', label: 'Home', href: '/' }];
+const steps: WizardStep[] = [{ id: 'info', label: 'Info' }, { id: 'review', label: 'Review' }];
+
+export function App() {
+  return (
+    <SidebarLayout config={{ type: 'sidebar', title: 'My App', main }}>
+      <Wizard steps={steps} active={0} onStepChange={(e) => console.log(e.detail)}>
+        <section>Info panel</section>
+        <section>Review panel</section>
+      </Wizard>
+    </SidebarLayout>
+  );
+}
+```
+
 ## Documentation
 
 | Guide | Description |

package/dist/_virtual/{_@oxc-project_runtime@0.143.0 → _@oxc-project_runtime@0.144.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.144.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.144.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.144.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.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.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.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.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.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.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/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,10 +1,10 @@
-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.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.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";
+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) {
 	return e === "up" ? "positive" : e === "down" ? "negative" : "neutral";
@@ -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.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.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.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.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.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.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.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.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.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.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.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.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.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.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.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.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.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.144.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.144.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/layouts/SidebarLayout.d.ts

@@ -15,7 +15,7 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
     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,7 +1,7 @@
 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.144.0/helpers/esm/decorateMetadata.js";
+import r from "../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
 import { StyledElement as i } from "../internals/StyledElement.js";
 import "../components/SidebarSection.js";
 import "../components/SidebarLink.js";
@@ -124,7 +124,8 @@ var g = class extends i {
         </div>
 
         <!-- Sidebar Navigation Menu -->
-        <nav class="sidebar-main" part="sidebar-main" scrollable>
+        <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))}
         </nav>
 

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

@@ -6,6 +6,10 @@ import { SidebarGroupConfig } from '../components/SidebarGroup';
 import { SidebarButtonConfig } from '../components/SidebarButton';
 import { SidebarPermissionGuard } from './SidebarPermission';
 export type { SidebarPermissionGuard } from './SidebarPermission';
+export type { SidebarLinkConfig } from '../components/SidebarLink';
+export type { SidebarSectionConfig } from '../components/SidebarSection';
+export type { SidebarGroupConfig } from '../components/SidebarGroup';
+export type { SidebarButtonConfig } from '../components/SidebarButton';
 /** 사이드바 레이아웃 컴포넌트의 요소(part) 타입 */
 export type SidebarParts = 'host' | 'mobile-header' | 'sidebar' | 'sidebar-header' | 'sidebar-main' | 'sidebar-footer' | 'main' | 'progress';
 /** 사이드바 상태 타입 */
@@ -38,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

@@ -0,0 +1,27 @@
+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
+ * React 18 (JSX attributes stringify), so this wrapper keeps `config` working on both.
+ */
+export declare const SidebarLayout: import('@lit/react').ReactWebComponent<SidebarLayoutElement, {}>;
+export type SidebarLayoutProps = React.ComponentProps<typeof SidebarLayout>;
+/**
+ * React wrapper for `<u-wizard>`. `Wizard` dispatches a `step-change` custom event, but a raw
+ * custom element in JSX maps `onStepChange` to a listener for a literal `"StepChange"` DOM
+ * event — one `Wizard` never fires — so the event never reaches a consumer without this
+ * wrapper's `events` mapping. `steps` is also an `@property({ type: Array })`, which the
+ * wrapper keeps working on React 18 the same way it does for `SidebarLayout`'s `config`.
+ */
+export declare const Wizard: import('@lit/react').ReactWebComponent<WizardElement, {
+    onStepChange: EventName<CustomEvent<WizardStepChangeDetail>>;
+}>;
+export type WizardProps = React.ComponentProps<typeof Wizard>;
+export type { SidebarLayoutElement, WizardElement };
+export type { SidebarLayoutConfig, SidebarItem, SidebarLogoConfig, SidebarLinkConfig, SidebarSectionConfig, SidebarGroupConfig, SidebarButtonConfig, SidebarHtmlConfig, } from './layouts/SidebarLayout.types.js';
+export type { WizardStep, WizardStepState, WizardStepChangeDetail } from './components/Wizard.js';

package/dist/react.js

@@ -0,0 +1,19 @@
+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 a = i({
+	react: r,
+	tagName: "u-sidebar-layout",
+	elementClass: n,
+	events: {}
+}), o = i({
+	react: r,
+	tagName: "u-wizard",
+	elementClass: t,
+	events: { onStepChange: "step-change" }
+});
+//#endregion
+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.16.0",
+  "version": "0.18.0",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -32,13 +32,19 @@
     "./dist/index.js",
     "./src/index.ts",
     "./dist/layouts/*.js",
-    "./src/layouts/*.ts"
+    "./src/layouts/*.ts",
+    "./dist/react.js",
+    "./src/react.ts"
   ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js"
+    },
     "./dist/*": {
       "types": "./dist/*.d.ts",
       "import": "./dist/*"
@@ -58,10 +64,27 @@
     "i18next": "^26.3.6",
     "lit": "^3.3.3"
   },
+  "peerDependencies": {
+    "@lit/react": ">=1.0.8",
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@lit/react": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@lit/react": "^1.0.8",
     "@types/node": "^26.1.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "@vitest/browser-playwright": "^4.1.10",
     "happy-dom": "^20.10.6",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "typescript": "^5.9.3",
     "vite": "^8.1.4",
     "vite-plugin-dts": "^5.0.3",

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.