@ticatec/uniface-element 5.0.4 → 5.1.0

package/dist/layouts/action_bar/README.md

@@ -1,6 +1,8 @@
 # ActionBar Component
 
-A horizontal row of action buttons, declared via a `buttons` array (or a custom snippet). Use `null` entries in the array to drop a vertical separator between button groups.
+> **Renamed in 5.1.0**: this document uses the names from the [API Naming Guide](../../../docs/NAMING.md); the old names `buttons` were removed in 5.1.0 (no compatibility aliases are kept).
+
+A horizontal row of action buttons, declared via a `actions` array (or a custom snippet). Use `null` entries in the array to drop a vertical separator between button groups.
 
 Built on top of [Button](../../general/button/README.md) and [Separator](../../general/separator/README.md).
 
@@ -8,7 +10,7 @@ Built on top of [Button](../../general/button/README.md) and [Separator](../../g
 
 - **Data-driven buttons**: declare actions as `ButtonAction[]`, the bar renders them
 - **Implicit separators**: `null` in the array → 24px-tall vertical Separator between groups
-- **Or snippet content**: pass children for full custom layout (overrides `buttons` when both are set)
+- **Or snippet content**: pass children for full custom layout (overrides `actions` when both are set)
 - **Disabled per button**: `ButtonAction.disabled` flows through to the underlying Button
 - **All ButtonType variants**: `default` / `primary` / `secondary` / `third` / `forth`
 - **Tooltips**: `ButtonAction.tooltip` is forwarded as `data-tip` to Button
@@ -47,19 +49,19 @@ import ActionBar, { type ButtonAction, type ButtonActions } from '@ticatec/unifa
   ];
 </script>
 
-<ActionBar buttons={actions} />
+<ActionBar actions={actions} />
 ```
 
 ## Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `buttons` | `ButtonActions` (`Array<ButtonAction \| null>`) | `[]` | Declarative button list. `null` entries render as a vertical Separator. Ignored when `children` is provided. |
+| `actions` | `ButtonActions` (`Array<ButtonAction \| null>`) | `[]` | Declarative button list. `null` entries render as a vertical Separator. Ignored when `children` is provided. |
 | `style` | `string \| undefined` | `undefined` | Inline CSS on the outer wrapper |
 | `theme` | `string \| undefined` | `undefined` | Set as `data-theme` on the outer wrapper for scoped CSS overrides |
-| `children` | `Snippet \| undefined` | `undefined` | Custom content. **Takes precedence over `buttons`** when both are provided. |
+| `children` | `Snippet \| undefined` | `undefined` | Custom content. **Takes precedence over `actions`** when both are provided. |
 
-> **Children precedence**: if you pass both `buttons` and inline children, only the children render. The `buttons` array is silently ignored.
+> **Children precedence**: if you pass both `actions` and inline children, only the children render. The `actions` array is silently ignored.
 
 ## ButtonAction
 
@@ -111,7 +113,7 @@ Two consequences:
   ];
 </script>
 
-<ActionBar buttons={basicActions} />
+<ActionBar actions={basicActions} />
 ```
 
 ### With Icons + Tooltips
@@ -135,7 +137,7 @@ Two consequences:
   ];
 </script>
 
-<ActionBar buttons={iconActions} />
+<ActionBar actions={iconActions} />
 ```
 
 ### With Separators Between Groups
@@ -150,14 +152,14 @@ Two consequences:
   ];
 </script>
 
-<ActionBar buttons={actions} />
+<ActionBar actions={actions} />
 ```
 
 ### Form Footer (Right-Aligned, Full-Width)
 
 ```svelte
 <ActionBar
-  buttons={[
+  actions={[
     { label: 'Save',   type: 'primary', handler: submit },
     { label: 'Cancel',                  handler: cancel }
   ]}
@@ -168,7 +170,7 @@ Two consequences:
 ### CRUD Toolbar
 
 ```svelte
-<ActionBar buttons={[
+<ActionBar actions={[
   { label: 'Create', type: 'primary', handler: create },
   { label: 'Edit',                    handler: edit },
   { label: 'Delete', type: 'secondary', handler: remove },
@@ -179,7 +181,7 @@ Two consequences:
 
 ### Custom Content (Snippet)
 
-Bypass `buttons` entirely and render arbitrary content:
+Bypass `actions` entirely and render arbitrary content:
 
 ```svelte
 <ActionBar>
@@ -212,7 +214,7 @@ Bypass `buttons` entirely and render arbitrary content:
   );
 </script>
 
-<ActionBar buttons={actions} />
+<ActionBar actions={actions} />
 ```
 
 ### Conditional Buttons (preserve separators)
@@ -236,7 +238,7 @@ To conditionally show a button without dropping your separators, branch *inside*
   ]);
 </script>
 
-<ActionBar buttons={actions} />
+<ActionBar actions={actions} />
 ```
 
 > Note: if you want a "missing button" to render as *nothing* rather than a separator, wrap the whole ActionBar in your own `{#if}` instead.
@@ -247,7 +249,7 @@ Rendered output:
 
 ```html
 <div class="uniface-action-bar" style="..." data-theme="...">
-  <!-- children OR buttons: -->
+  <!-- children OR actions: -->
   <Button label="..." icon="..." tooltip="..." type="..." disabled={...} />
   <div class="uniface-separator" style="height: 24px;"></div>   <!-- null entry -->
   <Button ... />
@@ -258,7 +260,7 @@ Rendered output:
 
 | Variable | Default | Description |
 |----------|---------|-------------|
-| `--uniface-spacing-actionbar` | (from theme) | Gap between buttons (and between button and separator) |
+| `--uniface-spacing-actionbar` | (from theme) | Gap between actions (and between button and separator) |
 
 Override globally:
 
@@ -273,7 +275,7 @@ Override globally:
 ```svelte
 <!-- Left-aligned, full-width, with padding -->
 <ActionBar
-  buttons={actions}
+  actions={actions}
   style="justify-content: flex-start; width: 100%; padding: 8px 12px; background: #f9fafb;"
 />
 ```
@@ -293,7 +295,7 @@ The ActionBar itself is a plain `<div>` — semantics come from the rendered `<b
 2. **Override `justify-content` and `width`** when the centered + fit-content default doesn't fit (form footers, left-aligned toolbars).
 3. **Pick the right `type`**: `primary` for the main action, `secondary` for neutral/destructive, leave default for tertiary.
 4. **Disable, don't hide, during async work** so the user sees that the action exists but is temporarily unavailable (unless permissions say otherwise).
-5. **Prefer `buttons` over snippet content** for data-driven toolbars — it's serialisable and easier to test.
+5. **Prefer `actions` over snippet content** for data-driven toolbars — it's serialisable and easier to test.
 6. **Keep the array small**; for >8 actions, consider a dropdown menu instead of a wide action bar.
 
 ## Related Components

package/dist/layouts/action_bar/README_CN.md

@@ -1,6 +1,8 @@
 # ActionBar 操作栏组件
 
-一行水平排列的操作按钮，通过 `buttons` 数组声明（或用 snippet 自定义）。数组里写 `null` 会在按钮组之间渲染一条竖直分隔线。
+> **5.1.0 重命名**：本文使用 [API 命名规范](../../../docs/NAMING_CN.md) 中的名字；旧名 `buttons` 已在 5.1.0 移除（5.1.0 不保留兼容别名）。
+
+一行水平排列的操作按钮，通过 `actions` 数组声明（或用 snippet 自定义）。数组里写 `null` 会在按钮组之间渲染一条竖直分隔线。
 
 基于 [Button](../../general/button/README_CN.md) 和 [Separator](../../general/separator/README_CN.md) 构建。
 
@@ -8,7 +10,7 @@
 
 - **数据驱动**：把操作声明为 `ButtonAction[]`，bar 自动渲染
 - **隐式分隔符**：数组里的 `null` → 24px 高的竖直 Separator
-- **或 snippet 内容**：传 children 做完全自定义布局（同时传 `buttons` 和 children 时 children 优先）
+- **或 snippet 内容**：传 children 做完全自定义布局（同时传 `actions` 和 children 时 children 优先）
 - **单按钮禁用**：`ButtonAction.disabled` 透传到底层 Button
 - **全部 ButtonType**：`default` / `primary` / `secondary` / `third` / `forth`
 - **tooltip**：`ButtonAction.tooltip` 以 `data-tip` 形式透传给 Button
@@ -47,19 +49,19 @@ import ActionBar, { type ButtonAction, type ButtonActions } from '@ticatec/unifa
   ];
 </script>
 
-<ActionBar buttons={actions} />
+<ActionBar actions={actions} />
 ```
 
 ## 属性
 
 | 属性 | 类型 | 默认值 | 描述 |
 |------|------|---------|-------------|
-| `buttons` | `ButtonActions`（`Array<ButtonAction \| null>`） | `[]` | 声明式按钮列表。`null` 项渲染为一条竖直 Separator。提供 `children` 时本字段被忽略 |
+| `actions` | `ButtonActions`（`Array<ButtonAction \| null>`） | `[]` | 声明式按钮列表。`null` 项渲染为一条竖直 Separator。提供 `children` 时本字段被忽略 |
 | `style` | `string \| undefined` | `undefined` | 外层 wrapper 的内联 CSS |
 | `theme` | `string \| undefined` | `undefined` | 设为外层 wrapper 的 `data-theme`，便于作用域化 CSS 覆盖 |
-| `children` | `Snippet \| undefined` | `undefined` | 自定义内容。**同时提供 `buttons` 时 children 优先** |
+| `children` | `Snippet \| undefined` | `undefined` | 自定义内容。**同时提供 `actions` 时 children 优先** |
 
-> **children 优先**：同时传了 `buttons` 和内联 children，只会渲染 children，`buttons` 数组被静默忽略。
+> **children 优先**：同时传了 `actions` 和内联 children，只会渲染 children，`actions` 数组被静默忽略。
 
 ## ButtonAction
 
@@ -111,7 +113,7 @@ type ButtonActions = Array<ButtonAction | null>;
   ];
 </script>
 
-<ActionBar buttons={basicActions} />
+<ActionBar actions={basicActions} />
 ```
 
 ### 带图标 + tooltip
@@ -135,7 +137,7 @@ type ButtonActions = Array<ButtonAction | null>;
   ];
 </script>
 
-<ActionBar buttons={iconActions} />
+<ActionBar actions={iconActions} />
 ```
 
 ### 组间加分隔符
@@ -150,14 +152,14 @@ type ButtonActions = Array<ButtonAction | null>;
   ];
 </script>
 
-<ActionBar buttons={actions} />
+<ActionBar actions={actions} />
 ```
 
 ### 表单底部（右对齐 + 全宽）
 
 ```svelte
 <ActionBar
-  buttons={[
+  actions={[
     { label: '保存', type: 'primary', handler: submit },
     { label: '取消',                  handler: cancel }
   ]}
@@ -168,7 +170,7 @@ type ButtonActions = Array<ButtonAction | null>;
 ### CRUD 工具栏
 
 ```svelte
-<ActionBar buttons={[
+<ActionBar actions={[
   { label: '创建', type: 'primary', handler: create },
   { label: '编辑',                  handler: edit },
   { label: '删除', type: 'secondary', handler: remove },
@@ -179,7 +181,7 @@ type ButtonActions = Array<ButtonAction | null>;
 
 ### 自定义内容（snippet）
 
-完全绕开 `buttons`，渲染任意内容：
+完全绕开 `actions`，渲染任意内容：
 
 ```svelte
 <ActionBar>
@@ -212,7 +214,7 @@ type ButtonActions = Array<ButtonAction | null>;
   );
 </script>
 
-<ActionBar buttons={actions} />
+<ActionBar actions={actions} />
 ```
 
 ### 条件按钮（保留分隔符）
@@ -236,7 +238,7 @@ type ButtonActions = Array<ButtonAction | null>;
   ]);
 </script>
 
-<ActionBar buttons={actions} />
+<ActionBar actions={actions} />
 ```
 
 > 注意：如果想让"按钮不显示"渲染为**完全空白**而不是分隔符，自己在外面套 `{#if}` 控制是否渲染整个 ActionBar。
@@ -247,7 +249,7 @@ type ButtonActions = Array<ButtonAction | null>;
 
 ```html
 <div class="uniface-action-bar" style="..." data-theme="...">
-  <!-- children 或 buttons： -->
+  <!-- children 或 actions： -->
   <Button label="..." icon="..." tooltip="..." type="..." disabled={...} />
   <div class="uniface-separator" style="height: 24px;"></div>   <!-- null 项 -->
   <Button ... />
@@ -273,7 +275,7 @@ type ButtonActions = Array<ButtonAction | null>;
 ```svelte
 <!-- 左对齐 + 全宽 + padding -->
 <ActionBar
-  buttons={actions}
+  actions={actions}
   style="justify-content: flex-start; width: 100%; padding: 8px 12px; background: #f9fafb;"
 />
 ```
@@ -293,7 +295,7 @@ ActionBar 本身是普通 `<div>` —— 语义来自内部渲染的 `<button>`
 2. **居中 + fit-content 默认不合适时覆盖 `justify-content` 和 `width`**（表单底部、左对齐工具栏）
 3. **`type` 用对**：主操作 `primary`，中性/危险 `secondary`，再次要的不写
 4. **异步期间 disable 而不是 hide**，让用户看到"操作存在但暂时不可用"（权限场景除外）
-5. **数据驱动工具栏优先用 `buttons`**，可序列化、好测试
+5. **数据驱动工具栏优先用 `actions`**，可序列化、好测试
 6. **数组别太长**，超过 8 个操作考虑改成下拉菜单
 
 ## 相关组件

package/dist/layouts/box/Box.svelte

@@ -5,7 +5,8 @@
         title?: string;
         round?: boolean;
         style?: string;
-        contentStyle?: string;
+        /** 内容区内联样式 */
+        content$style?: string;
         theme?: string;
         children?: Snippet;
         header?: Snippet;
@@ -16,7 +17,7 @@
         title = '',
         round = false,
         style = '',
-        contentStyle = '',
+        content$style = '',
         theme,
         children,
         header,
@@ -36,7 +37,7 @@
             {/if}
         </div>
     {/if}
-    <div class="box-content" style={contentStyle}>
+    <div class="box-content" style={content$style}>
         {#if children}
             {@render children()}
         {/if}

package/dist/layouts/box/Box.svelte.d.ts

@@ -3,7 +3,8 @@ interface Props {
     title?: string;
     round?: boolean;
     style?: string;
-    contentStyle?: string;
+    /** 内容区内联样式 */
+    content$style?: string;
     theme?: string;
     children?: Snippet;
     header?: Snippet;

package/dist/layouts/box/README.md

@@ -1,6 +1,8 @@
 # Box Component
 
-A bordered flex-column container with optional header / footer. The structural building block for cards, panels, and dashboard widgets — Box itself is intentionally minimal (no shadow, no padding); you add visuals via `style` / `contentStyle` and CSS variables.
+> **Renamed in 5.1.0**: this document uses the names from the [API Naming Guide](../../../docs/NAMING.md); the old names `contentStyle` were removed in 5.1.0 (no compatibility aliases are kept).
+
+A bordered flex-column container with optional header / footer. The structural building block for cards, panels, and dashboard widgets — Box itself is intentionally minimal (no shadow, no padding); you add visuals via `style` / `content$style` and CSS variables.
 
 ## Features
 
@@ -9,7 +11,7 @@ A bordered flex-column container with optional header / footer. The structural b
 - **Default children** fill the middle (`flex: 1 1 auto`, `overflow: hidden`)
 - **Optional rounded corners** via `round` prop (sets `border-radius: var(--uniface-box-radius)`)
 - **Outer wrapper clips overflow** — children can't spill out
-- **Per-section styling**: `style` on the outer wrapper, `contentStyle` on the content area only
+- **Per-section styling**: `style` on the outer wrapper, `content$style` on the content area only
 - **Theme hook**: `data-theme="{theme}"` on the outer wrapper
 
 ## Installation
@@ -36,7 +38,7 @@ import Box from '@ticatec/uniface-element/Box';
 </Box>
 ```
 
-> **Box has no built-in padding on the content area.** Wrap your content in its own padded container, or pass `contentStyle="padding: 16px;"`.
+> **Box has no built-in padding on the content area.** Wrap your content in its own padded container, or pass `content$style="padding: 16px;"`.
 
 ## Props
 
@@ -45,7 +47,7 @@ import Box from '@ticatec/uniface-element/Box';
 | `title` | `string` | `''` | Title text rendered inside `.box-header > .title`. Ignored when `header` snippet is provided. Empty string → header block is not rendered (unless `header` snippet is set). |
 | `round` | `boolean` | `false` | Adds the `rounded` class → `border-radius: var(--uniface-box-radius)` |
 | `style` | `string` | `''` | Inline CSS on the outer wrapper (`.uniface-box`) |
-| `contentStyle` | `string` | `''` | Inline CSS on the content area (`.box-content`). Use this for padding so the header/footer aren't affected. |
+| `content$style` | `string` | `''` | Inline CSS on the content area (`.box-content`). Use this for padding so the header/footer aren't affected. |
 | `theme` | `string \| undefined` | `undefined` | Set as `data-theme` on the outer wrapper for scoped CSS overrides |
 | `header` | `Snippet \| undefined` | `undefined` | Custom header content. **Overrides `title` when both are set.** |
 | `children` | `Snippet \| undefined` | `undefined` | Main content |
@@ -81,7 +83,7 @@ If you want the title AND extra content in the header, render the title yourself
 │ .box-header        (if title/header) │  ← user-select: none, ellipsis on title
 ├──────────────────────────────────┤
 │ .box-content       (flex 1, overflow: hidden)
-│   {children}                         │  ← NO built-in padding — add via contentStyle
+│   {children}                         │  ← NO built-in padding — add via content$style
 ├──────────────────────────────────┤
 │ .box-footer        (if footer)       │  ← flex row, user-select: none
 └──────────────────────────────────┘
@@ -156,7 +158,7 @@ Built-in styles:
   import ActionBar from '@ticatec/uniface-element/ActionBar';
 </script>
 
-<Box title="User Profile" contentStyle="padding: 16px;">
+<Box title="User Profile" content$style="padding: 16px;">
   <p>User information and details</p>
 
   {#snippet footer()}
@@ -174,7 +176,7 @@ Built-in styles:
 ### Custom Header (title + action button)
 
 ```svelte
-<Box contentStyle="padding: 16px;">
+<Box content$style="padding: 16px;">
   {#snippet header()}
     <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px 16px;">
       <h3>Sales Overview</h3>
@@ -194,7 +196,7 @@ Built-in styles:
   title="Rounded Card"
   round
   style="box-shadow: 0 2px 8px rgba(0,0,0,0.08);"
-  contentStyle="padding: 16px;"
+  content$style="padding: 16px;"
 >
   <p>This card has rounded corners and a soft shadow.</p>
 </Box>
@@ -240,7 +242,7 @@ Built-in styles:
 ### Footer-Only (no header)
 
 ```svelte
-<Box contentStyle="padding: 16px;">
+<Box content$style="padding: 16px;">
   <p>Content with a footer but no header.</p>
 
   {#snippet footer()}
@@ -287,7 +289,7 @@ Built-in styles:
 - **Title is single-line** (`white-space: nowrap; text-overflow: ellipsis`). Long titles show `…` instead of wrapping.
 - **Header & footer disable text selection** (`user-select: none`) — they're meant for labels/actions, not copyable content.
 - **No shadow by default.** Pass `style="box-shadow: ..."` for a card look.
-- **No content padding by default.** Use `contentStyle="padding: ..."` so the header/footer aren't affected.
+- **No content padding by default.** Use `content$style="padding: ..."` so the header/footer aren't affected.
 
 ## Accessibility
 
@@ -297,7 +299,7 @@ Built-in styles:
 
 ## Best Practices
 
-1. **Add your own content padding** via `contentStyle="padding: ..."`. Box intentionally doesn't pad so the header/footer edges can sit flush with the border.
+1. **Add your own content padding** via `content$style="padding: ..."`. Box intentionally doesn't pad so the header/footer edges can sit flush with the border.
 2. **Use `header` snippet over `title`** as soon as you need icons, action buttons, or a different layout — the snippet takes precedence anyway, so it's clearer.
 3. **Reserve the footer for actions**, not extra content — it has `user-select: none` and is visually separated by background.
 4. **For scrollable content**, wrap your content in its own `<div style="overflow: auto; height: 100%">`. Box's `overflow: hidden` will clip but won't scroll.

package/dist/layouts/box/README_CN.md

@@ -1,6 +1,8 @@
 # Box 容器组件
 
-带可选 header / footer 的边框 flex-column 容器。卡片、面板、仪表盘小部件的结构化基础积木 —— Box 本身故意做得很最小（无阴影、无 padding），视觉效果通过 `style` / `contentStyle` 和 CSS 变量叠加。
+> **5.1.0 重命名**：本文使用 [API 命名规范](../../../docs/NAMING_CN.md) 中的名字；旧名 `contentStyle` 已在 5.1.0 移除（5.1.0 不保留兼容别名）。
+
+带可选 header / footer 的边框 flex-column 容器。卡片、面板、仪表盘小部件的结构化基础积木 —— Box 本身故意做得很最小（无阴影、无 padding），视觉效果通过 `style` / `content$style` 和 CSS 变量叠加。
 
 ## 功能特性
 
@@ -9,7 +11,7 @@
 - **默认 children 填充中间**（`flex: 1 1 auto`、`overflow: hidden`）
 - **可选圆角**通过 `round` prop（设置 `border-radius: var(--uniface-box-radius)`）
 - **外层 wrapper 裁剪溢出** —— 子内容不会溢出
-- **分区样式**：`style` 作用于外层，`contentStyle` 仅作用于内容区
+- **分区样式**：`style` 作用于外层，`content$style` 仅作用于内容区
 - **主题钩子**：外层 wrapper 暴露 `data-theme="{theme}"`
 
 ## 安装
@@ -36,7 +38,7 @@ import Box from '@ticatec/uniface-element/Box';
 </Box>
 ```
 
-> **Box 的内容区不带 padding。** 自己用 padded 容器包内容，或者传 `contentStyle="padding: 16px;"`。
+> **Box 的内容区不带 padding。** 自己用 padded 容器包内容，或者传 `content$style="padding: 16px;"`。
 
 ## 属性
 
@@ -45,7 +47,7 @@ import Box from '@ticatec/uniface-element/Box';
 | `title` | `string` | `''` | 渲染在 `.box-header > .title` 里的标题文字。提供 `header` snippet 时被忽略。空字符串 → 不渲染 header 块（除非提供了 `header` snippet） |
 | `round` | `boolean` | `false` | 加 `rounded` 类 → `border-radius: var(--uniface-box-radius)` |
 | `style` | `string` | `''` | 外层 wrapper（`.uniface-box`）的内联 CSS |
-| `contentStyle` | `string` | `''` | 内容区（`.box-content`）的内联 CSS。padding 写在这里，不影响 header/footer |
+| `content$style` | `string` | `''` | 内容区（`.box-content`）的内联 CSS。padding 写在这里，不影响 header/footer |
 | `theme` | `string \| undefined` | `undefined` | 设为外层 wrapper 的 `data-theme`，便于作用域化 CSS 覆盖 |
 | `header` | `Snippet \| undefined` | `undefined` | 自定义 header 内容。**同时传 `title` 时 snippet 优先** |
 | `children` | `Snippet \| undefined` | `undefined` | 主要内容 |
@@ -81,7 +83,7 @@ header 块在 `title` 非空**或** `header` snippet 提供**任一满足**时
 │ .box-header        (title/header 提供时) │  ← user-select: none，title 加省略号
 ├──────────────────────────────────┤
 │ .box-content       (flex 1，overflow: hidden)
-│   {children}                         │  ← 默认无 padding，靠 contentStyle 加
+│   {children}                         │  ← 默认无 padding，靠 content$style 加
 ├──────────────────────────────────┤
 │ .box-footer        (footer 提供时)      │  ← flex row，user-select: none
 └──────────────────────────────────┘
@@ -156,7 +158,7 @@ header 块在 `title` 非空**或** `header` snippet 提供**任一满足**时
   import ActionBar from '@ticatec/uniface-element/ActionBar';
 </script>
 
-<Box title="用户资料" contentStyle="padding: 16px;">
+<Box title="用户资料" content$style="padding: 16px;">
   <p>用户信息和详情</p>
 
   {#snippet footer()}
@@ -174,7 +176,7 @@ header 块在 `title` 非空**或** `header` snippet 提供**任一满足**时
 ### 自定义标题（标题文字 + 操作按钮）
 
 ```svelte
-<Box contentStyle="padding: 16px;">
+<Box content$style="padding: 16px;">
   {#snippet header()}
     <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px 16px;">
       <h3>销售概览</h3>
@@ -194,7 +196,7 @@ header 块在 `title` 非空**或** `header` snippet 提供**任一满足**时
   title="圆角卡片"
   round
   style="box-shadow: 0 2px 8px rgba(0,0,0,0.08);"
-  contentStyle="padding: 16px;"
+  content$style="padding: 16px;"
 >
   <p>这个卡片有圆角和柔和阴影。</p>
 </Box>
@@ -240,7 +242,7 @@ header 块在 `title` 非空**或** `header` snippet 提供**任一满足**时
 ### 仅 footer（无 header）
 
 ```svelte
-<Box contentStyle="padding: 16px;">
+<Box content$style="padding: 16px;">
   <p>有 footer 但无 header 的内容。</p>
 
   {#snippet footer()}
@@ -287,7 +289,7 @@ header 块在 `title` 非空**或** `header` snippet 提供**任一满足**时
 - **title 单行**（`white-space: nowrap; text-overflow: ellipsis`）。长 title 显示 `…` 而不是换行
 - **header 和 footer 禁用文本选中**（`user-select: none`）—— 它们是标签/操作，不是可复制内容
 - **默认无阴影。** 传 `style="box-shadow: ..."` 走卡片视觉
-- **默认无内容 padding。** 用 `contentStyle="padding: ..."`，不影响 header/footer
+- **默认无内容 padding。** 用 `content$style="padding: ..."`，不影响 header/footer
 
 ## 无障碍访问
 
@@ -297,7 +299,7 @@ header 块在 `title` 非空**或** `header` snippet 提供**任一满足**时
 
 ## 最佳实践
 
-1. **内容 padding 自己加**，用 `contentStyle="padding: ..."`。Box 故意不加，好让 header/footer 边缘与边框对齐
+1. **内容 padding 自己加**，用 `content$style="padding: ..."`。Box 故意不加，好让 header/footer 边缘与边框对齐
 2. **一旦需要图标、操作按钮或不同布局，就用 `header` snippet 替代 `title`** —— 反正 snippet 优先，显式更清楚
 3. **footer 留给操作**，不是额外内容 —— 它带 `user-select: none`，视觉上也有背景区分
 4. **需要滚动的内容**自己在 children 里包 `<div style="overflow: auto; height: 100%">`。Box 的 `overflow: hidden` 只裁不滚

package/dist/layouts/form_field/FormField.svelte

@@ -2,7 +2,7 @@
 
     import type {Snippet} from "svelte";
     import {getLayoutMode} from "../../unifaceContext";
-    import type {FieldLayout} from "../../types";
+    import type {Direction} from "../../types";
     interface Props {
         style?: string;
         theme?: string;
@@ -12,7 +12,8 @@
         label$alignment?: 'center' | 'top',
         autoHeight?: boolean;
         required?: boolean;
-        layout?: FieldLayout;
+        /** 标签与控件的排布方向 */
+        direction?: Direction;
         class?: string;
         children: Snippet;
     }
@@ -28,11 +29,11 @@
         class: className,
         children,
         autoHeight,
-        layout = getLayoutMode()
+        direction = getLayoutMode(),
     }: Props = $props();
 
 </script>
-<div class="uniface-form-field {layout} {className}" data-theme={theme} class:fit-height={autoHeight} style={style}>
+<div class="uniface-form-field {direction} {className}" data-theme={theme} class:fit-height={autoHeight} style={style}>
     <div class="form-content">
         <div class="field-label {label$alignment=='top' ? 'vert-top' : ''}" style={label$style}>
             {#if required}

package/dist/layouts/form_field/FormField.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from "svelte";
-import type { FieldLayout } from "../../types";
+import type { Direction } from "../../types";
 interface Props {
     style?: string;
     theme?: string;
@@ -9,7 +9,8 @@ interface Props {
     label$alignment?: 'center' | 'top';
     autoHeight?: boolean;
     required?: boolean;
-    layout?: FieldLayout;
+    /** 标签与控件的排布方向 */
+    direction?: Direction;
     class?: string;
     children: Snippet;
 }

package/dist/layouts/form_field/README.md

@@ -1,5 +1,7 @@
 # FormField Component
 
+> **Renamed in 5.1.0**: this document uses the names from the [API Naming Guide](../../../docs/NAMING.md); the old names `layout` were removed in 5.1.0 (no compatibility aliases are kept).
+
 A form-field wrapper that places a label next to (or above) a single child control, with required-marker, suffix, alignment, and auto-height support. The richer sibling of [CriteriaField](../criteria_field/README.md) — supports both vertical and horizontal layouts, inherits layout from context, and is designed for editing forms (not just filter rows).
 
 ## Features
@@ -46,18 +48,18 @@ The default layout comes from `getLayoutMode()` (Svelte context). If no ancestor
 | `label` | `string` | _(required)_ | Label text. `labelSuffix` is appended directly to this string inside the same `<span>`. |
 | `required` | `boolean` | `false` | Renders a red `*` before the label text |
 | `labelSuffix` | `string` | `':'` | String appended after the label text. Pass `""` to drop the colon. |
-| `label$alignment` | `'center' \| 'top'` | `'center'` | Label vertical alignment **in horizontal layout only**. `top` aligns the label with the field's first line (useful for textareas). Ignored in vertical layout. |
+| `label$alignment` | `'center' \| 'top'` | `'center'` | Label vertical alignment **in horizontal direction only**. `top` aligns the label with the field's first line (useful for textareas). Ignored in vertical direction. |
 | `label$style` | `string \| undefined` | `undefined` | Inline CSS on the label `<div>` |
-| `autoHeight` | `boolean` | `false` | Makes the outer wrapper and content area `height: 100%`. The field flexes to fill height in vertical layout. |
-| `layout` | `'vertical' \| 'horizontal'` | `getLayoutMode()` | Layout mode. Defaults from context, falls back to `'vertical'`. |
+| `autoHeight` | `boolean` | `false` | Makes the outer wrapper and content area `height: 100%`. The field flexes to fill height in vertical direction. |
+| `direction` | `'vertical' \| 'horizontal'` | `getLayoutMode()` | Layout mode. Defaults from context, falls back to `'vertical'`. |
 | `style` | `string` | `''` | Inline CSS on the outer wrapper |
-| `class` | `string` | `''` | Extra CSS class on the outer wrapper (in addition to `uniface-form-field {layout}`) |
+| `class` | `string` | `''` | Extra CSS class on the outer wrapper (in addition to `uniface-form-field {direction}`) |
 | `theme` | `string \| undefined` | `undefined` | Set as `data-theme` on the outer wrapper |
 | `children` | `Snippet` |  | The actual form control |
 
 ## Layout
 
-Controlled by `layout` (or context). Two modes:
+Controlled by `direction` (or context). Two modes:
 
 ### Vertical (default)
 
@@ -106,7 +108,7 @@ Useful for `MemoEditor` and other tall controls that should fill their container
 ### Top-Aligned Label (for Textareas)
 
 ```svelte
-<FormField label="Description" label$alignment="top" layout="horizontal">
+<FormField label="Description" label$alignment="top" direction="horizontal">
   <MemoEditor placeholder="Enter description..." rows={6} />
 </FormField>
 ```
@@ -128,7 +130,7 @@ Without `label$alignment="top"`, the label centers vertically against the textar
 
 ```svelte
 <div style="height: 320px;">
-  <FormField label="Notes" autoHeight layout="vertical">
+  <FormField label="Notes" autoHeight direction="vertical">
     <MemoEditor placeholder="Enter notes..." />
   </FormField>
 </div>
@@ -139,7 +141,7 @@ The MemoEditor fills the 320px container.
 ### Forced Horizontal Layout (Ignores Context)
 
 ```svelte
-<FormField label="Code" layout="horizontal" labelSuffix="">
+<FormField label="Code" direction="horizontal" labelSuffix="">
   <TextEditor bind:value={code} />
 </FormField>
 ```
@@ -224,7 +226,7 @@ When `autoHeight={true}`, the outer wrapper also gets `class:fit-height`.
 - **Label is not associated with the field** via `<label for="...">`. Same a11y caveat as CriteriaField — see below.
 - **`labelSuffix` is glued to label** inside the same `<span>` — no separator space.
 - **Required `*` is rendered before the label**, not after. So `required` + `label="Name"` + `labelSuffix=":"` produces `*Name:`.
-- **Layout comes from context by default.** Ancestors can call `setLayoutMode('horizontal')` to flip the whole form. The `layout` prop overrides per-field.
+- **Layout comes from context by default.** Ancestors can call `setLayoutMode('horizontal')` to flip the whole form. The `direction` prop overrides per-field.
 - **Label is non-selectable** (`user-select: none`) — different from CriteriaField, where labels are selectable.
 - **Long labels**: vertical mode truncates with `…`; horizontal mode wraps (`white-space: normal`) unless `autoHeight` is also on (then it becomes `white-space: wrap`).