@ticatec/uniface-element 5.0.1 → 5.0.3

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);
@@ -417,6 +439,11 @@
   --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;
@@ -446,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;
 }
 
 /* ============================================
@@ -531,6 +584,20 @@
   --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 */
@@ -543,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);
@@ -745,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;
 }
 
 * {
@@ -1098,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 {
@@ -1223,7 +1318,7 @@
      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;
@@ -1590,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;
 }

package/dist/types.d.ts

@@ -68,9 +68,9 @@ export type ButtonActions = Array<ButtonAction | null>;
  */
 export type TabActionHandler = (tab: any) => void;
 /**
- * 标签页关闭处理器
+ * 标签页关闭处理器：返回 false（含 Promise<false>）可阻止关闭
  */
-export type TabCloseHandler = (tab: any) => Promise<boolean>;
+export type TabCloseHandler = (tab: any) => boolean | Promise<boolean>;
 /**
  * 标签页渲染器
  */
@@ -175,8 +175,9 @@ export interface RowFontStyle {
 export type GetCellStyle = (data: any) => string;
 /**
  * 获取整行的样式
+ * @template T Row data type. Defaults to `any` so existing untyped usage keeps compiling.
  */
-export type GetRowFontStyle = (data: any) => RowFontStyle;
+export type GetRowFontStyle<T = any> = (data: T) => RowFontStyle;
 /**
  *
  */

package/docs/components/README.md

@@ -0,0 +1,133 @@
+# Uniface Element 组件文档
+
+本目录依据 `package.json exports` 和组件源码自动生成，共收录 **71** 个公开组件。每个组件都包含独立属性文档和可复制的 Svelte 示例。
+
+- 重新生成：`pnpm run docs:components`
+- 属性来源：组件内 `Props` 接口及 `$props()` 默认值
+- 文档不复用历史 README，避免旧 API 污染
+
+## 表单
+
+| 组件 | 导入路径 | 示例 | 属性数 |
+| --- | --- | --- | ---: |
+| [AttachmentFiles](./attachment-files/README.md) | `@ticatec/uniface-element/AttachmentFiles` | [示例](./attachment-files/example.svelte) | 20 |
+| [CascadeOptionsSelect](./cascade-options-select/README.md) | `@ticatec/uniface-element/CascadeOptionsSelect` | [示例](./cascade-options-select/example.svelte) | 27 |
+| [Checkbox](./checkbox/README.md) | `@ticatec/uniface-element/Checkbox` | [示例](./checkbox/example.svelte) | 11 |
+| [ColorPicker](./color-picker/README.md) | `@ticatec/uniface-element/ColorPicker` | [示例](./color-picker/example.svelte) | 13 |
+| [DatePicker](./date-picker/README.md) | `@ticatec/uniface-element/DatePicker` | [示例](./date-picker/example.svelte) | 19 |
+| [DateRange](./date-range/README.md) | `@ticatec/uniface-element/DateRange` | [示例](./date-range/example.svelte) | 14 |
+| [DateTimePicker](./date-time-picker/README.md) | `@ticatec/uniface-element/DateTimePicker` | [示例](./date-time-picker/example.svelte) | 17 |
+| [GroupCheckBox](./group-check-box/README.md) | `@ticatec/uniface-element/GroupCheckBox` | [示例](./group-check-box/example.svelte) | 20 |
+| [GroupRadioBox](./group-radio-box/README.md) | `@ticatec/uniface-element/GroupRadioBox` | [示例](./group-radio-box/example.svelte) | 17 |
+| [ImageFiles](./image-files/README.md) | `@ticatec/uniface-element/ImageFiles` | [示例](./image-files/example.svelte) | 9 |
+| [InputOptionsSelect](./input-options-select/README.md) | `@ticatec/uniface-element/InputOptionsSelect` | [示例](./input-options-select/example.svelte) | 23 |
+| [LookupEditor](./lookup-editor/README.md) | `@ticatec/uniface-element/LookupEditor` | [示例](./lookup-editor/example.svelte) | 17 |
+| [MemoEditor](./memo-editor/README.md) | `@ticatec/uniface-element/MemoEditor` | [示例](./memo-editor/example.svelte) | 24 |
+| [NumberEditor](./number-editor/README.md) | `@ticatec/uniface-element/NumberEditor` | [示例](./number-editor/example.svelte) | 25 |
+| [NumberRange](./number-range/README.md) | `@ticatec/uniface-element/NumberRange` | [示例](./number-range/example.svelte) | 14 |
+| [OptionsMultiSelect](./options-multi-select/README.md) | `@ticatec/uniface-element/OptionsMultiSelect` | [示例](./options-multi-select/example.svelte) | 27 |
+| [OptionsSelect](./options-select/README.md) | `@ticatec/uniface-element/OptionsSelect` | [示例](./options-select/example.svelte) | 25 |
+| [PromptsTextEditor](./prompts-text-editor/README.md) | `@ticatec/uniface-element/PromptsTextEditor` | [示例](./prompts-text-editor/example.svelte) | 18 |
+| [RadioButton](./radio-button/README.md) | `@ticatec/uniface-element/RadioButton` | [示例](./radio-button/example.svelte) | 10 |
+| [SearchBox](./search-box/README.md) | `@ticatec/uniface-element/SearchBox` | [示例](./search-box/example.svelte) | 17 |
+| [Switch](./switch/README.md) | `@ticatec/uniface-element/Switch` | [示例](./switch/example.svelte) | 5 |
+| [TextEditor](./text-editor/README.md) | `@ticatec/uniface-element/TextEditor` | [示例](./text-editor/example.svelte) | 22 |
+| [TimeEditor](./time-editor/README.md) | `@ticatec/uniface-element/TimeEditor` | [示例](./time-editor/example.svelte) | 19 |
+| [UnitNumberEditor](./unit-number-editor/README.md) | `@ticatec/uniface-element/UnitNumberEditor` | [示例](./unit-number-editor/example.svelte) | 18 |
+
+## 布局
+
+| 组件 | 导入路径 | 示例 | 属性数 |
+| --- | --- | --- | ---: |
+| [ActionBar](./action-bar/README.md) | `@ticatec/uniface-element/ActionBar` | [示例](./action-bar/example.svelte) | 4 |
+| [AppTopBar](./app-top-bar/README.md) | `@ticatec/uniface-element/AppTopBar` | [示例](./app-top-bar/example.svelte) | 6 |
+| [Box](./box/README.md) | `@ticatec/uniface-element/Box` | [示例](./box/example.svelte) | 8 |
+| [CriteriaField](./criteria-field/README.md) | `@ticatec/uniface-element/CriteriaField` | [示例](./criteria-field/example.svelte) | 7 |
+| [FlexForm](./flex-form/README.md) | `@ticatec/uniface-element/FlexForm` | [示例](./flex-form/example.svelte) | 3 |
+| [FlexRowForm](./flex-row-form/README.md) | `@ticatec/uniface-element/FlexRowForm` | [示例](./flex-row-form/example.svelte) | 4 |
+| [FormField](./form-field/README.md) | `@ticatec/uniface-element/FormField` | [示例](./form-field/example.svelte) | 11 |
+| [GridForm](./grid-form/README.md) | `@ticatec/uniface-element/GridForm` | [示例](./grid-form/example.svelte) | 5 |
+| [Page](./page/README.md) | `@ticatec/uniface-element/Page` | [示例](./page/example.svelte) | 12 |
+
+## 导航
+
+| 组件 | 导入路径 | 示例 | 属性数 |
+| --- | --- | --- | ---: |
+| [Breadcrumbs](./breadcrumbs/README.md) | `@ticatec/uniface-element/Breadcrumbs` | [示例](./breadcrumbs/example.svelte) | 6 |
+| [Navigator](./navigator/README.md) | `@ticatec/uniface-element/Navigator` | [示例](./navigator/example.svelte) | 6 |
+| [NavigatorMenu](./navigator-menu/README.md) | `@ticatec/uniface-element/NavigatorMenu` | [示例](./navigator-menu/example.svelte) | 6 |
+| [Pagination](./pagination/README.md) | `@ticatec/uniface-element/Pagination` | [示例](./pagination/example.svelte) | 7 |
+| [ProgressStepBar](./progress-step-bar/README.md) | `@ticatec/uniface-element/ProgressStepBar` | [示例](./progress-step-bar/example.svelte) | 4 |
+| [Tabs](./tabs/README.md) | `@ticatec/uniface-element/Tabs` | [示例](./tabs/example.svelte) | 14 |
+
+## 反馈
+
+| 组件 | 导入路径 | 示例 | 属性数 |
+| --- | --- | --- | ---: |
+| [ProgressBar](./progress-bar/README.md) | `@ticatec/uniface-element/ProgressBar` | [示例](./progress-bar/example.svelte) | 6 |
+
+## 浮层与弹窗
+
+| 组件 | 导入路径 | 示例 | 属性数 |
+| --- | --- | --- | ---: |
+| [CommonDialog](./common-dialog/README.md) | `@ticatec/uniface-element/CommonDialog` | [示例](./common-dialog/example.svelte) | 10 |
+| [Dialog](./dialog/README.md) | `@ticatec/uniface-element/Dialog` | [示例](./dialog/example.svelte) | 12 |
+| [DialogBoard](./dialog-board/README.md) | `@ticatec/uniface-element/DialogBoard` | [示例](./dialog-board/example.svelte) | 0 |
+| [Drawer](./drawer/README.md) | `@ticatec/uniface-element/Drawer` | [示例](./drawer/example.svelte) | 5 |
+| [FullScreenOverlay](./full-screen-overlay/README.md) | `@ticatec/uniface-element/FullScreenOverlay` | [示例](./full-screen-overlay/example.svelte) | 2 |
+| [PopupHint](./popup-hint/README.md) | `@ticatec/uniface-element/PopupHint` | [示例](./popup-hint/example.svelte) | 2 |
+| [Tooltip](./tooltip/README.md) | `@ticatec/uniface-element/Tooltip` | [示例](./tooltip/example.svelte) | 2 |
+
+## 复合组件
+
+| 组件 | 导入路径 | 示例 | 属性数 |
+| --- | --- | --- | ---: |
+| [PaginationPanel](./pagination-panel/README.md) | `@ticatec/uniface-element/PaginationPanel` | [示例](./pagination-panel/example.svelte) | 13 |
+| [Transfer](./transfer/README.md) | `@ticatec/uniface-element/Transfer` | [示例](./transfer/example.svelte) | 11 |
+
+## 命令式服务
+
+| 组件 | 导入路径 | 示例 | 属性数 |
+| --- | --- | --- | ---: |
+| [ContextMenu](./context-menu/README.md) | `@ticatec/uniface-element/ContextMenu` | [示例](./context-menu/example.svelte) | 8 |
+| [Indicator](./indicator/README.md) | `@ticatec/uniface-element/Indicator` | [示例](./indicator/example.svelte) | 4 |
+| [MessageBox](./message-box/README.md) | `@ticatec/uniface-element/MessageBox` | [示例](./message-box/example.svelte) | 9 |
+| [Toast](./toast/README.md) | `@ticatec/uniface-element/Toast` | [示例](./toast/example.svelte) | 8 |
+
+## 数据表格
+
+| 组件 | 导入路径 | 示例 | 属性数 |
+| --- | --- | --- | ---: |
+| [DataTable](./data-table/README.md) | `@ticatec/uniface-element/DataTable` | [示例](./data-table/example.svelte) | 13 |
+
+## 数据展示
+
+| 组件 | 导入路径 | 示例 | 属性数 |
+| --- | --- | --- | ---: |
+| [Accordion](./accordion/README.md) | `@ticatec/uniface-element/Accordion` | [示例](./accordion/example.svelte) | 5 |
+| [Card](./card/README.md) | `@ticatec/uniface-element/Card` | [示例](./card/example.svelte) | 8 |
+| [ConciseDataTable](./concise-data-table/README.md) | `@ticatec/uniface-element/ConciseDataTable` | [示例](./concise-data-table/example.svelte) | 10 |
+| [ListBox](./list-box/README.md) | `@ticatec/uniface-element/ListBox` | [示例](./list-box/example.svelte) | 21 |
+| [TreeView](./tree-view/README.md) | `@ticatec/uniface-element/TreeView` | [示例](./tree-view/example.svelte) | 16 |
+
+## 通用
+
+| 组件 | 导入路径 | 示例 | 属性数 |
+| --- | --- | --- | ---: |
+| [Button](./button/README.md) | `@ticatec/uniface-element/Button` | [示例](./button/example.svelte) | 14 |
+| [Icon](./icon/README.md) | `@ticatec/uniface-element/Icon` | [示例](./icon/example.svelte) | 7 |
+| [IconButton](./icon-button/README.md) | `@ticatec/uniface-element/IconButton` | [示例](./icon-button/example.svelte) | 10 |
+| [Separator](./separator/README.md) | `@ticatec/uniface-element/Separator` | [示例](./separator/example.svelte) | 2 |
+| [Split](./split/README.md) | `@ticatec/uniface-element/Split` | [示例](./split/example.svelte) | 5 |
+| [Tag](./tag/README.md) | `@ticatec/uniface-element/Tag` | [示例](./tag/example.svelte) | 10 |
+| [TextButton](./text-button/README.md) | `@ticatec/uniface-element/TextButton` | [示例](./text-button/example.svelte) | 10 |
+
+## 应用布局
+
+| 组件 | 导入路径 | 示例 | 属性数 |
+| --- | --- | --- | ---: |
+| [ClassicLayout](./classic-layout/README.md) | `@ticatec/uniface-element/app-layout/ClassicLayout` | [示例](./classic-layout/example.svelte) | 15 |
+| [ColumnsLayout](./columns-layout/README.md) | `@ticatec/uniface-element/app-layout/ColumnsLayout` | [示例](./columns-layout/example.svelte) | 13 |
+| [HeaderLayout](./header-layout/README.md) | `@ticatec/uniface-element/app-layout/HeaderLayout` | [示例](./header-layout/example.svelte) | 8 |
+| [RowsLayout](./rows-layout/README.md) | `@ticatec/uniface-element/app-layout/RowsLayout` | [示例](./rows-layout/example.svelte) | 13 |
+| [SidebarLayout](./sidebar-layout/README.md) | `@ticatec/uniface-element/app-layout/SidebarLayout` | [示例](./sidebar-layout/example.svelte) | 8 |

package/docs/components/accordion/README.md

@@ -0,0 +1,60 @@
+# Accordion
+
+数据展示组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+可折叠的内容分组容器，用较小空间组织层级信息。
+
+## 适用场景
+
+- FAQ、设置分组和详情折叠区
+- 需要按标题展开或收起大段内容
+
+## 导入
+
+```ts
+import Accordion from '@ticatec/uniface-element/Accordion';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `style` | 否 | `string` | 否 | `''` | 否 | 附加到组件根元素的内联样式。 |
+| `compact` | 否 | `boolean` | 否 | `false` | 否 | 启用紧凑尺寸，减少组件高度和内边距。 |
+| `accordions` | 否 | `AccordionItem[]` | 否 | `[]` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `exclusive` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `theme` | 否 | `string` | 否 | `'theme-light'` | 否 | 组件主题标识，通常通过 `data-theme` 选择对应 CSS 变量。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 相关类型定义
+
+以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
+
+### `AccordionItem`
+
+```ts
+export default interface AccordionItem {
+    title: string;
+    content: Snippet;
+}
+```
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import Accordion from '@ticatec/uniface-element/Accordion';
+</script>
+
+<Accordion
+  compact={true}
+/>
+```
+
+## 源码
+
+- `src/lib/data_display/accordion/Accordion.svelte`

package/docs/components/accordion/example.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import Accordion from '@ticatec/uniface-element/Accordion';
+</script>
+
+<Accordion
+  compact={true}
+/>

package/docs/components/action-bar/README.md

@@ -0,0 +1,114 @@
+# ActionBar
+
+布局组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+集中排列页面或区域操作按钮的工具栏。
+
+## 适用场景
+
+- 表单保存、取消和删除操作区
+- 列表页批量操作与页面级命令
+
+## 导入
+
+```ts
+import ActionBar from '@ticatec/uniface-element/ActionBar';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `buttons` | 否 | `ButtonActions` | 否 | `[]` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `style` | 否 | `string` | 否 | `undefined` | 否 | 附加到组件根元素的内联样式。 |
+| `theme` | 否 | `string` | 否 | `undefined` | 否 | 组件主题标识，通常通过 `data-theme` 选择对应 CSS 变量。 |
+| `children` | 是 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 子内容，用于自定义组件主体。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `children`
+
+Svelte Snippet 子内容，用于自定义组件主体。
+
+- 类型：`Snippet`
+- 默认值：`undefined`
+- 示例写法：`children={children}`
+
+## 相关类型定义
+
+以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
+
+### `ButtonActions`
+
+```ts
+export type ButtonActions = Array<ButtonAction | null>;
+```
+
+### `ButtonAction`
+
+```ts
+export interface ButtonAction {
+    /**
+     * 按钮的文字
+     */
+    label: string;
+
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+
+    /**
+     * 帮助信息
+     */
+    tooltip?: string;
+
+    /**
+     * 前缀图标
+     */
+    icon?: string;
+
+    /**
+     * 按钮的类型
+     */
+    type?: ButtonType;
+
+    /**
+     * click处理函数
+     */
+    handler?: MouseClickHandler;
+}
+```
+
+### `ButtonType`
+
+```ts
+export type ButtonType = 'default' | 'primary' | 'secondary' | 'third' | 'forth';
+```
+
+### `MouseClickHandler`
+
+```ts
+export type MouseClickHandler = (event: MouseEvent) => void;
+```
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import ActionBar from '@ticatec/uniface-element/ActionBar';
+</script>
+
+<ActionBar>
+  <div>在这里放置子内容</div>
+</ActionBar>
+```
+
+## 源码
+
+- `src/lib/layouts/action_bar/ActionBar.svelte`

package/docs/components/action-bar/example.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import ActionBar from '@ticatec/uniface-element/ActionBar';
+</script>
+
+<ActionBar>
+  <div>在这里放置子内容</div>
+</ActionBar>

package/docs/components/app-top-bar/README.md

@@ -0,0 +1,60 @@
+# AppTopBar
+
+布局组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+应用顶部导航和操作区域。
+
+## 适用场景
+
+- 后台系统顶栏、品牌区和用户菜单
+- 放置全局搜索、通知与快捷操作
+
+## 导入
+
+```ts
+import AppTopBar from '@ticatec/uniface-element/AppTopBar';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `title` | 否 | `string` | 否 | `''` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `style` | 否 | `string` | 否 | `''` | 否 | 附加到组件根元素的内联样式。 |
+| `theme` | 否 | `string` | 否 | `undefined` | 否 | 组件主题标识，通常通过 `data-theme` 选择对应 CSS 变量。 |
+| `home` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
+| `children` | 是 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 子内容，用于自定义组件主体。 |
+| `right` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `children`
+
+Svelte Snippet 子内容，用于自定义组件主体。
+
+- 类型：`Snippet`
+- 默认值：`undefined`
+- 示例写法：`children={children}`
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import AppTopBar from '@ticatec/uniface-element/AppTopBar';
+</script>
+
+<AppTopBar
+  title="示例标题"
+>
+  <div>在这里放置子内容</div>
+</AppTopBar>
+```
+
+## 源码
+
+- `src/lib/layouts/app_top_bar/AppTopBar.svelte`

package/docs/components/app-top-bar/example.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import AppTopBar from '@ticatec/uniface-element/AppTopBar';
+</script>
+
+<AppTopBar
+  title="示例标题"
+>
+  <div>在这里放置子内容</div>
+</AppTopBar>