@iyulab/modern-app 0.47.0 → 0.48.0

package/dist/layouts/SidebarLayout.styles.js

@@ -7,10 +7,10 @@ var t = e`
     flex-direction: row;
     width: 100%;
     height: 100%;
-    /* 셸은 뷰포트보다 커지지 않는다 — 부모에 높이가 없으면 height: 100% 가 걸릴 곳이 없어 셸이
-       본문 길이로 커지고, 그러면 .main 대신 문서가 스크롤해 사이드바가 본문과 함께 밀려 나간다.
-       상한을 두면 본문은 언제나 .main 안에서 스크롤하고 크롬은 제자리에 있다. 부모가 뷰포트보다
-       낮은 높이를 주면 그 높이가 그대로 이긴다. */
+    
+
+
+
     max-height: 100dvh;
     font-family: var(--u-font-base);
     overflow: hidden;
@@ -32,25 +32,25 @@ var t = e`
     height: 24px;
     width: auto;
     object-fit: contain;
-    /* 호스트 하한(--u-target-size) — 그림은 24px 그대로, 누르는 상자만 여백으로 넓히고 같은 만큼 되돌려 배치는 그대로.
-       미설정이면 여백 0(종전). */
+    
+
     --_logo-pad: max(0px, calc((var(--u-target-size, 0px) - 24px) / 2));
     box-sizing: content-box;
     padding: var(--_logo-pad);
     margin: calc(-1 * var(--_logo-pad));
   }
-  /* 로고를 감싼 링크 — 인라인 기준선 여백이 생기지 않게 로고 상자에 딱 맞춘다. */
+  
   .logo-link {
     display: inline-flex;
     align-items: center;
   }
 
-  /*
-   * ★단 배정은 «관측값 근사»가 아니라 «용도»로 한다 — 이 자리는 앱의 제목이다.
-   *   종전 18px 은 스케일에 없는 값이었고, 같은 판정을 이미 u-dialog·u-drawer 제목에
-   *   내린 적이 있다(L2-3, 18px → subtitle).
-   * ⚠줄 박스는 바뀌지 않는다: 16 x 1.5 = 24px = 종전 line-height. 헤더 높이 불변.
-   */
+  
+
+
+
+
+
   .title {
     flex: 1;
     color: var(--u-txt-color, #212121);
@@ -63,17 +63,17 @@ var t = e`
     text-overflow: ellipsis;
   }
 
-  /*
-   * 토글러의 "테두리·배경 없음"은 마크업의 appearance="plain" 이 낸다.
-   *
-   * ★여기에 border/background 를 적는 것으로는 부족했다 — 이 규칙은 <u-button> **호스트**에만
-   *   닿고, 테두리를 실제로 그리는 것은 그 섀도 루트 안의 <button> 이다(solid 기본값이
-   *   --btn-border-color: var(--btn-color) 로 그린다). 호스트만 재면 0px 이라 보이지도 않았다.
-   *   variant 를 명시해 컴포넌트가 스스로 투명하게 그리도록 한다.
-   *
-   * color: inherit 는 유지한다 — 헤더 색을 따라가게 하려는 의도이고 plain 의 기본 전경
-   * (--u-txt-color)보다 이 레이아웃의 뜻이 앞선다.
-   */
+  
+
+
+
+
+
+
+
+
+
+
   .toggler {
     color: inherit;
     font-size: 20px;
@@ -83,7 +83,7 @@ var t = e`
     color: var(--u-txt-color-hover, #1565C0);
   }
 
-  /* 본문 바로가기 — 포커스될 때만 보인다(보이지 않을 때는 자리도 차지하지 않는다). */
+  
   .skip-link {
     position: absolute;
     top: 8px;
@@ -112,7 +112,7 @@ var t = e`
     outline: none;
   }
 
-  /* Sidebar Container */
+  
   .sidebar {
     position: relative;
     z-index: var(--u-layer-shell, 1000);
@@ -120,22 +120,22 @@ var t = e`
     flex-direction: column;
     justify-content: space-between;
     gap: 8px;
-    /* 높이는 백분율이 아니라 flex 의 stretch 로 받는다 — 셸의 높이가 «부모의 확정 높이» 가 아니라
-       max-height 상한에서 나오면 height: 100% 는 풀리지 않아(auto) 사이드바가 메뉴 길이로 커지고,
-       셸의 overflow: hidden 이 아래쪽 계정 영역을 잘라 닿을 수 없게 된다. 늘어난 항목의 높이는
-       그 경우에도 셸의 (상한으로 잘린) 높이다. .main-region 과 같은 해법이다. 떠 있는 상태
-       (modal · mobile*)는 절대배치라 top/bottom 으로 채운다. */
+    
+
+
+
+
     min-height: 0;
-    /* --u-panel-bg-color 가 아니라 --u-bg-color-raised — 사이드바는 카드·메뉴류의
-       "떠 있는 패널"이 아니라 상시 크롬이고, 그 구분이 정확히 두 토큰이 갈리는 지점이다
-       (light.css 293~298행 참조). 미설정 시 페이지(--u-bg-color)와 같은 흰색으로 앉아
-       사이드바·페이지·카드 삼중 무구분을 만들던 종전 폴백을 대체한다. */
+    
+
+
+
     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 var(--u-duration-slow, 320ms) ease;
   }
-  /* Sidebar states */
+  
   .sidebar[state="default"] {
     width: var(--app-sidebar-width, 260px);
   }
@@ -171,7 +171,7 @@ var t = e`
     transform: translateY(0);
   }
 
-  /* Mobile Header */
+  
   .mobile-header {
     position: relative;
     z-index: calc(var(--u-layer-shell, 1000) + 1);
@@ -187,7 +187,7 @@ var t = e`
     user-select: none;
   }
 
-  /* Sidebar Header */
+  
   .sidebar-header {
     display: flex;
     flex-direction: row;
@@ -199,10 +199,10 @@ var t = e`
     user-select: none;
   }
 
-  /* Sidebar Main Menu */
+  
   .sidebar-main {
     flex: 1;
-    /* 열 방향 flex 항목의 자동 최소 높이는 내용 길이다 — 0 으로 풀어야 남는 높이 안에서 스크롤한다. */
+    
     min-height: 0;
     display: flex;
     flex-direction: column;
@@ -212,7 +212,7 @@ var t = e`
     overflow-y: auto;
   }
 
-  /* Sidebar Footer */
+  
   .sidebar-footer {
     display: flex;
     flex-direction: column;
@@ -224,31 +224,31 @@ var t = e`
     display: none;
   }
 
-  /* Main Content
-   * ★기본 패딩을 준다 — 라우트 콘텐츠가 뷰포트/사이드바 경계에 그대로 맞닿아 모든
-   *   소비자가 같은 배선을 재구현하던 문제였다. 값은 이 라이브러리의 spacing 스케일
-   *   상단 근처(3xl)에서 골랐다 — LOB 화면의 표준 여백으로 쓰기에 과하지 않은 최대값.
-   * ⚠«패딩 박스» 기준 절대배치는 이 padding 의 영향을 받지 않는다 — 바로 아래
-   *   u-progress-bar 가 top/left/right:0 으로 여전히 테두리에 꽉 차게 붙는 이유다
-   *   (CSS 2.1 §10.6.4: 절대배치 자손의 containing block 은 가장 가까운 positioned
-   *   조상의 «패딩 박스»이고, 그 경계는 조상 자신의 padding 값에 밀리지 않는다).
-   *   풀블리드를 원하는 소비자는 layout.styles.main = { padding: '0' } 로 되돌린다. */
+  
+
+
+
+
+
+
+
+
   .main-region {
     position: relative;
     flex: 1;
-    /* flex item 의 자동 최소 크기는 콘텐츠 기준(.main 의 min-content)이다 — 이 래퍼는
-       overflow 가 visible 이라 그 하한이 그대로 살아, flex-shrink 가 있어도 셸 밖으로
-       커진다. 그러면 .main 의 overflow: auto 가 한 번도 발동하지 않는다. 주축이 어느 쪽이든
-       같은 원인이라 두 축을 함께 푼다:
-         · 높이 — :host([state="mobile"]) 은 flex-direction: column 이라 min-height 가 필요하다.
-           없으면 셸 전체가 콘텐츠 높이만큼 부풀어 오른다.
-         · 너비 — 데스크톱(row)에서는 min-width 가 필요하다. 없으면 넓은 표 하나가 셸을
-           뷰포트 밖으로 밀어 오른쪽 열이 잘리고 가로 스크롤도 생기지 않는다. */
+    
+
+
+
+
+
+
+
     min-height: 0;
     min-width: 0;
-    /* .main 의 높이를 백분율이 아니라 flex 로 준다 — 셸의 높이가 «부모의 확정 높이» 가 아니라
-       max-height 상한에서 나올 때 백분율은 풀리지 않는다(auto 로 떨어져 .main 이 본문 길이가 된다).
-       늘어난(stretch) 항목의 크기는 그 경우에도 이 래퍼에 정해진다. */
+    
+
+
     display: flex;
     flex-direction: column;
   }
@@ -265,37 +265,37 @@ var t = e`
     outline: none;
   }
 
-  /*
-   * 라우트 본문을 감싸는 래퍼 — 평소에는 «상자를 만들지 않는다»(display: contents).
-   *
-   * 높이가 정해진 스크롤 컨테이너(.main) 안에서 라우트 화면은 세 형태다: ⑴채움(height: 100%)
-   * ⑵채움-큼(채우되 안의 표가 뷰포트보다 많은 행을 자기 안에서 굴린다) ⑶흐름(길어지고 .main 이
-   * 스크롤한다). 사이에 상자가 있으면 셋 중 하나가 반드시 깨진다(실측):
-   *   · height: 100% → 상자가 못 박혀 ⑶의 화면이 밖으로 넘치고, .main 은 끝 padding 을 in-flow
-   *     자식(= 이 래퍼) 뒤에 붙이므로 스크롤 끝의 거터가 사라진다.
-   *   · grid + min-height: 100% → ⑶은 되지만 트랙이 항목의 내용 크기로 잡히고 그 계산 동안
-   *     height: 100% 는 auto 로 취급되어, ⑵의 표가 모든 행 높이로 자란다.
-   * 상자가 없으면 화면이 .main 을 직접 받는다. 아웃렛(u-outlet)도 같은 이유로 상자가 없다.
-   *
-   * ⚠공지(slot="notice")가 있으면 채우는 화면은 그 높이만큼 넘친다 — 공지는 본문 위 흐름 안에
-   *   있고, 채우는 화면의 height: 100% 는 공지를 모른다. 두 형태를 CSS 로 가를 수 없어 알려진
-   *   한계로 둔다(공지는 드물고 잠깐이다).
-   */
+  
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
   .main-content {
     display: contents;
   }
 
-  /*
-   * 앱 수준 공지 스택 — 한 화면이 아니라 셸에 속한다.
-   * 본문 맨 위 «흐름 안»에 둔다. 세 대안을 소비자가 먼저 실측해 기각했다:
-   *   · fixed → 본문을 덮는다.
-   *   · 셸 바깥 흐름 → 셸 높이에 더해져 이중 스크롤.
-   *   · .main 안 sticky → 좁은 화면에서 공지 둘이 상시 3할을 점유한다. 배너는
-   *     «막지 않는 것»이 값이라 상시 점유가 그 값을 깎는다.
-   * .main-content 안에 있으므로 오버레이가 열리면 본문과 함께 inert 가 된다.
-   * 폭은 스택이 정한다 — 공지(u-alert)는 자기 폭이 fit-content 라 문구 길이대로
-   * 들쭉날쭉해진다. 배치 컨테이너의 결정이다.
-   */
+  
+
+
+
+
+
+
+
+
+
+
   .notices {
     display: flex;
     flex-direction: column;
@@ -310,36 +310,36 @@ var t = e`
     box-sizing: border-box;
   }
 
-  /*
-   * 오버레이가 열린 동안 «본문 영역»을 스태킹 컨텍스트로 만든다.
-   *
-   * 오버레이 틀은 z-index: 1 이고, 라우트 본문은 그보다 큰 z 를 일상적으로 쓴다 —
-   * 데이터 그리드의 sticky 머리행·고정 열이 2~4 에 있다. .main 도 .main-region 도
-   * 스태킹 컨텍스트를 만들지 않으므로 그것들과 오버레이 틀이 «같은 컨텍스트에서 직접
-   * 겨루고», 본문이 이긴다 — 덮으라고 띄운 패널을 목록이 뚫고 나온다.
-   *
-   * ⚠값을 올리는 처방(z-index 를 50 으로)은 소비자의 z 어휘가 커지면 같은 경주를 다시
-   *   한다. 경계를 세워야 한다.
-   *
-   * ⚠경계를 «어디에» 세우는가가 갈린다 — 넷을 픽셀 대조로 실측하고 골랐다:
-   *     · .overlay 자신을 컨텍스트로 → 자기 z 는 여전히 1 이라 바깥에서 3 에게 진다. ✗
-   *     · .main-region 을 컨텍스트로 → 본문과 오버레이를 «같은» 새 컨텍스트에 함께
-   *       가두므로 그 안에서 순서가 그대로다. ✗
-   *     · .main / .main-content 를 «상시» 컨텍스트로 → 오버레이는 이기지만 본문 안의
-   *       position: fixed 팝오버가 사이드바(z 1000) 위로 못 올라간다(상시 동작 변경).
-   *       .main 쪽은 셸 자신의 진행 막대(z 100)까지 오버레이 아래로 내린다. ✗
-   *     · 이 규칙 — 오버레이가 열린 동안만 .main-content 를 컨텍스트로 → 세 축 모두 유지. ✓
-   *
-   * ⇒ 경계가 필요한 조건은 정확히 «오버레이가 열려 있다» 이고, 그때만 세운다. 닫혀 있으면
-   *   겨룰 상대가 없다(.overlay.empty 는 display: none 이다).
-   * ⚠ .main 이 아니라 .main-content 인 것도 의도다 — 가두는 대상은 «소비자의 라우트 본문»
-   *   이지 셸 자신의 chrome 이 아니다. 진행 막대는 .main-content 밖(.main 직속)이라 이
-   *   경계에 걸리지 않고, 오버레이가 열린 채로 일어나는 라우트 전환을 계속 보고한다.
-   */
+  
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
   :host(:state(overlay)) .main-content {
-    /* 쌓임 맥락은 상자가 있어야 생긴다 — 오버레이가 열린 동안만 상자를 둔다(본문은 inert 이고
-       오버레이 아래에 있다). height: 100% 라 채우는 화면은 그대로이고, 흐름 화면의 끝 거터만 그동안
-       빠진다. */
+    
+
+
     display: block;
     height: 100%;
     isolation: isolate;
@@ -383,7 +383,7 @@ var t = e`
     z-index: 2;
   }
 
-  /* Backdrop for modal mode */
+  
   .backdrop {
     position: absolute;
     z-index: 100;
@@ -394,14 +394,14 @@ var t = e`
     background: var(--u-overlay-bg-color, rgba(0, 0, 0, 0.5));
   }
 
-  /*
-   * 인쇄 — 화면의 «뷰포트를 채우는 고정 상자 + 스크롤하는 본문» 모델을 풀어 준다.
-   * 그대로 두면 사이드바가 종이에 찍히고, 본문이 스크롤 컨테이너라 첫 쪽 높이 밖이 잘린다.
-   * ★!important 를 쓰지 않는다 — 섀도 안의 important 선언은 바깥 ::part 의 important 보다 이겨
-   *   소비자가 인쇄물에 크롬을 되살릴 길(::part(sidebar) 재정의)을 막는다. 대가로 config.styles 의
-   *   인라인 스타일은 이 규칙보다 앞선다(그 자리에 높이·overflow 를 적는 소비자는 드물다).
-   * ⚠본문 패딩도 푼다 — 종이의 여백은 @page 가 준다. 화면 여백이 그 위에 겹치면 폭을 잃는다.
-   */
+  
+
+
+
+
+
+
+
   @media print {
     :host {
       display: block;
@@ -415,8 +415,8 @@ var t = e`
     .main u-progress-bar {
       display: none;
     }
-    /* block 으로 되돌린다 — flex 컨테이너는 자식의 여백 접힘을 막아, 화면 마지막 블록의 아래
-       여백이 종이 위에서 셸을 뚫고 접히지 못한다. */
+    
+
     .main-region {
       display: block;
       height: auto;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.47.0",
+  "version": "0.48.0",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -60,7 +60,7 @@
     "test:react-types": "tsc -p tsconfig.react-smoke.json"
   },
   "dependencies": {
-    "@iyulab/router": "^0.20.0",
+    "@iyulab/router": "^0.21.0",
     "i18next": "^26.3.6",
     "lit": "^3.3.3"
   },

package/skills/modern-app/SKILL.md

@@ -156,7 +156,7 @@ language once, with `Locale.set()` — the primitives and `@iyulab/flex-table` f
 Register other languages, or your own wording, in the same namespace:
 
 ```typescript
-import { Locale } from '@iyulab/components';
+import { Locale } from '@iyulab/components/dist/utilities/Locale.js'; // the barrel would register every component
 import { modernAppLocale } from '@iyulab/modern-app';
 
 Locale.set('ko');                       // built-in Korean — nothing to register
@@ -170,9 +170,8 @@ modernAppLocale.register('ja', {
 
 A partial table is enough — untranslated keys fall back to English, and a registration for a
 built-in language overrides only the keys it gives. An element's own `locale`
-attribute overrides the active language for that element. `registerLocale`/`setDefaultLocale` still
-work but are deprecated: a `setDefaultLocale()` call takes precedence over `Locale` until it is
-called with `undefined`.
+attribute overrides the active language for that element. The language is chosen in one place —
+`Locale.set()` (the old `registerLocale`/`setDefaultLocale` were removed in 0.48.0).
 
 ---