@iyulab/modern-app 0.3.4 → 0.3.6

package/CHANGELOG.md

@@ -1,107 +1,113 @@
 # Changelog
 
-## 0.3.4 (2026-04-01)
+## [0.3.5] - 2026-04-07
 
-### Features
-- Progress bar now fades in/out with CSS transition on route begin/done
-- Progress bar shows error state (red) on `route-error` and auto-dismisses
+### Changed
+- Updated dependencies: `@iyulab/components` ^1.0.1 → ^1.0.3, `@iyulab/router` ^0.7.4 → ^0.9.1
 
-### Documentation
-- Added `docs/` topic guides and `skills/modern-app/` agent skill package
-- Rewrote `README.md` with accurate API and links to docs/skills
+## [0.3.4] - 2026-04-01
 
-## 0.3.3 (2026-04-01)
+### Added
+- Progress bar fade-in/out with CSS transition tied to `route-begin` and `route-done` events
+- Progress bar error state (red) on `route-error` with auto-dismiss
+- `docs/` topic guides and `skills/modern-app/` agent skill package
 
-### Fixes
-- Fixed missing `u-` prefix in `customElement` registration for `SidebarButton`, `SidebarGroup`, `SidebarLink`, and `SidebarSection` — components were referenced as `u-sidebar-*` in the template but registered as `sidebar-*`, causing them not to render
+### Changed
+- Rewrote `README.md` with accurate API references and links to docs and skills
 
-## 0.3.2 (2026-04-01)
+## [0.3.3] - 2026-04-01
 
-### Breaking Changes
-- **`@iyulab/components` major upgrade**: `^0.4.0` → `^1.0.0`
+### Fixed
+- Fixed missing `u-` prefix in `customElement` registration for `SidebarButton`, `SidebarGroup`, `SidebarLink`, and `SidebarSection` — components were referenced as `u-sidebar-*` in templates but registered as `sidebar-*`, causing them not to render
+
+## [0.3.2] - 2026-04-01
+
+### Changed
+- **Breaking:** Upgraded `@iyulab/components` from `^0.4.0` to `^1.0.0`:
   - `Notifier` → `Toast` API migration
-  - `AlertType` → `AlertStatus`, `ScreenPosition` → `ToastPosition` type rename
+  - `AlertType` → `AlertStatus`, `ScreenPosition` → `ToastPosition` type renames
   - `IconRegistry` import path: `utilities/IconRegistry.js` → `utilities/icons.js`
-  - Component import style: `.component.js` → side-effect import (`UIcon.js`, `UButton.js`, etc.)
-
-### Refactor
-- **Component registration migration**: Removed `static dependencies` pattern → `@customElement` decorator + side-effect import
-- **Simplified Toast API**: Removed `private notify()` method from `App` class, each notification method now calls `Toast.notice()`, etc. directly
+  - Component import style: `.component.js` → side-effect import (e.g. `UIcon.js`, `UButton.js`)
+- Removed `static dependencies` pattern — switched to `@customElement` decorator with side-effect imports
+- Simplified Toast API: each notification method now calls `Toast.notice()` etc. directly; removed private `notify()` from `App` class
+- Updated dependencies: `i18next` ^25.8.13 → ^25.10.10, `vite` ^7.3.1 → ^8.0.3, `@types/node` ^25.3.2 → ^25.5.0
 
-### Fixes
+### Fixed
 - Changed `updated()` → `willUpdate()` in `SidebarLayout` to resolve update-in-update anti-pattern
-- Switched `SidebarLayout` icon library from inline `sidebar-app` to `bootstrap`, removed inline SVG registration code
-
-### Dependencies
-- `@iyulab/components` ^0.4.0 → ^1.0.0
-- `i18next` ^25.8.13 → ^25.10.10
-- `vite` ^7.3.1 → ^8.0.3
-- `@types/node` ^25.3.2 → ^25.5.0
-
-## 0.3.1 (2026-03-05)
+- Switched `SidebarLayout` icon library from inline `sidebar-app` to `bootstrap`; removed inline SVG registration
 
-### Breaking Changes
-- **Slot-based Outlet structure**: Replaced `<u-outlet>` inside `SidebarLayout` with `<slot>`, and moved `<u-outlet>` to Light DOM in `App`. This allows external CSS to apply correctly during React routing
+## [0.3.1] - 2026-03-05
 
-### Changes
-- **BaseElement → UElement migration**: Changed base class of all components from `BaseElement` to `UElement`
-- **SidebarLinkConfig**: Changed `type` property from optional to required
-- **Fixed import paths**: Corrected casing for `Theme.js`, `Notifier.js`, etc.
+### Changed
+- **Breaking:** Replaced `<u-outlet>` inside `SidebarLayout` with `<slot>`; moved `<u-outlet>` to Light DOM in `App` to allow external CSS during React routing
+- Migrated base class of all components from `BaseElement` to `UElement`
+- `SidebarLinkConfig.type` changed from optional to required
+- Corrected import path casing for `Theme.js`, `Notifier.js`, etc.
+- Updated dependencies: `@iyulab/components` ^0.2.0 → ^0.4.0, `@iyulab/router` ^0.6.2 → ^0.7.2, `i18next` ^25.8.0 → ^25.8.13, `@types/node` ^25.0.9 → ^25.3.2
 
-### Fixes
+### Fixed
 - Removed duplicate `color` property in `SidebarButton.styles.ts`
 - Cleaned up unused callback parameters in `repeat` directive
 
-### Dependencies
-- `@iyulab/components` ^0.2.0 → ^0.4.0
-- `@iyulab/router` ^0.6.2 → ^0.7.2
-- `i18next` ^25.8.0 → ^25.8.13
-- `@types/node` ^25.0.9 → ^25.3.2
-
-## 0.3.0 (2026-01-21)
-
-### Breaking Changes
-- **Configuration Updates**:
-  - Renamed `localization` to `i18n`
-  - Renamed `layout.menu` to `layout.main` 
-  - Changed `logo` type to string (icon name)
-  - Added `title` property for app title
-  - Added `iconBasepath` option
-- **Mobile layout support**: New mobile states (`mobile`, `mobile-open`) with dedicated mobile header
-
-### Removals
-- Removed `SidebarLogo` component: Logo is now rendered using `u-icon` component
-- Removed `observables.ts`: Replaced MobX observables with native `ScreenObserver` class
-- Removed `AppTypes.ts`: Type definitions moved to their respective modules
-
-### Improvements
-- Improved responsive behavior with screen size observer
-- Added route context tracking and active link highlighting
-- Improved color scheme and typography
-- Enhanced transition animations
-- Cleaner layout spacing and gaps
-- Improved event handling for route changes and screen resizing
-- Enhanced pattern matching for active link detection
-
-## 0.2.5 (2026-01-06)
+## [0.3.0] - 2026-01-21
+
+### Added
+- Mobile layout support with new states (`mobile`, `mobile-open`) and dedicated mobile header
+- Route context tracking and active link highlighting
+- `ScreenObserver` class replacing MobX observables for responsive behavior
+- `title` and `iconBasepath` properties in app configuration
+
+### Changed
+- **Breaking:** `localization` config option renamed to `i18n`
+- **Breaking:** `layout.menu` renamed to `layout.main`
+- **Breaking:** `logo` type changed to string (icon name)
+- Type definitions moved from `AppTypes.ts` to their respective modules
+- Improved color scheme, typography, transition animations, layout spacing, and event handling
+
+### Removed
+- Removed `SidebarLogo` component — logo now rendered via `u-icon`
+- Removed `observables.ts` (replaced by `ScreenObserver`)
+- Removed `AppTypes.ts`
+
+## [0.2.5] - 2026-01-06
+
+### Changed
 - Updated `@iyulab/components` to v0.1.11
 
-## 0.2.4 (2025-12-19)
-- fix import path, modified correct case-sensitive paths
+## [0.2.4] - 2025-12-19
+
+### Fixed
+- Fixed case-sensitive import paths
+
+## [0.2.3] - 2025-12-19
+
+### Added
+- `root` option in `AppConfig` to set the application root element
+
+### Changed
+- Updated `@iyulab/components` to v0.1.10
+
+## [0.2.2] - 2025-11-17
+
+### Added
+- `fallback` config option in `AppConfig`
+
+### Changed
+- Improved `route-progress` handling in layout component
+
+## [0.2.1] - 2025-11-13
+
+### Changed
+- `progress` property changed from a value to a function on the `app` instance
+- `locales` option renamed to `localization` in `AppConfig`
 
-## 0.2.3 (2025-12-19)
-- added `root` option in `AppConfig` type to set application root element
-- update `@iyulab/components` to v0.1.10
+### Fixed
+- Fixed component and sidebar style issues
 
-## 0.2.2 (2025-11-17)
-- added `fallback` config in `AppConfig` type
-- improved route-progress handling in layout component
+### Removed
+- Removed `theme` setter property from `app` instance
 
-## 0.2.1 (2025-11-13)
-- Fixed few component and sidebar styles
-- removed `theme` setter property in `app` instance
-- changed `progress` property to function in `app` instance
-- changed name `locales` option to `localization` option in `AppConfig` type
+## [0.2.0] - 2025-11-12
 
-## 0.2.0 (2025-11-12)
-- Initial library version release
+### Added
+- Initial release

package/dist/_virtual/{_@oxc-project_runtime@0.122.0 → _@oxc-project_runtime@0.130.0}/helpers/decorate.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.122.0/helpers/decorate.js
+//#region \0@oxc-project+runtime@0.130.0/helpers/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.122.0 → _@oxc-project_runtime@0.130.0}/helpers/decorateMetadata.js

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

package/dist/components/SidebarButton.js

@@ -1,5 +1,5 @@
-import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
-import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorateMetadata.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { styles as r } from "./SidebarButton.styles.js";
 import { html as i } from "lit";

package/dist/components/SidebarGroup.js

@@ -1,5 +1,5 @@
-import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
-import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorateMetadata.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { SidebarLink as r } from "./SidebarLink.js";
 import { styles as i } from "./SidebarGroup.styles.js";

package/dist/components/SidebarLink.js

@@ -1,5 +1,5 @@
-import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
-import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorateMetadata.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { styles as r } from "./SidebarLink.styles.js";
 import { html as i } from "lit";

package/dist/components/SidebarSection.js

@@ -1,5 +1,5 @@
-import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
-import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorateMetadata.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/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/internals/StyledElement.js

@@ -1,5 +1,5 @@
-import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
-import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorateMetadata.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/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

@@ -51,6 +51,8 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
     private handleRouteDone;
     /** 라우트 에러 핸들러 */
     private handleRouteError;
+    /** .main 키보드 스크롤 핸들러 (WCAG 2.1 SC 2.1.1) */
+    private _handleMainKeydown;
     /** 화면 크기 변경에 따른 사이드바 상태 업데이트 */
     private handleScreenResize;
 }

package/dist/layouts/SidebarLayout.js

@@ -1,6 +1,6 @@
 import { app as e } from "../App.js";
-import { __decorateMetadata as t } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
-import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { __decorateMetadata as t } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorateMetadata.js";
+import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
 import { StyledElement as r } from "../internals/StyledElement.js";
 import "../components/SidebarSection.js";
 import "../components/SidebarLink.js";
@@ -31,11 +31,38 @@ var m, h = class extends r {
 		}, this.handleRouteDone = (e) => {
 			this.progressBarEl.value = 100, setTimeout(() => {
 				this.progressBarEl.removeAttribute("visible");
-			}, 300);
+			}, 300), (this.shadowRoot?.querySelector(".main"))?.focus({ preventScroll: !0 });
 		}, this.handleRouteError = (e) => {
 			this.progressBarEl.setAttribute("error", ""), this.progressBarEl.value = 100, setTimeout(() => {
 				this.progressBarEl.removeAttribute("visible"), this.progressBarEl.removeAttribute("error");
 			}, 300);
+		}, this._handleMainKeydown = (e) => {
+			let t = this.shadowRoot?.querySelector(".main");
+			if (!t) return;
+			let n = t.clientHeight;
+			switch (e.key) {
+				case " ":
+				case "PageDown":
+					t.scrollTop += e.shiftKey ? -n : n;
+					break;
+				case "PageUp":
+					t.scrollTop -= n;
+					break;
+				case "End":
+					t.scrollTop = t.scrollHeight;
+					break;
+				case "Home":
+					t.scrollTop = 0;
+					break;
+				case "ArrowDown":
+					t.scrollTop += 80;
+					break;
+				case "ArrowUp":
+					t.scrollTop -= 80;
+					break;
+				default: return;
+			}
+			e.preventDefault();
 		}, this.handleScreenResize = (e) => {
 			let t = e.detail.size;
 			t === "large" ? this.state = "default" : t === "medium" ? this.state = "slim" : t === "small" ? this.state = "mobile" : console.warn("Unknown screen size:", t);
@@ -105,7 +132,7 @@ var m, h = class extends r {
       </aside>
 
       <!-- Main Content -->
-      <div class="main" part="main" scrollable>
+      <div class="main" part="main" scrollable tabindex="-1" @keydown=${this._handleMainKeydown}>
         <u-progress-bar part="progress"></u-progress-bar>
 
         <slot></slot>

package/dist/layouts/SidebarLayout.styles.js

@@ -148,6 +148,7 @@ var t = e`
     flex: 1;
     background: var(--u-bg-color);
     overflow: auto;
+    outline: none;
   }
 
   .main u-progress-bar {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -38,15 +38,15 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@iyulab/components": "^1.0.1",
-    "@iyulab/router": "^0.7.4",
-    "i18next": "^25.10.10",
-    "lit": "^3.3.2"
+    "@iyulab/components": "^1.0.6",
+    "@iyulab/router": "^0.9.3",
+    "i18next": "^26.2.0",
+    "lit": "^3.3.3"
   },
   "devDependencies": {
-    "@types/node": "^25.5.0",
+    "@types/node": "^25.8.0",
     "typescript": "^5.9.3",
-    "vite": "^8.0.3",
-    "vite-plugin-dts": "^4.5.4"
+    "vite": "^8.0.13",
+    "vite-plugin-dts": "^5.0.0"
   }
 }