@ticatec/uniface-element 5.0.0 → 5.0.2

package/dist/overlay/dialog/Dialog.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import {getContext, hasContext} from "svelte";
+    import {getContext, hasContext, onMount} from "svelte";
     import type {DialogCloseConfirm} from "./DialogCloseConfirm";
     import ActionBar from "../../layouts/action_bar";
     import type {ButtonAction, ButtonActions} from "../../types";
@@ -7,6 +7,9 @@
     import {ModalResult, type OnClose} from "./IDialog";
     import i18nRes from "../../i18nRes";
     import type {Snippet} from "svelte";
+    import {acquireScrollLock} from "../common/scrollLock";
+    import {registerEscapeHandler} from "../common/escapeClose";
+    import {focusTrap} from "../common/focusTrap";
 
     interface Props {
         title: string;
@@ -42,16 +45,6 @@
         try { return hasContext('dialogId') ? getContext<string | undefined>('dialogId') : undefined; } catch { return undefined; }
     })();
 
-    // 自动聚焦第一个按钮（次轮 tick，确保子组件已挂载）
-    $effect(() => {
-        if (!dialogId) return;  // 直接渲染模式由调用方控制
-        setTimeout(() => {
-            const root = document.querySelector('.uniface-dialog[data-dialog-id="' + dialogId + '"]');
-            const firstButton = root?.querySelector('button');
-            firstButton?.focus();
-        }, 300);
-    });
-
     export const close = async (result: ModalResult) => {
         const isCancelLike = result === ModalResult.MR_CANCEL || result === ModalResult.MR_CLOSE;
         const confirm = closeConfirm && isCancelLike ? await closeConfirm() : true;
@@ -65,15 +58,22 @@
         }
     };
 
-    const handleWindowKeyDown = (e: KeyboardEvent) => {
-        if (e.code !== 'Escape') return;
-        // 如果有 picker popover 打开，先让 CommonPicker 的 ESC 处理（关闭 popover）。
-        // 此时 DOM 里的 popover 还没被 Svelte 移除（响应式更新在微任务里），能检测到。
-        const openPopover = document.querySelector('.uniface-popover-wrapper:not(.hidden)');
-        if (openPopover) return;
-        e.preventDefault();
-        void close(ModalResult.MR_CANCEL);
-    };
+    // Dialog is modal — the page behind it should not scroll (regression fix:
+    // this was previously entirely missing, unlike Popover). Escape now goes
+    // through the shared, stack-aware registry instead of a hand-rolled
+    // ".uniface-popover-wrapper:not(.hidden)" DOM query — a Popover opened
+    // from within this dialog (e.g. a picker dropdown) registers later and so
+    // is topmost, closing first, with no special-casing needed here.
+    onMount(() => {
+        const releaseScrollLock = acquireScrollLock();
+        const unregisterEscape = registerEscapeHandler(() => {
+            void close(ModalResult.MR_CANCEL);
+        });
+        return () => {
+            releaseScrollLock();
+            unregisterEscape();
+        };
+    });
 
     const closeAction = $derived<ButtonAction>({
         label: closeButton,
@@ -128,19 +128,23 @@
     );
 </script>
 
-<svelte:window onkeydown={handleWindowKeyDown}/>
+<svelte:window onmousemove={handleMouseMove} onmouseup={handleMouseUp}/>
 
 <div class="uniface-dialog" data-dialog-id={dialogId}
-     style="{startMove ? 'cursor: move' : ''}"
-     onmousemove={handleMouseMove} onmouseleave={handleMouseUp}>
-    <div class="uniface-dialog-box"
+     style="{startMove ? 'cursor: move' : ''}">
+    <div class="uniface-dialog-box" use:focusTrap={{enabled: !!dialogId}}
          style="{dialog$style}; top: {top}px; left: {left}px; width: {width}; height: {height};">
-        <div class="title-bar" onmousedown={handleMouseDown} onmouseup={handleMouseUp} aria-hidden="true">
+        <!-- Drag handle for repositioning the dialog, not a semantic control; the
+             close action inside it is its own focusable <button>. -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="title-bar" onmousedown={handleMouseDown} onmouseup={handleMouseUp}>
             <div style="flex: 1 1 auto"><span>{title ?? 'New window'}</span></div>
             {#if !hideClose}
                 <div style="flex: 0 0 auto; padding-left: 12px">
-                    <i class="icon_google_clear dialog-action-button" aria-hidden="true"
-                       onclick={() => close(ModalResult.MR_CANCEL)}></i>
+                    <button type="button" class="dialog-action-button" aria-label="Close"
+                            onclick={() => close(ModalResult.MR_CANCEL)}>
+                        <i class="icon_google_clear" aria-hidden="true"></i>
+                    </button>
                 </div>
             {/if}
         </div>
@@ -153,8 +157,7 @@
     </div>
 </div>
 
-<style>@charset "UTF-8";
-:global(:root) {
+<style>:global(:root) {
   --uniface-dialog-border-color: #0000000D;
   --uniface-dialog-action-button-hover-background-color: #E2E8F0;
   --uniface-dialog-action-button-color: #6B7280;
@@ -170,8 +173,10 @@
   align-items: center;
   justify-content: center;
   background-color: var(--uniface-color-dialog-mask-surface, rgba(255, 255, 255, 0.1254901961));
-  /* z-index 必须低于 Popover 的 100，picker 下拉才能浮在 dialog 之上 */
-  z-index: 20;
+  /* Must stay below --uniface-z-popover so a picker dropdown opened inside
+     a dialog floats above the dialog itself. See uniface-root.scss for the
+     full stacking scale. */
+  z-index: var(--uniface-z-dialog, 20);
   user-select: none;
 }
 .uniface-dialog .uniface-dialog-box {
@@ -203,6 +208,13 @@
 .uniface-dialog .uniface-dialog-box .title-bar .dialog-action-button {
   cursor: pointer;
   color: var(--uniface-dialog-action-button-color, #B3BCCA);
+  background: none;
+  border: none;
+  padding: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font: inherit;
 }
 .uniface-dialog .uniface-dialog-box .title-bar .dialog-action-button:hover {
   background-color: var(--uniface-dialog-action-button-hover-background-color, #E2E8F0);
@@ -212,6 +224,10 @@
   position: relative;
   top: 1px;
 }
+.uniface-dialog .uniface-dialog-box .title-bar .dialog-action-button:focus-visible {
+  outline: 2px solid var(--uniface-primary-border-color, #298DFF);
+  outline-offset: 1px;
+}
 .uniface-dialog .uniface-dialog-box .dialog-content {
   flex: 1 1 auto;
   overflow: auto;
@@ -230,4 +246,4 @@
   align-items: center;
   justify-content: flex-end;
   border-top: 1px solid var(--uniface-dialog-divider-color, #F0F0F0);
-}</style>
+}</style>

package/dist/overlay/dialog/DialogManager.svelte.js

@@ -1,6 +1,6 @@
-import { mount } from 'svelte';
 import DialogBoard from './DialogBoard.svelte';
 import { ModalResult } from './IDialog';
+import { mountToBody } from '../common/mountSingleton';
 let boardMounted = false;
 /**
  * 内部使用：DialogBoard 在组件初始化时检查并标记，确保全局只有一个 board 实际渲染 stack。
@@ -15,14 +15,12 @@ export function _markBoardMounted() {
 function ensureMounted() {
     if (boardMounted)
         return;
-    if (typeof window !== 'undefined' && typeof document !== 'undefined' && document.body) {
-        try {
-            mount(DialogBoard, { target: document.body });
-        }
-        catch {
-            // Silent fallback
-        }
-    }
+    // Note: unlike the other overlay controllers, this deliberately does not
+    // set boardMounted here — DialogBoard.svelte itself calls
+    // _markBoardMounted() on init, since a board the consumer placed manually
+    // in their app root also needs to mark it mounted, not just this
+    // auto-mount path.
+    mountToBody(DialogBoard);
 }
 class DialogManager {
     stack = $state([]);

package/dist/overlay/dialog/DialogWrapper.svelte

@@ -3,7 +3,10 @@
 
     let {id, component: Comp, params}: {id: string, component: any, params: Record<string, any>} = $props();
 
-    setContext('dialogId', id);
+    // Context identity is fixed for the lifetime of this wrapper; later prop changes
+    // must not replace the dialog registration used by its descendants.
+    const getInitialDialogId = () => id;
+    setContext('dialogId', getInitialDialogId());
 </script>
 
-<Comp {...params}/>
+<Comp {...params}/>

package/dist/overlay/drawer/Drawer.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import {fly} from "svelte/transition";
     import type { Snippet } from "svelte";
+    import {acquireScrollLock} from "../common/scrollLock";
+    import {registerEscapeHandler} from "../common/escapeClose";
 
     interface Props {
         theme?: string;
@@ -26,6 +28,24 @@
         }
     });
 
+    // Drawer stays mounted and toggles `visible` repeatedly (unlike Popover/
+    // Dialog, which are conditionally rendered fresh each open), so the lock
+    // is acquired/released per visibility flip via this effect's cleanup,
+    // not once in onMount. Regression: this was previously entirely missing.
+    $effect(() => {
+        if (visible) {
+            return acquireScrollLock();
+        }
+    });
+
+    // Same per-visibility-flip lifecycle as the scroll lock above. Regression:
+    // previously had no Escape handling at all.
+    $effect(() => {
+        if (visible) {
+            return registerEscapeHandler(() => { visible = false; });
+        }
+    });
+
     let xPos = $derived(position == 'left' ? `${-width}` : '100%');
 
     const handleBackdropClick = () => {
@@ -37,9 +57,16 @@
     };
 </script>
 
-<div class="uniface-drawer" aria-hidden="true" data-theme={theme} style="display: {hidden ? 'none' : 'block'}" onclick={handleBackdropClick}>
+<!-- Backdrop click-to-close convenience only; aria-hidden must not be used
+     here since it would hide the real, arbitrary interactive content
+     rendered via `children` from assistive tech. -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="uniface-drawer" data-theme={theme} style="display: {hidden ? 'none' : 'block'}" onclick={handleBackdropClick}>
     {#if visible}
-        <div class={position} style="width: {width}px" transition:fly={{ x: xPos, duration: 1000, opacity: 0.5 }} aria-hidden="true"
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class={position} style="width: {width}px" transition:fly={{ x: xPos, duration: 1000, opacity: 0.5 }}
              onoutroend={()=>{hidden = !visible}} onclick={handleDrawerClick}>
             <div>
             {#if children}
@@ -58,7 +85,7 @@
         left: 0;
         right: 0;
         background-color: transparent;
-        z-index: 99;
+        z-index: var(--uniface-z-drawer, 99);
     }
 
     .uniface-drawer > div {

package/dist/overlay/indicator/Indicator.svelte.js

@@ -1,23 +1,10 @@
-import { mount } from 'svelte';
 import IndicatorPanel from './IndicatorPanel.svelte';
-let panelMounted = false;
+import { createSingletonMounter } from '../common/mountSingleton';
 /**
  * 懒挂载：第一次 show() 时把面板挂到 document.body，后续复用同一个实例。
  * 不需要用户在 app 根节点手动挂 <IndicatorBoard />。
  */
-function ensureMounted() {
-    if (panelMounted)
-        return;
-    if (typeof window !== 'undefined' && typeof document !== 'undefined' && document.body) {
-        try {
-            mount(IndicatorPanel, { target: document.body });
-            panelMounted = true;
-        }
-        catch {
-            // Silent fallback
-        }
-    }
-}
+const ensureMounted = createSingletonMounter(IndicatorPanel);
 class IndicatorController {
     message = $state('');
     visible = $state(false);

package/dist/overlay/indicator/IndicatorPanel.svelte

@@ -20,7 +20,10 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  z-index: 100;
+  /* Was a bare 100, accidentally tied with Popover's z-index; centralized
+     scale bumps this to 110 so an Indicator shown while a Popover is
+     open reliably sits above it. */
+  z-index: var(--uniface-z-indicator, 110);
 }
 .uniface-indicator-board .indicator-content {
   margin: 0 auto;

package/dist/overlay/message-box/MessageBox.svelte.js

@@ -1,22 +1,9 @@
-import { mount } from 'svelte';
 import MessageBoxPanel from './MessageBoxPanel.svelte';
 import { ModalResult } from './IMessageBox';
 import { getAppTitle } from '../../unifaceContext';
 import i18nRes from '../../i18nRes';
-let panelMounted = false;
-function ensureMounted() {
-    if (panelMounted)
-        return;
-    if (typeof window !== 'undefined' && typeof document !== 'undefined' && document.body) {
-        try {
-            mount(MessageBoxPanel, { target: document.body });
-            panelMounted = true;
-        }
-        catch {
-            // Silent fallback in test environments where Svelte client mount is bypassed
-        }
-    }
-}
+import { createSingletonMounter } from '../common/mountSingleton';
+const ensureMounted = createSingletonMounter(MessageBoxPanel);
 class MessageBoxController {
     visible = $state(false);
     title = $state('');

package/dist/overlay/message-box/MessageBoxPanel.svelte

@@ -61,12 +61,17 @@
     <div style={startMove ? 'cursor: move' : ''} onmousemove={handleMouseMove} role="none" class="dialog-inner">
         <div class="uniface-message-box">
             <div style="top: {top}px; left: {left}px">
-                <div class="title-bar" aria-hidden="true" onmousedown={handleMouseDown} onmouseup={handleMouseUp}>
+                <!-- Drag handle for repositioning the dialog, not a semantic control; the
+                     close action inside it is its own focusable <button>. -->
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                <div class="title-bar" onmousedown={handleMouseDown} onmouseup={handleMouseUp}>
                     {#if !utils.isEmpty(messageBox.title)}
                         <span class="title-text">{messageBox.title}</span>
                     {/if}
                     <div>
-                        <i class="icon_google_clear dialog-action-button" aria-hidden="true" onclick={handleCloseClick}></i>
+                        <button type="button" class="dialog-action-button" aria-label="Close" onclick={handleCloseClick}>
+                            <i class="icon_google_clear" aria-hidden="true"></i>
+                        </button>
                     </div>
                 </div>
                 <div class="box-content">
@@ -102,7 +107,7 @@
   width: 100%;
   height: 100%;
   user-select: none;
-  z-index: 30;
+  z-index: var(--uniface-z-message-box, 30);
   opacity: 0;
   transition: opacity 0.3s ease, display 0.3s ease allow-discrete, overlay 0.3s ease allow-discrete;
 }
@@ -200,6 +205,13 @@
 .uniface-message-dialog .uniface-message-box .title-bar .dialog-action-button {
   cursor: pointer;
   color: var(--uniface-message-color-title-bar);
+  background: none;
+  border: none;
+  padding: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font: inherit;
 }
 .uniface-message-dialog .uniface-message-box .title-bar .dialog-action-button:hover {
   background-color: var(--uniface-dialog-action-button-color-hover-surface);
@@ -209,6 +221,10 @@
   position: relative;
   top: 1px;
 }
+.uniface-message-dialog .uniface-message-box .title-bar .dialog-action-button:focus-visible {
+  outline: 2px solid var(--uniface-primary-border-color, #298DFF);
+  outline-offset: 1px;
+}
 .uniface-message-dialog .box-content {
   flex: 1 1 auto;
   overflow: auto;

package/dist/overlay/toast/Toast.svelte.js

@@ -1,23 +1,10 @@
-import { mount } from 'svelte';
 import ToastPanel from './ToastPanel.svelte';
-let panelMounted = false;
+import { createSingletonMounter } from '../common/mountSingleton';
 /**
  * 懒挂载：第一次 show() 时把面板挂到 document.body，后续复用同一个实例。
  * 不需要用户在 app 根节点手动挂 <ToastBoard />。
  */
-function ensureMounted() {
-    if (panelMounted)
-        return;
-    if (typeof window !== 'undefined' && typeof document !== 'undefined' && document.body) {
-        try {
-            mount(ToastPanel, { target: document.body });
-            panelMounted = true;
-        }
-        catch {
-            // Silent fallback in test environments
-        }
-    }
-}
+const ensureMounted = createSingletonMounter(ToastPanel);
 class ToastController {
     message = $state('');
     type = $state('info');

package/dist/overlay/toast/ToastPanel.svelte

@@ -35,7 +35,7 @@
   background-color: var(--uniface-color-overlay-mask-surface);
   display: block;
   text-align: center;
-  z-index: 40;
+  z-index: var(--uniface-z-toast, 40);
   color: var(--uniface-toast-color);
 }
 .uniface-toast-board .error {

package/dist/overlay/tooltip/Tooltip.svelte

@@ -129,7 +129,7 @@
 {#if state.visible}
     <div
             class="uniface-tooltip"
-            style="position: fixed; left: {state.x}px; top: {state.y}px; z-index: 9999; pointer-events: none; transform: {state.transform}; max-width: 50vw;"
+            style="position: fixed; left: {state.x}px; top: {state.y}px; z-index: var(--uniface-z-tooltip, 9999); pointer-events: none; transform: {state.transform}; max-width: 50vw;"
     >
         {@html state.html}
     </div>

package/dist/ticatec-uniface-web.css

@@ -1,5 +1,23 @@
 @charset "UTF-8";
 :root {
+  /* === Overlay z-index scale ===
+     A single source of truth for stacking order across every overlay
+     surface. Previously each component hardcoded its own literal with no
+     documented relationship to the others — Popover and Indicator both used
+     100, and ContextMenu/FloatingPanel both used 1000, by accident rather
+     than by design. Consumers can override any layer; the relative order
+     below is what actually matters; the absolute numbers only need enough
+     headroom between layers for app code to slot things in between. */
+  --uniface-z-dialog: 20;
+  --uniface-z-message-box: 30;
+  --uniface-z-toast: 40;
+  --uniface-z-drawer: 99;
+  --uniface-z-popover: 100;
+  --uniface-z-indicator: 110;
+  --uniface-z-context-menu: 1000;
+  --uniface-z-floating-panel: 1010;
+  --uniface-z-modal-overlay: 9998;
+  --uniface-z-tooltip: 9999;
   /* === Color Tokens === */
   --color-primary: #0061FF;
   --color-secondary: #22BDFF;
@@ -158,7 +176,11 @@
   --uniface-card-footer-height: 40px;
   --uniface-card-color-surface: #ffffff;
   --uniface-card-color: #111827;
-  --uniface-card-color-muted: #4b5563;
+  /* Card.svelte (and the component's own README/README_CN) reference
+     --uniface-card-text-muted; this used to be named --uniface-card-color-muted
+     here instead, so the header title color silently fell back to inherited
+     text color everywhere, in both light and dark mode. */
+  --uniface-card-text-muted: #4b5563;
   --uniface-card-border-color: var(--uniface-color-border-secondary);
   --uniface-card-color-inside-border: #f3f4f6;
   --uniface-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
@@ -412,6 +434,16 @@
   --uniface-progress-step-completed-color: #374151;
   --uniface-progress-step-completed-icon-bg: #0061FF1A;
   --uniface-progress-step-completed-icon-color: #0061FF;
+  /* TreeView Tokens */
+  --uniface-treeview-chevron-color: #6b7280;
+  --uniface-treeview-chevron-hover-color: #111827;
+  --uniface-treeview-item-bg: #EEF4FF;
+  --uniface-treeview-item-selected-color: #0061FF;
+  /* The listbox body itself previously had no surface/text color of its own
+     — it just showed through the page background, which happened to look
+     fine only because most light-mode pages are white. */
+  --uniface-list-box-color-surface: var(--uniface-color-surface);
+  --uniface-list-box-color: var(--uniface-primary-color-font);
   --uniface-listbox-separator-color: #F0F0F0;
   --uniface-list-box-hover-surface: #FFFFE1;
   --uniface-list-box-selected-surface: #b1c8f6;
@@ -441,6 +473,32 @@
   --uniface-tab-action-background: #FFFFFF;
   --uniface-tab-hover-text-color: #298DFF;
   --uniface-tab-header-radius: 4px;
+  /* Concise Data Table Tokens
+     Previously these tokens didn't exist anywhere in this file at all —
+     ConciseListTable.svelte referenced --uniface-concise-table-row-alter-bg/
+     -color with light-only fallback values and otherwise used hardcoded
+     literals (#f5f5f5 header, #f9f9f9 hover) with no variable and no
+     dark-mode hook whatsoever. */
+  --uniface-concise-table-color-surface: var(--uniface-color-surface);
+  --uniface-concise-table-color: var(--uniface-primary-color-font);
+  --uniface-concise-table-header-surface: #f5f5f5;
+  --uniface-concise-table-row-alter-bg: #F8FAFC;
+  --uniface-concise-table-row-alter-color: #374151;
+  --uniface-concise-table-row-hover-bg: #f9f9f9;
+  /* Navigator Tokens
+     Previously the component declared its own local custom properties
+     (scoped to .uniface-navigator-panel) instead of reading from this file,
+     and one of them pointed at --uniface-application-bg, a token that was
+     never defined anywhere — so the panel background was always invalid/
+     unset (transparent) and had no light/dark distinction at all. */
+  --uniface-navigator-background-color: var(--uniface-color-surface);
+  --uniface-navigator-completed-text-color: #374151;
+  --uniface-navigator-not-start-text-color: #6B7280;
+  --uniface-navigator-warning-dot-color: #C62828;
+  --uniface-navigator-hover-text-color: #298DFF;
+  --uniface-navigator-active-text-color: #0061FF;
+  --uniface-navigator-highlight-text-color: #0061FF;
+  --uniface-navigator-connector-color: #D1D5DB;
 }
 
 /* ============================================
@@ -521,6 +579,25 @@
   --uniface-calendar-color-selected-surface: #2563eb;
   --uniface-calendar-color-selected: #ffffff;
   --uniface-calendar-color-day-surface-hover: rgba(255, 255, 255, 0.08);
+  /* TreeView Tokens */
+  --uniface-treeview-chevron-color: #9ca3af;
+  --uniface-treeview-chevron-hover-color: #e5e7eb;
+  --uniface-treeview-item-bg: rgba(255, 255, 255, 0.08);
+  --uniface-treeview-item-selected-color: #60a5fa;
+  /* ListBox Tokens - Dark Theme
+     Previously entirely missing: every ListBox token only had a light value
+     in :root, with no [data-theme="dark"] override, so the box stayed
+     light-themed (light header/footer surfaces, near-white hover/selected
+     highlight colors) regardless of dark mode. */
+  --uniface-list-box-color-surface: var(--uniface-color-surface);
+  --uniface-list-box-color: #e5e7eb;
+  --uniface-listbox-separator-color: rgba(255, 255, 255, 0.08);
+  --uniface-list-box-hover-surface: rgba(255, 255, 255, 0.08);
+  --uniface-list-box-selected-surface: rgba(59, 130, 246, 0.24);
+  --uniface-list-box-fotter-top-border: 1px solid rgba(255, 255, 255, 0.08);
+  --uniface-list-box-border-color: #3a3a3a;
+  --uniface-list-box-header-surface: #262626;
+  --uniface-list-box-footer-surface: #262626;
   /* Menu Separator */
   --uniface-menu-separator-color: rgba(255, 255, 255, 0.08);
   /* Drawer Tokens */
@@ -533,6 +610,18 @@
   --uniface-box-color-header-title: var(--uniface-primary-color-font);
   --uniface-box-color-footer-surface: var(--uniface-color-surface-variant);
   --uniface-box-color-footer-title: var(--uniface-second-color-font);
+  /* Card Tokens - Dark Theme
+     Previously entirely missing: Card only had light-mode values in :root,
+     with no [data-theme="dark"] override, so cards stayed white/light
+     regardless of dark mode. */
+  --uniface-card-color-surface: #262626;
+  --uniface-card-color: #e5e7eb;
+  --uniface-card-text-muted: #9ca3af;
+  --uniface-card-color-inside-border: rgba(255, 255, 255, 0.08);
+  --uniface-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 16px 32px rgba(0, 0, 0, 0.4);
+  --uniface-card-color-action-bar: #9ca3af;
+  --uniface-card-color-action-bar-hover: #ffffff;
+  --uniface-card-color-action-bar-disabled: #52525b;
   --uniface-page-color-text: var(--uniface-primary-color-font);
   --uniface-page-color-surface: var(--uniface-color-surface);
   --uniface-page-border-color: rgba(255, 255, 255, 0.06);
@@ -735,6 +824,22 @@
   --uniface-tab-action-background: #262626;
   --uniface-tab-hover-text-color: #60A5FA;
   --uniface-tab-header-radius: 4px;
+  /* Concise Data Table Tokens - Dark Theme */
+  --uniface-concise-table-color-surface: var(--uniface-color-surface);
+  --uniface-concise-table-color: #e5e7eb;
+  --uniface-concise-table-header-surface: #262626;
+  --uniface-concise-table-row-alter-bg: #1f1f1f;
+  --uniface-concise-table-row-alter-color: #e5e7eb;
+  --uniface-concise-table-row-hover-bg: rgba(255, 255, 255, 0.08);
+  /* Navigator Tokens - Dark Theme */
+  --uniface-navigator-background-color: var(--uniface-color-surface);
+  --uniface-navigator-completed-text-color: #e5e7eb;
+  --uniface-navigator-not-start-text-color: #9ca3af;
+  --uniface-navigator-warning-dot-color: #f87171;
+  --uniface-navigator-hover-text-color: #60a5fa;
+  --uniface-navigator-active-text-color: #60a5fa;
+  --uniface-navigator-highlight-text-color: #60a5fa;
+  --uniface-navigator-connector-color: #3a3a3a;
 }
 
 * {
@@ -991,11 +1096,6 @@
   background-color: var(--uniface-editor-color-filled-surface);
   transition: background-color 0.2s ease, border-color 0.2s ease;
 }
-.uniface-form-editor.plain {
-  background-color: transparent;
-  border-bottom-color: transparent;
-  border-radius: 0;
-}
 .uniface-form-editor {
   /* 1.2 状态感知拦截 (States) */
 }
@@ -1005,6 +1105,14 @@
 .uniface-form-editor:focus-within {
   border-color: var(--uniface-editor-color-active-border);
 }
+.uniface-form-editor.plain {
+  background-color: transparent;
+  border-bottom-color: transparent;
+  border-radius: 0;
+}
+.uniface-form-editor.plain.focus-within {
+  border-color: transparent;
+}
 .uniface-form-editor.disabled {
   color: var(--uniface-editor-color-disabled);
   cursor: not-allowed;
@@ -1085,21 +1193,21 @@
 .uniface-form-editor .uniface-common-editor:focus-within.number-input {
   text-align: left;
 }
-.uniface-form-editor .uniface-common-editor:focus-within .clean-icon i {
+.uniface-form-editor .uniface-common-editor:focus-within .clean-icon.has-value i {
   display: block;
   position: relative;
 }
-.uniface-form-editor .uniface-common-editor:focus-within .clean-icon i:active {
+.uniface-form-editor .uniface-common-editor:focus-within .clean-icon.has-value i:active {
   top: 1px;
 }
 .uniface-form-editor .uniface-common-editor:has(.clean-icon) input {
   padding-right: 14px;
 }
-.uniface-form-editor .uniface-common-picker:hover .clean-icon i {
+.uniface-form-editor .uniface-common-picker:hover .clean-icon.has-value i {
   display: block;
   position: relative;
 }
-.uniface-form-editor .uniface-common-picker:hover .clean-icon i:active {
+.uniface-form-editor .uniface-common-picker:hover .clean-icon.has-value i:active {
   top: 1px;
 }
 .uniface-form-editor .uniface-common-picker:has(.clean-icon) input {
@@ -1201,9 +1309,16 @@
 }
 
 .uniface-popover-wrapper {
-  position: absolute;
+  /* Popover.svelte computes position.top/left from target.getBoundingClientRect(),
+     which is viewport-relative. `position: absolute` places this element relative to
+     the document instead, so it drifted away from its anchor by the page's (or any
+     ancestor's) scroll offset. `fixed` keeps the same coordinate frame as the values
+     driving top/left, and combined with the scroll listener in Popover.svelte the
+     overlay stays pinned to its anchor while scrolling. See also ContextMenuPanel.svelte
+     and FloatingPanel.svelte, which use the same fixed + viewport-relative-coords pattern. */
+  position: fixed;
   display: block;
-  z-index: 100;
+  z-index: var(--uniface-z-popover, 100);
   opacity: 1;
   visibility: visible;
   transition: opacity 0.3s ease-in-out;
@@ -1570,7 +1685,7 @@
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.45);
-  z-index: 9998;
+  z-index: var(--uniface-z-modal-overlay, 9998);
   opacity: 1;
   transition: opacity 0.15s ease;
 }