@iyulab/modern-app 0.33.0 → 0.33.2

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## [0.33.2] - 2026-10-03
+
+### Changed
+
+- **Sidebar transitions follow the motion tokens**, so the sidebar's open/close, group expand and
+  hover transitions stop for users who prefer reduced motion (`--u-duration-*` from
+  `@iyulab/components` drops to zero under `prefers-reduced-motion: reduce`). The slide-in moves from
+  300ms to the scale's `slow` step (320ms).
+
+## [0.33.1] - 2026-09-30
+
+### Fixed
+
+- **Sidebar links with `target: '_blank'` now say so to screen readers** — their accessible name ends
+  with a visually hidden "(opens in a new tab)", in the collapsed sidebar too. The text is the new
+  `opensInNewTab` string of the `modern-app` locale namespace (English and Korean built in).
+
+### Changed
+
+- Optional React peers promise only the tested majors: `@lit/react ^1.0.8` and
+  `react ^18.0.0 || ^19.0.0` (were `>=` ranges with no upper bound).
+
+### Documentation
+
+- README: the Accessibility section links the KWCAG 2.2 table in `@iyulab/components`.
+
 ## [0.33.0] - 2026-09-30
 
 ### Added

package/README.md

@@ -277,11 +277,14 @@ conformance claim for the success criteria it does not list.
 | SC 2.5.8 Target Size (Minimum) | Every pointer target this package renders itself — sidebar links, buttons and group headers (expanded and compact), the sidebar logo and toggle, wizard steps, the page header's back link — is at least 24×24 CSS px or meets the spacing exception (24px between centers), and is actually hit at that position | `tests/browser/target-size.browser.test.ts` (real Chromium) |
 | SC 2.1.1 Keyboard (pointer-cursor check) | Nothing this package renders shows a pointer cursor without being an interactive element — the sidebar logo is a link | `tests/browser/target-size.browser.test.ts` |
 | SC 2.4.1 Bypass Blocks | The sidebar layout's first Tab stop is a «Skip to main content» link, visible when focused and at least 24px tall; it moves focus to the screen's `[autofocus]` element or to the route area, which is the page's single `<main>` landmark | `tests/browser/sidebar-layout-skip-link.browser.test.ts` |
+| SC 3.2.5 Change on Request (new tabs) | A sidebar link with `target: '_blank'` ends its accessible name with a localized, visually hidden "(opens in a new tab)" — expanded and collapsed | `tests/browser/sidebar-link-new-tab-name.browser.test.ts` |
 
 Buttons placed through slots or rendered as `u-button` without size overrides (wizard back/next, the
 master-detail close button) follow `@iyulab/components`, which measures them in its own gate. Color
 contrast likewise comes from that package's tokens.
 
+For **KWCAG 2.2** (the Korean web accessibility standard), the `@iyulab/components` README has a table of all 33 check items — which are guaranteed by a test across the sibling packages, which are shared with the app, and which do not apply: [KWCAG 2.2 대응표](https://github.com/iyulab/node-components#kwcag-22-대응표).
+
 ## Documentation
 
 | Guide | Description |

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

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.151.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.152.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.151.0 → _@oxc-project_runtime@0.152.0}/helpers/esm/decorateMetadata.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.151.0/helpers/esm/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.152.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.151.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.152.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.151.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.152.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.151.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.152.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.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.152.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.151.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.152.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.151.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.152.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.151.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.152.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.151.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.152.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/SidebarButton.styles.js

@@ -8,7 +8,7 @@ var t = e`
     background-color: transparent;
     border: none;
     border-radius: 8px;
-    transition: all 0.2s ease;
+    transition: all var(--u-duration-normal, 220ms) ease;
     cursor: pointer;
   }
   :host(:hover) {

package/dist/components/SidebarGroup.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.152.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/SidebarGroup.styles.js

@@ -22,7 +22,7 @@ var t = e`
     background-color: transparent;
     border: none;
     border-radius: 8px;
-    transition: all 0.2s ease;
+    transition: all var(--u-duration-normal, 220ms) ease;
     cursor: pointer;
   }
   button[compact] {
@@ -71,7 +71,7 @@ var t = e`
   .caret {
     color: inherit;
     font-size: 16px !important;
-    transition: transform 0.2s ease;
+    transition: transform var(--u-duration-normal, 220ms) ease;
   }
   .caret[collapsed] {
     transform: rotate(-90deg);
@@ -86,7 +86,7 @@ var t = e`
     border-left: 2px solid var(--u-border-color-weak, #EEEEEE);
     padding-left: 8px;
     overflow: hidden;
-    transition: all 0.3s ease;
+    transition: all var(--u-duration-slow, 320ms) ease;
   }
   .items[collapsed] {
     margin-top: 0;

package/dist/components/SidebarLink.js

@@ -1,45 +1,47 @@
-import e from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.152.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 { 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 a, nothing as o } from "lit";
-import { customElement as s, property as c } from "lit/decorators.js";
+import { html as o, nothing as s } from "lit";
+import { customElement as c, property as l } from "lit/decorators.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";
 //#region src/components/SidebarLink.ts
-var l = class extends n {
+var u = class extends n {
 	constructor(...e) {
 		super(...e), this.selected = !1, this.compact = !1;
 	}
 	static {
-		this.styles = [super.styles, i];
+		this.styles = [super.styles, a];
 	}
 	render() {
-		return a`
+		return o`
       <u-link
         .href=${this.href || "#"}
         .navigate=${this.navigate}
         .target=${this.target}
-        aria-current=${this.selected ? "page" : o}
+        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=${r}
+            .fallback=${i}
           ></u-icon>
           <span part="label" ?compact=${this.compact}>
             ${this.label}
           </span>
+          ${this.target === "_blank" ? o`<span class="new-tab-hint">${r().opensInNewTab}</span>` : s}
         </div>
       </u-link>
     `;
 	}
 };
-t([c({
+t([l({
 	type: Boolean,
 	reflect: !0
-}), 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);
+}), 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), u = t([c("u-sidebar-link")], u);
 //#endregion
-export { l as SidebarLink };
+export { u as SidebarLink };

package/dist/components/SidebarLink.styles.js

@@ -12,7 +12,7 @@ var t = e`
     color: var(--app-sidebar-fg, var(--u-txt-color, #212121));
     background-color: transparent;
     border-radius: 8px;
-    transition: all 0.2s ease;
+    transition: all var(--u-duration-normal, 220ms) ease;
     cursor: pointer;
   }
   :host(:hover) {
@@ -74,6 +74,8 @@ var t = e`
    * 접힌 상태의 라벨 - 시각적으로만 숨긴다. 접근성 트리에는 남아 항목의 이름이 된다
    * (hidden 은 트리에서도 빼서 이름 없는 항목을 만들었다). 절대배치라 flex 배치와 gap 에 끼지 않는다.
    */
+  /* 새 창 알림 — 화면에는 없고 링크의 접근성 이름에만 붙는다(KWCAG 7.2.1). */
+  .new-tab-hint,
   [part~='label'][compact] {
     position: absolute;
     width: 1px;

package/dist/components/SidebarSection.js

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

@@ -15,6 +15,8 @@ export interface ModernAppLocaleStrings {
     toggleSidebar: string;
     /** Sidebar layout — the «skip to main content» link, the first Tab stop of the shell. */
     skipToContent: string;
+    /** Sidebar links with `target: '_blank'` — appended to the link's accessible name (visually hidden). */
+    opensInNewTab: string;
     /** Wizard — default Back/Next action labels ("Submit" wording is the consumer's call). */
     wizardBack: string;
     wizardNext: string;

package/dist/internals/locale.js

@@ -10,6 +10,7 @@ var t = {
 	toggleMobileMenu: "Toggle menu",
 	toggleSidebar: "Toggle sidebar",
 	skipToContent: "Skip to main content",
+	opensInNewTab: "(opens in a new tab)",
 	wizardBack: "Back",
 	wizardNext: "Next",
 	wizardStepAnnouncement: "Step {index} of {total}: {label}"
@@ -24,6 +25,7 @@ n.register("en", t), n.register("ko", {
 	toggleMobileMenu: "메뉴 열고 닫기",
 	toggleSidebar: "사이드바 열고 닫기",
 	skipToContent: "본문으로 건너뛰기",
+	opensInNewTab: "(새 창에서 열림)",
 	wizardBack: "이전",
 	wizardNext: "다음",
 	wizardStepAnnouncement: "{total}단계 중 {index}단계: {label}"
@@ -56,6 +58,7 @@ function l(e) {
 		toggleMobileMenu: t("toggleMobileMenu"),
 		toggleSidebar: t("toggleSidebar"),
 		skipToContent: t("skipToContent"),
+		opensInNewTab: t("opensInNewTab"),
 		wizardBack: t("wizardBack"),
 		wizardNext: t("wizardNext"),
 		wizardStepAnnouncement: (t, n, r) => {

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.151.0/helpers/esm/decorateMetadata.js";
-import r from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import r from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { StyledElement as i } from "../internals/StyledElement.js";
 import { getLocaleStrings as a } from "../internals/locale.js";
 import { slotHasContent as o } from "../internals/slotted.js";

package/dist/layouts/SidebarLayout.styles.js

@@ -117,7 +117,7 @@ var t = e`
     background: var(--app-sidebar-bg, var(--u-bg-color-raised, #FAFAFA));
     color: var(--app-sidebar-fg, var(--u-txt-color, #212121));
     border-right: 1px solid var(--u-border-color, #E0E0E0);
-    transition: all 0.3s ease;
+    transition: all var(--u-duration-slow, 320ms) ease;
   }
   /* Sidebar states */
   .sidebar[state="default"] {
@@ -327,7 +327,7 @@ var t = e`
     right: 0;
     opacity: 0;
     transform: translateY(-4px);
-    transition: opacity 0.3s ease, transform 0.3s ease;
+    transition: opacity var(--u-duration-slow, 320ms) ease, transform var(--u-duration-slow, 320ms) ease;
     pointer-events: none;
   }
   .main u-progress-bar[visible] {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.33.0",
+  "version": "0.33.2",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -65,8 +65,8 @@
   },
   "peerDependencies": {
     "@iyulab/components": ">=1.49.0",
-    "@lit/react": ">=1.0.8",
-    "react": ">=18.0.0"
+    "@lit/react": "^1.0.8",
+    "react": "^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@lit/react": {