zdp-design-system 0.44.0 → 0.45.0

package/CHANGELOG.md

@@ -2,8 +2,11 @@
 
 ## Unreleased
 
+- Added layer and mobile-safe viewport tokens, then moved overlay z-index and `100vh`/`100vw` sizing to named token usage across Svelte components and static utilities.
+- Strengthened package checks for overlay token usage and overrideable default labels.
+- Documented that repeated mobile keyboard, long option, async option, grouped option, virtualized list, or collision pressure should move Menu, Popover, and Combobox flows to Sheet or a headless spike.
 - Added `AdSlot` plus static `.zdp-ad-slot` utilities for provider-neutral ad or sponsorship placement reservation while keeping provider scripts, consent, slot ids, `ads.txt`, personalized ads, and automatic content insertion in consuming apps.
-- Documented the dependency adoption policy: active ZDP sibling consumers may keep `file:../zdp-design-system`, while standalone consumers, public templates, and external examples should use the npm package from `^0.44.0`.
+- Documented the dependency adoption policy: active ZDP sibling consumers may keep `file:../zdp-design-system`, while standalone consumers, public templates, and external examples should use the npm package from `^0.45.0`.
 - Added a single-component consumer fixture proof so the root barrel keeps tree-shaking unused component exports out of Button-only bundles.
 
 ## 0.43.8

package/README.md

@@ -23,6 +23,8 @@ Default component text is English. 제품별 화면은 필요한 모든 user-fac
 
 - `type`: body, body small, page title, title, label, caption, control, data에 쓰는 기본 크기와 줄높이
 - `breakpoint`: mobile, tablet, desktop, wide 기준 폭
+- `layer`: behind, floating, toast, sheet, dialog, skip-link 계층 기준
+- `viewport`: mobile-safe overlay clamp와 safe-area inset 기준
 - `control`: 버튼, 아이콘 버튼, 입력류가 공유할 높이, radius, border width, hit target, 선택 컨트롤 전용 mark, indicator, switch, scrollbar 크기
 - `focus`: 키보드 사용자가 현재 위치를 놓치지 않도록 하는 sunlit focus highlight, dark text, dark line
 - `selection`: 드래그로 선택한 텍스트가 브라우저 기본 파란색 대신 theme surface와 readable text로 보이게 하는 selection 색
@@ -66,7 +68,7 @@ Tailwind Plus와 Tailwind UI 계열은 파생/재배포 리스크 때문에 ZDP
 - Viewports는 ZDP Mobile, Tablet, Desktop, Wide 프리셋으로 mobile/tablet/desktop 폭을 확인한다.
 - Accessibility addon은 CI 실패 게이트로 유지한다. 새 story는 a11y 위반을 남긴 채 merge하지 않는다.
 - Interaction play는 `Tabs`, `Dialog`, `ConfirmAction`처럼 키보드와 상태 전이가 중요한 컴포넌트에 먼저 붙인다.
-- Theme / Locale Stress story는 light/dark, ZDP Mobile 폭, 긴 한국어/영어/중국어/힌디어 문장, focus-visible 상태를 한 번에 확인한다.
+- Theme / Locale Stress story는 light/dark, ZDP Mobile 폭, 긴 한국어/영어/중국어/힌디어/베트남어/러시아어/말레이어/태국어 문장, focus-visible 상태를 한 번에 확인한다.
 
 ## 패키지 표면
 
@@ -99,7 +101,7 @@ import 'zdp-design-system/expressive-fonts.css';
 
 패키지 export는 `dist/` 산출물을 가리킨다. root runtime entry는 `dist/index.js`, type entry는 `dist/index.d.ts`다. 원천은 `src/lib`, `src/styles`, `tokens/zdp.tokens.json`, `src/lib/share.ts`이고 `bun run package:build`가 소비자용 `dist/` 표면을 다시 만든다. 소비 저장소와 문서 예시는 `zdp-design-system` public export만 쓰고 내부 `src/` 경로를 직접 import하지 않는다.
 
-ZDP monorepo 안의 active sibling 소비처는 `file:../zdp-design-system` 의존성을 유지할 수 있다. 이 방식은 release 전 변경을 같이 검증하기 위한 local workspace 계약이므로 CI에서 sibling checkout과 `bun run package:build`를 먼저 수행해야 한다. sibling checkout을 전제로 하지 않는 standalone consumer, public template, external example은 npm registry의 `zdp-design-system: ^0.44.0`을 기본으로 쓴다.
+ZDP monorepo 안의 active sibling 소비처는 `file:../zdp-design-system` 의존성을 유지할 수 있다. 이 방식은 release 전 변경을 같이 검증하기 위한 local workspace 계약이므로 CI에서 sibling checkout과 `bun run package:build`를 먼저 수행해야 한다. sibling checkout을 전제로 하지 않는 standalone consumer, public template, external example은 npm registry의 `zdp-design-system: ^0.45.0`을 기본으로 쓴다.
 
 ## 소비 컴포넌트 계약
 
@@ -511,8 +513,8 @@ preview/index.html
 - `styles.css`는 Pretendard Variable dynamic subset을 로드하고, sans/display stack은 `"Pretendard Variable", Pretendard`를 최우선으로 둔다.
 - `brand-fonts.css`는 선택형 public export이며 `font.family.brand`와 `.zdp-brand-wordmark`가 쓰는 Playwrite AU VIC Guides를 로드한다. 일반 문서 제목, 제품 UI heading, 표, 본문에는 `brand` stack을 쓰지 않는다.
 - `expressive-fonts.css`는 선택형 public export이며 `font.family.expressionScript`, `font.family.expressionInscription`, `font.family.expressionSketch`, `font.family.expressionEditorial`, `font.family.expressionSans`, `font.family.expressionKeyboard`가 쓰는 표현용 Google Fonts를 로드한다. 기본 앱 UI, 표, 긴 본문, 일반 Tooltip에는 자동 적용하지 않는다.
-- `locale-fonts.css`는 선택형 public export이며 Manrope, Noto Sans SC, Noto Sans Devanagari, Noto Sans JP 웹폰트를 로드한다. 모든 소비 앱이 반드시 가져갈 필요는 없다.
-- `:lang(en|es|fr|de|pt|id)`는 Manrope/Inter 라틴 스택, `:lang(ko)`는 Pretendard 한국어 스택, `:lang(zh)`는 Noto Sans SC/시스템 중국어 스택, `:lang(hi)`는 Noto Sans Devanagari/시스템 데바나가리 스택, `:lang(ja)`는 Noto Sans JP/시스템 일본어 스택으로 덮어쓴다.
+- `locale-fonts.css`는 선택형 public export이며 Manrope, Noto Sans SC, Noto Sans Devanagari, Noto Sans JP, Noto Sans Thai 웹폰트를 로드한다. 모든 소비 앱이 반드시 가져갈 필요는 없다.
+- `:lang(en|es|fr|vi|ru|id|ms)`는 Manrope/Inter 라틴 스택, `:lang(ko)`는 Pretendard 한국어 스택, `:lang(zh)`는 Noto Sans SC/시스템 중국어 스택, `:lang(hi)`는 Noto Sans Devanagari/시스템 데바나가리 스택, `:lang(ja)`는 Noto Sans JP/시스템 일본어 스택, `:lang(th)`는 Noto Sans Thai/시스템 태국어 스택으로 덮어쓴다.
 - Flutter, native shell, 문서 생성기는 JSON 토큰의 hex 값을 기본 입력으로 쓰고 필요할 때 OKLCH를 별도 변환한다.
 
 ## Flat UI 계약

package/dist/components/Combobox.svelte

@@ -476,13 +476,13 @@
     font-family: var(--zdp-font-family-sans);
     inline-size: 100%;
     left: 0;
-    max-block-size: min(18rem, calc(100vh - var(--zdp-space-8)));
+    max-block-size: min(18rem, calc(var(--zdp-viewport-block) - var(--zdp-space-8)));
     min-width: 0;
     overflow: auto;
     padding: var(--zdp-space-1);
     position: absolute;
     top: calc(100% + var(--zdp-space-2));
-    z-index: 40;
+    z-index: var(--zdp-layer-floating);
   }
 
   .zdp-combobox__listbox {

package/dist/components/ConfirmAction.svelte

@@ -208,7 +208,7 @@
     position: absolute;
     top: 0;
     width: calc(var(--zdp-confirm-action-progress) * 100%);
-    z-index: -1;
+    z-index: var(--zdp-layer-behind);
   }
 
   .zdp-confirm-action__thumb {

package/dist/components/Dialog.svelte

@@ -162,13 +162,14 @@
     display: grid;
     inset: 0;
     justify-items: center;
-    padding: var(--zdp-space-4);
+    padding-block: max(var(--zdp-space-4), var(--zdp-viewport-safe-block-start)) max(var(--zdp-space-4), var(--zdp-viewport-safe-block-end));
+    padding-inline: max(var(--zdp-space-4), var(--zdp-viewport-safe-inline-start)) max(var(--zdp-space-4), var(--zdp-viewport-safe-inline-end));
     position: fixed;
-    z-index: 1000;
+    z-index: var(--zdp-layer-dialog);
   }
 
   .zdp-dialog__backdrop {
-    background: rgb(47 36 24 / 0.42);
+    background: var(--zdp-color-backdrop-dialog);
     border: 0;
     cursor: pointer;
     inset: 0;
@@ -177,10 +178,6 @@
     position: fixed;
   }
 
-  :global([data-zdp-theme="dark"]) .zdp-dialog__backdrop {
-    background: rgb(10 8 5 / 0.72);
-  }
-
   .zdp-dialog__panel {
     background: var(--zdp-color-surface-panel);
     border: var(--zdp-control-border-width) solid var(--zdp-color-line-strong);
@@ -189,7 +186,7 @@
     color: var(--zdp-color-ink-normal);
     display: grid;
     gap: var(--zdp-space-4);
-    max-height: min(42rem, calc(100vh - var(--zdp-space-8)));
+    max-height: min(42rem, calc(var(--zdp-viewport-block) - var(--zdp-space-8)));
     min-width: 0;
     overflow: auto;
     padding: var(--zdp-space-5);
@@ -292,11 +289,12 @@
   @media (max-width: 520px) {
     .zdp-dialog {
       align-items: end;
-      padding: var(--zdp-space-3);
+      padding-block: max(var(--zdp-space-3), var(--zdp-viewport-safe-block-start)) max(var(--zdp-space-3), var(--zdp-viewport-safe-block-end));
+      padding-inline: max(var(--zdp-space-3), var(--zdp-viewport-safe-inline-start)) max(var(--zdp-space-3), var(--zdp-viewport-safe-inline-end));
     }
 
     .zdp-dialog__panel {
-      max-height: calc(100vh - var(--zdp-space-6));
+      max-height: calc(var(--zdp-viewport-block) - var(--zdp-space-6));
       padding: var(--zdp-space-4);
     }
   }

package/dist/components/Menu.svelte

@@ -377,13 +377,13 @@
     font-family: var(--zdp-font-family-sans);
     gap: var(--zdp-space-1);
     inline-size: max-content;
-    max-block-size: min(24rem, calc(100vh - var(--zdp-space-8)));
-    max-inline-size: min(18rem, calc(100vw - var(--zdp-space-6)));
+    max-block-size: min(24rem, calc(var(--zdp-viewport-block) - var(--zdp-space-8)));
+    max-inline-size: min(18rem, calc(var(--zdp-viewport-inline) - var(--zdp-space-6)));
     min-inline-size: 12rem;
     overflow: auto;
     padding: var(--zdp-space-1);
     position: absolute;
-    z-index: 40;
+    z-index: var(--zdp-layer-floating);
   }
 
   .zdp-menu__panel:focus-visible {

package/dist/components/Popover.svelte

@@ -148,13 +148,13 @@
     font-family: var(--zdp-font-family-sans);
     gap: var(--zdp-space-3);
     inline-size: max-content;
-    max-block-size: min(24rem, calc(100vh - var(--zdp-space-8)));
-    max-inline-size: min(22rem, calc(100vw - var(--zdp-space-6)));
+    max-block-size: min(24rem, calc(var(--zdp-viewport-block) - var(--zdp-space-8)));
+    max-inline-size: min(22rem, calc(var(--zdp-viewport-inline) - var(--zdp-space-6)));
     min-inline-size: 12rem;
     overflow: auto;
     padding: var(--zdp-space-3);
     position: absolute;
-    z-index: 40;
+    z-index: var(--zdp-layer-floating);
   }
 
   .zdp-popover__panel:focus-visible {

package/dist/components/ShareDock.svelte

@@ -136,12 +136,12 @@
   .zdp-share-dock {
     color: var(--zdp-color-ink-normal);
     font-family: var(--zdp-font-family-sans);
-    z-index: 20;
+    z-index: var(--zdp-layer-share-dock);
   }
 
   .zdp-share-dock--side {
     position: fixed;
-    right: max(var(--zdp-space-3), calc((100vw - var(--zdp-breakpoint-desktop)) / 2 + var(--zdp-space-4)));
+    right: max(var(--zdp-space-3), var(--zdp-viewport-safe-inline-end), calc((var(--zdp-viewport-inline) - var(--zdp-breakpoint-desktop)) / 2 + var(--zdp-space-4)));
     top: 40vh;
   }
 
@@ -242,9 +242,9 @@
 
   @media (max-width: 57.5rem) {
     .zdp-share-dock--side {
-      bottom: var(--zdp-space-3);
-      left: var(--zdp-space-3);
-      right: var(--zdp-space-3);
+      bottom: max(var(--zdp-space-3), var(--zdp-viewport-safe-block-end));
+      left: max(var(--zdp-space-3), var(--zdp-viewport-safe-inline-start));
+      right: max(var(--zdp-space-3), var(--zdp-viewport-safe-inline-end));
       top: auto;
     }
 
@@ -252,7 +252,7 @@
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
-      max-inline-size: calc(100vw - var(--zdp-space-6));
+      max-inline-size: calc(var(--zdp-viewport-inline) - var(--zdp-space-6));
     }
 
     .zdp-share-dock--rail {
@@ -292,7 +292,7 @@
   @media (max-width: 42rem) {
     .zdp-share-dock--side,
     .zdp-share-dock--bottom {
-      bottom: var(--zdp-space-2);
+      bottom: max(var(--zdp-space-2), var(--zdp-viewport-safe-block-end));
     }
 
     .zdp-share-dock__list {

package/dist/components/Sheet.svelte

@@ -156,18 +156,14 @@
   }
 
   .zdp-sheet__backdrop {
-    background: rgb(47 36 24 / 0.32);
+    background: var(--zdp-color-backdrop-sheet);
     border: 0;
     cursor: pointer;
     inset: 0;
     margin: 0;
     padding: 0;
     position: fixed;
-    z-index: 940;
-  }
-
-  :global([data-zdp-theme="dark"]) .zdp-sheet__backdrop {
-    background: rgb(10 8 5 / 0.66);
+    z-index: var(--zdp-layer-sheet);
   }
 
   .zdp-sheet {
@@ -178,27 +174,28 @@
     display: grid;
     font-family: var(--zdp-font-family-sans);
     gap: var(--zdp-space-4);
-    max-block-size: calc(100vh - var(--zdp-space-6));
+    max-block-size: calc(var(--zdp-viewport-block) - var(--zdp-space-6) - var(--zdp-viewport-safe-block-start) - var(--zdp-viewport-safe-block-end));
     min-width: 0;
     overflow: auto;
-    padding: var(--zdp-space-5);
+    padding-block: var(--zdp-space-5) max(var(--zdp-space-5), var(--zdp-viewport-safe-block-end));
+    padding-inline: max(var(--zdp-space-5), var(--zdp-viewport-safe-inline-start)) max(var(--zdp-space-5), var(--zdp-viewport-safe-inline-end));
     position: fixed;
-    z-index: 941;
+    z-index: calc(var(--zdp-layer-sheet) + 1);
   }
 
   .zdp-sheet--right,
   .zdp-sheet--left {
-    block-size: calc(100vh - var(--zdp-space-6));
+    block-size: calc(var(--zdp-viewport-block) - var(--zdp-space-6) - var(--zdp-viewport-safe-block-start) - var(--zdp-viewport-safe-block-end));
     border-radius: var(--zdp-control-radius);
-    inset-block: var(--zdp-space-3);
+    inset-block: max(var(--zdp-space-3), var(--zdp-viewport-safe-block-start)) max(var(--zdp-space-3), var(--zdp-viewport-safe-block-end));
   }
 
   .zdp-sheet--right {
-    inset-inline-end: var(--zdp-space-3);
+    inset-inline-end: max(var(--zdp-space-3), var(--zdp-viewport-safe-inline-end));
   }
 
   .zdp-sheet--left {
-    inset-inline-start: var(--zdp-space-3);
+    inset-inline-start: max(var(--zdp-space-3), var(--zdp-viewport-safe-inline-start));
   }
 
   .zdp-sheet--bottom {
@@ -207,19 +204,19 @@
     border-radius: var(--zdp-control-radius) var(--zdp-control-radius) 0 0;
     inset-block-end: 0;
     inset-inline: 0;
-    max-block-size: min(34rem, calc(100vh - var(--zdp-space-6)));
+    max-block-size: min(34rem, calc(var(--zdp-viewport-block) - var(--zdp-space-6) - var(--zdp-viewport-safe-block-start) - var(--zdp-viewport-safe-block-end)));
   }
 
   .zdp-sheet--sm {
-    inline-size: min(24rem, calc(100vw - var(--zdp-space-6)));
+    inline-size: min(24rem, calc(var(--zdp-viewport-inline) - var(--zdp-space-6) - var(--zdp-viewport-safe-inline-start) - var(--zdp-viewport-safe-inline-end)));
   }
 
   .zdp-sheet--md {
-    inline-size: min(30rem, calc(100vw - var(--zdp-space-6)));
+    inline-size: min(30rem, calc(var(--zdp-viewport-inline) - var(--zdp-space-6) - var(--zdp-viewport-safe-inline-start) - var(--zdp-viewport-safe-inline-end)));
   }
 
   .zdp-sheet--lg {
-    inline-size: min(38rem, calc(100vw - var(--zdp-space-6)));
+    inline-size: min(38rem, calc(var(--zdp-viewport-inline) - var(--zdp-space-6) - var(--zdp-viewport-safe-inline-start) - var(--zdp-viewport-safe-inline-end)));
   }
 
   .zdp-sheet--bottom.zdp-sheet--sm,
@@ -229,7 +226,7 @@
   }
 
   .zdp-sheet--bottom.zdp-sheet--lg {
-    max-block-size: min(42rem, calc(100vh - var(--zdp-space-6)));
+    max-block-size: min(42rem, calc(var(--zdp-viewport-block) - var(--zdp-space-6) - var(--zdp-viewport-safe-block-start) - var(--zdp-viewport-safe-block-end)));
   }
 
   .zdp-sheet:focus-visible {
@@ -325,8 +322,9 @@
       inline-size: auto;
       inset-block: auto 0;
       inset-inline: 0;
-      max-block-size: min(34rem, calc(100vh - var(--zdp-space-6)));
-      padding: var(--zdp-space-4);
+      max-block-size: min(34rem, calc(var(--zdp-viewport-block) - var(--zdp-space-6) - var(--zdp-viewport-safe-block-start) - var(--zdp-viewport-safe-block-end)));
+      padding-block: var(--zdp-space-4) max(var(--zdp-space-4), var(--zdp-viewport-safe-block-end));
+      padding-inline: max(var(--zdp-space-4), var(--zdp-viewport-safe-inline-start)) max(var(--zdp-space-4), var(--zdp-viewport-safe-inline-end));
     }
   }
 </style>

package/dist/components/SkipLink.svelte

@@ -28,7 +28,7 @@
       border-color var(--zdp-motion-fast) ease,
       color var(--zdp-motion-fast) ease,
       opacity var(--zdp-motion-fast) ease;
-    z-index: 10000;
+    z-index: var(--zdp-layer-skip-link);
   }
 
   .zdp-skip-link:focus-visible {

package/dist/components/StatusToast.svelte

@@ -79,10 +79,10 @@
     box-sizing: border-box;
     display: grid;
     gap: var(--zdp-space-3);
-    inline-size: min(28rem, calc(100vw - var(--zdp-space-6)));
+    inline-size: min(28rem, calc(var(--zdp-viewport-inline) - var(--zdp-space-6)));
     max-inline-size: 100%;
     pointer-events: none;
-    z-index: 50;
+    z-index: var(--zdp-layer-toast);
   }
 
   .zdp-status-toast :global(.zdp-toast) {
@@ -102,23 +102,23 @@
   }
 
   .zdp-status-toast--top-start {
-    left: var(--zdp-space-4);
-    top: var(--zdp-space-4);
+    left: max(var(--zdp-space-4), var(--zdp-viewport-safe-inline-start));
+    top: max(var(--zdp-space-4), var(--zdp-viewport-safe-block-start));
   }
 
   .zdp-status-toast--top-end {
-    right: var(--zdp-space-4);
-    top: var(--zdp-space-4);
+    right: max(var(--zdp-space-4), var(--zdp-viewport-safe-inline-end));
+    top: max(var(--zdp-space-4), var(--zdp-viewport-safe-block-start));
   }
 
   .zdp-status-toast--bottom-start {
-    bottom: var(--zdp-space-4);
-    left: var(--zdp-space-4);
+    bottom: max(var(--zdp-space-4), var(--zdp-viewport-safe-block-end));
+    left: max(var(--zdp-space-4), var(--zdp-viewport-safe-inline-start));
   }
 
   .zdp-status-toast--bottom-end {
-    bottom: var(--zdp-space-4);
-    right: var(--zdp-space-4);
+    bottom: max(var(--zdp-space-4), var(--zdp-viewport-safe-block-end));
+    right: max(var(--zdp-space-4), var(--zdp-viewport-safe-inline-end));
   }
 
   @media (max-width: 42rem) {
@@ -126,8 +126,8 @@
     .zdp-status-toast--top-end,
     .zdp-status-toast--bottom-start,
     .zdp-status-toast--bottom-end {
-      left: var(--zdp-space-3);
-      right: var(--zdp-space-3);
+      left: max(var(--zdp-space-3), var(--zdp-viewport-safe-inline-start));
+      right: max(var(--zdp-space-3), var(--zdp-viewport-safe-inline-end));
     }
   }
 </style>

package/dist/components/TermSheet.svelte

@@ -217,34 +217,31 @@
     display: grid;
     font-family: var(--zdp-font-family-sans);
     gap: var(--zdp-space-4);
-    max-block-size: calc(100vh - var(--zdp-space-6));
+    max-block-size: calc(var(--zdp-viewport-block) - var(--zdp-space-6) - var(--zdp-viewport-safe-block-start) - var(--zdp-viewport-safe-block-end));
     overflow: auto;
-    padding: var(--zdp-space-5);
+    padding-block: var(--zdp-space-5) max(var(--zdp-space-5), var(--zdp-viewport-safe-block-end));
+    padding-inline: max(var(--zdp-space-5), var(--zdp-viewport-safe-inline-start)) max(var(--zdp-space-5), var(--zdp-viewport-safe-inline-end));
     position: fixed;
-    z-index: 901;
+    z-index: calc(var(--zdp-layer-term-sheet) + 1);
   }
 
   .zdp-term-sheet__backdrop {
-    background: rgb(47 36 24 / 0.28);
+    background: var(--zdp-color-backdrop-term-sheet);
     border: 0;
     cursor: pointer;
     inset: 0;
     margin: 0;
     padding: 0;
     position: fixed;
-    z-index: 900;
-  }
-
-  :global([data-zdp-theme="dark"]) .zdp-term-sheet__backdrop {
-    background: rgb(10 8 5 / 0.64);
+    z-index: var(--zdp-layer-term-sheet);
   }
 
   .zdp-term-sheet--right {
-    block-size: calc(100vh - var(--zdp-space-6));
+    block-size: calc(var(--zdp-viewport-block) - var(--zdp-space-6) - var(--zdp-viewport-safe-block-start) - var(--zdp-viewport-safe-block-end));
     border-radius: var(--zdp-control-radius);
-    inline-size: min(28rem, calc(100vw - var(--zdp-space-6)));
-    inset-block: var(--zdp-space-3);
-    inset-inline-end: var(--zdp-space-3);
+    inline-size: min(28rem, calc(var(--zdp-viewport-inline) - var(--zdp-space-6) - var(--zdp-viewport-safe-inline-start) - var(--zdp-viewport-safe-inline-end)));
+    inset-block: max(var(--zdp-space-3), var(--zdp-viewport-safe-block-start)) max(var(--zdp-space-3), var(--zdp-viewport-safe-block-end));
+    inset-inline-end: max(var(--zdp-space-3), var(--zdp-viewport-safe-inline-end));
   }
 
   .zdp-term-sheet--bottom {
@@ -253,7 +250,7 @@
     border-radius: var(--zdp-control-radius) var(--zdp-control-radius) 0 0;
     inset-block-end: 0;
     inset-inline: 0;
-    max-block-size: min(34rem, calc(100vh - var(--zdp-space-6)));
+    max-block-size: min(34rem, calc(var(--zdp-viewport-block) - var(--zdp-space-6) - var(--zdp-viewport-safe-block-start) - var(--zdp-viewport-safe-block-end)));
   }
 
   .zdp-term-sheet:focus-visible {
@@ -385,8 +382,9 @@
       inline-size: auto;
       inset-block: auto 0;
       inset-inline: 0;
-      max-block-size: min(34rem, calc(100vh - var(--zdp-space-6)));
-      padding: var(--zdp-space-4);
+      max-block-size: min(34rem, calc(var(--zdp-viewport-block) - var(--zdp-space-6) - var(--zdp-viewport-safe-block-start) - var(--zdp-viewport-safe-block-end)));
+      padding-block: var(--zdp-space-4) max(var(--zdp-space-4), var(--zdp-viewport-safe-block-end));
+      padding-inline: max(var(--zdp-space-4), var(--zdp-viewport-safe-inline-start)) max(var(--zdp-space-4), var(--zdp-viewport-safe-inline-end));
     }
   }
 </style>

package/dist/components/Tooltip.svelte

@@ -129,7 +129,7 @@
     -webkit-user-select: none;
     user-select: none;
     white-space: nowrap;
-    z-index: 30;
+    z-index: var(--zdp-layer-floating);
   }
 
   .zdp-tooltip--top {

package/dist/index.ts

@@ -1,3 +1,10 @@
+/**
+ * mf:anchor zdp.design-system.public-barrel
+ * purpose: Locate the package public Svelte component and helper export surface.
+ * search: public exports, package surface, Svelte components, helper exports, barrel
+ * invariant: Consumers import through package exports instead of internal src paths.
+ * risk: config
+ */
 export { default as Accordion } from './components/Accordion.svelte';
 export { default as AdSlot } from './components/AdSlot.svelte';
 export { default as Avatar } from './components/Avatar.svelte';

package/dist/modal-layer.ts

@@ -11,6 +11,13 @@ let nextLayerId = 1;
 const activeLayerIds: number[] = [];
 let previousBodyOverflow: string | null = null;
 
+/**
+ * mf:anchor zdp.design-system.modal-layer-state
+ * purpose: Locate shared modal layer state for dialog, sheet, and term sheet surfaces.
+ * search: modal layer, scroll lock, active layer, dialog, sheet, focus trap
+ * invariant: Layer activation restores document overflow after the final active layer closes.
+ * risk: state
+ */
 export function createZdpModalLayer(): ZdpModalLayerHandle {
   const layerId = nextLayerId;
   nextLayerId += 1;

package/dist/schemas/design-tokens.schema.json

@@ -14,6 +14,8 @@
     "font",
     "type",
     "breakpoint",
+    "layer",
+    "viewport",
     "control",
     "i18n",
     "shadow",
@@ -76,6 +78,12 @@
     "breakpoint": {
       "$ref": "#/$defs/stringMap"
     },
+    "layer": {
+      "$ref": "#/$defs/stringMap"
+    },
+    "viewport": {
+      "$ref": "#/$defs/stringMap"
+    },
     "control": {
       "$ref": "#/$defs/stringMap"
     },

package/dist/share.ts

@@ -45,6 +45,13 @@ export interface ZdpShareDockItem {
   readonly onclick?: (event: MouseEvent, item: ZdpShareDockItem) => void;
 }
 
+/**
+ * mf:anchor zdp.design-system.share-icons-source
+ * purpose: Locate package-owned share icon shape data used by Svelte and static consumers.
+ * search: share icons, Simple Icons, ShareDock, static consumers, platform glyphs
+ * invariant: Platform icon shapes stay package-owned while URLs and share actions stay consumer-owned.
+ * risk: dependency
+ */
 export const zdpShareIcons: Record<ZdpShareIconName, ZdpShareIconShape> = {
   copy: {
     viewBox: '0 0 24 24',

package/dist/shortcuts.js

@@ -77,6 +77,13 @@ export const zdpShortcutReservedExamples = [
   'Backspace'
 ];
 
+/**
+ * mf:anchor zdp.design-system.shortcut-guard
+ * purpose: Locate consumer-facing shortcut guard helpers for text entry, IME, and browser-reserved keys.
+ * search: shortcut guard, IME, browser reserved shortcut, text entry, command palette
+ * invariant: Visible shortcut hints stay separate from consumer-owned keydown dispatch.
+ * risk: state
+ */
 export function isZdpTextEntryTarget(target) {
   if (!(target instanceof Element)) {
     return false;

package/dist/shortcuts.ts

@@ -105,6 +105,13 @@ export const zdpShortcutReservedExamples = [
   'Backspace'
 ] as const;
 
+/**
+ * mf:anchor zdp.design-system.shortcut-guard
+ * purpose: Locate consumer-facing shortcut guard helpers for text entry, IME, and browser-reserved keys.
+ * search: shortcut guard, IME, browser reserved shortcut, text entry, command palette
+ * invariant: Visible shortcut hints stay separate from consumer-owned keydown dispatch.
+ * risk: state
+ */
 export function isZdpTextEntryTarget(target: EventTarget | null): boolean {
   if (!(target instanceof Element)) {
     return false;

package/dist/styles/components.css

@@ -215,7 +215,7 @@
   position: absolute;
   top: 0;
   width: calc(var(--zdp-confirm-action-progress) * 100%);
-  z-index: -1;
+  z-index: var(--zdp-layer-behind);
 }
 
 .zdp-confirm-action__thumb {
@@ -556,7 +556,7 @@
     border-color var(--zdp-motion-fast) ease,
     color var(--zdp-motion-fast) ease,
     opacity var(--zdp-motion-fast) ease;
-  z-index: 10000;
+  z-index: var(--zdp-layer-skip-link);
 }
 
 .zdp-skip-link:focus-visible {
@@ -1355,7 +1355,7 @@
   top: var(--zdp-tooltip-top, auto);
   transform: var(--zdp-tooltip-transform, none);
   white-space: nowrap;
-  z-index: 30;
+  z-index: var(--zdp-layer-floating);
 }
 
 .zdp-tooltip--top {
@@ -1620,12 +1620,12 @@
   display: grid;
   font-family: var(--zdp-font-family-sans);
   inline-size: max-content;
-  max-block-size: min(24rem, calc(100vh - var(--zdp-space-8)));
-  max-inline-size: min(22rem, calc(100vw - var(--zdp-space-6)));
+  max-block-size: min(24rem, calc(var(--zdp-viewport-block) - var(--zdp-space-8)));
+  max-inline-size: min(22rem, calc(var(--zdp-viewport-inline) - var(--zdp-space-6)));
   min-inline-size: 12rem;
   overflow: auto;
   position: absolute;
-  z-index: 40;
+  z-index: var(--zdp-layer-floating);
 }
 
 .zdp-popover__panel {
@@ -1635,7 +1635,7 @@
 
 .zdp-menu__panel {
   gap: var(--zdp-space-1);
-  max-inline-size: min(18rem, calc(100vw - var(--zdp-space-6)));
+  max-inline-size: min(18rem, calc(var(--zdp-viewport-inline) - var(--zdp-space-6)));
   padding: var(--zdp-space-1);
 }
 
@@ -2104,13 +2104,13 @@
   font-family: var(--zdp-font-family-sans);
   inline-size: 100%;
   left: 0;
-  max-block-size: min(18rem, calc(100vh - var(--zdp-space-8)));
+  max-block-size: min(18rem, calc(var(--zdp-viewport-block) - var(--zdp-space-8)));
   min-width: 0;
   overflow: auto;
   padding: var(--zdp-space-1);
   position: absolute;
   top: calc(100% + var(--zdp-space-2));
-  z-index: 40;
+  z-index: var(--zdp-layer-floating);
 }
 
 .zdp-combobox__listbox {
@@ -3087,10 +3087,10 @@
   box-sizing: border-box;
   display: grid;
   gap: var(--zdp-space-3);
-  inline-size: min(28rem, calc(100vw - var(--zdp-space-6)));
+  inline-size: min(28rem, calc(var(--zdp-viewport-inline) - var(--zdp-space-6)));
   max-inline-size: 100%;
   pointer-events: none;
-  z-index: 50;
+  z-index: var(--zdp-layer-toast);
 }
 
 .zdp-status-toast .zdp-toast {
@@ -3110,23 +3110,23 @@
 }
 
 .zdp-status-toast--top-start {
-  left: var(--zdp-space-4);
-  top: var(--zdp-space-4);
+  left: max(var(--zdp-space-4), var(--zdp-viewport-safe-inline-start));
+  top: max(var(--zdp-space-4), var(--zdp-viewport-safe-block-start));
 }
 
 .zdp-status-toast--top-end {
-  right: var(--zdp-space-4);
-  top: var(--zdp-space-4);
+  right: max(var(--zdp-space-4), var(--zdp-viewport-safe-inline-end));
+  top: max(var(--zdp-space-4), var(--zdp-viewport-safe-block-start));
 }
 
 .zdp-status-toast--bottom-start {
-  bottom: var(--zdp-space-4);
-  left: var(--zdp-space-4);
+  bottom: max(var(--zdp-space-4), var(--zdp-viewport-safe-block-end));
+  left: max(var(--zdp-space-4), var(--zdp-viewport-safe-inline-start));
 }
 
 .zdp-status-toast--bottom-end {
-  bottom: var(--zdp-space-4);
-  right: var(--zdp-space-4);
+  bottom: max(var(--zdp-space-4), var(--zdp-viewport-safe-block-end));
+  right: max(var(--zdp-space-4), var(--zdp-viewport-safe-inline-end));
 }
 
 @media (max-width: 42rem) {
@@ -3134,8 +3134,8 @@
   .zdp-status-toast--top-end,
   .zdp-status-toast--bottom-start,
   .zdp-status-toast--bottom-end {
-    left: var(--zdp-space-3);
-    right: var(--zdp-space-3);
+    left: max(var(--zdp-space-3), var(--zdp-viewport-safe-inline-start));
+    right: max(var(--zdp-space-3), var(--zdp-viewport-safe-inline-end));
   }
 }
 
@@ -3952,18 +3952,14 @@
 }
 
 .zdp-term-sheet__backdrop {
-  background: rgb(47 36 24 / 0.28);
+  background: var(--zdp-color-backdrop-term-sheet);
   border: 0;
   cursor: pointer;
   inset: 0;
   margin: 0;
   padding: 0;
   position: fixed;
-  z-index: 900;
-}
-
-[data-zdp-theme="dark"] .zdp-term-sheet__backdrop {
-  background: rgb(10 8 5 / 0.64);
+  z-index: var(--zdp-layer-term-sheet);
 }
 
 .zdp-term-sheet {
@@ -3974,19 +3970,20 @@
   display: grid;
   font-family: var(--zdp-font-family-sans);
   gap: var(--zdp-space-4);
-  max-block-size: calc(100vh - var(--zdp-space-6));
+  max-block-size: calc(var(--zdp-viewport-block) - var(--zdp-space-6) - var(--zdp-viewport-safe-block-start) - var(--zdp-viewport-safe-block-end));
   overflow: auto;
-  padding: var(--zdp-space-5);
+  padding-block: var(--zdp-space-5) max(var(--zdp-space-5), var(--zdp-viewport-safe-block-end));
+  padding-inline: max(var(--zdp-space-5), var(--zdp-viewport-safe-inline-start)) max(var(--zdp-space-5), var(--zdp-viewport-safe-inline-end));
   position: fixed;
-  z-index: 901;
+  z-index: calc(var(--zdp-layer-term-sheet) + 1);
 }
 
 .zdp-term-sheet--right {
-  block-size: calc(100vh - var(--zdp-space-6));
+  block-size: calc(var(--zdp-viewport-block) - var(--zdp-space-6) - var(--zdp-viewport-safe-block-start) - var(--zdp-viewport-safe-block-end));
   border-radius: var(--zdp-control-radius);
-  inline-size: min(28rem, calc(100vw - var(--zdp-space-6)));
-  inset-block: var(--zdp-space-3);
-  inset-inline-end: var(--zdp-space-3);
+  inline-size: min(28rem, calc(var(--zdp-viewport-inline) - var(--zdp-space-6) - var(--zdp-viewport-safe-inline-start) - var(--zdp-viewport-safe-inline-end)));
+  inset-block: max(var(--zdp-space-3), var(--zdp-viewport-safe-block-start)) max(var(--zdp-space-3), var(--zdp-viewport-safe-block-end));
+  inset-inline-end: max(var(--zdp-space-3), var(--zdp-viewport-safe-inline-end));
 }
 
 .zdp-term-sheet--bottom {
@@ -3995,7 +3992,7 @@
   border-radius: var(--zdp-control-radius) var(--zdp-control-radius) 0 0;
   inset-block-end: 0;
   inset-inline: 0;
-  max-block-size: min(34rem, calc(100vh - var(--zdp-space-6)));
+  max-block-size: min(34rem, calc(var(--zdp-viewport-block) - var(--zdp-space-6) - var(--zdp-viewport-safe-block-start) - var(--zdp-viewport-safe-block-end)));
 }
 
 .zdp-term-sheet:focus-visible {
@@ -4134,8 +4131,9 @@
     inline-size: auto;
     inset-block: auto 0;
     inset-inline: 0;
-    max-block-size: min(34rem, calc(100vh - var(--zdp-space-6)));
-    padding: var(--zdp-space-4);
+    max-block-size: min(34rem, calc(var(--zdp-viewport-block) - var(--zdp-space-6) - var(--zdp-viewport-safe-block-start) - var(--zdp-viewport-safe-block-end)));
+    padding-block: var(--zdp-space-4) max(var(--zdp-space-4), var(--zdp-viewport-safe-block-end));
+    padding-inline: max(var(--zdp-space-4), var(--zdp-viewport-safe-inline-start)) max(var(--zdp-space-4), var(--zdp-viewport-safe-inline-end));
   }
 }
 
@@ -4144,18 +4142,14 @@
 }
 
 .zdp-sheet__backdrop {
-  background: rgb(47 36 24 / 0.32);
+  background: var(--zdp-color-backdrop-sheet);
   border: 0;
   cursor: pointer;
   inset: 0;
   margin: 0;
   padding: 0;
   position: fixed;
-  z-index: 940;
-}
-
-[data-zdp-theme="dark"] .zdp-sheet__backdrop {
-  background: rgb(10 8 5 / 0.66);
+  z-index: var(--zdp-layer-sheet);
 }
 
 .zdp-sheet {
@@ -4166,27 +4160,28 @@
   display: grid;
   font-family: var(--zdp-font-family-sans);
   gap: var(--zdp-space-4);
-  max-block-size: calc(100vh - var(--zdp-space-6));
+  max-block-size: calc(var(--zdp-viewport-block) - var(--zdp-space-6) - var(--zdp-viewport-safe-block-start) - var(--zdp-viewport-safe-block-end));
   min-width: 0;
   overflow: auto;
-  padding: var(--zdp-space-5);
+  padding-block: var(--zdp-space-5) max(var(--zdp-space-5), var(--zdp-viewport-safe-block-end));
+  padding-inline: max(var(--zdp-space-5), var(--zdp-viewport-safe-inline-start)) max(var(--zdp-space-5), var(--zdp-viewport-safe-inline-end));
   position: fixed;
-  z-index: 941;
+  z-index: calc(var(--zdp-layer-sheet) + 1);
 }
 
 .zdp-sheet--right,
 .zdp-sheet--left {
-  block-size: calc(100vh - var(--zdp-space-6));
+  block-size: calc(var(--zdp-viewport-block) - var(--zdp-space-6) - var(--zdp-viewport-safe-block-start) - var(--zdp-viewport-safe-block-end));
   border-radius: var(--zdp-control-radius);
-  inset-block: var(--zdp-space-3);
+  inset-block: max(var(--zdp-space-3), var(--zdp-viewport-safe-block-start)) max(var(--zdp-space-3), var(--zdp-viewport-safe-block-end));
 }
 
 .zdp-sheet--right {
-  inset-inline-end: var(--zdp-space-3);
+  inset-inline-end: max(var(--zdp-space-3), var(--zdp-viewport-safe-inline-end));
 }
 
 .zdp-sheet--left {
-  inset-inline-start: var(--zdp-space-3);
+  inset-inline-start: max(var(--zdp-space-3), var(--zdp-viewport-safe-inline-start));
 }
 
 .zdp-sheet--bottom {
@@ -4195,19 +4190,19 @@
   border-radius: var(--zdp-control-radius) var(--zdp-control-radius) 0 0;
   inset-block-end: 0;
   inset-inline: 0;
-  max-block-size: min(34rem, calc(100vh - var(--zdp-space-6)));
+  max-block-size: min(34rem, calc(var(--zdp-viewport-block) - var(--zdp-space-6) - var(--zdp-viewport-safe-block-start) - var(--zdp-viewport-safe-block-end)));
 }
 
 .zdp-sheet--sm {
-  inline-size: min(24rem, calc(100vw - var(--zdp-space-6)));
+  inline-size: min(24rem, calc(var(--zdp-viewport-inline) - var(--zdp-space-6) - var(--zdp-viewport-safe-inline-start) - var(--zdp-viewport-safe-inline-end)));
 }
 
 .zdp-sheet--md {
-  inline-size: min(30rem, calc(100vw - var(--zdp-space-6)));
+  inline-size: min(30rem, calc(var(--zdp-viewport-inline) - var(--zdp-space-6) - var(--zdp-viewport-safe-inline-start) - var(--zdp-viewport-safe-inline-end)));
 }
 
 .zdp-sheet--lg {
-  inline-size: min(38rem, calc(100vw - var(--zdp-space-6)));
+  inline-size: min(38rem, calc(var(--zdp-viewport-inline) - var(--zdp-space-6) - var(--zdp-viewport-safe-inline-start) - var(--zdp-viewport-safe-inline-end)));
 }
 
 .zdp-sheet--bottom.zdp-sheet--sm,
@@ -4217,7 +4212,7 @@
 }
 
 .zdp-sheet--bottom.zdp-sheet--lg {
-  max-block-size: min(42rem, calc(100vh - var(--zdp-space-6)));
+  max-block-size: min(42rem, calc(var(--zdp-viewport-block) - var(--zdp-space-6) - var(--zdp-viewport-safe-block-start) - var(--zdp-viewport-safe-block-end)));
 }
 
 .zdp-sheet:focus-visible {
@@ -4311,7 +4306,7 @@
     inline-size: auto;
     inset-block: auto 0;
     inset-inline: 0;
-    max-block-size: min(34rem, calc(100vh - var(--zdp-space-6)));
+    max-block-size: min(34rem, calc(var(--zdp-viewport-block) - var(--zdp-space-6) - var(--zdp-viewport-safe-block-start) - var(--zdp-viewport-safe-block-end)));
     padding: var(--zdp-space-4);
   }
 }
@@ -4322,13 +4317,14 @@
   display: grid;
   inset: 0;
   justify-items: center;
-  padding: var(--zdp-space-4);
+  padding-block: max(var(--zdp-space-4), var(--zdp-viewport-safe-block-start)) max(var(--zdp-space-4), var(--zdp-viewport-safe-block-end));
+  padding-inline: max(var(--zdp-space-4), var(--zdp-viewport-safe-inline-start)) max(var(--zdp-space-4), var(--zdp-viewport-safe-inline-end));
   position: fixed;
-  z-index: 1000;
+  z-index: var(--zdp-layer-dialog);
 }
 
 .zdp-dialog__backdrop {
-  background: rgb(47 36 24 / 0.42);
+  background: var(--zdp-color-backdrop-dialog);
   border: 0;
   cursor: pointer;
   inset: 0;
@@ -4337,10 +4333,6 @@
   position: fixed;
 }
 
-[data-zdp-theme="dark"] .zdp-dialog__backdrop {
-  background: rgb(10 8 5 / 0.72);
-}
-
 .zdp-dialog__panel {
   background: var(--zdp-color-surface-panel);
   border: var(--zdp-control-border-width) solid var(--zdp-color-line-strong);
@@ -4349,7 +4341,7 @@
   color: var(--zdp-color-ink-normal);
   display: grid;
   gap: var(--zdp-space-4);
-  max-height: min(42rem, calc(100vh - var(--zdp-space-8)));
+  max-height: min(42rem, calc(var(--zdp-viewport-block) - var(--zdp-space-8)));
   min-width: 0;
   overflow: auto;
   padding: var(--zdp-space-5);
@@ -4450,11 +4442,12 @@
 @media (max-width: 520px) {
   .zdp-dialog {
     align-items: end;
-    padding: var(--zdp-space-3);
+    padding-block: max(var(--zdp-space-3), var(--zdp-viewport-safe-block-start)) max(var(--zdp-space-3), var(--zdp-viewport-safe-block-end));
+    padding-inline: max(var(--zdp-space-3), var(--zdp-viewport-safe-inline-start)) max(var(--zdp-space-3), var(--zdp-viewport-safe-inline-end));
   }
 
   .zdp-dialog__panel {
-    max-height: calc(100vh - var(--zdp-space-6));
+    max-height: calc(var(--zdp-viewport-block) - var(--zdp-space-6));
     padding: var(--zdp-space-4);
   }
 }
@@ -4501,12 +4494,12 @@
 .zdp-share-dock {
   color: var(--zdp-color-ink-normal);
   font-family: var(--zdp-font-family-sans);
-  z-index: 20;
+  z-index: var(--zdp-layer-share-dock);
 }
 
 .zdp-share-dock--side {
   position: fixed;
-  right: max(var(--zdp-space-3), calc((100vw - var(--zdp-breakpoint-desktop)) / 2 + var(--zdp-space-4)));
+  right: max(var(--zdp-space-3), var(--zdp-viewport-safe-inline-end), calc((var(--zdp-viewport-inline) - var(--zdp-breakpoint-desktop)) / 2 + var(--zdp-space-4)));
   top: 40vh;
 }
 
@@ -4603,9 +4596,9 @@
 
 @media (max-width: 57.5rem) {
   .zdp-share-dock--side {
-    bottom: var(--zdp-space-3);
-    left: var(--zdp-space-3);
-    right: var(--zdp-space-3);
+    bottom: max(var(--zdp-space-3), var(--zdp-viewport-safe-block-end));
+    left: max(var(--zdp-space-3), var(--zdp-viewport-safe-inline-start));
+    right: max(var(--zdp-space-3), var(--zdp-viewport-safe-inline-end));
     top: auto;
   }
 
@@ -4613,7 +4606,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    max-inline-size: calc(100vw - var(--zdp-space-6));
+    max-inline-size: calc(var(--zdp-viewport-inline) - var(--zdp-space-6));
   }
 
   .zdp-share-dock--rail {
@@ -4675,7 +4668,7 @@
 @media (max-width: 42rem) {
   .zdp-share-dock--side,
   .zdp-share-dock--bottom {
-    bottom: var(--zdp-space-2);
+    bottom: max(var(--zdp-space-2), var(--zdp-viewport-safe-block-end));
   }
 
   .zdp-share-dock__list {

package/dist/styles/locale-fonts.css

@@ -2,3 +2,4 @@
 @import url("https://cdn.jsdelivr.net/npm/@fontsource-variable/noto-sans-sc@5.2.10/index.css");
 @import url("https://cdn.jsdelivr.net/npm/@fontsource-variable/noto-sans-devanagari@5.2.8/index.css");
 @import url("https://cdn.jsdelivr.net/npm/@fontsource-variable/noto-sans-jp@5.2.10/index.css");
+@import url("https://cdn.jsdelivr.net/npm/@fontsource-variable/noto-sans-thai@5.2.8/index.css");

package/dist/styles/tokens.css

@@ -21,6 +21,9 @@
   --zdp-color-scrollbar-thumb-hover: #8b6f45;
   --zdp-color-selection-surface: #e7c97a;
   --zdp-color-selection-text: #1f160d;
+  --zdp-color-backdrop-term-sheet: rgb(47 36 24 / 0.28);
+  --zdp-color-backdrop-sheet: rgb(47 36 24 / 0.32);
+  --zdp-color-backdrop-dialog: rgb(47 36 24 / 0.42);
   --zdp-color-accent-primary: #d8c8ac;
   --zdp-color-accent-primary-strong: #b89a6a;
   --zdp-color-accent-primary-soft: #f1e4cc;
@@ -48,7 +51,8 @@
   --zdp-font-family-chinese: "Noto Sans SC Variable", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Pretendard Variable", Pretendard, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --zdp-font-family-devanagari: "Noto Sans Devanagari Variable", "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", ui-sans-serif, system-ui, sans-serif;
   --zdp-font-family-japanese: "Noto Sans JP Variable", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", "Pretendard Variable", Pretendard, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --zdp-font-family-multiscript: "Pretendard Variable", Pretendard, "Manrope Variable", Manrope, "Inter Variable", Inter, "Noto Sans SC Variable", "Noto Sans SC", "Noto Sans JP Variable", "Noto Sans JP", "Noto Sans Devanagari Variable", "Noto Sans Devanagari", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "PingFang SC", "Microsoft YaHei", "Hiragino Sans", "Yu Gothic", "Meiryo", "Nirmala UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --zdp-font-family-thai: "Noto Sans Thai Variable", "Noto Sans Thai", "Leelawadee UI", Tahoma, ui-sans-serif, system-ui, sans-serif;
+  --zdp-font-family-multiscript: "Pretendard Variable", Pretendard, "Manrope Variable", Manrope, "Inter Variable", Inter, "Noto Sans SC Variable", "Noto Sans SC", "Noto Sans JP Variable", "Noto Sans JP", "Noto Sans Devanagari Variable", "Noto Sans Devanagari", "Noto Sans Thai Variable", "Noto Sans Thai", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "PingFang SC", "Microsoft YaHei", "Hiragino Sans", "Yu Gothic", "Meiryo", "Nirmala UI", "Leelawadee UI", Tahoma, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --zdp-font-family-serif: Cardo, Georgia, "Times New Roman", ui-serif, serif;
   --zdp-font-family-display: "Pretendard Variable", Pretendard, "Manrope Variable", Manrope, "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --zdp-font-family-brand: "Playwrite AU VIC Guides", "Pretendard Variable", Pretendard, "Manrope Variable", Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
@@ -92,6 +96,20 @@
   --zdp-breakpoint-tablet: 64rem;
   --zdp-breakpoint-desktop: 80rem;
   --zdp-breakpoint-wide: 96rem;
+  --zdp-layer-behind: -1;
+  --zdp-layer-share-dock: 20;
+  --zdp-layer-floating: 40;
+  --zdp-layer-toast: 50;
+  --zdp-layer-term-sheet: 900;
+  --zdp-layer-sheet: 940;
+  --zdp-layer-dialog: 1000;
+  --zdp-layer-skip-link: 10000;
+  --zdp-viewport-block: 100vh;
+  --zdp-viewport-inline: 100vw;
+  --zdp-viewport-safe-block-start: env(safe-area-inset-top, 0px);
+  --zdp-viewport-safe-block-end: env(safe-area-inset-bottom, 0px);
+  --zdp-viewport-safe-inline-start: env(safe-area-inset-left, 0px);
+  --zdp-viewport-safe-inline-end: env(safe-area-inset-right, 0px);
   --zdp-control-height-sm: 2.25rem;
   --zdp-control-height-md: 2.75rem;
   --zdp-control-icon-sm: 2.25rem;
@@ -124,6 +142,20 @@
   --zdp-motion-normal: 180ms;
 }
 
+@supports (height: 100svh) {
+  :root,
+  [data-zdp-theme] {
+    --zdp-viewport-block: 100svh;
+  }
+}
+
+@supports (width: 100svw) {
+  :root,
+  [data-zdp-theme] {
+    --zdp-viewport-inline: 100svw;
+  }
+}
+
 [data-zdp-theme="dark"] {
   --zdp-color-ink-strong: #fff8ea;
   --zdp-color-ink-normal: #f1e4cc;
@@ -144,6 +176,9 @@
   --zdp-color-scrollbar-thumb-hover: #d8c8ac;
   --zdp-color-selection-surface: #e7c97a;
   --zdp-color-selection-text: #1f160d;
+  --zdp-color-backdrop-term-sheet: rgb(10 8 5 / 0.64);
+  --zdp-color-backdrop-sheet: rgb(10 8 5 / 0.66);
+  --zdp-color-backdrop-dialog: rgb(10 8 5 / 0.72);
   --zdp-color-accent-primary: #d8c8ac;
   --zdp-color-accent-primary-strong: #e7c97a;
   --zdp-color-accent-primary-soft: #68553a;
@@ -174,6 +209,9 @@
     --zdp-color-scrollbar-thumb-hover: oklch(55% 0.075 76);
     --zdp-color-selection-surface: oklch(84% 0.1 86);
     --zdp-color-selection-text: oklch(20% 0.035 70);
+    --zdp-color-backdrop-term-sheet: oklch(27% 0.04 70 / 0.28);
+    --zdp-color-backdrop-sheet: oklch(27% 0.04 70 / 0.32);
+    --zdp-color-backdrop-dialog: oklch(27% 0.04 70 / 0.42);
     --zdp-color-accent-primary: oklch(82% 0.045 82);
     --zdp-color-accent-primary-strong: oklch(70% 0.08 76);
     --zdp-color-accent-primary-soft: oklch(91% 0.045 82);
@@ -202,6 +240,9 @@
     --zdp-color-scrollbar-thumb-hover: oklch(82% 0.045 82);
     --zdp-color-selection-surface: oklch(84% 0.1 86);
     --zdp-color-selection-text: oklch(20% 0.035 70);
+    --zdp-color-backdrop-term-sheet: oklch(8% 0.01 70 / 0.64);
+    --zdp-color-backdrop-sheet: oklch(8% 0.01 70 / 0.66);
+    --zdp-color-backdrop-dialog: oklch(8% 0.01 70 / 0.72);
     --zdp-color-accent-primary: oklch(82% 0.045 82);
     --zdp-color-accent-primary-strong: oklch(84% 0.1 86);
     --zdp-color-accent-primary-soft: oklch(43% 0.055 76);
@@ -266,7 +307,11 @@
 
 .zdp-surface-reset:lang(en),
 .zdp-surface-reset:lang(es),
-.zdp-surface-reset:lang(fr) {
+.zdp-surface-reset:lang(fr),
+.zdp-surface-reset:lang(vi),
+.zdp-surface-reset:lang(ru),
+.zdp-surface-reset:lang(id),
+.zdp-surface-reset:lang(ms) {
   --zdp-font-family-sans: var(--zdp-font-family-latin);
   --zdp-font-family-display: var(--zdp-font-family-latin);
   hyphens: auto;
@@ -274,7 +319,11 @@
 
 .zdp-surface-reset :lang(en),
 .zdp-surface-reset :lang(es),
-.zdp-surface-reset :lang(fr) {
+.zdp-surface-reset :lang(fr),
+.zdp-surface-reset :lang(vi),
+.zdp-surface-reset :lang(ru),
+.zdp-surface-reset :lang(id),
+.zdp-surface-reset :lang(ms) {
   font-family: var(--zdp-font-family-latin);
   hyphens: auto;
 }
@@ -337,6 +386,17 @@
   word-break: normal;
 }
 
+.zdp-surface-reset:lang(th) {
+  --zdp-font-family-sans: var(--zdp-font-family-thai);
+  --zdp-font-family-display: var(--zdp-font-family-thai);
+  word-break: normal;
+}
+
+.zdp-surface-reset :lang(th) {
+  font-family: var(--zdp-font-family-thai);
+  word-break: normal;
+}
+
 .zdp-surface-reset *,
 .zdp-surface-reset *::before,
 .zdp-surface-reset *::after {

package/dist/tokens/zdp.tokens.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../schemas/design-tokens.schema.json",
   "name": "zdp-core",
-  "version": "0.6.10",
+  "version": "0.7.0",
   "color": {
     "ink": {
       "strong": {
@@ -145,7 +145,8 @@
       "chinese": "\"Noto Sans SC Variable\", \"Noto Sans SC\", \"PingFang SC\", \"Microsoft YaHei\", \"Pretendard Variable\", Pretendard, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
       "devanagari": "\"Noto Sans Devanagari Variable\", \"Noto Sans Devanagari\", \"Nirmala UI\", \"Kohinoor Devanagari\", ui-sans-serif, system-ui, sans-serif",
       "japanese": "\"Noto Sans JP Variable\", \"Noto Sans JP\", \"Hiragino Sans\", \"Yu Gothic\", \"Meiryo\", \"Pretendard Variable\", Pretendard, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
-      "multiscript": "\"Pretendard Variable\", Pretendard, \"Manrope Variable\", Manrope, \"Inter Variable\", Inter, \"Noto Sans SC Variable\", \"Noto Sans SC\", \"Noto Sans JP Variable\", \"Noto Sans JP\", \"Noto Sans Devanagari Variable\", \"Noto Sans Devanagari\", \"Apple SD Gothic Neo\", \"Noto Sans KR\", \"Malgun Gothic\", \"PingFang SC\", \"Microsoft YaHei\", \"Hiragino Sans\", \"Yu Gothic\", \"Meiryo\", \"Nirmala UI\", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
+      "thai": "\"Noto Sans Thai Variable\", \"Noto Sans Thai\", \"Leelawadee UI\", Tahoma, ui-sans-serif, system-ui, sans-serif",
+      "multiscript": "\"Pretendard Variable\", Pretendard, \"Manrope Variable\", Manrope, \"Inter Variable\", Inter, \"Noto Sans SC Variable\", \"Noto Sans SC\", \"Noto Sans JP Variable\", \"Noto Sans JP\", \"Noto Sans Devanagari Variable\", \"Noto Sans Devanagari\", \"Noto Sans Thai Variable\", \"Noto Sans Thai\", \"Apple SD Gothic Neo\", \"Noto Sans KR\", \"Malgun Gothic\", \"PingFang SC\", \"Microsoft YaHei\", \"Hiragino Sans\", \"Yu Gothic\", \"Meiryo\", \"Nirmala UI\", \"Leelawadee UI\", Tahoma, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
       "serif": "Cardo, Georgia, \"Times New Roman\", ui-serif, serif",
       "display": "\"Pretendard Variable\", Pretendard, \"Manrope Variable\", Manrope, \"Inter Variable\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
       "brand": "\"Playwrite AU VIC Guides\", \"Pretendard Variable\", Pretendard, \"Manrope Variable\", Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
@@ -201,6 +202,24 @@
     "desktop": "80rem",
     "wide": "96rem"
   },
+  "layer": {
+    "behind": "-1",
+    "shareDock": "20",
+    "floating": "40",
+    "toast": "50",
+    "termSheet": "900",
+    "sheet": "940",
+    "dialog": "1000",
+    "skipLink": "10000"
+  },
+  "viewport": {
+    "block": "100vh",
+    "inline": "100vw",
+    "safeBlockStart": "env(safe-area-inset-top, 0px)",
+    "safeBlockEnd": "env(safe-area-inset-bottom, 0px)",
+    "safeInlineStart": "env(safe-area-inset-left, 0px)",
+    "safeInlineEnd": "env(safe-area-inset-right, 0px)"
+  },
   "control": {
     "heightSm": "2.25rem",
     "heightMd": "2.75rem",

package/dist/tokens.js

@@ -45,6 +45,7 @@ export const zdpTokenNames = [
   'font.family.chinese',
   'font.family.devanagari',
   'font.family.japanese',
+  'font.family.thai',
   'font.family.multiscript',
   'font.family.serif',
   'font.family.display',
@@ -89,6 +90,20 @@ export const zdpTokenNames = [
   'breakpoint.tablet',
   'breakpoint.desktop',
   'breakpoint.wide',
+  'layer.behind',
+  'layer.shareDock',
+  'layer.floating',
+  'layer.toast',
+  'layer.termSheet',
+  'layer.sheet',
+  'layer.dialog',
+  'layer.skipLink',
+  'viewport.block',
+  'viewport.inline',
+  'viewport.safeBlockStart',
+  'viewport.safeBlockEnd',
+  'viewport.safeInlineStart',
+  'viewport.safeInlineEnd',
   'control.heightSm',
   'control.heightMd',
   'control.iconSm',

package/dist/tokens.ts

@@ -45,6 +45,7 @@ export const zdpTokenNames = [
   'font.family.chinese',
   'font.family.devanagari',
   'font.family.japanese',
+  'font.family.thai',
   'font.family.multiscript',
   'font.family.serif',
   'font.family.display',
@@ -89,6 +90,20 @@ export const zdpTokenNames = [
   'breakpoint.tablet',
   'breakpoint.desktop',
   'breakpoint.wide',
+  'layer.behind',
+  'layer.shareDock',
+  'layer.floating',
+  'layer.toast',
+  'layer.termSheet',
+  'layer.sheet',
+  'layer.dialog',
+  'layer.skipLink',
+  'viewport.block',
+  'viewport.inline',
+  'viewport.safeBlockStart',
+  'viewport.safeBlockEnd',
+  'viewport.safeInlineStart',
+  'viewport.safeInlineEnd',
   'control.heightSm',
   'control.heightMd',
   'control.iconSm',

package/docs/CONSUMER_CONTRACT.md

@@ -11,7 +11,7 @@ Default component text is English. 소비 앱은 화면 locale에 맞춰 user-fa
 - 소비 저장소는 `zdp-design-system`의 public export만 사용하고 내부 `src/` deep import를 만들지 않는다.
 - package export는 `dist/` 산출물을 통해 소비한다. root runtime entry는 `dist/index.js`, type entry는 `dist/index.d.ts`다. 원천은 `src/lib`, `src/styles`, `tokens/zdp.tokens.json`, `src/lib/share.ts`이고 `dist/`는 release 전 `bun run package:build`로 다시 만든다.
 - ZDP monorepo 안의 active sibling 소비처는 unpublished local changes와 package surface를 함께 검증하기 위해 `file:../zdp-design-system`을 유지할 수 있다. 이 경우 CI는 sibling `zdp-design-system`을 checkout하고 `bun run package:build`를 먼저 실행해야 한다.
-- standalone consumer, public template, external example처럼 sibling checkout을 전제로 하지 않는 표면은 npm registry package를 사용한다. 0.44.0 이상에서는 `zdp-design-system: ^0.44.0`을 기본 semver 범위로 쓰고, 재현 가능한 release proof가 필요한 곳만 exact version을 pin한다.
+- standalone consumer, public template, external example처럼 sibling checkout을 전제로 하지 않는 표면은 npm registry package를 사용한다. 0.45.0 이상에서는 `zdp-design-system: ^0.45.0`을 기본 semver 범위로 쓰고, 재현 가능한 release proof가 필요한 곳만 exact version을 pin한다.
 - `zdpTokenNames`, `share.js`, `share.d.ts`는 손으로 맞추지 않고 `tokens:generate`, `share-icons:generate` 산출물로 유지한다.
 - 새 버전은 소비 저장소가 opt-in으로 채택한다. broad adoption 전에는 대표 소비처에서 시각과 build를 확인한다.
 - keyboard focus, flat UI, framed control, Pretendard-first font stack은 소비처에서 임의로 낮추지 않는다.
@@ -27,7 +27,7 @@ Astro 정적 사이트는 전역 스타일로 기본 CSS를 먼저 불러온다.
 import 'zdp-design-system/styles.css';
 ```
 
-다국어 페이지가 라틴, 중국어, 데바나가리, 일본어 웹폰트를 명시적으로 써야 하면 선택형 locale font entry를 추가한다.
+다국어 페이지가 라틴, 중국어, 데바나가리, 일본어, 태국어 웹폰트를 명시적으로 써야 하면 선택형 locale font entry를 추가한다.
 
 ```ts
 import 'zdp-design-system/styles.css';
@@ -378,7 +378,7 @@ TextScaleControl은 글자 크기 선택을 위한 radiogroup, 선택 상태, fo
 Tooltip은 짧은 보조 설명 표면만 제공하며 Escape dismiss를 유지하고, 긴 도움말, validation message, popover, tour, 권한 판단은 소비 앱이 계속 소유한다. 설명이 접근성 이름을 보강해야 할 때만 Tooltip `id`를 넘기고 trigger에 `aria-describedby`를 연결한다.
 Accordion과 Disclosure는 접힌 안내, 설정 묶음, FAQ형 설명의 trigger/panel/`aria-expanded`/`aria-controls` 구조만 제공하며 실제 FAQ 문구, 설정 값, 항목 노출, 권한, 데이터 fetch 판단은 소비 앱이 계속 소유한다. Accordion은 단일 또는 복수 열린 상태를 관리하지만 항목 visibility, 필터 의미, 서버 상태 판단으로 확장하지 않는다.
 SegmentedControl은 보기 방식, 밀도, 기간처럼 가까운 단일 선택의 `radiogroup`/`radio`/`aria-checked` 구조만 제공하며 실제 필터 의미, URL state, 정렬, 데이터 로딩, 권한 판단은 소비 앱이 계속 소유한다.
-Popover와 Menu는 설정, 더보기, 필터, 계정 메뉴처럼 가까운 트리거에서 짧게 펼치는 표면만 제공하며 항목 노출, 권한, 라우팅, 필터 의미, 계정 상태 판단은 소비 앱이 계속 소유한다. Popover와 Menu는 Escape 닫기, outside click, focus 복귀, menu keyboard movement 같은 기본 상호작용만 유지하고 tour, validation, modal decision, floating collision engine 역할로 확장하지 않는다.
+Popover와 Menu는 설정, 더보기, 필터, 계정 메뉴처럼 가까운 트리거에서 짧게 펼치는 표면만 제공하며 항목 노출, 권한, 라우팅, 필터 의미, 계정 상태 판단은 소비 앱이 계속 소유한다. Popover와 Menu는 Escape 닫기, outside click, focus 복귀, menu keyboard movement 같은 기본 상호작용만 유지하고 tour, validation, modal decision, floating collision engine 역할로 확장하지 않는다. 모바일 keyboard, 긴 옵션, async option, grouped option, virtualized list, collision 반복 요구는 Popover/Menu/Combobox 안에서 계속 키우지 않고 Sheet flow 또는 headless spike로 보낸다.
 Sheet는 right, left, bottom edge panel로 설정, 필터, 보조 흐름을 여는 modal surface만 제공한다. Escape 닫기, backdrop 닫기, Tab 순환, scroll lock, 이전 focus 복귀, `role="dialog"`, `aria-modal` 구조는 Sheet 표면의 기본 동작으로 유지한다. Drawer는 별도 컴포넌트로 복제하지 않고 Sheet placement/use case로 먼저 다룬다. 저장, 권한, 데이터 fetch, 라우팅 판단은 소비 앱이 계속 소유한다.
 Sheet root는 `data-zdp-sheet-placement`, `data-zdp-sheet-size`, `data-zdp-sheet-surface="sheet"`를 남겨 QA와 소비 앱이 surface identity를 확인할 수 있게 한다.
 Toast와 StatusToast는 저장, 동기화, 실패, 경고처럼 짧은 상태 알림 표면과 dismiss/action/live-region 연결만 제공하며 알림 발생 조건, 큐 순서, 자동 닫힘 타이머, 중복 제거, 재시도 정책, 권한, 서버 상태 판단은 소비 앱이 계속 소유한다. Toast와 StatusToast는 페이지 안 피드백이나 modal decision을 대체하지 않고, 오래 읽어야 하는 안내는 Callout 또는 소비 앱의 별도 흐름으로 남긴다.
@@ -419,10 +419,12 @@ Flutter와 native shell은 Svelte 컴포넌트를 직접 소비하지 않는다.
 
 - `hex`는 기본 theme fallback이다.
 - `oklch`는 웹 또는 변환 가능한 렌더러에서 색 의도값으로 사용한다.
-- `font.family.korean`, `font.family.latin`, `font.family.chinese`, `font.family.devanagari`, `font.family.japanese`, `font.family.multiscript`는 locale별 fallback 순서의 source of truth다.
+- `font.family.korean`, `font.family.latin`, `font.family.chinese`, `font.family.devanagari`, `font.family.japanese`, `font.family.thai`, `font.family.multiscript`는 locale별 fallback 순서의 source of truth다.
 - `font.family.brand`는 브랜드 워드마크 전용 source of truth다. 일반 heading의 `font.family.display`와 섞지 않는다.
 - `font.family.expressionScript`, `font.family.expressionInscription`, `font.family.expressionSketch`, `font.family.expressionEditorial`, `font.family.expressionSans`, `font.family.expressionKeyboard`는 opt-in 표현용 source of truth다. `expressive-fonts.css`를 import한 표면에서만 캠페인, 섹션 제목, 짧은 보조 안내, 키보드 표식에 제한해서 쓴다.
 - `control.heightMd`, `control.glyphMd`, `control.choiceSize`, `control.choiceIndicatorSize`, `control.switchWidth`, `control.switchHeight`, `control.scrollbarSize`, `control.radius`, `control.borderWidth`, `control.hitTarget`은 native control size, icon glyph size, choice mark, switch track, scrollbar 두께를 맞출 때의 기준이다.
+- `layer.*`는 skip link, floating overlay, toast, sheet, dialog처럼 겹침 순서가 필요한 surface의 기준이고, 소비처는 raw z-index 숫자를 직접 쌓지 않는다.
+- `viewport.*`는 overlay panel clamp, safe-area inset, mobile viewport fallback의 기준이고, 소비처는 modal/sheet/dropdown에 raw `100vh`/`100vw`를 직접 쓰지 않는다.
 - `color.scrollbar.track`, `color.scrollbar.thumb`, `color.scrollbar.thumbHover`는 overflow 영역의 light/dark scrollbar 색 기준이다.
 - `color.selection.surface`, `color.selection.text`는 `.zdp-surface-reset` 안의 drag text selection 색 기준이다.
 - `focus.surface`, `focus.text`, `focus.line`은 keyboard focus 또는 TV/desktop focus affordance의 기준색이다.
@@ -472,7 +474,7 @@ Flutter와 native shell은 Svelte 컴포넌트를 직접 소비하지 않는다.
 - Table cell, code body, toast message, document body, card data, identity label, 주소, 이메일, ID, 날짜, 가격, 에러 메시지는 계속 선택하고 복사할 수 있는지 확인한다.
 - Drag interaction은 drag start부터 end/cancel/pointer release까지만 `.zdp-user-select-dragging`을 붙이고, 앱 root나 page/card/list/table container에 상시 `user-select: none`이 남지 않는지 확인한다.
 - light/dark, keyboard focus, disabled, invalid 상태를 소비처 화면에서 확인한다.
-- Theme / Locale Stress story에서 light/dark, ZDP Mobile 폭, 긴 한국어/영어/중국어/힌디어 문장, focus-visible 상태가 함께 무너지지 않는지 확인한다.
+- Theme / Locale Stress story에서 light/dark, ZDP Mobile 폭, 긴 한국어/영어/중국어/힌디어/베트남어/러시아어/말레이어/태국어 문장, focus-visible 상태가 함께 무너지지 않는지 확인한다.
 - Dialog를 쓰는 화면은 Tab 순환, Escape 닫기, backdrop 닫기, 이전 focus 복귀를 확인한다.
 - 새 디자인 시스템 버전은 대표 소비처 한 곳에서 build와 시각 QA를 통과한 뒤 확산한다.
 

package/docs/INTERACTIVE_PRIMITIVE_AUDIT.md

@@ -11,6 +11,7 @@
 - `Dialog`, `Sheet`, `TermSheet`는 ZDP modal layer, focusable helper, scroll lock, focus return을 유지하되 nested modal, inert sibling, portal 요구가 커지면 headless 후보로 다시 평가한다.
 - `Sheet`는 settings, filter, drawer형 보조 흐름의 공통 modal edge panel이다. Drawer를 별도 primitive로 복제하지 않고 Sheet placement/use case로 먼저 다룬다.
 - `Menu`와 `Popover`는 가장 높은 위험군이다. 단순 더보기와 짧은 필터 표면은 현재 구현으로 유지하되, typeahead, submenu, collision detection, portal, nested overlay가 필요해지면 Bits UI 내부 의존성 후보로 올린다.
+- 모바일 keyboard, 긴 옵션, async option, grouped option, virtualized list, collision 반복 요구는 `Menu`, `Popover`, `Combobox` 안에서 계속 키우지 않고 `Sheet` flow 또는 headless spike로 보낸다.
 - `Tooltip`은 짧은 non-interactive label로만 유지한다. 긴 안내, 클릭 가능한 내용, mobile-first 설명은 Popover, Disclosure, Dialog, 소비 앱 flow로 보낸다.
 
 ## 감사 매트릭스

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zdp-design-system",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "private": false,
   "license": "MIT",
   "type": "module",