zdp-design-system 0.43.8 → 0.45.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ## 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.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
 
 - Added a publish-readiness check for package metadata, export targets, dist entries, and packaged public documents before npm release work.

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,6 +101,8 @@ 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.45.0`을 기본으로 쓴다.
+
 ## 소비 컴포넌트 계약
 
 - Breadcrumb는 현재 위치 탐색을 `nav`로 표현하고, 제품 라우팅 판단은 소비 앱이 한다.
@@ -108,6 +112,7 @@ import 'zdp-design-system/expressive-fonts.css';
 - Avatar와 IdentityChip은 사람, 팀, 계정의 짧은 식별 표면이다.
 - CommandField는 검색 입력 primitive이며 shortcut keycap, `ariaKeyShortcuts`, `ariaAutocomplete`, result id 연결, 입력 keydown callback은 제공하되 실제 검색 로직, 결과 목록, command palette 실행은 소비 앱이 소유한다.
 - Combobox는 검색 가능한 단일 선택 입력의 frame, listbox, keyboard navigation, disabled option skip, hidden submitted value만 제공한다. 실제 필터링, async search, command 실행, 권한 판단은 소비 앱이 계속 소유한다.
+- AdSlot은 광고나 후원 자리의 reserved layout, accessible label, placement/state data attribute만 제공한다. provider script, consent, slot id, ads.txt, personalized ads 판단은 소비 앱이 계속 소유한다.
 - InlineCode와 CodeBlock은 문서, 보안, 아키텍처 화면의 코드 표면이다.
 - Icon은 장식용 glyph 기본값을 갖고, 의미 있는 아이콘은 소비 컴포넌트가 접근성 이름을 제공한다.
 - Link는 일반 텍스트 링크이며 버튼처럼 보이는 destructive action으로 쓰지 않는다.
@@ -142,6 +147,7 @@ Svelte 또는 Tauri(Svelte) 표면은 컴포넌트를 직접 가져온다.
 <script lang="ts">
   import {
     Accordion,
+    AdSlot,
     Avatar,
     Badge,
     Breadcrumb,
@@ -456,6 +462,7 @@ Astro는 `styles.css`를 전역으로 불러오고, Svelte island가 필요한
 | 시트 / 드로어 | `.zdp-sheet` |
 | 상태 알림 | `.zdp-toast` `.zdp-status-toast` |
 | 로딩 / 진행 | `.zdp-progress` `.zdp-spinner` `.zdp-skeleton` |
+| 광고 / 후원 자리 | `.zdp-ad-slot` `.zdp-ad-slot--inline|banner|rail|between-sections` |
 | 아이콘 | `.zdp-icon` `.zdp-icon--sm|md` |
 | 표 | `.zdp-table-wrap` `.zdp-table` `.zdp-sort-header` `.zdp-table-toolbar` |
 | 페이지네이션 | `.zdp-pagination` |
@@ -506,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/ad-slot.ts

@@ -0,0 +1,3 @@
+export type ZdpAdSlotPlacement = 'inline' | 'banner' | 'rail' | 'between-sections';
+
+export type ZdpAdSlotState = 'pending' | 'filled' | 'empty' | 'blocked';

package/dist/components/AdSlot.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import type { ZdpAdSlotPlacement, ZdpAdSlotState } from '../ad-slot';
+
+  type DescribedBy = string | readonly string[] | null;
+
+  export let placement: ZdpAdSlotPlacement = 'inline';
+  export let state: ZdpAdSlotState = 'pending';
+  export let label = 'Advertisement';
+  export let fallbackText: string | null = null;
+  export let minHeight: string | null = null;
+  export let reserved = true;
+  export let id: string | null = null;
+  export let describedBy: DescribedBy = null;
+
+  // Only blocked/empty states render a neutral fallback; provider markup stays consumer-owned.
+  $: showFallback = state === 'blocked' || state === 'empty';
+  $: resolvedFallbackText = fallbackText ?? label;
+  $: reservedHeight = reserved ? minHeight ?? defaultMinHeight(placement) : null;
+  $: ariaDescribedBy = normalizeIdRefs(describedBy);
+
+  function defaultMinHeight(currentPlacement: ZdpAdSlotPlacement): string {
+    switch (currentPlacement) {
+      case 'banner':
+        return '5.5rem';
+      case 'rail':
+        return '12rem';
+      case 'between-sections':
+        return '4rem';
+      default:
+        return '4rem';
+    }
+  }
+
+  function normalizeIdRefs(value: DescribedBy): string | null {
+    if (value === null) {
+      return null;
+    }
+
+    if (typeof value === 'string') {
+      const normalized = value.trim();
+      return normalized ? normalized : null;
+    }
+
+    const normalized = value.map((entry) => entry.trim()).filter(Boolean);
+    return normalized.length > 0 ? normalized.join(' ') : null;
+  }
+</script>
+
+<aside
+  class={`zdp-ad-slot zdp-ad-slot--${placement} zdp-ad-slot--${state}${reserved ? ' zdp-ad-slot--reserved' : ''}`}
+  id={id ?? undefined}
+  aria-label={label}
+  aria-describedby={ariaDescribedBy ?? undefined}
+  data-zdp-ad-slot
+  data-zdp-ad-placement={placement}
+  data-zdp-ad-state={state}
+  data-zdp-ad-reserved={reserved ? 'true' : 'false'}
+  style:min-height={reservedHeight}
+>
+  {#if showFallback}
+    <p class="zdp-ad-slot__fallback">{resolvedFallbackText}</p>
+  {/if}
+  <slot />
+</aside>
+
+<style>
+  .zdp-ad-slot {
+    align-content: center;
+    align-items: center;
+    background: var(--zdp-color-surface-panel);
+    border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+    border-radius: var(--zdp-control-radius);
+    box-sizing: border-box;
+    color: var(--zdp-color-ink-muted);
+    display: grid;
+    font-family: var(--zdp-font-family-sans);
+    justify-items: stretch;
+    min-width: 0;
+    overflow-wrap: var(--zdp-i18n-overflow-wrap);
+    padding: var(--zdp-space-3);
+  }
+
+  .zdp-ad-slot--reserved {
+    overflow: hidden;
+  }
+
+  .zdp-ad-slot--banner {
+    inline-size: 100%;
+  }
+
+  .zdp-ad-slot--between-sections {
+    inline-size: 100%;
+  }
+
+  .zdp-ad-slot--rail {
+    align-content: start;
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
+  .zdp-ad-slot--filled {
+    color: var(--zdp-color-ink-normal);
+    padding: 0;
+  }
+
+  .zdp-ad-slot--filled :global(*) {
+    margin: 0;
+    max-inline-size: 100%;
+    min-width: 0;
+  }
+
+  .zdp-ad-slot__fallback {
+    color: var(--zdp-color-ink-muted);
+    font-size: var(--zdp-type-caption-size);
+    justify-self: center;
+    line-height: var(--zdp-type-caption-line-height);
+    margin: 0;
+    text-align: center;
+  }
+
+  .zdp-ad-slot--blocked {
+    border-color: var(--zdp-color-line-strong);
+    border-style: dashed;
+  }
+
+  .zdp-ad-slot--empty .zdp-ad-slot__fallback {
+    opacity: 0.72;
+  }
+
+  @media (max-width: 48rem) {
+    .zdp-ad-slot--rail {
+      block-size: auto;
+    }
+  }
+</style>

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.d.ts

@@ -1,4 +1,5 @@
 export { default as Accordion } from './components/Accordion.svelte';
+export { default as AdSlot } from './components/AdSlot.svelte';
 export { default as Avatar } from './components/Avatar.svelte';
 export { default as Badge } from './components/Badge.svelte';
 export { default as Breadcrumb } from './components/Breadcrumb.svelte';
@@ -68,6 +69,7 @@ export type { ZdpComboboxOption, ZdpComboboxSize } from './combobox';
 export type { ZdpCommandFieldSize } from './command';
 export type { ZdpCodeBlockSize, ZdpCodeBlockTone } from './code';
 export type { ZdpAccordionItem, ZdpAccordionMode, ZdpDisclosureHeadingLevel } from './disclosure';
+export type { ZdpAdSlotPlacement, ZdpAdSlotState } from './ad-slot';
 export type {
   ZdpAvatarSize,
   ZdpAvatarTone,

package/dist/index.js

@@ -1,4 +1,5 @@
 export { default as Accordion } from './components/Accordion.svelte';
+export { default as AdSlot } from './components/AdSlot.svelte';
 export { default as Avatar } from './components/Avatar.svelte';
 export { default as Badge } from './components/Badge.svelte';
 export { default as Breadcrumb } from './components/Breadcrumb.svelte';